| <?xml version="1.0" encoding="utf-8"?> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| example taken from http://flex.apache.org/asdoc/spark/components/MobileGrid.html#columns |
| --> |
| <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| title="MobileGrid" |
| xmlns:ns="http://flex.apache.org/experimental/ns" |
| creationComplete="creationCompleteHandler(event)"> |
| <fx:Script> |
| <![CDATA[ |
| import mx.collections.ArrayCollection; |
| import mx.events.FlexEvent; |
| |
| private const dataProvider:ArrayCollection = new ArrayCollection(); |
| |
| private function creationCompleteHandler(event:FlexEvent):void |
| { |
| var src:Array = []; |
| for (var i:int = 0; i <50; i++) |
| { |
| src.push({Name: "John_" + i, Surname: "Doe_" + i, Age: 5 + i, status: 1000 + i, Comments: "Sed tamen"}); |
| src.push({Name: "Paul_" + i, Surname: "Smith_" + i, Age: 12 + i, status: 2000 + i, Comments: "Quanta autem" }); |
| src.push({Name: "Sarah_" + i, Surname: "Lee_" + i, Age: 42 + i, status: 2000 + i, Comments: "Ideo urbs"}); |
| } |
| dataProvider.source = src; |
| } |
| |
| |
| protected function buttonHandler(event:MouseEvent):void |
| { |
| if(currentState == "DemoState") |
| { |
| currentState = "InfoState"; |
| } |
| else if(currentState == "InfoState") |
| { |
| currentState = "DemoState"; |
| } |
| } |
| |
| private function fullName(o:Object):String |
| { |
| return o.Name + " " + o.Surname; |
| } |
| |
| ]]> |
| </fx:Script> |
| <s:states> |
| <s:State name="DemoState"/> |
| <s:State name="InfoState"/> |
| </s:states> |
| <fx:Declarations> |
| <s:MultiDPIBitmapSource id="aboutIcon" |
| source160dpi="@Embed('assets/icons/160/about.png')" |
| source240dpi="@Embed('assets/icons/240/about.png')" |
| source320dpi="@Embed('assets/icons/320/about.png')" |
| source480dpi="@Embed('assets/icons/480/about.png')"/> |
| <s:MultiDPIBitmapSource id="demoIcon" |
| source160dpi="@Embed('assets/icons/160/dock.png')" |
| source240dpi="@Embed('assets/icons/240/dock.png')" |
| source320dpi="@Embed('assets/icons/320/dock.png')" |
| source480dpi="@Embed('assets/icons/480/dock.png')"/> |
| </fx:Declarations> |
| <s:actionContent> |
| <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> |
| </s:actionContent> |
| <ns:MobileGrid includeIn="DemoState" width="100%" height="100%" sortableColumns="true" dataProvider="{dataProvider}" contentBackgroundColor="0xFFFFFF" |
| alternatingItemColors="[0xFFFFFF, 0xFFFFFF]" color="0x00000" selectionColor="0x33B5E5"> |
| <ns:columns> |
| <ns:MobileGridColumn dataField="Name" styleName="bold" width="30%"/> |
| <ns:MobileGridColumn dataField="Surname" styleName="bold" width="30%"/> |
| <ns:MobileGridColumn dataField="Comments" width="40%"/> |
| </ns:columns> |
| </ns:MobileGrid> |
| <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" text="The MobileGrid displays a collection of items in a grid of rows and columns and column headers and is optimized for speed on mobile devices. |
| 

The MobileGrid component provides the following features: |
| 

user can swipe through the rows in the datagrid. |
| 

supports single selection of a row. |
| 

rows can be sorted according to a given column by clicking on the column's header. |
| 

cells can be displayed as text in different fonts and formats, as images, or using a custom renderer. |
| 

default skin uses dark shades of gray, and is available in different screen densities. |
| 

It's important to understand that MobileGrid does not have all the capabilities and flexibility of it's desktop equivalent, in order to ensure optimal display and scrolling performance on mobile devices. |
| 

Typically, the following features are not available in MobileGrid: |
| 

multiple selection is not supported |
| 

it's not possible to interactively reorder columns |
| 

MobileGrid does not scroll horizontally, even when the column widths exceeds the component's width. |
| 

custom cell renderers must be designed with care, preferably in ActionScript, to ensure good display performance |
| 

Internally, MobileGrid inherits for Mobile spark.List component rather than any Grid or DataGrid, which means that all cell renderers in a single row are managed by one single MobileGridRowRenderer that delegates the individual cell renderers to light-weight sub-renderers. |
| 

You usually don't access this internal row renderer yourself, and will rather define the individual cell renderers. |
| 

This technique ensures optimal display and memory performance, which is critical for mobile devices, at the price of less flexibility for cell renderers."/> |
| </s:View> |
