flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [22/34] git commit: [flex-asjs] [refs/heads/develop] - move examples into a flexjs folder now that we have a native folder for low-level examples
Date Mon, 24 Aug 2015 05:33:12 GMT
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataBindingExample_as/src/MyInitialView.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataBindingExample_as/src/MyInitialView.as b/examples/flexjs/DataBindingExample_as/src/MyInitialView.as
new file mode 100644
index 0000000..1c31b58
--- /dev/null
+++ b/examples/flexjs/DataBindingExample_as/src/MyInitialView.as
@@ -0,0 +1,283 @@
+/**
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+*/
+package 
+{    
+
+//import mx.states.State;
+
+import models.MyModel;
+
+import org.apache.flex.binding.ConstantBinding;
+import org.apache.flex.binding.SimpleBinding;
+import org.apache.flex.core.SimpleCSSValuesImpl;
+import org.apache.flex.core.ValuesManager;
+import org.apache.flex.core.ViewBase;
+import org.apache.flex.events.CustomEvent;
+import org.apache.flex.events.Event;
+import org.apache.flex.html.CheckBox;
+import org.apache.flex.html.Container;
+import org.apache.flex.html.DropDownList;
+import org.apache.flex.html.Label;
+import org.apache.flex.html.RadioButton;
+import org.apache.flex.html.TextArea;
+import org.apache.flex.html.TextButton;
+import org.apache.flex.html.TextInput;
+import org.apache.flex.html.beads.layouts.HorizontalLayout;
+import org.apache.flex.html.beads.layouts.VerticalLayout;
+
+public class MyInitialView extends ViewBase
+{
+
+    public function MyInitialView()
+    {
+        addEventListener("initComplete", initCompleteHandler);
+        /*
+        var statesArray = [];
+        var state:State = new mx.states.State();
+        state.name = "hideAll";
+        statesArray.push(state);
+        state = new mx.states.State();
+        state.name = "showAll";
+        statesArray.push(state);
+        states = statesArray;
+        */
+        var vi:SimpleCSSValuesImpl = ValuesManager.valuesImpl as SimpleCSSValuesImpl;
+        var viv:Object = vi.values;
+        viv[".output"]= {
+            fontSize: 20
+        };
+        
+        viv[".topContainer"] = {
+            padding: 10
+        };
+        
+        viv[".leftSide"] = {
+            verticalAlign: "top",
+            marginRight: 10
+        }
+        
+        viv[".rightSide"] = {
+            verticalAlign: "top",
+            marginLeft: 10,
+            paddingLeft: 10
+        }
+        
+        viv[".quoteButton"] = {
+            marginTop: 10,
+            marginBottom: 10
+        }
+        
+    }
+    
+    private function initCompleteHandler(event:Event):void
+    {
+        initControls();
+    }
+			
+	private var _symbol:String;
+	
+    public function get symbol():String
+    {
+        return _symbol;
+    }
+	
+	public function get requestedField():String
+	{
+		return radio1.selectedValue as String;
+	}
+	
+    [Bindable]
+    public var fieldText:String;
+    
+	private function radioChanged(e:org.apache.flex.events.Event):void
+	{
+		dispatchEvent(new CustomEvent("radioClicked"));
+		fieldText = RadioButton(e.target).text;
+	}
+	
+	private function initControls():void
+	{
+		list.selectedItem = MyModel(applicationModel).stockSymbol;
+		radio1.selectedValue = MyModel(applicationModel).requestedField;
+		if (radio1.selected)
+			fieldText = radio1.text;
+		else if (radio2.selected)
+			fieldText = radio2.text;
+		else if (radio3.selected)
+			fieldText = radio3.text;
+		else if (radio4.selected)
+			fieldText = radio4.text;
+		
+	}
+    
+    private function setState():void
+    {
+        currentState = showAllData.selected ? "showAll" : "hideAll";    
+    }
+    
+    override public function get MXMLDescriptor():Array
+    {
+        var c:Container = new Container();
+        c.x = 0;
+        c.y = 0;
+        c.className = "topContainer";
+        c.addBead(new VerticalLayout());
+        addElement(c);
+        var l:Label = new Label();
+        l.width = 300;
+        l.text = "Enter Stock Symbol or choose from list:";
+        c.addElement(l);
+        var c2:Container = new Container();
+        c2.addBead(new HorizontalLayout());
+        c.addElement(c2);
+        var c3:Container = new Container();
+        c3.className = "leftSide";
+        c3.addBead(new VerticalLayout());
+        c2.addElement(c3);
+        symbolTI = new TextInput();
+        var sb:SimpleBinding = new SimpleBinding();
+        sb.sourceID = "applicationModel";
+        sb.sourcePropertyName = "stockSymbol";
+        sb.eventName = "stockSymbolChanged";
+        sb.destination = symbolTI;
+        sb.destinationPropertyName = "text";
+        sb.setDocument(this);
+        addBead(sb);
+        c3.addElement(symbolTI);
+        var tb:TextButton = new TextButton();
+        tb.text = "Get Quote";
+        tb.className = "quoteButton";
+        tb.addEventListener("click", tb_clickHandler);
+        c3.addElement(tb);
+        field = new Label();
+        sb = new SimpleBinding();
+        sb.sourcePropertyName = "fieldText";
+        sb.eventName = "valueChange";
+        sb.destination = field;
+        sb.destinationPropertyName = "text";
+        sb.setDocument(this);
+        addBead(sb);
+        c3.addElement(field);
+        output = new Label();
+        output.className = "output";
+        output.height=24;
+        sb = new SimpleBinding();
+        sb.sourceID = "applicationModel";
+        sb.sourcePropertyName = "responseText";
+        sb.eventName = "responseTextChanged";
+        sb.destination = output;
+        sb.destinationPropertyName = "text";
+        sb.setDocument(this);
+        addBead(sb);
+        c3.addElement(output);
+        c3.childrenAdded();
+        
+        c3 = new Container();
+        c3.className="rightSide";
+        c3.addBead(new VerticalLayout());
+        c2.addElement(c3);
+        list = new DropDownList();
+        list.width=100;
+        list.height=17;
+        var cb:ConstantBinding = new ConstantBinding();
+        cb.sourceID = "applicationModel";
+        cb.sourcePropertyName = "strings";
+        cb.destination = list;
+        cb.destinationPropertyName = "dataProvider";
+        cb.setDocument(this);
+        addBead(cb);
+        list.addEventListener("change", list_changeHandler);
+        c3.addElement(list);
+        radio1 = new RadioButton();
+        radio1.text = "Price";
+        radio1.value = "Ask";
+        radio1.groupName = "group1";
+        radio1.addEventListener("change", radioChanged);
+        c3.addElement(radio1);
+        radio2 = new RadioButton();
+        radio2.text = "Change";
+        radio2.value = "Change";
+        radio2.groupName = "group1";
+        radio2.addEventListener("change", radioChanged);
+        c3.addElement(radio2);
+        radio3 = new RadioButton();
+        radio3.text = "Day's High";
+        radio3.value = "DaysHight";
+        radio3.groupName = "group1";
+        radio3.addEventListener("change", radioChanged);
+        c3.addElement(radio3);
+        radio4 = new RadioButton();
+        radio4.text = "Day's Low";
+        radio4.value = "DaysLow";
+        radio4.groupName = "group1";
+        radio4.addEventListener("change", radioChanged);
+        c3.addElement(radio4);
+        showAllData = new CheckBox();
+        showAllData.text = "Show All Data";
+        showAllData.addEventListener("change", showAllData_changeHandler);
+        c3.addElement(showAllData);
+        c3.childrenAdded();
+        ta = new TextArea();
+        ta.width = 300;
+        ta.height = 100;
+        sb = new SimpleBinding();
+        sb.sourceID = "applicationModel";
+        sb.sourcePropertyName = "allData";
+        sb.eventName = "responseDataChanged";
+        sb.destination = ta;
+        sb.destinationPropertyName = "text";
+        sb.setDocument(this);
+        addBead(sb);
+        c.addElement(ta);
+        c2.childrenAdded();
+        c.childrenAdded();
+        
+        return super.MXMLDescriptor;
+
+    }
+    
+    public var symbolTI:TextInput;
+    public var output:Label;
+    public var field:Label;
+    public var list:DropDownList;
+    public var radio1:RadioButton;
+    public var radio2:RadioButton;
+    public var radio3:RadioButton;
+    public var radio4:RadioButton;
+    public var showAllData:CheckBox;
+    public var ta:TextArea;
+    
+    private function tb_clickHandler(event:Event):void
+    {
+        _symbol = symbolTI.text;
+        dispatchEvent(new CustomEvent('buttonClicked'));
+    }
+    
+    private function list_changeHandler(event:Event):void
+    {
+        _symbol = list.selectedItem as String;
+        dispatchEvent(new CustomEvent('listChanged'));
+    }
+    
+    private function showAllData_changeHandler(event:Event):void
+    {
+        setState();
+    }
+}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataBindingExample_as/src/StockDataJSONItemConverter.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataBindingExample_as/src/StockDataJSONItemConverter.as b/examples/flexjs/DataBindingExample_as/src/StockDataJSONItemConverter.as
new file mode 100644
index 0000000..a39606b
--- /dev/null
+++ b/examples/flexjs/DataBindingExample_as/src/StockDataJSONItemConverter.as
@@ -0,0 +1,40 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+    import org.apache.flex.collections.converters.JSONItemConverter;
+    
+    public class StockDataJSONItemConverter extends JSONItemConverter
+    {
+        public function StockDataJSONItemConverter()
+        {
+            super();
+        }
+        
+        override public function convertItem(data:String):Object
+        {
+            var obj:Object = super.convertItem(data);
+			if (obj["query"]["count"] == 0)
+				return "No Data";
+			
+			obj = obj["query"]["results"]["quote"];
+			return obj;
+        }
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataBindingExample_as/src/controllers/MyController.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataBindingExample_as/src/controllers/MyController.as b/examples/flexjs/DataBindingExample_as/src/controllers/MyController.as
new file mode 100644
index 0000000..2ee16ae
--- /dev/null
+++ b/examples/flexjs/DataBindingExample_as/src/controllers/MyController.as
@@ -0,0 +1,81 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package controllers
+{
+	import org.apache.flex.events.Event;
+	
+	import org.apache.flex.core.Application;
+	import org.apache.flex.core.IDocument;
+    
+    import models.MyModel;
+    	
+	public class MyController implements IDocument
+	{
+		public function MyController(app:Application = null)
+		{
+			if (app)
+			{
+				this.app = app as DataBindingExample;
+				app.addEventListener("viewChanged", viewChangeHandler);
+			}
+		}
+		
+        private var queryBegin:String = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22";
+        private var queryEnd:String = "%22)%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json";
+		private var app:DataBindingExample;
+		
+		private function viewChangeHandler(event:Event):void
+		{
+			app.initialView.addEventListener("buttonClicked", buttonClickHandler);
+			app.initialView.addEventListener("radioClicked", radioClickHandler);
+            app.initialView.addEventListener("listChanged", listChangedHandler);
+		}
+		
+        private function buttonClickHandler(event:Event):void
+        {
+            var sym:String = MyInitialView(app.initialView).symbol;
+            app.service.url = queryBegin + sym + queryEnd;
+            app.service.send();
+            app.service.addEventListener("complete", completeHandler);
+        }
+        
+		private function radioClickHandler(event:Event):void
+		{
+			var field:String = MyInitialView(app.initialView).requestedField;
+			MyModel(app.model).requestedField = field;
+		}
+		
+        private function completeHandler(event:Event):void
+        {
+			MyModel(app.model).responseData = app.collection.getItemAt(0);
+        }
+        
+        private function listChangedHandler(event:Event):void
+        {
+            MyModel(app.model).stockSymbol = MyInitialView(app.initialView).symbol;
+        }
+        
+		public function setDocument(document:Object, id:String = null):void
+		{
+			this.app = document as DataBindingExample;
+			app.addEventListener("viewChanged", viewChangeHandler);
+		}
+
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataBindingExample_as/src/models/MyModel.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataBindingExample_as/src/models/MyModel.as b/examples/flexjs/DataBindingExample_as/src/models/MyModel.as
new file mode 100644
index 0000000..4a17f22
--- /dev/null
+++ b/examples/flexjs/DataBindingExample_as/src/models/MyModel.as
@@ -0,0 +1,127 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package models
+{
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.EventDispatcher;
+	
+	public class MyModel extends EventDispatcher
+	{
+		public function MyModel()
+		{
+		}
+		
+		private var _requestedField:String = "Ask";
+		
+		[Bindable("requestedFieldChanged")]
+		public function get requestedField():String
+		{
+			return _requestedField;
+		}
+		
+		public function set requestedField(value:String):void
+		{
+			if (value != _requestedField)
+			{
+				_requestedField = value;
+				dispatchEvent(new Event("requestedFieldChanged"));
+				if (_responseData)
+					dispatchEvent(new Event("responseTextChanged"));
+			}
+		}
+		
+		private var _responseText:String;
+		
+		[Bindable("responseTextChanged")]
+		public function get responseText():String
+		{
+			if (_responseData == null)
+				return "";
+			if (_responseData == "No Data")
+				return _responseData as String;
+			var s:String = _responseData[_requestedField];
+			if (s == null)
+			{
+				if (_requestedField == "Ask")
+					s = _responseData["Bid"];
+			}
+			return s;
+		}
+		
+		private var _responseData:Object;
+		
+		[Bindable("responseDataChanged")]
+		public function get responseData():Object
+		{
+			return _responseData;
+		}
+		
+		public function set responseData(value:Object):void
+		{
+			if (value != _responseData)
+			{
+				_responseData = value;
+				_allData = "";
+				dispatchEvent(new Event("responseDataChanged"));
+				dispatchEvent(new Event("responseTextChanged"));
+			}
+		}
+		
+		private var _allData:String = "";
+		
+		[Bindable("responseDataChanged")]
+		public function get allData():String
+		{
+			if (_allData == "" && _responseData != null)
+			{
+				for (var p:String in _responseData)
+				{
+					_allData += p + ": " + _responseData[p] + "\n";
+				}
+			}
+			return _allData;
+		}
+		
+		
+		private var _stockSymbol:String;
+		
+		[Bindable("stockSymbolChanged")]
+		public function get stockSymbol():String
+		{
+			return _stockSymbol;
+		}
+		
+		public function set stockSymbol(value:String):void
+		{
+			if (value != _stockSymbol)
+			{
+				_stockSymbol = value;
+				dispatchEvent(new Event("stockSymbolChanged"));
+			}
+		}
+
+        private var _strings:Array = ["AAPL", "ADBE", "GOOG", "MSFT", "YHOO"];
+        [Bindable("__NoChangeEvent__")]
+        public function get strings():Array
+        {
+            return _strings;
+        }
+
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/build.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/build.xml b/examples/flexjs/DataGridExample/build.xml
new file mode 100644
index 0000000..b7c8e80
--- /dev/null
+++ b/examples/flexjs/DataGridExample/build.xml
@@ -0,0 +1,71 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+<project name="datagridexample" default="main" basedir=".">
+    <property name="FLEXJS_HOME" location="../.."/>
+    <property name="example" value="DataGridExample" />
+    
+    <property file="${FLEXJS_HOME}/env.properties"/>
+    <property environment="env"/>
+    <property file="${FLEXJS_HOME}/build.properties"/>
+    <property name="FLEX_HOME" value="${FLEXJS_HOME}"/>
+    <available file="${env.FALCON_HOME}/lib/falcon-mxmlc.jar"
+    type="file"
+    property="FALCON_HOME"
+    value="${env.FALCON_HOME}"/>
+    
+    <available file="${FLEXJS_HOME}/../flex-falcon/compiler/generated/dist/sdk/lib/falcon-mxmlc.jar"
+    type="file"
+    property="FALCON_HOME"
+    value="${FLEXJS_HOME}/../flex-falcon/compiler/generated/dist/sdk"/>
+    
+    <available file="${env.FALCONJX_HOME}/lib/jsc.jar"
+    type="file"
+    property="FALCONJX_HOME"
+    value="${env.FALCONJX_HOME}"/>
+    
+    <available file="${FLEXJS_HOME}/../flex-falcon/compiler.jx/lib/jsc.jar"
+    type="file"
+    property="FALCONJX_HOME"
+    value="${FLEXJS_HOME}/../flex-falcon/compiler.jx"/>
+    
+    <available file="${env.GOOG_HOME}/closure/goog/base.js"
+    type="file"
+    property="GOOG_HOME"
+    value="${env.GOOG_HOME}"/>
+    
+    <available file="${FLEXJS_HOME}/js/lib/google/closure-library/closure/goog/base.js"
+    type="file"
+    property="GOOG_HOME"
+    value="${FLEXJS_HOME}/js/lib/google/closure-library"/>
+        
+    <include file="${basedir}/../build_example.xml" />
+
+    <target name="main" depends="clean,build_example.compile,build_example.compilejs" description="Clean build of ${example}">
+    </target>
+    
+    <target name="clean">
+        <delete dir="${basedir}/bin" failonerror="false" />
+        <delete dir="${basedir}/bin-debug" failonerror="false" />
+        <delete dir="${basedir}/bin-release" failonerror="false" />
+    </target>    
+    
+</project>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/DataGridExample.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/DataGridExample.mxml b/examples/flexjs/DataGridExample/src/DataGridExample.mxml
new file mode 100644
index 0000000..41989f8
--- /dev/null
+++ b/examples/flexjs/DataGridExample/src/DataGridExample.mxml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!---
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+-->
+<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+				   xmlns:local="*"
+				   xmlns:models="models.*"
+				   xmlns:js="library://ns.apache.org/flexjs/basic" 
+				   >
+	
+	<js:valuesImpl>
+		<js:SimpleCSSValuesImpl />
+	</js:valuesImpl>
+	<js:model>
+		<models:ProductsModel />
+	</js:model>
+	<js:initialView>
+		<local:MyInitialView />
+	</js:initialView>
+</js:Application>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/MyInitialView.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/MyInitialView.mxml b/examples/flexjs/DataGridExample/src/MyInitialView.mxml
new file mode 100644
index 0000000..dd51c7c
--- /dev/null
+++ b/examples/flexjs/DataGridExample/src/MyInitialView.mxml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<js:ViewBase xmlns:fx="http://ns.adobe.com/mxml/2009"
+				xmlns:js="library://ns.apache.org/flexjs/basic">
+    <fx:Script>
+        <![CDATA[
+		 private function dataGridChange() : void
+		 {
+			 output.text = "Clicked on row "+dataGrid.selectedIndex;
+			 trace("Click on row "+dataGrid.selectedIndex);
+		 }
+		]]>
+    </fx:Script>
+	
+	<js:Label id="output" x="450" y="30" width="100" />
+		
+	<js:DataGrid id="dataGrid" x="20" y="30" width="400" height="300" change="dataGridChange()" rowHeight="30">
+		<js:beads>
+			<js:ConstantBinding
+				sourceID="applicationModel"
+				sourcePropertyName="productList"
+				destinationPropertyName="dataProvider" />
+		</js:beads>
+		<js:columns>
+			<js:DataGridColumn label="Image" dataField="image" columnWidth="100" itemRenderer="products.ProductItemRenderer" />
+			<js:DataGridColumn label="Title" dataField="title" columnWidth="200" />
+			<js:DataGridColumn label="Sales" dataField="sales" columnWidth="100" />
+		</js:columns>
+	</js:DataGrid>
+
+</js:ViewBase>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/README.txt
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/README.txt b/examples/flexjs/DataGridExample/src/README.txt
new file mode 100644
index 0000000..77a0b8e
--- /dev/null
+++ b/examples/flexjs/DataGridExample/src/README.txt
@@ -0,0 +1,46 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+DESCRIPTION
+
+The DataGridExample demonstrates the FlexJS DataGrid which is a composite
+component that is built from a set of List components; each List is a column
+in the DataGrid. The header is provided by the ButtonBar component.
+
+This Flex application may be run as a Flash SWF or cross-compiled (using Falcon JX)
+into JavaScript and HTML and run without Flash.
+
+The data for the DataGrid is found in the application's model and is connected
+using a ConstantBinding bead which ties a property of a model to a property
+in a component, in this case, the DataGrid's dataProvider property.
+
+COMPONENTS and BEADS
+
+- DataGrid
+- List
+- ButtonBar
+
+- ConstantBinding
+
+NOTES
+
+The column headers - buttons in a ButtonBar - do not align correctly over each
+column.
+
+The columns scroll independently.
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/assets/smallbluerect.jpg
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/assets/smallbluerect.jpg b/examples/flexjs/DataGridExample/src/assets/smallbluerect.jpg
new file mode 100644
index 0000000..80ed275
Binary files /dev/null and b/examples/flexjs/DataGridExample/src/assets/smallbluerect.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/assets/smallgreenrect.jpg
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/assets/smallgreenrect.jpg b/examples/flexjs/DataGridExample/src/assets/smallgreenrect.jpg
new file mode 100644
index 0000000..c5f9ce6
Binary files /dev/null and b/examples/flexjs/DataGridExample/src/assets/smallgreenrect.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/assets/smallorangerect.gif
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/assets/smallorangerect.gif b/examples/flexjs/DataGridExample/src/assets/smallorangerect.gif
new file mode 100644
index 0000000..603f810
Binary files /dev/null and b/examples/flexjs/DataGridExample/src/assets/smallorangerect.gif differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/assets/smallorangerect.jpg
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/assets/smallorangerect.jpg b/examples/flexjs/DataGridExample/src/assets/smallorangerect.jpg
new file mode 100644
index 0000000..4982d87
Binary files /dev/null and b/examples/flexjs/DataGridExample/src/assets/smallorangerect.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/assets/smallpurplerect.jpg
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/assets/smallpurplerect.jpg b/examples/flexjs/DataGridExample/src/assets/smallpurplerect.jpg
new file mode 100644
index 0000000..201f625
Binary files /dev/null and b/examples/flexjs/DataGridExample/src/assets/smallpurplerect.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/assets/smallredrect.jpg
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/assets/smallredrect.jpg b/examples/flexjs/DataGridExample/src/assets/smallredrect.jpg
new file mode 100644
index 0000000..d2cfa31
Binary files /dev/null and b/examples/flexjs/DataGridExample/src/assets/smallredrect.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/assets/smallyellowrect.jpg
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/assets/smallyellowrect.jpg b/examples/flexjs/DataGridExample/src/assets/smallyellowrect.jpg
new file mode 100644
index 0000000..b17b62d
Binary files /dev/null and b/examples/flexjs/DataGridExample/src/assets/smallyellowrect.jpg differ

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/models/ProductsModel.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/models/ProductsModel.as b/examples/flexjs/DataGridExample/src/models/ProductsModel.as
new file mode 100644
index 0000000..e3a42a9
--- /dev/null
+++ b/examples/flexjs/DataGridExample/src/models/ProductsModel.as
@@ -0,0 +1,49 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package models
+{
+	import org.apache.flex.events.EventDispatcher;
+	
+	import products.Product;
+	
+	public class ProductsModel extends EventDispatcher
+	{
+		public function ProductsModel()
+		{
+		}
+
+		private var _productList:Array = [
+			new Product("ps100","Widgets",44,200,"assets/smallbluerect.jpg"),
+			new Product("tx200","Thingys",5,285,"assets/smallgreenrect.jpg"),
+			new Product("rz300","Sprockets",80,105,"assets/smallyellowrect.jpg"),
+			new Product("dh440","Doohickies",10,340,"assets/smallredrect.jpg"),
+			new Product("ps220","Weejets",35,190,"assets/smallorangerect.jpg")
+			];
+		public function get productList():Array
+		{
+			return _productList;
+		}
+
+		private var _labelFields:Array = [ "id", "title", "sales", "detail" ];
+		public function get labelFields():Array
+		{
+			return _labelFields;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/products/Product.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/products/Product.as b/examples/flexjs/DataGridExample/src/products/Product.as
new file mode 100644
index 0000000..fd4b31e
--- /dev/null
+++ b/examples/flexjs/DataGridExample/src/products/Product.as
@@ -0,0 +1,43 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package products
+{
+	public class Product
+	{
+		public function Product(id:String,title:String,detail:Number,sales:Number,image:String)
+		{
+			this.id = id;
+			this.title = title;
+			this.detail = detail;
+			this.sales = sales;
+			this.image = image;
+		}
+		
+		public var id:String;
+		public var title:String;
+		public var detail:Number;
+		public var image:String;
+		public var sales:Number;
+		
+		public function toString():String
+		{
+			return title;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DataGridExample/src/products/ProductItemRenderer.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/DataGridExample/src/products/ProductItemRenderer.as b/examples/flexjs/DataGridExample/src/products/ProductItemRenderer.as
new file mode 100644
index 0000000..4edc5b7
--- /dev/null
+++ b/examples/flexjs/DataGridExample/src/products/ProductItemRenderer.as
@@ -0,0 +1,66 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package products
+{
+	import org.apache.flex.html.Image;
+	import org.apache.flex.html.supportClasses.DataItemRenderer;
+	
+	public class ProductItemRenderer extends DataItemRenderer
+	{
+		public function ProductItemRenderer()
+		{
+			super();
+		}
+		
+		private var image:Image;
+		
+		override public function addedToParent():void
+		{
+			super.addedToParent();
+			
+			// add an image and two labels
+			image = new Image();
+			addElement(image);
+		}
+		
+		override public function get data():Object
+		{
+			return super.data;
+		}
+		
+		override public function set data(value:Object):void
+		{
+			super.data = value;
+			
+			image.source = value.image;
+		}
+		
+		override public function adjustSize():void
+		{
+			var cy:Number = this.height/2;
+			
+			image.x = 4;
+			image.y = cy - 16;
+			image.width = 32;
+			image.height = 32;
+			
+			updateRenderer();
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DesktopMap/DesktopMap-app.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/DesktopMap/DesktopMap-app.xml b/examples/flexjs/DesktopMap/DesktopMap-app.xml
new file mode 100644
index 0000000..8beb581
--- /dev/null
+++ b/examples/flexjs/DesktopMap/DesktopMap-app.xml
@@ -0,0 +1,252 @@
+<?xml version="1.0" encoding="utf-8" standalone="no"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<application xmlns="http://ns.adobe.com/air/application/4.0">
+
+<!-- Adobe AIR Application Descriptor File Template.
+
+	Specifies parameters for identifying, installing, and launching AIR applications.
+
+	xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/3.8
+			The last segment of the namespace specifies the version
+			of the AIR runtime required for this application to run.
+
+	minimumPatchLevel - The minimum patch level of the AIR runtime required to run
+			the application. Optional.
+-->
+
+	<!-- A universally unique application identifier. Must be unique across all AIR applications.
+	Using a reverse DNS-style name as the id is recommended. (Eg. com.example.ExampleApplication.) Required. -->
+	<id>org.apache.flexjs.desktopmap</id>
+
+	<!-- Used as the filename for the application. Required. -->
+	<filename>Apache FlexJS Google Map Example</filename>
+
+	<!-- The name that is displayed in the AIR application installer.
+	May have multiple values for each language. See samples or xsd schema file. Optional. -->
+	<name>Apache FlexJS Google Map Example</name>
+
+	<!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade.
+	Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
+	An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
+	<versionNumber>0.0.1</versionNumber>
+
+	<!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
+	<!-- <versionLabel></versionLabel> -->
+
+	<!-- Description, displayed in the AIR application installer.
+	May have multiple values for each language. See samples or xsd schema file. Optional. -->
+	<!-- <description></description> -->
+
+	<!-- Copyright information. Optional -->
+	<copyright>Copyright 2013 The Apache Software Foundation.</copyright>
+
+	<!-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->
+	<!-- <publisherID></publisherID> -->
+
+	<!-- Settings for the application's initial window. Required. -->
+	<initialWindow>
+		<!-- The main SWF or HTML file of the application. Required. -->
+		<!-- Note: In Flash Builder, the SWF reference is set automatically. -->
+		<content>DesktopMap.swf</content>
+
+		<!-- The title of the main window. Optional. -->
+		<!-- <title></title> -->
+
+		<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
+		<!-- <systemChrome></systemChrome> -->
+
+		<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
+		<!-- <transparent></transparent> -->
+
+		<!-- Whether the window is initially visible. Optional. Default false. -->
+		<!-- <visible></visible> -->
+
+		<!-- Whether the user can minimize the window. Optional. Default true. -->
+		<!-- <minimizable></minimizable> -->
+
+		<!-- Whether the user can maximize the window. Optional. Default true. -->
+		<!-- <maximizable></maximizable> -->
+
+		<!-- Whether the user can resize the window. Optional. Default true. -->
+		<!-- <resizable></resizable> -->
+
+		<!-- The window's initial width in pixels. Optional. -->
+		<!-- <width></width> -->
+
+		<!-- The window's initial height in pixels. Optional. -->
+		<!-- <height></height> -->
+
+		<!-- The window's initial x position. Optional. -->
+		<!-- <x></x> -->
+
+		<!-- The window's initial y position. Optional. -->
+		<!-- <y></y> -->
+
+		<!-- The window's minimum size, specified as a width/height pair in pixels, such as "400 200". Optional. -->
+		<!-- <minSize></minSize> -->
+
+		<!-- The window's initial maximum size, specified as a width/height pair in pixels, such as "1600 1200". Optional. -->
+		<!-- <maxSize></maxSize> -->
+
+        <!-- The initial aspect ratio of the app when launched (either "portrait" or "landscape"). Optional. Mobile only. Default is the natural orientation of the device -->
+
+        <!-- <aspectRatio></aspectRatio> -->
+
+        <!-- Whether the app will begin auto-orienting on launch. Optional. Mobile only. Default false -->
+
+        <!-- <autoOrients></autoOrients> -->
+
+        <!-- Whether the app launches in full screen. Optional. Mobile only. Default false -->
+
+        <!-- <fullScreen></fullScreen> -->
+
+        <!-- The render mode for the app (either auto, cpu, gpu, or direct). Optional. Default auto -->
+
+        <!-- <renderMode></renderMode> -->
+
+		<!-- Whether or not to pan when a soft keyboard is raised or lowered (either "pan" or "none").  Optional.  Defaults "pan." -->
+		<!-- <softKeyboardBehavior></softKeyboardBehavior> -->
+	<autoOrients>false</autoOrients>
+        <fullScreen>false</fullScreen>
+        <visible>true</visible>
+    </initialWindow>
+
+	<!-- We recommend omitting the supportedProfiles element, -->
+	<!-- which in turn permits your application to be deployed to all -->
+	<!-- devices supported by AIR. If you wish to restrict deployment -->
+	<!-- (i.e., to only mobile devices) then add this element and list -->
+	<!-- only the profiles which your application does support. -->
+	<!-- <supportedProfiles>desktop extendedDesktop mobileDevice extendedMobileDevice</supportedProfiles> -->
+	<supportedProfiles>extendedDesktop desktop</supportedProfiles>
+
+	<!-- The subpath of the standard default installation location to use. Optional. -->
+	<installFolder>Apache Flex</installFolder>
+
+	<!-- The subpath of the Programs menu to use. (Ignored on operating systems without a Programs menu.) Optional. -->
+	<programMenuFolder>Apache Flex</programMenuFolder>
+
+	<!-- The icon the system uses for the application. For at least one resolution,
+	specify the path to a PNG file included in the AIR package. Optional. -->
+	<icon>
+		<image16x16>assets/icons/16.png</image16x16>
+		<image29x29>assets/icons/29.png</image29x29>
+		<image32x32>assets/icons/32.png</image32x32>
+		<image36x36>assets/icons/36.png</image36x36>
+		<image48x48>assets/icons/48.png</image48x48>
+		<image57x57>assets/icons/57.png</image57x57>
+		<image72x72>assets/icons/72.png</image72x72>
+		<image114x114>assets/icons/114.png</image114x114>
+		<image128x128>assets/icons/128.png</image128x128>
+	</icon>
+
+	<!-- Whether the application handles the update when a user double-clicks an update version
+	of the AIR file (true), or the default AIR application installer handles the update (false).
+	Optional. Default false. -->
+	<!-- <customUpdateUI></customUpdateUI> -->
+
+	<!-- Whether the application can be launched when the user clicks a link in a web browser.
+	Optional. Default false. -->
+	<!-- <allowBrowserInvocation></allowBrowserInvocation> -->
+
+	<!-- Listing of file types for which the application can register. Optional. -->
+	<!-- <fileTypes> -->
+
+		<!-- Defines one file type. Optional. -->
+		<!-- <fileType> -->
+
+			<!-- The name that the system displays for the registered file type. Required. -->
+			<!-- <name></name> -->
+
+			<!-- The extension to register. Required. -->
+			<!-- <extension></extension> -->
+
+			<!-- The description of the file type. Optional. -->
+			<!-- <description></description> -->
+
+			<!-- The MIME content type. -->
+			<!-- <contentType></contentType> -->
+
+			<!-- The icon to display for the file type. Optional. -->
+			<!-- <icon>
+				<image16x16></image16x16>
+				<image32x32></image32x32>
+				<image48x48></image48x48>
+				<image128x128></image128x128>
+			</icon> -->
+
+		<!-- </fileType> -->
+	<!-- </fileTypes> -->
+
+    <!-- iOS specific capabilities -->
+	<!-- <iPhone> -->
+		<!-- A list of plist key/value pairs to be added to the application Info.plist -->
+		<!-- <InfoAdditions>
+            <![CDATA[
+                <key>UIDeviceFamily</key>
+                <array>
+                    <string>1</string>
+                    <string>2</string>
+                </array>
+                <key>UIStatusBarStyle</key>
+                <string>UIStatusBarStyleBlackOpaque</string>
+                <key>UIRequiresPersistentWiFi</key>
+                <string>YES</string>
+            ]]>
+        </InfoAdditions> -->
+        <!-- A list of plist key/value pairs to be added to the application Entitlements.plist -->
+		<!-- <Entitlements>
+            <![CDATA[
+                <key>keychain-access-groups</key>
+                <array>
+                    <string></string>
+                    <string></string>
+                </array>
+            ]]>
+        </Entitlements> -->
+	<!-- Display Resolution for the app (either "standard" or "high"). Optional. Default "standard" -->
+	<!-- <requestedDisplayResolution></requestedDisplayResolution> -->
+	<!-- </iPhone> -->
+
+	<!-- Specify Android specific tags that get passed to AndroidManifest.xml file. -->
+    <!--<android> -->
+    <!--	<manifestAdditions>
+		<![CDATA[
+			<manifest android:installLocation="auto">
+				<uses-permission android:name="android.permission.INTERNET"/>
+				<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+				<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
+				<uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
+				<application android:enabled="true">
+					<activity android:excludeFromRecents="false">
+						<intent-filter>
+							<action android:name="android.intent.action.MAIN"/>
+							<category android:name="android.intent.category.LAUNCHER"/>
+						</intent-filter>
+					</activity>
+				</application>
+            </manifest>
+		]]>
+        </manifestAdditions> -->
+	    <!-- Color depth for the app (either "32bit" or "16bit"). Optional. Default 16bit before namespace 3.0, 32bit after -->
+        <!-- <colorDepth></colorDepth> -->
+    <!-- </android> -->
+	<!-- End of the schema for adding the android specific tags in AndroidManifest.xml file -->
+
+</application>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DesktopMap/README.txt
----------------------------------------------------------------------
diff --git a/examples/flexjs/DesktopMap/README.txt b/examples/flexjs/DesktopMap/README.txt
new file mode 100644
index 0000000..30ff2ea
--- /dev/null
+++ b/examples/flexjs/DesktopMap/README.txt
@@ -0,0 +1,41 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+DESCRIPTION
+
+This sample FlexJS application shows how you can integrate a 3rd party library, such as Google Maps, into the
+world of FlexJS.
+
+The ActionScript side is an AIR app that uses HTMLLoader to bring in the Google MAP JavaScript API. You could
+also try to use an iFrame with a web application (there are examples of iFrame and Flex scattered around the web).
+
+You can also cross-compile this sample into JavaScript. This is possible because there is a JavaScript version of the
+ActionScript Map class. The JavaScript Map class loads the Google MAP API asynchronously and dispatches a "ready" 
+event when the load and initialization of the API is complete.
+    
+You will need a Google API developer key. When you have it, replace --put your Google API dev token here-- with 
+your developer token in the MyInitialView.mxml <basic:Map> tag.
+
+COMPONENTS and BEADS
+
+- Container
+- DropDownList
+- Label
+- TextButton
+- TextInput
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DesktopMap/build.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/DesktopMap/build.xml b/examples/flexjs/DesktopMap/build.xml
new file mode 100644
index 0000000..d55be5a
--- /dev/null
+++ b/examples/flexjs/DesktopMap/build.xml
@@ -0,0 +1,104 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+<project name="desktopmap" default="main" basedir=".">
+    <property name="FLEXJS_HOME" location="../.."/>
+    <property name="example" value="DesktopMap" />
+    
+    <!-- this project needs AIR 3.4 FP 11.4 -->
+    <property name="swf.version" value="17" />
+    <property name="playerglobal.version" value="11.4" />
+    
+    <property file="${FLEXJS_HOME}/env.properties"/>
+    <property environment="env"/>
+    <property file="${FLEXJS_HOME}/build.properties"/>
+    <property name="FLEX_HOME" value="${FLEXJS_HOME}"/>
+    <available file="${env.FALCON_HOME}/lib/falcon-mxmlc.jar"
+    type="file"
+    property="FALCON_HOME"
+    value="${env.FALCON_HOME}"/>
+    
+    <available file="${FLEXJS_HOME}/../flex-falcon/compiler/generated/dist/sdk/lib/falcon-mxmlc.jar"
+    type="file"
+    property="FALCON_HOME"
+    value="${FLEXJS_HOME}/../flex-falcon/compiler/generated/dist/sdk"/>
+    
+    <available file="${env.FALCONJX_HOME}/lib/jsc.jar"
+    type="file"
+    property="FALCONJX_HOME"
+    value="${env.FALCONJX_HOME}"/>
+    
+    <available file="${FLEXJS_HOME}/../flex-falcon/compiler.jx/lib/jsc.jar"
+    type="file"
+    property="FALCONJX_HOME"
+    value="${FLEXJS_HOME}/../flex-falcon/compiler.jx"/>
+    
+    <available file="${env.GOOG_HOME}/closure/goog/base.js"
+    type="file"
+    property="GOOG_HOME"
+    value="${env.GOOG_HOME}"/>
+    
+    <available file="${FLEXJS_HOME}/js/lib/google/closure-library/closure/goog/base.js"
+    type="file"
+    property="GOOG_HOME"
+    value="${FLEXJS_HOME}/js/lib/google/closure-library"/>
+    
+    <property name="AIR_HOME" value="${env.AIR_HOME}"/>
+    
+    
+    <condition property="adl" value="adl.exe">
+        <os family="windows"/>
+    </condition>
+    
+    <condition property="adl" value="adl">
+        <os family="mac"/>
+    </condition>
+    
+    <condition property="runtime" value="win">
+        <os family="windows"/>
+    </condition>
+    
+    <condition property="runtime" value="mac">
+        <os family="mac"/>
+    </condition>
+
+    <include file="${basedir}/../build_example.xml" />
+
+    <target name="main" depends="clean,build_example.compileair,build_example.compilejsair" description="Clean build of ${example}">
+    </target>
+    
+    <target name="clean">
+        <echo>playerglobal.version = ${playerglobal.version}</echo>
+        <delete dir="${basedir}/bin" failonerror="false" />
+        <delete dir="${basedir}/bin-debug" failonerror="false" />
+        <delete dir="${basedir}/bin-release" failonerror="false" />
+    </target>    
+    
+    <target name="run">
+        <exec executable="${AIR_HOME}/bin/${adl}" dir="${basedir}/bin-debug" failonerror="true">
+            <arg value="-runtime" />
+            <arg value="${AIR_HOME}/runtimes/air/${runtime}" />
+            <arg value="-profile" />
+            <arg value="extendedDesktop" />
+            <arg value="${basedir}/bin-debug/${example}-app.xml" />
+        </exec>
+    </target>
+</project>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DesktopMap/src/DesktopMap.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/DesktopMap/src/DesktopMap.mxml b/examples/flexjs/DesktopMap/src/DesktopMap.mxml
new file mode 100644
index 0000000..4f938b6
--- /dev/null
+++ b/examples/flexjs/DesktopMap/src/DesktopMap.mxml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!---
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+-->
+<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+				   xmlns:local="*"
+				   xmlns:models="models.*"
+				   xmlns:js="library://ns.apache.org/flexjs/basic" 
+				   >
+	
+	<!-- This application demonstrates how to use the Google MAP API
+	     on both the AIR and JavaScript/browser platform. After cross-
+	     compiling this application for JavaScript, edit the index.html
+	     file and include your Google developer API token.
+	-->
+	
+	<js:valuesImpl>
+		<js:SimpleCSSValuesImpl />
+	</js:valuesImpl>
+	<js:initialView>
+		<local:MyInitialView />
+	</js:initialView>
+	<js:model>
+		<models:MyModel />
+	</js:model>
+	<js:beads>
+		<js:MixinManager />
+	</js:beads>
+	
+</js:Application>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DesktopMap/src/MyInitialView.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/DesktopMap/src/MyInitialView.mxml b/examples/flexjs/DesktopMap/src/MyInitialView.mxml
new file mode 100644
index 0000000..9559493
--- /dev/null
+++ b/examples/flexjs/DesktopMap/src/MyInitialView.mxml
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<js:ViewBase xmlns:fx="http://ns.adobe.com/mxml/2009"
+				xmlns:js="library://ns.apache.org/flexjs/basic"
+                xmlns:google="library://ns.apache.org/flexjs/google"
+				xmlns:local="*"
+				initComplete="initControls()">
+    <fx:Script>
+        <![CDATA[			
+			import models.MyModel;
+			import org.apache.flex.events.Event;
+									
+
+			private function initControls() : void
+			{
+				
+			}
+			
+			/**
+			 * Take the values from the input field and have the map
+			 * display that coordinate.
+			 */
+			private function mapIt() : void
+			{
+				var lat:Number = Number(latInput.text);
+				var lng:Number = Number(longInput.text);
+				var zoom:Number = Number(zoomInput.text);
+				
+				map.loadMap(lat, lng, zoom);
+			}
+			
+			private var selectedCity:String;
+			
+			/**
+			 * Triggered by a change in the drop list with a new city selected. This
+			 * will also update the input fields.
+			 */
+			private function changeCity(event:org.apache.flex.events.Event) : void
+			{
+				var index:int = list.selectedIndex;
+				
+				var latlng:Object = MyModel(applicationModel).coordinates[index];
+				map.loadMap(latlng.lat, latlng.lng, Number(zoomInput.text));
+				
+				latInput.text = String(latlng.lat);
+				longInput.text = String(latlng.lng);
+			}
+			
+			private function codeAddress() : void
+			{
+				map.markAddress(mapLocation.text);
+				map.setZoom(12);
+			}
+			
+			private function searchOnMap() : void
+			{
+				map.nearbySearch(search.text);
+				map.setZoom(12);
+			}
+			
+			private function clearSearchResults() : void
+			{
+				map.clearSearchResults();
+			}
+			
+			private function orientMap() : void
+			{
+				map.centerOnAddress(mapLocation.text);
+				map.setZoom(12);
+			}
+			
+		]]>
+    </fx:Script>
+	
+	<fx:Style>
+		@namespace basic "library://ns.apache.org/flexjs/basic";
+	
+	</fx:Style>
+	
+	<js:beads>
+		<js:ViewBaseDataBinding />
+	</js:beads>
+	
+	
+	<js:Container x="5" y="5" className="topContainer" >
+		<js:beads>
+			<js:VerticalLayout />
+		</js:beads>
+		
+		<js:Container>
+			<js:beads>
+				<js:HorizontalLayout />
+			</js:beads>
+			<js:Label text="Location:" />
+			<js:TextInput id="mapLocation" />
+			<js:TextButton text="Go" click="orientMap()" />
+		</js:Container>
+		
+		<google:Map id="map" width="450" height="300" token="AIzaSyDkQgg2iojLCYeuW6hK7DkuAHD-SwJJhdE" />
+		
+		<js:Container>
+			<js:beads>
+				<js:HorizontalLayout />
+			</js:beads>
+			<js:Label text="Search on Map:" />
+			<js:TextInput id="search" />
+			<js:TextButton text="Find" click="searchOnMap()" />
+			<js:TextButton text="Clear" click="clearSearchResults()" />
+		</js:Container>
+		
+		<js:Label text="History:" />
+		
+		<!--<js:List id="historyList" />-->
+		<js:DropDownList id="list" width="100" height="17"
+							change="changeCity(event)"
+							dataProvider="{MyModel(applicationModel).cities}" />
+		
+		<js:Label text="Lat:" />
+		<js:TextInput id="latInput" text="-34.397" />
+		
+		<js:Label text="Long:" />
+		<js:TextInput id="longInput" text="150.644" />
+		
+		<js:Label text="Zoom:" />
+		<js:TextInput id="zoomInput" text="8" />
+		
+		<js:TextButton text="MapIt" click="mapIt()" />
+	</js:Container>
+
+</js:ViewBase>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/DesktopMap/src/models/MyModel.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/DesktopMap/src/models/MyModel.as b/examples/flexjs/DesktopMap/src/models/MyModel.as
new file mode 100644
index 0000000..406c30c
--- /dev/null
+++ b/examples/flexjs/DesktopMap/src/models/MyModel.as
@@ -0,0 +1,56 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package models
+{
+	import org.apache.flex.core.IBeadModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.EventDispatcher;
+	
+	public class MyModel extends EventDispatcher implements IBeadModel
+	{
+		public function MyModel()
+		{
+			super();
+		}
+		
+		private var _strand:IStrand;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+		
+		private var _cities:Array = ["Sydney", "NYC", "Mexico City", "London", "Rio de Janeiro"];
+		public function get cities():Array
+		{
+			return _cities;
+		}
+		
+		private var _coordinates:Array = [{lat:-33.86, lng:151.211},
+			{lat:40.712, lng:-74.0059},
+			{lat:19.26, lng:-99.03},
+			{lat:51.4, lng:-0.1},
+			{lat:-22.95, lng:-43.12}];
+		public function get coordinates():Array
+		{
+			return _coordinates;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/FlexJSStore/build.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore/build.xml b/examples/flexjs/FlexJSStore/build.xml
new file mode 100644
index 0000000..d4b9777
--- /dev/null
+++ b/examples/flexjs/FlexJSStore/build.xml
@@ -0,0 +1,91 @@
+<?xml version="1.0"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+
+
+<project name="flexjsstore" default="main" basedir=".">
+    <property name="FLEXJS_HOME" location="../.."/>
+    <property name="example" value="FlexJSStore" />
+    
+    <property file="${FLEXJS_HOME}/env.properties"/>
+    <property environment="env"/>
+    <property file="${FLEXJS_HOME}/build.properties"/>
+    <property name="FLEX_HOME" value="${FLEXJS_HOME}"/>
+    <available file="${env.FALCON_HOME}/lib/falcon-mxmlc.jar"
+    type="file"
+    property="FALCON_HOME"
+    value="${env.FALCON_HOME}"/>
+    
+    <available file="${FLEXJS_HOME}/../flex-falcon/compiler/generated/dist/sdk/lib/falcon-mxmlc.jar"
+    type="file"
+    property="FALCON_HOME"
+    value="${FLEXJS_HOME}/../flex-falcon/compiler/generated/dist/sdk"/>
+    
+    <available file="${env.FALCONJX_HOME}/lib/jsc.jar"
+    type="file"
+    property="FALCONJX_HOME"
+    value="${env.FALCONJX_HOME}"/>
+    
+    <available file="${FLEXJS_HOME}/../flex-falcon/compiler.jx/lib/jsc.jar"
+    type="file"
+    property="FALCONJX_HOME"
+    value="${FLEXJS_HOME}/../flex-falcon/compiler.jx"/>
+    
+    <available file="${env.GOOG_HOME}/closure/goog/base.js"
+    type="file"
+    property="GOOG_HOME"
+    value="${env.GOOG_HOME}"/>
+    
+    <available file="${FLEXJS_HOME}/js/lib/google/closure-library/closure/goog/base.js"
+    type="file"
+    property="GOOG_HOME"
+    value="${FLEXJS_HOME}/js/lib/google/closure-library"/>
+    
+    <include file="${basedir}/../build_example.xml" />
+    
+    <target name="main" depends="clean,build_example.compile,build_example.compilejs" description="Clean build of ${example}">
+        <mkdir dir="${basedir}/bin-debug/data" />
+        <copy file="${basedir}/src/data/catalog.json" tofile="${basedir}/bin-debug/data/catalog.json" />
+        <mkdir dir="${basedir}/bin/js-debug/data" />
+        <copy file="${basedir}/src/data/catalog.json" tofile="${basedir}/bin/js-debug/data/catalog.json" />
+        <mkdir dir="${basedir}/bin/js-release/data" />
+        <copy file="${basedir}/src/data/catalog.json" tofile="${basedir}/bin/js-release/data/catalog.json" />
+        <mkdir dir="${basedir}/bin/js-debug/assets" />
+        <copy todir="${basedir}/bin/js-debug/assets" >
+            <fileset dir="${basedir}/src/assets">
+                <include name="**" />
+            </fileset>
+        </copy>
+        <mkdir dir="${basedir}/bin/js-release/assets" />
+        <copy todir="${basedir}/bin/js-release/assets" >
+            <fileset dir="${basedir}/src/assets">
+                <include name="**" />
+            </fileset>
+        </copy>
+    </target>
+
+    <target name="clean">
+        <delete dir="${basedir}/bin" failonerror="false" />
+        <delete dir="${basedir}/bin-debug" failonerror="false" />
+        <delete dir="${basedir}/bin-release" failonerror="false" />
+    </target>
+
+    
+    
+</project>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/FlexJSStore/src/FlexJSStore.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore/src/FlexJSStore.mxml b/examples/flexjs/FlexJSStore/src/FlexJSStore.mxml
new file mode 100755
index 0000000..4d04dc6
--- /dev/null
+++ b/examples/flexjs/FlexJSStore/src/FlexJSStore.mxml
@@ -0,0 +1,268 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+                xmlns:js="library://ns.apache.org/flexjs/basic" 
+                xmlns="*"
+                initialize="startService()"
+			    pageTitle="FlexStore">
+	
+	<fx:Script>
+		<![CDATA[	
+            import org.apache.flex.core.ValuesManager;
+            
+            /*
+			private var currentTheme:String = "beige";
+			
+			private function toggleTheme():void
+			{
+				if (currentTheme == "beige")
+				{
+					currentTheme = "blue";
+				}
+				else
+				{
+					currentTheme = "beige";
+				}
+				
+				loadStyle();
+			}
+			*/
+            
+			private function startService():void
+			{
+				productService.send();
+			}
+			
+			private function loadStyle():void
+			{
+                /* load css not implemented yet
+				var eventDispatcher:IEventDispatcher =
+					styleManager.loadStyleDeclarations(currentTheme + ".swf");
+				eventDispatcher.addEventListener(StyleEvent.COMPLETE, completeHandler);
+                */
+			}
+			
+			private function completeHandler(event:Event):void
+			{
+				image.source = ValuesManager.valuesImpl.getValue(acb, "storeLogo");
+                /*
+				super.initialized = true;
+                */
+                callLater.callLater(prebake);
+			}
+			
+            /*
+			override public function set initialized(value:Boolean):void
+			{
+				// Hold off until the Runtime CSS SWF is done loading.
+			}
+            */
+            
+            private var stateChain:Array;
+            
+            private function headHome():void
+            {
+                homeButton.selected = true;
+                if (initialView.currentState == "ProductsState")
+                {
+                    productsButton.selected = false;
+                    stateChain = ["ProductsWipeUp", "HomeWipeDown", "HomeState"];
+                    initialView.currentState = "ProductsWipeUp";
+                }
+                else if (initialView.currentState == "SupportState")
+                {
+                    supportButton.selected = false;
+                    stateChain = ["SupportWipeUp", "HomeWipeDown", "HomeState"];
+                    initialView.currentState = "SupportWipeUp";                    
+                }
+            }
+            
+            private function headToProducts():void
+            {
+                productsButton.selected = true;
+                if (initialView.currentState == "SupportState")
+                {
+                    supportButton.selected = false;
+                    stateChain = ["SupportWipeUp", "ProductsWipeDown", "ProductsState"];
+                    initialView.currentState = "SupportWipeUp";                    
+                }
+                if (initialView.currentState == "HomeState")
+                {
+                    homeButton.selected = false;
+                    stateChain = ["HomeWipeUp", "ProductsWipeDown", "ProductsState"];
+                    initialView.currentState = "HomeWipeUp";                    
+                }
+            }
+            
+            private function headToSupport():void
+            {
+                supportButton.selected = true;
+                if (initialView.currentState == "ProductsState")
+                {
+                    productsButton.selected = false;
+                    stateChain = ["ProductsWipeUp", "SupportWipeDown", "SupportState"];
+                    initialView.currentState = "ProductsWipeUp";                    
+                }
+                if (initialView.currentState == "HomeState")
+                {
+                    homeButton.selected = false;
+                    stateChain = ["HomeWipeUp", "SupportWipeDown", "SupportState"];
+                    initialView.currentState = "HomeWipeUp";                    
+                }
+            }
+            
+            private function prebake():void
+            {
+                callLater.callLater(prebake2);
+            }
+            
+            private function prebake2():void
+            {
+                trace("prebake2");
+                stateChain = ["ProductsPreBake", "HomeState"];
+                initialView.currentState = "ProductsPreBake";
+            }
+                
+            private function chainStatesIfNeeded():void
+            {
+                if (stateChain != null)
+                {
+                    if (initialView.currentState == stateChain[0])
+                    {
+                        callLater.callLater(nextState);
+                    }
+                }
+            }
+            
+            private function nextState():void
+            {
+                stateChain.shift();
+                if (stateChain.length)
+                    initialView.currentState = stateChain[0];
+                else
+                    stateChain = null;
+            }
+		]]>
+	</fx:Script>
+	
+	<fx:Style source="main.css"/>
+    <fx:Style source="beige.css"/>
+	
+    <fx:Declarations>
+        <js:HTTPService id="productService" url="data/catalog.json">
+            <js:LazyCollection id="catalog" complete="if (pView) pView.catalog = catalog">
+                <js:inputParser>
+                    <js:JSONInputParser />
+                </js:inputParser>
+                <js:itemConverter>
+                    <ProductJSONItemConverter />
+                </js:itemConverter> 
+            </js:LazyCollection>
+        </js:HTTPService>        
+    </fx:Declarations>
+    <js:valuesImpl>
+        <js:SimpleCSSValuesImpl />
+    </js:valuesImpl>
+	<js:beads>
+        <js:ViewSourceContextMenuOption />
+        <js:CallLaterBead id="callLater" />
+        <js:ApplicationDataBinding />
+    </js:beads>
+    <js:initialView>
+        <js:ViewBase	width="990" height="585"
+                        initComplete="completeHandler(null)"
+                        stateChangeComplete="chainStatesIfNeeded()">
+            <js:states>
+                <js:State name="HomeState" stateGroups="['Home']" />
+                <js:State name="HomeWipeUp" stateGroups="['Home']" />
+                <js:State name="HomeWipeDown" stateGroups="['Home']" />
+                <js:State name="ProductsPreBake" stateGroups="['Home', 'Products']" />
+                <js:State name="ProductsState" stateGroups="['Products']" />
+                <js:State name="ProductsWipeUp" stateGroups="['Products']" />
+                <js:State name="ProductsWipeDown" stateGroups="['Products']" />
+                <js:State name="SupportState" stateGroups="['Support']" />
+                <js:State name="SupportWipeUp" stateGroups="['Support']" />
+                <js:State name="SupportWipeDown" stateGroups="['Support']" />
+            </js:states>
+            
+            <js:transitions>
+                <js:Transition fromState="HomeState" toState="HomeWipeUp">
+                    <js:Wipe direction="up" target="homeView" />
+                </js:Transition>
+                <js:Transition fromState="HomeWipeDown" toState="HomeState">
+                    <js:Wipe direction="down" target="homeView" />
+                </js:Transition>
+                <js:Transition fromState="ProductsState" toState="ProductsWipeUp">
+                    <js:Wipe direction="up" target="pView" />
+                </js:Transition>
+                <js:Transition fromState="ProductsWipeDown" toState="ProductsState">
+                    <js:Wipe direction="down" target="pView" />
+                </js:Transition>
+                <js:Transition fromState="SupportState" toState="SupportWipeUp">
+                    <js:Wipe direction="up" target="supportView" />
+                </js:Transition>
+                <js:Transition fromState="SupportWipeDown" toState="SupportState">
+                    <js:Wipe direction="down" target="supportView" />
+                </js:Transition>
+            </js:transitions>
+            <js:beads>
+                <js:VerticalLayout />
+            </js:beads>
+            <js:ControlBar id="acb" width="100%" className="storeControlBar" >
+                <js:beads>
+                    <js:HorizontalLayout />
+                </js:beads>
+                <js:Image id="image" />
+                         <!-- click="toggleTheme()" -->
+                         <!-- toolTip="Change Theme"/ -->
+                <js:ToggleTextButton id="homeButton"
+                                text="Home"
+                                height="100%"
+                                selected="true"
+                                className="storeButtonBar"
+                                click="headHome()" />
+                <js:ToggleTextButton id="productsButton"
+                                text="Products"
+                                height="100%"
+                                className="storeButtonBar"
+                                click="headToProducts()"/>
+                <js:ToggleTextButton id="supportButton"
+                                text="Support"
+                                height="100%"
+                                className="storeButtonBar"
+                                click="headToSupport()"/>            
+            </js:ControlBar>
+            <js:Container width="990" id="viewholder">
+                <js:style>
+                    <js:SimpleCSSStyles paddingLeft="0" paddingRight="0"/>
+                </js:style>
+                        
+                <HomeView id="homeView" width="100%" height="550" includeIn="Home"
+                          />
+                <ProductsView id="pView" includeIn="Products" visible.ProductsPreBake="false"
+                              width="100%" height="550" initComplete="if (catalog.length) pView.catalog = catalog"
+                              />
+                <SupportView id="supportView" includeIn="Support"
+                             width="100%" height="550"
+                             />
+            </js:Container>
+        </js:ViewBase>        
+    </js:initialView>    
+</js:Application>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d33fe63c/examples/flexjs/FlexJSStore/src/HomeView.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore/src/HomeView.mxml b/examples/flexjs/FlexJSStore/src/HomeView.mxml
new file mode 100755
index 0000000..451c5c1
--- /dev/null
+++ b/examples/flexjs/FlexJSStore/src/HomeView.mxml
@@ -0,0 +1,194 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<!--
+This component is primarily static and is only meant to show what other
+pages of the store could look like.
+
+Note that this page was put together in the Design view so you'll see more
+hard coded locations and sizes.
+
+Also note when working with a Canvas that using the constraint styles 
+(e.g., left, top, right, bottom) can provide better layout predictability than 
+using x and y, especially when percentage widths and heights are used.
+
+Width and height are hard-coded in the root tag to help the Design view.
+-->
+<js:Container xmlns:fx="http://ns.adobe.com/mxml/2009"
+         xmlns:js="library://ns.apache.org/flexjs/basic" 
+           xmlns="*" width="990" height="550"
+           initComplete="updateMapImage()">
+	<fx:Script>
+		<![CDATA[
+            import org.apache.flex.core.ValuesManager;
+			import org.apache.flex.html.SimpleAlert;
+
+			public function updateMapImage():void
+			{
+				mapImage.source = ValuesManager.valuesImpl.getValue(mapCanvas, 'dottedMap');
+			}
+		]]>
+	</fx:Script>
+    <js:beads>
+        <js:ContainerDataBinding />
+    </js:beads>
+	<js:HContainer width="100%" height="100%" y="0" x="0" className="colorPanel">
+		<js:VContainer width="230" height="100%">
+			<js:Container width="100%" height="100%">
+			
+				<js:Container height="60" className="homeSection">
+                    <js:style>
+                        <js:SimpleCSSStyles backgroundColor="#ebebe9" left="10" top="10" right="10"/>
+                    </js:style>
+					<js:Label style="left:10;top:10" text="Search Developers" height="22" className="sectionHeader" />
+					<js:TextButton style="left:168;top:30" text="Go" width="27" height="20" className="glass" click="SimpleAlert.show('This feature is not implemented in this sample', 'Go')"/>
+					<js:TextInput style="left:10;top:30" height="20" width="150"/>
+				</js:Container>
+				
+				<js:Container height="280" className="homeSection">
+                    <js:style>
+                        <js:SimpleCSSStyles backgroundColor="#ffffff" left="10" top="78" right="10" />                        
+                    </js:style>
+					<js:VContainer width="100%" height="100%">
+                        <js:style>
+                            <js:SimpleCSSStyles left="10" top="10" />                        
+                        </js:style>
+						<js:Label text="Flex Experts That Can Help You" className="sectionHeader"/>
+						<js:HRule height="5" width="187" style="marginLeft:0"/>
+						<js:Label text="General" className="homeProgramHeader"/>
+						<js:Label text="BlazeDS Experts" style="fontSize:9"/>
+						<js:Spacer height="8" width="100%"/>
+						<js:Label text="Server-side" className="homeProgramHeader"/>
+						<js:Label text="Java, PHP Developers" style="fontSize:9"/>
+						<js:Spacer height="8" width="100%"/>
+						<js:Label text="Mobile" className="homeProgramHeader"/>
+						<js:Label text="Android, IOS and more" style="fontSize:9"/>
+						<js:Spacer height="8" width="100%"/>
+						<js:Label text="Students" className="homeProgramHeader"/>
+						<js:Label text="Free Assistance" style="fontSize:9"/>
+						<js:Spacer height="8" width="100%"/>
+					</js:VContainer>
+				</js:Container>
+				
+				<js:Container height="174" className="homeSection">
+                    <js:style>
+                        <js:SimpleCSSStyles backgroundColor="#ebebe9" left="10" top="366" right="10" />
+                    </js:style>
+					<js:VContainer width="100%" height="100%">
+                        <js:style>
+                            <js:SimpleCSSStyles left="10" top="10" />
+                        </js:style>
+						<js:Label text="Manage My Account" className="sectionHeader"/>
+						
+						<js:Label text="Phone Number"/>
+						
+						<js:HContainer width="100%" height="25" >
+                            <js:style>
+                                <js:SimpleCSSStyles verticalAlign="middle" />
+                            </js:style>
+							<js:TextInput height="20" width="40"/>
+							<js:HRule width="8" height="2"/>
+							<js:TextInput height="20" width="40"/>
+							<js:HRule width="8" height="2"/>
+							<js:TextInput height="20" width="40"/>
+						</js:HContainer>
+						
+						<js:Label text="Password"/>
+						<js:TextInput height="20"/>
+						<js:Spacer height="8" width="100%"/>
+						
+						<js:CheckBox text="Remember my phone number" selected="true"/>
+						<js:Spacer height="8" width="100%"/>
+						
+						<js:TextButton text="Login" className="glass" height="20" width="55" click="SimpleAlert.show('This feature is not implemented in this sample', 'Login')"/>
+						
+					</js:VContainer>
+				</js:Container>
+				
+			</js:Container>
+			
+		</js:VContainer>
+		
+		<js:VContainer width="750" height="100%">
+			<js:Container width="100%" height="100%">
+			
+			    <!-- can't use binding to set the mapImage source because the style isn't available early enough -->
+				<js:Container id="mapCanvas" height="35%" className="homeMap">
+                    <js:style>
+                        <js:SimpleCSSStyles left="0" right="10" top="10" />
+                    </js:style>
+					<js:Image id="mapImage" width="487" height="100%" alpha="1.0" style="left:10;top:10"/>
+					<js:Label y="110" text="US Developers . Flex . FlexJS" width="95%" height="40" style="margin:auto;fontWeight:'bold';fontSize:22;color:#ffffff;fontFamily:'Arial';textAlign:'center'"/>
+					<js:Label text="Learn More &gt;&gt;" width="95" style="fontSize:12;fontFamily:'Arial';bottom:10;right:10"/>
+					<js:Label text="$60/hr" style="color:#ffffff;fontWeight:'bold';fontFamily:'Arial';fontSize:20;right:10:top:10"/>
+					<js:Label text="Rates as low as" x="551" y="16" style="fontSize:12"/>
+				</js:Container>
+				
+				<js:Container height="330" >
+                    <js:style>
+                        <js:SimpleCSSStyles backgroundColor="#ffffff" borderStyle="solid" bottom="10" right="10" left="0" /> <!-- cornerRadius="4" -->
+                    </js:style>
+					
+					<js:Label style="left:10;top:10" text="Featured Developers" width="173" height="25" className="sectionHeader"/>
+					
+					<js:HContainer style="left:10;top:43" width="100%" height="100%">
+						<js:VContainer width="33%" height="100%">
+							<js:Container width="100%">
+								<js:Image id="image1" source="assets/akotter.jpg" style="margin:auto;verticalCenter:0"/>
+							</js:Container>
+							
+							<js:Container width="100%">
+								<js:Label text="Annette Kotter" id="feat_prod_1" style="margin:auto;fontWeight:'bold';fontSize:12"/>
+							</js:Container>
+							
+						</js:VContainer>
+						
+						<js:VContainer width="33%" height="100%">							
+							<js:Container width="100%">
+								<js:Image id="image2" style="margin:auto;verticalCenter:0" source="assets/bcrater.jpg"/>
+							</js:Container>
+							
+							<js:Container width="100%">
+								<js:Label text="Ben Crater" id="feat_prod_2" style="margin:auto;fontWeight:'bold';fontSize:12"/>
+							</js:Container>
+							
+						</js:VContainer>
+						
+						<js:VContainer width="33%" height="100%">
+							<js:Container width="100%">
+								<js:Image id="image3" style="margin:auto;verticalCenter:0" source="assets/jproctor.jpg"/>
+							</js:Container>
+							
+							<js:Container width="100%">
+								<js:Label text="Jane Proctor" id="feat_prod_3" style="margin:auto;fontWeight:'bold';fontSize:12"/>
+							</js:Container>
+							
+						</js:VContainer>
+						
+					</js:HContainer>
+					
+				</js:Container>
+				
+			</js:Container>
+		
+		</js:VContainer>
+		
+	</js:HContainer>
+	
+</js:Container>


Mime
View raw message