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
commit 9ad0f9037ffddb3daa264903d520765528b3b082 Author: Alex Harui <[email protected]> AuthorDate: Tue Jan 30 08:22:50 2018 -0800 well it would compile if the compiler didn't have a bug --- .../application-tutorial/build.md | 38 +++++++++++++++------- create-an-application/application-tutorial/view.md | 6 ++-- 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/create-an-application/application-tutorial/build.md b/create-an-application/application-tutorial/build.md index 75ef614..2d6cdbd 100644 --- a/create-an-application/application-tutorial/build.md +++ b/create-an-application/application-tutorial/build.md @@ -37,8 +37,8 @@ xmlns:js="library://ns.apache.org/royale/express" private function setConfig():void { - repos = configurator.data.repos; - projectName = configurator.data.projectName; + repos = configurator.json.repos; + projectName = configurator.json.projectName; } private var currentIndex:int = 0; @@ -46,39 +46,49 @@ xmlns:js="library://ns.apache.org/royale/express" private function fetchCommits():void { commitsService.addEventListener("complete", gotCommits); - commitsService.source = repos[currentIndex]; + commitsService.url = "https://api.github.com/repos/"; + repos[currentIndex] + "/commits"; commitsService.send(); } private function gotCommits(event:Event):void { currentIndex++; - 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; + data.date = obj.commit.author.date; + data.message = obj.commit.message; + commits.push(data); + } if (currentIndex < repos.length) fetchCommits(); } ]]> </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"> + <js:Label text="{projectName} Commits Log"/> + <js:DataGrid id="dg" dataProvider="{commits}"> <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}" /> + <js:MultilineLabel text="{commits[dg.selectedIndex].message}" /> </js:VView> </js:initialView> </js:Application> ``` -Before we compile this code, there are a few things we want to add. First off, there is no way to know if a "var" has changed. So, we want to tell the compiler to convert the var into a get/set property so we can detect changes. Otherwise, you will get a warning that changes to some variable cannot be detected. In Royale, this is done via MetaData. Metadata consists of square brackets "[]" which contain a tag and some attributes. The compiler knows to act on some MetaData. Other [...] +Before we compile this code, there are a few things we want to add. First off, there is no way to know if a "var" has changed. So, we want to tell the compiler to convert the var into a get/set property so we can detect changes. Otherwise, you will get a warning that assignment to some variable cannot be detected. In Royale, this is done via MetaData. Metadata consists of square brackets "[]" which contain a tag and some attributes. The compiler knows to act on some MetaData. Oth [...] Another thing missing is that we haven't specified the size of the controls. Just like HTML/JS/CSS there are multiple ways to do this. We could have a separate .css file and specify styles there and assign class names in the MXML tags. That allows the CSS to be tweaked without recompiling so you can just refresh the browser and see changes, but in Royale, the CSS file is actually generated by the compiler from the CSS file in your source code and CSS files in the libraries you used so [...] @@ -145,7 +155,13 @@ fetchCommits(); Since we are intersted in JS output, to compile this code, we run: ``` - js/bin/mxmlc -debug=true GitHubCommitsViewer.mxml + <path to Royale SDK>/royale-asjs/js/bin/mxmlc -debug=true GitHubCommitsViewer.mxml +``` + +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. diff --git a/create-an-application/application-tutorial/view.md b/create-an-application/application-tutorial/view.md index 366b503..1b65c9f 100644 --- a/create-an-application/application-tutorial/view.md +++ b/create-an-application/application-tutorial/view.md @@ -50,7 +50,7 @@ We want to display the date of the commit, who made the commit, and the commit m Oh wait, we should have a label that displays the project name above the DataGrid, so before DataGrid add: ```XML -<js:Label text="{projectName} Commits Log"> +<js:Label text="{projectName} Commits Log"/> ``` Notice how the text of the label is referencing the projectName variable in the Model by wrapping the variable name in curly braces "{}". In Royale, this is known as DataBinding. When the compiler sees curly braces in MXML attribute values, it generates code that sets the destination property (in this case, the Label's "text" property) to the value of the expression in the curly braces and also adds code that detects changes to that property and updates the destination property if it c [...] @@ -64,12 +64,12 @@ And we'd also have to write change detection code if the value could change at r 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"> +<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="{dg.selectedItem.message}" /> +<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. -- To stop receiving notification emails like this one, please contact [email protected].
