You are on page 1of 37

     

 

      Build  Your  First  Mobile  Flex  Application  
Lab  Exercises  
Narciso  Jaramillo  
 

2  |  Build  Your  First  Mobile  Flex  Application    

Table  of  Contents  
General  tips .................................................................................................................3   Overview  of  the  application .........................................................................................4   Exercise  1:  Creating  the  project  and  setting  up  the  Action  Bar......................................5   Exercise  2.  Lay  out  the  Trends  view..............................................................................8   Exercise  3.  Connect  the  trends  view  to  data ...............................................................10   Exercise  4.  Debug  the  application  on  the  desktop ......................................................12   Exercise  5.  Add  a  view  to  display  tweets  for  a  trend...................................................14   Exercise  6.  Set  up  view  navigation..............................................................................17   Exercise  7.  Configure  the  list  item  renderer................................................................19   Exercise  8.  Debug  the  application  on  a  device ............................................................22   Exercise  9.  Add  a  view  to  show  information  for  a  selected  user .................................26   Exercise  10.  Set  up  data  persistence  between  sessions ..............................................32   Exercise  11.  Export  an  application  package  for  release...............................................34   Appendix  1.  Installing  the  USB  driver  on  Windows.....................................................36    

Build  Your  First  Mobile  Flex  Application  |  3    

General  tips  
Welcome  to  the  preview  release  of  the  new  mobile  development  features  in  Flash   Builder  "Burrito"  and  Flex  SDK  "Hero"!  Because  this  is  a  preview  release,  there  are   known  bugs,  performance  problems,  usability  issues,  and  missing  features.     Items  in  boxes  are  optional  information  that  you  can  read  if  you  want  to   understand  more  of  what  you’re  doing.  It’s  not  necessary  to  read  this  text  to   follow  the  steps.   This  tutorial  relies  on  a  set  of  assets  provided  as  TwitterTrendsAssets.zip.  If  you   don't  have  these  assets,  you  can  download  them  from  the  Tutorials  and  Samples   page  on  Adobe  Labs  at  http://labs.adobe.com/technologies/flex/samples.   These  exercises  are  written  to  be  followed  in  order.  However,  we’ve  provided  FXP   project  files  in  the  TwitterTrendsAssets  zip  for  the  start  of  each  exercise,  so  if  you   get  stuck  or  lost  in  the  middle  of  one  of  the  exercises,  you  can  restart  from  the   beginning  of  the  exercise,  or  skip  ahead  to  the  beginning  of  the  next  exercise.  Use   the  FXPs  in  staticCheckpoints  if  you're  using  static  data,  or  liveCheckpoints  for   live  data.  (See  the  note  in  Exercise  3  for  information  on  static  vs.  live  data.)   To  import  an  FXP  file:   1. (Optional)  Delete  your  existing  TwitterTrends  project  by  right-­‐/control-­‐ clicking  on  the  root  of  the  project  in  the  Package  Explorer  and  choosing   Delete.  This  avoids  confusion  with  the  new  version  you're  going  to  import.   2. Choose  File  >  Import…   3. Expand  the  Flash  Builder  folder  and  select  Flash  Builder  Project.   4. Click  Next  >.   5. Click  the  Browse…  button  to  the  right  of  the  File  field,  browse  to  the  FXP,   and  click  OK.   6. Click  Finish.   If  all  else  fails,  don’t  be  afraid  to  ask  the  teachers  or  a  TA  for  help!  Or,  if  you’re  doing   these  exercises  outside  of  the  MAX  lab,  post  a  question  to  the  Flash  Builder  forum  or   the  Flex  SDK  forum.  

 allow  the  user  to  tap  on  a  topic  to  see  a   list  of  tweets  for  that  topic.  Above  the  views  sits  the  Action  Bar.  In  mobile  applications.  mobile  Flex  applications  are  structured  as  a  series  of  views—individual   screens  of  UI  the  user  navigates  between.   By  default.  the  Trends  view.  or  other  actions.  The  Action  Bar  for  this  view  shows  the  title  of  the  view.  the  User   Info  view.  and  switch  between  portrait  and   landscape  orientations.     .  consists  of  a  single  Flex  List   component.  the  List  component  scrolls  in  response  to  touch   input.  which   typically  contains  the  title  of  the  current  view  and  one  or  more  controls  for   navigation.   In  the  example  above.4  |  Build  Your  First  Mobile  Flex  Application   Overview  of  the  application   In  this  tutorial.  and  then  allow  the  user  to  tap  on  a  tweet  to  see  more   information  on  the  user  who  posted  the  tweet.  the  Action  Bar  has  been  customized  to  show  the  picture  of  the  selected   user.  The  other  views  are  structured  similarly.  the  first  view.  you'll  build  a  simple  mobile  Twitter  browser.  as  well  as  a  Refresh   button.  The  user  can  use  the  Back  button  on   the  device  to  navigate  back  to  previous  views.  The  application  will   show  the  list  of  trending  topics  on  Twitter.  though  in  the  third  view.  search.

 live  data.  you  can  just  drag  the  assets  folder  in—you  don't  need  the   photos  or  sampledata  folders.  (There's  no  harm  in  including  them—they'll   just  make  your  application  larger.  ensure  that  the  following  are  set  (as  they  are  by   default):   a.   Choose  File  >  New  >  Flex  Mobile  Project.   On  the  Mobile  Settings  page. Launch  Flash  Builder.  and  use  Design  mode   to  set  up  the  global  Action  Bar  for  the  application.)  See  the  note  in  Exercise  3  for  more   information  about  static  vs.  you'll  create  a  mobile  project  in  Flash  Builder.zip  file  provided  with  this  tutorial.  and  sampledata  folders  into  the  src  folder  in  the   Package  Explorer  on  the  left  side  of  Flash  Builder. 2. Google  Android  is  checked   b. 3.  photos. Mobile  Application  is  selected   c.     Note:  if  you  plan  to  work  with  the  live  Twitter  API.   6. Unzip  the  TwitterTrendsAssets.Build  Your  First  Mobile  Flex  Application  |  5   Exercise  1:  Creating  the  project  and  setting  up  the  Action  Bar   In  this  exercise.   7. Automatically  reorient  is  checked  and  Fullscreen  is  unchecked   5.   Enter  TwitterTrends  for  the  project  name  and  click  Next. 4.     Create  a  Flex  Mobile  project  and  set  up  project  assets   1.       . Click  Finish. Drag  the  assets.  instead  of  using  the  static   sample  data.

 which  is  the  first  view  of   your  application  and  is  based  on  View.   1.     In  this  tutorial.  not  part  of  each  individual  view.  so  you  do  not  need  to  specify  it.  It's  part  of  the   overall  application.  and  actionContent  on  the  right.  and  TwitterTrendsHome.  as  we'll  see  next.  The   one  exception  is  the  ActionBar.  In  this  application. In  the  editor.activeView).  By   default.mxml.   titleContent  in  the  middle.mxml.  we  only  set  the  Action  Bar  content  in  the  main  application.  Setting  one  of  the  content   areas  in  an  individual  view  overrides  the  content  from  the  application. Add  the  following  code  between  the  <s:MobileApplication>  and   </s:MobileApplication>  tags:   <s:actionContent> <s:Button id="refreshBtn" icon="@Embed(source='assets/refresh48x48. Delete  the  empty  <fx:Declarations> … </fx:Declarations>  tag.  TwitterTrends.  switch  to  your  main  application  file.mxml.  you'll  add  a   Refresh  button  that's  available  in  all  views.png')" click="Object(navigator.   Since  we're  adding  the  Refresh  button  into  the  global  content  for  the  Action   Bar.   Note  that  unlike  in  desktop  Flex.   2.  which  is   the  main  application  file.  In  Exercise  9.  You  can  add  items  to  it  either  in   the  main  MobileApplication  or  in  an  individual  view.  the  title  area  of  the  Action  Bar  contains  a  text  component  that  is   bound  to  the  title  of  each  view.  you  don't  typically  put  much  UI  content  in   the  main  application—most  of  your  UI  goes  into  the  individual  views.   but  you  can  set  the  content  for  any  of  the  content  areas  in  individual  views  as   well  in  order  to  show  content  specific  to  that  view.  the  action  it  needs  to  take  depends  on  whichever  view  is  currently   visible.  So  the  click  handler  gets  the  currently  active  view  and  calls  a   .   3.6  |  Build  Your  First  Mobile  Flex  Application     Flash  Builder  generates  two  MXML  components:  TwitterTrends.     Add  global  content  to  the  Action  Bar  in  the  main  application  file   The  Action  Bar  is  a  special  component  in  mobile  Flex  applications.refresh()"/> </s:actionContent> The  Action  Bar  has  three  content  areas:  navigationContent  on  the  left.  we'll  show  you  how  to   customize  the  ActionBar  in  a  specific  view.

Build  Your  First  Mobile  Flex  Application  |  7   refresh()  method  on  it.  You'll  implement  this  method  in  each  of  the  views   you'll  be  creating  in  this  tutorial.   .

8  |  Build  Your  First  Mobile  Flex  Application   Exercise  2.  TwitterTrendsHome. 8.  right.   Snap  the  list  so  it  lines  up  exactly  with  the  left  edge  of  the  View  and  its  top  is   immediately  underneath  the  Action  Bar. 5.   In  the  Properties  panel  on  the  right. Click  the  Design  button  to  switch  to  Design  mode. 4.  change  them  to  0.   TwitterTrendsHome.mxml.   2.   From  the  Components  panel  on  the  left.  You   may  need  to  scroll  the  view  to  do  this. Switch  to  the  view  file.   .  which  shows  the  list  of  trending  topics  from  Twitter.     Lay  out  the  view   1.mxml.  as  in  the  screenshot.   Resize  the  empty  List  so  it  fills  the  whole  View  to  the  right  and  bottom.   You'll  also  test  your  layout  in  different  orientations  and  screen  sizes.  you'll  use  Design  mode  to  lay  out  the  contents  of  the  initial  view.  drag  a  List  into  the  main  view  area.         If  the  refresh  button  in  your  view  appears  as  a  broken  image  icon. 7.  scroll  down  to  the  Constraints  section.  Check  the   left.   underneath  the  Action  Bar.   If  the  values  in  the  boxes  aren't  0.   In  the  Properties  panel.  Lay  out  the  Trends  view   In  this  exercise. 6.   3.  click  the   green  Refresh  icon  to  the  right  of  the  Design  button.  top  and  bottom  checkboxes  to  pin  the  List  to  the  edges  of  the  View.  set  the  Title  to  Twitter  Trends.

      3. From  the  Device  dropdown.  click  on  the  Landscape  orientation  button.     .  Verify   that  the  Action  Bar  and  the  List  properly  resize  to  the  new  orientation.  the  Motorola  Droid.  choose  a  device  with  a  different  screen  size—for   example.Build  Your  First  Mobile  Flex  Application  |  9     Test  the  view's  resizability   1.mxml  to  hide  the   rest  of  the  panels  in  Flash  Builder. Click  the  Portrait  orientation  button  and  double-­‐click  on  the  editor  tab  again   to  restore  the  panels. Double-­‐click  on  the  editor  tab  for  TwitterTrendsHome. In  the  Design  view  toolbar.   4.   2.  The  view  should  get  larger  horizontally  and   everything  should  resize  properly.

  To  avoid  this.     . There  are  no  parameters  to  configure. In  the  Data/Services  panel  at  the   bottom.   3.  click  Browse…  and   browse  to  the  trends.  change  the  type  of   the  trends  property  to  Trend[]  (not   Trends[]).  This   switches  you  to  Source  view  and  shows   that  a  new  getTrends()  function  was     generated.   Leave  all  other  fields  as  the  default  and   click  Finish.  (The  function   will  still  call  getData()  on  the  service.  bring  up  the  context  menu  for   getData()  and  choose  Generate  Service   Call.   Static  data   1.   7.  You  can  either   work  with  real  live  data  from  the  Twitter  API. Rename  the  new  getData()  function  in   the  code  to  getTrends(). For  the  Path  field. In  the  Data/Services  panel  at  the   bottom.   11.10  |  Build  Your  First  Mobile  Flex  Application   Exercise  3.   choose  Generate  Service  Call.     5.xml  file  in  the   src/sampledata  folder.  Twitter  may   choose  to  restrict  the  number  of  times  you  access  the  service  in  a  given  time  period.  or  you  can  use  the  static  data   provided  with  this  tutorial. Change  the  URL  of  the  operation  to   http://search.twitter. Choose  Data  >  Connect  to  XML…   2. To  avoid  confusion.  This  makes  it  so  each  trend   object  is  called  "Trend"  rather  than   "Trends".   5.)     Live  data   1.   9. From  the  context  menu  for  getTrends().json   4.  Connect  the  trends  view  to  data   In  this  exercise.  you  have  two  choices.  This  switches  you  to  Source  view   and  shows  that  a  new  getData()   function  was  generated.   4.  feel  free  to  try  the  live  data  service.  bring  up  the  context  menu  for   getTrends()  and  choose  Configure   Return  Type…   6.com/trends. Set  the  service  name  to  TrendsService. Click  Finish.   8.  we'll  use  the  static  data  in  the  MAX  lab.   10.  However. In  the  Service  name  field. Enter  Trends  for  the  name  of  the  type.  Note  that  when  working  with  the  live  API.  enter   TwitterService  and  click  Finish.   Note:  When  working  through  this  tutorial.  you'll  fill  the  List  in  the  trends  view  with  the  list  of  trending  topics   from  Twitter. Change  the  existing  name  "Operation1"   to  getTrends   3. Make  sure  Auto-­detect  is  selected  and   click  Next. Choose  Data  >  Connect  to  HTTP…   2.   Click  Next  again.  if  you're  going   through  this  tutorial  on  your  own.

  . (Live  data  only)  For  Data  Provider. Place  your  cursor  between  the  angle  brackets  of  the  opening  <s:List>  tag. Select  Data  >  Bind  to  Data.  each  XML  file  is  accessed  by  a  separate   service  with  a  single  getData()  method  that  returns  the  data.     3.  You'll  implement   this  method  in  TwitterTrendsHome.   5.  you'll  see  that  two  items  were  added  to  the  <Declarations>  tag:  a   service  object  (either  TwitterService  or  TrendsService.  you  can  choose  to  create  multiple  methods  for   different  URLs  on  the  same  service. For  Label  field. }   2.  the  refresh  button  in   the  Action  Bar  was  set  to  call  a  refresh()  method  on  each  view.  add  the  following  method:     public function refresh(): void { getTrends().  which  is  called   whenever  the  user  navigates  forward  or  back  to  the  view.  select  the  array  of  trends  (trends[]).   1.     Call  the  service  when  the  user  navigates  to  or  refreshes  the  view   Recall  that  in  the  main  TwitterTrends. Inside  the  <fx:Script>  block.   When  working  with  static  data.  sends  out  events  to  other  components   notifying  them  of  the  data  returned  by  the  service  call. Existing  call  result  should  already  be  selected. Click  OK.mxml  to  call  the  appropriate  service  call.  and  when  they  complete.   4.  The  CallResponder  watches  the  service   calls.  depending  on  which   data  you're  using)  and  a  CallResponder.Build  Your  First  Mobile  Flex  Application  |  11   In  the  code.mxml  application  file.   2. Add  viewActivate="refresh()"  to  the  <s:View>  tag  at  the  top  of  the   file.   1.  and  the  existing  call   responder  (either  getDataResult  or  getTrendsResult)  should  be   selected  in  the  dropdown.     Bind  the  data  returned  by  the  service  into  the  list   Now  you'll  make  it  so  that  whenever  the  service  is  called.   6.  the  List  shows  the  new   data  returned  by  the  service.  When   working  with  HTTP  services.  select  name.  You'll   also  call  this  method  from  the  view's  viewActivate  event.  The  service  object  has  methods  to   initiate  network  calls  to  the  service.

  1.  change  the  Name  field  to  TwitterTrends  Desktop.  simulating  touch  scrolling.  choose  Rotate  Right. Click  Debug.     Set  a  breakpoint   1.   Your  application  runs  on  the  desktop  in  the  AIR  Debug  Launcher  (ADL). In  the  Device  menu  in  ADL.  Debug  the  application  on  the  desktop   The  code  for  the  trends  view  is  now  complete. If  you're  prompted  to  save  TwitterTrendsHome. Switch  back  to  your  application  running  in  ADL.   . Switch  back  to  Flash  Builder.12  |  Build  Your  First  Mobile  Flex  Application   Exercise  4.  click  OK.   during  development  it's  convenient  to  quickly  test  the  application  on  your   computer.  you  need  to  create  a   launch  configuration.   5.  The  window  should  switch   to  landscape  orientation.  ensure  TwitterTrends  is  selected.  so  you're  ready  to  run  the   application. In  TwitterTrendsHome.  and  the  controls  should  resize  to  fit  the  window.     Test  the  application   1. At  the  top  of  the  dialog.   3. In  the  Project  field. Select  Run  >  Debug  Configurations…   2.   3.   2.   7.   3. Use  your  mouse  to  drag  and  throw  the  list.mxml.   4.  and   displays  the  list  of  Twitter  trends. Double-­‐click  on  Mobile  Application  in  the  list  on  the  left.   6.   2.  select  On  desktop  and  choose  Google  Nexus  One  as   the  device  to  simulate.mxml.  You'll  learn  how  to  run  and  debug  your  application  on  a  physical  device   in  Exercise  8. Double-­‐click  in  the  gray  gutter  to  the  left  of  the  call  to  getData()  or   getTrends()  in  the  refresh()  method.  This  creates  a  new   configuration.     Create  a  launch  configuration  and  start  debugging   To  specify  how  Flash  Builder  should  run  your  application.  locate  the  refresh()  method.     A  blue  dot  appears  in  the  gutter  representing  your  breakpoint. For  Launch  method.  While  ultimately  you  will  want  to  test  on  one  or  more  real  devices.

In  the  Debug  panel.  click  the    Step  into  button  several  times. In  the  upper-­‐right-­‐hand  corner  of  Flash  Builder.  new  panels  appear.     The  Variables  panel  shows  the  values  of  variables  in  the  current  scope  as   well  as  in  the  current  object  (this).  Flash   Builder  will  step  into  the  getData()  or  getTrends()  method.     The  Expressions  panel  lets  you  create  specific  expressions  whose  values  you   want  to  monitor  whenever  you're  stopped.  click  on  the  Flash  button  to   switch  back  to  the  Flash  Development  perspective.   8. Click  the  refresh  icon  in  the  Action  Bar.   7.   5. Double-­‐click  on  the  breakpoint  in  the  refresh()  method  to  remove  it.       6.       The  Debug  panel  shows  the  current  call  stack.  Check  Remember  my   decision  and  click  Yes. In  the  Flash  Debug  perspective.  Clicking  on  other  calls  in  the  call  stack   navigates  to  other  methods.  Flash  Builder  shows  a  dialog  asking  if   you  want  to  switch  to  the  Flash  Debug  perspective.  Your   application  continues  running.  The  top  of  the  stack  is  the   refresh()  method  you  stopped  in.  Click  the  triangle  next  to  this  to  see   member  variables  and  their  values.     10.  You  may  need  to  resize   the  tab  containing  the  perspective  buttons  in  order  to  see  it.     The  Breakpoints  panel  shows  the  breakpoints  you  currently  have  set.   . Click  the    Resume  button  and  switch  back  to  the  ADL  window.  You  can  also   choose  Window  >  Open  Perspective  >  Flash. Quit  ADL.Build  Your  First  Mobile  Flex  Application  |  13   4.   9.

 or  you  can  simply   type  the  following  code  before  the  </s:View>  end  tag:   <s:List left="0" top="0" right="0" bottom="0"> </s:List>   Get  the  data  for  the  TweetsView   1. 2.   .     Create  the  TweetsView   1.  you'll  create  a  new  view   and  hook  it  up  to  a  search  query  for  the  trend.  The  process  is  similar  to  the  one  you   followed  for  the  trends  view.  you  want  to  allow  users  to   tap  on  a  trend  to  see  the  tweets  for  that  trend.14  |  Build  Your  First  Mobile  Flex  Application   Exercise  5. 7.components. 3.  To  do  this.   Ensure  that  the  Based  on  field  is  set  to  spark. Change  the  title  property  of  the  <s:View>  tag  at  the  top  to  "Tweets for {data}".  Add  a  view  to  display  tweets  for  a  trend   Now  that  the  initial  view  is  displaying  the  list  of  trends. Select  File  >  New  MXML  Component.   Set  the  Package  field  to  views   Set  the  Name  field  to  TweetsView   Leave  the  Layout  as  None.  we'll  see  how  the  trend  the  user  selects   in  the  trends  view  is  passed  in  as  the  data  property  of  the  TweetsView.   Add  a  List  that  takes  up  the  whole  view.   2.  In  the  next  exercise. 5.View   Click  Finish. 6. 4.  You  can  do  this  in  Design  mode  by   following  the  same  steps  as  in  the  first  part  of  Exercise  2. Similar  to  the  trends  view.  create  the  data  service  for  searching  the  tweets  as   follows.

 Make  sure  to  press  the   Return  key  after  each  name.com/search.     5.     Live  data   1.   10. Change  the  parameter  names  to  q  and   result_type. In  the  Data/Services  panel.twitter. Make  sure  Auto-­‐detect  is  selected  and   click  Next.   14. Change  the  URL  of  the  operation  to   http://search.   choose  Generate  Service  Call. In  the  results  property. Enter  Tweets  for  the  name  of  the  type. Click  Finish.  This  switches   you  to  Source  view  and  shows  that  a   new  getData()  function  was  generated. Rename  the  getData()  function  to   getTweets().     Call  the  service  when  the  user  navigates  to  or  refreshes  the  view   As  in  the  trends  view.  you'll  do  this  by  implementing  the  refresh()  method.   3. Change  the  existing  name  "Operation1"   to  getTweets   4.  bring  up   the  context  menu  for  TwitterService   and  choose  Properties. Choose  Data  >  Connect  to  XML…   2.   3.   4.  add  the  following  method:   .   6.  change  the  type   name  from  Results[]  to  Tweet[]. Click  Next.  click  Browse…  and   browse  to  the  search.  bring  up   the  context  menu  for  getTweets()  and   choose  Configure  Return  Type…   9.   7.   1.   12.   8.  bring  up  the  context  menu  for   getData()  under  TweetsService  (not  the   original  TrendsService)  and  choose   Generate  Service  Call. Click  the  Add  button  above  the   Operations  table.json   5.   15.   Leave  all  other  fields  as  the  default  and   click  Finish.  set  the  q   parameter  to  Flex  and  the   result_type  parameter  to  recent.     11. Click  the  Add  button  above  the   Parameters  table  twice  to  add  two   parameters. From  the  context  menu  for  getTweets(). Set  the  service  name  to  TweetsService. Inside  the  <fx:Script>  block.xml  file  in  the   src/sampledata  folder.Build  Your  First  Mobile  Flex  Application  |  15   Static  data   1. In  the  Data/Services  panel  at  the   bottom.   13. For  the  Path  field. In  the  Enter  Value  column. In  the  Data/Services  panel.   2.  This   switches  you  to  Source  view  and  shows   that  a  new  getTweets()  function  was     generated. Click  Finish.

  The  TweetsView  is  now  set  up  to  retrieve  and  display  data. } 2.   .   5. For  Label  field.  you  pass  the  data  property  of   the  TweetsView  into  the  Twitter  search  service.  we'll  see   how  this  data  property    is  passed  into  the  TweetsView.   4.  there's  no  real  backend  to  query  from.  select  the  results[]  array. Existing  call  result  should  already  be  selected. (Live  data  only)  For  Data  Provider.  select  text.  You'll  set  up  this  navigation  in  the  next  exercise. Place  your  cursor  between  the  angle  brackets  of  the  opening  <s:List>  tag. "recent"). Add  viewActivate="refresh()"  to  the  <s:View>  tag  at  the  top  of  the     In  a  real  application  going  against  live  data.  and  the  call  responder   (either  getDataResult  or  getTweetsResult)  should  be  selected  in  the   dropdown.   2.  In  the  next  exercise.16  |  Build  Your  First  Mobile  Flex  Application   Static  data     public function refresh(): void { getTweets().   6.     Bind  the  data  returned  by  the  service  into  the  list   1.     3. Click  OK.  but  the  user  doesn't   have  any  way  to  get  to  it  yet.  so  you  don't   pass  any  parameters—you  just  always  get  the  same  fake  data. }   Live  data     public function refresh(): void { getTweets(String(data).   In  the  static  data  case. Select  Data  >  Bind  to  Data.

  You  don't  normally  need  to  create  a  ViewNavigator  yourself.  the   List  dispatches  a  change  event  indicating  that  the  selection  has  changed.  A  content  assist  popup  appears   showing  you  property  and  event  names.   3.   ViewNavigator  is  a  component  that  manages  a  set  of  Views  in  a  stack. Type  a  space.  you  need  to  make  it  so  that  when  the  user   taps  on  a  trend  in  the  initial  view.  only  one  view  (the   currently  active  view)  is  actually  in  memory  at  a  time.  with  change  highlighted.  the  only  view  in  the  stack  is  the  firstView  of  the   application.   ViewNavigator  can  reinstantiate  the  view  with  the  appropriate  data.  so  when  the  user  navigates  back  to  a  previous  view.  You  can   handle  this  event  to  tell  the  ViewNavigator  to  push  your  new  TweetsView  onto  the   view  stack.  However.  Flash  Builder  gives  the  List  the  id  "list"   and  creates  a  list_changeHandler  method.  you  push  it  onto  the   stack  by  calling  pushView()  on  the  ViewNavigator.  the  data  property  of  each  disposed  view   is  retained.  When  you  want  to  navigate  to  a  new  view. Inside  the  new  list_changeHandler  method. Switch  back  to  the  editor  for  TwitterTrendsHome.  the  current  view  is  automatically  popped  off   the  stack.  When   the  application  starts  up.  Press   the  Return  key  again  to  select  it.  Set  up  view  navigation     Now  that  you've  created  the  TweetsView.  Press  the   Return  key  to  select  it  from  the  popup.  When  the  user  clicks   the  Back  button  on  the  device.   4. Another  popup  appears  showing  Generate  Event  Handler…  selected.  the  application  navigates  to  the  TweetsView.  type  the  following:   .  then  start  typing  change.   Although  the  set  of  views  is  maintained  as  a  stack.     Add  a  change  handler  in  TwitterTrendsHome  to  navigate  to  TweetsView   You  can  use  Flash  Builder's  content  assist  feature  to  easily  create  the  change  event   handler.  previous  views  are     automatically  disposed.Build  Your  First  Mobile  Flex  Application  |  17   Exercise  6.mxml.  one  is  provided   for  you  when  you  create  a  MobileApplication.   1.   When  the  user  taps  on  an  item  in  the  List  component  in  TwitterTrendsHome.   2. Locate  the  <s:List>  tag  and  click  immediately  before  the  end  angle-­‐ bracket  of  the  start  tag.   5.  You  can  also  manually  pop  the  top  view  from  the  stack  by  calling   popView().

 you  bound  the  data   property  into  the  title  of  the  TweetsView  and  (if  you're  using  the  live  API)  used  it  to  query   the  Twitter  search  service  for  tweets  relevant  to  the  trend.  you  only  see  one  line  of  each  tweet.18  |  Build  Your  First  Mobile  Flex  Application   navigator.selectedItem.  In  the  previous  exercise.   .  and  to  pass  it  the  name  of   the  selected  trend  as  its  data  property.  However.   If  you  run  the  application  now  and  tap  on  a  trend  in  the  initial  view. This  tells  the  ViewNavigator  to  create  an  instance  of  TweetsView.pushView(TweetsView. list.  and   you  don't  see  the  image  or  name  of  the  person  who  posted  the  tweet.name).  You'll   configure  this  in  the  next  exercise.  you'll  see  that   the  tweets  are  shown  in  the  list.

 you  do  this  by  creating  an  item  renderer  for  the  list.     Create  a  mobile  item  renderer   You  can  use  the  new  Code  Templates  feature  of  Flash  Builder  "Burrito"  to  quickly   add  a  MobileIconItemRenderer  to  the  list.   1. Type  Ctrl-­‐Space.  You  can  also  optionally  show  an  icon  or  image  to  the  left   of  the  text  in  each  item. Switch  to  TweetsView.  you  can  show  a  header  field  and  an  optional  message   field  below  the  header  field. Fill  out  the  item  renderer  code  as  shown  on  the  next  page:   .)   2.  you  can  subclass  its   more  general  base  class.   5.     6.  Showing  how  to  do  this  is  beyond  the  scope  of  this  tutorial.  Using  this  item  renderer.   If  MobileIconItemRenderer  doesn't  meet  your  needs.  (Make  sure  you're  not  in   TwitterTrendsHome.  it  automatically  fills   out  the  basic  structure  of  the  code  for  you.  As  a  result.   In  desktop  Flex  applications.  we've  provided  an  ActionScript-­‐based  MobileIconItemRenderer   class. Place  the  cursor  immediately  after  the  end  of  the  <s:AsyncListView/>   tag  in  the  List  and  press  the  Return  key.  and  add  and  lay  out  your  own   controls  in  ActionScript.  and  a  decorator  on  the  right  end.Build  Your  First  Mobile  Flex  Application  |  19   Exercise  7.  You'll  remap  this   text  property  in  the  item  renderer  below.  you  would  normally  do  this  by  creating  a  custom   MXML  component  based  on  ItemRenderer.  you  need  to  specify  how  the  list   should  display  data. Type  Mobile  (with  no  <  before  it).       Because  Flash  Builder  has  a  code  template  for  MobileIconItemRenderer  (and   it's  the  only  template  whose  name  starts  with  Mobile).   but  we  plan  to  make  examples  available  in  the  future. Delete  the  labelField="text"  property  from  the  List.  MobileItemRenderer.   4.  in  mobile  applications.   3.  using   MXML  to  create  item  renderers  can  cause  performance  problems  when  the  list  is   scrolled.   In  "Hero".  However.  which  has  similar  List  code.  we  recommend  that  you  use  ActionScript-­‐based  item  renderers   in  mobile  Flex  applications.  Configure  the  list  item  renderer   As  mentioned  at  the  end  of  the  previous  exercise.mxml.mxml.  In  Flex.

 the  height  will  not  be  necessary  since   the  renderer  will  grow  to  accommodate  its  content.  This  will  be  addressed  for  the  final   release.)   10.   7.  switch  to  another   application.     Add  the  username  to  each  tweet   1.  change   messageField="text"  to  messageFunction="getTweetText".   MobileIconItemRenderer  does  not  resize  to  the  height  of  its  content.  you  enable  the  text  to  wrap  to  multiple  lines.  (If  you  don't  see  the  ADL  Device  menu.  By  using  messageField  instead  of  labelField  for  the   text.   8.  and   add  a  Script  block  inside  it.  click  on  "Inception".)   This  brings  you  to  the  tweets  view  for  that  trend.  which  is   why  we  added  an  explicit  height  above.  In  the  preview  release. Click  on  a  trend  in  the  initial  view.  which  is  why  we  put  a   fixed  height  on  it.   2.  (If  using  static  data.  as  in  the  code  below:   .   Note  that  in  this  preview  release  of  "Hero". Change  the  MobileIconItemRenderer  tag  to  have  a  start  and  an  end  tag.  the  item  renderer  does  not   automatically  grow  vertically  if  the  tweet  gets  taller. Select  Device  >  Back  in  the  ADL  menu  (or  type  Ctrl/Cmd-­‐B)  to  go  back  to  the   trends  view.  labelField  (which   maps  to  the  headerField  of  the  item  renderer)  displays  in  bold  and  does   not  wrap  by  default.  then  switch  back  to  ADL.20  |  Build  Your  First  Mobile  Flex  Application     <s:itemRenderer> <fx:Component> <s:MobileIconItemRenderer iconField="profile_image_url" iconWidth="80" iconHeight="80" labelField="" messageField="text" height="110" verticalAlign="top"/> </fx:Component> </s:itemRenderer> The  field  properties  specify  which  members  of  each  data  item  to  use  as  the   message  and  icon. In  the  MobileIconItemRenderer  tag  you  created  above.  In  the  final  release. Quit  ADL. Click  the    Run  button  in  the  Flash  Builder  toolbar  to  run  the  application   on  the  desktop.   Note  that  some  of  the  tweets  are  not  fully  displayed.   9.

text.Build  Your  First  Mobile  Flex  Application  |  21   <s:MobileIconItemRenderer iconField="profile_image_url" iconWidth="80" iconHeight="80" labelField="" messageFunction="getTweetText" height="110" verticalAlign="top"> <fx:Script> <![CDATA[ private function getTweetText(item: Object): String { return item.   .  you'll  see  the  name  of  each  user  before  each  tweet.from_user + ": " + item. } ]]> </fx:Script> </s:MobileIconItemRenderer> If  you  run  the  application  again.

 If  you  don't  have  a  device.   6.   2.2  ("Froyo")  and  a  USB  cable  to   connect  it  to  your  computer.  uninstall  it  first:   a.  You'll  need  a  device  running  Android  2.  select  that   mode  and  tap  OK.   5.  then  Manage  Applications.   b.5  for  Android  installed  on   your  device.  See  Appendix  1  at  the  end  of  this  workbook. Tap  the  Menu  button  and  choose  Settings.  let's  try  running  it  on  a  physical   device.     Run  on  the  device   1.   a. Ensure  USB  debugging  is  checked. Tap  on  the  "USB  Connected"  or  "USB  Connection"  entry.  If  not. On  the  device. Connect  your  device  to  your  computer  with  a  USB  cable.   d.  you  need  to  install  the  appropriate   USB  driver  for  your  device. If  a  set  of  options  comes  up  that  includes  "Charge  Mode". If  your  computer  is  running  Windows.  ensure  that  your  phone  is  on  either  a   WiFi  or  cell  network. Pull  down  the  notification  area  at  the  top  of  the  screen.   b.   d.  double-­‐check  the  USB   mode  as  in  step  3  and  ensure  that  it  is  not  set  to  "PC  Mode".  You  should  see  "USB   Connected"  or  "USB  Connection". If  you  see  a  button  for  turning  off  mass  storage  mode.  then  Menu. Click  Uninstall.   7. Tap  Home. If  you  have  an  earlier  preview  release  of  AIR  2.  ensure  that  USB  debugging  is  enabled:   a.   c.22  |  Build  Your  First  Mobile  Flex  Application   Exercise  8. Tap  the  Home  button  to  go  to  the  Home  screen.  click  the  dropdown  arrow  to  the  right  of  the   in  the  Flash  Builder  toolbar  and  choose  Run  Configurations…    Run  icon   . Choose  Adobe  AIR. Choose  Applications.  Debug  the  application  on  a  device   Before  finishing  the  functionality  of  the  application.  skip  ahead  to  the  next   exercise. If  you  are  using  the  live  Twitter  API.   4. In  Flash  Builder.   3.   c. Pull  down  the  notification  area  at  the  top  of  the  screen.   b.  click  that   button.  then  Development.   c.  and  choose  Settings.  "USB  Debugging"   should  now  appear  as  an  entry  in  this  area.     Set  up  your  device  for  running   1. Choose  Applications.

 you  will  need  to  temporarily   disable  your  firewall  in  order  to  debug.  to  the   right  of  the  progress  bar.)   3.   3.   The  first  time  you  launch. Tap  the  Home  button.     2. Ensure  that  your  device  is  connected  to  WiFi:   a.  the  AIR  runtime  communicates  with  the  debugger  in   Flash  Builder  over  the  network. Tap  Wi-­Fi  settings.  and  (if  using  live   data)  click  the  Refresh  button  on  the  Tweets  view  to  get  the  latest  tweets.  just  as  on  the  desktop.  select  your  existing  TwitterTrends  Desktop   configuration  and  click  the    Duplicate  button  at  the  top.  use  the  OfficialMAX2010WiFi  network).  To  follow  the  progress  of  the  launch.  In  other  contexts.  and  use  the  back   button  on  the  device  to  navigate.   c.  Flash  Builder  will  install  the  AIR  runtime  on  the  device.  then  choose  Settings.   b.  it  needs   to  be  on  the  same  WiFi  network.  due  to  an  issue  in  the  preview   release.     1.  You  should  also  be  able  to  turn  the  device  to   landscape  orientation  and  see  that  everything  works  properly. Change  the  Launch  method  to  On  device.   d. Check  the  Wi-­Fi  checkbox  if  it's  not  already  checked.   f.  On  Windows  XP.     Set  up  your  device  for  debugging   When  debugging  on  a  device.  you  can  open  ports  7  and  7935.  (At  MAX. In  the  list  on  the  left.   e. Tap  the  Menu  button.  it  just  needs  to  be  on  a   network  accessible  from  the  WiFi  network  your  device  is  connected  to.  you  can  click  on   the  progress  icon  in  the  very  bottom  right  of  the  Flash  Builder  workspace.     When  the  application  launches  on  your  device. Change  the  Name  to  TwitterTrends  Device.   then  install  your  application.   4.Build  Your  First  Mobile  Flex  Application  |  23   2.  That  means  that  your  device  must  be  connected  to   WiFi  on  a  network  that  can  access  your  computer  via  its  IP  address. If  you're  not  already  connected  to  WiFi.  tap  on  a  network  to  connect   to  (at  MAX. Make  sure  your  laptop  is  connected  to  the  same  network. If  you're  running  Windows  Vista  or  Windows  7.   5. Choose  Wireless  &  networks. Click  Run.     .  you  should  be  able  to  scroll  the  list  of   trends  and  tap  on  a  trend  to  see  its  tweets.

 disconnect  the  computer   from  VPN  before  attempting  to  debug.  For  example.   Consult  the  Flash  Builder  documentation  (or.   3.   If  your  application  doesn't  seem  to  be  able  to  connect  to  the  debugger. Remove  the  breakpoint  from  the  refresh()    method  by  double-­‐clicking  on   the  blue  dot.  Note.  ask  a  TA)  for    more   troubleshooting  help.   the  debugger  was  unable  to  connect  to  your  computer.   4. In  Flash  Builder.24  |  Build  Your  First  Mobile  Flex  Application   Hit  a  breakpoint  on  the  device   1.  your   network  connection  may  be  improperly  configured.  if  your   computer  is  on  a  VPN  network  and  the  phone  is  not. If  you  see  an  IP  address  dialog  on  your  device  when  the  application  restarts.  just   as  you  did  on  the  desktop  in  Exercise  4.  set  a  breakpoint  in  the  refresh()  method  of   TwitterTrendsHome.   2.mxml  (as  you  did  in  Exercise  4).  The  Twitter  Trends  app  running  on  your  phone   should  quit  and  restart  in  debug  mode.  See  the  notes  in  the   "Set  up  your  device  for  debugging"  section  above. When  the  application  starts.  you  should  hit  the  breakpoint  (since  it  gets   called  on  activation  of  the  initial  view).  in  the  lab.   You  can  access  all  the  debugging  capabilities  of  Flash  Builder  on  device. Click  the  dropdown  to  the  right  of  the    Debug  button  and  choose   TwitterTrends  Device.   like  stepping  into  functions  or  drilling  down  into  the  contents  of  an  object  in   the  Variables  view.  however.   .   5.  may  be  slower  when  debugging  on  a  device.  or  (in  the  lab)  ask  a  TA  for   help.  that  some  operations.

)   .Build  Your  First  Mobile  Flex  Application  |  25               Extra  Credit  Exercises   (Skip  ahead  to  Exercise  11  to  see  how  to  package  up  the  final   application  for  deployment.

 (Note:  due  to  an  issue  in  the  preview  release. Switch  to  Design  mode.     Create  the  view  and  customize  its  Action  Bar   In  the  previous  views.26  |  Build  Your  First  Mobile  Flex  Application   Exercise  9. Drag  an  Image  into  the  titleContent  to  the  right  of  the  Spacer  and  set  its   Width  and  Height  to  60. In  the  Properties  panel.   2.  set  the  Width  property  to  15.  so  it  just  showed  the   content  from  the  MobileApplication  (or.  in  the  case  of  the  titleContent.  along  with  a   list  of  the  user's  recent  tweets.  Add  a  view  to  show  information  for  a  selected  user   Now  we'll  complete  the  functionality  of  the  application  by  adding  a  view  to  show  the   information  about  the  user  who  posted  a  given  tweet.   3. As  you  did  with  the  TweetsView.)   6. From  the  Layout  folder  of  the  Components  panel.     4.     This  view  has  a  slightly  more  complex  layout  than  the  previous  views:  the  Action   Bar  is  customized  to  show  the  image  and  name  of  the  selected  user. Drag  another  Spacer  to  the  right  of  the  Image  and  set  its  Width  to  15.   1. Drag  a  Label  to  the  right  of  the  Spacer.   so  you'll  see  it  disappear.   5.  you  didn't  change  the  Action  Bar.  drag  a  Spacer  into  the   titleContent  area  of  the  Action  Bar.  use  File  >  New  MXML  Component  to   create  a  new  View  called  UserInfoView  in  the  views  package. Click  the    Bold  button  in  the  Properties  panel.  and  the  view   content  has  some  labels  to  show  the  location  and  website  of  the  user.  This  will  replace  the  default  titleContent.  the   titleContent  container  box  may  not  look  correct  when  you  do  this.   8.   Your  Action  Bar  should  now  look  like  this  in  Design  view:   .   7.  it  just   showed  the  title  of  the  current  view).  Now  you'll  replace  the  default  titleContent   with  an  image  and  the  name  of  the  user  who  posted  the  tweet.

Build  Your  First  Mobile  Flex  Application  |  27     Lay  out  the  view  content   1. Resize  the  right  edge  of  the  label  to  near  the  right  edge  of  the  view.   3.   4.  as  in  the  screenshot  on  the  next  page. Double-­‐click  each  label  to  set  the  text  as  in  the  screenshot  above.     b.  (The  number   on  the  left  may  not  be  exactly  the  same. Select  the  "(location)"  label  on  the  right.  drag  out  four  Labels  and  arrange  them  as   shown  below.  The  labels   on  the  right  have  placeholder  content  for  now. From  the  Components  panel.       2.  and:   a. In  the  Constraints  section  of  the  Properties  panel.  pin  it  to  the  left   and  right  edges.  you'll  data-­‐bind  them  later. Select  the  labels  on  the  left  and  click  the    Bold  button  in  the  Properties   panel.)   .   leaving  some  padding.

 you'll  access  a  new   service  call  for  the  user  information.     Get  the  data  for  the  view   In  this  view.  you'll  use  two  new  static  data  files. Drag  in  a  List  below  the  labels.  The  second  is  the  user's  recent  tweets. Switch  to  the    Alphabetical  view  of  the  Properties  panel  and  set   maxDisplayedLines  to  1.  The   first  is  the  user's  profile  information.   d.  right. Switch  back  to  the    Standard  view  of  the  Properties  panel.   6.   In  the  static  data  case.  this  is  used  to  fill  the  Image  in  the  Action  Bar   and  the  location/website  below  that.  one  for  the  user   information.  and  constrain  it  to  all  four  sides.  In  the  live  data  case.  Move  and  resize  it  so  that  it's  flush  against  the   left.28  |  Build  Your  First  Mobile  Flex  Application     c.  and  one  for  the  recent  tweets.   5.  which   will  fill  the  List  at  the  bottom.  and  bottom  sides  of  the  view.     .  there  are  two  sets  of  data  you  need  to  get  from  different  services.  but  you'll  use  the  same  getTweets()  service  call   that  you  created  earlier  in  order  to  fetch  recent  tweets. Repeat  step  4  for  the  "(url)"  label  on  the  right.

  3.   6.com/1/users/show.   8.  bring  up  the   context  menu  for  TwitterService  and  choose   Properties.  Rename   the  new  getData()  function  to   getTweets()  and  use  Refactor  >   Rename…  to  change  getDataResult  to   getTweetsResult. Set  the  service  name  to   UserInfoService. From  the  context  menu  for  the   getUserInfo()  method.  Click  Finish. For  the  Path  field. Click  Next.     Call  the  service  when  the  user  navigates  to  or  refreshes  the  view   As  in  the  trends  view. Click  the  Add  button  above  the  Operations   table. In  the  Data/Services  panel  at  the   bottom. In  the  Data/Services  panel. Change  the  existing  name  "Operation1"  to   getUserInfo   4.  naming  the   service  UserTweetsService. Generate  another  service  call  for  the   existing  getTweets()  method.   13.  bring  up  the   context  menu  for  getUserInfo()  and  choose   Configure  Return  Type…   9.xml  file  in  the   src/sampledata  folder. Right-­‐click/Ctrl-­‐click  on  getDataResult   and  choose  Refactor  >  Rename…   7.     11.   7. The  type  should  be  prefilled  as  User  by   default.  You'll  use  this   service  call  to  search  for  the  tweets  from  the   given  user. Make  sure  Auto-­‐detect  is  selected  and  click   Next.  choose  Generate   Service  Call.xml.xml   5. Change  the  URL  of  the  operation  to   http://api. Inside  the  <fx:Script>  block.  This  modifies  the  name   in  both  places  where  it's  used.  you'll  do  this  by  implementing  the  refresh()  method. In  the  Enter  Value  column.  set  the   screen_name  parameter  to  Adobe.  bring  up  the  context  menu  for   getData()  under  UserInfoService  and   choose  Generate  Service  Call.  Leave  all  other  fields   as  the  default  and  click  Finish. Change  the  name  to  getUserInfoResult   and  click  OK.  This  switches  you  to  Source   view  and  shows  that  a  new  getUserInfo()   function  was     generated.   3. Rename  the  getData()  function  to   getUserInfo(). Change  the  parameter  name  to   screen_name.  click  Browse…  and   browse  to  the  userinfo. Follow  steps  1-­‐7  for   searchUserTweets.   6.   4. Click  Finish.   10.   14. In  the  Data/Services  panel.  add  the  following  method:   .     Live  data   1.  This   switches  you  to  Source  view  and  shows   that  a  new  getData()  function  was   generated.   8.   2. Choose  Data  >  Connect  to  XML…   2.Build  Your  First  Mobile  Flex  Application  |  29   Static  data   1.   3.     5. Click  the  Add  button  above  the  Parameters   table.   12.  Make  sure  to  press  the   Return  key  after  the  parameter  name.twitter.

Add  viewActivate="refresh()"  to  the  <s:View>  tag  at  the  top  of  the   file. Place  your  cursor  between  the  angle  brackets  of  the  opening  <s:List>  tag.  Later  we'll   pass  the  screen  name  of  the  selected  user  into  this  view  as  its  data. } 4. 6.  select  the  results[]  array. getTweets("from:" + String(data).  (You  don't  need  to  specify  an  icon  or  add  the  user  name.lastResult.   Following  the  example  in  Exercise  7.  change  the  text  property  to   {getUserInfoResult.     Bind  the  data  returned  by  the  service  into  the  UI   1.  add  a  MobileIconItemRenderer  that  gets   the  text  as  the  messageField  of  the  item  renderer  to  text  and  sets  the   labelField  to  blank. 3. 5. For  the  (website)  placeholder  label.  select  text.     For  Existing  call  result.   For  Label  field. 7.   3. Set  the  text  of  the  Label  in  the  <titleContent>  to  {data}. Locate  the  Image  in  the  <s:titleContent>  tag  and  set  the  source  to   {getUserInfoResult.  change  the  text  property  to   {getUserInfoResult. "recent"). }   Live  data     public function refresh(): void { getUserInfo(String(data)).)  The  resulting  item  renderer   code  should  look  like  this:   <s:MobileIconItemRenderer labelField="" messageField="text" height="110" verticalAlign="top"/> In  the  next  few  steps.url}     . For  the  (location)  placeholder  label.30  |  Build  Your  First  Mobile  Flex  Application   Static  data     public function refresh(): void { getUserInfo().  you'll  manually  type  the  code  to  bind  the  rest  of  the  UI   elements  to  data. 4.   (Live  data  only)  For  Data  Provider.lastResult.profile_image_url}   2.location}   4.   Select  Data  >  Bind  to  Data.   1.  select  the  getTweetsResult. getTweets(). 2.   Click  OK.lastResult.   since  all  the  tweets  are  from  the  same  user.

list.selectedItem.  tap   on  the  first  tweet  in  the  tweets  view  to  navigate  to  the  data  for  that  user.  (In  the  static  data  case.  This  should  add  id="list"  to  the  List  tag. Inside  the  new  list_changeHandler  method.   navigate  to  the  info  for  the  user  who  posted  that  tweet.  use  Content  Assist  to  generate  a  change  handler  for  the   List  tag.from_user). As  you  did  before. You  should  now  be  able  to  run  the  application.  tap  on  a  trend.  and  then  from  a  tweet.   2.Build  Your  First  Mobile  Flex  Application  |  31   Add  a  change  handler  in  TweetsView  to  navigate  to  UserInfoView   1.)   .pushView(UserInfoView.   3.  type  the  following:   navigator.mxml. Switch  back  to  the  editor  for  TweetsView.

 Conversely.  or  implement  your  own  serialization  for  specific  data  types. 3.  On  many  mobile  operating  systems.   Tap  on  a  tweet  to  navigate  to  the  UserInfoView.       Enable  session  caching   1.  the  application  automatically   saves  its  view  stack  state  and  view  data  to  persistent  storage  on  the  device   whenever  it  exits. 4. In  the  <s:MobileApplication>  tag.  In  more   complex  applications.  when  the  user  presses   the  Home  button  or  presses  the  Back  button  on  the  initial  screen  of  an  application.  When  you  enable  session  caching.   That's  all  you  need  to  do  to  turn  on  session  caching!  In  this  application. 5.   2.  Set  up  data  persistence  between  sessions   When  running  a  desktop  application.  users  explicitly  choose  to  quit  the  application   when  they're  done  with  it.   the  application  doesn't  quit.   .  you  may  need  to  register  data  type  classes  with  the   persistence  manager.  choose  Device  >  Back  (or  type  Ctrl-­‐B/Cmd-­‐B).   showing  the  user  you  were  looking  at  when  you  quit  the  application.   Choose  TwitterTrends  Desktop.  add  the  property   sessionCachingEnabled="true".mxml. Click  the  dropdown  arrow  to  the  right  of  the  Run  button.  and  restores  it  when  the  application  is  restarted.     Test  session  caching  on  the  desktop   1. 6.  when   many  applications  are  running.   Run  the  application  again.   7.  no  work  is  lost. 2.   Close  the  ADL  window.  the  operating  system  will  terminate  background   applications  without  notifying  the  user.32  |  Build  Your  First  Mobile  Flex  Application   Exercise  10.  The  application   navigates  back  to  the  list  of  tweets  for  the  trend  you  were  viewing  in  the   previous  session.  The  application  restarts  on  the  UserInfoView.  users  don't   typically  explicitly  quit  applications.  it's  merely  sent  to  the  background.   Tap  on  a  trend  to  navigate  to  the  TweetsView.  so  that  when  the  user  re-­‐enters  the   application.  for  example.   Flex  provides  session  caching  functionality  in  MobileApplication  to  help  automate   this  for  developers.  session   caching  is  simple  because  the  data  property  of  each  view  is  a  simple  string.  however.  On  Android.  This  means  that  mobile  applications  must   take  care  of  saving  and  restoring  their  state. Switch  to  TwitterTrends. In  ADL.

 check  Clear  application  data  on  each  launch. Select  Run  >  Run  Configurations…   From  the  list  on  the  left.  From  the  user's  point  of  view.   1.  it  looks  like  the  application  was   never  interrupted.   Click  Run.   You  can  test  this  on  device  as  well.   This  time.  On  Android.  To  go  back  to   preserving  session  state  again.       .Build  Your  First  Mobile  Flex  Application  |  33   The  session  caching  maintains  the  entire  history  of  the  view  stack  as  well  as  the   appropriate  data. 4. 2.  you  can  do  this  from  the  Settings  >  Applications  >   Manage  Applications  screen.     Clear  application  data  when  running  it   When  testing  an  application  with  session  caching.  you  may  want  to  clear  the   application's  data  when  you  run  it  in  order  to  test  a  clean  startup.  choose  TwitterTrends  Desktop.   At  the  bottom. 3.  but  you'll  need  to  manually  kill  the  application  in   order  to  test  it.  go  back  to  the  launch  configuration  dialog  and   uncheck  Clear  application  data  on  each  launch.  This  checkbox  also  works  in   device-­‐based  launch  configurations.  the  application  restarts  from  the  initial  trends  view.

 Export  an  application  package  for  release   Now  that  your  application  is  complete.  and  use  it  to  create  your  release  build.   you  will  be  notified  that  the  build  was  not  installed  on  any  devices. 5.  or  sell  it  in   an  application  store.   The  release  build  is  now  saved  as  TwitterTrends. Enter  a  password  in  the  Password  and  Confirm  password  fields. Click  OK.   For  convenience.  which  has  been  extended  to  package  mobile  projects. Select  Project  >  Export  Release  Build…   Ensure  that  your  TwitterTrends  project  is  selected  in  the  first  dropdown. 3. Enter  your  name  as  the  Publisher  name. Click  the  Browse…  button  and  specify  a  location  and  filename  for  the   certificate. Click  Finish  on  the  Export  Release  Build  dialog.  the  release  build  is  now  installed  on  your  device.   10.  you  will  need  to  get  an   official  certificate  from  a  certificate  provider.  To  do  this.apk  in  the  root  of  your  project.  you  use  Flash  Builder's  Export  Release  Build   dialog.  ensure  that  your  device  is  connected  if  you  have  one. 2.  Flash  Builder  performs  an  initial  build  of  the  project.   7.   8.   Note  that  the  debug  version  of  the  application  (which  was  installed  when  you   previously  debugged  or  ran  the  application  on  your  device)  is  called   TwitterTrends-­debug.   Before  deploying  an  application  for  public  distribution  (through  a  website  or   through  an  application  store  like  the  Android  Market).  the  release  version  is  just  called  TwitterTrends.  If  no  device  is  connected.   6.     .   and  if  you  device  is  connected.34  |  Build  Your  First  Mobile  Flex  Application   Exercise  11.  you  may  want  to  give  it  to  others. 4.  for  the  Certificate  field.   9.   1.   In  the  next  screen.  click  Create…  to  create  an   unofficial  self-­‐signed  certificate.   Click  Next.

)   Add  a  way  to  search  for  tweets  with  a  given  keyword.  and  the  icon  goes  in  the  AIR  XML  descriptor  file.   .  here  are  some  things  to  try.  handle  the  click  event.  (Hint:  the  splash  screen   goes  on  MobileApplication.   Add  a  view  that  lets  you  post  a  tweet  once  you're  logged  in.   • • • For  more  tutorials  and  examples.  ran  through  this  tutorial  quickly  and  are  ready  to  try  something   more  challenging  on  your  own.  If  you're  already   familiar  with  Flex.)   • • Add  a  splash  screen  and  application  icon  for  the  app.  (You'll  want  to  use  the   live  API  data  for  these.)   Add  a  way  to  log  in  to  Twitter  and  get  your  Twitter  stream.Build  Your  First  Mobile  Flex  Application  |  35   Extra  Extra  Credit   Congratulations!  You've  built  your  first  mobile  Flex  application.  visit  the  Flex  and  Flash  Builder  Mobile   Development  page  on  Adobe  Labs.)   Make  the  URL  on  the  UserInfoView  link  to  the  user's  web  page.   and  use  Flash's  navigateToURL()  method.  (Hint:  you  can  put  a   TextInput  control  in  the  titleContent  of  the  Action  Bar.  (Hint:  there's   no  link  control.  but  you  can  style  it  to  look  like  a  link.

 and  that  your  device   is  in  "Charge  Only"  mode  with  mass  storage  turned  off.   close  it. Go  to  Control  Panel  and  bring  up  Device  Manager.  as  described  in   Exercise  8  above.  indicating  that  the  driver  is  not  properly  installed.inf   You  can  update  android_winusb.inf  at  the  following  location:     <Adobe  Flash  Builder  Burrito  Home>\utilities\drivers\android\android_winusb.  The  following  devices  are   currently  supported  by  the  driver  provided  with  Flash  Builder:   • • • • • • Google  Nexus  One   Motorola  Droid   Motorola  Droid  2   Motorola  Droid  X   HTC  Droid  Incredible   HTC  Evo  4G   These  device  driver  configurations  are  listed  in  android_winusb.inf.   2.  follow  these  steps.inf  wth  USB  drivers  for  Android  devices  not  listed   above.   .   To  install  the  USB  device  driver  for  an  Android  device. Choose  to  manually  browse  to  the  driver. Ensure  that  USB  debugging  is  turned  on  on  your  device.)   1.  Flash  Builder   installs  android_winusb.  (Note  that   these  steps  may  be  slightly  different  on  different  versions  of  Windows. Connect  your  Android  device  to  your  computer’s  USB  port.  you  need  to  install  the  developer  USB  driver  for  your   device  before  attempting  to  run  or  debug  on  the  device.   5.   4.   8. If  a  message  bubble  pops  up  indicating  that  the  device  driver  can't  be  found. Locate  the  entry  for  your  device. Browse  to  this  folder  in  the  Flash  Builder  installation  folder:   <Flash  Builder>/utilities/drivers/android/   9.  see  the  next  section.   3.  Windows   Device  Manager  accesses  this  file  when  installing  the  device  driver.  Installing  the  USB  driver  on  Windows   If  you  are  running  Windows.  It  will  also  likely  have  a  warning  icon   on  it. Right-­‐click  on  the  item  and  choose  "Update  Driver  Software…".   6. Follow  the  steps  in  the  wizard  to  finish  installation.     7.  It  should  have  the  name  of  your  device's   manufacturer  and  a  reference  to  "ADB".36  |  Build  Your  First  Mobile  Flex  Application   Appendix  1.

  1.  For  the  device  driver  you  want  to  add.  .  However.  copy  and  paste  a  comment  and   hardware  listing.  NEW  HARDWARD  ID     .     .inf  in  a  text  editor.  .NTx86]     .  the  driver  allows  Flash  Builder  to  access  your  device.  .     7. From  the  [Google.     [Google.     Windows  informs  you  that  it  cannot  find  the  driver.  .   4.  Replace  the  hardware  ID   with  the  hardware  ID  identified  in  Step  3  above.     2. Open  android_winusb.  .  edit  the  listing  as   follows:   For  the  comment. Plug  the  device  into  a  USB  port  of  your  computer.  specify  the  name  of  the  device.   During  the  installation.   3. Select  the  Hardware  IDs  property  to  view  the  hardware  ID.  .  For  example:   .  Windows  provides  a  warning  that  the  driver  is  from  an   unknown  publisher.   An  excerpt  appears  below:   .NTx86]  section  of  the  file.Build  Your  First  Mobile  Flex  Application  |  37   Adding  Android  USB  device  driver  configurations     If  you  have  a  supported  Android  device  not  listed  in  the  table  above.  NEW  ANDROID  DEVICE     %CompositeAdbInterface%          =  USB_Install.  open  the  Details  Tab  of  the  device   properties.  .inf     5.NTx86]     .  update  the   android_winusb. Use  the  Windows  Device  Manager  to  install  the  device.inf  file  to  include  the  device.  .     6.  as  described  in   Installing  USB  device  drivers  for  Android  devices  above.  HTC  Dream     %CompositeAdbInterface%          =  USB_Install.  USB\VID_0BB4&PID_0C02&MI_01     .inf  can  be  found  at   the  following  location:     <Flash  Builder>\utilities\drivers\android\android_winusb.  android_winusb. Using  the  Windows  Device  Manager.NTx86]  section  of  the  file.     [Google.  The  listings  contain   a  descriptive  comment  and  one  or  more  lines  that  includes  the  hardware  ID. Note  the  listings  in  the  [Google.