Latest version of Tour de Flex Mobile
diff --git a/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml b/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml
index 50b8553..b27afb2 100644
--- a/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml
+++ b/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml
@@ -136,8 +136,16 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
</fx:Declarations>
<s:SpriteVisualElement id="container" includeIn="DemoState"/>
@@ -145,6 +153,16 @@
<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The Accelerometer class dispatches events based on activity detected by the device's motion sensor. This data represents the device's location or movement along a 3-dimensional axis. When the device moves, the sensor detects this movement and returns acceleration data. The Accelerometer class provides methods to query whether or not accelerometer is supported, and also to set the rate at which acceleration events are dispatched.

 
Note: Use the Accelerometer.isSupported property to test the runtime environment for the ability to use this feature. While the Accelerometer class and its members are accessible to the Runtime Versions listed for each API entry, the current environment for the runtime determines the availability of this feature. For example, you can compile code using the Accelerometer class properties for Flash Player 10.1, but you need to use the Accelerometer.isSupported property to test for the availability of the Accelerometer feature in the current deployment environment for the Flash Player runtime. If Accelerometer.isSupported is true at runtime, then Accelerometer support currently exists."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/AIRViews/CameraRollView.mxml b/tourdeflexmobile/src/AIRViews/CameraRollView.mxml
new file mode 100644
index 0000000..c269c1c
--- /dev/null
+++ b/tourdeflexmobile/src/AIRViews/CameraRollView.mxml
@@ -0,0 +1,136 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="CameraRoll" >
+
+ <fx:Script>
+ <![CDATA[
+
+ private var mpLoader:Loader;
+
+ protected function launchcameraRoll(event:MouseEvent):void
+ {
+ var cameraRoll:CameraRoll = new CameraRoll();
+
+ if( CameraRoll.supportsBrowseForImage )
+ {
+ cameraRoll.addEventListener(MediaEvent.SELECT, oncameraRollComplete);
+ cameraRoll.addEventListener(Event.CANCEL, oncameraRollCanceled);
+ cameraRoll.addEventListener(ErrorEvent.ERROR, onCameraError);
+ cameraRoll.browseForImage();
+ }
+ else
+ {
+ trace( "CameraRoll interface is not supported.");
+ }
+ }
+
+ private function oncameraRollComplete(e:MediaEvent):void
+ {
+ var mediaPromise:MediaPromise = e.data;
+
+ this.mpLoader = new Loader();
+ this.mpLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onMediaPromiseLoaded);
+ this.mpLoader.addEventListener(IOErrorEvent.IO_ERROR, onMediaPromiseLoadError);
+ this.mpLoader.loadFilePromise(mediaPromise);
+ }
+
+ private function onMediaPromiseLoaded(e:Event):void
+ {
+ var mpLoaderInfo:LoaderInfo = e.target as LoaderInfo;
+
+ mpLoaderInfo.removeEventListener(Event.COMPLETE, onMediaPromiseLoaded);
+ mpLoaderInfo.loader.removeEventListener(IOErrorEvent.IO_ERROR, onMediaPromiseLoadError);
+
+ this.image.source = mpLoaderInfo.loader;
+ }
+
+ protected function oncameraRollCanceled(event:Event):void
+ {
+ trace("CameraRoll canceled");
+ }
+
+
+ protected function onCameraError(event:ErrorEvent):void
+ {
+ trace("Error");
+ }
+
+ protected function onMediaPromiseLoadError(error:IOErrorEvent):void
+ {
+ trace("Media Promise Error");
+ }
+
+ protected function buttonHandler(event:MouseEvent):void
+ {
+ if(currentState == "DemoState")
+ {
+ currentState = "InfoState";
+ }
+ else if(currentState == "InfoState")
+ {
+ currentState = "DemoState";
+ }
+ }
+ ]]>
+ </fx:Script>
+
+ <s:states>
+ <s:State name="DemoState"/>
+ <s:State name="InfoState"/>
+ </s:states>
+
+ <fx:Declarations>
+ <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')" source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')" source480dpi="assets/icons/480/dock.png"/>
+ </fx:Declarations>
+
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:Button label="Browse Image" click="launchcameraRoll(event)" horizontalCenter="0" verticalCenter="0" />
+ <s:Image id="image" scaleMode="letterbox" top="15" left="15" right="15" bottom="15" />
+
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" text="The CameraRoll class allows you to access image data in the system media library or camera roll.
+ 

AIR profile support: This feature is supported on mobile devices, but it is not supported on desktop operating systems or AIR for TV devices. See AIR Profile Support for more information regarding API support across multiple profiles.
+ 

The CameraRoll.addBitmapData() method adds an image to the device's dedicated media library. To check at run time whether your application supports the CameraRoll.addBitmapData() method, check the CameraRoll.supportsAddBitmapData property.
+ 

The CameraRoll.browseForImage() method opens an image-choosing dialog that allows a user to choose an image in the media library. When the user selects an image, the CameraRoll object dispatches a select event. Use the MediaEvent object dispatched for this event to access the chosen image. To check at run time whether your application supports the CameraRoll.browseForImage() method, check the CameraRoll.supportsBrowseForImage property."/>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
+ <s:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+
+</s:View>
diff --git a/tourdeflexmobile/src/AIRViews/CameraUIView.mxml b/tourdeflexmobile/src/AIRViews/CameraUIView.mxml
new file mode 100644
index 0000000..bee6c37
--- /dev/null
+++ b/tourdeflexmobile/src/AIRViews/CameraUIView.mxml
@@ -0,0 +1,134 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="CameraUI" >
+
+ <fx:Script>
+ <![CDATA[
+
+ private var cameraUI:CameraUI;
+ private var mpLoader:Loader;
+
+ protected function launchCameraUI(event:MouseEvent):void
+ {
+ if( CameraUI.isSupported )
+ {
+ cameraUI= new CameraUI();
+ cameraUI.addEventListener(MediaEvent.COMPLETE, onCameraUIComplete);
+ cameraUI.addEventListener(Event.CANCEL, onCameraUICanceled);
+ cameraUI.addEventListener(ErrorEvent.ERROR, onCameraError);
+ cameraUI.launch(MediaType.IMAGE);
+ }
+ else
+ {
+ trace( "Camera interface is not supported.");
+ }
+ }
+
+ private function onCameraUIComplete(e:MediaEvent):void
+ {
+ /*cameraUI.removeEventListener(MediaEvent.COMPLETE, onCameraUIComplete);
+ cameraUI.removeEventListener(Event.CANCEL, onCameraUICanceled);
+ cameraUI.removeEventListener(ErrorEvent.ERROR, onCameraError);*/
+
+ var mediaPromise:MediaPromise = e.data;
+
+ this.mpLoader = new Loader();
+ this.mpLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onMediaPromiseLoaded);
+ /*this.mpLoader.addEventListener(IOErrorEvent.IO_ERROR, onMediaPromiseLoadError);*/
+ this.mpLoader.loadFilePromise(mediaPromise);
+ }
+
+ private function onMediaPromiseLoaded(e:Event):void
+ {
+ var mpLoaderInfo:LoaderInfo = e.target as LoaderInfo;
+ mpLoaderInfo.removeEventListener(Event.COMPLETE, onMediaPromiseLoaded);
+ /* mpLoaderInfo.loader.removeEventListener(IOErrorEvent.IO_ERROR, onMediaPromiseLoadError);*/
+ this.image.source = mpLoaderInfo.loader;
+ }
+
+ protected function onCameraUICanceled(event:Event):void
+ {
+ trace("Camera canceled");
+ }
+
+
+ protected function onCameraError(event:ErrorEvent):void
+ {
+ trace();
+ }
+
+ protected function buttonHandler(event:MouseEvent):void
+ {
+ if(currentState == "DemoState")
+ {
+ currentState = "InfoState";
+ }
+ else if(currentState == "InfoState")
+ {
+ currentState = "DemoState";
+ }
+ }
+ ]]>
+ </fx:Script>
+
+ <s:states>
+ <s:State name="DemoState"/>
+ <s:State name="InfoState"/>
+ </s:states>
+
+ <fx:Declarations>
+ <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')" source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')" source480dpi="assets/icons/480/dock.png"/>
+ </fx:Declarations>
+
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:Button label="Launch Camera UI" click="launchCameraUI(event)" horizontalCenter="0" verticalCenter="0" />
+ <s:Image id="image" scaleMode="letterbox" top="15" left="15" right="15" bottom="15" />
+
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" text="The CameraUI class allows you to capture a still image or video using the default camera application on a device.
+ 
 
The launch() method requests that the device open the default camera application. The captured image or video is available in the MediaEvent object dispatched for the complete event. Since the default camera application can save the image or video in a variety of formats, there is no guarantee that returned media object can be loaded and displayed by the AIR runtime.
+ 
 
On some platforms, the media object returned by the camera is accessible as a file-based media promise. On others, the media promise is not file-based and the file and relativePath properties of the MediaPromise object are null. Do not use these properties in code that is used on more than one platform.
+ 
 
On Android, the default camera application does not open if the external storage card is not available (such as when the user has mounted the card as a USB mass storage device). In addition, the AIR application that launches the camera loses focus. If the device runs low on resources, the AIR application can be terminated by the operating system before the media capture is complete.
+ 
 
On some platforms, the media object is automatically stored in the device media library. On platforms on which images and video are not automatically stored by the default camera application, you can use the CameraRoll addBitmapData() function to store the media object."/>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
+ <s:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+
+</s:View>
diff --git a/tourdeflexmobile/src/AIRViews/CameraView.mxml b/tourdeflexmobile/src/AIRViews/CameraView.mxml
new file mode 100644
index 0000000..acc71c1
--- /dev/null
+++ b/tourdeflexmobile/src/AIRViews/CameraView.mxml
@@ -0,0 +1,159 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ title="Camera"
+ viewActivate="init(event)"
+ viewDeactivate="deactivate(event)"
+ >
+ <fx:Script>
+ <![CDATA[
+ import mx.core.UIComponent;
+
+ import spark.events.IndexChangeEvent;
+ import spark.events.ViewNavigatorEvent;
+
+ private var camera:Camera;
+ private var videoHolder:UIComponent;
+ private var video:Video;
+
+ private function init(event:ViewNavigatorEvent):void
+ {
+ stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, handleOrientationChangeComplete);
+ stage.setOrientation(StageOrientation.ROTATED_RIGHT);
+ }
+
+ private function deactivate(event:ViewNavigatorEvent):void
+ {
+ stage.setOrientation(StageOrientation.DEFAULT);
+ }
+
+ private function handleOrientationChangeComplete(event:StageOrientationEvent):void
+ {
+ buttonBar.enabled = Camera.isSupported;
+ if(Camera.isSupported)
+ {
+ videoHolder = new UIComponent();
+ videoHolder.x = 0;
+ videoHolder.y = 0;
+ videoHolder.width = height;
+ videoHolder.height = width;
+ video = new Video(height,width)
+ videoHolder.addChildAt(video,0);
+ videoDisplay.addElementAt(videoHolder,0);
+ getCamera();
+ }
+ }
+
+ protected function onButtonBar_ChangeHandler(event:IndexChangeEvent):void
+ {
+ getCamera();
+ }
+
+ private function getCamera():void
+ {
+ var names:Array = Camera.names;
+ var i:int = -1;
+ var n:int = names.length;
+
+ while(++i<n)
+ {
+ var cam:Camera = Camera.getCamera( names[i] as String);
+ if(cam && cam.position == buttonBar.selectedItem.label)
+ {
+ attachCamera(cam);
+ return;
+ }
+ }
+ attachCamera(Camera.getCamera());
+ }
+
+ private function attachCamera(camera:Camera):void
+ {
+ camera.setMode(height,width, 30,true);
+ camera.setMotionLevel(0);
+ video.attachCamera(camera);
+ }
+
+ protected function buttonHandler(event:MouseEvent):void
+ {
+ if(currentState == "DemoState")
+ {
+ currentState = "InfoState";
+ }
+ else if(currentState == "InfoState")
+ {
+ currentState = "DemoState";
+ }
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:states>
+ <s:State name="DemoState"/>
+ <s:State name="InfoState"/>
+ </s:states>
+
+ <fx:Declarations>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
+ </fx:Declarations>
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center" />
+ </s:layout>
+
+ <s:Group width="100%" height="100%" id="videoDisplay" includeIn="DemoState"/>
+
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="Use the Camera class to capture video from the client system or device camera. Use the Video class to monitor the video locally. Use the NetConnection and NetStream classes to transmit the video to Flash Media Server. Flash Media Server can send the video stream to other servers and broadcast it to other clients running Flash Player or AIR.
+ 
 
A Camera instance captures video in landscape aspect ratio. On devices that can change the screen orientation, such as mobile phones, a Video object attached to the camera will only show upright video in a landscape-aspect orientation. Thus, mobile apps should use a landscape orientation when displaying video and should not auto-rotate.
+
+ 
 
On iOS, the video from the front camera is mirrored. On Android, it is not.
+
+ 
 
On mobile devices with an autofocus camera, autofocus is enabled automatically. If the camera does not support continuous autofocus, and many mobile device cameras do not, then the camera is focused when the Camera object is attached to a video stream and whenever the setMode() method is called. On desktop computers, autofocus behavior is dependent on the camera driver and settings.
+
+ 
 
In an AIR application on Android and iOS, the camera does not capture video while an AIR app is not the active, foreground application. In addition, streaming connections can be lost when the application is in the background. On iOS, the camera video cannot be displayed when an application uses the GPU rendering mode. The camera video can still be streamed to a server."/>
+
+ <s:actionLayout>
+ <s:HorizontalLayout gap="10" />
+ </s:actionLayout>
+ <s:actionContent>
+ <s:ButtonBar id="buttonBar" requireSelection="true"
+ change="onButtonBar_ChangeHandler(event)">
+ <s:dataProvider>
+ <s:ArrayList>
+ <fx:Object label="{CameraPosition.FRONT}"/>
+ <fx:Object label="{CameraPosition.BACK}"/>
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:ButtonBar>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+</s:View>
diff --git a/tourdeflexmobile/src/AIRViews/GeolocationView.mxml b/tourdeflexmobile/src/AIRViews/GeolocationView.mxml
new file mode 100644
index 0000000..b513326
--- /dev/null
+++ b/tourdeflexmobile/src/AIRViews/GeolocationView.mxml
@@ -0,0 +1,136 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="Geolocation"
+ viewDeactivate="endGeolocation(event)"
+ viewActivate="init(event)">
+
+ <fx:Script>
+ <![CDATA[
+ import flash.sensors.Geolocation;
+ import spark.events.ViewNavigatorEvent;
+
+ private var geo:Geolocation;
+
+ protected function init(event:ViewNavigatorEvent):void
+ {
+ if (Geolocation.isSupported)
+ {
+ geoToggle.enabled = true;
+ geo = new Geolocation();
+ geo.setRequestedUpdateInterval(8000);
+ }
+ else
+ {
+ label.text = "Geolocation not supported";
+ }
+ }
+
+ protected function geoLocate():void
+ {
+ if(geoToggle.selected == true)
+ {
+ geo.addEventListener(GeolocationEvent.UPDATE, geoUpdateHandler);
+ }
+ if(geoToggle.selected == false)
+ {
+ geo.removeEventListener(GeolocationEvent.UPDATE, geoUpdateHandler);
+ }
+ }
+
+
+ public function geoUpdateHandler(event:GeolocationEvent):void
+ {
+ latitude.text = "latitude : " + event.latitude.toString();
+ longitude.text = "longitude : " + event.longitude.toString();
+ heading.text = "heading : " + event.heading.toString();
+ speed.text = "speed : " + event.speed.toString();
+ }
+
+ protected function buttonHandler(event:MouseEvent):void
+ {
+ if(currentState == "DemoState")
+ {
+ currentState = "InfoState";
+ }
+ else if(currentState == "InfoState")
+ {
+ currentState = "DemoState";
+ }
+ }
+
+ protected function endGeolocation(event:ViewNavigatorEvent):void
+ {
+ if(geoToggle.selected == true)
+ {
+ geo.removeEventListener(GeolocationEvent.UPDATE, geoUpdateHandler);
+ }
+ }
+
+ ]]>
+ </fx:Script>
+ <s:states>
+ <s:State name="DemoState"/>
+ <s:State name="InfoState"/>
+ </s:states>
+ <fx:Declarations>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="@Embed('assets/icons/480/about.png')"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="@Embed('assets/icons/480/dock.png')"/>
+ </fx:Declarations>
+
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:ToggleSwitch includeIn="DemoState" horizontalCenter="0" y="20" id="geoToggle" enabled="false" change="geoLocate()"/>
+ <s:VGroup left="20" right="20" top="55" bottom="10" includeIn="DemoState">
+ <s:Label id="label" left="10"/>
+ <s:Label id="latitude" left="10"/>
+ <s:Label id="longitude" left="10"/>
+ <s:Label id="heading" left="10"/>
+ <s:Label id="speed" left="10"/>
+ </s:VGroup>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" text="The Geolocation class dispatches events in response to the device's location sensor.
+ 
 
If a device supports geolocation, you can use this class to obtain the current geographical location of the device. The geographical location is displayed on the device in the form of latitudinal and longitudinal coordinates (in WGS-84 standard format). When the location of the device changes, you can receive updates about the changes. If the device supports this feature, you will be able to obtain information about the altitude, accuracy, heading, speed, and timestamp of the latest change in the location.
+ 
 
AIR profile support: This feature is supported only on mobile devices. It is not supported on desktop or AIR for TV devices."/>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
+ <s:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+</s:View>
diff --git a/tourdeflexmobile/src/AIRViews/NativeAppView.mxml b/tourdeflexmobile/src/AIRViews/NativeAppView.mxml
new file mode 100644
index 0000000..861b65c
--- /dev/null
+++ b/tourdeflexmobile/src/AIRViews/NativeAppView.mxml
@@ -0,0 +1,91 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="Native App">
+
+ <fx:Script>
+ <![CDATA[
+
+
+ protected function buttonHandler(event:MouseEvent):void
+ {
+ if(currentState == "DemoState")
+ {
+ currentState = "InfoState";
+ }
+ else if(currentState == "InfoState")
+ {
+ currentState = "DemoState";
+ }
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:states>
+ <s:State name="DemoState"/>
+ <s:State name="InfoState"/>
+ </s:states>
+
+ <fx:Declarations>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
+ <s:ArrayCollection id="itemsCollection"/>
+ </fx:Declarations>
+
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:VGroup width="100%" height="100%" includeIn="DemoState" horizontalAlign="center" verticalAlign="middle">
+ <s:Button label="Email" click="navigateToURL(new URLRequest ('mailto:email@email.com'))"/>
+ <s:Button label="Browser" click="navigateToURL(new URLRequest ('http://flex.apache.org/'))"/>
+ <s:Button label="Maps" click="navigateToURL(new URLRequest ('http://maps.google.com/'))"/>
+ <s:Button label="SMS" click="navigateToURL(new URLRequest ('sms:1234567890'))"/>
+ <s:Button label="Phone" click="navigateToURL(new URLRequest ('tel:1234567890'))"/>
+ </s:VGroup>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="In AIR, on mobile platforms, the sms: and tel: URI schemes are supported. On Android, vipaccess:, connectpro:, and market: URI schemes are supported. The URL syntax is subject to the platform conventions. For example, on Android, the URI scheme must be lower case. When you navigate to a URL using one of these schemes, the runtime opens the URL in the default application for handling the scheme. Thus, navigating to tel:+5555555555 opens the phone dialer with the specified number already entered. A separate application or utility, such as a phone dialer must be available to process the URL. "/>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
+ <s:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+</s:View>
diff --git a/tourdeflexmobile/src/AIRViews/SQLiteView.mxml b/tourdeflexmobile/src/AIRViews/SQLiteView.mxml
index c2db60f..f8d5484 100644
--- a/tourdeflexmobile/src/AIRViews/SQLiteView.mxml
+++ b/tourdeflexmobile/src/AIRViews/SQLiteView.mxml
@@ -116,8 +116,16 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
<s:ArrayCollection id="itemsCollection"/>
</fx:Declarations>
@@ -150,4 +158,14 @@
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
</s:View>
diff --git a/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml
index 0caf89d..72306d2 100644
--- a/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml
@@ -38,20 +38,37 @@
]]>
</fx:Script>
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
- <s:actionContent>
- <s:Button click="buttonHandler(event)">
- <s:icon>
- <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
- </s:icon>
- </s:Button>
- </s:actionContent>
-
- <s:Scroller id="scroller" width="100%" height="100%">
+ <s:Scroller id="scroller" left="20" right="20" top="20" bottom="20">
<s:Group id="group">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" useVirtualLayout="true" />
</s:layout>
</s:Group>
</s:Scroller>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
+ <s:actionContent>
+ <s:Button click="buttonHandler(event)" label="Add Image" color="#FFFFFF">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+ </s:icon>
+ </s:Button>
+ </s:actionContent>
+
+
</s:View>
diff --git a/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml
index 059817f..dae4144 100644
--- a/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml
@@ -41,20 +41,36 @@
]]>
</fx:Script>
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
- <s:actionContent>
- <s:Button click="buttonHandler(event)">
- <s:icon>
- <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
- </s:icon>
- </s:Button>
- </s:actionContent>
-
- <s:Scroller id="scroller" width="100%" height="100%">
+ <s:Scroller id="scroller" left="20" right="20" top="20" bottom="20">
<s:Group id="group">
<s:layout>
<s:TileLayout orientation="rows" columnWidth="100" rowHeight="100" useVirtualLayout="true" />
</s:layout>
</s:Group>
</s:Scroller>
+
+ <s:actionContent>
+ <s:Button click="buttonHandler(event)" label="Add Image" color="#FFFFFF">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+ </s:icon>
+ </s:Button>
+ </s:actionContent>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
</s:View>
diff --git a/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml
index 2d2d81b..a133a64 100644
--- a/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml
@@ -38,20 +38,37 @@
]]>
</fx:Script>
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
- <s:actionContent>
- <s:Button click="buttonHandler(event)">
- <s:icon>
- <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
- </s:icon>
- </s:Button>
- </s:actionContent>
-
- <s:Scroller id="scroller" width="100%" height="100%">
+ <s:Scroller id="scroller" left="20" right="20" top="20" bottom="20">
<s:Group id="group">
<s:layout>
<s:VerticalLayout horizontalAlign="center" useVirtualLayout="true" />
</s:layout>
</s:Group>
</s:Scroller>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
+ <s:actionContent>
+ <s:Button click="buttonHandler(event)" label="Add Image" color="#FFFFFF">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" />
+ </s:icon>
+ </s:Button>
+ </s:actionContent>
+
+
</s:View>
diff --git a/tourdeflexmobile/src/TourDeFlexMobile-app.xml b/tourdeflexmobile/src/TourDeFlexMobile-app.xml
index e9667b6..8606bca 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile-app.xml
+++ b/tourdeflexmobile/src/TourDeFlexMobile-app.xml
@@ -17,7 +17,7 @@
limitations under the License.
-->
-<application xmlns="http://ns.adobe.com/air/application/3.9">
+<application xmlns="http://ns.adobe.com/air/application/19.0">
<!-- Adobe AIR Application Descriptor File Template.
@@ -33,19 +33,19 @@
<!-- A universally unique application identifier. Must be unique across all AIR applications.
Using a reverse DNS-style name as the id is recommended. (Eg. com.example.ExampleApplication.) Required. -->
- <id>TourDeFlexMobile</id>
+ <id>org.apache.flexmobile</id>
<!-- Used as the filename for the application. Required. -->
- <filename>TourDeFlexMobile</filename>
+ <filename>TourDeFlex</filename>
<!-- The name that is displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
- <name>TourDeFlexMobile</name>
+ <name>TourDeFlex</name>
<!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade.
Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
- <versionNumber>0.0.0</versionNumber>
+ <versionNumber>0.4.0</versionNumber>
<!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
<!-- <versionLabel></versionLabel> -->
@@ -154,25 +154,13 @@
<!-- The icon the system uses for the application. For at least one resolution,
specify the path to a PNG file included in the AIR package. Optional. -->
- <!-- <icon>
- <image16x16></image16x16>
- <image29x29></image29x29>
- <image32x32></image32x32>
- <image36x36></image36x36>
- <image48x48></image48x48>
- <image50x50></image50x50>
- <image57x57></image57x57>
- <image58x58></image58x58>
- <image72x72></image72x72>
- <image96x96></image96x96>
- <image100x100></image100x100>
- <image114x114></image114x114>
- <image128x128></image128x128>
- <image144x144></image144x144>
- <image512x512></image512x512>
- <image732x412></image732x412>
- <image1024x1024></image1024x1024>
- </icon> -->
+ <icon>
+ <image36x36>assets/appicons/36.png</image36x36>
+ <image48x48>assets/appicons/48.png</image48x48>
+ <image72x72>assets/appicons/72.png</image72x72>
+ <image96x96>assets/appicons/96.png</image96x96>
+ <image144x144>assets/appicons/144.png</image144x144>
+ </icon>
<!-- Whether the application handles the update when a user double-clicks an update version
of the AIR file (true), or the default AIR application installer handles the update (false).
@@ -285,12 +273,12 @@
<uses-permission android:name="android.permission.INTERNET"/>
<!--<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>-->
<!--<uses-permission android:name="android.permission.READ_PHONE_STATE"/>-->
- <!--<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>-->
+ <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<!--The DISABLE_KEYGUARD and WAKE_LOCK permissions should be toggled together
in order to access AIR's SystemIdleMode APIs-->
<!--<uses-permission android:name="android.permission.DISABLE_KEYGUARD"/>-->
- <!--<uses-permission android:name="android.permission.WAKE_LOCK"/>-->
- <!--<uses-permission android:name="android.permission.CAMERA"/>-->
+ <uses-permission android:name="android.permission.WAKE_LOCK"/>
+ <uses-permission android:name="android.permission.CAMERA"/>
<!--<uses-permission android:name="android.permission.RECORD_AUDIO"/>-->
<!--The ACCESS_NETWORK_STATE and ACCESS_WIFI_STATE permissions should be toggled
together in order to use AIR's NetworkInfo APIs-->
diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml
index 6a9dc94..db41b7e 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile.mxml
+++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml
@@ -19,7 +19,8 @@
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" applicationComplete="init(event)">
+ xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" applicationComplete="init(event)" frameRate="60"
+ splashScreenImage="@Embed('assets/images/splash.png')" splashScreenScaleMode="zoom">
<fx:Style source="styles.css"/>
@@ -29,38 +30,15 @@
import spark.events.IndexChangeEvent;
- import AIRViews.AccelerometerView;
- import AIRViews.SQLiteView;
-
- import LayoutViews.AccordionLayoutView;
- import LayoutViews.CarouselLayoutView;
- import LayoutViews.CoverFlowLayoutView;
- import LayoutViews.HorizontalLayoutView;
- import LayoutViews.RolodexLayoutView;
- import LayoutViews.TileLayoutView;
- import LayoutViews.TimeMachineLayoutView;
- import LayoutViews.VerticalLayoutView;
-
- import UIViews.ButtonBarView;
- import UIViews.CalloutButtonView;
- import UIViews.CheckboxView;
- import UIViews.DateSpinnerView;
- import UIViews.ListView;
- import UIViews.MobileGridView;
- import UIViews.RadiobuttonView;
- import UIViews.SpinnerListView;
- import UIViews.TextInputView;
- import UIViews.ToggleSwitchView;
-
- import views.HttpServiceView;
-
+ import views.ComponentsView;
+ import views.HomeView;
+ import views.NewsView;
+ import views.ShowcaseView;
+ import views.VideosView;
+
private var isOpen:Boolean;
- [Bindable]
- private var currentStageWidth:Number;
-
- [Bindable]
- private var currentStageHeight:Number;
+ [Bindable] private var currentStageWidth:Number;
protected function init(event:FlexEvent):void
{
@@ -68,28 +46,16 @@
currentStageWidth = stage.stageWidth*-1;
lateralMenu.x = currentStageWidth;
- currentStageHeight = navigator.height-45;
- lateralMenu.height = currentStageHeight;
- lateralMenu.x = currentStageWidth;
isOpen = false;
}
- private function orientationHandler(event:Event):void{
+ private function orientationHandler(event:Event):void
+ {
currentStageWidth = stage.stageWidth*-1;
-
- if(isOpen == false){
- lateralMenu.x = currentStageWidth;
- }
-
- currentStageHeight = navigator.height-45;
- lateralMenu.height = currentStageHeight;
-
- trace(lateralMenu.height);
}
protected function menuHandler(event:MouseEvent):void
- {
-
+ {
if(isOpen == true){
moveOut.play();
isOpen = false;
@@ -117,52 +83,32 @@
</fx:Script>
<fx:Declarations>
- <s:Move id="moveIn" duration="200" target="{lateralMenu}" xTo="0"/>
- <s:Move id="moveOut" duration="200" target="{lateralMenu}" xTo="{currentStageWidth}"/>
+ <s:Move id="moveIn" duration="300" target="{lateralMenu}" xTo="0"/>
+ <s:Move id="moveOut" duration="300" target="{lateralMenu}" xTo="{currentStageWidth}"/>
</fx:Declarations>
- <s:ViewNavigator id="navigator" firstView="views.BlogView" width="100%" height="100%">
+ <s:ViewNavigator id="navigator" firstView="views.NewsView" width="100%" height="100%">
<s:navigationContent>
- <s:Button icon="@Embed('assets/images/logo.png')" height="35" width="77" label="Menu" click="menuHandler(event)"/>
+ <s:Button icon="@Embed('assets/images/logo.png')" height="36" width="110" label="Menu" click="menuHandler(event)"/>
</s:navigationContent>
</s:ViewNavigator>
- <s:Group id="lateralMenu" width="100%" y="45">
- <s:Graphic width="100%" height="100%" click="menuBackgroundHandler(event)">
- <s:BitmapImage width="100%" height="100%" scaleMode="zoom" source="@Embed('assets/images/bg.png')"/>
+ <s:Group id="lateralMenu" width="100%" top="45" bottom="0">
+ <s:Graphic left="200" right="0" height="100%" click="menuBackgroundHandler(event)">
+ <s:BitmapImage width="100%" height="100%" scaleMode="zoom" alpha="0" source="@Embed('assets/images/bg.png')"/>
</s:Graphic>
- <s:List id="componentsList" itemRenderer="renderers.MenuRenderer" width="200" height="100%" change="changeHandler(event)" contentBackgroundColor="#000000">
+ <s:List id="componentsList" selectedIndex="0" itemRenderer="renderers.MenuRenderer" width="200" height="100%" change="changeHandler(event)">
<s:ArrayList>
- <fx:Object label="UI Components" type="separator"/>
- <fx:Object label="ButtonBar" type="view" view="{ButtonBarView}"/>
- <fx:Object label="CalloutButton" type="view" view="{CalloutButtonView}"/>
- <fx:Object label="CheckBox" type="view" view="{CheckboxView}"/>
- <fx:Object label="DateSpinner" type="view" view="{DateSpinnerView}"/>
- <fx:Object label="List" type="view" view="{ListView}"/>
- <fx:Object label="MobileGrid" type="view" view="{MobileGridView}"/>
- <fx:Object label="RadioButton" type="view" view="{RadiobuttonView}"/>
- <fx:Object label="SpinnerList" type="view" view="{SpinnerListView}"/>
- <fx:Object label="TextInput" type="view" view="{TextInputView}"/>
- <fx:Object label="ToggleSwitch" type="view" view="{ToggleSwitchView}"/>
-
- <fx:Object label="Layouts" type="separator"/>
- <fx:Object label="HorizontalLayout" type="view" view="{HorizontalLayoutView}"/>
- <fx:Object label="VerticalLayout" type="view" view="{VerticalLayoutView}"/>
- <fx:Object label="TileLayout" type="view" view="{TileLayoutView}"/>
- <fx:Object label="CoverFlowLayout" type="view" view="{CoverFlowLayoutView}"/>
- <fx:Object label="TimeMachineLayout" type="view" view="{TimeMachineLayoutView}"/>
- <fx:Object label="RolodexLayout" type="view" view="{RolodexLayoutView}"/>
- <fx:Object label="CarouselLayout" type="view" view="{CarouselLayoutView}"/>
- <fx:Object label="AccordionLayout" type="view" view="{AccordionLayoutView}"/>
- <!-- <fx:Object label="StackLayout" type="view" view="{StackLayoutView}"/> -->
-
- <fx:Object label="AIR APIs" type="separator"/>
- <fx:Object label="SQLite" type="view" view="{SQLiteView}"/>
- <fx:Object label="Accelerometer" type="view" view="{AccelerometerView}"/>
-
- <fx:Object label="Data Access" type="separator"/>
- <fx:Object label="HTTPService" type="view" view="{HttpServiceView}"/>
+ <fx:Object label="NEWS" icon="assets/icons/rss.png" type="view" view="{NewsView}"/>
+ <fx:Object label="USERS@FLEX" icon="assets/icons/people.png" type="view" view="{HomeView}"/>
+ <fx:Object label="DEV@FLEX" icon="assets/icons/envelope-closed.png" type="view" view="{HomeView}"/>
+ <fx:Object label="COMPONENTS" icon="assets/icons/puzzle-piece.png" type="view" view="{ComponentsView}"/>
+ <fx:Object label="WIKI" icon="assets/icons/book.png" type="view" view="{HomeView}"/>
+ <fx:Object label="SHOWCASE" icon="assets/icons/briefcase.png" type="view" view="{ShowcaseView}"/>
+ <fx:Object label="VIDEOS" icon="assets/icons/video.png" type="view" view="{VideosView}"/>
+ <fx:Object label="TOOLS" icon="assets/icons/wrench.png" type="view" view="{HomeView}"/>
+ <fx:Object label="BUG TRACKER" icon="assets/icons/bug.png" type="view" view="{HomeView}"/>
</s:ArrayList>
</s:List>
</s:Group>
diff --git a/tourdeflexmobile/src/UIViews/ActionBarView.mxml b/tourdeflexmobile/src/UIViews/ActionBarView.mxml
new file mode 100644
index 0000000..691398b
--- /dev/null
+++ b/tourdeflexmobile/src/UIViews/ActionBarView.mxml
@@ -0,0 +1,97 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="ActionBar">
+ <fx:Script>
+ <![CDATA[
+
+ protected function actionBarButtonHandler(event:MouseEvent):void
+ {
+ var labelStr:String = event.target.label;
+ label.text = labelStr;
+ }
+
+ protected function buttonHandler(event:MouseEvent):void
+ {
+ if(currentState == "DemoState")
+ {
+ currentState = "InfoState";
+ }
+ else if(currentState == "InfoState")
+ {
+ currentState = "DemoState";
+ }
+ }
+
+ ]]>
+ </fx:Script>
+ <s:states>
+ <s:State name="DemoState"/>
+ <s:State name="InfoState"/>
+ </s:states>
+ <fx:Declarations>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="@Embed('assets/icons/480/about.png')"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="@Embed('assets/icons/480/dock.png')"/>
+ </fx:Declarations>
+ <s:VGroup width="100%" height="100%" includeIn="DemoState" horizontalAlign="center" verticalAlign="middle">
+ <s:ActionBar id="actionBar" width="100%" >
+ <s:navigationContent>
+ <s:Button label="Back" click="actionBarButtonHandler(event)" />
+ <s:Button label="Next" click="actionBarButtonHandler(event)" />
+ </s:navigationContent>
+ <s:actionContent>
+ <s:Button label="Menu" click="actionBarButtonHandler(event)" />
+ <s:Button label="Save" click="actionBarButtonHandler(event)" />
+ </s:actionContent>
+ </s:ActionBar>
+ <s:Spacer height="10"/>
+ <s:Label id="label" horizontalCenter="0" textAlign="center"/>
+ </s:VGroup>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" text="The ActionBar class defines a component that includes title, navigation, and action content groups. The ActionBar control provides a standard area for navigation and action controls. It lets you define global controls that can be used from anywhere in the application, or controls specific to a view.
+ The ActionBar control defines three distinct areas:
+ 
 
Navigation area
+ 
 
Contains components that let the user navigate the section. For example, you can define a home button in the navigation area. Use the navigationContent property to define the components that appear in the navigation area. Use the navigationLayout property to define the layout of the navigation area.
+ 
 
Title area
+ 
 
Contains either a String containing title text, or components. If you specify components, you cannot specify a title String. Use the title property to specify the String to appear in the title area. Use the titleContent property to define the components that appear in the title area. Use the titleLayout property to define the layout of the title area. If you specify a value for the titleContent property, the ActionBar skin ignores the title property.
+ 
 
Action area
+ 
 
Contains components that define actions the user can take in a view. For example, you might define a search or refresh button as part of the action area. Use the actionContent property to define the components that appear in the action area. Use the actionLayout property to define the layout of the action area."/>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
+ <s:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+</s:View>
diff --git a/tourdeflexmobile/src/UIViews/BusyIndicatorView.mxml b/tourdeflexmobile/src/UIViews/BusyIndicatorView.mxml
new file mode 100644
index 0000000..e815fa7
--- /dev/null
+++ b/tourdeflexmobile/src/UIViews/BusyIndicatorView.mxml
@@ -0,0 +1,87 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="BusyIndicator" >
+ <fx:Script>
+ <![CDATA[
+
+ protected function buttonHandler(event:MouseEvent):void
+ {
+ if(currentState == "DemoState")
+ {
+ currentState = "InfoState";
+ }
+ else if(currentState == "InfoState")
+ {
+ currentState = "DemoState";
+ }
+ }
+
+ ]]>
+ </fx:Script>
+ <s:states>
+ <s:State name="DemoState"/>
+ <s:State name="InfoState"/>
+ </s:states>
+ <fx:Declarations>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="@Embed('assets/icons/480/about.png')"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="@Embed('assets/icons/480/dock.png')"/>
+ </fx:Declarations>
+
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:VGroup width="100%" height="100%" includeIn="DemoState" horizontalAlign="center" verticalAlign="middle">
+ <s:BusyIndicator id="busyIndicator" />
+ <s:Spacer height="10"/>
+ <s:Label id="label" horizontalCenter="0" textAlign="center"/>
+ </s:VGroup>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="The BusyIndicator defines a component to display when a long-running operation is in progress.
+ 
 
For Web, Desktop and iOS, a spinner with twelve spoke is drawn. The color of the spokes is controlled by the value of the symbolColor style.
+ 
 
For Android, a circle is drawn that rotates.
+ 
 
The transparency of this component can be modified using the alpha property, but the alpha value of each spoke cannot be modified.
+ "/>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
+ <s:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+</s:View>
diff --git a/tourdeflexmobile/src/UIViews/ButtonBarView.mxml b/tourdeflexmobile/src/UIViews/ButtonBarView.mxml
index 54814f2..08dcdad 100644
--- a/tourdeflexmobile/src/UIViews/ButtonBarView.mxml
+++ b/tourdeflexmobile/src/UIViews/ButtonBarView.mxml
@@ -48,11 +48,25 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
</fx:Declarations>
- <s:ButtonBar id="buttonbar" includeIn="DemoState" change="buttonbarHandler(event)" left="5" right="5" top="5">
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:ButtonBar id="buttonbar" includeIn="DemoState" change="buttonbarHandler(event)" left="10" right="10" top="10">
<s:ArrayList>
<fx:Object label="Button 1"/>
<fx:Object label="Button 2"/>
@@ -73,6 +87,16 @@

 
Note: The Spark list-based controls (the Spark ListBase class and its subclasses such as ButtonBar, ComboBox, DropDownList, List, and TabBar) do not support the BasicLayout class as the value of the layout property. Do not use BasicLayout with the Spark list-based controls."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml b/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml
index eec4a8c..7c0d899 100644
--- a/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml
+++ b/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml
@@ -40,11 +40,25 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
</fx:Declarations>
- <s:CalloutButton label="CalloutButton" horizontalCenter="0" y="10">
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:CalloutButton label="CalloutButton" horizontalCenter="0" verticalCenter="0">
<s:List>
<s:ArrayList>
<fx:Object label="Item 1"/>
@@ -65,6 +79,16 @@

 
Clicking the button closes the callout

 
Clicking outside of the callout closes the callout."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/UIViews/CheckboxView.mxml b/tourdeflexmobile/src/UIViews/CheckboxView.mxml
index ff9dbc6..7b0eeb3 100644
--- a/tourdeflexmobile/src/UIViews/CheckboxView.mxml
+++ b/tourdeflexmobile/src/UIViews/CheckboxView.mxml
@@ -45,11 +45,25 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
</fx:Declarations>
- <s:VGroup includeIn="DemoState" horizontalCenter="0" y="20">
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:VGroup includeIn="DemoState" horizontalCenter="0" verticalCenter="0">
<s:CheckBox change="checkboxHandler(event)" label="CheckBox 1" />
<s:CheckBox change="checkboxHandler(event)" label="CheckBox 2" />
<s:CheckBox change="checkboxHandler(event)" label="CheckBox 3" />
@@ -62,6 +76,16 @@

 
To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml b/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml
index 0cb738f..55398c0 100644
--- a/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml
+++ b/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml
@@ -40,10 +40,24 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
</fx:Declarations>
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
<s:DateSpinner includeIn="DemoState" displayMode="dateAndTime" verticalCenter="0" horizontalCenter="0"/>
<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The DateSpinner control presents an interface for picking a particular date or time.
@@ -53,6 +67,16 @@


The DateSpinnerSkin only defines some sizing properties. To change the appearance of the DateSpinner control, you typically reskin the underlying SpinnerListSkin or SpinnerListContainerSkin."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/UIViews/HscrubberView.mxml b/tourdeflexmobile/src/UIViews/HscrubberView.mxml
new file mode 100644
index 0000000..a3cf0c0
--- /dev/null
+++ b/tourdeflexmobile/src/UIViews/HscrubberView.mxml
@@ -0,0 +1,89 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="HSlider">
+ <fx:Script>
+ <![CDATA[
+
+ protected function buttonHandler(event:MouseEvent):void
+ {
+ if(currentState == "DemoState")
+ {
+ currentState = "InfoState";
+ }
+ else if(currentState == "InfoState")
+ {
+ currentState = "DemoState";
+ }
+ }
+
+ private function submitText():void
+ {
+ label.text = HSlider.value.toString();
+ }
+
+ ]]>
+ </fx:Script>
+ <s:states>
+ <s:State name="DemoState"/>
+ <s:State name="InfoState"/>
+ </s:states>
+ <fx:Declarations>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="@Embed('assets/icons/480/about.png')"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="@Embed('assets/icons/480/dock.png')"/>
+ </fx:Declarations>
+
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:VGroup includeIn="DemoState" horizontalAlign="center" verticalAlign="middle" left="20" right="20" height="100%">
+ <s:HSlider id="HSlider" left="20" right="20" minimum="0" maximum="100"/>
+ <s:Spacer height="10"/>
+ <s:Label id="label" horizontalCenter="0" textAlign="center" text="{HSlider.value.toString()}"/>
+ </s:VGroup>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="The HSlider (horizontal slider) control lets users select a value by moving a slider thumb between the end points of the slider track. The HSlider control has a horizontal direction. The slider track stretches from left to right. The current value of the slider is determined by the relative location of the thumb between the end points of the slider, corresponding to the slider's minimum and maximum values.
+ 
 
The slider can allow a continuous range of values between its minimum and maximum values or it can be restricted to values at specific intervals between the minimum and maximum value. The slider can contain a data tip to show its current value."/>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
+ <s:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+</s:View>
diff --git a/tourdeflexmobile/src/UIViews/ListView.mxml b/tourdeflexmobile/src/UIViews/ListView.mxml
index ce00d68..6c691b1 100644
--- a/tourdeflexmobile/src/UIViews/ListView.mxml
+++ b/tourdeflexmobile/src/UIViews/ListView.mxml
@@ -42,8 +42,16 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
</fx:Declarations>
<s:List includeIn="DemoState" width="100%" height="100%">
@@ -79,6 +87,16 @@


To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/UIViews/MobileGridView.mxml b/tourdeflexmobile/src/UIViews/MobileGridView.mxml
index d875580..0bdae79 100644
--- a/tourdeflexmobile/src/UIViews/MobileGridView.mxml
+++ b/tourdeflexmobile/src/UIViews/MobileGridView.mxml
@@ -40,8 +40,16 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
</fx:Declarations>
<ns:MobileGrid includeIn="DemoState" width="100%" height="100%">
@@ -100,6 +108,16 @@


This technique ensures optimal display and memory performance, which is critical for mobile devices, at the price of less flexibility for cell renderers."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/UIViews/RadiobuttonView.mxml b/tourdeflexmobile/src/UIViews/RadiobuttonView.mxml
index 47d1804..0297cf9 100644
--- a/tourdeflexmobile/src/UIViews/RadiobuttonView.mxml
+++ b/tourdeflexmobile/src/UIViews/RadiobuttonView.mxml
@@ -40,8 +40,16 @@
</fx:Script>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
<s:RadioButtonGroup id="radiogroup1"/>
</fx:Declarations>
@@ -51,7 +59,13 @@
<s:State name="InfoState"/>
</s:states>
- <s:VGroup includeIn="DemoState" horizontalCenter="0" y="20">
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:VGroup includeIn="DemoState" horizontalCenter="0" verticalCenter="0">
<s:RadioButton change="radiobuttonHandler(event)" label="RadioButton 1" groupName="radiogroup1"/>
<s:RadioButton change="radiobuttonHandler(event)" label="RadioButton 2" groupName="radiogroup1"/>
<s:RadioButton change="radiobuttonHandler(event)" label="RadioButton 3" groupName="radiogroup1"/>
@@ -64,6 +78,16 @@


 To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/UIViews/SpinnerListView.mxml b/tourdeflexmobile/src/UIViews/SpinnerListView.mxml
index c94f59b..9bf6ed7 100644
--- a/tourdeflexmobile/src/UIViews/SpinnerListView.mxml
+++ b/tourdeflexmobile/src/UIViews/SpinnerListView.mxml
@@ -47,11 +47,25 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
</fx:Declarations>
- <s:SpinnerListContainer includeIn="DemoState" width="100%">
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:SpinnerListContainer includeIn="DemoState" left="20" right="20" horizontalCenter="0" verticalCenter="0">
<s:SpinnerList id="spinnerList1" change="spinnerListHandler(event)" width="50%" height="150">
<s:ArrayCollection>
<fx:Object label="Item A 1"/>
@@ -109,6 +123,16 @@
<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The SpinnerList component displays a list of items. The item in the center of the list is always the selectedItem. By default, the list wraps around.


You can have multiple SpinnerList controls arranged horizontally within a single border by wrapping then in a SpinnerListContainer."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/UIViews/TextInputView.mxml b/tourdeflexmobile/src/UIViews/TextInputView.mxml
index 8a765c8..1adae31 100644
--- a/tourdeflexmobile/src/UIViews/TextInputView.mxml
+++ b/tourdeflexmobile/src/UIViews/TextInputView.mxml
@@ -48,13 +48,27 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
</fx:Declarations>
- <s:TextInput includeIn="DemoState" id="textInput" skinClass="spark.skins.mobile.TextInputSkin" prompt="Type Here and Tap Enter" left="5" right="5" top="5" height="40" enter="submitText()" />
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
- <s:Label includeIn="DemoState" id="label" horizontalCenter="0" y="60" textAlign="center"/>
+ <s:TextInput includeIn="DemoState" id="textInput" skinClass="spark.skins.mobile.TextInputSkin" prompt="Type Here and Tap Enter" left="10" right="10" top="10" height="40" enter="submitText()" />
+
+ <s:Label includeIn="DemoState" id="label" horizontalCenter="0" y="70" textAlign="center"/>
<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text.

 
The TextInput skin for the Spark theme uses the RichEditableText class. This means that the Spark TextInput control supports the Text Layout Framework (TLF) library, which builds on the Flash Text Engine (FTE). In combination, these layers provide text editing with high-quality international typography and layout.
@@ -81,6 +95,16 @@

 
To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/UIViews/ToggleSwitchView.mxml b/tourdeflexmobile/src/UIViews/ToggleSwitchView.mxml
index 5309a75..fb30f37 100644
--- a/tourdeflexmobile/src/UIViews/ToggleSwitchView.mxml
+++ b/tourdeflexmobile/src/UIViews/ToggleSwitchView.mxml
@@ -41,17 +41,41 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
</fx:Declarations>
- <s:ToggleSwitch includeIn="DemoState" horizontalCenter="0" y="20" />
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:ToggleSwitch includeIn="DemoState" horizontalCenter="0" verticalCenter="0" />
<s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The Spark ToggleSwitch control defines a binary switch that can be in the selected or unselected position. The ToggleSwitch consists of a thumb skin part that moves between the two ends of the track skin part, similar to the Spark Slider control.
The ToggleSwitch control has two positions: selected and unselected. By default, the label OFF corresponds to the unselected position and ON corresponds to the selected position.

 
Clicking anywhere in the control toggles the position. You can also slide the thumb along the track to change position. When you release the thumb, it moves to the position, selected or unselected, that is closest to the thumb location.

 
The ToggleSwitch control uses the following default values for the unselected and selected labels: OFF (unselected) and ON (selected). Define a custom skin to change the labels, or to change other visual characteristics of the control."/>
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
diff --git a/tourdeflexmobile/src/assets/appicons/144.png b/tourdeflexmobile/src/assets/appicons/144.png
new file mode 100644
index 0000000..4af316d
--- /dev/null
+++ b/tourdeflexmobile/src/assets/appicons/144.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/appicons/192.png b/tourdeflexmobile/src/assets/appicons/192.png
new file mode 100644
index 0000000..f3b93c4
--- /dev/null
+++ b/tourdeflexmobile/src/assets/appicons/192.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/appicons/36.png b/tourdeflexmobile/src/assets/appicons/36.png
new file mode 100644
index 0000000..d73311a
--- /dev/null
+++ b/tourdeflexmobile/src/assets/appicons/36.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/appicons/48.png b/tourdeflexmobile/src/assets/appicons/48.png
new file mode 100644
index 0000000..a7c64e7
--- /dev/null
+++ b/tourdeflexmobile/src/assets/appicons/48.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/appicons/72.png b/tourdeflexmobile/src/assets/appicons/72.png
new file mode 100644
index 0000000..e5abaad
--- /dev/null
+++ b/tourdeflexmobile/src/assets/appicons/72.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/appicons/96.png b/tourdeflexmobile/src/assets/appicons/96.png
new file mode 100644
index 0000000..2f25b97
--- /dev/null
+++ b/tourdeflexmobile/src/assets/appicons/96.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/160/1_navigation_next_item.png b/tourdeflexmobile/src/assets/icons/160/1_navigation_next_item.png
new file mode 100755
index 0000000..88029a8
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/160/1_navigation_next_item.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/160/1_navigation_previous_item.png b/tourdeflexmobile/src/assets/icons/160/1_navigation_previous_item.png
new file mode 100755
index 0000000..b8b3e1a
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/160/1_navigation_previous_item.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/240/1_navigation_next_item.png b/tourdeflexmobile/src/assets/icons/240/1_navigation_next_item.png
new file mode 100755
index 0000000..e6495b2
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/240/1_navigation_next_item.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/240/1_navigation_previous_item.png b/tourdeflexmobile/src/assets/icons/240/1_navigation_previous_item.png
new file mode 100755
index 0000000..64538ce
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/240/1_navigation_previous_item.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/320/1_navigation_next_item.png b/tourdeflexmobile/src/assets/icons/320/1_navigation_next_item.png
new file mode 100755
index 0000000..c36e050
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/320/1_navigation_next_item.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/320/1_navigation_previous_item.png b/tourdeflexmobile/src/assets/icons/320/1_navigation_previous_item.png
new file mode 100755
index 0000000..e97e910
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/320/1_navigation_previous_item.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/480/1.png b/tourdeflexmobile/src/assets/icons/480/1.png
new file mode 100644
index 0000000..e7a778d
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/480/1.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/480/2.png b/tourdeflexmobile/src/assets/icons/480/2.png
new file mode 100644
index 0000000..84d2f95
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/480/2.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/480/3.png b/tourdeflexmobile/src/assets/icons/480/3.png
new file mode 100644
index 0000000..39dcfd0
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/480/3.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/480/about.png b/tourdeflexmobile/src/assets/icons/480/about.png
new file mode 100644
index 0000000..0fe809b
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/480/about.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/480/add.png b/tourdeflexmobile/src/assets/icons/480/add.png
new file mode 100644
index 0000000..c0cd3d9
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/480/add.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/480/dock.png b/tourdeflexmobile/src/assets/icons/480/dock.png
new file mode 100644
index 0000000..14a1e3e
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/480/dock.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/480/icon.png b/tourdeflexmobile/src/assets/icons/480/icon.png
new file mode 100644
index 0000000..d5f63ca
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/480/icon.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/480/icon1.png b/tourdeflexmobile/src/assets/icons/480/icon1.png
new file mode 100644
index 0000000..44ade7a
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/480/icon1.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/book.png b/tourdeflexmobile/src/assets/icons/book.png
new file mode 100644
index 0000000..a54a3e7
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/book.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/briefcase.png b/tourdeflexmobile/src/assets/icons/briefcase.png
new file mode 100644
index 0000000..83f646f
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/briefcase.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/bug.png b/tourdeflexmobile/src/assets/icons/bug.png
new file mode 100644
index 0000000..f9e99e0
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/bug.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/envelope-closed.png b/tourdeflexmobile/src/assets/icons/envelope-closed.png
new file mode 100644
index 0000000..85eef0c
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/envelope-closed.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/people.png b/tourdeflexmobile/src/assets/icons/people.png
new file mode 100644
index 0000000..ebdafe2
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/people.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/phone.png b/tourdeflexmobile/src/assets/icons/phone.png
new file mode 100644
index 0000000..19098e5
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/phone.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/puzzle-piece.png b/tourdeflexmobile/src/assets/icons/puzzle-piece.png
new file mode 100644
index 0000000..be6d6f0
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/puzzle-piece.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/rss.png b/tourdeflexmobile/src/assets/icons/rss.png
new file mode 100644
index 0000000..58799a5
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/rss.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/video.png b/tourdeflexmobile/src/assets/icons/video.png
new file mode 100644
index 0000000..d912be2
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/video.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/icons/wrench.png b/tourdeflexmobile/src/assets/icons/wrench.png
new file mode 100644
index 0000000..19c7634
--- /dev/null
+++ b/tourdeflexmobile/src/assets/icons/wrench.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/images/logo.png b/tourdeflexmobile/src/assets/images/logo.png
index 0278b81..d7b87cf 100644
--- a/tourdeflexmobile/src/assets/images/logo.png
+++ b/tourdeflexmobile/src/assets/images/logo.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/images/logo_big.png b/tourdeflexmobile/src/assets/images/logo_big.png
new file mode 100644
index 0000000..e38cc07
--- /dev/null
+++ b/tourdeflexmobile/src/assets/images/logo_big.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/images/splash.png b/tourdeflexmobile/src/assets/images/splash.png
new file mode 100644
index 0000000..6d27cd4
--- /dev/null
+++ b/tourdeflexmobile/src/assets/images/splash.png
Binary files differ
diff --git a/tourdeflexmobile/src/assets/terminal-grotesque.ttf b/tourdeflexmobile/src/assets/terminal-grotesque.ttf
new file mode 100644
index 0000000..3786710
--- /dev/null
+++ b/tourdeflexmobile/src/assets/terminal-grotesque.ttf
Binary files differ
diff --git a/tourdeflexmobile/src/renderers/MenuRenderer.mxml b/tourdeflexmobile/src/renderers/MenuRenderer.mxml
index 6b79d77..62752de 100644
--- a/tourdeflexmobile/src/renderers/MenuRenderer.mxml
+++ b/tourdeflexmobile/src/renderers/MenuRenderer.mxml
@@ -29,19 +29,8 @@
if(data){
- if(data.type == "view"){
- autoDrawBackground = true;
- currentState = "ViewState";
- } else if(data.type == "separator"){
- autoDrawBackground = false;
- opaqueBackground = 0x464646;
- currentState = "SeparatorState";
- } else {
- autoDrawBackground = true;
- currentState = "ViewState";
- }
-
itemLabel.text = data.label;
+ iconImg.source = String(data.icon);
}
}
@@ -49,11 +38,7 @@
]]>
</fx:Script>
- <s:states>
- <s:State name="ViewState"/>
- <s:State name="SeparatorState"/>
- </s:states>
-
- <s:Label id="itemLabel" color.SeparatorState="#888888" color.ViewState="#FFFFFF" x="10" verticalCenter="0"/>
+ <s:BitmapImage id="iconImg" verticalCenter="0" x="10" width="20" height="20" smooth="true"/>
+ <s:Label id="itemLabel" x="40" verticalCenter="0" styleName="pixelLabel"/>
</s:ItemRenderer>
\ No newline at end of file
diff --git a/tourdeflexmobile/src/renderers/ShowcaseImageRenderer.mxml b/tourdeflexmobile/src/renderers/ShowcaseImageRenderer.mxml
new file mode 100644
index 0000000..1b2a807
--- /dev/null
+++ b/tourdeflexmobile/src/renderers/ShowcaseImageRenderer.mxml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" autoDrawBackground="false" opaqueBackground="#D7DADD">
+
+ <fx:Script>
+ <![CDATA[
+
+ override public function set data(value:Object):void{
+ super.data = value;
+
+ if(data){
+ thumbnail.source = data;
+ }
+ }
+ ]]>
+ </fx:Script>
+
+
+ <s:BitmapImage id="thumbnail" width="100%" height="100%" smooth="true"/>
+
+</s:ItemRenderer>
diff --git a/tourdeflexmobile/src/styles.css b/tourdeflexmobile/src/styles.css
index 3459839..5cc7183 100644
--- a/tourdeflexmobile/src/styles.css
+++ b/tourdeflexmobile/src/styles.css
@@ -19,48 +19,53 @@
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
-
-s|ActionBar
+@font-face
{
- chromeColor: #303030;
+ src: url("assets/terminal-grotesque.ttf");
+ fontFamily: PixelFont;
+ fontStyle: normal;
+ fontWeight: normal;
+ embedAsCFF: true;
+ advancedAntiAliasing: true;
+
}
-s|View
-{
- backgroundColor: #464646;
+.pixelLabel{
+ color: #000000;
+ fontSize: 14px;
+ fontWeight: normal;
+ fontFamily: PixelFont;
}
-s|Application
-{
- backgroundColor: #464646;
+
+s|Application{
+ backgroundColor: #D7DADD;
}
-s|List
-{
- alternatingItemColors: #303030;
- selectionColor: #000000;
- downColor: #FA5B0F;
- contentBackgroundColor: #464646;
+s|View{
+ backgroundColor: #D7DADD;
+}
+
+s|ActionBar{
+ chromeColor: #000000;
+}
+
+s|ActionBar #titleDisplay{
+ textAlign: left;
+ fontWeight: normal;
color: #FFFFFF;
+ fontSize: 14px;
}
+
s|TextArea
{
color: #FFFFFF;
contentBackgroundColor: #303030;
}
-s|CheckBox
-{
- color: #FFFFFF;
-}
-
-s|RadioButton
-{
- color: #FFFFFF;
-}
s|Label
{
- color: #FFFFFF;
+ color: #000000;
}
\ No newline at end of file
diff --git a/tourdeflexmobile/src/views/ComponentsView.mxml b/tourdeflexmobile/src/views/ComponentsView.mxml
new file mode 100644
index 0000000..8c35879
--- /dev/null
+++ b/tourdeflexmobile/src/views/ComponentsView.mxml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="utf-8"?>
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="Components">
+ <fx:Script>
+ <![CDATA[
+
+ import UIViews.ActionBarView;
+ import UIViews.ButtonBarView;
+ import UIViews.BusyIndicatorView;
+ import UIViews.CalloutButtonView;
+ import UIViews.CheckboxView;
+ import UIViews.DateSpinnerView;
+ import UIViews.HscrubberView;
+ import UIViews.ListView;
+ import UIViews.MobileGridView;
+ import UIViews.RadiobuttonView;
+ import UIViews.SpinnerListView;
+ import UIViews.TextInputView;
+ import UIViews.ToggleSwitchView;
+
+ import LayoutViews.HorizontalLayoutView;
+ import LayoutViews.VerticalLayoutView;
+ import LayoutViews.TileLayoutView;
+
+ import AIRViews.AccelerometerView;
+ import AIRViews.CameraRollView;
+ import AIRViews.CameraUIView;
+ import AIRViews.GeolocationView;
+ import AIRViews.NativeAppView;
+ import AIRViews.SQLiteView;
+
+ protected function listHandler(event:MouseEvent):void
+ {
+ navigator.pushView(componentsList.selectedItem.view);
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:List id="componentsList" width="100%" height="100%" click="listHandler(event)">
+ <s:dataProvider>
+ <s:ArrayList>
+ <fx:Object label="ActionBar" view="{ActionBarView}"/>
+ <fx:Object label="ButtonBar" view="{ButtonBarView}"/>
+ <fx:Object label="BusyIndicator" view="{BusyIndicatorView}"/>
+ <fx:Object label="CalloutButton" view="{CalloutButtonView}"/>
+ <fx:Object label="Checkbox" view="{CheckboxView}"/>
+ <fx:Object label="DateSpinner" view="{DateSpinnerView}"/>
+ <fx:Object label="HSlider" view="{HscrubberView}"/>
+ <fx:Object label="List" view="{ListView}"/>
+ <fx:Object label="MobileGrid" view="{MobileGridView}"/>
+ <fx:Object label="RadioButton" view="{RadiobuttonView}"/>
+ <fx:Object label="SpinnerList" view="{SpinnerListView}"/>
+ <fx:Object label="TextInput" view="{TextInputView}"/>
+ <fx:Object label="toggleSwitch" view="{ToggleSwitchView}"/>
+ <fx:Object label="HorizontalLayout" view="{HorizontalLayoutView}"/>
+ <fx:Object label="VerticalLayout" view="{VerticalLayoutView}"/>
+ <fx:Object label="TileLayout" view="{TileLayoutView}"/>
+ <fx:Object label="Accelerometer" view="{AccelerometerView}"/>
+ <fx:Object label="CameraRoll" view="{CameraRollView}"/>
+ <fx:Object label="CameraUI" view="{CameraUIView}"/>
+ <fx:Object label="Geolocation" view="{GeolocationView}"/>
+ <fx:Object label="NativeApp" view="{NativeAppView}"/>
+ <fx:Object label="SQLite" view="{SQLiteView}"/>
+ </s:ArrayList>
+ </s:dataProvider>
+ <s:itemRenderer>
+ <fx:Component>
+ <s:IconItemRenderer>
+ <s:decorator>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_next_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_next_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_next_item.png')"/>
+ </s:decorator>
+ </s:IconItemRenderer>
+ </fx:Component>
+ </s:itemRenderer>
+ </s:List>
+</s:View>
diff --git a/tourdeflexmobile/src/views/HomeView.mxml b/tourdeflexmobile/src/views/HomeView.mxml
new file mode 100644
index 0000000..955fea6
--- /dev/null
+++ b/tourdeflexmobile/src/views/HomeView.mxml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="" backgroundColor="#D7DADD">
+
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:Label horizontalCenter="0" verticalCenter="0" text="TO-DO" fontSize="40"/>
+</s:View>
diff --git a/tourdeflexmobile/src/views/HttpServiceView.mxml b/tourdeflexmobile/src/views/HttpServiceView.mxml
index 373cd85..0583ebb 100644
--- a/tourdeflexmobile/src/views/HttpServiceView.mxml
+++ b/tourdeflexmobile/src/views/HttpServiceView.mxml
@@ -57,8 +57,16 @@
</s:states>
<fx:Declarations>
- <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/>
- <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/>
+ <s:MultiDPIBitmapSource id="aboutIcon"
+ source160dpi="@Embed('assets/icons/160/about.png')"
+ source240dpi="@Embed('assets/icons/240/about.png')"
+ source320dpi="@Embed('assets/icons/320/about.png')"
+ source480dpi="assets/icons/480/about.png"/>
+ <s:MultiDPIBitmapSource id="demoIcon"
+ source160dpi="@Embed('assets/icons/160/dock.png')"
+ source240dpi="@Embed('assets/icons/240/dock.png')"
+ source320dpi="@Embed('assets/icons/320/dock.png')"
+ source480dpi="assets/icons/480/dock.png"/>
<s:HTTPService id="rssService" resultFormat="e4x" result="rssResult(event)"/>
</fx:Declarations>
diff --git a/tourdeflexmobile/src/views/NewsDetailsView.mxml b/tourdeflexmobile/src/views/NewsDetailsView.mxml
new file mode 100644
index 0000000..2c462fa
--- /dev/null
+++ b/tourdeflexmobile/src/views/NewsDetailsView.mxml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ tabBarVisible="false" title="{data.title}" viewActivate="init(event)" viewDeactivate="goBack(event)" >
+ <fx:Script>
+ <![CDATA[
+ import mx.core.FlexGlobals;
+ import mx.events.FlexEvent;
+
+ import spark.events.ViewNavigatorEvent;
+
+ private var myStageWebView:StageWebView;
+ private var fontPercent:Number;
+ private var currentFlexScalingFactor:Number = FlexGlobals.topLevelApplication.runtimeDPI/FlexGlobals.topLevelApplication.applicationDPI;
+
+ protected function init(event:ViewNavigatorEvent):void
+ {
+ NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;
+
+ myStageWebView = new StageWebView(true);
+ myStageWebView.viewPort = new Rectangle(myRect.x, myRect.y*currentFlexScalingFactor+FlexGlobals.topLevelApplication.navigator.actionBar.height*currentFlexScalingFactor, myRect.width*currentFlexScalingFactor, myRect.height*currentFlexScalingFactor);
+ myStageWebView.stage = this.stage;
+
+ myStageWebView.loadString("<html><head><style type='text/css'>"+
+ "body {background-color:#FFFFFF;}"+
+ "body {color:black;}"+
+ "body {padding:10px;}"+
+ "body {font-size:"+14*currentFlexScalingFactor+"px;}"+
+ "body {font-family:helvetica;}"+
+ "a:link {color:#000000;}"+
+ "a:visited {color:#000000;}"+
+ "a:hover {color:#000000;}"+
+ "a:active {color:#000000;}"+
+ "</style></head><body>"+data.description+"</body></html>");
+ myRect.addEventListener(Event.RESIZE, resize);
+ }
+
+ protected function goBack(event:ViewNavigatorEvent):void
+ {
+ NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.NORMAL;
+ myStageWebView.dispose();
+ myRect.removeEventListener(Event.RESIZE, resize);
+ }
+
+ protected function resize(event:Event):void
+ {
+ myStageWebView.viewPort = new Rectangle(myRect.x, myRect.y*currentFlexScalingFactor+FlexGlobals.topLevelApplication.navigator.actionBar.height*currentFlexScalingFactor, myRect.width*currentFlexScalingFactor, myRect.height*currentFlexScalingFactor);
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+
+ <s:Spacer id="myRect" left="10" right="10" top="10" bottom="10"/>
+
+</s:View>
+
diff --git a/tourdeflexmobile/src/views/NewsView.mxml b/tourdeflexmobile/src/views/NewsView.mxml
new file mode 100644
index 0000000..28ff52d
--- /dev/null
+++ b/tourdeflexmobile/src/views/NewsView.mxml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?>
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="News">
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.XMLListCollection;
+ import mx.events.FlexEvent;
+ import mx.rpc.events.ResultEvent;
+
+ import spark.events.IndexChangeEvent;
+
+ protected function loadBlogNews(event:FlexEvent):void
+ {
+ blogService.url = "https://blogs.apache.org/flex/feed/entries/rss";
+ blogService.send();
+ }
+
+ protected function blogService_resultHandler(event:ResultEvent):void
+ {
+ newsList.dataProvider = new XMLListCollection(new XMLList(event.result.channel.item));
+ newsList.labelField = "title";
+ }
+
+ protected function selectItem(event:IndexChangeEvent):void
+ {
+ navigator.pushView(NewsDetailsView, newsList.selectedItem);
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:HTTPService id="blogService" resultFormat="e4x" result="blogService_resultHandler(event)"/>
+ </fx:Declarations>
+
+ <s:states>
+ <s:State name="BlogState" enterState="loadBlogNews(event)" />
+ <s:State name="TwitterState"/>
+ </s:states>
+
+ <s:ButtonBar left="5" right="5" top="5" height="40" requireSelection="true" selectedIndex="0">
+ <s:ArrayList>
+ <fx:Object label="Blog News"/>
+ <fx:Object label="Twitter Feed"/>
+ </s:ArrayList>
+ </s:ButtonBar>
+
+ <s:List id="newsList" top="50" bottom="0" width="100%" change="selectItem(event)">
+ <s:itemRenderer>
+ <fx:Component>
+ <s:IconItemRenderer labelFunction="myLabelFunction" messageFunction="myMessageFunction">
+ <s:decorator>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_next_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_next_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_next_item.png')"/>
+ </s:decorator>
+
+ <fx:Script>
+ <![CDATA[
+
+ private function myLabelFunction(item:Object):String{
+ return unescape(data.title);
+ }
+
+ private function myMessageFunction(item:Object):String{
+ return data.pubDate;
+ }
+
+ ]]>
+ </fx:Script>
+ </s:IconItemRenderer>
+ </fx:Component>
+ </s:itemRenderer>
+ </s:List>
+</s:View>
diff --git a/tourdeflexmobile/src/views/ShowcaseDetails.mxml b/tourdeflexmobile/src/views/ShowcaseDetails.mxml
new file mode 100644
index 0000000..89643e9
--- /dev/null
+++ b/tourdeflexmobile/src/views/ShowcaseDetails.mxml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="Flex Showcase" viewActivate="init(event)" xmlns:renderers="renderers.*">
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayList;
+
+ import spark.components.Label;
+ import spark.events.ViewNavigatorEvent;
+
+ private var imagesArray:Array;
+
+ protected function init(event:ViewNavigatorEvent):void
+ {
+ titleTxt.text = data.@title;
+ authorTxt.text = data.@author;
+
+ if(data.@website){
+ websiteTxt.text = data.@website;
+ } else {
+ //Do Nothing
+ }
+
+ descriptionTxt.text = data.description;
+ imagesArray = new Array();
+
+ for each (var image:* in data.images.image){
+ imagesArray.push("http://flex.apache.org/showcase/images/"+data.images.@baseDir+"/prev/"+image.@file);
+ }
+
+ thumbnailList.dataProvider = new ArrayList(imagesArray);
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:Rect left="10" right="10" top="10" bottom="10" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:Scroller id="myScroller" top="10" bottom="10" left="10" right="10">
+ <s:VGroup width="100%" height="100%" gap="10">
+ <s:Spacer height="5" width="5"/>
+ <s:Label id="titleTxt" width="100%" paddingLeft="10" paddingRight="10"/>
+ <s:Label id="authorTxt" width="100%" paddingLeft="10" paddingRight="10" fontWeight="bold"/>
+ <s:Label id="websiteTxt" width="100%" paddingLeft="10" paddingRight="10" textDecoration="underline" color="#006699"/>
+ <s:List id="thumbnailList" width="100%" height="250" itemRenderer="renderers.ShowcaseImageRenderer" verticalScrollPolicy="off" contentBackgroundColor="#D7DADD" pageScrollingEnabled="true">
+ <s:layout>
+ <s:TileLayout useVirtualLayout="true" columnWidth="{myScroller.width}" rowHeight="250" orientation="columns" horizontalGap="0" verticalGap="0"/>
+ </s:layout>
+ </s:List>
+ <s:Label id="descriptionTxt" width="100%" paddingLeft="10" paddingRight="10"/>
+ <s:Spacer height="5" width="5"/>
+ </s:VGroup>
+ </s:Scroller>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+</s:View>
diff --git a/tourdeflexmobile/src/views/ShowcaseView.mxml b/tourdeflexmobile/src/views/ShowcaseView.mxml
new file mode 100644
index 0000000..8f7f8d4
--- /dev/null
+++ b/tourdeflexmobile/src/views/ShowcaseView.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="Showcase" viewActivate="init(event)">
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.XMLListCollection;
+ import mx.rpc.events.ResultEvent;
+
+ import spark.events.IndexChangeEvent;
+ import spark.events.ViewNavigatorEvent;
+
+ protected function init(event:ViewNavigatorEvent):void
+ {
+ showcaseService.url = "http://flex.apache.org/showcase/data/showcase.xml";
+ showcaseService.send();
+ }
+
+ protected function shocaseService_resultHandler(event:ResultEvent):void
+ {
+ showcaseList.dataProvider = new XMLListCollection(new XMLList(event.result.app));
+ }
+
+ protected function selectApp(event:IndexChangeEvent):void
+ {
+ navigator.pushView(ShowcaseDetails, showcaseList.selectedItem);
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:HTTPService id="showcaseService" result="shocaseService_resultHandler(event)" resultFormat="e4x" />
+ </fx:Declarations>
+
+ <s:List id="showcaseList" width="100%" height="100%" change="selectApp(event)">
+ <s:itemRenderer>
+ <fx:Component>
+ <s:IconItemRenderer labelFunction="myLabelFunction" messageFunction="myMessageFunction">
+ <s:decorator>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_next_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_next_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_next_item.png')"/>
+ </s:decorator>
+
+ <fx:Script>
+ <![CDATA[
+
+ private function myLabelFunction(item:Object):String{
+ return data.@title;
+ }
+
+ private function myMessageFunction(item:Object):String{
+ return data.@author;
+ }
+
+ /* Disabled by now.
+ private function myIconFunction(item:Object):String{
+ if(data.images == undefined){
+ return "";
+ } else {
+ return "http://flex.apache.org/showcase/images/"+data.images.@baseDir+"/prev/"+data.images.image[0].@file;
+ }
+ }*/
+
+ ]]>
+ </fx:Script>
+ </s:IconItemRenderer>
+ </fx:Component>
+ </s:itemRenderer>
+ </s:List>
+</s:View>
diff --git a/tourdeflexmobile/src/views/VideoDetailsView.mxml b/tourdeflexmobile/src/views/VideoDetailsView.mxml
new file mode 100644
index 0000000..2812a05
--- /dev/null
+++ b/tourdeflexmobile/src/views/VideoDetailsView.mxml
@@ -0,0 +1,69 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="{data.title}" viewActivate="init(event)" viewDeactivate="deactivate(event)">
+ <fx:Script>
+ <![CDATA[
+ import mx.core.FlexGlobals;
+
+ import spark.events.ViewNavigatorEvent;
+
+ private var myStageWebView:StageWebView;
+ private var currentFlexScalingFactor:Number = FlexGlobals.topLevelApplication.runtimeDPI/FlexGlobals.topLevelApplication.applicationDPI;
+
+ protected function init(event:ViewNavigatorEvent):void
+ {
+ NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;
+
+ myStageWebView = new StageWebView(true);
+ myStageWebView.viewPort = new Rectangle(myRect.x, myRect.y*currentFlexScalingFactor+FlexGlobals.topLevelApplication.navigator.actionBar.height*currentFlexScalingFactor, myRect.width*currentFlexScalingFactor, myRect.height*currentFlexScalingFactor);
+ myStageWebView.stage = this.stage;
+ myStageWebView.loadURL("http://www.youtube.com/embed/"+data.url);
+ myRect.addEventListener(Event.RESIZE, resizeWebView);
+ }
+
+ protected function deactivate(event:ViewNavigatorEvent):void
+ {
+ NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.NORMAL;
+ myStageWebView.dispose();
+ myRect.removeEventListener(Event.RESIZE, resizeWebView);
+ }
+
+ private function resizeWebView(event:Event):void{
+
+ myStageWebView.viewPort = new Rectangle(myRect.x, myRect.y*currentFlexScalingFactor+FlexGlobals.topLevelApplication.navigator.actionBar.height*currentFlexScalingFactor, myRect.width*currentFlexScalingFactor, myRect.height*currentFlexScalingFactor);
+ }
+
+ ]]>
+ </fx:Script>
+
+
+ <s:Spacer id="myRect" left="10" right="10" top="10" bottom="10"/>
+
+ <s:navigationContent>
+ <s:Button click="navigator.popView()">
+ <s:icon>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_previous_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_previous_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_previous_item.png')"/>
+ </s:icon>
+ </s:Button>
+ </s:navigationContent>
+</s:View>
diff --git a/tourdeflexmobile/src/views/VideosView.mxml b/tourdeflexmobile/src/views/VideosView.mxml
new file mode 100644
index 0000000..6f8fa28
--- /dev/null
+++ b/tourdeflexmobile/src/views/VideosView.mxml
@@ -0,0 +1,161 @@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" title="Videos" viewActivate="init(event)">
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayList;
+ import mx.events.FlexEvent;
+ import mx.events.PropertyChangeEvent;
+ import mx.rpc.events.ResultEvent;
+
+ import spark.events.IndexChangeEvent;
+ import spark.events.ViewNavigatorEvent;
+
+ private static const YOUTUBE_API_KEY:String = "COPY_YOUR_YOUTUBE_APIKEY_HERE";
+ private var pageToken:String;
+ private var loading:Boolean;
+
+ protected function init(event:ViewNavigatorEvent):void
+ {
+ myBusy.visible = true;
+ pageToken = "";
+ youtubeService.url = "https://www.googleapis.com/youtube/v3/search?q=Apache%20Flex%7CAdobe%20Flex&maxResults=50&order=date&type=video&part=snippet&key="+YOUTUBE_API_KEY;
+ youtubeService.send();
+ }
+
+ protected function changeSearch(event:IndexChangeEvent):void
+ {
+
+ pageToken = "";
+ myBusy.visible = true;
+
+ if(myButtonBar.selectedItem.search == "RecentVideos"){
+ youtubeService.url = "https://www.googleapis.com/youtube/v3/search?q=Apache%20Flex%7CAdobe%20Flex&maxResults=50&order=date&type=video&part=snippet&key="+YOUTUBE_API_KEY;
+ } else {
+ youtubeService.url = "https://www.googleapis.com/youtube/v3/search?q=Apache%20Flex%7CAdobe%20Flex&maxResults=50&order=relevance&type=video&part=snippet&key="+YOUTUBE_API_KEY;
+ }
+
+ videosList.dataProvider = null;
+ youtubeService.send();
+ }
+
+ protected function youtubeService_resultHandler(event:ResultEvent):void
+ {
+ var rawData:Object = JSON.parse(String(event.result));
+ pageToken = rawData.nextPageToken;
+
+ if(videosList.dataProvider == null){
+ var videosArray:ArrayList = new ArrayList(rawData.items as Array);
+ videosList.dataProvider = videosArray;
+ } else {
+ for each (var item:* in rawData.items){
+ videosList.dataProvider.addItem(item);
+ }
+ }
+
+ loading = false;
+ myBusy.visible = false;
+ }
+
+ protected function selectVideo(event:IndexChangeEvent):void
+ {
+ var myObject:Object = new Object();
+ myObject.title = videosList.selectedItem.snippet.title;
+ myObject.url = videosList.selectedItem.id.videoId;
+ navigator.pushView(VideoDetailsView, myObject);
+ }
+
+ protected function videosList_creationCompleteHandler(event:FlexEvent):void
+ {
+ videosList.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler);
+ }
+
+ protected function propertyChangeHandler( event : PropertyChangeEvent):void {
+ if(event.property == "verticalScrollPosition"){
+ if(event.newValue == ( event.currentTarget.measuredHeight - event.currentTarget.height)){
+ loadMore();
+ }
+ }
+ }
+
+ public function loadMore():void{
+ if(!loading){
+ myBusy.visible = true;
+ loading = true;
+
+ if(myButtonBar.selectedItem.search == "RecentVideos"){
+ youtubeService.url = "https://www.googleapis.com/youtube/v3/search?q=Apache%20Flex%7CAdobe%20Flex&maxResults=50&pageToken="+pageToken+"&order=date&type=video&part=snippet&key="+YOUTUBE_API_KEY;
+ } else {
+ youtubeService.url = "https://www.googleapis.com/youtube/v3/search?q=Apache%20Flex%7CAdobe%20Flex&maxResults=50&pageToken="+pageToken+"&order=relevance&type=video&part=snippet&key="+YOUTUBE_API_KEY;
+ }
+
+ youtubeService.send();
+ }
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:HTTPService id="youtubeService" resultFormat="text" result="youtubeService_resultHandler(event)"/>
+ </fx:Declarations>
+
+ <s:ButtonBar id="myButtonBar" change="changeSearch(event)" left="5" right="5" top="5" height="40" requireSelection="true" selectedIndex="0">
+ <s:ArrayList>
+ <fx:Object label="Recent Videos" search="RecentVideos"/>
+ <fx:Object label="Popular Videos" search="PopularVideos"/>
+ </s:ArrayList>
+ </s:ButtonBar>
+
+ <s:List id="videosList" creationComplete="videosList_creationCompleteHandler(event)" change="selectVideo(event)" width="100%" top="50" bottom="0">
+ <s:itemRenderer>
+ <fx:Component>
+ <s:IconItemRenderer labelFunction="myLabelFunction" messageFunction="myMessageFunction" iconFunction="myIconFunction" iconWidth="60" iconHeight="50" iconScaleMode="letterbox">
+ <s:decorator>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1_navigation_next_item.png')"
+ source240dpi="@Embed('assets/icons/240/1_navigation_next_item.png')"
+ source320dpi="@Embed('assets/icons/320/1_navigation_next_item.png')"/>
+ </s:decorator>
+
+ <fx:Script>
+ <![CDATA[
+
+ private function myIconFunction(item:Object):String{
+ return data.snippet.thumbnails.medium.url;
+ }
+
+ private function myLabelFunction(item:Object):String{
+ return data.snippet.title;
+ }
+
+ private function myMessageFunction(item:Object):String{
+ return data.snippet.channelTitle+ "\n" + String(data.snippet.publishedAt).substr(0, 10);
+ }
+ ]]>
+ </fx:Script>
+ </s:IconItemRenderer>
+ </fx:Component>
+ </s:itemRenderer>
+ </s:List>
+
+ <s:BusyIndicator id="myBusy" verticalCenter="0" horizontalCenter="0" visible="false"/>
+</s:View>
