The application is built using the Adobe Flex and AIR platform, and utilizes a series of Spring services for persisting its data. The combination of Spring and AIR offers a powerful deployment model with due to the ease of configuration required. The simple, yet robust, deployment is possible because the AIR runtime runs on the client machine.

The AF Connect AIR application enables valid users to view projects they are tied to, messages for those projects, media, and client contact information if that are granted rights to those views. The list below shows what the application feature set is composed of:

• Social Media connection suite via FxConnect
• Account and Project creation
• Ability to assign members viewing privledges to selected accounts and projects
• Account and Project level messages, connections, and media
• Project management of project milestones, details, issues, and tasks
• User profile management
• Client details, notes, location, contacts, and URL links

Af Connect Task View

Solution Overview

With the power of the AIR and Spring platforms, it only took about 4 months to take the application from concept to a working production implementation. A team of designers, Flex developers, and Java developers worked on the application at different points throughout the implementation, working on both the backend data connectors and the user interface.

The client desktop application was built using Adobe Flex and runs in the AIR runtime. Adobe Flex is an application development framework that is used by developers to build applications that run in the Flash Player. Adobe AIR allows developers to create applications for the desktop using Web technologies such as HTML/CSS, Ajax, Flash, and Flex. In addition, AIR provides offline support and a simple deployment paradigm for delivering the client applications.

The mid-tier of this applications is a balance of Spring and Java Servlets to handle the heavy lifting for data processing. This allows for a deployment mechanism where the AIR application runs on the user’s computer and data is managed by Spring.

The pairing of AIR and Spring makes it possible to retrieve and visualize the data quickly for the users. With Flex and Spring, we can stand up applications at a very fast pace.

One of the features important to the application users was the ability to map the location of our client site. You can see how we integrated with Yahoo Maps in the image below.

Af Connect Client Location View

This made it easy to add print functions that use the content in the Flex component to send the map to the printer.

To learn how AppFoundation can help your organization develop Business Intelligence tools like this one, please visit www.appfoundation.com and contact us now.

http://adobe.flex.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

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>