Repository: flex-asjs Updated Branches: refs/heads/VF2JS c87f16122 -> 238ceca13
First VF2JS example: a close approximation of the FlexJS DataBindingTest example, but using the 'regular' Flex SDK. Signed-off-by: Erik de Bruin <e...@ixsoftware.nl> Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/238ceca1 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/238ceca1 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/238ceca1 Branch: refs/heads/VF2JS Commit: 238ceca13ae18865f0d5fe411b3ca3b39850761e Parents: c87f161 Author: Erik de Bruin <e...@ixsoftware.nl> Authored: Wed Jul 9 15:57:32 2014 +0200 Committer: Erik de Bruin <e...@ixsoftware.nl> Committed: Wed Jul 9 15:57:32 2014 +0200 ---------------------------------------------------------------------- examples/vf2js_DatabindingTest/build.xml | 161 ++++++++++ .../src/StockDataJSONItemConverter.as | 78 +++++ .../vf2js_DatabindingTest/src/models/MyModel.as | 174 ++++++++++ .../src/vf2js_DatabindingTest.mxml | 321 +++++++++++++++++++ 4 files changed, 734 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/238ceca1/examples/vf2js_DatabindingTest/build.xml ---------------------------------------------------------------------- diff --git a/examples/vf2js_DatabindingTest/build.xml b/examples/vf2js_DatabindingTest/build.xml new file mode 100644 index 0000000..e14925f --- /dev/null +++ b/examples/vf2js_DatabindingTest/build.xml @@ -0,0 +1,161 @@ +<?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="vf2js_databindingtest" default="main" basedir="."> + + <property name="FLEXJS_HOME" location="../.."/> + <property name="example" value="vf2js_DataBindingTest"/> + <property file="${FLEXJS_HOME}/env.properties"/> + <property environment="env"/> + <property file="${FLEXJS_HOME}/build.properties"/> + <!-- property name="FLEX_HOME" value="${FLEXJS_HOME}" / --> + <property name="FLEX_HOME" value="${env.FLEX_HOME}"/> + <property name="FALCON_HOME" value="${env.FALCON_HOME}"/> + <property name="FALCONJX_HOME" value="${env.FALCONJX_HOME}"/> + <property name="GOOG_HOME" value="${env.GOOG_HOME}"/> + + <!-- target name="main" depends="clean,compile,compilejs" description="Clean build of ${example}" / --> + <target name="main" depends="clean,compile" description="Clean build of ${example}"/> + + <path id="lib.path"> + <fileset dir="${FALCON_HOME}/lib" includes="falcon-flexTasks.jar"/> + </path> + + <target name="compile" description="Compiles ${example}"> + <echo message="Compiling ${example}.swf"/> + <echo message="FLEX_HOME: ${FLEX_HOME}"/> + <taskdef resource="flexTasks.tasks" classpathref="lib.path"/> + <mxmlc fork="true" file="${basedir}/src/${example}.mxml" output="${basedir}/bin-debug/${example}.swf"> + <jvmarg line="${mxmlc.jvm.args}"/> + <arg value="+playerglobal.version=${playerglobal.version}"/> + <arg value="+env.PLAYERGLOBAL_HOME=${env.PLAYERGLOBAL_HOME}"/> + </mxmlc> + <html-wrapper height="300" width="400" bgcolor="#ffffff" name="${example}" versionmajor="11" versionminor="1" versionrevision="0" output="${basedir}/bin-debug"/> + <copy todir="${basedir}/bin-debug"> + <fileset dir="${basedir}/src"> + <include name="*.png"/> + <include name="*.jpg"/> + </fileset> + </copy> + </target> + + <!-- target name="compilejs" description="Cross-compiles ${example}"> + <echo message="Compiling ${example}.js"/> + <echo message="FLEX_HOME: ${FLEX_HOME}"/> + <echo message="FALCONJX_HOME: ${FALCONJX_HOME}"/> + <echo message="GOOG_HOME: ${GOOG_HOME}"/> + <java jar="${FALCONJX_HOME}/lib/mxmlc.jar" resultProperty="errorCode" fork="true"> + <jvmarg line="${mxmlc.jvm.args}"/> + <jvmarg line="-Dflexlib=${FLEXJS_HOME}/frameworks}"/> + <arg value="+flexlib=${FLEXJS_HOME}/frameworks"/> + <arg value="-debug"/> + <arg value="-compiler.mxml.children-as-data"/> + <arg value="-compiler.binding-value-change-event=org.apache.flex.events.ValueChangeEvent"/> + <arg value="-compiler.binding-value-change-event-kind=org.apache.flex.events.ValueChangeEvent"/> + <arg value="-compiler.binding-value-change-event-type=valueChange"/> + <arg value="+playerglobal.version=${playerglobal.version}"/> + <arg value="+env.PLAYERGLOBAL_HOME=${env.PLAYERGLOBAL_HOME}"/> + <arg value="-js-output-type=FLEXJS"/> + <arg value="-closure-lib=${GOOG_HOME}"/> + <arg value="-sdk-js-lib=${FLEXJS_HOME}/frameworks/js/FlexJS/src"/> + <arg value="-sdk-js-lib=${FLEXJS_HOME}/frameworks/js/FlexJS/libs"/> + <arg value="-external-js-lib=${FLEXJS_HOME}/frameworks/js/FlexJS/src/jquery_externals.js"/> + <arg value="-external-js-lib=${FLEXJS_HOME}/frameworks/js/FlexJS/src/createjs_externals.js"/> + <arg value="${basedir}/src/${example}.mxml"/> + </java> + <fail> + <condition> + <not> + <or> + <equals arg1="${errorCode}" arg2="0"/> + <equals arg1="${errorCode}" arg2="2"/> + </or> + </not> + </condition> + </fail> + </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> + + <macrodef name="html-wrapper"> + <attribute name="width"/> + <attribute name="height"/> + <attribute name="bgcolor"/> + <attribute name="name"/> + <attribute name="versionmajor"/> + <attribute name="versionminor"/> + <attribute name="versionrevision"/> + <attribute name="output"/> + <sequential> + <copy toFile="@{output}/@{name}.html" file="${FLEXJS_HOME}/templates/swfobject/index.template.html"/> + <copy toDir="@{output}/history"> + <fileset dir="${FLEXJS_HOME}/templates/swfobject/history"> + <include name="**"/> + </fileset> + </copy> + <copy toDir="@{output}"> + <fileset dir="${FLEXJS_HOME}/templates/swfobject"> + <include name="*"/> + <exclude name="index.template.html"/> + </fileset> + </copy> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${title}" value="@{name}"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${bgcolor}" value="@{bgcolor}"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${useBrowserHistory}" value="--"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${version_major}" value="@{versionmajor}"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${version_minor}" value="@{versionminor}"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${version_revision}" value="@{versionrevision}"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${expressInstallSwf}" value="expressInstall.swf"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${expressInstallSwf}" value="expressInstall.swf"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${width}" value="@{width}"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${height}" value="@{height}"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${application}" value="@{name}"/> + </replace> + <replace file="@{output}/@{name}.html"> + <replacefilter token="$${swf}" value="@{name}"/> + </replace> + </sequential> + </macrodef> + +</project> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/238ceca1/examples/vf2js_DatabindingTest/src/StockDataJSONItemConverter.as ---------------------------------------------------------------------- diff --git a/examples/vf2js_DatabindingTest/src/StockDataJSONItemConverter.as b/examples/vf2js_DatabindingTest/src/StockDataJSONItemConverter.as new file mode 100644 index 0000000..8c25b37 --- /dev/null +++ b/examples/vf2js_DatabindingTest/src/StockDataJSONItemConverter.as @@ -0,0 +1,78 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.rpc.http.AbstractOperation; +import mx.rpc.http.SerializationFilter; + +public class StockDataJSONItemConverter extends SerializationFilter +{ + + //-------------------------------------------------------------------------- + // + // Constructor + // + //-------------------------------------------------------------------------- + + public function StockDataJSONItemConverter() + { + super(); + } + + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + //-------------------------------------- + // _deserializedResult + //-------------------------------------- + + private var _deserializedResult:Object; + + //-------------------------------------------------------------------------- + // + // Methods + // + //-------------------------------------------------------------------------- + + //-------------------------------------- + // deserializeResult + //-------------------------------------- + + override public function deserializeResult(operation:AbstractOperation, + result:Object):Object + { + _deserializedResult = JSON.parse(String(result)); + + return result; + } + + //-------------------------------------- + // getItemAt + //-------------------------------------- + + public function getItemAt(index:int):Object + { + return _deserializedResult.query.results.quote; + } +} +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/238ceca1/examples/vf2js_DatabindingTest/src/models/MyModel.as ---------------------------------------------------------------------- diff --git a/examples/vf2js_DatabindingTest/src/models/MyModel.as b/examples/vf2js_DatabindingTest/src/models/MyModel.as new file mode 100644 index 0000000..82985d0 --- /dev/null +++ b/examples/vf2js_DatabindingTest/src/models/MyModel.as @@ -0,0 +1,174 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 flash.events.Event; +import flash.events.EventDispatcher; +import mx.collections.ArrayCollection; + +public class MyModel extends EventDispatcher +{ + + //-------------------------------------------------------------------------- + // + // Constructor + // + //-------------------------------------------------------------------------- + + public function MyModel() + { + } + + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + //-------------------------------------- + // allData + //-------------------------------------- + + 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; + } + + //-------------------------------------- + // requestedField + //-------------------------------------- + + 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")); + } + } + } + + //-------------------------------------- + // responseData + //-------------------------------------- + + 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")); + } + } + + //-------------------------------------- + // responseText + //-------------------------------------- + + 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; + } + + //-------------------------------------- + // stockSymbol + //-------------------------------------- + + private var _stockSymbol:String; + + [Bindable(event = "stockSymbolChanged")] + public function get stockSymbol():String + { + return _stockSymbol; + } + + public function set stockSymbol(value:String):void + { + if (_stockSymbol !== value) + { + _stockSymbol = value; + dispatchEvent(new Event("stockSymbolChanged")); + } + } + + //-------------------------------------- + // strings + //-------------------------------------- + + private var _strings:ArrayCollection = new ArrayCollection([ "AAPL", "ADBE", + "GOOG", "MSFT", "YHOO" ]); + + public function get strings():ArrayCollection + { + return _strings; + } +} + +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/238ceca1/examples/vf2js_DatabindingTest/src/vf2js_DatabindingTest.mxml ---------------------------------------------------------------------- diff --git a/examples/vf2js_DatabindingTest/src/vf2js_DatabindingTest.mxml b/examples/vf2js_DatabindingTest/src/vf2js_DatabindingTest.mxml new file mode 100644 index 0000000..1e69d4d --- /dev/null +++ b/examples/vf2js_DatabindingTest/src/vf2js_DatabindingTest.mxml @@ -0,0 +1,321 @@ +<?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. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:local="*" + xmlns:models="models.*" + creationComplete="init();"> + + <fx:Style> + + @namespace s "library://ns.adobe.com/flex/spark"; + @namespace mx "library://ns.adobe.com/flex/mx"; + + .leftSide { + /* Implemented as properties, not styles */ + /*vertical-align: top; + margin-right: 10px;*/ + } + + .output { + font-size: 20; + } + + .quoteButton { + /* No applicable styles or properties available in Spark Button */ + /*margin-top: 10px; + margin-bottom: 10px;*/ + } + + .rightSide { + /* Implemented as properties, not styles */ + /*vertical-align: top; + margin-left: 10px; + padding-left: 10px;*/ + } + + .topContainer { + /* Implemented as properties, not styles */ + /*padding: 10px;*/ + } + + </fx:Style> + + <fx:Script><![CDATA[ + + import mx.rpc.events.ResultEvent; + + //---------------------------------------------------------------------- + // + // Properties + // + //---------------------------------------------------------------------- + + //-------------------------------------- + // fieldText + //-------------------------------------- + + [Bindable] + public var fieldText:String; + + //-------------------------------------- + // requestedField + //-------------------------------------- + + public function get requestedField():String + { + return group1.selectedValue as String; + } + + //-------------------------------------- + // symbol + //-------------------------------------- + + private var _symbol:String; + + public function get symbol():String + { + return _symbol; + } + + //-------------------------------------- + // _queryBegin + //-------------------------------------- + + private var _queryBegin:String = + "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20"; + + "yahoo.finance.quotes%20where%20symbol%20in%20(%22"; + + //-------------------------------------- + // _queryEnd + //-------------------------------------- + + private var _queryEnd:String = + "%22)%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&" + + "format=json"; + + //---------------------------------------------------------------------- + // + // Methods + // + //---------------------------------------------------------------------- + + //-------------------------------------- + // buttonClickHandler + //-------------------------------------- + + private function buttonClickHandler(event:Event):void + { + service.url = _queryBegin + symbol + _queryEnd; + service.send(); + service.addEventListener("result", completeHandler); + } + + //-------------------------------------- + // completeHandler + //-------------------------------------- + + private function completeHandler(event:ResultEvent):void + { + myModel.responseData = collection.getItemAt(0); + } + + //-------------------------------------- + // init + //-------------------------------------- + + private function init():void + { + addEventListener("buttonClicked", buttonClickHandler); + addEventListener("radioClicked", radioClickHandler); + addEventListener("listChanged", listChangedHandler); + + myModel.stockSymbol = 'ADBE'; + + list.selectedItem = myModel.stockSymbol; + + group1.selectedValue = myModel.requestedField; + + radio1.selected = true; + + fieldText = radio1.label; + } + + //-------------------------------------- + // listChangedHandler + //-------------------------------------- + + private function listChangedHandler(event:Event):void + { + myModel.stockSymbol = symbol; + } + + //-------------------------------------- + // radioChanged + //-------------------------------------- + + private function radioChanged(e:Event):void + { + dispatchEvent(new Event("radioClicked")); + fieldText = RadioButton(e.target).label; + } + + //-------------------------------------- + // radioClickHandler + //-------------------------------------- + + private function radioClickHandler(event:Event):void + { + var field:String = requestedField; + + myModel.requestedField = field; + } + + //-------------------------------------- + // setState + //-------------------------------------- + + private function setState():void + { + currentState = showAllData.selected ? "showAll" : "hideAll"; + } + + ]]></fx:Script> + + <fx:Declarations> + + <s:HTTPService id="service"> + + <s:serializationFilter> + + <local:StockDataJSONItemConverter id="collection" /> + + </s:serializationFilter> + + </s:HTTPService> + + <models:MyModel id="myModel" /> + + <s:RadioButtonGroup id="group1" /> + + </fx:Declarations> + + <s:states> + + <s:State name="hideAll" /> + + <s:State name="showAll" /> + + </s:states> + + <s:VGroup> + + <s:Label + width="300" + text="Enter Stock Symbol or choose from list:" /> + + <s:HGroup + paddingBottom="10" + paddingLeft="10" + paddingRight="10" + paddingTop="10" + styleName="topContainer"> + + <s:VGroup + paddingRight="10" + verticalAlign="top" + styleName="leftSide"> + + <s:TextInput id="symbolTI" + text="{myModel.stockSymbol}" /> + + <s:Button + label="Get Quote" + styleName="quoteButton" + click="_symbol = symbolTI.text; dispatchEvent(new Event('buttonClicked'));" /> + + <s:Label id="field" + text="{fieldText}" /> + + <s:Label + height="24" + styleName="output" + text="{myModel.responseText}" /> + + </s:VGroup> + + <s:VGroup + paddingLeft="20" + styleName="rightSide"> + + <s:DropDownList id="list" + width="100" height="17" + dataProvider="{myModel.strings}" + change="_symbol = list.selectedItem as String; dispatchEvent(new Event('listChanged'))" /> + + <s:RadioButton id="radio1" + label="Price" + value="Ask" + click="radioChanged(event);" + group="{group1}" /> + + <s:RadioButton id="radio2" + label="Change" + value="Change" + click="radioChanged(event);" + group="{group1}" /> + + <s:RadioButton id="radio3" + label="Day's High" + value="DaysHigh" + click="radioChanged(event);" + group="{group1}" /> + + <s:RadioButton id="radio4" + label="Day's Low" + value="DaysLow" + click="radioChanged(event);" + group="{group1}" /> + + <s:CheckBox id="showAllData" + label="Show All Data" + change="setState();" /> + + </s:VGroup> + + </s:HGroup> + + <s:Label id="bindtest" + text="{fieldText + ' expression binding'}" /> + + <s:Label + width="300" + text.showAll="110" + includeIn="showAll" /> + + <s:TextArea id="ta" + width="300" height="100" height.showAll="110" + text="{myModel.allData}" + includeIn="showAll" /> + + </s:VGroup> + +</s:Application>
