The data model

Abstract model that organizes elements of data for easy use in the application

Since the goal of this application is to display a list of commits to the Apache Royale GitHub repositories (repos), the data the application will work with must include that list of commits. The application will query GitHub for the information, place what GitHub provides in a data structure, and then connect that data structure to components in the user interface that can display it.

For large projects, the model is often built in a separate class and source file so it can be separately developed, documented, and maintained (maybe by other team members). But to get something up quickly, we are going to just stick a few variables in the main application file in a script block.

First we create the data structure, in this case an array, to hold the information we get from GitHub:

<fx:Script>
<![CDATA[
  public var commits:Array = [];
]]>
</fx:Script>

It might be nice to not hard-code which repos we use to get the commits so that other projects can use this app. So let’s add variables to hold information about the project and repositories we are using:

public var repos:Array;
public var projectName:String;

Next, we need to get the values for these arrays. Let’s use a JSON file, called project.json, to configure which repos to use and the project name. The file contents look like:

{ 
  "projectName": "Apache Royale",
  "repos":  [ "apache/royale-asjs", "apache/royale-typedefs", "apache/royale-compiler" ]
}

You can download this file from here.

Now we need to add calls that fetch the .json file and then the information about the commits. We can use HTTPService (from the Network SWC library) to get the JSON file:

<js:HTTPService id="configurator" url="project.json" complete="setConfig();fetchCommits()" />

The method setConfig() sets the data model variables:

private function setConfig():void
{
  repos = configurator.json.repos;
  projectName = configurator.json.projectName;
}

The method fetchCommits() takes the list of repos and calls a separate instance of HTTPService to get information about the commits:

<js:HTTPService id="commitsService" />

import org.apache.royale.events.Event;

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"));
}

And, of course, we have to tell the service to go fetch the configuration file, so we add an initialize event handler to the Application tag to have the HTTPService send the request for the JSON file once the application is ready to receive the response.

initialize="configurator.send()"

If you build and run the application at this point, you will get a series of errors because. We have written the code to get the data we need, but we have not yet given it a place to put the data: the user interface or view.

Let’s create that now.

Previous Page | Next Page