Hamster Thoughts

Flex Shapes

2007-10-11T19:11:00Z

We have been having a discussion on primitive shapes in Flex in our 615 Flex discussion group. As of now, if you want shapes (e.g. circles, rectangles, etc) in Flex you have a few options:

1. Make a circle vector image or SWF in Flash, then load it using an <mx:Image /> loader or something similar
2. Draw the circle using ActionScript code in a function, optionally as a component
3. Use the primitive shape classes developed by Jason Hawryluck (see below)
4. Wait till Flex 4 when they introduce the new native shapes classes, which replace option 3 above (e.g. <mx:Circle />, <mx:Rectangle />, etc)

The primitives classes are just custom components that eventually use the drawing API internally, but allow you to instantiate them into your app as MXML tags. If you want, they are focusable just like normal widgets. Adobe is currently set to introduce their own version of these in Flex 4. In the long meantime I use these primitives to easily get what I want. There is even a Primitives Style Explorer that allows you customize a primitive, then copy/paste the MXML formatted tag into your app. Check out this link for the original post about these classes.

Since these components are not part of the Flex SDK, you need to get the the com.Primitives package of source files and place them in to your project. I am not sure if there is a SWC that contains the compiled classes, I just do what the author suggests and right-click the style explorer, then click View Source to get the source classes.

Now for a sample using the gear primitives. My buddy and fellow 615 Flexer Byron will serve nicely as the demo. We will make gears of his brain his and report on his status (which of course are the two things he claims keep him going). Check it out here. Right-click to view source.

Nashville Microsoft Event

2007-10-05T00:36:00Z

Just got back from the MAX 2007 conference today. Stepped off the plane and drove over to meet my co-workers at Opry Mills for the 4 hour Microsoft Event regarding Silverlight ... or so we thought. I think the speaker spent 30-45 minutes on Silverlight. The rest was on LINQ (which is actually pretty cool) and Windows Communication Framework (JMS anyone?).

Anyway, none of us came away overly impressed. I do think Silverlight has potential, I am just not sure to what degree it will compete. On the one hand, it is MS, a world class tool development shop. You know eventually the tool will rock for developers (who knows, maybe even designers). But after the session was over I spoke to the speaker and mentioned how far ahead I felt Adobe was with Flex, and he told me they only had like 3-5 guys on the tool team atm. Huh? I don't know, he made it sound like it was a couple of guys' pet project. David (co-worker) made a good point...could they just be waiting to see what sort of interest level develops?

They guy did say something like, "Ignore the marketing speak, Silverlight IS here to compete with Flash." He showed several features that were similar to where Flex is/may be going (see Flex Roadmap Part I and Flex Roadmap Part II). Specifically, the fact the there are separate design and developments tools that can work off of the same project, and that the design tool generates the components using shapes and other graphical elements. He also showed of the HD video capabilities that were "superior" to Flash (he was not aware of the announcements at MAX

Several people asked about components in Silverlight. He indicated the Silverlight component toolkit was going to take care of this. This is sort of like how it is with Flex components. The language and installable runtime itself only defines the building blocks for components. No component library comes down with the runtime. It is up to the designer/developer to include what he/she wants. Also, after the session I asked him more about components. He indicated that when the release version of Silverlight 1.1 comes out (the C#/full CLR runtime version that is in alpha mode right now) the component toolkit should be pretty rich. I think at this stage we just have to sort of wait and see.

Flex Roadmap Part II

2007-10-04T02:18:00Z

After the Flex Roadmap session I overheard some personal Q&A time between a developer and the speaker. The developer indicated (and I made the association just as he said it) that this new style they were expirementing with is essentially what Microsoft is doing in WPF and Silverlight (WPF/E) is. The speaker said it was definately similar.

The last time I looked at the Silverlight stuff I kept wondering where all the controls were. The thing is, they already have the simple shapes that Flex is talking about. You just draw in MS Expression and it generates XAML Graphics (part of what Thermo will do).

The developer brings up an interesting point, however, that the speaker seems to take to heart (they even exchange business cards over the discussion). Basically, you can come at this component design from two angles.

Angle 1 is designing several rolled up components and chosing to expose certain properties.
Angle 2 is the new design, making the view completely configurable/editable in a large hierarchical grouping of Graphics, marked up and editable in XML.

The drawback of Angle 1 is exactly what they were saying in the session, that they have to guess what the developers will want to mess with in order to expose them. However, there is positive side to this approach, which is of course the weakness of Angle 2. The weakness, as stated by this developer, is that often times people just want to do something simple, like change the rollover color of a row in a list. The XML markup of the view for a list is now so freakining huge and has XML attributes for color everywhere that it becomes a massive undertaking to find and tweak one or two little things.

In fact, this developer stated they actually come full circle and write some code in WPF to expose a few of the most commonly changed properties on the now super configurable view.

Interesting stuff. Hopefully the Flex team comes up with a good solution.

Flex Roadmap Part I

2007-10-03T22:45:00Z

This was an interesting session from a few different points. First the notes:

- advisory note: everything shown is in expiremental phase

- short recap for those that missed Thermo sneak
- they indicate the Flex team is excited about Thermo
- splitting into two teams, one focused solely on development features (Flex), others focused on design features (Thermo)

- recap of where Flex is atm -
- designers need freedom (drawing rounded rectangles, setting alphas on everything, etc)
- Flex SDK focuses on components
- therefore we have a high level and very low level (programmatic drawing), but nothing in between
- enter MXML Graphics

- MXML Graphics -
- simple shapes, complex paths, masking, filters, blend modes, etc all with scale 9 support
- should be run-time editable, making it easy to animate
- focused on performance
- need ability to trade off runtime editablity against memory and speed

- Re-evaluation of Framework component design -
- currently a problem with components, that goes like this:
- they expose certain styleable props of a button
- folks request that the button's label have the alpha settable
- they expose, build, test, deploy
- works great, then folks request that the button's corners not be rounded (or something)
- problem predicting what folks want to do with the views of components

- further, current code is complex
- e.g. Button is 2200 lines of code

- enter true MVC (Model View Controller) separation
- model - at its core, what does this component need to expose prop wise (e.g. the label for Button, that is it)
- controller - event handling for mouse/key input, but just with/respect to setting current states and events
- view - should be completely definable just using MXML

- big advantages
- can complete alter the look of a component, more so than is possible today
- no changes to any controller code, it is still a button
- becomes VERY easy (demo was cool) to alter component's look

- demo -
- again shows old button code, 2200 LOC
- shows new button code
   - 20 lines in model
   - controller code maybe a 2-300 LOC
   - view is all MXML Graphics and states
- alters the MXML view of the component and immediately can make very cool looking buttons

- repeats the demo process with scroll bars and lists
- with scrollbar, some things are defined as optional
- for instance tweaks view of a scrollbar to have no buttons (thumb and track only)
- with list, makes very different animated looking lists, accordians, etc with minimal and frankly easy to understand and implement changes to MXML

- near the end of the session folks starting commenting how cool this whole thing is
- a few begin to wonder why they should even consider Flex Builder 3 at this point
- the speaker notes
a) this is still expiremental
b) they are committed to backward compatibility, so components will work in this new design

Building Stunning Flex Apps

2007-10-03T19:31:00Z

There was a hands on session earlier today, but nothing much to report from that. Here are some notes from this session:

- recap on CSS styling Flex
- recap on skinning in Flex
   - short discussion on Scale 9 skinning
      - scalenine.com - on CCA license (use at will with credit to authors)
      - flex exchange (beta) - licenses vary
   - short discussion on programmatic skinning:
      - most Flex default L&F is currently using programmatic skinning
      - can define new style props on skins (allows single skin to take on different appearance)

- standard skinning steps
   - create art
   - export art in Flex friendly format (Flash, SVG, PNG, etc)
   - create Flex CSS to attach skins

- Flex Skin Design extensions
   - make skinning easier
   - new for Flash CS3, Photoshop CS3, Fireworks CS3, Illustrator CS3

- Flex Builder 3 makes importing artwork and CSS setup much easier
   - new import artwork wizard
   - imports and generates CSS code
   - can be viewed immediately in CSS design mode and have styles tweaked
   - Scale 9 grid can be edited in CSS design mode (needed for raster images)

- discussion on difference between skin parts and skin states
- each skin part can have a skin state (e.g. scrollBar's thumb up state, down state, etc)
- transitions can be defined between each state

- in Flash, additional keyframes can be added that are transitions
- the names defines the transition (e.g. up-over:start, up-over:end)
- wildcards are support
- an example of using this would be to fade a color into a new color when going to over state
- can define to not define the reverse transition and Flash will just play reverse

- in CSS design view, under global, can set a Font to a non-standard Font and now check embed
- note to be sure of legal issues of embedding a font

MAX Event part

2007-10-03T02:36:00Z

After the Sneaks session was a "back in time" party. We walked down a tunnel into retro-land. There were 70s, 80s, and 90s zones. Depending on the zone there was:

- an arcade with coin-ops machines (galaga, pac-man, etc), pool tables, and air hockey
- a stage with costumes were you could film a 70s style music video
- stuntmen doing tricks with BMX bikes and skateboards
- the car from Back to the Future
- many screens set up with Super Mario Brothers, Donkey Kong, Halo 3, Guitar hero, many more
- remote control car racing
- jumbo screens with 80/90s videos playing
- food everywhere, all different kinds
- 80s breakdancers
- tables with a dealer and a supply of chips for Texas Holdem
- a Segway obstacle course (i tried this, it was fun finally riding one)
- an Oxygen bar
- a live lounge band in tuxes singing Brass Monkey, Shake that Ass, Closer, Smells Like Teen Spirit, etc in a lounge/crooner style .. this was just wrong
- a sit down photo booth
- i am probably missing some stuff

Adobe "Sneaks"

2007-10-03T00:35:00Z

Notes from the Sneak Peak General Session for all:

Visual Communicator
- new product, very cool demo
- an app that integrates with a webcam
- the speakers stand on stage in front of a green screen
- imagine three columns:
- on the left of the app is the web cam image of them, taking into account the green screen
- in the middle is a scrolling vertical "teleprompter" they can edit in place
- on the right is a scrolling vertical timeline that shows effects/transitions
- they click play and the two sort of timelines on the right scroll slowly
- they read from the "teleprompter" as graphics pop up on the green screen behind them and transitions occur
- they demonstrate how quickly they can throw in images over top of themselves, like a news broadcast
- they claim they have 3rd graders using it to make fun little productions that television crews had whole trucks for
- now I know what this CD is they gave us on day 1, sweet

VoIP in Flash Player
- this is the CoCaMo thing again from this morning's session
- they talk about it more and indicate Adobe wants you to build products around it, without requiring them
- it will be p2p and through your server, so does not require a subscription to an Adobe service for your custromers (no double authentication issues, Adobe does not have your client list, etc)

Flash Home for Mobile
- product that provides the ability to replace your "home" screen on your cell phone
- boot the phone directly into Flash
- leverages a server called FlashCast
- unlike a WAP browser where you click and wait for a refresh, it is like Flash in that it can do web requests without refresh (in-place)
- shows example code, simple function that checks for incoming area code and swaps out background image
- has someone in audience call him, code detects person is coming from New York and display statue of liberty image

Photoshop Express
- online version meant for the average consumer
- built in Flex
- quickly correct and see previews
- each change generates an image in a timeline and new result is rendered in real-time
- can remove any edit in the timeline and see the end result, not just linear undo
- your images are hosted online and you can package them up into a slide show and share them
- full end to end solution

Flex and AIR authoring in Fireworks (Future)
- skinning Flex/AIR apps

Creating Offline/Online Apps w/ AIR and ColdFusion
- no idea

Web 2 Print
- using in-design, indesign CS3 server to design and see immediate real time PDF mass printable documents

Flash (Future)
- move viewing on stage in design
- no more need for keyframes, this was cool:
- they drop an image on stage
- they just drag out the image in the timeline the desired number of frames
- they pick a frame and just move the object and the tweens are generated, no keyframes required
- they pick a different frame and increase the size of the object, tweens are generates, no keyframes required
- they stick a bezier curve over the frame and define the path automtically
- they go to any frame and see where the object will be on the curve and can adjust the location of the curve at that frame, changing all tweens effortlessly
- the coolest thing though, was an example of using the new bone support:
- they draw a few peach colored circles with the edges on top of each other
- they use a tool to place connections (bones) between each circle
- they then move the last circle and watch as the just created arms with joints move around like an arm
- they show off a cool robo-bug animation where they have done the bone stuff and move different pieces at different frames
- they then reveal that it is interactable at runtime, that is if you choose, the user can interact with the bones
- lots of applause and geek squeels on this one

PDF Packaging UI
- integration of Flash in Acrobat
- clickable links in a PDF that open SWFs inline and in context (locations that open google map points)

Flex Apps on Linux
- Flex Builder on Linux Alpha launched as of this evening
- not yet full support of Flex Builder 3 features (no design view), but does have debugger

C/C++ and Flash
- C/C++ to AS3 compiler
- example conversion of libxslt
- even converts synchronous C code to asynchronous AS3 code to keep UI from blocking
- coolest part was when he showed Quake, initially written in C and completly ported to AS3, with some Flash status overlays zooming in and out (he added this after compiling/converting the code to AS3)

Seam Carving
- they announce some guy had been getting tons of youtube views for a little app he wrote that was 20 lines of code
- they immediately hired him when they found out about it
- his process is called seam carving
- it looks at transitions in any bitmap image and finds what he calls "seams"
- it then removes the seams, for instance, when shrinking the image
- the effect is great, instead of shrinking out the image evenly, it keeps the content more
- it is too difficult to describe how well it works, but they have an image of guy on a bike and the old scaling method in the X direction shows the whole image thinner, with the biker skinnier, while the new image shows the biker almost the same size even though the image has been shrunk
- he also can grow the image
- the best part is where he opens up a picture and with just dragging brush over top of an area can make objects dissappear (a boat out of the water, a shoe out of a shoe rack) .. the end results look like the image was never there!

Optimizing Flex Apps

2007-10-02T22:05:00Z

Notes:

- Flash Player 9 internal lifecycle: rendering, excute actionscript code, networking, repeat
- writing crappy AS code can starve rendering

- deferred creation
- several container components support a creation policy which should be used if possible, such as Accordian, TabNavigator, ViewStack, etc
- this allows items that are not yet viewablle to defer creation
- you can implement deferred creation in your own custom containers, but better to just extend ViewStack

- constraint layouts can be slow with lots of nested containers
- reduce container nesting when possible

- if you are loading lots of images, do it smartly
- each one's load complete will cause a re-layout process
- better to load them all off the display list, then, when all loaded, add them to display list

- use cacheAsBitmap for effects that don't change size
- this renders the component to an offscreen buffer and fast draws the buffer to the display
- MoveEffect - good use for cacheAsBitmap
- Resize - bad use for cacheAsBitmap

- use Resize.hideChildren to hide children during state transitions when possible (e.g. resize a grid you could hide the item renderers with this, but that would leave a blank grid in meantime)

- setStyle is expensive, except during object creation time

- using performance profile in Flex Builder 3:
- start app via profiler
- uncheck memory profiling if not using it
- once you get to the point in your app you want to profile, clear the results
- do the action you are profiling
- take a snapshot
- you can now drill down each method, and each method it called to see performance breakdowns

Case Study
- List itemRenderers that were doing lots of changes to the list
- initially wrote renderer as a VBox with other containers inside to positon label
- rewriting as a simple AS class that andled the layout very simply drastically improved performance of all the dynamic updates going on to the list

Beyond the Basics of Flex Builder

2007-10-02T20:37:00Z

Notes:

- Flex is now open source, and the SDK is on a nightly build that can be pulled down anytime
- Using that in conjunction with he new open bug database, you can actually test out fixes prior to official release to see if they solve your problem

- Flex Builder 3 supports multiple SDKs now
- SDK can be assigned on a per project basis
- Compiler/Design/Code intelligence pull from the assigned SDK

- Discussion on how to set up a pulled down SDK for building the SDK when you want to update framework code to test fixes you make, and then run your project against our modified framework
- Requires a little bit of setup

- Flex Builder 3 code behind has been enhanced to support code jumping (CTRL+click) through all include code
- It has also been fixed to support code jumping through all levels of the code tree, backwards and forwards

- There is a faster SWC parsing implementation that has been placed in Flex Builder 3 but was disabled for the beta 2 as it did not get sufficient testing for the release
- Can be enabled by putting down a file called “use.newABC”
- This update cuts project load time in half and will be in the next release officially

Continuous Integration with Flex, FlexUnit, and Ant

2007-10-02T19:28:00Z

Goals:
Centralized
Automated
Self-Testing

- Continuous Integration is a software development process where members of a team integrate their work frequently
- Each integration is verified by an automated build and test that detects integration errors as quickly as possible

Allurent Buildwatch
- Build failure notifications via email with the build failures
- Dashboard of projects with their current build status, last time built, etc
- Distribution page of binary builds and docs

Automated Build Process
- build file for the project
- src directory
- bin directory

- Goes over using Ant with the flexTasks.tasks (we are already doing this in our app) and <mxmlc>

- Build best practices
- keep source and output separated
- don't work work you've done already
- provide reasonable defaults
- centralize behavior
- predictability

- FlexUnit - supports Flex and ActionScript, asynchronous testing, and graphic test results (through Ant)

- Antennae -
- Build templates, encapsulates best practives, handles flex apps/libs/docs, cross project dependencies, multiple projects
- automated test suite generation
- ability to fileter down the tests ro run
- ActionScript to Java result reporting

Safe Module Initialization

2007-10-02T18:30:00Z

Modules are really nice for our particular application because we already have 100s of screens and need to be able to scale to have 1000s of screens some day. One of the things I looked for but did not find immediately in the Module framework was a way for the main application loading the Module to know when the loaded Module is safe for communication.

Most components dispatch a creationComplete event. This event can be used to perform whatever post-processing needs to be performed after the component is completely created and initialized (including all contained children).

The ModuleLoader is the component used to load in Modules. The ModuleLoader does not expose a creationComplete event. The ModuleLoader does however expose a ready event. The ready event indicates the contained Module has been loaded and instantiated. We can use this information to get at our newly loaded Module's creationComplete event registration in an effort to know when it is safe to post-process the Module. Here is some code in the Main application that sets this up:

// Main.mxml has a ModuleLoade named moduleLoader. In Main.mxml, define the
// moduleLoader's “ready” event property to be moduleLoader_ready(event:ModuleEvent)
//
// Then define moduleLoader_ready as:
//
protected function moduleLoader_ready(event:ModuleEvent):void
{
   this.moduleLoader.child.addEventListener(FlexEvent.CREATION_COMPLETE,
      moduleLoader_child_creationComplete);
}

// The above code will register an event handler for the creationComplete event
// fired from the content loaded into the Module
//
protected function moduleLoader_child_creationComplete(event:FlexEvent):void
{
   this.moduleLoader.child.removeEventListener(FlexEvent.CREATION_COMPLETE,
      moduleLoader_child_creationComplete);

   // at this point we know the Module has been loaded and has had it
   // lifecycle run up to creationComplete. It should now be safe to do
   // normal component post-processing on the Module.
   // We require all of our Modules to implement a standard contract, IScreen.
   var iScreen:IScreen = IScreen(this.moduleLoader.child);

   iScreen.context = this.getCurrentContext();
   iScreen.doSomethingStandard();

   // etc
}

Within our Module we sometimes wish to query the Main application. Again, we use a contract, this time called IScreenContainer. As we have some commonality amongst screens (Modules), we have base screen class. There is a property on the base screen class to get the IScreenContainer:

protected function get screenContainer():IScreenContainer
{
   return IScreenContainer(Application.application);
}

Keynote Presentation Day II

2007-10-02T17:37:00Z

Holy crap! Thermo ... read on ...

Discussion continues on the technology platform, specifically in the areas of Servers, Services, and Tools.

Servers - LiveCycle ES
- They show off a design view of a process management workflow, where each node represents code that comes with the product and the ability to link up all of these workflow steps
- They can scan in a PDF form and turn it into a simple RIA using LiveCycle

Services

- Scene7
- leading "on demand" rich media publising service
- real impressive demo of a dynamic image rendering on to a 3d surface (a football player uniform being designed in real-time, addinga number you type in, adjust colors, adding an image you upload, all rendered rigt on to the uniform a guy on the screen is wearing)
- they show off a QVC prototype app running on AIR that shows live broadcasts and interactivity

-SHARE (beta)
- free 1GB of storage for managing shared documents
- keeps revision history
- keeps track of with whom you have shared what documents
- full set of APIs to interact with the service
- on service conversion between Word and PDF
- it crashes twice during the demo

- Pacifica
- new service for high quality voice integration into Flash and Flex
- version 1.0:
   - high quality chat
   - text im
   - advanced NAT/Firewall traversal
- roadmap:
   - video chat
   - p2p
   - AIR
   - connect into traditional telephone network

- CoCaMo
- new Adobe Connect version written in Flex
- opening up APIs for Flex apps
- no server side code required
- showed off MXML components to connect to a room, add chat, etc

Tools

Thermo
- new tool
- allows designers to draw the web site out and have Flex code generated from it in real-time
- new Flex "graphic" components are being introduced to handle every standard design element (rounded rects, polys, etc)
- the designer draws out rounded rects and if he/she desires can view the Flex MXML in source view
- the demo was awesome - the presenters imported a PhotoShop file of a web site front end and did the following:

Demo Part 1
- select a rectangle graphic that was in a certain layer of the PSD image that was obviously made to look like a text input
- right click the rectangle graphic, select "Convert Artwork To"
- select TextInput from a list of every Flex control
- immediately run the app and see it is an interactable TextInput
- note that the Flex code handles this by making the rectangle image becomes a skin of the TextInput

Demo Part 2
- select a label, convert it to a label
- flips over to Flex source view and sees that it preserved the fonts, colors, etc from the PSD image when it created the Label

Demo Part 3
- multi selects album cover images in a horizontal row and converts it into a List control
- select one image (now a list item) and define an effect for rollOver (can choose from a list of possible effects)
- the effect was the album image expands and text appears
- the text that appears defaults certain transitions to show up (fades in), but they show these can be changed as desired from within thermo (very easy to change)
- thermo automatically generates the state transtition code needed in Flex, along with the tween to move from start to end state (transition)
- the state transition can be previewed in thermo without running the Flex generated app

Demo Part 4
- selected a rectangle that was clearly meant to be a scrollbar for the list
- converts it to a scrollbar with the thermo (right click, convert to scrollbar)
- from thermo he does a little more work with the scrollbar - identifies which images in the PSD image layer that was selected for conversion should go with which aspects of the scrollbar (thumb, track, buttons)

Demo Part 5
- selects the new scrollbar control and drags an anchor to hook it to the list control (from example 3) to automatically generate all the wiring to make the scrollbar scroll the list

Demo Part 6
- Shows how there is not really enough album images to demo the app well, and tells thermo to generate some more images in the list control (just copies the existing images over)
- Also identifies where the data should be bound from (dataFields) to populate the text under the album image created in Demo Part 3 that shows up in the rollOver state

- From Thermo they run the code, whole thing took like 5 mins and now, from an image of a web site page, they have an RIA that scrolls a list of images and pop-ups out on rollovers
- Thermo and Flex Builder share the same project files, so designer and developer can open the same projects and work on it
- due out next year sometime

xd.adobe.com
- new site for help with what makes an RIA site really work
- design patterns up there currently, eventually some components
- design reviews of site work you post
- case studies

Hands On Flex - Building an RIA

2007-10-02T15:15:00Z

We wrote some code in this session. Some notes:

It was really easy to suck up a .NET web service in Flex with a few MXML tags. Flex Remoting, not so much. However, Flex Remoting provides a bunch more stuff (security management, performance, etc).

In order to communicate from Flex to the .NET class using Flex Remoting, you need to have something in between. In our session we used WebORB, which is supposed to be free for the standard version. It was more complex to use than the web service side.

Meet the Flex Team

2007-10-02T02:39:00Z

We met all the members of the Flex team this evening. They answered some general questions, then we broke out and could ask them specific questions. This was an interesting session.

Noteable general questions/comments:
- Flex Team is working with Google and other companies that can not be named on search engine optimization
- A few big companies that re "secretive" are involved and are sensitive about any information being released atm
- Someone asked about cairngorm integration - The Flex Team took an audience poll and found about 1/3 of the room used this framework, 1/3 used a different framework, and 1/3 used something else
- They indicated they are thinking about 3rd party framework integration, but this is the problem
- L/R language support will come with the first version of Flex that is built on the next Flash Player (astro)
- They mention some work went in to Flex Builder performance in this latest release when someone complained about getting Internal Errors from Flex Builder

I specifically had a discussion with one of the developers who works with Modules on the appropriate and safe way to initalize them. When I got back to the hotel I tried out some of his ideas. I will post later what I found.

The Flex Team mentions not to miss tommorrow's Sneak Peak session and General Session for some interesting Flex related things...

Flex Interface Guidelines

2007-10-02T01:36:00Z

Some notes:

Flex Developer Center has a new tab for Flex Interface Guidelines whose purpose is to:
- Communicate intentions
- Set a standard for Flex application design
- Share RIA design expertise
- Solicit your RIA design expertise

Most of the slides come straight from the available content on the web site

Notable discussion:

Think about using motion to drive where focus should be instead of motion just for the sake of motion. E.g. A list item is clicked and it becomes the new screeen.

Optimizing ActionScript 3

2007-10-01T22:51:00Z

Some notes:

AVM2 architecture - SWFs have byte code which is just in time (JIT) compiled to native code

JIT's job:
- verify and optimize byte code
- generate native code

Tools for optimization:
- flash.utils.getTimer
- trace
- Flash Debug Player
- Flex 3 Builder Performance Profiler

3rd Party Tools:
- REDbug
- Firebug
- Flash Tracker

Graphics:
- minimize usage of full screen scrolling and effects
- minimize unnecessary animations
- if using animation and want to hide something, instead of making it invisible, remove it from the display list and then add it later

General:
- Optimize memory foot prints
- Use deferred instantiation
- Remove listeners or object reference
- Remove debug code trace statements
- Set compiler option optimize=true (default)
- instatiating objects inside loops when you could have instantiated it once and updated props
- non-typing is a bad thing with respect to optimization

Found while comparing Optimized vs Non-Optimized code:

- weak references have a negative performance hit, e.g.:

      var o:Object = (data: "My Data", label: "My Label");
      o["data"] = "My New Data";

- continually looking up the same property, e.g.

      if (o.prop == "Something" ||
          o.prop == "Something Else" ||
          o.prop == "Even Something Else) {

            vs.

      var prop:String = o.prop;
      if (prop == "Something" ||
          prop == "Something Else" ||
          prop == "Even Something Else) {

- getting an object out of an array and not casting it first before calling a method (i thought this one was interesting), e.g.:

      myArray[3].doSomethingCool();

            vs.

      var myObject:MyObject = myArray[3] as MyObject;
      myObjet.doSomethingCool();

- keep arrays densely packed

- use constants for instatiated vars that are the same and used more than once, e.g.

      this.scrollRect = new Rectangle(0, 0, 100, 100);

statement done more than once, make a const instead and assign it

- for loop counters, uint/int is faster than Number

- for loop over an array upper bound comparisons, assign .length to a var and compare against that

- try/catch takes longer in simple cases than checking conditions before accessing a prop, e.g.:

      try {
         ...
         len = myObject.child.child.length;
         ...
      } catch (e) {
         ...
      }

            vs.

      len = -1;
      if (myObject != null &&
          myObject.child != null &&
          myObject.child.child != null) {
         len = myObject.child.child.length;
      }

  in this example, the try/catch was 100 times slower!!!

Using Flash and Flex Together

2007-10-01T20:57:00Z

Some notes:

Flash can be used to create item rendereres used by Flex
Flash can be used to create custom containers used by Flex

Flex Component Kit (beta)
- extension for Flash CS3
- mx.flash.UIMovieClip
- mx.flash.FlexContentHolder
- Make Flex component command (JSFL script)
- Implements IUIComponent
- Currently adds 14K to your Flash SWC

To use Flex Component Kit, you need:
- Flash CS3
- Extension Mgr CS3
- Flex Builder 3
- Flex Component Kit extension

UIMovieClip -
Extends MovieClip and allows it to be used in Flex
All stuff movie clip can do, like timeline, scaling, rotate, bitmap filters, etc
Implements core Flex interfaces, allowing the component to be used inside Flex containers and as Flex skins
You must override the setActualSize method to know about component resize changes

ContainerMovieClip -
Allows you to use a Flash MovieClip as a Flex container (e.g. Panel container in Flex). Within this container you place a FlexContentHolder to define the area in which the Flex content will reside
Don't use addChild, just assign the Flex content to the content property of the ContainerMovieClip

To create the UIMovieClip In CS3

- Convert to symbol
- Commands->Convert Symbol to Flex Component
- May warn you about the frame rate (Flex default is 24fps so you need to be that or higher), you have to coordinate with Flex developer
- Note that the registration point of the movie clip must be upper left

Other commands to turn symbols into Flex Skins that can be included into a Flex app via CSS

There are stateful and stateless skins (stateless is just declaring one MovieClip per skin, stateful is a multi-frame movie clip with a stop frame)

You can now add events in Flash using meta data that Flex can pick up on

A Flash component can define an animation that plays during a view state change, where the animation corresponds to a view state transition

Blog and examples for doing all of the above stuff: velloff.com

Customizing the Flex Framework

2007-10-01T20:04:00Z

Some Notes from Customizing the Flex Framework

Customization is broken down into 4 buckets:

   - UI
   - Data Management
   - Data Display
   - Control Behavior

Customizing UI
MXML tags map to an AS class
Every tag attribute turns into a property, style, event handler
Some class have no class mapping and are hard coded into compiler (Script, Metadata, Style)
Every MXML file corresponds to a new AS class where the name of the MXML file is thename of the AS class (code be kept by turning on keep-generated-actionscript=true)
MXML objects with ids correspond to member variables of that AS class

To create an MXML object that is not visible, extend from IMXMLObject
The only method it implements is initialized(doc, id) - can be no-op

Skinning and styling infrastructure built into the framework at the component level
You can effect infrastructure built into the framework at the component level
Styles are applied to individual components or across broad sets of components
You can only get so far with styling, at some point you need to turn to skinning
Skinning: modifying the appearance of a coponent by substituting in images, SWF files, or class files, with the drawing commands
Skins represent the look of a component in its different states

Effects classs live in mx.effects.*
Paired with triggers which iniitates a Flex effect on a target component
Defaullt effects lirary includes wipe, fade, Zoom, Glow, etc
Effects split into two categories: simple (pause, sound, etc - extend from mx.effects.Effect) ... and complex (resize, zoom, etc - extend mx.efffects.TweenEffect)

Writing an Effect
1. composite via parallel and sequence
2. subclass like a custom Wipe or custom Zoom
3. Extended Effect or TweenEffect to make brand new effect (requires creating a custom effect factor and a custom effect instance class)
4. Effect factory class manages the creation/destruction of the effect instance

Customizing Data Management
Customizations can be built directly into the data mgmt classes
Custom dataDescriptor
Custom collections

Hierachical data aware controls: Tree,Menu,MenuBar,AdvancedDataGrid
These support arbitrary data
Data Descriptors are used to walk the dataProvider and describe it the control
is this node a branch or a leaf - isBranch()
what attribute on a node describes child collection (sub collection) - getChildren()
Can use a custom data descriptor to do things like (extend DefaultDataDescriptor)

lazy loading (define getChildren that loads data when this is called)
hierarchical data does not fit the format supported by the default descriptor (i.e. children field does not exist)

Managing data sets:
Can use Array, XML, XMLList as dataProviders (internally wrapped up as a collection)
Can use Flex classes to create collections (ArrayCollection, XMLListCollection)

2 interfaces for creating custom collections:
   - IList - simple interface for indexed access to linear data
   - ICollectionView - more advanced interface to access data that is not guaranteed to be linear (e.g. use to support paging)
List based controls listen for collection change event so grid updates when list changes

Customizing Data Display
List Item Renderers can be specified as attribute or inline
With inline use the <mx:Component> tag, can use outerDocument to get scope of outer document

   <mxataGridColumn ...
      <mx:itemRenderer ...
         <mx:Component ...
            <mx:VBox ...
               ...

blogs.adobe.com/aharui - blog about tips using item renderers

Validators are triggered by an event valueCommit (by default) or manaully
Specify source - object being validated, property is property on source object being validate
Base class to extend for custom validators are mx.validators.Validator

Formatters allows formatting of data for display

Customizing Conrol Behavior
Extending controls is one way (discussed in other sessions), custom meta data is another

For the most part, meta-data is only used at compile time and is stripped out of the SWF (by the linker) at optimization time so SWF size is smaller
Some metadata is kept (Bindable, Managed, ChangeEvent, etc)
The developer can control this (compiler option mxmlc-keep-as3-metadata in Flex 2)

Problem was 3rd party developers don't know what meta-data to preserve, so Flex 3 SWC libraries now declare what metadata the linker should preserve when linking in code from that library. The app preserves the union of metadata from all the libraries that contributed code to the app.

A good place to use custom meta data is for tooling, automation testing, etc. For example, use "testing directives" so that test harnesses can be run against custom components developed.

Custom meta data from code can be introspected

When bugs found in the framework:
- File a bug (bugs.adobe.com)
- Vote on bugs - promotes bugs internally so that is more likely to be fixed for the next drop
- In the meantime (till bug is fixed):
   Option 1: Extend the offending control and insert your fix
   Option 2: Copy the class into a seperate package and use your fixed version
   Option 3: Edit the offending source code directly in the mx.* directory - problematic

Creating New Flex Components

2007-10-01T18:11:00Z

Some notes from the Creating new Flex Components:

Every component extending from UIComponent in Flex experiences the component lifecycle:

   constructor
   commitProperties
   createChildren
   measure
   updateDisplayList

constructor:

- use this just to set initial properties
- do things that need to be done regardless of if component is shown on screen
- do NOT create children components or attempt to position items (component does not have enough info yet)
- constructor is called on new, other methods are called when component is added to the display list, e.g.:

   var blah:Button = new Button(); // constructor
   container.addChild(blah); // others

- in mxml, both calls are generated by placing the button tag on the page

createChildren:

- use this to create your child controls
- do NOT size or position them - ever
- at this point component does notknow how much screen space there is

measure:

- responsible for determining how big component should be in a perfect world
- it is a suggested size
- it is called by layout manager
- the issue is, to know how big your size should be, you need to know how big your children want to be
- layout manager starts at outer most component and works its way down
- measure sets measuredMinWidth, measuredMinHeight, measuredHeight, measureWidth
- these values form the basis of a "suggestion" provided by the component to its parent about how big it would like to be

updateDisplayList:

- reality check method .. it gets passed in unscaledWidth and unscaledHeight, which is the actual space it was allocated
- if you use more than this you get scrollbars
- it is respsonsible for positioning its children, which is up to your component

commitProperties:

- used to sync and coordinate property updates
- e.g. you have three props that work together, but you need all three to be set before doing something
- instead of checking flags in each property setter, you set a flag that indicates the property has changed and make a call to invalidateProperties()
- in commitProperties, you check your flags, do your work if all three properties have been set, and update your flags

You never call the lifecycle methods directly. Instead, you use:

- invalidateDisplayList ... issues updateDisplayList
- invalidateProperties ... issues commitProperties
- invalidateSize ... issues size

Calling these ensures the framework schedules a call to the method at the next appropriate time.

A note about how data binding works behind the scenes. When the compiler sees a bound expression, it just generates an anonymous event listener that re-reads the getter. For example, if you define:

[Bindable("change")]
public function get selectedIndex():int {
   ...
}

public function set selectedIndex(idx:int):void {
   ...
   dispatchEvent("change");
}

With respect to component development, Flex Builder 3 adds:

- categorization of your components in Flex Builder
- default code generation
- ability to make the properties panel show a certain custom way for your component

The speaker gives his email address and blog:

   labriola@digitalprimates.net
   blogs.digitalprimates.net/codeSlinger

Keynote Presentation Day I

2007-10-01T16:25:00Z

The keynote presentation just finished, mainly hosted by Kevin Lynch (Adobe Chief Architect).

He announces the newly launched Adobe Developer Connection a sof today/this past weekend. It's a new place for Adobe developers to go to sync up and gets ideas, do some social networking (sub-site built on Flex), and download SDKs, APIs, etc.

He goes into a discussion on Adobe Technology Platform.

Random notes:

- 70% of all video on the web is Flash

- 90% of the world upgraded to Flash 9 in one year (Kevin states this is unprecedented)

- The new Flash Player that was just released, codenamed "moviestar", includes support for H.264 video. This video format is becoming an industry standard. Supporting this format will make it easier to include contents from all new devices that are moving/have moved to this format.

- The new Flash Player supports HD video up to 1080p

- The new Flash Player has 50% faster bitmap scaling

- Kevin shows of Microsoft's Halo 3 site, which is a 3D somewhat interactive site. He states "Great job with Flash by Microsoft" which gets a good laugh

- Flash Lite 3 coming soon (available next month as beta). By 2010 1 billion phones should be able to run it

Ed Rowe speaks on AIR. Some cool things he shows off:

- AIR has an embedded SQL database which was recently added

- He shows a neat example of dragging a VCard from the desktop in to an AIR app that immediately sync's up with SalesForce.com

- Beta 2 is now available

Heidi Williams speaks on Flex 3. She highlights a few things, including the new profiler. Looks like they have a real time graph of memory usage running now as the profiler runs, very cool.

Disney shows off their travel agent AIR booking application. The speaker opens up a custom quote in the app, then drags a PNG file from the desktop into the quote, then opens a PDF file and drags just part of the PDF selected text into the quote. Then he hits generate and in milli-seconds a custom PDF quote is generated.

In another funny moment, the keyboard gets stuck. Kevin is typing in a site and it gets stuck typing in "o" repeatedly. The address bar eventually reads "ooooooooooo" which Kevin states is how he feels.

Kevin shows off more AIR programs (Paypal, Google Analytics, and an email client). He seemlessly drags content from one AIR app to another.

Kevin shows off a Facebook AIR app for instant messaging (waveim).

Kevin shows off a Nickelodean AIR app where he drags content from the Nick site into the desktop AIR app.

Adobe announces they aquired Buzzword, which Kevin calls the "first real word processor on the web." It is written in Flex and runs on the web and desktop (AIR).

There is a small discussion of the next Flash Player, code-named Astro. They mention long awaited core TextField updates for multi-language support and extensibility via ActionScript) and native support for 3D perspectives.