FlashBuilder and PureMVC Part II

The previous post in this series introduced a Flex 4 ‘makeover’ of an existing PureMVC tutorial.  Custom preloading of a Flex app. has already been discussed.  The main MXML file contains the styling for the entire application.  The prior tutorial embedded fonts in Actionscript and created many low-level text fields dynamically.  Custom buttons were constructed directly in Actionscript.  The makeover still shows how dynamic text fields are created and formatted, although Flex components are used for basic UI items.  My preference is to place application-level styling in one, high-level location.  This isolates future font changes, for example, to a single file.  Otherwise, we would have to search for every view class that created a text field and change font specifications one at a time.

Styling in Flex 4 is a bit different.  Note the use of namespaces.

<fx:Style>

@namespace s “library://ns.adobe.com/flex/spark”;

@namespace mx “library://ns.adobe.com/flex/mx”;

@namespace views “view.*”;

@font-face {

src: url(“/Library/Fonts/Arial.ttf”);

fontFamily: arialEmbedded;

fontWeight: normal;

embedAsCFF: false;

}

The remainder of the <fx:Style> tag is provided in the prior post.  I had a bit of trouble with the local() syntax, so I provided the direct url for the font   When embedding fonts in a Flex 4 application, take care to note whether the component using the font is Halo or Spark or a dynamically created text field. DefineType4 is now in the Text Layout Framework, which is documented here.  The implication is whether or not embedAsCFF is true (Spark) or false (otherwise).  Keith Peters has also blogged on this topic.

I left out the unicodeRange attribute to conserve space.  When I provide the complete set of source files at the end of the tutorial series, add it as an exercise.  This is used to specify the exact range of characters to embed.

The main application MXML ends with

<comp:PureMVCLayout id=”App” />

This is the layout of the PureMVC application.  The logic is implemented via code-behind.  The complete source of components.PureMVCLayout is

<?xml version=”1.0″ encoding=”utf-8″?>

<custom:PureMVCLogic xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx” width=”700″ height=”500″

xmlns:custom=”components.*” >

<s:Button id=”begin” x=”{0.5*(width-begin.width)}” y=”{0.5*(height-begin.height)}” width=”100″ height=”20″ label=”Begin”

skinClass=”skins.MinimalTriangleButton”/>

</custom:PureMVCLogic>

This provides only the visual layout of the application.  One thing to decide in the app. is what is controlled by PureMVC and what is outside PureMVC.  Not everything has to be in the PureMVC application.  Inclusion decisions are largely a matter of personal preference.  This tutorial illustrates using a Flex button to begin the application.  The button is in the UI, but not controlled by PureMVC.  So, it is contained in the PureMVCLayout.MXML file and skinned via MXML.

The entire application logic is contained in the components.PureMVCLogic.as file.  This is the code-behind for PureMVCLayout.  A Spark BorderContainer is used as the primary viewComponent for the PureMVC application as shown in the code segment below.

package components

{

import spark.components.BorderContainer;

import mx.events.FlexEvent;

import flash.events.MouseEvent;

import facade.ApplicationFacade;

public class PureMVCLogic extends BorderContainer

{

[Bindable]

public var begin:Button;

Notice that layout items in the UI (in PureMVCLayout.MXML) are public variables in the code-behind.  The remainder of the application logic will be discussed tomorrow.

Advertisement