You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by bi...@apache.org on 2014/11/04 20:15:51 UTC
[01/22] git commit: [flex-examples] [refs/heads/develop] - added a
slide to open and mouse drag to close
Repository: flex-examples
Updated Branches:
refs/heads/develop 0cd6ec753 -> 44ddf534e
added a slide to open and mouse drag to close
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/7a933e28
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/7a933e28
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/7a933e28
Branch: refs/heads/develop
Commit: 7a933e28389b6fb9741892b9a856babe415ea5a5
Parents: 0cd6ec7
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Tue Jan 7 12:56:52 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:23 2014 -0800
----------------------------------------------------------------------
.project | 11 ++
tourdeflexmobile/src/TourDeFlexMobile.mxml | 203 ++++++++++++++++++------
2 files changed, 168 insertions(+), 46 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/7a933e28/.project
----------------------------------------------------------------------
diff --git a/.project b/.project
new file mode 100644
index 0000000..d160bcb
--- /dev/null
+++ b/.project
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+ <name>tourdeflexmobile</name>
+ <comment></comment>
+ <projects>
+ </projects>
+ <buildSpec>
+ </buildSpec>
+ <natures>
+ </natures>
+</projectDescription>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/7a933e28/tourdeflexmobile/src/TourDeFlexMobile.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml
index 6a9dc94..e49714c 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile.mxml
+++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml
@@ -19,14 +19,20 @@ limitations under the License.
-->
<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)">
<fx:Style source="styles.css"/>
<fx:Script>
<![CDATA[
+ import mx.core.FlexGlobals;
import mx.events.FlexEvent;
-
+ import flash.utils.Timer;
+ import flash.events.MouseEvent;
+ import flash.events.TimerEvent;
+ import flash.events.Event;
import spark.events.IndexChangeEvent;
import AIRViews.AccelerometerView;
@@ -58,52 +64,89 @@ limitations under the License.
[Bindable]
private var currentStageWidth:Number;
-
+
[Bindable]
private var currentStageHeight:Number;
+ public static var SLIDE_INTERVAL:int = 40;
+ public static var STEPS:int = 6;
+
+ protected var _slideTimer:Timer = new Timer(SLIDE_INTERVAL, STEPS);
+ public static const CLICKED:String = "slideOutClicked";
+ protected var _buttonEnabled:Boolean = true;
+
protected function init(event:FlexEvent):void
{
- stage.addEventListener(Event.RESIZE, orientationHandler);
+ btn.addEventListener(MouseEvent.CLICK, slideButtonHandler);
+ //btn.addEventListener(UIButton.CLICKED, slideButtonHandler);
+ _slideTimer.addEventListener(TimerEvent.TIMER, doSlide);
+ _slideTimer.addEventListener(TimerEvent.TIMER_COMPLETE, slideComplete);
- 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{
- currentStageWidth = stage.stageWidth*-1;
-
- if(isOpen == false){
- lateralMenu.x = currentStageWidth;
- }
-
- currentStageHeight = navigator.height-45;
- lateralMenu.height = currentStageHeight;
-
- trace(lateralMenu.height);
+
+
+ public function open(animated:Boolean = true):void
+ {
+ if (!navigators.mouseEnabled)
+ return;
+ navigators.mouseEnabled = navigators.mouseChildren = false;
+ if (animated)
+ {
+ _slideTimer.repeatCount = Math.max(Math.floor(STEPS * (1 - navigators.x / lateralMenu.width)), 1);
+ _slideTimer.reset();
+ _slideTimer.start();
+ //moveIn.play();
+ //moveOut.play();
+ }
+ else
+ {
+ navigators.x = lateralMenu.width;
+ !navigators.mouseEnabled;
+ }
}
- protected function menuHandler(event:MouseEvent):void
+ public function close(animated:Boolean = true):void
+ {
+ navigators.mouseEnabled = navigators.mouseChildren = true;
+ if (animated)
+ {
+ _slideTimer.repeatCount = Math.max(Math.floor(STEPS * navigators.x / lateralMenu.width), 1);
+ _slideTimer.reset();
+ _slideTimer.start();
+ }
+ else {
+ navigators.x = 0;
+ }
+ }
+
+
+
+ /* protected function menuHandler(event:MouseEvent):void
{
-
- if(isOpen == true){
- moveOut.play();
- isOpen = false;
- } else if(isOpen == false){
- moveIn.play();
- isOpen = true;
- }
+ if(isOpen == true)
+ {
+ moveOut.play();
+ stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
+ //navigators.mouseEnabled = navigators.mouseChildren = false;
+ navigators.includeInLayout = false;
+ isOpen = false;
+ }
+ else if(isOpen == false)
+ {
+ moveIn.play();
+ stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
+ //navigators.mouseEnabled = navigators.mouseChildren = true;
+ isOpen = true;
}
+ }*/
protected function changeHandler(event:IndexChangeEvent):void
{
- isOpen = false;
- moveOut.play();
-
+ //isOpen = false;
+ //moveIn.play();
+ close();
+ stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
navigator.pushView(componentsList.selectedItem.view);
}
@@ -113,26 +156,88 @@ limitations under the License.
moveOut.play();
}
+ protected var _startX:Number;
+
+ protected function slideButtonHandler(event:Event):void
+ {
+ dispatchEvent(new Event(CLICKED));
+ navigators.mouseEnabled = navigators.mouseChildren = !navigators.mouseEnabled;
+ if (_buttonEnabled)
+ {
+ _slideTimer.repeatCount = STEPS;
+ _slideTimer.reset();
+ _slideTimer.start();
+ }
+
+ }
+
+
+ protected function mouseDown(event:MouseEvent):void
+ {
+ if (!navigators.mouseEnabled && mouseX > lateralMenu.width && mouseY > 45)
+ {
+ _startX = mouseX;
+ stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
+ stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
+ }
+ }
+
+
+ protected function doSlide(event:TimerEvent):void
+ {
+
+ var slideTimer:Timer = Timer(event.currentTarget);
+ var t:Number = slideTimer.currentCount/slideTimer.repeatCount;
+ navigators.x = (navigators.mouseEnabled ? (1-t) : t) * lateralMenu.width;
+
+ }
+
+ protected function slideComplete(event:TimerEvent):void
+ {
+ removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
+ navigators.mouseEnabled;
+ if (!navigators.mouseEnabled)
+ {
+ addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
+ }
+ }
+
+ protected function mouseMove(event:MouseEvent):void
+ {
+ navigators.x = Math.max(Math.min(mouseX - _startX + lateralMenu.width, lateralMenu.width), 0);
+ }
+
+ protected function mouseUp(event:MouseEvent):void
+ {
+
+ stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp);
+ stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
+ navigators.mouseEnabled = navigators.mouseChildren = mouseX < lateralMenu.width / 2;
+ _slideTimer.repeatCount = Math.max(navigators.mouseEnabled ? Math.floor(STEPS * navigators.x / lateralMenu.width) : Math.floor(STEPS * (1 - navigators.x / lateralMenu.width)), 1);
+ _slideTimer.reset();
+ _slideTimer.start();
+
+ }
+
+
+
]]>
</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="200" target="{navigators}" xTo="0"/>
+ <s:Move id="moveOut" duration="200" target="{navigators}" xTo="200"/>
</fx:Declarations>
- <s:ViewNavigator id="navigator" firstView="views.BlogView" width="100%" height="100%">
- <s:navigationContent>
- <s:Button icon="@Embed('assets/images/logo.png')" height="35" width="77" 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:Graphic>
+
+ <s:Group id="lateralMenu" width="225" y="0" height="100%">
+ <!--s:Graphic width="100%" height="100%" click="menuBackgroundHandler(event)">
+ <s:BitmapImage width="100%" height="100%" scaleMode="zoom" 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" itemRenderer="renderers.MenuRenderer" width="225" height="100%"
+ change="changeHandler(event)" contentBackgroundColor="#000000">
<s:ArrayList>
<fx:Object label="UI Components" type="separator"/>
<fx:Object label="ButtonBar" type="view" view="{ButtonBarView}"/>
@@ -167,5 +272,11 @@ limitations under the License.
</s:List>
</s:Group>
-
+ <s:Group id="navigators" width="{FlexGlobals.topLevelApplication.width}" height="{FlexGlobals.topLevelApplication.height}">
+ <s:ViewNavigator id="navigator" firstView="views.BlogView" width="100%" height="100%">
+ <s:navigationContent>
+ <s:Button icon="@Embed('assets/images/logo.png')" height="35" width="77" label="Menu" id="btn"/>
+ </s:navigationContent>
+ </s:ViewNavigator>
+ </s:Group>
</s:Application>
[03/22] git commit: [flex-examples] [refs/heads/develop] - code clean
up and credit to Madcomponets
Posted by bi...@apache.org.
code clean up and credit to Madcomponets
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/b0befe96
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/b0befe96
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/b0befe96
Branch: refs/heads/develop
Commit: b0befe9692dd04ee1a1cc091fbee8ea157f18e3a
Parents: 47e410b
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Tue Jan 7 16:43:38 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:26 2014 -0800
----------------------------------------------------------------------
tourdeflexmobile/src/TourDeFlexMobile.mxml | 41 ++++++++++---------------
1 file changed, 16 insertions(+), 25 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/b0befe96/tourdeflexmobile/src/TourDeFlexMobile.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml
index 9f7e9a3..6233421 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile.mxml
+++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml
@@ -74,16 +74,20 @@ limitations under the License.
protected var _slideTimer:Timer = new Timer(SLIDE_INTERVAL, STEPS);
public static const CLICKED:String = "slideOutClicked";
protected var _buttonEnabled:Boolean = true;
+ protected var _startX:Number;
+
protected function init(event:FlexEvent):void
{
btn.addEventListener(MouseEvent.CLICK, slideButtonHandler);
_slideTimer.addEventListener(TimerEvent.TIMER, doSlide);
- _slideTimer.addEventListener(TimerEvent.TIMER_COMPLETE, slideComplete);
-
+ _slideTimer.addEventListener(TimerEvent.TIMER_COMPLETE, slideComplete);
}
-
+/*******************************************
+ *used some code from Macomponents UISlideOutNavigation, replaced the actionscript elements with flex UI elements and was able to apply
+ *the same drag to close behavior
+*********************************************/
public function open(animated:Boolean = true):void
{
@@ -112,12 +116,12 @@ limitations under the License.
_slideTimer.reset();
_slideTimer.start();
}
- else {
+ else
+ {
navigators.x = 0;
}
}
-
-
+
protected function changeHandler(event:IndexChangeEvent):void
{
close();
@@ -125,13 +129,7 @@ limitations under the License.
navigator.pushView(componentsList.selectedItem.view);
}
- protected function menuBackgroundHandler(event:MouseEvent):void
- {
- isOpen = false;
- moveOut.play();
- }
- protected var _startX:Number;
protected function slideButtonHandler(event:Event):void
{
@@ -145,8 +143,7 @@ limitations under the License.
}
}
-
-
+
protected function mouseDown(event:MouseEvent):void
{
if (!navigators.mouseEnabled && mouseX > lateralMenu.width && mouseY > 45)
@@ -155,16 +152,13 @@ limitations under the License.
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
}
- }
-
+ }
protected function doSlide(event:TimerEvent):void
- {
-
+ {
var slideTimer:Timer = Timer(event.currentTarget);
var t:Number = slideTimer.currentCount/slideTimer.repeatCount;
- navigators.x = (navigators.mouseEnabled ? (1-t) : t) * lateralMenu.width;
-
+ navigators.x = (navigators.mouseEnabled ? (1-t) : t) * lateralMenu.width;
}
protected function slideComplete(event:TimerEvent):void
@@ -183,8 +177,7 @@ limitations under the License.
}
protected function mouseUp(event:MouseEvent):void
- {
-
+ {
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
navigators.mouseEnabled = navigators.mouseChildren = mouseX < lateralMenu.width / 2;
@@ -193,9 +186,7 @@ limitations under the License.
_slideTimer.start();
}
-
-
-
+
]]>
</fx:Script>
[21/22] git commit: [flex-examples] [refs/heads/develop] - Revert
"updated"
Posted by bi...@apache.org.
Revert "updated"
This reverts commit 955a7beb43bc0684b12538e8d9671d1bbbf4ff10.
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/c9bba0db
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/c9bba0db
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/c9bba0db
Branch: refs/heads/develop
Commit: c9bba0dbc87fca8442886af6668f23292e05974e
Parents: 955a7be
Author: OmPrakash Muppirala <bi...@gmail.com>
Authored: Tue Nov 4 11:10:00 2014 -0800
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:10:00 2014 -0800
----------------------------------------------------------------------
README.md | 6 ++++++
1 file changed, 6 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c9bba0db/README.md
----------------------------------------------------------------------
diff --git a/README.md b/README.md
index 2b971a6..7ff5b4c 100644
--- a/README.md
+++ b/README.md
@@ -4,3 +4,9 @@ flex-examples
Mirror of Apache Flex Examples
This is a modified version of the new TourDeFlexMobile application that was uploaded to the ApacheFlexExample.
+
+Some Additional code was added to mirror the behavior of the Android Facebook application. Click to slide the main navigator off exposing a list and use mouse events to slide the navigator closed.
+
+The code used to slide off the navigator and slide it back was used from the Madcomponents source code. I modified it to work in a flex environment. It is not as smooth as a pure Madcomonent app, because it does not use Stage3D.
+
+***Just added a new mousedown event to slide the top navigator off.***
\ No newline at end of file
[05/22] git commit: [flex-examples] [refs/heads/develop] - added a
busyIndicator to the first page to signify loading
Posted by bi...@apache.org.
added a busyIndicator to the first page to signify loading
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/7c9509bd
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/7c9509bd
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/7c9509bd
Branch: refs/heads/develop
Commit: 7c9509bd8fab0dff1beba06e3e5f8fbca0d3fb67
Parents: 8ef8de1
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Wed Jan 8 07:41:58 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:29 2014 -0800
----------------------------------------------------------------------
tourdeflexmobile/src/TourDeFlexMobile.mxml | 3 +--
tourdeflexmobile/src/views/BlogView.mxml | 6 ++++--
2 files changed, 5 insertions(+), 4 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/7c9509bd/tourdeflexmobile/src/TourDeFlexMobile.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml
index 6233421..9a0e36a 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile.mxml
+++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml
@@ -191,8 +191,7 @@ limitations under the License.
</fx:Script>
<fx:Declarations>
- <s:Move id="moveIn" duration="200" target="{navigators}" xTo="0"/>
- <s:Move id="moveOut" duration="200" target="{navigators}" xTo="200"/>
+
</fx:Declarations>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/7c9509bd/tourdeflexmobile/src/views/BlogView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/views/BlogView.mxml b/tourdeflexmobile/src/views/BlogView.mxml
index 6e9f5b3..ba729e3 100644
--- a/tourdeflexmobile/src/views/BlogView.mxml
+++ b/tourdeflexmobile/src/views/BlogView.mxml
@@ -18,7 +18,8 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="Apache Flex Blog" viewActivate="init(event)">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="Apache Flex Blog" viewActivate="init(event)">
<fx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
@@ -33,6 +34,7 @@ limitations under the License.
protected function resultHandler(event:ResultEvent):void
{
+ busyInc.visible= false;
for(var i:uint = 0; i<=event.result.channel.item.length()-1; i++){
StyleableTextField(textArea.textDisplay).htmlText += "<b>" + event.result.channel.item[i].title + "</b>" + "\n" + "<i>" + event.result.channel.item[i].pubDate + "</i>" + "\n\n" + event.result.channel.item[i].description + "\n\n";
}
@@ -48,5 +50,5 @@ limitations under the License.
</fx:Declarations>
<s:TextArea id="textArea" selectable="false" editable="false" skinClass="spark.skins.mobile.TextAreaSkin" left="5" right="5" top="5" bottom="5"/>
-
+ <s:BusyIndicator id="busyInc" width="40" height="40" horizontalCenter="0" verticalCenter="0" symbolColor="0xFFFFFF"/>
</s:View>
[09/22] git commit: [flex-examples] [refs/heads/develop] - added
screen shot
Posted by bi...@apache.org.
added screen shot
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/0bfb28ea
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/0bfb28ea
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/0bfb28ea
Branch: refs/heads/develop
Commit: 0bfb28ea8fd1191c10c8b2293fab44fb8aee458b
Parents: af437fd
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Tue Mar 4 08:37:52 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:35 2014 -0800
----------------------------------------------------------------------
tourdeflexmobile/slideoff.png | Bin 0 -> 15894 bytes
1 file changed, 0 insertions(+), 0 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/0bfb28ea/tourdeflexmobile/slideoff.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/slideoff.png b/tourdeflexmobile/slideoff.png
new file mode 100644
index 0000000..538d0f8
Binary files /dev/null and b/tourdeflexmobile/slideoff.png differ
Re: [04/22] git commit: [flex-examples] [refs/heads/develop] - Create README.md
Posted by OmPrakash Muppirala <bi...@gmail.com>.
Done fixing the README. Of course, please feel free to update it as you
see fit.
Thanks,
Om
On Tue, Nov 4, 2014 at 1:36 PM, OmPrakash Muppirala <bi...@gmail.com>
wrote:
> Awesome, thanks for the clarification. I will update the README to remove
> the reference to MadComponents code.
>
> Regards,
> Om
>
> On Tue, Nov 4, 2014 at 1:29 PM, Aaron Nash <an...@gmail.com> wrote:
>
>> Hi Om
>>
>> I did remove the code and rewrite it. I was previously using mouse events
>> to update the navigator position like in the madcomponents version. On the
>> updated version I am dragging the list out using startdragging on the menu.
>> I forgot to delete the readme file before I made the pull request.
>>
>> There is some code I commented out in the main application file. I was
>> experimenting with sliding the menu closed, could not get the behavior
>> correct. Again forgot to remove the code.
>>
>> Aaron
>> On Nov 4, 2014 4:21 PM, "OmPrakash Muppirala" <bi...@gmail.com>
>> wrote:
>>
>>> I am guessing we can remove that code and write it from scratch. Aaron,
>>> your thoughts?
>>>
>>> Thanks,
>>> Om
>>>
>>> On Tue, Nov 4, 2014 at 12:27 PM, Justin Mclean <ju...@me.com>
>>> wrote:
>>>
>>>> Hi,
>>>>
>>>> > +The code used to slide off the navigator and slide it back was used
>>>> from the Madcomponents source code. I modified it to work in a flex
>>>> environment. It is not as smooth as a pure Madcomonent app, because it does
>>>> not use Stage3D.
>>>>
>>>> How is it licensed?Looking at [1] it looks like it's MIT?
>>>>
>>>> Thanks,
>>>> Justin
>>>>
>>>> 1. https://code.google.com/p/mad-components/
>>>>
>>>>
>>>
>
Re: [04/22] git commit: [flex-examples] [refs/heads/develop] - Create README.md
Posted by OmPrakash Muppirala <bi...@gmail.com>.
Awesome, thanks for the clarification. I will update the README to remove
the reference to MadComponents code.
Regards,
Om
On Tue, Nov 4, 2014 at 1:29 PM, Aaron Nash <an...@gmail.com> wrote:
> Hi Om
>
> I did remove the code and rewrite it. I was previously using mouse events
> to update the navigator position like in the madcomponents version. On the
> updated version I am dragging the list out using startdragging on the menu.
> I forgot to delete the readme file before I made the pull request.
>
> There is some code I commented out in the main application file. I was
> experimenting with sliding the menu closed, could not get the behavior
> correct. Again forgot to remove the code.
>
> Aaron
> On Nov 4, 2014 4:21 PM, "OmPrakash Muppirala" <bi...@gmail.com>
> wrote:
>
>> I am guessing we can remove that code and write it from scratch. Aaron,
>> your thoughts?
>>
>> Thanks,
>> Om
>>
>> On Tue, Nov 4, 2014 at 12:27 PM, Justin Mclean <ju...@me.com>
>> wrote:
>>
>>> Hi,
>>>
>>> > +The code used to slide off the navigator and slide it back was used
>>> from the Madcomponents source code. I modified it to work in a flex
>>> environment. It is not as smooth as a pure Madcomonent app, because it does
>>> not use Stage3D.
>>>
>>> How is it licensed?Looking at [1] it looks like it's MIT?
>>>
>>> Thanks,
>>> Justin
>>>
>>> 1. https://code.google.com/p/mad-components/
>>>
>>>
>>
Re: [04/22] git commit: [flex-examples] [refs/heads/develop] - Create README.md
Posted by Aaron Nash <an...@gmail.com>.
Hi Om
I did remove the code and rewrite it. I was previously using mouse events
to update the navigator position like in the madcomponents version. On the
updated version I am dragging the list out using startdragging on the menu.
I forgot to delete the readme file before I made the pull request.
There is some code I commented out in the main application file. I was
experimenting with sliding the menu closed, could not get the behavior
correct. Again forgot to remove the code.
Aaron
On Nov 4, 2014 4:21 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
> I am guessing we can remove that code and write it from scratch. Aaron,
> your thoughts?
>
> Thanks,
> Om
>
> On Tue, Nov 4, 2014 at 12:27 PM, Justin Mclean <ju...@me.com>
> wrote:
>
>> Hi,
>>
>> > +The code used to slide off the navigator and slide it back was used
>> from the Madcomponents source code. I modified it to work in a flex
>> environment. It is not as smooth as a pure Madcomonent app, because it does
>> not use Stage3D.
>>
>> How is it licensed?Looking at [1] it looks like it's MIT?
>>
>> Thanks,
>> Justin
>>
>> 1. https://code.google.com/p/mad-components/
>>
>>
>
Re: [04/22] git commit: [flex-examples] [refs/heads/develop] - Create README.md
Posted by OmPrakash Muppirala <bi...@gmail.com>.
I am guessing we can remove that code and write it from scratch. Aaron,
your thoughts?
Thanks,
Om
On Tue, Nov 4, 2014 at 12:27 PM, Justin Mclean <ju...@me.com> wrote:
> Hi,
>
> > +The code used to slide off the navigator and slide it back was used
> from the Madcomponents source code. I modified it to work in a flex
> environment. It is not as smooth as a pure Madcomonent app, because it does
> not use Stage3D.
>
> How is it licensed?Looking at [1] it looks like it's MIT?
>
> Thanks,
> Justin
>
> 1. https://code.google.com/p/mad-components/
>
>
Re: [04/22] git commit: [flex-examples] [refs/heads/develop] - Create
README.md
Posted by Justin Mclean <ju...@me.com>.
Hi,
> +The code used to slide off the navigator and slide it back was used from the Madcomponents source code. I modified it to work in a flex environment. It is not as smooth as a pure Madcomonent app, because it does not use Stage3D.
How is it licensed?Looking at [1] it looks like it's MIT?
Thanks,
Justin
1. https://code.google.com/p/mad-components/
[04/22] git commit: [flex-examples] [refs/heads/develop] - Create
README.md
Posted by bi...@apache.org.
Create README.md
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/8ef8de13
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/8ef8de13
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/8ef8de13
Branch: refs/heads/develop
Commit: 8ef8de13847ca89e035fa4b6781cfaccf3239db9
Parents: b0befe9
Author: Aaron Nash <an...@gmail.com>
Authored: Tue Jan 7 16:50:43 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:27 2014 -0800
----------------------------------------------------------------------
README.md | 11 +++++++++++
1 file changed, 11 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/8ef8de13/README.md
----------------------------------------------------------------------
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..843d52e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,11 @@
+flex-examples
+=============
+
+Mirror of Apache Flex Examples
+
+This is a modified version of the new TourDeFlexMobile application that was uploaded to the ApacheFlexExample.
+
+Some Additional code was added to mirror the behavior of the Android Facebook application. Click to slide the main navigator off exposing a list and use mouse events to slide the navigator closed.
+
+The code used to slide off the navigator and slide it back was used from the Madcomponents source code. I modified it to work in a flex environment. It is not as smooth as a pure Madcomonent app, because it does not use Stage3D.
+
[06/22] git commit: [flex-examples] [refs/heads/develop] - code clean
up
Posted by bi...@apache.org.
code clean up
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/975d032c
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/975d032c
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/975d032c
Branch: refs/heads/develop
Commit: 975d032c2eab8f8c664d4226232812907d090931
Parents: 7c9509b
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Wed Jan 8 07:52:40 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:31 2014 -0800
----------------------------------------------------------------------
tourdeflexmobile/src/TourDeFlexMobile.mxml | 3 +--
tourdeflexmobile/src/views/BlogView.mxml | 3 ++-
2 files changed, 3 insertions(+), 3 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/975d032c/tourdeflexmobile/src/TourDeFlexMobile.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml
index 9a0e36a..71a2704 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile.mxml
+++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml
@@ -196,8 +196,7 @@ limitations under the License.
- <s:Group id="lateralMenu" width="225" y="0" height="100%">
-
+ <s:Group id="lateralMenu" width="225" y="0" height="100%">
<s:List id="componentsList" itemRenderer="renderers.MenuRenderer" width="225" height="100%"
change="changeHandler(event)" contentBackgroundColor="#000000">
<s:ArrayList>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/975d032c/tourdeflexmobile/src/views/BlogView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/views/BlogView.mxml b/tourdeflexmobile/src/views/BlogView.mxml
index ba729e3..3291ec8 100644
--- a/tourdeflexmobile/src/views/BlogView.mxml
+++ b/tourdeflexmobile/src/views/BlogView.mxml
@@ -19,7 +19,8 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- title="Apache Flex Blog" viewActivate="init(event)">
+ title="Apache Flex Blog"
+ viewActivate="init(event)">
<fx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
[18/22] git commit: [flex-examples] [refs/heads/develop] - added in
Android Skins
Posted by bi...@apache.org.
added in Android Skins
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/539852e9
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/539852e9
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/539852e9
Branch: refs/heads/develop
Commit: 539852e984111a284dfda239de6f2d26e42b2e5e
Parents: 1f0cce9
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Tue Nov 4 13:00:50 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:41 2014 -0800
----------------------------------------------------------------------
tourdeflexmobile/slideoff.png | Bin 15894 -> 0 bytes
.../src/spark/skins/android4/ActionBarSkin.as | 725 +++++++++++++++
.../skins/android4/ButtonBarFirstButtonSkin.as | 93 ++
.../skins/android4/ButtonBarMiddleButtonSkin.as | 95 ++
.../src/spark/skins/android4/ButtonBarSkin.as | 166 ++++
.../src/spark/skins/android4/ButtonSkin.as | 397 +++++++++
.../src/spark/skins/android4/CalloutSkin.as | 825 +++++++++++++++++
.../src/spark/skins/android4/CheckBoxSkin.as | 268 ++++++
.../src/spark/skins/android4/DateSpinnerSkin.as | 153 ++++
.../src/spark/skins/android4/HScrollBarSkin.as | 205 +++++
.../spark/skins/android4/HScrollBarThumbSkin.as | 169 ++++
.../src/spark/skins/android4/HSliderSkin.as | 293 ++++++
.../spark/skins/android4/HSliderThumbSkin.as | 333 +++++++
.../spark/skins/android4/HSliderTrackSkin.as | 227 +++++
.../src/spark/skins/android4/ListSkin.as | 204 +++++
.../android4/MobileGridHeaderButtonBarSkin.as | 90 ++
.../src/spark/skins/android4/MobileGridSkin.as | 159 ++++
.../src/spark/skins/android4/RadioButtonSkin.as | 253 ++++++
.../android4/ScrollingStageTextAreaSkin.as | 53 ++
.../android4/ScrollingStageTextInputSkin.as | 54 ++
.../skins/android4/SpinnerListContainerSkin.as | 327 +++++++
.../skins/android4/SpinnerListScrollerSkin.mxml | 94 ++
.../src/spark/skins/android4/SpinnerListSkin.as | 293 ++++++
.../skins/android4/SplitViewNavigatorSkin.as | 157 ++++
.../spark/skins/android4/StageTextAreaSkin.as | 185 ++++
.../spark/skins/android4/StageTextInputSkin.as | 130 +++
.../android4/TabbedViewNavigatorTabBarSkin.as | 122 +++
.../skins/android4/TextAreaHScrollBarSkin.as | 105 +++
.../android4/TextAreaHScrollBarThumbSkin.as | 116 +++
.../src/spark/skins/android4/TextAreaSkin.as | 892 +++++++++++++++++++
.../skins/android4/TextAreaVScrollBarSkin.as | 105 +++
.../android4/TextAreaVScrollBarThumbSkin.as | 117 +++
.../src/spark/skins/android4/TextInputSkin.as | 375 ++++++++
.../spark/skins/android4/ToggleSwitchSkin.as | 506 +++++++++++
.../android4/TransparentActionButtonSkin.as | 108 +++
.../android4/TransparentNavigationButtonSkin.as | 109 +++
.../src/spark/skins/android4/VScrollBarSkin.as | 207 +++++
.../spark/skins/android4/VScrollBarThumbSkin.as | 178 ++++
.../spark/skins/android4/ViewMenuItemSkin.as | 238 +++++
.../src/spark/skins/android4/ViewMenuSkin.mxml | 184 ++++
.../android4/assets/ActionBarBackground.fxg | 55 ++
.../skins/android4/assets/BusyIndicator.fxg | 64 ++
.../assets/ButtonBarFirstButton_down.fxg | 34 +
.../ButtonBarFirstButton_selectedDown.fxg | 39 +
.../assets/ButtonBarFirstButton_selectedUp.fxg | 34 +
.../android4/assets/ButtonBarFirstButton_up.fxg | 29 +
.../assets/ButtonBarMiddleButton_down.fxg | 70 ++
.../ButtonBarMiddleButton_selectedDown.fxg | 75 ++
.../assets/ButtonBarMiddleButton_selectedUp.fxg | 70 ++
.../assets/ButtonBarMiddleButton_up.fxg | 65 ++
.../spark/skins/android4/assets/Button_down.fxg | 73 ++
.../spark/skins/android4/assets/Button_up.fxg | 60 ++
.../assets/CalloutContentBackground.fxg | 51 ++
.../skins/android4/assets/CheckBox_down.fxg | 34 +
.../android4/assets/CheckBox_downSelected.fxg | 35 +
.../assets/CheckBox_downSymbolSelected.fxg | 29 +
.../spark/skins/android4/assets/CheckBox_up.fxg | 31 +
.../android4/assets/CheckBox_upSelected.fxg | 29 +
.../assets/CheckBox_upSymbolSelected.fxg | 33 +
.../android4/assets/HSliderThumb_normal.fxg | 34 +
.../android4/assets/HSliderThumb_pressed.fxg | 39 +
.../skins/android4/assets/HSliderTrack.fxg | 29 +
.../android4/assets/HSliderTrack_filled.fxg | 29 +
.../skins/android4/assets/RadioButton_down.fxg | 34 +
.../assets/RadioButton_downSymbolSelected.fxg | 29 +
.../skins/android4/assets/RadioButton_up.fxg | 29 +
.../assets/RadioButton_upSymbolSelected.fxg | 36 +
.../assets/SpinnerListContainerBackground.fxg | 48 +
.../SpinnerListContainerSelectionIndicator.fxg | 45 +
.../assets/SpinnerListContainerShadow.fxg | 40 +
.../skins/android4/assets/TextInput_border.fxg | 34 +
.../assets/TextInput_border_Rectangle.fxg | 28 +
.../assets/TextInput_border_Rectangle_focus.fxg | 28 +
.../android4/assets/TextInput_border_focus.fxg | 34 +
.../android4/assets/ToggleSwitchBackground.fxg | 29 +
.../android4/assets/ToggleSwitchThumb_off.fxg | 40 +
.../android4/assets/ToggleSwitchThumb_on.fxg | 40 +
.../assets/TransparentActionButton_down.fxg | 69 ++
.../assets/TransparentActionButton_up.fxg | 59 ++
.../assets/TransparentNavigationButton_down.fxg | 69 ++
.../assets/TransparentNavigationButton_up.fxg | 59 ++
.../skins/android4/assets/ViewMenuItem_down.fxg | 36 +
.../android4/assets/ViewMenuItem_showsCaret.fxg | 36 +
.../skins/android4/assets/ViewMenuItem_up.fxg | 35 +
.../skins/android4/assets/fonts/Roboto-Bold.ttf | Bin 0 -> 84924 bytes
.../android4/assets/fonts/Roboto-Regular.ttf | Bin 0 -> 84564 bytes
.../android4/supportClasses/CalloutArrow.as | 457 ++++++++++
.../supportClasses/StageTextSkinBase.as | 402 +++++++++
.../android4/supportClasses/TextSkinBase.as | 213 +++++
89 files changed, 12280 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/slideoff.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/slideoff.png b/tourdeflexmobile/slideoff.png
deleted file mode 100644
index 538d0f8..0000000
Binary files a/tourdeflexmobile/slideoff.png and /dev/null differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ActionBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ActionBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/ActionBarSkin.as
new file mode 100644
index 0000000..f1ef220
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ActionBarSkin.as
@@ -0,0 +1,725 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+ import flash.display.GradientType;
+ import flash.events.Event;
+ import flash.text.TextFormatAlign;
+
+ import mx.core.DPIClassification;
+ import mx.core.mx_internal;
+ import mx.utils.ColorUtil;
+
+ import spark.components.ActionBar;
+ import spark.components.Group;
+ import spark.components.supportClasses.StyleableTextField;
+ import spark.core.SpriteVisualElement;
+ import spark.layouts.HorizontalAlign;
+ import spark.layouts.HorizontalLayout;
+ import spark.layouts.VerticalAlign;
+ import spark.skins.android4.assets.ActionBarBackground;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+
+ /**
+ * The default skin class for the Spark ActionBar component in mobile
+ * applications.
+ *
+ * @see spark.components.ActionBar
+ * @see spark.skins.mobile.TransparentNavigationButtonSkin
+ * @see spark.skins.mobile.BeveledBackButtonSkin
+ * @see spark.skins.mobile.TransparentActionButtonSkin
+ * @see spark.skins.mobile.BeveledActionButtonSkin
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class ActionBarSkin extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Class constants
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ mx_internal static const ACTIONBAR_CHROME_COLOR_RATIOS:Array = [0, 80];
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function ActionBarSkin()
+ {
+ super();
+
+ borderClass = spark.skins.android4.assets.ActionBarBackground;
+
+ switch (applicationDPI)
+ {
+
+ case DPIClassification.DPI_640:
+ {
+ borderSize = 2;
+ layoutContentGroupHeight = 172;
+ layoutTitleGroupHorizontalPadding = 52;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ borderSize = 2;
+ layoutContentGroupHeight = 130;
+ layoutTitleGroupHorizontalPadding = 40;
+
+
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ borderSize = 2;
+ layoutContentGroupHeight = 86;
+ layoutTitleGroupHorizontalPadding = 26;
+
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ borderSize = 1;
+ layoutContentGroupHeight = 65;
+ layoutTitleGroupHorizontalPadding = 20;
+
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ borderSize = 1;
+ layoutContentGroupHeight = 32;
+ layoutTitleGroupHorizontalPadding = 10;
+
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+ borderSize = 1;
+ layoutContentGroupHeight = 43;
+ layoutTitleGroupHorizontalPadding = 13;
+
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Graphics variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * FXG Class reference for the ActionBar background border graphic.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var borderClass:Class;
+
+ //--------------------------------------------------------------------------
+ //
+ // Layout variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ private var borderSize:uint;
+
+ /**
+ * Default height for navigationGroup, titleGroup and actionGroup.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var layoutContentGroupHeight:uint;
+
+ /**
+ * Default horizontal padding for the titleGroup and titleDisplay.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var layoutTitleGroupHorizontalPadding:uint;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:ActionBar;
+
+ /**
+ * @private
+ */
+ private var _navigationVisible:Boolean = false;
+
+ /**
+ * @private
+ */
+ private var _titleContentVisible:Boolean = false;
+
+ /**
+ * @private
+ */
+ private var _actionVisible:Boolean = false;
+
+ /**
+ * @private
+ */
+ private var border:SpriteVisualElement;
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.components.ActionBar#navigationGroup
+ */
+ public var navigationGroup:Group;
+
+ /**
+ * @copy spark.components.ActionBar#titleGroup
+ */
+ public var titleGroup:Group;
+
+ /**
+ * @copy spark.components.ActionBar#actionGroup
+ */
+ public var actionGroup:Group;
+
+ /**
+ * @copy spark.components.ActionBar#titleDisplay
+ *
+ * @private
+ * Wraps a StyleableTextField in a UIComponent to be compatible with
+ * ViewTransition effects.
+ */
+ public var titleDisplay:TitleDisplayComponent;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ if (borderClass)
+ {
+ border = new borderClass();
+ addChild(border);
+ }
+
+ navigationGroup = new Group();
+ var hLayout:HorizontalLayout = new HorizontalLayout();
+ hLayout.horizontalAlign = HorizontalAlign.LEFT;
+ hLayout.verticalAlign = VerticalAlign.MIDDLE;
+ hLayout.gap = 0;
+ hLayout.paddingLeft = hLayout.paddingTop = hLayout.paddingRight = hLayout.paddingBottom = 0;
+ navigationGroup.layout = hLayout;
+ navigationGroup.id = "navigationGroup";
+
+ titleGroup = new Group();
+ hLayout = new HorizontalLayout();
+ hLayout.horizontalAlign = HorizontalAlign.LEFT;
+ hLayout.verticalAlign = VerticalAlign.MIDDLE;
+ hLayout.gap = 0;
+ hLayout.paddingLeft = hLayout.paddingRight = layoutTitleGroupHorizontalPadding;
+ hLayout.paddingTop = hLayout.paddingBottom = 0;
+ titleGroup.layout = hLayout;
+ titleGroup.id = "titleGroup";
+
+ actionGroup = new Group();
+ hLayout = new HorizontalLayout();
+ hLayout.horizontalAlign = HorizontalAlign.RIGHT;
+ hLayout.verticalAlign = VerticalAlign.MIDDLE;
+ hLayout.gap = 0;
+ hLayout.paddingLeft = hLayout.paddingTop = hLayout.paddingRight = hLayout.paddingBottom = 0;
+ actionGroup.layout = hLayout;
+ actionGroup.id = "actionGroup";
+
+ titleDisplay = new TitleDisplayComponent();
+ titleDisplay.id = "titleDisplay";
+
+ // initialize titleAlign style (center is managed explicitly in layoutContents)
+ var titleAlign:String = getStyle("titleAlign");
+ titleAlign = (titleAlign == "center") ? TextFormatAlign.LEFT : titleAlign;
+ titleDisplay.setStyle("textAlign", titleAlign);
+
+ addChild(navigationGroup);
+ addChild(titleGroup);
+ addChild(actionGroup);
+ addChild(titleDisplay);
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ var titleWidth:Number = 0;
+ var titleHeight:Number = 0;
+
+ if (_titleContentVisible)
+ {
+ titleWidth = titleGroup.getPreferredBoundsWidth();
+ titleHeight = titleGroup.getPreferredBoundsHeight();
+ }
+ else
+ {
+ // use titleLayout for paddingLeft and paddingRight
+ var layoutObject:Object = hostComponent.titleLayout;
+ titleWidth = ((layoutObject.paddingLeft) ? Number(layoutObject.paddingLeft) : 0)
+ + ((layoutObject.paddingRight) ? Number(layoutObject.paddingRight) : 0)
+ + titleDisplay.getPreferredBoundsWidth();
+
+ titleHeight = titleDisplay.getPreferredBoundsHeight();
+ }
+
+ measuredWidth =
+ getStyle("paddingLeft")
+ + navigationGroup.getPreferredBoundsWidth()
+ + titleWidth
+ + actionGroup.getPreferredBoundsWidth()
+ + getStyle("paddingRight");
+
+ // measuredHeight is contentGroupHeight, 2x border on top and bottom
+ measuredHeight =
+ getStyle("paddingTop")
+ + Math.max(layoutContentGroupHeight,
+ navigationGroup.getPreferredBoundsHeight(),
+ actionGroup.getPreferredBoundsHeight(),
+ titleHeight)
+ + getStyle("paddingBottom");
+ }
+
+ /**
+ * @private
+ */
+ override protected function commitCurrentState():void
+ {
+ super.commitCurrentState();
+
+ _titleContentVisible = currentState.indexOf("titleContent") >= 0;
+ _navigationVisible = currentState.indexOf("Navigation") >= 0;
+ _actionVisible = currentState.indexOf("Action") >= 0;
+
+ invalidateSize();
+ invalidateDisplayList();
+ }
+
+ /**
+ * @private
+ */
+ override public function styleChanged(styleProp:String):void
+ {
+ if (titleDisplay)
+ {
+ var allStyles:Boolean = !styleProp || styleProp == "styleName";
+
+ if (allStyles || (styleProp == "titleAlign"))
+ {
+ var titleAlign:String = getStyle("titleAlign");
+
+ if (titleAlign == "center")
+ {
+ // If the title align is set to center, the alignment is set to LEFT
+ // so that the skin can manually center the component in layoutContents
+ titleDisplay.setStyle("textAlign", TextFormatAlign.LEFT);
+ }
+ else
+ {
+ titleDisplay.setStyle("textAlign", titleAlign);
+ }
+ }
+ }
+
+ super.styleChanged(styleProp);
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ var navigationGroupWidth:Number = 0;
+
+ var paddingLeft:Number = getStyle("paddingLeft");
+ var paddingRight:Number = getStyle("paddingRight");
+ var paddingTop:Number = getStyle("paddingTop");
+ var paddingBottom:Number = getStyle("paddingBottom");
+
+ var titleCompX:Number = paddingLeft;
+ var titleCompWidth:Number = 0;
+
+ var actionGroupX:Number = unscaledWidth;
+ var actionGroupWidth:Number = 0;
+
+ // remove top and bottom padding from content group height
+ var contentGroupsHeight:Number = Math.max(0, unscaledHeight - paddingTop - paddingBottom);
+
+ if (border)
+ {
+ // FXG uses scale-9, drop shadow is drawn outside the bounds
+ setElementSize(border, unscaledWidth, unscaledHeight);
+ }
+
+ // position groups, overlap of navigation and action groups is allowed
+ // when overlap occurs, titleDisplay/titleGroup is not visible
+ if (_navigationVisible)
+ {
+ navigationGroupWidth = navigationGroup.getPreferredBoundsWidth();
+ titleCompX += navigationGroupWidth;
+
+ setElementSize(navigationGroup, navigationGroupWidth, contentGroupsHeight);
+ setElementPosition(navigationGroup, paddingLeft, paddingTop);
+ }
+
+ if (_actionVisible)
+ {
+ // actionGroup x position can be negative
+ actionGroupWidth = actionGroup.getPreferredBoundsWidth();
+ actionGroupX = unscaledWidth - actionGroupWidth - paddingRight;
+
+ setElementSize(actionGroup, actionGroupWidth, contentGroupsHeight);
+ setElementPosition(actionGroup, actionGroupX, paddingTop);
+ }
+
+ // titleGroup or titleDisplay is given remaining width after navigation
+ // and action groups preferred widths
+ titleCompWidth = unscaledWidth - navigationGroupWidth - actionGroupWidth
+ - paddingLeft - paddingRight;
+
+ if (titleCompWidth <= 0)
+ {
+ titleDisplay.visible = false;
+ titleGroup.visible = false;
+ }
+ else if (_titleContentVisible)
+ {
+ titleDisplay.visible = false;
+ titleGroup.visible = true;
+
+ // use titleGroup for titleContent
+ setElementSize(titleGroup, titleCompWidth, contentGroupsHeight);
+ setElementPosition(titleGroup, titleCompX, paddingTop);
+ }
+ else
+ {
+ // use titleDisplay for title text label
+ titleGroup.visible = false;
+
+ // use titleLayout for paddingLeft and paddingRight
+ var layoutObject:Object = hostComponent.titleLayout;
+ var titlePaddingLeft:Number = (layoutObject.paddingLeft) ? Number(layoutObject.paddingLeft) : 0;
+ var titlePaddingRight:Number = (layoutObject.paddingRight) ? Number(layoutObject.paddingRight) : 0;
+
+ // align titleDisplay to the absolute center
+ var titleAlign:String = getStyle("titleAlign");
+
+ // check for available width after padding
+ if ((titleCompWidth - titlePaddingLeft - titlePaddingRight) <= 0)
+ {
+ titleCompX = 0;
+ titleCompWidth = 0;
+ }
+ else if (titleAlign == "center")
+ {
+ // use LEFT instead of CENTER
+ titleCompWidth = titleDisplay.getExplicitOrMeasuredWidth();
+
+ // use x position of titleDisplay to implement CENTER
+ titleCompX = Math.round((unscaledWidth - titleCompWidth) / 2);
+
+ var navigationOverlap:Number = navigationGroupWidth + titlePaddingLeft - titleCompX;
+ var actionOverlap:Number = (titleCompX + titleCompWidth + titlePaddingRight) - actionGroupX;
+
+ // shrink and/or move titleDisplay width if there is any
+ // overlap after centering
+ if ((navigationOverlap > 0) && (actionOverlap > 0))
+ {
+ // remaining width
+ titleCompX = navigationGroupWidth + titlePaddingLeft;
+ titleCompWidth = unscaledWidth - navigationGroupWidth - actionGroupWidth - titlePaddingLeft - titlePaddingRight;
+ }
+ else if ((navigationOverlap > 0) || (actionOverlap > 0))
+ {
+ if (navigationOverlap > 0)
+ {
+ // nudge to the right
+ titleCompX += navigationOverlap;
+ }
+ else if (actionOverlap > 0)
+ {
+ // nudge to the left
+ titleCompX -= actionOverlap;
+
+ // force left padding
+ if (titleCompX < (navigationGroupWidth + titlePaddingLeft))
+ titleCompX = navigationGroupWidth + titlePaddingLeft;
+ }
+
+ // recompute action overlap and force right padding
+ actionOverlap = (titleCompX + titleCompWidth + titlePaddingRight) - actionGroupX;
+
+ if (actionOverlap > 0)
+ titleCompWidth -= actionOverlap;
+ }
+ }
+ else
+ {
+ // implement padding by adjusting width and position
+ titleCompX += titlePaddingLeft;
+ titleCompWidth = titleCompWidth - titlePaddingLeft - titlePaddingRight;
+ }
+
+ // check for negative width
+ titleCompWidth = (titleCompWidth < 0) ? 0 : titleCompWidth;
+
+ setElementSize(titleDisplay, titleCompWidth, contentGroupsHeight);
+ setElementPosition(titleDisplay, titleCompX, paddingTop);
+
+ titleDisplay.visible = true;
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ var chromeColor:uint = getStyle("chromeColor");
+ var backgroundAlphaValue:Number = getStyle("backgroundAlpha");
+ var colors:Array = [];
+
+ // apply alpha to chromeColor fill only
+ var backgroundAlphas:Array = [backgroundAlphaValue, backgroundAlphaValue];
+
+ // exclude top and bottom 1px borders
+ colorMatrix.createGradientBox(unscaledWidth, unscaledHeight - (borderSize * 2), Math.PI / 2, 0, 0);
+
+ colors[0] = ColorUtil.adjustBrightness2(chromeColor, 20);
+ colors[1] = chromeColor;
+
+ graphics.beginGradientFill(GradientType.LINEAR, colors, backgroundAlphas, ACTIONBAR_CHROME_COLOR_RATIOS, colorMatrix);
+ graphics.drawRect(0, borderSize, unscaledWidth, unscaledHeight - (borderSize * 2));
+ graphics.endFill();
+ }
+
+ }
+}
+import flash.events.Event;
+
+import mx.core.UIComponent;
+import mx.core.mx_internal;
+import mx.events.FlexEvent;
+
+import spark.components.supportClasses.StyleableTextField;
+import spark.core.IDisplayText;
+
+use namespace mx_internal;
+
+/**
+ * @private
+ * Component that holds StyleableTextFields to produce a drop shadow effect.
+ * Combines label and shadow into a single component to allow transitions to
+ * target them both.
+ */
+class TitleDisplayComponent extends UIComponent implements IDisplayText
+{
+ private var titleDisplay:StyleableTextField;
+ private var titleDisplayShadow:StyleableTextField;
+ private var title:String;
+ private var titleChanged:Boolean;
+
+ public function TitleDisplayComponent()
+ {
+ super();
+ title = "";
+ }
+
+ override public function get baselinePosition():Number
+ {
+ return titleDisplay.baselinePosition;
+ }
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ super.createChildren();
+
+ titleDisplay = StyleableTextField(createInFontContext(StyleableTextField));
+ titleDisplay.styleName = this;
+ titleDisplay.editable = false;
+ titleDisplay.selectable = false;
+ titleDisplay.multiline = false;
+ titleDisplay.wordWrap = false;
+ titleDisplay.addEventListener(FlexEvent.VALUE_COMMIT,
+ titleDisplay_valueCommitHandler);
+
+ titleDisplayShadow =
+ StyleableTextField(createInFontContext(StyleableTextField));
+ titleDisplayShadow.styleName = this;
+ titleDisplayShadow.colorName = "textShadowColor";
+ titleDisplayShadow.editable = false;
+ titleDisplayShadow.selectable = false;
+ titleDisplayShadow.multiline = false;
+ titleDisplayShadow.wordWrap = false;
+
+ addChild(titleDisplayShadow);
+ addChild(titleDisplay);
+ }
+
+ /**
+ * @private
+ */
+ override protected function commitProperties():void
+ {
+ super.commitProperties();
+
+ if (titleChanged)
+ {
+ titleDisplay.text = title;
+
+ invalidateSize();
+ invalidateDisplayList();
+
+ titleChanged = false;
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ // reset text if it was truncated before.
+ if (titleDisplay.isTruncated)
+ titleDisplay.text = title;
+
+ measuredWidth = titleDisplay.getPreferredBoundsWidth();
+
+ // tightTextHeight
+ measuredHeight = titleDisplay.getPreferredBoundsHeight();
+ }
+
+ /**
+ * @private
+ */
+ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+
+ // reset text if it was truncated before.
+ if (titleDisplay.isTruncated)
+ titleDisplay.text = title;
+ titleDisplay.commitStyles();
+
+ // use preferred height, setLayoutBoundsSize will accommodate for tight
+ // text adjustment
+ var tightHeight:Number = titleDisplay.getPreferredBoundsHeight();
+ var tightY:Number = (unscaledHeight - tightHeight) / 2;
+
+ titleDisplay.setLayoutBoundsSize(unscaledWidth, tightHeight);
+ titleDisplay.setLayoutBoundsPosition(0, (unscaledHeight - tightHeight) / 2);
+
+ // now truncate the text
+ titleDisplay.truncateToFit();
+
+ titleDisplayShadow.commitStyles();
+ titleDisplayShadow.setLayoutBoundsSize(unscaledWidth, tightHeight);
+ titleDisplayShadow.setLayoutBoundsPosition(0, tightY + 1);
+
+ titleDisplayShadow.alpha = getStyle("textShadowAlpha");
+
+ // if labelDisplay is truncated, then push it down here as well.
+ // otherwise, it would have gotten pushed in the labelDisplay_valueCommitHandler()
+ if (titleDisplay.isTruncated)
+ titleDisplayShadow.text = titleDisplay.text;
+ }
+
+ /**
+ * @private
+ */
+ private function titleDisplay_valueCommitHandler(event:Event):void
+ {
+ titleDisplayShadow.text = titleDisplay.text;
+ }
+
+ public function get text():String
+ {
+ return title;
+ }
+
+ public function set text(value:String):void
+ {
+ title = value;
+ titleChanged = true;
+
+ invalidateProperties();
+ }
+
+ public function get isTruncated():Boolean
+ {
+ return titleDisplay.isTruncated;
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ButtonBarFirstButtonSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ButtonBarFirstButtonSkin.as b/tourdeflexmobile/src/spark/skins/android4/ButtonBarFirstButtonSkin.as
new file mode 100644
index 0000000..4b8cbba
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ButtonBarFirstButtonSkin.as
@@ -0,0 +1,93 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+ import spark.skins.android4.assets.ButtonBarFirstButton_selectedDown;
+ import spark.skins.android4.assets.ButtonBarFirstButton_selectedUp;
+ import spark.skins.mobile.supportClasses.ButtonBarButtonSkinBase;
+
+ /**
+ * Android 4.x specific Button skin for the first Button in a ButtonBar.
+ *
+ * @see spark.components.ButtonBar#firstButton
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class ButtonBarFirstButtonSkin extends ButtonBarButtonSkinBase
+ {
+
+ /**
+ * Class to use for the border in the selected and down state.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var selectedDownBorderSkin:Class;
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function ButtonBarFirstButtonSkin()
+ {
+ super();
+
+ upBorderSkin = spark.skins.android4.assets.ButtonBarFirstButton_up;
+ downBorderSkin = spark.skins.android4.assets.ButtonBarFirstButton_down;
+ selectedBorderSkin = spark.skins.android4.assets.ButtonBarFirstButton_selectedUp;
+ selectedDownBorderSkin = spark.skins.android4.assets.ButtonBarFirstButton_selectedDown;
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ //Dont draw background
+ }
+
+ override protected function getBorderClassForCurrentState():Class
+ {
+ var isSelected:Boolean = currentState.indexOf("Selected") >= 0;
+ var isDown:Boolean = currentState.indexOf("down") >= 0;
+
+ if (isSelected && !isDown )
+ return selectedBorderSkin;
+ else if (isSelected && isDown)
+ return selectedDownBorderSkin;
+ else if (!isSelected && !isDown)
+ return upBorderSkin;
+ else
+ return downBorderSkin;
+ }
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ButtonBarMiddleButtonSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ButtonBarMiddleButtonSkin.as b/tourdeflexmobile/src/spark/skins/android4/ButtonBarMiddleButtonSkin.as
new file mode 100644
index 0000000..c6206d0
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ButtonBarMiddleButtonSkin.as
@@ -0,0 +1,95 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+
+ import spark.skins.android4.assets.ButtonBarMiddleButton_selectedDown;
+ import spark.skins.android4.assets.ButtonBarMiddleButton_selectedUp;
+ import spark.skins.android4.assets.ButtonBarMiddleButton_up;
+ import spark.skins.mobile.supportClasses.ButtonBarButtonSkinBase;
+
+ /**
+ * Android 4.x specific Button skin for middle Buttons in a ButtonBar.
+ *
+ * @see spark.components.ButtonBar#middleButton
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class ButtonBarMiddleButtonSkin extends ButtonBarButtonSkinBase
+ {
+
+ /**
+ * Class to use for the border in the selected and down state.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var selectedDownBorderSkin:Class;
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function ButtonBarMiddleButtonSkin()
+ {
+ super();
+
+ upBorderSkin = spark.skins.android4.assets.ButtonBarMiddleButton_up;
+ downBorderSkin = spark.skins.android4.assets.ButtonBarMiddleButton_down;
+ selectedBorderSkin = spark.skins.android4.assets.ButtonBarMiddleButton_selectedUp;
+ selectedDownBorderSkin = spark.skins.android4.assets.ButtonBarMiddleButton_selectedDown;
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ //Dont draw background
+ }
+
+ override protected function getBorderClassForCurrentState():Class
+ {
+ var isSelected:Boolean = currentState.indexOf("Selected") >= 0;
+ var isDown:Boolean = currentState.indexOf("down") >= 0;
+
+ if (isSelected && !isDown )
+ return selectedBorderSkin;
+ else if (isSelected && isDown)
+ return selectedDownBorderSkin;
+ else if (!isSelected && !isDown)
+ return upBorderSkin;
+ else
+ return downBorderSkin;
+ }
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ButtonBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ButtonBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/ButtonBarSkin.as
new file mode 100644
index 0000000..4b194fd
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ButtonBarSkin.as
@@ -0,0 +1,166 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+import spark.components.ButtonBar;
+import spark.components.ButtonBarButton;
+import spark.components.DataGroup;
+import spark.components.supportClasses.ButtonBarHorizontalLayout;
+import spark.skins.android4.ButtonBarFirstButtonSkin;
+import spark.skins.mobile.ButtonBarLastButtonSkin;
+import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+/**
+ * The Android 4.x specific skin class for the Spark ButtonBar component.
+ *
+ * @see spark.components.ButtonBar
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+public class ButtonBarSkin extends MobileSkin
+{
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function ButtonBarSkin()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:ButtonBar;
+
+ /**
+ * @copy spark.components.ButtonBar#firstButton
+ */
+ public var firstButton:ButtonBarButtonClassFactory;
+
+ /**
+ * @copy spark.components.ButtonBar#lastButton
+ */
+ public var lastButton:ButtonBarButtonClassFactory;
+
+ /**
+ * @copy spark.components.ButtonBar#middleButton
+ */
+ public var middleButton:ButtonBarButtonClassFactory;
+
+ /**
+ * @copy spark.components.SkinnableDataContainer#dataGroup
+ */
+ public var dataGroup:DataGroup;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ // Set up the class factories for the buttons
+ if (!firstButton)
+ {
+ firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+ firstButton.skinClass = spark.skins.android4.ButtonBarFirstButtonSkin;
+ }
+
+ if (!lastButton)
+ {
+ lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+ lastButton.skinClass = spark.skins.android4.ButtonBarFirstButtonSkin;
+ }
+
+ if (!middleButton)
+ {
+ middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+ middleButton.skinClass = spark.skins.android4.ButtonBarMiddleButtonSkin;
+ }
+
+ // create the data group to house the buttons
+ if (!dataGroup)
+ {
+ dataGroup = new DataGroup();
+ var hLayout:ButtonBarHorizontalLayout = new ButtonBarHorizontalLayout();
+ hLayout.gap = 0;
+ dataGroup.layout = hLayout;
+ addChild(dataGroup);
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function commitCurrentState():void
+ {
+ alpha = (currentState == "disabled") ? 0.5 : 1;
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ measuredWidth = dataGroup.measuredWidth;
+ measuredHeight = dataGroup.measuredHeight;
+
+ measuredMinWidth = dataGroup.measuredMinWidth;
+ measuredMinHeight = dataGroup.measuredMinHeight;
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ setElementPosition(dataGroup, 0, 0);
+ setElementSize(dataGroup, unscaledWidth, unscaledHeight);
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ButtonSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ButtonSkin.as b/tourdeflexmobile/src/spark/skins/android4/ButtonSkin.as
new file mode 100644
index 0000000..43fb108
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ButtonSkin.as
@@ -0,0 +1,397 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+
+import flash.display.DisplayObject;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+import mx.events.FlexEvent;
+
+import spark.components.supportClasses.StyleableTextField;
+import spark.skins.android4.assets.Button_down;
+import spark.skins.android4.assets.Button_up;
+import spark.skins.mobile.supportClasses.ButtonSkinBase;
+
+
+use namespace mx_internal;
+
+/**
+ * ActionScript-based skin for Button controls in mobile applications. The skin supports
+ * iconClass and labelPlacement. It uses FXG classes to
+ * implement the vector drawing.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+public class ButtonSkin extends ButtonSkinBase
+{
+ //--------------------------------------------------------------------------
+ //
+ // Class constants
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * An array of color distribution ratios.
+ * This is used in the chrome color fill.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ mx_internal static const CHROME_COLOR_RATIOS:Array = [0, 127.5];
+
+ /**
+ * An array of alpha values for the corresponding colors in the colors array.
+ * This is used in the chrome color fill.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ mx_internal static const CHROME_COLOR_ALPHAS:Array = [1, 1];
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function ButtonSkin()
+ {
+ super();
+ upBorderSkin = spark.skins.android4.assets.Button_up;
+ downBorderSkin = spark.skins.android4.assets.Button_down;
+ layoutCornerEllipseSize = 0;
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+
+ layoutGap = 20;
+ layoutPaddingLeft = 40;
+ layoutPaddingRight = 40;
+ layoutPaddingTop = 40;
+ layoutPaddingBottom = 40;
+ layoutBorderSize = 2;
+ measuredDefaultWidth = 128;
+ measuredDefaultHeight = 172;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+
+ layoutGap = 14;
+ layoutPaddingLeft = 30;
+ layoutPaddingRight = 30;
+ layoutPaddingTop = 30;
+ layoutPaddingBottom = 30;
+ layoutBorderSize = 2;
+ measuredDefaultWidth = 96;
+ measuredDefaultHeight = 130;
+
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+
+ layoutGap = 10;
+ layoutPaddingLeft = 20;
+ layoutPaddingRight = 20;
+ layoutPaddingTop = 20;
+ layoutPaddingBottom = 20;
+ layoutBorderSize = 2;
+ measuredDefaultWidth = 64;
+ measuredDefaultHeight = 86;
+
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+
+ layoutGap = 7;
+ layoutPaddingLeft = 15;
+ layoutPaddingRight = 15;
+ layoutPaddingTop = 15;
+ layoutPaddingBottom = 15;
+ layoutBorderSize = 1;
+ measuredDefaultWidth = 48;
+ measuredDefaultHeight = 65;
+
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+
+ layoutGap = 4;
+ layoutPaddingLeft = 8;
+ layoutPaddingRight = 8;
+ layoutPaddingTop = 8;
+ layoutPaddingBottom = 8;
+ layoutBorderSize = 1;
+ measuredDefaultWidth = 24;
+ measuredDefaultHeight = 33;
+
+ break;
+ }
+ default:
+ {
+
+ layoutGap = 5;
+ layoutPaddingLeft = 10;
+ layoutPaddingRight = 10;
+ layoutPaddingTop = 10;
+ layoutPaddingBottom = 10;
+ layoutBorderSize = 1;
+ measuredDefaultWidth = 32;
+ measuredDefaultHeight = 43;
+
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Layout variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Defines the corner radius.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var layoutCornerEllipseSize:uint;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+ private var _border:DisplayObject;
+
+ private var changeFXGSkin:Boolean = false;
+
+ private var borderClass:Class;
+
+ mx_internal var fillColorStyleName:String = "chromeColor";
+
+ /**
+ * Defines the shadow for the Button control's label.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var labelDisplayShadow:StyleableTextField;
+
+ /**
+ * Read-only button border graphic. Use getBorderClassForCurrentState()
+ * to specify a graphic per-state.
+ *
+ * @see #getBorderClassForCurrentState()
+ */
+ protected function get border():DisplayObject
+ {
+ return _border;
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Class to use for the border in the up state.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ * @default Button_up
+ */
+ protected var upBorderSkin:Class;
+
+ /**
+ * Class to use for the border in the down state.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ * @default Button_down
+ */
+ protected var downBorderSkin:Class;
+
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ super.createChildren();
+
+ if (!labelDisplayShadow && labelDisplay)
+ {
+ labelDisplayShadow = StyleableTextField(createInFontContext(StyleableTextField));
+ labelDisplayShadow.styleName = this;
+ labelDisplayShadow.colorName = "textShadowColor";
+ labelDisplayShadow.useTightTextBounds = false;
+
+ // add shadow before display
+ addChildAt(labelDisplayShadow, getChildIndex(labelDisplay));
+ }
+
+ setStyle("textAlign", "center");
+ }
+
+ /**
+ * @private
+ */
+ override protected function commitCurrentState():void
+ {
+ super.commitCurrentState();
+
+ borderClass = getBorderClassForCurrentState();
+
+ if (!(_border is borderClass))
+ changeFXGSkin = true;
+
+ // update borderClass and background
+ invalidateDisplayList();
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ // size the FXG background
+ if (changeFXGSkin)
+ {
+ changeFXGSkin = false;
+
+ if (_border)
+ {
+ removeChild(_border);
+ _border = null;
+ }
+
+ if (borderClass)
+ {
+ _border = new borderClass();
+ addChildAt(_border, 0);
+ }
+ }
+
+ layoutBorder(unscaledWidth, unscaledHeight);
+
+ // update label shadow
+ labelDisplayShadow.alpha = getStyle("textShadowAlpha");
+ labelDisplayShadow.commitStyles();
+
+ // don't use tightText positioning on shadow
+ setElementPosition(labelDisplayShadow, labelDisplay.x, labelDisplay.y + 1);
+ setElementSize(labelDisplayShadow, labelDisplay.width, labelDisplay.height);
+
+ // if labelDisplay is truncated, then push it down here as well.
+ // otherwise, it would have gotten pushed in the labelDisplay_valueCommitHandler()
+ if (labelDisplay.isTruncated)
+ labelDisplayShadow.text = labelDisplay.text;
+ }
+
+ /**
+ * Position the background of the skin. Override this function to re-position the background.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ setElementSize(border, unscaledWidth, unscaledHeight);
+ setElementPosition(border, 0, 0);
+ }
+
+ /**
+ * Returns the borderClass to use based on the currentState.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected function getBorderClassForCurrentState():Class
+ {
+ if (currentState == "down")
+ return downBorderSkin;
+ else
+ return upBorderSkin;
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Event Handlers
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function labelDisplay_valueCommitHandler(event:FlexEvent):void
+ {
+ super.labelDisplay_valueCommitHandler(event);
+ labelDisplayShadow.text = labelDisplay.text;
+ }
+
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/CalloutSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/CalloutSkin.as b/tourdeflexmobile/src/spark/skins/android4/CalloutSkin.as
new file mode 100644
index 0000000..22f04f5
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/CalloutSkin.as
@@ -0,0 +1,825 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+ import flash.display.BlendMode;
+ import flash.display.GradientType;
+ import flash.display.Graphics;
+ import flash.display.Sprite;
+ import flash.events.Event;
+
+ import mx.core.DPIClassification;
+ import mx.core.UIComponent;
+ import mx.core.mx_internal;
+ import mx.events.EffectEvent;
+ import mx.events.FlexEvent;
+ import mx.utils.ColorUtil;
+
+ import spark.components.ArrowDirection;
+ import spark.components.Callout;
+ import spark.components.ContentBackgroundAppearance;
+ import spark.components.Group;
+ import spark.core.SpriteVisualElement;
+ import spark.effects.Fade;
+ import spark.primitives.RectangularDropShadow;
+ import spark.skins.android4.assets.CalloutContentBackground;
+ import spark.skins.android4.supportClasses.CalloutArrow;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+
+ /**
+ * The default skin class for the Spark Callout component in mobile
+ * applications.
+ *
+ * <p>The <code>contentGroup</code> lies above a <code>backgroundColor</code> fill
+ * which frames the <code>contentGroup</code>. The position and size of the frame
+ * adjust based on the host component <code>arrowDirection</code>, leaving
+ * space for the <code>arrow</code> to appear on the outside edge of the
+ * frame.</p>
+ *
+ * <p>The <code>arrow</code> skin part is not positioned by the skin. Instead,
+ * the Callout component positions the arrow relative to the owner in
+ * <code>updateSkinDisplayList()</code>. This method assumes that Callout skin
+ * and the <code>arrow</code> use the same coordinate space.</p>
+ *
+ * @see spark.components.Callout
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public class CalloutSkin extends MobileSkin
+ {
+ mx_internal static const BACKGROUND_GRADIENT_BRIGHTNESS_TOP:int = 15;
+
+ mx_internal static const BACKGROUND_GRADIENT_BRIGHTNESS_BOTTOM:int = -15;
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public function CalloutSkin()
+ {
+ super();
+
+ dropShadowAlpha = 0.7;
+ contentBackgroundInsetClass = spark.skins.android4.assets.CalloutContentBackground;
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+
+ backgroundCornerRadius = 24;
+ backgroundGradientHeight = 440;
+ frameThickness = 12;
+ arrowWidth = 160;
+ arrowHeight = 80;
+ contentCornerRadius = 40;
+ dropShadowBlurX = 64;
+ dropShadowBlurY = 64;
+ dropShadowDistance = 12;
+ highlightWeight = 4;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ backgroundCornerRadius = 16;
+ backgroundGradientHeight = 330;
+ frameThickness = 8;
+ arrowWidth = 120;
+ arrowHeight = 60;
+ contentCornerRadius = 28;
+ dropShadowBlurX = 48;
+ dropShadowBlurY = 48;
+ dropShadowDistance = 8;
+ highlightWeight = 2;
+
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+
+ backgroundCornerRadius = 12;
+ backgroundGradientHeight = 220;
+ frameThickness = 6;
+ arrowWidth = 80;
+ arrowHeight = 40;
+ contentCornerRadius = 20;
+ dropShadowBlurX = 32;
+ dropShadowBlurY = 32;
+ dropShadowDistance = 6;
+ highlightWeight = 2;
+
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ backgroundCornerRadius = 8;
+ backgroundGradientHeight = 165;
+ frameThickness = 4;
+ arrowWidth = 60;
+ arrowHeight = 30;
+ contentCornerRadius = 14;
+ dropShadowBlurX = 24;
+ dropShadowBlurY = 24;
+ dropShadowDistance = 4;
+ highlightWeight = 1;
+
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ backgroundCornerRadius = 4;
+ backgroundGradientHeight = 83;
+ frameThickness = 2;
+ arrowWidth = 30;
+ arrowHeight = 15;
+ contentCornerRadius = 7;
+ dropShadowBlurX = 12;
+ dropShadowBlurY = 12;
+ dropShadowDistance = 2;
+ highlightWeight = 0.5;
+
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+ backgroundCornerRadius = 6;
+ backgroundGradientHeight = 110;
+ frameThickness = 3;
+ arrowWidth = 40;
+ arrowHeight = 20;
+ contentCornerRadius = 10;
+ dropShadowBlurX = 16;
+ dropShadowBlurY = 16;
+ dropShadowDistance = 3;
+ highlightWeight = 1;
+
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:Callout;
+
+ /**
+ * Enables a RectangularDropShadow behind the <code>backgroundColor</code> frame.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var dropShadowVisible:Boolean = true;
+
+ /**
+ * Enables a vertical linear gradient in the <code>backgroundColor</code> frame. This
+ * gradient fill is drawn across both the arrow and the frame. By default,
+ * the gradient brightens the background color by 15% and darkens it by 60%.
+ *
+ * @default true
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var useBackgroundGradient:Boolean = true;
+
+ /**
+ * Corner radius used for the <code>contentBackgroundColor</code> fill.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var contentCornerRadius:uint;
+
+ /**
+ * A class reference to an FXG class that is layered underneath the
+ * <code>contentGroup</code>. The instance of this class is sized to match the
+ * <code>contentGroup</code>.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var contentBackgroundInsetClass:Class;
+
+ /**
+ * Corner radius of the <code>backgroundColor</code> "frame".
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var backgroundCornerRadius:Number;
+
+ /**
+ * The thickness of the <code>backgroundColor</code> "frame" that surrounds the
+ * <code>contentGroup</code>.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var frameThickness:Number;
+
+ /**
+ * Color of the border stroke around the <code>backgroundColor</code> "frame".
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var borderColor:Number = -1; // not set
+
+ /**
+ * Thickness of the border stroke around the <code>backgroundColor</code>
+ * "frame".
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var borderThickness:Number = -1 ; // marker that borderThickness was not set directly
+
+ /**
+ * Width of the arrow in vertical directions. This property also controls
+ * the height of the arrow in horizontal directions.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var arrowWidth:Number;
+
+ /**
+ * Height of the arrow in vertical directions. This property also controls
+ * the width of the arrow in horizontal directions.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var arrowHeight:Number;
+
+ /**
+ * @private
+ * Instance of the contentBackgroundClass
+ */
+ mx_internal var contentBackgroundGraphic:SpriteVisualElement;
+
+ /**
+ * @private
+ * Tracks changes to the skin state to support the fade out tranisition
+ * when closed;
+ */
+ mx_internal var isOpen:Boolean;
+
+ private var backgroundGradientHeight:Number;
+
+ private var contentMask:Sprite;
+
+ private var backgroundFill:SpriteVisualElement;
+
+ private var dropShadow:RectangularDropShadow;
+
+ private var dropShadowBlurX:Number;
+
+ private var dropShadowBlurY:Number;
+
+ private var dropShadowDistance:Number;
+
+ private var dropShadowAlpha:Number;
+
+ private var fade:Fade;
+
+ private var highlightWeight:Number;
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.components.SkinnableContainer#contentGroup
+ */
+ public var contentGroup:Group;
+
+ /**
+ * @copy spark.components.Callout#arrow
+ */
+ public var arrow:UIComponent;
+
+ /* helper private accessors */
+
+ /* returns borderThickness from style if member is -1, or borderThickness. Returns 0 if NaN */
+ mx_internal function get actualBorderThickness():Number
+ {
+ var border: Number = borderThickness != -1 ? borderThickness : getStyle('borderThickness');
+ return isNaN(border)? 0: border;
+ }
+
+ mx_internal function get actualBorderColor():uint
+ {
+ return borderColor != -1 ? borderColor: getStyle('borderColor');
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ super.createChildren();
+
+ if (dropShadowVisible)
+ {
+ dropShadow = new RectangularDropShadow();
+ dropShadow.angle = 90;
+ dropShadow.distance = dropShadowDistance;
+ dropShadow.blurX = dropShadowBlurX;
+ dropShadow.blurY = dropShadowBlurY;
+ dropShadow.tlRadius = dropShadow.trRadius = dropShadow.blRadius =
+ dropShadow.brRadius = backgroundCornerRadius ;
+ dropShadow.mouseEnabled = false;
+ dropShadow.alpha = dropShadowAlpha;
+ addChild(dropShadow);
+ }
+
+ // background fill placed above the drop shadow
+ backgroundFill = new SpriteVisualElement();
+ addChild(backgroundFill);
+
+ // arrow
+ if (!arrow)
+ {
+ arrow = new CalloutArrow();
+ arrow.id = "arrow";
+ arrow.styleName = this;
+ addChild(arrow);
+ }
+
+ // contentGroup
+ if (!contentGroup)
+ {
+ contentGroup = new Group();
+ contentGroup.id = "contentGroup";
+ addChild(contentGroup);
+ }
+
+
+ }
+
+ /**
+ * @private
+ */
+ override protected function commitProperties():void
+ {
+ super.commitProperties();
+
+ // add or remove the contentBackgroundGraphic
+ var contentBackgroundAppearance:String = getStyle("contentBackgroundAppearance");
+
+ if (contentBackgroundAppearance == ContentBackgroundAppearance.INSET)
+ {
+ // create the contentBackgroundGraphic
+ if (!contentBackgroundGraphic && contentBackgroundInsetClass)
+ {
+ contentBackgroundGraphic = new contentBackgroundInsetClass() as SpriteVisualElement;
+
+ // with the current skin structure, contentBackgroundGraphic is
+ // always the last child
+ addChild(contentBackgroundGraphic);
+ }
+ }
+ else if (contentBackgroundGraphic)
+ {
+ // if already created, remove the graphic for "flat" and "none"
+ removeChild(contentBackgroundGraphic);
+ contentBackgroundGraphic = null;
+ }
+
+ // always invalidate to accomodate arrow direction changes
+ invalidateSize();
+ invalidateDisplayList();
+ }
+
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ super.measure();
+
+ var borderWeight:Number =actualBorderThickness;
+ var frameAdjustment:Number = (frameThickness + borderWeight) * 2;
+
+ var arrowMeasuredWidth:Number;
+ var arrowMeasuredHeight:Number;
+
+ // pad the arrow so that the edges are within the background corner radius
+ if (isArrowHorizontal)
+ {
+ arrowMeasuredWidth = arrowHeight;
+ arrowMeasuredHeight = arrowWidth + (backgroundCornerRadius * 2);
+ }
+ else if (isArrowVertical)
+ {
+ arrowMeasuredWidth = arrowWidth + (backgroundCornerRadius * 2);
+ arrowMeasuredHeight = arrowHeight;
+ }
+
+ // count the contentGroup size and frame size
+ measuredMinWidth = contentGroup.measuredMinWidth + frameAdjustment;
+ measuredMinHeight = contentGroup.measuredMinHeight + frameAdjustment;
+
+ measuredWidth = contentGroup.getPreferredBoundsWidth() + frameAdjustment;
+ measuredHeight = contentGroup.getPreferredBoundsHeight() + frameAdjustment;
+
+ // add the arrow size based on the arrowDirection
+ if (isArrowHorizontal)
+ {
+ measuredMinWidth += arrowMeasuredWidth;
+ measuredMinHeight = Math.max(measuredMinHeight, arrowMeasuredHeight);
+
+ measuredWidth += arrowMeasuredWidth;
+ measuredHeight = Math.max(measuredHeight, arrowMeasuredHeight);
+ }
+ else if (isArrowVertical)
+ {
+ measuredMinWidth += Math.max(measuredMinWidth, arrowMeasuredWidth);
+ measuredMinHeight += arrowMeasuredHeight;
+
+ measuredWidth = Math.max(measuredWidth, arrowMeasuredWidth);
+ measuredHeight += arrowMeasuredHeight;
+ }
+ }
+
+ /**
+ * @private
+ * SkinnaablePopUpContainer skins must dispatch a
+ * FlexEvent.STATE_CHANGE_COMPLETE event for the component to properly
+ * update the skin state.
+ */
+ override protected function commitCurrentState():void
+ {
+ super.commitCurrentState();
+
+ var isNormal:Boolean = (currentState == "normal");
+ var isDisabled:Boolean = (currentState == "disabled")
+
+ // play a fade out if the callout was previously open
+ if (!(isNormal || isDisabled) && isOpen)
+ {
+ if (!fade)
+ {
+ fade = new Fade();
+ fade.target = this;
+ fade.duration = 200;
+ fade.alphaTo = 0;
+ }
+
+ // BlendMode.LAYER while fading out
+ blendMode = BlendMode.LAYER;
+
+ // play a short fade effect
+ fade.addEventListener(EffectEvent.EFFECT_END, stateChangeComplete);
+ fade.play();
+
+ isOpen = false;
+ }
+ else
+ {
+ isOpen = isNormal || isDisabled;
+
+ // handle re-opening the Callout while fading out
+ if (fade && fade.isPlaying)
+ {
+ // Do not dispatch a state change complete.
+ // SkinnablePopUpContainer handles state interruptions.
+ fade.removeEventListener(EffectEvent.EFFECT_END, stateChangeComplete);
+ fade.stop();
+ }
+
+ if (isDisabled)
+ {
+ // BlendMode.LAYER to allow CalloutArrow BlendMode.ERASE
+ blendMode = BlendMode.LAYER;
+
+ alpha = 0.5;
+ }
+ else
+ {
+ // BlendMode.NORMAL for non-animated state transitions
+ blendMode = BlendMode.NORMAL;
+
+ if (isNormal)
+ alpha = 1;
+ else
+ alpha = 0;
+ }
+
+ stateChangeComplete();
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ var frameEllipseSize:Number = backgroundCornerRadius * 2;
+
+ // account for borderThickness center stroke alignment
+ var borderWeight:Number =actualBorderThickness;
+ var showBorder:Boolean = borderWeight > 0 ;
+
+
+ // contentBackgroundGraphic already accounts for the arrow position
+ // use it's positioning instead of recalculating based on unscaledWidth
+ // and unscaledHeight
+ var frameX:Number = Math.floor(contentGroup.getLayoutBoundsX() - frameThickness) - (borderWeight / 2);
+ var frameY:Number = Math.floor(contentGroup.getLayoutBoundsY() - frameThickness) - (borderWeight / 2);
+ var frameWidth:Number = contentGroup.getLayoutBoundsWidth() + (frameThickness * 2) + borderWeight;
+ var frameHeight:Number = contentGroup.getLayoutBoundsHeight() + (frameThickness * 2) + borderWeight;
+
+ var backgroundColor:Number = getStyle("primaryAccentColor");
+ var backgroundAlpha:Number = getStyle("backgroundAlpha");
+
+ var bgFill:Graphics = backgroundFill.graphics;
+ bgFill.clear();
+
+ if (showBorder)
+ bgFill.lineStyle(borderWeight, actualBorderColor, 1, true);
+
+ if (useBackgroundGradient)
+ {
+ // top color is brighter if arrowDirection == ArrowDirection.UP
+ var backgroundColorTop:Number = ColorUtil.adjustBrightness2(backgroundColor,
+ BACKGROUND_GRADIENT_BRIGHTNESS_TOP);
+ var backgroundColorBottom:Number = ColorUtil.adjustBrightness2(backgroundColor,
+ BACKGROUND_GRADIENT_BRIGHTNESS_BOTTOM);
+
+ // max gradient height = backgroundGradientHeight
+ colorMatrix.createGradientBox(unscaledWidth, backgroundGradientHeight,
+ Math.PI / 2, 0, 0);
+
+ bgFill.beginGradientFill(GradientType.LINEAR,
+ [backgroundColorTop, backgroundColorBottom],
+ [backgroundAlpha, backgroundAlpha],
+ [0, 255],
+ colorMatrix);
+ }
+ else
+ {
+ bgFill.beginFill(backgroundColor, backgroundAlpha);
+ }
+
+ bgFill.drawRoundRect(frameX, frameY, frameWidth,
+ frameHeight, frameEllipseSize, frameEllipseSize);
+ bgFill.endFill();
+
+ // draw content background styles
+ var contentBackgroundAppearance:String = getStyle("contentBackgroundAppearance");
+
+ if (contentBackgroundAppearance != ContentBackgroundAppearance.NONE)
+ {
+ var contentEllipseSize:Number = contentCornerRadius * 2;
+ var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");
+ var contentWidth:Number = contentGroup.getLayoutBoundsWidth();
+ var contentHeight:Number = contentGroup.getLayoutBoundsHeight();
+
+ // all appearance values except for "none" use a mask
+ if (!contentMask)
+ contentMask = new SpriteVisualElement();
+
+ contentGroup.mask = contentMask;
+
+ // draw contentMask in contentGroup coordinate space
+ var maskGraphics:Graphics = contentMask.graphics;
+ maskGraphics.clear();
+ maskGraphics.beginFill(0, 1);
+ maskGraphics.drawRoundRect(0, 0, contentWidth, contentHeight,
+ contentEllipseSize, contentEllipseSize);
+ maskGraphics.endFill();
+
+ // reset line style to none
+ if (showBorder)
+ bgFill.lineStyle(NaN);
+
+ // draw the contentBackgroundColor
+ bgFill.beginFill(getStyle("contentBackgroundColor"),
+ contentBackgroundAlpha);
+ bgFill.drawRoundRect(contentGroup.getLayoutBoundsX(),
+ contentGroup.getLayoutBoundsY(),
+ contentWidth, contentHeight, contentEllipseSize, contentEllipseSize);
+ bgFill.endFill();
+
+ if (contentBackgroundGraphic)
+ contentBackgroundGraphic.alpha = contentBackgroundAlpha;
+ }
+ else // if (contentBackgroundAppearance == CalloutContentBackgroundAppearance.NONE))
+ {
+ // remove the mask
+ if (contentMask)
+ {
+ contentGroup.mask = null;
+ contentMask = null;
+ }
+ }
+
+ // draw highlight in the callout when the arrow is hidden
+ if (useBackgroundGradient && !isArrowHorizontal && !isArrowVertical)
+ {
+ // highlight width spans the callout width minus the corner radius
+ var highlightWidth:Number = frameWidth - frameEllipseSize;
+ var highlightX:Number = frameX + backgroundCornerRadius;
+ var highlightOffset:Number = (highlightWeight * 1.5);
+
+ // straight line across the top
+ bgFill.lineStyle(highlightWeight, 0xFFFFFF, 0.2 * backgroundAlpha);
+ bgFill.moveTo(highlightX, highlightOffset);
+ bgFill.lineTo(highlightX + highlightWidth, highlightOffset);
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ // pad the arrow so that the edges are within the background corner radius
+ if (isArrowHorizontal)
+ {
+ arrow.width = arrowHeight;
+ arrow.height = arrowWidth + (backgroundCornerRadius * 2);
+ }
+ else if (isArrowVertical)
+ {
+ arrow.width = arrowWidth + (backgroundCornerRadius * 2);
+ arrow.height = arrowHeight;
+ }
+
+ setElementSize(backgroundFill, unscaledWidth, unscaledHeight);
+ setElementPosition(backgroundFill, 0, 0);
+
+ var frameX:Number = 0;
+ var frameY:Number = 0;
+ var frameWidth:Number = unscaledWidth;
+ var frameHeight:Number = unscaledHeight;
+
+ switch (hostComponent.arrowDirection)
+ {
+ case ArrowDirection.UP:
+ frameY = arrow.height;
+ frameHeight -= arrow.height;
+ break;
+ case ArrowDirection.DOWN:
+ frameHeight -= arrow.height;
+ break;
+ case ArrowDirection.LEFT:
+ frameX = arrow.width;
+ frameWidth -= arrow.width;
+ break;
+ case ArrowDirection.RIGHT:
+ frameWidth -= arrow.width;
+ break;
+ default:
+ // no arrow, content takes all available space
+ break;
+ }
+
+ if (dropShadow)
+ {
+ setElementSize(dropShadow, frameWidth, frameHeight);
+ setElementPosition(dropShadow, frameX, frameY);
+ }
+
+ // Show frameThickness by inset of contentGroup
+ var borderWeight:Number = actualBorderThickness;
+ var contentBackgroundAdjustment:Number = frameThickness + borderWeight;
+
+ var contentBackgroundX:Number = frameX + contentBackgroundAdjustment;
+ var contentBackgroundY:Number = frameY + contentBackgroundAdjustment;
+
+ contentBackgroundAdjustment = contentBackgroundAdjustment * 2;
+ var contentBackgroundWidth:Number = frameWidth - contentBackgroundAdjustment;
+ var contentBackgroundHeight:Number = frameHeight - contentBackgroundAdjustment;
+
+ if (contentBackgroundGraphic)
+ {
+ setElementSize(contentBackgroundGraphic, contentBackgroundWidth, contentBackgroundHeight);
+ setElementPosition(contentBackgroundGraphic, contentBackgroundX, contentBackgroundY);
+ }
+
+ setElementSize(contentGroup, contentBackgroundWidth, contentBackgroundHeight);
+ setElementPosition(contentGroup, contentBackgroundX, contentBackgroundY);
+
+ // mask position is in the contentGroup coordinate space
+ if (contentMask)
+ setElementSize(contentMask, contentBackgroundWidth, contentBackgroundHeight);
+ }
+
+ override public function styleChanged(styleProp:String):void
+ {
+ super.styleChanged(styleProp);
+
+ var allStyles:Boolean = !styleProp || styleProp == "styleName";
+
+ if (allStyles || (styleProp == "contentBackgroundAppearance"))
+ invalidateProperties();
+
+ if (allStyles || (styleProp == "backgroundAlpha"))
+ {
+ var backgroundAlpha:Number = getStyle("backgroundAlpha");
+
+ // Use BlendMode.LAYER to allow CalloutArrow to erase the dropShadow
+ // when the Callout background is transparent
+ blendMode = (backgroundAlpha < 1) ? BlendMode.LAYER : BlendMode.NORMAL;
+ }
+ }
+
+ /**
+ * @private
+ */
+ mx_internal function get isArrowHorizontal():Boolean
+ {
+ return (hostComponent.arrowDirection == ArrowDirection.LEFT
+ || hostComponent.arrowDirection == ArrowDirection.RIGHT);
+ }
+
+ /**
+ * @private
+ */
+ mx_internal function get isArrowVertical():Boolean
+ {
+ return (hostComponent.arrowDirection == ArrowDirection.UP
+ || hostComponent.arrowDirection == ArrowDirection.DOWN);
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Event handlers
+ //
+ //--------------------------------------------------------------------------
+
+ private function stateChangeComplete(event:Event=null):void
+ {
+ if (fade && event)
+ fade.removeEventListener(EffectEvent.EFFECT_END, stateChangeComplete);
+
+ // SkinnablePopUpContainer relies on state changes for open and close
+ dispatchEvent(new FlexEvent(FlexEvent.STATE_CHANGE_COMPLETE));
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/CheckBoxSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/CheckBoxSkin.as b/tourdeflexmobile/src/spark/skins/android4/CheckBoxSkin.as
new file mode 100644
index 0000000..f091205
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/CheckBoxSkin.as
@@ -0,0 +1,268 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+ import flash.display.DisplayObject;
+
+ import mx.core.DPIClassification;
+
+ import spark.skins.android4.assets.CheckBox_up;
+ import spark.skins.mobile.supportClasses.SelectableButtonSkinBase;
+
+ /**
+ * ActionScript-based skin for CheckBox components in mobile applications.
+ *
+ * @see spark.components.CheckBox
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class CheckBoxSkin extends SelectableButtonSkinBase
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Class constants
+ //
+ //--------------------------------------------------------------------------
+
+ private static const exclusions:Array = ["labelDisplay", "labelDisplayShadow"];
+
+ //--------------------------------------------------------------------------
+ //
+ // Member variables
+ //
+ //--------------------------------------------------------------------------
+
+ protected var symbolOffsetX:Number;
+ protected var symbolOffsetY:Number;
+ protected var iconWidth:Number;
+ protected var iconHeight:Number;
+ protected var symbolWidth:Number;
+ protected var symbolHeight:Number;
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function CheckBoxSkin()
+ {
+ super();
+
+ layoutPaddingLeft = 0;
+ layoutPaddingRight = 0;
+ layoutPaddingTop = 0;
+ layoutPaddingBottom = 0;
+
+ upIconClass = spark.skins.android4.assets.CheckBox_up;
+ upSelectedIconClass = spark.skins.android4.assets.CheckBox_upSelected;
+ downIconClass = spark.skins.android4.assets.CheckBox_down;
+ downSelectedIconClass = spark.skins.android4.assets.CheckBox_downSelected;
+ upSymbolIconClass = null;
+ upSymbolIconSelectedClass = spark.skins.android4.assets.CheckBox_upSymbolSelected;
+ downSymbolIconSelectedClass = spark.skins.android4.assets.CheckBox_downSymbolSelected;
+ downSymbolIconClass = null;
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+
+ layoutGap = 16;
+ minWidth = 128;
+ minHeight = 128;
+ layoutBorderSize = 6;
+ iconWidth = 128;
+ iconHeight = 128;
+ symbolWidth = 64;
+ symbolHeight = 64;
+ symbolOffsetX = 32;
+ symbolOffsetY = 32;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+
+ layoutGap = 12;
+ minWidth = 96;
+ minHeight = 96;
+ layoutBorderSize = 4;
+ iconWidth = 96;
+ iconHeight = 96;
+ symbolWidth = 48;
+ symbolHeight = 48;
+ symbolOffsetX = 24;
+ symbolOffsetY = 24;
+
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+
+ layoutGap = 8;
+ minWidth = 64;
+ minHeight = 64;
+ layoutBorderSize = 3;
+ iconWidth = 64;
+ iconHeight = 64;
+ symbolWidth = 32;
+ symbolHeight = 32;
+ symbolOffsetX = 16;
+ symbolOffsetY = 16;
+
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+
+ layoutGap = 6;
+ minWidth = 48;
+ minHeight = 48;
+ layoutBorderSize = 2;
+ iconWidth = 48;
+ iconHeight = 48;
+ symbolWidth = 24;
+ symbolHeight = 24;
+ symbolOffsetX = 12;
+ symbolOffsetY = 12;
+
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+
+ layoutGap = 3;
+ minWidth = 24;
+ minHeight = 24;
+ layoutBorderSize = 1;
+ iconWidth = 24;
+ iconHeight = 24;
+ symbolWidth = 12;
+ symbolHeight = 12;
+ symbolOffsetX = 6;
+ symbolOffsetY = 6;
+
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+
+ layoutGap = 4;
+ minWidth = 32;
+ minHeight = 32;
+ layoutBorderSize = 2;
+ iconWidth = 32;
+ iconHeight = 32;
+ symbolWidth = 16;
+ symbolHeight = 16;
+ symbolOffsetX = 8;
+ symbolOffsetY = 8;
+
+
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ * CheckBox <code>chromeColor</code> is drawn to match the FXG rectangle
+ * shape and position.
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ // super draws a transparent hit zone
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ // get the size and position of iconDisplay
+ var currentIcon:DisplayObject = getIconDisplay();
+ var widthAdjustment:Number = layoutBorderSize * 2;
+
+ graphics.beginFill(getStyle("chromeColor"));
+ graphics.drawRoundRect(currentIcon.x + layoutBorderSize,
+ currentIcon.y + layoutBorderSize,
+ currentIcon.width - widthAdjustment,
+ currentIcon.height - widthAdjustment, layoutBorderSize, layoutBorderSize);
+ graphics.endFill();
+ }
+
+ /**
+ * List of IDs of items that should be excluded when rendering the focus ring.
+ * Only items of type DisplayObject or GraphicElement should be excluded. Items
+ * of other types are ignored.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ override protected function get focusSkinExclusions():Array
+ {
+ return exclusions;
+ }
+
+ override protected function commitCurrentState():void
+ {
+ super.commitCurrentState();
+ if(symbolIcon != null)
+ {
+ symbolIcon.width = symbolWidth;
+ symbolIcon.height = symbolHeight;
+ }
+ var iconDisplay:DisplayObject = getIconDisplay();
+ if(iconDisplay != null)
+ {
+ iconDisplay.width = iconWidth;
+ iconDisplay.height = iconHeight;
+ }
+ }
+
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+ // position the symbols to align with the background "icon"
+ if (symbolIcon)
+ {
+ var currentIcon:DisplayObject = getIconDisplay();
+ setElementPosition(symbolIcon, symbolOffsetX, symbolOffsetY);
+ }
+ }
+
+ }
+}
\ No newline at end of file
[13/22] added in Android Skins
Posted by bi...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/supportClasses/StageTextSkinBase.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/supportClasses/StageTextSkinBase.as b/tourdeflexmobile/src/spark/skins/android4/supportClasses/StageTextSkinBase.as
new file mode 100644
index 0000000..bef04b5
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/supportClasses/StageTextSkinBase.as
@@ -0,0 +1,402 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4.supportClasses
+{
+ import flash.display.DisplayObject;
+ import flash.events.FocusEvent;
+
+ import mx.core.DPIClassification;
+ import mx.core.mx_internal;
+
+ import spark.components.supportClasses.IStyleableEditableText;
+ import spark.components.supportClasses.SkinnableTextBase;
+ import spark.components.supportClasses.StyleableStageText;
+ import spark.components.supportClasses.StyleableTextField;
+ import spark.core.IDisplayText;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+
+ /**
+ * ActionScript-based skin for text input controls in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.6
+ */
+ public class StageTextSkinBase extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.6
+ *
+ */
+ public function StageTextSkinBase()
+ {
+ super();
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ measuredDefaultWidth = 1200;
+ measuredDefaultHeight = 132;
+ layoutBorderSize = 4;
+ flatheight = 9;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ measuredDefaultWidth = 880;
+ measuredDefaultHeight = 100;
+ layoutBorderSize = 3;
+ flatheight = 7;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ measuredDefaultWidth = 600;
+ measuredDefaultHeight = 66;
+ layoutBorderSize = 2;
+ flatheight = 6;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ measuredDefaultWidth = 440;
+ measuredDefaultHeight = 50;
+ layoutBorderSize = 2;
+ flatheight = 5;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ measuredDefaultWidth = 220;
+ measuredDefaultHeight = 25;
+ layoutBorderSize = 1;
+ flatheight = 2;
+ break;
+ }
+ default:
+ {
+ measuredDefaultWidth = 300;
+ measuredDefaultHeight = 33;
+ layoutBorderSize = 1;
+ flatheight = 3;
+ break;
+ }
+
+ }
+ addEventListener(FocusEvent.FOCUS_IN, focusChangeHandler);
+ addEventListener(FocusEvent.FOCUS_OUT, focusChangeHandler);
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Graphics variables
+ //
+ //--------------------------------------------------------------------------
+
+
+ //--------------------------------------------------------------------------
+ //
+ // Layout variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Defines the border's thickness.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.6
+ */
+ protected var layoutBorderSize:uint;
+
+ protected var flatheight:uint;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ protected var isFocused:Boolean = false;
+
+ /**
+ * @private
+ *
+ * Instance of the border graphics.
+ */
+ protected var border:DisplayObject;
+
+ private var borderVisibleChanged:Boolean = false;
+
+ /**
+ * @private
+ *
+ * Multiline flag.
+ */
+ protected var multiline:Boolean = false;
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * textDisplay skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.6
+ */
+ public var textDisplay:IStyleableEditableText;
+
+ [Bindable]
+ /**
+ * Bindable promptDisplay skin part. Bindings fire when promptDisplay is
+ * removed and added for proper updating by the SkinnableTextBase.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.6
+ */
+ public var promptDisplay:IDisplayText;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ super.createChildren();
+
+ if (!textDisplay)
+ {
+ textDisplay = createTextDisplay();
+ textDisplay.editable = true;
+ textDisplay.styleName = this;
+ this.addChild(DisplayObject(textDisplay));
+ }
+ }
+
+ /** Could be overridden by subclasses
+ *
+ * @return instance of IStyleableEditableText
+ */
+ protected function createTextDisplay():IStyleableEditableText
+ {
+ return new StyleableStageText(multiline);
+ }
+
+ /**
+ * @private
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ var contentBackgroundColor:uint = getStyle("contentBackgroundColor");
+ var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");
+ //change border color and thickness when in focus
+ var borderColor:uint = isFocused ? getStyle("focusColor") : getStyle("borderColor");
+ var selectWidth:uint = isFocused ? layoutBorderSize + 1 : layoutBorderSize;
+ if (isNaN(contentBackgroundAlpha))
+ {
+ contentBackgroundAlpha = 1;
+ }
+ var halfGap:int = flatheight * 2;
+ // change the border type
+ if (getStyle("contentBackgroundBorder") == "flat")
+ {
+ //background
+ graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+ graphics.drawRect(0, 0, unscaledWidth, unscaledHeight - flatheight);
+ graphics.endFill();
+ //begin flat border
+ graphics.beginFill(borderColor, 1);
+ //left half border
+ graphics.drawRect(0, unscaledHeight - halfGap, selectWidth, flatheight );
+ //bottom border
+ graphics.drawRect(0, unscaledHeight - flatheight, unscaledWidth, selectWidth);
+ //right border
+ graphics.drawRect(unscaledWidth - selectWidth, unscaledHeight - halfGap, selectWidth, flatheight);
+ graphics.endFill();
+ }
+ else if (getStyle("contentBackgroundBorder") == "rectangle")
+ {
+ var borderWidth:uint = layoutBorderSize * 2;
+ //rectangle border and background
+ graphics.lineStyle(selectWidth, borderColor, 1);
+ graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+ graphics.drawRect(layoutBorderSize, layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight - borderWidth);
+ graphics.endFill();
+ }
+ }
+
+ /**
+ * @private
+ */
+ override public function styleChanged(styleProp:String):void
+ {
+ var allStyles:Boolean = !styleProp || styleProp == "styleName";
+
+ if (allStyles || styleProp == "borderVisible")
+ {
+ borderVisibleChanged = true;
+ invalidateProperties();
+ }
+
+ if (allStyles || styleProp.indexOf("padding") == 0)
+ {
+ invalidateDisplayList();
+ }
+ super.styleChanged(styleProp);
+ }
+
+ /**
+ * @private
+ */
+ override protected function commitCurrentState():void
+ {
+ super.commitCurrentState();
+
+ alpha = currentState.indexOf("disabled") == -1 ? 1 : 0.5;
+
+ var showPrompt:Boolean = currentState.indexOf("WithPrompt") != -1;
+
+ if (showPrompt && !promptDisplay)
+ {
+ promptDisplay = createPromptDisplay();
+ promptDisplay.addEventListener(FocusEvent.FOCUS_IN, promptDisplay_focusInHandler);
+ }
+ else if (!showPrompt && promptDisplay)
+ {
+ promptDisplay.removeEventListener(FocusEvent.FOCUS_IN, promptDisplay_focusInHandler);
+ removeChild(promptDisplay as DisplayObject);
+ promptDisplay = null;
+ }
+ super.commitCurrentState();
+
+ invalidateDisplayList();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ * Create a control appropriate for displaying the prompt text in a mobile
+ * input field.
+ */
+ protected function createPromptDisplay():IDisplayText
+ {
+ var prompt:StyleableTextField = StyleableTextField(createInFontContext(StyleableTextField));
+ prompt.styleName = this;
+ prompt.editable = false;
+ prompt.mouseEnabled = false;
+ prompt.useTightTextBounds = false;
+ // StageText objects appear in their own layer on top of the display
+ // list. So, even though this prompt may be created after the StageText
+ // for textDisplay, textDisplay will still be on top.
+ addChild(prompt);
+
+ return prompt;
+ }
+
+ /**
+ * @private
+ * Utility function used by subclasses' measure functions to measure their
+ * text host components.
+ */
+ protected function measureTextComponent(hostComponent:SkinnableTextBase):void
+ {
+ var paddingLeft:Number = getStyle("paddingLeft");
+ var paddingRight:Number = getStyle("paddingRight");
+ var paddingTop:Number = getStyle("paddingTop");
+ var paddingBottom:Number = getStyle("paddingBottom");
+ var textHeight:Number = getStyle("fontSize");
+
+ if (textDisplay)
+ {
+ textHeight = getElementPreferredHeight(textDisplay);
+ }
+ // width is based on maxChars (if set)
+ if (hostComponent && hostComponent.maxChars)
+ {
+ // Grab the fontSize and subtract 2 as the pixel value for each character.
+ // This is just an approximation, but it appears to be a reasonable one
+ // for most input and most font.
+ var characterWidth:int = Math.max(1, (textHeight - 2));
+ measuredWidth = (characterWidth * hostComponent.maxChars) + paddingLeft + paddingRight;
+ }
+
+ measuredHeight = paddingTop + textHeight + paddingBottom;
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Event handlers
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Listen to see if the component gains focus then change the style to selected
+ */
+ private function focusChangeHandler(event:FocusEvent):void
+ {
+ isFocused = event.type == FocusEvent.FOCUS_IN;
+ invalidateDisplayList();
+ }
+
+ /**
+ * If the prompt is focused, we need to move focus to the textDisplay
+ * StageText. This needs to happen outside of the process of setting focus
+ * to the prompt, so we use callLater to do that.
+ */
+ private function focusTextDisplay():void
+ {
+ textDisplay.setFocus();
+ }
+
+ private function promptDisplay_focusInHandler(event:FocusEvent):void
+ {
+ callLater(focusTextDisplay);
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/supportClasses/TextSkinBase.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/supportClasses/TextSkinBase.as b/tourdeflexmobile/src/spark/skins/android4/supportClasses/TextSkinBase.as
new file mode 100644
index 0000000..70e0294
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/supportClasses/TextSkinBase.as
@@ -0,0 +1,213 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4.supportClasses
+{
+
+ import flash.display.DisplayObject;
+
+ import mx.core.mx_internal;
+
+ import spark.components.supportClasses.StyleableTextField;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+
+ /**
+ * ActionScript-based skin for text input controls in mobile applications that
+ * uses a StyleableTextField class for the text display.
+ *
+ * @see spark.components.supportClasses.StyleableTextField
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class TextSkinBase extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function TextSkinBase()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Graphics variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Defines the border.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+
+ //--------------------------------------------------------------------------
+ //
+ // Layout variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Defines the corner radius.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+
+ protected var layoutBorderSize:uint;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ *
+ * Instance of the border graphics.
+ */
+ protected var border:DisplayObject;
+
+ private var borderVisibleChanged:Boolean = false;
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * textDisplay skin part.
+ */
+ public var textDisplay:StyleableTextField;
+
+ [Bindable]
+ /**
+ * Bindable promptDisplay skin part. Bindings fire when promptDisplay is
+ * removed and added for proper updating by the SkinnableTextBase.
+ */
+ public var promptDisplay:StyleableTextField;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ super.createChildren();
+
+ if (!textDisplay)
+ {
+ textDisplay = StyleableTextField(createInFontContext(StyleableTextField));
+ textDisplay.styleName = this;
+ textDisplay.editable = true;
+ textDisplay.useTightTextBounds = false;
+ addChild(textDisplay);
+ }
+ }
+
+ /**
+ * @private
+ */
+ protected function createPromptDisplay():StyleableTextField
+ {
+ var prompt:StyleableTextField = StyleableTextField(createInFontContext(StyleableTextField));
+ prompt.styleName = this;
+ prompt.editable = false;
+ prompt.mouseEnabled = false;
+ prompt.useTightTextBounds = false;
+ prompt.focusEnabled = false;
+ return prompt;
+ }
+
+ /**
+ * @private
+ */
+
+ override public function styleChanged(styleProp:String):void
+ {
+ var allStyles:Boolean = !styleProp || styleProp == "styleName";
+
+ if (allStyles || styleProp == "borderVisible")
+ {
+ borderVisibleChanged = true;
+ invalidateProperties();
+ }
+
+ if (allStyles || styleProp.indexOf("padding") == 0)
+ {
+ invalidateDisplayList();
+ }
+
+ super.styleChanged(styleProp);
+ }
+
+ /**
+ * @private
+ */
+ override protected function commitCurrentState():void
+ {
+ super.commitCurrentState();
+
+ alpha = currentState.indexOf("disabled") == -1 ? 1 : 0.5;
+
+ var showPrompt:Boolean = currentState.indexOf("WithPrompt") >= 0;
+
+ if (showPrompt && !promptDisplay)
+ {
+ promptDisplay = createPromptDisplay();
+ addChild(promptDisplay);
+ }
+ else if (!showPrompt && promptDisplay)
+ {
+ removeChild(promptDisplay);
+ promptDisplay = null;
+ }
+
+ invalidateDisplayList();
+ }
+ }
+}
[15/22] added in Android Skins
Posted by bi...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TextInputSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TextInputSkin.as b/tourdeflexmobile/src/spark/skins/android4/TextInputSkin.as
new file mode 100644
index 0000000..1ec2c11
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TextInputSkin.as
@@ -0,0 +1,375 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+ import flash.events.Event;
+ import flash.events.FocusEvent;
+ import flash.events.SoftKeyboardEvent;
+
+ import mx.core.DPIClassification;
+ import mx.core.EventPriority;
+ import mx.core.mx_internal;
+ import mx.events.FlexEvent;
+ import mx.utils.Platform;
+
+ import spark.components.TextInput;
+ import spark.components.supportClasses.StyleableTextField;
+ import spark.skins.android4.supportClasses.TextSkinBase;
+
+ use namespace mx_internal;
+
+ /**
+ * ActionScript-based skin for TextInput controls in mobile applications.
+ *
+ * @see spark.components.TextInput
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class TextInputSkin extends TextSkinBase
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function TextInputSkin()
+ {
+ super();
+
+ // on iOS, make adjustments for native text rendering
+ _isIOS = Platform.isIOS;
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ measuredDefaultWidth = 1200;
+ measuredDefaultHeight = 132;
+ layoutBorderSize = 4;
+ flatheight = 9;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+
+ measuredDefaultWidth = 880;
+ measuredDefaultHeight = 100;
+ layoutBorderSize = 3;
+ flatheight = 7;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ measuredDefaultWidth = 600;
+ measuredDefaultHeight = 66;
+ layoutBorderSize = 2;
+ flatheight = 6;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ measuredDefaultWidth = 440;
+ measuredDefaultHeight = 50;
+ layoutBorderSize = 2;
+ flatheight = 5;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ measuredDefaultWidth = 220;
+ measuredDefaultHeight = 25;
+ layoutBorderSize = 1;
+ flatheight = 2;
+ break;
+ }
+ default:
+ {
+ measuredDefaultWidth = 300;
+ measuredDefaultHeight = 33;
+ layoutBorderSize = 1;
+ flatheight = 3;
+ break;
+ }
+ }
+ addEventListener(FocusEvent.FOCUS_IN, focusChangeHandler);
+ addEventListener(FocusEvent.FOCUS_OUT, focusChangeHandler);
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ protected var isFocused:Boolean = false;
+
+ protected var flatheight:uint;
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:TextInput; // SkinnableComponent will populate
+
+ /**
+ * @private
+ */
+ private var _isIOS:Boolean;
+
+ /**
+ * @private
+ */
+ private var _isEditing:Boolean;
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ super.createChildren();
+
+ textDisplay.addEventListener("editableChanged", editableChangedHandler);
+ textDisplay.addEventListener(FlexEvent.VALUE_COMMIT, valueCommitHandler);
+
+ // remove hit area improvements on iOS when editing
+ if (_isIOS)
+ {
+ textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, textDisplay_softKeyboardActivatingHandler, false, EventPriority.DEFAULT_HANDLER);
+ textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, textDisplay_softKeyboardDeactivateHandler);
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ super.measure();
+
+ var paddingLeft:Number = getStyle("paddingLeft");
+ var paddingRight:Number = getStyle("paddingRight");
+ var paddingTop:Number = getStyle("paddingTop");
+ var paddingBottom:Number = getStyle("paddingBottom");
+ var textHeight:Number = getStyle("fontSize") as Number;
+
+ if (textDisplay)
+ {
+ // temporarily change text for measurement
+ var oldText:String = textDisplay.text;
+
+ // commit styles so we can get a valid textHeight
+ textDisplay.text = "Wj";
+ textDisplay.commitStyles();
+
+ textHeight = textDisplay.measuredTextSize.y;
+ textDisplay.text = oldText;
+ }
+
+ // width is based on maxChars (if set)
+ if (hostComponent && hostComponent.maxChars)
+ {
+ // Grab the fontSize and subtract 2 as the pixel value for each character.
+ // This is just an approximation, but it appears to be a reasonable one
+ // for most input and most font.
+ var characterWidth:int = Math.max(1, (getStyle("fontSize") - 2));
+ measuredWidth = (characterWidth * hostComponent.maxChars) +
+ paddingLeft + paddingRight + StyleableTextField.TEXT_WIDTH_PADDING;
+ }
+
+ measuredHeight = paddingTop + textHeight + paddingBottom;
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ // position & size border
+ if (border)
+ {
+ setElementSize(border, unscaledWidth, unscaledHeight);
+ setElementPosition(border, 0, 0);
+ }
+
+ // position & size the text
+ var paddingLeft:Number = getStyle("paddingLeft");
+ var paddingRight:Number = getStyle("paddingRight");
+ var paddingTop:Number = getStyle("paddingTop");
+ var paddingBottom:Number = getStyle("paddingBottom");
+
+ var unscaledTextWidth:Number = unscaledWidth - paddingLeft - paddingRight;
+ var unscaledTextHeight:Number = unscaledHeight - paddingTop - paddingBottom;
+
+ // default vertical positioning is centered
+ var textHeight:Number = getElementPreferredHeight(textDisplay);
+ var textY:Number = Math.round(0.5 * (unscaledTextHeight - textHeight)) + paddingTop;
+
+ // On iOS the TextField top and bottom edges are bounded by the padding.
+ // On all other platforms, the height of the textDisplay is
+ // textHeight + paddingBottom to increase hitArea on bottom.
+ // Note: We don't move the Y position upwards because TextField
+ // has way to set vertical positioning.
+ // Note: iOS is a special case due to the clear button provided by the
+ // native text control used while editing.
+ var adjustedTextHeight:Number = (_isIOS && _isEditing) ? textHeight : textHeight + paddingBottom;
+
+ if (textDisplay)
+ {
+ // We're going to do a few tricks to try to increase the size of our hitArea to make it
+ // easier for users to select text or put the caret in a certain spot. To do that,
+ // rather than set textDisplay.x=paddingLeft, we are going to set
+ // textDisplay.leftMargin = paddingLeft. In addition, we're going to size the height
+ // of the textDisplay larger than just the size of the text inside to increase the hitArea
+ // on the bottom. We'll also assign textDisplay.rightMargin = paddingRight to increase the
+ // the hitArea on the right. Unfortunately, there's no way to increase the hitArea on the top
+ // just yet, but these three tricks definitely help out with regards to user experience.
+ // See http://bugs.adobe.com/jira/browse/SDK-29406 and http://bugs.adobe.com/jira/browse/SDK-29405
+
+ // set leftMargin, rightMargin to increase the hitArea. Need to set it before calling commitStyles().
+ var marginChanged:Boolean = ((textDisplay.leftMargin != paddingLeft) ||
+ (textDisplay.rightMargin != paddingRight));
+
+ textDisplay.leftMargin = paddingLeft;
+ textDisplay.rightMargin = paddingRight;
+
+ // need to force a styleChanged() after setting leftMargin, rightMargin if they
+ // changed values. Then we can validate the styles through commitStyles()
+ if (marginChanged)
+ textDisplay.styleChanged(null);
+ textDisplay.commitStyles();
+
+ setElementSize(textDisplay, unscaledWidth, adjustedTextHeight);
+
+ // set x=0 since we're using textDisplay.leftMargin = paddingLeft
+ setElementPosition(textDisplay, 0, textY);
+ }
+
+ if (promptDisplay)
+ {
+ promptDisplay.commitStyles();
+ setElementSize(promptDisplay, unscaledTextWidth, adjustedTextHeight);
+ setElementPosition(promptDisplay, paddingLeft, textY);
+ }
+ }
+
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ var contentBackgroundColor:uint = getStyle("contentBackgroundColor");
+ var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");
+ //change border color and thickness when in focus
+ var borderColor:uint = isFocused ? getStyle("focusColor") : getStyle("borderColor");
+ var selectWidth:uint = isFocused ? layoutBorderSize + 1 : layoutBorderSize;
+ if (isNaN(contentBackgroundAlpha))
+ {
+ contentBackgroundAlpha = 1;
+ }
+ if (getStyle("contentBackgroundBorder") == "flat")
+ {
+ var halfGap:int = flatheight * 2;
+ //background
+ graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+ graphics.drawRect(0, 0, unscaledWidth, unscaledHeight - flatheight);
+ graphics.endFill();
+ //begin flat border
+ graphics.beginFill(borderColor, 1);
+ //left half border
+ graphics.drawRect(0, unscaledHeight - halfGap, selectWidth, flatheight );
+ //bottom border
+ graphics.drawRect(0, unscaledHeight - flatheight, unscaledWidth, selectWidth);
+ //right border
+ graphics.drawRect(unscaledWidth - selectWidth, unscaledHeight - halfGap, selectWidth, flatheight);
+ graphics.endFill();
+ }
+ else if (getStyle("contentBackgroundBorder") == "rectangle")
+ {
+ var borderWidth:uint = layoutBorderSize * 2;
+ //rectangle border and background
+ graphics.lineStyle(selectWidth, borderColor, 1);
+ graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+ graphics.drawRect(layoutBorderSize, layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight - borderWidth);
+ graphics.endFill();
+ }
+ }
+
+ /**
+ * @private
+ */
+ private function editableChangedHandler(event:Event):void
+ {
+ invalidateDisplayList();
+ }
+
+ /**
+ * @private
+ * The text changed in some way.
+ *
+ * Dynamic fields (ie !editable) with no text measure with width=0 and height=0.
+ * If the text changed, need to remeasure the text to get the correct height so it
+ * will be laid out correctly.
+ */
+ private function valueCommitHandler(event:Event):void
+ {
+ if (textDisplay && !textDisplay.editable)
+ invalidateDisplayList();
+ }
+
+ /**
+ * @private
+ */
+ private function textDisplay_softKeyboardActivatingHandler(event:SoftKeyboardEvent):void
+ {
+ if (event.isDefaultPrevented())
+ return;
+
+ _isEditing = true;
+ invalidateDisplayList();
+ }
+
+ /**
+ * @private
+ */
+ private function textDisplay_softKeyboardDeactivateHandler(event:SoftKeyboardEvent):void
+ {
+ _isEditing = false;
+ invalidateDisplayList();
+ }
+
+ private function focusChangeHandler(event:FocusEvent):void
+ {
+ isFocused = event.type == FocusEvent.FOCUS_IN;
+ invalidateDisplayList();
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ToggleSwitchSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ToggleSwitchSkin.as b/tourdeflexmobile/src/spark/skins/android4/ToggleSwitchSkin.as
new file mode 100644
index 0000000..7f50554
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ToggleSwitchSkin.as
@@ -0,0 +1,506 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+
+ import flash.display.BlendMode;
+ import flash.events.Event;
+
+ import mx.core.DPIClassification;
+ import mx.core.IVisualElement;
+ import mx.core.UIComponent;
+
+ import spark.components.ToggleSwitch;
+ import spark.components.supportClasses.StyleableTextField;
+ import spark.core.SpriteVisualElement;
+ import spark.skins.android4.assets.ToggleSwitchBackground;
+ import spark.skins.android4.assets.ToggleSwitchThumb_off;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+
+ /**
+ * ActionScript-based Android 4.x specific skin for the ToggleSwitch control.
+ * This class is responsible for most of the
+ * graphics drawing, with additional fxg assets.
+ *
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ *
+ * @see spark.components.ToggleSwitch
+ */
+ public class ToggleSwitchSkin extends MobileSkin
+ {
+ //----------------------------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //----------------------------------------------------------------------------------------------
+
+ /**
+ * The thumb skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public var thumb:IVisualElement;
+ /**
+ * The track skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public var track:IVisualElement;
+
+ //----------------------------------
+ // hostComponent
+ //----------------------------------
+
+ private var _hostComponent:ToggleSwitch;
+ public var selectedLabelDisplay:LabelDisplayComponent;
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public function get hostComponent():ToggleSwitch
+ {
+ return _hostComponent;
+ }
+
+ public function set hostComponent(value:ToggleSwitch):void
+ {
+ if (_hostComponent)
+ _hostComponent.removeEventListener("thumbPositionChanged", thumbPositionChanged_handler);
+ _hostComponent = value;
+ if (_hostComponent)
+ _hostComponent.addEventListener("thumbPositionChanged", thumbPositionChanged_handler);
+ }
+
+ //----------------------------------
+ // selectedLabel
+ //----------------------------------
+
+ private var _selectedLabel:String;
+ /**
+ * The text of the label showing when the component is selected.
+ * Subclasses can set or override this property to customize the selected label.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected function get selectedLabel():String
+ {
+ return _selectedLabel;
+ }
+
+ protected function set selectedLabel(value:String):void
+ {
+ _selectedLabel = value;
+ }
+
+ //----------------------------------
+ // unselectedLabel
+ //----------------------------------
+
+ private var _unselectedLabel:String;
+ /**
+ * The text of the label showing when the component is not selected.
+ * Subclasses can set or override this property to customize the unselected label.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected function get unselectedLabel():String
+ {
+ return _unselectedLabel;
+ }
+
+ protected function set unselectedLabel(value:String):void
+ {
+ _unselectedLabel = value;
+ }
+
+
+ /**
+ * The contents inside the skin, not including the outline
+ * stroke
+ */
+ private var contents:UIComponent;
+ private var switchTrack:Class;
+ private var switchOff:Class;
+ private var switchOn:Class;
+ protected var trackWidth:Number;
+ protected var trackHeight:Number;
+ protected var layoutThumbWidth:Number;
+ protected var layoutThumbHeight:Number;
+ private var thumbOn:IVisualElement;
+ private var thumbOff:IVisualElement;
+
+ public function ToggleSwitchSkin()
+ {
+ super();
+
+ switchTrack = spark.skins.android4.assets.ToggleSwitchBackground;
+ switchOn = spark.skins.android4.assets.ToggleSwitchThumb_on;
+ switchOff = spark.skins.android4.assets.ToggleSwitchThumb_off;
+
+ switch(applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ layoutThumbWidth = 188;
+ layoutThumbHeight = 96;
+ trackWidth = 388;
+ trackHeight = 96;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ layoutThumbWidth = 140;
+ layoutThumbHeight = 72;
+ trackWidth = 291;
+ trackHeight = 72;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ layoutThumbWidth = 94;
+ layoutThumbHeight = 48;
+ trackWidth = 194;
+ trackHeight = 48;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ layoutThumbWidth = 70;
+ layoutThumbHeight = 36;
+ trackWidth = 146;
+ trackHeight = 36;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ layoutThumbWidth = 35;
+ layoutThumbHeight = 18;
+ trackWidth = 73;
+ trackHeight = 18;
+ break;
+ }
+ default:
+ {
+ layoutThumbWidth = 47;
+ layoutThumbHeight = 24;
+ trackWidth = 97;
+ trackHeight = 24;
+ break;
+ }
+ }
+
+ selectedLabel = resourceManager.getString("components","toggleSwitchSelectedLabel");
+ unselectedLabel = resourceManager.getString("components","toggleSwitchUnselectedLabel");
+ }
+
+ override protected function createChildren():void
+ {
+ super.createChildren();
+ contents = new UIComponent();
+ contents.blendMode = BlendMode.LAYER;
+ addChild(contents);
+ drawTrack();
+ drawThumbs();
+ drawLabel();
+ }
+
+ override protected function measure():void
+ {
+ // The skin must be at least as large as the thumb
+ measuredMinWidth = layoutThumbWidth;
+ measuredMinHeight = layoutThumbHeight;
+
+ // The preferred size will display all label text
+ var labelWidth:Number = getElementPreferredWidth(selectedLabelDisplay);
+ measuredWidth = layoutThumbWidth + labelWidth;
+ measuredHeight = layoutThumbHeight;
+ }
+
+ override protected function commitCurrentState():void
+ {
+ toggleSelectionState();
+ layoutThumbs();
+ layoutLabel();
+ }
+
+ //The label is called selectedLabelDisplay because the hostComponent expects it
+ protected function drawLabel():void
+ {
+ selectedLabelDisplay = new LabelDisplayComponent();
+ selectedLabelDisplay.id = "selectedLabelDisplay";
+ selectedLabelDisplay.text = selectedLabel;
+ setElementSize(selectedLabelDisplay,thumb.width,thumb.height);
+ contents.addChild(selectedLabelDisplay);
+ }
+
+ //Draw the track behind everything else
+ protected function drawTrack():void
+ {
+ if(track == null)
+ {
+ track = new switchTrack();
+ track.width = trackWidth;
+ track.height = trackHeight;
+ contents.addChildAt(SpriteVisualElement(track),0);
+ }
+ }
+
+ //Draw both thumbs. Set skinpart thumb to be thumbOff because default state of the switch is OFF
+ protected function drawThumbs():void
+ {
+ drawThumbOff();
+ drawThumbOn();
+ if(thumb == null)
+ {
+ thumb = thumbOff;
+ }
+ }
+
+ //Thumb ON the right side; Thumb OFF is on the left side
+ protected function layoutThumbs():void
+ {
+ setElementPosition(thumbOn,trackWidth/2,0);
+ setElementPosition(thumbOff,0,0);
+ }
+
+ //Label display sould be at the same location as the thumb
+ protected function layoutLabel():void
+ {
+ if(selectedLabelDisplay != null)
+ {
+ if(currentState.indexOf("AndSelected") != -1)
+ {
+ setElementPosition(selectedLabelDisplay,trackWidth/2,0);
+ }
+ else
+ {
+ setElementPosition(selectedLabelDisplay,0,0);
+ }
+ }
+ }
+
+ //Depending on current state, set skinpart thumb accordingly
+ protected function toggleSelectionState():void
+ {
+ if(currentState.indexOf("AndSelected") != -1)
+ {
+ thumbOn.visible = true;
+ thumbOff.visible = false;
+ thumb = thumbOn;
+ selectedLabelDisplay.text = selectedLabel;
+ }
+ else
+ {
+ thumbOff.visible = true;
+ thumbOn.visible = false;
+ thumb = thumbOff;
+ selectedLabelDisplay.text = unselectedLabel;
+ }
+ }
+
+ protected function drawThumbOn():void
+ {
+ thumbOn = new switchOn();
+ thumbOn.width = layoutThumbWidth;
+ thumbOn.height = layoutThumbHeight;
+ contents.addChildAt(SpriteVisualElement(thumbOn),1);
+ }
+
+ protected function drawThumbOff():void
+ {
+ thumbOff = new switchOff();
+ thumbOff.width = layoutThumbWidth;
+ thumbOff.height = layoutThumbHeight;
+ contents.addChildAt(SpriteVisualElement(thumbOff),1);
+ }
+
+ //Hostcomponent dispatches this event whenever the thumb position changes
+ protected function thumbPositionChanged_handler(event:Event):void
+ {
+ moveSlidingContent();
+ }
+
+ //Move the current thumb and label along with the animating content
+ protected function moveSlidingContent():void
+ {
+ if (!hostComponent)
+ return;
+ var x:Number = (track.getLayoutBoundsWidth() - thumb.getLayoutBoundsWidth()) *
+ hostComponent.thumbPosition + track.getLayoutBoundsX();
+ var y:Number = thumb.getLayoutBoundsY();
+ setElementPosition(thumb, x, y);
+ setElementPosition(selectedLabelDisplay, x, y);
+ }
+ }
+}
+
+
+import flash.events.Event;
+
+import mx.core.UIComponent;
+import mx.core.mx_internal;
+import mx.events.FlexEvent;
+
+import spark.components.supportClasses.StyleableTextField;
+import spark.core.IDisplayText;
+
+use namespace mx_internal;
+
+/**
+ * @private
+ * Component combining two labels to create the effect of text and its drop
+ * shadow. The component can be used with advanced style selectors and the
+ * styles "color", "textShadowColor", and "textShadowAlpha". Based off of
+ * ActionBar.TitleDisplayComponent. These two should eventually be factored.
+ */
+class LabelDisplayComponent extends UIComponent implements IDisplayText
+{
+ public var shadowYOffset:Number = 0;
+ private var labelChanged:Boolean = false;
+ private var labelDisplay:StyleableTextField;
+ private var labelDisplayShadow:StyleableTextField;
+ private var _text:String;
+
+ public function LabelDisplayComponent()
+ {
+ super();
+ _text = "";
+ }
+
+ override public function get baselinePosition():Number
+ {
+ return labelDisplay.baselinePosition;
+ }
+
+ override protected function createChildren():void
+ {
+ super.createChildren();
+
+ labelDisplay = StyleableTextField(createInFontContext(StyleableTextField));
+ labelDisplay.styleName = this;
+ labelDisplay.editable = false;
+ labelDisplay.selectable = false;
+ labelDisplay.multiline = false;
+ labelDisplay.wordWrap = false;
+ labelDisplay.addEventListener(FlexEvent.VALUE_COMMIT,
+ labelDisplay_valueCommitHandler);
+
+ labelDisplayShadow = StyleableTextField(createInFontContext(StyleableTextField));
+ labelDisplayShadow.styleName = this;
+ labelDisplayShadow.colorName = "textShadowColor";
+ labelDisplayShadow.editable = false;
+ labelDisplayShadow.selectable = false;
+ labelDisplayShadow.multiline = false;
+ labelDisplayShadow.wordWrap = false;
+
+ addChild(labelDisplayShadow);
+ addChild(labelDisplay);
+ }
+
+ override protected function commitProperties():void
+ {
+ super.commitProperties();
+
+ if (labelChanged)
+ {
+ labelDisplay.text = text;
+ invalidateSize();
+ invalidateDisplayList();
+ labelChanged = false;
+ }
+ }
+
+ override protected function measure():void
+ {
+ if (labelDisplay.isTruncated)
+ labelDisplay.text = text;
+ labelDisplay.commitStyles();
+ measuredWidth = labelDisplay.getPreferredBoundsWidth();
+ measuredHeight = labelDisplay.getPreferredBoundsHeight();
+ }
+
+ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ if (labelDisplay.isTruncated)
+ labelDisplay.text = text;
+ labelDisplay.commitStyles();
+
+ var labelHeight:Number = labelDisplay.getPreferredBoundsHeight();
+ var labelY:Number = (unscaledHeight - labelHeight) / 2;
+
+ var labelWidth:Number = Math.min(unscaledWidth, labelDisplay.getPreferredBoundsWidth());
+ var labelX:Number = (unscaledWidth - labelWidth) / 2;
+
+ labelDisplay.setLayoutBoundsSize(labelWidth, labelHeight);
+ labelDisplay.setLayoutBoundsPosition(labelX, labelY);
+
+ labelDisplay.truncateToFit();
+
+ labelDisplayShadow.commitStyles();
+ labelDisplayShadow.setLayoutBoundsSize(labelWidth, labelHeight);
+ labelDisplayShadow.setLayoutBoundsPosition(labelX, labelY + shadowYOffset);
+
+ labelDisplayShadow.alpha = getStyle("textShadowAlpha");
+
+ // unless the label was truncated, labelDisplayShadow.text was set in
+ // the value commit handler
+ if (labelDisplay.isTruncated)
+ labelDisplayShadow.text = labelDisplay.text;
+ }
+
+ private function labelDisplay_valueCommitHandler(event:Event):void
+ {
+ labelDisplayShadow.text = labelDisplay.text;
+ }
+
+ public function get text():String
+ {
+ return _text;
+ }
+
+ public function set text(value:String):void
+ {
+ _text = value;
+ labelChanged = true;
+ invalidateProperties();
+ }
+
+ public function get isTruncated():Boolean
+ {
+ return labelDisplay.isTruncated;
+ }
+
+ public function showShadow(value:Boolean):void
+ {
+ labelDisplayShadow.visible = value;
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TransparentActionButtonSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TransparentActionButtonSkin.as b/tourdeflexmobile/src/spark/skins/android4/TransparentActionButtonSkin.as
new file mode 100644
index 0000000..a82664e
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TransparentActionButtonSkin.as
@@ -0,0 +1,108 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+import flash.display.DisplayObject;
+import flash.display.Graphics;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.skins.android4.assets.TransparentActionButton_down;
+import spark.skins.android4.assets.TransparentActionButton_up;
+import spark.skins.mobile.supportClasses.ActionBarButtonSkinBase;
+import spark.skins.mobile.supportClasses.MobileSkin;
+import spark.skins.mobile320.assets.TransparentActionButton_down;
+import spark.skins.mobile320.assets.TransparentActionButton_up;
+import spark.skins.mobile480.assets.TransparentActionButton_down;
+import spark.skins.mobile480.assets.TransparentActionButton_up;
+import spark.skins.mobile640.assets.TransparentActionButton_down;
+import spark.skins.mobile640.assets.TransparentActionButton_up;
+
+use namespace mx_internal;
+
+/**
+ * The default skin class for buttons in the action area of the Spark ActionBar component
+ * in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+public class TransparentActionButtonSkin extends ActionBarButtonSkinBase
+{
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function TransparentActionButtonSkin()
+ {
+ super();
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ upBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_up;
+ downBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_down;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ upBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_up;
+ downBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_down;
+
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ upBorderSkin = spark.skins.mobile320.assets.TransparentActionButton_up;
+ downBorderSkin = spark.skins.mobile320.assets.TransparentActionButton_down;
+
+ break;
+ }
+ default:
+ {
+ upBorderSkin = spark.skins.android4.assets.TransparentActionButton_up;
+ downBorderSkin = spark.skins.android4.assets.TransparentActionButton_down;
+
+ break;
+ }
+ }
+ }
+
+ override mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ // don't call super, don't layout twice
+ // leading vertical separator is outside the left bounds of the button
+ setElementSize(border, unscaledWidth, unscaledHeight);
+ setElementPosition(border, 0, 0);
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TransparentNavigationButtonSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TransparentNavigationButtonSkin.as b/tourdeflexmobile/src/spark/skins/android4/TransparentNavigationButtonSkin.as
new file mode 100644
index 0000000..6b31e22
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TransparentNavigationButtonSkin.as
@@ -0,0 +1,109 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+import flash.display.DisplayObject;
+import flash.display.Graphics;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.skins.android4.assets.TransparentNavigationButton_down;
+import spark.skins.android4.assets.TransparentNavigationButton_up;
+import spark.skins.mobile.supportClasses.ActionBarButtonSkinBase;
+import spark.skins.mobile.supportClasses.MobileSkin;
+//import spark.skins.mobile320.assets.TransparentNavigationButton_down;
+//import spark.skins.mobile320.assets.TransparentNavigationButton_up;
+//import spark.skins.mobile480.assets.TransparentNavigationButton_down;
+//import spark.skins.mobile480.assets.TransparentNavigationButton_up;
+//import spark.skins.mobile640.assets.TransparentNavigationButton_down;
+//import spark.skins.mobile640.assets.TransparentNavigationButton_up;
+
+use namespace mx_internal;
+
+/**
+ * The default skin class for buttons in the navigation area of the Spark ActionBar component
+ * in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+public class TransparentNavigationButtonSkin extends ActionBarButtonSkinBase
+{
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function TransparentNavigationButtonSkin()
+ {
+ super();
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ // upBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_up;
+ // downBorderSkin = spark.skins.mobile640.assets.TransparentActionButton_down;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ // upBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_up;
+ // downBorderSkin = spark.skins.mobile480.assets.TransparentActionButton_down;
+
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ // upBorderSkin = spark.skins.mobile320.assets.TransparentNavigationButton_up;
+ // downBorderSkin = spark.skins.mobile320.assets.TransparentNavigationButton_down;
+
+ break;
+ }
+ default:
+ {
+ upBorderSkin = spark.skins.android4.assets.TransparentNavigationButton_up;
+ downBorderSkin = spark.skins.android4.assets.TransparentNavigationButton_down;
+
+ break;
+ }
+ }
+ }
+
+ override mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ // trailing vertical separator is outside the right bounds of the button
+ setElementSize(border, unscaledWidth, unscaledHeight);
+ setElementPosition(border, 0, 0);
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/VScrollBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/VScrollBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/VScrollBarSkin.as
new file mode 100644
index 0000000..10312c5
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/VScrollBarSkin.as
@@ -0,0 +1,207 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+
+ import mx.core.DPIClassification;
+ import mx.core.mx_internal;
+
+ import spark.components.Button;
+ import spark.components.VScrollBar;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+
+ /**
+ * ActionScript-based skin for VScrollBar components in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class VScrollBarSkin extends MobileSkin
+ {
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function VScrollBarSkin()
+ {
+ super();
+
+ minHeight = 20;
+ thumbSkinClass = VScrollBarThumbSkin;
+ var paddingRight:int;
+ var paddingVertical:int;
+
+ // Depending on density set our measured width
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ minWidth = 24;
+ paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_640DPI;
+ paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_640DPI;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ minWidth = 18;
+ paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_480DPI;
+ paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_480DPI;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ minWidth = 12;
+ paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_320DPI;
+ paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_320DPI;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ minWidth = 9;
+ paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_240DPI;
+ paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_240DPI;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ minWidth = 9;
+ paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_120DPI;
+ paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_120DPI;
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+ minWidth = 6;
+ paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_DEFAULTDPI;
+ paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_DEFAULTDPI;
+ break;
+ }
+ }
+
+ // The minimum height is set such that, at it's smallest size, the thumb appears
+ // as high as it is wide.
+ minThumbHeight = (minWidth - paddingRight) + (paddingVertical * 2);
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:VScrollBar;
+
+ /**
+ * Minimum height for the thumb
+ */
+ protected var minThumbHeight:Number;
+
+ /**
+ * Skin to use for the thumb Button skin part
+ */
+ protected var thumbSkinClass:Class;
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * VScrollbar track skin part
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var track:Button;
+
+ /**
+ * VScrollbar thumb skin part
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var thumb:Button;
+
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ // Create our skin parts if necessary: track and thumb.
+ if (!track)
+ {
+ // We don't want a visible track so we set the skin to MobileSkin
+ track = new Button();
+ track.setStyle("skinClass", spark.skins.mobile.supportClasses.MobileSkin);
+ track.width = minWidth;
+ track.height = minHeight;
+ addChild(track);
+ }
+ if (!thumb)
+ {
+ thumb = new Button();
+ thumb.minHeight = minThumbHeight;
+ thumb.setStyle("skinClass", thumbSkinClass);
+ thumb.width = minWidth;
+ thumb.height = minWidth;
+ addChild(thumb);
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ setElementSize(track, unscaledWidth, unscaledHeight);
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/VScrollBarThumbSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/VScrollBarThumbSkin.as b/tourdeflexmobile/src/spark/skins/android4/VScrollBarThumbSkin.as
new file mode 100644
index 0000000..d9a3804
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/VScrollBarThumbSkin.as
@@ -0,0 +1,178 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+
+ import flash.display.CapsStyle;
+ import flash.display.JointStyle;
+ import flash.display.LineScaleMode;
+
+ import mx.core.DPIClassification;
+ import mx.core.mx_internal;
+ use namespace mx_internal;
+
+ import spark.components.Button;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ /**
+ * ActionScript-based skin for the VScrollBar thumb skin part in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class VScrollBarThumbSkin extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Class constants
+ //
+ //--------------------------------------------------------------------------
+
+ // These constants are also accessed from VScrollBarSkin
+ mx_internal static const PADDING_RIGHT_640DPI:int = 10;
+ mx_internal static const PADDING_VERTICAL_640DPI:int = 8;
+ mx_internal static const PADDING_RIGHT_480DPI:int = 8;
+ mx_internal static const PADDING_VERTICAL_480DPI:int = 6;
+ mx_internal static const PADDING_RIGHT_320DPI:int = 5;
+ mx_internal static const PADDING_VERTICAL_320DPI:int = 4;
+ mx_internal static const PADDING_RIGHT_240DPI:int = 4;
+ mx_internal static const PADDING_VERTICAL_240DPI:int = 3;
+ mx_internal static const PADDING_RIGHT_120DPI:int = 2;
+ mx_internal static const PADDING_VERTICAL_120DPI:int = 1;
+ mx_internal static const PADDING_RIGHT_DEFAULTDPI:int = 3;
+ mx_internal static const PADDING_VERTICAL_DEFAULTDPI:int = 2;
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function VScrollBarThumbSkin()
+ {
+ super();
+
+ // Depending on density set padding
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ minWidth = 19;
+ paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_640DPI;
+ paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_640DPI;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ minWidth = 19;
+ paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_480DPI;
+ paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_480DPI;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ paddingRight = PADDING_RIGHT_320DPI;
+ paddingVertical = PADDING_VERTICAL_320DPI;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ paddingRight = PADDING_RIGHT_240DPI;
+ paddingVertical = PADDING_VERTICAL_240DPI;
+ break;
+ }
+ default:
+ {
+ paddingRight = PADDING_RIGHT_DEFAULTDPI;
+ paddingVertical = PADDING_VERTICAL_DEFAULTDPI;
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:Button;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Padding from the right
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var paddingRight:int;
+
+ /**
+ * Vertical padding from top and bottom
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var paddingVertical:int;
+
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @protected
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ var thumbWidth:Number = unscaledWidth - paddingRight;
+
+ graphics.beginFill(getStyle("thumbColor"), 1);
+ graphics.drawRect(0.5, paddingVertical + 0.5,thumbWidth, unscaledHeight - 2 * paddingVertical);
+
+ graphics.endFill();
+ }
+
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ViewMenuItemSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ViewMenuItemSkin.as b/tourdeflexmobile/src/spark/skins/android4/ViewMenuItemSkin.as
new file mode 100644
index 0000000..ae9a68e
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ViewMenuItemSkin.as
@@ -0,0 +1,238 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4
+{
+ import flash.display.GradientType;
+ import flash.display.Graphics;
+
+ import mx.core.DPIClassification;
+ import mx.core.mx_internal;
+
+ import spark.components.IconPlacement;
+ import spark.skins.mobile.assets.ViewMenuItem_down;
+ import spark.skins.mobile.assets.ViewMenuItem_showsCaret;
+ import spark.skins.mobile.assets.ViewMenuItem_up;
+ import spark.skins.mobile.supportClasses.ButtonSkinBase;
+ import spark.skins.mobile120.assets.ViewMenuItem_down;
+ import spark.skins.mobile120.assets.ViewMenuItem_showsCaret;
+ import spark.skins.mobile120.assets.ViewMenuItem_up;
+ import spark.skins.mobile320.assets.ViewMenuItem_down;
+ import spark.skins.mobile320.assets.ViewMenuItem_showsCaret;
+ import spark.skins.mobile320.assets.ViewMenuItem_up;
+// import spark.skins.mobile480.assets.ViewMenuItem_down;
+ //import spark.skins.mobile480.assets.ViewMenuItem_showsCaret;
+ //import spark.skins.mobile480.assets.ViewMenuItem_up;
+ import spark.skins.mobile640.assets.ViewMenuItem_down;
+ import spark.skins.mobile640.assets.ViewMenuItem_showsCaret;
+ import spark.skins.mobile640.assets.ViewMenuItem_up;
+
+
+ use namespace mx_internal;
+
+ /**
+ * Default skin for ViewMenuItem. Supports a label, icon and iconPlacement and draws a background.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class ViewMenuItemSkin extends ButtonSkin
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function ViewMenuItemSkin()
+ {
+ super();
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+
+ upBorderSkin = spark.skins.mobile640.assets.ViewMenuItem_up;
+ downBorderSkin = spark.skins.mobile640.assets.ViewMenuItem_down;
+ showsCaretBorderSkin = spark.skins.mobile640.assets.ViewMenuItem_showsCaret;
+
+ layoutGap = 24;
+ layoutPaddingLeft = 24;
+ layoutPaddingRight = 24;
+ layoutPaddingTop = 24;
+ layoutPaddingBottom = 24;
+ layoutBorderSize = 3;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ // Note provisional may need changes
+ upBorderSkin = spark.skins.mobile.assets.ViewMenuItem_up;
+ downBorderSkin = spark.skins.mobile.assets.ViewMenuItem_down;
+ showsCaretBorderSkin = spark.skins.mobile.assets.ViewMenuItem_showsCaret;
+
+ layoutGap = 16;
+ layoutPaddingLeft = 16;
+ layoutPaddingRight = 16;
+ layoutPaddingTop = 16;
+ layoutPaddingBottom = 16;
+ layoutBorderSize = 2;
+
+ break;
+
+ }
+ case DPIClassification.DPI_320:
+ {
+
+ upBorderSkin = spark.skins.mobile320.assets.ViewMenuItem_up;
+ downBorderSkin = spark.skins.mobile320.assets.ViewMenuItem_down;
+ showsCaretBorderSkin = spark.skins.mobile320.assets.ViewMenuItem_showsCaret;
+
+ layoutGap = 12;
+ layoutPaddingLeft = 12;
+ layoutPaddingRight = 12;
+ layoutPaddingTop = 12;
+ layoutPaddingBottom = 12;
+ layoutBorderSize = 2;
+
+
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ upBorderSkin = spark.skins.mobile.assets.ViewMenuItem_up;
+ downBorderSkin = spark.skins.mobile.assets.ViewMenuItem_down;
+ showsCaretBorderSkin = spark.skins.mobile.assets.ViewMenuItem_showsCaret;
+
+ layoutGap = 8;
+ layoutPaddingLeft = 8;
+ layoutPaddingRight = 8;
+ layoutPaddingTop = 8;
+ layoutPaddingBottom = 8;
+ layoutBorderSize = 1;
+
+ break;
+
+ }
+ case DPIClassification.DPI_120:
+ {
+ upBorderSkin = spark.skins.mobile120.assets.ViewMenuItem_up;
+ downBorderSkin = spark.skins.mobile120.assets.ViewMenuItem_down;
+ showsCaretBorderSkin = spark.skins.mobile120.assets.ViewMenuItem_showsCaret;
+
+ layoutGap = 4;
+ layoutPaddingLeft = 4;
+ layoutPaddingRight = 4;
+ layoutPaddingTop = 4;
+ layoutPaddingBottom = 4;
+ layoutBorderSize = 1;
+
+ break;
+
+ }
+ default:
+ {
+ upBorderSkin = spark.skins.mobile.assets.ViewMenuItem_up;
+ downBorderSkin = spark.skins.mobile.assets.ViewMenuItem_down;
+ showsCaretBorderSkin = spark.skins.mobile.assets.ViewMenuItem_showsCaret;
+
+ layoutGap = 6;
+ layoutPaddingLeft = 6;
+ layoutPaddingRight = 6;
+ layoutPaddingTop = 6;
+ layoutPaddingBottom = 6;
+ layoutBorderSize = 1;
+ }
+ }
+
+ }
+
+ /**
+ * Class to use for the border in the showsCaret state.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ * @default Button_down
+ */
+ protected var showsCaretBorderSkin:Class;
+
+ /**
+ * @private
+ */
+ override protected function getBorderClassForCurrentState():Class
+ {
+ var borderClass:Class = super.getBorderClassForCurrentState();
+
+ if (currentState == "showsCaret")
+ borderClass = showsCaretBorderSkin;
+
+ return borderClass;
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ var iconPlacement:String = getStyle("iconPlacement");
+ useCenterAlignment = (iconPlacement == IconPlacement.LEFT)
+ || (iconPlacement == IconPlacement.RIGHT);
+
+ super.layoutContents(unscaledWidth, unscaledHeight);
+ }
+
+ /**
+ * @private
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ // omit call to super.drawBackground(), drawRect instead
+
+ if (currentState == "showsCaret" || currentState == "down")
+ {
+ graphics.beginFill(getStyle("focusColor"));
+ }
+ else
+ {
+ colorMatrix.createGradientBox(unscaledWidth,
+ unscaledHeight,
+ Math.PI / 2, 0, 0);
+ var chromeColor:uint = getStyle("chromeColor");
+
+ graphics.beginGradientFill(GradientType.LINEAR,
+ [chromeColor, chromeColor],
+ [1.0, 1.0],
+ [0, 255],
+ colorMatrix);
+ }
+ graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
+ graphics.lineStyle(0.5,0,0.2);
+ graphics.drawRect(0,unscaledHeight,unscaledWidth,0.5);
+ graphics.endFill();
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ViewMenuSkin.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ViewMenuSkin.mxml b/tourdeflexmobile/src/spark/skins/android4/ViewMenuSkin.mxml
new file mode 100644
index 0000000..36feed6
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ViewMenuSkin.mxml
@@ -0,0 +1,184 @@
+<?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.
+
+-->
+
+
+<!--- The default skin class for a Spark ViewMenu in a mobile application.
+
+@see spark.components.ViewMenu
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.ViewMenu")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script fb:purpose="styling">
+ <![CDATA[
+ import mx.core.DPIClassification;
+ import mx.core.FlexGlobals;
+ import spark.effects.easing.Power;
+
+
+ /**
+ * @private
+ */
+ override protected function initializationComplete():void
+ {
+ useChromeColor = false;
+ super.initializationComplete();
+ }
+
+ /**
+ * @copy spark.skins.mobile.supportClasses.MobileSkin#applicationDPI
+ */
+ public function get applicationDPI():int
+ {
+ return FlexGlobals.topLevelApplication.applicationDPI;
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ super.measure();
+
+ // not actually used in normal situations, but
+ // is here to prevent bug 28950 if ViewMenu is misused
+ measuredHeight = 200;
+ }
+
+ /**
+ * @private
+ */
+ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+
+ var strokeWeight:Number = (applicationDPI == DPIClassification.DPI_640 || applicationDPI == DPIClassification.DPI_480 || applicationDPI == DPIClassification.DPI_320) ? 2 : 1;
+ var separatorWeight:Number = 1;
+
+ if (applicationDPI == DPIClassification.DPI_640)
+ separatorWeight = 6;
+ else if (applicationDPI == DPIClassification.DPI_480)
+ separatorWeight = 4;
+ else if (applicationDPI == DPIClassification.DPI_320)
+ separatorWeight = 3;
+ else if (applicationDPI == DPIClassification.DPI_240)
+ separatorWeight = 2;
+ else if (applicationDPI == DPIClassification.DPI_120)
+ separatorWeight = 1;
+
+ contentGroup.top = strokeWeight + separatorWeight;
+ contentGroup.bottom = separatorWeight;
+ contentGroupLayout.gap = separatorWeight;
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" stateGroups="openedGroup"/>
+ <s:State name="closed" stateGroups="closedGroup"/>
+ <s:State name="disabled" stateGroups="openedGroup"/>
+ <s:State name="normalAndLandscape" stateGroups="openedGroup, landscapeGroup"/>
+ <s:State name="closedAndLandscape" stateGroups="closedGroup, landscapeGroup"/>
+ <s:State name="disabledAndLandscape" stateGroups="openedGroup, landscapeGroup" />
+ </s:states>
+
+ <s:transitions>
+ <s:Transition fromState="closed" toState="normal" autoReverse="true">
+ <s:Parallel>
+ <s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" />
+ <s:Move target="{chromeGroup}" duration="150" disableLayout="true" easer="{new Power(0, 5)}"/>
+ </s:Parallel>
+ </s:Transition>
+
+ <s:Transition fromState="closedAndLandscape" toState="normalAndLandscape" autoReverse="true">
+ <s:Parallel>
+ <s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" />
+ <s:Move target="{chromeGroup}" duration="150" disableLayout="true" easer="{new Power(0, 5)}"/>
+ </s:Parallel>
+ </s:Transition>
+
+ <s:Transition fromState="normal" toState="closed" autoReverse="true">
+ <s:Parallel>
+ <s:Fade target="{chromeGroup}" duration="100"/>
+ <s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
+ </s:Parallel>
+ </s:Transition>
+
+ <s:Transition fromState="normalAndLandscape" toState="closedAndLandscape" autoReverse="true">
+ <s:Parallel>
+ <s:Fade target="{chromeGroup}" duration="100"/>
+ <s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
+ </s:Parallel>
+ </s:Transition>
+ </s:transitions>
+
+ <!-- The ViewMenu and its skin are sized to the application.
+ The menu chrome is a separate group that is anchored to the bottom of the skin. -->
+
+
+ <s:Group id="chromeGroup"
+ left="0"
+ right="0"
+ top.closedGroup="{hostComponent.height - chromeGroup.height / 2}"
+ bottom.openedGroup="0"
+ visible.closedGroup="false">
+
+ <s:Rect id="backgroundRect" left="18" right="18" top="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="#FFFFFF" />
+ </s:fill>
+ <s:stroke>
+ <s:SolidColorStroke weight="0.5" alpha="0.2" />
+ </s:stroke>
+ <s:filters>
+ <s:DropShadowFilter alpha="0.5" />
+ </s:filters>
+ </s:Rect>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <!--- @copy spark.components.SkinnableContainer#contentGroup -->
+ <s:Group id="contentGroup" left="20" right="20" top="3" bottom="2" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:VerticalLayout gap="-1" id="contentGroupLayout" horizontalAlign="contentJustify" >
+ </s:VerticalLayout>
+ </s:layout>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
+
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ActionBarBackground.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ActionBarBackground.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ActionBarBackground.fxg
new file mode 100644
index 0000000..febd3f7
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ActionBarBackground.fxg
@@ -0,0 +1,55 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group>
+ <Group>
+ <Path winding="nonZero" data="M360 48 0 48 0 0 360 0 360 48Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ </Group>
+ <Path winding="nonZero" data="M360 1 0 1 0 0 360 0 360 1Z">
+ <fill>
+ <SolidColor color="#E0E0E0"/>
+ </fill>
+ </Path>
+ <Group y="46" alpha="0.100006">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M0 2 360 2 360 0 0 0 0 2Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M360 2 0 2 0 0 360 0 360 2Z">
+ <fill>
+ <SolidColor color="#333333"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Path visible="false" winding="nonZero" data="M0 0 360 0 360 48 0 48 0 0Z"/>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/BusyIndicator.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/BusyIndicator.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/BusyIndicator.fxg
new file mode 100644
index 0000000..71cd0fa
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/BusyIndicator.fxg
@@ -0,0 +1,64 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewWidth="36" viewHeight="36">
+ <Group>
+ <Group x="-12.8125" y="-6.73926">
+ <mask>
+ <Group x="12.8496" y="6.6665">
+ <Path winding="nonZero" data="M0 18.0117C0 27.9429 6.96289 35.9961 17.9629 36.0239L17.9629 33.0127C8.96289 32.9858 3.01074 26.2813 3.01074 18.0117 3.01074 9.74316 8.96289 3.03809 17.9629 3.00977L17.9629 0C6.96289 0.027832 0 8.08008 0 18.0117Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M0 36.7485 16.332 0 44.7012 12.6084 28.3691 49.3569 0 36.7485Z">
+ <fill>
+ <LinearGradient x="13.4458" y="44.7148" scaleX="27.8603" rotation="293.962">
+ <GradientEntry ratio="0" color="#FFFFFF"/>
+ <GradientEntry ratio="0.576638" color="#B4B4B3"/>
+ <GradientEntry ratio="0.820765" color="#9C9C9B"/>
+ <GradientEntry ratio="1" color="#919190"/>
+ </LinearGradient>
+ </fill>
+ </Path>
+ </Group>
+ <Group x="2.61719" y="-8">
+ <mask>
+ <Group x="15.3828" y="7.92773">
+ <Path winding="nonZero" data="M0 3.00977C8 3.03809 14.9512 9.74316 14.9512 18.0117 14.9512 26.2813 8 32.9858 0 33.0127L0 36.0239C10 35.9961 17.9629 27.9429 17.9629 18.0117 17.9629 8.08008 10 0.027832 0 0L0 3.00977Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M49.7617 34.4028 29.1016 0 0 17.4766 20.6621 51.8799 49.7617 34.4028Z">
+ <fill>
+ <LinearGradient x="37.6406" y="47.1841" scaleX="27.7241" rotation="239.012">
+ <GradientEntry ratio="0" color="#919190"/>
+ <GradientEntry ratio="1" color="#FFFFFF"/>
+ </LinearGradient>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+</Graphic>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_down.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_down.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_down.fxg
new file mode 100644
index 0000000..4a7c5f7
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_down.fxg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="29.75" scaleGridRight="89.25" scaleGridTop="36" scaleGridBottom="12">
+ <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Rect alpha="0.5" width="119" height="48">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Rect>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedDown.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedDown.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedDown.fxg
new file mode 100644
index 0000000..110f940
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedDown.fxg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="29.75" scaleGridRight="89.25" scaleGridTop="36" scaleGridBottom="12">
+ <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Path alpha="0.5" winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedUp.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedUp.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedUp.fxg
new file mode 100644
index 0000000..52b1a90
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_selectedUp.fxg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="29.75" scaleGridRight="89.25" scaleGridTop="36" scaleGridBottom="12">
+ <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_up.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_up.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_up.fxg
new file mode 100644
index 0000000..59b9cd9
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarFirstButton_up.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="29.75" scaleGridRight="89.25" scaleGridTop="36" scaleGridBottom="12">
+ <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_down.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_down.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_down.fxg
new file mode 100644
index 0000000..4e4f80b
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_down.fxg
@@ -0,0 +1,70 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group>
+ <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Group y="12" alpha="0.100006">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#333333"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Group x="118" y="12" alpha="0.100006">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#333333"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Path alpha="0.5" winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedDown.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedDown.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedDown.fxg
new file mode 100644
index 0000000..ec37077
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedDown.fxg
@@ -0,0 +1,75 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group>
+ <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Group y="12" alpha="0.100006">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#333333"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Group x="118" y="12" alpha="0.100006">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#333333"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ <Path alpha="0.5" winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedUp.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedUp.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedUp.fxg
new file mode 100644
index 0000000..88a4643
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_selectedUp.fxg
@@ -0,0 +1,70 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group>
+ <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Group y="12" alpha="0.100006">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#333333"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Group x="118" y="12" alpha="0.100006">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#333333"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Path y="42" winding="nonZero" data="M119 6 0 6 0 0 119 0 119 6Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_up.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_up.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_up.fxg
new file mode 100644
index 0000000..be1b619
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ButtonBarMiddleButton_up.fxg
@@ -0,0 +1,65 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group>
+ <Path winding="nonZero" data="M119 48 0 48 0 0 119 0 119 48Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Group y="12" alpha="0.100006">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#333333"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Group x="118" y="12" alpha="0.100006">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M1 24 0 24 0 0 1 0 1 24Z">
+ <fill>
+ <SolidColor color="#333333"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ </Group>
+</Graphic>
\ No newline at end of file
[14/22] added in Android Skins
Posted by bi...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/Button_down.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/Button_down.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/Button_down.fxg
new file mode 100644
index 0000000..79a535c
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/Button_down.fxg
@@ -0,0 +1,73 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group>
+ <Path x="2.5" y="2.5" winding="nonZero" data="M184 39 0 39 0 0 184 0 184 39Z">
+ <stroke>
+ <SolidColorStroke weight="5" caps="none" miterLimit="10" color="#CDCCCC"/>
+ </stroke>
+ </Path>
+ <Group x="3" y="2">
+ <Path winding="nonZero" data="M184 39 0 39 0 0 184 0 184 39Z">
+ <fill>
+ <SolidColor color="#B3B3B3"/>
+ </fill>
+ </Path>
+ </Group>
+ <Group x="3" y="2" alpha="0.5">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M0 1 184 1 184 0 0 0 0 1Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M184 1 0 1 0 0 184 0 184 1Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Group x="3" y="2" alpha="0.199997">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M0 39 184 39 184 0 0 0 0 39Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M183 0 183 38 0 38 0 39 184 39 184 0 183 0Z">
+ <fill>
+ <SolidColor color="#484849"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Path visible="false" winding="nonZero" data="M0 0 189 0 189 44 0 44 0 0Z"/>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/Button_up.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/Button_up.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/Button_up.fxg
new file mode 100644
index 0000000..af7d033
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/Button_up.fxg
@@ -0,0 +1,60 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group>
+ <Group alpha="0.399994">
+ <Group>
+ <mask>
+ <Group>
+ <Path winding="nonZero" data="M0 1 184 1 184 0 0 0 0 1Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </mask>
+ <Path winding="nonZero" data="M184 1 0 1 0 0 184 0 184 1Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+ <Group alpha="0.100006">
+ <Group>
+ <Path winding="nonZero" data="M183 0 183 38 0 38 0 39 184 39 184 0 183 0Z">
+ <fill>
+ <SolidColor color="#484849"/>
+ </fill>
+ </Path>
+ <Group>
+ <Path winding="nonZero" data="M184 39 0 39 0 0 184 0 184 39Z">
+ <fill>
+ <SolidColor color="#CDCCCC"/>
+ </fill>
+ </Path>
+ <Path winding="nonZero" data="M0 39 184 39 184 0 0 0 0 39Z"/>
+ </Group>
+ </Group>
+ </Group>
+ <Path visible="false" winding="nonZero" data="M0 0 184 0 184 39 0 39 0 0Z"/>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/CalloutContentBackground.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/CalloutContentBackground.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/CalloutContentBackground.fxg
new file mode 100644
index 0000000..8442b96
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/CalloutContentBackground.fxg
@@ -0,0 +1,51 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008"
+ scaleGridLeft="12" scaleGridRight="588" scaleGridTop="30" scaleGridBottom="388">
+
+ <!-- invisible fix for scaling -->
+ <Rect x="0" y="399" width="600" height="1">
+ <fill>
+ <SolidColor color="#ffffff" alpha="0"/>
+ </fill>
+ </Rect>
+
+ <!-- Content Shading Top -->
+ <Rect x="0" y="0" width="600" height="20"
+ topLeftRadiusX="10" topLeftRadiusY="10"
+ topRightRadiusX="10" topRightRadiusY="10">
+ <fill>
+ <LinearGradient rotation="90">
+ <GradientEntry ratio="0" color="#000000" alpha="0.6"/>
+ <GradientEntry ratio="0.5" color="#000000" alpha="0"/>
+ </LinearGradient>
+ </fill>
+ </Rect>
+
+ <!-- Content Highlight -->
+ <Rect x="1" y="1" width="598" height="398"
+ radiusX="10" radiusY="10">
+ <stroke>
+ <SolidColorStroke color="#FFFFFF" alpha="0.8"
+ weight="2"/>
+ </stroke>
+ </Rect>
+</Graphic>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_down.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_down.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_down.fxg
new file mode 100644
index 0000000..426df3d
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_down.fxg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="8" scaleGridRight="24" scaleGridTop="24" scaleGridBottom="8">
+ <Path winding="nonZero" data="M32 31.001C32 31.5527 31.5527 32 31.001 32L0.999023 32C0.447266 32 0 31.5527 0 31.001L0 0.999023C0 0.447266 0.447266 0 0.999023 0L31.001 0C31.5527 0 32 0.447266 32 0.999023L32 31.001Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Path x="8" y="8" winding="nonZero" data="M16 16 0 16 0 0 16 0 16 16ZM1 15 15 15 15 1 1 1 1 15Z">
+ <fill>
+ <SolidColor color="#676767"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_downSelected.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_downSelected.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_downSelected.fxg
new file mode 100644
index 0000000..ea7c3c4
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_downSelected.fxg
@@ -0,0 +1,35 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="8" scaleGridRight="24" scaleGridTop="24" scaleGridBottom="8">
+ <Path winding="nonZero" data="M32 31.001C32 31.5527 31.5527 32 31.001 32L0.999023 32C0.447266 32 0 31.5527 0 31.001L0 0.999023C0 0.447266 0.447266 0 0.999023 0L31.001 0C31.5527 0 32 0.447266 32 0.999023L32 31.001Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Path x="8" y="8" winding="nonZero" data="M15 7 15 15 1 15 1 1 14 1 14 0 0 0 0 16 16 16 16 7 15 7Z">
+ <fill>
+ <SolidColor color="#676767"/>
+ </fill>
+ </Path>
+ <Path visible="false" winding="nonZero" data="M0 0 32 0 32 32 0 32 0 0Z"/>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_downSymbolSelected.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_downSymbolSelected.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_downSymbolSelected.fxg
new file mode 100644
index 0000000..f59d001
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_downSymbolSelected.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="4.09595" scaleGridRight="12.2878" scaleGridTop="9.99243" scaleGridBottom="3.33081">
+ <Path winding="nonZero" data="M14.165 0 16.3838 2.21924 5.24023 13.3232 0 8.52441 2.18164 6.11719 5.37305 9.06348 14.165 0Z">
+ <fill>
+ <SolidColor color="#676767"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_up.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_up.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_up.fxg
new file mode 100644
index 0000000..9d65260
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_up.fxg
@@ -0,0 +1,31 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="32" viewWidth="32">
+ <Group alpha="0.5" x="8" y="8">
+ <Group>
+ <Path winding="nonZero" data="M16 16 0 16 0 0 16 0 16 16ZM1 15 15 15 15 1 1 1 1 15Z">
+ <fill>
+ <SolidColor color="#676767"/>
+ </fill>
+ </Path>
+ </Group>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_upSelected.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_upSelected.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_upSelected.fxg
new file mode 100644
index 0000000..f51d7df
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_upSelected.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="32" viewWidth="32">
+ <Group x="8" y="8" scaleGridLeft="4" scaleGridRight="12" scaleGridTop="12" scaleGridBottom="4">
+ <Path winding="nonZero" data="M15 7 15 15 1 15 1 1 14 1 14 0 0 0 0 16 16 16 16 7 15 7Z">
+ <fill>
+ <SolidColor color="#676767"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_upSymbolSelected.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_upSymbolSelected.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_upSymbolSelected.fxg
new file mode 100644
index 0000000..a728d3d
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/CheckBox_upSymbolSelected.fxg
@@ -0,0 +1,33 @@
+<?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.
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group>
+ <Path x="0.624023" y="0.399414" winding="nonZero" data="M14.165 0 16.3838 2.21924 5.24023 13.3232 0 8.52441 2.18164 6.11719 5.37305 9.06348 14.165 0Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ <Path x="0.704102" y="0.712402" winding="nonZero" data="M14.165 0 16.3838 2.21924 5.24023 13.3232 0 8.52441 2.18164 6.11719 5.37305 9.06348 14.165 0Z">
+ <stroke>
+ <SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#676767"/>
+ </stroke>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/HSliderThumb_normal.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/HSliderThumb_normal.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/HSliderThumb_normal.fxg
new file mode 100644
index 0000000..c046673
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/HSliderThumb_normal.fxg
@@ -0,0 +1,34 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="6.75" scaleGridRight="20.25" scaleGridTop="20.25" scaleGridBottom="6.75">
+ <Path alpha="0.5" winding="nonZero" data="M27 13.5C27 20.9556 20.9561 27 13.5 27 6.04395 27 0 20.9556 0 13.5 0 6.04395 6.04395 0 13.5 0 20.9561 0 27 6.04395 27 13.5Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ <Path x="10.0049" y="10" winding="nonZero" data="M7 3.5C7 5.43262 5.43262 7 3.5 7 1.56738 7 0 5.43262 0 3.5 0 1.56689 1.56738 0 3.5 0 5.43262 0 7 1.56689 7 3.5Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/HSliderThumb_pressed.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/HSliderThumb_pressed.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/HSliderThumb_pressed.fxg
new file mode 100644
index 0000000..416f795
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/HSliderThumb_pressed.fxg
@@ -0,0 +1,39 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="7.75" scaleGridRight="23.25" scaleGridTop="23.25" scaleGridBottom="7.75">
+ <Path x="2" y="2" alpha="0.5" winding="nonZero" data="M27 13.5C27 20.9556 20.9561 27 13.5 27 6.04395 27 0 20.9556 0 13.5 0 6.04395 6.04395 0 13.5 0 20.9561 0 27 6.04395 27 13.5Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ <Path winding="nonZero" data="M15.5 2C22.9561 2 29 8.04395 29 15.5 29 22.9561 22.9561 29 15.5 29 8.04395 29 2 22.9561 2 15.5 2 8.04395 8.04395 2 15.5 2ZM15.5 0C6.95313 0 0 6.95313 0 15.5 0 24.0469 6.95313 31 15.5 31 24.0469 31 31 24.0469 31 15.5 31 6.95313 24.0469 0 15.5 0Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ <Path x="12.0049" y="12" winding="nonZero" data="M7 3.5C7 5.43262 5.43262 7 3.5 7 1.56738 7 0 5.43262 0 3.5 0 1.56689 1.56738 0 3.5 0 5.43262 0 7 1.56689 7 3.5Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/HSliderTrack.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/HSliderTrack.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/HSliderTrack.fxg
new file mode 100644
index 0000000..ee464e0
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/HSliderTrack.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="82" scaleGridRight="246" scaleGridTop="1.5" scaleGridBottom="0.5">
+ <Path winding="nonZero" data="M328 2 0 2 0 0 328 0 328 2Z">
+ <fill>
+ <SolidColor color="#A6A6A6"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/HSliderTrack_filled.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/HSliderTrack_filled.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/HSliderTrack_filled.fxg
new file mode 100644
index 0000000..c4d4f74
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/HSliderTrack_filled.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="82" scaleGridRight="246" scaleGridTop="1.5" scaleGridBottom="0.5">
+ <Path winding="nonZero" data="M328 2 0 2 0 0 328 0 328 2Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_down.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_down.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_down.fxg
new file mode 100644
index 0000000..dc74414
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_down.fxg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="8" scaleGridRight="24" scaleGridTop="24" scaleGridBottom="8">
+ <Path winding="nonZero" data="M32 16C32 24.8364 24.8369 32 16 32 7.16309 32 0 24.8364 0 16 0 7.16357 7.16309 0 16 0 24.8369 0 32 7.16357 32 16Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Path x="8" y="8" winding="nonZero" data="M16 8C16 12.4185 12.418 16 8 16 3.58203 16 0 12.4185 0 8 0 3.58154 3.58203 0 8 0 12.418 0 16 3.58154 16 8Z">
+ <stroke>
+ <SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#676767"/>
+ </stroke>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_downSymbolSelected.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_downSymbolSelected.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_downSymbolSelected.fxg
new file mode 100644
index 0000000..374c9fc
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_downSymbolSelected.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group x="-1" y="-1" scaleGridLeft="2.5" scaleGridRight="7.5" scaleGridTop="7.5" scaleGridBottom="2.5">
+ <Path winding="nonZero" data="M10 5C10 7.76123 7.76172 10 5 10 2.23828 10 0 7.76123 0 5 0 2.23877 2.23828 0 5 0 7.76172 0 10 2.23877 10 5Z">
+ <fill>
+ <SolidColor color="#676767"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_up.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_up.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_up.fxg
new file mode 100644
index 0000000..4110262
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_up.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="32" viewWidth="32">
+ <Group x="8" y="8" scaleGridLeft="4.25" scaleGridRight="12.75" scaleGridTop="12.75" scaleGridBottom="4.25">
+ <Path x="0.5" y="0.5" winding="nonZero" data="M16 8C16 12.4185 12.418 16 8 16 3.58203 16 0 12.4185 0 8 0 3.58154 3.58203 0 8 0 12.418 0 16 3.58154 16 8Z">
+ <stroke>
+ <SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#676767"/>
+ </stroke>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_upSymbolSelected.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_upSymbolSelected.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_upSymbolSelected.fxg
new file mode 100644
index 0000000..5b844b6
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/RadioButton_upSymbolSelected.fxg
@@ -0,0 +1,36 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group>
+ <Group x="0.5" y="0.5">
+ <Path winding="nonZero" data="M10 5C10 7.76123 7.76172 10 5 10 2.23828 10 0 7.76123 0 5 0 2.23877 2.23828 0 5 0 7.76172 0 10 2.23877 10 5Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ </Group>
+ <Path x="0.5" y="0.5" winding="nonZero" data="M10 5C10 7.76123 7.76172 10 5 10 2.23828 10 0 7.76123 0 5 0 2.23877 2.23828 0 5 0 7.76172 0 10 2.23877 10 5Z">
+ <stroke>
+ <SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#676767"/>
+ </stroke>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerBackground.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerBackground.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerBackground.fxg
new file mode 100644
index 0000000..35cfa51
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerBackground.fxg
@@ -0,0 +1,48 @@
+<?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.
+
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="100" viewWidth="100"
+ scaleGridLeft="7" scaleGridTop="7" scaleGridRight="93" scaleGridBottom="93">
+ <!-- drop shadow-->
+ <Rect x="0" y="97" width="100" height="2">
+ <fill>
+ <SolidColor color="#FFFFFF" alpha=".35"/>
+ </fill>
+ </Rect>
+ <Rect x="0" y="98" width="65" height="1">
+ <fill>
+ <SolidColor color="#FFFFFF" alpha=".2"/>
+ </fill>
+ </Rect>
+ <Rect x="0" y="99" width="65" height="1">
+ <fill>
+ <SolidColor color="#FFFFFF" alpha="0.1"/>
+ </fill>
+ </Rect>
+ <Rect width="100" height="100" radiusX="1" radiusY="1">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Rect>
+</Graphic>
+
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerSelectionIndicator.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerSelectionIndicator.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerSelectionIndicator.fxg
new file mode 100644
index 0000000..6aee52a
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerSelectionIndicator.fxg
@@ -0,0 +1,45 @@
+<?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.
+
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="48" viewWidth="100"
+ scaleGridLeft="3" scaleGridTop="5.5" scaleGridRight="97" scaleGridBottom="41">
+ <!-- Transparent rect used to center the bar -->
+ <Rect x="0" y="0" width="100" height="4">
+ <fill>
+ <SolidColor color="#000000" alpha="0"/>
+ </fill>
+ </Rect>
+ <!-- Top highlight -->
+ <Rect x="5" y="5" width="95" height="1.5">
+ <fill>
+ <SolidColor color="#33afdd"/>
+ </fill>
+ </Rect>
+ <!-- Bottom highlight -->
+ <Rect x="5" y="40" width="95" height="1.5">
+ <fill>
+ <SolidColor color="#33afdd"/>
+ </fill>
+ </Rect>
+</Graphic>
+
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerShadow.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerShadow.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerShadow.fxg
new file mode 100644
index 0000000..43d048e
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/SpinnerListContainerShadow.fxg
@@ -0,0 +1,40 @@
+<?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.
+
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight= "100" viewWidth= "100"
+ scaleGridLeft="5" scaleGridTop="5" scaleGridRight="95" scaleGridBottom="95">
+ <Rect width="100" height="100" radiusX="5" radiusY="5">
+ <fill>
+ <LinearGradient rotation="90">
+ <GradientEntry ratio="0" color="#FFFFFF" alpha="1.0"/>
+ <GradientEntry ratio="0.10" color="#FFFFFF" alpha=".7"/>
+ <GradientEntry ratio="0.30" color="#FFFFFF" alpha=".3"/>
+ <GradientEntry ratio="0.40" color="#FFFFFF" alpha=".05"/>
+ <GradientEntry ratio="0.60" color="#FFFFFF" alpha=".05"/>
+ <GradientEntry ratio="0.70" color="#FFFFFF" alpha=".3"/>
+ <GradientEntry ratio="0.90" color="#FFFFFF" alpha=".7"/>
+ <GradientEntry ratio="1" color="#FFFFFF" alpha="1.0"/>
+ </LinearGradient>
+ </fill>
+ </Rect>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border.fxg
new file mode 100644
index 0000000..d30a3dc
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border.fxg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" scaleGridLeft="0" scaleGridTop="0" scaleGridRight="291" scaleGridBottom="50">
+ <Path data="M 0 39 L 0 42 L 291 42 L 291 39">
+ <stroke>
+ <SolidColorStroke color="#4e4e4e" alpha=".8" weight="1.4" pixelHinting="true" />
+ </stroke>
+ </Path>
+ <!-- scale grid fix -->
+ <Rect x="0" y="0" width="291" height="39">
+ <fill>
+ <SolidColor color="#000000" alpha="0"/>
+ </fill>
+ </Rect>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_Rectangle.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_Rectangle.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_Rectangle.fxg
new file mode 100644
index 0000000..3c5e1c8
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_Rectangle.fxg
@@ -0,0 +1,28 @@
+<?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.
+
+-->
+
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" scaleGridLeft="1" scaleGridTop="1" scaleGridRight="299" scaleGridBottom="299">
+ <Path winding="nonZero" data="M 0 0 300 0 300 300 0 300 0 0Z" >
+ <stroke>
+ <SolidColorStroke color="#4e4e4e" alpha=".8" weight="1.6" pixelHinting="true"/>
+ </stroke>
+ </Path>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_Rectangle_focus.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_Rectangle_focus.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_Rectangle_focus.fxg
new file mode 100644
index 0000000..80bf249
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_Rectangle_focus.fxg
@@ -0,0 +1,28 @@
+<?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.
+
+-->
+
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" scaleGridLeft="1" scaleGridTop="1" scaleGridRight="299" scaleGridBottom="299">
+ <Path winding="nonZero" data="M 0 0 300 0 300 300 0 300 0 0Z" >
+ <stroke>
+ <SolidColorStroke color="#33afdd" alpha="1" weight="1.7" pixelHinting="true"/>
+ </stroke>
+ </Path>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_focus.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_focus.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_focus.fxg
new file mode 100644
index 0000000..df9c1d7
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/TextInput_border_focus.fxg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" scaleGridLeft="0" scaleGridTop="0" scaleGridRight="291" scaleGridBottom="50">
+ <Path data="M 0 38 L 0 42 L 291 42 L 291 38">
+ <stroke>
+ <SolidColorStroke color="#33afdd" alpha="1" weight="1.8" pixelHinting="true"/>
+ </stroke>
+ </Path>
+ <!-- scale grid fix -->
+ <Rect x="0" y="0" width="291" height="39">
+ <fill>
+ <SolidColor color="#000000" alpha="0"/>
+ </fill>
+ </Rect>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchBackground.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchBackground.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchBackground.fxg
new file mode 100644
index 0000000..b264573
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchBackground.fxg
@@ -0,0 +1,29 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="24.25" scaleGridRight="72.75" scaleGridTop="18" scaleGridBottom="6">
+ <Path winding="nonZero" data="M97 24 0 24 0 0 97 0 97 24Z">
+ <fill>
+ <SolidColor color="#D2D3D3"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchThumb_off.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchThumb_off.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchThumb_off.fxg
new file mode 100644
index 0000000..8f9d046
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchThumb_off.fxg
@@ -0,0 +1,40 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="11.75" scaleGridRight="35.25" scaleGridTop="16.5" scaleGridBottom="5.5">
+ <Path winding="nonZero" data="M47 22 0 22 0 0 47 0 47 22Z">
+ <fill>
+ <SolidColor color="#B3B3B3"/>
+ </fill>
+ </Path>
+ <Path winding="nonZero" data="M46 0 46 21 0 21 0 22 47 22 47 0 46 0Z">
+ <fill>
+ <SolidColor color="#AFAFAF"/>
+ </fill>
+ </Path>
+ <Path winding="nonZero" data="M47 1 0 1 0 0 47 0 47 1Z">
+ <fill>
+ <SolidColor color="#DEDEDD"/>
+ </fill>
+ </Path>
+ <Path visible="false" winding="nonZero" data="M0 0 47 0 47 22 0 22 0 0Z"/>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchThumb_on.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchThumb_on.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchThumb_on.fxg
new file mode 100644
index 0000000..d003f72
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ToggleSwitchThumb_on.fxg
@@ -0,0 +1,40 @@
+<?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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="11.75" scaleGridRight="35.25" scaleGridTop="16.5" scaleGridBottom="5.5">
+ <Path winding="nonZero" data="M47 22 0 22 0 0 47 0 47 22Z">
+ <fill>
+ <SolidColor color="#33B5E5"/>
+ </fill>
+ </Path>
+ <Path winding="nonZero" data="M46 0 46 21 0 21 0 22 47 22 47 0 46 0Z">
+ <fill>
+ <SolidColor color="#3399E5"/>
+ </fill>
+ </Path>
+ <Path winding="nonZero" data="M47 1 0 1 0 0 47 0 47 1Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ <Path visible="false" winding="nonZero" data="M0 0 47 0 47 22 0 22 0 0Z"/>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/TransparentActionButton_down.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/TransparentActionButton_down.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/TransparentActionButton_down.fxg
new file mode 100644
index 0000000..5492c20
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/TransparentActionButton_down.fxg
@@ -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.
+
+-->
+
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008"
+ scaleGridTop="6" scaleGridBottom="59" scaleGridLeft="8" scaleGridRight="75">
+
+ <!-- highlight border leading
+ <Rect x="0" y="1" width="1" height="63">
+ <fill>
+ <LinearGradient x="0" scaleX="63" rotation="90">
+ <GradientEntry color="#ffffff" ratio="0" alpha=".15"/>
+ <GradientEntry color="#ffffff" ratio="1" alpha=".1"/>
+ </LinearGradient>
+ </fill>
+ </Rect>-->
+
+ <!-- separator dark
+ <Rect x="1" y="0" width="1" height="65">
+ <fill>
+ <SolidColor color="#000000" alpha="0.8"/>
+ </fill>
+ </Rect>-->
+
+ <!-- inner shaddow
+ <Rect x="2" y="0" width="80" height="65">
+ <fill>
+ <LinearGradient x="0" scaleX="65" rotation="90">
+ <GradientEntry color="#000000" ratio="0" alpha=".05"/>
+ <GradientEntry color="#000000" ratio="1" alpha=".25"/>
+ </LinearGradient>
+ </fill>
+ </Rect> -->
+
+ <Rect x="2.5" y="0.5" width="79" height="64" alpha="0.2">
+ <stroke>
+ <SolidColorStroke color="#000000" weight="1" caps="none" joints="miter"/>
+ </stroke>
+ </Rect>
+ <Rect x="3.5" y="1.5" width="77" height="62" alpha="0.1">
+ <stroke>
+ <SolidColorStroke color="#000000" weight="1" caps="none" joints="miter"/>
+ </stroke>
+ </Rect>
+
+ <!-- invisible fix for scaling -->
+ <Rect x="0" y="0" width="82" height="65">
+ <fill>
+ <SolidColor color="#ffffff" alpha="0"/>
+ </fill>
+ </Rect>
+</Graphic>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/TransparentActionButton_up.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/TransparentActionButton_up.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/TransparentActionButton_up.fxg
new file mode 100644
index 0000000..aa07449
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/TransparentActionButton_up.fxg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008"
+ scaleGridTop="1" scaleGridBottom="64" scaleGridLeft="3" scaleGridRight="81" >
+
+ <!-- highlight border leading
+ <Rect x="0" y="1" width="1" height="63">
+ <fill>
+ <LinearGradient x="0" scaleX="63" rotation="90">
+ <GradientEntry color="#ffffff" ratio="0" alpha=".15"/>
+ <GradientEntry color="#ffffff" ratio="1" alpha=".1"/>
+ </LinearGradient>
+ </fill>
+ </Rect>-->
+
+ <!-- separator dark
+ <Rect x="1" y="0" width="1" height="65">
+ <fill>
+ <SolidColor color="#000000" alpha="0.8"/>
+ </fill>
+ </Rect>-->
+
+ <!-- highlight border left
+ <Rect x="2" y="1" width="1" height="63">
+ <fill>
+ <LinearGradient x="0" scaleX="63" rotation="90">
+ <GradientEntry color="#ffffff" ratio="0" alpha=".15"/>
+ <GradientEntry color="#ffffff" ratio="1" alpha=".1"/>
+ </LinearGradient>
+ </fill>
+ </Rect>-->
+
+ <!-- invisible fix for scaling -->
+ <Rect x="0" y="0" width="82" height="65">
+ <fill>
+ <SolidColor color="#ffffff" alpha="0"/>
+ </fill>
+ </Rect>
+
+</Graphic>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/TransparentNavigationButton_down.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/TransparentNavigationButton_down.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/TransparentNavigationButton_down.fxg
new file mode 100644
index 0000000..2f19235
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/TransparentNavigationButton_down.fxg
@@ -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.
+
+-->
+
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008"
+ scaleGridTop="6" scaleGridBottom="59" scaleGridLeft="6" scaleGridRight="74">
+
+ <!-- inner shaddow
+ <Rect x="0" y="0" width="80" height="65">
+ <fill>
+ <LinearGradient x="0" scaleX="65" rotation="90">
+ <GradientEntry color="#000000" ratio="0" alpha=".05"/>
+ <GradientEntry color="#000000" ratio="1" alpha=".25"/>
+ </LinearGradient>
+ </fill>
+ </Rect>
+
+ <Rect x="0.5" y="0.5" width="79" height="64" alpha="0.2">
+ <stroke>
+ <SolidColorStroke color="#000000" weight="1" caps="none" joints="miter"/>
+ </stroke>
+ </Rect>
+ <Rect x="1.5" y="1.5" width="77" height="62" alpha="0.1">
+ <stroke>
+ <SolidColorStroke color="#000000" weight="1" caps="none" joints="miter"/>
+ </stroke>
+ </Rect>-->
+
+ <!-- separator dark
+ <Rect x="80" y="0" width="1" height="65">
+ <fill>
+ <SolidColor color="#000000" alpha="0.8"/>
+ </fill>
+ </Rect>-->
+
+ <!-- highlight border trailing -->
+ <Rect x="81" y="1" width="1" height="63">
+ <fill>
+ <LinearGradient x="0" scaleX="63" rotation="90">
+ <GradientEntry color="#ffffff" ratio="0" alpha=".15"/>
+ <GradientEntry color="#ffffff" ratio="1" alpha=".1"/>
+ </LinearGradient>
+ </fill>
+ </Rect>
+
+ <!-- invisible fix for scaling -->
+ <Rect x="0" y="1" width="82" height="63">
+ <fill>
+ <SolidColor color="#ffffff" alpha="0"/>
+ </fill>
+ </Rect>
+</Graphic>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/TransparentNavigationButton_up.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/TransparentNavigationButton_up.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/TransparentNavigationButton_up.fxg
new file mode 100644
index 0000000..b4c6a30
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/TransparentNavigationButton_up.fxg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008"
+ scaleGridTop="1" scaleGridBottom="64" scaleGridLeft="1" scaleGridRight="79" >
+
+ <!-- highlight border right
+ <Rect x="79" y="1" width="1" height="63">
+ <fill>
+ <LinearGradient x="0" scaleX="63" rotation="90">
+ <GradientEntry color="#ffffff" ratio="0" alpha=".15"/>
+ <GradientEntry color="#ffffff" ratio="1" alpha=".1"/>
+ </LinearGradient>
+ </fill>
+ </Rect>-->
+
+ <!-- separator dark
+ <Rect x="80" y="0" width="1" height="65">
+ <fill>
+ <SolidColor color="#000000" alpha="0.8"/>
+ </fill>
+ </Rect>-->
+
+ <!-- highlight border trailing
+ <Rect x="81" y="1" width="1" height="63">
+ <fill>
+ <LinearGradient x="0" scaleX="63" rotation="90">
+ <GradientEntry color="#ffffff" ratio="0" alpha=".15"/>
+ <GradientEntry color="#ffffff" ratio="1" alpha=".1"/>
+ </LinearGradient>
+ </fill>
+ </Rect>-->
+
+ <!-- invisible fix for scaling -->
+ <Rect x="0" y="0" width="82" height="65">
+ <fill>
+ <SolidColor color="#ffffff" alpha="0"/>
+ </fill>
+ </Rect>
+
+</Graphic>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_down.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_down.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_down.fxg
new file mode 100644
index 0000000..2acb0b7
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_down.fxg
@@ -0,0 +1,36 @@
+<?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.
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewWidth="159" viewHeight="101"
+ scaleGridLeft="5" scaleGridRight="154" scaleGridTop="5" scaleGridBottom="96">
+
+ <!-- Transparent Rect to ensure proper scaling -->
+ <Rect width="159" height="101">
+ <fill>
+ <SolidColor color="#000000" alpha="0"/>
+ </fill>
+ </Rect>
+
+ <!-- overlay -->
+ <Rect width="159" height="101" x="0" y="0">
+ <fill>
+ <SolidColor color="#000000" alpha="0"/>
+ </fill>
+ </Rect>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_showsCaret.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_showsCaret.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_showsCaret.fxg
new file mode 100644
index 0000000..ac1541c
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_showsCaret.fxg
@@ -0,0 +1,36 @@
+<?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.
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewWidth="159" viewHeight="100"
+ scaleGridLeft="1" scaleGridRight="158" scaleGridTop="1" scaleGridBottom="99">
+
+ <!-- Transparent Rect to ensure proper scaling -->
+ <Rect width="159" height="100" x="0" y="0">
+ <fill>
+ <SolidColor color="#000000" alpha="0"/>
+ </fill>
+ </Rect>
+
+ <!-- Border -->
+ <Rect width="158" height="99" x=".5" y=".5">
+ <stroke>
+ <SolidColorStroke weight="1" color="#ffffff" alpha=".25"/>
+ </stroke>
+ </Rect>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_up.fxg
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_up.fxg b/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_up.fxg
new file mode 100644
index 0000000..8641e86
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/assets/ViewMenuItem_up.fxg
@@ -0,0 +1,35 @@
+<?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.
+
+-->
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewWidth="159" viewHeight="100"
+ scaleGridLeft="1" scaleGridRight="158" scaleGridTop="1" scaleGridBottom="99">
+
+ <!-- Transparent Rect to ensure proper scaling -->
+ <Rect width="159" height="100" x="0" y="0">
+ <fill>
+ <SolidColor color="#000000" alpha="0"/>
+ </fill>
+ </Rect>
+ <!-- Border -->
+ <Rect width="158" height="99" x=".5" y=".5">
+ <stroke>
+ <SolidColorStroke weight="1" color="#ffffff" alpha=".25"/>
+ </stroke>
+ </Rect>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/fonts/Roboto-Bold.ttf
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/fonts/Roboto-Bold.ttf b/tourdeflexmobile/src/spark/skins/android4/assets/fonts/Roboto-Bold.ttf
new file mode 100644
index 0000000..e5d828d
Binary files /dev/null and b/tourdeflexmobile/src/spark/skins/android4/assets/fonts/Roboto-Bold.ttf differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/assets/fonts/Roboto-Regular.ttf
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/assets/fonts/Roboto-Regular.ttf b/tourdeflexmobile/src/spark/skins/android4/assets/fonts/Roboto-Regular.ttf
new file mode 100644
index 0000000..153c608
Binary files /dev/null and b/tourdeflexmobile/src/spark/skins/android4/assets/fonts/Roboto-Regular.ttf differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/supportClasses/CalloutArrow.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/supportClasses/CalloutArrow.as b/tourdeflexmobile/src/spark/skins/android4/supportClasses/CalloutArrow.as
new file mode 100644
index 0000000..cf30796
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/supportClasses/CalloutArrow.as
@@ -0,0 +1,457 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4.supportClasses
+{
+ import flash.display.BlendMode;
+ import flash.display.GradientType;
+ import flash.display.Graphics;
+ import flash.display.GraphicsPathCommand;
+ import flash.display.Sprite;
+
+ import mx.core.DPIClassification;
+ import mx.core.FlexGlobals;
+ import mx.core.IVisualElement;
+ import mx.core.UIComponent;
+ import mx.core.mx_internal;
+ import mx.utils.ColorUtil;
+
+ import spark.components.Application;
+ import spark.components.ArrowDirection;
+ import spark.components.Callout;
+ import spark.skins.android4.CalloutSkin;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+
+ /**
+ * The arrow skin part for CalloutSkin.
+ *
+ * @see spark.skin.mobile.CalloutSkin
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public class CalloutArrow extends UIComponent
+ {
+ public function CalloutArrow()
+ {
+ super();
+
+ useBackgroundGradient = true;
+
+ var applicationDPI:Number = DPIClassification.DPI_160;
+ if (FlexGlobals.topLevelApplication is Application)
+ {
+ applicationDPI = Application(FlexGlobals.topLevelApplication).applicationDPI;
+ }
+
+ // Copy DPI-specific values from CalloutSkin
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ // Note provisional may need changes
+ gap = 32;
+ backgroundGradientHeight = 440;
+ highlightWeight = 4;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ // Note provisional may need changes
+ gap = 24;
+ backgroundGradientHeight = 330;
+ highlightWeight = 3;
+
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ gap = 16;
+ backgroundGradientHeight = 220;
+ highlightWeight = 2;
+
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ gap = 12;
+ backgroundGradientHeight = 165;
+ highlightWeight = 1;
+
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ // Note provisional may need changes
+ gap = 6;
+ backgroundGradientHeight = 83;
+ highlightWeight = 1;
+
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+ gap = 8;
+ backgroundGradientHeight = 110;
+ highlightWeight = 1;
+
+ break;
+ }
+ }
+ }
+
+ /**
+ * A gap on the frame-adjacent side of the arrow graphic to avoid
+ * drawing past the CalloutSkin backgroundCornerRadius.
+ *
+ * <p>The default implementation matches the gap value with the
+ * <code>backgroundCornerRadius</code> value in <code>CalloutSkin</code>.</p>
+ *
+ * @see spark.skins.mobile.CalloutSkin#backgroundCornerRadius
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var gap:Number;
+
+ /**
+ * @copy spark.skins.mobile.CalloutSkin#backgroundGradientHeight
+ */
+ protected var backgroundGradientHeight:Number;
+
+ /**
+ * @copy spark.skins.mobile.CalloutSkin#highlightWeight
+ */
+ private var highlightWeight:Number;
+
+ /**
+ * @copy spark.skins.mobile.CalloutSkin#useBackgroundGradient
+ */
+ protected var useBackgroundGradient:Boolean;
+
+ /**
+ * @copy spark.skins.mobile.CalloutSkin#borderColor
+ */
+ protected var borderColor:Number = -1; // if not set
+
+ /**
+ * @copy spark.skins.mobile.CalloutSkin#borderThickness
+ */
+ protected var borderThickness:Number = -1 ; // marker that borderThickness was not set directly
+
+ /**
+ * @private
+ * A sibling of the arrow used to erase the drop shadow in CalloutSkin
+ */
+ private var eraseFill:Sprite;
+
+ /* helper private accessors */
+
+ /* returns borderThickness from style if member is -1, or borderThickness. Returns 0 if NaN */
+ private function get actualBorderThickness():Number
+ {
+ return calloutSkin.actualBorderThickness;
+ }
+
+ private function get actualBorderColor():uint
+ {
+ return calloutSkin.actualBorderColor;
+ }
+
+ protected function get calloutSkin():CalloutSkin
+ {
+ return parent as CalloutSkin ;
+ }
+
+ protected function get calloutHostComponent():Callout {
+ return calloutSkin.hostComponent;
+ }
+
+ /**
+ * @private
+ */
+
+ override protected function createChildren():void
+ {
+ super.createChildren();
+
+ // eraseFill has the same position and arrow shape in order to erase
+ // the drop shadow under the arrow when backgroundAlpha < 1
+ eraseFill = new Sprite();
+ eraseFill.blendMode = BlendMode.ERASE;
+
+ // layer eraseFill below the arrow
+ parent.addChildAt(eraseFill, parent.getChildIndex(this));
+ }
+
+ /**
+ * @private
+ */
+ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+
+ graphics.clear();
+ eraseFill.graphics.clear();
+ var hostComponent: Callout = calloutHostComponent;
+ var arrowDirection:String = hostComponent.arrowDirection;
+
+ if (arrowDirection == ArrowDirection.NONE)
+ return;
+
+ // when drawing the arrow, compensate for cornerRadius via padding
+ var arrowGraphics:Graphics = this.graphics;
+ var eraseGraphics:Graphics = eraseFill.graphics;
+ var arrowWidth:Number = unscaledWidth;
+ var arrowHeight:Number = unscaledHeight;
+ var arrowX:Number = 0;
+ var arrowY:Number = 0;
+ var arrowTipX:Number = 0;
+ var arrowTipY:Number = 0;
+ var arrowEndX:Number = 0;
+ var arrowEndY:Number = 0;
+
+ var borderWeight:Number = actualBorderThickness;
+ var showBorder:Boolean = borderWeight > 0;
+
+ var borderHalf:Number = borderWeight / 2;
+ var isHorizontal:Boolean = false;
+
+ if ((arrowDirection == ArrowDirection.LEFT) ||
+ (arrowDirection == ArrowDirection.RIGHT))
+ {
+ isHorizontal = true;
+
+ arrowX = -borderHalf;
+ arrowY = gap;
+ arrowHeight = arrowHeight - (gap * 2);
+
+ arrowTipX = arrowWidth - borderHalf;
+ arrowTipY = arrowY + (arrowHeight / 2);
+
+ arrowEndX = arrowX;
+ arrowEndY = arrowY + arrowHeight;
+
+ // flip coordinates to point left
+ if (arrowDirection == ArrowDirection.LEFT)
+ {
+ arrowX = arrowWidth - arrowX;
+ arrowTipX = arrowWidth - arrowTipX;
+ arrowEndX = arrowWidth - arrowEndX;
+ }
+ }
+ else
+ {
+ arrowX = gap;
+ arrowY = -borderHalf;
+ arrowWidth = arrowWidth - (gap * 2);
+
+ arrowTipX = arrowX + (arrowWidth / 2);
+ arrowTipY = arrowHeight - borderHalf;
+
+ arrowEndX = arrowX + arrowWidth;
+ arrowEndY = arrowY;
+
+ // flip coordinates to point up
+ if (hostComponent.arrowDirection == ArrowDirection.UP)
+ {
+ arrowY = arrowHeight - arrowY;
+ arrowTipY = arrowHeight - arrowTipY;
+ arrowEndY = arrowHeight - arrowEndY;
+ }
+ }
+
+ var commands:Vector.<int> = new Vector.<int>(3, true);
+ commands[0] = GraphicsPathCommand.MOVE_TO;
+ commands[1] = GraphicsPathCommand.LINE_TO;
+ commands[2] = GraphicsPathCommand.LINE_TO;
+
+ var coords:Vector.<Number> = new Vector.<Number>(6, true);
+ coords[0] = arrowX;
+ coords[1] = arrowY;
+ coords[2] = arrowTipX
+ coords[3] = arrowTipY;
+ coords[4] = arrowEndX
+ coords[5] = arrowEndY;
+
+ var backgroundColor:Number = getStyle("backgroundColor");
+ var backgroundAlpha:Number = getStyle("backgroundAlpha");
+
+ if (useBackgroundGradient)
+ {
+ var backgroundColorTop:Number = ColorUtil.adjustBrightness2(backgroundColor,
+ CalloutSkin.BACKGROUND_GRADIENT_BRIGHTNESS_TOP);
+ var backgroundColorBottom:Number = ColorUtil.adjustBrightness2(backgroundColor,
+ CalloutSkin.BACKGROUND_GRADIENT_BRIGHTNESS_BOTTOM);
+
+ // translate the gradient based on the arrow position
+ MobileSkin.colorMatrix.createGradientBox(unscaledWidth,
+ backgroundGradientHeight, Math.PI / 2, 0, -getLayoutBoundsY());
+
+ arrowGraphics.beginGradientFill(GradientType.LINEAR,
+ [backgroundColorTop, backgroundColorBottom],
+ [backgroundAlpha, backgroundAlpha],
+ [0, 255],
+ MobileSkin.colorMatrix);
+ }
+ else
+ {
+ arrowGraphics.beginFill(backgroundColor, backgroundAlpha);
+ }
+
+ // cover the adjacent border from the callout frame
+ if (showBorder)
+ {
+ var coverX:Number = 0;
+ var coverY:Number = 0;
+ var coverWidth:Number = 0;
+ var coverHeight:Number = 0;
+
+ switch (arrowDirection)
+ {
+ case ArrowDirection.UP:
+ {
+ coverX = arrowX;
+ coverY = arrowY;
+ coverWidth = arrowWidth;
+ coverHeight = borderWeight;
+ break;
+ }
+ case ArrowDirection.DOWN:
+ {
+ coverX = arrowX;
+ coverY = -borderWeight;
+ coverWidth = arrowWidth;
+ coverHeight = borderWeight;
+ break;
+ }
+ case ArrowDirection.LEFT:
+ {
+ coverX = arrowX;
+ coverY = arrowY;
+ coverWidth = borderWeight;
+ coverHeight = arrowHeight;
+ break;
+ }
+ case ArrowDirection.RIGHT:
+ {
+ coverX = -borderWeight;
+ coverY = arrowY;
+ coverWidth = borderWeight;
+ coverHeight = arrowHeight;
+ break;
+ }
+ }
+
+ arrowGraphics.drawRect(coverX, coverY, coverWidth, coverHeight);
+ }
+
+ // erase the drop shadow from the CalloutSkin
+ if (backgroundAlpha < 1)
+ {
+ // move eraseFill to the same position as the arrow
+ eraseFill.x = getLayoutBoundsX()
+ eraseFill.y = getLayoutBoundsY();
+
+ // draw the arrow shape
+ eraseGraphics.beginFill(0, 1);
+ eraseGraphics.drawPath(commands, coords);
+ eraseGraphics.endFill();
+ }
+
+ // draw arrow path
+ if (showBorder)
+ arrowGraphics.lineStyle(borderWeight, actualBorderColor, 1, true);
+
+ arrowGraphics.drawPath(commands, coords);
+ arrowGraphics.endFill();
+
+ // adjust the highlight position to the origin of the callout
+ var isArrowUp:Boolean = (arrowDirection == ArrowDirection.UP);
+ var offsetY:Number = (isArrowUp) ? unscaledHeight : -getLayoutBoundsY();
+
+ // highlight starts after the backgroundCornerRadius
+ var highlightX:Number = gap - getLayoutBoundsX();
+
+ // highlight Y position is based on the stroke weight
+ var highlightOffset:Number = (highlightWeight * 1.5);
+ var highlightY:Number = highlightOffset + offsetY;
+
+ // highlight width spans the callout width minus the corner radius
+ var highlightWidth:Number = IVisualElement(calloutSkin).getLayoutBoundsWidth() - (gap * 2);
+
+ if (isHorizontal)
+ {
+ highlightWidth -= arrowWidth;
+
+ if (arrowDirection == ArrowDirection.LEFT)
+ highlightX += arrowWidth;
+ }
+
+ // highlight on the top edge is drawn in the arrow only in the UP direction
+ if (useBackgroundGradient)
+ {
+ if (isArrowUp)
+ {
+ // highlight follows the top edge, including the arrow
+ var rightWidth:Number = highlightWidth - arrowWidth;
+
+ // highlight style
+ arrowGraphics.lineStyle(highlightWeight, 0xFFFFFF, 0.2 * backgroundAlpha);
+
+ // in the arrow coordinate space, the highlightX must be less than 0
+ if (highlightX < 0)
+ {
+ arrowGraphics.moveTo(highlightX, highlightY);
+ arrowGraphics.lineTo(arrowX, highlightY);
+
+ // compute the remaining highlight
+ rightWidth -= (arrowX - highlightX);
+ }
+
+ // arrow highlight (adjust Y downward)
+ coords[1] = arrowY + highlightOffset;
+ coords[3] = arrowTipY + highlightOffset;
+ coords[5] = arrowEndY + highlightOffset;
+ arrowGraphics.drawPath(commands, coords);
+
+ // right side
+ if (rightWidth > 0)
+ {
+ arrowGraphics.moveTo(arrowEndX, highlightY);
+ arrowGraphics.lineTo(arrowEndX + rightWidth, highlightY);
+ }
+ }
+ else
+ {
+ // straight line across the top
+ arrowGraphics.lineStyle(highlightWeight, 0xFFFFFF, 0.2 * backgroundAlpha);
+ arrowGraphics.moveTo(highlightX, highlightY);
+ arrowGraphics.lineTo(highlightX + highlightWidth, highlightY);
+ }
+ }
+ }
+ }
+}
[08/22] git commit: [flex-examples] [refs/heads/develop] - updated
readme, code clean up
Posted by bi...@apache.org.
updated readme, code clean up
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/af437fd0
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/af437fd0
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/af437fd0
Branch: refs/heads/develop
Commit: af437fd0cf412157e0a02d49cba51a6bdfb96965
Parents: 1edb570
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Thu Jan 16 14:43:14 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:34 2014 -0800
----------------------------------------------------------------------
README.md | 1 +
tourdeflexmobile/src/TourDeFlexMobile.mxml | 8 ++++----
2 files changed, 5 insertions(+), 4 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/af437fd0/README.md
----------------------------------------------------------------------
diff --git a/README.md b/README.md
index 843d52e..7ff5b4c 100644
--- a/README.md
+++ b/README.md
@@ -9,3 +9,4 @@ Some Additional code was added to mirror the behavior of the Android Facebook ap
The code used to slide off the navigator and slide it back was used from the Madcomponents source code. I modified it to work in a flex environment. It is not as smooth as a pure Madcomonent app, because it does not use Stage3D.
+***Just added a new mousedown event to slide the top navigator off.***
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/af437fd0/tourdeflexmobile/src/TourDeFlexMobile.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml
index f73ba31..ab09404 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile.mxml
+++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml
@@ -150,8 +150,8 @@ limitations under the License.
if (navigators.mouseEnabled && mouseX < 20)
{
_startX = mouseX;
- stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp1);
- stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove1);
+ stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpOpen);
+ stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveOpen);
}
}
@@ -190,13 +190,13 @@ limitations under the License.
}
- protected function mouseMove1(event:MouseEvent):void
+ protected function mouseMoveOpen(event:MouseEvent):void
{
navigators.mouseEnabled = navigators.mouseChildren = false;
navigators.x = Math.max(Math.min(mouseX + _startX, lateralMenu.width), 0);
}
- protected function mouseUp1(event:MouseEvent):void
+ protected function mouseUpOpen(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp1);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove1);
[11/22] updates, new images
Posted by bi...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/ListView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/ListView.mxml b/tourdeflexmobile/src/UIViews/ListView.mxml
index ce00d68..6b93acd 100644
--- a/tourdeflexmobile/src/UIViews/ListView.mxml
+++ b/tourdeflexmobile/src/UIViews/ListView.mxml
@@ -18,34 +18,43 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="List">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="List">
<fx:Script>
<![CDATA[
- import spark.skins.mobile.TextAreaSkin;
+
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
]]>
- </fx:Script>
-
+ </fx:Script>
<s:states>
<s:State name="DemoState"/>
<s:State name="InfoState"/>
- </s:states>
-
+ </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')"/>
- </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:List includeIn="DemoState" width="100%" height="100%">
<s:ArrayList>
<fx:Object label="Item 1"/>
@@ -72,13 +81,10 @@ limitations under the License.
<fx:Object label="Item 22"/>
<fx:Object label="Item 23"/>
</s:ArrayList>
- </s:List>
-
- <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The List control displays a vertical list of items. Its functionality is similar to that of the SELECT form element in HTML. If there are more items than can be displayed at once, it can display a vertical scroll bar so the user can access all items in the list. An optional horizontal scroll bar lets the user view items when the full width of the list items is unlikely to fit. The user can select one or more items from the list, depending on the value of the allowMultipleSelection property.
- 

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. When a layout is specified, the layout's typicalLayoutElement property should not be set; it's automatically set to an item renderer created with the List's typicalItem.
-
- 

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:List>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" text="The List control displays a vertical list of items. Its functionality is similar to that of the SELECT form element in HTML. If there are more items than can be displayed at once, it can display a vertical scroll bar so the user can access all items in the list. An optional horizontal scroll bar lets the user view items when the full width of the list items is unlikely to fit. The user can select one or more items from the list, depending on the value of the allowMultipleSelection property.
+ 

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. When a layout is specified, the layout's typicalLayoutElement property should not be set; it's automatically set to an item renderer created with the List's typicalItem.
+ 

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:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/MobileGridView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/MobileGridView.mxml b/tourdeflexmobile/src/UIViews/MobileGridView.mxml
index d875580..97abe2c 100644
--- a/tourdeflexmobile/src/UIViews/MobileGridView.mxml
+++ b/tourdeflexmobile/src/UIViews/MobileGridView.mxml
@@ -16,91 +16,93 @@ 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.
+example taken from http://flex.apache.org/asdoc/spark/components/MobileGrid.html#columns
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="MobileGrid" xmlns:ns="http://flex.apache.org/experimental/ns">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="MobileGrid"
+ xmlns:ns="http://flex.apache.org/experimental/ns"
+ creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
- import spark.skins.mobile.TextAreaSkin;
+ import mx.collections.ArrayCollection;
+ import mx.events.FlexEvent;
+
+ private const dataProvider:ArrayCollection = new ArrayCollection();
+
+ private function creationCompleteHandler(event:FlexEvent):void
+ {
+ var src:Array = [];
+ for (var i:int = 0; i <50; i++)
+ {
+ src.push({Name: "John_" + i, Surname: "Doe_" + i, Age: 5 + i, status: 1000 + i, Comments: "Sed tamen"});
+ src.push({Name: "Paul_" + i, Surname: "Smith_" + i, Age: 12 + i, status: 2000 + i, Comments: "Quanta autem" });
+ src.push({Name: "Sarah_" + i, Surname: "Lee_" + i, Age: 42 + i, status: 2000 + i, Comments: "Ideo urbs"});
+ }
+ dataProvider.source = src;
+ }
+
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
+
+ private function fullName(o:Object):String
+ {
+ return o.Name + " " + o.Surname;
+ }
+
]]>
- </fx:Script>
-
+ </fx:Script>
<s:states>
<s:State name="DemoState"/>
<s:State name="InfoState"/>
- </s:states>
-
+ </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')"/>
- </fx:Declarations>
-
- <ns:MobileGrid includeIn="DemoState" width="100%" height="100%">
+ <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:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+ <ns:MobileGrid includeIn="DemoState" width="100%" height="100%" sortableColumns="true" dataProvider="{dataProvider}" contentBackgroundColor="0xFFFFFF"
+ alternatingItemColors="[0xFFFFFF, 0xFFFFFF]" color="0x00000" selectionColor="0x33B5E5">
<ns:columns>
- <ns:MobileGridColumn width="33%" headerText="Column 1" dataField="label"/>
- <ns:MobileGridColumn width="33%" headerText="Column 2" dataField="label"/>
- <ns:MobileGridColumn width="33%" headerText="Column 3" dataField="label"/>
+ <ns:MobileGridColumn dataField="Name" styleName="bold" width="30%"/>
+ <ns:MobileGridColumn dataField="Surname" styleName="bold" width="30%"/>
+ <ns:MobileGridColumn dataField="Comments" width="40%"/>
</ns:columns>
- <s:ArrayList>
- <fx:Object label="Item 1"/>
- <fx:Object label="Item 2"/>
- <fx:Object label="Item 3"/>
- <fx:Object label="Item 4"/>
- <fx:Object label="Item 5"/>
- <fx:Object label="Item 6"/>
- <fx:Object label="Item 7"/>
- <fx:Object label="Item 8"/>
- <fx:Object label="Item 9"/>
- <fx:Object label="Item 10"/>
- <fx:Object label="Item 11"/>
- <fx:Object label="Item 12"/>
- <fx:Object label="Item 13"/>
- <fx:Object label="Item 14"/>
- <fx:Object label="Item 15"/>
- <fx:Object label="Item 16"/>
- <fx:Object label="Item 17"/>
- <fx:Object label="Item 18"/>
- <fx:Object label="Item 19"/>
- <fx:Object label="Item 20"/>
- <fx:Object label="Item 21"/>
- <fx:Object label="Item 22"/>
- <fx:Object label="Item 23"/>
- </s:ArrayList>
- </ns:MobileGrid>
-
-
- <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The MobileGrid displays a collection of items in a grid of rows and columns and column headers and is optimized for speed on mobile devices.
- 

The MobileGrid component provides the following features:
-
+ </ns:MobileGrid>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" text="The MobileGrid displays a collection of items in a grid of rows and columns and column headers and is optimized for speed on mobile devices.
+ 

The MobileGrid component provides the following features:


user can swipe through the rows in the datagrid.


supports single selection of a row.


rows can be sorted according to a given column by clicking on the column's header.


cells can be displayed as text in different fonts and formats, as images, or using a custom renderer.


default skin uses dark shades of gray, and is available in different screen densities.
- 

It's important to understand that MobileGrid does not have all the capabilities and flexibility of it's desktop equivalent, in order to ensure optimal display and scrolling performance on mobile devices.
-
- 

Typically, the following features are not available in MobileGrid:
-
+ 

It's important to understand that MobileGrid does not have all the capabilities and flexibility of it's desktop equivalent, in order to ensure optimal display and scrolling performance on mobile devices.
+ 

Typically, the following features are not available in MobileGrid:


multiple selection is not supported


it's not possible to interactively reorder columns


MobileGrid does not scroll horizontally, even when the column widths exceeds the component's width.


custom cell renderers must be designed with care, preferably in ActionScript, to ensure good display performance
- 

Internally, MobileGrid inherits for Mobile spark.List component rather than any Grid or DataGrid, which means that all cell renderers in a single row are managed by one single MobileGridRowRenderer that delegates the individual cell renderers to light-weight sub-renderers.
-
- 

You usually don't access this internal row renderer yourself, and will rather define the individual cell renderers.
-
- 

This technique ensures optimal display and memory performance, which is critical for mobile devices, at the price of less flexibility for cell renderers."/>
-
- <s:actionContent>
- <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
- </s:actionContent>
+ 

Internally, MobileGrid inherits for Mobile spark.List component rather than any Grid or DataGrid, which means that all cell renderers in a single row are managed by one single MobileGridRowRenderer that delegates the individual cell renderers to light-weight sub-renderers.
+ 

You usually don't access this internal row renderer yourself, and will rather define the individual cell renderers.
+ 

This technique ensures optimal display and memory performance, which is critical for mobile devices, at the price of less flexibility for cell renderers."/>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/RadiobuttonView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/RadiobuttonView.mxml b/tourdeflexmobile/src/UIViews/RadiobuttonView.mxml
index 47d1804..4a7c06b 100644
--- a/tourdeflexmobile/src/UIViews/RadiobuttonView.mxml
+++ b/tourdeflexmobile/src/UIViews/RadiobuttonView.mxml
@@ -18,11 +18,12 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="RadioButton">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="RadioButton">
<fx:Script>
<![CDATA[
- import spark.skins.mobile.TextAreaSkin;
+
protected function radiobuttonHandler(event:Event):void
{
label.text = event.target.label + " Selected.";
@@ -30,40 +31,45 @@ limitations under the License.
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
]]>
</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:RadioButtonGroup id="radiogroup1"/>
- </fx:Declarations>
-
<s:states>
<s:State name="DemoState"/>
<s:State name="InfoState"/>
</s:states>
-
- <s:VGroup includeIn="DemoState" horizontalCenter="0" y="20">
+ <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')"/>
+ <s:RadioButtonGroup id="radiogroup1"/>
+ </fx:Declarations>
+ <s:VGroup includeIn="DemoState" horizontalAlign="center" width="100%" height="100%" verticalAlign="middle">
<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"/>
- </s:VGroup>
-
- <s:Label id="label" horizontalCenter="0" textAlign="center" bottom="20"/>
-
- <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The RadioButton component allows the user make a single choice within a set of mutually exclusive choices. A RadioButtonGroup is composed of two or more RadioButton components with the same groupName property. While grouping RadioButton instances in a RadioButtonGroup is optional, a group lets you do things like set a single event handler on a group of RadioButtons, rather than on each individual RadioButton.
- 

The RadioButton group can refer to the a group created by the RadioButtonGroup tag. The user selects only one member of the group at a time. Selecting an unselected group member deselects the currently selected RadioButton component within that group.
-
+ <s:Spacer height="10"/>
+ <s:Label id="label" horizontalCenter="0" textAlign="center" bottom="20"/>
+ </s:VGroup>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="The RadioButton component allows the user make a single choice within a set of mutually exclusive choices. A RadioButtonGroup is composed of two or more RadioButton components with the same groupName property. While grouping RadioButton instances in a RadioButtonGroup is optional, a group lets you do things like set a single event handler on a group of RadioButtons, rather than on each individual RadioButton.
+ 

The RadioButton group can refer to the a group created by the RadioButtonGroup tag. The user selects only one member of the group at a time. Selecting an unselected group member deselects the currently selected RadioButton component within that group.


 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:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/SpinnerListView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/SpinnerListView.mxml b/tourdeflexmobile/src/UIViews/SpinnerListView.mxml
index c94f59b..0edb1ef 100644
--- a/tourdeflexmobile/src/UIViews/SpinnerListView.mxml
+++ b/tourdeflexmobile/src/UIViews/SpinnerListView.mxml
@@ -18,11 +18,11 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="SpinnerList">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="SpinnerList">
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
- import spark.skins.mobile.TextAreaSkin;
protected function spinnerListHandler(event:IndexChangeEvent):void
{
@@ -31,86 +31,93 @@ limitations under the License.
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
]]>
- </fx:Script>
-
+ </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')"/>
- <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="@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:SpinnerListContainer includeIn="DemoState" width="100%">
- <s:SpinnerList id="spinnerList1" change="spinnerListHandler(event)" width="50%" height="150">
- <s:ArrayCollection>
- <fx:Object label="Item A 1"/>
- <fx:Object label="Item A 2"/>
- <fx:Object label="Item A 3"/>
- <fx:Object label="Item A 4"/>
- <fx:Object label="Item A 5"/>
- <fx:Object label="Item A 6"/>
- <fx:Object label="Item A 7"/>
- <fx:Object label="Item A 8"/>
- <fx:Object label="Item A 9"/>
- <fx:Object label="Item A 10"/>
- <fx:Object label="Item A 11"/>
- <fx:Object label="Item A 12"/>
- <fx:Object label="Item A 13"/>
- <fx:Object label="Item A 14"/>
- <fx:Object label="Item A 15"/>
- <fx:Object label="Item A 16"/>
- <fx:Object label="Item A 17"/>
- <fx:Object label="Item A 18"/>
- <fx:Object label="Item A 19"/>
- <fx:Object label="Item A 20"/>
- </s:ArrayCollection>
- </s:SpinnerList>
-
- <s:SpinnerList id="spinnerList2" change="spinnerListHandler(event)" width="50%" height="150">
- <s:ArrayCollection>
- <fx:Object label="Item B 1"/>
- <fx:Object label="Item B 2"/>
- <fx:Object label="Item B 3"/>
- <fx:Object label="Item B 4"/>
- <fx:Object label="Item B 5"/>
- <fx:Object label="Item B 6"/>
- <fx:Object label="Item B 7"/>
- <fx:Object label="Item B 8"/>
- <fx:Object label="Item B 9"/>
- <fx:Object label="Item B 10"/>
- <fx:Object label="Item B 11"/>
- <fx:Object label="Item B 12"/>
- <fx:Object label="Item B 13"/>
- <fx:Object label="Item B 14"/>
- <fx:Object label="Item B 15"/>
- <fx:Object label="Item B 16"/>
- <fx:Object label="Item B 17"/>
- <fx:Object label="Item B 18"/>
- <fx:Object label="Item B 19"/>
- <fx:Object label="Item B 20"/>
- </s:ArrayCollection>
- </s:SpinnerList>
- </s:SpinnerListContainer>
-
-
- <s:Label id="label" horizontalCenter="0" textAlign="center" bottom="20"/>
-
- <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.
+ <s:VGroup width="100%" height="100%" horizontalAlign="center" includeIn="DemoState" verticalAlign="middle">
+ <s:SpinnerListContainer width="100%" horizontalCenter="0">
+ <s:SpinnerList id="spinnerList1" change="spinnerListHandler(event)" width="50%" height="150" textAlign="center">
+ <s:ArrayCollection>
+ <fx:Object label="Item A 1"/>
+ <fx:Object label="Item A 2"/>
+ <fx:Object label="Item A 3"/>
+ <fx:Object label="Item A 4"/>
+ <fx:Object label="Item A 5"/>
+ <fx:Object label="Item A 6"/>
+ <fx:Object label="Item A 7"/>
+ <fx:Object label="Item A 8"/>
+ <fx:Object label="Item A 9"/>
+ <fx:Object label="Item A 10"/>
+ <fx:Object label="Item A 11"/>
+ <fx:Object label="Item A 12"/>
+ <fx:Object label="Item A 13"/>
+ <fx:Object label="Item A 14"/>
+ <fx:Object label="Item A 15"/>
+ <fx:Object label="Item A 16"/>
+ <fx:Object label="Item A 17"/>
+ <fx:Object label="Item A 18"/>
+ <fx:Object label="Item A 19"/>
+ <fx:Object label="Item A 20"/>
+ </s:ArrayCollection>
+ </s:SpinnerList>
+ <s:Spacer width="10"/>
+ <s:SpinnerList id="spinnerList2" change="spinnerListHandler(event)" width="50%" height="150" textAlign="center">
+ <s:ArrayCollection>
+ <fx:Object label="Item B 1"/>
+ <fx:Object label="Item B 2"/>
+ <fx:Object label="Item B 3"/>
+ <fx:Object label="Item B 4"/>
+ <fx:Object label="Item B 5"/>
+ <fx:Object label="Item B 6"/>
+ <fx:Object label="Item B 7"/>
+ <fx:Object label="Item B 8"/>
+ <fx:Object label="Item B 9"/>
+ <fx:Object label="Item B 10"/>
+ <fx:Object label="Item B 11"/>
+ <fx:Object label="Item B 12"/>
+ <fx:Object label="Item B 13"/>
+ <fx:Object label="Item B 14"/>
+ <fx:Object label="Item B 15"/>
+ <fx:Object label="Item B 16"/>
+ <fx:Object label="Item B 17"/>
+ <fx:Object label="Item B 18"/>
+ <fx:Object label="Item B 19"/>
+ <fx:Object label="Item B 20"/>
+ </s:ArrayCollection>
+ </s:SpinnerList>
+ </s:SpinnerListContainer>
+ <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 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:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
-
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/TextInputView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/TextInputView.mxml b/tourdeflexmobile/src/UIViews/TextInputView.mxml
index 8a765c8..b98eb00 100644
--- a/tourdeflexmobile/src/UIViews/TextInputView.mxml
+++ b/tourdeflexmobile/src/UIViews/TextInputView.mxml
@@ -21,24 +21,19 @@ limitations under the License.
xmlns:s="library://ns.adobe.com/flex/spark" title="TextInput">
<fx:Script>
<![CDATA[
- import mx.events.FlexEvent;
-
- import spark.skins.mobile.TextAreaSkin;
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
- private function submitText():void
- {
- label.text = textInput.text;
- }
-
]]>
</fx:Script>
@@ -48,39 +43,36 @@ limitations under the License.
</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="@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: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:Label includeIn="DemoState" id="label" horizontalCenter="0" y="60" 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.
-
- 
 
The TextInput skin for the mobile theme uses the StyleableStageText class instead of RichEditableText. Since StyleableStageText uses native text fields it allows for better text entry and manipulation experiences on mobile devices however there are limitations and differences that you should consider. The native text controls used by StageText apply different paddings around text. In order to avoid vertical scrolling, the StageText-based TextInput skin attempts to estimate this padding and compensate for that. Because of this and other differences in how native text controls treat text, the default height of the TextInput control using StageText-based skin will differ from its default height using the the TextField-based TextInput skin.
-
- 
 
You can set the text to be displayed, or get the text that the user has entered, using the text property. This property is a String, so if the user enter a numeric value it will be reported, for example, as 123.45 rather than 123.45.
-
- 
 
The text is formatted using CSS styles such as fontFamily and fontSize.
-
- 
 
For the Spark theme you can specify the width of the control using the widthInChars property which provides a convenient way to specify the width in a way that scales with the font size or you can use the typicalText property. Note that if you use typicalText, the widthInChars property is ignored. For all themes, you can also specify an explicit width in pixels, a percent width, or use constraints such as left and right. You do not normally do anything to specify the height; the control's default height is sufficient to display one line of text.
-
- 
 
You can use the maxChars property to limit the number of character that the user can enter, and the restrict to limit which characters the user can enter. To use this control for password input, set the displayAsPassword property to true.
-
- 
 
For the mobile theme, the soft-keyboard-specific properties, autoCapitalize, autoCorrect, returnKeyLabel and softKeyboardType properties specify keyboard hints. If a soft-keyboard is present but does not support a feature represented by the hint, the hint is ignored. In mobile environments with only hardware keyboards, these hints are ignored.
-
- 
 
This control dispatches a FlexEvent.ENTER event when the user pressed the Enter key rather than inserting a line break, because this control does not support entering multiple lines of text. By default, this control has explicit line breaks.
-
- 
 
 This control is a skinnable control whose default skin contains either a RichEditableText instance for the Spark theme or a StyleableStageText instance for the Mobile theme. It handles displaying and editing the text. (The skin also handles drawing the border and background.) This RichEditableText or StyleableStageText instance can be accessed as the textDisplay object. For the mobile theme, if you wish to use the TextField-based skin, rather than the StageText-based skin, set the skinClass property to spark.skins.mobile.TextInputSkin.
-
- 
 
 For the Spark theme, as a result of its RichEditableText using TLF, the Spark TextInput control supports displaying left-to-right (LTR) text, such as French, right-to-left (RTL) text, such as Arabic, and bidirectional text such as a French phrase inside of an Arabic one. If the predominant text direction is right-to-left, set the direction style to rtl. The textAlign style defaults to start, which makes the text left-aligned when direction is ltr and right-aligned when direction is rtl. To get the opposite alignment, set textAlign to end.
-
- 
 
 Also as a result of using TLF, the Spark TextInput supports unlimited undo/redo within one editing session. An editing session starts when the control gets keyboard focus and ends when the control loses focus.
-
- 
 
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:VGroup includeIn="DemoState" width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
+ <s:TextInput id="textInput" prompt="Display Normal" paddingLeft="20" paddingRight="20" skinClass="spark.skins.android4.ScrollingStageTextInputSkin"/>
+ <s:TextInput id="textInput1" prompt="Display as Password" paddingLeft="20" paddingRight="20" displayAsPassword="true" skinClass="spark.skins.android4.ScrollingStageTextInputSkin"/>
+ <s:TextInput id="textInput2" prompt="Display only Numbers" paddingLeft="20" paddingRight="20" softKeyboardType="number" skinClass="spark.skins.android4.ScrollingStageTextInputSkin"/>
+ <s:Label id="label" horizontalCenter="0" y="60" textAlign="center"/>
+ </s:VGroup>
+ <s:TextArea includeIn="InfoState" selectable="false" 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.
+ 
 
The TextInput skin for the mobile theme uses the StyleableStageText class instead of RichEditableText. Since StyleableStageText uses native text fields it allows for better text entry and manipulation experiences on mobile devices however there are limitations and differences that you should consider. The native text controls used by StageText apply different paddings around text. In order to avoid vertical scrolling, the StageText-based TextInput skin attempts to estimate this padding and compensate for that. Because of this and other differences in how native text controls treat text, the default height of the TextInput control using StageText-based skin will differ from its default height using the the TextField-based TextInput skin.
+ 
 
You can set the text to be displayed, or get the text that the user has entered, using the text property. This property is a String, so if the user enter a numeric value it will be reported, for example, as 123.45 rather than 123.45.
+ 
 
The text is formatted using CSS styles such as fontFamily and fontSize.
+ 
 
For the Spark theme you can specify the width of the control using the widthInChars property which provides a convenient way to specify the width in a way that scales with the font size or you can use the typicalText property. Note that if you use typicalText, the widthInChars property is ignored. For all themes, you can also specify an explicit width in pixels, a percent width, or use constraints such as left and right. You do not normally do anything to specify the height; the control's default height is sufficient to display one line of text.
+ 
 
You can use the maxChars property to limit the number of character that the user can enter, and the restrict to limit which characters the user can enter. To use this control for password input, set the displayAsPassword property to true.
+ 
 
For the mobile theme, the soft-keyboard-specific properties, autoCapitalize, autoCorrect, returnKeyLabel and softKeyboardType properties specify keyboard hints. If a soft-keyboard is present but does not support a feature represented by the hint, the hint is ignored. In mobile environments with only hardware keyboards, these hints are ignored.
+ 
 
This control dispatches a FlexEvent.ENTER event when the user pressed the Enter key rather than inserting a line break, because this control does not support entering multiple lines of text. By default, this control has explicit line breaks.
+ 
 
 This control is a skinnable control whose default skin contains either a RichEditableText instance for the Spark theme or a StyleableStageText instance for the Mobile theme. It handles displaying and editing the text. (The skin also handles drawing the border and background.) This RichEditableText or StyleableStageText instance can be accessed as the textDisplay object. For the mobile theme, if you wish to use the TextField-based skin, rather than the StageText-based skin, set the skinClass property to spark.skins.mobile.TextInputSkin.
+ 
 
 For the Spark theme, as a result of its RichEditableText using TLF, the Spark TextInput control supports displaying left-to-right (LTR) text, such as French, right-to-left (RTL) text, such as Arabic, and bidirectional text such as a French phrase inside of an Arabic one. If the predominant text direction is right-to-left, set the direction style to rtl. The textAlign style defaults to start, which makes the text left-aligned when direction is ltr and right-aligned when direction is rtl. To get the opposite alignment, set textAlign to end.
+ 
 
 Also as a result of using TLF, the Spark TextInput supports unlimited undo/redo within one editing session. An editing session starts when the control gets keyboard focus and ends when the control loses focus.
+ 
 
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:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/ToggleSwitchView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/ToggleSwitchView.mxml b/tourdeflexmobile/src/UIViews/ToggleSwitchView.mxml
index 5309a75..50cc4bf 100644
--- a/tourdeflexmobile/src/UIViews/ToggleSwitchView.mxml
+++ b/tourdeflexmobile/src/UIViews/ToggleSwitchView.mxml
@@ -18,40 +18,64 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="ToggleSwitch">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="ToggleSwitch">
<fx:Script>
<![CDATA[
-
+
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
+ protected function toggleswitch1_changeHandler(event:Event):void
+ {
+ if (toggleSwitch.selected == true)
+ {
+ label.text = "true"
+ }
+ if (toggleSwitch.selected == false)
+ {
+ label.text = "false"
+ }
+ }
+
]]>
- </fx:Script>
-
+ </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')"/>
- <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="@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:ToggleSwitch includeIn="DemoState" horizontalCenter="0" y="20" />
-
- <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.
+ <s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" includeIn="DemoState">
+ <s:ToggleSwitch horizontalCenter="0" y="20" change="toggleswitch1_changeHandler(event)" id="toggleSwitch"/>
+ <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 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."/>
-
+ 
 
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:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/font/Roboto-Bold.ttf
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/font/Roboto-Bold.ttf b/tourdeflexmobile/src/assets/font/Roboto-Bold.ttf
new file mode 100644
index 0000000..e5d828d
Binary files /dev/null and b/tourdeflexmobile/src/assets/font/Roboto-Bold.ttf differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/font/Roboto-BoldItalic.ttf
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/font/Roboto-BoldItalic.ttf b/tourdeflexmobile/src/assets/font/Roboto-BoldItalic.ttf
new file mode 100644
index 0000000..d8fa3ae
Binary files /dev/null and b/tourdeflexmobile/src/assets/font/Roboto-BoldItalic.ttf differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/font/Roboto-Italic.ttf
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/font/Roboto-Italic.ttf b/tourdeflexmobile/src/assets/font/Roboto-Italic.ttf
new file mode 100644
index 0000000..6682d17
Binary files /dev/null and b/tourdeflexmobile/src/assets/font/Roboto-Italic.ttf differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/font/Roboto-Regular.ttf
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/font/Roboto-Regular.ttf b/tourdeflexmobile/src/assets/font/Roboto-Regular.ttf
new file mode 100644
index 0000000..153c608
Binary files /dev/null and b/tourdeflexmobile/src/assets/font/Roboto-Regular.ttf differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/160/1.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/160/1.png b/tourdeflexmobile/src/assets/icons/160/1.png
new file mode 100644
index 0000000..b861d58
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/160/1.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/160/2.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/160/2.png b/tourdeflexmobile/src/assets/icons/160/2.png
new file mode 100644
index 0000000..b669109
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/160/2.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/160/3.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/160/3.png b/tourdeflexmobile/src/assets/icons/160/3.png
new file mode 100644
index 0000000..028b74f
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/160/3.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/160/about.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/160/about.png b/tourdeflexmobile/src/assets/icons/160/about.png
index d7b7e69..624e745 100644
Binary files a/tourdeflexmobile/src/assets/icons/160/about.png and b/tourdeflexmobile/src/assets/icons/160/about.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/160/add.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/160/add.png b/tourdeflexmobile/src/assets/icons/160/add.png
index 4d5d484..da506ca 100644
Binary files a/tourdeflexmobile/src/assets/icons/160/add.png and b/tourdeflexmobile/src/assets/icons/160/add.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/160/dock.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/160/dock.png b/tourdeflexmobile/src/assets/icons/160/dock.png
index aa0c320..d71549e 100644
Binary files a/tourdeflexmobile/src/assets/icons/160/dock.png and b/tourdeflexmobile/src/assets/icons/160/dock.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/160/icon.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/160/icon.png b/tourdeflexmobile/src/assets/icons/160/icon.png
new file mode 100644
index 0000000..4e10b4c
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/160/icon.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/160/icon1.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/160/icon1.png b/tourdeflexmobile/src/assets/icons/160/icon1.png
new file mode 100644
index 0000000..bebfba0
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/160/icon1.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/240/1.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/240/1.png b/tourdeflexmobile/src/assets/icons/240/1.png
new file mode 100644
index 0000000..25d378f
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/240/1.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/240/2.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/240/2.png b/tourdeflexmobile/src/assets/icons/240/2.png
new file mode 100644
index 0000000..e3e1088
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/240/2.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/240/3.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/240/3.png b/tourdeflexmobile/src/assets/icons/240/3.png
new file mode 100644
index 0000000..3c7bf7c
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/240/3.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/240/about.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/240/about.png b/tourdeflexmobile/src/assets/icons/240/about.png
index 6eaf08a..077dcec 100644
Binary files a/tourdeflexmobile/src/assets/icons/240/about.png and b/tourdeflexmobile/src/assets/icons/240/about.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/240/add.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/240/add.png b/tourdeflexmobile/src/assets/icons/240/add.png
index ad8ada6..3a525cd 100644
Binary files a/tourdeflexmobile/src/assets/icons/240/add.png and b/tourdeflexmobile/src/assets/icons/240/add.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/240/dock.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/240/dock.png b/tourdeflexmobile/src/assets/icons/240/dock.png
index 37f3a93..ec30147 100644
Binary files a/tourdeflexmobile/src/assets/icons/240/dock.png and b/tourdeflexmobile/src/assets/icons/240/dock.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/240/icon.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/240/icon.png b/tourdeflexmobile/src/assets/icons/240/icon.png
new file mode 100644
index 0000000..4e68ba4
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/240/icon.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/240/icon1.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/240/icon1.png b/tourdeflexmobile/src/assets/icons/240/icon1.png
new file mode 100644
index 0000000..da983cb
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/240/icon1.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/320/1.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/320/1.png b/tourdeflexmobile/src/assets/icons/320/1.png
new file mode 100644
index 0000000..e376820
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/320/1.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/320/2.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/320/2.png b/tourdeflexmobile/src/assets/icons/320/2.png
new file mode 100644
index 0000000..127bf89
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/320/2.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/320/3.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/320/3.png b/tourdeflexmobile/src/assets/icons/320/3.png
new file mode 100644
index 0000000..3b4a008
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/320/3.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/320/about.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/320/about.png b/tourdeflexmobile/src/assets/icons/320/about.png
index 4ee903f..3be3152 100644
Binary files a/tourdeflexmobile/src/assets/icons/320/about.png and b/tourdeflexmobile/src/assets/icons/320/about.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/320/add.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/320/add.png b/tourdeflexmobile/src/assets/icons/320/add.png
index 23b9a1c..6038bee 100644
Binary files a/tourdeflexmobile/src/assets/icons/320/add.png and b/tourdeflexmobile/src/assets/icons/320/add.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/320/dock.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/320/dock.png b/tourdeflexmobile/src/assets/icons/320/dock.png
index a749474..a828cf3 100644
Binary files a/tourdeflexmobile/src/assets/icons/320/dock.png and b/tourdeflexmobile/src/assets/icons/320/dock.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/320/icon.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/320/icon.png b/tourdeflexmobile/src/assets/icons/320/icon.png
new file mode 100644
index 0000000..e0a4668
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/320/icon.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/320/icon1.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/320/icon1.png b/tourdeflexmobile/src/assets/icons/320/icon1.png
new file mode 100644
index 0000000..0f6dc80
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/320/icon1.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/480/1.png
----------------------------------------------------------------------
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
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/480/1.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/480/2.png
----------------------------------------------------------------------
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
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/480/2.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/480/3.png
----------------------------------------------------------------------
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
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/480/3.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/480/about.png
----------------------------------------------------------------------
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
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/480/about.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/480/add.png
----------------------------------------------------------------------
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
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/480/add.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/480/dock.png
----------------------------------------------------------------------
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
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/480/dock.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/480/icon.png
----------------------------------------------------------------------
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
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/480/icon.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/480/icon1.png
----------------------------------------------------------------------
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
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/480/icon1.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/640/icon.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/640/icon.png b/tourdeflexmobile/src/assets/icons/640/icon.png
new file mode 100644
index 0000000..53e88bd
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/640/icon.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/640/icon1.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/640/icon1.png b/tourdeflexmobile/src/assets/icons/640/icon1.png
new file mode 100644
index 0000000..ec12512
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/640/icon1.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/icon1024.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/icon1024.png b/tourdeflexmobile/src/assets/icons/icon1024.png
new file mode 100644
index 0000000..e37a121
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/icon1024.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/icon144.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/icon144.png b/tourdeflexmobile/src/assets/icons/icon144.png
new file mode 100644
index 0000000..878b81f
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/icon144.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/icon192.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/icon192.png b/tourdeflexmobile/src/assets/icons/icon192.png
new file mode 100644
index 0000000..d8c62fc
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/icon192.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/icon48.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/icon48.png b/tourdeflexmobile/src/assets/icons/icon48.png
new file mode 100644
index 0000000..2bea903
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/icon48.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/icon512.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/icon512.png b/tourdeflexmobile/src/assets/icons/icon512.png
new file mode 100644
index 0000000..0180841
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/icon512.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/icon72.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/icon72.png b/tourdeflexmobile/src/assets/icons/icon72.png
new file mode 100644
index 0000000..7c783ec
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/icon72.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/icons/icon96.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/icons/icon96.png b/tourdeflexmobile/src/assets/icons/icon96.png
new file mode 100644
index 0000000..e2b282c
Binary files /dev/null and b/tourdeflexmobile/src/assets/icons/icon96.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/images/bg.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/images/bg.png b/tourdeflexmobile/src/assets/images/bg.png
deleted file mode 100644
index e1613e5..0000000
Binary files a/tourdeflexmobile/src/assets/images/bg.png and /dev/null differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/images/logo_01_fullcolor.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/images/logo_01_fullcolor.png b/tourdeflexmobile/src/assets/images/logo_01_fullcolor.png
new file mode 100644
index 0000000..376a380
Binary files /dev/null and b/tourdeflexmobile/src/assets/images/logo_01_fullcolor.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/images/logo_01_fullcolor_wb.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/images/logo_01_fullcolor_wb.png b/tourdeflexmobile/src/assets/images/logo_01_fullcolor_wb.png
new file mode 100644
index 0000000..7d9016c
Binary files /dev/null and b/tourdeflexmobile/src/assets/images/logo_01_fullcolor_wb.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/assets/images/poweredby.png
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/assets/images/poweredby.png b/tourdeflexmobile/src/assets/images/poweredby.png
new file mode 100644
index 0000000..b436ca8
Binary files /dev/null and b/tourdeflexmobile/src/assets/images/poweredby.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/renderers/AccordionElement.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/renderers/AccordionElement.mxml b/tourdeflexmobile/src/renderers/AccordionElement.mxml
new file mode 100644
index 0000000..13e7904
--- /dev/null
+++ b/tourdeflexmobile/src/renderers/AccordionElement.mxml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%" xmlns:ns="http://flex.apache.org/experimental/ns">
+
+ <s:Rect width="100%" height="100%">
+ <s:fill>
+ <s:SolidColor color="{Math.random() * 0xffffff}"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:HGroup verticalCenter="0" horizontalCenter="0" verticalAlign="middle">
+ <s:Image source="@Embed('assets/images/logo_01_fullcolor.png')" scaleX=".5" scaleY=".5"/>
+ </s:HGroup>
+</s:Group>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/renderers/MenuRenderer.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/renderers/MenuRenderer.mxml b/tourdeflexmobile/src/renderers/MenuRenderer.mxml
index 6b79d77..de1fc56 100644
--- a/tourdeflexmobile/src/renderers/MenuRenderer.mxml
+++ b/tourdeflexmobile/src/renderers/MenuRenderer.mxml
@@ -19,8 +19,10 @@ limitations under the License.
-->
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- height="40" width="100%" cacheAsBitmap="false">
-
+ height="35"
+ width="100%"
+ cacheAsBitmap="false">
+
<fx:Script>
<![CDATA[
@@ -29,20 +31,23 @@ limitations under the License.
if(data){
- if(data.type == "view"){
+ if(data.type == "view")
+ {
autoDrawBackground = true;
currentState = "ViewState";
- } else if(data.type == "separator"){
+ }
+ else if(data.type == "separator")
+ {
autoDrawBackground = false;
- opaqueBackground = 0x464646;
+ //opaqueBackground = 0xcdcdcc;
currentState = "SeparatorState";
- } else {
+ }
+ else
+ {
autoDrawBackground = true;
currentState = "ViewState";
- }
-
- itemLabel.text = data.label;
-
+ }
+ itemLabel.text = data.label;
}
}
@@ -54,6 +59,11 @@ limitations under the License.
<s:State name="SeparatorState"/>
</s:states>
- <s:Label id="itemLabel" color.SeparatorState="#888888" color.ViewState="#FFFFFF" x="10" verticalCenter="0"/>
-
+ <s:Label id="itemLabel" color.SeparatorState="#58585b" color.ViewState="#59595c" x.SeparatorState="10" x.ViewState="15" verticalCenter="0" verticalAlign="middle"
+ fontWeight.SeparatorState="bold" height="100%" fontFamily.SeparatorState="RobotoEmbeddedBold"/>
+ <s:Line width="100%" includeIn="SeparatorState" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0xdddddd" weight="1" alpha="1"/>
+ </s:stroke>
+ </s:Line>
</s:ItemRenderer>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/styles.css
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/styles.css b/tourdeflexmobile/src/styles.css
index 3459839..3461022 100644
--- a/tourdeflexmobile/src/styles.css
+++ b/tourdeflexmobile/src/styles.css
@@ -1,66 +1,446 @@
-/*///////////////////////////////////////////////////////////////////////////////
-//
-// 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.
-//
-////////////////////////////////////////////////////////////////////////////////*/
/* CSS file */
-@namespace s "library://ns.adobe.com/flex/spark";
+@namespace "library://ns.adobe.com/flex/spark";
+@namespace supportClasses "spark.components.supportClasses.*";
+@namespace ns "http://flex.apache.org/experimental/ns";
+/* Import the different font weights and styles */
+@font-face
+{
+ src: url("assets/font/Roboto-Regular.ttf");
+ fontFamily: Roboto;
+ embedAsCFF: true;
+}
+
+@font-face
+{
+ src: url("assets/font/Roboto-Bold.ttf");
+ fontFamily: Roboto;
+ fontWeight: bold;
+ embedAsCFF: true;
+}
-s|ActionBar
+
+global
{
- chromeColor: #303030;
+ fontFamily: RobotoRegular;
+ fontSize: 24;
+ color: #000000;
}
-s|View
+ActionBar
{
- backgroundColor: #464646;
+ chromeColor: #DEDEDD;
+ defaultButtonAppearance: normal;
+ skinClass: ClassReference("spark.skins.android4.ActionBarSkin");
+ textShadowAlpha: 0;
+ textShadowColor: #000000;
+ paddingBottom: 0;
+ paddingLeft: 0;
+ paddingRight: 0;
+ paddingTop: 0;
}
-s|Application
+ActionBar #titleDisplay
{
- backgroundColor: #464646;
+ color: #333333;
+ fontSize: 24;
+ fontFamily: RobotoBold;
}
-s|List
+ActionBar ButtonBase
{
- alternatingItemColors: #303030;
- selectionColor: #000000;
- downColor: #FA5B0F;
- contentBackgroundColor: #464646;
- color: #FFFFFF;
+ color: #333333;
+ fontFamily: RobotoBold;
+ fontWeight: bold;
}
-s|TextArea
+ActionBar Group#actionGroup Button
{
- color: #FFFFFF;
- contentBackgroundColor: #303030;
+ skinClass: ClassReference("spark.skins.android4.TransparentActionButtonSkin");
}
-s|CheckBox
+ActionBar Group#navigationGroup Button
{
- color: #FFFFFF;
+ skinClass: ClassReference("spark.skins.android4.TransparentNavigationButtonSkin");
}
-s|RadioButton
+Button
{
- color: #FFFFFF;
+ fontFamily: RobotoBold;
+ fontWeight: "bold";
+ skinClass: ClassReference("spark.skins.android4.ButtonSkin");
+ chromeColor: #4e4e4e;
}
-s|Label
+ButtonBar
{
+ skinClass: ClassReference("spark.skins.android4.ButtonBarSkin");
+ fontFamily: RobotoBold;
+ fontWeight: "bold";
+}
+
+
+Button.emphasized
+{
+ skinClass: ClassReference("spark.skins.mobile.DefaultButtonSkin");
+}
+
+CheckBox
+{
+ skinClass: ClassReference("spark.skins.android4.CheckBoxSkin");
+ chromeColor: #FFFFFF;
+}
+
+RadioButton
+{
+ skinClass: ClassReference("spark.skins.android4.RadioButtonSkin");
+ chromeColor: #FFFFFF;
+}
+
+ToggleSwitch
+{
+ accentColor: #3F7FBA;
color: #FFFFFF;
-}
\ No newline at end of file
+ skinClass: ClassReference("spark.skins.android4.ToggleSwitchSkin");
+ slideDuration: 125;
+ textShadowAlpha: .65;
+ textShadowColor: #000000;
+}
+
+HSlider
+{
+ skinClass: ClassReference("spark.skins.android4.HSliderSkin");
+}
+
+Callout
+{
+ backgroundColor: #33B5E5;
+ contentBackgroundColor: #FFFFFF;
+ gap: 12;
+ skinClass: ClassReference("spark.skins.android4.CalloutSkin");
+ borderThickness: 0;
+ borderColor: 0;
+}
+
+TabbedViewNavigator #tabBar
+{
+ fontFamily: RobotoRegular;
+ chromeColor: #484848;
+ color: #000000;
+ fontSize: 20;
+ fontWeight: normal;
+ iconPlacement: top;
+ interactionMode:mouse;
+ skinClass: ClassReference("spark.skins.android4.TabbedViewNavigatorTabBarSkin");
+ textShadowAlpha: 0;
+ textShadowColor: #000000;
+}
+
+
+SplitViewNavigator
+{
+ skinClass: ClassReference("spark.skins.android4.SplitViewNavigatorSkin");
+}
+
+TextInput
+{
+ skinClass: ClassReference("spark.skins.android4.TextInputSkin");
+ contentBackgroundAlpha: 0;
+ focusColor: #33afdd;
+ borderColor: #4e4e4e;
+ contentBackgroundColor: #DEDEDD;
+ contentBackgroundBorder: "flat";
+ fontFamily: RobotoRegular;
+ selectionHighlighting: "never";
+ focusEnabled:"false";
+ focusThickness: 0;
+}
+
+TextArea
+{
+ skinClass: ClassReference("spark.skins.android4.TextAreaSkin");
+ contentBackgroundAlpha: 0;
+ contentBackgroundBorder: "rectangle";
+ contentBackgroundColor: #DEDEDD;
+ focusColor: #4e4e4e;
+ borderColor: #4e4e4e;
+ selectionHighlighting: "never";
+ focusEnabled:"false";
+ focusThickness: 0;
+}
+
+SpinnerListContainer
+{
+ skinClass:ClassReference("spark.skins.android4.SpinnerListContainerSkin");
+}
+
+SpinnerList
+{
+ skinClass:ClassReference("spark.skins.android4.SpinnerListSkin");
+ /*text color*/
+ color: #000000;
+}
+
+DateSpinner
+{
+ accentColor: #33afdd;
+ color: #000000;
+}
+
+ViewMenu
+{
+ skinClass: ClassReference("spark.skins.android4.ViewMenuSkin");
+}
+
+
+ViewMenuItem
+{
+ iconPlacement : "left";
+ chromeColor : #FFFFFF;
+ focusColor: #DEDEDD;
+ paddingBottom: 8;
+ paddingLeft: 8;
+ paddingRight: 8;
+ paddingTop: 8;
+ skinClass : ClassReference("spark.skins.android4.ViewMenuItemSkin");
+}
+
+
+HScrollBar
+{
+ skinClass: ClassReference("spark.skins.android4.HScrollBarSkin");
+ thumbColor: #333333;
+}
+
+List
+{
+ skinClass: ClassReference("spark.skins.android4.ListSkin");
+ borderAlpha: .1;
+
+}
+
+VScrollBar
+{
+ skinClass: ClassReference("spark.skins.android4.VScrollBarSkin");
+ thumbColor: #333333;
+}
+
+ns|MobileGrid
+{
+ skinClass: ClassReference('spark.skins.android4.MobileGridSkin');
+ color: white;
+ selection-color: #33B5E5; /* blue */
+
+}
+
+supportClasses|MobileGridHeader
+{
+ textShadowAlpha: 0;
+ color: #000000;
+ skinClass: ClassReference('spark.skins.android4.MobileGridHeaderButtonBarSkin');
+ fontWeight: bold;
+}
+
+supportClasses|MobileGridRowRenderer
+{
+ verticalAlign: "middle";
+ downColor: #e0e0e0;
+}
+
+
+@media (application-dpi: 120)
+{
+ global
+ {
+ fontSize: 12;
+
+ }
+
+ ActionBar.beveled
+ {
+ paddingLeft: 4;
+ paddingRight: 4;
+ }
+
+ ActionBar #titleDisplay
+ {
+ fontSize: 14;
+ }
+
+ supportClasses|MobileGridHeader
+ {
+ fontSize: 10;
+ }
+
+ supportClasses|MobileGridRowRenderer
+ {
+ paddingTop: 1;
+ paddingLeft: 7;
+ paddingRight: 7;
+ paddingBottom: 0;
+ }
+}
+
+@media (application-dpi: 160)
+{
+ global
+ {
+ fontSize: 16;
+ }
+
+ ActionBar
+ {
+ paddingBottom: 0;
+ paddingLeft: 0;
+ paddingRight: 0;
+ paddingTop: 0;
+ }
+
+ ActionBar #titleDisplay
+ {
+ fontSize: 18;
+ }
+ supportClasses|MobileGridHeader
+ {
+ fontSize: 18;
+ }
+
+ supportClasses|MobileGridRowRenderer
+ {
+ paddingTop: 1;
+ paddingLeft: 10;
+ paddingRight: 10;
+ paddingBottom: 0;
+ }
+}
+
+@media (application-dpi: 240)
+{
+ global
+ {
+ fontSize: 20;
+ }
+
+ ActionBar #titleDisplay
+ {
+ fontSize: 24;
+ }
+ supportClasses|MobileGridHeader
+ {
+ fontSize: 20;
+ }
+
+ supportClasses|MobileGridRowRenderer
+ {
+ paddingTop: 2;
+ paddingLeft: 14;
+ paddingRight: 14;
+ paddingBottom: 0;
+ }
+
+}
+
+@media (application-dpi: 320)
+{
+ global
+ {
+ fontSize: 32;
+ }
+
+ ActionBar
+ {
+ paddingBottom: 0;
+ paddingLeft: 0;
+ paddingRight: 0;
+ paddingTop: 0;
+ }
+
+ ActionBar #titleDisplay
+ {
+ fontSize: 36;
+ }
+
+ supportClasses|MobileGridHeader
+ {
+ fontSize: 28;
+ }
+
+ supportClasses|MobileGridRowRenderer
+ {
+ paddingTop: 2;
+ paddingLeft: 20;
+ paddingRight: 20;
+ paddingBottom: 0;
+ }
+}
+
+@media (application-dpi: 480)
+{
+ global
+ {
+ fontSize: 48;
+
+ }
+
+ ActionBar
+ {
+ paddingBottom: 0;
+ paddingLeft: 0;
+ paddingRight: 0;
+ paddingTop: 0;
+ }
+
+ ActionBar #titleDisplay
+ {
+ fontSize: 54;
+ }
+
+ supportClasses|MobileGridHeader
+ {
+ fontSize: 40;
+ }
+
+ supportClasses|MobileGridRowRenderer
+ {
+ paddingTop: 4;
+ paddingLeft: 28;
+ paddingRight: 28;
+ paddingBottom: 0;
+ }
+
+}
+
+@media (application-dpi: 640)
+{
+ global
+ {
+ fontSize: 64;
+ }
+
+ ActionBar
+ {
+ paddingBottom: 0;
+ paddingLeft: 0;
+ paddingRight: 0;
+ paddingTop: 0;
+ }
+
+ ActionBar #titleDisplay
+ {
+ fontSize: 72;
+ }
+}
+
+/* Register fonts as styleNames for further use */
+.RobotoEmbedded
+{
+ fontFamily: Roboto;
+ font-lookup: embeddedCFF;
+}
+
+.RobotoEmbeddedBold
+{
+ fontFamily: Roboto;
+ fontWeight: bold;
+ font-lookup: embeddedCFF;
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/views/BlogView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/views/BlogView.mxml b/tourdeflexmobile/src/views/BlogView.mxml
index 3291ec8..86961ff 100644
--- a/tourdeflexmobile/src/views/BlogView.mxml
+++ b/tourdeflexmobile/src/views/BlogView.mxml
@@ -19,37 +19,19 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- title="Apache Flex Blog"
- viewActivate="init(event)">
+ title="Apache Flex" >
<fx:Script>
<![CDATA[
- import mx.rpc.events.ResultEvent;
- import spark.components.supportClasses.StyleableTextField;
- import spark.events.ViewNavigatorEvent;
- protected function init(event:ViewNavigatorEvent):void
- {
- newsService.send();
- }
-
- protected function resultHandler(event:ResultEvent):void
- {
- busyInc.visible= false;
- for(var i:uint = 0; i<=event.result.channel.item.length()-1; i++){
- StyleableTextField(textArea.textDisplay).htmlText += "<b>" + event.result.channel.item[i].title + "</b>" + "\n" + "<i>" + event.result.channel.item[i].pubDate + "</i>" + "\n\n" + event.result.channel.item[i].description + "\n\n";
- }
-
- textArea.text += " ";
- }
]]>
</fx:Script>
<fx:Declarations>
- <s:HTTPService id="newsService" url="https://blogs.apache.org/flex/feed/entries/rss" resultFormat="e4x" result="resultHandler(event)"/>
+
</fx:Declarations>
- <s:TextArea id="textArea" selectable="false" editable="false" skinClass="spark.skins.mobile.TextAreaSkin" left="5" right="5" top="5" bottom="5"/>
- <s:BusyIndicator id="busyInc" width="40" height="40" horizontalCenter="0" verticalCenter="0" symbolColor="0xFFFFFF"/>
+ <s:Image id="textArea" source="@Embed('assets/images/poweredby.png')" left="5" right="5" top="5" bottom="5" />
+
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/views/HttpServiceView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/views/HttpServiceView.mxml b/tourdeflexmobile/src/views/HttpServiceView.mxml
index 373cd85..a63f871 100644
--- a/tourdeflexmobile/src/views/HttpServiceView.mxml
+++ b/tourdeflexmobile/src/views/HttpServiceView.mxml
@@ -18,17 +18,20 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="HTTPService">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="HTTPService">
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.rpc.events.ResultEvent;
- import spark.skins.mobile.TextAreaSkin;
-
protected function loadRSS():void
{
- if(textInput.text != ""){
+ //clear the list and show the busy indicator
+ itemsList.dataProvider = null;
+ busyIndicator.visible = true;
+ if(textInput.text != "")
+ {
rssService.url = textInput.text;
rssService.send();
}
@@ -36,18 +39,21 @@ limitations under the License.
protected function rssResult(event:ResultEvent):void
{
+ busyIndicator.visible = false;
itemsList.dataProvider = new XMLListCollection(new XMLList(event.result.channel.item));
}
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
- }
-
+ }
]]>
</fx:Script>
@@ -57,19 +63,21 @@ limitations under the License.
</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>
-
- <s:TextInput id="textInput" text="https://blogs.apache.org/flex/feed/entries/rss" prompt="Type any RSS 2.0 valid URL" skinClass="spark.skins.mobile.TextInputSkin" includeIn="DemoState" enter="loadRSS()" y="10" left="5" right="70" height="40"/>
+ </fx:Declarations>
+ <s:TextInput id="textInput" text="https://blogs.apache.org/flex/feed/entries/rss" prompt="Type any RSS 2.0 valid URL"
+ includeIn="DemoState" enter="loadRSS()" y="10" left="10" right="70" height="40"/>
<s:Button label="Load" y="10" includeIn="DemoState" width="60" height="40" right="5" click="loadRSS()"/>
<s:List id="itemsList" labelField="title" includeIn="DemoState" width="100%" bottom="0" top="60"/>
-
- <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="You use the HTTPService tag to represent an HTTPService object in an MXML file. When you call the HTTPService object's send() method, it makes an HTTP request to the specified URL, and an HTTP response is returned. Optionally, you can pass parameters to the specified URL. When you do not go through the server-based proxy service, you can use only HTTP GET or POST methods. However, when you set the useProxy property to true and you use the server-based proxy service, you can also use the HTTP HEAD, OPTIONS, TRACE, and DELETE methods.
- 
 
Note: Due to a software limitation, HTTPService does not generate user-friendly error messages when using GET."/>
-
+ <s:BusyIndicator id="busyIndicator" verticalCenter="0" horizontalCenter="0" width="20" height="20" visible="false"/>
+ <s:TextArea includeIn="InfoState" left="10" right="10" top="10" bottom="10" editable="false" selectable="false"
+ text="You use the HTTPService tag to represent an HTTPService object in an MXML file. When you call the HTTPService object's send() method, it makes an HTTP request to the specified URL, and an HTTP response is returned. Optionally, you can pass parameters to the specified URL. When you do not go through the server-based proxy service, you can use only HTTP GET or POST methods. However, when you set the useProxy property to true and you use the server-based proxy service, you can also use the HTTP HEAD, OPTIONS, TRACE, and DELETE methods.
+ 
 
Note: Due to a software limitation, HTTPService does not generate user-friendly error messages when using GET."/>
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
[07/22] git commit: [flex-examples] [refs/heads/develop] - added
slide to open,
uses mousedown events and works off 20 pixels of the left side of the screen
Posted by bi...@apache.org.
added slide to open, uses mousedown events and works off 20 pixels of the left side of the screen
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/1edb5707
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/1edb5707
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/1edb5707
Branch: refs/heads/develop
Commit: 1edb5707b65fa340aed96ecc16c034bb88119930
Parents: 975d032
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Thu Jan 16 14:40:04 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:32 2014 -0800
----------------------------------------------------------------------
tourdeflexmobile/src/TourDeFlexMobile.mxml | 74 ++++++++++++++++---------
1 file changed, 48 insertions(+), 26 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1edb5707/tourdeflexmobile/src/TourDeFlexMobile.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml
index 71a2704..f73ba31 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile.mxml
+++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml
@@ -27,12 +27,14 @@ limitations under the License.
<fx:Script>
<![CDATA[
- import mx.core.FlexGlobals;
- import mx.events.FlexEvent;
- import flash.utils.Timer;
+ import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
- import flash.events.Event;
+ import flash.utils.Timer;
+
+ import mx.core.FlexGlobals;
+ import mx.events.FlexEvent;
+
import spark.events.IndexChangeEvent;
import AIRViews.AccelerometerView;
@@ -60,14 +62,6 @@ limitations under the License.
import views.HttpServiceView;
- private var isOpen:Boolean;
-
- [Bindable]
- private var currentStageWidth:Number;
-
- [Bindable]
- private var currentStageHeight:Number;
-
public static var SLIDE_INTERVAL:int = 40;
public static var STEPS:int = 6;
@@ -79,15 +73,16 @@ limitations under the License.
protected function init(event:FlexEvent):void
{
+ stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
btn.addEventListener(MouseEvent.CLICK, slideButtonHandler);
_slideTimer.addEventListener(TimerEvent.TIMER, doSlide);
_slideTimer.addEventListener(TimerEvent.TIMER_COMPLETE, slideComplete);
}
-/*******************************************
- *used some code from Macomponents UISlideOutNavigation, replaced the actionscript elements with flex UI elements and was able to apply
- *the same drag to close behavior
-*********************************************/
+ /*******************************************
+ *used some code from Macomponents UISlideOutNavigation, replaced the actionscript elements with flex UI elements and was able to apply
+ *the same drag to close behavior
+ *********************************************/
public function open(animated:Boolean = true):void
{
@@ -104,7 +99,8 @@ limitations under the License.
{
navigators.x = lateralMenu.width;
!navigators.mouseEnabled;
- }
+ }
+ stage.addEventListener(MouseEvent.CLICK, close);
}
public function close(animated:Boolean = true):void
@@ -121,11 +117,10 @@ limitations under the License.
navigators.x = 0;
}
}
-
+
protected function changeHandler(event:IndexChangeEvent):void
{
close();
- stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
navigator.pushView(componentsList.selectedItem.view);
}
@@ -143,7 +138,7 @@ limitations under the License.
}
}
-
+
protected function mouseDown(event:MouseEvent):void
{
if (!navigators.mouseEnabled && mouseX > lateralMenu.width && mouseY > 45)
@@ -151,7 +146,13 @@ limitations under the License.
_startX = mouseX;
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
- }
+ }
+ if (navigators.mouseEnabled && mouseX < 20)
+ {
+ _startX = mouseX;
+ stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp1);
+ stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove1);
+ }
}
protected function doSlide(event:TimerEvent):void
@@ -173,7 +174,9 @@ limitations under the License.
protected function mouseMove(event:MouseEvent):void
{
- navigators.x = Math.max(Math.min(mouseX - _startX + lateralMenu.width, lateralMenu.width), 0);
+
+ navigators.x = Math.max(Math.min(mouseX - _startX + lateralMenu.width, lateralMenu.width), 0);
+
}
protected function mouseUp(event:MouseEvent):void
@@ -186,17 +189,36 @@ limitations under the License.
_slideTimer.start();
}
-
+
+ protected function mouseMove1(event:MouseEvent):void
+ {
+ navigators.mouseEnabled = navigators.mouseChildren = false;
+ navigators.x = Math.max(Math.min(mouseX + _startX, lateralMenu.width), 0);
+ }
+
+ protected function mouseUp1(event:MouseEvent):void
+ {
+ stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp1);
+ stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove1);
+ navigators.mouseEnabled = navigators.mouseChildren = mouseX < lateralMenu.width / 2;
+ _slideTimer.repeatCount = Math.max(navigators.mouseEnabled ? Math.floor(STEPS * navigators.x / lateralMenu.width) : Math.floor(STEPS * (1 - navigators.x / lateralMenu.width)), 1);
+ _slideTimer.reset();
+ _slideTimer.start();
+
+
+
+ }
]]>
</fx:Script>
<fx:Declarations>
-
+
</fx:Declarations>
- <s:Group id="lateralMenu" width="225" y="0" height="100%">
+ <s:Group id="lateralMenu" width="225" y="0" height="100%">
+
<s:List id="componentsList" itemRenderer="renderers.MenuRenderer" width="225" height="100%"
change="changeHandler(event)" contentBackgroundColor="#000000">
<s:ArrayList>
@@ -232,7 +254,7 @@ limitations under the License.
</s:List>
</s:Group>
- <s:Group id="navigators" width="{FlexGlobals.topLevelApplication.width}" height="{FlexGlobals.topLevelApplication.height}">
+ <s:Group id="navigators" width="{FlexGlobals.topLevelApplication.width}" height="{FlexGlobals.topLevelApplication.height}" >
<s:ViewNavigator id="navigator" firstView="views.BlogView" width="100%" height="100%">
<s:navigationContent>
<s:Button icon="@Embed('assets/images/logo.png')" height="35" width="77" label="Menu" id="btn"/>
[02/22] git commit: [flex-examples] [refs/heads/develop] - code clean
up
Posted by bi...@apache.org.
code clean up
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/47e410b4
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/47e410b4
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/47e410b4
Branch: refs/heads/develop
Commit: 47e410b4542e9220d5cf7e9cfbe59bc5bb4b11e9
Parents: 7a933e2
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Tue Jan 7 16:33:23 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:24 2014 -0800
----------------------------------------------------------------------
tourdeflexmobile/src/TourDeFlexMobile.mxml | 31 +------------------------
1 file changed, 1 insertion(+), 30 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/47e410b4/tourdeflexmobile/src/TourDeFlexMobile.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml
index e49714c..9f7e9a3 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile.mxml
+++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml
@@ -78,7 +78,6 @@ limitations under the License.
protected function init(event:FlexEvent):void
{
btn.addEventListener(MouseEvent.CLICK, slideButtonHandler);
- //btn.addEventListener(UIButton.CLICKED, slideButtonHandler);
_slideTimer.addEventListener(TimerEvent.TIMER, doSlide);
_slideTimer.addEventListener(TimerEvent.TIMER_COMPLETE, slideComplete);
@@ -96,8 +95,6 @@ limitations under the License.
_slideTimer.repeatCount = Math.max(Math.floor(STEPS * (1 - navigators.x / lateralMenu.width)), 1);
_slideTimer.reset();
_slideTimer.start();
- //moveIn.play();
- //moveOut.play();
}
else
{
@@ -119,32 +116,10 @@ limitations under the License.
navigators.x = 0;
}
}
-
-
-
- /* protected function menuHandler(event:MouseEvent):void
- {
- if(isOpen == true)
- {
- moveOut.play();
- stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
- //navigators.mouseEnabled = navigators.mouseChildren = false;
- navigators.includeInLayout = false;
- isOpen = false;
- }
- else if(isOpen == false)
- {
- moveIn.play();
- stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
- //navigators.mouseEnabled = navigators.mouseChildren = true;
- isOpen = true;
- }
- }*/
+
protected function changeHandler(event:IndexChangeEvent):void
{
- //isOpen = false;
- //moveIn.play();
close();
stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
navigator.pushView(componentsList.selectedItem.view);
@@ -232,9 +207,6 @@ limitations under the License.
<s:Group id="lateralMenu" width="225" y="0" height="100%">
- <!--s:Graphic width="100%" height="100%" click="menuBackgroundHandler(event)">
- <s:BitmapImage width="100%" height="100%" scaleMode="zoom" source="@Embed('assets/images/bg.png')"/>
- </s:Graphic-->
<s:List id="componentsList" itemRenderer="renderers.MenuRenderer" width="225" height="100%"
change="changeHandler(event)" contentBackgroundColor="#000000">
@@ -260,7 +232,6 @@ limitations under the License.
<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}"/>
[10/22] git commit: [flex-examples] [refs/heads/develop] - updates
Posted by bi...@apache.org.
updates
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/015a6901
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/015a6901
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/015a6901
Branch: refs/heads/develop
Commit: 015a6901c16d5d004a0cafb900316acc8ba64279
Parents: 0bfb28e
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Tue Nov 4 12:50:29 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:37 2014 -0800
----------------------------------------------------------------------
.../src/AIRViews/AccelerometerView.mxml | 36 ++-
tourdeflexmobile/src/AIRViews/CameraView.mxml | 106 +++++++
.../src/AIRViews/GeolocationView.mxml | 118 ++++++++
tourdeflexmobile/src/AIRViews/SQLiteView.mxml | 49 +--
tourdeflexmobile/src/TourDeFlexMobile-app.xml | 59 ++--
tourdeflexmobile/src/TourDeFlexMobile.mxml | 300 +++++++++----------
6 files changed, 448 insertions(+), 220 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/015a6901/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml b/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml
index 50b8553..06c528e 100644
--- a/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml
+++ b/tourdeflexmobile/src/AIRViews/AccelerometerView.mxml
@@ -18,7 +18,10 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="Accelerometer" viewActivate="init()" viewDeactivate="deactivate(event)">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="Accelerometer"
+ viewActivate="init()"
+ viewDeactivate="deactivate(event)">
<fx:Script>
<![CDATA[
@@ -28,7 +31,6 @@ limitations under the License.
import flash.sensors.Accelerometer;
import spark.events.ViewNavigatorEvent;
- import spark.skins.mobile.TextAreaSkin;
private var ball:Sprite;
private var accelerometer:Accelerometer;
@@ -77,13 +79,13 @@ limitations under the License.
ball.x = RADIUS;
xSpeed = 0;
}
-
- else if (newX > stage.stageWidth - RADIUS)
+
+ else if (newX > this.width - RADIUS)
{
- ball.x = stage.stageWidth - RADIUS;
+ ball.x = this.width - RADIUS;
xSpeed = 0;
}
-
+
else
{
ball.x += xSpeed;
@@ -94,13 +96,13 @@ limitations under the License.
ball.y = RADIUS;
ySpeed = 0;
}
-
+
else if (newY > this.height - RADIUS)
{
ball.y = this.height - RADIUS;
ySpeed = 0;
}
-
+
else
{
ball.y += ySpeed;
@@ -120,9 +122,12 @@ limitations under the License.
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
@@ -134,15 +139,14 @@ limitations under the License.
<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')"/>
- <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"/>
-
- <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.
+ <s:TextArea includeIn="InfoState" selectable="false" 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:actionContent>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/015a6901/tourdeflexmobile/src/AIRViews/CameraView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/AIRViews/CameraView.mxml b/tourdeflexmobile/src/AIRViews/CameraView.mxml
new file mode 100644
index 0000000..a1e26f5
--- /dev/null
+++ b/tourdeflexmobile/src/AIRViews/CameraView.mxml
@@ -0,0 +1,106 @@
+<?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"
+ viewDeactivate="deactivate(event)"
+ viewActivate="init(event)">
+
+ <fx:Script>
+ <![CDATA[
+
+ import mx.core.UIComponent;
+
+ import spark.events.ViewNavigatorEvent;
+
+ private var camera:Camera;
+
+ private function init(event:ViewNavigatorEvent):void
+ {
+ if(Camera.isSupported)
+ {
+ camera = Camera.getCamera();
+ camera.addEventListener(ActivityEvent.ACTIVITY, activityHandler);
+ camera.setMode(640, 480, 25);
+ camera.setQuality(0, 100);
+ var video:Video = new Video(width,height)
+ video.attachCamera(camera);
+ var videoHolder:UIComponent = new UIComponent();
+ videoHolder.x = 0;
+ videoHolder.y = 0;
+ videoHolder.percentWidth = 100;
+ videoHolder.percentHeight = 100;
+ videoHolder.addChild(video);
+ videoDisplay.addElement(videoHolder);
+ }
+ }
+
+ private function activityHandler(event:ActivityEvent):void
+ {
+ trace("activityHandler: " + event);
+ }
+
+ protected function buttonHandler(event:MouseEvent):void
+ {
+ if(currentState == "DemoState")
+ {
+ currentState = "InfoState";
+ }
+ else if(currentState == "InfoState")
+ {
+ currentState = "DemoState";
+ }
+ }
+
+ private function deactivate(event:ViewNavigatorEvent):void
+ {
+ camera.removeEventListener(ActivityEvent.ACTIVITY, activityHandler);
+ }
+
+
+ ]]>
+ </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')"/>
+ <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')"/>
+ </fx:Declarations>
+ <s:Group width="100%" height="100%" id="videoDisplay"/>
+
+ <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:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/015a6901/tourdeflexmobile/src/AIRViews/GeolocationView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/AIRViews/GeolocationView.mxml b/tourdeflexmobile/src/AIRViews/GeolocationView.mxml
new file mode 100644
index 0000000..3b2ee2b
--- /dev/null
+++ b/tourdeflexmobile/src/AIRViews/GeolocationView.mxml
@@ -0,0 +1,118 @@
+<?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:ToggleSwitch includeIn="DemoState" horizontalCenter="0" y="20" id="geoToggle" enabled="false" change="geoLocate()"/>
+ <s:VGroup width="100%" height="100%" left="10" right="10" 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:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/015a6901/tourdeflexmobile/src/AIRViews/SQLiteView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/AIRViews/SQLiteView.mxml b/tourdeflexmobile/src/AIRViews/SQLiteView.mxml
index c2db60f..4ead4f5 100644
--- a/tourdeflexmobile/src/AIRViews/SQLiteView.mxml
+++ b/tourdeflexmobile/src/AIRViews/SQLiteView.mxml
@@ -18,7 +18,9 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="SQLite" viewActivate="init(event)">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="SQLite"
+ viewActivate="init(event)">
<fx:Script>
<![CDATA[
@@ -26,7 +28,6 @@ limitations under the License.
import mx.events.FlexEvent;
import spark.events.ViewNavigatorEvent;
- import spark.skins.mobile.TextAreaSkin;
public var conn:SQLConnection;
public var db:File;
@@ -41,7 +42,8 @@ limitations under the License.
conn.openAsync(db);
}
- private function loadEntries():void{
+ private function loadEntries():void
+ {
myStatement = new SQLStatement();
myStatement.sqlConnection = conn;
myStatement.addEventListener(SQLEvent.RESULT, openDatabaseResult);
@@ -50,7 +52,8 @@ limitations under the License.
myStatement.execute();
}
- private function openDatabaseHandler(event:SQLEvent):void{
+ private function openDatabaseHandler(event:SQLEvent):void
+ {
myStatement = new SQLStatement();
myStatement.sqlConnection = conn;
myStatement.addEventListener(SQLEvent.RESULT, loadDatabaseResult);
@@ -59,26 +62,30 @@ limitations under the License.
myStatement.execute();
}
- private function loadDatabaseResult(event:SQLEvent):void{
+ private function loadDatabaseResult(event:SQLEvent):void
+ {
loadEntries();
}
- private function openDatabaseResult(event:SQLEvent):void{
- var itemsArray:Array = new Array();
-
+ private function openDatabaseResult(event:SQLEvent):void
+ {
+ var itemsArray:Array = new Array();
var result:SQLResult = myStatement.getResult();
- if(result.data != null){
- for(var i:int = 0; i<result.data.length; i++){
+ if(result.data != null)
+ {
+ for(var i:int = 0; i<result.data.length; i++)
+ {
itemsArray.push({label:unescape(result.data[i].itemText)});
}
}
-
+
itemsCollection = new ArrayCollection(itemsArray);
itemsList.dataProvider = itemsCollection;
}
- private function modifyDatabaseResult(event:SQLEvent):void{
+ private function modifyDatabaseResult(event:SQLEvent):void
+ {
loadEntries();
}
@@ -100,9 +107,12 @@ limitations under the License.
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
@@ -116,17 +126,20 @@ limitations under the License.
</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>
- <s:TextInput id="textInput" includeIn="DemoState" enter="addItemHandler()" skinClass="spark.skins.mobile.TextInputSkin" y="10" left="5" right="60" height="40"/>
+ <s:TextInput id="textInput" includeIn="DemoState" enter="addItemHandler()" y="10" left="5" right="60" height="40"/>
<s:Button label="Add" y="10" includeIn="DemoState" width="50" height="40" right="5" click="addItemHandler()"/>
<s:List id="itemsList" includeIn="DemoState" width="100%" bottom="0" top="60"/>
- <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="A SQLConnection instance is used to manage the creation of and connection to local SQL database files (local databases).
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="A SQLConnection instance is used to manage the creation of and connection to local SQL database files (local databases).

 
The functionality of the SQLConnection class falls into several categories:

 
A local SQL database file is created or opened by calling the open() method or the SQLConnection instance to the SQLStatement's sqlConnection property.
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/015a6901/tourdeflexmobile/src/TourDeFlexMobile-app.xml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile-app.xml b/tourdeflexmobile/src/TourDeFlexMobile-app.xml
index e9667b6..42a1e10 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile-app.xml
+++ b/tourdeflexmobile/src/TourDeFlexMobile-app.xml
@@ -1,23 +1,5 @@
<?xml version="1.0" encoding="utf-8" standalone="no"?>
-<!--
-
-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.
-
--->
-<application xmlns="http://ns.adobe.com/air/application/3.9">
+<application xmlns="http://ns.adobe.com/air/application/13.0">
<!-- Adobe AIR Application Descriptor File Template.
@@ -154,25 +136,31 @@ limitations under the License.
<!-- 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>
+ <icon>
+ <image48x48>assets/icons/icon48.png</image48x48>
+ <image72x72>assets/icons/icon72.png</image72x72>
+ <image96x96>assets/icons/icon96.png</image96x96>
+ <image144x144>assets/icons/icon144.png</image144x144>
+ <image512x512>assets/icons/icon512.png</image512x512>
+ <image1024x1024>assets/icons/icon1024.png</image1024x1024>
+ <!--image16x16></image16x16>
<image29x29></image29x29>
<image32x32></image32x32>
<image36x36></image36x36>
- <image48x48></image48x48>
+ <image40x40></image40x40>
<image50x50></image50x50>
<image57x57></image57x57>
- <image58x58></image58x58>
- <image72x72></image72x72>
- <image96x96></image96x96>
+ <image58x58></image58x58>
+ <image76x76></image76x76>
+ <image80x80></image80x80>
<image100x100></image100x100>
<image114x114></image114x114>
- <image128x128></image128x128>
- <image144x144></image144x144>
- <image512x512></image512x512>
+ <image120x120></image120x120>
+ <image128x128></image128x128>
+ <image152x152></image152x152>
<image732x412></image732x412>
- <image1024x1024></image1024x1024>
- </icon> -->
+ -->
+ </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).
@@ -281,19 +269,20 @@ limitations under the License.
<manifest android:installLocation="auto">
<!--See the Adobe AIR documentation for more information about setting Google Android permissions-->
<!--Removing the permission android.permission.INTERNET will have the side effect
- of preventing you from debugging your application on your device-->
+ of preventing you from debugging your application on your device-->
<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-->
+ 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.CAMERA"/>
+ <uses-feature android:name="android.hardware.camera.autofocus"/>
<!--<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-->
+ together in order to use AIR's NetworkInfo APIs-->
<!--<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>-->
<!--<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>-->
</manifest>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/015a6901/tourdeflexmobile/src/TourDeFlexMobile.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml
index ab09404..21a8f0e 100644
--- a/tourdeflexmobile/src/TourDeFlexMobile.mxml
+++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml
@@ -20,13 +20,14 @@ limitations under the License.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
- applicationDPI="160"
- applicationComplete="init(event)">
-
- <fx:Style source="styles.css"/>
-
+ applicationDPI="160" frameRate="60"
+ applicationComplete="init(event)"
+ splashScreenImage="@Embed('assets/images/poweredby.png')"
+ splashScreenScaleMode="letterbox">
+ <fx:Style source="styles.css"/>
<fx:Script>
<![CDATA[
+
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
@@ -38,6 +39,8 @@ limitations under the License.
import spark.events.IndexChangeEvent;
import AIRViews.AccelerometerView;
+ import AIRViews.CameraView;
+ import AIRViews.GeolocationView;
import AIRViews.SQLiteView;
import LayoutViews.AccordionLayoutView;
@@ -48,11 +51,13 @@ limitations under the License.
import LayoutViews.TileLayoutView;
import LayoutViews.TimeMachineLayoutView;
import LayoutViews.VerticalLayoutView;
+ import LayoutViews.StackLayoutView;
import UIViews.ButtonBarView;
import UIViews.CalloutButtonView;
import UIViews.CheckboxView;
import UIViews.DateSpinnerView;
+ import UIViews.HscrubberView;
import UIViews.ListView;
import UIViews.MobileGridView;
import UIViews.RadiobuttonView;
@@ -62,203 +67,196 @@ limitations under the License.
import views.HttpServiceView;
- public static var SLIDE_INTERVAL:int = 40;
- public static var STEPS:int = 6;
-
- protected var _slideTimer:Timer = new Timer(SLIDE_INTERVAL, STEPS);
- public static const CLICKED:String = "slideOutClicked";
- protected var _buttonEnabled:Boolean = true;
- protected var _startX:Number;
+ private var isOpen:Boolean;
protected function init(event:FlexEvent):void
{
- stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
- btn.addEventListener(MouseEvent.CLICK, slideButtonHandler);
- _slideTimer.addEventListener(TimerEvent.TIMER, doSlide);
- _slideTimer.addEventListener(TimerEvent.TIMER_COMPLETE, slideComplete);
+ stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
+ lateralMenu.x = lateralMenu.width * -1;
}
- /*******************************************
- *used some code from Macomponents UISlideOutNavigation, replaced the actionscript elements with flex UI elements and was able to apply
- *the same drag to close behavior
- *********************************************/
-
- public function open(animated:Boolean = true):void
- {
- if (!navigators.mouseEnabled)
- return;
- navigators.mouseEnabled = navigators.mouseChildren = false;
- if (animated)
- {
- _slideTimer.repeatCount = Math.max(Math.floor(STEPS * (1 - navigators.x / lateralMenu.width)), 1);
- _slideTimer.reset();
- _slideTimer.start();
- }
- else
- {
- navigators.x = lateralMenu.width;
- !navigators.mouseEnabled;
- }
- stage.addEventListener(MouseEvent.CLICK, close);
- }
-
- public function close(animated:Boolean = true):void
- {
- navigators.mouseEnabled = navigators.mouseChildren = true;
- if (animated)
- {
- _slideTimer.repeatCount = Math.max(Math.floor(STEPS * navigators.x / lateralMenu.width), 1);
- _slideTimer.reset();
- _slideTimer.start();
- }
- else
- {
- navigators.x = 0;
- }
- }
-
protected function changeHandler(event:IndexChangeEvent):void
{
- close();
+ menuHandler();
navigator.pushView(componentsList.selectedItem.view);
}
-
-
- protected function slideButtonHandler(event:Event):void
- {
- dispatchEvent(new Event(CLICKED));
- navigators.mouseEnabled = navigators.mouseChildren = !navigators.mouseEnabled;
- if (_buttonEnabled)
- {
- _slideTimer.repeatCount = STEPS;
- _slideTimer.reset();
- _slideTimer.start();
- }
-
- }
-
protected function mouseDown(event:MouseEvent):void
{
- if (!navigators.mouseEnabled && mouseX > lateralMenu.width && mouseY > 45)
- {
- _startX = mouseX;
- stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
- stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
- }
- if (navigators.mouseEnabled && mouseX < 20)
+ // if (!navigator.mouseEnabled && mouseX < 210 && mouseY > 45 && mouseY < navigator.height - 50)
+ // {
+ // lateralMenu.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
+ // lateralMenu.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
+ // }
+ if (navigator.mouseEnabled && mouseX < 20 && mouseY > 45 && mouseY < navigator.height - 50)
{
- _startX = mouseX;
- stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpOpen);
- stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveOpen);
+ stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpIn);
+ stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseDownIn);
}
- }
+ }
- protected function doSlide(event:TimerEvent):void
+ /* protected function mouseMove(event:MouseEvent):void
{
- var slideTimer:Timer = Timer(event.currentTarget);
- var t:Number = slideTimer.currentCount/slideTimer.repeatCount;
- navigators.x = (navigators.mouseEnabled ? (1-t) : t) * lateralMenu.width;
- }
+ navigator.mouseEnabled = false;
+ var myRectangle:Rectangle = new Rectangle(-215, 42, 215, 0);
+ lateralMenu.startDrag(false, myRectangle );
+ trace(lateralMenu.x)
+ //lateralMenu.addEventListener(MouseEvent.CLICK,suppressClick,true,9999,true);
- protected function slideComplete(event:TimerEvent):void
- {
- removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
- navigators.mouseEnabled;
- if (!navigators.mouseEnabled)
- {
- addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
- }
- }
-
- protected function mouseMove(event:MouseEvent):void
- {
-
- navigators.x = Math.max(Math.min(mouseX - _startX + lateralMenu.width, lateralMenu.width), 0);
-
}
protected function mouseUp(event:MouseEvent):void
{
- stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp);
- stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
- navigators.mouseEnabled = navigators.mouseChildren = mouseX < lateralMenu.width / 2;
- _slideTimer.repeatCount = Math.max(navigators.mouseEnabled ? Math.floor(STEPS * navigators.x / lateralMenu.width) : Math.floor(STEPS * (1 - navigators.x / lateralMenu.width)), 1);
- _slideTimer.reset();
- _slideTimer.start();
-
+
+ if (lateralMenu.x < -65)
+ {
+ lateralMenu.stopDrag();
+ lateralMenu.removeEventListener(MouseEvent.MOUSE_UP, mouseUp);
+ lateralMenu.removeEventListener(MouseEvent.MOUSE_DOWN, mouseMove);
+ moveOut.play();
+ isOpen == false;
+ }
+ if (lateralMenu.x > -65)
+ {
+ lateralMenu.stopDrag();
+ moveIn.play();
+ isOpen == true;
}
+ lateralMenu.stopDrag();
+ } */
+
- protected function mouseMoveOpen(event:MouseEvent):void
+
+ protected function mouseDownIn(event:MouseEvent):void
{
- navigators.mouseEnabled = navigators.mouseChildren = false;
- navigators.x = Math.max(Math.min(mouseX + _startX, lateralMenu.width), 0);
+ //define area for lateralMenu to travel
+ var myRectangle:Rectangle = new Rectangle(-215, 42, 215, 0);
+ lateralMenu.startDrag(false, myRectangle );
+ obfuscationGroup.visible = true;
+ obfuscationLayer.alpha = (lateralMenu.x + 216) * .47 / 200
+ trace(obfuscationLayer.alpha);
}
- protected function mouseUpOpen(event:MouseEvent):void
+ protected function mouseUpIn(event:MouseEvent):void
{
- stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp1);
- stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove1);
- navigators.mouseEnabled = navigators.mouseChildren = mouseX < lateralMenu.width / 2;
- _slideTimer.repeatCount = Math.max(navigators.mouseEnabled ? Math.floor(STEPS * navigators.x / lateralMenu.width) : Math.floor(STEPS * (1 - navigators.x / lateralMenu.width)), 1);
- _slideTimer.reset();
- _slideTimer.start();
-
-
+ if (lateralMenu.x > -115)
+ {
+ lateralMenu.stopDrag();
+ stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpIn);
+ stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseDownIn);
+ moveIn.play();
+ isOpen == true;
+ currentState = "closed";
+ }
+ if (lateralMenu.x < -115)
+ {
+ lateralMenu.stopDrag();
+ moveOut.play();
+ isOpen == false;
+ obfuscationGroup.visible = false;
+ currentState = "open";
+ }
+ lateralMenu.stopDrag();
+ }
+
+ protected function menuHandler():void
+ {
+ if(lateralMenu.x == 0)
+ {
+ obfuscationGroup.visible = false;
+ parallelOut.play();
+ isOpen = false;
+ currentState = "open";
+ }
+ else if(lateralMenu.x == -215)
+ {
+ obfuscationGroup.visible = true;
+ parallelIn.play();
+ isOpen = true;
+ currentState = "closed";
+ }
}
+
]]>
</fx:Script>
-
+ <s:states>
+ <s:State name="open"/>
+ <s:State name="closed"/>
+ </s:states>
<fx:Declarations>
-
+ <s:Parallel id="parallelIn">
+ <s:Fade id="fadeIn" target="{obfuscationLayer}" alphaFrom="0" alphaTo=".5" duration="300"/>
+ <s:Move id="moveIn" duration="300" target="{lateralMenu}" xTo="0"/>
+ </s:Parallel>
+ <s:Parallel id="parallelOut">
+ <s:Fade id="fadeOut" target="{obfuscationLayer}" alphaFrom=".5" alphaTo="0" duration="300"/>
+ <s:Move id="moveOut" duration="300" target="{lateralMenu}" xTo="-215"/>
+ </s:Parallel>
+ <s:MultiDPIBitmapSource source640dpi="@Embed('assets/icons/640/icon.png')" id="iconOpen"
+ source480dpi="@Embed('assets/icons/480/icon.png')"
+ source320dpi="@Embed('assets/icons/320/icon.png')"
+ source240dpi="@Embed('assets/icons/240/icon.png')"
+ source160dpi="@Embed('assets/icons/160/icon.png')"/>
+ <s:MultiDPIBitmapSource source640dpi="@Embed('assets/icons/640/icon1.png')" id="iconClose"
+ source480dpi="@Embed('assets/icons/480/icon1.png')"
+ source320dpi="@Embed('assets/icons/320/icon1.png')"
+ source240dpi="@Embed('assets/icons/240/icon1.png')"
+ source160dpi="@Embed('assets/icons/160/icon1.png')"/>
</fx:Declarations>
-
-
-
- <s:Group id="lateralMenu" width="225" y="0" height="100%">
-
- <s:List id="componentsList" itemRenderer="renderers.MenuRenderer" width="225" height="100%"
- change="changeHandler(event)" contentBackgroundColor="#000000">
+ <s:ViewNavigator id="navigator" firstView="views.BlogView" width="100%" height="100%">
+ <s:navigationContent>
+ <s:Button icon.open="{iconOpen}" icon.closed="{iconClose}" id="btn" click="menuHandler()"/>
+ </s:navigationContent>
+ </s:ViewNavigator>
+ <s:Group width="100%" height="100%" click="menuHandler()" id="obfuscationGroup" y="43" visible="false">
+ <s:Rect id="obfuscationLayer" width="100%" height="100%" alpha="0">
+ <s:fill >
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+ </s:Group>
+ <s:Group id="lateralMenu" width="215" y="43" height="100%">
+ <s:RectangularDropShadow left="0" right="0" top="0" bottom="0" alpha=".4" distance="5" angle="90"
+ blurX="5" blurY="5" color="0x000000"/>
+ <s:List id="componentsList" itemRenderer="renderers.MenuRenderer" width="215" height="100%" styleName="RobotoEmbedded"
+ change="changeHandler(event)" contentBackgroundColor="#eeeeee" downColor="#e0e0e0" selectionColor="#33B5E5">
<s:ArrayList>
- <fx:Object label="UI Components" type="separator"/>
+ <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="HSlider" type="view" view="{HscrubberView}"/>
<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="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="LAYOUTS" type="separator"/>
+ <fx:Object label="Accordion Layout" type="view" view="{AccordionLayoutView}"/>
+ <fx:Object label="Carousel Layout" type="view" view="{CarouselLayoutView}"/>
+ <fx:Object label="CoverFlow Layout" type="view" view="{CoverFlowLayoutView}"/>
+ <fx:Object label="Horizontal Layout" type="view" view="{HorizontalLayoutView}"/>
+ <fx:Object label="Rolodex Layout" type="view" view="{RolodexLayoutView}"/>
+ <fx:Object label="Stack Layout" type="view" view="{StackLayoutView}"/>
+ <fx:Object label="Tile Layout" type="view" view="{TileLayoutView}"/>
+ <fx:Object label="TimeMachine Layout" type="view" view="{TimeMachineLayoutView}"/>
+ <fx:Object label="Vertical Layout" type="view" view="{VerticalLayoutView}"/>
- <fx:Object label="AIR APIs" type="separator"/>
- <fx:Object label="SQLite" type="view" view="{SQLiteView}"/>
+ <fx:Object label="AIR APIs" type="separator"/>
<fx:Object label="Accelerometer" type="view" view="{AccelerometerView}"/>
+ <!--fx:Object label="Camera" type="view" view="{CameraView}"/-->
+ <fx:Object label="Geolocation" type="view" view="{GeolocationView}"/>
+ <fx:Object label="SQLite" type="view" view="{SQLiteView}"/>
- <fx:Object label="Data Access" type="separator"/>
+ <fx:Object label="DATA ACCESS" type="separator"/>
<fx:Object label="HTTPService" type="view" view="{HttpServiceView}"/>
</s:ArrayList>
</s:List>
</s:Group>
- <s:Group id="navigators" width="{FlexGlobals.topLevelApplication.width}" height="{FlexGlobals.topLevelApplication.height}" >
- <s:ViewNavigator id="navigator" firstView="views.BlogView" width="100%" height="100%">
- <s:navigationContent>
- <s:Button icon="@Embed('assets/images/logo.png')" height="35" width="77" label="Menu" id="btn"/>
- </s:navigationContent>
- </s:ViewNavigator>
- </s:Group>
</s:Application>
[12/22] git commit: [flex-examples] [refs/heads/develop] - updates,
new images
Posted by bi...@apache.org.
updates, new images
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/1f0cce99
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/1f0cce99
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/1f0cce99
Branch: refs/heads/develop
Commit: 1f0cce9905c6d60d9d555852ea981941dd1be6b9
Parents: 015a690
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Tue Nov 4 12:58:33 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:39 2014 -0800
----------------------------------------------------------------------
.../src/LayoutViews/AccordionLayoutView.mxml | 96 ++--
.../src/LayoutViews/CarouselLayoutView.mxml | 101 +++-
.../src/LayoutViews/CoverFlowLayoutView.mxml | 113 +++--
.../src/LayoutViews/HorizontalLayoutView.mxml | 101 +++-
.../src/LayoutViews/RolodexLayoutView.mxml | 98 ++--
.../src/LayoutViews/StackLayoutView.mxml | 99 ++--
.../src/LayoutViews/TileLayoutView.mxml | 110 +++--
.../src/LayoutViews/TimeMachineLayoutView.mxml | 100 ++--
.../src/LayoutViews/VerticalLayoutView.mxml | 101 +++-
tourdeflexmobile/src/UIViews/ButtonBarView.mxml | 61 +--
.../src/UIViews/CalloutButtonView.mxml | 86 ++--
tourdeflexmobile/src/UIViews/CheckboxView.mxml | 52 ++-
.../src/UIViews/DateSpinnerView.mxml | 48 +-
tourdeflexmobile/src/UIViews/HscrubberView.mxml | 71 +++
tourdeflexmobile/src/UIViews/ListView.mxml | 44 +-
.../src/UIViews/MobileGridView.mxml | 122 ++---
.../src/UIViews/RadiobuttonView.mxml | 50 +-
.../src/UIViews/SpinnerListView.mxml | 143 +++---
tourdeflexmobile/src/UIViews/TextInputView.mxml | 76 ++-
.../src/UIViews/ToggleSwitchView.mxml | 54 ++-
.../src/assets/font/Roboto-Bold.ttf | Bin 0 -> 84924 bytes
.../src/assets/font/Roboto-BoldItalic.ttf | Bin 0 -> 88104 bytes
.../src/assets/font/Roboto-Italic.ttf | Bin 0 -> 87680 bytes
.../src/assets/font/Roboto-Regular.ttf | Bin 0 -> 84564 bytes
tourdeflexmobile/src/assets/icons/160/1.png | Bin 0 -> 12581 bytes
tourdeflexmobile/src/assets/icons/160/2.png | Bin 0 -> 11322 bytes
tourdeflexmobile/src/assets/icons/160/3.png | Bin 0 -> 12013 bytes
tourdeflexmobile/src/assets/icons/160/about.png | Bin 1333 -> 465 bytes
tourdeflexmobile/src/assets/icons/160/add.png | Bin 1090 -> 186 bytes
tourdeflexmobile/src/assets/icons/160/dock.png | Bin 1129 -> 252 bytes
tourdeflexmobile/src/assets/icons/160/icon.png | Bin 0 -> 1735 bytes
tourdeflexmobile/src/assets/icons/160/icon1.png | Bin 0 -> 1708 bytes
tourdeflexmobile/src/assets/icons/240/1.png | Bin 0 -> 20085 bytes
tourdeflexmobile/src/assets/icons/240/2.png | Bin 0 -> 16937 bytes
tourdeflexmobile/src/assets/icons/240/3.png | Bin 0 -> 18607 bytes
tourdeflexmobile/src/assets/icons/240/about.png | Bin 1629 -> 683 bytes
tourdeflexmobile/src/assets/icons/240/add.png | Bin 1142 -> 278 bytes
tourdeflexmobile/src/assets/icons/240/dock.png | Bin 1211 -> 289 bytes
tourdeflexmobile/src/assets/icons/240/icon.png | Bin 0 -> 2898 bytes
tourdeflexmobile/src/assets/icons/240/icon1.png | Bin 0 -> 2901 bytes
tourdeflexmobile/src/assets/icons/320/1.png | Bin 0 -> 27846 bytes
tourdeflexmobile/src/assets/icons/320/2.png | Bin 0 -> 22973 bytes
tourdeflexmobile/src/assets/icons/320/3.png | Bin 0 -> 28158 bytes
tourdeflexmobile/src/assets/icons/320/about.png | Bin 2040 -> 860 bytes
tourdeflexmobile/src/assets/icons/320/add.png | Bin 1221 -> 250 bytes
tourdeflexmobile/src/assets/icons/320/dock.png | Bin 1337 -> 350 bytes
tourdeflexmobile/src/assets/icons/320/icon.png | Bin 0 -> 4106 bytes
tourdeflexmobile/src/assets/icons/320/icon1.png | Bin 0 -> 4125 bytes
tourdeflexmobile/src/assets/icons/480/1.png | Bin 0 -> 56962 bytes
tourdeflexmobile/src/assets/icons/480/2.png | Bin 0 -> 51977 bytes
tourdeflexmobile/src/assets/icons/480/3.png | Bin 0 -> 58282 bytes
tourdeflexmobile/src/assets/icons/480/about.png | Bin 0 -> 1409 bytes
tourdeflexmobile/src/assets/icons/480/add.png | Bin 0 -> 305 bytes
tourdeflexmobile/src/assets/icons/480/dock.png | Bin 0 -> 432 bytes
tourdeflexmobile/src/assets/icons/480/icon.png | Bin 0 -> 7092 bytes
tourdeflexmobile/src/assets/icons/480/icon1.png | Bin 0 -> 7141 bytes
tourdeflexmobile/src/assets/icons/640/icon.png | Bin 0 -> 10109 bytes
tourdeflexmobile/src/assets/icons/640/icon1.png | Bin 0 -> 10235 bytes
tourdeflexmobile/src/assets/icons/icon1024.png | Bin 0 -> 481460 bytes
tourdeflexmobile/src/assets/icons/icon144.png | Bin 0 -> 28472 bytes
tourdeflexmobile/src/assets/icons/icon192.png | Bin 0 -> 42041 bytes
tourdeflexmobile/src/assets/icons/icon48.png | Bin 0 -> 8203 bytes
tourdeflexmobile/src/assets/icons/icon512.png | Bin 0 -> 137395 bytes
tourdeflexmobile/src/assets/icons/icon72.png | Bin 0 -> 12525 bytes
tourdeflexmobile/src/assets/icons/icon96.png | Bin 0 -> 17331 bytes
tourdeflexmobile/src/assets/images/bg.png | Bin 2848 -> 0 bytes
.../src/assets/images/logo_01_fullcolor.png | Bin 0 -> 69140 bytes
.../src/assets/images/logo_01_fullcolor_wb.png | Bin 0 -> 134721 bytes
.../src/assets/images/poweredby.png | Bin 0 -> 165477 bytes
.../src/renderers/AccordionElement.mxml | 14 +
.../src/renderers/MenuRenderer.mxml | 34 +-
tourdeflexmobile/src/styles.css | 460 +++++++++++++++++--
tourdeflexmobile/src/views/BlogView.mxml | 26 +-
tourdeflexmobile/src/views/HttpServiceView.mxml | 42 +-
74 files changed, 1648 insertions(+), 654 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml
index 35f7e78..87f344f 100644
--- a/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml
@@ -18,40 +18,84 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="AccordionLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="AccordionLayout"
+ xmlns:ns="http://flex.apache.org/experimental/ns" xmlns:renderers="renderers.*">
<fx:Script>
<![CDATA[
import spark.primitives.BitmapImage;
+ import spark.skins.spark.DefaultComplexItemRenderer;
+
protected function buttonHandler(event:MouseEvent):void
{
- var random:Number = Math.ceil(Math.random()*3);
-
- var bitmapImage:BitmapImage = new BitmapImage();
- bitmapImage.width = 150;
- bitmapImage.height = bitmapImage.width;
- bitmapImage.source = "assets/images/box"+random+".png";
- group.addElement(bitmapImage);
-
- group.verticalScrollPosition = group.contentHeight;
+ 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 source160dpi="@Embed('assets/icons/160/1.png')"
+ source240dpi="@Embed('assets/icons/240/1.png')"
+ source320dpi="@Embed('assets/icons/320/1.png')"
+ source480dpi="@Embed('assets/icons/480/1.png" id="box1"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')"
+ source240dpi="@Embed('assets/icons/240/2.png')"
+ source320dpi="@Embed('assets/icons/320/2.png')"
+ source480dpi="@Embed('assets/icons/480/2.png" id="box2"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')"
+ source240dpi="@Embed('assets/icons/240/3.png')"
+ source320dpi="@Embed('assets/icons/320/3.png')"
+ source480dpi="@Embed('assets/icons/480/3.png" id="box3"/>
+ <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: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="200" height="200" horizontalCenter="0" verticalCenter="0">
- <s:Group id="group">
- <s:layout>
- <ns:AccordionLayout useVirtualLayout="true" />
- </s:layout>
- </s:Group>
- </s:Scroller>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+
+ <s:List id="list" includeIn="DemoState" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" pageScrollingEnabled="true">
+ <s:layout>
+ <ns:AccordionLayout
+ useScrollBarForNavigation="true"
+ scrollBarDirection="horizontal"
+ duration="500"
+ direction="horizontal"/>
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayList>
+ <renderers:AccordionElement/>
+ <renderers:AccordionElement/>
+ <renderers:AccordionElement/>
+ <renderers:AccordionElement/>
+ <renderers:AccordionElement/>
+ <renderers:AccordionElement/>
+ <renderers:AccordionElement/>
+ <renderers:AccordionElement/>
+ <renderers:AccordionElement/>
+ <renderers:AccordionElement/>
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="An AccordionLayout class arranges the layout elements in a vertical or horizontal sequence, with one of them at a time fully visible.
+ 
 
The position of the elements is determined by arranging them in a sequence, top to bottom or left to right depending on the value or duration.
+ 
 
If the target of the layout implements ISelectable list, a ButtonBarBase can be set using the buttonBar property and the layout will connect the target and ButtonBarBase together so that the ButtonBarBase can be used to navigate through the elements.
+ "/>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml
index d87f7e4..46c0ab8 100644
--- a/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml
@@ -18,40 +18,91 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="CarouselLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+ xmlns:s="library://ns.adobe.com/flex/spark" title="CarouselLayout" xmlns:ns="http://flex.apache.org/experimental/ns" xmlns:renderers="renderers.*">
<fx:Script>
<![CDATA[
import spark.primitives.BitmapImage;
+ import spark.skins.spark.DefaultComplexItemRenderer;
+
+
protected function buttonHandler(event:MouseEvent):void
{
- var random:Number = Math.ceil(Math.random()*3);
-
- var bitmapImage:BitmapImage = new BitmapImage();
- bitmapImage.width = Math.ceil(Math.random()*150);
- bitmapImage.height = bitmapImage.width;
- bitmapImage.source = "assets/images/box"+random+".png";
- group.addElement(bitmapImage);
-
- group.verticalScrollPosition = group.contentHeight;
+ 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 source160dpi="@Embed('assets/icons/160/1.png')"
+ source240dpi="@Embed('assets/icons/240/1.png')"
+ source320dpi="@Embed('assets/icons/320/1.png')"
+ source480dpi="@Embed('assets/icons/480/1.png" id="box1"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')"
+ source240dpi="@Embed('assets/icons/240/2.png')"
+ source320dpi="@Embed('assets/icons/320/2.png')"
+ source480dpi="@Embed('assets/icons/480/2.png" id="box2"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')"
+ source240dpi="@Embed('assets/icons/240/3.png')"
+ source320dpi="@Embed('assets/icons/320/3.png')"
+ source480dpi="@Embed('assets/icons/480/3.png" id="box3"/>
+ <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:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+ <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
+ pageScrollingEnabled="true" includeIn="DemoState">
+ <s:layout>
+ <ns:CarouselLayout useScrollBarForNavigation="true"
+ scrollBarDirection="horizontal"
+ angle="40"
+ depthColor="1"
+ depthColorAlpha="0.5"
+ fieldOfView="90"
+ focalLength="600"
+ duration="250"
+ radiusY="100"
+ radiusZ="2000"
+ radiusX="570" />
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayList>
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text=" CarouselLayout class arranges the layout elements in a sequence along an arc, with one of them at a time selected.
+
+ 
 
The position of the elements is determined by the radii radiusX, radiusY and radiusZ. These can be properties can be set the negative values to produce a ring of elements surrounding the view point.
+
+ 
 
The rotation of the elements is determined by the rotationX and rotationY properties."/>
- <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:Group id="group">
- <s:layout>
- <ns:CarouselLayout verticalAlign="middle" useVirtualLayout="true" />
- </s:layout>
- </s:Group>
- </s:Scroller>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml
index 116831d..f24fc3c 100644
--- a/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml
@@ -18,40 +18,101 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="CoverFlowLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="CoverFlowLayout"
+ xmlns:ns="http://flex.apache.org/experimental/ns">
<fx:Script>
<![CDATA[
import spark.primitives.BitmapImage;
+
protected function buttonHandler(event:MouseEvent):void
{
- var random:Number = Math.ceil(Math.random()*3);
-
- var bitmapImage:BitmapImage = new BitmapImage();
- bitmapImage.width = Math.ceil(Math.random()*150);
- bitmapImage.height = bitmapImage.width;
- bitmapImage.source = "assets/images/box"+random+".png";
- group.addElement(bitmapImage);
-
- group.verticalScrollPosition = group.contentHeight;
+ 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 source160dpi="@Embed('assets/icons/160/1.png')"
+ source240dpi="@Embed('assets/icons/240/1.png')"
+ source320dpi="@Embed('assets/icons/320/1.png')"
+ source480dpi="@Embed('assets/icons/480/1.png" id="box1"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')"
+ source240dpi="@Embed('assets/icons/240/2.png')"
+ source320dpi="@Embed('assets/icons/320/2.png')"
+ source480dpi="@Embed('assets/icons/480/2.png" id="box2"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')"
+ source240dpi="@Embed('assets/icons/240/3.png')"
+ source320dpi="@Embed('assets/icons/320/3.png')"
+ source480dpi="@Embed('assets/icons/480/3.png" id="box3"/>
+ <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: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:Group id="group">
- <s:layout>
- <ns:CoverflowLayout verticalAlign="middle" duration="500" useVirtualLayout="true" />
- </s:layout>
- </s:Group>
- </s:Scroller>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+ <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
+ pageScrollingEnabled="true" includeIn="DemoState">
+ <s:layout>
+ <ns:CoverflowLayout verticalAlign="middle"
+ duration="200"
+ id="coverFlowLayoutID"
+ useScrollBarForNavigation="true"
+ scrollBarDirection="horizontal"
+ selectedHorizontalDisplacement="100"
+ horizontalDisplacement="100"
+ selectedVerticalDisplacement="0"
+ verticalDisplacement="0"
+ horizontalScrollPosition="320"
+ fieldOfView="40"
+ focalLength="660"
+ maximumZ="50"/>
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayList>
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="A CoverflowLayout class arranges the layout elements in a linear along with unselected items having a different z and rotation.
+
+ 
 
The horizontal position of the elements is determined by the combined result of horizontalAlign, horizontalDisplacement, horizontalAlignOffset or horizontalAlignOffsetPercent, elementHorizontalAlign and selectedHorizontalDisplacement.
+
+ 
 
The horizontal position of the elements is determined by the combined result of verticalAlign, verticalDisplacement, verticalAlignOffset or verticalAlignOffsetPercent, elementVerticalAlign and selectedVerticalDisplacement.
+
+ 
 
The z position of unselected elements is determined by the maximumZ property.
+
+ 
 
The rotation of the elements is determined by the rotationX, rotationY and rotationZ properties.
+
+ 
 
The color of unselected elements is determined by the depthColor and depthColorAlpha properties.
+
+ 
 
If depthColor has a value of -1, no color transform is applied.
+
+ 
 
The number elements or elements rendered is determined by the numUnselectedElements property. If numUnselectedElements has a value of -1 and useVirtualLayout has a value of true, only the elements that fit within the bound of the target are rendered, If numUnselectedElements has a value of -1 and useVirtualLayout has a value of false, all elements are rendered."/>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml
index 0caf89d..d7c1b2f 100644
--- a/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml
@@ -23,35 +23,86 @@ limitations under the License.
<fx:Script>
<![CDATA[
import spark.primitives.BitmapImage;
+ import spark.skins.spark.DefaultComplexItemRenderer;
+
protected function buttonHandler(event:MouseEvent):void
{
- var random:Number = Math.ceil(Math.random()*3);
-
- var bitmapImage:BitmapImage = new BitmapImage();
- bitmapImage.width = Math.ceil(Math.random()*150);
- bitmapImage.height = bitmapImage.width;
- bitmapImage.source = "assets/images/box"+random+".png";
- group.addElement(bitmapImage);
-
- group.horizontalScrollPosition = group.contentWidth;
+ 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 source160dpi="@Embed('assets/icons/160/1.png')"
+ source240dpi="@Embed('assets/icons/240/1.png')"
+ source320dpi="@Embed('assets/icons/320/1.png')"
+ source480dpi="@Embed('assets/icons/480/1.png" id="box1"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')"
+ source240dpi="@Embed('assets/icons/240/2.png')"
+ source320dpi="@Embed('assets/icons/320/2.png')"
+ source480dpi="@Embed('assets/icons/480/2.png" id="box2"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')"
+ source240dpi="@Embed('assets/icons/240/3.png')"
+ source320dpi="@Embed('assets/icons/320/3.png')"
+ source480dpi="@Embed('assets/icons/480/3.png" id="box3"/>
+ <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: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:Group id="group">
- <s:layout>
- <s:HorizontalLayout verticalAlign="middle" useVirtualLayout="true" />
- </s:layout>
- </s:Group>
- </s:Scroller>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+ <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" includeIn="DemoState" verticalScrollPolicy="off">
+ <s:layout>
+ <s:HorizontalLayout verticalAlign="middle" useVirtualLayout="true" />
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayList>
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="The HorizontalLayout class arranges the layout elements in a horizontal sequence, left to right, with optional gaps between the elements and optional padding around the elements.
+ 
 
The horizontal position of the elements is determined by arranging them in a horizontal sequence, left to right, taking into account the padding before the first element and the gaps between the elements.
+ 
 
The vertical position of the elements is determined by the layout's verticalAlign property.
+ 
 
During the execution of the measure() method, the default size of the container is calculated by accumulating the preferred sizes of the elements, including gaps and padding. When the requestedColumnCount property is set to a value other than -1, only the space for that many elements is measured, starting from the first element.
+ 
 
During the execution of the updateDisplayList() method, the width of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum width and maximum width are always respected):
+ 
 
- If variableColumnWidth is false, then set the element's width to the value of the columnWidth property.
+ 
 
- If the element's percentWidth is set, then calculate the element's width by distributing the available container width between all elements with percentWidth setting. The available container width is equal to the container width minus the gaps, the padding and the space occupied by the rest of the elements. The element's precentWidth property is ignored when the layout is virtualized.
+ 
 
- Set the element's width to its preferred width.
+ 
 
The height of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum height and maximum height are always respected):
+ 
 
- If the verticalAlign property is 'justify', then set the element's height to the container height.
+ 
 
- If the verticalAlign property is 'contentJustify', then set the element's height to the maximum between the container's height and all elements' preferred height.
+ 
 
- If the element's percentHeight property is set, then calculate the element's height as a percentage of the container's height.
+ 
 
- Set the element's height to its preferred height. "/>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml
index 8934ec6..c6f675e 100644
--- a/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml
@@ -18,40 +18,86 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="RolodexLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="RolodexLayout"
+ xmlns:ns="http://flex.apache.org/experimental/ns">
<fx:Script>
<![CDATA[
import spark.primitives.BitmapImage;
+
protected function buttonHandler(event:MouseEvent):void
{
- var random:Number = Math.ceil(Math.random()*3);
-
- var bitmapImage:BitmapImage = new BitmapImage();
- bitmapImage.width = Math.ceil(Math.random()*150);
- bitmapImage.height = bitmapImage.width;
- bitmapImage.source = "assets/images/box"+random+".png";
- group.addElement(bitmapImage);
-
- group.verticalScrollPosition = group.contentHeight;
+ 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 source160dpi="@Embed('assets/icons/160/1.png')"
+ source240dpi="@Embed('assets/icons/240/1.png')"
+ source320dpi="@Embed('assets/icons/320/1.png')"
+ source480dpi="@Embed('assets/icons/480/1.png" id="box1"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')"
+ source240dpi="@Embed('assets/icons/240/2.png')"
+ source320dpi="@Embed('assets/icons/320/2.png')"
+ source480dpi="@Embed('assets/icons/480/2.png" id="box2"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')"
+ source240dpi="@Embed('assets/icons/240/3.png')"
+ source320dpi="@Embed('assets/icons/320/3.png')"
+ source480dpi="@Embed('assets/icons/480/3.png" id="box3"/>
+ <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: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:Group id="group">
- <s:layout>
- <ns:RolodexLayout horizontalAlign="center" useVirtualLayout="true" />
- </s:layout>
- </s:Group>
- </s:Scroller>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+ <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
+ pageScrollingEnabled="true" includeIn="DemoState">
+ <s:layout>
+ <ns:RolodexLayout useScrollBarForNavigation="true"
+ scrollBarDirection="vertical"
+ duration="200"
+ fieldOfView="30"
+ focalLength="870"
+ horizontalDisplacement="0"
+ verticalDisplacement="180"
+ maximumZ="2000"
+ rotationAnchor="top"/>
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayList>
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="The RolodexLayout class arranges the layout elements in a depth sequence, front to back, with optional depths between the elements and optional aligment of the sequence of elements.
+ 
 
When moving between elements the first element is rotated by 270 degrees, with the transform point anchored on the side of the element specified with rotationAnchor to transition the element in and out of view.
+ 
 
The vertical position of the elements is determined by a combination of the verticalAlign, verticalOffset, verticalDisplacement and the number of indices the element is from the selectedIndex property. First the element is aligned using the verticalAlign property and then the verticalOffset is applied. The value of verticalDisplacement is then multiplied of the number of elements the element is from the selected element.
+ 
 
The horizontal position of the elements is determined by a combination of the horizontalAlign, horizontalOffset, horizontalDisplacement and the number of indices the element is from the selectedIndex property. First the element is aligned using the horizontalAlign property and then the determined is applied. The value of horizontalDisplacement is then multiplied of the number of elements the element is from the selected element."/>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
index 3e556ac..f3a4ee0 100644
--- a/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
@@ -18,40 +18,87 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="StackLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="StackLayout"
+ xmlns:ns="http://flex.apache.org/experimental/ns">
<fx:Script>
<![CDATA[
import spark.primitives.BitmapImage;
+
protected function buttonHandler(event:MouseEvent):void
{
- var random:Number = Math.ceil(Math.random()*3);
-
- var bitmapImage:BitmapImage = new BitmapImage();
- bitmapImage.width = Math.ceil(Math.random()*150);
- bitmapImage.height = bitmapImage.width;
- bitmapImage.source = "assets/images/box"+random+".png";
- group.addElement(bitmapImage);
-
- group.verticalScrollPosition = group.contentHeight;
+ 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 source160dpi="@Embed('assets/icons/160/1.png')"
+ source240dpi="@Embed('assets/icons/240/1.png')"
+ source320dpi="@Embed('assets/icons/320/1.png')"
+ source480dpi="@Embed('assets/icons/480/1.png" id="box1"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')"
+ source240dpi="@Embed('assets/icons/240/2.png')"
+ source320dpi="@Embed('assets/icons/320/2.png')"
+ source480dpi="@Embed('assets/icons/480/2.png" id="box2"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')"
+ source240dpi="@Embed('assets/icons/240/3.png')"
+ source320dpi="@Embed('assets/icons/320/3.png')"
+ source480dpi="@Embed('assets/icons/480/3.png" id="box3"/>
+ <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: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:Group id="group">
- <s:layout>
- <ns:StackLayout verticalAlign="middle" useVirtualLayout="true" />
- </s:layout>
- </s:Group>
- </s:Scroller>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+ <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
+ pageScrollingEnabled="true" includeIn="DemoState">
+ <s:layout>
+ <ns:StackLayout horizontalAlign="justify" verticalAlign="justify" scrollBarDirection="horizontal"/>
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayList>
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="An StackLayout class shows a single element at a time..
+ 
 
The horizontal position of the shown element is determined by the layout's horizontalAlign property.
+ 
 
The vertical position of the shown element is determined by the layout's verticalAlign property.
+ 
 
The width of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum width and maximum width are always respected):
+ 
 
- If horizontalAlign is 'justify', then set the element's width to the container width.
+ 
 
- If horizontalAlign is 'contentJustify', then set the element's width to the maximum between the container's width and all elements' preferred width.
+ 
 
- If the element's percentWidth is set, then calculate the element's width as a percentage of the container's width.
+ 
 
- Set the element's width to its preferred width.
+ 
 
The height of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum height and maximum height are always respected):
+ 
 
- If the verticalAlign property is 'justify', then set the element's height to the container height.
+ 
 
- If the verticalAlign property is 'contentJustify', then set the element's height to the maximum between the container's height and all elements' preferred height
+ 
 
- If the element's percentHeight property is set, then calculate the element's height as a percentage of the container's height.
+ 
 
- Set the element's height to its preferred height."/>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml
index 059817f..6dc48eb 100644
--- a/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml
@@ -23,38 +23,92 @@ limitations under the License.
<fx:Script>
<![CDATA[
import spark.primitives.BitmapImage;
+ import spark.skins.spark.DefaultComplexItemRenderer;
+
protected function buttonHandler(event:MouseEvent):void
{
- var random:Number = Math.ceil(Math.random()*3);
-
- var miniGroup:Group = new Group();
- group.addElement(miniGroup);
-
- var bitmapImage:BitmapImage = new BitmapImage();
- bitmapImage.width = Math.ceil(Math.random()*100);
- bitmapImage.height = bitmapImage.width;
- bitmapImage.source = "assets/images/box"+random+".png";
- miniGroup.addElement(bitmapImage);
-
- //group.verticalScrollPosition = group.contentHeight;
+ 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 source160dpi="@Embed('assets/icons/160/1.png')"
+ source240dpi="@Embed('assets/icons/240/1.png')"
+ source320dpi="@Embed('assets/icons/320/1.png')"
+ source480dpi="@Embed('assets/icons/480/1.png" id="box1"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')"
+ source240dpi="@Embed('assets/icons/240/2.png')"
+ source320dpi="@Embed('assets/icons/320/2.png')"
+ source480dpi="@Embed('assets/icons/480/2.png" id="box2"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')"
+ source240dpi="@Embed('assets/icons/240/3.png')"
+ source320dpi="@Embed('assets/icons/320/3.png')"
+ source480dpi="@Embed('assets/icons/480/3.png" id="box3"/>
+ <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: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:Group id="group">
- <s:layout>
- <s:TileLayout orientation="rows" columnWidth="100" rowHeight="100" useVirtualLayout="true" />
- </s:layout>
- </s:Group>
- </s:Scroller>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+ <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" includeIn="DemoState">
+ <s:layout>
+ <s:TileLayout columnAlign="justifyUsingWidth"
+ columnWidth="NaN"
+ verticalAlign="middle"
+ horizontalAlign="center"
+ horizontalGap="6"
+ orientation="rows"
+ rowAlign="top"
+ verticalGap="6"/>
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayList>
+ <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/>
+ <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/>
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="The TileLayout class arranges layout elements in columns and rows of equally-sized cells. The TileLayout class uses a number of properties that control orientation, count, size, gap and justification of the columns and the rows as well as element alignment within the cells.
+ 
 
Per-element supported constraints are percentWidth and percentHeight. Element's minimum and maximum sizes are always be respected and where possible, an element's size is limited to less then or equal of the cell size.
+ 
 
When not explicitly set, the columnWidth property is calculated as the maximum preferred bounds width of all elements and the columnHeight property is calculated as the maximum preferred bounds height of all elements.
+ 
 
When not explicitly set, the columnCount and rowCount properties are calculated from any explicit width and height settings for the layout target, and columnWidth and columnHeight. In case none is specified, the columnCount and rowCount values are picked so that the resulting pixel area is as square as possible
+ 
 
The measured size is calculated from the columnCount, rowCount, columnWidth, rowHeight properties and the gap sizes.
+ 
 
The default measured size, when no properties were explicitly set, is as square as possible area and is large enough to fit all elements.
+ 
 
In other cases the measured size may not be big enough to fit all elements. For example, when both columnCount and rowCount are explicitly set to values such that columnCount * rowCount less than element count.
+ 
 
The minimum measured size is calculated the same way as the measured size but it's guaranteed to encompass enough rows and columns along the minor axis to fit all elements.
+ "/>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml
index 5a4bc42..d3f644c 100644
--- a/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml
@@ -18,40 +18,88 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="TimeMachineLayout" xmlns:ns="http://flex.apache.org/experimental/ns">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="TimeMachineLayout"
+ xmlns:ns="http://flex.apache.org/experimental/ns">
<fx:Script>
<![CDATA[
import spark.primitives.BitmapImage;
+
protected function buttonHandler(event:MouseEvent):void
{
- var random:Number = Math.ceil(Math.random()*3);
-
- var bitmapImage:BitmapImage = new BitmapImage();
- bitmapImage.width = Math.ceil(Math.random()*150);
- bitmapImage.height = bitmapImage.width;
- bitmapImage.source = "assets/images/box"+random+".png";
- group.addElement(bitmapImage);
-
- group.verticalScrollPosition = group.contentHeight;
+ 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 source160dpi="@Embed('assets/icons/160/1.png')"
+ source240dpi="@Embed('assets/icons/240/1.png')"
+ source320dpi="@Embed('assets/icons/320/1.png')"
+ source480dpi="@Embed('assets/icons/480/1.png" id="box1"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')"
+ source240dpi="@Embed('assets/icons/240/2.png')"
+ source320dpi="@Embed('assets/icons/320/2.png')"
+ source480dpi="@Embed('assets/icons/480/2.png" id="box2"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')"
+ source240dpi="@Embed('assets/icons/240/3.png')"
+ source320dpi="@Embed('assets/icons/320/3.png')"
+ source480dpi="@Embed('assets/icons/480/3.png" id="box3"/>
+ <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: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:Group id="group">
- <s:layout>
- <ns:TimeMachineLayout verticalAlign="middle" useVirtualLayout="true" />
- </s:layout>
- </s:Group>
- </s:Scroller>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+ <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
+ pageScrollingEnabled="true" includeIn="DemoState">
+ <s:layout>
+ <ns:TimeMachineLayout useScrollBarForNavigation="true"
+ scrollBarDirection="vertical"
+ duration="200"
+ fieldOfView="30"
+ focalLength="870"
+ horizontalDisplacement="0"
+ verticalDisplacement="0"
+ maximumZ="3000"/>
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayList>
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="The TimeMachineLayout class arranges the layout elements in a depth sequence, front to back, with optional depths between the elements and optional aligment the sequence of elements.
+ 
 
The vertical position of the elements is determined by a combination of the verticalAlign, verticalOffset, verticalDisplacement and the number of indices the element is from the selectedIndex property. First the element is aligned using the verticalAlign property and then the verticalOffset is applied. The value of verticalDisplacement is then multiplied of the number of elements the element is from the selected element.
+ 
 
The horizontal position of the elements is determined by a combination of the horizontalAlign, horizontalOffset, horizontalDisplacement and the number of indices the element is from the selectedIndex property. First the element is aligned using the horizontalAlign property and then the determined is applied. The value of horizontalDisplacement is then multiplied of the number of elements the element is from the selected element.
+ "/>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml
index 2d2d81b..3df28e8 100644
--- a/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml
@@ -23,35 +23,86 @@ limitations under the License.
<fx:Script>
<![CDATA[
import spark.primitives.BitmapImage;
+ import spark.skins.spark.DefaultComplexItemRenderer;
+
protected function buttonHandler(event:MouseEvent):void
{
- var random:Number = Math.ceil(Math.random()*3);
-
- var bitmapImage:BitmapImage = new BitmapImage();
- bitmapImage.width = Math.ceil(Math.random()*150);
- bitmapImage.height = bitmapImage.width;
- bitmapImage.source = "assets/images/box"+random+".png";
- group.addElement(bitmapImage);
-
- group.verticalScrollPosition = group.contentHeight;
+ 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 source160dpi="@Embed('assets/icons/160/1.png')"
+ source240dpi="@Embed('assets/icons/240/1.png')"
+ source320dpi="@Embed('assets/icons/320/1.png')"
+ source480dpi="@Embed('assets/icons/480/1.png" id="box1"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')"
+ source240dpi="@Embed('assets/icons/240/2.png')"
+ source320dpi="@Embed('assets/icons/320/2.png')"
+ source480dpi="@Embed('assets/icons/480/2.png" id="box2"/>
+ <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')"
+ source240dpi="@Embed('assets/icons/240/3.png')"
+ source320dpi="@Embed('assets/icons/320/3.png')"
+ source480dpi="@Embed('assets/icons/480/3.png" id="box3"/>
+ <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: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:Group id="group">
- <s:layout>
- <s:VerticalLayout horizontalAlign="center" useVirtualLayout="true" />
- </s:layout>
- </s:Group>
- </s:Scroller>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+ <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" includeIn="DemoState">
+ <s:layout>
+ <s:VerticalLayout useVirtualLayout="true" horizontalAlign="center" />
+ </s:layout>
+ <s:dataProvider>
+ <s:ArrayList>
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ <s:BitmapImage source="{box1}" />
+ <s:BitmapImage source="{box2}" />
+ <s:BitmapImage source="{box3}" />
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="VerticalLayout class arranges the layout elements in a vertical sequence, top to bottom, with optional gaps between the elements and optional padding around the sequence of elements.
+ 
 
The vertical position of the elements is determined by arranging them in a vertical sequence, top to bottom, taking into account the padding before the first element and the gaps between the elements.
+ 
 
The horizontal position of the elements is determined by the layout's horizontalAlign property.
+ 
 
During the execution of the measure() method, the default size of the container is calculated by accumulating the preferred sizes of the elements, including gaps and padding. When requestedRowCount is set, only the space for that many elements is measured, starting from the first element.
+ 
 
During the execution of the updateDisplayList() method, the height of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum height and maximum height are always respected):
+ 
 
- If variableRowHeight is false, then set the element's height to the value of the rowHeight property.
+ 
 
- If the element's percentHeight is set, then calculate the element's height by distributing the available container height between all elements with a percentHeight setting. The available container height is equal to the container height minus the gaps, the padding and the space occupied by the rest of the elements. The element's precentHeight property is ignored when the layout is virtualized.
+ 
 
- Set the element's height to its preferred height.
+ 
 
The width of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum width and maximum width are always respected):
+ 
 
- If horizontalAlign is 'justify', then set the element's width to the container width.
+ 
 
- If horizontalAlign is 'contentJustify', then set the element's width to the maximum between the container's width and all elements' preferred width.
+ 
 
- Set the element's width to its preferred width.
+ "/>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/ButtonBarView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/ButtonBarView.mxml b/tourdeflexmobile/src/UIViews/ButtonBarView.mxml
index 54814f2..a28e7db 100644
--- a/tourdeflexmobile/src/UIViews/ButtonBarView.mxml
+++ b/tourdeflexmobile/src/UIViews/ButtonBarView.mxml
@@ -23,7 +23,6 @@ limitations under the License.
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
- import spark.skins.mobile.TextAreaSkin;
protected function buttonbarHandler(event:IndexChangeEvent):void
{
@@ -32,47 +31,51 @@ limitations under the License.
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(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')"/>
- <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="@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:ButtonBar id="buttonbar" includeIn="DemoState" change="buttonbarHandler(event)" left="5" right="5" top="5">
- <s:ArrayList>
- <fx:Object label="Button 1"/>
- <fx:Object label="Button 2"/>
- <fx:Object label="Button 3"/>
- </s:ArrayList>
- </s:ButtonBar>
-
- <s:Label id="label" includeIn="DemoState" horizontalCenter="0" textAlign="center" bottom="20"/>
-
- <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The ButtonBar control defines a horizontal group of logically related buttons with a common look and navigation.
- 
 
The typical use for a button bar is for grouping a set of related buttons together, which gives them a common look and navigation, and handling the logic for the change event in a single place.
-
- 
 
The ButtonBar control creates Button controls based on the value of its dataProvider property. Use methods such as addItem() and removeItem() to manipulate the dataProvider property to add and remove data items. The ButtonBar control automatically adds or removes the necessary children based on changes to the dataProvider property.
-
- 
 
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.
-
- 
 
For non-mobile projects, you can use the ButtonBar control to set the active child of a ViewStack container, as the following example shows:
-
- 
 
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:VGroup width="100%" height="100%" includeIn="DemoState" horizontalAlign="center" verticalAlign="middle">
+ <s:ButtonBar id="buttonbar" change="buttonbarHandler(event)">
+ <s:ArrayList>
+ <fx:Object label="Button 1"/>
+ <fx:Object label="Button 2"/>
+ <fx:Object label="Button 3"/>
+ </s:ArrayList>
+ </s:ButtonBar>
+ <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 ButtonBar control defines a horizontal group of logically related buttons with a common look and navigation.
+ 
 
The typical use for a button bar is for grouping a set of related buttons together, which gives them a common look and navigation, and handling the logic for the change event in a single place.
+ 
 
The ButtonBar control creates Button controls based on the value of its dataProvider property. Use methods such as addItem() and removeItem() to manipulate the dataProvider property to add and remove data items. The ButtonBar control automatically adds or removes the necessary children based on changes to the dataProvider property.
+ 
 
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.
+ 
 
For non-mobile projects, you can use the ButtonBar control to set the active child of a ViewStack container, as the following example shows:
+ 
 
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:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml b/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml
index eec4a8c..61e52dc 100644
--- a/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml
+++ b/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml
@@ -18,55 +18,75 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="CalloutButton">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="CalloutButton">
<fx:Script>
<![CDATA[
- import spark.skins.mobile.TextAreaSkin;
+
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
+
]]>
- </fx:Script>
-
+ </fx:Script>
<s:states>
<s:State name="DemoState"/>
<s:State name="InfoState"/>
- </s:states>
-
+ </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="@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:CalloutButton label="CalloutButton" horizontalCenter="0" y="10">
- <s:List>
- <s:ArrayList>
- <fx:Object label="Item 1"/>
- <fx:Object label="Item 2"/>
- <fx:Object label="Item 3"/>
- <fx:Object label="Item 4"/>
- <fx:Object label="Item 5"/>
- </s:ArrayList>
- </s:List>
- </s:CalloutButton>
-
- <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The CalloutButton control is a drop down component that defines a button to open and close a Callout container. The CalloutButton specifies the layout and child components of the Callout container.
-
- 
 
The CalloutButton control uses the spark.components.supportClasses.DropDownController class to manage the Callout container. You can access the DropDownController by using the protected CalloutButton.dropDownController property.
-
- 
 
When the callout is open:
-
+ <s:VGroup includeIn="DemoState" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
+ <s:CalloutButton label="Callout List" horizontalCenter="0">
+ <s:List>
+ <s:ArrayList>
+ <fx:Object label="Item 1"/>
+ <fx:Object label="Item 2"/>
+ <fx:Object label="Item 3"/>
+ <fx:Object label="Item 4"/>
+ <fx:Object label="Item 5"/>
+ </s:ArrayList>
+ </s:List>
+ </s:CalloutButton>
+ <s:Spacer height="10"/>
+ <s:CalloutButton label="Callout Spinner" horizontalCenter="0">
+ <s:DateSpinner displayMode="dateAndTime" id="spinnerDate"/>
+ </s:CalloutButton>
+ <s:Spacer height="10"/>
+ <s:CalloutButton label="Callout Check Boxes" horizontalCenter="0" >
+ <s:VGroup includeIn="DemoState" horizontalAlign="center" width="100%" height="100%"
+ paddingLeft="5" paddingRight="10" paddingTop="5" paddingBottom="5">
+ <s:CheckBox label="CheckBox 1" />
+ <s:CheckBox label="CheckBox 2" />
+ <s:CheckBox label="CheckBox 3" />
+ </s:VGroup>
+ </s:CalloutButton>
+ </s:VGroup>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="The CalloutButton control is a drop down component that defines a button to open and close a Callout container. The CalloutButton specifies the layout and child components of the Callout container.
+ 
 
The CalloutButton control uses the spark.components.supportClasses.DropDownController class to manage the Callout container. You can access the DropDownController by using the protected CalloutButton.dropDownController property.
+ 
 
When the callout is open:

 
Clicking the button closes the callout
- 
 
Clicking outside of the callout closes the callout."/>
-
+ 
 
Clicking outside of the callout closes the callout."/>
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
- </s:actionContent>
-
+ </s:actionContent>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/CheckboxView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/CheckboxView.mxml b/tourdeflexmobile/src/UIViews/CheckboxView.mxml
index ff9dbc6..ed8a18a 100644
--- a/tourdeflexmobile/src/UIViews/CheckboxView.mxml
+++ b/tourdeflexmobile/src/UIViews/CheckboxView.mxml
@@ -18,11 +18,12 @@ limitations under the License.
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark" title="CheckBox">
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ title="CheckBox">
<fx:Script>
<![CDATA[
- import spark.skins.mobile.TextAreaSkin;
+
protected function checkboxHandler(event:Event):void
{
label.text = event.target.label + " toggled: " + event.target.selected as String;
@@ -30,40 +31,45 @@ limitations under the License.
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
]]>
- </fx:Script>
-
+ </fx:Script>
<s:states>
<s:State name="DemoState"/>
<s:State name="InfoState"/>
- </s:states>
-
+ </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')"/>
- </fx:Declarations>
-
- <s:VGroup includeIn="DemoState" horizontalCenter="0" y="20">
+ <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 includeIn="DemoState" horizontalAlign="center" width="100%" height="100%" verticalAlign="middle">
<s:CheckBox change="checkboxHandler(event)" label="CheckBox 1" />
<s:CheckBox change="checkboxHandler(event)" label="CheckBox 2" />
<s:CheckBox change="checkboxHandler(event)" label="CheckBox 3" />
- </s:VGroup>
-
- <s:Label includeIn="DemoState" id="label" horizontalCenter="0" bottom="20" textAlign="center"/>
-
- <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The CheckBox component consists of an optional label and a small box that can contain a check mark or not.
- 
 
When a user clicks a CheckBox component or its associated text, the CheckBox component sets its selected property to true for checked, and to false for unchecked.
-
+ <s:Spacer height="10"/>
+ <s:Label id="label" horizontalCenter="0" bottom="20" textAlign="center"/>
+ </s:VGroup>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false"
+ text="The CheckBox component consists of an optional label and a small box that can contain a check mark or not.
+ 
 
When a user clicks a CheckBox component or its associated text, the CheckBox component sets its selected property to true for checked, and to false for unchecked.

 
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:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
- </s:actionContent>
-
+ </s:actionContent>
</s:View>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml b/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml
index 0cb738f..c3e0cde 100644
--- a/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml
+++ b/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml
@@ -21,38 +21,48 @@ limitations under the License.
xmlns:s="library://ns.adobe.com/flex/spark" title="DateSpinnerView">
<fx:Script>
<![CDATA[
- import spark.skins.mobile.TextAreaSkin;
+
protected function buttonHandler(event:MouseEvent):void
{
- if(currentState == "DemoState"){
+ if(currentState == "DemoState")
+ {
currentState = "InfoState";
- }else if(currentState == "InfoState"){
+ }
+ else if(currentState == "InfoState")
+ {
currentState = "DemoState";
}
}
]]>
- </fx:Script>
-
+ </fx:Script>
<s:states>
<s:State name="DemoState"/>
<s:State name="InfoState"/>
- </s:states>
-
+ </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="@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')"/>
+ <s:DateTimeFormatter dateStyle="medium" timeStyle="medium" id="dateTimeFormatter"/>
</fx:Declarations>
-
- <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.
- 

The DateSpinner control can display the date, the time, or the date and time, based on the value of the displayMode property.
-
- 

The UI for the control is made up of a series of SpinnerList controls wrapped inside a SpinnerListContainer that show the currently-selected date. Through touch or mouse interaction, users can adjust the selected date.
-
- 

The DateSpinnerSkin only defines some sizing properties. To change the appearance of the DateSpinner control, you typically reskin the underlying SpinnerListSkin or SpinnerListContainerSkin."/>
-
+ <s:VGroup includeIn="DemoState" horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
+ <s:DateSpinner displayMode="dateAndTime" id="spinnerDate"/>
+ <s:Spacer height="10"/>
+ <s:Label id="label" textAlign="center" text="{dateTimeFormatter.format(spinnerDate.selectedDate)}"/>
+ </s:VGroup>
+ <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" borderVisible="false"
+ text="The DateSpinner control presents an interface for picking a particular date or time.
+ 

The DateSpinner control can display the date, the time, or the date and time, based on the value of the displayMode property.
+ 

The UI for the control is made up of a series of SpinnerList controls wrapped inside a SpinnerListContainer that show the currently-selected date. Through touch or mouse interaction, users can adjust the selected date.
+ 

The DateSpinnerSkin only defines some sizing properties. To change the appearance of the DateSpinner control, you typically reskin the underlying SpinnerListSkin or SpinnerListContainerSkin."/>
<s:actionContent>
<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
</s:actionContent>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/HscrubberView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/UIViews/HscrubberView.mxml b/tourdeflexmobile/src/UIViews/HscrubberView.mxml
new file mode 100644
index 0000000..96d605f
--- /dev/null
+++ b/tourdeflexmobile/src/UIViews/HscrubberView.mxml
@@ -0,0 +1,71 @@
+<?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:VGroup includeIn="DemoState" horizontalAlign="center" verticalAlign="middle" width="100%" 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:actionContent>
+ <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
+ </s:actionContent>
+</s:View>
[22/22] git commit: [flex-examples] [refs/heads/develop] - This
closes #1
Posted by bi...@apache.org.
This closes #1
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/44ddf534
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/44ddf534
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/44ddf534
Branch: refs/heads/develop
Commit: 44ddf534e5462df0c6113bb807268c2fe08cbc14
Parents: c9bba0d
Author: OmPrakash Muppirala <bi...@gmail.com>
Authored: Tue Nov 4 11:14:01 2014 -0800
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:14:01 2014 -0800
----------------------------------------------------------------------
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/44ddf534/README.md
----------------------------------------------------------------------
diff --git a/README.md b/README.md
index 7ff5b4c..757b513 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@ flex-examples
Mirror of Apache Flex Examples
-This is a modified version of the new TourDeFlexMobile application that was uploaded to the ApacheFlexExample.
+This is a new version of TourDeFlexMobile.
Some Additional code was added to mirror the behavior of the Android Facebook application. Click to slide the main navigator off exposing a list and use mouse events to slide the navigator closed.
Re: [17/22] added in Android Skins
Posted by OmPrakash Muppirala <bi...@gmail.com>.
Thanks for catching that. I have fixed it in the current branch I am
working on. I will merge that into flex-sdk/develop soon.
Om
On Tue, Nov 4, 2014 at 12:33 PM, Justin Mclean <ju...@classsoftware.com>
wrote:
> Hi,
>
> Allso noticed there looks like there a few switch statements that miss
> DPIClassification.DPI_120 and/or DPIClassification.DPI_640. eg
> HScrollBarThumbSkin and VScrollBarThumbSkin
>
> Justin
Re: [17/22] added in Android Skins
Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,
Allso noticed there looks like there a few switch statements that miss DPIClassification.DPI_120 and/or DPIClassification.DPI_640. eg HScrollBarThumbSkin and VScrollBarThumbSkin
Justin
[17/22] added in Android Skins
Posted by bi...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/DateSpinnerSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/DateSpinnerSkin.as b/tourdeflexmobile/src/spark/skins/android4/DateSpinnerSkin.as
new file mode 100644
index 0000000..d45e039
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/DateSpinnerSkin.as
@@ -0,0 +1,153 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4
+{
+ import mx.core.ClassFactory;
+ import mx.core.IFactory;
+ import mx.core.IVisualElementContainer;
+
+ import spark.components.DateSpinner;
+ import spark.components.SpinnerList;
+ import spark.components.SpinnerListContainer;
+ import spark.components.calendarClasses.DateSpinnerItemRenderer;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ /**
+ * ActionScript-based skin for the DateSpinner in mobile applications.
+ *
+ * @see spark.components.DateSpinner
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ *
+ */
+ public class DateSpinnerSkin extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public function DateSpinnerSkin()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Factory for creating dateItem list parts.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public var dateItemList:IFactory;
+
+ /**
+ * Skin part; container of dateItem list(s).
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public var listContainer:IVisualElementContainer;
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:DateSpinner;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden Methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @inheritDoc
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ override protected function createChildren():void
+ {
+ listContainer = new SpinnerListContainer();
+
+ addChild(SpinnerListContainer(listContainer));
+
+ dateItemList = new ClassFactory(SpinnerList);
+ (dateItemList as ClassFactory).properties = { itemRenderer: new ClassFactory(spark.components.calendarClasses.DateSpinnerItemRenderer), percentHeight : 100 };
+ }
+
+ /**
+ * @inheritDoc
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ override protected function measure():void
+ {
+ measuredWidth = SpinnerListContainer(listContainer).getPreferredBoundsWidth();
+ measuredHeight = SpinnerListContainer(listContainer).getPreferredBoundsHeight();
+ measuredMinWidth = SpinnerListContainer(listContainer).getMinBoundsWidth();
+ measuredMinHeight = SpinnerListContainer(listContainer).getMinBoundsHeight();
+ }
+
+ /**
+ * @inheritDoc
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ // Always set the SpinnerListContainer to its measured width, regardless of our size
+ var containerWidth:Number = SpinnerListContainer(listContainer).getPreferredBoundsWidth();
+ var containerHeight:Number = unscaledHeight;
+
+ setElementSize(listContainer, containerWidth, containerHeight);
+ // if width is greater than necessary, center the component
+ setElementPosition(listContainer, Math.max((unscaledWidth - containerWidth)/2, 0), 0);
+ }
+
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/HScrollBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/HScrollBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/HScrollBarSkin.as
new file mode 100644
index 0000000..d2cb3dd
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/HScrollBarSkin.as
@@ -0,0 +1,205 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+
+ import mx.core.DPIClassification;
+ import mx.core.mx_internal;
+
+ import spark.components.Button;
+ import spark.components.HScrollBar;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+
+ /**
+ * ActionScript-based skin for HScrollBar components in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class HScrollBarSkin extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function HScrollBarSkin()
+ {
+ super();
+
+ minWidth = 20;
+ thumbSkinClass = HScrollBarThumbSkin;
+ var paddingBottom:int;
+ var paddingHorizontal:int;
+
+ // Depending on density set our measured height
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ minHeight = 24;
+ paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_640DPI;
+ paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_640DPI;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ minHeight = 18;
+ paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_480DPI;
+ paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_480DPI;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ minHeight = 12;
+ paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_320DPI;
+ paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_320DPI;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ minHeight = 9;
+ paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_240DPI;
+ paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_240DPI;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ minHeight = 5;
+ paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_120DPI;
+ paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_120DPI;
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+ minHeight = 6;
+ paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_DEFAULTDPI;
+ paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_DEFAULTDPI;
+ break;
+ }
+ }
+
+ // The minimum width is set such that, at it's smallest size, the thumb appears
+ // as wide as it is high.
+ minThumbWidth = (minHeight - paddingBottom) + (paddingHorizontal * 2);
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:HScrollBar;
+
+ /**
+ * Minimum width for the thumb
+ */
+ protected var minThumbWidth:Number;
+
+ /**
+ * Skin to use for the thumb Button skin part
+ */
+ protected var thumbSkinClass:Class;
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * HScrollbar track skin part.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var track:Button;
+
+ /**
+ * HScrollbar thumb skin part.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var thumb:Button;
+
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ // Create our skin parts if necessary: track and thumb.
+ if (!track)
+ {
+ // We don't want a visible track so we set the skin to MobileSkin
+ track = new Button();
+ track.setStyle("skinClass", spark.skins.mobile.supportClasses.MobileSkin);
+ track.width = minWidth;
+ track.height = minHeight;
+ addChild(track);
+ }
+
+ if (!thumb)
+ {
+ thumb = new Button();
+ thumb.minWidth = minThumbWidth;
+ thumb.setStyle("skinClass", thumbSkinClass);
+ thumb.width = minHeight;
+ thumb.height = minHeight;
+ addChild(thumb);
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ setElementSize(track, unscaledWidth, unscaledHeight);
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/HScrollBarThumbSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/HScrollBarThumbSkin.as b/tourdeflexmobile/src/spark/skins/android4/HScrollBarThumbSkin.as
new file mode 100644
index 0000000..5c63d15
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/HScrollBarThumbSkin.as
@@ -0,0 +1,169 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+
+ import flash.display.CapsStyle;
+ import flash.display.JointStyle;
+ import flash.display.LineScaleMode;
+
+ import mx.core.DPIClassification;
+ import mx.core.mx_internal;
+
+ import spark.components.Button;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+
+ /**
+ * ActionScript-based skin for the HScrollBar thumb skin part in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class HScrollBarThumbSkin extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Class constants
+ //
+ //--------------------------------------------------------------------------
+
+ // These constants are also accessed from HScrollBarSkin
+ mx_internal static const PADDING_BOTTOM_640DPI:int = 10;
+ mx_internal static const PADDING_HORIZONTAL_640DPI:int = 8;
+ mx_internal static const PADDING_BOTTOM_480DPI:int = 8;
+ mx_internal static const PADDING_HORIZONTAL_480DPI:int = 6;
+ mx_internal static const PADDING_BOTTOM_320DPI:int = 5;
+ mx_internal static const PADDING_HORIZONTAL_320DPI:int = 4;
+ mx_internal static const PADDING_BOTTOM_240DPI:int = 4;
+ mx_internal static const PADDING_HORIZONTAL_240DPI:int = 3;
+ mx_internal static const PADDING_BOTTOM_120DPI:int = 2;
+ mx_internal static const PADDING_HORIZONTAL_120DPI:int = 2;
+ mx_internal static const PADDING_BOTTOM_DEFAULTDPI:int = 3;
+ mx_internal static const PADDING_HORIZONTAL_DEFAULTDPI:int = 2;
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function HScrollBarThumbSkin()
+ {
+ super();
+
+ // Depending on density set padding
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_480:
+ {
+ paddingBottom = PADDING_BOTTOM_480DPI;
+ paddingHorizontal = PADDING_HORIZONTAL_480DPI;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ paddingBottom = PADDING_BOTTOM_320DPI;
+ paddingHorizontal = PADDING_HORIZONTAL_320DPI;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ paddingBottom = PADDING_BOTTOM_240DPI;
+ paddingHorizontal = PADDING_HORIZONTAL_240DPI;
+ break;
+ }
+ default:
+ {
+ paddingBottom = PADDING_BOTTOM_DEFAULTDPI;
+ paddingHorizontal = PADDING_HORIZONTAL_DEFAULTDPI;
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:Button;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Padding from bottom.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var paddingBottom:int;
+
+ /**
+ * Horizontal padding from left and right.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var paddingHorizontal:int;
+
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ var thumbHeight:Number = unscaledHeight - paddingBottom;
+
+ graphics.beginFill(getStyle("thumbColor"), 1);
+ graphics.drawRect(paddingHorizontal + .5, 0.5, unscaledWidth - 2 * paddingHorizontal, thumbHeight);
+
+ graphics.endFill();
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/HSliderSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/HSliderSkin.as b/tourdeflexmobile/src/spark/skins/android4/HSliderSkin.as
new file mode 100644
index 0000000..f89d3b9
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/HSliderSkin.as
@@ -0,0 +1,293 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+ import flash.display.BlendMode;
+ import flash.display.DisplayObject;
+ import flash.events.Event;
+
+ import mx.core.ClassFactory;
+ import mx.core.IFactory;
+
+ import spark.components.Button;
+ import spark.components.HSlider;
+ import spark.skins.android4.assets.HSliderTrack_filled;
+ import spark.skins.mobile.supportClasses.HSliderDataTip;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ /**
+ * Android 4.x specific ActionScript-based skin for HSlider controls in mobile applications.
+ *
+ * <p>The base Flex implementation creates an HSlider with fixed height
+ * and variable width with a fixed-size thumb. As the height of the
+ * HSlider component increases, the vertical dimensions of the visible HSlider remain
+ * the same, and the HSlider stays vertically centered.</p>
+ *
+ * <p>The thumb and track implementations can be customized by subclassing
+ * this skin class and overriding the thumbSkinClass, trackSkinClass,
+ * and/or dataTipClass variables as necessary.</p>
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class HSliderSkin extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function HSliderSkin()
+ {
+ super();
+
+ thumbSkinClass = spark.skins.android4.HSliderThumbSkin;
+ trackSkinClass = spark.skins.android4.HSliderTrackSkin;
+ filledTrackSkinClass = spark.skins.android4.assets.HSliderTrack_filled;
+ dataTipClass = spark.skins.mobile.supportClasses.HSliderDataTip;
+
+ blendMode = BlendMode.LAYER;
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ private var _hostComponent:HSlider;
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public function get hostComponent():HSlider
+ {
+ return _hostComponent;
+ }
+
+ public function set hostComponent(value:HSlider):void
+ {
+ if (_hostComponent)
+ _hostComponent.removeEventListener(Event.CHANGE, thumbPositionChanged_handler);
+ _hostComponent = value;
+ if (_hostComponent)
+ _hostComponent.addEventListener(Event.CHANGE, thumbPositionChanged_handler);
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * HSlider track skin part
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var track:Button;
+
+ /**
+ * HSlider track skin part that
+ * depicts area that is filled
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var filledTrack:DisplayObject;
+
+ /**
+ * HSlider thumb skin part
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var thumb:Button;
+
+ /**
+ * HSlider dataTip class factory
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var dataTip:IFactory;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Specifies the skin class that will be used for the HSlider thumb.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var thumbSkinClass:Class;
+
+ /**
+ * Specifies the skin class that will be used for the HSlider track.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var trackSkinClass:Class;
+ /**
+ * Specifies the skin class that will be used for the HSlider track's
+ * filled area.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var filledTrackSkinClass:Class;
+
+ /**
+ * Specifies the class that will be used for the HSlider datatip.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var dataTipClass:Class;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function commitCurrentState():void
+ {
+ if (currentState == "disabled")
+ alpha = 0.5;
+ else if (currentState == "normal")
+ alpha = 1;
+ }
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ // Create our skin parts: track and thumb
+ track = new Button();
+ track.setStyle("skinClass", trackSkinClass);
+ addChild(track);
+
+ filledTrack = new filledTrackSkinClass();
+ addChild(filledTrack);
+
+ thumb = new Button();
+ thumb.setStyle("skinClass", thumbSkinClass);
+ addChild(thumb);
+
+ // Set up the class factory for the dataTip
+ dataTip = new ClassFactory();
+ ClassFactory(dataTip).generator = dataTipClass;
+ }
+
+ /**
+ * @private
+ * The HSliderSkin width will be no less than the width of the thumb skin.
+ * The HSliderSkin height will be no less than the greater of the heights of
+ * the thumb and track skins.
+ */
+ override protected function measure():void
+ {
+ measuredWidth = track.getPreferredBoundsWidth();
+ measuredHeight = Math.max(track.getPreferredBoundsHeight(), thumb.getPreferredBoundsHeight());
+
+ measuredMinHeight = Math.max(track.getPreferredBoundsHeight(), thumb.getPreferredBoundsHeight());
+ measuredMinWidth = thumb.getPreferredBoundsWidth();
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ // minimum height is no smaller than the larger of the thumb or track
+ var calculatedSkinHeight:int = Math.max(Math.max(thumb.getPreferredBoundsHeight(), track.getPreferredBoundsHeight()),
+ unscaledHeight);
+
+ // minimum width is no smaller than the thumb
+ var calculatedSkinWidth:int = Math.max(thumb.getPreferredBoundsWidth(),
+ unscaledWidth);
+
+ // once we know the skin height, center the thumb and track
+ thumb.y = Math.max(Math.round((calculatedSkinHeight - thumb.getPreferredBoundsHeight()) / 2), 0);
+ var calculatedTrackY:int = Math.max(Math.round((calculatedSkinHeight - track.getPreferredBoundsHeight()) / 2), 0);
+
+ // size and position
+ setElementSize(thumb, thumb.getPreferredBoundsWidth(), thumb.getPreferredBoundsHeight()); // thumb does NOT scale
+ setElementSize(track, calculatedSkinWidth, track.getPreferredBoundsHeight()); // note track is NOT scaled vertically
+ setElementPosition(track, 0, calculatedTrackY);
+
+ //Set size and position of filled area based on thumb's current location
+ var filledTrackWidth:Number = thumb.getLayoutBoundsX();
+ setElementSize(filledTrack, filledTrackWidth, track.getPreferredBoundsHeight()); // note track is NOT scaled vertically
+ setElementPosition(filledTrack, track.x + HSliderTrackSkin(track.skin).visibleTrackOffset , calculatedTrackY);
+ }
+
+ private function thumbPositionChanged_handler(event:Event):void
+ {
+ //Just trigger a redraw so that the filled area of the track updates itself
+ invalidateDisplayList();
+ }
+
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/HSliderThumbSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/HSliderThumbSkin.as b/tourdeflexmobile/src/spark/skins/android4/HSliderThumbSkin.as
new file mode 100644
index 0000000..517ff93
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/HSliderThumbSkin.as
@@ -0,0 +1,333 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+import flash.display.DisplayObject;
+
+import mx.core.DPIClassification;
+
+import spark.components.Button;
+import spark.skins.android4.assets.HSliderThumb_normal;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+/**
+ * Android 4.x specific ActionScript-based skin for the HSlider thumb skin part in mobile applications.
+ *
+ * <p>Note that this particular implementation defines a hit zone which is larger than
+ * the visible thumb for better usability on mobile screens.</p>
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+public class HSliderThumbSkin extends MobileSkin
+{
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function HSliderThumbSkin()
+ {
+ super();
+
+ thumbNormalClass = spark.skins.android4.assets.HSliderThumb_normal;
+ thumbPressedClass = spark.skins.android4.assets.HSliderThumb_pressed;
+
+ // set the dimensions to use based on the screen density
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ thumbImageWidth = 116;
+ thumbImageHeight = 116;
+
+ hitZoneOffset = 20;
+ hitZoneSideLength = 160;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ // Note provisional may need changes
+ thumbImageWidth = 88;
+ thumbImageHeight = 88;
+
+ hitZoneOffset = 20;
+ hitZoneSideLength = 130;
+
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ thumbImageWidth = 58;
+ thumbImageHeight = 58;
+
+ hitZoneOffset = 10;
+ hitZoneSideLength = 80;
+
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ thumbImageWidth = 44;
+ thumbImageHeight = 44;
+
+ hitZoneOffset = 10;
+ hitZoneSideLength = 65;
+
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ thumbImageWidth = 22;
+ thumbImageHeight = 22;
+
+ hitZoneOffset = 5;
+ hitZoneSideLength = 33;
+
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+ thumbImageWidth = 29;
+ thumbImageHeight = 29;
+
+ hitZoneOffset = 5;
+ hitZoneSideLength = 40;
+
+ break;
+ }
+
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:Button;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ // FXG thumb classes
+ /**
+ * Specifies the FXG class to use when the thumb is in the normal state
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var thumbNormalClass:Class;
+
+ /**
+ * Specifies the FXG class to use when the thumb is in the pressed state
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var thumbPressedClass:Class;
+
+ /**
+ * Specifies the DisplayObject to use when the thumb is in the normal state
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var thumbSkin_normal:DisplayObject;
+
+ /**
+ * Specifies the DisplayObject to use when the thumb is in the pressed state
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var thumbSkin_pressed:DisplayObject;
+
+ /**
+ * Specifies the current DisplayObject that should be shown
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var currentThumbSkin:DisplayObject;
+
+ /**
+ * Width of the overall thumb image
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var thumbImageWidth:int;
+
+ /**
+ * Height of the overall thumb image
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var thumbImageHeight:int;
+
+ /**
+ * Length of the sizes of the hitzone (assumed to be square)
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var hitZoneSideLength:int;
+
+ /**
+ * Distance between the left edge of the hitzone and the left edge
+ * of the thumb
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var hitZoneOffset:int;
+
+ /**
+ * @private
+ * Remember which state is currently being displayed
+ */
+ private var displayedState:String;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function commitCurrentState():void
+ {
+ if (currentState == "up")
+ {
+ // show the normal button
+ if (!thumbSkin_normal)
+ {
+ thumbSkin_normal = new thumbNormalClass();
+ addChild(thumbSkin_normal);
+ }
+ else
+ {
+ thumbSkin_normal.visible = true;
+ }
+ currentThumbSkin = thumbSkin_normal;
+
+ // hide the pressed button
+ if (thumbSkin_pressed)
+ thumbSkin_pressed.visible = false;
+ }
+ else if (currentState == "down")
+ {
+ // show the pressed button
+ if (!thumbSkin_pressed)
+ {
+ thumbSkin_pressed = new thumbPressedClass();
+ addChild(thumbSkin_pressed);
+ }
+ else
+ {
+ thumbSkin_pressed.visible = true;
+ }
+ currentThumbSkin = thumbSkin_pressed;
+
+ // hide the normal button
+ if (thumbSkin_normal)
+ thumbSkin_normal.visible = false;
+ }
+
+ displayedState = currentState;
+
+ invalidateDisplayList();
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ measuredWidth = thumbImageWidth;
+ measuredHeight = thumbImageHeight;
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ setElementSize(currentThumbSkin, unscaledWidth, unscaledHeight);
+ setElementPosition(currentThumbSkin, 0, 0)
+ }
+
+ /**
+ * @private
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ // put in a larger hit zone than the thumb
+ graphics.beginFill(0xffffff, 0);
+ graphics.drawRect(-hitZoneOffset, -hitZoneOffset, hitZoneSideLength, hitZoneSideLength);
+ graphics.endFill();
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/HSliderTrackSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/HSliderTrackSkin.as b/tourdeflexmobile/src/spark/skins/android4/HSliderTrackSkin.as
new file mode 100644
index 0000000..57dc8f3
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/HSliderTrackSkin.as
@@ -0,0 +1,227 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+ import flash.display.DisplayObject;
+
+ import mx.core.DPIClassification;
+
+ import spark.components.Button;
+ import spark.skins.android4.assets.HSliderTrack;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ /**
+ * ActionScript-based skin for the HSlider track skin part in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class HSliderTrackSkin extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function HSliderTrackSkin()
+ {
+ super();
+
+ trackClass = spark.skins.android4.assets.HSliderTrack;
+
+ // set the right dimensions to use based on the screen density
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ trackWidth = 1200;
+ trackHeight = 8;
+
+ visibleTrackOffset = 48;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ trackWidth = 900;
+ trackHeight = 6;
+
+ visibleTrackOffset = 38;
+
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ trackWidth = 600;
+ trackHeight = 4;
+
+ visibleTrackOffset = 24;
+
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ trackWidth = 450;
+ trackHeight = 3;
+
+ visibleTrackOffset = 18;
+
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ trackWidth = 225;
+ trackHeight = 2;
+
+ visibleTrackOffset = 9;
+
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+ trackWidth = 300;
+ trackHeight = 2;
+
+ visibleTrackOffset = 12;
+
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:Button;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Specifies the FXG class to use for the track image
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var trackClass:Class;
+
+ /**
+ * Specifies the DisplayObject for the track image
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var trackSkin:DisplayObject;
+
+ /**
+ * Specifies the track image width
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var trackWidth:int;
+
+ /**
+ * Specifies the track image height
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ protected var trackHeight:int;
+
+ /**
+ * Specifies the offset from the left and right edge to where
+ * the visible track begins. This should match the offset in the FXG assets.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var visibleTrackOffset:int;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ trackSkin = new trackClass();
+ addChild(trackSkin);
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ measuredWidth = trackWidth;
+ measuredHeight = trackHeight;
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ var unscaledTrackWidth:int = unscaledWidth - (2 * visibleTrackOffset);
+ setElementSize(trackSkin, unscaledTrackWidth, unscaledHeight);
+ setElementPosition(trackSkin, visibleTrackOffset, 0);
+ }
+
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ListSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ListSkin.as b/tourdeflexmobile/src/spark/skins/android4/ListSkin.as
new file mode 100644
index 0000000..c78a212
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ListSkin.as
@@ -0,0 +1,204 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+ import flash.display.BlendMode;
+ import flash.display.DisplayObject;
+ import flash.display.Sprite;
+
+ import mx.core.ClassFactory;
+ import mx.core.mx_internal;
+
+ import spark.components.DataGroup;
+ import spark.components.List;
+ import spark.components.Scroller;
+ import spark.layouts.HorizontalAlign;
+ import spark.layouts.VerticalLayout;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+ //import skins.Scrollers;
+
+ //import skins.Scroller;
+
+ use namespace mx_internal;
+
+ /**
+ * ActionScript-based skin for the List components in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class ListSkin extends MobileSkin
+ {
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function ListSkin()
+ {
+ super();
+
+ minWidth = 112;
+ blendMode = BlendMode.NORMAL;
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:List;
+
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Scroller skin part.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var scroller:Scroller;
+
+ /**
+ * DataGroup skin part.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var dataGroup:DataGroup;
+
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @private
+ */
+ override protected function commitCurrentState():void
+ {
+ super.commitCurrentState();
+
+ alpha = currentState.indexOf("disabled") == -1 ? 1 : 0.5;
+ }
+
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ if (!dataGroup)
+ {
+ // Create data group layout
+ var layout:VerticalLayout = new VerticalLayout();
+ layout.requestedMinRowCount = 5;
+ layout.horizontalAlign = HorizontalAlign.JUSTIFY;
+ layout.gap = 0;
+
+ // Create data group
+ dataGroup = new DataGroup();
+ dataGroup.layout = layout;
+ dataGroup.itemRenderer = new ClassFactory(spark.components.LabelItemRenderer);
+ }
+ if (!scroller)
+ {
+ // Create scroller
+ scroller = new Scroller();
+ scroller.minViewportInset = 0;
+ scroller.hasFocusableChildren = false;
+
+ // scroller.pullEnabled = false;
+ // scroller.bounceEnabled = false;
+ // scroller.scrollSnappingMode = "center";
+
+ addChild(scroller);
+ }
+
+ // Associate scroller with data group
+ if (!scroller.viewport)
+ {
+ scroller.viewport = dataGroup;
+
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ measuredWidth = scroller.getPreferredBoundsWidth();
+ measuredHeight = scroller.getPreferredBoundsHeight();
+
+ }
+
+ /**
+ * @private
+ */
+ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+
+ var borderWidth:int = getStyle("borderVisible") ? 1 : 0;
+
+ // Background
+ graphics.beginFill(getStyle("contentBackgroundColor"), getStyle("contentBackgroundAlpha"));
+ graphics.drawRect(borderWidth, borderWidth, unscaledWidth - 2 * borderWidth, unscaledHeight - 2 * borderWidth);
+ graphics.endFill();
+
+ // Border
+ if (getStyle("borderVisible"))
+ {
+ graphics.lineStyle(.5, getStyle("borderColor"), getStyle("borderAlpha"), true);
+ graphics.drawRect(0, 0, unscaledWidth - 1, unscaledHeight - 1);
+ }
+ // Scroller
+ //scroller.minViewportInset = borderWidth;
+ setElementSize(scroller, unscaledWidth, unscaledHeight);
+ setElementPosition(scroller, 0, 0);
+
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/MobileGridHeaderButtonBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/MobileGridHeaderButtonBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/MobileGridHeaderButtonBarSkin.as
new file mode 100644
index 0000000..73ce2b0
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/MobileGridHeaderButtonBarSkin.as
@@ -0,0 +1,90 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4
+{
+ import spark.components.ButtonBarButton;
+ import spark.components.DataGroup;
+ import spark.layouts.HorizontalLayout;
+ import spark.layouts.VerticalAlign;
+ import spark.skins.android4.ButtonBarSkin;
+ import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
+
+ public class MobileGridHeaderButtonBarSkin extends ButtonBarSkin
+ {
+
+ public function MobileGridHeaderButtonBarSkin()
+ {
+ super();
+ }
+
+ override protected function createChildren():void
+ {
+ if (!firstButton)
+ {
+ firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+ firstButton.skinClass = spark.skins.android4.ButtonBarFirstButtonSkin;
+ }
+
+ if (!lastButton)
+ {
+ lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+ lastButton.skinClass = spark.skins.android4.ButtonBarFirstButtonSkin;
+ }
+
+ if (!middleButton)
+ {
+ middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+ middleButton.skinClass = spark.skins.android4.ButtonBarMiddleButtonSkin;
+ }
+
+ // create the data group to house the buttons
+ if (!dataGroup)
+ {
+ dataGroup = new DataGroup();
+ var hLayout:HorizontalLayout = new HorizontalLayout();
+ hLayout.gap = 0;
+ hLayout.verticalAlign = VerticalAlign.CONTENT_JUSTIFY;
+ hLayout.useVirtualLayout = false;
+
+ dataGroup.layout = hLayout;
+ addChild(dataGroup);
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ // backgroundAlpha style is not supported by ButtonBar
+ // TabbedViewNavigatorSkin sets a hard-coded value to support
+ // overlayControls
+ var backgroundAlphaValue:* = getStyle("backgroundAlpha");
+ var backgroundAlpha:Number = (backgroundAlphaValue === undefined)
+ ? 1 : getStyle("backgroundAlpha");
+
+ graphics.beginFill(getStyle("chromeColor"), backgroundAlpha);
+ graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
+ graphics.endFill();
+ }
+ }
+}
+
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/MobileGridSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/MobileGridSkin.as b/tourdeflexmobile/src/spark/skins/android4/MobileGridSkin.as
new file mode 100644
index 0000000..977b149
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/MobileGridSkin.as
@@ -0,0 +1,159 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4
+{
+ import flash.display.BlendMode;
+
+ import mx.core.ClassFactory;
+ import mx.core.DPIClassification;
+ import mx.core.mx_internal;
+
+ import spark.components.DataGroup;
+ import spark.components.LabelItemRenderer;
+ import spark.components.MobileGrid;
+ import spark.components.Scroller;
+ import spark.components.supportClasses.MobileGridHeader;
+ import spark.layouts.HorizontalAlign;
+ import spark.layouts.VerticalLayout;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+
+ public class MobileGridSkin extends MobileSkin
+ {
+ public var hostComponent:MobileGrid;
+ // skin parts
+ public var headerGroup:MobileGridHeader;
+ public var scroller:Scroller;
+ public var dataGroup:DataGroup;
+
+
+ public function MobileGridSkin()
+ {
+ super();
+ minWidth = 112;
+ blendMode = BlendMode.NORMAL;
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_320:
+ case DPIClassification.DPI_480:
+ minWidth = 200;
+ break;
+ case DPIClassification.DPI_160:
+ case DPIClassification.DPI_240:
+ default:
+ minWidth = 100;
+ break;
+ }
+ }
+
+ override protected function commitCurrentState():void
+ {
+ super.commitCurrentState();
+ alpha = currentState.indexOf("disabled") == -1 ? 1 : 0.5;
+ }
+
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+
+ if (!dataGroup)
+ {
+ // Create data group layout
+ var layout:VerticalLayout = new VerticalLayout();
+ layout.requestedMinRowCount = 5;
+ layout.horizontalAlign = HorizontalAlign.JUSTIFY;
+ layout.gap = 0;
+ // Create data group
+ dataGroup = new DataGroup();
+ dataGroup.layout = layout;
+ dataGroup.itemRenderer = new ClassFactory(LabelItemRenderer);
+ }
+ if (!scroller)
+ {
+ // Create scroller
+ scroller = new Scroller();
+ scroller.minViewportInset = 1;
+ scroller.hasFocusableChildren = false;
+ scroller.ensureElementIsVisibleForSoftKeyboard = false;
+ addChild(scroller);
+ }
+
+ // Associate scroller with data group
+ if (!scroller.viewport)
+ {
+ scroller.viewport = dataGroup;
+ }
+
+ /* add after, for the drop shadow*/
+
+ headerGroup = new MobileGridHeader();
+ headerGroup.id = "hg";
+ addChild(headerGroup);
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ measuredWidth = scroller.getPreferredBoundsWidth();
+ measuredHeight = scroller.getPreferredBoundsHeight() + headerGroup.getPreferredBoundsHeight();
+ }
+
+ /**
+ * @private
+ */
+ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+
+ var borderWidth:int = getStyle("borderVisible") ? 1 : 0;
+ var headerHeight:Number = headerGroup.getPreferredBoundsHeight();
+
+ // Background
+ graphics.beginFill(getStyle("contentBackgroundColor"), getStyle("contentBackgroundAlpha"));
+ graphics.drawRect(borderWidth, borderWidth, unscaledWidth - 2 * borderWidth, unscaledHeight - 2 * borderWidth);
+ graphics.endFill();
+
+ // Border
+ if (getStyle("borderVisible"))
+ {
+ graphics.lineStyle(1, getStyle("borderColor"), getStyle("borderAlpha"), true);
+ graphics.drawRect(0, 0, unscaledWidth - 1, unscaledHeight - 1);
+ }
+
+ // Header
+ setElementSize(headerGroup, unscaledWidth, headerHeight);
+ setElementPosition(headerGroup, 0, 0);
+
+ //Shadow
+ //setElementSize(headerShadow, unscaledWidth, headerShadow.height);
+ //setElementPosition(headerShadow, 0, headerHeight);
+ // Scroller
+ scroller.minViewportInset = borderWidth;
+ setElementSize(scroller, unscaledWidth, unscaledHeight - headerHeight);
+ setElementPosition(scroller, 0, headerHeight);
+ }
+ }
+}
+
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/RadioButtonSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/RadioButtonSkin.as b/tourdeflexmobile/src/spark/skins/android4/RadioButtonSkin.as
new file mode 100644
index 0000000..fd74645
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/RadioButtonSkin.as
@@ -0,0 +1,253 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+
+import flash.display.DisplayObject;
+
+import mx.core.DPIClassification;
+
+import spark.skins.android4.assets.RadioButton_up;
+import spark.skins.mobile.supportClasses.SelectableButtonSkinBase;
+
+/**
+ * ActionScript-based skin for RadioButton controls in mobile applications.
+ *
+ * @see spark.components.RadioButton
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+public class RadioButtonSkin extends SelectableButtonSkinBase
+{
+ //--------------------------------------------------------------------------
+ //
+ // Class constants
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ static private const exclusions:Array = ["labelDisplay", "labelDisplayShadow"];
+
+ //--------------------------------------------------------------------------
+ //
+ // Member variables
+ //
+ //--------------------------------------------------------------------------
+
+ protected var symbolOffsetX:Number;
+ protected var symbolOffsetY:Number;
+ protected var iconWidth:Number;
+ protected var iconHeight:Number;
+ protected var symbolWidth:Number;
+ protected var symbolHeight:Number;
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function RadioButtonSkin()
+ {
+ super();
+
+ layoutPaddingLeft = 0;
+ layoutPaddingRight = 0;
+ layoutPaddingTop = 0;
+ layoutPaddingBottom = 0;
+
+ upIconClass = spark.skins.android4.assets.RadioButton_up;
+ upSelectedIconClass = spark.skins.android4.assets.RadioButton_up;
+ downIconClass = spark.skins.android4.assets.RadioButton_down;
+ downSelectedIconClass = spark.skins.android4.assets.RadioButton_down;
+ upSymbolIconClass = null;
+ downSymbolIconClass = null;
+ upSymbolIconSelectedClass = spark.skins.android4.assets.RadioButton_upSymbolSelected;
+ downSymbolIconSelectedClass = spark.skins.android4.assets.RadioButton_downSymbolSelected;
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+
+ layoutGap = 16;
+ minWidth = 128;
+ minHeight = 128;
+ iconWidth = 128;
+ iconHeight = 128;
+ symbolWidth = 44;
+ symbolHeight = 44;
+ symbolOffsetX = 44;
+ symbolOffsetY = 44;
+
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+
+ layoutGap = 12;
+ minWidth = 96;
+ minHeight = 96;
+ iconWidth = 96;
+ iconHeight = 96;
+ symbolWidth = 33;
+ symbolHeight = 33;
+ symbolOffsetX = 33;
+ symbolOffsetY = 33;
+
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+
+ layoutGap = 8;
+ minWidth = 64;
+ minHeight = 64;
+ iconWidth = 64;
+ iconHeight = 64;
+ symbolWidth = 22;
+ symbolHeight = 22;
+ symbolOffsetX = 22;
+ symbolOffsetY = 22;
+
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+
+ layoutGap = 6;
+ minWidth = 48;
+ minHeight = 48;
+ iconWidth = 48;
+ iconHeight = 48;
+ symbolWidth = 16.5;
+ symbolHeight = 16.5;
+ symbolOffsetX = 16.5;
+ symbolOffsetY = 16.5;
+
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+
+ layoutGap = 3;
+ minWidth = 24;
+ minHeight = 24;
+ iconWidth = 24;
+ iconHeight = 24;
+ symbolWidth = 8.25;
+ symbolHeight = 8.25;
+ symbolOffsetX = 8.25;
+ symbolOffsetY = 8.25;
+
+ break;
+ }
+ default:
+ {
+
+ layoutGap = 4;
+ minWidth = 32;
+ minHeight = 32;
+ iconWidth = 32;
+ iconHeight = 32;
+ symbolWidth = 11;
+ symbolHeight = 11;
+ symbolOffsetX = 11;
+ symbolOffsetY = 11;
+
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ * RadioButton <code>chromeColor</code> is drawn to match the FXG ellipse
+ * shape and position.
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ // super draws a transparent hit zone
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ // get the size and position of iconDisplay
+ var currentIcon:DisplayObject = getIconDisplay();
+
+ graphics.beginFill(getStyle("chromeColor"));
+ graphics.drawEllipse(currentIcon.x + 1, currentIcon.y + 1, currentIcon.width - 2, currentIcon.height - 2);
+ graphics.endFill();
+ }
+
+ /**
+ * @private
+ */
+ override protected function get focusSkinExclusions():Array
+ {
+ return exclusions;
+ }
+
+ override protected function commitCurrentState():void
+ {
+ super.commitCurrentState();
+ if(symbolIcon != null)
+ {
+ symbolIcon.width = symbolWidth;
+ symbolIcon.height = symbolHeight;
+ }
+ var iconDisplay:DisplayObject = getIconDisplay();
+ if(iconDisplay != null)
+ {
+ iconDisplay.width = iconWidth;
+ iconDisplay.height = iconHeight;
+ }
+ }
+
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+ // position the symbols to align with the background "icon"
+ if (symbolIcon)
+ {
+ var currentIcon:DisplayObject = getIconDisplay();
+ setElementPosition(symbolIcon, symbolOffsetX, symbolOffsetY);
+ }
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextAreaSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextAreaSkin.as b/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextAreaSkin.as
new file mode 100644
index 0000000..8064681
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextAreaSkin.as
@@ -0,0 +1,53 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+import flash.display.DisplayObjectContainer;
+import flash.events.MouseEvent;
+
+import spark.components.supportClasses.IStyleableEditableText;
+import spark.components.supportClasses.ScrollableStageText;
+
+/**
+ * ActionScript-based skin for TextArea controls in mobile applications that uses a
+ * ScrollableStageText class for the text display.
+ * <p> and can be used in scrollable forms while allowing precise control of keyboard input.</p>
+ *
+ * @see spark.components.TextArea
+ * @see spark.components.supportClasses.ScrollableStageText
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.12
+ */
+public class ScrollingStageTextAreaSkin extends StageTextAreaSkin
+{
+ public function ScrollingStageTextAreaSkin()
+ {
+ super();
+ }
+
+ override protected function createTextDisplay():IStyleableEditableText
+ {
+ return new ScrollableStageText(multiline);
+ }
+
+}
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextInputSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextInputSkin.as b/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextInputSkin.as
new file mode 100644
index 0000000..75fbee6
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/ScrollingStageTextInputSkin.as
@@ -0,0 +1,54 @@
+
+
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+import flash.display.DisplayObjectContainer;
+import flash.events.MouseEvent;
+import spark.components.supportClasses.IStyleableEditableText;
+import spark.components.supportClasses.ScrollableStageText;
+
+/**
+ * ActionScript-based skin for TextInput controls in mobile applications that uses a
+ * ScrollableStageText class for the text display
+ * <p> and can be used in scrollable forms while allowing precise control of keyboard input.</p>
+ *
+ * @see spark.components.TextInput
+ * @see spark.components.supportClasses.ScrollableStageText
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.12
+ */
+public class ScrollingStageTextInputSkin extends StageTextInputSkin
+{
+ public function ScrollingStageTextInputSkin()
+ {
+ super();
+ }
+
+ override protected function createTextDisplay():IStyleableEditableText
+ {
+ return new ScrollableStageText(multiline);
+ }
+
+}
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/SpinnerListContainerSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/SpinnerListContainerSkin.as b/tourdeflexmobile/src/spark/skins/android4/SpinnerListContainerSkin.as
new file mode 100644
index 0000000..a626c49
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/SpinnerListContainerSkin.as
@@ -0,0 +1,327 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4
+{
+ import flash.display.Graphics;
+ import flash.display.InteractiveObject;
+ import flash.display.Sprite;
+
+ import mx.core.DPIClassification;
+ import mx.core.mx_internal;
+
+ import spark.components.Group;
+ import spark.components.SpinnerListContainer;
+ import spark.layouts.HorizontalLayout;
+ import spark.skins.android4.assets.SpinnerListContainerBackground;
+ import spark.skins.android4.assets.SpinnerListContainerSelectionIndicator;
+ import spark.skins.android4.assets.SpinnerListContainerShadow;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+ /**
+ * ActionScript-based skin for the SpinnerListContainer in mobile applications.
+ *
+ * @see spark.components.SpinnerListContainer
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public class SpinnerListContainerSkin extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ *
+ */
+ public function SpinnerListContainerSkin()
+ {
+ super();
+
+ borderClass = spark.skins.android4.assets.SpinnerListContainerBackground;
+ selectionIndicatorClass = spark.skins.android4.assets.SpinnerListContainerSelectionIndicator;
+ shadowClass = spark.skins.android4.assets.SpinnerListContainerShadow;
+ cornerRadius = 0;
+ borderThickness = 0;
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ selectionIndicatorHeight = 182;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ selectionIndicatorHeight = 144;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ selectionIndicatorHeight = 96;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ selectionIndicatorHeight = 72;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ selectionIndicatorHeight = 36;
+ break;
+ }
+ default: // default DPI_160
+ {
+ selectionIndicatorHeight = 48;
+
+ break;
+ }
+ }
+
+ minWidth = 30;
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Pixel thickness of the border.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var borderThickness:Number;
+
+ /**
+ * Radius of the border corners.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var cornerRadius:Number;
+
+ /**
+ * Height of the selection indicator.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var selectionIndicatorHeight:Number;
+
+ /**
+ * Class for the border part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var borderClass:Class;
+
+ /**
+ * Class for the selection indicator skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var selectionIndicatorClass:Class;
+
+ /**
+ * Class for the shadow skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var shadowClass:Class;
+
+ /**
+ * Border skin part which includes the background.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var border:InteractiveObject;
+
+ /**
+ * Selection indicator skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var selectionIndicator:InteractiveObject;
+
+ /**
+ * Shadow skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var shadow:InteractiveObject;
+
+ /**
+ * Mask for the content group.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var contentGroupMask:Sprite;
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * An optional skin part that defines the Group where the content
+ * children are pushed into and laid out.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public var contentGroup:Group;
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public var hostComponent:SpinnerListContainer;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden Methods
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ super.createChildren();
+
+ if (!border)
+ {
+ // Border and background
+ border = new borderClass();
+ border.mouseEnabled = false;
+ addChild(border);
+ }
+
+ if (!contentGroup)
+ {
+ // Contains the child elements
+ contentGroup = new Group();
+ var hLayout:HorizontalLayout = new HorizontalLayout();
+ hLayout.gap = 0;
+ hLayout.verticalAlign = "middle";
+ contentGroup.layout = hLayout;
+ contentGroup.id = "contentGroup";
+ addChild(contentGroup);
+ }
+
+ if (!shadow)
+ {
+ // Shadowing sits on top of the content
+ shadow = new shadowClass();
+ shadow.mouseEnabled = false;
+ addChild(shadow);
+ }
+
+
+ if (!contentGroupMask)
+ {
+ // Create a mask for the content
+ contentGroupMask = new Sprite();
+ addChild(contentGroupMask);
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ super.measure();
+
+ var contentW:Number = contentGroup.getPreferredBoundsWidth();
+ var contentH:Number = contentGroup.getPreferredBoundsHeight();
+
+ measuredWidth = measuredMinWidth = contentW + borderThickness * 2;
+ measuredHeight = contentH + borderThickness * 2;
+
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ setElementSize(contentGroup, unscaledWidth - borderThickness * 2, unscaledHeight - borderThickness * 2);
+ setElementPosition(contentGroup, borderThickness, borderThickness);
+
+ // Inset by the borderThickness horizontally because the selectionIndicator starts at 0
+ setElementSize(border, unscaledWidth - borderThickness * 2, unscaledHeight);
+ setElementPosition(border, borderThickness, 0);
+
+ setElementSize(shadow, unscaledWidth - borderThickness * 4, measuredHeight - borderThickness * 2);
+ setElementPosition(shadow, borderThickness * 2, unscaledHeight/2 - measuredHeight/2);
+
+ // The SpinnerLists contain a left and right border. We don't want to show the leftmost
+ // SpinnerLists's left border nor the rightmost one's right border.
+ // We inset the mask on the left and right sides to accomplish this.
+ var g:Graphics = contentGroupMask.graphics;
+ g.clear();
+ g.beginFill(0x00FF00);
+ g.drawRoundRect(borderThickness * 2, borderThickness, unscaledWidth - borderThickness * 4, unscaledHeight - borderThickness * 2, cornerRadius, cornerRadius);
+ g.endFill();
+
+ contentGroup.mask = contentGroupMask;
+ }
+ }
+}
+
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/SpinnerListScrollerSkin.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/SpinnerListScrollerSkin.mxml b/tourdeflexmobile/src/spark/skins/android4/SpinnerListScrollerSkin.mxml
new file mode 100644
index 0000000..270818e
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/SpinnerListScrollerSkin.mxml
@@ -0,0 +1,94 @@
+<?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.
+
+-->
+
+
+<!--
+
+Scroller unconditionally sets its skin's layout to private layout
+implementation that handles the scroll policies. Scroller skins can
+only provide replacement scrollbars. The skin's layout and
+constraints or dimensions set on skin parts will not be honored. To
+gain more control over the layout of a viewport and its scrollbars,
+instead of using Scroller, add them to a Group and use the ScrollBar component's
+viewport property to link them together.
+
+-->
+
+<!--- The default skin class for the Spark Scroller that is used by the SpinnerList component.
+
+@see spark.components.SpinnerList
+@see spark.components.Scroller
+
+@langversion 3.0
+@playerversion AIR 3
+@productversion Flex 4.6
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ [HostComponent("spark.components.Scroller")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ <![CDATA[
+ /**
+ * @private
+ */
+ override public function beginHighlightBitmapCapture() : Boolean
+ {
+ var needUpdate:Boolean = super.beginHighlightBitmapCapture();
+
+ // Draw an opaque rect that fill our entire skin. Our background
+ // is transparent, but we don't want focus/error skins to
+ // poke through. This is safe to do since we don't have any
+ // graphic elements as direct children.
+ graphics.beginFill(0);
+ graphics.drawRect(0, 0, width, height);
+ graphics.endFill();
+
+ return needUpdate;
+ }
+
+ /**
+ * @private
+ */
+ override public function endHighlightBitmapCapture() : Boolean
+ {
+ var needUpdate:Boolean = super.endHighlightBitmapCapture();
+
+ // Clear the rect we drew in beginBitmapCapture();
+ graphics.clear();
+
+ return needUpdate;
+ }
+ ]]>
+ </fx:Script>
+
+</s:SparkSkin>
+
[20/22] git commit: [flex-examples] [refs/heads/develop] - updated
Posted by bi...@apache.org.
updated
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/955a7beb
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/955a7beb
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/955a7beb
Branch: refs/heads/develop
Commit: 955a7beb43bc0684b12538e8d9671d1bbbf4ff10
Parents: 4afeeb4
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Tue Nov 4 13:22:15 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:44 2014 -0800
----------------------------------------------------------------------
README.md | 6 ------
1 file changed, 6 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/955a7beb/README.md
----------------------------------------------------------------------
diff --git a/README.md b/README.md
index 7ff5b4c..2b971a6 100644
--- a/README.md
+++ b/README.md
@@ -4,9 +4,3 @@ flex-examples
Mirror of Apache Flex Examples
This is a modified version of the new TourDeFlexMobile application that was uploaded to the ApacheFlexExample.
-
-Some Additional code was added to mirror the behavior of the Android Facebook application. Click to slide the main navigator off exposing a list and use mouse events to slide the navigator closed.
-
-The code used to slide off the navigator and slide it back was used from the Madcomponents source code. I modified it to work in a flex environment. It is not as smooth as a pure Madcomonent app, because it does not use Stage3D.
-
-***Just added a new mousedown event to slide the top navigator off.***
\ No newline at end of file
[16/22] added in Android Skins
Posted by bi...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/SpinnerListSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/SpinnerListSkin.as b/tourdeflexmobile/src/spark/skins/android4/SpinnerListSkin.as
new file mode 100644
index 0000000..006fddb
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/SpinnerListSkin.as
@@ -0,0 +1,293 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4
+{
+ import flash.display.InteractiveObject;
+
+ import mx.core.ClassFactory;
+ import mx.core.DPIClassification;
+ import mx.core.mx_internal;
+
+ import spark.components.DataGroup;
+ import spark.components.Scroller;
+ import spark.components.SpinnerList;
+ import spark.components.SpinnerListItemRenderer;
+ import spark.layouts.VerticalSpinnerLayout;
+ import spark.skins.android4.assets.SpinnerListContainerSelectionIndicator;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+
+ use namespace mx_internal;
+ /**
+ * ActionScript-based skin for the SpinnerList in mobile applications.
+ *
+ * @see spark.components.SpinnerList
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public class SpinnerListSkin extends MobileSkin
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public function SpinnerListSkin()
+ {
+ super();
+
+ selectionIndicatorClass = spark.skins.android4.assets.SpinnerListContainerSelectionIndicator;
+ borderThickness = 1;
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ selectionIndicatorHeight = 182;
+ minWidth = 64;
+ borderThickness = 3;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ selectionIndicatorHeight = 144;
+ minWidth = 48;
+ borderThickness = 2;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ selectionIndicatorHeight = 96;
+ minWidth = 32;
+ borderThickness = 2;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ selectionIndicatorHeight = 72;
+ minWidth = 24;
+ borderThickness = 1;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ selectionIndicatorHeight = 36;
+ minWidth = 12;
+ borderThickness = 0;
+ break;
+ }
+ default:
+ {
+ selectionIndicatorHeight = 48;
+ minWidth = 16;
+ borderThickness = 1;
+ }
+ }
+
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Scroller skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public var scroller:Scroller;
+
+ /**
+ * DataGroup skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public var dataGroup:DataGroup;
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public var hostComponent:SpinnerList;
+
+ /**
+ * Pixel size of the border.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var borderThickness:int;
+
+ /**
+ * Class for the selection indicator skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var selectionIndicatorClass:Class;
+
+ /**
+ * Selection indicator skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var selectionIndicator:InteractiveObject;
+
+ /**
+ * Height of the selection indicator.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var selectionIndicatorHeight:Number;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden Methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function commitCurrentState():void
+ {
+ super.commitCurrentState();
+
+ alpha = currentState.indexOf("disabled") == -1 ? 1 : 0.5;
+ }
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ super.createChildren();
+
+ if (!dataGroup)
+ {
+ // Create data group layout
+ var layout:VerticalSpinnerLayout = new VerticalSpinnerLayout();
+ layout.requestedRowCount = 5;
+ // Create data group
+ dataGroup = new DataGroup();
+ dataGroup.id = "dataGroup";
+ dataGroup.layout = layout;
+
+ dataGroup.itemRenderer = new ClassFactory(spark.components.SpinnerListItemRenderer);
+ }
+
+ if (!scroller)
+ {
+ // Create scroller
+ scroller = new Scroller();
+ scroller.id = "scroller";
+ scroller.hasFocusableChildren = false;
+ scroller.ensureElementIsVisibleForSoftKeyboard = false;
+ // Only support vertical scrolling
+ scroller.setStyle("verticalScrollPolicy","on");
+ scroller.setStyle("horizontalScrollPolicy", "off");
+ scroller.setStyle("skinClass", spark.skins.android4.SpinnerListScrollerSkin);
+
+ addChild(scroller);
+ }
+
+ if (!selectionIndicator)
+ {
+ // Selection indicator is on top
+ selectionIndicator = new selectionIndicatorClass();
+ selectionIndicator.mouseEnabled = false;
+ addChild(selectionIndicator);
+ }
+
+ // Associate scroller with data group
+ if (!scroller.viewport)
+ scroller.viewport = dataGroup;
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ measuredWidth = scroller.getPreferredBoundsWidth() + borderThickness * 2;
+ measuredHeight = scroller.getPreferredBoundsHeight();
+ //add in for selection indicator
+ measuredMinHeight = selectionIndicatorHeight + borderThickness * 4;
+ minHeight = measuredMinHeight;
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ // Scroller
+ setElementSize(scroller, unscaledWidth - borderThickness * 2, unscaledHeight);
+ setElementPosition(scroller, borderThickness, 0);
+ //selection indicator
+ unscaledHeight = Math.max(unscaledHeight, selectionIndicatorHeight + borderThickness * 4);
+
+ setElementSize(selectionIndicator, unscaledWidth, selectionIndicatorHeight);
+ setElementPosition(selectionIndicator, 0, Math.floor((unscaledHeight - selectionIndicatorHeight) / 2));
+ }
+
+ /**
+ * @private
+ */
+ override public function styleChanged(styleProp:String):void
+ {
+ // Reinitialize the typical element so it picks up the latest styles
+ // Font styles might impact the size of the SpinnerList
+ if (styleProp != "color" && styleProp != "accentColor")
+ {
+ if (dataGroup)
+ dataGroup.invalidateTypicalItemRenderer();
+ }
+
+ super.styleChanged(styleProp);
+ }
+
+ }
+}
+
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/SplitViewNavigatorSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/SplitViewNavigatorSkin.as b/tourdeflexmobile/src/spark/skins/android4/SplitViewNavigatorSkin.as
new file mode 100644
index 0000000..ee06eea
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/SplitViewNavigatorSkin.as
@@ -0,0 +1,157 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+ import mx.core.mx_internal;
+
+ import spark.components.Callout;
+ import spark.components.Group;
+ import spark.components.SkinnablePopUpContainer;
+ import spark.components.SplitViewNavigator;
+ import spark.layouts.HorizontalLayout;
+ import spark.skins.mobile.supportClasses.MobileSkin;
+
+ use namespace mx_internal;
+
+ /**
+ * The default skin for the SplitViewNavigator component. This skin is
+ * chromeless and doesn't draw a background, border or separator.
+ * It only contains a single content group with a horizontal layout to hold
+ * the navigators, and a Callout component.
+ * The Callout component uses the default values for its layout properties.
+ *
+ * @see spark.components.Callout
+ * @see spark.components.SplitViewNavigator
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public class SplitViewNavigatorSkin extends MobileSkin
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ public function SplitViewNavigatorSkin()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // SkinParts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.components.SkinnableContainer#contentGroup
+ */
+ public var contentGroup:Group;
+
+ /**
+ * @copy spark.components.SplitViewNavigator#viewNavigatorPopUp
+ */
+ public var viewNavigatorPopUp:SkinnablePopUpContainer;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:SplitViewNavigator;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden Methods
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ // Create the layout for the content group
+ var hLayout:HorizontalLayout = new HorizontalLayout();
+
+ // A gap of 1 is used to reveal a thin line of the background between
+ // each child navigator. This serves as a divider. To change the look
+ // of the divider, change the backgroundColor style.
+ hLayout.gap = 1;
+
+ // Create the contentGroup
+ contentGroup = new Group();
+ contentGroup.id = "contentGroup";
+ contentGroup.layout = hLayout;
+ addChild(contentGroup);
+
+ // Create the callout but don't add it to display list
+ viewNavigatorPopUp = new Callout();
+ viewNavigatorPopUp.id = "viewNavigatorPopUp";
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ super.measure();
+
+ measuredWidth = contentGroup.getPreferredBoundsWidth();
+ measuredHeight = contentGroup.getPreferredBoundsHeight();
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ contentGroup.setLayoutBoundsSize(unscaledWidth, unscaledHeight);
+ contentGroup.setLayoutBoundsPosition(0, 0);
+ }
+
+ /**
+ * @private
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ // Background is used to draw the divider between each navigator
+ var color:uint = getStyle("backgroundColor");
+ graphics.beginFill(color);
+ graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
+ graphics.endFill();
+ }
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/StageTextAreaSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/StageTextAreaSkin.as b/tourdeflexmobile/src/spark/skins/android4/StageTextAreaSkin.as
new file mode 100644
index 0000000..97daa08
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/StageTextAreaSkin.as
@@ -0,0 +1,185 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+import mx.utils.Platform;
+
+import spark.components.TextArea;
+import spark.components.supportClasses.StyleableTextField;
+import spark.skins.android4.supportClasses.StageTextSkinBase;
+
+use namespace mx_internal;
+
+/**
+ * ActionScript-based skin for TextArea controls in mobile applications that uses a
+ * StyleableStageText class for the text display.
+ *
+ * @see spark.components.TextArea
+ * @see spark.components.supportClasses.StyleableStageText
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.6
+ */
+public class StageTextAreaSkin extends StageTextSkinBase
+{
+ //--------------------------------------------------------------------------
+ //
+ // Class variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * The underlying native text control on iOS has internal margins of its
+ * own. In order to remain faithful to the paddingTop and paddingBottom
+ * style values that developers may specify, those internal margins need to
+ * be compensated for. This variable contains size of that compensation in
+ * pixels.
+ */
+ mx_internal static var iOSVerticalPaddingAdjustment:Number = 5;
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.6
+ */
+ public function StageTextAreaSkin()
+ {
+ super();
+ multiline = true;
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ measuredDefaultHeight = 212;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ measuredDefaultHeight = 140;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ measuredDefaultHeight = 106;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ measuredDefaultHeight = 70;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ measuredDefaultHeight = 35;
+ break;
+ }
+ default:
+ {
+ measuredDefaultHeight = 48;
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:TextArea; // SkinnableComponent will populate
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ // base class handles border position & size
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ // position & size the text
+ var paddingLeft:Number = getStyle("paddingLeft");
+ var paddingRight:Number = getStyle("paddingRight");
+ var paddingTop:Number = getStyle("paddingTop");
+ var paddingBottom:Number = getStyle("paddingBottom");
+
+ var unscaledTextWidth:Number = Math.max(0, unscaledWidth - paddingLeft - paddingRight);
+ var unscaledTextHeight:Number = Math.max(0, unscaledHeight - paddingTop - paddingBottom);
+
+ if (textDisplay)
+ {
+ var verticalPosAdjustment:Number = 0;
+ var heightAdjustment:Number = 0;
+
+ if (Platform.isIOS)
+ {
+ verticalPosAdjustment = Math.min(iOSVerticalPaddingAdjustment, paddingTop);
+ heightAdjustment = verticalPosAdjustment + Math.min(iOSVerticalPaddingAdjustment, paddingBottom);
+ }
+
+ textDisplay.commitStyles();
+ setElementSize(textDisplay, unscaledTextWidth, unscaledTextHeight + heightAdjustment);
+ setElementPosition(textDisplay, paddingLeft, paddingTop - verticalPosAdjustment);
+ }
+
+ if (promptDisplay)
+ {
+ if (promptDisplay is StyleableTextField)
+ StyleableTextField(promptDisplay).commitStyles();
+
+ setElementSize(promptDisplay, unscaledTextWidth, unscaledTextHeight);
+ setElementPosition(promptDisplay, paddingLeft, paddingTop);
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ super.measure();
+ measureTextComponent(hostComponent);
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/StageTextInputSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/StageTextInputSkin.as b/tourdeflexmobile/src/spark/skins/android4/StageTextInputSkin.as
new file mode 100644
index 0000000..4bcc4d9
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/StageTextInputSkin.as
@@ -0,0 +1,130 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+import spark.components.TextInput;
+import spark.components.supportClasses.StyleableTextField;
+import spark.skins.android4.supportClasses.StageTextSkinBase;
+
+/**
+ * ActionScript-based skin for TextInput controls in mobile applications that uses a
+ * StyleableStageText class for the text input.
+ *
+ * @see spark.components.TextInput
+ * @see spark.components.supportClasses.StyleableStageText
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.6
+ */
+public class StageTextInputSkin extends StageTextSkinBase
+{
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3.0
+ * @productversion Flex 4.6
+ */
+ public function StageTextInputSkin()
+ {
+ super();
+ multiline = false;
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:TextInput; // SkinnableComponent will populate
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ super.measure();
+ measureTextComponent(hostComponent);
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number,
+ unscaledHeight:Number):void
+ {
+ // base class handles border position & size
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ // position & size the text
+ var paddingLeft:Number = getStyle("paddingLeft");
+ var paddingRight:Number = getStyle("paddingRight");
+ var paddingTop:Number = getStyle("paddingTop");
+ var paddingBottom:Number = getStyle("paddingBottom");
+
+ var unscaledTextWidth:Number = Math.max(0, unscaledWidth - paddingLeft - paddingRight);
+ var unscaledTextHeight:Number = Math.max(0, unscaledHeight - paddingTop - paddingBottom);
+
+ // default vertical positioning is centered
+ var textHeight:Number = getElementPreferredHeight(textDisplay);
+ var textY:Number = Math.round(0.5 * (unscaledTextHeight - textHeight)) + paddingTop;
+
+ if (textDisplay)
+ {
+ textDisplay.commitStyles();
+ setElementSize(textDisplay, unscaledTextWidth, unscaledTextHeight);
+ setElementPosition(textDisplay, paddingLeft, textY);
+ }
+
+ if (promptDisplay)
+ {
+ if (promptDisplay is StyleableTextField)
+ StyleableTextField(promptDisplay).commitStyles();
+
+ var promptHeight:Number = getElementPreferredHeight(promptDisplay);
+ var promptY:Number = Math.round(0.5 * (unscaledTextHeight - promptHeight)) + paddingTop;
+
+ setElementSize(promptDisplay, unscaledTextWidth, promptHeight);
+ setElementPosition(promptDisplay, paddingLeft, promptY);
+ }
+ }
+
+ /**
+ * @private
+ */
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TabbedViewNavigatorTabBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TabbedViewNavigatorTabBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/TabbedViewNavigatorTabBarSkin.as
new file mode 100644
index 0000000..eea5948
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TabbedViewNavigatorTabBarSkin.as
@@ -0,0 +1,122 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+import spark.components.ButtonBarButton;
+import spark.components.DataGroup;
+import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
+import spark.skins.mobile.supportClasses.TabbedViewNavigatorTabBarHorizontalLayout;
+
+/**
+ * The Android 4.x specific skin class for the Spark TabbedViewNavigator tabBar skin part.
+ * It uses the ButtonBarFirstButtonSkin and ButtonBarMiddleButtonSkin as skins for first
+ * middle buttons
+ *
+ * @see spark.components.TabbedViewNavigator#tabBar
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+public class TabbedViewNavigatorTabBarSkin extends ButtonBarSkin
+{
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function TabbedViewNavigatorTabBarSkin()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ if (!firstButton)
+ {
+ firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+ firstButton.skinClass = spark.skins.android4.ButtonBarFirstButtonSkin;
+ }
+
+ if (!lastButton)
+ {
+ lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+ lastButton.skinClass = spark.skins.android4.ButtonBarFirstButtonSkin;
+ }
+
+ if (!middleButton)
+ {
+ middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
+ middleButton.skinClass = spark.skins.android4.ButtonBarMiddleButtonSkin;
+ }
+
+ if (!dataGroup)
+ {
+ // TabbedViewNavigatorButtonBarHorizontalLayout for even percent layout
+ var tabLayout:TabbedViewNavigatorTabBarHorizontalLayout =
+ new TabbedViewNavigatorTabBarHorizontalLayout();
+ tabLayout.useVirtualLayout = false;
+
+ dataGroup = new DataGroup();
+ dataGroup.layout = tabLayout;
+ addChild(dataGroup);
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ // backgroundAlpha style is not supported by ButtonBar
+ // TabbedViewNavigatorSkin sets a hard-coded value to support
+ // overlayControls
+ var backgroundAlphaValue:* = getStyle("backgroundAlpha");
+ var backgroundAlpha:Number = (backgroundAlphaValue === undefined)
+ ? 1 : getStyle("backgroundAlpha");
+
+ graphics.beginFill(getStyle("chromeColor"), backgroundAlpha);
+ graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
+ graphics.endFill();
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TextAreaHScrollBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TextAreaHScrollBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/TextAreaHScrollBarSkin.as
new file mode 100644
index 0000000..540318e
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TextAreaHScrollBarSkin.as
@@ -0,0 +1,105 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4
+{
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+use namespace mx_internal;
+
+ /**
+ * The default skin class for the Spark TextAreaHScrollBar component in mobile
+ * applications.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+public class TextAreaHScrollBarSkin extends HScrollBarSkin
+{
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function TextAreaHScrollBarSkin()
+ {
+ super();
+
+ thumbSkinClass = TextAreaHScrollBarThumbSkin;
+ var paddingBottom:int;
+ var paddingHorizontal:int;
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ minHeight = 30;
+ paddingBottom = TextAreaHScrollBarThumbSkin.PADDING_BOTTOM_320DPI;
+ paddingHorizontal = TextAreaHScrollBarThumbSkin.PADDING_HORIZONTAL_320DPI;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ minHeight = 22;
+ paddingBottom = TextAreaHScrollBarThumbSkin.PADDING_BOTTOM_480DPI;
+ paddingHorizontal = TextAreaHScrollBarThumbSkin.PADDING_HORIZONTAL_480DPI;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ minHeight = 15;
+ paddingBottom = TextAreaHScrollBarThumbSkin.PADDING_BOTTOM_320DPI;
+ paddingHorizontal = TextAreaHScrollBarThumbSkin.PADDING_HORIZONTAL_320DPI;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ minHeight = 11;
+ paddingBottom = TextAreaHScrollBarThumbSkin.PADDING_BOTTOM_240DPI;
+ paddingHorizontal = TextAreaHScrollBarThumbSkin.PADDING_HORIZONTAL_240DPI;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ minHeight = 11;
+ paddingBottom = TextAreaHScrollBarThumbSkin.PADDING_BOTTOM_120DPI;
+ paddingHorizontal = TextAreaHScrollBarThumbSkin.PADDING_HORIZONTAL_120DPI;
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+ minHeight = 9;
+ paddingBottom = TextAreaHScrollBarThumbSkin.PADDING_BOTTOM_DEFAULTDPI;
+ paddingHorizontal = TextAreaHScrollBarThumbSkin.PADDING_HORIZONTAL_DEFAULTDPI;
+ break;
+ }
+ }
+
+ // The minimum width is set such that, at it's smallest size, the thumb appears
+ // as wide as it is high.
+ minThumbWidth = (minHeight - paddingBottom) + (paddingHorizontal * 2);
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TextAreaHScrollBarThumbSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TextAreaHScrollBarThumbSkin.as b/tourdeflexmobile/src/spark/skins/android4/TextAreaHScrollBarThumbSkin.as
new file mode 100644
index 0000000..5d3fec8
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TextAreaHScrollBarThumbSkin.as
@@ -0,0 +1,116 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4
+{
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+use namespace mx_internal;
+
+/**
+ * The ActionScript-based skin used for TextAreaHScrollBarThumb components
+ * in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+public class TextAreaHScrollBarThumbSkin extends HScrollBarThumbSkin
+{
+ //--------------------------------------------------------------------------
+ //
+ // Class constants
+ //
+ //--------------------------------------------------------------------------
+
+ // These constants are also accessed from HScrollBarSkin
+ mx_internal static const PADDING_BOTTOM_640DPI:int = 16;
+ mx_internal static const PADDING_HORIZONTAL_640DPI:int = 16;
+ mx_internal static const PADDING_BOTTOM_480DPI:int = 12;
+ mx_internal static const PADDING_HORIZONTAL_480DPI:int = 12;
+ mx_internal static const PADDING_BOTTOM_320DPI:int = 8;
+ mx_internal static const PADDING_HORIZONTAL_320DPI:int = 12;
+ mx_internal static const PADDING_BOTTOM_240DPI:int = 6;
+ mx_internal static const PADDING_HORIZONTAL_240DPI:int = 6;
+ mx_internal static const PADDING_BOTTOM_120DPI:int = 3;
+ mx_internal static const PADDING_HORIZONTAL_120DPI:int = 3;
+ mx_internal static const PADDING_BOTTOM_DEFAULTDPI:int = 4;
+ mx_internal static const PADDING_HORIZONTAL_DEFAULTDPI:int = 6;
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function TextAreaHScrollBarThumbSkin()
+ {
+ super();
+
+ // Depending on density set padding
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ paddingBottom = PADDING_BOTTOM_640DPI;
+ paddingHorizontal = PADDING_HORIZONTAL_640DPI;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ paddingBottom = TextAreaHScrollBarThumbSkin.PADDING_BOTTOM_480DPI;
+ paddingHorizontal = TextAreaHScrollBarThumbSkin.PADDING_HORIZONTAL_480DPI;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ paddingBottom = PADDING_BOTTOM_320DPI;
+ paddingHorizontal = PADDING_HORIZONTAL_320DPI;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ paddingBottom = PADDING_BOTTOM_240DPI;
+ paddingHorizontal = PADDING_HORIZONTAL_240DPI;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ paddingBottom = PADDING_BOTTOM_120DPI;
+ paddingHorizontal = PADDING_HORIZONTAL_120DPI;
+ break;
+ }
+ default:
+ {
+ paddingBottom = PADDING_BOTTOM_DEFAULTDPI;
+ paddingHorizontal = PADDING_HORIZONTAL_DEFAULTDPI;
+ break;
+ }
+ }
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TextAreaSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TextAreaSkin.as b/tourdeflexmobile/src/spark/skins/android4/TextAreaSkin.as
new file mode 100644
index 0000000..6d1fa52
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TextAreaSkin.as
@@ -0,0 +1,892 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package spark.skins.android4
+{
+
+ import flash.events.Event;
+ import flash.events.FocusEvent;
+ import flash.events.KeyboardEvent;
+ import flash.events.MouseEvent;
+ import flash.events.SoftKeyboardEvent;
+ import flash.geom.Point;
+ import flash.geom.Rectangle;
+ import flash.system.Capabilities;
+ import flash.text.TextLineMetrics;
+ import flash.ui.Keyboard;
+
+ import mx.core.DPIClassification;
+ import mx.core.EventPriority;
+ import mx.core.FlexGlobals;
+ import mx.core.mx_internal;
+ import mx.events.FlexEvent;
+ import mx.utils.Platform;
+
+ import spark.components.Group;
+ import spark.components.Scroller;
+ import spark.components.TextArea;
+ import spark.components.supportClasses.StyleableTextField;
+ import spark.events.CaretBoundsChangeEvent;
+ import spark.skins.android4.supportClasses.TextSkinBase;
+
+ use namespace mx_internal;
+
+ /**
+ * ActionScript-based skin for TextArea components in mobile applications.
+ *
+ * @see spark.components.TextArea
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public class TextAreaSkin extends TextSkinBase
+ {
+ /**
+ * @private
+ * Right-margin of iOS native text control when editing on a retina display
+ * based on fontSize 32.
+ */
+ mx_internal static var IOS_RIGHT_MARGIN_320:Number = 19;
+
+ /**
+ * @private
+ * Right-margin of iOS native text control when editing on a retina display
+ * based on fontSize 16 scaling from applicationDPI 160.
+ */
+ mx_internal static var IOS_RIGHT_MARGIN_160_SCALED_TO_320:Number = 9.4;
+
+ /**
+ * @private
+ * Right-margin of iOS native text control when editing on a standard display
+ * based on fontSize 16 and runtimeDPI 160.
+ */
+ mx_internal static var IOS_RIGHT_MARGIN_160:Number = 20.6;
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public function TextAreaSkin()
+ {
+ super();
+
+ addEventListener(Event.RESIZE, resizeHandler);
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ measuredDefaultWidth = 1024;
+ measuredDefaultHeight = 212;
+ layoutBorderSize = 4;
+ flatheight = 9;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ measuredDefaultWidth = 880;
+ measuredDefaultHeight = 140;
+ layoutBorderSize = 3;
+ flatheight = 7;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ measuredDefaultWidth = 612;
+ measuredDefaultHeight = 106;
+ layoutBorderSize = 2;
+ flatheight = 6;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ measuredDefaultWidth = 440;
+ measuredDefaultHeight = 70;
+ layoutBorderSize = 2;
+ flatheight = 5;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ measuredDefaultWidth = 220;
+ measuredDefaultHeight = 35;
+ layoutBorderSize = 1;
+ flatheight = 2;
+ break;
+ }
+ default:
+ {
+ measuredDefaultWidth = 306;
+ measuredDefaultHeight = 53;
+ layoutBorderSize = 1;
+ flatheight = 3;
+ break;
+ }
+ }
+ addEventListener(FocusEvent.FOCUS_IN, focusChangeHandler);
+ addEventListener(FocusEvent.FOCUS_OUT, focusChangeHandler);
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Skin parts
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Scroller skin part.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+ public var scroller:Scroller;
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ public var hostComponent:TextArea;
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ protected var isFocused:Boolean = false;
+
+ protected var flatheight:uint;
+
+ /**
+ * @private
+ * The width of the component on the previous layout manager
+ * pass. This gets set in updateDisplayList() and used in measure() on
+ * the next layout pass. This is so our "guessed width" in measure()
+ * will be as accurate as possible since textDisplay is multiline and
+ * the textDisplay height is dependent on the width.
+ *
+ * In the constructor this is actually set based on the DPI.
+ */
+ mx_internal var oldUnscaledWidth:Number;
+
+ private var textDisplayGroup:Group;
+ private var _isIOS:Boolean;
+ private var invalidateCaretPosition:Boolean = true;
+ private var oldCaretBounds:Rectangle = new Rectangle(-1, -1, -1, -1);
+ private var lastTextHeight:Number;
+ private var lastTextWidth:Number;
+
+ private var isTextDisplayTall:Boolean = true;
+ private var growTextDisplay:Boolean = false;
+ private var shrinkTextDisplay:Boolean = false;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function createChildren():void
+ {
+ if (!textDisplay)
+ {
+ // wrap StyleableTextField in UIComponent
+ textDisplay = StyleableTextField(createInFontContext(StyleableTextField));
+ textDisplay.styleName = this;
+ textDisplay.multiline = true;
+ textDisplay.editable = true;
+ textDisplay.lineBreak = getStyle("lineBreak");
+ textDisplay.useTightTextBounds = false;
+ textDisplay.scrollToRangeDelegate = scrollToRange;
+
+ // on iOS, resize the TextField and let the native control handle scrolling
+ _isIOS = Platform.isIOS;
+
+ if (_isIOS)
+ {
+ // hard-coded rightMargin for iOS native text control
+ // this value is independent of the paddingRight style
+ var rightMargin:Number = 0;
+ var isRetina:Boolean = false;
+ var isScaling160to320:Boolean = false;
+
+ // check for scaling
+ if ("runtimeDPI" in FlexGlobals.topLevelApplication)
+ {
+ var runtimeDPI:Number = FlexGlobals.topLevelApplication.runtimeDPI as Number;
+ isRetina = (runtimeDPI == DPIClassification.DPI_320);
+ isScaling160to320 = isRetina
+ && (applicationDPI == DPIClassification.DPI_160);
+ }
+
+ if (isRetina && !isScaling160to320)
+ rightMargin = IOS_RIGHT_MARGIN_320;
+ else if (isRetina && isScaling160to320)
+ rightMargin = IOS_RIGHT_MARGIN_160_SCALED_TO_320;
+ else
+ rightMargin = IOS_RIGHT_MARGIN_160;
+
+ textDisplay.rightMargin = rightMargin;
+ }
+ else
+ {
+ textDisplay.addEventListener(KeyboardEvent.KEY_DOWN, textDisplay_keyHandler);
+ }
+
+ textDisplay.addEventListener(Event.CHANGE, textDisplay_changeHandler);
+ textDisplay.addEventListener(FlexEvent.VALUE_COMMIT, textDisplay_changeHandler);
+ textDisplay.addEventListener(Event.SCROLL, textDisplay_scrollHandler);
+ // Use a lower priority so that the StyleableTextField event handler is called first.
+ // That handler cancels the event and we need to check for that case
+ textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, textDisplay_softKeyboardActivatingHandler, false, EventPriority.DEFAULT_HANDLER);
+ textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, textDisplay_softKeyboardActivateHandler);
+ textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, textDisplay_softKeyboardDeactivateHandler);
+
+ textDisplay.left = getStyle("paddingLeft");
+ textDisplay.top = getStyle("paddingTop");
+ textDisplay.right = getStyle("paddingRight");
+ textDisplay.bottom = getStyle("paddingBottom");
+
+ // wrap StyleableTextComponent in Group for viewport
+ textDisplayGroup = new Group();
+ textDisplayGroup.clipAndEnableScrolling = true;
+ textDisplayGroup.addElement(textDisplay);
+ }
+
+ if (!scroller)
+ {
+ scroller = new Scroller();
+ scroller.minViewportInset = 0;
+ scroller.measuredSizeIncludesScrollBars = false;
+ scroller.ensureElementIsVisibleForSoftKeyboard = false;
+
+ addChild(scroller);
+ }
+
+ if (!scroller.viewport)
+ scroller.viewport = textDisplayGroup;
+
+ super.createChildren();
+ }
+
+ /**
+ * @private
+ * TextArea prompt supports wrapping and multiline
+ */
+ override protected function createPromptDisplay():StyleableTextField
+ {
+ var prompt:StyleableTextField = super.createPromptDisplay();
+ prompt.editable = true;
+ prompt.wordWrap = true;
+
+ return prompt;
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ super.measure();
+
+ var paddingTop:Number = getStyle("paddingTop");
+ var paddingBottom:Number = getStyle("paddingBottom");
+ var paddingLeft:Number = getStyle("paddingLeft");
+ var paddingRight:Number = getStyle("paddingRight");
+
+ // TextDisplay always defaults to 440 pixels wide (the value is DPI dependent),
+ // and tall enough to show all text.
+ //
+ // You can set an explicit width and the height will adjust accordingly. The opposite
+ // is not true: setting an explicit height will not adjust the width accordingly.
+
+ measuredWidth = measuredDefaultWidth;
+
+ // now we need to measure textDisplay's height. Unfortunately, this is tricky and
+ // is dependent on textDisplay's width. Let's use the heuristic that our width
+ // is the same as our last width.
+ // We don't use layoutMeasuredWidth, because that value is just a constant and doesn't
+ // take into account the fact that the TextArea could have an explicitWidth or could
+ // be constrained by some value. However, we still default oldTextDisplayWidth to
+ // be layoutMeasuredWidth the first time through.
+ var textDisplayEstimatedWidth:Number = oldUnscaledWidth - paddingLeft - paddingRight;
+
+ // now we need to measure textDisplay's height. Unfortunately, this is tricky and
+ // is dependent on textDisplay's width.
+ // Use the old textDisplay width as an estimte for the new one.
+ // If we are wrong, we'll find out in updateDisplayList()
+ textDisplay.commitStyles();
+
+ // Clear min sizes first.
+ textDisplay.minWidth = textDisplay.minHeight = NaN;
+
+ // If lineBreak == explicit, always use NaN for estimated width
+ if (getStyle("lineBreak") == "explicit")
+ textDisplayEstimatedWidth = NaN;
+
+ setElementSize(textDisplay, textDisplayEstimatedWidth, NaN);
+
+ measuredHeight = getElementPreferredHeight(textDisplay) + paddingTop + paddingBottom;
+ }
+
+ /**
+ * @private
+ */
+ override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.layoutContents(unscaledWidth, unscaledHeight);
+
+ // position & size border
+ if (border)
+ {
+ setElementSize(border, unscaledWidth, unscaledHeight);
+ setElementPosition(border, 0, 0);
+ }
+
+ setElementSize(scroller, unscaledWidth, unscaledHeight);
+ setElementPosition(scroller, 0, 0);
+
+ // position & size the text
+ var explicitLineBreak:Boolean = getStyle("lineBreak") == "explicit";
+ var paddingLeft:Number = getStyle("paddingLeft");
+ var paddingRight:Number = getStyle("paddingRight");
+ var paddingTop:Number = getStyle("paddingTop");
+ var paddingBottom:Number = getStyle("paddingBottom");
+
+ var unscaledTextWidth:Number = unscaledWidth - paddingLeft - paddingRight;
+ var unscaledTextHeight:Number = unscaledHeight - paddingTop - paddingBottom;
+ var textHeight:Number;
+ var textWidth:Number = explicitLineBreak ? textDisplay.measuredTextSize.x : unscaledTextWidth;
+
+ var lineIndex:int;
+ var topCharIndex:int;
+ var charBounds:Rectangle;
+
+ // grab old measured textDisplay height before resizing it
+ var oldPreferredTextHeight:Number = getElementPreferredHeight(textDisplay);
+
+ // set width first to measure height correctly
+ textDisplay.commitStyles();
+ textDisplay.setLayoutBoundsSize(textWidth, NaN);
+
+ // In iOS, when we go into editing mode, the runtime overlays a native
+ // text control over the textDisplay. In order to prevent the text
+ // from overflowing the component and to get scrolling support, the
+ // native text control must be the same size as the TextArea
+ if (_isIOS)
+ {
+ if (shrinkTextDisplay)
+ {
+ // Switching to edit mode. Convert from viewport scrolling to
+ // TextField scrolling
+ var vsp:Number = textDisplayGroup.verticalScrollPosition;
+
+ var lineMetrics:TextLineMetrics = textDisplay.getLineMetrics(0);
+ var lineHeight:Number = lineMetrics.ascent + lineMetrics.descent;
+
+ // TODO Figure out how to get the x offset. Right now is hard coded to 2
+ // At least half the line should be showing before we scroll to that line
+ // This makes the conversion from pixel to line based scrolling a little less jumpy
+ lineIndex = textDisplay.getLineIndexAtPoint(2, vsp + lineHeight / 2) + 1;
+ textDisplayGroup.verticalScrollPosition = 0;
+ isTextDisplayTall = false;
+ //trace("TAS.layoutContents shrinkText vsp",vsp,"lineIndex",lineIndex);
+ }
+
+ else if (growTextDisplay)
+ {
+ // Leaving edit mode. Convert from TextField scrolling to
+ // viewport scrolling
+ var scrollV:Number = textDisplay.scrollV;
+
+ // TODO (jszeto) investigate using lineMetrics.lineHeight * scrollV instead of getCharBoundaries
+ topCharIndex = textDisplay.getLineOffset(scrollV - 1);
+ charBounds = textDisplay.getCharBoundaries(topCharIndex);
+ // If the charBounds is null, just set vsp to 0
+ if (charBounds == null)
+ charBounds = new Rectangle(0, 0, 0, 0);
+ textDisplay.scrollV = 1;
+ isTextDisplayTall = true;
+ //trace("TAS.layoutContents growText scrollV",scrollV,"topCharIndex",topCharIndex,"charBounds",charBounds);
+ }
+ }
+
+ // TextField height should match its content or the TextArea bounds at minimum
+ // iOS special case to prevent Flex Scroller scrolling when editable
+ if (isTextDisplayTall)
+ textHeight = Math.max(textDisplay.measuredTextSize.y, unscaledTextHeight);
+ else
+ textHeight = unscaledTextHeight;
+
+ // FIXME (jasonsj): iOS native scroll bar appears even when explictHeight
+ // is not specified. Focus-in is jumpy.
+
+ if (promptDisplay)
+ {
+ promptDisplay.commitStyles();
+ setElementSize(promptDisplay, unscaledTextWidth, textHeight);
+ setElementPosition(promptDisplay, paddingLeft, paddingTop);
+
+ // no need to update textDisplay if promptDisplay is present
+ return;
+ }
+
+ // keep track of oldUnscaledWidth so we have a good guess as to the width
+ // of the textDisplay on the next measure() pass
+ oldUnscaledWidth = unscaledWidth;
+
+ // set the width of textDisplay to textWidth.
+ // set the height to oldTextHeight. If the height's actually wrong,
+ // we'll invalidateSize() and go through this layout pass again anyways
+ setElementSize(textDisplay, textWidth, textHeight);
+
+ // Set minWidth/Height on the text so the textDisplayGroup sizes accordingly
+ textDisplay.minWidth = textWidth;
+ textDisplay.minHeight = textHeight;
+ textDisplayGroup.invalidateDisplayList();
+
+ // grab new measured textDisplay height after the textDisplay has taken its final width
+ var newPreferredTextHeight:Number = getElementPreferredHeight(textDisplay);
+
+ // if the resize caused the textDisplay's height to change (because of
+ // text reflow), then we need to remeasure ourselves with our new width
+ if (oldPreferredTextHeight != newPreferredTextHeight)
+ invalidateSize();
+
+ if (_isIOS)
+ {
+ if (shrinkTextDisplay)
+ {
+ scroller.validateNow();
+ textDisplay.scrollV = lineIndex;
+ }
+ else if (growTextDisplay)
+ {
+ scroller.validateNow();
+ textDisplayGroup.verticalScrollPosition = charBounds.y;
+ }
+
+ shrinkTextDisplay = false;
+ growTextDisplay = false;
+ }
+
+ //trace("TAS.layoutContents tH",textHeight,"tW",textWidth,"invalidateCaret",invalidateCaretPosition);
+
+ // checking if text fits in TextArea
+ // does not apply to iOS due to native text editing and scrolling
+ // invalidateCaretPosition will never be true for iOS
+ if (invalidateCaretPosition && isTextDisplayTall)
+ {
+ // if the caret is outside the viewport, update the Group verticalScrollPosition
+ var charIndex:int = textDisplay.selectionBeginIndex;
+ var caretBounds:Rectangle = textDisplay.getCharBoundaries(charIndex);
+ lineIndex = textDisplay.getLineIndexOfChar(charIndex);
+
+ // getCharBoundaries() returns null for new lines
+ if (!caretBounds)
+ {
+ // temporarily insert a character at the caretIndex
+ textDisplay.replaceText(charIndex, charIndex, "W");
+ caretBounds = textDisplay.getCharBoundaries(charIndex);
+ lineIndex = textDisplay.getLineIndexOfChar(charIndex);
+ textDisplay.replaceText(charIndex, charIndex + 1, "");
+ }
+
+ if (caretBounds)
+ {
+ // Scroll the internal Scroller to ensure the caret is visible
+ if (textHeight > unscaledTextHeight)
+ {
+
+ if (charIndex == textDisplay.text.length)
+ {
+ // Make sure textDisplayGroup is validated, otherwise the
+ // verticalScrollPosition may be out of bounds, which will
+ // cause a bounce effect.
+ textDisplayGroup.validateNow();
+ textDisplayGroup.verticalScrollPosition = textHeight;
+ }
+ else
+ {
+ // caretTopPositon and caretBottomPosition are TextField-relative positions
+ // the TextField is inset by padding styles of the TextArea (via the VGroup)
+
+ // adjust top position to 0 when on the first line
+ // caretTopPosition will be negative when off stage
+ var caretTopPosition:Number = ((caretBounds.y) < 0 || (lineIndex == 0))
+ ? 0 : caretBounds.y;
+
+ // caretBottomPosition is the y coordinate of the bottom bounds of the caret
+ var caretBottomPosition:Number = caretBounds.y + caretBounds.height;
+
+ // note that verticalScrollPosition min/max do not account for padding
+ var vspTop:Number = textDisplayGroup.verticalScrollPosition;
+
+ // vspBottom should be the max visible Y in the TextField
+ // coordinate space.
+ // remove paddingBottom for some clearance between caret and border
+ var vspBottom:Number = vspTop + unscaledHeight - paddingTop - paddingBottom;
+
+ // is the caret in or below the padding and viewport?
+ if (caretBottomPosition > vspBottom)
+ {
+ // adjust caretBottomPosition to max scroll position when on the last line
+ if (lineIndex + 1 == textDisplay.numLines)
+ {
+ // use textHeight+paddings instead of textDisplayGroup.contentHeight
+ // Group has not been resized by this point
+ textDisplayGroup.verticalScrollPosition = (textHeight + paddingTop + paddingBottom) - textDisplayGroup.height;
+ }
+ else
+ {
+ // bottom edge of the caret moves just inside the bottom edge of the scroller
+ // add delta between caret and vspBottom
+ textDisplayGroup.verticalScrollPosition = vspTop + (caretBottomPosition - vspBottom);
+ }
+ }
+ // is the caret above the viewport?
+ else if (caretTopPosition < vspTop)
+ {
+ // top edge of the caret moves inside the top edge of the scroller
+ textDisplayGroup.verticalScrollPosition = caretTopPosition;
+ }
+ }
+
+ scroller.validateNow();
+ }
+
+ // Convert to local coordinates
+ // Dispatch an event for an ancestor Scroller
+ // It will scroll the TextArea so the caret is in view
+ convertBoundsToLocal(caretBounds);
+ if (oldCaretBounds == null || caretBounds.bottom != oldCaretBounds.bottom || caretBounds.top != oldCaretBounds.top)
+ {
+ //trace("TAS.layoutContents send caret CHANGE");
+ dispatchEvent(new CaretBoundsChangeEvent(CaretBoundsChangeEvent.CARET_BOUNDS_CHANGE,true,true,oldCaretBounds,caretBounds));
+ }
+
+ oldCaretBounds = caretBounds;
+ }
+
+ invalidateCaretPosition = false;
+ }
+
+ // Make sure final scroll position is valid
+ if (isTextDisplayTall)
+ snapTextScrollPosition();
+ }
+
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.drawBackground(unscaledWidth, unscaledHeight);
+
+ var contentBackgroundColor:uint = getStyle("contentBackgroundColor");
+ var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha");
+ //change border color and thickness when in focus
+ var borderColor:uint = isFocused ? getStyle("focusColor") : getStyle("borderColor");
+ var selectWidth:uint = isFocused ? layoutBorderSize + 1 : layoutBorderSize;
+ if (isNaN(contentBackgroundAlpha))
+ {
+ contentBackgroundAlpha = 1;
+ }
+ if (getStyle("contentBackgroundBorder") == "flat")
+ {
+ var halfGap:int = flatheight * 2;
+ //background
+ graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+ graphics.drawRect(0, 0, unscaledWidth, unscaledHeight - flatheight);
+ graphics.endFill();
+ //begin flat border
+ graphics.beginFill(borderColor, 1);
+ //left half border
+ graphics.drawRect(0, unscaledHeight - halfGap, selectWidth, flatheight );
+ //bottom border
+ graphics.drawRect(0, unscaledHeight - flatheight, unscaledWidth, selectWidth);
+ //right border
+ graphics.drawRect(unscaledWidth - selectWidth, unscaledHeight - halfGap, selectWidth, flatheight);
+ graphics.endFill();
+ }
+ else if (getStyle("contentBackgroundBorder") == "rectangle")
+ {
+ var borderWidth:uint = layoutBorderSize * 2;
+ //rectangle border and background
+ graphics.lineStyle(selectWidth, borderColor, 1);
+ graphics.beginFill(contentBackgroundColor, contentBackgroundAlpha);
+ graphics.drawRect(layoutBorderSize, layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight - borderWidth);
+ graphics.endFill();
+ }
+ }
+
+ /**
+ * @private
+ * Make sure the scroll positions are valid, and adjust if needed.
+ */
+ private function snapTextScrollPosition():void
+ {
+ var maxHsp:Number = textDisplayGroup.contentWidth > textDisplayGroup.width ?
+ textDisplayGroup.contentWidth-textDisplayGroup.width : 0;
+ textDisplayGroup.horizontalScrollPosition =
+ Math.min(Math.max(0,textDisplayGroup.horizontalScrollPosition),maxHsp);
+
+ var maxVsp:Number = textDisplayGroup.contentHeight > textDisplayGroup.height ?
+ textDisplayGroup.contentHeight-textDisplayGroup.height : 0;
+
+ textDisplayGroup.verticalScrollPosition =
+ Math.min(Math.max(0,textDisplayGroup.verticalScrollPosition),maxVsp);
+ }
+
+ /**
+ * @private
+ * Get the bounds of the caret
+ */
+ private function getCaretBounds():Rectangle
+ {
+ var charIndex:int = textDisplay.selectionBeginIndex;
+ var caretBounds:Rectangle = textDisplay.getCharBoundaries(charIndex);
+
+ if (!caretBounds)
+ {
+ textDisplay.replaceText(charIndex, charIndex, "W");
+ caretBounds = textDisplay.getCharBoundaries(charIndex);
+ textDisplay.replaceText(charIndex, charIndex + 1, "");
+ }
+
+ return caretBounds;
+ }
+
+ /**
+ * @private
+ * Convert bounds from textDisplay to local coordinates
+ */
+ private function convertBoundsToLocal(bounds:Rectangle):void
+ {
+ if (bounds)
+ {
+ var position:Point = new Point(bounds.x, bounds.y);
+ position = textDisplay.localToGlobal(position);
+ position = globalToLocal(position);
+ bounds.x = position.x;
+ bounds.y = position.y;
+ }
+ }
+
+ /**
+ * @private
+ */
+ private function scrollToRange(anchorPosition:int, activePosition:int):void
+ {
+ var pos:int = Math.min(anchorPosition, activePosition);
+ var bounds:Rectangle = textDisplay.getCharBoundaries(pos);
+ var vsp:int = textDisplayGroup.verticalScrollPosition;
+ var paddingTop:Number = getStyle("paddingTop");
+ var paddingBottom:Number = getStyle("paddingBottom");
+
+ if (bounds && (bounds.top < vsp - paddingTop ||
+ bounds.bottom > vsp + unscaledHeight - paddingTop - paddingBottom))
+ {
+ textDisplayGroup.verticalScrollPosition = bounds.top + paddingTop;
+ snapTextScrollPosition();
+ }
+ }
+
+ /**
+ * @private
+ * Handle size and caret position changes that occur when text content
+ * changes.
+ */
+ private function textDisplay_changeHandler(event:Event):void
+ {
+ var tH:Number = textDisplay.textHeight;
+ var tW:Number = textDisplay.textWidth;
+ var explicitLineBreak:Boolean = getStyle("lineBreak") == "explicit";
+
+ // Size and caret position have changed if the text height is different or
+ // the text width is different and we aren't word wrapping
+ if (tH != lastTextHeight || ( explicitLineBreak && tW != lastTextWidth))
+ {
+ invalidateSize();
+ invalidateDisplayList();
+ invalidateCaretPosition = true;
+ }
+
+ lastTextHeight = tH;
+ lastTextWidth = tW;
+ }
+
+ /**
+ * @private
+ * Cancels any native scroll that the Flash Player attempts to do
+ */
+ private function textDisplay_scrollHandler(event:Event):void
+ {
+ // if iOS, let the OS handle scrolling
+ if (_isIOS)
+ return;
+
+ // If not IOS, we will handle scrolling, so don't let the native
+ // flash textfield scroll at all.
+ if (textDisplay.scrollV > 1)
+ textDisplay.scrollV = 1;
+ if (textDisplay.scrollH > 0)
+ textDisplay.scrollH = 0;
+ }
+
+ /**
+ * @private
+ * Adjust viewport when using key navigation
+ */
+ private function textDisplay_keyHandler(event:KeyboardEvent):void
+ {
+ // update scroll position when caret changes
+ if ((event.keyCode == Keyboard.UP
+ || event.keyCode == Keyboard.DOWN
+ || event.keyCode == Keyboard.LEFT
+ || event.keyCode == Keyboard.RIGHT))
+ {
+ invalidateDisplayList();
+ invalidateCaretPosition = true;
+ }
+
+ // Change event is not always sent when delete key is pressed, so
+ // invalidate the size here
+ if (event.keyCode == Keyboard.BACKSPACE)
+ {
+ invalidateSize();
+ }
+ }
+
+ /**
+ * @private
+ * When entering edit mode on iOS, we need to shrink the textDisplay to
+ * the size of the TextArea
+ */
+ private function textDisplay_softKeyboardActivatingHandler(event:SoftKeyboardEvent):void
+ {
+ if (event.isDefaultPrevented())
+ return;
+
+ if (_isIOS && isTextDisplayTall)
+ {
+ //trace("TAS.SK ACTIVATING targ",event.target);
+ shrinkTextDisplay = true;
+ invalidateDisplayList();
+ validateNow();
+ }
+ }
+
+ /**
+ * @private
+ * Send a caret change event to an ancestor Scroller
+ */
+ private function textDisplay_softKeyboardActivateHandler(event:SoftKeyboardEvent):void
+ {
+ var keyboardRect:Rectangle = stage.softKeyboardRect;
+
+ if (keyboardRect.width > 0 && keyboardRect.height > 0)
+ {
+ var newCaretBounds:Rectangle = getCaretBounds();
+ convertBoundsToLocal(newCaretBounds);
+
+ if (oldCaretBounds != newCaretBounds)
+ {
+ //trace("TAS.SK ACTIVATE",keyboardRect,"dispatch caret CHANGE","newCaretBounds",newCaretBounds);
+ dispatchEvent(new CaretBoundsChangeEvent(CaretBoundsChangeEvent.CARET_BOUNDS_CHANGE,true,true,oldCaretBounds,newCaretBounds));
+ oldCaretBounds = newCaretBounds;
+ }
+ }
+ }
+
+ /**
+ * @private
+ * On iOS, when leaving edit mode, we need to restore the textDisplay to the
+ * height of the text.
+ */
+ private function textDisplay_softKeyboardDeactivateHandler(event:SoftKeyboardEvent):void
+ {
+ if (_isIOS && !isTextDisplayTall)
+ {
+ growTextDisplay = true;
+ invalidateDisplayList();
+ }
+ }
+
+ /**
+ * @private
+ */
+ private function resizeHandler(event:Event):void
+ {
+ // Resizing needs to tickle the TextArea's internal auto-scroll logic
+ invalidateCaretPosition = true;
+ invalidateDisplayList();
+ }
+
+ /**
+ * @private
+ */
+ override public function styleChanged(styleProp:String):void
+ {
+ super.styleChanged(styleProp);
+
+ // propogate styleChanged explicitly to textDisplay
+ if (textDisplay)
+ textDisplay.styleChanged(styleProp);
+
+ // Check for padding style changes
+ if (!styleProp || styleProp == "styleName" || styleProp.indexOf("padding") >= 0)
+ {
+ if (textDisplay)
+ {
+ textDisplay.left = getStyle("paddingLeft");
+ textDisplay.top = getStyle("paddingTop");
+ textDisplay.right = getStyle("paddingRight");
+ textDisplay.bottom = getStyle("paddingBottom");
+ }
+ }
+ }
+
+ private function focusChangeHandler(event:FocusEvent):void
+ {
+ isFocused = event.type == FocusEvent.FOCUS_IN;
+ invalidateDisplayList();
+ }
+
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TextAreaVScrollBarSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TextAreaVScrollBarSkin.as b/tourdeflexmobile/src/spark/skins/android4/TextAreaVScrollBarSkin.as
new file mode 100644
index 0000000..f65b679
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TextAreaVScrollBarSkin.as
@@ -0,0 +1,105 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4
+{
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+use namespace mx_internal;
+
+/**
+ * ActionScript-based skin for TextAreaVScrollBar components in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.1
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ */
+public class TextAreaVScrollBarSkin extends VScrollBarSkin
+{
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function TextAreaVScrollBarSkin()
+ {
+ super();
+
+ thumbSkinClass = TextAreaVScrollBarThumbSkin;
+ var paddingRight:int;
+ var paddingVertical:int;
+
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ minWidth = 30;
+ paddingRight = TextAreaVScrollBarThumbSkin.PADDING_RIGHT_640DPI;
+ paddingVertical = TextAreaVScrollBarThumbSkin.PADDING_VERTICAL_640DPI;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ minWidth = 22;
+ paddingRight = TextAreaVScrollBarThumbSkin.PADDING_RIGHT_480DPI;
+ paddingVertical = TextAreaVScrollBarThumbSkin.PADDING_VERTICAL_480DPI;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ minWidth = 15;
+ paddingRight = TextAreaVScrollBarThumbSkin.PADDING_RIGHT_320DPI;
+ paddingVertical = TextAreaVScrollBarThumbSkin.PADDING_VERTICAL_320DPI;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ minWidth = 11;
+ paddingRight = TextAreaVScrollBarThumbSkin.PADDING_RIGHT_240DPI;
+ paddingVertical = TextAreaVScrollBarThumbSkin.PADDING_VERTICAL_240DPI;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ minWidth = 6;
+ paddingRight = TextAreaVScrollBarThumbSkin.PADDING_RIGHT_120DPI;
+ paddingVertical = TextAreaVScrollBarThumbSkin.PADDING_VERTICAL_120DPI;
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+ minWidth = 9;
+ paddingRight = TextAreaVScrollBarThumbSkin.PADDING_RIGHT_DEFAULTDPI;
+ paddingVertical = TextAreaVScrollBarThumbSkin.PADDING_VERTICAL_DEFAULTDPI;
+ break;
+ }
+ }
+
+ // The minimum height is set such that, at it's smallest size, the thumb appears
+ // as high as it is wide.
+ minThumbHeight = (minWidth - paddingRight) + (paddingVertical * 2);
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/539852e9/tourdeflexmobile/src/spark/skins/android4/TextAreaVScrollBarThumbSkin.as
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/spark/skins/android4/TextAreaVScrollBarThumbSkin.as b/tourdeflexmobile/src/spark/skins/android4/TextAreaVScrollBarThumbSkin.as
new file mode 100644
index 0000000..5cc1ea0
--- /dev/null
+++ b/tourdeflexmobile/src/spark/skins/android4/TextAreaVScrollBarThumbSkin.as
@@ -0,0 +1,117 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package spark.skins.android4
+{
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+use namespace mx_internal;
+
+/**
+ * The ActionScript-based skin used for TextAreaHScrollBarThumb components
+ * in mobile applications.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+public class TextAreaVScrollBarThumbSkin extends VScrollBarThumbSkin
+{
+ //--------------------------------------------------------------------------
+ //
+ // Class constants
+ //
+ //--------------------------------------------------------------------------
+
+ // These constants are also accessed from TextAreaVScrollBarSkin
+ mx_internal static const PADDING_RIGHT_640DPI:int = 16;
+ mx_internal static const PADDING_VERTICAL_640DPI:int = 24;
+ mx_internal static const PADDING_RIGHT_480DPI:int = 12;
+ mx_internal static const PADDING_VERTICAL_480DPI:int = 18;
+ mx_internal static const PADDING_RIGHT_320DPI:int = 8;
+ mx_internal static const PADDING_VERTICAL_320DPI:int = 12;
+ mx_internal static const PADDING_RIGHT_240DPI:int = 4;
+ mx_internal static const PADDING_VERTICAL_240DPI:int = 6;
+ mx_internal static const PADDING_RIGHT_120DPI:int = 2;
+ mx_internal static const PADDING_VERTICAL_120DPI:int = 3;
+ mx_internal static const PADDING_RIGHT_DEFAULTDPI:int = 4;
+ mx_internal static const PADDING_VERTICAL_DEFAULTDPI:int = 6;
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10
+ * @playerversion AIR 2.5
+ * @productversion Flex 4.5
+ *
+ */
+ public function TextAreaVScrollBarThumbSkin()
+ {
+ super();
+
+ // Depending on density set padding
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ paddingRight = PADDING_RIGHT_640DPI;
+ paddingVertical = PADDING_VERTICAL_640DPI;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ paddingRight = PADDING_RIGHT_480DPI;
+ paddingVertical = PADDING_VERTICAL_480DPI;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ paddingRight = PADDING_RIGHT_320DPI;
+ paddingVertical = PADDING_VERTICAL_320DPI;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ paddingRight = PADDING_RIGHT_240DPI;
+ paddingVertical = PADDING_VERTICAL_240DPI;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ paddingRight = PADDING_RIGHT_120DPI;
+ paddingVertical = PADDING_VERTICAL_120DPI;
+ break;
+ }
+ default:
+ {
+ paddingRight = PADDING_RIGHT_DEFAULTDPI;
+ paddingVertical = PADDING_VERTICAL_DEFAULTDPI;
+ break;
+ }
+ }
+ }
+}
+}
\ No newline at end of file
[19/22] git commit: [flex-examples] [refs/heads/develop] - stack
layout position fix
Posted by bi...@apache.org.
stack layout position fix
Signed-off-by: OmPrakash Muppirala <bi...@gmail.com>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/4afeeb4c
Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/4afeeb4c
Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/4afeeb4c
Branch: refs/heads/develop
Commit: 4afeeb4c0f8fc30bcc5ea6fa4dbd7753fbc16e78
Parents: 539852e
Author: nasha001 <na...@DM-DT-NASH.hartford.gov>
Authored: Tue Nov 4 13:06:51 2014 -0500
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Tue Nov 4 11:07:43 2014 -0800
----------------------------------------------------------------------
tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/4afeeb4c/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
index f3a4ee0..3c0f41f 100644
--- a/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
+++ b/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml
@@ -71,7 +71,7 @@ limitations under the License.
<s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
pageScrollingEnabled="true" includeIn="DemoState">
<s:layout>
- <ns:StackLayout horizontalAlign="justify" verticalAlign="justify" scrollBarDirection="horizontal"/>
+ <ns:StackLayout scrollBarDirection="horizontal" horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:dataProvider>
<s:ArrayList>