dougrdotnet

I’m working on some Google Maps Flex API exercises to familiarize myself with working with the API library.

The first things to do are to sign up for a Google Maps API Key, and download the Google Maps Flex Library SWC (use the one with “Flex” in the filename).  I am following the Google Maps API For Flash Docs really closely here as this is the first time I’ve worked with the API.  In the example, to follow, my objective is to create a map where I can add an address, have it geocoded with the Google geocode service, and then display that address as a point on the map with a marker.  I want to have zoom, drag, and also to be able to click on the marker to get the point information in a marker information window.

After following through the docs, I found that it is really easy to get a basic map to render with very little code.  To do this, you can simply declare a new map object inside your main application file using the following mxml:

<maps:Map id="map" mapevent_mapready="onMapReady(event)"
 width="100%"
 height="100%"
 key="[enter API key here]"
/>

Along with the onMapReady method which handles map properties:

//called by the mapevent_mapready event in maps, instantiated in <maps:Maps...
private function onMapReady(e:MapEvent):void{
 //enable mouse wheel zoom and add the standard google zoom contorl to map
 map.enableScrollWheelZoom();
 map.enableContinuousZoom();
 map.addControl(new ZoomControl());
}

That is enough to put a global map on your screen, now we need to give the map some information.  I want to be able to provide an address and have the Google service geocode it for me.  In order to do this, I am going to need the API ClientGeocoder class.  The following method creates a new ClientGeocoder, sets up geocode event listeners, and passes the address from a TextInput into a method from the ClientGeocoder class, called geocode(String), that accepts a String argument, which will be the address.

//this method takes care of the address geocoding, handling result events
private function geocode(event:Event):void {
 geocoder = new ClientGeocoder();
 //geocoder event listeners for success or failure
 geocoder.addEventListener( GeocodingEvent.GEOCODING_SUCCESS,geoSuccess);
 geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE,geoFail);
 //geocode the address, passing in the address from textfield
 geocoder.geocode(addy.text);
}

If the geocoder returns success, the following listener method is called.  I assign the placemarks property value from the result to a variable and if it has length, I set the map center, the initial map zoom level, the map type, the marker point for the placemark, and add the marker to the map.  I also setup a listener for a click event on the marker that will call a method that creates an address information window.

//listener method if the result event returns success
private function geoSuccess(event:GeocodingEvent):void {
 //assign the placemarks value from the response
 placemarks = event.response.placemarks;
 //check and see if response returned any placemarks
 if (placemarks.length > 0) {
  //set the center of the map to the placemark point, set initial map zoom and type
  map.setCenter(placemarks[0].point,15,MapType.NORMAL_MAP_TYPE);
  //create a new marker for the placemark
  marker = new Marker(placemarks[0].point);
  //listen for a click event on the marker
  marker.addEventListener(MapMouseEvent.CLICK, addMarker);
  //add the marker on map
  map.addOverlay(marker);
 }
}

Here is the addMarker method called from the geoSuccess method.

//listener method for marker click event
private function addMarker(event:MapMouseEvent):void {
//open the placemark information window
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
}

If the result event returns failure, then I simply launch an Alert, notifying the user that geocoding failed.

Here is the resulting application thus far:

I’m going to be continuing to play with the API.  As I learn more and add to this app, I plan on successive follow-up posts which discuss additional functionality.

HTH!

#100blogs challenge Day5 http://bit.ly/4MtAfx

There are allot of applications where dynamic resizing of shapes is necessary, and useful. Dynamic data is one of the corner stones of Rich Internet Application (RIA) development. When combined with User Experience (UX) design elements, we can deliver meaningful information back to our users, creating a rich user experience, a greater degree of interest, along with interactivity. Involving our users in our applications and providing information dynamically elevates our applications dramatically from that of static content.
Dynamic resizing of shapes is just one way that we can utilize data and provide visual cues and feedback to our users, delivering meaningful information from data. In my following example, I am going to illustrate one way that dynamic resizing of shapes may be used. There are a myriad of different ways to use this technique, applied to various display objects, limited only by imagination.

Creating a UI Level Indicator

In this example, I am going to write a level indicator meter which responds dynamically to amplitude data from an audio file.  The applied use for this example would be, for instance, left and right meters for audio level indication.

Classes and Methods Used In This Example

The ActionScript Sprite Class

Sprite is a basic display object class which can display graphics.  Sprite can be a parent, meaning that Sprite can contain children.

with()

The ActionScript with method calls an object once and then allows successive properties to be accessed and modified within the with() statement.  This is a really nice convenience method, saving the need for calling the class over and over for each property.

The ActionScript Graphics Class

Graphics is a display class that provides us a means to create shapes, helper methods include: drawRect(), drawRoundRect(), drawCircle(), and drawEllipse(), I’ll be using the drawRect() method.  There are several public methods available in this class, of which I am going to use 4 in this example.

• lineStyle(thickness:Number= NaN, color:uint = 0, alpha:Number = 1.0, pixelHinting:Boolean = false, scaleMode:String = “normal”, caps:String = null, joints:String = null, miterLimit:Number = 3)
• beginFill(color:uint, alpha:Number = 1.0)
• drawRect(x:Number, y:Number, width:Number, height:Number)
• endFill()

lineStyle() is just as it reads, this method provides access to properties of the shape’s line styling, such as thickness, color, etc… as shown in the method’s properties above.

beginFill() provides access to the shape’s fill properties, such as color and alpha.

drawRect() does just that, it draws a rectangle, the available properties allow for x and y assignments, along with width and height of the rectangle.  Just gotta love self-documenting code

endFill() actually adds the fill properties to the shape, as defined in the beginFill() method.

The ActionScript SoundChannel Class

The SoundChannel class is the sound controller class.  In ActionScript, every sound is assigned to a channel, there can be multiple channels, just like having a left and right channel for stereo or having n-number of channels that may be mixed together.  In this example, I am going to be using 2 of the class’ public properties.

• leftPeak
• rightPeak

The leftPeak and rightPeak properties are read only and are used to assign the volume amplitude to the associated channels.

The ActionScript UIComponent Class

The UIComponent Class is the base class for all visual components in ActionScript.  I am going to create an instance of this class that will contain the level indicator display objects.  I will be adding this instance to the stage with all its children.

A Simple Dynamic Resizing Shape Example

In this example, the first thing I do is declare the private vars I’m going to need in the creation of left and right rectangle display objects which will, later, resize based upon dynamic data.  I also declare the SoundChannel class var and a UIComponent class var.  I then create an init method which sets up the left and right display objects and adds them to the base class levelUI UIComponent class instance.

In the onEnterFrame method, I update the left and right shape’s widths on each onEnterFrame event.  The data used to update these values is obtained from the left and right peak values accessed from the SoundChannel object.

private var channel:SoundChannel;
private var left:Sprite;
private var right:Sprite;
private var levelUI:UIComponent;

//setup left and right sprites and apply graphics style properties and positions
//on application initialization
private function init():void{
 //create the left sprite
 left = new Sprite();
 //define the left shape and properties
 with(left.graphics){
   lineStyle(0,0x00AF33,1);
   beginFill(0x00AF33,1);
   drawRect(0,0,1,5);
   endFill();
 }
 //position the left sprite
 left.y = 60;
 left.x = 20;

 //create the right sprite
 right = new Sprite();
 //define the right shape and properties
 with(right.graphics){
   lineStyle(0,0x00AF33,1);
   beginFill(0x00AF33,1);
   drawRect(0,0,1,5);
   endFill();
 }
 //position the right sprite
 right.y = 75;
 right.x = 20;

 //add left and right sprites as children to the levelUI display object
 levelUI.addChild(left);
 levelUI.addChild(right);
 //add levelUI to the display
 this.addChild(levelUI);
 }

//I want the shape's sizes to update at the beginning of entry into each frame
//A movie at 24 frames per second will call this method, using the onEnterFrame
//event, 24 times per second.
private function onEnterFrame(event:Event):void{
 //check and see if a sound channel object already exists
 if(channel != null){
   left.width = 50 * channel.leftPeak; //set the left shape's width
   right.width = 50 * channel.rightPeak; //set the right shape's width
 }
}

There is a bit more to do here in order to write a functional prototype that updates dynamically.  Namely, we need a sound object that holds the actual sound file.  This is beyond the scope of this article, however, additional information may be found in the livedocs.

HTH!

#100blogs challenge Day2 http://bit.ly/4MtAfx

Often, designers provide me with specifications which include non-standard font types.  In order to ensure that users view my application’s fonts as I intend, it is necessary to embed these fonts into Flex.  Not doing so can create issues with meeting requirements, problems with layout when user’s browser’s substitute the closest font match (that doesn’t really match at all), and it is simply good practice.  Embedding fonts allows me to create a unified and custom visual appearance that will set an application apart from others using standard font types.  Of course, if you are using standard font types, such as Times New Roman or Arial, for instance, then embedding isn’t necessary.

Embedding fonts in Flex applications is a pretty simple process of creating a SWF in Flash with the font embedded within.  By font, I do mean singular, it is best practice to create a single SWF for each font style to be used in your application.  Ok, lets get started.

First, launch Flash and create a new Flash file named font_bold.fla, save the FLA to a location in your project (I usually create a directory named FLA, outside my SRC directory where it won’t be compiled into application but will always be available right in the project tree).  Note – the font you wish to embed into your Flex application needs to exist on your development machine.  Once you have created your new Flash file, add a new dynamic checkbox to the stage, it doesn’t matter where, it doesn’t matter what color or size as these attributes can be controlled in your Flex application’s styles.  I like to type the name of the font face in the textbox so that it is immediately evident what font I’m working on.  In the properties panel, name the instance and make sure that its type is “Dynamic Text”, as shown below.

The next step is to actually embed the font.  In order to accomplish this, I need to expand the properties panel, if not already, and access the “Character Embedding” menu.

When choosing the embedded character sets, its really important to choose only those sets that will be needed in your application.  Embedding fonts can come with the expense of sizable SWF files, so limiting the character sets can aide in reducing the size of the embedded font SWF.  Below, I have chosen only the sets that are required for my app (highlighted in blue), these are probably the same ones which will be needed in most instances.  Select your desired character sets and click “OK”.

At this point, I am ready to save and publish font_bold.fla.  Be sure to check and adjust your publish settings, in File>Publish Settings, I only need a Flash (.swf), the filename should be font_bold.swf by default.  This will save the .swf in the same folder as my FLA, I wish to save it to a different location, a directory named swf which is inside an assets directory under my src directory.  Once I have my publish settings configured, all I need to do is publish.  At this point, I am done in Flash and am moving over to Eclipse to work on my Flex project.

In my main application file, I need to embed the swf file into my application, inside an mx:style tag set.

@font-face
{
  src: url("../assets/fonts_bold.swf");
  font-family: "ConduitITCStd Bold";
}

Now, I can assign the embedded font to my text styles within my application, just as I would with any standard system font.  I do this in my style sheet as follows:

In my main application file I set an mx:style source to the path of my css file.

<mx:Style source="../assets/skins.css" />

In my styles.css file I add the following (along with any other style attributes required):

.moreBoldText
{
  font-family: "ConduitITCStd Bold";
}

Repeat this procedure for each embedded font.
HTH!

#100blogs challenge Day1 http://bit.ly/4MtAfx

This is a nice little gem I wanted to share. I needed to display the current version of my application in the startup screen, when the user launches the app. I’ve already been updating this as I push releases to my update server where my updater xml file is located. At first I was going to just do a request for that xml document but then thought I’ve already got the version locally in the app.xml file, why not get it from there and not have to have the request.

I’m using Cairngorm so I wrote a command class to do this for me.

package com.dougrdotnet.commands
{
	import com.adobe.cairngorm.commands.ICommand;
	import com.adobe.cairngorm.control.CairngormEvent;
	import com.dougrdotnet.model.StatusModelLocator;

	import flash.desktop.NativeApplication;

	public class GetAppXMLVersionCommand implements ICommand
	{
		private var statusModel:StatusModelLocator = StatusModelLocator.getInstance();
		public function execute(event:CairngormEvent):void
		{
		   var descriptor:XML = NativeApplication.nativeApplication.applicationDescriptor;
		   var ns:Namespace = descriptor.namespace();
		   var version:String = descriptor.ns::version;
		   statusModel.version = version;
		}

	}
}

What i’ve done is use the NativeApplication class’ applicationDescriptor property to get the XML from app.xml. I set a variable to hold the namespace value from the descriptor xml. Then I go in and get the version node using descriptor.ns::version. Then, in this case, I am assigning the version string to a Model variable so that I can use it wherever that model singleton exists. Certainly, this method could simply return version to supply the value to the caller.

A reader asked me a question about taking a date stored as a string and manipulating it so as to remove sub-strings. This is really simple in ActionScript, using the replace method. The replace() method is used to find a match in a particular string and then replace it with some other string inside the parameters of the method, such as string.replace(pattern, repl);

From Livedocs ( http://livedocs.adobe.com/flex/201/langref/String.html#replace() )

replace(pattern:*, repl:Object):String
Matches the specifed pattern against the string and returns a new string in which the first match of pattern is replaced with the content specified by repl.

The reader needed to take a date formatted as such – 15:07:47.001.850.000 and end up with a string formtted like the following – 50747001850.
As I said this is really simple using replace and just a little bit of RegEx:

private function init():void {

    var dateStr:String = "15:07:47.001.850.000";

    var d:String = stringReplace(dateStr);

    trace(d); // Output is 150747001850

}

    private function stringReplace(value:String):String {
    var v:String = value;
    v = v.replace(/:/g, "");
    v = v.replace(/\./g, "");
    var re:RegExp = new RegExp("000$");
    v = v.replace(re, "");

    return v;
}

In the init method, I’ve set the variable dateStr to the value of the string that needs to be manipulated. Next, I’ve set the variable d to the value of the result of the stringReplace() method which follows, passing in the original string. In the stringReplace() method, which accepts the string parameter named value, I assign value to the variable v. Next, using the replace() method, I search the string for any ‘:’ characters. The reason it will search the entire string is that I’ve used the global (g) flag in the expression. Then note that the second parameter of the replace method I’ve specified an empty string. This will replace any ‘:’ with “” (nothing). I’ve done the same in the second replace() method, only removing periods from the string and replacing with an empty string. The next line I create a new RegExp object so that I can use the following RegExp(“000$”) in order to remove the trailing 000. The $ in the expression applies the pattern match to the end of the string, so as to not remove any instances of 000 that might exist anywhere other than the end of string. This way if the original string is provided from a dynamic source there is no worry of removing zeros anywhere other than the end of string. I then run the replace() method a last time and apply the RegExp as the pattern and replace it with an empty string. When I return the modified string the result is the formatted string as needed for other parts of the application, shown in trace output.

The creation of an event which occurs in the View

In Part II I outlined how I wish to walk through the process of creating functional prototypes by incorporating the Business Delegate found within the Cairngorm Architecture. I am beginning from the View down since we are approaching development from a prototypical point of view. The object is to get a functional prototype developed as quickly as possible without the need for development of the data tier. As I’ve mentioned in Part II, we will be developing our data requirements and will know exactly what our back-end requirements will be when finished, but that is actually a bi-product of what we are doing. Additionally, we won’t be locked into any particular technology for the back end, we will have the added benefit of determining our data tier needs while developing our prototype.

In this section we will be concentrating on the view with a simple example using the Cairngorm Event model. Lets suppose that we have a view which contains a simple member intake form in a Panel container for which we wish to store data upon submit.

<mx:Script>
     <!--[CDATA[
          import mx.controls.Alert;
          import com.adobe.cairngorm.control.CairngormEvent;

          //Save the member's data
          private function saveMember():void{
               //check to see if form fields have data
               if(fname.text != "" || lname.text != ""){
                    //create a new Cairngorm Event
                    var event:CairngormEvent = new CairngormEvent("saveMember");
                    //create a generic object to hold form data to be passed on event
                    event.data = new Object();
                    event.data.fname = fname.text;
                    event.data.lname = lname.text;
                    event.dispatch();
                    //If the form was not filled in correctly, alert the user
               }else{
                    Alert.show("Please enter member first name and last name in form","Empty Form Fields";
               }
          }
     ]]-->
</mx:Script>

Its pretty straight forward, create a new event of type CairngormEvent and pass a string of “saveMember” as the event identifier. Additionally, I’ve created a generic object to hold the data from a form which contains a member’s first name and last name. I will be passing this data on to be stored in memory during testing and later will actually be passed onto a remote object to do something with it. Finally dispatching the event. I’ve got the event contained within a condition here to check to make sure that the form fields have been completed by the user, if not an alert pops up letting the user know. saveMember(), in this case, would perhaps be called on the click event of a button.
In the next installment I will discuss the Cairngorm Control class and how it ties together the event with the appropriate command to associate with the event.

<< Previous Next >>

I had the opportunity to be interviewd by Dan Florio of polygeek regarding my series, in progress, about Prototyping Using Business Delegate.  I talk about an overview of what i am doing, some challenges related to writing the series, and the benefits of using the Business Delegate pattern for developing prototypes.  I had a great time doing the interview, my first, and Dan was quite a gracious host – so thank you Dan!