Sarah Laiwals: Welcome to Session 208: Creating Safari Web applications with Dashcode. I’m Sarah Laiwala, one of the engineers on Dashcode, and Sarah Oddwala is what my manager just changed my last name to. But-- and that will be a crack at my bad jokes I was going to put in. OK so let’s go ahead and begin with a quick history of Dashcode. Back in the Leopard days we presented Dashcode 1.0, where you could create Dashboard widgets very easily using our templates.

Last year, we released Dashcode 2.0, where you could create iPhone web applications. One of the biggest features that we added was that you could run and debug your iPhone web application directly into-- in the iPhone simulator. So this year, we’ve decided to bring all of the powerful tools like the JavaScript debugger, the ability, the control you have when designing your user interface and bring to you Safari web applications. Clap please.

[Applause] Thank you. Thank you. So what exactly is new in Dashcode 3.0? Well, you can now create Safari web applications and iPhone web applications in 1 project in 1 IDE. You can use our cool new templates like the podcast template, the RSS template, the browser template to get you started and they’ll run in the browser simulator and if you need to inspect the elements on your page you can use the WebKit inspector that we’ve embedded directly into the browser simulator. So as you all may know HTML 5 and CSS 3 have gained a lot of traction this year.

Safari 4 has done an incredible job embracing these features and so have we. We now give you the ability to create offline web applications so that when your browser is online it caches and synchronizes the data so that when you’re offline your browser knows what to render. We’ve also added support for the video tab which works similarly to the way image tags work for images but we’ve made this is as easy as dragging and dropping a video directly into Dashcode. Now this is better than plug-ins because you can apply CSS effects like reflections and transformations to your video and you can also overlay elements.

Now, I just mentioned CSS effects. Dashcode now has support for reflections, transitions, animations, transforms. So take the reflections for example. In the inspector you can visually set the reflection that you want on a particular element. We’ve also added support for transitions in our stack layout part so that when you go from 1 view to another you can set the transition that you want just from the inspector. Now I just mentioned parts. So what are the new UI parts? Well, we’ve added the split layout part.

You can use the divider here to set the area of the view. We’ve also added the grid layout part. So if you have a collection of items like images or video you can put them into a grid. And list, that’s new to Safari web applications. We’ve added features to the list like keyboard navigation. You can use the up and down arrow to go up and down the list.

We’ve also added multiple and empty list selections. And one of the coolest, the most mind blowing feature that we’ve added to Dashcode which Max Drukman showed you at the DT State of the Union is bindings where we take your JSON and XLM formatted data and put that directly into your web application without you having to write any code. [Applause] Thank you. So let me give you a brief tour of Dashcode.

So when you launch Dashcode you’re greeted with the template chooser, where you can create Dashboard widgets or web applications. You can create 2 types of web applications: Safari, Mobile Safari, or both. And we’ve provided 5 new templates for you to do that which come with both types of web applications.

So let’s go ahead and create a podcast project. This big area right here is what we call the canvas where you can visually design your user interface. You can resize the elements on your page or you can use the parts library to drive more elements to the canvas.

This right here is what we call the navigator, which is just a list of dom elements. So if I click Title for example in the navigator the selection is reflected in the canvas and at last in the bottom left corner is what we have what we call workflow steps.

So if you were creating a web application from scratch and you didn’t know where to start from, we help you, we guide you through doing that. So what’s the first thing I need to do here? If I were using the workflow steps it says to create-- set the source podcast for your widget and I can click this Go To button here which takes me to the application attributes.

So in the application attributes all I need to do is enter my feed URL because this podcast template is pretty much ready to go. I just need to add my tiny bit of customization. So I’m just going to grab a feed from the Science Friday website which looks like this and I’ll go ahead and select the XML feed here, let me show you what that would look like.

Looks like that and we’ll now go into Dashcode and we’ll just enter that into the podcast URL feed. Now one thing that we need to remember here is that web applications have a same-origin restriction which means that your data must come from your server that your web application is hosted on.

So when I hit Run, Dashcode is going to ask me whether I want to simulate running on this domain and I’m going to go ahead and say yes because I want Dashcode to bypass that restriction in the browser simulator. So when I hit Run my podcast project appears in the browser simulator. Now we don’t use Safari because we don’t want to lock up Safari when you’re debugging your web application.

So we’ve, you know, created the browser simulator. So here is our podcast project. I’ll go ahead and use the list now the keyboard navigation that we’ve added to the lists to go up and down the list and let’s go ahead and watch how to bag an owl and here is where we get lessons on how to bag an owl.

I’ll go ahead and close the video podcast and I mentioned the WebKit inspector earlier on in the slide so this cute little button here brings me the WebKit inspector where you can look at the HTML of your page or you can inspect the CSS properties. So what would my web application look without my background color?

This is what it would look like. We don’t like that, we’ll put it back. So it’s updating in real time, and if you want to see which resources have been loaded you can use the Resources tab. Now Dashcode 3.0 has the ability to create Safari and Mobile Safari web applications.

So I’m just going to go ahead and use this tab right here to switch over and look at my Mobile Safari version and because the data is shared between both of these products all I need to do is hit Run to see that my podcast project now appears in the iPhone simulator. So we can go ahead and watch how to bag an owl in the iPhone simulator and there it is.

[Applause] So let’s go ahead and go back to slides. Lost the clicker. OK, so in short, what’s new to Dashcode 3.0? Well we’ve added support for Safari web applications. We have cool new templates like the podcast, the RSS template. You have new UI parts, the split layout part, the video part, HTML 5 and CSS 3 support, reflections, offline web applications and bindings which is why I know all of you are here today.

So I’d like to invite Daniel Gobera, El Muchacho Magnifico, onto the stage [applause] to go over how to create your own custom web application.

Daniel Gobera: Thank you Sarah. Good afternoon. I would like to guide you through the basics of creating awesome web applications with some of the new features of Dashcode 3.0. So as Sarah just mentioned, in 3.0 we have now the ability to create web applications not only for the iPhone but also for Safari.

Well, what we have seen out there in real web apps, what happens is that there’s a full version for the desktop browser but also a smaller version probably with some less features that’s really optimized for the smaller screen of the iPhone and maybe takes advantages of mobility and touch events, things like that.

We actually really like this pattern and it’s something we’d like to encourage. So one of the new features is that you can have both of these versions, we actually call them products in 1 project and you can develop them at the same time, go back and forth between them and make sure the look and feel is consistent.

So there’s a new bar near the top of the window where you can switch between them and if you think about it they’re actually just 2 interfaces to the same web application. And probably what is the biggest advantage of this approach is let’s take a look at the files-- at the file structure of this project.

There are some folders for shared resources so you can have some of the resources, things like images or JavaScript code that is going to be used in both products. There are 2 special folders, Mobile and Safari, and they they contain resources specific for each of these platforms; things like the CSS or the HTML, mostly things that make up the user interface. But also there are some folders like images, parts and scripts that contain elements that are going to be shared between the 2 products. So what do you want to share?

Typically JavaScript code that deals with the lower layers, things like data management and the model. So let’s just take a step back and look at how modern web applications work with remote data. The most common pattern is to separate the data from the actual application. So we can use Ajax to fetch the data asynchronously so the web-- sorry, the web browser is going to fetch the HTML, CSS and JavaScript, things that make up the user interface and the logic of the application. Separately it’s going to use Ajax to fetch the data as XML or JSON.

Well, this is so common and so fundamental for these kind of web apps that last year during the Dashcode session we went deep in detail on the code that you have to write to to get to use Ajax to get functionality and fetch remote data asynchronously. We actually had around 20 slides going deep in detail on all this code.

Well, we have realized that this is just so common and everybody has to do it every time that we want to make it a lot easier for everyone so we are introducing the concept of data sources and it’s just a fantastic way to work with remote data. Data sources are the part of your web app that’s going to talk to the remote server to get data, parse it, and they’re going to encapsulate the Ajax request. So you don’t have to write all the Ajax code and you don’t have to worry about the details. They can understand feeds that are in JSON format, XML and of course this includes RSS.

But probably what is one of the most useful features is that you get-- while you’re designing your web app you get a visual representation of your model and this just makes a world of difference when you are developing your app. You get a much better understanding of the structure of the data you’re working with. So we have data sources getting the data from the server and of course the next most common thing to do is to show this data in the user interface of the app. For this you should have to write some code.

it’s commonly known as glue code and all it does is move data back and forth between the view and the model of the application. Again this is so common and it’s repetitive enough that can be automated. So we ought to make it a lot simpler. We’re introducing bindings that go just great with data sources. And bindings, with bindings you can just say I want this piece of data over here and this over there and they can take care of most or all of what that glue code was doing. So I’d like to show you a demo of data sources and bindings.

Daniel Gobera: All right. So maybe many of you have seen this website. It’s the trailers website on Apple.com and I’d like to build an application that takes information from, takes, you know, I want to display these trailers in different ways. So I’ll go to Dashcode.

Now if you’re like me and you want to have complete control of all the details then the custom template is for you. It’s going to give you just a blank canvas where you can design your application from scratch. Well now it’s too blank so I want to make it a little bit nicer. Let’s give it a background image. So I have an image over here.

I can use it as a background of my app. All right, now I want to show the trailers on a list so I can go to library of parts and drag a list part. As I do all of these changes in the canvas Dashcode is generating all the-- all the necessary CSS, HTML and JavaScript code to make this work. If you want you can modify it by hand but in this case I’m just going to use the canvas. So I’m going to make some some room for the poster.

So each row is going to be a trailer. So I’m just going to move this over here. And you have things like the the text inspector where you can change the font. Let’s make it a lot bigger, bold, yeah, blue would look a bit better. Now I’m going to need an image for each of these trailers. So I can again go to the library, get an image part and drop it here.

Notice how the list has a special row, the first row is a bit special, it’s called a template row. Whatever I do there is going to be replicated in the rest of the rows. All right so now we have the basic interface for this app ready. Next thing I want to do, I want to show some data on that place right?

I have a bookmark here to an XML feed for my server that contains the data of all the trailers. Now if you work with XML before you would know that it would be just a nightmare if you have to work with it in plain text. So probably what you would do is use some kind of tool like the web inspector that would give you-- oh that’s not the web inspector, it’s not enabled, well, that will give you a really nice representation of the XML file as a tree and you can expand it but still you have to-- you will have to write the the JavaScript code to reiterate over the notes and get the data.

Well this is where sata sources come in. So if we go back to Dashcode there’s a new pane down here in the bottom left of the window, data sources and there’s always a blank data source there ready to be used. You can see this one is blank and it’s asking for a URL to a JSON or XML feed. Well I just happen to have an XML feed that I’m going to drag from Safari, drop it into Dashcode.

What it’s doing now it actually went out, fetched the XML file, it parsed it and it’s inferring the entire structure of this file, so instead of showing the entire tree it figured out that there is an array of movies, so this is an array of 50 movies, each movie has info things like title, runtime, rating and I can browse through the collection of movies right here.

So this gives you a lot-- a lot of information, a much better understanding of the structure of your data. All right so would it be just nice to be able to tell Dashcode to please show this piece of data the title over there on the list. Well all I have to do is go to the connection dot and drag it and I’m going to bind it to the list and I’m just going to bind it to the text property. And just like that I got a connection between the model and the view of this application.

Let’s see that again. I want to bind the poster this time. So the poster’s here, there’s actually 2 versions, normal and extra large. I want the normal one. I’m going to bind it and you can see things like the image have a bunch of properties that are bindable, things like width, height, class. I want the source to point to that URL.

So I’ll choose source there and just like that I’m done with the basics of this app, like, it’s-- it-- the look is ready and the functionality is ready. So let’s just try it. I’m going to press Run. Yes, I want to simulate running there. And there we have it, it’s just-- it just connected my model to my view and I, and I get the latest of all the posters, all the titles and I can select things on the list.

Daniel Gobera: Thanks. Now that’s not very useful right? I want to see more detail of whatever I select on the list. So I’m going to create a detailed view over here on the right area. For that I’m going to drag a box from the library. This box is going to contain my detailed view.

Now the nice thing of the canvas is you can also specify behavior. I want that box to grow when the window resizes. So to show the title I want to drag a text part, put it over here. Let’s make that a lot bigger and probably bold and to show the long description of the title-- sorry, of the movie-- I’m going to drag a text bar, put it over here and I also want to show the large version of the poster.

In this case I’m going to use a placeholder image, put it over here and I want this image to be pinned to the right so I’m going to make the left margin flexible. OK so I got the interface for the detail view. How am I going to put data in it?

I cannot use this data source directly because this actually-- the 50 movies that are in the feed, I just want the 1 that is selected on the list. Well we thought really long and hard about this problem and we we tried many different ideas and I think we ended up with something that works pretty well.

The moment I added bindings to this list it became a data source itself and it appeared right here in the data sources view. So this data source here represents that list and one of its properties is the selection and of course the selection of the list is a movie.

So it has all the properties of a regular movie. In this case I want to bind the title of the selected movie to the detail view and the description and also I want the large poster. All right, so while the application is loading and I have no selection on the list this box is going to be empty, you know, it’s not going to look very good. So I want to hide it while we have no selection. So the list has a really useful property at the bottom, it’s called has selection.

This is going to be true only when there is something selected on the list and I can just bind that to the box, to the visibility of the box, and make it invisible when there is no selection, right. So just to add a nice touch we can select the poster and I’m going to give it a really nice reflection using those those new CSS tree effects. Now, well, a little secret, this reflection feature was implemented by our manager so big applause for the reflection slider [applause].

Just kidding. This tells you a lot about Dashcode; how it works. The entire philosophy is that the most common thing you want in a reflection is you know that it goes down and it fades and you can adjust the opacity and you can do that really easy right here.

But of course you have the entire, the full power of WebKit and CSS 3 so if you want more than that, which is-- which is sometimes what you may want, you can go directly to the CSS code and edit the CSS rules to get the effect you want but for most cases you can just use the UI and get the reflection you wanted.

All right so I think I’m done with this. I’m just going to run it. See how it’s working. So again it’s going to fetch the XML, create my list. The box is invisible right now so when I select it let’s see yeah so I go to detail view that just appears when I select something on the list and if I move up and down on that list just like that it changes in the detail view immediately. Notice there’s no delay. I can just go back and forth and and look at all the movies.

All right.

Daniel Gobera: So I’m mostly done with this app. One of the final touches is going to be to add an iPhone version. So I can just go to the Mobile Safari tab. It’s also empty, just has a background image and in this case I don’t have you know much space to show all that text hopefully I just want to focus on the-- on the images, on the posters.

So I’m going to use the grid part. I don’t want the label so this is just like a list, it’s going to display a collection but in a grid. So each of these going to be a movie, this is going to be a poster so I’m going to make it a lot bigger and remember how I said that things are, there are a lot of resources shared between these 2 products, the data sources are part of the model of the application.

So you most likely want to use the same data on both. So that’s one of the things that are shared. I can just use the data source I created in the other product for Safari. In this case all I want to bind is the poster and let’s just make it look a bit nicer.

I’m going to make the background black. OK and I can just run it and this, this time it’s going to run on the iPhone simulator and just like that I got this really nice wall of posters and and I have the Safari and the Mobile Safari version so that is data sources and bindings.

Daniel Gobera: All right so what we just saw, sorry, this only works when I am in the computer. What we just saw is that you can create a Safari and a Mobile Safari products or interfaces to your application in the same project. The biggest advantage of this is that you can share a lot of resources between them.

We can use data sources to fetch remote data and get a visualization while you are designing the app and finally we can use bindings to specify what part of the model is going to show up in what part of the view of the application. So this will get us a long way to creating a basic web app. Now of course if you want to make something more complex and you want to see what’s going on behind I’m going to call Chris Ryan to give a behind the scenes view of what’s going on here.

Chris.

Chris Ryan: Thank you, Daniel. So what, no special name here? Anyways, so we’ve seen a lot about how easy it is to create amazing applications using data sources and bindings in Dashcode but you’re probably wondering what’s behind the scenes? How can I customize this and what can I really do to take my application to the next level that I may not be able to do within Dashcode’s user interface? So the first thing is Dashcode’s JavaScript framework. This is a class-based JavaScript framework.

It contains almost all of the model view and controller classes you may need to build your application. It also comes, has a lineage from the Apple Online Store so it does-- it is a stable framework that you could use. You also may notice that each of the classes begin with DC as DC is Dashcode’s prefix for all of the classes of the framework. If you’re looking for this framework you’ll find it within Dashcodes at any of your Dashcode 3.0 projects, it’s in the files view. Here it is with all of the files.

It’s under the Shared Parts folder under Core and if you’re worried about what kind of size it’s going to add to your application, Dashcode will only take the files necessary to create your application while deploying and it will compress it using JavaScript techniques into 1 file for nice simple download on your iPhone or desktop platform. So some of the key functionalities of this framework: the big one is really vey-value observing.

That’s the key thing that makes all of our bindings possible. And key-value observing allows your code or objects to observe the property-- a property of another piece-- another object or your data model. Now that makes bindings possible and bindings allows your views to bind their properties to other objects’ properties. Of course the framework also includes many view classes which provide a central event handling for all of your mouse down, your keyboard events and most importantly your touch events on your iPod platform.

Now you’re probably wondering, what do you mean, JavaScript classes? Well, JavaScript, as you know doesn’t actually include support for class-based objects but Dashcode’s framework creates class-based objects for you. I’m going to go over a little bit about what these look like. So here’s a rectangle class. You create the class by calling Class.create. You then pass through the superclass for your class. In this case I’m using DC.KVO.

That is the main base class for almost all of the objects in Dashcode and provides the core functionality for key-value observing. Next you have a JavaScript object notation that describes all of the default properties as well as any of the methods for your class. In this case we’ve chosen to implement both constructor and area and the constructor is really what gets called when your application, when your application creates an instance of your class from your class. Now the constructor is an optional method and if you don’t implement it then the constructor of the superclass is called.

Now creating an object from a class is just the same as you would anytime you make a-- any JavaScript objects. It’s just as simple as calling new and the class name and then you pass through the arguments that are specified within the constructor that you’ve made. And of course just like any JavaScript objects you can call any of the methods in the objects.

Here we’re printing out the area of the shape. Now if you want to create your own subclass it’s very easy to do and it’s one of the key things that are possible with this class framework. To create your own subclass, here we have a square that we want to create and a square is almost identical to the rectangle except for the width and the height, the width and the height are the same.

So this class is going to be very simple and we want to use-- take advantage of the fact that they’re classes. So to do that we’re going to pass through rectangle as the first argument, that’s our superclass and then within our constructor, notice our constructor here only has 1 argument, just the size of the side.

But within our constructor we’re going to call a special, a special object called this.base or function and this.base is a reference to the superclasses function that we’re within. So you can call this.base within any of the methods in your class and it will call the superclasses version of that method. And of course we’re going to pass through the side for both the height and the width because we want our square to be the same.

So that’s classes. So now let’s talk a little bit about data sources and how you can access them from JavaScript to get more work done. Now data sources are an instance of the DC Ajax controller. They’re really responsible for grabbing your data using Ajax requests from the server, bringing your data into your application and converting that data into objects that are available for bindings as well as available for your access in JavaScript.

These data sources load the data and fetch the data from the server immediately upon launch and you can also configure the data sources at runtime to specify different arguments and parameters for your fetch. So let’s take a quick look at what that looks like. So here we have a version of our trailers application. Our server takes a couple of arguments and a Dashcode, a data source will actually separate the base URL and the arguments that is part of your URL into separate items so you can change them individually. So first we’re going to grab the Dashcode, the data source.

We use getDataSource from the Dashcode object. We pass it the name of the data source where you can find from the data sources view in Dashcode’s UI. Next we want to set the new value. To do that we’re going to call setValueForKeyPath. This is one of the core functions from the key-value observing class as it allows you to set values down a key property path of your object.

So we want to set the ratings value of our parameters object which is part of our data source to a new value; in this case G. So that when that happens, Dashcode, the data source will go back to the server, re-retrieve your data, bring it back into your application, remodel the objects and then update your view with bindings. So we’ve talked about how to change your data source at runtime.

Let’s talk a little bit about how to get some of that data at runtime. So to get your data it’s just as simple as accessing the content property of your data source. That’s where your data is retrieved and vended out in your application and typically you’re going to want to do this using a key path. So here’s what we’re going to call valueForKeyPath and we’re going to specify content which is the property as part of the data source and then the remaining key path within our object graph.

So in this case we want the info objects actors and this will return in this case since the actors is an array and all of the objects within our movie set is an array, it’s going to return an array of all of the actors in all of our movies.

Another important thing you might want to get from your data source is state. Sometimes your data from your server doesn’t come back correctly, sometimes the server is not responding and the best way to deal with that is to to add yourself as an observer for one of the properties of your data source. That may be you know the current state whether it’s fetching data or not, the current status or in this case the error message to see what error message is occurring.

So to do that we simply call addObserverForKeyPath on our data source and that will add our code as an observer for the property. We specify an anonymous JavaScript function and this is the function that gets called when this property is changed and in this function that’s where we handle any sort of scenarios we need to deal with in a case of an error message. And then finally we pass through the property that we want to watch.

In this case it’s the error message property. Now if you’re looking for other examples of this both the podcast and the RSS template have great examples of dealing with error messages and different scenarios that may come up during runtime. So Daniel talked about when you bind your data source to a list or a grid part. Dashcode automatically creates for you a data source that represents that list.

Well this data source is really an instance of a DC array controller and that array controller is automatically created for you by Dashcode and it’s responsible for getting the data into your collection parts. Not only does it get the data into into your views, it’s also responsible for both sorting and filtering of that data and probably the most important thing is the selection management of your list or grid view. I’ll get to more of that in a bit. And just like your standard data source you can access this data source in JavaScript via the get.Data.Source column. So those are data sources.

Let’s talk a little bit about bindings. So bindings is all about getting your data from your model into your view and when you create a binding it creates a connection between the property of your model and a property of your view. In this example we have a car here which-- whose color is blue and we want that value to be reflected in our view here.

The value-- the value of the text field to be the value of the car’s color. Now when you change the car through JavaScript or through another binding that change is automatically pushed up into your view and conversely when the view is changed that data is automatically pushed down into your model property.

Sometimes however your data is not stored, your data is not stored in the same format in your model as you’d like it in your view and that’s where value transformers come into play. A value transformer allows you to write some source code-- allows you some Java-- allows you to write some JavaScript code which you can convert the value going from your model into your view.

So as that data is set it goes through your value transformer, gets converted into a form that’s appropriate and gets set to your view. You can also implement a reverse value transformer that allows you to change your data in your view and it gets pushed down through your bindings, your reverse transformer and back to your model. So to set a value transformer we have this great bindings inspector.

The bindings inspector has a section for each of the bindable properties of your view and it contains information like the data source, the specific key path you’re binding as well as the value transformers and placeholders, which we’ll talk about later. There are several built-in-- several built-in value transformers you can use although you know there’s there’s things for getting the first object of an array or reversing the value of a true or false statement. But you can also create your own value transformers very easily.

Simply type in your value transformer name and Dashcode will automatically create a snippet of code in your source code that’s a shelf for your value transformer including both the transform value which is the forward transform and the reverse transform value for the reverse transform. Now we talked a little bit about, I talked a little bit about placeholders.

Well, placeholders allow you to deal with selection binding. Now if you have 1 item selected, here we have A Bug’s Life selected and we have our detailed view bound all the details of Bug’s Life and that’s nice, we’ve seen this in all the demos, but what actually happens when you select 2 things?

Well, the selection property of our collection data source is actually a single object that vends out a proxy for each of the individual properties and if there’s only 1 selection, that value is going to be the value of the property of the selected object. But if there’s multiple selections it will use a specific value that’s appropriate for that text field and you can customize that in Dashcode.

So to do that there’s a placeholder section in the Dashcode bindings inspector that lets you specify each of the placeholders of the different scenarios. The first one being multiple selection and in this case you have 2 things selected, it might be hard to read, but 2 things selected and it will display multiple-- multiple movies.

You also have the scenario that unlike in Daniel’s demo where we hid the detail view you might want to show your detail view or there may be a scenario you want to show the item when there’s no selection and so you can specify the value like for that.

And then another one is a null value so even if you have a selection the object you’re bound to may not have the property that you need for that value and the null value placeholder allows you to specify what you want the default value to be in that scenario. So we’ve talked a lot about some of these details. Let’s go over the demo and show you how to use it.

First thing I want to do is I’m going to open up where we left off in Daniel’s demo and we’ve cleaned this up just a little bit. We’ve added no source code but we’ve added, kind of made it look a little nice. Now there’s a lot of movies and to show demos of movies I’d like to search for a specific movie. So let’s add searching.

So the first thing we’re going to do is we’re going to shorten this list here right in Dashcode. I’m going to go to the parts library and grab a rectangle shape, a shape is just a great and easy way to grab a-- a gradient in your application. We’re going to add a search field.

Put that on top of our shape. So now we need to tell our collection data source to use the search fields for its search. So let’s do that. We’re going to select the trailers list. Now if you remember this is a-- an array controller and the array controller has a filter predicate property and we’re going to bind that to the predicate property of our search field.

Next we’re going to select the search field and set the property key path for the predicate. This is really what, this is the key path of the-- of the objects that are in our array controller that we want to search on. So if you remember, each of the objects contain an info object and we want to search in the title.

So we want to do info.title. So that’s all we need to at-- all we need to do to add search, it’s very simple. But before we go on with the demo and show you guys let’s actually make our movie trailers application show movie trailers. So to do that I’m going to take our detail view here and just remove that for a second, cut it. We’re going drag in a stack layout. The stack layout allows you to have more than 1 view displayed on top of each other with only 1 showing and then transitions between the 2.

Make that a little bigger. Paste in our detail view. Next we’re going to name the stack views. Now if you look in on the left hand side of the navigator as you select the different views within the stack layout Dashcode will show you the subviews within those views.

So we’re in the details view and the video view for our video. Let’s drag a video part here, this uses the HTML 5 video tag and because we’re all about gratuitous effects I’m going to add a reflection and we’re going to make it resize at the window. Last thing I need to do is to make a connection between, you know, our detail view and the video view.

So we’re going to add a button to flip over the view and for the first time in our session we’re going to actually write some code here. So as you see here we have the behaviors inspector and that lets you specify different behaviors and right handlers for some of the events. So we’re going to create a play trailer function and Dashcode automatically creates that event handler for us.

Now Dashcode has another feature inside the library, there is a code library and it has a lot of sample code that you can use but it also lets you store your own code for common use and just to save you guys the boringness of me typing we’re going to drag that in here. Now this is quite simple.

We get the stack layout element using get element by ID. We get the object property of that element and that object property is the view that we work with. We do the same thing for the video and then we use one of the stack layouts APIs, set current view and that will set which view is current and displayed and we play the video. So before we go on I want to customize my effect and we switch here.

And we’re going to have it push from top to bottom and let’s make it nice and slow so we can enjoy it. All right, so that’s all we’ve done, we’ve written a little bit of code here but we still have a pretty cool application. Let’s try it out.

OK, so here we have our application. We have our movies and I’m going to do a search. I really want to take my kids to a movie when I get home this weekend. I want to see Up. Searching works easily. Again there was no code for that and I can press my button.

I didn’t lay that out properly but I can press the button, get a nice gratuitous effect and we have our movie. Now of course the 1 thing I didn’t show you was binding of the movie. I’m going to do that now and we’ll look at that in the next part of the demo. [Applause] Of course it’s very easy though so it’s a simple thing to fix.

So we’re going to bind our movie to the source and we’ll look at that when we get to the next demo, the next part of the demo. All right, so the next thing I want to do is I really want to take my kids to see Up this weekend but if Up isn’t available I want to see other movies.

So the best way to see what’s available, I really want to see movies with, you know, with their ratings but the ratings, I want a nice icon for that. So we’ve included several icons in this project that represent the ratings and we want to display that in the UI.

So the best way to do this is to use value transformers to transform from the rating value in our data source to this image. So let’s show you how to do that. We’re going to drag it to our canvas, resize it, make sure that the left spring is on so that it will stay to the right-hand side. This time I’m going to actually bind it.

So we’re going to bind from the rating property and we’re going to bind to the source. So that allows us to set the source of the image through the binding. Now I’m going to go into the bindings inspector, select our source property and as you see we have several value transformers and we probably have some here that would work for this demo but let’s just create one from scratch.

So we’re going to create rating to image. And Dashcode automatically creates a value transformer for you and we don’t need the reverse transformer, we’re going to get rid of that and again I’m going to use my handy code library over here and save you the hassle of watching me type.

I’m just going to drag that in. So I’m going to describe this once I start it running because I think that’s probably best. Actually before I do that this is a really niggly problem here. Let’s make that sit with the left side too, there we go. All right, so let’s put a break point in there and let’s run our application. Now if you haven’t seen Dashcode’s debugger, it’s pretty powerful and it allows you to look through the different stack frames and the variables.

Now here we’ve got, step through there, here we have the value pass through and if you look close, that value is PG-13 and we’ve written some code that takes that value, it replaces the spaces in the value, puts underscores in, makes it uppercase and it uses the . ./images folder, that’s the shared images folder here at the top level of our project, and then appends .png at the end and returns that value that you see above. So I’m going to move that break point and let’s watch as it goes.

So there we have it. We have our ratings and our movies. So now I know what movies I can show my kids, well, I don’t know, I can’t find those movies. Let’s actually add sorting to our list. Let’s make it easier for me to find the movies that I can take my kids to. So again with Dashcode even though we’re not going to be doing this in the UI it’s very easy to do.

So I’m going to grab my canned source code again. All right, so the first thing I’m going to do is specify an array of the order of the ratings that I want to sort on and I’m just going to do G, PG, PG-13. As I spoke of in the slides, we want to get our data source, so I call get data source and I pass through the trailers list ’cause I want to access the array controller that lives behind the list so I can change the sorting.

I’m then going to create my new sort descriptor and this describes how we want the data to be sorted. The first argument is the property, the key path for the property in the objects that we’re sorting. So we want to sort on the rating and that’s found in the info object. So we’ll specify info.rating. The next argument is ascending or descending and the third argument which is optional allows you to specify a different comparator if if alphabetical doesn’t work or numerical if your values are numbers.

And this quite simply is just getting the index of the first object, the index of the second object which is specified by the first argument in our function and then comparing the values and returning -1, 0 or 1 like most comparator functions. The last thing we need to do is specify which sort descriptors we want for our list and we do that by passing our newly created sort descriptor in an array.

Now if we wanted to add additional sorting criteria we could create them and add them to this list. All right, let’s see if we can do this again. We can find a movie for my kids and maybe see a real movie here, a movie trailer. All right, so here we have it.

We have our G movies. We have our PG movies, our PG-13 movies, and let’s see if we can see that video playing like we didn’t see before; gratuitous effects. And there you have it. In only a couple of minutes I was able to create a powerful web application to do our video trailers with only a few lines of code.

Chris Ryan: Now there is one more thing I-- I spent a lot of time, we worked on this demo and we really tried to make sure we can do whatever we’re doing on stage but I wanted to spice it up a little bit and really wanted to make something that people will look at and say, “Wow, this looks really cool!”

So we wrote a little bit more code, not much, a little bit more code here and I created this version of the same application and it probably took maybe a half hour of playing around. You may be familiar with this, we have all of the fancy animations you get using the CSS 3 animations and transitions and even play the movie by clicking and transitioning. So there you have it, it’s really easy [applause].

It’s really easy to create great applications with Dashcode and we can’t wait to see what you guys can do with Dashcode 3.0. So let’s quickly summarize what we’ve seen today. Dashcode makes it easy to create powerful desktop and Mobile Safari applications in one environment. It comes with a bunch of really great parts that make your applications look professional.

Dashcode embraces CSS 3 and HTML 5 so while you’re creating a better experience as you’ve seen with the demo I showed you there, and most importantly, with data sources and bindings Dashcode makes it very easy to get up and running with your applications quickly and create powerful applications with no source code.

But most importantly, Dashcode makes it extremely easy to create amazing results and we really can’t wait to see what you guys can do with it. That’s all today. For more information you can talk to Michael Jurewitz, Developer Tools Evangelist, Vicki Murley, the Safari Technologies Evangelist and we have some documentation under the Dashcode Help Menu, Dashcode User Guide.