Flex project setup - Part II. Using a subproject for ui experimentation and development of helpers for the team

This article is part of group of posts on Flex project setup or five use cases for multiple source paths linking.


For big projects, I find useful to create a ui project next to my main app project.

The setup is very similar to the one for the test unit project. Test-ui adds the src folder of App to its source path.

I find it particularly useful in contexts where:

  • I am likely to get team members or visitors asking to see the running app at (very) short notice
  • Team members may require the development of custom components to support their own effort.

The approach taken here is one where most of the in progress or not to be part of the official release work is done in a separate project, outside of the production code.

A ui project is being created that is made to link to the main project source folder. It therefore inherit all classes from the main app. Custom Components are then written in the ui project that will either overwrite (ui redevelopment) or embed (helpers development) the ones of the main code.

An example of use is given below. For the parallax page, a little helper was provided to let the designer try different assets and settings (assets embedded in the assets are mine and I am not a designer ;-) ).

You are missing some Flash content that should appear here! Perhaps your browser cannot display it, or maybe it did not initialize correctly.

in the App/src folder, the package com.widged.warStories.pages.landing has a file ParallaxClass.as to manage the parallax effect and a view LandingPage.mxml to manage the desired view.

Whereas in the Test-ui/ui, the package com.widged.warStories.pages.landing has a slightly more complex fileLandingPageTest.mxml that shows a panel that let you configure the settings.


<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:p="com.widged.warStories.pages.landing.*"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
initialize="onInitialize()"
>

<mx:Script>
<![CDATA[
import com.adobe.serialization.json.JSON;

import mx.collections.ArrayCollection;
import mx.events.FlexEvent;

[Bindable] private var parallaxLayerAC:ArrayCollection;
[Bindable] private var mode:int = ParallaxClass.BOTH;
[Bindable] private var xrate:Number = 6;
[Bindable] private var yrate:Number = 8;
[Bindable] private var isBlurred:Boolean = true;

[Bindable] private var back_image_url:String;
[Bindable] private var middle_image_url:String;
[Bindable] private var front_image_url:String;

private function onInitialize():void
{
var coll:ArrayCollection = new ArrayCollection();
coll.addItem({img: 'com/widged/warStories/pages/landing/pix/layer-back.jpg', startx: 54, wingx: 12, starty: 0, wingy: 0, pixelHinting: false});
coll.addItem({img: 'com/widged/warStories/pages/landing/pix/layer-middle.png', startx: 42, wingx: 24, starty: 0, wingy: 0, pixelHinting: false});
coll.addItem({img: 'com/widged/warStories/pages/landing/pix/layer-front.png', startx: 30, wingx: 36, starty: 20, wingy: 20, pixelHinting: false});

layer0_Input.text = JSON.encode(coll.getItemAt(0));
layer1_Input.text = JSON.encode(coll.getItemAt(1));
layer2_Input.text = JSON.encode(coll.getItemAt(2));

xrateInput.text = xrate.toString();
yrateInput.text = yrate.toString();
modeInput.text = mode.toString();
blurredCheck.selected = isBlurred;
onReloadClick();
}

private function onReloadClick():void
{
var coll:ArrayCollection = new ArrayCollection();
coll.addItem(getLayerItem(0));
coll.addItem(getLayerItem(1));
coll.addItem(getLayerItem(2));
parallaxLayerAC = coll;

xrate = parseFloat(xrateInput.text);
yrate = parseFloat(yrateInput.text);
mode = parseInt(modeInput.text);
isBlurred = blurredCheck.selected;
parallaxBox.start();
}

private function getLayerItem(idx:int):Object
{
var obj:Object = JSON.decode((this['layer' + idx + '_Input'] as TextInput).text);
obj.layer = this['layer' + idx];
(this['img' + idx] as Image).source = obj.img;
return obj;
}

]]>
</mx:Script>

<mx:Panel layout="vertical" horizontalAlign="left" left="0" title="Settings" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" >
<mx:Button label="Reload" click="onReloadClick()" />
<mx:TextInput id="layer0_Input" />
<mx:TextInput id="layer1_Input" />
<mx:TextInput id="layer2_Input" />
<mx:HBox>
<mx:Label text="xrate" /><mx:TextInput id="xrateInput" width="50" />
<mx:Label text="yrate" /><mx:TextInput id="yrateInput" width="50"/>
<mx:Label text="mode" /><mx:TextInput id="modeInput" width="50"/><mx:Label text="1 H, 2 V, 3 B" />
<mx:Label text="blurred" /><mx:CheckBox id="blurredCheck" />
</mx:HBox>
</mx:Panel>

<mx:Spacer height="40" />
<mx:Canvas width="100%" >
<mx:Canvas width="500" height="400" left="20" horizontalScrollPolicy="off" verticalScrollPolicy="off">

<p:ParallaxClass id="parallaxBox"
width="640" height="480"
horizontalCenter="0" verticalCenter="0"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
layerCollection="{parallaxLayerAC}" xrate="6" yrate="8" mode="{mode}" isBlurred="{isBlurred}"
>
<mx:Canvas id="layer0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image id="img0" scaleContent="false"/>
</mx:Canvas>
<mx:Canvas id="layer1" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image id="img1" scaleContent="false"/>
</mx:Canvas>
<mx:Canvas id="layer2" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image id="img2" scaleContent="false"/>
</mx:Canvas>
</p:ParallaxClass>
</mx:Canvas>
</mx:Canvas>

</mx:VBox>

Downloads

(Require Flash Builder 4)

Credits

Code for the parallax effect is based on Parallax Box by Fuori Dal Cerchio.

Powered by Drupal, an open source content management system