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 <[email protected]>
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
[email protected].
