You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by pe...@apache.org on 2016/06/30 20:05:48 UTC
git commit: [flex-asjs] [refs/heads/develop] - Added an example of
styling the basic components.
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 <pe...@apache.org>
Authored: Thu Jun 30 16:05:46 2016 -0400
Committer: Peter Ent <pe...@apache.org>
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;
+ }
+
+ }
+}