Flex Mobile Bootcamp

1

Introduction to Flex Mobile Development Introduction to Flex Mobile Development .................................................................... 1 Exercise 1 – Your first Flex Mobile Project ............................................................................ 2 Exercise 2 – Testing and deploying the project on devices ........................................... 10 Exercise 3 – Persisting the application state and controlling the Action Bar appearance .................................................................................................................................... 15 Exercise 4 – Working with external data sources – Creating a Twitter Client ........ 17 Exercise 5 -‐ Working with LiveCycle Collaboration Service ......................................... 23

http://corlan.org/downloads/dt/mobile.zip

2

Exercise 1 – Your first Flex Mobile Project 1. Creating a mobile Flex project Open the File > New > Flex Mobile Project wizard.

Figure 1. Accessing Flex Mobile Project wizard In the first step of the wizard introduce a project name like Mobile-‐1 and click the Next button. In the second step, first make sure you select in the Application Template view, the View-‐Based Application option. By doing so, you will have a Flex mobile project that has built-‐in support for the “screen metaphor”. Then, select the Automatically scale application for different screen densities. This option enables your application to be scaled by the Flex framework depending on the screen density on which the app is running.

Figure 2. Selecting Application Template and setting up the application DPI

3

Go to the Permissions tag if you want to set the Android permissions needed for your application. At a minimum, during development cycle you need to enable Internet access. Then click the Finish button.

Figure 3. Selecting Android permissions After a couple of seconds you should have your first Flex mobile project in place. 2. Discussing the project structure Now let’s have a look at the project that you’ve created. First, in the default package you’ll find the main application file of the project (Main.mxml). Typically this is where you set:

-‐ default applicationDPI value -‐ what the first view class is -‐ session application caching -‐ Action bar components that you want to be shared across different views

4

Figure 4. Flex Mobile Project structure The wizard has automatically created a default view for you in the view package: views/MainHomeView.mxml. You can think of this component as the first screen the user will see once the application is loaded. If your application has a lot of information to display or deep chained workflows, chances are that you will create more views (MXML components) by extending the spark.components.View. With the MainHomeView.mxml opened in the editor select Design. This will open the design view for the current selected view. For now you have only a title.

Figure 5. MainHomeView screen in design view 3. Adding a list to the main view component One of the most used UI paradigms for presenting collections of data in mobile development is the List component. With the MainHomeView opened in design mode you can see on the left side the Components view with all the Flex mobile components:

5

Figure 6. Flex Mobile components Next, switch to Source (code view) and in the MainHomeView component, right after the </fx:Declarations> tag add a list tag: <s:List > </s:List>

Figure 7. The List component If you go to design view you will notice that the list component doesn’t fill all the available space. To fix this just add width=”100%” and height=”100%” on the list: <s:List width="100%" height="100%">

4. Adding data to the List. Now, let’s add some data to the list. After the opening List tag add a new tag <s:dataProvider>, inside of it an <s:ArrayCollection> tag: <s:List width="100%" height="100%"> <s:dataProvider>

6

<s:ArrayCollection> </s:ArrayCollection> </s:dataProvider> </s:List>

Then copy these Objects inside of the <s:ArrayCollection> tags: <fx:Object label="My Secret Friend" phone="004915157135803" email="[email protected]" site="http://www.adobe.com"/> <fx:Object label="Mihai Corlan" phone="12356" email="[email protected]" site="http://corlan.org"/> <fx:Object label="John Doe" phone="987373" email="[email protected]" site="http://mmm.com"/> <fx:Object label="Michael Chaize" phone="445677" email="[email protected]" site="http://riagora.com"/> <fx:Object label="Tom Krcha" phone="677776" email="[email protected]" site="http://flashrealtime.com"/> <fx:Object label="Enrique Duvos" phone="987373" email="[email protected]" site="http://adobe.com"/> <fx:Object label="Mark Doherty" phone="987373" email="[email protected]" site="http://flashmobileblog.com"/> <fx:Object label="Serge Jespers" phone="987373" email="[email protected]" site="http://adobe.com"/> <fx:Object label="Mike Jones" phone="987373" email="[email protected]" site="http://adobe.com"/> <fx:Object label="Ben Forta" phone="987373" email="[email protected]" site="http://adobe.com"/> <fx:Object label="Ryan Stewart" phone="987373" email="[email protected]" site="http://adobe.com"/> <fx:Object label="Kevin Hoyt" phone="987373" email="[email protected]" site="http://adobe.com"/> <fx:Object label="Terry Ryan" phone="987373" email="[email protected]" site="http://adobe.com"/> <fx:Object label="Paul Trani" phone="987373" email="[email protected]" site="http://adobe.com"/> <fx:Object label="Renaun Erickson" phone="987373" email="[email protected]" site="http://adobe.com"/>

Now, if you go to Design view you should see something like this:

Figure 8. Rendering data in the List

7

5. Creating a second view for displaying the selected item from the list Now, let’s create a second view to display the list selected item: right-‐click on the views package and choose New > MXML Component. A wizard will open. Make sure the new component is based on spark.components.View. Set DetailsView as the name of the component and click Finish.

Figure 9. Creating the second view: DetailsView 6. Add four buttons. In this view we want to display the information for the selected item of the first view list. So let’s add four buttons aligned vertically (use the Design view to quickly layout the buttons and the Property panel to make them use 100% of the width).

Figure 9. Adding four buttons to the DetailsView page Save the file and let’s see now how we can navigate from one view to another.

8

7. Using the ViewNavigator to manage the screens/views Add an id property (id=”list”) to the List component and then set for the change event a listener called onItemSelection. This event is thrown every time the user selects an item in the list. <s:List width="100%" height="100%" id="list" change="onItemSelection(event)”>

8. Now let’s define the onItemSelection() function. Add a <fx:Script> tag so you can write ActionScript code inside the MXML file and create this function: private function onItemSelection(event:IndexChangeEvent):void { navigator.pushView(DetailsView, list.selectedItem); }

9. Using View’s data property So when you changed the view from MainHomeView to DetailsView you also passed an object that holds the data of the selected item. Let’s see how you can use this data. In the DetailsView component edit the tile property of the <s:View> tag to: title=”{data.label}”

10. Using the data for the four buttons: <s:Button x="0" y="29" width="100%" label="Phone: {data.phone}" click="navigateToURL(new URLRequest('tel:' + data.phone))"/> <s:Button x="0" y="80" width="100%" label="SMS: {data.phone}" click="navigateToURL(new URLRequest('sms:' + data.phone))"/> <s:Button x="0" y="131" width="100%" label="Mail: {data.email}" click="navigateToURL(new URLRequest(mailto:' + data.email))"/> <s:Button x="0" y="182" width="100%" label="Web: {data.url}" click="navigateToURL(new URLRequest('http://' + data.site))"/>

11. Adding an Action Bar. So, open up the Main.xml file and add this code: <s:navigationContent> <s:Button label="Back" click=”navigator.popView()”/> </s:navigationContent> <s:titleContent> <s:Label text="My First Mobile App!"/> </s:titleContent> <s:actionContent> <s:Button label="Options"/> </s:actionContent>

9

Figure 10. Action Bar 12. Over write the navigationContent in MainHomeView: <s:navigationContent> </s:navigationContent>

Figure 11. Navigation content for the first view 13. Set the titleContent in the second view. Open the DetailsView.mxml and delete the title attribute from the <s:View> tag and add this content instead: <s:titleContent> <s:Label text="{data.label}"/> </s:titleContent>

10

Exercise 2 – Testing and deploying the project on devices 1. Running the application on the desktop It is time to test the application. So far you only see the views in design view. For this you have to create a run configuration right-‐click on the editor page and chose Run As > Run Configurations.

Figure 1. Open the Run Configurations control panel Once the configuration panel has opened, select the Mobile Application option from the left list and click the top-‐left icon to add a new configuration.

Figure 2. The run configuration for Mobile-‐1 project

11

For Target platform select Google Android and then select On desktop option and choose a device from the list. Once you’ve finished with the settings click Apply and then Run. The desktop simulator should start and you should see your application running. You can select an item and the second view is displayed and if you click the Back button you move back to first screen.

Figure 3. The first run of your application using the desktop simulator 2. Simulating device orientation change events. If you click on Device menu of the simulator, you can simulate device orientation change by choosing Rotate Left or Right. You will see how the Flex framework automatically resizes all the components.

Figure 4. Accessing device rotation commands

12

Figure 5. The app running in landscape orientation 3. Debugging the application Close the desktop simulator and go to MainHomeView component and place a break point inside the onItemSelection() function. Next, instead of Run As, choose Debug As > Debug Configurations and then click the Debug button from the Configurations panel. The desktop simulator will start in debug mode and once you click on one item from the list, the onItemSelection() function is executed and you reach the breakpoint (if a confirmation panel asks for permission to change to Debug perspective, select Remember my decision and click Yes).

Figure 6. Flex debugger

13

4. Running the application on the Android devices If you tried to press the buttons from the second view while running your app on the desktop you should have seen this error:

Figure 7. Desktop simulator error when trying to access the Phone application This is happening because on desktop the simulator doesn’t provide all the capabilities that the device has: phone application, SMS application, and so on. Flash Builder can deploy the application to the Android connected devices. To enable this, open the configurations panel (Run As > Run Configurations), select the running configuration you created earlier, and then select the On device option. Click the Apply button.

Figure 8. Run configuration that targets the device Connect your Android device via USB cable to your computer (if you run on Windows you might need to install USB drivers; if you go to the Flash Builder installation folder you’ll find drivers in this folder: Adobe Flash Builder 4.5/sdks/4.5.0/install/android/usb_drivers/) and then run the application. After couple of seconds you will see the application running on your device.

14

This time you can test the buttons functionality and you should see the phone application opened up with phone number filled when you press the Phone button.

Figure 9. The application running on a Nexus One device You can also debug the application while it’s running on device.

15

Exercise 3 – Persisting the application state and controlling the Action Bar appearance A running mobile application can be closed at any time by the operating system due to any of the following factors:

-‐ the user sends the application in background in order to open another application;

-‐ system resources are low – low memory / big CPU usage; -‐ device battery drained out.

On the other hand, most of the time the user expects when he reopens the application to see the application in the same state as the last time. This is particularly important if the user was filling in a view full of information. He will not like the idea to re-‐type twice the same information. This is slightly different than what we are used to when using or building desktop apps. The Flex framework has built-‐in support for this. Use the previous project for this exercise. 1. Persisting the application state: set the persistNavigatorState property to true; open the Main.mxml file and add this attribute: <?xml version="1.0" encoding="utf-8"?> <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.MainHomeView" applicationDPI="160" persistNavigatorState="true">

Save the file and test the application by going to the second view and then closing the simulator and open up the app again. Immediately as it is loaded you should see the second view with the same data as the last time. If your press the Back button you should see the first view. Manipulating the Action Bar appearance Each View has two properties that you can use to control the Action Bar appearance:

-‐ overlayControls – if it is set to true, then the action bar floats on top of the View content and its transparent so you can see through it.

-‐ actionBarVisible – if it is set to false the action bar is hide it Let’s test these two properties. Open the MainHomeView component and add to the <s:View> tag overlayControls property: <?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" overlayControls="true">

Next, you will toggle the actionBarVisible property when you interact with the list. On the <s:List> tag add listners for the mouseDown and mouseUp events:

16

<s:List width="100%" height="100%" id="list" change="onItemSelection(event)" mouseDown="actionBarVisible=false" mouseUp="actionBarVisible=true">

Save the file and run the application again. You should have the Action Bar hidden when you scroll the list and it should be back once you finished interacting with the list. About View lifecycle By default the ViewNavigator class destroys a View once it is remove from the screen. This is done to preserve memory. However, depending on your specific use case you might want to prevent this. If you want to do this, just add the destructionPolicy property to the <s:View> tag and set its value to never. Second, there are two events that are related to the View lifecycle in order to do some custom work (you can register event listeners for these events on the <s:View> tab):

-‐ viewActivate – this is thrown when the view was added to the display list -‐ viewDeactivate – this is thrown once the view was removed from the

display list before being destroyed And third, although by default the views are destroyed, you can persist View’s information as long as you store in data property.

17

Exercise 4 – Working with external data sources – Creating a Twitter Client In this exercise you will create a simple Twitter application. 1. Create a new Flex mobile project called Mobile-‐4 2. You will create a data source for Tweets. Select Data/Services view and click on the Connect to Data/Service…

Figure 1. Data/Service view 3. Choose HTTP and click Next:

Figure 2. Choose HTTP service 4. Configure the service like as you see in the Fig. 3. For URL use this: http://search.twitter.com/search.rss . Then click Finish.

18

Figure 3. Configuring the HTTP service 5. You will see that a service called TwitterService was added to the Data/Services view. Next, right-‐click on search() operation and choose Configure Return Type.

Figure 4. Accessing the Configure Return Type wizard 6. Select the first option if it isn’t already and click Next:

19

Figure 5. First page of Configure Return Type wizard 7. Enter a value for the q parameter and make sure the first option is selected. Then click Next:

Figure 6. Second page of the Configure Return Type wizard 8. For Select root option make sure you select the item and then enter as name Twitt for the data type in the first text input. Then click Finish.

20

Figure 7. Last page of the Configure Return Type wizard 9. You should have now in the Data/Services view three data types:

Figure 8. The data model 10. Go to MainhHomeView.mxml (the first view of the application) and start creating the application UI by adding this code: <s:titleContent> <s:TextInput id="txt" width="100%"/> </s:titleContent> <s:actionContent> <s:Button label="Search"/> </s:actionContent>

11. Next add a list: <s:List width="100%" height="100%"> </s:List>

12. Next Generate a service call (right-‐click on the search() operation from the Data/Services view):

21

Figure 9. Create a service call to the TwitterService.searh() operation 13. Edit the generate function to this: protected function search():void { if (txt.text) searchResult.token = twitterService.search(txt.text); }

14. Call this function for the Click event of the Button: <s:Button label="Search" click="search()"/>

15. Add the data source to the list: <s:List width="100%" height="100%" dataProvider="{searchResult.lastResult}">

16. Define an inline IconItemRenderer: <s:List width="100%" height="100%" dataProvider="{searchResult.lastResult}"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer iconField="google_image_link" iconWidth="72" iconHeight="72" height="110" verticalAlign="top" messageField="title" labelField="author"/> </fx:Component> </s:itemRenderer> </s:List>

17. Save the files, create a running configuration and run the project:

22

Figure 10. Running the application

23

Exercise 5 -‐ Working with LiveCycle Collaboration Service LiveCycle Collaboration Service can be used to add real-‐time capabilities to your applications. You can add features like voip, video, chats, or white boards quite easy. This service has two parts: a cloud based service that manages the data streams between the applications/clients and library that you need to include in your program to access its features. For the client you can use two libraries: an ActionScript library and a Flex library. For now, the Flex library has all the components based on Flex 3 and they are not optimized for mobile. However for the sake of simplicity we will use these components in a mobile app. 1. Create a new Flex mobile project called Mobile-‐5 2. From the resource folder/LCCS/ copy the lccs.swc to your project libs folder. 3. Edit the Flex project properties (right-‐click on the project name > Properties > Flex Build Path). Add the mx.swc and sparkskins.swc:

Figure 1. Adding the mx.swc and sparkskins.swc 4. Add a button and a label to the MainHomeView.mxml: <s:TextInput id="txt" text="your name" width="100%" top="100"/> <s:Button label="login" click="login()" top="170" width="100%"/>

24

5. Define the login() function: <fx:Script> <![CDATA[ private function login():void { if (txt.text) navigator.pushView(ChatView, txt.text); } ]]> </fx:Script>

6. Create a second view called ChatView in the views folder (New MXML Component) 7. Next you will use some of the LCCS components from the lccs.swc library we added to the project. These components establish a connection to the service and then initialize a web camera pod view and collaborative space: <rtc:ConnectSessionContainer id="session" roomURL="http://collaboration.adobelivecycle.com/corlan/bootcamp" width="100%" height="100%"> <rtc:authenticator> <rtc:AdobeHSAuthenticator userName="{data}"/> </rtc:authenticator> <mx:HBox width="100%" height="100%"> <rtc:WebCamera width="50%" height="100%"/> <rtc:Note width="50%" height="100%"/> </mx:HBox> </rtc:ConnectSessionContainer>

8. Add the namespace for the MX and LCCS components to the <s:View> node: xmlns:rtc="http://ns.adobe.com/rtc" xmlns:mx="library://ns.adobe.com/flex/mx"

9. Add a logout button and overwrite the title for this view: <s:titleContent/> <s:actionContent> <s:Button label="logout" click="logout()"/> </s:actionContent>

10. Finally, define the logout() function: <fx:Script> <![CDATA[ private function logout():void { session.logout(); navigator.popView(); } ]]> </fx:Script>

25

11. Edit the Main-‐app.xml (the application descriptor file) to enable the Camera permission. Look at the end of the file for this line and make sure is not commentated: <uses-permission android:name="android.permission.CAMERA"/>

12. Save all the files, create a run configuration for this project and run the project

Figure 2. The application in action

Documents

Flex Mobile Bootcamp