Update SVG based button in the FlexJS - JS framework Created simple example project for SVG based components
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/b4bfea26 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/b4bfea26 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/b4bfea26 Branch: refs/heads/develop Commit: b4bfea26f582aece0bc61cc0240ce6726f06e4ea Parents: 75e7b34 Author: Om <[email protected]> Authored: Tue Feb 25 16:25:59 2014 -0800 Committer: Om <[email protected]> Committed: Tue Feb 25 16:25:59 2014 -0800 ---------------------------------------------------------------------- examples/FlexJSTest_SVG/build.xml | 2 +- examples/FlexJSTest_SVG/src/FlexJSTest_SVG.mxml | 39 ++++++++++ .../FlexJSTest_SVG/src/FlexJSTest_again.mxml | 51 ------------- examples/FlexJSTest_SVG/src/MyInitialView.mxml | 76 ++------------------ .../src/StockDataJSONItemConverter.as | 36 ---------- .../src/controllers/MyController.as | 50 ++----------- examples/FlexJSTest_SVG/src/models/MyModel.as | 12 ---- .../as/projects/FlexJSUI/compile-config.xml | 5 ++ frameworks/as/projects/FlexJSUI/defaults.css | 10 +++ frameworks/flex-config.xml | 6 ++ .../flex/svg/staticControls/TextButton.js | 22 +++--- 11 files changed, 80 insertions(+), 229 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/examples/FlexJSTest_SVG/build.xml ---------------------------------------------------------------------- diff --git a/examples/FlexJSTest_SVG/build.xml b/examples/FlexJSTest_SVG/build.xml index 4b9131a..3ab90ca 100644 --- a/examples/FlexJSTest_SVG/build.xml +++ b/examples/FlexJSTest_SVG/build.xml @@ -21,7 +21,7 @@ <project name="flexjstest_SVG" default="main" basedir="."> <property name="FLEXJS_HOME" location="../.."/> - <property name="example" value="FlexJSTest_again" /> + <property name="example" value="FlexJSTest_SVG" /> <property file="${FLEXJS_HOME}/env.properties"/> <property environment="env"/> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/examples/FlexJSTest_SVG/src/FlexJSTest_SVG.mxml ---------------------------------------------------------------------- diff --git a/examples/FlexJSTest_SVG/src/FlexJSTest_SVG.mxml b/examples/FlexJSTest_SVG/src/FlexJSTest_SVG.mxml new file mode 100644 index 0000000..21961f9 --- /dev/null +++ b/examples/FlexJSTest_SVG/src/FlexJSTest_SVG.mxml @@ -0,0 +1,39 @@ +<?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. + +--> +<basic:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:local="*" + xmlns:basic="library://ns.apache.org/flexjs/basic" + xmlns:models="models.*" + xmlns:controllers="controllers.*" + initialize="MyModel(model).labelText='Hello SVG'" + > + <basic:valuesImpl> + <basic:SimpleCSSValuesImpl /> + </basic:valuesImpl> + <basic:initialView> + <local:MyInitialView /> + </basic:initialView> + <basic:model> + <models:MyModel /> + </basic:model> + <basic:controller> + <controllers:MyController /> + </basic:controller> +</basic:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/examples/FlexJSTest_SVG/src/FlexJSTest_again.mxml ---------------------------------------------------------------------- diff --git a/examples/FlexJSTest_SVG/src/FlexJSTest_again.mxml b/examples/FlexJSTest_SVG/src/FlexJSTest_again.mxml deleted file mode 100644 index b86b828..0000000 --- a/examples/FlexJSTest_SVG/src/FlexJSTest_again.mxml +++ /dev/null @@ -1,51 +0,0 @@ -<?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. - ---> -<basic:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:local="*" - xmlns:basic="library://ns.apache.org/flexjs/basic" - xmlns:models="models.*" - xmlns:controllers="controllers.*" - initialize="MyModel(model).labelText='Hello HTML5'" - > - <basic:valuesImpl> - <basic:SimpleCSSValuesImpl /> - </basic:valuesImpl> - <basic:initialView> - <local:MyInitialView /> - </basic:initialView> - <basic:model> - <models:MyModel /> - </basic:model> - <basic:controller> - <controllers:MyController /> - </basic:controller> - <basic:beads> - <basic:HTTPService id="service"> - <basic:LazyCollection id="collection"> - <basic:inputParser> - <basic:JSONInputParser /> - </basic:inputParser> - <basic:itemConverter> - <local:StockDataJSONItemConverter /> - </basic:itemConverter> - </basic:LazyCollection> - </basic:HTTPService> - </basic:beads> -</basic:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/examples/FlexJSTest_SVG/src/MyInitialView.mxml ---------------------------------------------------------------------- diff --git a/examples/FlexJSTest_SVG/src/MyInitialView.mxml b/examples/FlexJSTest_SVG/src/MyInitialView.mxml index ac0d891..074af5e 100644 --- a/examples/FlexJSTest_SVG/src/MyInitialView.mxml +++ b/examples/FlexJSTest_SVG/src/MyInitialView.mxml @@ -19,36 +19,16 @@ limitations under the License. --> <basic:ViewBase xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:basic="library://ns.apache.org/flexjs/basic" - xmlns:html5="library://ns.apache.org/flexjs/html5" + xmlns:html5="library://ns.apache.org/flexjs/html5" + xmlns:svg="library://ns.apache.org/flexjs/svg" > <fx:Script> <![CDATA[ - import org.apache.flex.events.CustomEvent; import org.apache.flex.events.Event; import org.apache.flex.utils.Timer; private var timer:org.apache.flex.utils.Timer; - public function get symbol():String - { - return list.selectedItem as String; - } - - public function get city():String - { - return cityList.selectedItem as String; - } - - public function get inputText():String - { - return input.text; - } - - public function get comboBoxValue():String - { - return String(comboBox.selectedItem); - } - public function startTimer():void { timer = new org.apache.flex.utils.Timer(1000); @@ -73,54 +53,6 @@ limitations under the License. <html5:TextButton text="Start Timer" x="100" y="75" click="startTimer()" /> <html5:TextButton text="Stop Timer" x="100" y="100" click="timer.removeEventListener('timer', timerHandler);timer.stop()" /> <html5:Label id="timerLabel" x="100" y="125" /> - - <html5:List id="cityList" x="200" y="75" width="100" height="75" change="dispatchEvent(new CustomEvent('cityListChanged'))"> - <html5:beads> - <basic:ConstantBinding - sourceID="applicationModel" - sourcePropertyName="cities" - destinationPropertyName="dataProvider" /> - </html5:beads> - </html5:List> - - <html5:TextArea x="320" y="25" width="150" height="75"> - <html5:beads> - <basic:SimpleBinding eventName="labelTextChanged" - sourceID="applicationModel" - sourcePropertyName="labelText" - destinationPropertyName="text" /> - </html5:beads> - </html5:TextArea> - <html5:TextInput id="input" x="320" y="110" /> - <html5:TextButton text="Transfer" x="320" y="138" click="dispatchEvent(new CustomEvent('transferClicked'))" /> - - <html5:CheckBox id="checkbox" x="320" y="170" text="Check Me" /> - - <html5:RadioButton groupName="group1" text="Apples" value="0" x="100" y="150" /> - <html5:RadioButton groupName="group1" text="Oranges" value="1" x="100" y="170" selected="true" /> - <html5:RadioButton groupName="group1" text="Grapes" value="2" x="100" y="190" /> - - <html5:RadioButton groupName="group2" text="Red" value="red" x="100" y="250" selected="true" /> - <html5:RadioButton groupName="group2" text="Green" value="green" x="100" y="270" /> - <html5:RadioButton groupName="group2" text="Blue" value="blue" x="100" y="290" /> - - <html5:DropDownList id="list" x="200" y="200" width="100" height="24" change="dispatchEvent(new CustomEvent('listChanged'))"> - <html5:beads> - <basic:ConstantBinding - sourceID="applicationModel" - sourcePropertyName="strings" - destinationPropertyName="dataProvider" /> - </html5:beads> - </html5:DropDownList> - <html5:TextButton text="OK" x="200" y="230" click="dispatchEvent(new CustomEvent('buttonClicked'))" /> - - <html5:ComboBox id="comboBox" x="320" y="200" width="100" change="dispatchEvent(new CustomEvent('comboBoxChanged'))"> - <html5:beads> - <basic:ConstantBinding - sourceID="applicationModel" - sourcePropertyName="cities" - destinationPropertyName="dataProvider" /> - </html5:beads> - </html5:ComboBox> - + + <svg:TextButton text="SVG Button" x="100" y="175" width="100" height="30" click="startTimer()" /> </basic:ViewBase> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/examples/FlexJSTest_SVG/src/StockDataJSONItemConverter.as ---------------------------------------------------------------------- diff --git a/examples/FlexJSTest_SVG/src/StockDataJSONItemConverter.as b/examples/FlexJSTest_SVG/src/StockDataJSONItemConverter.as deleted file mode 100644 index a030fe0..0000000 --- a/examples/FlexJSTest_SVG/src/StockDataJSONItemConverter.as +++ /dev/null @@ -1,36 +0,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. -// -//////////////////////////////////////////////////////////////////////////////// -package -{ - import org.apache.flex.net.JSONItemConverter; - - public class StockDataJSONItemConverter extends JSONItemConverter - { - public function StockDataJSONItemConverter() - { - super(); - } - - override public function convertItem(data:String):Object - { - var obj:Object = super.convertItem(data); - return obj.query.results.quote.Ask; - } - } -} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/examples/FlexJSTest_SVG/src/controllers/MyController.as ---------------------------------------------------------------------- diff --git a/examples/FlexJSTest_SVG/src/controllers/MyController.as b/examples/FlexJSTest_SVG/src/controllers/MyController.as index 8120572..bacd10d 100644 --- a/examples/FlexJSTest_SVG/src/controllers/MyController.as +++ b/examples/FlexJSTest_SVG/src/controllers/MyController.as @@ -18,12 +18,11 @@ //////////////////////////////////////////////////////////////////////////////// package controllers { + import models.MyModel; + import org.apache.flex.core.Application; import org.apache.flex.core.IDocument; import org.apache.flex.events.Event; - - - import models.MyModel; public class MyController implements IDocument { @@ -31,60 +30,21 @@ package controllers { if (app) { - this.app = app as FlexJSTest_again; + this.app = app as FlexJSTest_SVG; 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:FlexJSTest_again; + private var app:FlexJSTest_SVG; private function viewChangeHandler(event:Event):void { - app.initialView.addEventListener("buttonClicked", buttonClickHandler); - app.initialView.addEventListener("listChanged", listChangedHandler); - app.initialView.addEventListener("cityListChanged", cityListChangeHandler); - app.initialView.addEventListener("transferClicked", transferClickHandler); - app.initialView.addEventListener("comboBoxChanged", comboBoxChangeHandler); } - 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 completeHandler(event:Event):void - { - MyModel(app.model).labelText = app.collection.getItemAt(0) as String; - } - - private function listChangedHandler(event:Event):void - { - MyModel(app.model).labelText = MyInitialView(app.initialView).symbol; - } - - private function cityListChangeHandler(event:Event):void - { - MyModel(app.model).labelText = MyInitialView(app.initialView).city; - } - - private function transferClickHandler(event:Event):void - { - MyModel(app.model).labelText = MyInitialView(app.initialView).inputText; - } - - private function comboBoxChangeHandler(event:Event):void - { - MyModel(app.model).labelText = MyInitialView(app.initialView).comboBoxValue; - } public function setDocument(document:Object, id:String = null):void { - this.app = document as FlexJSTest_again; + this.app = document as FlexJSTest_SVG; app.addEventListener("viewChanged", viewChangeHandler); } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/examples/FlexJSTest_SVG/src/models/MyModel.as ---------------------------------------------------------------------- diff --git a/examples/FlexJSTest_SVG/src/models/MyModel.as b/examples/FlexJSTest_SVG/src/models/MyModel.as index 1dc23e6..eeb5af3 100644 --- a/examples/FlexJSTest_SVG/src/models/MyModel.as +++ b/examples/FlexJSTest_SVG/src/models/MyModel.as @@ -42,18 +42,6 @@ package models dispatchEvent(new Event("labelTextChanged")); } } - - private var _strings:Array = ["AAPL", "ADBE", "GOOG", "MSFT", "YHOO"]; - public function get strings():Array - { - return _strings; - } - - private var _cities:Array = ["London", "Miami", "Paris", "Sydney", "Tokyo"]; - public function get cities():Array - { - return _cities; - } } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/frameworks/as/projects/FlexJSUI/compile-config.xml ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSUI/compile-config.xml b/frameworks/as/projects/FlexJSUI/compile-config.xml index aa41d8e..a72ad58 100644 --- a/frameworks/as/projects/FlexJSUI/compile-config.xml +++ b/frameworks/as/projects/FlexJSUI/compile-config.xml @@ -50,6 +50,10 @@ <uri>library://ns.apache.org/flexjs/createjs</uri> <manifest>createjs-manifest.xml</manifest> </namespace> + <namespace> + <uri>library://ns.apache.org/flexjs/svg</uri> + <manifest>svg-manifest.xml</manifest> + </namespace> </namespaces> <source-path> @@ -74,6 +78,7 @@ <uri>library://ns.apache.org/flexjs/html5</uri> <uri>library://ns.apache.org/flexjs/jquery</uri> <uri>library://ns.apache.org/flexjs/createjs</uri> + <uri>library://ns.apache.org/flexjs/svg</uri> </include-namespaces> <target-player>${playerglobal.version}</target-player> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/frameworks/as/projects/FlexJSUI/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSUI/defaults.css b/frameworks/as/projects/FlexJSUI/defaults.css index 3db56a2..7a4d2f8 100644 --- a/frameworks/as/projects/FlexJSUI/defaults.css +++ b/frameworks/as/projects/FlexJSUI/defaults.css @@ -21,6 +21,7 @@ @namespace h5 "library://ns.apache.org/flexjs/html5"; @namespace jq "library://ns.apache.org/flexjs/jquery"; @namespace createjs "library://ns.apache.org/flexjs/createjs"; +@namespace svg "library://ns.apache.org/flexjs/svg"; /* Global style declaration */ * @@ -388,4 +389,13 @@ createjs|CheckBox IBeadView: ClassReference("org.apache.flex.html.staticControls.beads.CheckBoxView"); } +/* SVG */ + +svg|TextButton +{ + IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.TextModel"); + IBeadView: ClassReference("org.apache.flex.html.staticControls.beads.CSSTextButtonView"); + iMeasurementBead: ClassReference("org.apache.flex.html.staticControls.beads.TextButtonMeasurementBead"); +} + } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/frameworks/flex-config.xml ---------------------------------------------------------------------- diff --git a/frameworks/flex-config.xml b/frameworks/flex-config.xml index 40e92a4..1cbe66b 100644 --- a/frameworks/flex-config.xml +++ b/frameworks/flex-config.xml @@ -96,6 +96,12 @@ <manifest>as/projects/FlexJSUI/html5-manifest.xml</manifest> + </namespace> + <namespace> + <uri>library://ns.apache.org/flexjs/svg</uri> + + <manifest>as/projects/FlexJSUI/svg-manifest.xml</manifest> + </namespace> </namespaces> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b4bfea26/frameworks/js/FlexJS/src/org/apache/flex/svg/staticControls/TextButton.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/svg/staticControls/TextButton.js b/frameworks/js/FlexJS/src/org/apache/flex/svg/staticControls/TextButton.js index fbd4d34..507cd17 100644 --- a/frameworks/js/FlexJS/src/org/apache/flex/svg/staticControls/TextButton.js +++ b/frameworks/js/FlexJS/src/org/apache/flex/svg/staticControls/TextButton.js @@ -23,26 +23,23 @@ goog.require('org.apache.flex.core.UIBase'); * @extends {org.apache.flex.core.UIBase} */ org.apache.flex.svg.staticControls.TextButton = function() { - org.apache.flex.core.UIBase.call(this); + goog.base(this); }; -goog.inherits( - org.apache.flex.svg.staticControls.TextButton, org.apache.flex.core.UIBase -); +goog.inherits(org.apache.flex.svg.staticControls.TextButton, + org.apache.flex.core.UIBase); /** * @override - * @param {Object} p The parent element. */ -org.apache.flex.svg.staticControls.TextButton.prototype.addToParent = - function(p) { +org.apache.flex.svg.staticControls.TextButton.prototype.createElement = + function() { this.element = document.createElement('embed'); - this.element.setAttribute('src', 'skins/TextButtonSkin.svg'); - this.element.setAttribute('type', 'button'); - - p.appendChild(this.element); + this.element.setAttribute('src', 'org/apache/flex/svg/staticControls/skins/TextButtonSkin.svg'); this.positioner = this.element; + + return this.element; }; @@ -50,7 +47,8 @@ org.apache.flex.svg.staticControls.TextButton.prototype.addToParent = * @expose * @return {string} The text getter. */ -org.apache.flex.svg.staticControls.TextButton.prototype.get_text = function() { +org.apache.flex.svg.staticControls.TextButton.prototype.get_text = + function() { return this.element.getAttribute('label'); };
