A Remote Data Source Best Practice

Every time you create a Data Source, Dashcode creates a JSON equivalent of it. But every time you load the application, these Data Sources are refreshed. That means if you have an application that connects to 10 different XML feeds, the time the application takes to load is to high. Based on the previous post, you can modify the Data Source on the fly. So create an XML copy of the remote response (Or JSON if it’s the case) in a folder accessible by the application. Make Dashcode to read from that XML instead the remote one. Then when you need to show the real data, programmatically change the URL and the parameters to the remote feed. This will increase the speed of your application.

Apple Dashcode Data Sources

Did you ever searched for a decent documentation around the data sources in Apple’s Dashcode? Well you maybe hit the wall with the same links to forums or discussions at Apple. I required in several times work with the Data Sources without calling the Inspector, so I started a deep investigation of how Dashcode works with it. Now I’m sharing some of my findings, that helped me to demystify a little of this object called Datasource.

First of all, lets understand how Dashcode creates the data sources; this will reveal a lot of how to work with them.

Every time you create a data source, Dashcode creates a new object in JSON called “dashcodeDataSources” in a file called “datasources.js” inside the “Parts” directory. You must be a little familiar with JSON to read the file.

As soon as you see the file, you will say: “Cool, I just have to change the JSON object in order to change my data source”. Wrong. The application loads this variable in the beginning and creates an object in the runtime. After that, the original variable (dashcodeDataSources) is forgotten. This new object is “dashcode.getDataSource”. This is the object you have to change. So here are some missing function of the object will wont find in Apple’s documentation:

The basic attributes of “dashcodeDataSources”  object are:

.url

.parameters.{name_of_parameter}

.dataModel

.dataType

.version

.root

.model

For data manipulation we will only cover (For now) “url” and “parameters”:

If you want to change the URL where the Data source calls the data (For example the location of a WebService), you may do it the next way:

var dataSource = dashcode.getDataSource("sampleDS");

dataSource.setValueForKeyPath("http://your_url?", "url");

Remember always to put a question mark (?) at the end of the URL if you are going to pass GET parameters to the script.

To change a parameter of the Data source (By the way, this was documented by Apple):

dataSource.setValueForKeyPath("john@foo.com", "parameters.email");

Notice that you can add these parameters on the fly. That means that if you didn’t declared a parameter when you created the Data source in Dashcode, you still can add more parameters. Just set the variable and if it doesn’t exist, it will add it to the object. This is a result of the inheritance of the JSON original object.

Now say that you created a Data source, but want to grab a data from a portion of the object. This could be tricky, but looking at the results as a combination of objects and arrays (JSON) you will be playing with the data in no time

To illustrate this, lets imagine a very simple Data source that brings a list of names, phones and addresses. We will use the next XML for our Data source:

version="1.0" encoding="UTF-8"?>

<data>

 <user>

  <name>John Smithname>

  <phone>305-555-5555phone>

  <address location="home">1 NW ST, 7th AVE, Miami, FL, 33000address> 

 user>

 <user>

  <name>Jessica Smithname>

  <phone>305-555-7777phone>

  <address location="office">2 SW ST, 10th AVE, Miami, FL, 33555address> 

 user>

data>

Now lets create a Data source that points to this XML and call it “usersDS”:

Is easy to get the address just by click-and-drag the Data source element to a text field. But if you want to access the second item of the Data source, and get the address and the attribute. Lets digest the Data source element by element.

First bring the Datasource to our code the classical way:

var usersDataSource = dashcode.getDataSource("usersDS");

And lets say you assign the Data Source to a “Rounded Rectangle List”. This is easy, even when you create a new Mobile application in  Dashcode, it already comes with a similar sample.

When the user clicks a row, it triggers an event that makes the Data source to point to the selected row in the data. The result object of the selection is (Using our Data source as example):

usersDataSource.selection();

The object itself does nothing. But then comes the next function that gets any child (Depending where you are located): “valueForKey”.

Notice that doesn’t matter the root name of the source of the Data source, the root element will always be called “content”.

So to extract the name of the user programmatically, we just need to do the next:

usersDataSource.selection().valueForKey('user')[1].valueForKey('name');

Notice that the user has to select an item in the list to trigger a function that loads the data in the variable we created (usersDataSource).

Digesting the function, is easy to understand the structure of the object itself:

usersDataSource.selection().valueForKey('user') = goes to the “user” tag.

usersDataSource.selection().valueForKey('user')[1] = moves to the second record (Remember arrays are starts index in 0).

usersDataSource.selection().valueForKey('user')[1].valueForKey('name') = goes to the “name” tag.

The result is “Jessica Smith”.