PlugrMan: The Universal API Toolkit – By Almer/Blank

Developing an Enterprise Flex Application Strategy – by Chris Giametta

News – by Csomák Gábor

LockLizard FlashGuard – by Ali Nekou Pour

Anicca Digital Solutions – by Ali Raza

NetroMedia – by Josephine Liang

GPU-3D in Flash – by Eslam Ahmed

Creating a Distributed Video Hosting Platform – by Andrey Chernih

File handling with AS 3.0 – by Sachin Patil

CREATING CUSTOM VISUAL CLASSES – by Louis DiCarro

Adventures In ActionScript – Serializing Objects – by Huw Collingbourne

Test Driven Development Or How Not To Be Trapped In A Nightmare. Part 3 – by Marc Pires

Preparing Your Application To Use Push Notifications – by Brandon Trebitowski, Christopher Allen, and Shannon Appelcline

Interview With Lance Snider, Envato – by Ali, Nekou Pour

An Interview With Demetrio Fortman, CEO of MotoCMS.com – by FFD Team

Top 3 Book Recommendations – by Ali Raza

Flash&Flex Developer’s Magazine

FxConnect Framework

The FxConnect programming model is made up of:
• Application Framework: The Application Framework is the main wrapping component for the Application that contains application context and is responsible for the setup/initialization of the application.
• View Components/Modules: Modules are used to chunk the application into smaller SWFs that are loaded through the Module Manager. These modules are the features and components of the application where you start to code the different views and flows.
• Application State: The Application State is responsible for holding important application attributes in a memory cache that is accessible from any part of the application that gets an instance of this model.
• Data Model/Sub-models: The model provides a layer to access and change application data through creating proxies.
• Proxy: Proxies represent a layer of abstraction that exposes business functions to the application. They are a means to engage with remote services such as Spring beans to retrieve data. They contain the data result and fault handlers that are implemented through the IResponder class.
• Module Manager: The module manager allows you to logically partition the application into manageable view modules. Effectively breaking download of the application into small chunks that allow the views to be displayed on demand.
• Navigation: This is a business object that manages view state for components and modules. In this class, you set up constants that are maintained here.
• Style Manager: The Style Manager allows you to dynamically load styles into the application and is initialized at run-time.
• State Engine: This utility allows the definition of application states and the valid transition to which other states are available.
• Resource Manager: This utility is used to handle internationalization (i18n) and localization (l10n) details. You specify a default resource bundle by component or by application that allows you to define string names for button labels, text areas, etc.
• Error Manager: Error management allows you to capture and store errors from anywhere in the application as well as use its internal pop-ups to display error messages.

For more information please visit AppFoundation and contact us now.

http://www.appfoundation.com

http://adobe.flex.appfoundation.com

October 14th, 2009 – 10:00 a.m. to 12:00 p.m.
Christopher A. Parr Library, Program Conference Room
6200 Windhaven Parkway, Plano, TX 75093

Data Visualization with Adobe Flex

ABSTRACT:

In this discussion, Chris Giametta will present an overview discussing the challenges of large data sets, complex data arrangements, and effective UI implementations using Adobe Flex.

This presentation is about building rich Internet applications that combine the interactive user experiences of Adobe Flex with the delivery of complex data from large data warehouses and databases. The goal for this discussion is to give you a better understanding of how RIAs can solve client needs in the business intelligence space.

BIO:

Chris Giametta is founder and President of AppFoundation Technology Group, a leading RIA company in Dallas/Fort Worth focused on data visualization and web based application development. AppFoundation employs advanced methodologies and tools to help decision makers build the situational awareness of their competitive terrain.

Chris is an Adobe Certified Expert in Adobe Flex. He was been working with Flex since 2004. Before learning Flex and Spring (Java based framework), he cut his teeth with EDS developing customer relationship management (CRM) systems built with Java on the front end, and a C++ implementation on the server side. He has extensive experience in delivering Business Intelligence systems, e-commerce, and ERP applications in a rich format.

As the author of Pro Flex on Spring, Chris focused on how to develop large scale applications using patterned based development to implement RIA technology.

You can contact Chris by visiting:

www.appfoundation.com

Please check out www.javamug.org for more information regarding the event. I hope to see you there if you are in the Dallas/Fort Worth area.

I also plan to give a first peek of Af-Connect. Af-Connect is a collaborative application environment that uses a controlled social networking model to share client and project information. You can create private sites to share files, projects, and contacts with partners, co-workers, and clients. The application is built in Adobe AIR on top of a Spring implementation.

Update:
I enjoyed the opportunity to present at JavaMug in Dallas Texas. Thanks to Erik Weibust for being a great host and taking care of the details for me. Here are the presentation slides and Flex, Spring, and FlexLib projects I showed in the meeting.

JavaMug_Presentation

Flex Library Project

Spring Project

Flex Project

I have seen many examples of doing this, just without the ability to scale the PDF larger and smaller when a resize of the AIR application occurs. So I worked that issue out and wanted to share it with the Flex community.

To load a PDF into an AIR application, use the HTMLLoader class to load the PDF into your AIR window. Since you cannot add the HTMLLoader as a child, you will need to create a UIComponent() to add the PDF to a container.

If you look at the addFile() function, you will see that I first checked the PDF capability had a STATUS_OK before proceeding to the PDF loading steps with the following line of code:

if(HTMLLoader.pdfCapability == HTMLPDFCapability.STATUS_OK) {}

Once successful, I created an URLRequest to locate the PDF on my Tomcat server. You could easily add a parameter to set the PDF based on your content management as needed.

I then set the PDF’s initial height and width to that of the with the id of container. After that is done, I loaded the PDF to the HTMLLoader from the URLRequest.

Now that you have a handle on the PDF and it is loaded to the AIR application, you can use the UIComponent.addChild function to add the PDF to the UIComponent. After that, you need to add the child to the which is done by calling the addChild() function on container.

If you look at the example from the Adobe Livedocs you will notice they give the PDF’s height and width static numbers. What we want to do is allow the PDF to scale on window resize. To accomplish this, create a new function that is executed everytime the application is resized. In this example, I created the scalePDF() function that is called by the resize function on the as follows:

Since the width and height are set to 100% on the and I set the PDF’s height and width to the height and width, the PDF will resize to fit the width and height of the every time it is resized. This will always give you the maximum reading space available for the PDF.

Here is the full source for this example. You can take this code and create a component that can be reused throughout your AIR applications. Enjoy.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
   xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

   <mx:Script>
      <![CDATA[
      import mx.core.UIComponent;

      private var pdf:HTMLLoader = new HTMLLoader();

      private function addFile():void
      {
         if(HTMLLoader.pdfCapability == HTMLPDFCapability.STATUS_OK)
         {
            var request:URLRequest =
               new URLRequest("http://localhost:8080/af_Central/a.pdf");

            pdf.height = container.width;
            pdf.width = container.width;

            pdf.load(request);

            var ui:UIComponent = new UIComponent();
            ui.addChild(pdf)

            container.addChild(ui);
         }
         else
         {
            trace("PDF cannot be displayed. Error code:",
               HTMLLoader.pdfCapability);
         }
      }
      private function scalePDF():void
      {
         pdf.height = container.width;
         pdf.width = container.width;
      }
      ]]>
   </mx:Script>

   <mx:Button label="Do It" click="addFile()" />
   <mx:VBox id="container" width="100%" height="100%"
      resize="scalePDF()"/>

</mx:WindowedApplication>

Pro Flex on Spring is the first book covering the use of the Spring Framework as an integration point for the Flex Framework so that enterprise Java developers can now add a Rich Internet Application front end to their “back-end”. Flex on Spring completes the Spring Framework, and makes it arguably the most complete, top-down, application development stack available to Java developers.

What you’ll learn:
• Explore best practices on architecting enterprise Rich Internet Applications
with Flex and Spring.
• Discover how Flex applications interface with Spring services.
• Understand how to persist data, end–to–end, using Flex data communication protocols
with Spring and its interactions with iBATIS, Hibernate, and JDBC.
• Work with solid frameworks, Cairngorm and Pure MVC, to build Flex applications.
• Build a practical application that demonstrates real experience in delivering enterprise RIAs.
• See how Spring Factories play a key role in routing calls to Spring classes from Flex clients.

I finally came up with a simple approach that is working for me with IE 6 and IE 5. I would like to hear any feedback for this solution working in different versions of IE and other browsers.

What I did is modify the Flex project html-template. I added the following to the <body> tag.

<body scroll=”no” onload=”document.getElementById(‘${application}’).focus()”>

This points the onload() function in the html wrapper to force focus on the Flash object by object id.

Once you have modified the html wrapper file you can create a simple Flex application to test with. Create a new Flex Project and simply copy the following mxml code into your application. When you run this application you should see a blinking cursor in the text box.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  creationComplete="initApp()">
<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
  import mx.events.FlexEvent;       

  private function initApp():void {
   // set the focus to the first text input
   input1.setFocus();
  }
 ]]>
 </mx:Script>      

 <mx:Canvas width="420" height="244">
  <mx:TextInput id="input1" x="130" y="50"/>
 </mx:Canvas> 
</mx:Application>

I believe in creating a consistent, modular, and repeatable architecture. The architecture must be sufficient to support small applications as well as extremely robust enterpirse applications. A key to project success is to create an architecture that new developers can rapidly integrate themselves into and begin to be productive on day one. I feel that Flex combined with Spring, iBATIS, and Cairngorm help me reach these goals of a patterened based, repeatable architecture.

I have put together a sample application that I hope will communicate a series of Flex best practices. This Contact application implements one set of standard CRUD constructs. You should be able to understand how to architect an enterprise application down to a simple tool with this example. One thing I find very helpful about Cairngorm is how it organizes itself in the project space. You can break out modules to separate work for your team. It works in large and small shops.

I would also like to acknowledge the work done by Cairngorm Docs, Christophe Coenraets, and Adobe Labs. I have learned a great deal regarding the technology in this post from those sources as well as many other RIA blogs.

 Experience the application:

Flex Makeup:

Flex provides a solid framework for building highly interactive Rich Internet Applications. Flex is made up of the following programming aspects:

• ActionScript 3.0:  ActionScript 3.0 is a powerful, object-oriented programming language that is ideally suited for rapidly building RIAs. AS3 facilitates rapid development for large applications, handling large data sets, and is object oriented. Java developers will find an easy transition to Flex Actionscript development. AS3 is an ECMAScript compliant language.
• MXML:  MXML is the XML-based language that developers use to lay out components in Flex applications. It provides a declarative approach to controlling an application’s visual appearance.
• Flash 9: Flex is compiled into Flash .swf. This .swf is executed on the client by the Flash Virtual Machine. This allows applications built in Flex to be executed on virtually any platform that supports Flash 9. That includes PCs, hand-held devices, POS Terminals, PDAs, etc…

For more information regarding Flex you can find it at http://www.adobe.com/products/flex. The Flex API documentation can be found here.

Spring Makeup:  

Spring is a popular Java framework that provides a central automated configuration for writing your application objects. Springs lightweight container is capable of assembling loosely-coupled components which is the basis for reuse.

The DAO implementation support allows Spring to easily integrate with persistence frameworks like Toplink, Hibernate, JDO, and iBATIS. One key beneift of using Spring is if you ever need to change your persistence framework you can do so by decoupling your existing framework and plugging in a new persistence framework. You will retain the majority of your code base.

You can find more information about Spring at http://www.springframework.org.

iBATIS Makeup:

iBATIS is a data mapping framework that couples objects with stored procedures or SQL statements using an XML structure. iBATIS allows simple integration to your database of choice.

I like iBATIS for the flexibilty of the SQL entered in the SQLMaps. Many of the Flex applications I have written reside on top of a data warehouse. I need to create complex SQL that runs effeciently on databases like Netezza, Oracle, Teradata, and Informix.

More information about iBATIS can be found at http://ibatis.apache.org.

Cairngorm Makeup:

Cairngorm is an architectural framework that offers a starting point for RIA development. It directs consistency, realiabiliy, and modularity in Rich Internet Development for the User Interface by implementing reliable design patterns.

Using Cairngorm allows you to break up project work across large teams. Flex aids in this by allowing you to easily produce an application wrapper to build modules in Flex tied together by Cairngorm.

The Cairngorm architecture is built to allow you to handle user gestures on the client, manage client state, and encapsulate business logic in the client.

In this article we will discuss how Cairngorm implenets Command, Delegate, and Service Locator patterns to interact with a Spring/iBATIS service model.

The Cairgorm programming model is made of:

• Value Object:  The Cairngorm Value Object acts as a marker interface to help improve readability of code. The VO is nothing more than a mapping to your service bean. This VO is used to help transform incoming object lists to map to flex view objects like a datagrid.
• Event: The event describes the type of object that will be processed when the event is fired. The event sets an event type to be listened to by the controller. The Cairngorm Event class is required for event processing.
• Front Controller: This class controls user actions by binding the event to a specific command. That marrage of these two components allows Flex to detect user gestures and return data to the model.
• Command: The command class enforces the binding of the Event between the Front Controller. The command is responsible for initiating external calls through the Business Delegate.
• Business Delegate: The Business Delegate implements the Responder inteface that handles data returned as the result of a service call. I try to match my Business Delegate to my server side service method implementation. A delegate can call other services as needed, but that can cause code maintainability issues for the application.
• Service Locator: The Business Delegate locates the application level service and passes references of the Commands Result and Fault handlers.
• Model Locator: The Model Lcoator is used to instanciate the applications model and/or models. The locator grants access to data objects that the Command will apply results too for the View layer to assign to components like a datagrid.

Flex-Cairngorm Architecture        Spring-iBATIS Architecture

Application Configuration for Flex, Spring, Cairngorm, and iBATIS

Step 1: Get the project files

1. Download cairngorm-spring-iBATIS.zip here. ***This zip file contains all of the files required to run this example project. You do not need to download items 3 through 6 below unless you want to check out the open-source projects themselves.
2. Expand cairngorm-spring-iBATIS.zip to a Tomcat /webapps location or other j2ee web server.
3. Download the Spring framework at Spring framework (version 2.0) at http://www.springframework.org/download
4. Download Cairngorm 2 for Flex at http://labs.adobe.com/wiki/index.php/Cairngorm
5. Download iBATIS at http://ibatis.apache.org
6. Download MySQL at http://dev.mysql.com/downloads

Step 2: Setting up Cairngorm

To deploy with Cairngorm you need to simply unpack the Cairngorm.swc and relocate it to:

{context-root}\WEB-INF\flex\user_classes

Step 3: Setting up Spring

1. Copy spring.jar to {context-root}\WEB-INF\lib directory of your web application
2. Modify the web.xml file of your web application. Add the context-param and listener definitions as follows:  

   <context-param>     
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/applicationContext.xml</param-value>
   </context-param>                        
   
   <!-- Spring Session attribute and binding listener support -->
   <listener>
         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
   </listener>
   

3. Copy SpringFactory.class and SpringFactory$SpringFactoryInstance.class from your compiled source location to {context-root}WEB-INFclassescomappfoundationcommonfactories. This code developed by Jeff Vroom
4. Register the Spring factory in {context-root}\WEB-INF\flex\services-config.xml:

   <factories>  
        <factory id="spring" class="com.appfoundation.common.factories.SpringFactory"/>
   </factories>
   

Step 4: Setting up iBATIS

1. Locate ibatis-common-2.jar, ibatis-dao-2.jar, and ibatis-sqlmap2.jar
2. Copy those jar files to:  {context-root}WEB-INFlib
3. Modify your sql-map-config.xml in: {context-root}WEB-INF

   <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE sqlMapConfig PUBLIC "-//ibatis.apache.org//DTD SQL Map Config 2.0//EN"
   "http://ibatis.apache.org/dtd/sql-map-config-2.dtd">                          
   
   <sqlMapConfig>
         <sqlMap resource="../sqlmaps/Contact.xml" />
   </sqlMapConfig>
   

Step 5: Register the Spring Beans

1. Locate your applicationContext.xml in {context-root}\WEB-INF
2. Modify the applicationContext file to include your Spring beans as follows:

   <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE beans
           PUBLIC "-//SPRING//DTD BEAN//EN"
           "http://www.springframework.org/dtd/spring-beans.dtd">
   <beans>
        <!-- START Load application properties -->
        <bean id="propertyConfigurer"
          class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
          <property name="location"><value>classpath:../application.properties</value></property>
        </bean>
       <!-- END Load application properties -->                          
   
    <!--  START DB connection info -->
     <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"
            destroy-method="close">
          <property
            name="driverClassName"><value>${jdbc.driverClassName}</value></property>
          <property name="url"><value>${jdbc.url}</value></property>
          <property name="username"><value>${jdbc.username}</value></property>
          <property name="password"><value>${jdbc.password}</value></property>
      </bean>    <bean id="transactionManager"
          class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
          <property name="dataSource"><ref local="dataSource"/></property>
       </bean>
    <!--  END DB connection info -->    
    <!--  START iBATIS config -->
     <bean id="sqlMapClientTemplate"
        class="org.springframework.orm.ibatis.SqlMapClientTemplate">
       <property name="sqlMapClient" ref="sqlMapClient" />
     </bean>
      <bean id="sqlMapClient" class="org.springframework.orm.ibatis.SqlMapClientFactoryBean">
          <property name="dataSource" ref="dataSource" />
          <!--  this needs to point to where the sql-map-config.xml file is -->
          <property name="configLocation" value="classpath:../sql-map-config.xml" />
      </bean>
    <!--  END iBATIS config -->                          
   
    <!--  START DAO config -->
     <bean id="contactDao" class="com.appfoundation.vms.dao.ibatis.ContactDaoImpl">
      <property name="sqlMapClientTemplate" ref="sqlMapClientTemplate" />
     </bean>
    <!--  END DAO config -->
    <bean id="contactService" class="com.appfoundation.vms.services.ContactServiceImpl">
        <property name="contactDao"><ref bean="contactDao"/></property>       
    </bean>
   </beans>
   

Step 6: Configure the Flex Remote Services

1. Locate and open remoting-config.xml in {context-root}\WEB-INF\flex.
2. Add the following destination:

   <destination id="contactService">     
        <properties>
               <factory>spring</factory>
               <source>contactService</source>
         </properties>
   </destination>
   

Step 7: Set up the MySQL Database Table

I am using MySQL Server 5.0 to run this example database. You can switch to your preferred database by changing the application.properties that iBATIS reads into its connection object. Those properties are injected into the iBATIS persistence framework by Spring.

1. Locate MySQL-Setup.txt in {context-root}\WEB-INF\db
2. Create a new database catalog named client 
3. Run the two SQL statements to set up the contacts table and insert a default record

Step 8: Running the Application

1. Open a browser, access http://host:port/context-root/CairngormExampleProject.mxml, and run the application. For example, I run the application using http://localhost:8080/cep/CairngormExampleProject.mxml in my browser.