Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adobe AIR Programming to Desktop and Mobile


Published on

Adobe AIR Programming to Desktop and Mobile course slides. Course contains about 200 PowerPoint slides, exercise materials and 50 example projects.

Published in: Technology
  • Be the first to comment

Adobe AIR Programming to Desktop and Mobile

  1. 1. Adobe  AIR  Programming   (desktop  and  mobile)   Pasi  Manninen     JAMK  University  of  Applied  Sciences   Slide  version  Nov  21th,  2013    
  2. 2. IntroducHon  the  Adobe  Integrated   RunHme  (AIR)   •  Is  a  cross-­‐operaHng  system  runHme   •  Allows  Rich  Internet  ApplicaHons  (RIAs)  to  run  as   desktop  applicaHons  (behave  like  any  other  desktop   applicaHon)  or  mobile  devices   •  Leverages  exisHng  web  development  skills  to  build   desktop  soMware   •  Users  interact  with  AIR  applicaHons  in  the  same  way   they  interact  with  naHve  desktop  applicaHons   •  AIR  is  installed  once  on  the  user's  computer   •  AIR  applicaHons  are  installed  and  run  inside  the   runHme   •  Current  version  is  AIR  3.9   Adobe  AIR  Programming,  Pasi  Manninen.   2  
  3. 3. Working  with  exisHng  Technologies   •  AIR  enables  you  to  work  in  familiar  environments   •  AIR  leverages  the  tools  and  approaches  you   already  know  to  build  the  best  possible  user   experience   Adobe  AIR  Programming,  Pasi  Manninen.   3  
  4. 4. Understanding  the  applicaHon  stack   •  AIR  is  a  runHme  engine,  with  liTle  or  no  visible   interface   •  AIR  wraps  your  applicaHon  to  provide  operaHng   system  access   Adobe  AIR  Programming,  Pasi  Manninen.   4  
  5. 5. Understanding  the  benefits   •  You  develop  for  AIR,  not  any  specific   operaHng  system  or  browser   •  AIR  provides  a  consistent  cross-­‐operaHng   system  plaXorm  and  framework   •  AIR  eliminates  cross-­‐browser  tesHng  by   ensuring  consistent  funcHonality  and   interacHon  across  desktops   AIR  2.6   Adobe  AIR  Programming,  Pasi  Manninen.   5  
  6. 6. Adobe  AIR  features   •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  Mass  Storage  DetecHon   NaHve  Process  API   Microphone  Data  Access   Drag-­‐and-­‐drop  data  sharing   Peer-­‐to-­‐Peer  Networking  CapabiliHes   MulHtouch  and  gestures   Open  documents  with  its  default  applicaHon   Global  error  handling   Enhanced  prinHng  support   WebKit  with  HTML5/CSS3  support   IPv6  format  addresses   Large  maximum  window  size  4095x4095px   Support  for  screen  readers   Local  embedded  database   Ability  to  run  at  startup   ApplicaHon  update   Web  launcher   •  •  •  •  •  •  •  •  •  •  •  •  •  •  Security  improvements   Content  protecHon  (DRM)     New  Linux  DEB  and  RPM  installers     TLS/SSL  sockets     Browser  collaboraHon   Clipboard  access   Rich  media  and  video   NaHve  window  chrome   Universal  applicaHon  installer   Sound  APIs   3D  Effects  and  Drawing  API   PDF  file  rendering  support   Digitally  signed  applicaHons   …   hTp://   Adobe  AIR  Programming,  Pasi  Manninen.   6  
  7. 7. Apache  Flex  (Adobe  Flex)   •  SDK  to  develop  and  deployment  cross-­‐ plaXorm  applicaHons  with  Adobe  Flash   plaXorm   •  Flex  2  (2006),  Flex  3  (2007),  Flex  4  (2010),  Flex   4.5  (Adobe  Flash  Builder  4.5,  2011)   •   Apache  Flex  4.8.0,  Apache  Flex  4.9.0  (2012)   –  Flex  trademark  issues  are  largely  cleared  up   –  New  components  added  to  a  new  namespace   –  …   Adobe  AIR  Programming,  Pasi  Manninen.   7  
  8. 8. Understanding  the  AIR   •  The  Adobe  AIR  SDK  provides  tools  to  develop   AIR  applicaHons  using  any  text  editor,  and   compile  them  from  the  command  line   –  schema  and  template  for  applicaHon  descriptor   file   –  default  icons  for  AIR  applicaHons   –  framework  for  AIR  APIs   –  template  for  AIR  applicaHon  installaHon  badge   –  command-­‐line  tools  for  building  and  deploying   AIR  applicaHons   Adobe  AIR  Programming,  Pasi  Manninen.   8  
  9. 9. Flash  Builder  Interface   Organizes  your  projects   Uses  Eclipse  terminology  for  interface  elements   Is  configured  for  opHmal  development  flexibility   A  project  is  a  collecHon  of  folders,  files,  resources   and  class  libraries   •  A  workspace  is  a  grouping  of  projects   •  •  •  •  –  Actual  file  system  directory  that  contains  the  files  and   folders  that  track  a  group  of  projects   Adobe  AIR  Programming,  Pasi  Manninen.   9  
  10. 10. AIR  in  Flash  Builder  4   •  Flash  Builder  4  is  an  integrated  development   environment  which  supports  AIR  applicaHon   development  with  tools  including   –  AIR  project  wizard   –  automaHc  creaHon  and  configuraHon  of  the   applicaHon  descriptor   –  compilaHon  and  debugging  tools  for  AIR   applicaHons     •  AIR  Debug  Launcher  (ADL)   •  AIR  Developer  Tool  (ADT)   Adobe  AIR  Programming,  Pasi  Manninen.   10  
  11. 11. CreaHng  AIR  projects   •  Create  a  Flex  project   •  Set  the  applicaHon  type  to     Desktop  applicaHon   •  AutomaHcally  creates  the     applicaHon  descriptor   •  The  applicaHon  descriptor     uniquely  idenHfies  an  applicaHon     and  defines  several  addiHonal  properHes   •  Running  or  debugging  applicaHons  from  the   project  will  happen  through  AIR  Debug  Launcher   (ADL)   Adobe  AIR  Programming,  Pasi  Manninen.   11  
  12. 12. Understanding  AIR  Debug  Launcher   •  ADL  is  a  development  tool  which  runs  AIR   applicaHons  without  having  to  install  them   first  (can  be  tested  nicely)   •  Provides  debugging  support  for  Flash  Builder  4   •  Allows  only  one  instance  of  an  AIR  applicaHon   to  run  at  a  Hme   •  Can  be  executed  via  command  line   Adobe  AIR  Programming,  Pasi  Manninen.   12  
  13. 13. ExporHng  AIR  applicaHons   •  Flash  Builder  provides  an  export  wizard  that  is   used  to   –  create  the  installer  package   –  aTach  a  code  authenHcaHon     cerHficate   Adobe  AIR  Programming,  Pasi  Manninen.   13  
  14. 14. Understanding  AIR  Development  Tool   •  The  export  wizard  uses  the  AIR  Developer  Tool   (ADT)  to  build  an  AIR  applicaHon  installer   package   •  The  AIR  installer  package  (*.air  file)  is  a   compressed  file  format,  which  may  be  opened   like  any  zip-­‐compressed  file   •  At  a  minimum,  the  installer  package  will  include   the  applicaHon  descriptor  and  a  main  SWF  or   HTML  file   •  ADT  is  also  usable  as  a  command-­‐line  tool   Adobe  AIR  Programming,  Pasi  Manninen.   14  
  15. 15. CreaHng  first  AIR  applicaHon   •  AIR  projects  are  created  in  Flash  Builder  4,  and  appear   as  Flex  projects,  they  simply  compile  differently   •  ApplicaHons  are  tested  in  the  AIR  Debug  Launcher   (ADL),  in  which  they  run  as  desktop  applicaHons,   instead  of  a  web  browser   •  The  MXML  root  element  is  <s:WindowedApplica3on>   instead  of  <s:Applica3on>   <?xml  version="1.0"  encoding="uX-­‐8"?>   <s:WindowedApplicaHon            xmlns:fx="hTp://"            xmlns:s="library://"            xmlns:mx="library://">   <fx:DeclaraHons>          <!-­‐-­‐  Place  non-­‐visual  elements  (e.g.,  services,  value  objects)  here  -­‐-­‐>   </fx:DeclaraHons>   </s:WindowedApplicaHon>   Adobe  AIR  Programming,  Pasi  Manninen.   15  
  16. 16. CreaHng  a  Main  applicaHon   •  Along  with  the  main  applicaHon  file,  an   applicaHon  descriptor  is  generated   –  the  applicaHon  descriptor  has  the  same  name  as   the  applicaHon  file  with  -­‐app  appended  before  the   file  extension   •  Specifies  parameters  for  idenHfying,  installing,   and  launching  AIR  applicaHons   Adobe  AIR  Programming,  Pasi  Manninen.   16  
  17. 17. Building  AIR  applicaHon   •  By  default,  applicaHons  are  built  (SWF  files  compiled   and  related  files  generated  and  deployed)  each  Hme   they  are  saved  in  Flash  Builder  4   –  disable  this  setng  by  unchecked  Project  >  Build   AutomaHcally   –  a  re-­‐build  with  discard  of  current  build  files  can  be  forced   by  selecHng  Project  >  Clean   •  When  an  AIR  applicaHon  is  Run   –  MXML  and  AcHonScript  are  compiled  to  SWF   –  SWF  and  current  applicaHon  descriptor  are  wriTen  to  the   output  folder   –  SWF  is  loaded  into  the  AIR  Debug  Launcher  (ADL)  to  allow   funcHonal  tesHng   Adobe  AIR  Programming,  Pasi  Manninen.   17  
  18. 18. Example:  Create  an  AIR  applicaHon   •  Create  an  AIR  project  in  Flash  Builder  4   •  Add  content  to  the  AIR  applicaHon   •  Build  and  run  an  AIR  applicaHon   Adobe  AIR  Programming,  Pasi  Manninen.   18  
  19. 19. ExporHng  a  release  version  of  AIR   applicaHon   •  A  "release"  is  a  version  of  the  applicaHon   •  The  version  is  defined  in  the  applicaHon  descriptor   <?xml  version="1.0"  encoding="uX-­‐8"  standalone="no"?>   <applicaHon  xmlns="hTp://">    <id>fi.ptm.AIRTestExample</id>    <filename>AIRTestExample</filename>    <name>AIRTestExample</name>    <version>1.0.0</version>    <descripHon>AIR  TesHng  applicaHon</descripHon>    <copyright>(c)  2013  PTM</copyright>   ...   •  ExporHng  an  applicaHon  uses  the  AIR  Developer  Tool   (ADT)  to  build  the  compressed,  zip-­‐format  .air  file   Adobe  AIR  Programming,  Pasi  Manninen.   19  
  20. 20. Code-­‐signing  an  applicaHon   •  Code  signing  is  the  process  of  digitally  signing   executable  files  to   –  confirm  the  soMware  author   –  guarantee  the  code  has  not  been  altered  or  corrupted   since  it  was  signed,  by  use  of  a  checksum   •  AIR  Export  supports  three  signature  opHons   –  use  a  verified  digital  signature  from  a  public,  commercial   source  like  Verisign  or  Thawte   –  create  an  unverified,  self-­‐signed  signature  during  export   –  create  an  unsigned,  intermediate  .airi  file  for  later   signature   •  ApplicaHon  cannot  be  installed  unHl  signed   Adobe  AIR  Programming,  Pasi  Manninen.   20  
  21. 21. A  self-­‐signed  digital  serHficate   Adobe  AIR  Programming,  Pasi  Manninen.   21  
  22. 22. SelecHng  applicaHon  contents   •  During  export,  you  select  specific  project  files  to   include  in  the  .air  installer   •  The  compiled  SWF  and  applicaHon     descriptor  are  required   •  AddiHonal  folders  and  files     may  be  added  on  a  per  build     basis   •  Only  fully  understood  and     trusted  code  should  be  included   in  the  .air  installer,  as  this  code  runs  with  all     system  privileges  of  the  installing  user   Adobe  AIR  Programming,  Pasi  Manninen.   22  
  23. 23. Installing  an  applicaHon   •  AIR  applicaHons  are  installed  like  any  other   applicaHon   –  user  may  customize  the  install     locaHon  and  choose  a  desktop  shortcut   •  Steps  to  install  an  AIR  applicaHon   –  download  the  .air  file   –  double-­‐click  or  run  the  .air  file   –  click  Install  to  start  the  installaHon   –  choose  installaHon  opHons,  and  then  click  ConHnue   –  aMer  the  installaHon  is  complete,  open  the  applicaHon   Adobe  AIR  Programming,  Pasi  Manninen.   23  
  24. 24. Example:  Export  and  install  AIR   applicaHon   •  •  •  •  Select  the  applicaHon  to  release   Sign  the  applicaHon   Set  the  AIR  file  contents   Install  the  AIR  applicaHon   Adobe  AIR  Programming,  Pasi  Manninen.   24  
  25. 25. Understanding  Flex  namespaces   •  XML  namespaces  idenHfy  sets  of  related  tags   •  Flex  4  divides  funcHonality  and  components  sets  into   three  namespaces   •  Three  primary  Flex  framework  namespaces   –  fx:  groups  core  funcHonality   –  mx:  groups  standard  Flex  3  MX  components   –  s:  groups  new  Flex  4  Spark  components   •  A  namespace  idenHfies  a  set  of  MXML  tags  by  prefix   <s:WindowedApplicaHon                                                              xmlns:fx="hTp://"                                                                xmlns:s="library://"                                                                xmlns:mx="library://”>   Adobe  AIR  Programming,  Pasi  Manninen.   25  
  26. 26. Using  component  namespaces  in  Flex  4     •  fx:  new  MXML  language  elements  plus  compiler  direcHves   <fx:Class  …>   <fx:Script  …>   •  s:  new  Spark  components  and  visual  primiHves  library   <s:ColorMatrixFilter  …>   <s:Label  …>   •  mx:  the  exisHng  Flex  3  MX  component  library   <mx:DataGrid  …>   <mx:TextInput  …>   Adobe  AIR  Programming,  Pasi  Manninen.   26  
  27. 27. Using  component  namespaces  in  Flex  4   •  Remember  that  Custom  component  libraries   are  also  idenHfied  by  namespaces   <s:WindowedApplicaHon  xmlns:fx="hTp://"                                                              xmlns:s="library://"                                                              xmlns:mx="library://"                                                        xmlns:components="components.*"                                                        minWidth="1024"  minHeight="768">   <components:JAMKEmployee  />   •  JAMKEmployee.mxml  is  own  component  file,   defined  with  mxml  language   Adobe  AIR  Programming,  Pasi  Manninen.   27  
  28. 28. Understanding  Flex  components   •  A  component  is  a  reusable  element  in  a  Flex   applicaHon   –  a  control  is  a  visual  user  interface  component   •  Examples:  BuTon,  Label,  Image   –  a  container  hold  controls  or  other  containers     •  Examples:  ApplicaHon,  Panel,  Group   •  Assign  component  properHes  in  MXML:   <s:Label  text="Here  we  are…"  />     <s:Label>    <s:text>Here  we  are…</s:text>   </s:Label>   Adobe  AIR  Programming,  Pasi  Manninen.   28  
  29. 29. IntroducHon  Spark  vs  MX  components   •  MX  components     –  Used  to  be  called  Halo  components   –  Originally  included  in  Flex  3   –  Each  component  contains  behavior,  layout,  styles  and  skin   •  Spark  components   –  New  components  in  Flex  4   –  Separates  behavior,  layout,  styles  and  skin  into  different  classes   •  Spark  and  MX  components  can  be  used  together   –  Based  on  the  UIComponent  class   •  Available  components   –  Approximately  50  MX  components   –  Approximately  20  Spark  components   •  Use  Spark  components  when  possible   •  New  Flex  4.8  and  4.9  has  a  new  spark  components  (from  mx)     Adobe  AIR  Programming,  Pasi  Manninen.   29  
  30. 30. Spark  layout  classes   •  Classes  are  defined  in  the  spark.layouts  package   –  BasicLayout,  HorizontalLayout,  TileLayout  and  Ver3calLayout   •  Must  be  used  with  containers   •  Defines  how  children  within  a  container  are  laid  out   •  Each  container  has  a  layout  property   –  –  –  –  Property  of  the  container,  example  :  WindowedApplicaHon   Use  the  layout  block   InstanHate  the  layout  class  inside  the  block   The  layout  property  has  a  value  that  is  an  instance  of  another  class   <s:WindowedApplicaHon  ...>    <s:layout>      [..Layout  class  goes  here..]    </s:layout>   </s:WindowedApplicaHon>   Adobe  AIR  Programming,  Pasi  Manninen.   30  
  31. 31. BasicLayout  class   •  Default  layout  and  uses  absolute  posiHoning   •  Absolute  posiHoning:   –  Specifies  x  and  y  properHes  of  the  children   –  The  origin  is  the  top-­‐leM  corner  of  the  container   –  x  increases  to  the  right,  y  increases  to  the  boTom   <s:WindowedApplicaHon  ...>      <s:layout>          <s:BasicLayout/>      </s:layout>      <components:JAMKEmployee  ...            x="10"  y="10"/>      ...   Adobe  AIR  Programming,  Pasi  Manninen.   31  
  32. 32. HorizontalLayout  Class   •  Lays  out  children  in  a  single  horizontal  row   –  x  and  y  properHes  are  ignored   •  The  height  of  the  row  is  the  height  of  the   tallest  child   •  Each  child  calculates  its  own  width  by  default   <s:WindowedApplicaHon...>    <s:layout><s:HorizontalLayout/></s:layout>   <components:JAMKEmployee  .../>   <components:JAMKEmployee  ../>   …   </s:ApplicaHon>   Adobe  AIR  Programming,  Pasi  Manninen.   32  
  33. 33. VerHcalLayout  Class   •  Lays  out  children  in  a  single  verHcal   column   –  x  and  y  properHes  are  ignored   •  The  width  of  the  column  is  typically  the   width  of  the  widest  child   •  Each  child  calculates  its  own  height  by   default   <s:WindowedApplicaHon...>    <s:layout><s:VerHcalLayout/></s:layout>   <components:JAMKEmployee  .../>   <components:JAMKEmployee  ../>   …   </s:ApplicaHon>   Adobe  AIR  Programming,  Pasi  Manninen.   33  
  34. 34. TileLayout  Class   •  Lays  out  children  in  one  or  more  verHcal  columns  or  horizontal  rows   –  x  and  y  properHes  are  ignored   •  The  orienta3on  property  determines  the  layout  direcHon   •  Valid  values  for  orientaHon  property  are   –  columns  for  column  layout   –  rows  for  a  row  layout,  which  is  default   •  All  cells  of  the  Hle  layout  have  the  same  size   –  Height  of  the  cell  is  the  height  of  the  tallest  child   –  Width  of  the  cell  is  the  width  of  the  widest  child   <s:WindowedApplicaHon...>    <s:layout><s:TileLayout/></s:layout>   <components:JAMKEmployee  .../>   <components:JAMKEmployee  ../>   …   </s:ApplicaHon>   Adobe  AIR  Programming,  Pasi  Manninen.   34  
  35. 35. Spark  Container  Classes   •  Layout  an  applicaHon  using  container  components   –  Rectangular  region  of  Flash  Player  drawing  surface   –  Hierarchical  structure  contains  controls  and  other  containers   –  Default  layout  methods  to  control  the  layout  of  its  children,   including  sizing  and  posiHoning   –  All  containers  are  children  of  the  UIComponent  and  Container   classes   •  Containers  use  a  set  of  layout  rules  to  posiHon  components   –  Keeps  you  from  having  to  worry  about  posiHons   –  Allows  easy  resizing/re-­‐posiHoning  with  browser  window  size   •  Container  components  support  the  default  layout  classes   and  custom  layout  classes   Adobe  AIR  Programming,  Pasi  Manninen.   35  
  36. 36. Spark  Container  Classes   •  Spark  includes  the  following  non-­‐skinnable   containers:   –  Group   –  DataGroup   •  And  following  skinnable  containers:   –  SkinnableContainer     –  SkinnableDataContainer     –  Panel     –  BorderContainer     –  WindowedApplicaHon,  ApplicaHon   Adobe  AIR  Programming,  Pasi  Manninen.   36  
  37. 37. ApplicaHon  Container   •  The  WindowedApplicaHon  container  holds  all   content  and  business  logic  in  an  MXML-­‐based   applicaHon   <s:WindowedApplicaHon  xmlns:fx="hTp://"                                                        xmlns:s="library://"                                                        xmlns:mx="library://"                                                        minWidth="955"  minHeight="600">   <s:layout>      <s:VerHcalLayout/>    </s:layout>    ...  content  here  ...   </s:ApplicaHon>   Adobe  AIR  Programming,  Pasi  Manninen.   37  
  38. 38. Group  Container   •  Used  to  manage  the  layout  of  visual  children   •  This  container  is  not  skinnable   •  Uses  a  layout  property   <s:WindowedApplicaHon...>      <s:layout><s:VerHcalLayout/></s:layout>      <s:Label  text="Employee  Directory".../>        <s:Group>          <s:layout>              <s:TileLayout/>          </s:layout>   ...   Adobe  AIR  Programming,  Pasi  Manninen.   38  
  39. 39. Panel  Container   •  Lets  you  apply  a  skin  to  all  elements  within  it     •  This  container  is  skinnable   •  Has  a  header  and  a  content  area   <s:Panel  Htle=“JAMK  Employee  of  the  Month">    <s:layout>      <s:VerHcalLayout/>    </s:layout>    ...  content  here  ...   </s:Panel>   Adobe  AIR  Programming,  Pasi  Manninen.   39  
  40. 40. Sample  ApplicaHon  layout   Adobe  AIR  Programming,  Pasi  Manninen.   40  
  41. 41. Example:  Spark  container  that  uses   BasicLayout  and  constraints   <?xml  version="1.0"  encoding="uX-­‐8"?>   <s:Group  xmlns:fx="hTp://"                                                                              xmlns:s="library://"                                                                              xmlns:mx="library://"                                                                              width="200"  height="200">   <s:layout>          <s:BasicLayout/>   </s:layout>     <s:VGroup    horizontalCenter="0"                                            verHcalCenter="0">          <mx:Image  source="images/employee02.png"                                                        width="70"  height=  "100"/>          <s:Label  text="Tapani  Äijänen"  />   </s:VGroup>     </s:Group>   Adobe  AIR  Programming,  Pasi  Manninen.   41  
  42. 42. MX  navigator  containers   •  Navigator  containers  control’s  navigaHon  among  child  containers   –  children  can  only  be  MX  containers  or  <s:NavigatorContent>  tag   –  Spark  equivalents  do  not  exist  in  Flex  4   •  Use  navigator  containers  when  you  want  to  control  what  other   container  to  display   •  The  individual  child  layout  containers,  not  the  navigator,  control   the  layout  and  posiHoning  of  their  children   Adobe  AIR  Programming,  Pasi  Manninen.   42  
  43. 43. Available  MX  navigator  containers   Container Description Accordion Organizes information in a series of child panels, where one panel is active at any time TabNavigator Displays a container with tabs to let users switch between different content areas ViewStack Defines a stack of containers that displays a single container at a time Adobe  AIR  Programming,  Pasi  Manninen.   43  
  44. 44. Using  the  ViewStack  container   •  Place  content  into  containers   •  Switch  between  containers  using  built  in  mechanisms   •  Nest  the  containers  into  a  ViewStack  navigator  container   –  <mx:ViewStack>  tag   –  displays  only  one  child  container  at  a  Hme   –  height  and  width  based  on  the  first  acHve  child   <mx:ViewStack  id="JAMKContent">    <s:NavigatorContent  label="Music  and  Media  management">      ...    </s:NavigatorContent>    <s:NavigatorContent  label="Nursing">      ...    </s:NavigatorContent>    <s:NavigatorContent  label="ICT">    ...    </s:NavigatorContent>   </mx:ViewStack>   Adobe  AIR  Programming,  Pasi  Manninen.   44  
  45. 45. Understanding  ViewStack  basics   •  The  ViewStack  container  does  not  contain  a   user  interface  to  switch  between  child   containers   –  use  the  LinkBar  or  TabBar  containers  to  switch   between  child  containers   –  use  the  label  property  of  the  child  containers  in   the  LinkBar  or  TabBar  container  display   –  or  implement  custom  navigaHon  using  ViewStack   properHes   Adobe  AIR  Programming,  Pasi  Manninen.   45  
  46. 46. NavigaHng  with  LinkBar/TabBar   control   •  Specifies  the  ViewStack  container  as  the  value  of  the   dataProvider  property  of  the  LinkBar  control   •  Defines  a  horizontal  or  verHcal  row  of  LinkBuKon   controls   •  Typical  use  is  to  control  the  acHve  children  of  a   ViewStack  container   <mx:LinkBar    dataProvider="{JAMKContent}"  />   <mx:TabBar    dataProvider="{JAMKContent}"  />   Adobe  AIR  Programming,  Pasi  Manninen.   46  
  47. 47. Using  the  TabNavigator  container   Works  the  same  way  as  the  ViewStack  container   Defines  a  horizontal  row  of  tabs   Does  not  need  to  specify  a  ViewStack  or  dataProvider   Displays  the  associated  child  content  when  a  tab  is   selected   •  Displays  child  containers  in  the  order  they  are  defined   •  •  •  •  <mx:TabNavigator  id="JAMKContent">            ...child  containers...   </mx:TabNavigator>   Adobe  AIR  Programming,  Pasi  Manninen.   47  
  48. 48. Using  the  Accordion  container   •  Works  the  same  way  as  the  ViewStack  and   TabNavigator  containers   •  Defines  verHcally-­‐stacked  panels     •  Panels  animate  as  they  open  and  close   •  Displays  only  one  child  of  the  Accordion  at  a  Hme   <mx:Accordion  id="JAMKContent">            ...child  containers...   </mx:TabNavigator>   Adobe  AIR  Programming,  Pasi  Manninen.   48  
  49. 49. Handling  Events   •  Events  indicates  that  something  happens  in  applicaHon   •  System  (framework)  iniHated   –  result  of  systemaHc  code  execuHon   –  for  example:  creaHonComplete,  iniHalize,  show,  ...   •  User  iniHated   –  result  of  user  interacHon  with  control  or  container   –  for  example:  click,  change,  mouseOver,  ...   •  Handling  user  events  supports  subset  of  DOM  Level  3   Events  specificaHon   – Adobe  AIR  Programming,  Pasi  Manninen.   49  
  50. 50. ImplemenHng  event  handlers   •  Event  handlers  respond  to  events  (also  called   event  listeners)   •  There  is  two  ways  to  implement  an  event   handler   –  using  inline  AcHonScript   –  using  AcHonScript  funHons  in  a  Script  block   Adobe  AIR  Programming,  Pasi  Manninen.   50  
  51. 51. Inline  AcHonScript  events  in  MXML   •  Statements  in  event  handlers  are  inline  AcHonScript   <s:TagName  eventName=“AcHonScript  statement  or  funcHon  call  here"  />   •  Values  in  binding  curly  braces  ({})  are  inline  AcHonScript   <s:BuTon  id="submitBuTon"    label="Submit"  click="personName.text='Jesse  James'"/>   <s:Label  id="personName"  text="Click  {submitBuTon.label}"/>   •  Another  example  with  DateChooser  with  change  event   <s:DateChooser  id="sDate"  change="'You  have  selected  '  +              sDate.selectedDate.toDateString())"/>   Adobe  AIR  Programming,  Pasi  Manninen.   51  
  52. 52. AcHonScript  event  handler  funcHons   •  Use  event  handler  funcHons   –  If  the  acHon  requires  more  than  one  line  of  code   –  Enables  reuse   –  Keeps  code  cleaner   •  Place  code  within  a  Script  tag  body   •  Everything  inside  the  Script  tag  body  is  treated  as  XML  by  parser   •  Use  CDATA  to  prevent  the  compiler  from  interpreHng  the  AcHonScript   code  as  XML   <fx:Script>      <![CDATA[        private  funcHon  dateChangeHandler():void  {        'You  have  selected  '  +    sDate.selectedDate.toDateString());              }      ]]>   </fx:Script>   <mx:DateChooser  id="sDate"  change="dateChangeHandler()"/>   Adobe  AIR  Programming,  Pasi  Manninen.   52  
  53. 53. CreaHng  funcHons  in  external  files   •  FuncHons  can  be  placed  in  an  external  AcHonScript  file   •  use  .as  for  the  file  extension   •  File  can  only  contain  funcHons,  variable  declaraHons   and  comments   •  Do  NOT  need  the  CDATA  tag  set   •  Include  the  external  AcHonScript  file  (if  needed)   •  Use  the  source  property  of  the  Script  tag  in  your   applicaHon   <fx:Script  source=""/>   Adobe  AIR  Programming,  Pasi  Manninen.   53  
  54. 54. Example:  Using  inline  and  funcHon   event  handling   •  System  events  that  occur   without  user  interacHon   •  InteracHon  with  BuTon   to  see  user  events   Adobe  AIR  Programming,  Pasi  Manninen.   54  
  55. 55. Event  Object   •  Every  event  that  is  dispatched  contains  an  event  object   with  informaHon  about  the  event   •  Every  event  object  inherits  from  the   class   •  Event  objects  contain  a  large  collecHon  of  named   properHes   •  Refer  to  the  event  object  inside  an  event  handler  as  an   object  named  event   <mx:DateChooser  id="sDate"  change="dateChangeHandler(event)"/>    import;     funcHon  dateChangeHandler(event:CalendarLayoutChangeEvent):void  {    ...   }   Adobe  AIR  Programming,  Pasi  Manninen.   55  
  56. 56. Event  object  properHes   •  All  event  objects  contain  properHes   –  some  are  the  same  for  all  events  (type  and  target)   –  some  are  specific  to  the  event  being  broadcast     –  custom  properHes  are  specified  in  a  custom  event   class   Property Type Description type String e type of event for example, KeyboardEvent target Object e component instance that broadcast the event String A property of the target object, which is the instance name of the target Adobe  AIR  Programming,  Pasi  Manninen.   56  
  57. 57. Datatyping  the  event  object   •  Use  the  Event  class  as  the  datatype  when  needed   private  funcHon  dateChangeHandler(event:Event):void   •  More  specific  event  types  are  available  which  are   subclasses  of  Event   –  –  –  –  MouseEvent   DragDropEvent   ResultEvent   ...   •  Benefits  of  datatyping   –  Faster  runHme  performance   –  Compile  Hme  type  checking   –  Access  to  event  specific  properHes   Adobe  AIR  Programming,  Pasi  Manninen.   57  
  58. 58. Adding  event  listeners   •  Event  listeners  must  be  added  via  AcHonScript   •  Use  addEventListener()  method  from  EventDispatcher   class   •  Enables  registraHon  of  event  handler  funcHons  for  a   specific  event   •  The  addEventListener()  method  will  implicitly  create  the   event  object  for  you  and  pass  it  to  the  listener  funcHon   object.addEventListener(eventType:String,listener:FuncHon):void     •  Good  pracHce  to  remove  event  listeners  no  longer  needed   object.removeEventListener(eventType:String,listener:FuncHon);   Adobe  AIR  Programming,  Pasi  Manninen.   58  
  59. 59. Example:  Using  event  listeners     •  creaHonComplete  =>  call  own   made  funcHon   •  Register  event  listener  for   date  change  DateChooser   control   Adobe  AIR  Programming,  Pasi  Manninen.   59  
  60. 60. Using  Custom  Events   •  Communicate  informaHon  and  data  between   applicaHon  components   •  Create  own  event  class  that  extends  from  Event  class   –  handle  event  type,  bubling  and  cancellabe  in  constructor   –  override  clone()-­‐method  (used  to  create  a  copy  of  Event   object)   •  Custom  events  are  declared  with  <fx:Metadata>  tag   <fx:Metadata>          [Event(name="custom  event  name",  type="event  object  type")]   </fx:Metadata>   •  Use  dispatchEvent()-­‐method  to  ”send”  event  with  data     Adobe  AIR  Programming,  Pasi  Manninen.   60  
  61. 61. Example:  Dispatch  Custom  Event   •  Create  a  new  login  event   •  LoginForm.mxml  dispatch  a  new  login  event   (with  username  and  password  data)   •  Main  ApplicaHon  capture  login  event   Adobe  AIR  Programming,  Pasi  Manninen.   61  
  62. 62. Understanding  view  states   •  View  states  allow  developers  to  create  different   content  layouts  in  the  same  applicaHon   •  Each  disHnct  layout  is  called  a  state   •  User  or  system  events  are  used  to  change  states   •  Components  can  be  added,  modified  or  removed  from   each  state   •  Create  a  new  state   –  switch  to  Design  mode   –  right-­‐click  in  the  States  view   and  select  New  State   –  in  the  New  State  dialog  box  either     create  a  blank  state  or  duplicate  another  state   Adobe  AIR  Programming,  Pasi  Manninen.   62  
  63. 63. Defining  states   •  The  states  block  wraps  all  of  the  states  in  single  block   of  code   •  Each  State  tag  defines  the  name  of  one  state   –  one  or  more  State  tags  are  placed  within  the  states  block   to  define  each  individual  state   –  the  name  property  of  the  State  tag  declares  the  name  of   the  state   –  state  names  are  required  and  each  must  be  unique  for  a   given  component   –  the  first  state  defined  is  the  default  state  for  the   applicaHon   <s:states>      <s:State  name="loginState"/>      <s:State  name="JAMKPortalState"/>   </s:states>   Adobe  AIR  Programming,  Pasi  Manninen.   63  
  64. 64. Defining  components  in  each  states   •  Define  the  states  in  which  the  component  exists  with   the  includeIn  property  for  that  component   •  If  the  component  exists  in  more  than  one  state,  add   mulHple  state  names  to  the  includeIn  property   <s:Panel  id="login"  Htle="Login"    includeIn="loginState,  contactState">   •  AlternaHvely  define  which  state  a  component  does  not   exist  in  by  using  the  excludeFrom  property     <s:BuTon  label="Logout"  excludeFrom="loginState,  validaHonState"/>   •  If  you  do  not  define  either  of  these  properHes,  the   component  will  exist  in  all  states     Adobe  AIR  Programming,  Pasi  Manninen.   64  
  65. 65. Defining  component  properHes  and   events  in  different  states   •  Change  a  property  of  a  component  for  each  state  by   declaring  the  state  name  aMer  the  property   <s:Label  text="Logged  in!"  text.loginState="Please  log  in!"  x="50"  y="100"                                    x.loginState="100"  y.loginState="20"  />   •  Use  the  same  syntax  to  set  events  for  each  state   <s:BuTon  label="Logout"  excludeFrom="loginState"  click.JAMKPortalState="logout()"/>   Adobe  AIR  Programming,  Pasi  Manninen.   65  
  66. 66. Controlling  view  states   •  Control  the  acHve  view  state  with  the  currentState   property   •  Each  component  has  a  currentState  property  that   defines  the  state  of  the  component   –  by  default  the  state  is  the  first  state  defined  in  the  states   block   –  assign  the  name  of  the  state  to  the  currentState  property   –  custom  components  also  have  the  currentState  property   <s:WindowedApplicaHon  currentState="loginState"   ...   >   Adobe  AIR  Programming,  Pasi  Manninen.   66  
  67. 67. Switching  between  states   •  To  switch  states,  set  the  currentState  property   in  an  event  handler   •  In  Flash  Builder,  select  the  component  that   will  trigger  the  event  and  set  its  click  event  in   the  Flex  ProperHes  view   <s:BuTon  label="Logout"                                        x="700"  y="400"                                          excludeFrom="loginState"                                        click="currentState='loginState'"/>   Adobe  AIR  Programming,  Pasi  Manninen.   67  
  68. 68. Example:  CreaHng  mulHple  states   •  States:   –  LoginState   –  StaffState   –  ContactState   –  AboutState   •  Use  LinkBar  to  change   states   <s:states>          <s:State  name="LoginState"/>          <s:State  name="StaffState"/>          <s:State  name="ContactState"/>          <s:State  name="AboutState"/>   </s:states>   Adobe  AIR  Programming,  Pasi  Manninen.   68  
  69. 69. Component  effects   •  Effects  add  animaHon  and  moHon  in  response  to  some   user  or  programmaHc  acHon   •  For  example   –  an  image  grows  as  a  user  mouses  over  it   –  all  elements  in  an  applicaHon  fade  in  as  the  applicaHon   starts   •  Can  be  applied  to  components   –  individually  or  together   –  as  their  properHes  change  between  states   •  Remember  content  is  most  important  in  your   applicaHon   –  animaHon  is  oMen  considered  to  be  unnecessary   –  however,  someHmes  animaHons  help  the  user  experience   Adobe  AIR  Programming,  Pasi  Manninen.   69  
  70. 70. Animate  super  class   Define  effects  in  the  DeclaraHons  tag  block   Define  an  id  property   Targets  an  object  in  a  binding  statement   Define  a  Hme  period  with  the  duraHon  property,  default  is   1000  milliseconds   •  Define  a  SimpleMoHonPath  instance  for  each  property  of   the  target  to  animate   •  Define  details  for  how  the  property  values  should  change   over  the  duraHon  of  the  animaHon   •  •  •  •  <s:Animate  id="shake"  target="{buTon}"  duraHon="1000">          <s:SimpleMoHonPath  property="x"  valueFrom="0"  valueTo="100"/>          <s:SimpleMoHonPath  property="y"  valueTo="100"/>          <s:SimpleMoHonPath  property="width"  valueBy="20"/>   </s:Animate>   Adobe  AIR  Programming,  Pasi  Manninen.   70  
  71. 71. Spark  effects  classes   •  Spark  effects  are  divided  into  5  categories   Category Property effects Description Animates the change of one or more properties of the target Transform effects Animates the change of one or more transformrelated properties of the target, such as the scale, rotation, and position Pixel-shader effects Animates the change from one bitmap image to another, where the bitmap image represents the before and aer states of the target. Filter effects Applies a filter to the target where the effect modifies the properties of the filter, not properties of the target 3D effects A subset of the transform effects that modify the 3D transform properties of the target Adobe  AIR  Programming,  Pasi  Manninen.   71  
  72. 72. Reviewing  available  effects   •  Look  in  the  Flex  Language  Reference  for  a  lisHng   of  effects   Adobe  AIR  Programming,  Pasi  Manninen.   72  
  73. 73. Playing  an  effect   •  Use  the  play()  method  of  the  effect  instance  in  a   system  or  user  event  handler   •  Use  inline  or  funcHon  coding  to  start  effect   <s:BuTon  click=""/>     <fx:Script>          <![CDATA[                private  funcHon  checkLogin():void  {              ;                }          ]]>   </fx:Script>   <s:BuTon  click="checkLogin()"/>     Adobe  AIR  Programming,  Pasi  Manninen.   73  
  74. 74. Example:  header  image  fading   •  Fade  header  image  from  alpha  0  to  100  when   applicaHon  starts   <?xml  version="1.0"  encoding="uX-­‐8"?>   <s:WindowedApplicaHon  xmlns:fx="hTp://"            …                creaHonComplete="">          <fx:DeclaraHons>                  <s:Fade  id="headerFade"  targets="{headerImage}"                                                  alphaFrom="0"  alphaTo="1"/>          </fx:DeclaraHons>          <s:layout>                  <s:VerHcalLayout  horizontalAlign="center"  paddingTop="20"  gap="20"/>          </s:layout>            <s:Image  id="headerImage"  source="images/header.jpg"/>   </s:WindowedApplicaHon>   Adobe  AIR  Programming,  Pasi  Manninen.   74  
  75. 75. Composite  effects   •  Apply  mulHple  effects  at  once  using  composite   effects   •  Parallel  effect  causes  all  effects  to  run   simultaneously  on  the  target(s)   •  Sequence  effect  causes  effects  on  the   target(s)  to  run  sequenHally,  one  aMer  the   other   •  Nest  Parallel  and  Sequence  components  to   generate  more  complex  animaHons   Adobe  AIR  Programming,  Pasi  Manninen.   75  
  76. 76. Example:  header  image  fading  and   resizing   •  Fade  header  image  from  alpha  0  to  100  and   resize  from  0  to  original  size  when  applicaHon   starts   <s:WindowedApplicaHon  xmlns:fx="hTp://"            …                  creaHonComplete="">   <fx:DeclaraHons>          <s:Parallel  id="headerAnimaHon"  target="{headerImage}">                  <s:Fade  id="headerFade"  alphaFrom="0"  alphaTo="1"/>                  <s:Resize  heightFrom="0"  heightTo="780"/>                  <s:Resize  widthFrom="0"  widthTo="200"/>                  </s:Parallel>   </fx:DeclaraHons>   Adobe  AIR  Programming,  Pasi  Manninen.   76  
  77. 77. TransiHon  between  component  states   •  TransiHons  are  animaHons  that  play  while  the  component  switches   between  two  states  (automaHcally  run)   •  The  transi3ons  tag  set  wraps  all  of  the  transiHon  definiHons  in  a  single   block  of  code   •  Each  TransiHon  tag  block  defines  states  to  transiHon  between   –  fromState  property:  the  name  property  value  of  the  state  the  component  is  in   when  the  transiHon  should  start   –  toState  property:  the  name  property  value  of  the  state  the  component  is  in   when  the  transiHon  should  end   –  effects  and  components  to  animate   <s:transiHons>          <s:TransiHon  fromState="loginState"  toState="JAMKPortalState">                  ...  define  effects    and  components  here  ...        </s:TransiHon>        <s:TransiHon  fromState="JAMKPortalState"  toState="loginState">                ...  define  effects  and  components  here  ...        </s:TransiHon>   </s:transiHons>   Adobe  AIR  Programming,  Pasi  Manninen.   77  
  78. 78. Flash  Builder  and  CSS   •  Changing  any  styles  under  the  Appearance   view,  create  and  apply  changes  to  CSS  file   •  The  Style  tag  is  also  added  to  the  main   applicaHon  which  points  to  the  CSS  file   •  CSS  file  has  namespaces:   /*  CSS  file  */   s  "library://";   @namespace   –  s  refers  to  Spark  and   mx  to  MX  components     <fx:Style  source="css/Styles.css"/>   @namespace  mx  "library://";     s|Label   {    color:  #C34B4B;    fontSize:  20;   }   Adobe  AIR  Programming,  Pasi  Manninen.   78  
  79. 79. Defining  styles  for  components   •  Apply  styles  to  components  using  a   component  via  CSS   •  CSS  supports  the  use  of  the  built-­‐in  selectors     –  matches  instances  of  a  component  by  local  name   –  for  example,  the  simple  type  selector  BuTon   matches  the  component  with  local  name  BuTon     s|BuTon   {    color:  #CC0000;   }   Adobe  AIR  Programming,  Pasi  Manninen.   79  
  80. 80. CreaHng  Flex  component  selector   •  CSS  supports  mulHple  class  selectors  in  the   styleName  property   s|BuTon.redText  {          color:#FF0000;   }   s|BuTon.fontType  {            font-­‐family:"Courier";   }   <s:BuTon  label="Send  Email"  styleName="redText  fontType"/ >   •  CSS  supports  mulHple  selectors  with  the  same   name  and  different  properHes   s|BuTon  {  color:#FF0000;  }   s|BuTon  {  font-­‐family:"Courier";  }   Adobe  AIR  Programming,  Pasi  Manninen.   80  
  81. 81. Create  custom  component  selector   •  CSS  supports  a  custom  namespace   •  Allows  definiHon  of  a  custom  component   selectors  for  the  namespace   @namespace  s  "library://";   @namespace  mx  "library://";   @namespace  comp  "components.*";     s|BuTon  {            color:  #990000;   }   comp|JAMKEmployee  {          color:  #000099;   }   Adobe  AIR  Programming,  Pasi  Manninen.   81  
  82. 82. Advanced  CSS  selectors   •  Flash  Player  provides  advanced  selectors  like   descendant  and  id  selectors   •  Descendent  selector   –  specify  styles  for  children  of  a  container   –  allows  mulHple  level  of  descendants   s|Panel  s|BuTon   {          color:  #CCCCCC;   }   s|Panel  mx|ViewStack  s|Label   {          fontSize:  12;   }   Adobe  AIR  Programming,  Pasi  Manninen.   82  
  83. 83. Advanced  CSS  selectors:  id   •  id  selector   –  selector  matches  components  that  meet  an  id   condiHon     –  is  Hed  to  one  specific  instance  of  a  component   –  CSS  syntax  to  declare  an  id  condiHon  is  to  prefix   the  id  with  a  hash  sign   #submitBuTon   {          color:  #CCCCCC;   }   <s:BuTon  id="submitBuTon"  />   •  You  can  combine  an  id  selector  with  other  selectors   Adobe  AIR  Programming,  Pasi  Manninen.   83  
  84. 84. Advanced  CSS  selectors:  class   •  Class  selectors  define  a  set  of  styles  (or  a  class)   that  you  can  apply  to  any  component   •  First  create  a  class  selector  and  define  its  styles   .header  {          color:  #CCCCCC;   }   •  Then  apply  the  style  without  the  leading  period   to  an  MXML  component  using  the  styleName   property   <s:Panel  styleName="header">          <s:Label  text="JAMK  Employee  InformaHon"  />       </s:Panel>   Adobe  AIR  Programming,  Pasi  Manninen.   84  
  85. 85. Advanced  CSS  selectors:  pseudo   •  Pseudo  selector  matches  components  based   on  an  addiHonal  condiHon   •  You  can  use  pseudo  selectors  to  apply  styles   to  components  only  when  they  are  in  a   specified  state   s|BuTon:up  {          color:  #00FF00;   }   s|BuTon:down  {          color:  #CCCCCC;   }   /*  universal  pseudo  selectors  */   :up  {    color:#FF9933;   }     Adobe  AIR  Programming,  Pasi  Manninen.   85  
  86. 86. Exercise:  CSS   •  Create  a  new  Project,  Create  for  example     Panel  and  a  few  Controls,     s|Panel  {      backgroundColor:  #B12700;   Test  different  CSS  selectors      chromeColor:#B12700;   }   s|Panel  s|Label  {      color:  #FFFFFF;      fontWeight:  bold;   }       s|Panel  s|BuTon  {      color:  #FFFFFF;      chromeColor:  #B72700;   }   s|Panel  s|TextArea  {      contentBackgroundColor:#B00000;      borderColor:#000000;      color:  #FFFFFF;   }   Adobe  AIR  Programming,  Pasi  Manninen.   86  
  87. 87. Skinning   •  Skins  control  all  visual  elements  of  a  component,   including  layout   •  Spark  skins  can  contain   –  graphic  elements,  text,  images,  transiHons   •  Skins  support  states,  so  that  when  the  state  of  a   component  changes,  the  skin  changes  as  well   •  Skins  specify  minimum  sizing  requirements  for  the   component   •  You  can  apply  skins  to  components  using   –  CSS   –  MXML   –  AcHonScript   Adobe  AIR  Programming,  Pasi  Manninen.   87  
  88. 88. CreaHng  a  skin  for  Spark  components   •  Visual  design  of  a  component  can  be  defined   in  a  separate  class  called  a  skin   •  Associate  the  skin  class  with  a  component  to   apply  the  skin  using  the  skinClass  property   <s:BuTon  label="Send"  textAlign="center"    skinClass="skins.BuTonWithStatesSkin"/>   Adobe  AIR  Programming,  Pasi  Manninen.   88  
  89. 89. CreaHng  skin  MXML  class  file   •  Create  a  new  skin  class  for  a  component   –  create  a  new  MXML  component  file  in  Flash  Builder   by  selecHng  File  >  New  >  MXML  Component   –  extend  the  SparkSkin  class  (root  element  is  SparkSkin)   •  Define  the  following  elements  in  the  skin  class   –  the  HostComponent  within  the  Metadata  direcHve   –  skin  states   –  skin  parts   –  visual  graphical  elements   Adobe  AIR  Programming,  Pasi  Manninen.   89  
  90. 90. HostComponent  direcHve   •  The  HostComponent  metadata  direcHve  is   central  to  the  component  and  skin  contract   •  Define  the  HostComponent  direcHve  in  the  skin   class  file   •  Define  the  host  component  by  using  a  Metadata   tag  with  the  following  syntax   •  Define  the  component  class  on  which  the  skin   will  be  applied  (below  example  from  BuTon)   <fx:Metadata>            [HostComponent("spark.components.BuTon")]     </fx:Metadata>   Adobe  AIR  Programming,  Pasi  Manninen.   90  
  91. 91. Defining  component  states   •  Skins  must  define  at  least  the  default  normal  and   disabled  states  of  a  component   <s:states>          <s:State  name="normal"/>          <s:State  name="disabled"  />   </s:states>   •  Skin  parts  are  elements  that  make  up  the   component’s  skin   •  There  are  both  required  and  opHonal  skin  parts   Adobe  AIR  Programming,  Pasi  Manninen.   91  
  92. 92. Understanding  a  BuTon  skin  part   •  The  Spark  buTon  control  has  one  required  skin   part:  the  text  label  (icon  is  opHonal)   •  Use  this  skin  part  to  modify  the  way  the  label   looks   •  Requires  an  id  property  of  labelDisplay   <s:Label  id="labelDisplay"          textAlign="center"            verHcalAlign="middle"            color="0x000000"          fontWeight="bold"          horizontalCenter="0"            verHcalCenter="1"            leM="10"  right="10"  top="2"  boTom="2">     </s:Label>   Adobe  AIR  Programming,  Pasi  Manninen.   92  
  93. 93. Understanding  a  Panel  container     skin  part   •  Panel  container  has  three  skin  parts   –  3tleDisplay:  Represents  the  text  in  the  Panel   container’s  header  area   –  contentGroup:  Represents  the  content  area  of  the   container   –  controlBarGroup:  Represents  the  content  area  of  the   containers  control  bar,  if  it  is  implemented   <s:Label  id="HtleDisplay"            lineBreak="explicit"            leM="10"  right="4"              top="2"  height="30"            verHcalAlign="middle"              fontWeight="bold"/>   <s:Group  id="contentGroup"  top="23"/>   Adobe  AIR  Programming,  Pasi  Manninen.   93  
  94. 94. Finding  skin  parts  of  any  component   •  Search  the  Adobe  Flex  4  Language  Reference  for   any  Spark  component  to  find  informaHon  about   its  skin  parts   Adobe  AIR  Programming,  Pasi  Manninen.   94  
  95. 95. Drawing  graphical  elements   •  Use  the  Spark  primiHves  to  draw  graphical   elements  for  your  skins   •  The  Spark  primiHves  are     classes  in  the     spark.primi3ves     package   Adobe  AIR  Programming,  Pasi  Manninen.   95  
  96. 96. Example:  CreaHng  and  applying  a  skin   to  WindowedApplicaHon   •  Create  a  skin  class  file   •  Define  the  component  that  will  use  this  skin   •  Define  the  ApplicaHon  container  default   states   •  Create  a  1-­‐pixel  black  border     around  the  applicaHon   •  Apply  the  skin   •  Display  content  within  a  skin   Adobe  AIR  Programming,  Pasi  Manninen.   96  
  97. 97. Example:  CreaHng  and  applying  a  skin   to  Panel   •  Create  a  skin  class  file   •  Apply  a  Panel  skin  with  a     drawn  background   •  Define  the  look-­‐and-­‐feel     of  the  Panel  skin’s  header     text   •  Fix  the  content  area  display   Adobe  AIR  Programming,  Pasi  Manninen.   97  
  98. 98. IntroducHon  to  Data  Binding   •  One  of  the  most  used  processes  when  building   Flex  applicaHons   •  Allows  you  to  pass  data  between  different   applicaHon  components   •  Process  enables  the  tying  of  one  object’s  data   with  another  object   –  connecHng  a  source  object  with  a  desHnaHon  object   –  once  the  source  object  changes,  the  desHnaHon   object  also  changes  automaHcally   •  Flash  Builder  4  offers  two-­‐way  data  binding  (bi-­‐ direcHonal  data  binding)   Adobe  AIR  Programming,  Pasi  Manninen.   98  
  99. 99. One  and  two-­‐way  Data  Binding  in   MXML   •  Braces  {}  are  the  most  commonly  used  technique   to  use  data  binding   •  Bind  properHes  without  wriHng  any  actual  code   <?xml  version="1.0"  encoding="uX-­‐8"?>   <s:ApplicaHon  xmlns:fx="hTp://"  …>          <s:layout>                    <s:VerHcalLayout  />          </s:layout>                <fx:Script>   //  two-­‐way  data  binding                  <![CDATA[   <s:TextInput  id="textInput1"  text="@{textInput2.text}"  />                          [Bindable]   <s:TextInput  id="textInput2"  />                          public  var  value:String  =  "Hello  Flex!";                  ]]>          </fx:Script>          <s:Label  text="{value}"  />          <s:TextInput  id="textInput"  change="{value=textInput.text}"  />   </s:ApplicaHon>   Adobe  AIR  Programming,  Pasi  Manninen.   99  
  100. 100. Binding  XML  Object   •  Bind  the  XML  object,  all  of  the  properHes  of  the   XML  bind  as  well   …   <fx:Script>          <![CDATA[                  [Bindable]                  private  var  xml:XML  =                            <employees>                                  <employee  id="1">                                            <firstname>John</firstname>                                            <lastname>MaTerson</lastname>                                            <room>101</room>                                  </employee>                          </employees>;          ]]>   </fx:Script>   <s:Label  text="Employee  name:  {xml.employee.(@id==1).firstname}  {xml.employee.(@id==1).lastname}"  />   …   Adobe  AIR  Programming,  Pasi  Manninen.   100  
  101. 101. Binding  with  fx:Binding   •  Generates  the  same  code  as  using  curly  braces   •  No  differences  in  performance  (compared  to   MXML  braces)   <s:TextInput  id="textInput1"  />   <s:TextInput  id="textInput2"  />     <fx:Binding  source="textInput1.text”                                            desHnaHon="textInput2.text"                                            twoWay="false"  />   Adobe  AIR  Programming,  Pasi  Manninen.   101  
  102. 102. Binding  with  BindingUHls  class   •  You  can  "unbind"  properHes   •  BeTer  performance   •  Methods:  bindProperty,  bindSeTer   <s:TextInput  id="textInput"                                                    preiniHalize="preiniHalizeHandler(event)"  />   <s:Label  id="labelText"  />   <s:BuTon  label="Stop  Binding"  click="clickHandler(event)"  />   import  mx.binding.uHls.BindingUHls;   import  mx.binding.uHls.ChangeWatcher;   import;     private  var  changeWatcher:ChangeWatcher;     private  funcHon  preiniHalizeHandler(event:FlexEvent):void  {            changeWatcher  =  BindingUHls.bindProperty(labelText,  "text",  textInput,  "text");   }     private  funcHon  clickHandler(event:MouseEvent):void  {            changeWatcher.unwatch();   }   Adobe  AIR  Programming,  Pasi  Manninen.   102  
  103. 103. Using  data  in  applicaHon   •  There  are  a  number  of  ways  to  make  data  available  to  an   applicaHon   •  Use  Flex  objects  and  collecHons:     –  –  –  –  –  –  –  Object  (bindable)     Array     ArrayList  (bindable)   ArrayCollecHon  (bindable)   XML  (bindable,  only  when  defined  in  MXML)   XMLList  (bindable,  only  when  defined  in  MXML)   XMLListCollecHon  (bindable)   •  Use  data  binding  to  assosiate  data  to  component   <s:DropDownList  id="JAMKEmployees"  dataprovider="{employees}"   private  var  JAMKEmployees:DropDownList  =  new  DropDownList();   JAMKEmployees.dataProvider  =  employees;   Adobe  AIR  Programming,  Pasi  Manninen.   103  
  104. 104. Examples:  UI  Controls  and  data   •  A  few  test  with  DropDownList,  ArrayList,  List,   Tree,  DataGrid,  fx:String,  fx:Object,  fx:XML,   dataProvider   •  Show  data  with  labelField,  labelFuncHon     Adobe  AIR  Programming,  Pasi  Manninen.   104  
  105. 105. Item  Renderers   •  Many  of  the  data-­‐driven  components  can  use  item   renderers  to  control  how  data  is  displayed   •  labelFuncHon  can  customize  the  displayed  informaHon,   an  item  renderer  acts  more  like  a  template,  and  allows   you  to  display  more  than  just  a  string   •  Item  renderers  can  be  wriTen  in  AcHonScript  or  MXML   •  Define  item  renderer:   –  in  an  external  file   –  in  the  declaraHon  block   –  or  inline   Adobe  AIR  Programming,  Pasi  Manninen.   105  
  106. 106. Example:  Item  Renderer   •  Use  Item  Renderer  with  ArrayList  and  List   component   •  Display  image  and  two  labels   Adobe  AIR  Programming,  Pasi  Manninen.   106  
  107. 107. Using  remote  data   •  Best  to  load  data  dynamically  at  runHme,   instead  of  hardcoded  in  SWF   •  One  such  source  of  data  is  XML  data   •  Some  benefits  of  dynamically  loading  XML   data  at  runHme  are   –  if  the  data  set  is  large,  segments  can  be  loaded  at   different  Hmes   –  data  might  be  dynamically  generated  and  current   data  is  required   Adobe  AIR  Programming,  Pasi  Manninen.   107  
  108. 108. Using  HTTPService  class   •  •  •  •  Retrieve  via  HTTP  request   Can  make  get/post  requests  to  specified  URL   Can  use  HTTP  or  HTTPS   Within  DeclaraHons  tag  set,  create   HTTPService  object   –  no  request  is  made  at  this  Hme   •  Make  the  HTTP  request   –  use  the  HTTPService  object’s  send()  method   –  remote  file  retrieved   Adobe  AIR  Programming,  Pasi  Manninen.   108  
  109. 109. CreaHng  HTTPService  object   •  Create  a  Spark  HTTPService  object  in  a   Declara3ons  block   •  Assign  an  instance  name  (id  property)   •  Set  url  property  to  relaHve  or  absolute  address  of   remote  data  file   <fx:DeclaraHons>          <s:HTTPService  id=  "EmployeeService"  url=  "Employees.xml"/>   </fx:DeclaraHons>   •  The  showBusyCursor  property  can  be  used  to   display  a  ”running  clock”  when  data  is  being   retrieved   Adobe  AIR  Programming,  Pasi  Manninen.   109  
  110. 110. Making  HTTPService  request   •  Use  the  HTTPService  object’s  send()  method   to  make  the  request   •  Invoke  method  either  by  user  or  system  event   •  Data  retrieved  on  user  click  event   <s:BuTon  label="Retrieve  Data"  click="EmployeeService.send()"/>   •  Data  retrieved  by  system  creaHonComplete   event   <s:ApplicaHon  ...        creaHonComplete="JAMKEmployeeService.send()"/>   Adobe  AIR  Programming,  Pasi  Manninen.   110  
  111. 111. Retrieving  data  with  lastResult   •  AMer  the  request  executes,  returned  data  is   placed  in  the  object’s  lastResult  property     •  Access  the  data  as  [instance  id].lastResult   •  Returned  data  format  is  configurable  using  the   resultFormat  property   <mx:HTTPService  id="EmployeeService"  url=  "Employees.xml"          showBusyCursor="true"          resultFormat="e4x"  />   Adobe  AIR  Programming,  Pasi  Manninen.   111  
  112. 112. Possible  return  formats  from   HTTPService   Format object Description e value returned is XML and is parsed as a tree of ActionScript objects (this is the default) xml e value returned is XML and is returned as literal XML in an ActionScript XMLnode object flashvars e value returned is text containing name=value pairs separated by ampersands, which is parsed into an ActionScript object text e4x e value returned is text, and is le raw e value returned is XML and is returned as literal XML in an ActionScript XML object, which can be accessed using ECMAScript for XML (E4X) expressions array e value returned is XML and is parsed as a tree of ActionScript objects. By  default,  XML  data  is  converted  into  an  ArrayCollecHon   Adobe  AIR  Programming,  Pasi  Manninen.   112  
  113. 113. Understanding  ArrayCollecHon  result   •  An  ArrayCollec3on  is  a  complex  data  structure     •  ArrayCollec3on  is  the  recommended  class  to  use   as  a  data  provider   •  Must  import  the  class  to  use  ArrayCollec3on   import  mx.collecHons.ArrayCollecHon;   •  Using  an  ArrayCollecHon  class  has  the  following   advantages   –  the  elements  of  the  ArrayCollec3on  can  be  used  in   bindings  that  will  conHnue  to  be  monitored   –  implements  both  the  ICollec3onView  and  IList  interfaces   Adobe  AIR  Programming,  Pasi  Manninen.   113  
  114. 114. Using  result  in  data  bindings   •  The  returned  ArrayCollec3on  can  be  used  in   data  bindings   •  Point  at  the  repeaHng  node  to  use  it  as  a  data   provider   <mx:DataGrid  id="employeeList"              dataProvider="EmployeeService.lastResult.employees.employee}"/>   •  Use  methods  of  the  ArrayCollecHon  instance   to  reference  a  value  in  a  node   String  firstName  =  EmployeeService.lastResult.employees.employee.getItemAt(0).firstname;   Adobe  AIR  Programming,  Pasi  Manninen.   114  
  115. 115. Handling  results   •  Use  HTTPService  result  event  to  specify  the  funcHon  to  be   called  when  data  is  returned  successfully   •  The  class  of  the  ResultEvent  object  is  and  must  be  imported  for  use   •  Manipulate  the  returned  data  before  using  it   –  assign  it  to  a  variable  whose  scope  is  the  class  rather  than  the   funcHon   –  pass  the  event  object  as  the  parameter   •  The  event  object  has  a  result  property  with  the  returned   data   <s:HTTPService  id="Employees"      url="hTp://"      result="resultHandler(event)"  />   Adobe  AIR  Programming,  Pasi  Manninen.   115  
  116. 116. Handling  faults   •  A  FaultEvent  is  dispatched  when  there  is  problem   returning  a  result   –  due  to  a  connecHon,  server,  or  applicaHon-­‐level  failure   –  also  dispatched  when  the  property  requestTimeout  value   is  exceeded   –  has  properHes  target,  type  and  fault,  among  others   •  Specify  a  handler  funcHon  for  the  fault  event  to   execute  if  FaultEvent  is  dispatched   <s:HTTPService  id="Employees"          url="hTp://"          result="resultHandler(event)"          fault="faultHandler(event)"          requestTimeout="60"/>   Adobe  AIR  Programming,  Pasi  Manninen.   116  
  117. 117. Handling  faults   •  The  fault  property,  of  the  FaultEvent  class,  is  a   Fault  object  that  has  useful  properHes  for   displaying  error  messages   •  Fault  class  has  the  following  properHes  (all  of   datatype  String)   –  faultDetail:  any  extra  details  about  the  fault   –  faultCode:  a  simple  code  describing  the  fault   –  faultString:  text  descripHon  of  the  fault   –  message:  the  three  properHes  above  concatenated   Adobe  AIR  Programming,  Pasi  Manninen.   117  
  118. 118. Displaying  message  with  Alert  pop-­‐up   •  Fault  messages  can  be  displayed  in  a  pop-­‐up  using  the  Alert   class   •  Import  from  mx.controls.Alert   •  Use  show()  method  with  the  most  used  parameters  (in   order)   •  text:  shown  in  the  body  of  the  pop-­‐up   •  3tle:  shown  in  the  header  of  the  pop-­‐up   •  An  OK  buTon  appears  by  default  to  close  the  Alert  pop-­‐up   <fx:Script>      <![CDATA[        import  mx.controls.Alert;"Text  of  the  alert  box","Alert  Box  Title");      ]]>   </fx:Script>   Adobe  AIR  Programming,  Pasi  Manninen.   118  
  119. 119. Example:  CreaHng  a  HTTPService   request  and  using  lastResult  property   •  Create  an  HTTPService  object   •  Make  the  HTTP  request   •  Use  the  results  in  bindings   Adobe  AIR  Programming,  Pasi  Manninen.   119  
  120. 120. Example:  Using  result  and  fault   handlers   •  •  •  •  •  •  Use  a  result  event  and  create  an  event  handler   Use  the  debugger  to  examine  the  returned  data   Display  data  in  UI  controls   Specify  a  HTTPService  fault  handler   Using  the  debugger  to  examine  the  fault  event  object   Display  the  fault  data  in  an  Alert  pop-­‐up   Adobe  AIR  Programming,  Pasi  Manninen.   120  
  121. 121. Exercise:  Weather  Forecast   •  Register  to  World  Weather  Online  Service   –  hTp://­‐api.aspx     –  get  the  API  key  for  request  weather  data   –  examine  API  and  XML  data  tutorials  (to  know  XML  schema)   •  Follow  exercise  document  to  create  your  own   Weather  Forecast  AIR  ApplicaHon     Adobe  AIR  Programming,  Pasi  Manninen.   121  
  122. 122. Create  a  Flex  Mobile  Project   •  Flex  Mobile  Project  Wizard  available   •  Walk  through  the  rest  of  the  project  creaHon   process  like  in  Desktop  AIR  project   Adobe  AIR  Programming,  Pasi  Manninen.   122  
  123. 123. Project  Mobile  Setngs   •  Select  specific  target  plaXorms   •  ApplicaHon  Templates   –  Blank,  View-­‐Based  or  Tabbed   •  Permissions  and  PlaXorm  Setngs   •  ApplicaHon  Screen  Setngs   –  AutomaHcally  reorient   –  Fullscreen   –  AutomaHcally  scale  different  screen  densiHes   hTp://­‐8000.html     Adobe  AIR  Programming,  Pasi  Manninen.   123  
  124. 124. Permissions   •  Select  permissions  that  you  applicaHon  needs   to  interact  with  the  Device   •  Remember  to  select     only  needed  permissions   •  Setngs  can  be  changed   later  (-­‐app  xml  file)   •  Server  Setngs  and  Build   Paths  same  as  in  AIR  app   Adobe  AIR  Programming,  Pasi  Manninen.   124  
  125. 125. ApplicaHon  Layouts:  Blank   •  Select  to  create  your  own  custom  navigaHon   •  Only  main  applicaHon  file  is  created   <?xml  version="1.0"  encoding="uX-­‐8"?>   <s:ApplicaHon  xmlns:fx="hTp://"              xmlns:s="library://"                                                          applicaHonDPI="160">                <s:Label  text="Blank  ApplicaHon"  fontSize="30"                                                horizontalCenter="0"  verHcalCenter="0"/>   </s:ApplicaHon>   Adobe  AIR  Programming,  Pasi  Manninen.   125  
  126. 126. ApplicaHon  Layouts:  View-­‐Based   •  Build-­‐in  navigator  framework   •  Navigator  will  manage  your  app     screens   •  Template  generates  two  files   –  Main  applicaHon   –  Default  view  of  your  app   <?xml  version="1.0"  encoding="uX-­‐8"?>   <s:ViewNavigatorApplicaHon          xmlns:fx="hTp://"          xmlns:s="library://"                    firstView="views.MobileViewBasedApplicaHonHomeView"          applicaHonDPI="160">   </s:ViewNavigatorApplicaHon>   <?xml  version="1.0"  encoding="uX-­‐8"?>   <s:View            xmlns:fx="hTp://"            xmlns:s="library://"            Htle="HomeView">        <s:Label  text="View  Based  ApplicaHon"                                        fontSize="30"  horizontalCenter="0"                                        verHcalCenter="0"/>   </s:View>   Adobe  AIR  Programming,  Pasi  Manninen.   126  
  127. 127. Navigator  methods   •  Use  following  methods  to  moving  between   views  of  your  applicaHon   –  navigator.popAll()  //  remove  all  views  -­‐>  blank   –  navigator.popToFirstView()  //  remove  all,  not  first   –  navigator.popView()  //  remove  current  view   –  navigator.pushView()  //  add  a  new  view   •  TransiHon  can  be  used,  wipe  is  default   Adobe  AIR  Programming,  Pasi  Manninen.   127