Mobile development   with Flex 4.5
Ivan Alvarez  Adobe Certied Expert Flex & Air  AUG Manager LiveDataweb http://www.ivanalvarez.com @ivanhoeemail  ivan.alv...
Daniel Ramos  Adobe Certied Instructor  AUG Manager LiveDataweb livedata.groups.adobe.com @dannyGeekemail  daniel.ramos@t...
4
• 6.9
billones:
habitantes4
• 6.9
billones:
habitantes• 5.2
billones:
líneas
telefónicas
móviles
ac9vas4
• 6.9
billones:
habitantes• 5.2
billones:
líneas
telefónicas
móviles
ac9vas• 22%:
smartphones4
Flex
Hero
SDK
4.5
  5
Flex
Hero
SDK
4.5
  5
6
• Run9me:
Adobe
AIR
2.6 6
• Run9me:
Adobe
AIR
2.6 6
7
• Framework:
Adobe
Flex
SDK
4.5 7
• Framework:
Adobe
Flex
SDK
4.5       Skins 7
• Framework:
Adobe
Flex
SDK
4.5       Skins 7
• Framework:
Adobe
Flex
SDK
4.5       Skins              Components 7
• Framework:
Adobe
Flex
SDK
4.5       Skins              Components                       • View 7
• Framework:
Adobe
Flex
SDK
4.5       Skins               Components                       • View                       • ...
• Framework:
Adobe
Flex
SDK
4.5       Skins               Components                       • View                       • ...
• Framework:
Adobe
Flex
SDK
4.5       Skins               Components                       • View                       • ...
• Framework:
Adobe
Flex
SDK
4.5       Skins               Components                       • View                       • ...
• Framework:
Adobe
Flex
SDK
4.5       Skins               Components                       • View                       • ...
View
  8
View
  8
View
  8
View
  8
Ac9onBar
  9
Ac9onBar
  9
ViewNavigator
  10
ViewNavigator
  10
ViewNavigator
  10
ViewNavigator
  11
ViewNavigator
         Search
View  11
ViewNavigator
         Search
View   Details
View  11
ViewNavigator
         Search
View   Details
View  11
ViewNavigator
         Search
View   Details
View  11
ViewNavigator
         Search
View                           Details
View                       pushView(DetailsView)  11
ViewNavigator
         Search
View                           Details
View                       pushView(DetailsView)  11
ViewNavigator
         Search
View                           Details
View                       pushView(DetailsView)     ...
ViewNavigator
         Search
View                           Details
View                       pushView(DetailsView)     ...
ViewNavigatorAplica9on
  12
ViewNavigatorAplica9on
  12
• Framework:
Adobe
Flex
SDK
4.5            Controls                  Layout       Chart• BusyIndicator                  • ...
Flex
Mobile
App
  14
Flex
Mobile
App
           Product
list
view  14
Flex
Mobile
App
           Product
list
view   Product
detail
view  14
Flex
Mobile
App
           Product
list
view   Product
detail
view  14
Flex
Mobile
App
           Product
list
view   Product
detail
view  14
Flex
Mobile
App
           Product
list
view   Product
detail
viewAc9onbar  14
Flex
Mobile
App
           Product
list
view   Product
detail
viewAc9onbar  14
Flex
Mobile
App
               Product
list
view   Product
detail
view Ac9onbarView
Content    14
Flex
Mobile
App
               Product
list
view   Product
detail
view Ac9onbarView
Content    14
Flex
Mobile
App
               Product
list
view   Product
detail
view Ac9onbarView
Content    14
Flex
Mobile
App
               Product
list
view         Product
detail
view Ac9onbar                                   Ta...
Flex
Mobile
App
               Product
list
view           Product
detail
view Ac9onbar                                   ...
Flex
Mobile
App
               Product
list
view           Product
detail
view Ac9onbar                                   ...
• Development
environment:
Flash
Builder
4.5
 15
• Development
environment:
Flash
Builder
4.5
 15
• Development
environment:
Flash
Builder
4.5
 16
DEMOS
Links
hWp://www.adobe.com/devnet/flex/ar9cles/web‐mobile‐reference‐apps.htmlhWp://wwis‐dubc1‐vip118.adobe.com/devnet/flex/te...
Upcoming SlideShare
Loading in …5
×

Mobile development with Flex 4.5 - LiveData May

1,410 views
1,298 views

Published on

Adobe User Group Session - May 2011.

Flex Mobile . Recorded Session http://experts.adobeconnect.com/p4vup9od1qj/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,410
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Agradecimientos a Telmexhub y a todos los presentes online y presencial\n
  • \n
  • \n
  • -comercial, charla en SG multiples plataformas voten voten! \n-la opcion que veremos aqui se llama Flex Hero, 4.5\n
  • -comercial, charla en SG multiples plataformas voten voten! \n-la opcion que veremos aqui se llama Flex Hero, 4.5\n
  • -comercial, charla en SG multiples plataformas voten voten! \n-la opcion que veremos aqui se llama Flex Hero, 4.5\n
  • Diseñar, desarrollar para moviles implica otras caracteristicas\n-periodos cortos\n-interrepciones\n-persistencia de info\n
  • -La herramienta que nos permite crear aplicaciones standalone y crear apps nativas\n-ipa, apk, bar\n\n
  • -La herramienta que nos permite crear aplicaciones standalone y crear apps nativas\n-ipa, apk, bar\n\n
  • -Se realizaron dos cosas sobre el framework\n-El theme para mobile se encuentra escrito en AS3 \n-Los componentes deben lucir mas grandes\n-Flex 4 hizo un cambio radical, separa componentes y vista\n \n
  • -Se realizaron dos cosas sobre el framework\n-El theme para mobile se encuentra escrito en AS3 \n-Los componentes deben lucir mas grandes\n-Flex 4 hizo un cambio radical, separa componentes y vista\n \n
  • -Se realizaron dos cosas sobre el framework\n-El theme para mobile se encuentra escrito en AS3 \n-Los componentes deben lucir mas grandes\n-Flex 4 hizo un cambio radical, separa componentes y vista\n \n
  • -Se realizaron dos cosas sobre el framework\n-El theme para mobile se encuentra escrito en AS3 \n-Los componentes deben lucir mas grandes\n-Flex 4 hizo un cambio radical, separa componentes y vista\n \n
  • -Se realizaron dos cosas sobre el framework\n-El theme para mobile se encuentra escrito en AS3 \n-Los componentes deben lucir mas grandes\n-Flex 4 hizo un cambio radical, separa componentes y vista\n \n
  • -Se realizaron dos cosas sobre el framework\n-El theme para mobile se encuentra escrito en AS3 \n-Los componentes deben lucir mas grandes\n-Flex 4 hizo un cambio radical, separa componentes y vista\n \n
  • -Se realizaron dos cosas sobre el framework\n-El theme para mobile se encuentra escrito en AS3 \n-Los componentes deben lucir mas grandes\n-Flex 4 hizo un cambio radical, separa componentes y vista\n \n
  • -Se realizaron dos cosas sobre el framework\n-El theme para mobile se encuentra escrito en AS3 \n-Los componentes deben lucir mas grandes\n-Flex 4 hizo un cambio radical, separa componentes y vista\n \n
  • -Se realizaron dos cosas sobre el framework\n-El theme para mobile se encuentra escrito en AS3 \n-Los componentes deben lucir mas grandes\n-Flex 4 hizo un cambio radical, separa componentes y vista\n \n
  • -Se realizaron dos cosas sobre el framework\n-El theme para mobile se encuentra escrito en AS3 \n-Los componentes deben lucir mas grandes\n-Flex 4 hizo un cambio radical, separa componentes y vista\n \n
  • -Representa una simple pantalla, el contenido que queramos lo colocamos dentro\n-Cada view tiene una propiedad “data”, a traves de la cual le pasamos la informacion que deseamos mostrar\n\n
  • -Representa una simple pantalla, el contenido que queramos lo colocamos dentro\n-Cada view tiene una propiedad “data”, a traves de la cual le pasamos la informacion que deseamos mostrar\n\n
  • -Representa una simple pantalla, el contenido que queramos lo colocamos dentro\n-Cada view tiene una propiedad “data”, a traves de la cual le pasamos la informacion que deseamos mostrar\n\n
  • -Representa el header de nuestra aplicacion \n-Tipicamente contiene un titulo y uno o mas botones con acciones particulares, como realizar una busqueda, refrescar el view\n
  • -Es el encargado de crear y presentar los diferentes views de nuestra aplicacion\n\n
  • -Es el encargado de crear y presentar los diferentes views de nuestra aplicacion\n\n
  • -Utiliza la metafora de una pila para presentar el conjunto de views \n
  • -Utiliza la metafora de una pila para presentar el conjunto de views \n
  • -Utiliza la metafora de una pila para presentar el conjunto de views \n
  • -Utiliza la metafora de una pila para presentar el conjunto de views \n
  • -Utiliza la metafora de una pila para presentar el conjunto de views \n
  • -Utiliza la metafora de una pila para presentar el conjunto de views \n
  • -Utiliza la metafora de una pila para presentar el conjunto de views \n
  • -Utiliza la metafora de una pila para presentar el conjunto de views \n
  • Se encarga de ofrecernos un template para crear nuestra aplicacion movil\nSe encarga de mantener el estado de la aplicacion, guardarla en disco y restaurarla\nImplementa un skin basico\n
  • -Los siguientes componentes ya se encuentran preparados para moviles, aunque aun faltan\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • Ya que hemos visto cada uno de los componentes por separado, podemos decir que la estructura basica de una aplicacion movil es la siguiente\n
  • \n
  • \n
  • \n
  • \n
  • Mobile development with Flex 4.5 - LiveData May

    1. 1. Mobile development with Flex 4.5
    2. 2. Ivan Alvarez Adobe Certied Expert Flex & Air AUG Manager LiveDataweb http://www.ivanalvarez.com @ivanhoeemail ivan.alvarez@tidyslice.com
    3. 3. Daniel Ramos Adobe Certied Instructor AUG Manager LiveDataweb livedata.groups.adobe.com @dannyGeekemail daniel.ramos@tidyslice.com
    4. 4. 4
    5. 5. • 6.9
billones:
habitantes4
    6. 6. • 6.9
billones:
habitantes• 5.2
billones:
líneas
telefónicas
móviles
ac9vas4
    7. 7. • 6.9
billones:
habitantes• 5.2
billones:
líneas
telefónicas
móviles
ac9vas• 22%:
smartphones4
    8. 8. Flex
Hero
SDK
4.5
 5
    9. 9. Flex
Hero
SDK
4.5
 5
    10. 10. 6
    11. 11. • Run9me:
Adobe
AIR
2.6 6
    12. 12. • Run9me:
Adobe
AIR
2.6 6
    13. 13. 7
    14. 14. • Framework:
Adobe
Flex
SDK
4.5 7
    15. 15. • Framework:
Adobe
Flex
SDK
4.5 Skins 7
    16. 16. • Framework:
Adobe
Flex
SDK
4.5 Skins 7
    17. 17. • Framework:
Adobe
Flex
SDK
4.5 Skins Components 7
    18. 18. • Framework:
Adobe
Flex
SDK
4.5 Skins Components • View 7
    19. 19. • Framework:
Adobe
Flex
SDK
4.5 Skins Components • View • ViewNavigator
 7
    20. 20. • Framework:
Adobe
Flex
SDK
4.5 Skins Components • View • ViewNavigator
 • Ac9onBar 7
    21. 21. • Framework:
Adobe
Flex
SDK
4.5 Skins Components • View • ViewNavigator
 • Ac9onBar • BusyIndicator 7
    22. 22. • Framework:
Adobe
Flex
SDK
4.5 Skins Components • View • ViewNavigator
 • Ac9onBar • BusyIndicator • ViewNavigatorApplica9on 7
    23. 23. • Framework:
Adobe
Flex
SDK
4.5 Skins Components • View • ViewNavigator
 • Ac9onBar • BusyIndicator • ViewNavigatorApplica9on • TabbedViewNavigatorApplica9on 7
    24. 24. View
 8
    25. 25. View
 8
    26. 26. View
 8
    27. 27. View
 8
    28. 28. Ac9onBar
 9
    29. 29. Ac9onBar
 9
    30. 30. ViewNavigator
 10
    31. 31. ViewNavigator
 10
    32. 32. ViewNavigator
 10
    33. 33. ViewNavigator
 11
    34. 34. ViewNavigator
 Search
View 11
    35. 35. ViewNavigator
 Search
View Details
View 11
    36. 36. ViewNavigator
 Search
View Details
View 11
    37. 37. ViewNavigator
 Search
View Details
View 11
    38. 38. ViewNavigator
 Search
View Details
View pushView(DetailsView) 11
    39. 39. ViewNavigator
 Search
View Details
View pushView(DetailsView) 11
    40. 40. ViewNavigator
 Search
View Details
View pushView(DetailsView) popView() 11
    41. 41. ViewNavigator
 Search
View Details
View pushView(DetailsView) popView() 11
    42. 42. ViewNavigatorAplica9on
 12
    43. 43. ViewNavigatorAplica9on
 12
    44. 44. • Framework:
Adobe
Flex
SDK
4.5 Controls Layout Chart• BusyIndicator • DataGroup • All• BuWon • Group• BuWonBar • HGroup• CheckBox • Scroller• HSlider • Spacer• Image
 • TileGroup• Label • VFroup• List• RadioBuWon
/
RadioBuWonGroup• TextArea• TextInput 13
    45. 45. Flex
Mobile
App
 14
    46. 46. Flex
Mobile
App
 Product
list
view 14
    47. 47. Flex
Mobile
App
 Product
list
view Product
detail
view 14
    48. 48. Flex
Mobile
App
 Product
list
view Product
detail
view 14
    49. 49. Flex
Mobile
App
 Product
list
view Product
detail
view 14
    50. 50. Flex
Mobile
App
 Product
list
view Product
detail
viewAc9onbar 14
    51. 51. Flex
Mobile
App
 Product
list
view Product
detail
viewAc9onbar 14
    52. 52. Flex
Mobile
App
 Product
list
view Product
detail
view Ac9onbarView
Content 14
    53. 53. Flex
Mobile
App
 Product
list
view Product
detail
view Ac9onbarView
Content 14
    54. 54. Flex
Mobile
App
 Product
list
view Product
detail
view Ac9onbarView
Content 14
    55. 55. Flex
Mobile
App
 Product
list
view Product
detail
view Ac9onbar TapView
Content 14
    56. 56. Flex
Mobile
App
 Product
list
view Product
detail
view Ac9onbar TapView
Content back
 buWon 14
    57. 57. Flex
Mobile
App
 Product
list
view Product
detail
view Ac9onbar TapView
Content back
 buWon 14
    58. 58. • Development
environment:
Flash
Builder
4.5
 15
    59. 59. • Development
environment:
Flash
Builder
4.5
 15
    60. 60. • Development
environment:
Flash
Builder
4.5
 16
    61. 61. DEMOS
    62. 62. Links
hWp://www.adobe.com/devnet/flex/ar9cles/web‐mobile‐reference‐apps.htmlhWp://wwis‐dubc1‐vip118.adobe.com/devnet/flex/testdrivemobile.htmlhWp://devgirl.org/category/flex‐4‐5/hWp://www.adobe.com/devnet/flex/ar9cles/mobile‐development‐flex‐flashbuilder.html 18

    ×