Flex mobile for JUG

Flex and mobile apps
Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaize

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Adobe Flex for Java developers

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2


+



+

Free and Open source Application framework

Easily build mobile, tablet, desktop and web applications

One single programming language, tool & codebase


Adobe Flex programming language

<MXML> AS3

<s:Scroller width="100%" height="100%" horizontalScrollPolicy="off">
<s:Group width="{this.width}">
<s:Image id="myImage">
<s:source>
<s:MultiDPIBitmapSource
source160dpi="assets/icons/splashLittle.jpg"
source240dpi="assets/icons/splashMedium.jpg"
source320dpi="assets/icons/splashBig.jpg"/>
</s:source>
</s:Image>
<s:Button x="82" y="356" width="159" height="30" label="Jetzt anmelden"
chromeColor="0xffa600" click="button1_clickHandler(event)"
fontSize="14" textShadowColor="0x555555"/>
</s:Group>
</s:Scroller>



<MXML> AS3
package contacts.application
{
import contacts.domain.ContactManager;

public class AddContactsCommand
{
[Inject]
public var service:IContactService;

[Inject]
public var manager:ContactManager;

public function execute(event:AddContactsMessage):AsyncToken
{
return service.addContact(event.contact);
}

public function result(event:ResultEvent, trigger:AddContactsMessage):void
{
manager.addContact(trigger.contact);


<MXML> AS3

MVC



Automated builds, debug & pro le, CI,
TDD, load/stressing...

Flex & Java are already succesful on the desktop

&

Good UI = Eﬃcient users = Success & ROI
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

e explosion of devices introduces new
challenges for application development


Native Mobile Application Development Model

A costly, ineﬃcient development model

Native Native Native Native
App App App App

Additional
OS’s


Introducing a new mobile development paradigm

One Tool, One Language, One Codebase

Flex Application Common codebase

Additional
OS’s

Any Platform


FLEX FRAMEWORK 4

SPARK COMPONENT MODEL

ActionScript MXML

Component Skin

Graphics
Behavior Layout
Animation
Logic Parts
Data CSS properties States

Mobile Applications in Flex 4.5

s:Application

© 2010 Adobe Systems Incorporated. All Rights Reserved. 13


s:Application s:ViewNavigatorApplication



s:Application s:ViewNavigatorApplication s:TabbedViewNavigatorApplication


<s:ViewNavigatorApplication> life cycle

views.ListEmployees views.DetailsEmployee views.ListEmployees

view destroyed view created

view destroyed view created

“BACK” bu on

DATA subset DATA

persisted in memory

ActionBar

navigationContent titleContent actionContent

<s:View xmlns:fx=http://ns.adobe.com/mxml/2009 …
title=”Expenses">

<s:navigationContent>
<s:Button icon="@Embed('assets/home.png')"/>
</s:navigationContent>

<s:actionContent>
<s:Button label=”+"/>
</s:actionContent>
</s:View>

© 2010 Adobe Systems Incorporated. All Rights Reserved. 15 3

Components that have Mobile Skins

§ Bu on
§ CheckBox
§ DataGroup
§ Group/HGroup/VGroup/TileGroup
§ Image/BitmapImage
§ Label List
§ RadioBu on/RadioBu onGroup
§ Scroller
§ TextArea
§ TextInput


Multiple densities: e problem

150 x 40 pixel bu on




Desktop monitor
@100 dpi
= 1.5” x 0.4”




Desktop monitor Galaxy Tab
@100 dpi @160 dpi
= 1.5” x 0.4” = 0.9” x 0.25”




Desktop monitor Galaxy Tab Droid 2
@100 dpi @160 dpi @240 dpi
= 1.5” x 0.4” = 0.9” x 0.25” = 0.6” x 0.17”




Desktop monitor Galaxy Tab Droid 2 iPhone 4
@100 dpi @160 dpi @240 dpi @320 dpi
= 1.5” x 0.4” = 0.9” x 0.25” = 0.6” x 0.17” = 0.46” x 0.13”




Desktop monitor Galaxy Tab Droid 2 iPhone 4
@100 dpi @160 dpi @240 dpi @320 dpi
= 1.5” x 0.4” = 0.9” x 0.25” = 0.6” x 0.17” = 0.46” x 0.13”

Same pixel count, diﬀerent physical sizes
(Minimum recommended size: 0.25” x 0.25”)


Can I use dynamic layout to solve this?



320x480 @160dpi

(Not easily. You can make
stuﬀ ll the screen using
percent sizing, but your
fonts and icons will still be
tiny. And any xed pixel
sizes, e.g. in constraint-
based layouts or padding
values, will be wrong.)



320x480 @160dpi
100%

(Not easily. You can make
stuﬀ ll the screen using
percent sizing, but your
fonts and icons will still be
tiny. And any xed pixel
100%




320x480 @160dpi 640x960 (at same density)
100%

(Not easily. You can make (Not easily. You can make stuﬀ ll the screen
stuﬀ ll the screen using using percent sizing, but your fonts and icons
percent sizing, but your will still be tiny. And any xed pixel sizes, e.g. in
fonts and icons will still be constraint-based layouts or padding values, will
tiny. And any xed pixel be wrong.)
100%




320x480 @160dpi 640x960 (at same density)
100% 100%

100%

100%



320x480 @160dpi 640x960 (at same density) 640x960 @320dpi
100% 100%

100%

100%


Solution: Automatic scaling for diﬀerent DPIs



</Application>

160 dpi 240 dpi 320dpi



</Application>


Scaled 1.5x



</Application>


Scaled 1.5x Scaled 2x



</Application>


Scaled 1.5x Scaled 2x

REMEMBER: To your code, the screen is always 160 dpi, and this bu on is always
160 x 40, regardless of how the application is being scaled.


Screens and Flex 4.5

<?xml version="1.0"
encoding="utf-8"?>
<s:MobileApplication
applicationDPI="160">
...

var curDensity:Number =
FlexGlobals.topLevelApplication.runtimeDPI;

<s:Image>
<s:source>
<s:MultiDPIBitmapSource
source160dpi="logo.png"
source240dpi="logo240.png"
source320dpi="logo320.png" />
</s:source>
</s:Image>


Flex 4.5 and tablets



Android tablets



Android tablets BlackBerry PlayBook



Android tablets BlackBerry PlayBook Apple tablets


Demo


New APIs for mobile apps

- Multitouch
- Geolocation
- Cameras
- Microphone
- Accelerometer
- Display a web page
- SQLite local database
- Native extensions
- GPU acceleration

©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Create your on libraries



ANE: No more limitation
ActionScript Native Extension




C, JAVA




AS3 bridge

C, JAVA




AS3 bridge

C, JAVA

ANE




AS3 bridge
Flex Mobile
project
C, JAVA

ANE SWF
.AIR, .APK, .IPA, .BAR

Tomorrow’s Enterprise applications


Tomorrow’s Enterprise applications

Business opportunities
Flex + JAVA services


Michaël Chaize & resources

RIAgora.com Flex.org
labs.adobe.com
developer.adobe.com
@mchaize Tour de Mobile Flex


Flex mobile for JUG

More Related Content

What's hot

Viewers also liked

Similar to Flex mobile for JUG

More from Michael Chaize

Recently uploaded

Flex mobile for JUG