Android Development with Flash Builder Burrito

27
Mobile St Cloud Development with Flashbuilder Burrito, Flex Hero, and ActionScript

description

Pres

Transcript of Android Development with Flash Builder Burrito

Page 1: Android Development with Flash Builder Burrito

Mobile St CloudDevelopment with Flashbuilder Burrito, Flex

Hero, and ActionScript

Page 2: Android Development with Flash Builder Burrito

Hopefully what I show next, will get you excited about the rest of my presentation

If it doesn’t, then I’m sorry I failed you

Can I get your attention?

Page 3: Android Development with Flash Builder Burrito

It has a nice IDE based on eclipse Robust syntax error messaging Code Snippets Ability to have various levels of development between

design and coding Debugging and Memory Profiling Many more features which help you create a stunning

application

Supports creating Flex Mobile, Flex Desktop, and Flex Library Projects There are more types of projects supported, but they will

not be addressed in this presentation

Why Flashbuilder Burrito?

Page 4: Android Development with Flash Builder Burrito

Flashbuilder Burrito http://labs.adobe.com/technologies/flashbuilder_burrito/ (towards

right)

Adobe Air http://get.adobe.com/air/

Android Device(optional) 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

Previous knowledge of programming, XML. Prior familiarity with actionscript or javascript will be quite useful.

What do you need?

Page 5: Android Development with Flash Builder Burrito

Download the prerequisites previously mentioned

Creating a new project Types of projects Project Properties

Creating a new library project Linking the two

How do I start?

Page 6: Android Development with Flash Builder Burrito

Settings Transparent Visible AutoOrients FullScreen

Android Permissions

[project]-app.xml - Permissions

Page 7: Android Development with Flash Builder Burrito

Defining Android permissions Internet(android.permission.INTERNET) – added by

default File Access Write

(android.permission.WRITE_EXTERNAL_STORAGE) Geo

Location(android.permission.ACCESS_FINE_LOCATION) Accelerometer – don’t believe this requires permission

[project]-app.xml - Permissions

Page 8: Android Development with Flash Builder Burrito

Now that we’re ready to debug, lets set up a configuration Note you can select your device or desktop Success with attaching debugger to device…

please let me know if you have

Quick Debugging

Page 9: Android Development with Flash Builder Burrito

<s:MobileApplication Xml Namespaces Referencing custom controls via Namespace

Xmlns:controls=“controls.*”, quite similar to an import statement

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.

The ApplicationMXML File

Page 10: Android Development with Flash Builder Burrito

Defining your First View <s:Navigator firstView=“views.[your first

view]” The firstView attribute will point towards the first

actionable view that you would like to display.

The Application MXML File(cont.)

Page 11: Android Development with Flash Builder Burrito

ViewNavigator Controls what view is currently shown By default back button will move back one view If you popToFirstView you go to the first view popAll will remove all views except the first view pushView([view name], data, transition)

TabbedViewNavigator – (comes by default TabbedMobileApplication)

Provides a tabbed view, with multiple ViewNavigators

Navigation

Page 12: Android Development with Flash Builder Burrito

<s:View viewActivate=“[your start point]” currentState=“[state]” – defines states for creating animations,

determining the state of your current view etc. Xmlnamespaces for defining what controls can be used in this

view

<fx:Script – an inline tag which allows you to code directly in the source of your mxml file

Important Use viewActivate as it happens after transition Use viewDeactivate to remove event handlers

(avoid memory leaks)

Your first view

Page 13: Android Development with Flash Builder Burrito

Methods for setting data for your view Prior to pushView After pushView

Your first view (cont.)

Page 14: Android Development with Flash Builder Burrito

<fx:Style – defines styles in a way similar to CSS .myControl{ paddingRight:15;} <s:Vgroup styleName=“myControl”/>

Formats *|* - apply to all controls s|* - apply to all controls from namespace [s] s|Button – apply to button control from namespace

[s]

Styling

Page 15: Android Development with Flash Builder Burrito

<fx:Style source=“[path to my css file]”

Styling (cont.)

Page 16: Android Development with Flash Builder Burrito

FlashBuilder Burrito includes a number of themes that you can use in your application by default

You can also create custom skins which define a totally different view of a control If you create a skin it has optional and required

parts to create the control

Themes

Page 17: Android Development with Flash Builder Burrito

s:VGroup – any control within will stack vertically

s:HGroup – any control within will stack horizontally

mx:Spacer – adds space between controls when they do not have paddingRight, paddingLeft, paddingTop, paddingBottom

Organization of controls

Page 18: Android Development with Flash Builder Burrito

Adding a databound List – A few ways <fx:ArrayCollection id=“myData”>

<fx:Array> <fx:Object [attributes] – any property I need for the

object </fx:Array>

</fx:ArrayCollection> myList.dataProvider = myData; myList.dataProvider = new ArrayCollection([my

array]); myList.dataProvider.addItem([some object]);

List Controls

Page 19: Android Development with Flash Builder Burrito

Using Layouts based on screen orientation and states Landscape Portrait

List Controls(cont.)

Page 20: Android Development with Flash Builder Burrito

Yes, I know the name is ridiculously long, but it is what it says. So I don’t want a stupid list, I want to jazz it up

a bit, why not try a MobileIconItemRenderer Essentially what the MobileIconItemRenderer

does is provides an optimized way to show a list item with an icon, label, and message Defining functions to get the various parts of an

item

Item Renderer and MobileIconItemRenderer

Page 21: Android Development with Flash Builder Burrito

Using the “data” object, which just exists The data object holds the data for the

specific item you are rendering. So if I have an object with the

properties img, title, and msg, I can use these to set up my functions

Ex. Private function getLabel():String { return data.title;}

Item Renderer and MobileIconItemRenderer

(cont.)

Page 22: Android Development with Flash Builder Burrito

Item renderers are not mobile optimized Except MobileIconItemRenderer

Sometimes they are necessary to create the view in the list you would like.

Item Renderer

Page 23: Android Development with Flash Builder Burrito

Use CacheAsBitmap 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

useVirtualLayout Stops images from having to reload Very handy when using remote images

Otherwise will re-request the image each time

Optimization

Page 24: Android Development with Flash Builder Burrito

Make sure if you attach events, to clear them on the viewDeactivate event of the View

If you do custom caching, make sure you manage it carefully

Images from disk, be careful of size or you will crash your application Create thumbnails or use thumbnails instead,

mobile phones still have limited processing and memory

Optimization (cont.)

Page 25: Android Development with Flash Builder Burrito

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

Always use a splashScreen on the application tag, cause it gives you time to load data and then push it to the first view

Optimization (cont.)

Page 26: Android Development with Flash Builder Burrito

Animation ClassesFade Resize Rotate3D

State Based Animations <s:states>

        <mx:State name="up"/>        <mx:State name="down"/>        <mx:State name="over"/>        <mx:State name="disabled"/>    </s:states>

Animations

Page 27: Android Development with Flash Builder Burrito

Please give me any feedback you have on my presentation as I’m always looking to make my presentations better.

Thanks for coming to our event, have a safe drive home.

Questions?