Más contenido relacionado La actualidad más candente (20) Similar a Flex mobile for JUG (20) Más de Michael Chaize (13) Flex mobile for JUG1. Flex and mobile apps
Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaize
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
2. Adobe Flex for Java developers
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2
3. Adobe Flex for Java developers
+
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2
4. Adobe Flex for Java developers
+
Free and Open source Application framework
Easily build mobile, tablet, desktop and web applications
One single programming language, tool & codebase
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 3
5. 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>
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 4
6. Adobe Flex programming language
<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
{
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5
manager.addContact(trigger.contact);
7. Adobe Flex programming language
<MXML> AS3
MVC
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6
8. Adobe Flex programming language
Automated builds, debug & pro le, CI,
TDD, load/stressing...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7
9. Flex & Java are already succesful on the desktop
&
Good UI = Efficient users = Success & ROI
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
10. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
11. e explosion of devices introduces new
challenges for application development
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
12. Native Mobile Application Development Model
A costly, inefficient development model
Native Native Native Native
App App App App
Additional
OS’s
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
13. Introducing a new mobile development paradigm
One Tool, One Language, One Codebase
Flex Application Common codebase
Additional
OS’s
Any Platform
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
14. FLEX FRAMEWORK 4
SPARK COMPONENT MODEL
ActionScript MXML
Component Skin
Graphics
Behavior Layout
Animation
Logic Parts
Data CSS properties States
16. Mobile Applications in Flex 4.5
s:Application s:ViewNavigatorApplication
© 2010 Adobe Systems Incorporated. All Rights Reserved. 13
17. Mobile Applications in Flex 4.5
s:Application s:ViewNavigatorApplication s:TabbedViewNavigatorApplication
© 2010 Adobe Systems Incorporated. All Rights Reserved. 13
18. <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
© 2010 Adobe Systems Incorporated. All Rights Reserved. 14
19. <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
© 2010 Adobe Systems Incorporated. All Rights Reserved. 14
20. <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
© 2010 Adobe Systems Incorporated. All Rights Reserved. 14
21. 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
22. Components that have Mobile Skins
§ Bu on
§ CheckBox
§ DataGroup
§ Group/HGroup/VGroup/TileGroup
§ Image/BitmapImage
§ Label List
§ RadioBu on/RadioBu onGroup
§ Scroller
§ TextArea
§ TextInput
© 2010 Adobe Systems Incorporated. All Rights Reserved. 16
23. Multiple densities: e problem
150 x 40 pixel bu on
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
24. Multiple densities: e problem
150 x 40 pixel bu on
Desktop monitor
@100 dpi
= 1.5” x 0.4”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
25. Multiple densities: e problem
150 x 40 pixel bu on
Desktop monitor Galaxy Tab
@100 dpi @160 dpi
= 1.5” x 0.4” = 0.9” x 0.25”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
26. Multiple densities: e problem
150 x 40 pixel bu on
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”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
27. Multiple densities: e problem
150 x 40 pixel bu on
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”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
28. Multiple densities: e problem
150 x 40 pixel bu on
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, different physical sizes
(Minimum recommended size: 0.25” x 0.25”)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
29. Multiple densities: e problem
150 x 40 pixel bu on
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, different physical sizes
(Minimum recommended size: 0.25” x 0.25”)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
30. Can I use dynamic layout to solve this?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
31. Can I use dynamic layout to solve this?
320x480 @160dpi
(Not easily. You can make
stuff 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.)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
32. Can I use dynamic layout to solve this?
320x480 @160dpi
100%
(Not easily. You can make
stuff ll the screen using
percent sizing, but your
fonts and icons will still be
tiny. And any xed pixel
100%
sizes, e.g. in constraint-
based layouts or padding
values, will be wrong.)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
33. Can I use dynamic layout to solve this?
320x480 @160dpi 640x960 (at same density)
100%
(Not easily. You can make (Not easily. You can make stuff ll the screen
stuff 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%
sizes, e.g. in constraint-
based layouts or padding
values, will be wrong.)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
34. Can I use dynamic layout to solve this?
320x480 @160dpi 640x960 (at same density)
100% 100%
(Not easily. You can make (Not easily. You can make stuff ll the screen
stuff 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%
sizes, e.g. in constraint-
based layouts or padding
values, will be wrong.)
100%
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
35. Can I use dynamic layout to solve this?
320x480 @160dpi 640x960 (at same density) 640x960 @320dpi
100% 100%
(Not easily. You can make (Not easily. You can make stuff ll the screen
stuff 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%
sizes, e.g. in constraint-
based layouts or padding
values, will be wrong.)
100%
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
37. Solution: Automatic scaling for different DPIs
<Application applicationDPI=“160”>
<Button width=“160” height=“40”/>
</Application>
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19
38. Solution: Automatic scaling for different DPIs
<Application applicationDPI=“160”>
<Button width=“160” height=“40”/>
</Application>
160 dpi 240 dpi 320dpi
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19
39. Solution: Automatic scaling for different DPIs
<Application applicationDPI=“160”>
<Button width=“160” height=“40”/>
</Application>
160 dpi 240 dpi 320dpi
Scaled 1.5x
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19
40. Solution: Automatic scaling for different DPIs
<Application applicationDPI=“160”>
<Button width=“160” height=“40”/>
</Application>
160 dpi 240 dpi 320dpi
Scaled 1.5x Scaled 2x
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19
41. Solution: Automatic scaling for different DPIs
<Application applicationDPI=“160”>
<Button width=“160” height=“40”/>
</Application>
160 dpi 240 dpi 320dpi
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.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19
42. 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>
© 2010 Adobe Systems Incorporated. All Rights Reserved. 20
43. Flex 4.5 and tablets
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
44. Flex 4.5 and tablets
Android tablets
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
45. Flex 4.5 and tablets
Android tablets BlackBerry PlayBook
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
46. Flex 4.5 and tablets
Android tablets BlackBerry PlayBook Apple tablets
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
47. Flex 4.5 and tablets
Android tablets BlackBerry PlayBook Apple tablets
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
48. Demo
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22
49. 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.
50. Create your on libraries
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
51. Create your on libraries
ANE: No more limitation
ActionScript Native Extension
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
52. Create your on libraries
ANE: No more limitation
ActionScript Native Extension
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
53. Create your on libraries
ANE: No more limitation
ActionScript Native Extension
C, JAVA
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
54. Create your on libraries
ANE: No more limitation
ActionScript Native Extension
AS3 bridge
C, JAVA
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
55. Create your on libraries
ANE: No more limitation
ActionScript Native Extension
AS3 bridge
C, JAVA
ANE
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
56. Create your on libraries
ANE: No more limitation
ActionScript Native Extension
AS3 bridge
Flex Mobile
project
C, JAVA
ANE SWF
.AIR, .APK, .IPA, .BAR
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
59. Michaël Chaize & resources
RIAgora.com Flex.org
labs.adobe.com
developer.adobe.com
@mchaize Tour de Mobile Flex
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26
60. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.