Mobile St Cloud Development with Flashbuilder Burrito, Flex Hero, and ActionScript
<ul><li>Hopefully what I show next, will get you excited about the rest of my presentation </li></ul><ul><li>If it doesn’t...
<ul><li>It has a nice IDE based on eclipse </li></ul><ul><ul><li>Robust syntax error messaging </li></ul></ul><ul><ul><li>...
<ul><li>Flashbuilder Burrito </li></ul><ul><ul><li>http://labs.adobe.com/technologies/flashbuilder_burrito/   (towards rig...
<ul><li>Download the prerequisites previously mentioned </li></ul><ul><li>Creating a new project </li></ul><ul><ul><li>Typ...
<ul><li>Settings </li></ul><ul><ul><li>Transparent </li></ul></ul><ul><ul><li>Visible </li></ul></ul><ul><ul><li>AutoOrien...
<ul><li>Defining Android permissions </li></ul><ul><ul><li>Internet(android.permission.INTERNET) – added by default </li><...
<ul><li>Now that we’re ready to debug, lets set up a configuration </li></ul><ul><ul><li>Note you can select your device o...
<ul><li><s:MobileApplication  </li></ul><ul><ul><li>Xml Namespaces </li></ul></ul><ul><ul><li>Referencing custom controls ...
<ul><li>Defining your First View </li></ul><ul><ul><li><s:Navigator firstView=“views.[your first view]” </li></ul></ul><ul...
<ul><li>ViewNavigator </li></ul><ul><ul><li>Controls what view is currently shown </li></ul></ul><ul><ul><li>By default ba...
<ul><li><s:View  viewActivate=“[your start point]” </li></ul><ul><ul><ul><ul><ul><li>currentState=“[state]” – defines stat...
<ul><li>Methods for setting data for your view </li></ul><ul><ul><li>Prior to pushView </li></ul></ul><ul><ul><li>After pu...
<ul><li><fx:Style – defines styles in a way similar to CSS </li></ul><ul><ul><ul><li>.myControl{ paddingRight:15;} </li></...
<ul><li><fx:Style source=“[path to my css file]” </li></ul>Styling (cont.)
<ul><li>FlashBuilder Burrito includes a number of themes that you can use in your application by default </li></ul><ul><li...
<ul><li>s:VGroup – any control within will stack vertically </li></ul><ul><li>s:HGroup – any control within will stack hor...
<ul><li>Adding a databound List – A few ways </li></ul><ul><ul><li><fx:ArrayCollection id=“myData”> </li></ul></ul><ul><ul...
<ul><li>Using Layouts based on screen orientation and states </li></ul><ul><ul><li>Landscape </li></ul></ul><ul><ul><li>Po...
<ul><li>Yes, I know the name is ridiculously long, but it is what it says. </li></ul><ul><ul><li>So I don’t want a stupid ...
<ul><ul><ul><ul><li>Using the “data” object, which just exists </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>The data o...
<ul><li>Item renderers are not mobile optimized </li></ul><ul><ul><li>Except MobileIconItemRenderer </li></ul></ul><ul><li...
<ul><li>Use CacheAsBitmap </li></ul><ul><ul><li>This will store the item as a bitmap which will cause the List to not re-r...
<ul><li>Make sure if you attach events, to clear them on the viewDeactivate event of the View </li></ul><ul><li>If you do ...
<ul><li>If you do load data inside of a view make sure that you set the “data” object to that value, and don’t call it rep...
<ul><li>Animation ClassesFade </li></ul><ul><ul><li>Resize </li></ul></ul><ul><ul><li>Rotate3D </li></ul></ul><ul><li>Stat...
<ul><li>Please give me any feedback you have on my presentation as I’m always looking to make my presentations better. </l...
Upcoming SlideShare
Loading in …5
×

Android Development with Flash Builder Burrito

4,257 views

Published on

Pres

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

  • Be the first to like this

No Downloads
Views
Total views
4,257
On SlideShare
0
From Embeds
0
Number of Embeds
492
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Android Development with Flash Builder Burrito

  1. 1. Mobile St Cloud Development with Flashbuilder Burrito, Flex Hero, and ActionScript
  2. 2. <ul><li>Hopefully what I show next, will get you excited about the rest of my presentation </li></ul><ul><li>If it doesn’t, then I’m sorry I failed you  </li></ul>Can I get your attention?
  3. 3. <ul><li>It has a nice IDE based on eclipse </li></ul><ul><ul><li>Robust syntax error messaging </li></ul></ul><ul><ul><li>Code Snippets </li></ul></ul><ul><ul><li>Ability to have various levels of development between design and coding </li></ul></ul><ul><ul><li>Debugging and Memory Profiling </li></ul></ul><ul><ul><li>Many more features which help you create a stunning application </li></ul></ul><ul><li>Supports creating Flex Mobile, Flex Desktop, and Flex Library Projects </li></ul><ul><ul><li>There are more types of projects supported, but they will not be addressed in this presentation </li></ul></ul>Why Flashbuilder Burrito?
  4. 4. <ul><li>Flashbuilder Burrito </li></ul><ul><ul><li>http://labs.adobe.com/technologies/flashbuilder_burrito/ (towards right) </li></ul></ul><ul><li>Adobe Air </li></ul><ul><ul><li>http://get.adobe.com/air/ </li></ul></ul><ul><li>Android Device(optional) </li></ul><ul><ul><li>To test it is always best to have the actual device, as most Windows computers do not, by default, support all the Android APIs such as CameraRoll, Camera, GeoLocation, Accelerometer </li></ul></ul><ul><li>Previous knowledge of programming, XML. </li></ul><ul><ul><li>Prior familiarity with actionscript or javascript will be quite useful. </li></ul></ul>What do you need?
  5. 5. <ul><li>Download the prerequisites previously mentioned </li></ul><ul><li>Creating a new project </li></ul><ul><ul><li>Types of projects </li></ul></ul><ul><ul><li>Project Properties </li></ul></ul><ul><li>Creating a new library project </li></ul><ul><ul><li>Linking the two </li></ul></ul>How do I start?
  6. 6. <ul><li>Settings </li></ul><ul><ul><li>Transparent </li></ul></ul><ul><ul><li>Visible </li></ul></ul><ul><ul><li>AutoOrients </li></ul></ul><ul><ul><li>FullScreen </li></ul></ul><ul><li>Android Permissions </li></ul>[project]-app.xml - Permissions
  7. 7. <ul><li>Defining Android permissions </li></ul><ul><ul><li>Internet(android.permission.INTERNET) – added by default </li></ul></ul><ul><ul><li>File Access Write (android.permission.WRITE_EXTERNAL_STORAGE) </li></ul></ul><ul><ul><li>Geo Location(android.permission.ACCESS_FINE_LOCATION) </li></ul></ul><ul><ul><li>Accelerometer – don’t believe this requires permission </li></ul></ul>[project]-app.xml - Permissions
  8. 8. <ul><li>Now that we’re ready to debug, lets set up a configuration </li></ul><ul><ul><li>Note you can select your device or desktop </li></ul></ul><ul><ul><li>Success with attaching debugger to device…please let me know if you have  </li></ul></ul>Quick Debugging
  9. 9. <ul><li><s:MobileApplication </li></ul><ul><ul><li>Xml Namespaces </li></ul></ul><ul><ul><li>Referencing custom controls via Namespace </li></ul></ul><ul><ul><ul><li>Xmlns:controls=“controls.*”, quite similar to an import statement </li></ul></ul></ul><ul><ul><li>In mobile applications this file defines your first entry point. The attribute [splashScreen] defined an image which you would like to show while the application loads. </li></ul></ul>The ApplicationMXML File
  10. 10. <ul><li>Defining your First View </li></ul><ul><ul><li><s:Navigator firstView=“views.[your first view]” </li></ul></ul><ul><ul><ul><li>The firstView attribute will point towards the first actionable view that you would like to display. </li></ul></ul></ul>The Application MXML File(cont.)
  11. 11. <ul><li>ViewNavigator </li></ul><ul><ul><li>Controls what view is currently shown </li></ul></ul><ul><ul><li>By default back button will move back one view </li></ul></ul><ul><ul><li>If you popToFirstView you go to the first view </li></ul></ul><ul><ul><li>popAll will remove all views except the first view </li></ul></ul><ul><ul><li>pushView([view name], data, transition) </li></ul></ul><ul><li>TabbedViewNavigator – (comes by default TabbedMobileApplication) </li></ul><ul><ul><li>Provides a tabbed view, with multiple ViewNavigators </li></ul></ul>Navigation
  12. 12. <ul><li><s:View viewActivate=“[your start point]” </li></ul><ul><ul><ul><ul><ul><li>currentState=“[state]” – defines states for creating animations, determining the state of your current view etc. </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Xmlnamespaces for defining what controls can be used in this view </li></ul></ul></ul></ul></ul><ul><li><fx:Script – an inline tag which allows you to code directly in the source of your mxml file </li></ul><ul><li>Important </li></ul><ul><ul><li>Use viewActivate as it happens after transition </li></ul></ul><ul><ul><li>Use viewDeactivate to remove event handlers (avoid memory leaks) </li></ul></ul>Your first view
  13. 13. <ul><li>Methods for setting data for your view </li></ul><ul><ul><li>Prior to pushView </li></ul></ul><ul><ul><li>After pushView </li></ul></ul>Your first view (cont.)
  14. 14. <ul><li><fx:Style – defines styles in a way similar to CSS </li></ul><ul><ul><ul><li>.myControl{ paddingRight:15;} </li></ul></ul></ul><ul><ul><ul><li><s:Vgroup styleName=“myControl”/> </li></ul></ul></ul><ul><li>Formats </li></ul><ul><ul><li>*|* - apply to all controls </li></ul></ul><ul><ul><li>s|* - apply to all controls from namespace [s] </li></ul></ul><ul><ul><li>s|Button – apply to button control from namespace [s] </li></ul></ul>Styling
  15. 15. <ul><li><fx:Style source=“[path to my css file]” </li></ul>Styling (cont.)
  16. 16. <ul><li>FlashBuilder Burrito includes a number of themes that you can use in your application by default </li></ul><ul><li>You can also create custom skins which define a totally different view of a control </li></ul><ul><ul><li>If you create a skin it has optional and required parts to create the control </li></ul></ul>Themes
  17. 17. <ul><li>s:VGroup – any control within will stack vertically </li></ul><ul><li>s:HGroup – any control within will stack horizontally </li></ul><ul><li>mx:Spacer – adds space between controls when they do not have paddingRight, paddingLeft, paddingTop, paddingBottom </li></ul>Organization of controls
  18. 18. <ul><li>Adding a databound List – A few ways </li></ul><ul><ul><li><fx:ArrayCollection id=“myData”> </li></ul></ul><ul><ul><ul><li><fx:Array> </li></ul></ul></ul><ul><ul><ul><ul><li><fx:Object [attributes] – any property I need for the object </li></ul></ul></ul></ul><ul><ul><ul><li></fx:Array> </li></ul></ul></ul><ul><ul><li></fx:ArrayCollection> </li></ul></ul><ul><ul><li>myList.dataProvider = myData; </li></ul></ul><ul><ul><li>myList.dataProvider = new ArrayCollection([my array]); </li></ul></ul><ul><ul><li>myList.dataProvider.addItem([some object]); </li></ul></ul>List Controls
  19. 19. <ul><li>Using Layouts based on screen orientation and states </li></ul><ul><ul><li>Landscape </li></ul></ul><ul><ul><li>Portrait </li></ul></ul>List Controls(cont.)
  20. 20. <ul><li>Yes, I know the name is ridiculously long, but it is what it says. </li></ul><ul><ul><li>So I don’t want a stupid list, I want to jazz it up a bit, why not try a MobileIconItemRenderer </li></ul></ul><ul><ul><li>Essentially what the MobileIconItemRenderer does is provides an optimized way to show a list item with an icon, label, and message </li></ul></ul><ul><ul><ul><li>Defining functions to get the various parts of an item </li></ul></ul></ul>Item Renderer and MobileIconItemRenderer
  21. 21. <ul><ul><ul><ul><li>Using the “data” object, which just exists </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>The data object holds the data for the specific item you are rendering. </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>So if I have an object with the properties img, title, and msg, I can use these to set up my functions </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Ex. Private function getLabel():String { return data.title;} </li></ul></ul></ul></ul></ul>Item Renderer and MobileIconItemRenderer (cont.)
  22. 22. <ul><li>Item renderers are not mobile optimized </li></ul><ul><ul><li>Except MobileIconItemRenderer </li></ul></ul><ul><li>Sometimes they are necessary to create the view in the list you would like. </li></ul>Item Renderer
  23. 23. <ul><li>Use CacheAsBitmap </li></ul><ul><ul><li>This will store the item as a bitmap which will cause the List to not re-render the control each time it comes into view </li></ul></ul><ul><li>useVirtualLayout </li></ul><ul><ul><li>Stops images from having to reload </li></ul></ul><ul><ul><li>Very handy when using remote images </li></ul></ul><ul><ul><ul><li>Otherwise will re-request the image each time </li></ul></ul></ul>Optimization
  24. 24. <ul><li>Make sure if you attach events, to clear them on the viewDeactivate event of the View </li></ul><ul><li>If you do custom caching, make sure you manage it carefully </li></ul><ul><li>Images from disk, be careful of size or you will crash your application </li></ul><ul><ul><li>Create thumbnails or use thumbnails instead, mobile phones still have limited processing and memory </li></ul></ul>Optimization (cont.)
  25. 25. <ul><li>If you do load data inside of a view make sure that you set the “data” object to that value, and don’t call it repeatedly unless necessary </li></ul><ul><li>Always use a splashScreen on the application tag, cause it gives you time to load data and then push it to the first view </li></ul>Optimization (cont.)
  26. 26. <ul><li>Animation ClassesFade </li></ul><ul><ul><li>Resize </li></ul></ul><ul><ul><li>Rotate3D </li></ul></ul><ul><li>State Based Animations </li></ul><ul><ul><li><s:states>         <mx:State name=&quot;up&quot;/>         <mx:State name=&quot;down&quot;/>         <mx:State name=&quot;over&quot;/>         <mx:State name=&quot;disabled&quot;/>     </s:states> </li></ul></ul>Animations
  27. 27. <ul><li>Please give me any feedback you have on my presentation as I’m always looking to make my presentations better. </li></ul><ul><li>Thanks for coming to our event, have a safe drive home. </li></ul>Questions?

×