| <?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. |
| |
| --> |
| <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"> |
| <fx:Script> |
| <![CDATA[ |
| import spark.skins.mobile.TextAreaSkin; |
| |
| protected function buttonHandler(event:MouseEvent):void |
| { |
| if(currentState == "DemoState"){ |
| currentState = "InfoState"; |
| }else if(currentState == "InfoState"){ |
| currentState = "DemoState"; |
| } |
| } |
| ]]> |
| </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="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="assets/icons/480/dock.png"/> |
| </fx:Declarations> |
| |
| <ns:MobileGrid includeIn="DemoState" width="100%" height="100%"> |
| <ns:columns> |
| <ns:MobileGridColumn width="33%" headerText="Column 1" dataField="label"/> |
| <ns:MobileGridColumn width="33%" headerText="Column 2" dataField="label"/> |
| <ns:MobileGridColumn width="33%" headerText="Column 3" dataField="label"/> |
| </ns:columns> |
| <s:ArrayList> |
| <fx:Object label="Item 1"/> |
| <fx:Object label="Item 2"/> |
| <fx:Object label="Item 3"/> |
| <fx:Object label="Item 4"/> |
| <fx:Object label="Item 5"/> |
| <fx:Object label="Item 6"/> |
| <fx:Object label="Item 7"/> |
| <fx:Object label="Item 8"/> |
| <fx:Object label="Item 9"/> |
| <fx:Object label="Item 10"/> |
| <fx:Object label="Item 11"/> |
| <fx:Object label="Item 12"/> |
| <fx:Object label="Item 13"/> |
| <fx:Object label="Item 14"/> |
| <fx:Object label="Item 15"/> |
| <fx:Object label="Item 16"/> |
| <fx:Object label="Item 17"/> |
| <fx:Object label="Item 18"/> |
| <fx:Object label="Item 19"/> |
| <fx:Object label="Item 20"/> |
| <fx:Object label="Item 21"/> |
| <fx:Object label="Item 22"/> |
| <fx:Object label="Item 23"/> |
| </s:ArrayList> |
| </ns:MobileGrid> |
| |
| |
| <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" 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:navigationContent> |
| <s:Button click="navigator.popView()"> |
| <s:icon> |
| <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')" |
| source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')" |
| source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/> |
| </s:icon> |
| </s:Button> |
| </s:navigationContent> |
| |
| <s:actionContent> |
| <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> |
| </s:actionContent> |
| </s:View> |
