Repository: flex-asjs Updated Branches: refs/heads/develop dc35db71b -> 097532374
Added an example of styling the basic 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/09753237 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/09753237 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/09753237 Branch: refs/heads/develop Commit: 097532374babb8d69d091c31a74c6fcdca84d0a3 Parents: dc35db7 Author: Peter Ent <[email protected]> Authored: Thu Jun 30 16:05:46 2016 -0400 Committer: Peter Ent <[email protected]> Committed: Thu Jun 30 16:05:46 2016 -0400 ---------------------------------------------------------------------- examples/build.xml | 2 + examples/flexjs/StyleExample/build.xml | 46 ++ examples/flexjs/StyleExample/pom.xml | 59 +++ .../flexjs/StyleExample/src/MyInitialView.mxml | 427 +++++++++++++++++++ .../flexjs/StyleExample/src/StyleExample.mxml | 34 ++ .../flexjs/StyleExample/src/models/MyModel.as | 53 +++ 6 files changed, 621 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/09753237/examples/build.xml ---------------------------------------------------------------------- diff --git a/examples/build.xml b/examples/build.xml index 4b1576a..8cb1387 100644 --- a/examples/build.xml +++ b/examples/build.xml @@ -90,6 +90,7 @@ <ant dir="${basedir}/flexjs/MobileTrader"/> <ant dir="${basedir}/flexjs/ChartExample"/> <ant dir="${basedir}/flexjs/StorageExample"/> + <ant dir="${basedir}/flexjs/StyleExample"/> <ant dir="${basedir}/flexjs/TodoListSampleApp"/> <ant dir="${basedir}/flexjs/TreeExample"/> <ant dir="${basedir}/native/ButtonExample"/> @@ -123,6 +124,7 @@ <ant dir="${basedir}/flexjs/MobileMap" target="clean"/> <ant dir="${basedir}/flexjs/ChartExample" target="clean"/> <ant dir="${basedir}/flexjs/StorageExample" target="clean"/> + <ant dir="${basedir}/flexjs/StyleExample" target="clean"/> <ant dir="${basedir}/flexjs/TodoListSampleApp" target="clean"/> <ant dir="${basedir}/flexjs/TreeExample" target="clean"/> <ant dir="${basedir}/native/ButtonExample" target="clean"/> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/09753237/examples/flexjs/StyleExample/build.xml ---------------------------------------------------------------------- diff --git a/examples/flexjs/StyleExample/build.xml b/examples/flexjs/StyleExample/build.xml new file mode 100644 index 0000000..c9de1d0 --- /dev/null +++ b/examples/flexjs/StyleExample/build.xml @@ -0,0 +1,46 @@ +<?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="styleexample" default="main" basedir="."> + <property name="FLEXJS_HOME" location="../../.."/> + <property name="example" value="StyleExample" /> + + <property file="${FLEXJS_HOME}/env.properties"/> + <property environment="env"/> + <property file="${FLEXJS_HOME}/build.properties"/> + <property name="FLEX_HOME" value="${FLEXJS_HOME}"/> + <property name="opt1_arg" value="-js-output-optimization=skipAsCoercions" /> + + <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" /> + <delete dir="${basedir}/target" failonerror="false" /> + </target> + + + +</project> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/09753237/examples/flexjs/StyleExample/pom.xml ---------------------------------------------------------------------- diff --git a/examples/flexjs/StyleExample/pom.xml b/examples/flexjs/StyleExample/pom.xml new file mode 100644 index 0000000..96da293 --- /dev/null +++ b/examples/flexjs/StyleExample/pom.xml @@ -0,0 +1,59 @@ +<?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. + +--> +<project xmlns="http://maven.apache.org/POM/4.0.0"; + xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"; + xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd";> + <modelVersion>4.0.0</modelVersion> + + <parent> + <groupId>org.apache.flex.flexjs.examples</groupId> + <artifactId>examples-flexjs</artifactId> + <version>0.7.0-SNAPSHOT</version> + </parent> + + <artifactId>StyleExample</artifactId> + <version>1.0.0-SNAPSHOT</version> + <packaging>swf</packaging> + + <build> + <plugins> + <plugin> + <groupId>org.apache.flex.flexjs.compiler</groupId> + <artifactId>flexjs-maven-plugin</artifactId> + <version>0.7.0-SNAPSHOT</version> + <extensions>true</extensions> + <configuration> + <mainClass>StyleExample.mxml</mainClass> + <removeCirculars>true</removeCirculars> + </configuration> + </plugin> + </plugins> + </build> + + <dependencies> + <dependency> + <groupId>org.apache.flex.flexjs.framework</groupId> + <artifactId>Network</artifactId> + <version>0.7.0-SNAPSHOT</version> + <type>swc</type> + </dependency> + </dependencies> + +</project> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/09753237/examples/flexjs/StyleExample/src/MyInitialView.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/StyleExample/src/MyInitialView.mxml b/examples/flexjs/StyleExample/src/MyInitialView.mxml new file mode 100644 index 0000000..c67fe52 --- /dev/null +++ b/examples/flexjs/StyleExample/src/MyInitialView.mxml @@ -0,0 +1,427 @@ +<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:js="library://ns.apache.org/flexjs/basic" + xmlns:local="org.apache.flex.html.*" + initComplete="onComplete()"> + <fx:Script> + <![CDATA[ + import models.MyModel; + + private function onComplete() : void { + dropDown.dataProvider = MyModel(applicationModel).strings; + list.dataProvider = MyModel(applicationModel).strings; + dataGrid.dataProvider = MyModel(applicationModel).gridData; + } + + private function listChanged():void { + var index:Number = list.selectedIndex; + listOutput.text = "Selected: "+index; + } + ]]> + </fx:Script> + + <fx:Style> + @namespace js "library://ns.apache.org/flexjs/basic"; + @namespace internal "org.apache.flex.html.supportClasses.*"; + + /* + * TextButton + */ + + js|TextButton { + border-radius : 6px ; + font-weight : normal ; + line-height : 1.4 ; + color : #00A3EE ; + background-color : transparent ; + border : none ; + font-size : 15px ; + padding : 5px ; + } + + js|TextButton:hover { + background-color: #CFCFCF; + vertical-align: middle; + border: none; + border-radius: 6px; + } + + js|TextButton:active { + background-color: #77CEFF; + color: #FFFFFF; + } + + /* + * TextInput + */ + + js|TextInput { + padding: 5px; + border: solid 1px #666666; + border-radius: 6px; + color: #333333; + } + + js|TextInput:hover { + padding: 5px; + background-color: #DFDFDF; + } + + /* + * CheckBox + */ + + js|CheckBox { + position : relative ; + vertical-align : middle ; + color : #333333 ; + font-size : 14px ; + } + + internal|CheckBoxIcon { + margin-right: 8px; + } + + js|CheckBox:hover { + position : relative ; + vertical-align : middle ; + color : #666666 ; + font-size : 14px ; + } + + /* + * RadioButton + */ + + js|RadioButton { + position: relative; + vertical-align: middle; + color: #333333; + font-size: 14px; + } + + internal|RadioButtonIcon { + margin-right: 8px; + } + + js|RadioButton:hover { + position: relative; + vertical-align: middle; + color: #666666; + font-size: 14px; + } + + /* + * Label + */ + + js|Label { + font-size: 14pt; + font-weight: regular; + color: #333333; + position: relative; + } + + /* + * DateChooser + */ + + .dc { + box-shadow: 1px 4px 8px gray; + padding: 10px; + } + + js|DateChooser { + background-color: #FFFFFF; + padding: 8px; + border: solid 1px #EEEEEE; + border-radius: 8px; + overflow: hidden; + box-shadow: 1px 4px 8px gray; + } + +@media -flex-flash +{ + js|DateChooser { + iBorderBead: ClassReference('org.apache.flex.html.beads.SingleLineBorderBead'); + iBackgroundBead: ClassReference('org.apache.flex.html.beads.SolidBackgroundBead'); + border-style: solid; + border-color: #000000; + border-width: 1px; + background-color: #FFFFFF; + } +} + + + internal|DateChooserButton { + border-radius : 0px ; + background-color : #FFFFFF ; + color: #333333; + border : none ; + font-size : 10px ; + padding : 1px ; + } + + + internal|DateChooserButton:hover { + border-radius : 0px ; + background-color : #CFCFCF ; + color: #333333; + border : none ; + padding : 1px ; + } + + internal|DateChooserButton:active { + background-color: #77CEFF; + color: #FFFFFF; + } + + #todayDateChooserButton { + background-color: #FFFFFF; + color: #333333; + border: solid 1px #77CEFF; + } + + #todayDateChooserButton:hover { + background-color : #CFCFCF ; + color: #333333; + } + + #todayDateChooserButton:active { + background-color: #77CEFF; + color: #FFFFFF; + } + + + internal|DateHeaderButton { + border-radius : 0px ; + font-weight : bold ; + background-color : #FFFFFF ; + color: #333333; + border : none ; + padding : 1px ; + font-size : 12px ; + } + + + internal|DateHeaderButton:hover { + border-radius : 0px ; + background-color : #CFCFCF ; + color: #333333; + border : none ; + padding : 1px ; + } + + internal|DateHeaderButton:active { + background-color: #77CEFF; + color: #FFFFFF; + } + + /* + * NumberStepper and Spinner + */ + + internal|NumericStepperInput { + padding: 5px; + background-color: #FFFFFF; + color: #333333; + margin-right: 8px; + } + + internal|NumericStepperInput:hover { + background-color: #DFDFDF; + } + + internal|SpinnerButton { + background-color: transparent; + font-size: 7pt; + display: block; + padding: 0px; + } + + internal|SpinnerButton:hover { + background-color: #DFDFDF; + font-size: 7pt; + display: block; + padding: 0px; + } + + /* + * List + */ + + js|List { + background-color: #FFFFFF; + padding: 0px; + border: solid 1px #EEEEEE; + border-radius: 8px; + overflow: hidden; + box-shadow: 1px 4px 8px gray; + } + +@media -flex-flash +{ + js|List { + iBorderBead: ClassReference('org.apache.flex.html.beads.SingleLineBorderBead'); + iBackgroundBead: ClassReference('org.apache.flex.html.beads.SolidBackgroundBead'); + border-style: solid; + border-color: #000000; + border-width: 1px; + background-color: #FFFFFF; + padding: 8px; + } +} + .ListDataGroup { + padding: 8px; + } + + js|StringItemRenderer { + padding: 2px; + font-size: 10pt; + color: #333333; + } + + js|StringItemRenderer:hover { + background-color: #CFCFCF; + color: #333333; + } + + js|StringItemRenderer:active { + background-color: #77CEFF; + color: #FFFFFF; + } + + js|StringItemRenderer.selected { + background-color: #77CEFF; + color: #FFFFFF; + } + +@media -flex-flash +{ + js|StringItemRenderer:selected { + background-color: #77CEFF; + color: #FFFFFF; + } +} + + /* + * DataGrid + */ + + js|DataGrid { + background-color: white; + border: solid 1px #EEEEEE; + border-radius: 8px; + box-shadow : 1px 4px 8px gray ; + } + +@media -flex-flash +{ + js|DataGrid { + iBorderBead: ClassReference('org.apache.flex.html.beads.SingleLineBorderBead'); + iBackgroundBead: ClassReference('org.apache.flex.html.beads.SolidBackgroundBead'); + border-style: solid; + border-color: #000000; + border-width: 1px; + background-color: #FFCC00; + padding: 8px; + } +} + + .DataGridListArea { + background-color: transparent; + border: none; + overflow: hidden; + } + + js|DataGridButtonBarTextButton { + border-style: none; + background-color: transparent; + text-align: center; + font-size: 14pt; + color: #77CEFF; + } + + js|DataGridButtonBarTextButton:hover { + border-style: none; + background-color: transparent; + color: #77CEFF; + } + + .yellow { + background-color: #FFFF00; + vertical-align: middle; + } + + .centeredLabel { + line-height: 100px; + } + </fx:Style> + + <js:beads> + <js:ViewDataBinding /> + </js:beads> + + <js:VContainer x="50" y="50" width="400" height="400" className="foo"> + + <js:TextInput text="Input here" width="200" /> + <js:Spacer height="20" /> + + <js:HContainer> + <js:TextButton text="Default Button" width="120" height="40"/> + <js:Spacer width="10" /> + <js:DropDownList id="dropDown" width="100" /> + <js:Spacer width="10" /> + <js:NumericStepper id="nstep" /> + </js:HContainer> + <js:Spacer height="20" /> + + <js:CheckBox text="Check Me, please!" /> + <js:Spacer height="20" /> + <js:RadioButton text="Apples" groupName="fruits" /> + <js:RadioButton text="Oranges" groupName="fruits" /> + <js:RadioButton text="Grapes" groupName="fruits" /> + <js:RadioButton text="Bananas" groupName="fruits" /> + + <js:Spacer height="10" /> + <js:Label id="output" text="An Example of a Label" /> + + <js:Spacer height="20" /> + <js:DateChooser /> + + <js:Spacer height="20" /> + <js:HContainer width="400"> + <js:List id="list" width="100" height="100" change="listChanged()" /> + <js:Spacer width="10" /> + <js:Label id="listOutput" width="90" height="100" className="centeredLabel" /> + </js:HContainer> + + <js:Spacer height="20" /> + <js:DataGrid id="dataGrid" width="300" height="300"> + <js:columns> + <js:DataGridColumn dataField="month" label="Month" /> + <js:DataGridColumn dataField="days" label="# Days" /> + </js:columns> + </js:DataGrid> + + </js:VContainer> + +</js:View> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/09753237/examples/flexjs/StyleExample/src/StyleExample.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/StyleExample/src/StyleExample.mxml b/examples/flexjs/StyleExample/src/StyleExample.mxml new file mode 100644 index 0000000..f7c5584 --- /dev/null +++ b/examples/flexjs/StyleExample/src/StyleExample.mxml @@ -0,0 +1,34 @@ +<?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:js="library://ns.apache.org/flexjs/basic" + xmlns:models="models.*" + > + <js:valuesImpl> + <js:SimpleCSSValuesImpl /> + </js:valuesImpl> + <js:initialView> + <local:MyInitialView /> + </js:initialView> + <js:model> + <models:MyModel /> + </js:model> +</js:Application> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/09753237/examples/flexjs/StyleExample/src/models/MyModel.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/StyleExample/src/models/MyModel.as b/examples/flexjs/StyleExample/src/models/MyModel.as new file mode 100644 index 0000000..20ab016 --- /dev/null +++ b/examples/flexjs/StyleExample/src/models/MyModel.as @@ -0,0 +1,53 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.collections.ArrayList; + import org.apache.flex.collections.IArrayList; + import org.apache.flex.events.Event; + import org.apache.flex.events.EventDispatcher; + + public class MyModel extends EventDispatcher + { + public function MyModel() + { + } + + private var _strings:Array = ["AAPL", "ADBE", "FX", "GOOG", "MSFT", "NYSE", "YHOO"]; + [Bindable("__NoChangeEvent__")] + public function get strings():Array + { + return _strings; + } + + private var _gridData:ArrayList = new ArrayList([ + {month:"January", days:31}, {month:"February", days:28}, + {month:"March", days:31}, {month:"April", days:30}, + {month:"May", days:31}, {month:"June", days:30}, + {month:"July", days:31}, {month:"August", days:31}, + {month:"September", days:30}, {month:"October", days:31}, + {month:"November", days:30}, {month:"December", days:31}]); + [Bindable("__NoChangeEvent__")] + public function get gridData():IArrayList + { + return _gridData; + } + + } +}
