If your business has invested in Adobe Flex or Adobe AIR, a powerful software development kit for web, mobile, and desktop, chances are you’ve also invested in the training and you have IT professionals that are familiar with the basics.

Here is the challenge: Every business is unique and requires unique solutions for the web and internally. Sometimes, it may be necessary to call in specialists to partner with your IT staff to help determine just how to apply the proper toolset to a specific project or situation. This is a situation that AppFoundation’s Adobe Flex mentoring can be of real value.

How Does It Work?

Adobe Flex staff augmentation or project consulting can be done on a temporary contract basis, which will deliver high yield results while showing a cost savings for your business. In addition, such a consultant can either come to your place of business or work offsite. In either case however, it is important to engage early in the development stage of whatever project your business in undertaking so the mentoring process can happen right away. By involving the consultant during the initial phase, your business will save even more and improve time-to-market. During this period, the consultant will have the opportunity to evaluate your present development framework, including:

•  Code Base
•  Development framework and processes
•  Architecture configuration (hardware and software)
•  Security configuration
•  Ux usability

Keep in mind that the primary purpose of Adobe Flex and Adobe AIR is the creation of web, mobile, and desktop applications for the use of your customers and clients. As such, having AppFoundation working on your behalf will help your IT staff to get the most out of the Adobe toolset and ensure that your rich Internet applications are user-friendly and intuitive.

How Long Does It Take?

The length of time your IT department may require Adobe Flex consulting can vary based on project needs. AppFoundation is prepared to partner with your business to address short, medium, and long term needs for project work. AppFoundation has extensive experience in developing extremely large scale Adobe Flex and Adobe AIR applications integrated with the following technologies:

• JAX-WS2.0 based web services hosted on Weblogic
•  EJBs hosted on Weblogic
•  Oracle, SQL Server, Teradata, Netezza. MySQL
• Acupia based file storage
• JSPs, Spring, JAVA EE, .NET, PHP
• SAP SRM and SAP MDM
• SAP BSPs
• Much much more

AppFoudation also brings its own series of Adobe Flex and Adobe AIR tools to the table in the form of FxConnect.

FxConnect is an Enterprise development framework for Adobe Flex and Adobe AIR.

With many years of experience using Adobe Flex, we have seen many issues with current options for development frameworks. From organizations who don’t allow open-source solutions to mostly issues with application consistency and size; AppFoundation has created its own development framework built for developers.

FxConnect cuts down on as much as 25% of development required to deliver Flex and AIR applications. The goal of FxConnect is to simplify development of large scale rich Internet applications (RIAs). The result is a framework that allows your company to start developing features out-of-the-box instead of worrying about core architecture issues that FxConnect addresses.

• Application Context
• Module Management
• Application Navigation
• Style Management
• Resource Management
• Data Transport
• Error Management
• State Management

As you might have experienced, you can see that Flex can be built out-of-the-box to obtain data from external data sources. This works fine with small Flex applications that only have one or few view states. However, when it comes to building enterprise scale applications in Flex the basics just won’t cut it. To avoid a ‘big ball of yarn’ (many point-to-point connections between Flex components) infrastructure for your application we need to define a standard and consistent architecture for building our Flex applications.

When determining what architecture to implement your Flex user interface with you need to consider what fits your organization and developers skills best as each solution is different and generally based on different design patterns, or slight modifications of those patterns. There are a few Flex application development frameworks that present solutions to Flex development through design patterns that can be applied to Flex such as Cairngorm, PureMVC, MVCS, and Mate. However, from our experience, each of these frameworks creates various problems when developing enterprise applications such as:

• Applications that are difficult to maintain due to the over-use of events.
• Difficulty to track application flows when data is not persisted on data models and passed through events exclusively.
• Application SWF sizes becoming larger than 1mb in size. This is not good for browser based RIAs.

An Investment That Pays

Costs for Adobe Flex mentoring and consultation will depend upon the scope and size of your project. However, regardless of cost, temporary Adobe Flex staffing augmentation provided by AppFoundation’s veteran consultants is an investment that will give you security in knowing that your web, mobile, and desktop applications have been configured and developed by experts.

If you want to get a quote for AppFoundation’s consulting services, please visit www.appfoundation.com and fill out the contact form or email us directly at info@appfoundation.com.

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

Each Sprint is 2-3 weeks in length. We plan out stories that compose what functionality will be delivered in the demo at the end of the Sprint.

Learn more about how AppFoundation uses Agile Software Development here:

AppFoundation goes Agile

AppFoundation Company Blog: GIS

The application was built on top of Modest Maps. Modest Maps displays tile-based maps from sources like Microsoft, Yahoo!, OpenStreetMap and others. Here is an image of the app.

Launch the application

If you want to learn more about how AppFoundation provides solutions based on Rich Internet Applications, please drop me a line at www.appfoudation.com.

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>

The first Java Option parameters to set are -Xms (minimum heap size) and -Xmx (maximum heap size). I usually start with a lower -Xms number so the heap can build up to the max -Xmx size if needed. This way I do not partition a portion of memory that may not be used. The setting I use on development and production servers is:

 -Xms 256m -Xmx 1024m

The second Java Option to look at is the MaxPermSize. The permanent generation is used to hold reflective data of the VM itself such as class objects and method objects. PermSize is an addition to the -Xmx value. I have set the following MaxPermSize in development and production:

-XX:MaxPermSize=128m

You can set these parameters in Tomcat using the Configure Tomcat application on the Java VM tab.

Be sure you have enough memory on the web server you are allocating memory for. The Windows servers I am referring to have 4 gigs of RAM.

I was getting very poor performance after opening several files in the project space. Eventually I ran out of memory for Eclipse to operate in. I have 2 gigs of ram and plenty of CPU horsepower on my workstation, so that wasn’t the issue.

What I found was to allocate more memory to the Java heap memory. Eclipse allocates up to 256m by default.

Open the following file:

{eclipse-install-dir}eclipse/eclipse.ini

Update or add:

-vmargs -Xms40m -Xmx512m

You may need to also up the permanent generation memory space using this parameter(default is 64m):

-vmargs -XX:MaxPermSize=<memory size>

I haven’t had an Eclipse crash in a week now. I guess the other option would to not have so many projects in my workspace or have multiple workspaces.