Tutorials, Videos

Flex mobile item editor

4 Comments 01 July 2010

Flex mobile item editor

Last week, I attended the Adobe EMEA Partners summit in Amsterdam. I presented a track named “Develop Enterprise Applications for Mobile users“. As always, I developed a small prototype to express my ideas and showcase the power of the Adobe Flash Platform. By the way, my session was live broadcasted using Acrobat Connect, and a recording is still available here: http://my.adobe.acrobat.com/p56777305/I also published my slides on slideshare:

Funny times: this morning Adobe just announced that the project codenamed Slider (Flex mobile framework) will merge with a future release of the Flex SDK (“Hero”) which is great. You can read the announcement here: http://blogs.adobe.com/flex/archives/2010/06/introducinghero.html

Thanks to LiveCycle Data Services, and the data management services, you can easily update a database and synchronise the views of the concurrent users automatically. I believe that LCDS can play a strategic role in the Flash mobile world, thanks to its online/offline synchronisation API, the reliable messaging layer, and the channels fallback mechanism. For this sample, I just used a classic Data management destination, to update the “quantity in stock” properties of an inventory of product. Initially, I wanted to use a classic Numeric Stepper flex component to edit the “quantity” values, but this component is not designed for mobile applications, and it’s quite impossible to use it smoothly on my Android phone. That’s why I needed to create a custom item editor, based on a classic numeric stepper, and that’s the topic of my video tutorial. The links to the live applications, and the source code, are available at this end of this article.

Flex 4 custom item editor from michael chaize on Vimeo.

We all know that the Datagrid component is still a “MX” one. But, I discovered that you can create Spark item editors, and use them within an MX datagrid. Spark is the new component architecture introduced in Flex 4. It makes it very easy to skin and customize the visual appearance of classic components such as a numeric stepper.

In my main application, I specify a custom item editor which is a “fx component”, myDGcusto. Notice that the editorDataField parameter is required to specify the property of the item editor that returns the new data for the cell.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"
			   creationComplete="application1_creationCompleteHandler(event)" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="480" minHeight="800" width="480" height="800" xmlns:local="*" xmlns:comps="com.michael.comps.*" xmlns:riagora="com.michael.riagora.*">
 
	<fx:Style source="myAIRstockHTML.css"/>
	<fx:Script>
		<![CDATA[
 
			import mx.data.events.DataConflictEvent;
			import mx.events.FlexEvent;
 
			[Bindable]
			private var uniqueId:String;
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				ds.fill(products);
			}
 
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:ChannelSet id="channelSet">
			<s:RTMPChannel id="rtmpChannel" url="rtmp://yourserver:2037"/>
			<s:StreamingAMFChannel id="streamingAMFChannel" url="http://yourserver/lcds-samples/messagebroker/streamingamf"/>
 
		</s:ChannelSet>
		<s:DataService channelSet="{channelSet}" destination="inventory" id="ds"/>
		<local:Product/>
		<s:ArrayCollection id="products"/>
	</fx:Declarations>
 
	<mx:DataGrid x="0" y="0" rowHeight="50" editable="true" width="480" height="742" id="dg" dataProvider="{products}" fontFamily="Arial" fontSize="26" rollOverColor="#C2C3C4" focusColor="#8198AD">
		<mx:columns>
			<mx:DataGridColumn dataField="name" headerText="Name" editable="false"/>
 
			<mx:DataGridColumn editorDataField="myRetValue" dataField="qtyInStock" width="150" headerText="Qty" textAlign="right">
				<mx:itemEditor>
					<fx:Component>
						<riagora:myDGcusto/>
					</fx:Component>
				</mx:itemEditor>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
 
</s:Application>

My custom component myDGcusto extends the Spark MXDataGridItemRenderer component. I just placed a Spark Numeric Stepper, declared the data binding between the component and the myRetValue variable, and assigned a new skin class to the numeric stepper (“mySkinNS”).

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
						  xmlns:s="library://ns.adobe.com/flex/spark"
						  creationComplete="mxdatagriditemrenderer1_creationCompleteHandler(event)" xmlns:mx="library://ns.adobe.com/flex/mx" width="150" height="50">
 
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			public var myRetValue:int = 0;
 
			protected function myNS_changeHandler(event:Event):void
			{
				// TODO Auto-generated method stub
				myRetValue = myNS.value;
			}
 
			protected function mxdatagriditemrenderer1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				myRetValue = data.qtyInStock;
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:NumericStepper skinClass="com.michael.riagora.mySkinNS" change="myNS_changeHandler(event)" id="myNS" value="{data.qtyInStock}" stepSize="1" maximum="999"/>
</s:MXDataGridItemRenderer>

In the skin class, I just updated the positions of the button, the background colors, and the text size of the label. As a finger touch area is considered as a 44 pixels circle, I had to create a fresh new layout/skin for my stepper.

The source code of the project is in this package: http://riagora.com/pvt_content/itemeditor/myAIRstockHTML.zip

If you want to play with the application (on your Android phone with Flash player 10.1, or on your desktop), click here: http://riagora.com/pvt_content/itemeditor/client/

The dashboard that expresses in real-time the status of the inventory is also available online: http://riagora.com/pvt_content/itemeditor/dashboard/

Launch both applications and modify the quantity of an item in the datagrid. When you “focus out” the field, you should see the dashboard moving. Enjoy.

Post to Twitter

Your Comments

4 Comments so far

  1. Thanks for sharing. It’s amazing with how less code you can do such cool things with Flex and LCDS! And the Spark architecture really rocks 😉


Trackbacks/Pingbacks

  1. Scott Janousek » Blog Archive » Develop Enterprise Applications for Mobile and Devices with Flex - July 5, 2010

    […] Michael Chaize (Adobe) has posted some of his materials from a recent mobile session where he discussed the possibilities of leveraging Flex on Mobile Devices for Enterprise Applications, and also tying in LCDS (LiveCycle Data Services) functionality. […]

  2. AIR 2.5 is live | RIAgora - October 11, 2010

    […] Adapt your Flex component to mobile users: http://www.riagora.com/2010/07/flex-mobile-item-editor/ […]

  3. Air 2.5 et stratégie multi-terminal | Blog MTI - June 17, 2012

    […] Item Editor […]

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2018 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes