CheckBox in List using MobileIconItemRenderer for Flex Mobile
Line Break
Author: Arjan (47 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
In my previous post I showed you how you can set a decoratorClass of a MobileIconItemRenderer depending on the data of the list item. The example made me wonder if it was possible to display a CheckBox in a MobileIconItemRenderer. Turns out it’s pretty easy to do so.
First lets create a new Flex Mobile project, I named it CheckboxInMobileIconItemRenderer. For this example we are going to store our data in a model class. By using a model class we can retain our data when we navigate to other views, if we don’t do that, the view and any data, variables that are in the view get trashed by the runtime.
Create a new package called model. After that, create a new ActionScript class in the model package. Call it AppModel.as. To make sure the application always refers to the same model instance, we are going to simulate singleton behaviour. I’m not going to explain this here, it’s quite easy to see how this works. Basically the class keeps track of a static instance variable and only instantiates this one time. After that, it keeps returning this instance when an instance is requested by using the getInstance() method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | package model { [Bindable] public class AppModel { import mx.collections.ArrayCollection; private static var _instance:AppModel; public var items:ArrayCollection; public function AppModel() { } public static function getInstance():AppModel { if( _instance == null ) { _instance = new AppModel(); } return _instance; } } } |
Now navigate to the Home view Flash Builder created for you in the views package, add the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Select items:" initialize="init()"> <s:layout> <s:VerticalLayout gap="0"/> </s:layout> <fx:Script> <![CDATA[ import model.AppModel; import mx.collections.ArrayCollection; [Bindable] private var appModel:AppModel; // Generate dummy data private function init():void { // Get model instance appModel = AppModel.getInstance(); // If items is empty, create dummy data if(appModel.items == null) { appModel.items = new ArrayCollection(); var obj:Object; for( var i:int=0; i<10; i++ ) { obj = new Object(); obj.Name = "List item " + i; obj.Description = "Description " + i; obj.Status = (i % 2 == 0 ? true : false); appModel.items.addItem(obj); } } } ]]> </fx:Script> <s:List id="myList" dataProvider="{appModel.items}" labelField="Name" width="100%" height="100%"/> </s:View> |
Create a new MXML component in the views package, name it CheckboxListItemRenderer and make sure its based on MobileIconItemRenderer. Add the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <?xml version="1.0" encoding="utf-8"?> <s:MobileIconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" messageField="Description" height="100" initialize="init()"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import spark.components.Application; import spark.components.CheckBox; import spark.components.List; private var cb:CheckBox; private function init():void { if( !cb ) { cb = new CheckBox(); cb.addEventListener(MouseEvent.CLICK, handleClick); cb.x = this.parent.width-70; cb.y = 25; this.addChild( cb ); } } private function handleClick(event:MouseEvent):void { super.data.Status = cb.selected; } override public function set data(value:Object):void { if(value != null) { super.data = value; cb.selected = value.Status; } } ]]> </fx:Script> </s:MobileIconItemRenderer> |
Navigate to the home view and set the itemRenderer of the List in the home view to be the one we just created:
1 2 | <s:List id="myList" dataProvider="{appModel.items}" labelField="Name" width="100%" height="100%" itemRenderer="views.CheckboxListItemRenderer"/> |
Test the application. You should see something like this:
Create a second view in the views package, call it SelectedItemsView. Add the following code:
1 2 3 4 5 6 7 8 9 10 | <?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="You selected:"> <s:layout> <s:VerticalLayout gap="0"/> </s:layout> <s:List id="selectedItems" dataProvider="{data}" width="100%" height="100%" labelField="Name"/> <s:Button width="100%" label="Previous" click="navigator.popView()"/> </s:View> |
Go back to the Home view and add the following button:
1 | <s:Button width="100%" label="Next" click="next()"/> |
Add the following method in the script section:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Navigate to Selected Items View private function next():void { // Get all selected items var selectedItems:ArrayCollection = new ArrayCollection(); for each( var obj:Object in appModel.items ) { if( obj.Status ) { selectedItems.addItem(obj); } } // Navigate to the SelectedItemsView with selectedItems as data navigator.pushView( SelectedItemsView, selectedItems ); } |
Now you can navigate between the two views. Notice that the application “remembers” the selected items when you navigate back and forth between views. If you keep the items ArrayCollection as a variable in the view, it gets destroyed when you navigate away from the view. Screens of the finished application:
Related posts:
- Data Dependent decoratorClass in MobileIconItemRenderer Example
- List Directory with AIR in Flex 4
- View Navigation in a Mobile Flex Application
- TabbedMobileApplication Example in Flex Mobile (AIR for Android)
- Using Swipe Gestures in Mobile Flex Application (AIR for Android)
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(8 votes, average: 4.38 out of 5)
Loading ...Comments
7 Responses to “CheckBox in List using MobileIconItemRenderer for Flex Mobile”
Just what I was looking for. Thank you very much!
Thanks for your article!
One question: Why is it impossible to add a Label instead of a Checkbox
using the same approach.
Thanks for your reply
Gerry
Hi,
thanks the same thing i was looking for
i have used it and modified it according to my need, but now i am facing probleb like, i am using it to show Employee Name in label field and Emp Designation in message field.
my requirement is like i want to send the EmployeeId of selected Employee to next page or view can be possible with this, can you please provide some solution for it
Thanking you in advance
Thank you, this is a perfect example for what I need to do and is one of the few examples I’ve found out there that basically works as is. I also appreciate that the example is a complete project. The only adjustment I had to make to make it work was change MobileIconItemRenderer to its new name IconItemRenderer.
Awesome post…had been looking for one of these ..thanks…
An alternative approach to achieve the same:
http://forums.adobe.com/message/4088929#4088929
Hi Arjan, This is very simple and easy to get example for adding checkbox in list. But can we do this with IconItemRenderer. Please enlighten me. Its like the above list but with icon. Actually i have to show Friends list with a button on the right for action like invite, or accept request..