Flex 三快速入门（16）: 构建高级用户界面 创建项目编辑器

Flex 3快速入门（16）: 构建高级用户界面 创建项目编辑器

?

<mx:Application
??? xmlns:mx="http://www.adobe.com/2006/mxml"
??? viewSourceURL="src/ItemEditorDefault/index.html"

??? width="450" height="140"???
>
???
??? <mx:Model id="artwork" source="model/artwork.xml"/>

??? <mx:DataGrid
??????? rowCount="4"
??????? dataProvider="{artwork.piece}"
??????? editable="true"
??? />

</mx:Application>

使用Drop-in条目编辑器
自定义条目编辑器最简单的方式是使用Drop-in条目编辑器。Drop-in条目编辑器是一个Flex组件。基于list的控件，比如List,Tree,ComboBox或者DataGrid，的itemEditor属性可以指定Drop-in条目编辑器。例如，可以使用Numericstepper控件来编辑DataGrid控件的一个字段。

要把一个组件作为Drop-in条目编辑器，这个空间必须实现IDropInListItemRenderer接口。实现IDropInListItemRenderer接口的控件有：Button, CheckBox, DateField, Image, Label, NumericStepper, Text, TextArea, and TextInput.这些控件可以直接作为条目编辑器或条目渲染器使用。

你可以自定义组件作为条目编辑器。唯一的要求是自定义组件也实现了IDropInListItemRenderer接口。

在下边的例子中,使用NumericStepper控件，作为DateGrid控件一个字段的条目编辑器，这样用户就可以方便的修改数量字段。单击单元格可以激活Quantiy列的条目编辑器。这个例子还是用了Image控件作为条目渲染器来显示艺术品的缩略图。

注意:此例中，使用DataGridColumn 对象的editorXOffset, editorYOffset, editorWidthOffset and editorHeightOffset属性来定义NumericStepper 在单元格中的大小和位置。

例子

Data model (artwork.xml)

<artwork>
??? <piece>
??????? <name>The Wall</name>
??????? <image>artwork1.jpg</image>
??????? <price>250</price>
??????? <quantity>5</quantity>
??? </piece>
???
??? <piece>
??????? <name>Blue Flake</name>
??????? <image>artwork5.jpg</image>
??????? <price>400</price>
??????? <quantity>2</quantity>
??? </piece>
???
??? <piece>
??????? <name>Butterfly</name>
??????? <image>artwork6.jpg</image>
??????? <price>375</price>
??????? <quantity>17</quantity>
??? </piece>
</artwork>

?

MXML files

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
??? xmlns:mx="http://www.adobe.com/2006/mxml"

??? viewSourceURL="src/ItemEditorDropIn/index.html"
??? width="470" height="340"
>
??? <mx:Model id="artwork" source="model/artwork.xml"/>

???
??? <mx:DataGrid
??????? id="artGrid"
??????? rowCount="10" variableRowHeight="true"
??????? dataProvider="{artwork.piece}"

??????? editable="true"
??? >
??????? <mx:columns>
???????
??????????? <!-- Drop-in item renderer: Image control -->
??????????? <mx:DataGridColumn
??????????????? dataField="image" headerText="Image"
??????????????? itemRenderer="mx.controls.Image"
??????????? />

???????????
??????????? <mx:DataGridColumn headerText="Name" dataField="name"/>
??????????? <mx:DataGridColumn headerText="Price" dataField="price"/>

???????????
??????????? <!-- Drop-in item editor: NumericStepper control -->
??????????? <mx:DataGridColumn
??????????????? headerText="Quantity"
??????????????? dataField="quantity"
??????????????? itemEditor="mx.controls.NumericStepper"

??????????????? editorDataField="value"
??????????????? editorXOffset="22"
??????????????? editorYOffset="25"
??????????????? editorWidthOffset="-40"
??????????????? editorHeightOffset="-50"

??????????? />

??????? </mx:columns>
??? </mx:DataGrid>
???
??? <mx:LinkButton
??????? textAlign="center"

??????? label="Photos (c) 2006 geishaboy500 (CC Attribution License)"
??????? click="{navigateToURL(new URLRequest(&apos;http://www.flickr.com/photos/geishaboy500/&apos;));}"

??? />
???
??? <mx:Script>
??????? <![CDATA[
??????????? import flash.net.navigateToURL;
??????? ]]>

??? </mx:Script>
???
</mx:Application>

?

?

创建内联条目编辑器
Drop-in条目编辑器使用起来非常简单。但有主要缺点是你不能配置。通过<mx:Component>标签，可以创建一个组件作为内联条目编辑器。从而可以避免这个问题，是条目编辑器更灵活。

在下边的例子中，创建了一个包含NumericStepper控件的内联编辑器。因为此例中使用了内联编辑器，所以，可以设置NumericStepper的maximum和stepSize属性。

例子

Data model (artwork.xml)

<artwork>
??? <piece>
??????? <name>The Wall</name>
??????? <image>artwork1.jpg</image>
??????? <price>250</price>
??????? <quantity>5</quantity>
??? </piece>
???
??? <piece>
??????? <name>Blue Flake</name>
??????? <image>artwork5.jpg</image>
??????? <price>400</price>
??????? <quantity>2</quantity>
??? </piece>
???
??? <piece>
??????? <name>Butterfly</name>
??????? <image>artwork6.jpg</image>
??????? <price>375</price>
??????? <quantity>17</quantity>
??? </piece>
</artwork>

MXML file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
??? xmlns:mx="http://www.adobe.com/2006/mxml"

??? viewSourceURL="src/ItemEditorInline/index.html"
??? width="525" height="525"
>
??? <mx:Model id="artwork" source="model/artwork.xml"/>

???
??? <mx:DataGrid
??????? rowCount="3" variableRowHeight="true"
??????? dataProvider="{artwork.piece}"
??????? editable="true"

??? >
??????? <mx:columns>
???????
??????????? <!-- Inline item renderer: Image control -->???????
??????????? <mx:DataGridColumn
??????????????? dataField="image" headerText="Image"
??????????????? width="150"

??????????? >
??????????????? <mx:itemRenderer>
??????????????????? <mx:Component>
??????????????????????? <mx:VBox
??????????????????????????? width="100%" height="140"

??????????????????????????? horizontalAlign="center" verticalAlign="middle"
??????????????????????? >
??????????????????????????? <mx:Image source="{&apos;assets/&apos;+data.image}"/>

??????????????????????????? <mx:Label text="{data.image}" />
??????????????????????? </mx:VBox>
??????????????????? </mx:Component>
??????????????? </mx:itemRenderer>

??????????? </mx:DataGridColumn>
???????????
??????????? <mx:DataGridColumn headerText="Name" dataField="name"/>
??????????? <mx:DataGridColumn headerText="Price" dataField="price"/>

??????????? <!-- Inline item editor: NumericStepper -->???????????
??????????? <mx:DataGridColumn
??????????????? headerText="Quantity"
??????????????? dataField="quantity"
??????????????? editorDataField="value"

??????????? >
??????????????? <mx:itemEditor>
??????????????????? <mx:Component>
??????????????????????? <mx:NumericStepper
??????????????????????????? maximum="100" stepSize="10"

??????????????????????? />
??????????????????? </mx:Component>
??????????????? </mx:itemEditor>
??????????? </mx:DataGridColumn>

??????? </mx:columns>
??? </mx:DataGrid>

???
??? <mx:LinkButton
??????? textAlign="center"
??????? label="Photos (c) 2006 geishaboy500 (CC Attribution License)"
??????? click="{navigateToURL(new URLRequest(&apos;http://www.flickr.com/photos/geishaboy500/&apos;));}"

??? />
???
??? <mx:Script>
??????? <![CDATA[
??????????? import flash.net.navigateToURL;
??????? ]]>

??? </mx:Script>
???
</mx:Application>

?

?

?

创建一个可重用的内联条目编辑器
在应用程序中，可以定义可重用的条目编辑器在多处使用。使用设置了id属性的<mx:Component>标记，可以创建可重用的内联条目编辑器，绑定组件的itemEditor属性到id属性就可以使用了。

?

通过把可重用的内联条目编辑器统一放到程序中的一个位置，可以提交程序的可维护性。即使你没有多次使用条目编辑器。

此例中，使用NumericStepper控件创建了一个可重用的内联条目编辑器。

例子

Data model (artwork.xml)

<artwork>??? <piece>??????? <name>The Wall</name>??????? <image>artwork1.jpg</image>??????? <price>250</price>??????? <quantity>5</quantity>??? </piece>??????? <piece>??????? <name>Blue Flake</name>??????? <image>artwork5.jpg</image>??????? <price>400</price>???????? <quantity>2</quantity>??? </piece>??????? <piece>??????? <name>Butterfly</name>??????? <image>artwork6.jpg</image>??????? <price>375</price>??????? <quantity>17</quantity>??? </piece></artwork>
MXML file
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
??? xmlns:mx="http://www.adobe.com/2006/mxml"

??? viewSourceURL="src/ItemEditorReusable/index.html"
??? width="525" height="525"
>
??? <mx:Model id="artwork" source="model/artwork.xml"/>

??? <!-- Reusable inline item editor -->
??? <mx:Component id="NumericStepEditor">
??????? <mx:NumericStepper
??????????? maximum="100" stepSize="10"

??????? />
??? </mx:Component>

??? <!-- Reusable inline item renderer -->
??? <mx:Component id="ImageRenderer">

??????? <mx:VBox
??????????? width="100%" height="140"
??????????? horizontalAlign="center" verticalAlign="middle"
??????? >

??????????? <mx:Image source="{&apos;assets/&apos;+data.image}"/>
??????????? <mx:Label text="{data.image}"/>

??????? </mx:VBox>
??? </mx:Component>

???????
??? <mx:DataGrid
??????? rowCount="3" variableRowHeight="true"
??????? dataProvider="{artwork.piece}"

??????? editable="true"
??? >

??????? <mx:columns>
??????????? <mx:DataGridColumn
??????????????? dataField="image" headerText="Image" width="150"

??????????????? itemRenderer="{ImageRenderer}"
??????????? />
??????????? <mx:DataGridColumn headerText="Name" dataField="name"/>

??????????? <mx:DataGridColumn headerText="Price" dataField="price"/>???????????
??????????? <mx:DataGridColumn
??????????????? headerText="Quantity"
??????????????? dataField="quantity"

??????????????? itemEditor="{NumericStepEditor}"
??????????????? editorDataField="value"
??????????? >
??????????? </mx:DataGridColumn>
??????? </mx:columns>

???????
??? </mx:DataGrid>
???
??? <mx:LinkButton
??????? textAlign="center"
??????? label="Photos (c) 2006 geishaboy500 (CC Attribution License)"
??????? click="{navigateToURL(new URLRequest(&apos;http://www.flickr.com/photos/geishaboy500/&apos;));}"

??? />
???
??? <mx:Script>
??????? <![CDATA[
??????????? import flash.net.navigateToURL;
??????? ]]>

??? </mx:Script>
???
</mx:Application>

?

?

使用组件作为条目编辑器
通过创建多个小且封装良好的块，可以提高程序的可维护和可扩展性。在Flex中，通过自定义组件可以遵循这一标准流程。
自定义组件的方式之一是使用mxml文件。在一个自定义组件的mxml文档中，更标签必须是Application以外的其他Flex组件。
在下边的例子中，抽取包含Image和Label控件的条目渲染器和包含NumericStepper控件的条目编辑器到mxml文档中，作为自定义组件。
使用条目渲染器的方法是指定它的文件名作为itemRenderer属性的值。类似地，指定条目编辑器的文件名作为itemEditor属性的值。

提示：使用可重用的内联条目编辑器的时候，使用数据绑定把控件绑定到条目渲染器上。当你使用一个组件作为条目编辑器的时候，就不必使用数据绑定了。而是使用自定义组件的名字作为条目编辑器。

例子
NumericStepEditor component

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
??? xmlns:mx="http://www.adobe.com/2006/mxml"
??? horizontalAlign="center" verticalAlign="middle"

>
??? <mx:Script>
??????? <![CDATA[
??????????? // Expose the editor&apos;s value
??????????? public function get newQuantity ():uint
??????????? {

??????????????? return myStepper.value;
??????????? }
??????? ]]>
??? </mx:Script>

??? <mx:NumericStepper
??????? id="myStepper"
??????? maximum="100"
??????? stepSize="1"

??????? value="{data.quantity}"
??? />
</mx:VBox>

ImageRenderer component
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
??? xmlns:mx="http://www.adobe.com/2006/mxml"
??? horizontalAlign="center" verticalAlign="middle"

??? width="100%" height="140"
>
??? <mx:Image source="{'assets/'+data.image}"/>

??? <mx:Label text="{data.image}"/>
</mx:VBox>

Main application file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
??? xmlns:mx="http://www.adobe.com/2006/mxml"
??? viewSourceURL="src/ItemEditorComponent/index.html"

??? width="525" height="525"
>
??? <mx:Model id="artwork" source="model/artwork.xml"/>

??? <mx:DataGrid
??????? rowCount="3" variableRowHeight="true"
??????? dataProvider="{artwork.piece}"
??????? editable="true"

??? >
??????? <mx:columns>
???????????
??????????? <!-- Use the ImageRenderer custom component as an item renderer -->
??????????? <mx:DataGridColumn
??????????????? dataField="image" headerText="Image" width="150"

??????????????? itemRenderer="ImageRenderer"
??????????? />
???????????
??????????? <mx:DataGridColumn headerText="Name" dataField="name"/>

??????????? <mx:DataGridColumn headerText="Price" dataField="price"/>???????????

??????????? <!--
??????????????? Use the NumericStepRenderer custom component
??????????????? as an item renderer.
??????????? -->
??????????? <mx:DataGridColumn
??????????????? headerText="Quantity"
??????????????? dataField="quantity"

??????????????? itemEditor="NumericStepEditor"
??????????????? editorDataField="newQuantity"
??????????? >
??????????? </mx:DataGridColumn>
???????
??????? </mx:columns>
??? </mx:DataGrid>

???
??? <mx:LinkButton
??????? textAlign="center"
??????? label="Photos (c) 2006 geishaboy500 (CC Attribution License)"
??????? click="{navigateToURL(new URLRequest(&apos;http://www.flickr.com/photos/geishaboy500/&apos;));}"

??? />
???
??? <mx:Script>
??????? <![CDATA[
??????????? import flash.net.navigateToURL;
??????? ]]>

??? </mx:Script>
???
</mx:Application>

?

?

查看更多 下一篇