What a week.  The office sent me to Chicago last week to attend the Adobe Max 2007 convention.  Unlike my last few conventions, I decided to not blog through each session.  Instead, I wrote notes on things I found interesting.  My goal is to write a quick review of the convention and offer up the points that I jotted down for future reference.

My overall impression of MAX was good and bad.  If you have employee’s you need to get excited about Adobe and their products, then by all means send them to MAX.  If you have employee’s that need technical information then send them to the Flex 360 conference instead.  From a technical point of view, the 360 ran circles around MAX because they offered skill level based sessions.  At the 360 I could choose between one of three different skill levels on a topic.  This allowed me to better tune if a session fit my skill level.  At MAX you just never knew what you were going to get.

Interesting Applications
During the first general session meeting, they were demonstrating some applications that had been built with their products.  They had an AIR contest and the winner was Agile Agenda.  It was a project management tool and it looks really awesome.

Creating Custom Components
This session was by far one of the best that I attended at MAX.  There is still so much yet to learn on this topic, but this was the best component session I have attended yet.  When creating a custom component, you need to be aware of the component lifecycle.  While the session did not outline it in detail, they were very clear that “during” the component lifecycle the custom component you are creating will need the following methods defined.

• the constructor
• commitProperties
• createChildren
• measure
• updateDisplayList

These methods, if not defined in your custom component, will use the versions found in your parent.  Making a custom component is all about extending the most appropriate existing object and then changing the methods listed above to get the changes you desire.

Constructor
This is where you setup the initial properties.  This is where you do things that need to be done even if the component is never displayed. NEVER add children components in the constructor.

createChildren
This ‘creates’ children.  It never sizes or positions children.

measure
The measure method is used to tell the Flex Framework what size your component would really like to be.  The end result of this method is the setting of the measuredMinWidth, measuredMinHeight, measuredWidth and measuredHeight.  The LayoutManager will call this function to get the suggested size.

updateDisplayList
This method is called when it is time to display something in your component.  It takes unscaledWidth and unscaledHeight.  These, unlike measure, are not suggestions.  These are the actual width and height that will be used to display your component.  We hope they are what you calculated in measure, but the framework reserves the right to make the final decision, and these two parameters are it.

commitProperties
This method is all about syncing and organizing your components properties.  This method is ran every time a property changes and allows you to centralized some of your component code so you don’t have to duplicate it in other places.

Invalidate Functions
You can ask your component to ‘process’ things again by executing an invalidate function.  These methods tell the flex framework that, “At your first convenience, please run this method again”.

• invalidateDisplayList
• invalidateProperties
• invalidateSize

Design Patterns
This session was pretty good.  I have been interested in formally learning some design patterns as of late so I had high hopes for this session.  The speaker covered two design patterns, Observer Pattern and Singleton Pattern.  I will not go into the discussion in detail, but in short I already use both of these patterns every day.  The Observer Pattern is the basic construct of an EventListener.  If you understand the event model, then you have been using an Observer Design Pattern all along.  The Singleton Design Pattern was also something I used every day.  When developing a Flex application, I use an MVCS model.  One of the basic concepts is that of a controller.  A controller is an object that you create only once in an application and everyone uses it.  This concept is the Singleton Design Pattern.  I did learn one cool trick.  Strictly speaking, the Singleton Design Pattern states that “only ONE instance can be created”.  In ActionScript, there is no way to officially make a class such that someone can not instantiate extra copies.  This violates the design pattern because you should NOT be able to do that.  An ActionScript ‘trick’ that was shown will allow you to take a class and make sure only one instance can be created.

   1:  // This is just an example of a concept, not bug free code.

   2:  package controllers {

   3:   

   4:      public class FooController {

   5:          private static var controller : FooController;

   6:          

   7:          public static function FooController(x:FooSingleton){

   8:              super();    

   9:          }

  10:          

  11:          public static function getInstance() : FooController {

  12:              if ( controller == null )

  13:                  controller = new FooController(new FooSingleton());

  14:                  

  15:              return controller;

  16:         }        

  17:      }

  18:      

  19:      private class FooSingleton {

  20:          

  21:      }

  22:  }

The above is an example of how you would do something like this.  I did not compile this code, it’s just a rough example.  Basically, if the FooController requires a instance of FooSingleton in order to create it, then when you call getInstance you will get the object back.  If you call the new operator on the FooController you will get a compile time error because you need to give it a FooSingleton object.  The FooSingleton object is private and can not be accessed outside of FooController.  Using this trick, you can ensure your singleton object does not get instantiated twice.

The author offered several suggestions for reading more about Design Patterns.  Here is his list of recommendations in order of preference.

• Head First Design Patterns
• ActionScript 3 Design Patterns
• Advanced ActionScript 3 with Design Patterns

Data in Flex 3 (Tom Lane)
I didn’t get to much information out of this session. I have been doing a lot of work in this area at the office and most everything that was said in this session was old news to me.  At the very end, he did mention that FlexBuilder 3 had a WebService Import Service.  I have not looked into this yet, but according to my understanding you point the wizard at a WSDL and out pops your DTO objects and SERVICES so you can use the WebService.  If this is true, WebServices are now actually useful.  If I ever have some free time in the future, I plan on pointing that wizard at the National Weather service WSDL and see what happens.

Next Generation User Experiences
I spent a chunk of my MAX sessions on design sessions this time.  Design sessions are all about listening to others and picking out the nuggets that you might be able to use.  Here are the few nuggets that I pulled out of this design session.

“Don’t think people are stupid when they are just lost”.  So many times I will be having a design session at the office and we start talking about how we can make the application easy to use.  I thought this was an insightful statement.  An interesting idea, trying to make an application so the customer does not get lost.

Law of Declining Quality: “As other applications get better, your application will decline in quality”.  What an interesting thought!  The  application you wrote five years ago is awesome.  Now, with the new Rich Internet upon us those applications, while it did not really become less of a product, will appear to be less of a product.

XD Design Session
I will not mention the name of the person giving this talk out of professional respect.  I do hate to be negative but this session stole an hour and fifteen minutes of my life and I’m actually angry about it.  The impression I got from this conference was that the XD design team in Adobe were asked to give ‘talks’.  They were all give the same 5 points to make, which could have been done in 5 minutes, and then were given an hour+ to talk.  Wow, that was a bad idea.  Almost every XD session I went to was a few nuggets mixed in with a terrible presentation.  This particular session I got to see photos of the speaker and his friends at the office screwing around in a very unprofessional manner.  Needless to say his jokes about his management chain were lost on me too.  Finally after about an hour, I got to the meat of the session. 

• Simplify the problem
• Trust your instincts
• share everything to promote iterative development
• fail fast to succeed soon
• we are all peers before the object

“Create an Experience, not an Interface”

Book recommendation: Blink The power of thinking without thinking

Flex Optimization
Not much new in this session either.  There were basically just two notes I threw down on paper that I should research later.

• Check and make sure that the optimization flag is set when building with ant.
• cacheAsBitmap=true  — This will make your effect better, but will eat more memory.

Adobes Approach to Application Design (Tom Hobbs)
This was an XD session as well but with a much more professional presentation.  Most of this session was about a real world design example that was very successful.  What I did manage to take from this session were some design myths and design cornerstones

Design Myths

• More Features = More Value
• Chrome is what make you cool
• Applications are the sum of their parts
• Animation is gratuitous

Design Cornerstones

• What is the point?
• Content is King.
• Create an Experience, not an Interface
• Choreograph sequence and flow.

Once again, the “Fail Fast” concept was brought up.  Good idea

Designing the Obvious (Robert Hoekman Jr)
This was the best design session I attended at MAX.  The night after this session I went out and bought Robert’s book called “Designing the Obvious“.  I can think of no better recommendation.  I was willing to spend my money to hear more from this guy.

Many times you will hear people say when designing an application, “Could your mother use it?”  This meaning that for some reason you mother is not capable of using a complex application. Robert’s point was “Don’t dismiss your ‘mother’, but bring her up to speed so she can use the application.”

Interface Patterns
Since people in Western societies read left to right and top to bottom, you want to utilize this feel in your application design.  Good dialog boxes will follow this pattern too.  You can animate from the top left to the bottom right to keep with this flow.  Use a single color to make a user follow the most common flow in your page.

Menus should always be verbs, never nouns.  Good menu items are like ‘Design’, ‘Create’, ‘Manage’, ‘Customize’.

Elevate not innovate.  Sometimes, you don’t want to make something new, but rather take a good idea and make it better.

States of an Interaction

• invitation
• manipulation - do the task
• completion - you need to validate they are done.

Wrap Up
There were several other sessions I attended throughout the three days, but nothing really happened in them that had any real value so I won’t mention them.  I will give a shout out for the very last session I attended.  It was a session on animation using Flash.  The speaker worked for Disney and he showed us a few animation tricks as well as gave us a quick breakdown of the evolution of the animation industry.  I have to say that this presentation was VERY impressive.  The speaker was very good at what he did and just watching him work with the Flash tool gave me hints and ideas on how best to use the product.  During the general sessions, the big talk was about how MAX was meant to inspire.  This was one of the few sessions that I can actually say was inspiring.

[1:00 pm] Exploring the Ajax Bridge (David Gassner, david@bardotech.com, http://www.bardotech.com)

This talk will be about how you can communicate between javascript in the browser and the flex application. This technology will be integrated in Flex 3. You can download it and install it into Flex 2.0.1 if you want though.

There are two components to the AJAX Bridge.

FABridge.js and FABridge.as

If you create an instance of the bridge class in your flex application will enable the bridge. In the HTML page, you include the JS library and then you initialize a few items.

We are now seeing a demo where David is producing javascript that directly references the flex application. He is able to create new children and and them to the stage from the HTML wrapper around the flex application.

Programming Steps

• Incorporate the bridge into the flex application
• compile the flex application
• include the JavaScript Library into the html page
• … to fast David!

To setup the bridge using the generated Flex html generated page, make sure the flashvars has “bridgeName=nameOfBridgeInApplication”

You need to know when the flex application is ready to be used in javascript. This is done with the following:

FABridge.addEinitializationCallback(”nameOfBridgeInApplication”, javascriptMethodNameToCall);

you can get a reference to an object in JS to something inside the Flex app. If the object in flex is called ’slider’, in JavaScript you can take the Flex Application reference and turn the name of the inner object into a accessor method.

var flexApp = FABridge.example.root();

trace(flexApp.getSlider().getValue());

var currentCheckValue = flexApp.getCheck().getSelected();

flexApp.getCheck().setSelected( ! currentCheckValue );

Wow, this stuff is cool. You can really leverage the browser .. nice.

You can view the info here: http://www.bardotech.com/resources/360flex/

[2:30pm] Advanced Custom Components (Doug McCune, blog)

Look at the framework! That is the best place to start learning how to make components. C:\…Flex SDK 2frameworkssource

Basically when you create a component, you will override createChildren and then override the updateDisplayList too. If you are extending something, don’t forget to call super on those override classes.

ComboBoxes can have an editable flag to allow you to add things to a combobox. I had no idea…

Input: Components take input via methods and properties.

Output: Components talk to the outside world with an event or via bindable properties (which are really just events)

What is a Style? This like the [Event meta data, these will give you the styles in the introspection.

import ...

[Style(name="fillAlpah", type="Number", format="Length", inherity="no")]

public class …

you can define a method initializeStyles() .. this will set the default styles for your custom component. cuz who ever picks up your components, will NOT use your CSS and it will look all jacked.

If you are extending the FrameWork and you bump into a private item, you can copy it and change it and then override it. THEN file a but report so they will fix it in the future.

Underriding the Code

Disclaimer: Don’t do this….

You can “underride” a core framework class
Just name it the same and your version will be used rather than the frameworks.
Example: http://blogs.digitalprimates.net/codeSlinger/index.cfm/2007/4/3 …. Check out Doug’s blog later.

Tweaner … open source way to move things smoothly.

[4:00am] FlexBuilder Secrets (David Zuckerman, Adobe Systems http://www.davidzuckerman.com/adobe/)

cnt-shift-o This will organize you imports and it will remove the ones you don’t really use. (FB3 Feature)

You can do this via properties->Flex->Editors->ActionScript too. there is a checkbox to “Keep imports organized” which will do the above feature automatically.

Matching Braces. control-shift-p jump to the matching brace.

There are forward and backward buttons like a browser. If you control click a class to dig into it, you can ‘back’ your way back out like a browser.

ctrl-o will give you the outline view in a modal dialog box.

Preferences->General-Workspace … you can change how often the ‘local history’ will cache itself.

New Tricks for FB3

There is a highlighter icon that will show you all references to the identifier you have your cursor on. This is not just a trick on find or search. It is typed.

You can now rename something in all files… ie refactoring an existing element, you can now do that too. works on classes, functions, variables, metadata

ctrl-/ will toggle the comment on or off for the selected block

You can now customize the syntax highlighting in FB3.

[8:30am] KeyNote

This morning we are seeing demos of what some of the community is doing with flex.

MixBook - Create a book by yourself or with a community of people.

Buzzword - Online, shared, sweet word processor.

Flexlib - This is an open community where you can find useful free components.

Saffron Modeler - UML Modeling tool/Development platform.  Public Beta is September 1st.  In private alpha now.

One More Thing…

riacommunity.com - New community site.

SearchCoders was a sponsor.  Their application appears to be a forum/blog aggregator with the ability to attach notes all about flex while simultaneously looking for a new job! - http://www.searchcoders.com/

[10:00 am] Flex Builder Debugger (Mike Morearty, Adobe Systems, blog)

Basics

We are starting out with a brief overview of the debugger built into Flex Builder.

The debugger the developers use is not the same in the player.  The player can not show the runtime errors.  They will be swallowed in production.  Really?  I want to believe this.  Why don’t I?

Tips and Tricks

• If something goes wrong with your debug, click on the yellow “eye” looking icon.  This opens the progress view.  You can then click on the red square to cancel the debug attempt.
• The double arrows “Link with Debug View” will highlight the breakpoint that just stopped the execution.
• Ctrl-Shift-B will set a breakpoint at the cursor location.
• You can set breakpoints in MXML where you have event handler code such as click=”Alert.alert(’bob’)”
• If there is no source on the line where a breakpoint exists, it will “move down” automatically to the next line of code.
• You can turn on more points in the variables view such as constants, static variables … etc.
• A getter function is executed at every step of the debugger.  There is a preference that will turn that off in debugging mode.
• If you are using the e4x type in your XML objects, the debugger will show you the XML broken out in a tree view.  (nice)

Advanced

• A “Launch Configuration” allows customized Settings:
  • URL to launch
  • Directories to search for source files, etc.
• Ways to modify a launch configuration:
  • ctrl-click on an item in the Debug or Run toolbar dropdown
  • plugin Flex Builder: Debug As…, Run As…
  • Standalone Flex Builder: Other…
• ActionScript “Scope Chain”
  • Never call ‘this’ inside a nested function.  You will never know for sure what it will be.
  • The scope chain is a list of variables that the player looks at in order to find them.
  • If you are in a nested function … in the debugger .. you will be able to see the scope chain.  Since the nested function is part of the global and not really a parent it becomes visible.
• Error.message
  • While it has an interesting message for the debug player, the release player will not have the same string.
• Error.getStackTrace()
  • Will return null in the release player!
• flash.utilities.describeType()
  • You get this guy an object and you get back XML which will describe the object in detail.
    • var desc:XML = describeType(child);
    • desc..accessor.@name.toXMLString() // for example.  (check this out later!)
• Debug Data Binding Problems (Undocumented Trick)
  • import mx.binding.BindingManager;
  • …
  • BindingManager.debugBinding(destinationString);

// This will cause a trace in the console when the binding changes for any reason.  WOW! WOW! WOW!

<mx:Laabel id=”myLabel” text=”{name.text}” />

…

BindingManager.debugBinding(”myLabel.text”);

Sneak Peak: Flex Builder 3

• Moving your mouse over an expression will show you it’s current value while debugging in the editor.
• When you view an object, you will not see all members of the object now.  You will see about 10 rather than 100.  You can see the others under the super class.
• There are no debugging swf files!  Yea!
• You will be able to add an item to the expression list by right clicking on it in FB3.

[1:00pm] ByteArray202
Ben Stucki, Atellis, blog

Ben is starting out with a really good overview of what a ByteArray is and why it is important to know how to use them. A ByteArray for the ID3 specification is three bytes for the characters ID3, followed by 1 byte for the major version, followed by 1 byte of minor version, followed by 1 byte for Flags and then an unsigned int (4 bytes) with the size of the byte array that is the rest of the ID3 information. Different specifications, ID3, DOC, PDF, etc define what the header of the ByteArray will look like. Thus you need to know what you are dealing with in order to turn the ByteArray back into something useful.

Now we are seeing an AIR example where he is reading in a file from the OS into a ByteArray. He reads in the ByteArray and then pulls out the header elements for the ID3 file. Then you can loop the ByteArray while the array’s position is less than the size pulled out of the header. While walking the array, the inner items are ‘frames’. Each frame has an id, size and flags as well as data. So in ID3, TALB is the tag for the name of the file. So if the first char of the id is T, then it’s text so you can do something with it. If you find the APIC you have found the album image. You can then extract that data and push it into an image to see the data.

There should be an article on adobe labs for AIR showing this example.

Why Binary Methods?

• It’s really fast!
• Don’t instantiate objects while processing a binary feed or you will slow down.
• Events will slow you down too. Use call back functions instead.
• Design your code for asynchronous use.

Resources

Thibault Imbert - http://www.bytearray.org/
Benz - http://www.richapps.de
Claus Wahlers - http://wahlers.com.br/clause/blog/

[2:30pm] ZoomFlex (Grant Straker, grant@straker.co.nz)

This is one of the vendor for the conference. He will be talking about their application and some of the obstacles they had to overcome with their application. They are based out of New Zealand, London and San Francisco.

The product is a server side framework, MVC Framework, set of libraries, and Code generator for Flex.

We are watching now as Grant creates a flex application using ZoomFlex. He is creating classes using a wizard type interface and pulling them together. They have an integrated compiler to generate the application via this web based application. It ties into cold fusion and creates objects created on the server.

It appears that the ZoomFlex tool allows you to generate the basic structures/files needed to create a Flex application. You an then import the files generated into Flex Builder to start your work.

[4:00pm] Introduction to Cairngorm
(Greg Hamer, greg@halcyclonsolutions.net)

Presentation is online here: http://www.halcyonsolutions.net/presos/360flex/

Cairngorm is a “microarchitecture” There is a series of 6 articles by Steven Webster. http://www.macromedia.com/devnet/flex/articles/caringorm_pt1.html

Download the Caringorm from labs.adobe.com where you can get the SWC and add it to your library.

When should you use Caringorm.

• Caringorm will add overhead.
  • small applications will not see the benefit
  • short lived applications are not useful in Caringorm such as prototype.
  • Solo developers … not so good … except for solo dreamers what hope so day to be a large team.
  • Steven Webster has an article on “Why I think you shouldn’t use Cairngorm.” (he is a founder … interesting)

Why is it called Cairngorm.

• The creators are from Scotland, where the Cairngorm mountains are….

Cairngorm is not open source, nor an open project. The original company was bought by Macromedia which was eaten by Adobe.

Flex does not have the word Cairngorm in their docs. It’s closely associated to Flex, but it’s not “officially” part of flex. But it can be found on labs.adobe.com under “Other Technologies”.

Community Website - http://cairngormdocs.org/
Code Generators - ‘cairngen’ by Eric Feminella

Now we are seeing a demo of how to generate a simple application that we will then convert to the Caringorm model. You can download the code from the Presentation link above.

1 hour and 10 minutes in … Wow, this thing is complicated.

Greg was a great speaker. If you have the chance to listen to him speak in the future, you won’t be disappointed.

[6:30pm] Harass the Flex PM (Matt Chotin and the Flex Team)

Wow, what a wonderful little session. An informal group gathered in the restaurant tonight once all the food was gone for a question and answer session. Matt, the Flex 3 project manager, and 4 other Flex Developers fielded any questions thrown at them about a numerous field of topics. Just to make it more fun, they turned it into a drinking game. Since adobe was sponsoring the open bar the rules went like this. Ask what ever you want, but if they had to answer the question with one of their stock “I’m sorry I can’t help you answers” .. everyone got to take a drink. Despite the joking nature of the drinking game, this was an amazing session. It was developer to developer, tell me what you need and want. Very nice.

As a developer, I have to tell you the image Adobe is pulling off with their company is very impressive. Time and time again today, while listening to the Adobe engineers talk about how they do builds, how they manage bug fixes, how they shift key people from project to project as skill and demand is needed, how the company supports them and their efforts to build a community as well as pushing towards open source .. just WOW is all I can say. This company appears to really be making the right moves. They are destined for success. They have some amazingly smart people working for them and they are not afraid to show you what they got and where they are going. This is a company to watch! They got it right.

Well the morning session is over and what a trip!  The meetings I attended were just amazing and worth the trip itself.  There was so much useful information that I just could not get it all down during these sessions.  Once again, the comments below are basically just my notes to help me jog my memory later.  I could probably write a whole article on each of the meetings I attended as well as research them for a whole day adding references.  Very good stuff!

[8:30am] Memory Management for Flex and AIR Developers
Jun Heider, Real Eyes Media, jun@realeyesmedia.com
Denver CO http://www.realeyesmedia.com

Memory Intensive Situations

• Large Datasets
• Extended runtime
• Large Forms
• Ram constrained platforms

Jun is demonstrating two AIR applications.  One uses a memory management technique while loading a directory of images while the other does not.  The dangerous version used a Repeater object.  A Repeater will instantiate all objects at once.  Unlike a TileList object which will render only the objects that are currently being displayed on the screen.

How does flash handle memory?

• When memory is needed from the system the Flash Player (FP) will request a large chunk of memory from the OS rather than requesting small chunks more frequently.  Good for performance, but bad for memory management.
  • Good for performance
  • Greedy Allocation
  • Over time, the FP will not release all of it’s allocated memory
• Garbage Collection (GC) is done by the following algorithms
  • Deferred reference counting - Looks at the object.  If there are no pointers to it, it’s gone. 
  • mark and sweep - Starts at the root and goes down the DisplayList.  Anything it finds not used will be marked.
    • Visual example of the different GC algorithms can be found here.
  • The GC is executed only when memory is low.  Releasing the memory by nulling out does not free it unless GC is ran and even then it may not free it on the first pass.  Don’t forget that GC does not run unless memory is low… get it.  If you use memory you are going to be keeping it for a while.
  • GC does not happen all the time.  It runs only when more memory is needed.
  • GC is iterative.  It may not free up everything in one pass, it might do it in several passes.
  • There is no supported way to force GC.

Best Practices

Once a large chunk of memory is allocated, there is a good chance that memory will never be released back to the system.  So don’t use memory if you don’t need to. 
Data Sets. If you have an idea how big a data set will be, page the data if you can.  There is a paging feature with the DataService object.

The more assets you load, the more memory you use.

Use deferred instantiation and manual creation methods.

creationPolicy=”all” is bad for memory usage.

don’t remove a child and add it back if you want to hide an object.  Keep it around and reuse it.

Remove references as soon as they are not needed.

EventListeners and Dictionaries have a way to create a weak references

• myChild.addEventListener(MouseEvent.CLICK, onClick, false, 0, true);
• If you don’t make them weak with ‘true’ then you must remove them.  They will be cleaned up if they are weak and no longer being used.

Remove/disconnect your services when they are done!

A listener is associated to the object it is pointing at and not the object that defines it.  If a module has a listener pointed outside itself … and you kill the module, the listener still exists because it’s associated to the outer object.  However if it was a weak reference, GC would catch it and recover the memory.

In AIR, a NativeWindow must be ‘closed’ before GC will grab it.

Examples

Deferred Instantiation.  ViewStack with a custom components with creationPoicy is all.  That is bad.  Using about 15 megs in his example.  Now we are going to move the creationPolicy to auto.  Now you use… 13 megs.  Then you look at all the form elements, you climb to 15 again as needed.  Don’t use memory until you have to.

Why use STRONG references if a WEAK reference is so much better?  If you are loading stuff outside the DisplayList with the intention of adding it later, GC could run and smoke your stuff before you get to use it. (GC walks the DisplayList to find things not being used) Worse yet, it could smoke the function you want to call.  In that case a WEAK reference could give you mysterious results such as working and then not working sometimes.  A STRONG eventListener can prevent modules/components from being cleaned by GC.

Tips and Tools

RedBug - Memory Managment tool in Beta.  Free Download

Don’t change your whole application before you check memory again!  You will never know what you did to help or hurt the system.

Memory can be consumed by mouse movements, modal popups, service polling, scrolling in components.

FB3 has the profiler.

System.totalMemory()  –  Shows how much memory the flash player is using.  Includes your swf and the player!

Jun says that when it comes to memory management, Grant Skinner is the bomb.

Grant Skinner has posted some utility classes.  The Janitor Class will allow you to point it an an object.  You then make references through the Janitor.  A dictionary is used to keep track of all listeners etc.  Then you can destruct the Janitor and it clean everything up.

[10:00am] Flex Framework
Deepa Subramaniam, dsubrama@adobe.com, Adobe Systems

This presentation will be on the FlexTeam Blog or possibly the 360 blog later this week.

The DisplayList is a tree of all visible or potentially visible objects.  The root of the tree is the application.  Using addChild, removeChild you are effecting the DisplayList.  Accessing these elements is done by the SystemManager. 

System Manager / Focus Manager

• SystemManger
  • Lives at the root of the Flex SWF.
  • A Flex application is a two frame movie.  Frame 1 is the SystemManger and other utilities.  Your code is in frame 2.  The systemManger will listen for the creationComplete from your application.  It is then when the application get’s attached to the DisplayList. 
  • SystemManager is responsible for managing the top level windows.  Cursors, popups and tooltips.
• FocusManager
  • What happens when a component is clicked on or tabbed into?  These are the things the FocusManager is responsible for.  There can be more than on FocusManager if there is more than one Tab Loop in a component.  FocusManager manages component level Focus and not player level Focus.
  • There are new interfaces for keyboard focus support such as IFocusManagerComponent, IFocusManagerContainer, IFocusManagerGroup which have the property focusEnabled.

Accessibility

How will your application work using screen magnifiers?  What about screen readers?  The player is already compatible and it has gotten much better in Flash Player 9.

As a developer, you should add keyboard navigation to support accessibility.  You will need to opt in an option to turn on the accessibility options for screen reader support.  They are not on by default.

Localizing Flex

• ApplicationsResource Bundles - localized properties files
• Place properties files in a directory searchable by the MXML compiler
  • Compile the application with the -locale parameter to specify the location of the resource bundle
  • Basically we have a different SWF for each locale — multiple locals mean multiple application swfs
• Values are accessed via the @Resource directive in MXML or the [ResourceBundle] metadata in actionScript.
  • Need the bundle name and the key.

With Flex3, you can localize more than just strings.  You can localize fonts, images etc.

The properties file MUST be in UTF-8.

Right to left support … future Flash Player.  The next player will have more text support.  Once they get that, they can start working on the stuff needed to support right to left languages.  Thus, this sounds at least two generations out from the way it was described.

ActionScript Snipit

import mx.resources.ResourceBundle;
[Bindable] [ResourceBundle("RegistrationForm")] private var rb:ResourceBundle;
…
Alert.show(rb.getString(’thanks’));

MXML Snipit

<FormItem label=”@Resource(key=’personname’, bundle=’RegistrationForm’)”>
</FormItem>

 With FB3, you can now change the locale on the fly.  There is a new ResourceManager which manages requests for different bundles.  The formatters for money and time, are bound to the resourceManager getString method.  Thus when the locale changes, the formatters will fire too moving the values to the format.

Functional Testing

There is built in integration with Mercury QuickTestPro.  You can record you session and then set checkpoints to verify when you re-run the previously recorded session.  It is very important as a developer to use meaningful id’s for your components.  Don’t use p1, but use submitPanel for example.  These id names will be monitored by the Mercury test tool.  If there is no id, the label will be used instead.  Not a good idea because Mercury will think that there is a new object when running a previously saved session if you need to change the name of the button.  You can hide unused containers from Mercury by setting the showInAutomationHierarchy property to false.  There is a compile time parameter that will make your swf into a Mercury enabled program.

Deep Linking

Deep linking provides the back button support and bookmarking capabilities inside a flex application and this is new to Flex 3 … I believe.  This is done with the BrowserManager.  This keeps track of anchors(#) and Fragments (everything after the #).  You can then watch the BrowserManger to see when things change as the user uses the system. 

You can use URLKit to see how to create and interpret fragments. http://joeberkovitz.com/blog/urlkit/

The HistoryManger still exists for backwards compatibility, but the BrowserManger is meant to replace it. 

Very interesting, but this was just briefly covered.  Need to dig into this more later.

Performance

• Watch out what you do at startup (ie. creationComplete or initialize events)
  • setStyle() is one of the most expensive calls in the framework.
    • if you HAVE to do it, do it on initialize and not on creationComplete
    • Best to put it in the mxml if possible
• Deferred Instantiation
  • reduces unnecessary measurement and layout
    • Don’t put a VBox in a Panel.  It’s already vertically aligned.  Adding extra items like this is costly when they are created.
  • set creationPolicy: auto, all none, queued
    • auto - this is deferred instantiation built in.
    • all - no one likes this.
    • none - don’t ever create the children.  You will do it with createComponents.  You can track mouse movements.. when not moving then create the components.
    • queued - gives you control to create child 1, then 3, then 2 … etc.
  • Don’t muck with creationPolicy if you don’t have to.
• Avoid unnecessary nesting containers
  • if necessary, use the canvas container for absolute positioning which reduces layout and measurement.

Panel can be set to an absolute layout?!?  I didn’t know that.  Absolute layout is better for performance.

Increase the time of your Effects and your effects will play smoother.  There are limits to how fast the flash player can draw itself.  Hiding children in a complex object in an effect and then bringing them back can be a big boon on performance.

Avoid bitmap backgrounds.

Effect.suspendBackgroudnProcessing=true … stop doing other stuff while I play my animation.

Random Thoughts

Cairngorm.  Microarchitectrue for building RIAs.  Encapsulates design patterns that advocates classic MVC architectures.  Read about it on labs.

Framework Engineers:

• Ely Greenfield: http://quietlyscheming.com/blog/
• Alex Harui: http://blogs.adobe.com/aharui/  (Must Read Blog)
• Gordon Smith: http://blogs.adobe.com/gosmith/ (Localization Specialist)

Get involved with these groups.

• Flexcoders
• FlexComponents

MXMA - News Adobe Aggregator

Ok, due to the fact that LiveWriter is kind of buggy when you get large documents going, I’m going to split out my conference notes into different posts. 

[1:00pm] Building Stunning Flex Applications with Flex Builder and Creative Suite 3 (George Comninos, Adobe, george@adobe.com)

George is working on FlexBuilder 3 (FB3).  What you see may or may not get into the final product.  This build is less than one week old.  We are going to be talking about skinning in FB3.  Today will be about Graphical Skins and not CSS, programmatic or 3rd party skins.  Some 3rd Party skins can be found here though…  http://www.Scalenine.com

Graphical Skins from FireWorks in CS3.  Huh … that was easy.  There is a master template in FireWorks.  You can literally change each graphical component and then just export it as a skin.  You can then just import the skin you created in FB3.

Now we are in FB3.  There is a design view for CSS files now.  You can start drawing your CSS for a ‘Button’.  It will show you all the states for the button by default.  You can then start changing the buttons right in FB3.  A GlobalStyle will effect the overall button look for the application.  If you change the font, it will automatically embed the font you used into the application.

Now he is showing us a project where he screen captured the OS look from a different application.  He used the same technique as before to make his application look like his OS interface.  In design mode, he is changing the scale grid to make sure the ‘application’ does not move over his skin.

Now we are moving to Illustrator as a tool to skin with.  You can create a vector item that can be export as a flash app.  Same trick as with FireWorks.  You use the supplied template, which is not yet released…. to use vector art rather than pixel art with FireWorks.  Same export/import in FB3.

Flash has a Flex Component kit.  You can start using this today by going to labs and download this kit.  You can literally take something in flex and convert it to flex component.  It outputs a SWC.  You can use Flash to give your skins animations or transitions between their states.

Search “Flex Skins Template Devnet” for templates you can use to create your own skins in Flex.  Here is the article.

In FireWorks, you can use the common Library to find Flex Components.  You can then start using those to ‘design’ your application.  When ready you can export to an mxml file.  So this is like the design editor in FB3 for components, but now from an application view.

[2:30 pm] Advanced Charting - (Brendan Meutzner, CNET Networks, blog, brendan.meutzner@cnet.com)

Download the application being demonstrated at http://www.meutzner.com/360

This flex application will mimic the google finance application.  Wow this guy is just doing a code review basically.  Not much to comment on at this point.  You will need to dig through this code I guess to see how he is doing this application.

Step 1.  We are going to create three charts in the component.  You control the look with CSS.

Step 2.  Notice the Y Axis is rendered on the inside of the chart.  This is done with an InnerAxisRender as seen in step 2.  This looks like a good example of how to override an existing component.  The chart object has three layers.  The background layer is behind the chart.  There is an annotation layer in front of the chart data too.  You can leverage these layers to draw special items to your custom chart.  He has a neat trick where the size of the slider will change.  Since you can’t apply a transition effect to a slider, he has hidden vrules that ‘can’ have a transition effect applied.  The size of the sliders are then bound to the hidden vrules.  Thus, the slider then get’s the transition of the vrule.  Cute trick.  He has shown us a tool called Custom Easing Function Explorer.  You can use this to explore easing effects or to create your own.

The lower chart that shows the full data set, is a HDividedBox.  Each canvas has a different filtered chart data, the outer versions just have a different alpha.  All these sections are bound to the slider basically.  So as you move the chart everything just responds. 

The HSlider is a DualSlider Component that is available at adobe.com at the Flex Exchange website.

Step 3/4.  Now we are seeing how he can make the position of the mouse reflect on the cart by rendering a dot that moves as the mouse moves on the chart.  Data values change, a DataPoint on the top chart is moving as well as the bar chart is showing the mouse position.  On mouse move he converts the mouse position to a data position. (invertTransform will move mouse to data)  (transformCache() takes a DataPoint and moves it to a mouse position)  dataTransform.invertTransform()  this will map the mouse position to the data position.

Step 5. Annotations.  You can basically add a note that shows up in the upper most layer over the chart.

Open Session After the Demonstration

Quietly Scheming - Advanced Charting Examples  Ely Greenfield has a lot of charting examples.

How can you get your chart into PowerPoint?  Kind of hard.  You can create a bitmap of the stage, send it to a server, and return the URL to the user.  You could use the screen capture stuff in AIR as well to do something like this.

Well, this was a very ‘advanced’ demonstration.  I can walk away from this with a real understanding of what a ‘chart’ can do in an RIA.  There are lots of ways we can really use something like this.  Metrics is the first thing that jumps to my mind.  This example would allow you to really look and work years worth of data.  I like the annotation idea too.  You can then mark ’software loads’ and ‘outages’ on a chart after the fact.  I had never seen the google finance application before, but it feels like they have done some stellar work on what ‘charting’ can really do.

[4:00pm] Programmatic Visualizations (Andrew Trice, Cynergy Systems, blog)

This presenter is all about showing data visually.  There are certain benefits by having a graphical view of data.  The demonstrations he used and the examples he showed us basically are using the drawing API to draw lines between graphical points.  This is more about why you would want to use the DrawingAPI to represent data and not really about techniques (other than drawing a line) and uses for the DrawingAPI.

Examples That Were Demonstrated

Network Visualization Program.  The visual spider web of data is a real representation of the status of all computers on a network.

InfoPath Viewer.  A click stream analysis program.  As you look at a data item, their children are drawn on the screen and the drawing API is connecting the elements.

Mapping Component.  They are using the drawingAPI to draw on top of a map to show the position of moving car.

The updateDisplayList is the function you override to add functionality when a component draws.  If you call the invalidateDisplayList function the object in question will redraw itself.

You can use the displayAPI to change the color of an object to represent it’s state.

His applications have a mini maps of the larger graphical data sets.  He pulls this off by taking a bitmap of an existing component and then scaling it down.

ActionScript Cookbook - This book was plugged by Andrew.  He used a class called Pen which is in this book to do some of his drawing in an arc.

Now we are seeing an example of how you can write your own charting.  I’m personally not sold that this is something you should spend your time doing having just come from the charting class.

Think Outside the Grid … example.  He is showing an example of using the drawingAPI where he is rendering graphical items in a DataGrid.  Now that is the first thing that has caught my attention as a real reason to us the drawingAPI … in my line of work anyway.

Memory Management Tips.  There was a question about memory management.  Andrew’s tips were: Keep the constructor as small as possible.  Always clean up your event listeners.

Welcome to Seattle Washington! I made it to my hotel late last night and I’m now setup at the keynote for the first day of the 360 conference. My plan today is to keep my notes on the lectures I attend here on my blog. Expect my notes to be kind of rough because I’m writing them as I go and things are going to move fast.

Opening Comments [8:30 am]

Flex User Groups? Sounds like there are flex communities here in Seattle. I wonder if there is something like that where I live. The Flex User Group here in Seattle is putting together a Charity Application. For more information check out http://www.flexcodejam.org Room 2011 is where you can go and work on the Charity Application while we are here. They are writing an application for Northwest Harvest. The group manager is named Ali. This is a very interesting idea. I don’t know if I would have time to donate to this application right now, but the idea is very intriguing. I have this nagging interest in giving back the the community. It has never crossed my mind that my actual skill set would be what I give back in a way more directly useful than just the standard computer open community. Maybe I will swing by the room this evening and speak with Ali about his efforts to see if this is a concept I might be able to bring back to my community.

Go 360 Flex! Ted Patrick - Flex Evangelist - ted@adobe.com

Here are some sample applications that are getting shown as flex big hitters.

• http://www.sliderocket.com/ - share a slide and others can just use it.
• http://www.picnik.com - Good back button work.
• http://developer.ribbitphone.com - route and manage telephone calls.
• http://openkapow.com/ - like yahoo pipes but in flex.
• linkedin? What is it? Similar to openkapow but does not have the API yet.

History of Flex - Flex started in 2000 with codename Lego. The goal was to take a developer and make an environment that will allow them to create a swf (flash application) file. 2001 they started working with XML which resulted in MXML. Codename Iliad. 2004, Flex 1.0 was released as “Royale” as J2EE Server. 2004 project Monk was the predecessor for the Flex Builder. Later that year flex 1.5 released, but flash needed an overhaul to manage the new product. 2005, Flex 2.0 was released at the MAX as a alpha. 2006 Flex 2.0 was released. 2007 Flex 2.0.1 was released with the Flex 3.0 beta. 2008 … Flex 3.0 will be released.

Future of Flex. Did the component model will. The future will be graphics! (yea!) Application Performance will be a major step forward with 3.0. Flex will/is open source. The developers will communicate with the world. You can submit a bug and watch it’s progress. Text will be improved. Skinning and Styling with Graphics will be improved.

Flex News. New Flex 3 Beta in October. http://bugs.adobe.com/flex Submit bugs you find! Flex 3 will ship as Open Source. Flex 3.0 will be shipping early in 2008. AIR 1.0 will be shipping in 2008 … with Flex 3.0.

Design Eye for the Dev Guy - Aaron Adams [10:00 am] http://www.cynergysystems.com/

Hey! This guy is from one of the companies that were trolling for new Flex developers via email prior to the conference. Works for CynergySystems. This is a talk about designing the application for developers. (PPGs Pretty Picture Guys) There are elements of design everyone can learn to help you. Color Theory and 2D Theory are two topics that you can learn about that will really help you with your designs. Start with paper. Sketch your flows. Don’t worry about color at the beginning. Showing a prototype in black and white in order to demonstrate that what you are showing is just that .. a prototype. It also prevents the viewers from getting distracted by things they should not be paying attention to.

Study Color Theory. Showing how the same color of red looks different depending on the background color. You can also have a color that appears different depending on the background as well.

Focal Points. Keep the focus on important tasks. You can use color to bring the user to the most important item.

Prioritizing Actions. When you are designing an application, be aware of what the user needs to accomplish. Make your design fit the users goal. If your base reads left to right, top to bottom, then design the application to flow in that way. Get your designs in front of people. Get their feedback.

Think Layers, Build Layers. For design, what tools? FireWorks or Photoshop. For design, this guy left Photoshop for FireWorks and loves it. You can build layers easily in FireWorks. Adding shadow and depth to give your UI richness. The user does not care how cool your code is. Take a day, just look at a single design element such as your buttons. Tweak them. Play with them. See how you can improve them.

Design Suggestions:

• Eliminate excessive lines
• Allow your elements room to breath.
  • i.e. whitespace!
• Design for a consistent implementation.
  • This is branding. Make all the ‘close’ buttons work the same everywhere.
• Understand context.
  • What is different for a dialog box vs the actual application.
• Broad sweeping strokes of realism vs. physical reality.
  • If you have a cube effect, don’t worry if it has 3 sides and not four. You don’t have to create reality … it’s the web. What ever the reality you create, make it consistent. All drop shadows are at the same angle in the application.

If you are going with white text on black, bring the white to about 90% to white to make it easier on the eyes. Just because the moving cube is cool, the user needs to use it. If they don’t like to wait for the cube to rotate, then you shouldn’t be using it. Designs sells! You can have a great application, but if it’s not attractive and easy to use, it will not be successful. That is why it is so important to have some design skills. So there is a balance between usability and cool that you have to walk.

People are happy or comfortable with what they know and use today. Leverage that. Stand on what they use today and bring them along to the new design. Don’t break the mold just to break the mold.

Transitions and Effects. It’s all about balance. What is the purpose? Is it making your customers more productive? These can be used to drive the user’s attention. Now you are using effects for a reason. Does your login box shrink to the logout button so the user knows where to look for it? That is useful. Transitions can be used to move to a new section or module, but don’t use them for flipping through your tabbed data.

Different LCD monitors can be good or bad. Make sure you have enough contrast so that if your users does not have a high end LCD, they will still be able to use your application.

Use motion to get the users attention in a different area if their attention is needed.

UI customization. Neat idea, but no one really uses it. (Hello! is anyone listening. It’s not just me jumping up and down saying this … there are others) Just design a good interface that fits most users.

CynergySystems is a design shop so they believe in the “Look first approach”. They focus on the UI first. As they design their elements, the talk with developers to see if what they have designed is even possible with the budget. They sell the idea of their design to customers. They will not allow the design to be applied after the application is developed.

Runtime skinning. Apply colors and themes in the application that the user chooses. Sometimes they use this ‘feature’ in their development. In my opinion this is a lighter weight version of the UI customization. This is just candy. Never start with it. You still have to sell your application to someone and people like candy. This is probably why this ‘feature’ exists at all. Once upon a time, this was hard so someone did it to ’sell’ how cool their application was.

Pixel Perfect

• Build in layers, back to front.
• Tackle one element at a time.
• get dirty. don’t overly-depend on tools
• borderSkin is your friend.
• Embed fonts in Flash swf for control.
• Find/use good class extensions.
• Know your blendMode attributes
• Don’t give up until it looks right.

More Suggestions

• Good design is good iteration.
  • Don’t settle on the first iteration. Try a few things
• Keep project owners / marketing happy.
• Allow others to review design before implementing.
• Design comps in other tools than Flex.
• Leverage Flex skins templates.
  • There are some good templates out there. Need to find those online. Wire-frame/grayscale
• Turn off your computer. Pick up a pencil.
• Fireworks is a great every-person application.
  • Big fan.
• Stand on the shoulders of giants (without copying).
  • Understand what you like about the designs you enjoy. Use the concepts, not their look.

The developer that has the ability to do design as well is very valuable from several different angles.

SynergyTV.com will show you some examples.

Lunch

Wow, it sure is nice to meet people that are doing the same kind of work that I am. I have had several conversations with folks so far that I think will be very useful. Over lunch, while talking about the previous Design lecture, I had another book recommendation. Design of Everyday Things as a way to introduce yourself into the mind set of being a designer. I also had a very interesting lunch conversation with David Coletta. He will be giving a talk tomorrow afternoon about his product Buzzword. I first learned of Buzzword at the Devner AIR Bus tour. It was very exciting to talk with someone else that is releasing such a high quality web application. Thanks David!

Today I am attending the Adobe AIR bus tour in Denver Colorado.  This free conference is to promote the Adobe AIR product.  My plan here is to keep a timeline of notes here as the conference progresses.  Expect things below to be choppy because I’m typing as I hear interesting things.  I will be posting this live from time to time today and my plan is to come back later and clean this all up.  Good Luck!

The Adobe Integrated Runtime (AIR)  is a cross-operating system runtime that allows developers to leverage their existing web development skills in HTML/Javascript, Flash or Flex do develop applications for the desktop. 

[9:50am] We are here

Well, after Thornbery almost got us crushed by a train on the way here we finally arrived.  The conference is about to begin and I have been digging through my swag.  So far it looks like I got a T-Shirt, an O’Reily pocket guide on AIR for JavaScript Developers and a CD full of adobe software and examples.  fun fun!  So far I have been installing all the AIR applications that came on the CD.

 [10:00am] Introduction

Here we go. Introduction to Adobe and AIR. 8 million flash player downloads of the flash player each day.  Flash is on 90% of the PCs out there.  AIR combines flash and html into one platform so you can apply flash effects to your html objects.  AIR has a built-in database which allows you to port web applications directly into the AIR application.  AIR is about extending what your web applications can offer.

pownce … example.  site to allow you to communicate with your friends and conversations/files are shared online and accessible later.  The AIR app allows you to do this from the desktop and see online.

finetune .. example.  Social networking radio website based on flash.  Rather than listening to music over the browser, they wrote a desktop app for their website so you can listen without the browser that you close all the time.  Very little code changes to implement.  You can search on the website, then you get the option to play on desktop or the web … if you have the desktop app open.  The desktop is an extension of the website.

buzzword… word processor with flex and AIR. Nice menus!  Check out later!  you can write offline or online.  This very impressive looking application is still in development and is not accessible to the public.  The link for buzzword goes to their information site.

[10:24am] Technical Deep Dive

Before they get started, they want everyone to know about their AIR development contest.  For information go here.  What is a Herman Miller Aeron chair?  They keep going on about how cool this chair is as a prize for this contest.

You can build AIR applications using flex/flash or html/javascript.  The runtime is an engine that can integrate flash and html in the same application.  HTML get’s rendered into flash using just HTML.  Sessions later today to demonstrate this.  WebKit is the Open Source Engine used to support HTML in AIR.  Adobe does not own WebKit, but they picked it so they could feed the open source community with their efforts.

Now we are going to see how to take a flex application to AIR.  Cool, they are using FlexBuilder 3.  Time to get that.  Flex Builder 3 will allow you to change between the different runtimes… so you can build older stuff for work and newer stuff for home.  Sweet.

Now they are reviewing the application.xml file that defines an AIR application.  The rootContent tag in the AIR xml file is where you set the attributes to turn your web application into an AIR application. The systemCrome attribute sets how the application to look.  ’standard’ will make it look like a OS window.  If you set it to ‘none’ then you won’t have any container.  Couple that with a transparent background and you have a see through applications for a custom look.  The visible property states if the app should show or not when it boots.  You can use this to hide the app why it opens, then once it’s ready set it to true and you can see it again.

How do you distribute the AIR application?  They go out as .air files.  There is a web based “ExpressInstall”.  You can have a badge on your website that will allow you install your app and will get the runtime installed if needed.  I need to research that more.  That is the first I have heard of that.  example. howto.

Icons.  You can set the icons in the application xml file.  There are four entries for different sizes … can ignore all but the largest and AIR will scale it down if needed.

You can change the .air to a .zip and see inside it … until next release when the .air files will be signed.

Resources:

• Apollo for Adobe Flex Developers (based on alpha and is in pdf on swag disk)
• Getting Started Guide Targeted at HTML and JavaScript Developers (physical copy in swag bag)  This book contains a very good AIR overview.  Can be downloaded for free in pdf.
• http://www.adobe.com/go/air
• http://www.mikechambers.com/blog/  Speaker Web Log
• http://onair.adobe.com

 Numerous times now I have heard them say “Just go to google code and grab it”.  Does google offer a shared code repository.  What do these guys NOT do?  I will need to look into that.

[11:02am] HelloWorld AIR application using JavaScript and HTML

You do NOT need flash or flex to build an AIR application.  AIR is built into the Flex SDK.  There is a stand alone SDK for HTML and JavaScript. 

Binaries in the HTML SDK are ADL and ADT.  ADL allows you to test the application with packaging the AIR application or installing it.  The ADT is the packager.  It will create your AIR program and get it ready for deployment.  You can find an example of the “Launch Badge” and “AIR Icons” in the html SDK.  You can find the templates in the html SDK generated in the flex world in the html SDK too.

Now I’m watching the speaker write an HTML file in TextMate.  Moves into the sdk directory in a shell and into the bin dir.

./adl -help will give you help.  Basically, you open the application.xml template, make a new copy and do exactly what you would do in Flex.  You then use the .adl to compile the application.   The only difference is that the source is html and not mxml.

Now he is moving out of TextMate and into DreamWeaver CS3.  You can author AIR applications in DreamWeaver CS3.  Weaver being Adobe’s signature HTML suite.  You can package from DreamWeaver as well.  Basically, you not flexing it but your going old school html, DreamWeaver is their FlexBuilder.

Now he is writing an html page that has a form.  The content of the textfield on the form when saved button is clicked will write to the disk.  The javascript that leverages AIR is:

   1:  var file = runtime.flash.filesystem.File.desktopDirectory.resolve("dever.txt");

They have an JSAliases.js file to make javascripting codeing easier so the next line is leveraged using that js file.  That javascript file in the sdk creates references .. so no you can use air and not runtime.flash.filesystem…etc

   1:  var stream = new air.FileStream();

   2:  stream.open (file, air.FileMode.WRITE);

   3:  stream.writeMultiByte(name, air.File.systemCharset);

   4:  stream.close;

Aptana IDE  - Eclipse like IDE for HTML and JavaScript editor.  Not an Adobe product but has an AIR plugin.  This has a ton of “samples” that show you how to do the javascript in AIR.  Very interesting if you have to live in HTML and not Flex. This IDE could be the bomb.

Now I”m seeing an AIR version of Meebo.  It is just an AIR application that slurped up the existing Meebo site. Boom just like that Meebo on the desktop.

[11:43 am] AIR application that contains HTML and Flex

This technique is called ScriptBridging.  There is an HTML tag in AIR that you can access in flex.  This is basically show this page in HTML here.  So, the example I’m seeing now is a Flex program that has an HTML component in it.  We are going to write script that can touch inside the HTML object and set data.  This is EXACTLY what I could not pull off in Flex 2.0 a few months ago.  Here is the function he is writing to access the HTML stuff.

He named HTML component web.  The web object has a javaScriptDocument and javaScriptWindow objects in the component.  You can access and manipulate the dom directly.  So you can access old school javascript items from these document elements.

   1:  public function doSet(event:Event):void{

   2:     var dom:Object web.javaScriptDocument;

   3:     var inputs:Object dom.getElemtnByTagName("input");

   4:     inputs[0].value = "Denver";

   5:  }

Cossdomain.xml does not come into effect with this HTML component in the AIR libraries.  That was Flex to HTML … now lets go HTML to Flex….

Now we are looking at the html example from the last demo.  Technically we already did this in the last demo because the file I/O is in really Flex under the covers.   He has now loaded a file to review…  It is all HTML and javascript.  Examples again how to access the file system.  Examples how to access the icon of a file and smush it into a bitmap.  He then uses a PNGEncoder to convert the bitmap.   The PNG encoder is found in library.swf found on google code.  It was imported as a swf as if it was javascript.  He can call those functions in the swf and they just run like they were javascript functions.  If I had a margin, I would write WOW in it!  You can just run functions written in flex by just including the swf in the html file.

Now were are seeing a flex/html application.  As people write in flex control, that is piped into the html dom so it can be displayed in HTML which can do things easier such wrapping text and with different colored sections of text.  The application is called AIR Chat.  You can find it online to chat with the guys on the bus.  They use Amazon to deploy this on some free service … maybe a pay service.  If the load gets too big, he can just boot more copies on the Amazon servers.

Lunch

Yum!  Lunch was really good.  They had lunch catered in and they barbequed on the patio.  Burgers, brats, grilled corn on the cob.  Stopped by the game room after lunch and demonstrated my superior skills at Guitar Hero before I started hunting for a power outlet so I could charge my PC for the afternoon sessions.  WOOT! this is fun.

[1:16 pm] AIR API Overview

Daniel Dura, Platform Evangelist, will be talking about his favorite AIR APIs.  He will be talking about the top 5 APIs you will probably want to start working with right away.

WindowAPI   allows you to create native windows as well as multiple window types.  You can control the z-order or make a window stick to the top.  An example of this is PixelPerfect.  Here is some code we are reviewing…

   1:  var options:NativeWindowInitOptions = new NativeWindowInitOptions();

   2:  options.type = NativeWindowType.NORMAL;

   3:  // LIGHTWEIGHT || NORMAL || UTILITY || NONE

   4:  var window:NativeWindow = new NativeWindow(true, options);

   5:  window.stage.addChild( new airLogo

Each window has their own stage.  NORMAL would be like a standard window.  LIGHTWEIGHT would be like an outlook message in the bottom corner. NONE would be transparent.

FileAPI  You can use the native file browser to access files with the FileAPI.

   1:  var file:File = new =File();

   2:  file.browseForDirectory();

   3:  file.browserForSave();

   4:  file.browseForOpen();

htmlAPI  You can use HTML content even javascript content.  Much like we saw before lunch.  The javascript, dom, actionscript are all shared references.  You can pull javascript functions into flex as well.  No need to convert a library from javascript to actionscript.  You can over ride html behavior.   So if the html does a window.open() you can do something else rather than what html would normally do.

DragAndDropAPI. 

   1:  var transferFormat:TransferableData - new TransferableData();

   2:  transferFormat.addData(http://www.sutibo.net, TransferableFormats.UrL_FOR... );

   3:  var dragImage:BitmapData = new Bitmat(dragButton.width, dragButton.height, true);

   4:  dragImage.draw(dragButton);

   5:  DragManger.doDrag(dragButton, transferForamt, dragImage);

ServiceMonitoring.  Online / Offline monitor.  It will alert you to changes to the network.  Can detect if you have access to a service.  This allows you to move from VPN to public and your applications can detect this.  Then you know in your application if you can save to a service or to disk.

   1:  var request:URLRequest = new URLRequest(http://www.google.com);

   2:  request.method = "HEAD";

   3:  monitor = new URLMonitor(request);

   4:  monitor.addEventListener(StatusEvent.STATUS, handle_status);

   5:  monitor.start();

   6:  connectLabel.text = "Conencted: " + monitor.available;

DatabaseAPI: Fully embedded database engine.  Using SQL Lite.  You can create inline databases.  You don’t have to access a remote service.  Great for syncing data to your service.  You can literally write local and then remote later to the exact same table. 

   1:  connection = new SQLConnection();

   2:  var file:File = new File("app-storage:/queuedemo.db");

   3:  connection.open(file);

   4:  connection.addEventListender(SQLEvent.OPEN, initDB);

   5:   

   6:  var stmt:SQLStatement = new SQLStatement();

   7:  stmt.sqlConnection = connection;

   8:  stmt.text = "SELECT * from CONTACT";

   9:  //... went to fast ... dang.

  10:    

[1:47pm] Business Class AIR (salesforce.com)
The new speaker is from a company called salesforce to show us how they are using AIR.  I get the impression this guys sells Database services and is plugging this as a solution for developers that do not have an IT shop.  This is dragging on.  Nothing about AIR.  All about salesforce and how they manage a DB for you.  They offer a FlexAPI to plug into their database service.  Just download their swf.  Now seeing some demos of their API. They even made up their own SQL language.  They have a developer edition account that is free for developers.  If you write an application using them, they will allow you to ’sell’ the application on their application exchange system.

[2:29pm] Yahoo! Development Demo with AIR

Media Innovation Group at Yahoo!  Available as flash applications that you can put on your webpage, but now can be AIR desktop applications.  MiniBar.  This is a widget that is a summary of weather, stocks,  headlines, and photos, search different places and get data in browser via yahoo.  CUTE customize feature.  The widget literally flipped like it was a sheet of paper.  The ‘back’ allowed you to customize the application.  Wide mode vs tall mode.. super wide flattens out completely.  They have though a lot about what it means to be rich in their interface.

Next Demo is a Playlist Badge.    Very nice ‘crushing’ feature.  As you make the window smaller the application transforms itself into a usable app that fits the space.  The menu on this app is 4 icons.  you click on them and the app transforms to that menu.  Very nice.

Now he is showing us how to take an existing HTML/JavaScript program and turning it into an AIR application.  Same kind of stuff we have see in the morning.

looking at window.nativeWindow in JavaScript will tell you that you are in an AIR application.  Then your old code can do ’special’ things if being launched as an AIR.  This allows you to release both old school and AIR with one codebase.  His example is talking about adding links to del.icio.us.  Research that.  You can see the example of old html/Javascript application to AIR here. 

[2:48pm] Using Ajax Frameworks to build AIR applications

This speaker is from nitobi.  Development company that specializes in rich Internet development (RIA).  They provide components to ease development.  Just finished a book called Enterprise Ajax which will be in stores on Tuesday July 25th, 2007.  You can reuse your existing javascript libraries because they work in AIR seamlessly.  Some usability items on why AIR.  You can read and write files to the desktop.  You can now give them the OS feel.  You can now drag and drop from your desktop to the AIR application.  Copy and paste is much richer than what you can do javascript where it’s not consistent across platforms.  You can go offline now with AIR vs javascript web application.  You can now access background processes in the OS.  You can notify the users of items easier in AIR.  You get keyboard shortcuts that are not limited to what the browser can handle or has not already taken.

Demo. Ajax Fisheye Menu.  We are going to see how his existing FishEye application can be pulled into AIR.  Cool application.  Now he is showing how to use DreamWeaver to create an AIR application.

Demo. Offline Contact Manager .. happens to utilize salesforce API from earlier today.  He is showing how the data he changes online at salesforce is reflected in his AIR application.

Demo. MultiVista … construction company.  They take photos of construction as it goes on.  It scans a directory for photos.  It manipulates the images and uploads them to a server.  Like what Shutterfly does.  Handles mass image manipulation for the client.

[3:19pm] EffectiveUI Demo

This company is building an AIR application for Ebay.  This talk will be about this application.  Sean Christmann.  Local to Denver.  eBay San Dimas project.  Bring the buying and selling experience to the desktop.  Why do this?  For eBay it is all about the ability to overhaul eBay and start from the ground up.  They can address what it means to buy and sell.  Caching the data locally and being able to get alerts without having to hit F5 over and over again.  It’s all about being LIVE with your data!  Why AIR.  Ease of use and cross platform. 

Demo.  Seeing the new application.  New flex 2.0 feel.  Focused on the buying aspect.  Search field, drops down and shows you suggestions and you can see you cached version.  You can search and see info you don’t want.  You get a list of keywords for your search.  You can select them and have them excluded from your search results.  You can shuffle photos of auction items.  It’s fun but does not get in the way.  You can see how the bids look graphically with a chart.  You can pull up history on a user that is bidding easily.  Now he bids… get’s outbid.  Now he has a notification window that floats outside the application.  These notifications can pop up if you get outbid too.  That is a great reason for moving eBay to  AIR.  Add a NOTE or an ALERT to any auction.  It tracks what they do in eBay and it shows up in myEBay section.  All your traffic is cached locally so you can see them.  You can specify how much of the Hard Drive you want to use up.

Development Techniques.  Built on the Cairngorm Design Pattern.  If you know Cairngorm, you can jump to different Cairngorm projects.  Less code reviews because everyone knows the pattern so code always works the same way.  All assets are externalized assets.  When you are done, you can then skin it out again for a different color/look.  String externalized for internationalization.

He now goes into the architecture of the new application.  You start out with an application core.  The core is a hidden window and is always invisible to user.  Goes to cache to get data.  Goes to the server to get results etc.  It spawns windows based off the state of the application.  Login Window.  Main Application Window. Alerts. etc.  IF you close the main window, the core is still running and getting the latest data.  Maybe you want a mini mode window so you can see quick info.  This model helps with memory management.  You can have the core invisible application kill off the child stuff to clean up memory.

Ebay’s has all of their services as SOAP services.  The requests to eBay is XML serialized for communication via AS3 objects.  WriteObject and ReadObject will serialize AS3 classes so you don’t need to worry about caching to disk.  Very easy.  No need to be some other object. Using the ACCESS framework in Java to pull off the AS3 2 SOAP communications.

www.projectsandimas.com - private beta, invite only through the summer.  Invite X number each week.

[4:04pm] Frog Design

This company is about designing interfaces.  The speaker is going to talk about the different designs they do.  A few of the websites this speaker runs are: www.theflexblog.com, www.gotoandlearn.com, www.theflashblog.com, www.thewpfblog.com, www.leebrimelow.com, www.contentpresenter.com   All examples will be on the www.theflexblog.com website.  Ha, Ha, this guy is funny.  Tools this guy uses for AIR development.  Photoshop CS3, Flash CS3, Flex Builder 3, Expression Web.  AIR applications can be flash, flex or html.  All of these technologies can create an AIR application. 

Showing an image that will be the custom chrome.  You then use Scale-9 slicing to cut out the chrome.

AIR exceeds performance of WPF.  Better at custom chrome.  Making chrome transparent is a 10% hit on performance.  Don’t do it if you don’t need to.

Same web development optimizations for WebKit browser will effect AIR application as well.

Mostly visual demos .. the code goes by to quick.  Wow this guy has come cool desktop applications.  To much to say about what I have seen.  Nothing code wise, just cool examples.  I’m will have to checkout his website after the fact.  This guy develops in Flash.  Now he is going to talk about going from flash to AIR. 

Inside Flex, imbed a flash.swf file.  You can then access the flash code in flex.  Flash CS3 AIRPanel is an unofficial way to move flash into AIR.  AIRPanel is an AIR application that lets you visually create the AIR application.xml file.  Since flash CS3 has no real way to access this application.xml file in the tool.

Now seeing a demo in Flash CS3.  Creating an application and moving to AIR.

See demos at www.theflexblog.com after a few days.

Book: ActionScript3 animation by Keith Peters

[6:06pm] Late Night Session

They are plugging the 360 conference and the MAX conference in September.

[6:22pm] Deconstructing the Bus

The “Bus” for the AIR Bus tour, has some flex applications that tracks data for this tour.  You can see these applications on the tour website.  It shows where the bus actually is and where it has been as well as photos they take as they go.  They have an application on the bus that takes a photo every minute, GeoTags it, and uploads it to flicker.  This is implemented using wireless data card which gets them access to the Internet while on the bus.  They steam the conferences over the web from the bus.  They run the AIR applications AIRTracker and AIRSnapshot.  Tracker saves the locations while the snapshot is sending the images to flicker.

AirTracker.   We are seeing the app and the code.  It has a live map that shows where you are.  You can download from google code off the bus/api website for the tour.  it uses GPSBabbel which can talk to GPS devices.  The script fires via cron ever minute.  The data is then passed into these AIR application.  How do you capture those online arguments?

In onCreationComplete function, line 147. 

   1:   // called when an app launches, called from 

   2:   // the command line with arguments 

   3:   // if first time or if it is running.

   4:   Shell.shell.addEventListender(InvokeEvent.INVOKE, onInvoke);

Flex has a logging framework.  Logs can be sent to targets.  you can send to a file, or a text area etc.

We are digging literally through this code base.  Interesting points are how they queue items incase they are offline.  The timestamp used when created the GeoPoint is off the client and not the server.

Highlights. 

How to tell if you are online or offline.  This focuses on what you need to connect to.  If you can’t touch the server, it’s offline.  So you can be online but not on the right network so this will think you are ‘offline’.

   1:  //GeoPointQueue.as

   2:  // Create a socket connection to URL on port 80 to see if you can talk there.

   3:  private function initMonitor():void {

   4:     monitor = new SocketMonitor(monitorAddress, 80); 

   5:     monitor.addEventListender(StatusEvent.STATUS, onStatusChange);

   6:     monitor.pollInterval = MONITOR_INTERVAL;

   7:     monitor.start();

   8:  }

   9:   

  10:  if(monitor.available){

  11:    sendNextPoint();

  12:  }

  13:   

How to write ActionScript Objects to the filesystem.  You can serialize an ActionScript class.

   1:  var storage:File = new File(QUEUE_STORAGE_PATH);

   2:  if(!storage.exists){

   3:     queue = new Array();

   4:     return;

   5:  }

   6:   

   7:  var fs:FileStream = new FileStream();

   8:  fs.open(storage, FileMode.READ);

   9:  queue = fs.readObject() as Array;

  10:  fs.close();

  11:   

  12:  var storage:File = new File(QUEUE_STORAGE_PATH);

  13:  var fs:FileSystem = new FileStream();

  14:  fs.open(storage, FileMode.WRITE);

  15:  fs.writeObject(queue);

  16:  fs.close()

What to look out for when saving data?  This tells a class to be serialzable!

   1:  [RemoteClass(alias="come.adobe.onair.geo.GeoPoint")]

Brief comment on what to do if you get a conflict writing the same record.  Skirted the issue saying, yea, that’s hard.  Yep, it sure is.

AirChat.  This was written on the bus and you can download the code too.  You can basically chat with the guys on the bus.  This is the flex/html application.  It will bring in the live video feed on the bus too.

TwitterCamp.  AIR application that lets people ask questions from anywhere in the world.  You can get this of google code too.  Search for twittercamp in google.

[7:26pm]  On the Road

Well, the day has ended and it was a lot of fun.  Despite my best efforts I was unable to win a copy of CS3 Master Suite during the question and answer.

Speak Geek
I learned some new terms at this conference that I have never heard before.  Slurp these guys up and start throwing them around the office!

“Into the cloud”  When talking about a service on the Internet, you making a request into the cloud.

“Chrome”: Your “chrome” is the OS interface that can house your AIR application.

A few weeks ago now, I released my Hello Flex component to demonstrate a little bit about what you can do with flex. This week, I’m releasing a calendar widget. What is a component and what is a widget? Well a component is a fully functional item that you can drop into a larger application. The component does not really make sense if ran on it’s own. (Much like the Hello Flex component which is used in this new widget) A widget is a small program that is complete on it’s own but is modularized so it can be deployed into a larger application.

This week, I am releasing my calendar widget. You can find a complete feature list below. Click on the image above to launch the application, or click on the calendar link on the left. Please feel free to use this program for your own calendar needs. Please add comments, suggestions and bug reports here on this blog entry.

Future Plans

• Modify the future filters so they show events that have a duration greater than one.
• Add the ability to have a private entry that will not display the details unless you are logged in.
• Add the ability to slurp up all US Holidays.
• Add a reoccurring event time that will make an item show up on a specific day of the week or day of the month.
• BUG: Runtime error when you try to view a leap month in full screen mode.

Release 1.5 2007.08.08 (calendarWebApp_1-5)

• BUG FIX: You can now schedule events on Sunday and they will show up in full screen mode.
• BUG FIX: If you set the duration of an event to more than one day, in full screen mode, the actual duration will be represented.

Release 1.4 2007.06.22 (calendarWebApp_1-4)

• I have added a full screen mode complements of Ely Greenfield.  I know there is a leap year bug that was introduced with this new full screen mode and I will be fixing that later.
• Changed the code to purge events that are older than 90 days in the past.

Release 1.3 2007.06.19 (calendarWebApp_1-3)

• Fixed the annoying sorting bug. Now your calendar events will actually show up in order.
• I have added a new ‘future’ filter that will show you all calendar events from today forward.

Release 1.2.1 2007.05.22

• Fixed a bug where the spreadsheet view no longer was displaying the calendar event description.

Release 1.2 2007.05.21

• I have added a new administration icon to the status bar.
• I have added a new administration form where you can now change the height of your widget.
• The height will be saved based on the user you are viewing/managing. Setting the height for the ’school’ calendar will not effect the height when working the ‘family’ calendar.

Release 1.1 2007.05.18

• I have added the ability to view different users by default. This will allow you to create a bookmark to your calendar and not mine.
  • http://www.sutibo.net/calendar/index.html?USERNAME=sutibo
  • http://www.sutibo.net/calendar/index.html?USERNAME=yourloginhere
• I also removed the super cool reflection effect. It was causing my buttons to flash when you moused over them.

Release 1.0 2007.05.17

• When you launch the application, you can view the sutibo calendar.
• You can click the lock button to log in. Once logged in you can manage you calendar.
• Click the lock button while logged in to log out. You will then be viewing the last user logged in.
• The bottom status bar shows you how many calendar entries you are viewing of your total amount.
• The bottom status bar has a button that will allow you to quickly toggle between all calendar events for today and next week with a total count.
• The top action bar has a search button that will allow you to search by date and or by text across all of your calendar events.
• The top action bar has a view button that allows you to switch between a graphical and an excel view of your calendar.
• The top action bar has has a slider that will allow you to filter your current calendar by today, next week, next two weeks, and the next 30 days.
• If logged in, you can click the add button to create a new calendar entry.
• A new calendar entry can be classified as a birthday, anniversary, reminder or appointment.
• Birthday and Reminders do not automatically delete and will be continually pulled forward into the future once their date has passed.
• Reminders can span multiple days and will not be automatically removed from your calendar until their duration has passed.
• While logged in, if you double click on an existing calendar item you can edit it’s contents or completely delete it.
• The state of your calendar is saved. The last view and filters applied will be retained and used the next time you open the application.

Hello World, or should I say hello Flex! Just a little background for my nontechnical friends. A hello world program is typically the very first program you ever write in a new programming language. This program is very simple and usually only displays the words ‘Hello World’ on the screen. Typically, I do not find much use for a hello world program. It’s just to simple by today’s standards to really get any educational value out of it. I find that I know enough to be dangerous when I can write a ‘login’ application for my website.

So, what is Flex? The Flex I am talking about is the Adobe Flex development platform that allows you to write rich web applications for their Flash technology. I have been writing flex applications at work now for a few months so I thought it was time to start leveraging some of my new skills for my personal development. I have a few ideas for some sweet rich web applications that I am planning on writing in Flex.

To get the ball rolling, I have written my first component that I can drop into any web application I write in the future. This application will allow you to log into my website, register for an account, or request your accounts password via email. It was a pretty simple application to write and only took about a day.

Feel free to play around with my demo program. There are some pretty cool things to see in there if you know what to look for. Many of the ‘wow’ features are 90% free with Flex. Launch the component by clicking on the login button. From there, feel free to register for an account, request your password via email, and simply log in. Want to look under the covers? That’s easy to do in Flex too. Just click here.