You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/03/30 22:18:55 UTC
[royale-asjs] branch develop updated: blog-examples: fix and update
all blog examples with latest Jewel changes and improvements
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 10822e5 blog-examples: fix and update all blog examples with latest Jewel changes and improvements
10822e5 is described below
commit 10822e5fb9d4234a0e15fc0378c03ba58c8145f5
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 31 00:18:50 2020 +0200
blog-examples: fix and update all blog examples with latest Jewel changes and improvements
---
.../royale/BE0002_Using_Jewel_Alert_Control.mxml | 3 ++
.../royale/BE0003_Using_Jewel_Slider_Control.mxml | 1 +
.../BE0004_Adding_an_item_to_a_Jewel_List.mxml | 4 +--
...005_Creating_a_group_of_Jewel_RadioButtons.mxml | 1 +
...f_a_Jewel_Textinput_to_update_a_text_label.mxml | 1 +
...ns_from_a_group_of_jewel_checkbox_controls.mxml | 1 +
..._Using_View_States_to_show_or_hide_content.mxml | 33 +++++++++++++-------
.../BE0009_Using_an_Item_Renderer_with_a_List.mxml | 27 ++++++++++-------
...E0010_Customization_through_the_Royale_API.mxml | 23 ++++++++++----
..._Loading_external_data_through_HTTPService.mxml | 35 ++++++++++++----------
...rnal_javascript_libraries_in_Apache_Royale.mxml | 30 +++++++++++--------
.../MainJewelApp/src/main/royale/MainJewelApp.mxml | 20 ++++++++-----
.../BE0014_Working_with_vector_graphics.mxml | 2 +-
13 files changed, 115 insertions(+), 66 deletions(-)
diff --git a/examples/blog/BE0002_Using_Jewel_Alert_Control/src/main/royale/BE0002_Using_Jewel_Alert_Control.mxml b/examples/blog/BE0002_Using_Jewel_Alert_Control/src/main/royale/BE0002_Using_Jewel_Alert_Control.mxml
index a5094a5..6b357af 100644
--- a/examples/blog/BE0002_Using_Jewel_Alert_Control/src/main/royale/BE0002_Using_Jewel_Alert_Control.mxml
+++ b/examples/blog/BE0002_Using_Jewel_Alert_Control/src/main/royale/BE0002_Using_Jewel_Alert_Control.mxml
@@ -46,6 +46,9 @@
<j:initialView>
<j:View>
+ <j:beads>
+ <j:VerticalCenteredLayout/>
+ </j:beads>
<j:Button id="button" text="Click Me" emphasis="primary" click="clickHandler(event)"/>
</j:View>
</j:initialView>
diff --git a/examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/royale/BE0003_Using_Jewel_Slider_Control.mxml b/examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/royale/BE0003_Using_Jewel_Slider_Control.mxml
index f5f27bf..af08e77 100644
--- a/examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/royale/BE0003_Using_Jewel_Slider_Control.mxml
+++ b/examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/royale/BE0003_Using_Jewel_Slider_Control.mxml
@@ -41,6 +41,7 @@
<j:initialView>
<j:View>
<j:beads>
+ <j:Paddings padding="30"/>
<j:VerticalLayout gap="3"/>
</j:beads>
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/royale/BE0004_Adding_an_item_to_a_Jewel_List.mxml b/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/royale/BE0004_Adding_an_item_to_a_Jewel_List.mxml
index 901d83f..8c03701 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/royale/BE0004_Adding_an_item_to_a_Jewel_List.mxml
+++ b/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/royale/BE0004_Adding_an_item_to_a_Jewel_List.mxml
@@ -39,15 +39,13 @@
<j:initialView>
<j:View>
<j:beads>
+ <j:Paddings padding="30"/>
<j:VerticalLayout gap="3"/>
</j:beads>
<html:H3 text="Avengers Character List"/>
<j:List id="list" width="200" height="300" change="changeHandler(event)">
- <j:beads>
- <j:AddListItemRendererForArrayListData/>
- </j:beads>
<j:dataProvider>
<js:ArrayList id="avengersCharacters" source="[Iron Man, Hulk, Thor, Captain America, Black Widow]" />
</j:dataProvider>
diff --git a/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/src/main/royale/BE0005_Creating_a_group_of_Jewel_RadioButtons.mxml b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/src/main/royale/BE0005_Creating_a_group_of_Jewel_RadioButtons.mxml
index 94d6fdb..6c87c2c 100644
--- a/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/src/main/royale/BE0005_Creating_a_group_of_Jewel_RadioButtons.mxml
+++ b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/src/main/royale/BE0005_Creating_a_group_of_Jewel_RadioButtons.mxml
@@ -33,6 +33,7 @@
<j:initialView>
<j:View>
<j:beads>
+ <j:Paddings padding="30"/>
<j:VerticalLayout gap="3"/>
</j:beads>
diff --git a/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/royale/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label.mxml b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/royale/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label.mxml
index 09c7b9e..118d817 100644
--- a/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/royale/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label.mxml
+++ b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/royale/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label.mxml
@@ -39,6 +39,7 @@
<j:initialView>
<j:View>
<j:beads>
+ <j:Paddings padding="30"/>
<j:VerticalLayout gap="3"/>
</j:beads>
diff --git a/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/royale/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.mxml b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/royale/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.mxml
index d42a9a2..b119999 100644
--- a/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/royale/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.mxml
+++ b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/royale/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.mxml
@@ -42,6 +42,7 @@
<j:initialView>
<j:View>
<j:beads>
+ <j:Paddings padding="30"/>
<j:VerticalLayout gap="3"/>
</j:beads>
diff --git a/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml
index a126e84..4aedb4c 100644
--- a/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml
+++ b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml
@@ -31,22 +31,33 @@
<j:beads>
<js:SimpleStatesImpl/>
+ <j:VerticalCenteredLayout/>
</j:beads>
<j:Card id="loginForm" includeIn="login">
- <html:H1 text="Royale login"/>
- <j:TextInput id="username" text="someuser"/>
- <j:TextInput id="password" text="somepass">
- <j:beads>
- <j:PasswordInput/>
- </j:beads>
- </j:TextInput>
- <j:Button text="Login" emphasis="primary" click="view.currentState = 'loggedIn'" />
+ <j:CardHeader>
+ <html:H3 text="Royale login" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:TextInput id="username" text="someuser"/>
+ <j:TextInput id="password" text="somepass">
+ <j:beads>
+ <j:PasswordInput/>
+ </j:beads>
+ </j:TextInput>
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign="itemsRight">
+ <j:Button text="Login" emphasis="primary" click="view.currentState = 'loggedIn'" />
+ </j:CardActions>
</j:Card>
- <j:Card id="loggedInForm" includeIn="loggedIn">
- <html:H1 text="You are logged in!! :)"/>
- <j:Button text="Logout" click="view.currentState = 'login'"/>
+ <j:Card id="loggedInForm" includeIn="loggedIn" width="50%" height="50%">
+ <j:CardHeader>
+ <html:H3 text="You are logged in!! :)" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent itemsHorizontalAlign="itemsCenter" itemsVerticalAlign="itemsCenter">
+ <j:Button text="Logout" click="view.currentState = 'login'"/>
+ </j:CardPrimaryContent>
</j:Card>
</j:View>
</j:initialView>
diff --git a/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml
index 6510acb..fd56b14 100644
--- a/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml
@@ -44,20 +44,25 @@
<j:initialView>
<j:View>
<j:beads>
- <j:HorizontalCenteredLayout/>
+ <j:VerticalCenteredLayout/>
</j:beads>
- <j:Card width="270">
- <html:H3 text="Jewel List With ItemRenderer"/>
+ <j:Card width="320">
+ <j:CardHeader>
+ <html:H3 text="Jewel List With ItemRenderer" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:List width="100%" height="300" className="iconListItemRenderer">
- <j:beads>
- <js:ConstantBinding
- sourceID="listModel"
- sourcePropertyName="iconListData"
- destinationPropertyName="dataProvider"/>
- </j:beads>
- </j:List>
+ <j:List width="100%" height="300" className="iconListItemRenderer">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="listModel"
+ sourcePropertyName="iconListData"
+ destinationPropertyName="dataProvider"/>
+ </j:beads>
+ </j:List>
+
+ </j:CardPrimaryContent>
</j:Card>
</j:View>
</j:initialView>
diff --git a/examples/blog/BE0010_Customization_through_the_Royale_API/src/main/royale/BE0010_Customization_through_the_Royale_API.mxml b/examples/blog/BE0010_Customization_through_the_Royale_API/src/main/royale/BE0010_Customization_through_the_Royale_API.mxml
index 439a89e..7c35a15 100644
--- a/examples/blog/BE0010_Customization_through_the_Royale_API/src/main/royale/BE0010_Customization_through_the_Royale_API.mxml
+++ b/examples/blog/BE0010_Customization_through_the_Royale_API/src/main/royale/BE0010_Customization_through_the_Royale_API.mxml
@@ -84,16 +84,27 @@
<j:initialView>
<j:View>
<j:beads>
- <j:HorizontalCenteredLayout/>
+ <j:VerticalCenteredLayout/>
</j:beads>
- <j:Card width="350">
- <html:H3 text="Customization through Royale API"/>
+ <j:Card width="400">
+ <j:CardHeader>
+ <html:H3 text="Customization through Royale API" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:Label text="This is a complex example that add and retrieve beads at runtime. Click the button below to display an Alert window that add content and make changes in some layout parts."
+ <j:Label text="This is a complex example that add and retrieve beads at runtime. Click the button below to display an Alert window that add content and make changes in some layout parts."
multiline="true"/>
- <j:Button text="Click Me" click="clickHandler(event)"/>
- <j:Label id="status"/>
+
+ </j:CardPrimaryContent>
+ <j:CardActions itemsVerticalAlign="itemsCentered">
+ <j:BarSection>
+ <j:Label id="status"/>
+ </j:BarSection>
+ <j:BarSection itemsHorizontalAlign="itemsRight">
+ <j:Button text="Click Me" click="clickHandler(event)"/>
+ </j:BarSection>
+ </j:CardActions>
</j:Card>
</j:View>
</j:initialView>
diff --git a/examples/blog/BE0011_Loading_external_data_through_HTTPService/src/main/royale/BE0011_Loading_external_data_through_HTTPService.mxml b/examples/blog/BE0011_Loading_external_data_through_HTTPService/src/main/royale/BE0011_Loading_external_data_through_HTTPService.mxml
index 41e9bc3..dd2590e 100644
--- a/examples/blog/BE0011_Loading_external_data_through_HTTPService/src/main/royale/BE0011_Loading_external_data_through_HTTPService.mxml
+++ b/examples/blog/BE0011_Loading_external_data_through_HTTPService/src/main/royale/BE0011_Loading_external_data_through_HTTPService.mxml
@@ -54,24 +54,29 @@
<j:initialView>
<j:View>
<j:beads>
- <j:HorizontalCenteredLayout/>
+ <j:VerticalCenteredLayout/>
</j:beads>
- <j:Card percentWidth="90">
- <html:H3 text="Loading Github external data through HTTPService"/>
-
- <j:Label text="This example loads its source code in the text code panel:"/>
+ <j:Card width="90%">
+ <j:CardHeader>
+ <html:H3 text="Loading Github external data through HTTPService" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:Label text="This example loads its source code in the text code panel:"/>
- <html:Pre height="300" percentWidth="100" style="background-color: white">
- <html:beads>
- <j:ScrollingViewport/>
- </html:beads>
- <html:Code id="sourceCodeMXMLText"/>
- </html:Pre>
-
- <j:Label id="jsonData" multiline="true" html="This label shows JSON data when loaded."/>
-
- <j:Button text="Retrieve source code from Github" emphasis="primary" click="getGithubContent(event)"/>
+ <html:Pre height="300" width="100%" style="background-color: white">
+ <html:beads>
+ <j:ScrollingViewport/>
+ </html:beads>
+ <html:Code id="sourceCodeMXMLText"/>
+ </html:Pre>
+
+ <j:Label id="jsonData" multiline="true" html="This label shows JSON data when loaded."/>
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign="itemsRight">
+ <j:Button text="Retrieve source code from Github" emphasis="primary" click="getGithubContent(event)"/>
+ </j:CardActions>
</j:Card>
</j:View>
</j:initialView>
diff --git a/examples/blog/BE0012_Using_external_javascript_libraries_in_Apache_Royale/src/main/royale/BE0012_Using_external_javascript_libraries_in_Apache_Royale.mxml b/examples/blog/BE0012_Using_external_javascript_libraries_in_Apache_Royale/src/main/royale/BE0012_Using_external_javascript_libraries_in_Apache_Royale.mxml
index 8f24425..f0c6a7c 100644
--- a/examples/blog/BE0012_Using_external_javascript_libraries_in_Apache_Royale/src/main/royale/BE0012_Using_external_javascript_libraries_in_Apache_Royale.mxml
+++ b/examples/blog/BE0012_Using_external_javascript_libraries_in_Apache_Royale/src/main/royale/BE0012_Using_external_javascript_libraries_in_Apache_Royale.mxml
@@ -46,22 +46,28 @@
<j:initialView>
<j:View>
<j:beads>
- <j:HorizontalCenteredLayout/>
+ <j:VerticalCenteredLayout/>
</j:beads>
<j:Card percentWidth="90">
- <html:H3 text="Using external Javascript Libraries"/>
-
- <j:Label html="This example uses hljs library to highligh a piece of code"/>
+ <j:CardHeader>
+ <html:H3 text="Using external Javascript Libraries" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <html:Pre height="300" percentWidth="100" style="background-color: white">
- <html:beads>
- <j:ScrollingViewport/>
- </html:beads>
- <html:Code id="sourceCodeMXMLText" text="{code_txt}"/>
- </html:Pre>
-
- <j:Button text="highlight Block" emphasis="primary" click="highLightContent()"/>
+ <j:Label html="This example uses hljs library to highligh a piece of code"/>
+
+ <html:Pre height="300" percentWidth="100" style="background-color: white">
+ <html:beads>
+ <j:ScrollingViewport/>
+ </html:beads>
+ <html:Code id="sourceCodeMXMLText" text="{code_txt}"/>
+ </html:Pre>
+
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign="itemsRight">
+ <j:Button text="highlight Block" emphasis="primary" click="highLightContent()"/>
+ </j:CardActions>
</j:Card>
</j:View>
</j:initialView>
diff --git a/examples/blog/BE0013_Dividing_an_Apache_Royale_application_with_modules/MainJewelApp/src/main/royale/MainJewelApp.mxml b/examples/blog/BE0013_Dividing_an_Apache_Royale_application_with_modules/MainJewelApp/src/main/royale/MainJewelApp.mxml
index 819204d..3f48f96 100644
--- a/examples/blog/BE0013_Dividing_an_Apache_Royale_application_with_modules/MainJewelApp/src/main/royale/MainJewelApp.mxml
+++ b/examples/blog/BE0013_Dividing_an_Apache_Royale_application_with_modules/MainJewelApp/src/main/royale/MainJewelApp.mxml
@@ -38,18 +38,24 @@
<j:initialView>
<j:View>
<j:beads>
- <j:HorizontalCenteredLayout/>
+ <j:VerticalCenteredLayout/>
</j:beads>
- <j:Card percentWidth="90">
- <html:H3 text="Dividing an Apache Royale application with modules"/>
+ <j:Card width="90%">
+ <j:CardHeader>
+ <html:H3 text="Dividing an Apache Royale application with modules" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:Label html="This example uses Modules to load other application parts"/>
+ <j:Label html="This example uses Modules to load other application parts"/>
- <j:ModuleLoader localId="moduleLoader" autoLoad="false"
- modulePath="modules" moduleName="JewelModule"/>
+ <j:ModuleLoader localId="moduleLoader" autoLoad="false"
+ modulePath="modules" moduleName="JewelModule"/>
- <j:Button text="Load a Module" emphasis="primary" click="loadModule()"/>
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign="itemsRight">
+ <j:Button text="Load a Module" emphasis="primary" click="loadModule()"/>
+ </j:CardActions>
</j:Card>
</j:View>
</j:initialView>
diff --git a/examples/blog/BE0014_Working_with_vector_graphics/src/main/royale/BE0014_Working_with_vector_graphics.mxml b/examples/blog/BE0014_Working_with_vector_graphics/src/main/royale/BE0014_Working_with_vector_graphics.mxml
index 5148049..2ab8162 100644
--- a/examples/blog/BE0014_Working_with_vector_graphics/src/main/royale/BE0014_Working_with_vector_graphics.mxml
+++ b/examples/blog/BE0014_Working_with_vector_graphics/src/main/royale/BE0014_Working_with_vector_graphics.mxml
@@ -104,7 +104,7 @@
</j:Container>
</j:CardPrimaryContent>
- <j:CardActions itemsHorizontalAlign="itemsRight" itemsVerticalAlign="itemsCentered">
+ <j:CardActions itemsVerticalAlign="itemsCentered">
<j:BarSection width="50%">
<j:ToggleButton localId="ruleVisibility"
outlined="true" emphasis="emphasized"