flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From p...@apache.org
Subject git commit: [flex-asjs] [refs/heads/develop] - Added an example of styling the basic components.
Date Thu, 30 Jun 2016 20:05:48 GMT
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 <pent@apache.org>
Authored: Thu Jun 30 16:05:46 2016 -0400
Committer: Peter Ent <pent@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;
+		}
+
+	}
+}


Mime
View raw message