Coding the Flex Components


The last parts we need to code are the actual views to display data.


Coding the Client List

The client list is the first component we will tackle. It is a list of client information containing an uploaded company logo, client name, client location, and client phone number

ClientList.mxml (com.af.clientmanager.view.ClientManager.components)


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
height="100%"
xmlns:Renderers="com.af.clientmanager.view.Renderers.*"
creationComplete="initComp()">
<mx:Script>
<![CDATA[
import com.adobe.cairngorm.control. ➥
CairngormEventDispatcher;

import com.af.clientmanager.control.commands.events. ➥
GetClientsEvent;
import com.af.clientmanager.model.ModelLocator;
[Bindable]
private var model:ModelLocator =
ModelLocator.getInstance();
private function initComp():void
{
CairngormEventDispatcher.getInstance().dispatchEvent(
new GetClientsEvent());
}
]]>
</mx:Script>
<mx:VBox width="278" height="100%">
<mx:Repeater id="rp" dataProvider="{model.clientsDP}">
<Renderers:ClientListRenderer clientData="{rp.currentItem}"/>
</mx:Repeater>
</mx:VBox>
</mx:Canvas>

ClientListRenderer.mxml (com.af.clientmanager.view.Renderers)


<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
showEffect="Fade"
width="100%" height="65"
creationComplete="setText()">
<mx:Script>
<![CDATA[
import com.af.clientmanager.model.vo.ClientVO;
import mx.effects.Fade;
import mx.effects.Blur;
import mx.effects.Parallel;
import mx.effects.Move;
import mx.core.IUIComponent;
import mx.managers.DragManager;
import mx.core.UIComponent;
import mx.core.DragSource;
import mx.controls.Alert;
import com.af.clientmanager.model.ModelLocator;

[Bindable]
public var model : ModelLocator =
ModelLocator.getInstance();
// This object is populated with the data
// passed in from the controlling control
[Bindable]
public var clientData:Object;
private function setText():void
{
clName.text = clientData.clientName;
clAddress.text = clientData.city + "," +
clientData.state;
clPhone.text = clientData.phone;
MoveItem();
}
public function MoveItem():void
{
var parallel:Parallel = new Parallel();
parallel.target = clientItem;
var blur:Blur = new Blur();
blur.blurXFrom = 5;
blur.blurXTo = 0;
blur.blurYFrom = 5;
blur.blurYTo = 0;
var move:Move = new Move();
move.target = this;
move.xFrom = -1000;
move.xTo = 0;
move.play();
parallel.addChild(blur);
parallel.addChild(move);
parallel.play();
}
private function setSelectedItem():void
{
model.selectedClient = ClientVO(this.clientData);
this.dispatchEvent(new Event("changeAddressEvent",
true)); // Bubble to parent
}
]]>
</mx:Script>

<mx:HBox id="clientItem" styleName="WeatherPanel"
width="100%" height="65"
useHandCursor="true" mouseChildren="false"
buttonMode="true" click="setSelectedItem()">
<mx:Image source="{clientData.image}" />
<mx:VBox width="100%" verticalGap="0"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Label id="clName" styleName="clientListFont"/>
<mx:Label id="clAddress"
styleName="clientListFont"/>
<mx:Label id="clPhone" styleName="clientListFont"/>
</mx:VBox>
</mx:HBox>
</mx:Canvas>


To populate the client list with data, we first need to trigger a Cairngorm event to tell the
Spring service that Flex wants client data.

CairngormEventDispatcher.getInstance().dispatchEvent(new GetClientsEvent());


This is triggered in the initComp() method that is called in the creationComplete tag for
the Canvas. The CairngormEventDispatcher will execute any event in the Cairngorm framework that is defined by the controller to handle data, or it can be used to trigger other actions in your Flex application, such as state changes. In this case, Cairngorm executes a GetClientsEvent that maps to the GetClientsCommand. This command executes a call to the business delegate ClientDelegate.getClients(). The getClients() method does not take any parameters and will return a list of client objects to the result() method in the command. The result() method then assigns the list to an ArrayCollection on the model, which is bound to from the client list Repeater.dataProvider. The data assignment will cause the Repeater to be populated with the new list of clients.

IssuesMilestonesList.mxml (com.af.clientmanager.view.ClientManager.components)


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
styleName="panelSkin">

<mx:Script>
<![CDATA[
import com.af.clientmanager.model.ModelLocator;
[Bindable]
public var model : ModelLocator =
ModelLocator.getInstance();
]]>
</mx:Script>
<mx:Label text="Issues &amp; Milestones"
styleName="heading"
y="6" x="9"/>
<mx:VBox width="100%" height="100%"
paddingBottom="10" paddingLeft="10" paddingRight="10"
y="34">
<mx:DataGrid width="100%" height="100%"
dataProvider="{model.issuesDP}"
y="49">
<mx:columns>
<mx:DataGridColumn dataField="issueStatus"
headerText="Status" />
<mx:DataGridColumn
dataField="issueDescription"
headerText="Description"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Canvas>

DocumentsList.mxml (com.af.clientmanager.view.ClientManager.components)


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
styleName="panelSkin">
<mx:Script>
<![CDATA[
import com.af.clientmanager.model.ModelLocator;
[Bindable]
public var model : ModelLocator =
ModelLocator.getInstance();
]]>
</mx:Script>

<mx:Label text="Documents"
styleName="heading"
y="6" x="9"/>
<mx:VBox width="100%" height="100%"
paddingBottom="10" paddingLeft="10" paddingRight="10"
y="34">
<mx:DataGrid width="100%" height="100%"
dataProvider="{model.issuesDP}">
<mx:columns>
<mx:DataGridColumn dataField="mediaType"
headerText="Type" />
<mx:DataGridColumn dataField="mediaName"
headerText="Document Name"/>
<mx:DataGridColumn dataField="creationDate"
headerText="Upload Date"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Canvas>


DataGrid components with dataProviders that reference ArrayCollection collections loaded on the model. Within the DataGrid tags, columns are defined to show only portions of the objects contained in the list. If you do not supply a series of columns, the DataGrid will be populated with the attributes of the entire object that is part of the dataProvider.


Coding the Client Overview

The client overview has several components that make up the contents of a TabNavigator that controls which part of the client details is visible. The first component is clientInfo.mxml, which contains the main information tied to a client, including name, address, phone, and web site. <mx:Binding> tags that bind form elements to the selected client. If you make a change to the form items, the changes are automatically stored in the selectedClient ClientVO on the model. This makes updating or deleting information easy, since a CairngormEventDispatcher can dispatch an event and add the selectedClient to the call from the model.

clientInfo.mxml (com.af.clientmanager.view.ClientManager.ClientDetailViews)


<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%">
<mx:Script>
<![CDATA[
import com.af.clientmanager.model.ModelLocator;

[Bindable]
public var model : ModelLocator =
ModelLocator.getInstance();
private function openWebSite(URL:String):void
{
var u:URLRequest = new URLRequest(URL);
navigateToURL(u,"_blank");
}
]]>
</mx:Script>
<mx:Binding source="tiName.text"
destination="model.selectedClient.clientName"/>
<mx:Binding source="tiAddress.text"
destination="model.selectedClient.addressLine1"/>
<mx:Binding source="tiCity.text"
destination="model.selectedClient.city"/>
<mx:Binding source="tiState.text"
destination="model.selectedClient.state"/>
<mx:Binding source="tiZip.text"
destination="model.selectedClient.zip"/>
<mx:Binding source="tiPhone.text"
destination="model.selectedClient.phone"/>
<mx:Binding source="tiLink.text"
destination="model.selectedClient.link"/>
<mx:PhoneNumberValidator
source="{tiPhone}"
property="text" />
<mx:Form>
<mx:FormItem label="Name" required="true">
<mx:TextInput id="tiName" width="250" height="30"
text="{model.selectedClient.clientName}"/>
</mx:FormItem>
<mx:FormItem label="Address">
<mx:TextInput id="tiAddress" width="250"
text="{model.selectedClient.addressLine1}" />
</mx:FormItem>
<mx:FormItem label="City">
<mx:TextInput id="tiCity" width="250"
text="{model.selectedClient.city}" />
</mx:FormItem>

<mx:FormItem label="State">
<mx:TextInput id="tiState" width="250"
text="{model.selectedClient.state}" />
</mx:FormItem>
<mx:FormItem label="Zip">
<mx:TextInput id="tiZip" width="250"
text="{model.selectedClient.zip}" />
</mx:FormItem>
<mx:FormItem label="Phone">
<mx:TextInput id="tiPhone" width="250"
text="{model.selectedClient.phone}" />
</mx:FormItem>
<mx:FormItem label="Web Site">
<mx:TextInput id="tiLink" width="250"
text="{model.selectedClient.link}" />
</mx:FormItem>
<mx:FormItem paddingTop="8">
<mx:HBox>
<mx:Button label="Open Web Site"
click="openWebSite(model.selectedClient.link)"/>
<mx:Button label="Upload Image"
width="100"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
<mx:VBox width="100%" height="100%" paddingTop="15">
<mx:VBox styleName="frame" minHeight="200" minWidth="300"
paddingBottom="3" paddingLeft="3"
paddingRight="3" paddingTop="3">
<mx:Image id="img" y="14" width="200"
complete="img.visible=true"/>
</mx:VBox>
</mx:VBox>
</mx:HBox>



clientDescription.mxml (com.af.clientmanager.view.ClientManager.ClientDetailViews)


<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5">

<mx:Script>
<![CDATA[
import com.af.clientmanager.model.ModelLocator;
[Bindable]
public var model : ModelLocator =
ModelLocator.getInstance();
]]>
</mx:Script>
<mx:Binding source="rteDesc.text"
destination="model.selectedClient.description"/>
<mx:TextArea id="rteDesc" width="100%" height="100%"
text="{model.selectedClient.description}" />
</mx:VBox>

clientContacts.mxml (com.af.clientmanager.view.ClientManager.ClientDetailViews)


<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
xmlns:Renderers="com.af.clientmanager.view.Renderers.*">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import com.af.clientmanager.view.Dialogs. ➥
DeleteContactConfirmationDialog;
import com.af.clientmanager.model.vo.ClientContactsVO;
import com.af.clientmanager.control.commands.events.*;
import com.af.clientmanager.model.ModelLocator;
import com.adobe.cairngorm.control. ➥
CairngormEventDispatcher;
[Bindable]
private var model:ModelLocator =
ModelLocator.getInstance();

[Embed(source="/assets/packs/cleanSkin/icon_contactDefaultImage.png")]
[Bindable]
public var imgCls:Class;
private function insertContact():void
{
var contact:ClientContactsVO = new ClientContactsVO;
// Set the client to contact relationship
contact.assocobjectID =
model.selectedClient.objectIdentifier;
contact.contactName = tiName.text;
contact.jobTitle = tiTitle.text;
contact.phoneWork = tiPhoneWork.text;
contact.phoneCell = tiPhoneCell.text;
contact.email = tiEmail.text;
contact.responsibility = tiResponsibility.text;
CairngormEventDispatcher.getInstance().dispatchEvent(
new InsertClientContactEvent(contact));
}
private function updateContact():void
{
CairngormEventDispatcher.getInstance().dispatchEvent(
new UpdateClientContactEvent(
ClientContactsVO(model.selectedContact)));
}
private function deleteContact():void
{
// Don't try to delete unless a client is selected
if(model.selectedContact.objectIdentifier > 0)
{
var pop1:DeleteContactConfirmationDialog =
DeleteContactConfirmationDialog(
PopUpManager.createPopUp(this,
DeleteContactConfirmationDialog, true));
pop1.confirmationMessageTitle =
"Delete Confirmation";
pop1.confirmationMessageBody =
"Are you sure you want to delete: " +
model.selectedContact.contactName;
PopUpManager.centerPopUp(pop1);
}
}

private function imageError():void
{
contactImage.source=imgCls;
}
]]>
</mx:Script>
<mx:Binding source="tiName.text"
destination="model.selectedContact.contactName"/>
<mx:Binding source="tiTitle.text"
destination="model.selectedContact.jobTitle"/>
<mx:Binding source="tiPhoneWork.text"
destination="model.selectedContact.phoneWork"/>
<mx:Binding source="tiPhoneCell.text"
destination="model.selectedContact.phoneCell"/>
<mx:Binding source="tiEmail.text"
destination="model.selectedContact.email"/>
<mx:Binding source="tiResponsibility.text"
destination="model.selectedContact.responsibility"/>
<mx:EmailValidator
source="{tiEmail}"
property="text"/>
<mx:PhoneNumberValidator
source="{tiPhoneWork}"
property="text" />
<mx:PhoneNumberValidator
source="{tiPhoneCell}"
property="text" />
<mx:HBox width="100%" height="100%">
<mx:VBox width="40%" height="100%" styleName="frame"
horizontalAlign="center" verticalAlign="middle"
paddingTop="10">
<mx:Label text="Contact List" styleName="heading" />
<mx:List id="contactList" width="100%" height="100%"
dataProvider="{model.contactsDP}"
labelField="contactName"
change="{model.selectedContact=
ClientContactsVO(contactList.selectedItem)}"/>
</mx:VBox>

<mx:VBox width="20%" height="100%">
<mx:HBox>
<mx:Button label="Add" width="75"
click="insertContact()"/>
<mx:Button label="Update" width="75"
click="updateContact()"/>
<mx:Button label="Delete" width="75"
click="deleteContact()"/>
</mx:HBox>
<mx:VBox styleName="frame"
paddingBottom="3" paddingLeft="3"
paddingRight="3" paddingTop="3">
<mx:Image id="contactImage"
width="100%" height="100%"
ioError="imageError()" source="{imgCls}"/>
</mx:VBox>
<mx:Button label="Upload Image" />
</mx:VBox>
<mx:VBox width="80%" height="100%">
<mx:Form width="100%">
<mx:FormItem label="Name" required="false">
<mx:TextInput id="tiName"
text="{model.selectedContact.contactName}"
width="250"/>
</mx:FormItem>
<mx:FormItem label="Title" required="false">
<mx:HBox>
<mx:TextInput id="tiTitle"
text="{model.selectedContact.jobTitle}"
width="250"/>
</mx:HBox>
</mx:FormItem>
<mx:FormItem label="Work" required="false">
<mx:HBox>
<mx:TextInput id="tiPhoneWork"
text="{model.selectedContact.phoneWork}"
width="250"/>
</mx:HBox>
</mx:FormItem>

<mx:FormItem label="Cell" required="false">
<mx:HBox>
<mx:TextInput id="tiPhoneCell"
text="{model.selectedContact.phoneCell}"
width="250"/>
</mx:HBox>
</mx:FormItem>
<mx:FormItem label="Email" required="false">
<mx:HBox>
<mx:TextInput id="tiEmail"
text="{model.selectedContact.email}"
width="250"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:VBox>
</mx:HBox>
<mx:HBox width="100%" height="20%">
<mx:Label text="Notes:" styleName="heading" />
<mx:TextArea id="tiResponsibility"
text="{model.selectedContact.responsibility}"
width="100%" height="100%" />
</mx:HBox>
</mx:VBox>

DeleteContactConfirmationDialog.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
width="0" height="0"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
creationComplete="initComp();">

<mx:Script>
<![CDATA[
import com.af.clientmanager.control.commands.events. ➥
DeleteClientEvent;
import com.adobe.cairngorm.control.CairngormEvent;
import mx.effects.Blur;
import mx.effects.Fade;
import mx.effects.Move;
import mx.effects.Parallel;
import mx.effects.Resize;
import mx.effects.easing.*;
import mx.events.EffectEvent;
import mx.controls.Alert;
import mx.managers.PopUpManager;
import com.adobe.cairngorm.control. ➥
CairngormEventDispatcher;
import com.af.clientmanager.model.ModelLocator;
[Bindable]
public var model : ModelLocator =
ModelLocator.getInstance();
[Bindable] public var confirmationMessageTitle: String;
[Bindable] public var confirmationMessageBody: String;
public function initComp():void
{
this.width = 0;
this.height = 0;
var parallel:Parallel = new Parallel();
parallel.target = this;
var resize:Resize = new Resize();
resize.target = this;
resize.widthTo = mainCanvas.width;
resize.heightTo = mainCanvas.height;
var move:Move = new Move();
move.xFrom = this.stage.width/2;
move.yFrom = this.stage.height/2;
move.xTo = this.stage.width/2 - mainCanvas.width/2;
move.yTo = this.stage.height/2 –
mainCanvas.height/2;










var fade:Fade = new Fade();
fade.alphaFrom = 0;
fade.alphaTo = 1;
var blur:Blur = new Blur();
blur.blurXFrom = 30;
blur.blurYFrom = 30;
blur.blurXTo = 0;
blur.blurYTo = 0;
parallel.addChild(resize);
parallel.addChild(move);
parallel.addChild(fade);
parallel.addChild(blur);
resize.easingFunction =
mx.effects.easing.Circular.easeInOut;
move.easingFunction =
mx.effects.easing.Circular.easeInOut;
fade.easingFunction =
mx.effects.easing.Circular.easeInOut;
parallel.duration = 600;
parallel.play();
parallel.addEventListener(EffectEvent.EFFECT_END,
effectEndHandler);
container.visible = false;
}
public function effectEndHandler(event:EffectEvent):void
{
container.visible = true;
}
private function closeDialog():void
{
var parallel:Parallel = new Parallel();
parallel.target = this;
var fade:Fade = new Fade();
fade.alphaFrom = 1;
fade.alphaTo = 0;
parallel.addChild(fade);
fade.easingFunction =
mx.effects.easing.Circular.easeInOut;

parallel.duration = 400;
parallel.play();
parallel.addEventListener(EffectEvent.EFFECT_END,
closeDialogFinal);
}
private function closeDialogFinal(event:EffectEvent):void
{
PopUpManager.removePopUp(this);
}
public function
HeaderMouseDownHandler(event:MouseEvent):void
{
this.startDrag(false);
}
public function
HeaderMouseUpHandler(event:MouseEvent):void
{
this.stopDrag();
}
private function yesClicked():void
{
CairngormEventDispatcher.getInstance().dispatchEvent(
new DeleteClientEvent(model.selectedClient));
closeDialog();
}
]]>
</mx:Script>
<mx:Canvas id="mainCanvas" width="386" height="196"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
styleName="panelSkin">
<mx:VBox width="100%" height="100%" id="container"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
paddingLeft="10" paddingRight="10"
paddingBottom="10" paddingTop="5"
verticalGap="0">
<mx:Canvas width="100%" height="15%"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
mouseDown="HeaderMouseDownHandler(event);"
mouseUp="HeaderMouseUpHandler(event);"
mouseChildren="false" buttonMode="true"
useHandCursor="true">
<mx:Image id="iconImage"

source="@Embed('/assets/images/icon_redXwarning.png')"/>
<mx:Text text="{confirmationMessageTitle}"
width="90%" height="100%" x="25" y="3"
styleName="heading"/>
</mx:Canvas>
<mx:Spacer height="3" />
<mx:HBox width="100%" height="80%"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
horizontalAlign="center" verticalAlign="middle">
<mx:Text id="txtMessageBody"
text="{confirmationMessageBody}"/>
</mx:HBox>
<mx:HBox width="100%" height="5%"
verticalScrollPolicy="off"
horizontalScrollPolicy="off">
<mx:Spacer width="90%" />
<mx:Button label="Yes" height="20" width="80"
click="yesClicked()"/>
<mx:Button label="No" height="20" width="80"
click="closeDialog()"/>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
</mx:Canvas>

The Yahoo! Maps API Component: clientLocation.mxml


<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2008 Yahoo! Inc. All rights reserved.
The copyrights embodied in the content of this file are
licensed under the BSD (revised) open source license
-->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
creationComplete="handleCreationComplete()">
<mx:Script>
<![CDATA[
import mx.core.Application;
import mx.controls.Alert;
import mx.events.ResizeEvent;
// import maps classes.
import com.yahoo.maps.api.YahooMap;
import com.yahoo.maps.api.YahooMapEvent;
import com.yahoo.maps.api.core.location.Address;
import com.yahoo.maps.webservices.geocoder.GeocoderResult;
import com.yahoo.maps.webservices.geocoder.events. ➥
GeocoderEvent; ;
import com.af.clientmanager.model.ModelLocator;
[Bindable]
public var model : ModelLocator =
ModelLocator.getInstance();
private var _yahooMap:YahooMap;
private var _address:Address;
public function set changeAddress(value:String):void
{
address = new
Address(model.selectedClient.addressLine1 + " " +
model.selectedClient.city + "," +
model.selectedClient.state);
handleCreationComplete();
}

private function handleCreationComplete():void
{
// This examples uses an application id passed into
// the app via FlashVars.
// Get your own from the Yahoo! Developer Network
// @ http://developer.yahoo.com/wsregapp/
var appid:String = model.YAHOO_APP_ID;
// Create a new YahooMap object.
_yahooMap = new YahooMap();
// List for the MAP_INITIALIZE event from YahooMap
_ yahooMap.addEventListener(
YahooMapEvent.MAP_INITIALIZE,
handleMapInitialize);
// Initialize the map, passing the app-id,
// width and height.
_yahooMap.init(appid,mapContainer.width,
mapContainer.height);
mapContainer.addChild(_yahooMap);
mapContainer.addEventListener(ResizeEvent.RESIZE,
handleContainerResize);
_yahooMap.addPanControl();
_yahooMap.addZoomWidget();
_yahooMap.addTypeWidget();
}
private function
handleMapInitialize(event:YahooMapEvent):void
{
// Creating a new address object, passing our
// address string as the single parameter.
_address = new
Address(model.selectedClient.addressLine1 + " "
+ model.selectedClient.city + "," +
model.selectedClient.state);
// Listen for the GEOCODER_SUCCESS event dispatched
// when the data comes back from the webservice.
_address.addEventListener(
GeocoderEvent.GEOCODER_SUCCESS,
handleGeocodeSuccess);

// Send the geocode request.
_address.geocode();
}
private function
handleGeocodeSuccess(event:GeocoderEvent):void
{
// Retrieve the first result returned by the
// geocoder.
var result:GeocoderResult =
address.geocoderResultSet.firstResult;
// Then we&apos;ll get the zoom level and center
//lat and lon to position the map on.
_yahooMap.zoomLevel = result.zoomLevel;
_yahooMap.centerLatLon = result.latlon;
}
private function
handleContainerResize(event:ResizeEvent):void
{
// Set the size of the map based on its
// container's size.
_yahooMap.setSize(mapContainer.width,
mapContainer.height);
}
]]>
</mx:Script>
<mx:Binding source="lblAddr.text" destination="changeAddress"/>
<mx:VBox width="100%" height="100%"
paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5">
<mx:Label id="lblAddr"
text="{model.selectedClient.addressLine1}
{model.selectedClient.city},
{model.selectedClient.state}"/>
<mx:UIComponent id="mapContainer"
width="100%" height="100%"/>
</mx:VBox>
</mx:Canvas>

Leave a Reply

Subscribe to Posts | Subscribe to Comments

About This Site

Howdy! My name is Suersh Rohan and I am the developer and maintainer of this blog. It mainly consists of my thoughts and opinions on the technologies I learn,use and develop with.

Blog Archive

Powered by Blogger.

- Copyright © My Code Snapshots -Metrominimalist- Powered by Blogger - Designed by Suresh Rohan -