Monday, March 1, 2010

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”.

3 comments:

  1. Hi...

    I am new to dashcode datasources and I have a problem. I want to dynamically load a datasource and assign it to a edge to edge list. I use the following code to load the datasource.

    var dataSource = dashcode.getDataSource("dataSourceCity");
    dataSource.setValueForKeyPath("http://192.168.134.40/city.xml", "url");

    What I want to do thereafter is to load the XML data into the list. Do you have an idea how to accomplish this?

    Your help would be appreciated.

    Priyan

    ReplyDelete
  2. Would you no how to programmatically have a event listener for getting datasources
    var dataSource = dashcode.getDataSource("getUserProfiles");

    dataSource.setValueForKeyPath(_userId, "parameters.userId");

    this calls the datasource but how can I control what happens when it stops getting the data. I want it to call functions. I know I probably have to use an event listener but I don't no the event type I'm listening for.
    Thanks
    Do you know off the top of your head thanks!!!!! Can't find any info on this

    ReplyDelete
  3. I realise that this blog post is quite old now, but its still great. And sadly I still can't find much documentation on the subject through Apple. Having said that, having read this post I had the idea of looking in the code blocks in dashcode. Open Library | Code, somewhere in the list theres a snippet called Data Source Parameter Change. (Of course, I wouldn't have looked if I hadn't seen this post!)

    Thanks

    ReplyDelete