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

Optimizing MXML code in Flash Catalyst “Panini” - Part 8:
Code optimization

21 February 2011 No Comment

In this chapter we will optimize the code generated from Flash Catalyst splitting the layout in other custom components with the purpose to create a more readable code.

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

-

The MXML code generated so far is not bad.
However, the number of rows in the three main components of the application is still too high and the code is still not very readable. BlogView and DetailView components still have about 150 lines each, of which the majority related to the graphics of the two ActionBar placed on top of each state.
To “clean” these two components select then all the elements of each actionBar and convert them into a new custom component.

Then open the BlogView component, select the items that make up the action bar (the logo, the TextInput component created in the previous chapter and the gray background) and convert them to a custom / generic component.
Set BlogBarView as the component name.

The code of the BlogView component will now be much easier to read because more than a hundred lines were moved to the new component called BlogBarView.
In their place, inside the BlogView component, you will find a single line of code to create a new instance of the BlogBarView component.

[...]
<components:BlogBarView x="0" y="0"/>
[...]

We must now repeat the previous step in the DetailsView component.
Open the component and select all the elements of its ActionBar to convert them into a new Custom/generic component called DetailsBarView.

However, a warning message appears.

The reason is that we have previously set an interaction to the Back button and this message is notifying that these actions will be removed when we create this new component.
You can click on OK but then we will have to reapply the Back button interaction.
However, looking at the code we see that DetailView.mxml still too dense.
We can then convert into a new custom components the graphics of the underside: the More Details button and the two horizontal lines.

Select these items and repeat the operation performed before converting them into a Generic / Custom components this time called DetailsFooterView.

Analyzing now the DetailsView.mxml source code you will notice that the lines of code have decreased to less than 40, which may be acceptable for this type of project.
The code now contains the instances of DetailsFooterView DetailsBarView components.

 
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
		 xmlns:ai="http://ns.adobe.com/ai/2009"
		 xmlns:d="http://ns.adobe.com/fxg/2008/dt"
		 xmlns:flm="http://ns.adobe.com/flame/2008"
		 xmlns:lib="assets.graphics.Layout.*"
		 xmlns:components="components.*"
		 fc:resizable="false">
	<fx:Script>
		<![CDATA[
 
		]]>
 
	</fx:Script>
	<fx:DesignLayer ai:artboardIndex="2" ai:x="1079" d:layerType="page" d:pageHeight="800" d:pageWidth="480" d:userLabel="ArticleDetails Layers">
		<fx:DesignLayer d:id="17" d:userLabel="UI elements">
			<s:Rect d:userLabel="bg" x="0" y="0" width="480" height="800">
				<s:fill>
					<s:SolidColor color="#333333"/>
				</s:fill>
			</s:Rect>
			<fx:DesignLayer d:id="18" d:userLabel="Footer">
				<fx:DesignLayer d:id="19" d:userLabel="MoreDetail Button">
				</fx:DesignLayer>
 
 
 
 
                       <components:DetailsFooterView x="0" y="713"/>
 
 
			</fx:DesignLayer>
			<fx:DesignLayer d:id="21" d:userLabel="TextArea">
				<s:SkinnableContainer x="33" y="453" skinClass="components.ScrollableTextArea"/>
			</fx:DesignLayer>
			<s:BitmapImage d:id="23" d:userLabel="Image" x="26" y="90" width="428" height="343"
						   smooth="true" source="@Embed('/assets/images/Layout/timthumb.jpg')"/>
		</fx:DesignLayer>
		<fx:DesignLayer d:id="24" d:userLabel="ArticleDetails ActionBar">
 
 
                <components:DetailsBarView x="0" y="0"/>
 
 
		</fx:DesignLayer>
	</fx:DesignLayer>
</s:Group>

To complete the application reapply the BackButton interaction.
Open the component DetailsBarView > DetailsView and then reinsert the interaction.

We can also open an HTML page when users click the More Details button.
Select the button contained in the DetailsViews > DetailsFooterView component and add the following interaction