Meet the Guru Courses

  • Flex 3 Meet the Guru Course with Marco Casario

My Books

  • Follow me on Twitter

Comtaste's Projects

  • Flex Solutions: Essential Tecniques for Flex 3 Developers - The Site
  • Comtaste, Flex 3, AIR and Java consulting
  • YouThru Multimedia Web Messaging
  • MobyMobile
  • UserMatter(s) Magazine
My Photo

Subscribe my blog

  • Get this widget from Widgetbox
  • Add to Google
  • RSS FEEDS
  • Enter your Email here to subscribe :



    Powered by FeedBlitz

Using Flex 3 with BlazeDS and Java (JEE) training course released by Comtaste (London,Milan,New York)

Comtaste Training is proud to announce its new training course about Flex 3 development using BlazeDS. The course is the result of several enquiries made by our clients about those topics.
I've worked on the outline of the course and it's ready and I've just published it on the italian section of Comtaste's site (I'm working on the english outline for this training course):

Enterprise Flex Applications: Using Flex 3 with BlazeDS and Java (JEE)

The Flex 3 and BlazeDS course adds to Comtaste's course programs and it is the open source alternative to the Enterprise Flex Applications:Using LiveCycle Data Services and J2EE (Java EE) training course.

The Flex 3 with BlazeDS is a 3-consecutive-day lessons and we're scheduling it in the following three locations: London, Milan and New York City.

Enterprise Flex Applications: Using Flex 3 with BlazeDS and Java (JEE): Overview

BlazeDS is the open source technology released by Adobe and based on Java Remoting and web messaging. BlazeDS allows developers to easily connect to J2EE distribuite (Java Enterprise)architecture and to carry out real time data pushing to Rich Internet Applications created with Flex 3 or to desktop applications created with Adobe AIR. BlazeDS uses AMF format to transfer data in binary mode, a technique that increases the performance of the application compared to XML or SOAP formats. In this course we will illustrate the techniques to install, configure and connect Flex and AIR applications to BlazeDS in Java server logic, and how to exploit the characteristics of this technology.

Training objectives
The final laboratory of this course will allow participants to built complex and interactive Enterprise applications distributed in Java Enterprise JEE architectures.

Enterprise Flex apps with Livecycle DS and BlazeDS

Tomorrow I'll be in Adobe Italy headquarter in Milan to present the following event : Enterprise Flex Applications with LiveCycle Data Services and BlazeDS.

During the event I'll show examples,  share development approaches to use Flex, LiveCycle Data Services and BlazeDS in enterprise contexts (mainly with J2EE). The event is based on Comtaste's courses oriented to enterprise Flex 3 development :

If there'll be the time I want to discucss about the benefits of using AIR  in enterprise's world. 
So if you want to know more about the features of BlazeDS and Livecycle DS my advice is to partecipate. See you there !

The event is totally free but you need to register to it.

Grails plugin for Adobe Flex, Livecycle DS and BlazeDS

Grails_logo Grails is growing more and more and it's gaining an important role over the Java community. Grails is an open-source web application framework that leverages the Groovy language (a cool dynamic language) and complements Java Web development. The Grails framework is built on top of  Spring , an establised enterprise framework. 

The community is huge and you can now find a lot of interesting and useful plugin system  to speed up andintegrate integrates Grails with technologies Java people care about like GWT, DWR, JMS, IntelliJ, search operations are based on Luceneand and others.

Recently a new plugin for Adobe Flex, Livecycle DS and BlazeDS  is available for the Grails framework:

Grails Flex Plugin

the installation of the plugin is very easy. It's enough to launch it using this command line :

grails install-plugin flex

And you'll be ready to specify a Grails service as a remoting destination for Blaze DS or Livecycle DS using the expose property to your service class :

static expose = ['flex-remoting']

Grails is a framework for which I'm very eager to know more. I hope this summer I'll find the time to write some tutorials about the use of Grails plugin for Adobe Flex, Livecycle DS and BlazeDS.

Grails plugin for Adobe Flex and BlazeDS features

* Automatic configuration of Flex related web descriptor elements - For Flex to work configuration of servlets etc. are required in the web descriptor. This plugin automatically does this configuration.
* Eposing Grails services as Flex remoting destinations - When using Flex remoting services each Java service need to be configured within Flex using xml configuration. When exposing Grails service classes with this plugin this configuration is not needed anymore. The service class will automatically be registered within the Flex message broker.
* Participation in reloading of exposed Grails services - This plugin participates nicely with the reloading facilities of Grails. When creating new services or exposing existing services, they will be registered in the Flex message broker without restarting the application
* Embedded BlazeDS libraries
* Embedded Flex Webtier Compiler - When installing this plugin it will automatically install the Flex Webtier Compiler to your web application (within the WEB-INF folder). In development mode this Webtier Compiler is automatically enabled.

Calculating the ROI for enterprise applications that use Flex 3

Raffaele Mannella, my business partner at Comtaste, has published the slides of his presentation at 360Flex. The topic was very interesting because he showed the benefits achieved as a consequence of adopting Flex to re-design an enterprise application.  The benefit was measured in terms of the time saved to execute an ordinary operation (cashing a check) by using the Flex re-designed application respect the time that was formerly necessary to execute the same operation by using a "common" Oracle form-based application (simple html using the "traditional" logic of 1 click=1 page).

You can read the entire post on the Comtaste's blog entry :  Measuring the ROI of choosing Flex for Enterprise RIAs

Reduce the size of a Flex 3 application avoiding unnecessary references with the getQualifiedClassName() method

There are many ways you can use to control and optimize the performance of your Flex applications acting  both on the server as well as on the client side. The first optimization you can implement is by reducing the time tha application takes to start.
Externalizing assets and searching for  linker dependencies are simple approaches that can save the end user a lot of time in  loading te Flex application.
It's common for developers that at the end of a Flex application they are inadvertently linking in some classes that they never use.
I've found that another common error is to let the compiler to include classes that the application won't use for its entire life. That's a shame !
So an important step to check before compiling and deploying a Flex app is to check that you're not including unused classes.
There is a useful method that helps you for this scenario : the getQualifiedClassName().
This class comes from the flash.utils package and it returns a String that contains the fully qualified class name of an object.
You can use it in such kind of situations where you have to compare one or more classes without linking them into the SWF file.
This is a simple scenario where we want to remove all the Button classes inside our application without  causing that class to be linked into the SWF if not used inside the file:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        initialize="removeSomeChild()">

    <mx:Script>
    <![CDATA[

    private function removeSomeChild():void
   {

        myTxt.text += "\n The number of children at the beginning " + numChildren;

        for (var i: Number = 0; i <= (this.numChildren-1); i ++)
        {          

            var childClassName:String = getQualifiedClassName(getChildAt(i));

            myTxt.text += "\n This is the full name of the class: " +  childClassName;

               switch (childClassName)
            {
                case "mx.controls::Button":
                removeChild(getChildAt(i))
            }

        }

      

        myTxt.text += "\n Children alla fine: " + numChildren;
    } 
  ]]>
    </mx:Script>

   

    <mx:TextArea id="myTxt" text="Ciao" />

    <mx:Button />

    <mx:ComboBox />
    <mx:TextInput />

</mx:Application>

The use of the getQualifiedClassName() method the following  classic syntax ensures us  to exclude the Button class  from being compiled into the SWF file :

getChildAt(i) is mx.controls.Button

Note: Removing a DisplayObject from the  DisplayList don't destroy the object neither remove it from Flash Player' s memory.The object will continue to exist even if not as a child of any other container.


Exctract and learn from the Flex 3 data visualization source code (the charting controls, the AdvancedDataGrid classes, the OLAP classes, and the automation classes)

Each time I tell that Flex 3 is open source, during my Flex 3 courses and sessions, people don't believe it.  So I copy the entire Flex 3 SDK libraries into a new Flex 3 project and show them the actionscript classes fo the SDK. Then I go ahead and tell that not only the standard Flex 3 SDK is open source, but also the charting controls, the AdvancedDataGrid classes and all the stuff that come with the Professional version of Flex Builder 3 are open source.

In order to open the data visualization source code  we must have these two requirements :

1. a Flex Builder Professional license key,
2. then you can extract the data visualization source code (the charting controls, the AdvancedDataGrid classes, the OLAP classes, and the automation classes)

The approach is very simple because all you have to do is to use the  DMV-source.jar in the Flex Builder 3\sdks\3.0.0\lib  folder and extract it.
Today I found this clear and cool post on the Flex Doc Team's blog that illustrates the required steps to
exctract the data visualization source code :

The syntax to extract the data visualization source code is as follows:

> java -jar DMV-source.jar {license-file-location} {output-location}

Once again kudos to the Flex Doc  Team ! Go, read it and use the Flex 3 SDK as the first step for learning a better way to develop in Flex 3 !

Porting a Flex 2 application to Flex 3 SDK: all you have to know.

Last week I hold a Flex 3 and AIR 1 training course at Adobe Italy's Office for some partners. One of the question was about the porting of Flex 2 applications to the new Flex 3 SDK. I think this is a pretty common question that may occurs during a Flex 3 course so I wanted to share this link to all trainers as well as Flex developers.

The FlexDoc team wrote a blog post about the migration from Flex 2 to Flex 3 that will save you a lot of time :
Migrating applications from Flex 2 to Flex 3

Kudos to FlexDoc team... again ;). You made Flex developers' life much easier ;)

My FITC 2008 Flex Daily Solutions slides

I've posted the slides for my presentation at FITC 2008 Amsterdam: Flex Solutions for your daily development.

Some of the session highlights:

•How to architecture Flex application: design pattern in Flex (view helper, model locator and front controller)
•Use the open source library: exploring the flexlib project
•How to optimize the use of RPC class with the AsynchToken
•Trace Network traffic using the trace and flashlog.txt log file
•Debug applications using the Logging APIs
•Flex Builder IDE Optimizations
•How to overcome the cross domain policy
•Using the Proxy Service of BlazeDS
•Focus on Flex 3 new features: the new Collection classes and theAdvancedDataGrid
•Flex Inspirational Quotes

FITC rocked !

It was great catching up and meeting some new faces, and I hope to see you all again soon!

Flex 3 and AIR courses updated

We've just updated our Flex 3 and AIR courses on Comtaste's course catalogue :

The first course, Flex 3 and Flex Builder 3: Developing Rich Internet Applications with the new Flex 3 SDKs,  guides students in a step-by-step learning process that begins from the basic notions of Flex3 and Flex Builder 3 to the development of complex front end applications that communicate with remote data sources.
The second one, Developing desktop applications with Adobe AIR, Ajax and Flex,  introduces the participants to the development of Rich Applications with Adobe AIR using its capacity of being able to access the File System, to modify the Windows of the system, to function even in offline mode and to use the notification mechanism of the operative system.

Comtaste is a company focused in RIA development with Flex, Java, PHP and AIR. Our trainers are first of all experienced developers involved in several enterprise projects. Moreover they are very communicative instructors that can give students the right balance between theory and real world examples and contexts.
That's why many companies in the last months chose Comtaste as their training and consulting partner.

The deferred creation in Flex 3 components using the IDeferredInstance

Starting from the post "Creating template components in Flex 3 and AIR", I've added  further information on how to use the IDeferredInstance  interface in Flex 3.
Template components can also be created by using the deferred creation feature, which
enables Flex 3 to load only the controls that initially appear to the user who loads the application.
With this approach you can optimize startup performance because Flex 3 loads the
components and their properties only when the user requires them.
The IdeferredInstance interface defines the getInstance() method to initialize the
property when it creates an instance of the component. This method returns a value of
Object type. The MXML component that you previously created could thus become the
following:

<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="draw();">
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.core.UIComponent;
import mx.core.IDeferredInstance;
public var header:IDeferredInstance;
public var footer:IDeferredInstance;
// Define an Array of properties for a row of components.
[ArrayElementType("mx.core.IDeferredInstance")]
public var content:Array;
private function draw():void {
addChild(UIComponent(header.getInstance()));
for (var i:int = 0; i < content.length; i++)
{
var myHeader:UIComponent =
UIComponent(content[i].getInstance());
var myContent:UIComponent =
UIComponent(header.getInstance());
addChild(myHeader );
addChild(myContent );
}
]]>
</mx:Script>
</mx:VBox>

When you use the IdeferredInstance interface as a data type, you can send any data type
to the property. In the addChild() method, you have carried out an implicit cast by sending
the header, footer, and content properties as arguments of the UIComponent. This
casting is necessary because the addChild() method can add an object that implements
the UIComponent interface to a container.

Write a JSP proxy which acts as a bridge between the Flex and AIR applications and the remote data

Sometimes you won’t be able to put a cross-domain file on the destination server. To solve
this problem you can use a server-side proxy file that consists of a script published on the
server which acts as a bridge between the Flex application and the remote data to load. Instead of directly accessing external resources on different domains, Flex will access this proxy service, which looks after accessing the resources on the specified domains.

The same proxy method can also be created by using JSP as server-side language. Create a
new file and save it with the name getrssurl.jsp.  The script is the following:

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"
import="java.io.BufferedReader,
java.io.InputStreamReader,
java.io.IOException,
java.io.InputStream,
java.net.MalformedURLException,
java.net.URL,
java.net.URLConnection"
%>
<%!
private String contentURL;
public static final String CONTENT_URL_NAME = "contentURL";
%>
<%
// get the url through the request:
If (contentURL == null) {
contentURL = (String)request.getAttribute(CONTENT_URL_NAME);
if (contentURL == null)
contentURL = (String)request.getParameter(CONTENT_URL_NAME);
}
if (contentURL == null)

Continue reading "Write a JSP proxy which acts as a bridge between the Flex and AIR applications and the remote data" »

Passing connection-level credentials to the JMSAdapter of BlazeDS

In order to create a multi user Flex application, you can take advantage of one of the feature of LiveCycle Data Services: the Messaging Services. The Messaging Services allows you to connect your Flex application to a message destination and send/receive messages to it from other clients.
You use the JMS adapter to subscribe to JMS queues configured on an implementation of the Java Message Service. The Java Message Service (JMS) API is a Java Message Oriented Middleware  API for sending messages between two or more clients.
The LiveCycle Data Services 2.5.1 uses the JMS message adapter to communicate with messaging systems and to transport messages to and from a destination over a message channel. A destination specifies an id attribute to provide a public name for clients to use when sending messages.

The Flex application can use as message channel one of the protocol supported by the Flash Player: Action Message Format (AMF3), Realtime Message Protocol (RTMP), and XMLSocket.
When working with the Messaging Services you have to configure message destinations, apply security to message destinations, and modify logging settings. You configure the JMS adapter individually for the destinations that use it.

One of the limit if the Messagin Services of Livecycle Data Services is the inability to define a username and password in the configuration file to pass them to the JMS.
I discovered that in BlazeDS there is a new JMSAdapter that allows you to set the connection-level credentials passing the username and password.
The new connection-credentials XML node sets the the username and password used while creating the JMS connection.As the documentation said, use only if JMS connection level authentication is being used :

<destination id="chat-topic-jms">
    <properties>
...
        <jms>
            <destination-type>Topic</destination-type>
            <message-type>javax.jms.TextMessage</message-type>
            <connection-factory>jms/flex/TopicConnectionFactory
            </connection-factory>
            <destination-jndi-name>jms/topic/flex/simpletopic
            </destination-jndi-name>
            <delivery-mode>NON_PERSISTENT</delivery-mode>
            <message-priority>DEFAULT_PRIORITY</message-priority>
            <preserve-jms-headers>"true"</preserve-jms-headers>
            <acknowledge-mode>AUTO_ACKNOWLEDGE</acknowledge-mode>
            <connection-credentials username="sampleuser" password="samplepassword"/>
            <max-producers>1</max-producers>
        </jms>
    </properties>

For many developers this new features supported by the JMSAdapter could be very appreciated and could solve problems in many different scenarios where the authentication is required in JMS.

Continue reading "Passing connection-level credentials to the JMSAdapter of BlazeDS" »

Rich Internet Applications: Tips, Tricks & Techniques

The Ajax Magazine has published one of the blog entry of  Comtaste written by Emanuele Tatti one of our software engineer at Comtaste.

You can read the Rich Internet Applications: Tips, Tricks & Techniques article on their site.

Emanuele has been involved in several projects especially related to the financial field and is also chief engineer for YouThruBiz, an innovative enterprise-class rich internet application.
His areas of expertise are Flex, Livecycle Data Services, BlazeDS and Java for building enterprise applications.

Good job mate ;)

The Mark Occurrences highlights is saving me a lot of time

Flex Builder 3 has introduced a lot of enhancement and new brand features. But one of the feature which I'm falling in love these days is the Mark Occurrences. I know it's a very simple function, but in large projects where you have a lot of code it's so awesome to have a colored highlights for every occurrence of a variables, istances, classes, methods that matches the one your cursor is currently on.
What it really surprises me, it's how the  Mark Occurrences feature understands the scope of istances of variables.

Thanks Flex Builder team for that :)

A report from the Flex 3 and AIR Pre-release tour with James Ward

23012008227_6 Yesterday we had James Ward here in Italy presenting at the Flex 3 and AIR Prerelease tour. It was an awesome day spent with James and I had a lot of funny and he showed us a lot of cool demos ! Now I understand much more about BlazeDS and Thermo ! And they are great. We can use RemoteObject with AMF3 for free, without requiring us to buy the Livecycle Data Services license (you need it if you want cool features like Data Management services and other stuff).

The crew that partecipated at the event, came from different development enviroments.There were many Java developers (I extended invitations to the Java Community), PHP Developers as well as Coldfusion developers.23012008240
This event was one of the best of the last months organized by Adobe. The location was great, large enough to host more than 100 people. The speaker was awesome (thanks again James) and people were incredibly passionate. It's not so common to see people involved in vertical and developer-oriented technologies like BlazeDS, Livecycle DS and Flex. James received a lot of good and interesting questions that you can read  at the bottom of this report.

We made a cool raffle at the end of the event and we gave a lot of prices : Flex Builder 3 and CS3 Web Premium licenses (thanks to James), books gently offered by O'Reilly and FriendsofED (thanks to FlexGala User Group), Adobe t-shirts, bags, mugs and other gadgets (thanks to Francesca for bringing'em).

It was a great success.
Thanks Sumi, James, Francesca, Adobe and all guys from the community members.

Continue reading "A report from the Flex 3 and AIR Pre-release tour with James Ward" »

Degrafa : Declarative Graphics Framework for Flex

Jaun of ScaleNine focused my attention on his upcoming project : Degrafa.
Degrafa is a project dedicated to the development of a Declarative Graphics Framework for Flex 2.

Reading from the site, the focus behind the Declarative Graphics Framework (Degrafa) is to bring the graphics classes up a level to provide a common ground between developer and designer within Flex, and enable the graphics classes to become first class citizens within the Flex framework.

There are many goals we want to achieve by developing Degrafa. One is eliminating the learning requirements for ActionScript in order to use the framework. There is a learning curve for a designer, or a programmer who is new to graphic development in ActionScript, which can cause a slow down in production levels.

By abstracting the graphics classes and bringing them closer to a dialect that most programmers or designers understand (MXML), regardless of background. This allows for a much easier transition.

The team behind the project is made up of well known Flex experts so you can bet it will be a cool project.
On the site you can find some good screencasts that show you some features of the framework.

Go ahead guys !

Slides uploaded for my speech at JavaDay 2007:Developing Rich Internet Applications using Flex, AIR and Java

I've just uploaded the slides used during my presentation at the JavaDay 2007 Italy Conference about : Developing Rich Internet Applications using Flex, AIR and Java.

The conference was a great success with more than 1200 attendees and at my speech more than 150 interested people attended.  Good questions !

 

Java to Actionscript 3 classes converter

We've published on our company's blog an interesting post titled :

Automating ActionScript 3 classes generation from Java Beans in a LiveCycle Data Services context

Around the web there are some java to actionscript converter (such as J2AS) but they don't work with Java 6 data types and with Eclipse 3.2.
For a project we're working on we developed  a simple Java class that converts from Java Beans to Actionscript 3 classes for working with LiveCycle Data Services.
We think to create an Ant script or an Eclipse Plugin and put it into the osflash repository.

Great job Constantine ! :)

Loading and parsing XML microformats using Adobe AIR and Flex 3, FlexGala eSeminar

The September eSeminar organized by FlexGala is about to start at this url :

http://adobechats.adobe.acrobat.com/remotexml/

This month Fabio Bernardi will talk about loading and parsing XML microformats using Adobe AIR and Flex 3.
The webinar will be recorded. The registration link will be published on the FlexGala Seminar page.
See you there !

Livecycle Data Services and EJB3 lazy fetching strategy failed to lazily initialize a collection of role

LiveCycle Data Services are a very powerful tool. This period we're working on 3 different projects that use these services and I discovering many "under the hood" capabilities.

But these days we don't sleep to trying to solve a problem and to understand if there's a solution for that.
The problem is with the use of lazy EJB3 with the RemoteObject class.
When working with EJB3  in order to avoid  the possibility of loading your entire database you have to use any lazy fetching strategy. (We tried with Graniteds Data Services and it works well.)

This is the scenario : a business logic that uses an EJB3 (lazy) application and Flex Data Services to manage data for a Flex application.

The problem we're facing is the following :
Is it possible to use RemoteObject (without using the Data Management Services) to load Java objects that are persisted by EJB3 and have some of their properties lazily initialized?

I try to explain more in detail with the following information :

The environment in use is a JBoss application server and a MySQL 5 DBMS; the deployed applications in JBoss are an EJB3 application, containing domain classes and business beans, and a Flex Data Services .war application, with configuration for remoting services; the FDS war application has a library of delegate classes that perform the EJB lookup and use the EJB beans; these classes act as destinations of flex RemoteObjects and are called from the Flex client.

For example there is a Person class that has a List of Address objects, which is annotated with lazy fetch:

// Person.java
    @OneToMany (fetch = FetchType.LAZY, mappedBy = "person")
    public List<Address> getAddresses() {
        return addresses;
    }

A stateless bean, PersonBean, fetches a Person from the underlying database:

// PersonBean.java
    public Person getPerson(long id) throws Exception {
        Person p = this.em.find(Person.class, id);
        return p;
    }

The stateless bean implements a @Local interface.

These classes are deployed inside an EJB3 jar file, configured to connect to the local MySQL database.

A Java class performs the EJB lookup and calls the PersonBean; the class is placed in a jar file inside the lib folder of the FSD war application:

// PersonDelegate.java:
    public Person getPerson(long id) throws Exception {
        return bean.getPerson(id);
    }

PersonDelegate is configured as remote object destination, in remoting.config.xml:

    <destination id="personDelegate">
        <properties>
            <source>com.delegate.PersonDelegate</source>
            <scope>application</scope>
        </properties>
        <adapter ref="java-object" />
    </destination>

The flex client has a RemoteObject that uses the defined destination and calls the getPerson() method to fetch a Person object but when the call is made the following error comes out:

faultCode:Server.Processing faultString:'failed to lazily initialize a collection of role: com.Person.addresses, no session or session was closed' faultDetail:'null'
and in the JBoss log a org.hibernate.LazyInitializationException appears, related to the addresses field of Person.

If Person.java is modified to use FetchType.EAGER everything works fine, the addresses are loaded; but in a more general case, where the graph of java objects can grow very large, the use of eager fetch may cause unnecessary data to be loaded and the application is slowed down.

So the question we're trying to solve are :

Is there a way to avoid being thrown the LazyInitializationException when making RemoteObject calls?
The Person object may arrive without the lazily fetched addresses Collection, which could be loaded in a later request?
The HibernateAssembler seems to handle lazy fetching, so the solution might be to reconfigure the application to use data management services instead of RemoteObject calls?
And in that case what should be used instead of the HibernateAssembler, as the application uses EJB3 to handle persistence and not Hibernate?

Stay tuned and we'll shortly be able to give you the solution :)


My Top 5 Flex Builer shortcut list

Flexbuilder_shortcut One of the step to be more productive in Flex development is using some of the shortcuts on Flex Builder.  This is the list of more used Flex Builder shortcuts :

  1. Ctrl + O : opens the quick outline dilaog box (as shown in figure)
  2. Ctrl-Space : gets the context code hint box
  3. Alt + SHIFT + X : opens the compiler dialog box where you can choose which kind of application to compile (Flex, AIR, Java ...)
  4. Ctrl-Shift-T : opens the Type dialog window
  5. Ctrl + SHIFT + C : insert a comment in Actionscript code or in MXML blocks

Disabling the FlashType features for embedded fonts in Flex

When you embed a TrueType font in Flex the compiler (from version 2.0.1 and higher) automatically compile the SWF file using the FlashType features for the embedded font :

<mx:Script>
<![CDATA[
[Embed(source="C://WINDOWS/Fonts/BROADW.TTF",
       fontName="Broadway")]
private var _myEmbeddedFont:Class;
]]>
</mx:Script>

FlashType is a new text rendering engine, introduced by Flash 8,  that provides high-quality text rendering in SWF files. The engine improves the readability of text at smaller font size.

It means that the Broadway font is embedded as FlashType font. The cool thing is that you don't have to use Adobe Flash 8 (or Flash CS3) to export a FlashType font.

But if you are pretty sure you won't have the support of  any of the FlashType features for your embedded font, you can use the flashType attribute on the [Embed] metadata or in the @face-font directive :

<mx:Script>
<![CDATA[

[Embed(source="C://WINDOWS/Fonts/BROADW.TTF",
                  fontName="Broadway",
                  flashType=false)]
private var _myEmbeddedFont:Class;
]]>
</mx:Script>

This could be useful when you want to save a small amount of time at compile time. Using FlashType fonts in fact, has some compile time issues respect to non FlashType fonts.

Some questions and answers on using HibernateAssembler, EJB3/JPA in Flex/LiveCycle Data Services applications

Some days ago on the Comtaste's blog  we published an article on LiveCycle Data Services and Hibernate integration in Flex RIA applications.

I found an interesting comment that gave us the possibility to goo deep into that topic :

I'm currently investigating the use of LCDS 2.5 and EJB3/JPA and am wondering about a couple of things.
First - would it be likely that in the near future we would have a JPAAssembler class, much like what Jeff has been doing with Hibernate?

Second - if not a JPAAssembler, what would be the best way of wiring data management to JPA?

Third - do I really need a DTO, can't I just 'return' domain objects, and how does this work with lazy loaded instances as set by JPA annotations.

Fourth - conceptually I've been thinking about this quite a lot. Looks to me that datamanagement is specifically geared towards CRUD like applications. But what if the use case at hand requires some more involved server side processing, most likely contained within a JTA transaction. Shoud I instead implement this as a RPC call and thus mix 'n match RPC and DM?

You can read the reply on the next page >>

Continue reading "Some questions and answers on using HibernateAssembler, EJB3/JPA in Flex/LiveCycle Data Services applications" »

Improving the RemoteObject remote call performance in Flex RIAs

On the Adobe Flex DevNet section has been published a great article by Michael Herron:

Improving RPC performance in Flex RIAs
: this article demonstrates using a basic tool, ServiceCapture, to capture client-server performance for an example application,     highlights some typical performance issues, and suggests potential solutions to     those issues whilst discussing implementation considerations.
This article focuses on monitoring and improving the     performance of an application using RemoteObject RPC calls. However, the     recommended practices also apply to the WebService and HTTPService components.
These practices are useful for existing applications that extensively use RPC components, and also for those considering using Adobe LiveCycle Data Services ES. This article also shows where the built-in LiveCycle Data Services ES features provide out-of-the box solutions

Zend and Flex integration and how to use the ChangeWatcher class with the Cairngorm's ViewHelper

I'm back to the holidays and in one week I've many news to share.
I'll start from  2 new great posts on the Comtaste blog that deals with Zend framework and Flex integration and how to extend the ViewHelper of the Cairngmorm microarchitecture using the ChangeWatcher Flex's class :

Flex and AJAX interaction using FABridge or ExternalInterface

An interesting post about a potential problem when you're developing Flex application that interact with AJAX (both using Flex AJAX Bridge or ExternalInterface). In Comtaste we're working in a portal that uses a Flex mashup with Google Maps. So we had to find a solution for that :

Creating an ObjectManager for improving the Flex interaction with Ajax or Javascript

The issue is about the access to Flex component just after html loads using body tags onload attributes while the swf files is not loaded yet.
A possible solution could be the one of waiting a few seconds by using the Javascript function setTimeout(code,millisec,lang) , however what assures the movie will be ready in that time? If the movie were not ready, either an error is generated or the input to the Flex component goes lost.

The solution we followed was to create an ObjectManager in Javascript to handle with the complete loading  of the swf file.

Flex 2 form based application: solve all the focus issues in Internet Explorer

We're working on some projects in Flex where the use of the keyboard to navigate through the application is a key aspect.
They're both Flex 2 form based application

Our goals were :
- at the start up of the application give the focus to the first form field
- pressing the tab key cycling the focus through all the form fields

Although it seams like very simple, the focus in Flex 2 is not so easy.
We had strange behaviour that mostly depend on how the Internet Explorer uses the ActiveX contents :
- although when the application has been loaded the foucs was on the first field, pressing the tab key once, the focus goes outside the Flash Player  applet to the browser controls

To solve the problem of the fucus lost by the Flash Player you can use this small workaround :

keyFocusChange="event.preventDefault();focusManager.getNextFocusManagerComponent(event.shiftKey).setFocus()"

The keyFocusChange is on the Application tag.

In order to make the focus in Flex 2 works for Internet Explorer, it's not enough  to set it up using Javascript when the page loads.
Internet Explorer does not give you the ability to an ActiveX content to get the focus.
So for example in a Flex 2 application that has 3 text inputs when the last one has the focus and you click on the tab, the focus quits from the Flash Player 9 ActiveX and goes to the HTML page content.

That's a bad behavior for your application.

To overcome this problem we have to intercept the key pressed by the user and disable the default action of the browser to prevent the browser handling of the key.

Once the TAB key has been intercepted we have to communicate it to the application adding a javascript callback.
this Javascript function calls an Actionscript function with the :

ExternalInterface.addCallback("javascriptFunct", "actionscriptFunc")

Now what we have to do is using the focusManager.getNextFocusManagerComponent() in the Actionscript function.

Add this Javascript functions to the HTML wrapper to use when compile the Flex application :

Continue reading "Flex 2 form based application: solve all the focus issues in Internet Explorer" »

LiveCycle Data Services Es 2.5 Documentation in PDF

Past week the Flex Doc Team at Adobe released the documentation for LiveCycle Data Services Es 2.5. The documentation was realeased in livedocs format so you were able to read on the web.

Randy Nielsen, the Learning Resources Manager at  Adobe Systems Incorporated, send me an email to point me out that the  LiveCycle Data Services Developer’s Guide has been released in PDF format.
So we're now ready to download and print it !

This is the entire LiveCycle Data Services documentation :


Flex Doc Team rocks !
They made an excellent job for the Flex and LiveCycle Data Services Es 2.5 documentation.
Thanks guys !

Flex 3 new features collection

This week Ted Patrick is doing a great (hey Ted not only this week ;)) job giving us pillows of new features of Flex 3.
I made this excercise to have a clear summary of what he wrote so far :

Flex 3 - Thursday: Dramatically Smaller Flex SWF Files

Cross-Domain
Versionable
Easy to Use
Security and Code Signing
Failover and Hosting
Cross-Domain RSL

Flex 3 - Wednesday: Components and SDK Enhancements

Advanced Datagrid
Deep Linking
Resource Bundles and Runtime Localization
Flex Component Kit for Flash CS3

Flex 3 - Tuesday: Code Enhancements

Compilation
Language Intelligence
Refactoring
Class Outline
Code Search
Profiler
Module Support
Multiple SDK Support

Flex 3 - Monday: Designer/Developer Workflow (CSS Design View)

CSS Design View

Flex 3 - Monday: Designer/Developer Workflow

Skin Importer
Design View Zoom/Pan
Design Mode support for ItemRenderers
Advanced Constraints
CS3 Suite integration
CSS Outline
CSS Design View
Flex 3 SDK Skinning/Style Enhancements

Tomorrow I am covering my favorite feature in Flex 3. This feature will forever alter how Flex is deployed and I am pretty confident that you will be shocked. Flex is about to become much more distributed.

Creating a Flex 2/Livecycle Data Service application with EJB3 - Part II

In the first part I showed how to install Livecycle Data Services under JBoss and how to set up the enviroment to start developing an EJB3 application with Flex 2 (you can read the full article here : How to install and develop using Flex 2 (FDS) and EJB3 projects - Part 1).
In this second part we create a Java project to develop our Enterprise Java Beans.
I'm using JBoss application server with the Livecycle Data Services 2.5 downloaded from the Adobe Labs.

Before coding we need to install some libraries on the JBoss side. So create a lib folder under the project's folder EJB3_LCDS. We'll have this fodler structure :

EJB3_LCDS/lib

Copy and paste the following libraries from the JBOSS_HOME/client to EJB3_LCDS/lib :

jboss-aop-jdk50-client.jar
jboss-aspect-jdk-client.jar
jboss-ejb3x.jar
jboss-ejb3-client.jar
jbossws-client.jar
jbossall-client.jar
jbossjmx-ant.jar
log4j.jar

Now we can set the Build Path from the Project Properties of our Eclipse IDE. Select the EJB3_LCDS project and right click the mouse. From the contextual menu choose Build Path>Add to Buid Path.
We're ready to code our classes.

Create the Stateless Session Bean that represents the easiest EJB you can develop. It's a bean that gives you the information about the bean component the life cycle of which is related to the life of the client.

One of the new features of EJB3 is that it's enough to create an interface with the methods and a class that represents our bean.
No more several classes and configuration files to create like in the past verison of EJB.

My package is com.ejb3lcds.business so we create our Interface in com.ejb3lcds.business.IService

/**
* Interface
*/
package com.ejb3lcds.business.IService;

import javax.ejb.Local;
import javax.ejb.Remote;

@Local
@Remote
public interface IService {

    /**
     * Method that returns just
     * @param pA
     * @param pB
     * @return the result of the operations
     */
    int multiply(int pA, int pB);
}

Now you have to be patience because I have to go working so I must stop.
In the next post I'll create the service bean class.

Passing Actionscript Value Objects to Flex 2 pop up (TitleWindow) window

In a past post I showed how to cast a DataGrid selectedItem into an Actionscript Value Object.
When you develop a master/detail page a good solution should be to load detailed data on a pop up window. In Flex 2 to create a pop up window you use an istance of the PopUpManager class and its createPopUp method :

var user:Student = DataGrid( event.currentTarget ).selectedItem as User;
var myPopUp:IFlexDisplayObject = PopUpManager.createPopUp (this, myTileWindow, true);

myTileWindow( myPopUp ).myUser = user;
PopUpManager.centerPopUp( myPopUp );

Note that the myPopUp instance is data typed as IFlexDisplayObject.
The second argument,  myTileWindow, of the createPopUp method is a MXML component.
In order to pass the selected user object to the new pop up window we write the following code :

myTileWindow( myPopUp ).myUser = user;

On the myTileWindow.mxml file we have to declare a myUser variable data typed as User in order to make the pop up vailable to receive the data :

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="320" height="240"
showCloseButton="true"
borderAlpha="1.0"
creationComplete="addEventListener( CloseEvent.CLOSE, closeMe );"
>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.events.CloseEvent;
import com.casario.vo.User;

[Bindable]
public var myUser:User;
private function closeMe( event:CloseEvent ):void
{
PopUpManager.removePopUp( this );
}
]]>
</mx:Script>
<mx:Label x="183" y="10" text="{myUser.firstname}" />
<mx:Label x="183" y="30" text="{myUser.lastname}" />
<mx:Label x="183" y="50" text="{myUser.email}" />
</mx:TitleWindow>

On the next page you can view the Actionscript Value Object.

Continue reading "Passing Actionscript Value Objects to Flex 2 pop up (TitleWindow) window" »

Setting custom wrappers to Flex Builder compiler using the Run Configuration Panel

When you use Flex Builder to compile Flex 2 applications, it will also generate the HTML wrapper for embedding the SWF compiled file.

You can disable this feature under the Flex Compiler dialog box under Flex Project Properties (under the menu Project > Properties > Flex Compiler).

But you can do more and specify for a Flex application custom html templates for the Run and Debug phase.
Flex Builder 2 allows developers to set these options using the Run Configuration Panel. To do so you can launch the panel under the menu Run > Run > Flex Project.
Choose your MXML application file and uncheck the Use Default checkbox under the URL or path to launch box.
Now you can browse and point to your custom html wrapper taht will be used when you run or debug the application with Flex Builer 2.

Runconfigurationpanel

Pay Attention because in order to make it works you have to disable the HTML Wrapper options unde Flex Compiler panel.

Casting a DataGrid selectedItem into an Actionscript Value Object

The cool thing when you develop in Flex is that you have many solutions to reach the same goal.
With the selectedItem property of the DataGrid you get the object selected in the row by the user. This object contains all information about the selected index of your ArrayCollection.
You can cast this object to a custom Actionscript class that works as Data Model or Value Object for your application.
See this example.

This is my Actionscript data model (User.as):

package com.casario.vo
{
[Bindable] public class User
{
// You should avoid the use of public property
// and use the getter/setter mothods
public var firstName:String;
public var lastName:String;
public var email:String;
}
}

And this is my DataGrid with the addEventListener method that register its change event with an event handler :

<mx:DataGrid
width="100%"
id="myDG"
>

myDG.addEventListener( MouseEvent.CLICK, clickHandler );

The event hanlder just uses the as keyword to cast the object into our Actionscript data model

private function clickHandler( event:MouseEvent ):void
{
var myASDM:User = DataGrid( event.currentTarget ).selectedItem as User;
}

To access the selected item in the event handler I used the currentTarget property of the event object data typed as MouseEvent.
Now we are able to use the myASDM and access to its properties using the dot syntax :

myASDM.firstName; myASDM.lastName; myASDM.email

Converting an Actionscript object (data model) to an ArrayCollection

With Flex 2 you can declare data models using MXML or Actionscript. an Actionscript Data Model is an Actionscript class where you declare the properties that represent the data you want to carry into the application.
So it could often happen that you want to convert an Actionscript data model into an ArrayCollection to use it in data bindings with Flex 2 controls.

This code shows you how to populate an ArrayCollection using the addItem() method starting from an Actionscript data model populated by an external xml file.
This is the MXML data model that loads data from an external xml file :

<mx:Model id="myModel" source="myFile.xml" />

And this is the Actionscript code that populate an ArrayCollection using the ArrayUtil.toArray() method :

import com.Student;
import mx.collections.ArrayCollection;
import mx.utils.ArrayUtil;

[Bindable] public var myAC:ArrayCollection = new ArrayCollection();
   
private function init():void
{
// The istance of the Student Actionscript Data Model
  var dmObj:Student;
// student is the repeating node of the data model
  var dmArr:Array = ArrayUtil.toArray( myModel.student );
   
    for( var i:int = 0; i < std.length; i++ )
    {
     dmObj = new Student();
     dmObj.address = dmArr[i].address;
     dmObj.firstname = dmArr[i].firstname;
     dmObj.lastname = dmArr[i].lastname;
    
     myAC.addItem( dmObj );
    }
}

Now you can use the myAC as data provider for your Flex 2 controls !
In the next page you have the code of the Student Actionscript class.

Continue reading "Converting an Actionscript object (data model) to an ArrayCollection" »

How to install and develop using Flex 2 (FDS) and EJB3 projects - Part 1

I'll promise you to write some tutorials on how to integrate Flex 2 with your EJB3 applications. So in this first part I'll talk about the JBoss options and settings yo have to modfiy in order to deploy Flex Data Services 2 on our J2EE enviroment.

Let's start with JBoss settings.
In order to start the JBoss server you have to modify the bat script (JBOSS_HOME/bin/run.bat ) adding the JAVA enviroment variable (JAVA_HOME). Then to activate the remote debug through JPDA change and edit the following lines of code :

set JAVA_HOME=/..../jdk5.0
set JAVA_OPTS=-Xdebug -Xrunjdwp:transport=dt_socket,address=8000,server=y,suspend=n %JAVA_OPTS%

If you have the 8000 port busy, you have to modify and change it.
The installation of Flex Data Services is very simple. For using FDS under JBoss just copy the flex.war application file on the JBOSS_HOME/server/default/deploy directory. Create a folder inside this path with the name flex.war.
NOTE: the directory has to be named "flex.war", like the file. In this way JBoss is able to automatically deploy the flex.war file as application.

You can test the evniroment launching this url : http://localhost:8080/flex .
You'll obtain the Welcome page of Flex Data Services.

In the next part of the series dedicated to Flex 2, Flex Data Services and EJB3 I'll show you how to create our first EJB3 project.
If you're italian have also a look at the great articles that Roberto Tassi wrote about EJB3 and Flex 2 integration on FlexGala user Group.

The one item issue with your HTTPService response XML data

It was an old problem that it happened again some days ago while supporting a client for a Flex 2 application.
You know that when you call the HTTPService class and it returns the response data, you can type casting them in ArrayCollection with the following code :

<mx:HTTPService id="myHS" url="data/states.xml"
   result="myAC = myHS.lastResult.dataroot.city as ArrayCollection" />

Now you're ready to use it in data binding with Flex 2 controls.
But if the response data returns an XML with only one item, you'll get the following error :

"cannot convert mx.utils::ObjectProxy@36fbf81 to mx.collections.ArrayCollection"

This is the sample response xml data:
<dataroot>
<city>
<id>22</id>
<region>TRENTINO ALTO ADIGE</region>
<city>TRENTO</city>
<population>449852</population>
</city>
</dataroot>

So you can use a result handler to better handle the error   :

<mx:HTTPService id="myHS" url="data/states.xml"
   result="resultHandler(event)" />

private function resultHandler(event :ResultEvent ) :void {

if( event.result.dataroot.city  == null ) {
mx.controls.Alert.show("The response data are empty !");
}
else if ( event.result.dataroot.city  is ObjectProxy ) {
// the response date has only one item
myAC =  new ArrayCollection( [event.result.dataroot.city  ] );
}
else {
myAC = event.result.dataroot.city   as ArrayCollection;

}
}

You cal also use the ArrayUtil.toArray() method to force the type conversion :

myAC  = new ArrayCollection(ArrayUtil.toArray(event.result.dataroot.city));

Hope that helps.
Thanks to Francesco for finding the solution on my old post, under comments ;)

Using static constants to reduce errors at runtime

We're working on a Flex application for an our client where we made a huge use of custom event classes.  I noted that one of the common errors was during the creation of the custom event object when passing the type property to the custom event class.
To pass the event object and dispatch the event, you istantiate the custom class and pass parameters and the type properties to the constructor of the class :

var evtObj:CustomEvent = new CustomEvent(myAC, "Marco","myEventAsString");
dispatchEvent(evtObj);

The type property (it'sthe third one passed to the class declaration) contains  a String that represents the custom event declared with the Event Metadata :

<mx:Metadata>
  [Event(name="myEventAsString",type="com.CustomEvent")] 
</mx:Metadata>

So if you'll write :

var evtObj:CustomEvent = new CustomEvent(myAC, "Marco","myEventAsString");

you won't obtain a compile time error because it's just a string ! But your application doesn't dispatch the event !
So, to reduce the possibilities to get an "Can't resolve attribute for type event" error I decided to use static constant inside the custom event class :

public class CustomEvent extends Event

 
  public static const MY_EVENT:String = "mioEvento_AS";
 
  private var _myData:ArrayCollection;
  private var _myName:String;

...... getter/setter functions ...

}

Now, when you'll pass the type property to create the event object and dispatch the event, you'll be able to use the constant :

var evtObj:CustomEvent = new CustomEvent(myAC, "Marco",CustomEvent.MY_EVENT);
    dispatchEvent(evtObj);

Unfortunately I did not find a way to use the constant with the MXML declaration of Event Metadata. I'd love to write something similar to :

<mx:Metadata>
  [Event(name=com.CustomEvent.MY_EVENT,type="com.CustomEvent")] 
</mx:Metadata>

My contribute to Adobe