PDA

View Full Version : Implementing flex site


jsimpson
06-18-2007, 06:22 PM
Hey everybody,

Now that I'm starting to get into flex, and have built two of the tutorial applications, I'm ready to create a real world site. I'm thinking about reproducing Genex.com (http://www.genex.com). As far as I can tell it appears to be a well skinned flex application. And pretty basic at that, though I'm not sure how complicated it is to reskin items.

The breakdown of their site to me appears to be a panel, with a tree based menu system, and a content pane that is swapped out each time a selection from the tree happens. What I have so far is only the tree:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FBF5E1" backgroundGradientAlphas="0">

<mx:Script>
<![CDATA[

[Bindable]
public var selectedNode:XML;

// Event handler for the Tree change event.
public function treeChanged(event:Event):void {
selectedNode=Tree(event.target).selectedItem as XML;
}
]]>
</mx:Script>

<mx:XMLList id="treeData">

<node label="Tree Container">
<node label ="Home"/>
<node label = "Our Work">
<node label="By Client"/>
<node label="By Service"/>
</node>
<node label="Our Company">
<node label="Why Genex"/>
<node label="Executive Team">
<node label="Walter Schild"/>
<node label="Gretchen Humbert"/>
</node>
<node label="What's New"/>
<node label="Careers"/>
</node>
<node label="Contant Us"/>
<node label="Extranet"/>
</node>
</mx:XMLList>

<mx:Panel height="383" width="80%" title="Genex"
paddingTop="0" paddingLeft="10" paddingRight="10" paddingBottom="10" backgroundColor="#ebece6" borderAlpha="0">

<mx:Label width="100%" color="#313131" />

<mx:Tree id="myTree" width="100%" height="100%" labelField="@label"
focusRoundedCorners="5"
showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>


</mx:Panel>
</mx:Application>


I'm wondering the process used to design and change the layouts of the main content, as well as the method used to remove the icon of the folder and change the animation of the mouse over.

Coming from the design environment in flash cs3, to this seems relatively smooth but certain tasks I take for granted, like a library or quickly creating an image some confusing now.

For example to create the gradient bar that the text items sit on at genex, would I have to create the gradient by hand, and how is the gradient/custom image positioned. I know actionscript can be used, but how do I switch back and forth? Thanks in advance!