<destination id="myDocLitWS">
<properties>
// the location of the wsdl defined for soap proxy services
<wsdl>http://www.atomic-x.com/xmlservices/HyperlinkExtractor.asmx?wsdl</wsdl>

// the soap endpoints available for access defined for soap proxy services
<soap>http://www.atomic-x.com/xmlservices/HyperlinkExtractor.asmx</soap>
</properties>

// a specific adapter ref for the destination may be defined
<adapter ref="soap-proxy"/>
</destination>

doc-lit_example.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" verticalGap="10">

<mx:WebService id="myDocLitService" destination="myDocLitWS" result="myGrid.dataProvider=event.result">
<mx:operation name="ExtractUrl">
<mx:request>
<aUrl>{theURL.text}</aUrl>
</mx:request>
</mx:operation>
</mx:WebService>

<mx:HBox>
<mx:Label text="Enter a URL and click the button to see all the hyperlinks:"/>
<mx:TextInput id="theURL"/>
</mx:HBox>

<mx:Button label="Invoke Web Service" click="myDocLitService.ExtractUrl.send()"/>

<mx:DataGrid id="myGrid" width="100%"/>

</mx:Application>

You can go a lot of places with this kind of sample. For example, you could have notes be saved 'off-line' in a database using messaging and then have them populate every time the application is opened. Moreover, you can use DataServices to keep all note objects synchronized. This is sample is very basic, but I'll come back to it in a few days (or weeks) when I have some more time to work on it -- unless you guys build something before then.

Enjoy!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" layout="horizontal" >

<mx:Script>

<![CDATA[
import Note;

public function addNote(event:Event) {
var myNote:Note = new Note();
myNote.x=event.target.x+50;
myNote.y=event.target.y+50;
myCanvas.addChild(myNote);
}

public function deleteNote(note:Note) {
myCanvas.removeChild(note);
}

]]>
</mx:Script>

<mx:Model id="myEmployee">
<employee employeeId="5">
<firstName>John</firstName>
<lastName>Smith</lastName>
<phone>617-219-3345</phone>
</employee>
</mx:Model>

<mx:HBox id="myCanvas">
<mx:Panel id="myPanel" width="100%" height="100%" click="addNote(event)">
<mx:Label id="empid" text="{myEmployee.employee.employeeId}"/>
<mx:Label id="fname" text="{myEmployee.employee.firstName}"/>
<mx:Label id="lname" text="{myEmployee.employee.lastName}"/>
<mx:Label id="phone" text="{myEmployee.employee.phone}"/>
</mx:Panel>
</mx:HBox>
</mx:Application>

Note.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" backgroundColor="yellow" width="150" borderStyle="outset" height="150">
<mx:Script>
<![CDATA[
public function minSize() {
this.height=20;
this.width=20;
}
public function maxSize() {
this.height=150;
this.width=150;
}

]]>
</mx:Script>
<mx:VBox>
<mx:TextArea backgroundColor="yellow" width="100%" id="myTextArea" click="maxSize()"/>
<mx:HBox>
<mx:Button click="Application.application.deleteNote(this)" label="Delete"/>
<mx:Button click="minSize()" label="Save" />
</mx:HBox>
</mx:VBox>
</mx:Canvas>

To illustrate this, I've written up a simple example using the FES Sample application the Contact Manager.

<%@ page import="samples.contact.Contact,
samples.contact.ContactDAO,
java.util.Properties,
javax.naming.Context,
javax.naming.InitialContext,
javax.jms.*"%>
<%
/*

Add a name to the contact data base using the DAO. In a real world application this would be done in a transaction and the
mesage to upate would be sent only when the update is successful.

*/

Contact myContact = new Contact();
myContact.setFirstName("Eric");
myContact.setLastName( "Anderson" );

ContactDAO myDAO = new ContactDAO();
myDAO.create(myContact);
%>

<%

/*

Publish a message to a JMS queue that will key the client to update its data

*/

TopicSession _pubSession = null;
TopicSession _subSession = null;
TopicPublisher _publisher = null;
TopicConnection _connection = null;

String _providerurl = "127.0.0.1:2907";
String _ctxtFactory = "jrun.naming.JRunContextFactory";

Properties p = new Properties();
p.put(Context.PROVIDER_URL, _providerurl);
p.put(Context.INITIAL_CONTEXT_FACTORY, _ctxtFactory);
p.put(Context.SECURITY_PRINCIPAL, "admin");
p.put(Context.SECURITY_CREDENTIALS , "admin");
Context context = new InitialContext(p);
TopicConnectionFactory factory = (TopicConnectionFactory) context.lookup("jms/flex/TopicConnectionFactory");
_connection = factory.createTopicConnection();
_pubSession = _connection.createTopicSession(false, Session.AUTO_ACKNOWLEDGE);
_subSession = _connection.createTopicSession(false, Session.AUTO_ACKNOWLEDGE);
Topic topic = (Topic) context.lookup("jms/topic/flex/simpletopic");
_publisher = _pubSession.createPublisher(topic);
TopicSubscriber subscriber=_subSession.createSubscriber(topic);
_connection.start();

ObjectMessage message = _pubSession.createObjectMessage();
message.setStringProperty("userId", "");
message.setStringProperty("msg", "");
_publisher.publish(message, Message.DEFAULT_DELIVERY_MODE, Message.DEFAULT_PRIORITY, 5 * 60 * 1000);
%>

Now, all you need to do in your contactmgr.mxml is to add a message consumer as so:

<mx:Consumer id="consumer" destination="chat-topic-jms" message="getLatestData()"/>

Make sure that you call consumer.subscribe() so that the client will listen for messages.

Lastly, add the function getLatestData() which will call fill on the DataService.

public function getLatestData():void {
ds.fill(contacts, new Array());
}

Now, you should be able to update the data store with a JSP page and your Flex client will update itself without any polling needed.

This same update to remoting is available for Cold Fusion (in beta form) with the CF/Flex connectivity components available here CF/Flex Connectivity. The CF/Flex connectivity beta components includes the CF Flash Remoting update (updating the gateway to AMF3) and a Cold Fusion Event Gateway that allows CF to leverage the Flex Enterprise Services messaging feature to deliver real-time data push, pub/sub messaging and collaboration.

Happy Remoting!

After a long hiatus, I have returned to the Flex blog-o-sphere. I won't torture anyone with the long story where I go MaD; er, I mean I went and worked in Adobe's Mobile and Device division. Suffice it to say I have enough frequent flyer miles to last for a while. Nevertheless, I'm back now, working on Flex 2.

I've been working on some applications and I wanted to post some information you might find useful. One technique I use for building dynamic UIs is to add child components programmatically. The way to do this is to use the addChild method (this works in both AS 2 and AS 3) on a container -- that can either have content in it already or it could be empty.

DynamicComponent.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" backgroundColor="white">

<mx:Script>

<![CDATA[

public function createBarsToo() {

myHBox.addChild(new CustomComponent());

}

]]>

</mx:Script>

<mx:HBox id="myHBox" horizontalGap="3" backgroundColor="red" width="150" height="50"/>

<mx:Button id="myButtonToo" click="createBarsToo()" label="Create Component"/>

</mx:Application>

CustomComponent.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" backgroundColor="blue" cornerRadius="5" width="1" borderStyle="inset" height="50">

</mx:Canvas>

Below is a sample of what the demo looks like.

Enjoy!

Download AS file

Download file

Enjoy.....

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Script>

var expenses = [{Month: "Jan", Profit: 2000, Expenses: 1500, Amount:

450, LowPoints: 0, HighPoints: 2030},

{Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600,

LowPoints: 0, HighPoints: -1220}];

</mx:Script>

<mx:VBox xmlns:mx="http://www.macromedia.com/2003/mxml" height="100%"

width="100%" backgroundColor="white">

<mx:Script>

<![CDATA[

var isPrinting:Boolean = true;

function defineLabel( l:String ) : String

{

trace("Print label "+l+" = "+isPrinting);

if( isPrinting ) return "";

else return l;

}



function changeData() {



expenses = [{Month: "Jan", Profit: 2000, Expenses:

1500, Amount: 450, LowPoints: 0, HighPoints: 2030},

{Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600,

LowPoints: 0, HighPoints: -1220},

{Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300,

LowPoints: 0, HighPoints: 1900},

{Month: "April", Profit: 100, Expenses: 50, Amount: 150,

LowPoints: 0, HighPoints: 1870}];



}

]]>

</mx:Script>

<!-- main chart -->

<!-- showDataTips is set to true to show datapoint popups -->

<mx:CartesianChart id="myMainChart" styleName="mainChart"

dataProvider="{expenses}"

height="100%" width="100%" showDataTips="true">



<!-- formats grid and prints the axis labels; if categoryField property is blank then

the grid does not get formatted; **********Have not found a way to not print the labels********-->

<mx:horizontalAxis>

<mx:CategoryAxis categoryField="Month"

dataProvider="{expenses}" />

</mx:horizontalAxis>

<mx:horizontalAxisRenderer>

<!--mx:AxisRenderer title="Expenses"

labelFunction="defineLabel"/ -->

<mx:AxisRenderer labelFunction="defineLabel" />

</mx:horizontalAxisRenderer>

<!-- alternating background color and grid lines -->

<mx:backgroundElements>

<mx:Array>

<mx:GridLines direction="both" >

<mx:verticalFill>

<mx:SolidColor color="#F4F4F4" alpha="66" />

</mx:verticalFill>

</mx:GridLines>

</mx:Array>

</mx:backgroundElements>

<!-- specify lines to draw the chart data-->

<mx:series>

<mx:Array>

<!-- high/low bars (display behind chart lines -->

<mx:ColumnSeries yField="HighPoints" columnWidthRatio=".1"

minField="LowPoints">

<!-- hide shadows on columns -->

<mx:renderer>

<mx:SimpleBoxRenderer/>

</mx:renderer>

<!-- define color and opacity of bars -->

<mx:fill>

<mx:SolidColor color="#D5DEDD" alpha="100"

/>

</mx:fill>

</mx:ColumnSeries>

<mx:LineSeries yField="Profit" name="Profit">

<!-- hide line shadow -->

<mx:renderer>

<mx:SimpleLineRenderer />

</mx:renderer>

<!-- specifies thickness and color of line; weight can not be in percent and does not scale -->

<mx:stroke>

<mx:Stroke color="0x3F5FC4" weight="3"

alpha="100" />

</mx:stroke>

</mx:LineSeries>

<mx:LineSeries yField="Expenses" name="Expenses" >

<mx:renderer>

<mx:SimpleLineRenderer />

</mx:renderer>

<mx:stroke>

<mx:Stroke color="red" weight="3"

alpha="100" />

</mx:stroke>

</mx:LineSeries>

<mx:LineSeries yField="Amount" name="Amount" >

<mx:renderer>

<mx:SimpleLineRenderer />

</mx:renderer>

<mx:stroke>

<mx:Stroke color="green" weight="3"

alpha="100" />

</mx:stroke>

</mx:LineSeries>

</mx:Array>

</mx:series>

</mx:CartesianChart>



<mx:Button click="changeData()" label="Click here to change data."></mx:Button> </mx:VBox> </mx:Application>

<volumedata>
<data>
<mydata>123</mydata>
</data>
<data>
<mydata>1234</mydata>
</data>
<data>
<mydata>12345</mydata>
</data>
<data>
<mydata>123456</mydata>
</data>
</volumedata>

To access this data you might use MXML code as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" creationComplete="myService.send();">
<mx:Model id="results">{myService.result.volumedata.data}</mx:Model>
<mx:HTTPService id="myService" url="http://server/cfusion/report.cfm" showBusyCursor="true"/>
<mx:ColumnChart width="100%" height="100%" showDataTips="true" id="chart" dataProvider="{results}">
<mx:horizontalAxis>
<mx:CategoryAxis name="Flex Chart Data" categoryField="mydata" dataProvider="{results}"/>
</mx:horizontalAxis>
<mx:series>
<mx:Array>
<mx:ColumnSeries yField="mydata" name="mydata"/>
</mx:Array>
</mx:series>
</mx:ColumnChart>
<mx:HBox width="25%">
<mx:Legend dataProvider="chart" />
</mx:HBox>
<mx:HBox width="75%">
<mx:Button click="myService.send()" label="Update Data" />
</mx:HBox>
</mx:Application>

<mx:Button click="LoadRequest()" label="Get and Send Data"/>



<mx:TextArea id="txtDebug"/>

<mx:TextArea id="txtIssuerList"/>



<mx:HTTPService url="http://localhost:8700/flex/servlet/test.MyServletPrintln" contentType="application/xml" method="post" id="myService"

fault="ProcFault(event.fault.faultstring, event.fault.faultcode)" result="ProcResult(event)">

</mx:HTTPService>

</mx:Application>