]]>
private var _filterFunction:Function;
public function get filterFunction():Function {
return _filterFunction;
}
/**
* Applies this filter function to the children of every node.
* @param value
*/
public function set filterFunction(value:Function):void {
_filterFunction = value;
}
In order to apply the filter to the children of the data provider we can override getChildren() and, before returning the collection of children, apply the filter function:
override public function getChildren(node:Object, model:Object=null):ICollectionView {
var collection:ICollectionView = super.getChildren(node, model);
if (collection && (collection is ListCollectionView)) {
(collection as ListCollectionView).filterFunction = _filterFunction;
}
return collection;
}
Note that this will work only for classes extending ListCollectionView (obviously Array is out o the picture) and that we also do not need to specifically call refresh() on the children collection, as it will be called later by the framework itself. All that's left now is to assign the newly created tree descriptor to a Tree and pass it the proper filter function(s).
]]>
function( p_client, p_autoSenseBW )
{
...
if (p_autoSenseBW)
p_client.checkBandwidth();
else
p_client.call("onBWDone");
}
application.onConnect is unsurprisingly a function called when a client connects to a FMS, the last if-block checks for the p_autoSenseBW flag; if it's present and true, a routine that checks the client bandwidth is called and does a callback on onBWDone when finished, otherwise onBWDone is called directly.
The bandwidth check can be called programmatically as well:
nc.call("checkBandwidth", null);
where nc is our NetConnection after a successful connection to the server.
Why you can need to check the upload
Sometimes you can need a bandwidth check from client to server, i.e. the upload bandwidth a client has toward the server. The most common scenario is a streaming from a client webcam. Via Actionscript we are able to adjust the camera quality affecting directly the amount of data transferred from the client, the best we can do is to get the best stream quality using all the bandwidth at our disposal; this will result in a smooth and good quality flv.
We can use the same approach used in Flash Media Server for the download bandwidth check. Basically the server starts sending chunks of data bigger and bigger until a size limit specified in the configuration or a timeout is reached. More info here http://www.adobe.com/livedocs/flashmediaserver/3.0/docs/help.html?content=08_xmlref_057.html#216930
Server side code
We can just do thinks the other way round, so the first thing we need server side is a function that accepts data from the client and subsequently calls a callback:
Client.prototype.recData = function(data)
{
trace('recData('+data.size+')')
var s = this.getStats();
this.call("ack", 0, s.ping_rtt);
};
This server side code makes available to all clients a method called "recData" that takes as input generic data and calls a client side method "ack" passing the round trip time between client and server.
Client side code
The client will call the "recData" function on the server until a certain condition is met
startUploadTime=new Date().time;
_netConn.call("recData", new Responder(onRecDataResult, onRecDataFault), data);
we are calling the server side function passing a responder (not used) and the data. The data can be a simple string filled with a cycle (es. 4096 chars for 4KB). The "ack" method can be something like this:
public function ack(result:*):void
{
finishUploadTime=new Date().time;
var rtt:Number=new Number(result);
// calculate time considering round trip time
var totalTime:Number=(finishUploadTime - startUploadTime - rtt) / 1000;
// calculate current bandwidth, current data size is base size * attempt number
var bw:Number=UPLOAD_DATA_SIZE*(current_try+1) / totalTime;
// check the attempts limit
if (current_try < UPLOAD_BANDWIDTH_REPEATS)
{
// use a sum to make a final average
bw_sum+=bw;
// check the timeout limit
if(totalTime>MAX_WAIT) {
// set the bandwidth calculated so far
if (Camera.getCamera())
Camera.getCamera().setQuality(int(bw_sum / (current_try)), 0);
uploadTestFinished = true;
return;
}
// increase data size
current_data += data;
current_try++;
startUploadTime=new Date().time;
// recall the server side method
_netConn.call("recData", new Responder(onRecDataResult, onRecDataFault), current_data);
return ;
}
// Attempts limit reached, calculated the bw
if (Camera.getCamera())
Camera.getCamera().setQuality(int(bw_sum / (current_try)), 0);
}
Use the result to set up camera quality
ActionScript gives us a useful method to set up the camera quality: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/Camera.html#setQuality()
In our case we will set the bandwidth limit as found with our routine and set the quality to 0, i.e. the best quality supported by the current bandwidth.]]>
@Component
public class MyService{
@Autowired
private MyBean bean;
@PostConstruct
protected void init() {
//init operations
}
Don't forget to add the SpringBeanName parameter in your services.xml:
<parameter name="SpringBeanName" >myService</parameter>
Annotations simplify your life reducing time spent configuring every bean you need in your application and using them in Axis allows you to build complex WebServices with less code.
Have fun.]]>
<config xmlns="http://www.xfa.org/schema/xci/1.0/">
<agent name="designer">
...
</agent>
<present>
<!-- [0..n] -->
...
and put the <validate> element into the <present> element:
<config xmlns="http://www.xfa.org/schema/xci/1.0/">
<agent name="designer">
...
</agent>
<present>
<!-- [0..n] -->
<validate>prePrint preSubmit </validate>
...
When you are done making the change, click on the Design View tab and make sure you say “yes” to have your changes applied.
With the release of XFA 2.8 and Acrobat/Reader 9.0, the <validate> element is now located under the <acrobat> element in the Source XML:
<config>
...
<acrobat>
...
<validate>prePrint </validate>
...
</acrobat>
...
</config>
With this Validation Object we can stop only Print, Submit and Execute actions. The Save action can not be stopped by the Validation Object (I think because an user would like to save a Pdf without filling all the fields and complete them in a second time).
Here are two examples: the first does not have the validation object in XML Source (here) while the second has this object built for the prePrint and preSubmit events (here).
Enjoy
]]>
]]>
Let's have a look to the Pantaste Library, exploring her feature trough examples, divided by interests:
HelloWorld
Switching dashed, snapped or free
Tile and Cascade panels in a container
Manual control panels ( minimize, maximize, restore )
Listen containers change
Apply constraint to Panels
Styling panels
Freeze panels
This first example show how to implement a simple Panel and the relative container:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:components="com.comtaste.pantaste.components.*"
layout="vertical">
<components:DashPanelContainer width="100%" height="100%">
<components:DashPanel
title="HelloWorld"
titleBarHeight="30"
backgroundAlpha="1"
backgroundColor="#CCCCCC">
<mx:VBox
backgroundAlpha="1"
backgroundColor="#FFFFFF" >
<mx:Label text="Hello World from Pantaste Panel!" />
</mx:VBox>
</components:DashPanel>
</components:DashPanelContainer>
</mx:Application>
Now let’s look how to switch the container type, between dashed, snapped or free to move:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:components="com.comtaste.pantaste.components.*"
layout="vertical">
<mx:Script>
<![CDATA[
import com.comtaste.pantaste.components.DashDock;
]]>
</mx:Script>
<mx:HBox>
<mx:NumericStepper
id="snapSizer"
minimum="1"
maximum="500"
change="dashContainer.snapSize = snapSizer.value;"
visible="{dashContainer.snapped}" />
<mx:Button
toggle="true"
label="Snap"
click="dashContainer.snapped = !dashContainer.snapped;"
selected="{dashContainer.snapped}" />
<mx:Button
toggle="true"
label="Dash"
click="dashContainer.dashed = !dashContainer.dashed;"
selected="{dashContainer.dashed}" />
<mx:Button
toggle="true"
label="Free"
click="dashContainer.dashed = false; dashContainer.snapped = false;"
selected="{!dashContainer.snapped && !dashContainer.dashed }" />
</mx:HBox>
<components:DashPanelContainer
id="dashContainer" width="100%" height="100%">
<components:DashPanel
title="Panel 1"
titleBarHeight="30"
backgroundAlpha="1"
backgroundColor="#CCCCCC">
<mx:VBox
backgroundAlpha="1"
backgroundColor="#FFFFFF" >
<mx:Label text="Here the content!" />
</mx:VBox>
</components:DashPanel>
<components:DashPanel
title="Panel 2"
titleBarHeight="30"
backgroundAlpha="1"
backgroundColor="#CCCCCC">
<mx:VBox width="100%" height="100%"
backgroundAlpha="1"
backgroundColor="#FFF000" >
<mx:Label text="Content 2!" />
</mx:VBox>
</components:DashPanel>
</components:DashPanelContainer>
</mx:Application>
It’s also possible to manual control panels on a container, like tile or cascade all panels. To do this we need to use the DashLayoutManager, a multiTon class that maps containers trough container id’s.
To use the DashLayoutManager of a specific container you have to reference to it trough the id:
DashLayoutManager.getManager( containerID ).
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
xmlns:blocks="blocks.*">
<mx:Script>
<![CDATA[
import com.comtaste.pantaste.manager.DashLayoutManager;
private function tile( containerId:String ) : void
{
DashLayoutManager.getManager( containerId ).tile( );
}
private function cascade( containerId:String ) : void
{
DashLayoutManager.getManager( containerId ).cascade( );
}
]]>
</mx:Script>
<mx:HBox>
<mx:Button label="Tile Container 1" click="tile( dashContainer1.id );" />
<mx:Button label="Tile Container 2" click="tile( dashContainer2.id );" />
<mx:Spacer width="100" />
<mx:Button label="Cascade Container 1" click="cascade( dashContainer1.id );" />
<mx:Button label="Cascade Container 2" click="cascade( dashContainer2.id );" />
</mx:HBox>
<blocks:TwoPanels id="dashContainer1" />
<blocks:TwoPanels id="dashContainer2" />
</mx:Application>
Now let’s see how to control every panel programmatically, to maximize, minimize and restore its. To do this we have to use the DashPanelEvent class. So we don’t have any api to control, but we must use events.
First define the event:
var minimizeEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.MINIMIZE, myPanel );
var maximizeEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.MAXIMIZE, myPanel );
var restoreEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.RESTORE, myPanel );
and then dispatch the event:
myPanel.dispatchEvent( maximizeEvent );
myPanel.dispatchEvent( maximizeEvent);
myPanel.dispatchEvent( restoreEvent);
Example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:components="com.comtaste.pantaste.components.*">
<mx:Script>
<![CDATA[
import com.comtaste.pantaste.events.DashPanelEvent;
private function manualMinimize( ) : void
{
var minimizeEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.MINIMIZE, myPanel );
myPanel.dispatchEvent( minimizeEvent );
}
private function manualMaximize( ) : void
{
var maximizeEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.MAXIMIZE, myPanel );
myPanel.dispatchEvent( maximizeEvent );
}
private function manualRestore( ) : void
{
var restoreEvent:DashPanelEvent = new DashPanelEvent( DashPanelEvent.RESTORE, myPanel );
myPanel.dispatchEvent( restoreEvent );
}
]]>
</mx:Script>
<mx:HBox>
<mx:Button label="Maximize" click="manualMaximize();" />
<mx:Button label="Minimize" click="manualMinimize();" />
<mx:Button label="Restore" click="manualRestore();" />
</mx:HBox>
<components:DashPanelContainer width="100%" height="100%">
<components:DashPanel
id="myPanel"
title="My Manual Controlled Panel"
titleBarHeight="30"
backgroundAlpha="1"
backgroundColor="#CCCCCC">
<mx:VBox
backgroundAlpha="1"
backgroundColor="#FFFFFF" >
<mx:Label text="Minimize, maximize and restore me!" />
</mx:VBox>
</components:DashPanel>
</components:DashPanelContainer>
</mx:Application>
The Pantaste dash container ( DashPanelContainer class ), propagate an event to inform you that something happened. Information that you can obtain is about panels and this is the type:
All we have to do is listening on the “pantasteChanged” event defined by the DashPanelContainerEvent class. This class will provide to us the changedTypeEvent, the panel caused the change and the container were is placed.
Example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:blocks="blocks.*">
<mx:Script>
<![CDATA[
import com.comtaste.pantaste.events.DashPanelContainerEvent;
private function onPantasteChange( event:DashPanelContainerEvent ) : void
{
infoPanel.text += "\n Panel " + event.panel.title + " changed: " + event.changeType + " on container " + event.pantaste.id;
infoPanel.verticalScrollPosition = infoPanel.maxVerticalScrollPosition;
}
]]>
</mx:Script>
<mx:HBox width="100%">
<mx:TextArea width="100%" height="60" id="infoPanel" />
</mx:HBox>
<blocks:TwoPanels id="dashContainer1" pantasteChanged="onPantasteChange( event );" />
<blocks:TwoPanels id="dashContainer2" pantasteChanged="onPantasteChange( event );" />
</mx:Application>
Setting constraint to the panels, let you the ability to control some default settings:
To implement this you can simply set the correspondent property of the panel.
Example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:components="com.comtaste.pantaste.components.*">
<mx:HBox>
<mx:Button toggle="true" label="minimizable" click="myPanel.minimizable = event.target.selected" selected="{myPanel.minimizable}" />
<mx:Button toggle="true" label="maximizable" click="myPanel.maximizable = event.target.selected" selected="{myPanel.maximizable}" />
<mx:Button toggle="true" label="resizable" click="myPanel.resizable = event.target.selected" selected="{myPanel.resizable}" />
<mx:Button toggle="true" label="closable" click="myPanel.closable = event.target.selected" selected="{myPanel.closable}" />
<mx:Button toggle="true" label="draggable" click="myPanel.draggable = event.target.selected" selected="{myPanel.draggable}" />
<mx:Button toggle="true" label="always in front" click="myPanel.alwaysInFront = event.target.selected" selected="{myPanel.alwaysInFront}" />
</mx:HBox>
<components:DashPanelContainer width="100%" height="100%">
<components:DashPanel
id="myPanel"
title="My Panel"
titleBarHeight="30"
backgroundAlpha="1"
backgroundColor="#CCCCCC">
<mx:VBox
backgroundAlpha="1"
backgroundColor="#FFFFFF" >
<mx:Label text="{'minimizable:' + myPanel.minimizable}" />
<mx:Label text="maximizable: {myPanel.maximizable}" />
<mx:Label text="resizable: {myPanel.resizable}" />
<mx:Label text="closable: {myPanel.closable}" />
<mx:Label text="draggable: {myPanel.draggable}" />
<mx:Label text="always in front: {myPanel.alwaysInFront}" />
</mx:VBox>
</components:DashPanel>
</components:DashPanelContainer>
</mx:Application>
To style the pantaste components you need to use styles. So create a style.css file and include into your application:
<mx:Style source="/assets/style.css" />
DashPanel
{
background-image: Embed(source="assets/FlexSkin_FOB.swf", symbol="Panel_smallBase");
background-size: "100%";
}
.minimizeButton
{
upSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_UpMin");
overSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_OverMin");
downSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DownMin");
disabledSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DisabledMin");
}
.maximizeButton
{
upSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_UpMax");
overSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_OverMax");
downSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DownMax");
disabledSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DisabledMax");
}
.restoreButton
{
upSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_UpMax");
overSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_OverMax");
downSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DownMax");
disabledSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_DisabledMax");
}
.dockedButton
{
upSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_PanelUp");
overSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_PanelOver");
downSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_PanelDown");
disabledSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_PanelDisabled");
}
.closeButton
{
upSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_CloseUp");
overSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_CloseOver");
downSkin: Embed(source="assets/FlexSkin_FOB.swf", symbol="Button_CloseDown");
}
.titleBarText
{
fontWeight: bold;
color: #555555;
}
Setting the icon image:
icon='@Embed(source="assets/FlexSkin_FOB.swf", symbol="Icon_music")'
Also you can set the x nad y offset position, if you want to change it:
iconXOffset="-8" iconYOffset="-8"
You can set the height of the title bar and if you want to show the title:
showTitleText="false"
titleBarHeight="35"
Example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:components="com.comtaste.pantaste.components.*">
<mx:Style source="/assets/style.css" />
<components:DashPanelContainer width="100%" height="100%">
<components:DashPanel
title="Styled panel" showTitleText="true" titleBarHeight="35"
iconXOffset="-8" iconYOffset="-8"
icon='@Embed(source="assets/FlexSkin_FOB.swf", symbol="Icon_travel")' >
</components:DashPanel>
</components:DashPanelContainer>
</mx:Application>
An interesting feature of pantaste is that you can freeze panel, showing a loader progress bar, and remove it when you want.
Simple you must call myPanel.startLoad( ) to freeze and show the progress bar and myPanel.stopLoad( ) to hide the progressbar and defreeze.
Example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:components="com.comtaste.pantaste.components.*"
layout="vertical">
<mx:HBox>
<mx:Button label="Start" click="myPanel.startLoad( );" />
<mx:Button label="Stop" click="myPanel.stopLoad( );" />
</mx:HBox>
<components:DashPanelContainer width="100%" height="100%">
<components:DashPanel
id="myPanel"
title="Freeze and defreeze"
titleBarHeight="30"
backgroundAlpha="1"
backgroundColor="#CCCCCC">
<mx:VBox
backgroundAlpha="1"
backgroundColor="#FFFFFF" >
<mx:Label text="Loader panel!" />
</mx:VBox>
</components:DashPanel>
</components:DashPanelContainer>
</mx:Application>
]]>
I created a very simple application as an example that has two pages Start and End, where you can click on a button “click here” to switch to different states/pages.
In Flash Catalyst interface you can find the states also on the left side of the Timeline. Here you find the States transitions panel, remember that in this tools transitions are taken as separate parts of the entire navigation, this means that you must put properties thinking of a "round trip".
When you double click on components their states are displayed on the same part where the pages/elements are and this can be a little bit tricky, maybe the component state should be represented in a different way, graphically speaking. Anyway as in Flash, we can always go back to the previous element using the menu up on the left side of the stage.
We can say that the states represent the condition/status of pages and components, more generally the concept indicate what an element is doing before and when users interact with it.
]]>
hideEffect/showEffect and toolTipClass, with which you can change the UI for all your tooltips; the ToolTipManager lets you create and destroy tooltips progamatically also with the two methods createToolTip and destroyToolTip.
In this post I want to show you how to customize a tooltip in a specified view only, without interfere with the rest of your application. You can use two strategies:
- manage the popup by yourself, creating/destroying it and let it interact with the mouse events
- use the tooltip manager
We are going to explore the latter.
The UIComponent class dispatches some tooltip related events:
- toolTipCreate Dispatched by the component when it is time to create a ToolTip. UIComponent
- toolTipEnd Dispatched by the component when its ToolTip has been hidden and will be discarded soon. UIComponent
- toolTipHide Dispatched by the component when its ToolTip is about to be hidden. UIComponent
- toolTipShow Dispatched by the component when its ToolTip is about to be shown. UIComponent
- toolTipShown Dispatched by the component when its ToolTip has been shown. UIComponent
- toolTipStart Dispatched by a component whose toolTip property is set, as soon as the user moves the mouse over it.
The first one is dispatched before the effective creation of the tooltip. This event has a writable property called toolTip that can be used to specify a custom class to be created in place of the standard one (that is the class specified in ToolTipManager.toolTipClass).
You have to implements the IToolTip interface that has two properties:
- screen : Rectangle
- text : String
You get the screen property extending the UIComponent class, so you have to implement only a setter/getter for text.
Actually using this property is not necessary, let's see an example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.core.IToolTip;
import mx.events.ToolTipEvent;
private function toolTipCreateHandler(event:ToolTipEvent):void
{
var tooltip:IToolTip = new CustomToolTip();
tooltip.width = 200;
tooltip.height = 100;
event.toolTip = tooltip;
}
]]>
</mx:Script>
<mx:Button label="ToolTip example" toolTip=" " toolTipCreate="toolTipCreateHandler(event)" />
</mx:Application>
and the tooltip class
package
{
import mx.containers.Canvas;
import mx.controls.Label;
import mx.core.IToolTip;
public class CustomToolTip extends Canvas implements IToolTip
{
private var helloWorld:Label;
public function CustomToolTip()
{
setStyle("backgroundColor", 0xffffff);
}
override protected function createChildren():void
{
if(!helloWorld)
{
helloWorld = new Label();
helloWorld.text = "Hello world";
addChild(helloWorld);
}
}
public function get text():String
{
return null;
}
public function set text(value:String):void
{
}
}
}
As you can see we are not using the text property of the ITooltip interface, but it's important to note that we have to set tooltip to something different than null or empty string otherwise the TooltipManager will not be activated.
]]>
<Serializable()> Public Class Person
Public idPerson As Integer
Public name As String
Public surname As String
End Class
Public Class DBManage
Function tryPerson() As Person
Dim p As Person
p = New Person()
p.idPerson = 1
p.name = "Mario"
p.surname = "Rossi"
Return p
End Function
End Class
Public Class DBDelegate
Public Function tryPersonWebOrb() As Person
Dim db As DBManage
db = New DBManage()
Return db.tryPerson()
End Function
End Class
with these classes we can create a small DLL file, called weborbTrial.dll.
Before building the client we have to configure the Virtual Directory in IIS in which we will install the Weborb classes and also the client application. So we have to create a virtual directory in our IIS with permission of write and read. For information on how to install Weborb in this Directory you can see my last post.
After the installation we can carry on building the client application. First of all we have to copy into the subdirectory “bin” of our Weborb directory the weborbTrial.dll file. After we can start to create a new Flex Project. Open your Flex Builder and create a new Project. In the first screen insert the name of the Project, select the Flex Checkbox and choose the ASP.NET server configuration and click Next.
In the second screen in the web application Run field insert the URL of our virtual directory and the field below insert the locale directory of the application; then in the last field insert the bin-debug directory of the application. Click finish and the project is created.
Before starting to write the client application, open the properties of our project and in the compiler section add this line: -services [ourDirectory]\WEB-INF\services-config.xml.
First of all we have to create the VO ActionScript class, corresponding to Person.java:
package vo
{
import mx.collections.ArrayCollection;
[Bindable]
[RemoteClass(alias="weborbTrial.Person")]
public class Person
{
public function Person(){}
public var idPerson:Number;
public var name:String;
public var surname:String;
}
}
Now we can create our client. For this example we use a simple button for call the method of the remote object defined in the Application. If the connection with the server works in the right way, we should see in the Panel the object created by the server class.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import vo.Person;
import mx.collections.ArrayCollection;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
//Result Event of the Remote Object
private function exec(event:ResultEvent):void{
var p:Person = new Person;
p= event.result as Person;
Name.text = p.name;
Surname.text = p.surname;
}
//Fault Event of the Remote Object
private function fault(event:FaultEvent):void{
Alert.show(event.message.toString());
}
private function addPerson():void{
exampleService.tryPersonWebOrb();
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:Panel title="Weborb .NET Example">
<mx:Form width="20%" height="40%" paddingBottom="30" paddingLeft="30" paddingRight="30" paddingTop="30">
<mx:FormItem label="Name">
<mx:TextInput id="Name" />
</mx:FormItem>
<mx:FormItem label="Surname">
<mx:TextInput id="Surname" />
</mx:FormItem>
</mx:Form>
</mx:Panel>
<mx:Button click="addPerson()" label="Pick a Person from .NET Server"/>
</mx:VBox>
<mx:RemoteObject id="exampleService" destination="GenericDestination" source="weborbTrial.DBDelegate" fault="fault(event)">
<mx:method name="tryPersonWebOrb" result="exec(event)" />
</mx:RemoteObject>
</mx:Application>
It is important to focus our attention on the definition of the remote object. This object is connecting to server by a default destination and channel defined in the remote-config.xml file, but it is possible to create our destination and channel and we can also define the source in the destination's property in the remote-config.xml file.
It's no hard to see that the our client application could work well also with a different server backend, with only minor changes to the configuration parameters.
Enjoy yourself with Weborb!
]]>
public var firstName:String;
public var lastName:String;
public var gender:Number;
public var reservationDate:Date;
public var destination:String;
public var departure:String;
public var seat:String;
public var menuType:Number;
and we want to filter on whatever combination of properties, using a Form component to display them all to the user.
We could create as many filter functions as our use cases, which can be a lot to handle, or we could use different approaches, tweaking the flex framework to our needs. Rotundu made a post about multiple field filtering, that can be found here, by extending the ActionScript class and adding an array of filter functions, to be eventually applied as a single one.
The approach illustrated here is similar, in that it uses many filter functions, but different in that it does not extend ArrayCollection and associates a filter function with a field of our collection object.
We can create the Form component, with input fields for every filter (TextInput, NumericStepper and so on) and, on the change event, call a single function:
<mx:TextInput id="firstName" change="applyFilter('firstName', firstName.text)" />
In most of the cases we can use a single applyFilter() function, that receives in input the name of the property to be filtered and its value. This function will then create an ad hoc filter function and apply it to our collection. We will make use of a Dictionary to associate a field with its filter function:
private function applyFilter(field:String, value:*):void {
var f:Function;
if ((value == null) || (value.length == 0))
f = null;
else {
f = function(item:Object):Boolean {
if ((item == null) || !item.hasOwnProperty(field))
return false;
if (item[field] is Boolean)
return Boolean(item[field]) == value;
if (item[field] is Number)
return Number(item[field]) == value;
if (item[field] is String)
return String(item[field]).localeCompare(value) == 0;
if (item[field] is Date)
return Date(item[field]).time == Date(value).time;
// any other object:
return item[field] == value;
};
}
_filterFunctions[field] = f;
_collection.filterFunction = multipleFilter;
_collection.refresh();
}
This will create a filter function for the field received in input, store it in the Dictionary so that it will be available for multipleFilter():
private function multipleFilter(item:Object):Boolean {
for (var key:Object in _filterFunctions) {
var f:Function = _filterFunctions[key];
if ((f != null) && !f(item))
return false;
}
return true;
}
We can now filter as many fields as we want, at the same time, using these two functions only. The applyFilter function can easily be adapted to custom business objects, by means of object polymorphism and interfaces (Java’s Comparable is a good example).
]]>
The same thing happen with the Components explorer, here we can see how most of the standard components we use in our RIAs are made
The difficult thing being a user interface designer or a designer in general, is to make people understand that our job is made of different parts, that we take care of some practical aspects not only of “esthetic”. We design, but first of all we follow a process which includes theory before practice.
]]>