You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ah...@apache.org on 2018/01/30 20:56:59 UTC
[royale-docs] branch develop updated: tutorial works for me up to
build step
This is an automated email from the ASF dual-hosted git repository.
aharui pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-docs.git
The following commit(s) were added to refs/heads/develop by this push:
new b00fd6a tutorial works for me up to build step
b00fd6a is described below
commit b00fd6a069eebf89557c4f45fce579773b900b82
Author: Alex Harui <ah...@apache.org>
AuthorDate: Tue Jan 30 12:56:46 2018 -0800
tutorial works for me up to build step
---
.../application-tutorial/build.md | 139 +++++++++++++--------
create-an-application/application-tutorial/data.md | 25 +++-
create-an-application/application-tutorial/view.md | 29 +++--
3 files changed, 131 insertions(+), 62 deletions(-)
diff --git a/create-an-application/application-tutorial/build.md b/create-an-application/application-tutorial/build.md
index 2d6cdbd..e6e7f2e 100644
--- a/create-an-application/application-tutorial/build.md
+++ b/create-an-application/application-tutorial/build.md
@@ -27,11 +27,15 @@ The main MXML file should now look like this:
```XML
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:local="*"
-xmlns:js="library://ns.apache.org/royale/express"
+xmlns:js="library://ns.apache.org/royale/express"
+initialize="addEventListener('dataReady', dataReadyHandler);configurator.send()"
>
<fx:Script>
<![CDATA[
- public var commits:Array = [];
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.events.Event;
+
+ public const commits:Array = [];
public var repos:Array;
public var projectName:String;
@@ -60,13 +64,22 @@ xmlns:js="library://ns.apache.org/royale/express"
var obj:Object = results[i];
var data:Object = {};
data.author = obj.commit.author.name;
- data.date = obj.commit.author.date;
+ // clip date after yyyy-mm-dd
+ data.date = obj.commit.author.date.substr(0, 10);
data.message = obj.commit.message;
commits.push(data);
}
if (currentIndex < repos.length)
- fetchCommits();
+ fetchCommits();
+ else
+ dispatchEvent(new Event("dataReady"));
+ }
+
+ private function dataReadyHandler(event:Event):void
+ {
+ dg.dataProvider = new ArrayList(commits);
}
+
]]>
</fx:Script>
<js:HTTPService id="configurator" url="project.json" complete="setConfig();fetchCommits()" />
@@ -75,13 +88,14 @@ xmlns:js="library://ns.apache.org/royale/express"
<js:initialView>
<js:VView>
<js:Label text="{projectName} Commits Log"/>
- <js:DataGrid id="dg" dataProvider="{commits}">
+ <js:DataGrid id="dg">
<js:columns>
- <js:DataGridColumn label="Date" dataField="date" columnWidth="15"/>
- <js:DataGridColumn label="Author" dataField="author" columnWidth="15" />
- <js:DataGridColumn label="Message" dataField="message" columnWidth="70" />
+ <js:DataGridColumn label="Date" dataField="date"/>
+ <js:DataGridColumn label="Author" dataField="author"/>
+ <js:DataGridColumn label="Message" dataField="message"/>
</js:columns>
</js:DataGrid>
+ <js:Label text="Selected Message:"/>
<js:MultilineLabel text="{commits[dg.selectedIndex].message}" />
</js:VView>
</js:initialView>
@@ -99,55 +113,78 @@ The final code should look like this:
```XML
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:local="*"
-xmlns:js="library://ns.apache.org/royale/express"
+xmlns:js="library://ns.apache.org/royale/express"
+initialize="addEventListener('dataReady', dataReadyHandler);configurator.send()"
>
<fx:Script>
<![CDATA[
-[Bindable]
-public var commits:Array = [];
-public var repos:Array;
-[Bindable]
-public var projectName:String;
-
-private function setConfig():void
-{
-repos = configurator.data.repos;
-projectName = configurator.data.projectName;
-}
-
-private var currentIndex:int = 0;
-
-private function fetchCommits():void
-{
-commitsService.addEventListener("complete", gotCommits);
-commitsService.source = repos[currentIndex];
-commitsService.send();
-}
-
-private function gotCommits(event:Event):void
-{
-currentIndex++;
-commits = commits.concat(commitsService.data.commits);
-if (currentIndex < repos.length)
-fetchCommits();
-}
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.events.Event;
+
+ public const commits:Array = [];
+ public var repos:Array;
+ [Bindable]
+ public var projectName:String;
+
+ private function setConfig():void
+ {
+ repos = configurator.json.repos;
+ projectName = configurator.json.projectName;
+ }
+
+ private var currentIndex:int = 0;
+
+ private function fetchCommits():void
+ {
+ commitsService.addEventListener("complete", gotCommits);
+ commitsService.url = "https://api.github.com/repos/" + repos[currentIndex] + "/commits";
+ commitsService.send();
+ }
+
+ private function gotCommits(event:Event):void
+ {
+ currentIndex++;
+ var results:Array = commitsService.json as Array;
+ var n:int = results.length;
+ for (var i:int = 0; i < n; i++)
+ {
+ var obj:Object = results[i];
+ var data:Object = {};
+ data.author = obj.commit.author.name;
+ // clip date after yyyy-mm-dd
+ data.date = obj.commit.author.date.substr(0, 10);
+ data.message = obj.commit.message;
+ commits.push(data);
+ }
+ if (currentIndex < repos.length)
+ fetchCommits();
+ else
+ dispatchEvent(new Event("dataReady"));
+ }
+
+ private function dataReadyHandler(event:Event):void
+ {
+ dg.dataProvider = new ArrayList(commits);
+ }
+
]]>
</fx:Script>
-<js:HTTPService id="configurator" source="project.json" complete="setConfig();fetchCommits()" />
-<js:HTTPService id="commitsService" source="project.json" complete="setConfig();fetchCommits()" />
+<js:HTTPService id="configurator" url="project.json" complete="setConfig();fetchCommits()" />
+<js:HTTPService id="commitsService" />
<js:initialView>
-<js:VView>
-<js:Label text="{projectName} Commits Log">
-<js:DataGrid id="dg" dataProvider="commits" width="80%" height="300">
-<js:columns>
-<js:DataGridColumn label="Date" dataField="date" columnWidth="15"/>
-<js:DataGridColumn label="Author" dataField="author" columnWidth="15" />
-<js:DataGridColumn label="Message" dataField="message" columnWidth="70" />
-</js:columns>
-</js:DataGrid>
-<js:MultilineLabel text="{dg.selectedItem.message}" width="80%"/>
-</js:VView>
+ <js:VView>
+ <js:Label text="{projectName} Commits Log"/>
+ <js:DataGrid id="dg" width="600" height="300">
+ <js:columns>
+ <js:DataGridColumn label="Date" dataField="date" columnWidth="100"/>
+ <js:DataGridColumn label="Author" dataField="author" columnWidth="100"/>
+ <js:DataGridColumn label="Message" dataField="message" columnWidth="400"/>
+ </js:columns>
+ </js:DataGrid>
+ <js:Label text="Selected Message:"/>
+ <js:MultilineLabel text="{commits[dg.selectedIndex].message}" width="600" />
+ </js:VView>
</js:initialView>
</js:Application>
```
@@ -164,7 +201,7 @@ If you've used NPM to install Royale, you can just run:
mxmlc -debug=true GitHubCommitsViewer.mxml
```
-This should compile without errors. Next, let's see the results.
+This should compile with one warning. We will ignore that for now and fix it later. Next, let's see the results.
{:align="center"}
[Previous Page](create-an-application/application-tutorial/build.html) \| [Next Page](create-an-application/application-tutorial/debug.html)
diff --git a/create-an-application/application-tutorial/data.md b/create-an-application/application-tutorial/data.md
index ff2a486..939f0db 100644
--- a/create-an-application/application-tutorial/data.md
+++ b/create-an-application/application-tutorial/data.md
@@ -59,12 +59,14 @@ private function setConfig():void
}
```
-The method fetchCommits() will take the list of repos and calls a separate instance of HTTPServie to get the commits:
+The method fetchCommits() will take the list of repos and calls a separate instance of HTTPService to get the commits:
```XML
<js:HTTPService id="commitsService" />
```
```ActionScript
+import org.apache.royale.events.Event;
+
private var currentIndex:int = 0;
private function fetchCommits():void
{
@@ -76,13 +78,32 @@ private function fetchCommits():void
private function gotCommits(event:Event):void
{
currentIndex++;
- commits = commits.concat(commitsService.data.commits);
+ var results:Array = commitsService.json as Array;
+ var n:int = results.length;
+ for (var i:int = 0; i < n; i++)
+ {
+ var obj:Object = results[i];
+ var data:Object = {};
+ data.author = obj.commit.author.name;
+ // clip date after yyyy-mm-dd
+ data.date = obj.commit.author.date.substr(0, 10);
+ data.message = obj.commit.message;
+ commits.push(data);
+ }
if (currentIndex < repos.length)
fetchCommits();
+ else
+ dispatchEvent(new Event("dataReady"));
}
```
+And, of course, we have to tell the service to go fetch the configuration file, so add an initialize event handler to the Application tag to have the HTTPService send the request for the JSON file.
+
+```
+initialize="configurator.send()"
+```
+
Now if you build and run this, nothing will show up, so now let's go create the view (user interface).
{:align="center"}
diff --git a/create-an-application/application-tutorial/view.md b/create-an-application/application-tutorial/view.md
index 1b65c9f..c87d992 100644
--- a/create-an-application/application-tutorial/view.md
+++ b/create-an-application/application-tutorial/view.md
@@ -41,9 +41,9 @@ We want to display the date of the commit, who made the commit, and the commit m
```XML
<js:columns>
- <js:DataGridColumn label="Date" dataField="date" columnWidth="15"/>
- <js:DataGridColumn label="Author" dataField="author" columnWidth="15" />
- <js:DataGridColumn label="Message" dataField="message" columnWidth="70" />
+ <js:DataGridColumn label="Date" dataField="date"/>
+ <js:DataGridColumn label="Author" dataField="author"/>
+ <js:DataGridColumn label="Message" dataField="message"/>
</js:columns>
```
@@ -61,18 +61,29 @@ myLabel.text = projectName;
And we'd also have to write change detection code if the value could change at runtime, which it doesn't in this case. To read more about DataBinding see this [section].
-DataBinding is also a good way to assign the data for the DataGrid to display, so we will add a databinding expression to the DataGrid.
-
-```XML
-<js:DataGrid id="dg" dataProvider="{commits}">
-```
-
Also, a commit message might be too long to read in a row of a DataGrid so we will add a place to display the longer message of a selected commit.
<js:MultilineLabel text="{commits[dg.selectedIndex].message}" />
Notice how with DataBinding, we've written very little if any "code" to connect the DataGrid to the MultilineLabel.
+We could use DataBinding to connect the commits array to the DataGrid, but it turns out the commits array is initialized to an empty array at startup and the commits variable is never assigned a different array so it never changes its value, only the contents of the thing it references change. So DataBinding only detects changes in the expression, not changes to internal things referenced by the expression. Now it is possible to create something other than an Array that will dispatch c [...]
+
+```ActionScript
+import org.apache.royale.collections.ArrayList;
+
+private function dataReadyHandler(event:Event):void
+{
+ dg.dataProvider = new ArrayList(commits);
+}
+
+```
+In the initialize handler, we add a listen for the dataReady event:
+
+```ActionScript
+addEventListener('dataReady', dataReadyHandler);
+```
+
OK, so we've written the Model and now the View. On to the 'C' in MVC, the Controller.
{:align="center"}
--
To stop receiving notification emails like this one, please contact
aharui@apache.org.