理解项目编辑器---part1:创建项目编辑器

最新推荐文章于 2023-04-01 13:12:22 发布
最新推荐文章于 2023-04-01 13:12:22 发布
阅读量571 收藏
点赞数
分类专栏： flex 文章标签： datagrid application image encoding flex import

条目编辑器使你可以修改列表空间中每一个小单元的值。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>

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【spark on k8s】部署问题
echo245的博客
07-15 590
部署spark任务在Kubernetes上报错 使用官方案例部署失败 `21/07/14 02:19:14 WARN NativeCodeLoader: Unable to load native-hadoop library for your platform… using builtin-java classes where applicable Using Spark’s default log4j profile: org/apache/spark/log4j-defaults.properties
Dj-Audio-Mixer-Part-1:在 Expo 和 Output + Code 中制作 ------------->
05-31
当您准备好查看 Expo 提供的所有内容时（或者如果您想使用自己的编辑器），您可以导出您的项目并将其与。 在 Snack 中创建的所有项目都是公开可用的，因此您可以通过链接轻松共享该项目的链接，或使用“嵌入”按钮...
Flex 3快速入门: 构建高级用户界面 创建项目编辑器
lihe111的专栏
09-07 2114
本文来自：http://www.airia.cn/FLEX_Directory/creating_item_editors_cn/条目编辑器使你可以修改列表空间中每一个小单元的值。DataGrid,List和Tree空间支持条目编辑器。连接：Adobe® Flex™也支持条目渲染器——制定组件如何显sdfs示数据。更多的信息请查看快速入门指南中的Using item renderers
SpringBoot中MainApplication文件位置
花落因为花开过的博客
04-01 571
这时候我们就需要排查一下启动类的存放位置。因为@SpringBootApplication默认的扫描位置就是Application所在的同级目录和子目录。这个 MainApp 类必须在放在整个项目的最根目录,Spring 在扫描注解的时候是扫描。如果出现springboot的项目启动正常，访问资源的时候却是404。搭建 SpringBoot 项目时有一个主程序入口类.,如果其他类放在了高于这个类或其他目录下就会扫描不到.
迁移到Spark Operator和S3的4个集成步骤
lfcncf的博客
01-21 471
2020年CNCF中国云原生调查 10人将获赠CNCF商店$100美元礼券！ 你填了吗？ 问卷链接（https://www.wjx.cn/jq/97146486.aspx） 客座文章作者：万事达卡首席软件开发工程师Allison Richardet 在万事达，内部云团队维护我们的Kubernetes平台。我们的工作包括维护Kubernetes集群，这是我们所依赖的核心部署，并为租户提供了日志、监控等服务，并为租户提供了良好的体验。 我们的租户之一，数据仓库团队，曾经在YARN和HDFS上使用过原生Apa
Buzzer-App-Part-3:Buzzer App Part -3在Expo上查看---------------->
05-27
当您准备好查看Expo提供的所有内容时（或者如果您想使用自己的编辑器），可以导出您的项目并将其与。 在Snack中创建的所有项目都是公开可用的，因此您可以轻松地通过链接共享与此项目的链接，或使用“嵌入”按钮将...
Buzzer-App-Part-2:在世博会上做到了------>
05-31
当您准备好查看 Expo 提供的所有内容时（或者如果您想使用自己的编辑器），您可以导出您的项目并将其与。 在 Snack 中创建的所有项目都是公开可用的，因此您可以通过链接轻松共享该项目的链接，或使用“嵌入”按钮...
Dj-Audio-Mixer-Part-3:在Expo和Output + Code上取得（在电话上收听）------------>
05-26
当您准备好查看Expo提供的所有内容时（或者如果您想使用自己的编辑器），可以导出您的项目并将其与。 在Snack中创建的所有项目都是公开可用的，因此您可以轻松地通过链接共享与此项目的链接，或使用“嵌入”按钮将...
employee-manager-partB
03-14
员工经理第十天 安装。 通过运行npm install开始安装... 创建此文件夹后，将更改提交到git并访问Heroku应用程序以测试您的项目。 数据重置。 有一个api路由/ api / departments / reset，它将原始数据复制回employe
Web项目中必备的在线编辑器MyEditor
08-06
Web项目建设 在线编辑器myeditor 大气美观 可附加文件传输、传单传图像、批量图像传输，视频文件、表格填写，总之很全，操作起来也很方便，很轻便很实用。
Spring-Boot-MainApplication 类文件的位置
靳江海
12-18 3872
搭建 SpringBoot 项目时有一个主程序入口类. 这个 MainApp 类必须在放在整个项目的最根目录,Spring 在扫描注解的时候是扫描这个文件所在包以下的所有Class, 如果其他类放在了高于这个类或其他目录下就会扫描不到 import org.springframework.boot.SpringApplication; import org.springframework....
手把手教你使用Flex 3——《Flex 3程序设计》
图灵教育
07-20 1668
 手把手教你使用Flex 3——《Flex 3程序设计》 1954年Fortran语言的发明，使软件业跨入了高级语言时代；1972年Smalltalk的发布，标志着“面向对象”语言时代的到来；2004年Adobe公司推出的Flex框架，预示着富因特网应用程序（RIA）浓墨重彩地登上了历史舞台，从此网
使用CSDN-markdown编辑器入门
大米饭
09-17 2296
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
理解 Flex itemEditor－第 1 部分：内联 itemEditor
风之影
03-31 216
理解 Flex itemEditor－第 1 部分：内联 itemEditor 转载 http://www.adobe.com/cn/devnet/flex/articles/itemeditors_pt1.html   我最近完成了一个有关 itemRenderer 的系列－对列表控制的自定义，它们用于控制列表内容的显示格式。显示和渲染内容是一种十分有效的 UI 技术，而使用 Flex 您...
项目与软件推荐之编辑器-QOwnNotes
qyvlik的专栏
05-20 2877
今天推荐一款软件 QOwnNotes，是一款普通文本笔记软件。以某个路径为目录，罗列出目录下所有的 md 文件或者 txt 文件。
真Unity3d_5.62.，2017最新版本，IDE编辑器最终长成了他该有的样子
大话程序员
07-05 9276
新版本的Unity3d 5.6.2，用的太舒服了吧 列出各项目，均标识有各项目的版本，这才是一个项目编辑器该有的样子，是的，我就是在黑某cocos官方编辑器 因为Unity3d官方就是知道，各有各的版本，代码，素材，shader均不同，要统一很困难 官方也并不会强制要你统一，多元真的就是比较有活力 这是连Visual Studio都做不到啊，但是用了vs好多年，强制升级C#
2024-2030全球与中国盐氯化系统市场现状及未来发展趋势.docx
最新发布
04-24
2024-2030全球与中国盐氯化系统市场现状及未来发展趋势
iec 60601-1-6:2020 medical electrical equipment - part 1-6
05-14
IEC 60601-1-6:2020是医疗电器设备的国际标准，属于IEC 60601-1系列的一部分，被广泛用于医疗设备的设计和开发。该标准规定了医疗电器设备中的人机接口和操作方式的安全性和性能要求。 该标准包括了如下内容：医疗...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值