Fabio Biondi Blog » Blog Archive » Optimizing MXML code in Flash Catalyst “Panini”

Optimizing MXML code in Flash Catalyst “Panini” - Part 2
CUSTOM/GENERIC COMPONENTS

31 January 2011 No Comment

In this article we’ll optimized the generated code by Catalyst dividing the application in custom/generic components.
We’ll also introduce Interactions,to add interactivity.

You need to read previous chapters in order to understand this article.

CREATING THE MAIN VIEWS OF THE APPLICATION

Select the default status, SplashScreen, from the States panel.
After selecting the state, you can click on the folder SplashScreen Layer inside the Layers panel to automatically select all its graphic elements.
Select Convert to Component > Custom Artwork / Generic Component from the context menu (right mouse button) to convert all the elements in a new Custom component.
Alternatively, you can convert artworks in Custom / generic components using the Heads-Up Display (HUD) but we’ll talk about it in the next chapter Vertical Scrollbar components

Rename the component to SplashScreenView setting it to Fixed Size.

NOTE: FIXED SIZE o RESIZABLE?
Since version 2 of Flash Catalyst (codename “Panini”) you can create resizable components but will not discuss the topic during this tutorial. For a preview of this new feature you can watch the video of Doug Winnie available on Adobe TV: Resizable Applications and Components

In the Layers panel you will notice that the SplashScreen Layers folder containing graphics objects has now been converted into a component called SplashScreenView.

Repeat the previous step for the other two states - BlogList and ArticleDetails - converting their graphic objects in your own custom components (see pictures below) assigning these names:

BlogView
DetailsView

Creating BlogView component (state: BlogList):

Creating DetailsView component (state: ArticleDetails):

In the Layer panel (on the left) are now available three new components, also available in the Project Library (on the right)

THE GENERATED MXML CODE

Grouping graphic objects in Custom/generic components you can then divide the project into different portions of code, in other words in MXML components.
The reasons why we do this are essentially two:

1) generate MXML code more readable to facilitate Flex programmers who will use it;
2) a smaller number of components simplifies the use of transition effects (discussed in the Transitions chapter, available in the next days);

You can view the source code generated by Catalyst selecting the Code workspace.
The Project Navigator panel now display three new files in the components folder: BlogView, DetailsView and SplashScreenView.

Here is the updated mxml code of the main application file, Main.mxml, which is much cleaner and easier to read than the previous one generated after the import.
Now we have 20 lines instead of 500!
The application code has been in fact divided between components BlogView, DetailsView and SplashScreenview.

<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:lib="assets.graphics.Layout.*"
			   xmlns:ATE="http://ns.adobe.com/ate/2009"
			   xmlns:ai="http://ns.adobe.com/ai/2009"
			   xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
			   xmlns:d="http://ns.adobe.com/fxg/2008/dt"
			   xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:flm="http://ns.adobe.com/flame/2008"
			   xmlns:components="components.*"
			   width="100%" height="100%" 
			   backgroundColor="#FFFFFF" 
			   preloaderChromeColor="#FFFFFF"
			   fc:previewHeight="800" fc:previewWidth="480">
 
 
	<fx:Style source="Main.css"/>
 
	<s:states>
		<s:State name="SplashScreen"/>
		<s:State name="BlogList"/>
		<s:State name="ArticleDetails"/>
	</s:states>
	<components:SplashScreenView includeIn="SplashScreen" x="-1" y="1"/>
	<components:BlogView includeIn="BlogList" x="-1" y="0"/>
	<components:DetailsView includeIn="ArticleDetails" x="0" y="0"/>
</s:Application>

I don’t I copy the code of the three components - SplashScreenView, BlogView and DetailsView – because not essential for the tutorial.
These components extend the Group class and contain within MXML graphic and FXG tags previously imported from Illustrator.

For the curious, the Flash Catalyst project named 002_CreateViews.fxp attached to the tutorial (soon available) contains all the code generated so far.

ADD INTERACTIONS

Test the project : File > Run Project (or Ctrl + Enter).
However, the present application will only display the default state, SplashScreen.
So, we must therefore ensure that the user can click on the logo to open the BlogList state and we’ll use the Interations to accomplish this task.

Go to the SplashScreen state and select the SplashScreenView component in the artboard.
From the context menu select Edit Component (or double-click the mouse over the component).

From the Breadcrumbs bar you will notice that we are now inside the component SplashScreenView.

This way to navigate the project is very similar to that used by Adobe Flash Professional to browse the MovieClips.

Now that we are within the SplashScreenView component we can use the Select tool to select the logo and add an interaction from the Interactions panel.
In this case we chose not to select the gray background, so as to enable the CLICK event only on the logo.

Use the Interactions panel to add an Interaction and enter the following parameters:

OnClick
Play Transition to State
Select Target: 002_CreateViews *
State: “BlogList”

* This value represents the file name we are using, and could therefore be different.

From the Appearance sub-panel (inside the Properties panel) check the HandCursor option to enable the display of the hand to the rollover of the logo.

Compiling the project (Ctrl + ENTER) the application starts and displays the default status, SplashScreen but if you click now on the logo you will be redirected to the blog page.

SplashScreen state: