Optimizing Adobe Flex, Air, Flash Applications – by Sean Christmann

[ad]

Optimizing Air/Flash Applications – Sean Christmann Optimizing Air/Flash Applications – Sean Christmann Ed McManus Sean Christmann’s presentation from MAX 2008

[ad]

0 Comments

Adobe Flex and MVC

How Flex fits the MVC models

    The goal of the Model-View-Controller (MVC) architecture is that by creating components with a well-defined and limited scope in your application, you increase the reusability of the components and improve the maintainability of the overall system. Using the MVC architecture, you can partition your system into three categories of components:
    - Model components Encapsulates data and behaviors related to the data.
    - View components Defines your application’s user interface.
    - Controller components Handles the data interconnectivity in your application.

For example, with the MVC design, you could implement a data-entry form that has three distinct pieces:
    * The model consists of XML data files or the remote data service calls to hold the form data.
    * The view is the presentation of any data and display of all user interface elements.
    * The controller holds the user interface logic.

    Although you can consider a Flex application as part of the View in a distributed MVC architecture, you can use Flex to implement the entire MVC architecture on the client. A Flex application has its own view components that define the user interface, model components to represent data, and controller components responsible for the communication with back-end systems. This client-side separation of task is not available in HTML.

If you are interested in finding more information you can read the following posts I found attractive and different, as a concept, one from each other.

Flex And MVC Part 1 – by Kapil Viren Ahuja (… I am waiting for part 2 :D )
http://www.actionscript.org/resources/articles/751/1/Flex-and-MVC—Part-I/Page1.html

Why I hate MVC… – by Ionut Grosu (Romanian Flex programmers RULEZ :) )) )
http://www.flexwizz.com/2008/04/01/why-i-hate-mvc/

MVC considered harmful – by Sho Kuwamoto
http://weblogs.macromedia.com/sho/archives/2005/08/mvc_considered.html

The Flex Show: Episode 33, PureMVC Framework (Podcast – Audio Only)
http://www.theflexshow.com/blog/index.cfm/2008/1/30/The-Flex-Show–Episode-33-PureMVC-Framework

[ad]

0 Comments

C or C++ to AS3 with Adobe Alchemy

Alchemy (formerly referred to as FLACC) is a project from Adobe that allows users to compile C/C++ code that is targeted to run on the open source ActionScript virtual machine (AVM2). The C/C++ code is compiled to AS3 as a SWF or SWC that runs on Flash Player 10 or AIR 1.5. Alchemy is primarily intended to be used with C/C++ libraries that have few OS dependencies. The generated content is within the security constraints of the AVM.

Macintosh Requirements:

  • Alchemy Toolkit Package for your operating system
  • XCode 2.4+
  • Flex 3.2 SDK
  • Flex Builder or Flex SDK setup to target compilation for Flash Player 10

Windows Requirements:

  • Alchemy Toolkit Package for your operating system
  • Cygwin with the following packages installed
    1. Perl
    2. zip
    3. gcc / g++
  • Java
  • Flex 3.2 SDK
  • Flex Builder or Flex SDK setup to target compilation for Flash Player 10
  • Alchemy is a research project that allows users to compile C and C++ code that is targeted to run on the open source ActionScript Virtual Machine (AVM2). The purpose of this preview is to assess the level of community interest in reusing existing C and C++ libraries in Web applications that run on Adobe® Flash® Player and Adobe AIR®.

    [ad]

    With Alchemy, Web application developers can now reuse hundreds of millions of lines of existing open source C and C++ client or server-side code on the Flash Platform. Alchemy brings the power of high performance C and C++ libraries to Web applications with minimal degradation on AVM2. The C/C++ code is compiled to ActionScript 3.0 as a SWF or SWC that runs on Adobe Flash Player 10 or Adobe AIR 1.5.

    Alchemy is primarily intended to be used with C/C++ libraries that have few operating system dependencies. Ideally suited for computation-intensive use cases, such as audio/video transcoding, data manipulation, XML parsing, cryptographic functions or physics simulation, performance can be considerably faster than ActionScript 3.0 and anywhere from 2-10x slower than native C/C++ code. Alchemy is not intended for general development of SWF applications using C/C++.

    Source: http://labs.adobe.com/technologies/alchemy/

    [ad]

2 Comments

Custom Button Skin – Adobe Flex

[ad]
How to create a custom button skin in a Flex web application?
That’s a common question but a simple google will not reveal so much info on how to do it.
The limitation with default flex skin is that even we can define as many colors we want in
a “gradient fill” the “ButtonSkin” will take in consideration only the first 2 of them.

Why did they made it like this ? donno, and do not care! So we extended the existing skin
and created a custom skin for buttons.
Here is how it does look:


Yes.. this is a flex button. Right click on it to download or view the sources, or just click
the following link to see the project http://blog.timeister.com/controls/custombutton

In more details, this is what have we done:

1. Extended the default mx.skins.halo.ButtonSkin class and overrided the updateDisplayList() method that is in charge of “drawing” the button skin.
CustomButtonSkin.as


[ad]

2. Created a css file where we define the style for our custom button.
main.css

3. Created a CustomButton class that extends the basic flex Button class so we can bind the “CustomButton style” name to an existing “CustomButton control”
CustomButton.as


[ad]

4. Declare the used css file in the application then start using the skinned button
Application.mxml

Let us know your ideas about this skin or if you need help in custom skinning other flex controls.
That’s all folks!!!
—————-
The TiMeister Team

6 Comments

Disable AIR Framework Autoupdate


Programmatically Disable AIR Framework Autoupdate from Air Application

In a previous post you can find how to enable/disable Adobe AIR Framework Autoupdate using the Adobe AIR Manager tool.

We had the problem that we wanted to disable Adobe Air Framework from our AIR Application but we never found a way to do this even if the Adobe AIR Manager tool is a air based file. But a few days ago without any doubt what it must be we found a file inside the “C:\Documents and Settings\[user]\Application Data\Adobe\AIR\” (win XP) named “updateDisabled”. After enabling the Adobe AIR Framework Autoupdate the file was erased right away.

Then we found the all the magic of setting Adobe AIR Framework Autoupdate value it the presence of a specific file inside a specific folder. Nothing more.. no registry, no encrypted settings files or else.

We took the time and created a simple AS3 class that you can use for Manually Enable/Disable AIR Framework Autoupdate from your Abobe AIR application.

You can download the class from here: SettingsManager.zip or just browse the class code:

package www.timeister.com // Online Timesheet Software
{
	import flash.desktop.NativeApplication;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.filesystem.File;
	import flash.filesystem.FileMode;
	import flash.filesystem.FileStream;
	import flash.system.Capabilities;
 
	public class SettingsManager
	{
 
	       private static const AIR_SUPPORT_DIRECTORY_WIN:String = "/../../Adobe/AIR";
               private static const AIR_SUPPORT_DIRECTORY_MAC:String = "/../../../Application Support/Adobe/AIR";
               private static const AIR_UPDATE_DISABLED_FILE:String = "updateDisabled";
 
		/**
		* Constructor for Settings Manager class
		*/
		public function SettingsManager()
		{
		}
 
		/**
		 * Method called to get the Adobe Air Autoupdate disabled value
		 * @return a boolean value according to the disable state (true = disabled)
		 */
		public function isAirUpdateDisabled():Boolean
                {
                         var _loc_1:* = getApplicationSupportDirectory();
                         if (_loc_1 == null)
                        {
                               return false;
                        }
                        _loc_1 = _loc_1.resolvePath(AIR_UPDATE_DISABLED_FILE);
                        return _loc_1.exists;
                 }
 
		/**
                 * Method called to Disable air framework autoupdates
                 * @return a boolean value telling the success of them thod call
                */
               public function disableUpdates() : Boolean
              {
                    var fileStream:FileStream;
                    if (!isOSSupported())
                    {
                        return false;
                    }// end if
 
                    var file:* = getApplicationSupportDirectory();
                    if (file == null)
                   {
                         return false;
                    }// end if
 
                   file = file.resolvePath(AIR_UPDATE_DISABLED_FILE);
                   if (file.exists)
                   {
                           return true;
                    }// end if
                    try
                   {
                        fileStream = new FileStream();
                        fileStream.open(file, FileMode.WRITE);
                        fileStream.close();
                    }// end try
                   catch (error:Error)
                  {
                        return false;
                   }// end catch
 
                  return true;
         }
 
        /**
         * Method called to enable air framework autoupdates
         * @return a boolean value telling the success of them thod call
         */
        public function enableAIRUpdates() : Boolean
        {
            if (!isOSSupported())
            {
                return false;
            }
 
            var file:* = getApplicationSupportDirectory();
            if (file == null)
            {
                return false;
            }
 
            file = file.resolvePath(AIR_UPDATE_DISABLED_FILE);
            if (file.exists)
            {
                try
                {
                    file.deleteFile();
                }
                catch (error:Error)
                {
                    return false;
                }
            }
 
            return true;
        }
 
	/**
	 * Method calle to check if this is a supported os
	 * @return a boolean value telling if os is supported
	 */
	private function isOSSupported() : Boolean
        {
        	var capOs:String = Capabilities.os;
 
            if ((Capabilities.os.indexOf("Windows") > -1) || (Capabilities.os.indexOf("Mac") > -1))
            {
            	return true;
            }
            return Capabilities.os.indexOf("Linux") > -1;
        }
 
	/**
	 * Method called to get the Adobe AIR support directory
	 * @return a file reffering to the Air support directory
	 */
	private function getApplicationSupportDirectory() : File
        {
            var _loc_1:File;
            if (Capabilities.os.indexOf("Windows") > -1 || Capabilities.os.indexOf("Linux") > -1)
            {
                _loc_1 = new File(File.applicationStorageDirectory.nativePath + AIR_SUPPORT_DIRECTORY_WIN);
            }
            else if (Capabilities.os.indexOf("Mac") > -1)
            {
                _loc_1 = new File(File.applicationStorageDirectory.nativePath + AIR_SUPPORT_DIRECTORY_MAC);
            }
            else
            {
                return null;
            }
 
            return _loc_1;
        }
 
	}
}
1 Comment

Google Maps API for Flash

This API lets Flex developers embed Google Maps in Flash applications. Similar to the JavaScript version, this ActionScript API provides a number of utilities for manipulating and adding content to maps through a variety of services, enabling you to embed robust, interactive maps applications on your website.

How to start?

  1. Sign up for a Google Maps API Key
  2. Download the Google Maps API for Flash SDK
  3. Read the Setup Instructions
  4. Walk through the Tutorial
  5. Read the API Reference

Source: http://api.google.com
[ad]

1 Comment

Disable Adobe AIR Runtime Autoupdate

By default, when an AIR application is launched, the AIR runtime checks if an update is available. It performs this check if it has been more than two weeks since the last update check. If an update is available, AIR will download the runtime update in the background.

Once the runtime update is successfully downloaded it will prompt the end user to install the update “now” or “later”.
- If the user selects “Now”, the update is applied immediately and end user is asked to shutdown all running AIR applications
- If the user selects “Later”, the next time the first AIR application is launched, the end user will be prompted to upgrade.

In the case the user selected “Later”, they will be prompted to update the AIR runtime the next time an AIR application is launched.
- If the user selects “Continue”, then the update is applied and the AIR application is launched
- If the user selects “Cancel” the AIR application is launched and the end user will be prompted to install the update again the next time an AIR application is launched.

If you would like to disable the auto-update capability in Adobe AIR and only manually update the runtime when a new version is available, or if the Adobe AIR Autoupdater is adding unneeded behavior to your AIR application, then you can use the SettingsManager application to disable automatic updates. Download and run the AIR SettingsManager application and use the toggle button to Enable or Disable auto-updates as desired.

The AIR SettingsManager application is available for download at http://airdownload.adobe.com/air/applications/SettingsManager/SettingsManager.air

1 Comment

Tour de Flex

I was looking for news on Flex and AIR and found out a great AIR application on www.flex.org . “Tour de Flex” is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR and data integration, as well as a variety of third-party components, effects, skins, and more.

The app is big but it certainly worth to be installed, download is approx 50MB.

Tour de Flex has three primary purposes:
* Provide non-Flex developers with a good overview of what is possible in Flex in a  “look and see” environment
* Provide Flex developers with an illustrated reference tool
* Provide commercial and non-commercial Flex developers a place to showcase their work
Tour de Flex includes over 200 runnable samples, each with source code, links to documentation, and other details. Topics include the Flex Core Components, Flex Data
Access, AIR Desktop Capabilities, Cloud APIs, Data Visualization, Mapping, and a growing collection of custom components, effects, skins, etc.

[ad]

0 Comments