Vinay's Blog: Flex Vs Ajax

Showing posts with label Flex Vs Ajax. Show all posts

Nov 21, 2009

Dynamically Repeating Control/Container in Adobe Flex

Flex Vs AjaxNo comments

Introduction

Used for repeating simple UI components
Repetition can be controlled by an array
Repeater components look like containers in the code but they are not containers
Repeaters don’t have automatic layout functionality of containers.
Purpose of using: To form a series of subcomponents as per the contents of a specified data provider.
For dealing with large amount of data; use controls like HorizontalList, TileList, and List

How To Use?

Use the <mx:Repeater> tag to declare a Repeater.
The repeated components can be either controls or containers.
To use a Repeater component you need data binding to allow for run-time-specific values.
You can use the <mx:Repeater> tag anywhere a control or container tag is allowed.
All components derived from the UIComponent class can be repeated with the exception of the <mx:Application> container tag.
You can also use more than one <mx:Repeater> tag in an MXML document, and you can nest <mx:Repeater> tags.

Properties of Repeater Component

Property	Description
id	Instance name of the corresponding Repeater component.
dataProvider	An implementation of the ICollectionView interface, IList interface, or Array class, such as an ArrayCollection object. You must specify a dataProvider value or the Repeater component will not execute. Generally, you specify the value of the dataProvider property as a binding expression because the value is not known until run time.
startingIndex	Number that specifies the element in the data provider at which the repetition starts. The data provider array is zero-based, so to start at the second element of the array, specify a starting index of one. If the startingIndex is not within the range of the dataProvider property, no repetition occurs.
count	Number that specifies how many repetitions occur. If the dataProvider property has fewer items than the number in the count property, the repetition stops with the last item.
currentIndex	Number that specifies the element of the dataProvider item currently being processed. The data provider array is zero-based, so when the third element is being processed, the current index is two. This property changes as the Repeater component executes, and is -1 after the execution is complete. It is a read-only property that you cannot set in the <mx:Repeater> tag.
currentItem	Reference to the item that is being processed in the dataProvider property. This property changes as the Repeater component executes, and is null after the execution is complete. It is a read-only property that you cannot set in the <mx:Repeater> tag. After a Repeater component finishes repeating, you do not use the currentItem property to get the current item. Instead, you call the getRepeaterItem() method of the repeated component itself. For more information.
recycleChildren	Boolean value that, when set to true, binds new data items into existing Repeater children, incrementally creates new children if there are more data items, and destroys extra children that are no longer required. For more information.

Basic principle with Repeater

Simplest way is to use static loops that execute a set number of times.
Use the startingIndex and count properties
To reference individual instances of a repeated component, you use indexed id references
Referencing repeated child components
When a container is repeated and indexed in an array, its children are also indexed
Referencing nested Repeater components
When <mx:Repeater> tags are nested, the inner <mx:Repeater> tags are indexed Repeater components

Dynamic loops with Repeater

Works in same way as of satatic data providers.
The only difference is the source of the data array; instead of a static array written directly into your application, the array is defined in an <mx:Model> tag and drawn from an XML file, a web service, a remote object, or some other source.
The data is collected and evaluated at run time to determine the number and value of elements in the dataprovider and how the Repeater component behaves.

Event Handling with Repeaters

While Repeater creates repeated objects; it can be bind to the Repeater component's currentItem property
Each instance cannot have its own event handler (e.g. click="doSomething {r.currentItem})") because binding expressions are not allowed in event handlers
Repeated Repeater components have a getRepeaterItem() method that returns the item in the dataProvider property
After a Repeater component finishes repeating, you do not use the Repeater.currentItem.
Instead, you call the getRepeaterItem() method of the repeated component itself
Accessing specific instances of repeated components

Property	Description
instanceIndices	Array that contains the indices required to reference the component from its document.
repeaters	Array that contains references to the Repeater components that produced the component. The first element in this array corresponds to the outermost Repeater component.
repeaterIndices	Array that contains the indices of the items in the dataProvider properties of the Repeater components that produced the component. The first element corresponds to the outermost Repeater component

Note:

This Array is empty unless the component is in one or more Repeater components
The first element corresponds to the outermost Repeater component

Creating custom Repeater component

You can use the <mx:Repeater> tag in an MXML component definition
Accessing an individual repeated item is same as you do for a repeated item defined in the same application file
Dynamically creating components based on data type:
Repeaters can be used to dynamically create different types of components for specific items in a set of data.
A Repeater component broadcasts a repeat event as it executes
This event is broadcast after the currentIndex and currentItem properties are set.
You can call an event handler function on the repeat event, and dynamically create different types of components based on the individual data items

Execution of Repeater component

Repeater re-executes whenever its dataProvider, startingIndex, or count properties are set or modified
A Repeater component also re-executes in response to paging through the dataProvider property by incrementing or decrementing the startingIndex value
Recreating children in a Repeater component:
The recycleChildren property controls whether children of a Repeater component are recreated
By default, recycleChildren = false; Hence, Repeater destroys any children that it previously created & recreates them causesing a performance lag
Set this property to true if you are confident that modifying your dataProvider will not recreate the Repeater component's children

Considerations for using a Repeater

You cannot use a Repeater component to iterate through a two-dimensional Array object that is programmatically generated, because the elements of an Array object do not trigger changeEvent events, and therefore cannot function as binding sources at run time.
Run-time changes to an array used as a dataprovider are not reflected in the Repeater component. Use a collection if you need to allow run-time modification.
Forgetting curly braces ({ }) in a dataProvider property is a common mistake. If the Repeater component doesn't executes, make sure that the binding is correct.
If repeated objects are displayed out of order & you are using adjacent or nested Repeater components, you might need to place a dummy UIComponent immediately after the Repeater that is displaying objects incorrectly.

References

Dynamically Repeating Control/Container in Adobe Flex

Flex Vs AjaxNo comments

Introduction

Used for repeating simple UI components
Repetition can be controlled by an array
Repeater components look like containers in the code but they are not containers
Repeaters don’t have automatic layout functionality of containers.
Purpose of using: To form a series of subcomponents as per the contents of a specified data provider.
For dealing with large amount of data; use controls like HorizontalList, TileList, and List

How To Use?

Use the <mx:Repeater> tag to declare a Repeater.
The repeated components can be either controls or containers.
To use a Repeater component you need data binding to allow for run-time-specific values.
You can use the <mx:Repeater> tag anywhere a control or container tag is allowed.
All components derived from the UIComponent class can be repeated with the exception of the <mx:Application> container tag.
You can also use more than one <mx:Repeater> tag in an MXML document, and you can nest <mx:Repeater> tags.

Properties of Repeater Component

Property	Description
id	Instance name of the corresponding Repeater component.
dataProvider	An implementation of the ICollectionView interface, IList interface, or Array class, such as an ArrayCollection object. You must specify a dataProvider value or the Repeater component will not execute. Generally, you specify the value of the dataProvider property as a binding expression because the value is not known until run time.
startingIndex	Number that specifies the element in the data provider at which the repetition starts. The data provider array is zero-based, so to start at the second element of the array, specify a starting index of one. If the startingIndex is not within the range of the dataProvider property, no repetition occurs.
count	Number that specifies how many repetitions occur. If the dataProvider property has fewer items than the number in the count property, the repetition stops with the last item.
currentIndex	Number that specifies the element of the dataProvider item currently being processed. The data provider array is zero-based, so when the third element is being processed, the current index is two. This property changes as the Repeater component executes, and is -1 after the execution is complete. It is a read-only property that you cannot set in the <mx:Repeater> tag.
currentItem	Reference to the item that is being processed in the dataProvider property. This property changes as the Repeater component executes, and is null after the execution is complete. It is a read-only property that you cannot set in the <mx:Repeater> tag. After a Repeater component finishes repeating, you do not use the currentItem property to get the current item. Instead, you call the getRepeaterItem() method of the repeated component itself. For more information.
recycleChildren	Boolean value that, when set to true, binds new data items into existing Repeater children, incrementally creates new children if there are more data items, and destroys extra children that are no longer required. For more information.

Basic principle with Repeater

Simplest way is to use static loops that execute a set number of times.
Use the startingIndex and count properties
To reference individual instances of a repeated component, you use indexed id references
Referencing repeated child components
When a container is repeated and indexed in an array, its children are also indexed
Referencing nested Repeater components
When <mx:Repeater> tags are nested, the inner <mx:Repeater> tags are indexed Repeater components

Dynamic loops with Repeater

Works in same way as of satatic data providers.
The only difference is the source of the data array; instead of a static array written directly into your application, the array is defined in an <mx:Model> tag and drawn from an XML file, a web service, a remote object, or some other source.
The data is collected and evaluated at run time to determine the number and value of elements in the dataprovider and how the Repeater component behaves.

Event Handling with Repeaters

While Repeater creates repeated objects; it can be bind to the Repeater component's currentItem property
Each instance cannot have its own event handler (e.g. click="doSomething {r.currentItem})") because binding expressions are not allowed in event handlers
Repeated Repeater components have a getRepeaterItem() method that returns the item in the dataProvider property
After a Repeater component finishes repeating, you do not use the Repeater.currentItem.
Instead, you call the getRepeaterItem() method of the repeated component itself
Accessing specific instances of repeated components

Property	Description
instanceIndices	Array that contains the indices required to reference the component from its document.
repeaters	Array that contains references to the Repeater components that produced the component. The first element in this array corresponds to the outermost Repeater component.
repeaterIndices	Array that contains the indices of the items in the dataProvider properties of the Repeater components that produced the component. The first element corresponds to the outermost Repeater component

Note:

This Array is empty unless the component is in one or more Repeater components
The first element corresponds to the outermost Repeater component

Creating custom Repeater component

You can use the <mx:Repeater> tag in an MXML component definition
Accessing an individual repeated item is same as you do for a repeated item defined in the same application file
Dynamically creating components based on data type:
Repeaters can be used to dynamically create different types of components for specific items in a set of data.
A Repeater component broadcasts a repeat event as it executes
This event is broadcast after the currentIndex and currentItem properties are set.
You can call an event handler function on the repeat event, and dynamically create different types of components based on the individual data items

Execution of Repeater component

Repeater re-executes whenever its dataProvider, startingIndex, or count properties are set or modified
A Repeater component also re-executes in response to paging through the dataProvider property by incrementing or decrementing the startingIndex value
Recreating children in a Repeater component:
The recycleChildren property controls whether children of a Repeater component are recreated
By default, recycleChildren = false; Hence, Repeater destroys any children that it previously created & recreates them causesing a performance lag
Set this property to true if you are confident that modifying your dataProvider will not recreate the Repeater component's children

Considerations for using a Repeater

You cannot use a Repeater component to iterate through a two-dimensional Array object that is programmatically generated, because the elements of an Array object do not trigger changeEvent events, and therefore cannot function as binding sources at run time.
Run-time changes to an array used as a dataprovider are not reflected in the Repeater component. Use a collection if you need to allow run-time modification.
Forgetting curly braces ({ }) in a dataProvider property is a common mistake. If the Repeater component doesn't executes, make sure that the binding is correct.
If repeated objects are displayed out of order & you are using adjacent or nested Repeater components, you might need to place a dummy UIComponent immediately after the Repeater that is displaying objects incorrectly.

References

Silverlight Vs JavaFX Vs Flex/AIR

Flex Vs Ajax, java framework2 comments

Note : This Comparison is done for the Alpha version of JavaFX.

The RIA world has been seeing intensified competition since last year's releases of Microsoft Silverlight and Sun JavaFX, which joined the Adobe Flex/AIR to become the major RIA development platforms. Even though all three of them intent to reach the the same goal, richer user experience and more creative media delivering, the technologies behind them are vast different. But how different from a RIA developer's perspective? Let's do a quick comparison by writing a small program on these three platforms.

The program does a very simple thing. You click the button, Say Hello, then in a text field, the program responses by saying "Hey". The following are the screen shots of the Flex, Silverlight and JavaFX version of the running programs.

Flex

SilverLight

JavaFX

Now, let's take look at the code behind them.

"Hello, Flex!"

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" 
backgroundColor="#FFFFFF">
<mx:TextArea x="114" y="11" height="169" id="txtResponse"/>
<mx:Button x="28" y="10" label="Say Hello" click="sayIt()"/>
<mx:Script>
<![CDATA[
public function sayIt():void{
txtResponse.htmlText = 
txtResponse.htmlText + 
"<b>You:</b> Hello, Flex!<br/>";
txtResponse.htmlText = txtResponse.htmlText +

"<b>Flex:</b> Hey you, welcome to Flex world!<br/>";


}


]]>


</mx:Script>


</mx:Application>

In Flex, the UI components are defined and laid out using MXML, a XML based markup language introduced with Flex. MXML includes a set of tags for UI components or controls. For example, Button, Text Area, Data Grid, Tree, Tab Navigator, Accordion, and Menu are all part of the standard set of tags. You can also extend the MXML tags and create your own components. In the program above, there are only two components, a Text Area for displaying "hello" messages and a Button to say "hello".

As you can see, Flex event handling is straight forward. Within the Button tag, "click="sayIt()" Specifies when the mouse is clicked the button, the even handler function sayIt()will run. Also noticed is that you can embed Action Script code inside the MXML program. Just be aware though, something you can do might not something you want to do in a real world Flex project. By the way, Action Script is a scripting language based on ECMAScript (JavaScript), used primarily for the development of websites and software using the Adobe Flash Player based platform.

This small program was written using Flex Builder 2.0. In this post I won't go through details on how to use Flex Builder, Silverlight and JavaFX development environments.

Next, we'll see how exactly the same function is written in Silverlight.

2. "Hello, Silverlight!"

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Loaded="Page_Loaded" 
x:Class="HelloSilverlight.Page;assembly=ClientBin/HelloSilverlight.dll" xmlns:UIControls="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll"
Width="640"
Height="480"
Background="White" 
>
<TextBlock Canvas.Left="130" Canvas.Top="11" Height="169"
x:Name="txtResponse"/>
<UIControls:Button Canvas.Left="10" Canvas.Top="10" Text="Say Hello"
Click="SayIt"/>
</Canvas>

The above Silverlight code closely resembles what we've seen in Flex code. Indeed, Silverlight employs the same approach as Flex does for UI definition and layout. With Silverlight, the XML based markup language is called XAML, which is used in the .NET Framework technologies, particularly in Windows Presentation Foundation (WPF).

The mouse event handling is similar to Flex's too. The actual code that implements the SayIt() handler is in a JavaScript file that represents the program source code of the XAML page. The code snipe is shown as following.

private void SayIt(object sender, EventArgs args)
{
txtResponse.Text = txtResponse.Text +
"You: Hello, Silverlight!\n";
txtResponse.Text = txtResponse.Text +
"Silverlight: Hey You, Welcome to the Silverlight world!\n";
}

Even though all C#, VB.Net and ASP.net can be used to develop Silverlight application, in this case the code behind is JavaScript.

The current Silverlight focuses on features that deal with bits and bytes on screen, the creative media rendering aspect of RIA. Let's find out how JavaFX does it.

3. "Hello, JavaFX!"

 
package hellojavafx;
import javafx.ui.*;
class HelloModel {

attribute saying: String;

}
var model = HelloModel {

saying: ""


};
Frame {

title: "Hello, JavaFX"

width: 500

height: 300

content: Panel {

content: 

[Button {

x: 10 y: 10 text: "Say Hello"

action: operation() {

model.saying = model.saying.concat("You: Hello, JavaFX!\n");

model.saying = model.saying.concat("JavaFX: Hey you, Welcome to JavaFX World!\n");

}


},


TextArea {


x: 110 y: 11 height: 169 width: 350


text: bind model.saying


}

]

}

visible: true

}

The JavaFx script code looks quite different from both Flex and Silverlight codes. JavaFX Script is a new script language introduced as part of the JavaFX technology and tool set. JavaFX Script uses a declarative syntax for specifying GUI components. It intents to make the UI code closely matches the actual layout of the GUI. Another observation is that the JavaFX script code looks similar to the legacy Flash declarative coding. That fuels the speculation that Sun is targeting the Flash designers for the adaption of JavaFX technologies.

Since JavaFX is built on top of the Java technology stack, all the Swing components are exposed to JavaFX as well. Even though JavaFX is initially marketed as Flash alike creative media delivering platform, the rich UI components allow develop complex RIA applications.

In conclusion, let me organize some information in the following table.

	Flex	Silverlight	JavaFX
Version	3.0	1.1 Alpha	1.0
Built-in UI Controls	Yes	Very limited to none	Via Swing
IDE	Flex Builder 3.0 (Eclipse platform)	Visual Studio 2008 .NET Platform 3.5 Silverlight 1.1 Alpha Visual Studio 2008 Template	NetBean 6.01 JavaFX plugin
IDE Visual Design	Yes	No	No
IDE Toolbar for Controls	Yes	No	No
Browser Client	Adobe Flash Player 9	Silverlight 1.1 Alpha	Java Plugin with JavaFX extension
Languages	MXML ActionScript	XAML JavaScript (C#, VB.Net, ASP.Net)	JavaFX Script Java

This Comparison is done for the Alpha version of JavaFX.

Silverlight Vs JavaFX Vs Flex/AIR

Flex Vs Ajax, java framework2 comments

Note : This Comparison is done for the Alpha version of JavaFX.

Flex

SilverLight

JavaFX

Now, let's take look at the code behind them.

"Hello, Flex!"

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" 
backgroundColor="#FFFFFF">
<mx:TextArea x="114" y="11" height="169" id="txtResponse"/>
<mx:Button x="28" y="10" label="Say Hello" click="sayIt()"/>
<mx:Script>
<![CDATA[
public function sayIt():void{
txtResponse.htmlText = 
txtResponse.htmlText + 
"<b>You:</b> Hello, Flex!<br/>";
txtResponse.htmlText = txtResponse.htmlText +

"<b>Flex:</b> Hey you, welcome to Flex world!<br/>";


}


]]>


</mx:Script>


</mx:Application>

This small program was written using Flex Builder 2.0. In this post I won't go through details on how to use Flex Builder, Silverlight and JavaFX development environments.

Next, we'll see how exactly the same function is written in Silverlight.

2. "Hello, Silverlight!"

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Loaded="Page_Loaded" 
x:Class="HelloSilverlight.Page;assembly=ClientBin/HelloSilverlight.dll" xmlns:UIControls="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll"
Width="640"
Height="480"
Background="White" 
>
<TextBlock Canvas.Left="130" Canvas.Top="11" Height="169"
x:Name="txtResponse"/>
<UIControls:Button Canvas.Left="10" Canvas.Top="10" Text="Say Hello"
Click="SayIt"/>
</Canvas>

private void SayIt(object sender, EventArgs args)
{
txtResponse.Text = txtResponse.Text +
"You: Hello, Silverlight!\n";
txtResponse.Text = txtResponse.Text +
"Silverlight: Hey You, Welcome to the Silverlight world!\n";
}

Even though all C#, VB.Net and ASP.net can be used to develop Silverlight application, in this case the code behind is JavaScript.

The current Silverlight focuses on features that deal with bits and bytes on screen, the creative media rendering aspect of RIA. Let's find out how JavaFX does it.

3. "Hello, JavaFX!"

 
package hellojavafx;
import javafx.ui.*;
class HelloModel {

attribute saying: String;

}
var model = HelloModel {

saying: ""


};
Frame {

title: "Hello, JavaFX"

width: 500

height: 300

content: Panel {

content: 

[Button {

x: 10 y: 10 text: "Say Hello"

action: operation() {

model.saying = model.saying.concat("You: Hello, JavaFX!\n");

model.saying = model.saying.concat("JavaFX: Hey you, Welcome to JavaFX World!\n");

}


},


TextArea {


x: 110 y: 11 height: 169 width: 350


text: bind model.saying


}

]

}

visible: true

}

In conclusion, let me organize some information in the following table.

	Flex	Silverlight	JavaFX
Version	3.0	1.1 Alpha	1.0
Built-in UI Controls	Yes	Very limited to none	Via Swing
IDE	Flex Builder 3.0 (Eclipse platform)	Visual Studio 2008 .NET Platform 3.5 Silverlight 1.1 Alpha Visual Studio 2008 Template	NetBean 6.01 JavaFX plugin
IDE Visual Design	Yes	No	No
IDE Toolbar for Controls	Yes	No	No
Browser Client	Adobe Flash Player 9	Silverlight 1.1 Alpha	Java Plugin with JavaFX extension
Languages	MXML ActionScript	XAML JavaScript (C#, VB.Net, ASP.Net)	JavaFX Script Java

This Comparison is done for the Alpha version of JavaFX.

PDF generation using flex LCDs and Life Cycle Designer tool

Flex Vs Ajax1 comment

About Life Cycle Designer: This tool is use to design the PDF template. This template is constructed using components library provided by this designer tool. The file should be saved as PDF file with dynamic XML binding option. Components in the template are bind to a normal XML that contains custom tag. This XML structure should match with the one sent from Flex so that the helper class can map it perfectly to fit the data into the template.

Steps to successfully generate the PDF of client side data:

1. Design the template as per the requirement. This is very simple as it only requires one to drag and drop the component and position them as per your UI. This document should be saved as “Adobe Dynamic XML Form (*.PDF)”.

2. Create a XML file. This XML file structure should contain a valid tag hierarchy. For example, if you expect a text entry done in user, then XML will look like <root><text/><root>.

3. Bind the template with the XML. This is done in Designer tool. This requires creating a data connection by right click under Data View window è new data connection è select sample XML data è here select the XML that was created in step 2. Now, select a component in the template designed in step 1. This component has an object window on the bottom right. Select the binding tab and change the binding to the XML tag from active data connection as per the requirement.

4. Create a MXML file. Here you write your flex code. Each component or container in flex which is the part of the PDF generation is passed as value to XML element. Foe example, see the below code snippet. Create a component

Now this component can be either sent as a snap shot or its text value can be sent to server. This depends on your requirement. Below code snippet shows both the cases:

a) Send simple text. Create a XML and set the value of custom node as text box value. Note that the corresponding PDF template and XML should be in sync with this XML structure.

This XML is send to server as a request parameter.

b) Send the snapshot of the text input component to server as a request parameter.

Here the containerImage is a String Object. Note that the corresponding PDF template and XML should be in sync with this XML structure. Suggestion would be to bind an ImageField component in designer tool. This is compatible to decode the string back to snap shot.

After creating the XML, the task left is to send the data to server.

5. Server Side code. In Servlet, the XFAHelper object is created. This object takes the XML document received from flex and the PDF template created in step 1 to generate the PDF.

Details are:

The request received from flex is a complete XML document that was created in flex. This document is passed as a parameter to the Document Builder to build a similar Document on server side.

Create an object of XFAHelper class.

Create a String object that contains the real path of the PDF template saved location.

Pass the string object as a parameter to XFAHelper object’s open method.

Pass the XML document, from flex, as parameter to Helper class’s importDataSet method

Now at this point, our PDF is ready. Either save it to some location or send it to Servlet output.

Below code snippet display the PDF from Servlet output.

Here are some references that will give a detailed description of the complete cycle.

1. http://livedocs.adobe.com/livecycle/8.2/programLC/programmer/lcds/help.html?content=pdfgen_3.html

2. Redirect to Servlet without using HTTPService tag: http://stackoverflow.com/questions/378092/getting-progress-on-post-using-httpservice-in-flex-as3

3. Jar files that will be required can be download from http://svn.riaforge.org/weeki/trunk/WeekiServer/WEB-INF/lib/

4. Trial version of Life Cycle designer can be download from http://www.adobe.com/products/livecycle/designer/

PDF generation using flex LCDs and Life Cycle Designer tool

Flex Vs Ajax1 comment

Steps to successfully generate the PDF of client side data:

2. Create a XML file. This XML file structure should contain a valid tag hierarchy. For example, if you expect a text entry done in user, then XML will look like <root><text/><root>.

Now this component can be either sent as a snap shot or its text value can be sent to server. This depends on your requirement. Below code snippet shows both the cases:

a) Send simple text. Create a XML and set the value of custom node as text box value. Note that the corresponding PDF template and XML should be in sync with this XML structure.

This XML is send to server as a request parameter.

b) Send the snapshot of the text input component to server as a request parameter.

After creating the XML, the task left is to send the data to server.

5. Server Side code. In Servlet, the XFAHelper object is created. This object takes the XML document received from flex and the PDF template created in step 1 to generate the PDF.

Details are:

The request received from flex is a complete XML document that was created in flex. This document is passed as a parameter to the Document Builder to build a similar Document on server side.

Create an object of XFAHelper class.

Create a String object that contains the real path of the PDF template saved location.

Pass the string object as a parameter to XFAHelper object’s open method.

Pass the XML document, from flex, as parameter to Helper class’s importDataSet method

Now at this point, our PDF is ready. Either save it to some location or send it to Servlet output.

Below code snippet display the PDF from Servlet output.

Here are some references that will give a detailed description of the complete cycle.

1. http://livedocs.adobe.com/livecycle/8.2/programLC/programmer/lcds/help.html?content=pdfgen_3.html

2. Redirect to Servlet without using HTTPService tag: http://stackoverflow.com/questions/378092/getting-progress-on-post-using-httpservice-in-flex-as3

3. Jar files that will be required can be download from http://svn.riaforge.org/weeki/trunk/WeekiServer/WEB-INF/lib/

4. Trial version of Life Cycle designer can be download from http://www.adobe.com/products/livecycle/designer/

Flex – Multi View Design Pattern

ajax, ajax framework, flex, Flex Vs AjaxNo comments

Problem

Need to develop a flex web application which is going to be deployed in different environment say in mobile and web.
Need to come up with different views for different devices and for different resolution. But the base view logic (event handling and state) should be same.

Solution

Follow the flex multi-view design pattern.

Multi - View Design Pattern

Multi-View design pattern uses passive design pattern and factory design pattern.

Passive View Design Pattern

The Passive View pattern is a derivative of the Model View Presenter (MVP), which is considered a derivative of the Model-view-controller. The Passive View pattern has some similarities to the “Code Behind” implementation, since both achieve a complete separation of Action Script logic and MXML or AS component tags. The passive presentation model allows us to easy test our application since we can create test cases just for the logic and if needed test cases for the view.

In passive view pattern we split our laundry to two piles, view and presenter:

View

View is passive and is not aware of the Presenter.

Presenter

Logic is in the Presenter.
Presenter observes view events.
Presenter updates the view data.
Presenter ‘knows’ about the components in the view.
Presenter holds the data or point to a data class.

By moving all the logic out of the view, the Passive View pattern can achieve the separation of designer and developer work and create a paradigm where it’s easy to change the view. The view class contains only the components and their states, no events, logic, changes or model.

Factory Design Pattern

Now throw in the mix the factory design pattern and you can actually create few views for each presenter.
The factory pattern is one of the most basic creational patterns that deal with the problem of creating different products without specifying the exact concrete class that will be created. This is done by creating a separate method for creating the product abstract class, whose subclasses can override to specify the derived type of product that will be created.

Sample Application

This sample application provides more clarity on multiple view design pattern. Basic view is to provide more granularities on design issues. Below are the screen snapshots.

The application will have multiple views of same screen.
‘Submit’ button on both the screens will handle the same business logic at one point. There is no duplicate code to handle the same functionality in each screen.

Screen 1: To select different resolution.

Screen 2: User selects 400 X 300 screen size.

Screen 3: User selects 800 X 500 screen size.

Read the below steps for better understanding of the code. To implement multi view design pattern follow the below steps

Create an abstract action script view class. This class should extend mx.core.UIComponent. All user defined mxml should extend this class. In our example this class name is AbstractPassiveMainView.as. This abstract class should hold all the components that will be used by presenter.
Presenter knows the logic and has all control on view components. In our example ‘submit’ button event handling will be handled using the presenter class (Presenter.as).
Factory class is used to create instance for mxml or view classes.
Creator class is used to get the mxml object and passes through presenter for business handling.

Source Code Explanation

MultiViewApplication.mxml – This is the main application mxml file. This screen has a drop down which allows user to select different views. On value change loadView() action script method will be called. This loadView() method invokes the Creator object and adds the child to Canvas container.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#6797CE" backgroundGradientColors="[#ffffff,#6797CE]">
<mx:Script>
<![CDATA[
import mx.core.Container;
import view.Factory;
import view.AbstractPassiveMainView;
import mx.events.FlexEvent;
protected function loadView(event:Event):void
{
containerView.removeAllChildren();
var creator:Creator = new
Creator(event.currentTarget.selectedItem);
containerView.addChild(creator);
}
]]>
</mx:Script>
<mx:ComboBox x="139" y="29" change="loadView(event)">
<mx:ArrayCollection>
<mx:String>select</mx:String>
<mx:String>400 X 300</mx:String>
<mx:String>800 X 500</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:Canvas x="10" y="63" id="containerView"/>
<mx:Label x="10" y="31" text="Select Resolution:" fontSize="12"/>
</mx:Application>

Creator.as - This action script class decides which view to be loaded. Here we are getting the view instance using factory design pattern.

package
{
    import mx.core.UIComponent;
    import view.AbstractPassiveMainView;
    import view.Factory;
    import view.presenter.Presenter;
    public class Creator extends UIComponent
    {
        private var mainView:AbstractPassiveMainView;
        private var presenter:Presenter;
        public function Creator(displayMode:String)
        {
            if(displayMode == "400 X 300")
            {
                mainView =  Factory.createView(Factory.PASSIVE_MAIN_VIEW_1);
                this.addChild(mainView);
                presenter = new Presenter(mainView);
            }
            else if(displayMode == "800 X 500")
            {
                mainView = Factory.createView(Factory.PASSIVE_MAIN_VIEW_2);
                this.addChild(mainView);
                presenter = new Presenter(mainView);
            }
        }
    }
}

Factory.as - This action script class is used to create view objects.

package view
{
    import flash.errors.IllegalOperationError;
    import view.mainview1.PassiveMainView1;
    import view.mainview2.PassiveMainView2;
    public final class Factory
    {
        public static const PASSIVE_MAIN_VIEW_1:int = 0;
        public static const PASSIVE_MAIN_VIEW_2:int = 1;
        public static function
        createView(type:Number):AbstractPassiveMainView
        {
            var retVal:AbstractPassiveMainView;
            switch (type)
            {
                case PASSIVE_MAIN_VIEW_1:
                retVal = new PassiveMainView1();
                break;
                case PASSIVE_MAIN_VIEW_2:
                retVal = new PassiveMainView2();
                break;
                throw new IllegalOperationError("The view type "
                + type + " is not recognized.");
            }
            return retVal;
        }
    }
}

PassiveMainView1.as – This is a view which includes our registartion1.mxml(400 X 300). I haven’t created this submit button in Registartion1.mxml because this button instance should be part of AbatractPassiveMainView.

package view.mainview1
{
    import mx.controls.Button;
    import view.AbstractPassiveMainView;
    import view.subview.PassiveSubView1;
    public class PassiveMainView1 extends AbstractPassiveMainView
    {
        public var registrationView:RegistrationView1;
        public function PassiveMainView1()
        {
            registrationView = new RegistrationView1();
            button = new Button();
            button.label = "Submit";
            button.x = 206;
            button.y = 157;
            registrationView.addChild(button);
            this.addChild(registrationView);
            passiveSubView = new PassiveSubView1();
            this.addChild(passiveSubView);
        }
    }
}

RegistartionView1.mxml – plain mxml.

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow title="New Registration" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="inset" xmlns:view="view.mainview1.*" width="400"  height="300" showCloseButton="true"  headerColors="[#000000,#000000]">
<mx:Label x="43" y="57" text="Name"/>
<mx:TextInput x="111" y="53"/>
<mx:Label x="43" y="85" text="Address 1"/>
<mx:TextInput x="111" y="83"/>
<mx:Label x="43" y="113" text="Address 2"/>
<mx:TextInput x="111" y="111"/>
</mx:TitleWindow>

PassiveMainView2.as - This is another view which includes our registartion2.mxml (800 X 500). I haven’t created this submit button in Registration1.mxml because this button instance should be part of AbatractPassiveMainView.

package view.mainview2
{
    import mx.controls.Button;
    import view.AbstractPassiveMainView;
    import view.subview.PassiveSubView1;
    public class PassiveMainView2 extends AbstractPassiveMainView
    {
        public var registrationView2:RegistrationView2;
        public function PassiveMainView2()
        {
            registrationView2 = new RegistrationView2();
            button = new Button();
            button.label = "Submit";
            button.x = 595;
            button.y = 239;
            button.width = 102;
            registrationView2.addChild(button);
            this.addChild(registrationView2);
            passiveSubView = new PassiveSubView1();
            this.addChild(passiveSubView);
        }
    }
}

RegistrationView2.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow title="New Registration" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
borderStyle="inset" xmlns:view="view.mainview1.*" width="800" height="500" showCloseButton="true"  headerColors="[#000000,#000000]">
<mx:Label x="43" y="57" text="Name"/>
<mx:TextInput x="43" y="83" width="654"/>
<mx:Label x="43" y="114" text="Address 1"/>
<mx:TextInput x="43" y="134" width="654"/>
<mx:Label x="43" y="164" text="Address 2"/>
<mx:TextInput x="43" y="190" width="654"/>
</mx:TitleWindow>

AbstractPassiveMainView.as - The abstract class holds all the components that will be used by presenter. This button object is nothing but the submit button that I have used in the above 2 mxml.

package view
{
    import mx.controls.Button;
    import mx.core.UIComponent;
    public class AbstractPassiveMainView extends UIComponent
    {
        public var button:Button;
        public var passiveSubView:AbstractPassiveSubView;
        public function AbstractPassiveMainView()
        {
        }
    }
}

AbstractPassiveSubView.as

package view
{
    import mx.controls.Button;
    import mx.core.UIComponent;
    public class AbstractPassiveMainView extends UIComponent
    {
        public var button:Button;
        public var passiveSubView:AbstractPassiveSubView;
        public function AbstractPassiveMainView()
        {
        }
    }
}

PassiveSubView1.as – This is the output view. Here on click of submit button I‘m displaying a message ‘Data Added Successfully’.

package view.subview
{
    import mx.controls.Text;
    import view.AbstractPassiveSubView;
    public class PassiveSubView1 extends AbstractPassiveSubView
    {
        public function PassiveSubView1()
        {
            text = new Text();
            text.y = 60;
            text.x = 50;
            text.width = 250;
            text.height = 20;
            text.setStyle("color", "0xfa0303");
            text.text = "Data Added Successfully.";
            text.visible = false;
            this.addChild(text);
        }
    }
}

Presenter.as - The presenter handles the logic of the main application, as well as using sub presenter and sub view if needed. Here I have added the ‘Submit’ button event. Logic is in the presenter. Presenter ‘knows’ about the components in the view.

package view.presenter
{
    import flash.events.MouseEvent;
    import view.AbstractPassiveMainView;
    public class Presenter
    {
        // Corresponding view
        private var passiveMainView:AbstractPassiveMainView;
        // Sub-presenters
        private var subPresenter:SubPresenter;
        public function
        Presenter(passiveMainView:AbstractPassiveMainView)
        {
            this.passiveMainView = passiveMainView;
            subPresenter = new
            SubPresenter(passiveMainView.passiveSubView);
            passiveMainView.button.addEventListener(
            MouseEvent.CLICK, onButtonClick);
        }
        private function onButtonClick(event:MouseEvent):void
        {
            subPresenter.setTextLabelVisible(true);
        }
    }
}

SubPresenter.as

package view.presenter
{
    import view.AbstractPassiveSubView;
    public class SubPresenter
    {
        private var passiveMainSubView:AbstractPassiveSubView;
        public function
        SubPresenter(passiveMainSubView:AbstractPassiveSubView)
        {
            this.passiveMainSubView = passiveMainSubView;
        }
        public function setTextLabelVisible(isVisible:Boolean):void
        {
            passiveMainSubView.text.visible = isVisible;
        }
    }
}

References

www.adobe.com/devnet/flex/articles/design_patterns.html

http://www.as3dp.com/

http://elromdesign.com/blog/2009/03/15/passive-multi-view-design-pattern-create-flex-dynamic-graphical-guis-for-flash-10-using-catalyst/

Flex – Multi View Design Pattern

ajax, ajax framework, flex, Flex Vs AjaxNo comments

Problem

Need to develop a flex web application which is going to be deployed in different environment say in mobile and web.
Need to come up with different views for different devices and for different resolution. But the base view logic (event handling and state) should be same.

Solution

Follow the flex multi-view design pattern.

Multi - View Design Pattern

Multi-View design pattern uses passive design pattern and factory design pattern.

Passive View Design Pattern

In passive view pattern we split our laundry to two piles, view and presenter:

View

View is passive and is not aware of the Presenter.

Presenter

Logic is in the Presenter.
Presenter observes view events.
Presenter updates the view data.
Presenter ‘knows’ about the components in the view.
Presenter holds the data or point to a data class.

Factory Design Pattern

Sample Application

This sample application provides more clarity on multiple view design pattern. Basic view is to provide more granularities on design issues. Below are the screen snapshots.

The application will have multiple views of same screen.
‘Submit’ button on both the screens will handle the same business logic at one point. There is no duplicate code to handle the same functionality in each screen.

Screen 1: To select different resolution.

Screen 2: User selects 400 X 300 screen size.

Screen 3: User selects 800 X 500 screen size.

Read the below steps for better understanding of the code. To implement multi view design pattern follow the below steps

Create an abstract action script view class. This class should extend mx.core.UIComponent. All user defined mxml should extend this class. In our example this class name is AbstractPassiveMainView.as. This abstract class should hold all the components that will be used by presenter.
Presenter knows the logic and has all control on view components. In our example ‘submit’ button event handling will be handled using the presenter class (Presenter.as).
Factory class is used to create instance for mxml or view classes.
Creator class is used to get the mxml object and passes through presenter for business handling.

Source Code Explanation

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#6797CE" backgroundGradientColors="[#ffffff,#6797CE]">
<mx:Script>
<![CDATA[
import mx.core.Container;
import view.Factory;
import view.AbstractPassiveMainView;
import mx.events.FlexEvent;
protected function loadView(event:Event):void
{
containerView.removeAllChildren();
var creator:Creator = new
Creator(event.currentTarget.selectedItem);
containerView.addChild(creator);
}
]]>
</mx:Script>
<mx:ComboBox x="139" y="29" change="loadView(event)">
<mx:ArrayCollection>
<mx:String>select</mx:String>
<mx:String>400 X 300</mx:String>
<mx:String>800 X 500</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:Canvas x="10" y="63" id="containerView"/>
<mx:Label x="10" y="31" text="Select Resolution:" fontSize="12"/>
</mx:Application>

Creator.as - This action script class decides which view to be loaded. Here we are getting the view instance using factory design pattern.

package
{
    import mx.core.UIComponent;
    import view.AbstractPassiveMainView;
    import view.Factory;
    import view.presenter.Presenter;
    public class Creator extends UIComponent
    {
        private var mainView:AbstractPassiveMainView;
        private var presenter:Presenter;
        public function Creator(displayMode:String)
        {
            if(displayMode == "400 X 300")
            {
                mainView =  Factory.createView(Factory.PASSIVE_MAIN_VIEW_1);
                this.addChild(mainView);
                presenter = new Presenter(mainView);
            }
            else if(displayMode == "800 X 500")
            {
                mainView = Factory.createView(Factory.PASSIVE_MAIN_VIEW_2);
                this.addChild(mainView);
                presenter = new Presenter(mainView);
            }
        }
    }
}

Factory.as - This action script class is used to create view objects.

package view
{
    import flash.errors.IllegalOperationError;
    import view.mainview1.PassiveMainView1;
    import view.mainview2.PassiveMainView2;
    public final class Factory
    {
        public static const PASSIVE_MAIN_VIEW_1:int = 0;
        public static const PASSIVE_MAIN_VIEW_2:int = 1;
        public static function
        createView(type:Number):AbstractPassiveMainView
        {
            var retVal:AbstractPassiveMainView;
            switch (type)
            {
                case PASSIVE_MAIN_VIEW_1:
                retVal = new PassiveMainView1();
                break;
                case PASSIVE_MAIN_VIEW_2:
                retVal = new PassiveMainView2();
                break;
                throw new IllegalOperationError("The view type "
                + type + " is not recognized.");
            }
            return retVal;
        }
    }
}

package view.mainview1
{
    import mx.controls.Button;
    import view.AbstractPassiveMainView;
    import view.subview.PassiveSubView1;
    public class PassiveMainView1 extends AbstractPassiveMainView
    {
        public var registrationView:RegistrationView1;
        public function PassiveMainView1()
        {
            registrationView = new RegistrationView1();
            button = new Button();
            button.label = "Submit";
            button.x = 206;
            button.y = 157;
            registrationView.addChild(button);
            this.addChild(registrationView);
            passiveSubView = new PassiveSubView1();
            this.addChild(passiveSubView);
        }
    }
}

RegistartionView1.mxml – plain mxml.

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow title="New Registration" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="inset" xmlns:view="view.mainview1.*" width="400"  height="300" showCloseButton="true"  headerColors="[#000000,#000000]">
<mx:Label x="43" y="57" text="Name"/>
<mx:TextInput x="111" y="53"/>
<mx:Label x="43" y="85" text="Address 1"/>
<mx:TextInput x="111" y="83"/>
<mx:Label x="43" y="113" text="Address 2"/>
<mx:TextInput x="111" y="111"/>
</mx:TitleWindow>

package view.mainview2
{
    import mx.controls.Button;
    import view.AbstractPassiveMainView;
    import view.subview.PassiveSubView1;
    public class PassiveMainView2 extends AbstractPassiveMainView
    {
        public var registrationView2:RegistrationView2;
        public function PassiveMainView2()
        {
            registrationView2 = new RegistrationView2();
            button = new Button();
            button.label = "Submit";
            button.x = 595;
            button.y = 239;
            button.width = 102;
            registrationView2.addChild(button);
            this.addChild(registrationView2);
            passiveSubView = new PassiveSubView1();
            this.addChild(passiveSubView);
        }
    }
}

RegistrationView2.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow title="New Registration" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
borderStyle="inset" xmlns:view="view.mainview1.*" width="800" height="500" showCloseButton="true"  headerColors="[#000000,#000000]">
<mx:Label x="43" y="57" text="Name"/>
<mx:TextInput x="43" y="83" width="654"/>
<mx:Label x="43" y="114" text="Address 1"/>
<mx:TextInput x="43" y="134" width="654"/>
<mx:Label x="43" y="164" text="Address 2"/>
<mx:TextInput x="43" y="190" width="654"/>
</mx:TitleWindow>

AbstractPassiveMainView.as - The abstract class holds all the components that will be used by presenter. This button object is nothing but the submit button that I have used in the above 2 mxml.

package view
{
    import mx.controls.Button;
    import mx.core.UIComponent;
    public class AbstractPassiveMainView extends UIComponent
    {
        public var button:Button;
        public var passiveSubView:AbstractPassiveSubView;
        public function AbstractPassiveMainView()
        {
        }
    }
}

AbstractPassiveSubView.as

package view
{
    import mx.controls.Button;
    import mx.core.UIComponent;
    public class AbstractPassiveMainView extends UIComponent
    {
        public var button:Button;
        public var passiveSubView:AbstractPassiveSubView;
        public function AbstractPassiveMainView()
        {
        }
    }
}

PassiveSubView1.as – This is the output view. Here on click of submit button I‘m displaying a message ‘Data Added Successfully’.

package view.subview
{
    import mx.controls.Text;
    import view.AbstractPassiveSubView;
    public class PassiveSubView1 extends AbstractPassiveSubView
    {
        public function PassiveSubView1()
        {
            text = new Text();
            text.y = 60;
            text.x = 50;
            text.width = 250;
            text.height = 20;
            text.setStyle("color", "0xfa0303");
            text.text = "Data Added Successfully.";
            text.visible = false;
            this.addChild(text);
        }
    }
}

package view.presenter
{
    import flash.events.MouseEvent;
    import view.AbstractPassiveMainView;
    public class Presenter
    {
        // Corresponding view
        private var passiveMainView:AbstractPassiveMainView;
        // Sub-presenters
        private var subPresenter:SubPresenter;
        public function
        Presenter(passiveMainView:AbstractPassiveMainView)
        {
            this.passiveMainView = passiveMainView;
            subPresenter = new
            SubPresenter(passiveMainView.passiveSubView);
            passiveMainView.button.addEventListener(
            MouseEvent.CLICK, onButtonClick);
        }
        private function onButtonClick(event:MouseEvent):void
        {
            subPresenter.setTextLabelVisible(true);
        }
    }
}

SubPresenter.as

package view.presenter
{
    import view.AbstractPassiveSubView;
    public class SubPresenter
    {
        private var passiveMainSubView:AbstractPassiveSubView;
        public function
        SubPresenter(passiveMainSubView:AbstractPassiveSubView)
        {
            this.passiveMainSubView = passiveMainSubView;
        }
        public function setTextLabelVisible(isVisible:Boolean):void
        {
            passiveMainSubView.text.visible = isVisible;
        }
    }
}

References

www.adobe.com/devnet/flex/articles/design_patterns.html

http://www.as3dp.com/

http://elromdesign.com/blog/2009/03/15/passive-multi-view-design-pattern-create-flex-dynamic-graphical-guis-for-flash-10-using-catalyst/

Nov 21, 2009

Dynamically Repeating Control/Container in Adobe Flex

Dynamically Repeating Control/Container in Adobe Flex

Oct 10, 2009

Silverlight Vs JavaFX Vs Flex/AIR

Silverlight Vs JavaFX Vs Flex/AIR

PDF generation using flex LCDs and Life Cycle Designer tool

PDF generation using flex LCDs and Life Cycle Designer tool

Flex – Multi View Design Pattern

Problem

Solution

Multi - View Design Pattern

Passive View Design Pattern

Factory Design Pattern

Sample Application

References

Flex – Multi View Design Pattern

Problem

Solution

Multi - View Design Pattern

Passive View Design Pattern

Factory Design Pattern

Sample Application

References

Popular Posts

Recent Posts

Categories

Unordered List

Pages

Blog Archive

Text Widget