`
nianshi
  • 浏览: 420715 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

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

    博客分类：
  • Flex
FlexAdobeXMLFlash.net 
阅读更多

 

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

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


DataGrid,List和Tree控件包含editable属性。如果把这个属性设置为true，那么用户就可以编辑这个控件的内容。默认情况下，editable属性等于false，这意味着你将不能编辑单元格


有很多种途径创建和使用列表编辑器：

使用默认列表编辑器

使用drop in 列表编辑器

创建内联列表编辑器

创建可重用的列表编辑器

使用一个组件作为列表编辑器


使用默认列表编辑器

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


默认的列表编辑器是TextInput控件。所以editorDataField 的默认值是text,相当与TextInput控件的text属性。


下边的例子包含一个editable属性被置为true的DataGrid控件。这个例子没有使用自定义的列表编辑器，所以DataGrid控件使用了默认的列表编辑器。通过单击后显示的TextInput控件，你可以在每个字段内修改值


提示：对于DataGrid控件，把editable属性的值置为true可以使网格中的所有列处于可编辑状态。也可以设置DataGridColumn的editable属性为false，从而是任何一个列处于不可编辑状态


例子

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

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


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

 

 

分享到：
| Flex 3快速入门（15）: 构建高级用户界面 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    flex入门练习

    5. **Flex组件库**：Flex提供了一系列预定义的组件，如按钮、文本框、面板等，方便快速构建用户界面。开发者可以通过自定义组件来扩展功能。 6. **事件处理**：在Flex中，事件是驱动用户界面交互的关键。事件监听器...

    Flex3 \2中文帮助文档

    4. **Flex Component Kit**: Flex提供了一套丰富的预建UI组件，如按钮、表单、面板、数据网格等，这些组件可快速构建用户界面，且具有高度可定制性。 5. **数据绑定**: Flex支持数据绑定，允许视图组件自动反映模型...

    Flex3中文PDF教程

    3. **组件库**：Flex3提供了一个丰富的组件库，包括按钮、文本框、列表等常见UI元素，这些组件可以快速构建出美观且功能丰富的用户界面。 4. **布局管理器**：Flex3支持各种布局管理器，如垂直布局、水平布局、网格...

    flex精通 flex接口

    3. **数据绑定**：获取的数据可以绑定到Label、DataGrid、TextArea和LinkButton等控件上，以便在用户界面中展示。 通过以上步骤，不仅可以创建出功能完整的Flex应用程序，还能学习到如何有效地管理和显示远程数据，...

    flex中文帮助 flex入门教程

    Flex提供了一个强大的组件库，包括按钮、文本输入、数据网格、图表等，这些组件可以快速构建用户界面。例如，`mx:Button`用于创建按钮，`mx:TextInput`用于创建文本输入框，`mx:DataGrid`用于展示数据网格。 五、...

    Flex中文教程

    4. **Flex组件库**：Flex SDK包含了大量的预定义组件，如按钮、文本输入框、列表、面板等，这些组件可以快速构建用户界面，并且高度可定制。 5. **数据绑定**：Flex支持数据绑定，这意味着视图组件的状态可以直接与...

    Flex3与Rails结合

    此案例不仅展示了这两种技术如何协同工作，还揭示了它们在构建交互式用户界面方面的潜力。 #### 安装开发环境 构建Flex3与Rails结合的应用，首先需要搭建一个包含Ruby、Rails、FlexBuilder3、MySQL和RadRails的...

    FLEX教程码源集合

    - **组件模型**：Flex拥有丰富的组件库，如Button、TextArea、List等，这些都是构建用户界面的基本元素。了解它们的属性、事件和方法，能帮助你高效地构建界面。 - **数据绑定**：FLEX中的数据绑定机制允许UI组件的...

    我的第一个flex项目

    本项目旨在介绍如何创建一个简单的Flex应用，以帮助初学者快速入门。在这个过程中，我们将探讨Flex开发环境的搭建、基本组件的使用以及程序的编译与运行。 一、Flex开发环境 在开始Flex项目之前，我们需要安装...

    Flex入门基础教程

    2. **技术选型**：使用MXML和ActionScript构建用户界面，并通过网络API获取实时天气数据。 3. **开发步骤**： - 设计UI布局：使用VBox和Label组件展示天气信息。 - 编写ActionScript代码：实现网络请求逻辑，处理...

    FLEX入门及集成其他框架教程

    通过MXML可以方便地创建复杂的用户界面。 **ActionScript**：这是一种面向对象的脚本语言，用于编写程序逻辑和实现复杂的业务处理。ActionScript 3.0是FLEX的核心语言，它提供了丰富的API来控制程序行为。 #### 三...

    Flex入门教程

    Flex入门教程是针对Adobe Flex这一开发框架的基础学习资料，旨在帮助初学者快速掌握Flex开发，以便轻松地构建富互联网应用程序（RIAs）。Flex是基于ActionScript 3.0的开放源代码框架，它允许开发者使用MXML和...

    FlashBuilder4快速入门（中文）

    《FlashBuilder4快速入门（中文）》是一本针对初学者的指南，旨在帮助读者迅速掌握Adobe FlashBuilder 4这一强大的Flex应用开发工具。FlashBuilder 4是基于Eclipse平台的集成开发环境（IDE），专为构建富互联网应用...

    Flex入门开发实例pdf

    Flex是Adobe公司推出的一种用于构建富互联网应用（RIA，Rich Internet Applications）的开源框架，它主要基于ActionScript和MXML语言，提供了强大的图形用户界面设计和编程能力。本实例教程将帮助初学者深入理解Flex...

    FLEX 编程入门教程及操作说明

    Flex Builder 3是本教程关注的版本，它提供了一流的代码编辑、调试和项目管理功能，使得开发者能够高效地构建用户界面和业务逻辑。 在"Flex中文帮助No4章A.pdf"中，你可能会学习到Flex应用的基础结构，包括MXML和...

    Flex入门学习文档

    Flex是一种用于构建富互联网应用程序（RIA）的技术，它允许开发者创建具有动态用户界面和交互性的Web应用。 首先，我们要进行Flex环境的搭建。这个过程涉及到几个关键步骤： 1. 下载并解压`FlexModule_j2ee.zip`...

    flex4 权威教程 中文版 入门

    它提供了强大的用户界面（UI）组件库以及高级数据可视化功能，支持开发者使用ActionScript 3.0编写高性能的应用程序。 - **Flex4开发环境搭建**： - 安装Adobe Flash Builder或使用文本编辑器配合命令行工具。 - ...

    Flex中文帮助No4章.pdf

    - **编辑主程序文件**：打开`Lessons.mxml`文件，在其中添加必要的MXML代码以构建用户界面。例如，可以通过以下代码创建一个简单的面板容器和欢迎标签： ```xml &lt;mx:Panel title="My Application" width="200" ...

    Flex4视频教程_01-01视频总览.rar

    2. **Flash Builder介绍**：如何安装和设置Flash Builder，以及它的界面布局，包括代码编辑器、项目浏览器、调试器等关键功能。 3. **MXML与ActionScript**：解释MXML和ActionScript两种主要编程语言在Flex中的角色...

    FLEX入门教程

    Flex是一个开源的开发工具，主要面向开发人员，提供了丰富的用户界面组件库，能够快速构建具有复杂图形和数据可视化功能的Web应用。Flex应用程序通常运行在Adobe Flash Player或Adobe AIR运行时环境中。 2. **...

Magicbox
Global site tag (gtag.js) - Google Analytics