<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:xray="com.blitzagency.xray.*"
xmlns:ns1="com.blitzagency.xray.logger.*"
scriptTimeLimit="5"
applicationComplete="initApp()" viewSourceURL="srcview/index.html" xmlns:ns2="org.osflash.flex.mxmlbuilder.panels.*">
<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
import org.osflash.flex.mxmlbuilder.events.ControlEditorEvent;
import mx.events.ItemClickEvent;
import mx.validators.ValidationResult;
import mx.collections.ArrayCollection;
import org.osflash.flex.mxmlbuilder.events.ControlCreatorEvent;
import mx.events.MenuEvent;
import org.osflash.flex.mxmlbuilder.managers.StageManager;
import org.osflash.flex.mxmlbuilder.util.MXMLTools;
import org.osflash.flex.mxmlbuilder.util.PropertiesTools;
import mx.events.DragEvent;
import mx.core.UIComponent;
import mx.managers.DragManager;
import mx.core.DragSource;
import com.blitzagency.xray.logger.Debug;
import com.blitzagency.xray.logger.XrayLog;
import com.blitzagency.xray.logger.XrayLogger;
import com.blitzagency.xray.logger.OutputPanel;
import com.blitzagency.xray.logger.util.PropertyTools;
import com.blitzagency.xray.logger.util.ObjectTools;
import org.osflash.flex.mxmlbuilder.ControlCreator;
import org.osflash.flex.mxmlbuilder.ControlEditor;
import flash.utils.*;
import flash.events.KeyboardEvent;
[Embed(source="images/icons/Folder.png")]
public var iconFolder:Class;
[Embed(source="images/icons/Button.png")]
public var iconButton:Class;
[Embed(source="images/icons/CheckBox.png")]
public var iconCheckBox:Class;
[Embed(source="images/icons/ColorPicker.png")]
public var iconColorPicker:Class;
[Embed(source="images/icons/ComboBox.jpg")]
public var iconComboBox:Class;
[Embed(source="images/icons/DataGrid.jpg")]
public var iconDataGrid:Class;
[Embed(source="images/icons/DateChooser.jpg")]
public var iconDateChooser:Class;
[Embed(source="images/icons/DateField.png")]
public var iconDateField:Class;
[Embed(source="images/icons/HorizontalList.png")]
public var iconHorizontalList:Class;
[Embed(source="images/icons/HSlider.png")]
public var iconHSlider:Class;
[Embed(source="images/icons/Image.png")]
public var iconImage:Class;
[Embed(source="images/icons/Label.jpg")]
public var iconLabel:Class;
[Embed(source="images/icons/LinkButton.png")]
public var iconLinkButton:Class;
[Embed(source="images/icons/List.jpg")]
public var iconList:Class;
[Embed(source="images/icons/NumericStepper.jpg")]
public var iconNumericStepper:Class;
[Embed(source="images/icons/PopUpButton.png")]
public var iconPopUpButton:Class;
[Embed(source="images/icons/PopUpMenuButton.png")]
public var iconPopUpMenuButton:Class;
[Embed(source="images/icons/ProgressBar.jpg")]
public var iconProgressBar:Class;
[Embed(source="images/icons/RadioButton.png")]
public var iconRadioButton:Class;
[Embed(source="images/icons/RadioButtonGroup.png")]
public var iconRadioButtonGroup:Class;
[Embed(source="images/icons/RichTextEditor.png")]
public var iconRichTextEditor:Class;
[Embed(source="images/icons/SWFLoader.jpg")]
public var iconSWFLoader:Class;
[Embed(source="images/icons/Text.png")]
public var iconText:Class;
[Embed(source="images/icons/TextArea.png")]
public var iconTextArea:Class;
[Embed(source="images/icons/TextInput.jpg")]
public var iconTextInput:Class;
[Embed(source="images/icons/TileList.png")]
public var iconTileList:Class;
[Embed(source="images/icons/Tree.jpg")]
public var iconTree:Class;
[Embed(source="images/icons/VideoDisplay.png")]
public var iconVideoDisplay:Class;
[Embed(source="images/icons/VSlider.png")]
public var iconVSlider:Class;
[Embed(source="images/icons/ApplicationControlBar.jpg")]
public var iconApplicationControlBar:Class;
[Embed(source="images/icons/Canvas.jpg")]
public var iconCanvas:Class;
[Embed(source="images/icons/ControlBar.jpg")]
public var iconControlBar:Class;
[Embed(source="images/icons/Form.jpg")]
public var iconForm:Class;
[Embed(source="images/icons/FormHeading.jpg")]
public var iconFormHeading:Class;
[Embed(source="images/icons/Grid.jpg")]
public var iconGrid:Class;
[Embed(source="images/icons/HBox.jpg")]
public var iconHBox:Class;
[Embed(source="images/icons/HDividedBox.jpg")]
public var iconHDividedBox:Class;
[Embed(source="images/icons/HRule.jpg")]
public var iconHRule:Class;
[Embed(source="images/icons/Panel.jpg")]
public var iconPanel:Class;
[Embed(source="images/icons/Spacer.jpg")]
public var iconSpacer:Class;
[Embed(source="images/icons/Tile.jpg")]
public var iconTile:Class;
[Embed(source="images/icons/TitleWindow.jpg")]
public var iconTitleWindow:Class;
[Embed(source="images/icons/VBox.jpg")]
public var iconVBox:Class;
[Embed(source="images/icons/VDividedBox.jpg")]
public var iconVDividedBox:Class;
[Embed(source="images/icons/VRule.jpg")]
public var iconVRule:Class;
[Embed(source="images/icons/Accordion.jpg")]
public var iconAccordion:Class;
[Embed(source="images/icons/ButtonBar.jpg")]
public var iconButtonBar:Class;
[Embed(source="images/icons/LinkBar.jpg")]
public var iconLinkBar:Class;
[Embed(source="images/icons/MenuBar.jpg")]
public var iconMenuBar:Class;
[Embed(source="images/icons/TabBar.jpg")]
public var iconTabBar:Class;
[Embed(source="images/icons/TabNavigator.jpg")]
public var iconTabNavigator:Class;
[Embed(source="images/icons/ToggleButtonBar.jpg")]
public var iconToggleButtonBar:Class;
[Embed(source="images/icons/ViewStack.jpg")]
public var iconViewStack:Class;
[Embed(source="images/icons/Code.jpg")]
public var iconCode:Class;
[Embed(source="images/icons/Design.jpg")]
public var iconDesign:Class;
public var log:XrayLog;
private var cc:ControlCreator;
private var ce:ControlEditor;
private var ctrlDown:Boolean = false;
[Bindable]
private var currentProperties:ArrayCollection;
[Bindable]
private var mainMenuXML:XML;
public function initApp():void
{
log = new XrayLog();
XrayLogger.getInstance().registerStage(stage);
cc = ControlCreator.getInstance();
ce = ControlEditor.getInstance();
ce.registerMainStage(mainStage);
ce.registerStage(stage);
ce.addEventListener(ControlCreatorEvent.PROPERTIESCHANGE, handlePropertiesChange);
ce.addEventListener(ControlEditorEvent.CHANGETARGET, constraintPanel.setProperties);
MXMLTools.getInstance().registerMainStage(mainStage);
PropertiesTools.getInstance().loadProperties();
mainStage.addEventListener("dragEnter", handleDragEnter);
mainStage.addEventListener("dragDrop", handleDragDrop);
mainStage.addEventListener("mouseDown", handleMouseDown);
mainStage.addEventListener("mouseUp", handleMouseUp);
mainStage.stage.addEventListener( KeyboardEvent.KEY_UP, keyUpEventHandler, false, 10, true ); mainStage.stage.addEventListener( KeyboardEvent.KEY_DOWN, keyDownEventHandler, false, 10, true );
middleButtonBar.selectedIndex = 1; codeEditor.visible = false;
mainStage.visible = true;
loadMainMenu();
}
private function loadMainMenu():void
{
var request:URLRequest = new URLRequest("configuration/mainMenu.xml");
var variables:URLLoader = new URLLoader();
variables.dataFormat = URLLoaderDataFormat.TEXT;
variables.addEventListener(Event.COMPLETE, completeHandler);
try {
variables.load(request);
} catch (error:Error) {
log.error("Unable to load URL", error);
}
}
private function completeHandler(e:Event):void
{
var loader:URLLoader = URLLoader(e.target);
var temp:XML = XML(loader.data);
mainMenuXML = temp;
}
private function keyDownEventHandler(e:KeyboardEvent):void
{
ctrlDown = e.ctrlKey;
}
private function keyUpEventHandler(e:KeyboardEvent):void
{
ctrlDown = e.ctrlKey;
}
private function handlePropertiesChange(e:ControlCreatorEvent):void
{
try
{
log.debug("handlePropertiesChange", e.properties);
currentProperties = e.properties;
}catch(e:Error)
{
log.error("handlePropertiesChange e.properties was null");
}finally
{
}
}
private function handleMainMenuChange(e:MenuEvent):void
{
var label:String = e.label;
switch(label)
{
case "Open":
MXMLTools.getInstance().loadMXML();
break;
case "Save":
MXMLTools.getInstance().exportMXML(mainStage);
break;
case "Exit":
break;
case "Delete":
ce.removeCurrentTarget();
break;
case "Xray Panel":
XrayLogger.getInstance().showOutputPanel();
break;
case "About":
break;
}
}
private function handleMouseDown(e:MouseEvent):void
{
ce.setCurrentProperties();
ce.setCurrentTarget(mainStage);
mainStage.invalidateDisplayList();
if(e.target == mainStage) return;
var pt:Point = new Point(mainStage.mouseX, mainStage.mouseY);
var list:Array = mainStage.getObjectsUnderPoint(pt);
if(list.length>0) log.debug("list", list);
var target:UIComponent;
try
{
var objType:String = getQualifiedClassName(e.target);
if(!PropertiesTools.getInstance().verifyValidObject(UIComponent(e.target)))
{
target = resolveParent(e.target.toString());
}else
{
target = UIComponent(e.target)
}
}catch(err:Error)
{
target = resolveParent(list[list.length-1]);
}
if(target != null && target != mainStage) ce.handleDrag(e,target);
}
private function validateClickedObject(obj:*):Boolean
{
var checkUIComponent:Boolean = false;
try
{
checkUIComponent = obj.name.indexOf("UIComponent") > -1 ? true : false;
}catch(e:Error)
{
}finally
{
return checkUIComponent;
}
}
private function resolveParent(list:String):UIComponent
{
var target:UIComponent;
try
{
var ary:Array = list.toString().split(".");
ary.splice(0,4);
do
{
var testTarget:Object = mainStage;
for(var j:int=0;j<ary.length;j++)
{
try
{
testTarget = testTarget.getChildByName(String(ary[j]));
}catch(err:Error)
{
ary.pop();
continue;
}
}
try
{
if(!PropertiesTools.getInstance().verifyValidObject(testTarget))
{
ary.pop();
continue;
}
target = UIComponent(testTarget);
break;
}catch(e:Error)
{
ary.pop();
}
}while(target == null)
}catch(mainErr:Error)
{
log.error("unable to resolveParent with list");
}finally
{
return target;
}
}
private function handleMouseUp(e:MouseEvent):void
{
ce.handleDrop(e);
}
private function handleDragDrop(e:DragEvent):void
{
var target:UIComponent = UIComponent(e.dragInitiator);
StageManager.getInstance().moveAsset(target, mainStage);
}
private function handleDragEnter(e:DragEvent):void
{
DragManager.acceptDragDrop(UIComponent(e.currentTarget));
DragManager.showFeedback(DragManager.MOVE);
}
public function updateIcon(item:XML):Class
{
var objectType:String = item.attribute("label");
log = new XrayLog();
var icon:Class;
try
{
icon = this["icon" + objectType];
}
catch(e:Error)
{
icon = iconFolder
}
finally
{
return icon;
}
}
private function handleLeftViewStackChange(e:IndexChangedEvent):void
{
log.debug("handleLeftViewStackChange", e.newIndex);
}
private function codeDesignClickHandler(e:ItemClickEvent):void
{
switch(e.label)
{
case "Source":
if(codeEditor.visible) return;
leftViewStack.enabled = false;
rightPanel.enabled = false;
codeEditor.text = MXMLTools.getInstance().exportMXML(mainStage);
codeEditor.visible = true;
mainStage.visible = false;
break;
case "Design":
if(mainStage.visible) return;
mainStage.removeAllChildren();
var xmlDoc:XML = XML(codeEditor.text);
xmlDoc.ignoreWhitespace = true;
log.debug("source", xmlDoc.toString());
var app:XMLList = xmlDoc.children();
MXMLTools.getInstance().buildApp(app);
leftViewStack.enabled = true;
rightPanel.enabled = true;
codeEditor.visible = false;
mainStage.visible = true;
break;
}
}
]]>
</mx:Script>
<mx:XML id="treeData">
<root>
<node label="Components">
<node label="Button"/>
<node label="CheckBox"/>
<node label="ColorPicker"/>
<node label="ComboBox"/>
<node label="DataGrid"/>
<node label="DateChooser"/>
<node label="DateField"/>
<node label="HSlider"/>
<node label="HorizontalList"/>
<node label="Image"/>
<node label="Label"/>
<node label="LinkButton"/>
<node label="List"/>
<node label="NumericStepper"/>
<node label="PopUpButton"/>
<node label="PopUpMenuButton"/>
<node label="ProgressBar"/>
<node label="RadioButton"/>
<node label="RadioButtonGroup"/>
<node label="RichTextEditor"/>
<node label="SWFLoader"/>
<node label="Text"/>
<node label="TextArea"/>
<node label="TextInput"/>
<node label="TileList"/>
<node label="Tree"/>
<node label="VSlider"/>
<node label="VideoDisplay"/>
</node>
<node label="Layout">
<node label="ApplicationControlBar"/>
<node label="Canvas"/>
<node label="ControlBar"/>
<node label="Form"/>
<node label="FormHeading"/>
<node label="Grid"/>
<node label="HBox"/>
<node label="HDividedBox"/>
<node label="HRule"/>
<node label="Panel"/>
<node label="Spacer"/>
<node label="Tile"/>
<node label="TitleWindow"/>
<node label="VBox"/>
<node label="VDividedBox"/>
<node label="VRule"/>
</node>
<node label="Navigators">
<node label="Accordion"/>
<node label="ButtonBar"/>
<node label="LinkBar"/>
<node label="MenuBar"/>
<node label="TabBar"/>
<node label="TabNavigator"/>
<node label="ToggleButtonBar"/>
<node label="ViewStack"/>
</node>
</root>
</mx:XML>
<mx:ApplicationControlBar id="appBar" y="10" right="10" left="10" height="32">
<mx:Canvas width="100%" height="26">
<mx:MenuBar id="mainMenu" dataProvider="{mainMenuXML}" showRoot="false" labelField="@label" x="0" y="0" fillAlphas="[0.0, 0.0]" alpha="0.0" itemClick="handleMainMenuChange(event)"></mx:MenuBar>
<mx:Label text="FLEXible (Alpha)" fontFamily="Arial" fontWeight="bold" fontSize="14" color="#ffffff" y="-2" right="0"/>
<mx:ToggleButtonBar x="207" y="0" id="middleButtonBar" itemClick="codeDesignClickHandler(event)">
<mx:Array>
<mx:Object label="Source" icon="@Embed(source='images/icons/Code.jpg')"/>
<mx:Object label="Design" icon="@Embed(source='images/icons/Design.jpg')"/>
</mx:Array>
</mx:ToggleButtonBar>
</mx:Canvas>
</mx:ApplicationControlBar>
<mx:HDividedBox right="10" left="10" bottom="5" top="50" horizontalAlign="center" verticalAlign="middle">
<mx:Canvas width="200" height="98%">
<mx:ApplicationControlBar width="100%" height="28" x="0" top="0">
<mx:Canvas width="100%">
<mx:LinkBar id="leftNavBar" dataProvider="leftViewStack" y="-5" x="10">
</mx:LinkBar>
</mx:Canvas>
</mx:ApplicationControlBar>
<mx:ViewStack x="0" y="35" id="leftViewStack" width="100%" height="100%" change="handleLeftViewStackChange(event)">
<mx:Panel label="Components" width="100%" height="100%" layout="absolute" id="leftPanel" title="Components">
<mx:Tree id="componentsList"
right="5"
left="5"
bottom="5"
top="5"
labelField="@label"
change="cc.createObjectHandler(event)"
dataProvider="{treeData}"
iconFunction="updateIcon"
showRoot="false">
</mx:Tree>
</mx:Panel>
<mx:Panel label="Outline" width="100%" height="100%" layout="absolute" id="outlinePanel" title="Outline" y="55">
<mx:Tree id="applicationOutline"
right="5"
left="5"
bottom="5"
top="5"
labelField="@label"
iconFunction="updateIcon"
showRoot="false">
</mx:Tree>
</mx:Panel>
</mx:ViewStack>
</mx:Canvas>
<mx:Canvas x="0" y="35" width="100%" height="100%" id="middleContainer">
<mx:Canvas width="100%" height="100%" id="codeView" borderStyle="solid" borderColor="#000000" backgroundColor="#808080" backgroundAlpha="1.0">
<mx:TextArea width="100%" height="100%" id="codeEditor" fontFamily="Courier New" fontSize="12" backgroundColor="#ffffff">
</mx:TextArea>
</mx:Canvas>
<mx:Canvas width="100%" height="100%" id="mainStage" borderStyle="solid" borderColor="#000000" backgroundColor="#808080" backgroundAlpha="1.0">
</mx:Canvas>
</mx:Canvas>
<mx:Panel width="220" height="98%" layout="absolute" id="rightPanel" title="Properties">
<mx:VDividedBox width="100%" height="100%">
<mx:DataGrid x="0" y="0" width="100%" height="100%" editable="true" fontSize="9"
itemEditEnd="ce.handlePropertiesChange(event)"
itemFocusOut="ce.handlePropertiesChange(event)"
dataProvider="{currentProperties}">
<mx:columns>
<mx:DataGridColumn editable="false" headerText="Property" dataField="label"/>
<mx:DataGridColumn editorUsesEnterKey="false" headerText="Value" dataField="data"/>
</mx:columns>
</mx:DataGrid>
<ns2:Constraints id="constraintPanel" height="200" width="200">
</ns2:Constraints>
</mx:VDividedBox>
</mx:Panel>
</mx:HDividedBox>
</mx:Application>