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:16:01 UTC
[11/22] updates, new images
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>