Todd Rothe : Adobe Flex / Flash Developer

A client asked me to create a layer in their SOA app which would allow them to do the following;
1. Log calls to a service with their analytics software
2. Measure the response time of a service
3. Track service call timeouts and repeat the call as needed

Creating a ServiceProxy seemed like a natural choice.

For those in a hurry - my big lesson was: when assembling a dynamic call and passing params you must use ‘.apply’.
Works: ’service[serviceCall].apply( null, params );’
Broke: ’service[serviceCall]( params );’

On with the progam…
The existing ’service’ files make calls to backend services, via Proxy’s, and process the response received from the server. For example, LoginService contains a login( username, password ) function- - which passes the params as part of a call to FlickrProxy.login( username, password ) .
LoginService listens for a success/failure from FlickrProxy and processes the response accordingly.

Entere the ServiceProxy… who sits between the LoginService and the FlickrProxy.

LoginService.login(username, password) now calls ServiceProxy.makeCall( params ) which ultimately calls FlickrProxy.login(username, password). ServiceProxy.makeCall() is the perfect place to submit data to analytics and start timers immediately before or after making the call to FlickrProxy.
When a response is received from the FlickrProxy, the ServiceProxy stops timers and can submits more analytics data before/after passing the response back to LoginService.handleLogin().

In your LoginService you will now listen for events from ServiceProxy instead of FlickrProxy.

That’s the gist. Not rocket science, I know, but I had fun considering the architectural options and assembling the dynamic calls to service proxies.
Here is a hacked together (non-client specific) version of a ServiceProxy filled with comments.
If I have time I will put together a sample app using the ServiceProxy.

more posts at http://toddrothe.com

Error #1053: Illegal override of SolidFill in com.degrafa.paint.SolidFill.

Flex 3 code:

<degrafa:Surface verticalCenter="0" horizontalCenter="0">
  
  <degrafa:fills>
    <paint:SolidFill id="blue" color="#62ABCD"/>
  </degrafa:fills>
  
  <degrafa:strokes>
    <paint:SolidStroke id="black" color="#000000" alpha="1" weight="3"/>
  </degrafa:strokes>
  
  <degrafa:GeometryGroup>      
    <geometry:Circle fill="{blue}" stroke="{black}" radius="150"/>      
  </degrafa:GeometryGroup> 
  
</degrafa:Surface>

Attempt 1: Get a Flex 4 compatible Degrafa swc from Degrafa.org.

Result 1: There isn’t one… yet. Greg Drove of the Degrafa dev team has said that a Flex 4 swc is coming, but no word as to when.

Attempt 2: Create a mx.graphics.SolidColor in AS3 to use in place of the com.degrafa.paint.SolidFill.

<fx:Script>
  <![CDATA[      
    import mx.graphics.SolidColor;
    var blue:SolidColor = new SolidColor( 0x62ABCD, 3);        
  ]]>
</fx:Script>

Result 2: Fail. SolidColor and IGraphicsFill are not interchangeable. You get ‘Error #1053: Illegal override of SolidFill in com.degrafa.paint.SolidFill.’

Attempt 3: Recreate the entire Degrafa surface in using Spark.

<s:Graphic horizontalCenter="0" verticalCenter="0">
  <s:Ellipse width="300" height="300">
    <s:fill>
      <s:SolidColor id="blueFxg" color="#62ABCD"/>
    </s:fill>
    <s:stroke>
      <s:SolidColorStroke color="#000000" weight="3"/>
    </s:stroke>
  </s:Ellipse>
</s:Graphic>

Result 3: Success! This was the fail safe: the most work, guaranteed results, and kinda boring.

Error: Cannot resolve attribute ‘horizontalScrollPolicy’ for component type spark.components.BorderContainer.

Goal: Match the existing Flex 3 implementation (and design comps) which displays an image inside a scrollable container.

Flex 3 code:

<mx:Canvas width="400" height="325">    
  <mx:Image source="@Embed('assets/images/fieldUnderRoseSky.jpg')"/>
</mx:Canvas>

Attempt 1: Add the image inside a Group and set the clipAndEnableScrolling=’true’

<s:Group width="400" height="325" clipAndEnableScrolling="true">
  <mx:Image source="@Embed('assets/images/fieldUnderRoseSky.jpg')"/>
</s:Group>

Resut 1: No love. The Image gets clipped but no scrollbars appear.

Attempt 2: Add a parent Scroller to the existing Group and remove clipAndEnableScrolling

<s:Scroller>    
  <s:Group width="400" height="325">
    <mx:Image source="@Embed('assets/images/fieldUnderRoseSky.jpg')"/>
  </s:Group>    
</s:Scroller>

Result 2: Success! The Flex 4 separation of form from function, logic from layout, allows us to add scrolling functionality when we need it through the Scroller component/tag. In Flex 3 we were always setting horizontalScrollPolicy=’off’ and verticalScrollPolicy=’off’, 99 times out of 100 anyway. Well no more!
*note: Scroller automatically sets clipAndEnableScrolling to true for its children.

For more comprehensive coverage of Scroller check out the Scroller Funtional and Design Spec or Adobe’s Introduction to viewports and scrolling in Flex 4 by Hans Muller.

This is the first in a series of posts which chronicle the issues I ran into while migrating a client’s app from the Flex 3.5 SDK to the Flex 4.0 SDK

Error: “The style ‘borderThickness’ is only supported by type ‘mx.containers.Canvas’ with the theme(s) ‘halo’.”

Goal: Match the existing Flex 3 implementation (and design comps) which displays a container with a border stroke 4 px wide.

Flex 3 code :
<mx:Canvas width="100" height="100" borderStyle="solid" borderColor="0x000000" backgroundColor="0xFFFFFF" borderThickness="4"/>

Attempt 1: Tried adding compiler arg ‘-theme {FlexLibs}/flex_sdk_3.5/frameworks/themes/HaloClassic/haloclassic.swc’.

Result 1: This only created more errors : The style __________ is only supported by type ‘mx.containers.Canvas’ with the theme(s) ‘halo, spark’. Turns out that the ‘haloclassic’ theme from SDK 3.5 doesn’t qualify as ‘halo’ in this case.

Attempt 2: Tried adding compiling arg ‘-theme {FlexLibs}/flex_sdk_4.0/frameworks/themes/Halo/halo.swc’.

Result 2: Qualified success. The error is gone, but when a Spark component is added to the stage the same error appears only it references the new spark component and indicates the lack of ” the theme(s) ’spark’. ”

Attempt 3: Changed the into

<s:BorderContainer width="100" height="100" borderStyle="solid" borderColor="0x000000" backgroundColor="0xFFFFFF" borderWeight="4"/>

Result 3: Success! No more error and the BorderContainer satisfies the design requirements of a container with a border stroke 4 px wide.

* The errors chronicled in this series can be recreated by copying working code from within Flex 3 Application tags

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
     <strong>here</strong>
</mx:Application>

and pasting it between Flex 4 Application tags

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
     <strong>here</strong>
</s:Application>

Having multiple versions of FlashBuilder 4 Standard installed on my machine (beta, educational, plug-in, stand alone) I figured that one of them would be eligible for an upgrade to Premium. I found this not to be the case when I purchased an upgrade from the Adobe Store and attempted to use the resulting serial number.

Initially I filed a help ticket through the Support Portal link provided in the ‘receipt’ email. No love.
Ultimately, a refund was issued by a LivePerson chat representative and the whole process took less than 3 minutes.

The link to ‘Chat’ was near the top of the ‘Check out our list of Frequently Asked Questions’ page whose url was provided in the ‘receipt’ email.

Adobe appears to have made a good choice in using LivePerson for their chat support.
If I ever need chat support I will have to consider LivePerson.

Recently I have been working on Flex / Air apps for Arduino. For those who don’t know “Arduino is an open-source electronics prototyping platform” that lets you start building your circuits instead of having to build a board for your microcontroller before you can build your circuits. This is my favorite “getting started with Flash and Arduino” site.

FlexGarduino is available on GitHub. It consists of a FlashBuilder4 project using the Flex 4 SDK (but Halo components) which interfaces with the Arduino (Duemilanove for me) board. Currently there are 3 input sensors; light, temperature, and moisture content of soil. The readings from these sensors are stored in a database.

The database is your standard AIR generated SQLite db stored on the local file system. I am using Elad Elrom’s SQLiteManager code to encapsulate the db calls/code.
I am using StandardFirmata on the Arduino board and a small breadboard to wire up the sensor circuits.
There is a basic LineChart instantiated in the main app which will display the readings taken by the sensors, providing a display that is much more meaningful than, say, a DataGrid.

There are plenty of blog posts out there hailing the virtues of Robotlegs IoC/DI Framework, so I will skip the ’so cool’ speech and simply say 1) DI goes a long way towards keeping my view components clean and 2) working directly with AS Events, vs. PureMVC Notifications, is a welcome simplification. Dig’n Robotlegs.

After walking through the Robotlegs demo by Joel Hooks I decided to build a simple AS3 demo based on the minimalist PureMVC demo by Chandima Cumaranatunge. This app will track and trace out keystrokes with the support of Robotlegs.

To start-
Download the sample project for use as a guide.
Create an AS project called Keystroke. FYI I am working in Eclipse w/ FlexBuilder plugin
Modify the project properties to include the RobotLegs swc
In the src dir create the following directory structure

In the keystroke dir create new AS class called KeystrokeContext which extends Context from org.robotlegs.mvcs.Context
Open Keystroke.as (your main project file) and type the following inside the constructor

var context:KeystrokeContext = new KeystrokeContext();
context.contextView = this;

*make sure the import statement for your context file is included near the top of this file.

Create the View -
Create an AS class in the views dir called StageOverlay.as which extends MovieClip. This will act as our view component but do little more than receive focus and overlay the application.
Add an event listener to the constructor which fires drawStage(event) in response to ADDED_TO_STAGE. Use drawStage() to add a TextField the display list. See the sample file for details.

Return to Keystroke.as and add StageOverlay to the display list

var stageOverLay:StageOverlay = new StageOverlay();
this.addChild(stageOverLay)

Create mediator and listeners -
Create an AS class in the views dir called StageMediator which extends org.robotlegs.mvcs.Mediator.
1. inject StageOverlay and KeyDataModel (above the constructor)
2. create the onRegister() function and inside it map listeners for the native KEY_DOWN event and the custom KEYSTROKE_ADDED event and assign the handlers
3. create a handler that dispatches a StageEvent in response to KEY_DOWN
4. create a handler that updates the text field in the view with data from the model in response to KEYSTROKE_ADDED

Use Context to map mediator to view -
1. Open KeystrokeContext.as and create a startup() function
2. Inside startup() type mediatorMap.mapView( StageOverlay, StageMediator);

Create the model, events, and commands -
1. In the events dir create StageEvent.as extending Event (see sample) which will be dispatched by our StageMediator
2. In the events dir create KeyDataModelEvent.as extending Event (see sample) which will be dispatched by our KeyDataModel upon update

3. In the contollers dir create StoreKeyCommand.as extending Command. This will trigger the addKeystoke() in our model.

4. In the models dir create KeyDataModel.as extending Actor. This will contain a keystrokes:Array to store data, a function addKeystroke() to populate keystrokes, and a function get keystrokeList() to retrieve keystrokes.

Use Context to map model, event and command -
1. Open KeystrokeContext.as
2. inside startup() type injector.mapSingleton(KeyDataModel);
3. inside startup() type commandMap.mapEvent( StageEvent.KEYSTROKE_EVENT, StoreKeyCommand);

Run your new AS app and you should be in business.

more posts at toddrothe.com/blog

Thanks to all the folks who attended my presentation at the North Bay Adobe User Group. If you are interested in learning Flex then join us on the first Thursday of each month at Nor Cal Flex User Goup for an hour of hands-on coding and an hour of presentation.

Here is the list of resources from my presentation. Please email if I forgot any links.

http://toddrothe.com/blog
http://toddrothe.com/art

Radiskull
JibJab
Elephant Dreams
Open Office
OS google apps

Pattern Park

Flash frameworks
Gaia
Hype
Flixel

Flash Libs
SwfObject
Tweener
Away3D

Flex OS Projects
Flex SDK
FlexLib
Astra
Degrafa

Flex API’s
YouTube
Twitter
Facebook
GoogleMaps
Flickr
SalesForce

Nor Cal FUG has officially begun.

Thanks to all 15 attendees of the first Nor Cal FUG in Santa Rosa (really Sebastopol), California. It was a great first meeting.

In response to my posting on Craigslist regarding starting a Flex User Group (FUG) in the north bay I had expected 5 responses. Much to my surprise there were approximately 30 viable responses and a few more trickled in from word-of-mouth.
Finding a space that would not charge me $150/meeting took some time. Fortunately Marsee Henon from O’Reilly returned my call. O’Reilly is headquartered near by and, being the community minded organization that they are, offered to host NCFUG.

For our first training session, led by yours truley, we reviewed a few Flex components (Hbox, VBox, Text, Button, Image, and Script tag). Turned out to be a bit slow for the group. I’ll pick it up the pace next session.

Our first presentation, given by Ed Murphy from Conceptual Math, was on the Google App Engine as a RESTful backend for Flex. Great presentation and we are sure to hear more from Ed throughout the year.

If anyone is interested in presenting on Flex/Flash/Air related topics please send an email to todd@norcalfug.com and include a brief description of your talk.

Congratulations and thanks again to all the attendees for making this a success. Can’t wait til next month!

This is a follow up to my earlier post Free VOIP or E-Free Home Phone and may not make sense on its own.

Once you have signed up for a voip.ms account, and your voip is working, you may decide that you want a number with a local area code. Consider checking with your neighbors to see what prefix is common to your area. You may be able to match it.

Getting a number with a local area code is this easy;

• Add funds to your account Finances -> Add Funds -> do your thing
• Go to DID Numbers -> Order DID(s) -> choose your country, state, city, favorite available phone number. Mine costs $1 a month.

If you like you can configure your device to use your area code as the default, just as a standard landline does, through one settings change;

• Open you ATA config, login and switch to advanced view.
• Select Line 1 and change the value in Dial Plan to (<:1AAA>[2-9]xxxxxx|1[2-9]xx[2-9]xxxxxxS0|[2-9]xx[2-9]xxxxxxS0|*xx|*xx.|[34689]11|822|4443|4747|0|00|[2-9]xxxxxx|1[2-9]xx[2-9]xxxxxxS0|4XXX|xxxxxxxxxxxx.)
• Next, change characters 5,6 and 7 (currently AAA) to your area code.

Aaaaaaand test. Pick up your phone and dial a local number without the area code. If you have credits in your account the call should go through and you will see the charges on your voip.ms account under CDR and Reports -> Call Detail Records: filter accordingly

Hope this helps.

more posts at www.toddrothe.com/blog