在线咨询
内容搜索

flex高级用户界面--创建项目编辑器

发布时间：2025-12-10 11:47:57 浏览次数：2

条目编辑器使你可以修改列表空间中每一个小单元的值。DataGrid,List和Tree空间支持条目编辑器。

连接：Adobe® Flex™也支持条目渲染器——制定组件如何显sdfs示数据。更多的信息请查看快速入门指南中的Using item renderers

默认的，Flex认为列表编辑器向列表控件返回单一的值。你可以使用列表控件的editorDataField 属性来指定一个包含新值的列表编辑器的属性。Flex会把值转换成适当的数据类型。

数据模型(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>

<?xml version="1.0" encoding="utf-8"?>
<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"
    />

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>标签，可以创建一个组件作为内联条目编辑器。从而可以避免这个问题，是条目编辑器更灵活。

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>

<?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属性就可以使用了。

 

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属性的值。

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


<?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>


<?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>

转载于:https://www.cnblogs.com/thinkBlue/archive/2012/03/06/2382369.html

上一篇：燃气热水器和电热水器哪个好 燃气热水器和电热水器对比 下一篇：VS2013 Codejock 实现 MFC 换肤
需要做网站？需要网络推广？欢迎咨询客户经理 13272073477

免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）

Copyright © 格特瑞商务咨询-贵州做网站公司 版权所有 | 黔ICP备19002813号-1