TPR10: Driving a Hybrid: The Basics of Adobe AIR

[Intro Music]

Announcer: You’re listening to one in a series of presentations from the 2008 HighEdWeb Conference in Springfield, Missouri.

Christina Dulude: So just a little bit about myself to give you a background on where I'm coming from for this technology. I'm a PHP developer and I do HTML and CSS also. And I work at Duke in the Central Web Services team, but I've actually only been there for a month on that team. Before that, for three years, I was the web developer for the Division of Student Affairs. And actually, that position is still open. If anyone wants to apply, I could put you in touch with my old boss.

So, I guess, just to get started, how many of you have heard of Adobe AIR? Four? Oh, good. How many of you have downloaded and actually installed and used applications that you know of? OK. What are some of them that you've used? Like--I'm sorry, what? Cool.

Have any of you actually written your own Adobe AIR applications?

Tech: Yup.

Christina Dulude: Yeah? What did it do?

Tech: Well, some are basically websites.

Christina Dulude: Oh, OK. [Laughter] OK. So to get started here...

OK. So, an outline of what we're going to talk about during this presentation. This will talk about what exactly AIR is, but I guess most of you have already heard of it, so we won't spend too much time on that. Who uses it, what types of applications use this technology. We mentioned Twitter clients. There's other clients, too.

We'll talk about the different ways to develop AIR applications. It's really flexible. You can develop applications in Flex or Flash or plain old HTML and CSS and AJAX, and that's actually what we're going to be doing today.

We'll talk about the data options, ways to transfer data between servers and your desktop client, or from different parts of your client machine. You can source that locally. And finally we'll spend most of our time doing a live demo, which might be tempting fate. I know in the past I've done live demos and stuff's gone wrong, so I hope nothing will happen here.

OK. So what is AIR? AIR is a cross-platform runtime environment. I'm sure most of you already know that. So it's great because you can deploy applications on Macs and PCs and also Linux Boxes. Although I think--from what I've read, it's been kind of shaky on Linux lately, but I think recently it's been better. Have any of you ever tried that? No? I haven't, so...

AIR allows you to build rich applications, so the types of applications that you can deploy on your website you can also deploy as a desktop application. And so you might wonder why I would want to do that. If I can deploy as website, why would I want to put up my desktop? But we'll talk about that.

And finally, you can deploy or create these applications in Flash, Flex, HTML, AJAX also combined, and you can just sort of package them up and send them out to people no matter which of these three technologies you use.

OK. So, Adobe AIR. It's a very versatile runtime environment. For browser-based rich internet applications, which are like your standard web apps, you don't need to install them on your desktop at all, which is a plus. But you have limited data access and storage.

For example, if someone wants to create an account on Twitter, if you use the Twitter web client, you can store your credentials like with cookies, but it's not--I guess if you don't have cookies enabled, you have to keep logging in, and that's kind of a pain.

However, with AIR, because the applications run on your desktop, you don't have to install them and sign them digitally, but allows access to your local storage and file systems, so you can store your log-on credentials as part of the application. You don't have to keep logging on again and again and again. And there's other things, of course, that you could store besides just log-in credentials. That would be a pain to have to enter over and over again. So it allows greater flexibility in terms of the local file system storage.

Advantages for Higher Ed. I know many of us have limitations with resources. We don't have people who develop for desktop applications on staff. Oftentimes, usually we just have a web team. And so this is great. We can utilize our web staff that we already have and the web technologies that we already know, such as HTML and CSS and AJAX, and create these desktop-based applications.

OK. So just a history of AIR. I won't go through and explain all of these, but the main point is that it's really new. It hasn't been around for too long. I've only heard of AIR a lot in the last year or so. And I think that's pretty exciting that it's new.

So here--oops, that part got cut off. Here are some of the various AIR applications that you can download. And these are available from the Adobe AIR Marketplace, which is on the Adobe site. And so those are some of the examples and there's the really popular Twitter client. And there's another one, Google Analytics. Oh, this is cool, you can actually interact with your Analytics accounts. Like on your desktop you have to keep going to the website over and over again, so... yeah. It's kind of cool.

So, we talked about this earlier, but there are three ways to develop Adobe AIR applications.

We can use Flex. How many of you have heard of Flex? Cool. How many of you have developed stuff from Flex? I'm actually doing a poster presentation on Flex like immediately after this, so if anyone wants to apply, that would be great.

You can also develop AIR applications in Flash. Who uses Flash? Any Flash developers here? Cool. So you guys can create your Flash application, you can export it as AIR.

But we're going to talk about is using HTML, CSS and AJAX. This is what I think is really cool because my background is HTML and CSS, you know. I'm not very good at Flash, so it's really exciting for me to be able to deploy these applications on my desktop using the web technologies that I already know.

And there's two different ways to do it with HTML and CSS. You can use just a regular text editor, although you have to download the AIR SDK, which I think is what you did, and then it didn't quite work, though. I've actually never done that, so we are just setting it up.

But you can also use Dreamweaver, which I only recently discovered. And Dreamweaver has these two extensions which I found particularly useful. It has the AIR extension which basically allows you to export your application design Dreamweaver into AIR. And also something called Spry Updater, which is for AJAX. So, we're going to use those during our online demo.

OK. So there's different ways of exchanging data across Adobe AIR applications. This is also what's pretty exciting. You can interact with the database via web services such as XML and AJAX. And you can also store data in a local XML file if you just want to display something that isn't dynamic.

AIR also contains a local database, and that's where you can store certain credentials or things that are particular to that particular user. And it also has the local store, which I guess you can also store things like that.

Also, the thing about AIR is it can operate offline. You can interact with your application without an internet connection and then it syncs up later on when the connection is available.

OK. So, let's say you've built your application either with HTML or Flash or Flex. So, what happens now? How do you get it out to your users? Well, they need to have the runtime environment installed on their machine, and this is downloadable from Adobe. The URL was on the handout that's in the packet. So once they have their runtime environment--they only need to download it once--once they've downloaded the runtime environment, they can install as many AIR applications as they want.

So, they download your application as a .air file and then they click it. I guess, well, you all know a few bumps, install them. And it says, "Do you really want to install this?" You download it from the internet, you say, "Yes." And then the neat thing is it installs it as just a regular application in your system. It's not some web proprietary thing at that point. So, it's kind of cool.

OK! So now I'm going to do a demo. Do you guys have any questions so far on the little...? Makes sense? Kind of? Yeah. OK.

OK, so now's the demo. And this is where I get nervous in case things go wrong. But I have my notes so hopefully it's going to be all right.

So we are going to build this Adobe AIR application. What this is is it's basically reading in the RSS feed from our News and Communications office at Duke. And I'm processing the RSS file and it displays all the headlines there. And then you can hover over the headlines and you can click on them and it opens a new window and you can read the news story.

And then, it's scrollable. And also it's transparent. The buttons are kind of fun. I guess you can't really tell. Too much on the screen. But this transparency is not like a web browser window where it's not transparent. So, I know this isn't the prettiest application ever. I'm not a designer, so that's my disclaimer.

OK. So we're going to build this application in Dreamweaver. Oh, also what is kind of cool about AIR is that you can create this custom chrome wrappers for them. So I made my own little 'minimize' and 'x' buttons instead of the usual Mac interface elements. So, I'll close this. Oops. Oh, minimize. There you go. And we'll open Dreamweaver. And--oops. Come on, Dreamweaver. This.

So, I have Dreamweaver open, but you can't see because all the menu items are on the screen here. But, basically, what we're going to do is create a new regular HTML file, so--well, you all can't see this either. I was going 'New', 'File', creating my XML file. OK. So this is regular XML file and I already have a site defined. In AIR, you have to have a site defined before you can create a page. And so I'm going to call this file 'Duke RSS Viewer'. OK.

And so here it is. It's very plain. So I'm going to create just an H1 tag and I'm going to say, "News from Duke University." And this is just the standard regular HTML page at this point. OK. H1 tag. OK.

So, that part is boring. But now we can do the cool AIR stuff. Just a little bit bigger. OK.

So, in the Insert menu. I know you can't see this. I'm going to do the Mirror Screens thing so you can see this better. OK. So here is my Dreamweaver. OK, so if you go 'Insert', 'Spry'--this is that Spry framework thing I was talking about, or extension that I was talking about earlier that allows you to parse or to interact with XML files with AJAX very easily.

So you go Insert, Spry, XML Data Set. Oh, I didn't see where that came in. How embarrassing. So I'm going to call this index.html. And I'm going to put it in my RSS viewer folder. No, I don't want to do that yet. OK. So, sorry about that. I'm going to go Insert, Spry, Spry XML Data Set. Oops. Didn't work with Spry. XML Data Set. OK.

So, I'm going to--this is the name of the XML file that I'm pulling in, or the data set, so I'm going to call this 'RSS Data'. OK? XML source is the actual XML file that I'm going to pull in, and so I'm going to use... This is our communications page, and I'm going to use this RSS file. So I'm just going to grab it. Copy link. OK?

So going back to my Dreamweaver, I'm going to paste that in here. OK? I could also browse for a file on my local network, but I don't want to do that because I want this to update dynamically. And so then you click this 'Get Schema' button. And it reads in the XML file.

And this is actually pretty cool because it generates a schema of that file. So in my XML file, I have my channel tag done from that, I have the title and description of the RSS feed, and then also within that I have 'Item', and 'Item' is where my news stories actually are. And so if I open up the actual XML file--that's not it. This one.

And so you can see, here are my XML tags. I have, you know, 'Item' tag, and then within that, 'Title', 'Length', 'Description'. And so those correspond to the schema here.

And so what I have to do is I have to choose how granularly I want this XML file to be parsed. And so I want it to be parsed at the item level. I don't just want it to be parsed at the top, like, channel level of the RSS file. So I'm going to click 'Item' and I click 'Preview', which shows me basically the data that I'm pulling in and I can proof it and say, "Oh yeah, that's right! The titles are in the right places and the links are in the right places," etcetera. So I say "OK."

And here you can set the data types for each of your fields. And I'm OK with all these being strings, except 'pub date'. I'd like to make that be a 'dates'. And you can sort by each of the fields. I'd like it to be sorted just in the order of the XML file.

And then, these other options which I guess are kind of hidden. The stint on load is because if you have records that are duplicates of one another for whatever reason, it will get rid of the dupes.

And then there's also options down here for caching, but I want my XML file to be new every time. The application loads, so I'm not going to check that site. You click 'OK'. And so now I have a data set. And then as you go into... oops. I want to get into code view. Why aren't you doing code view? View... code. OK. It is kind of hard with this little screen.

OK. So as you can see, I put in some new Javascript files that created... Where did this go? OK. Yeah, it created sprydata.javascript and xpath.javascript in one of the sub-folders in my site. So that was that whole Spry extension thing, which is actually pretty cool.

And then it also created here my data source, and it's saying it's grabbing that RSS file. So, OK. So now I have my data source, but it's still not displaying anything yet because we have to tell it to display. View come about the design. There we go. OK. So now... Let's see. I can get all confused if I don't get to the right place in my notes.

OK. So now we're going to use Spry again. We're going to insert a--basically I think that makes all the news items display. So we're going to say 'Insert', 'Spry', and we want a repeat list. And so it's going to ask us how do we want to output our data, and if you output it as any of these lists, it only will display one field for each story.

For example, we've showed the titles of the stories but not the descriptions or the dates. Or if you do--there's another option here called 'Spry Repeat Table', and then you can form as many fields as you want, but puts it out in a table format. And so I actually don't really want either of those. I want to display my news stories but with their titles, their dates and their descriptions.

So I'm actually going to go in and generate this code but then tweak it a lot. So for now I'm going to say "I want an ordered list and I want to pull in the titles." Let's say "Yes." OK.

So now, this looks a little strange, but if you go into code view, it makes more sense. Basically what's happening here is I created a Spry region, and then within this, it's kind of like a loop that'll basically just show the titles of the news stories as list items over and over and over again.

But this is what I'm going to tweak. I'd like to display the dates and also the descriptions, so I'm going to just... I'm going to make this be a div also. There actually might be a way to do this in the Dreamweaver design view, but I don't really use Dreamweaver often, so I just find it easy to go and do the code. So change those divs, and then let's change this to be a paragraph tag. OK.

And then, I also want to just bring my dates from my descriptions, so I'll add those in. Oh, and also, the field between is curly braces. It's pulling--this is the name of the tag, like the title tag, and so I want to put the description tag up there also. So I'll just copy this. And so I would say here... I say "Pub Date" in the date field. And then I want the description underneath that. OK? And let's go bring in some break tags.

OK? And then it would be great if we could link to the stories, too. So let's start on a link tag. Oops. OK. Does that make sense, what I did there? OK. OK. Great.

So now, we'll save this. OK. I've never gotten that before. OK. So now we can preview this. See? This is what always happens during my live demos. Like, too embarrassing things.

I want this site. OK. So now hopefully this'll preview. And it should pull in the stories. Here we go.

So, this doesn't look too exciting, but basically what's happening here is this is an application and it's pulling in all the stories from the RSS feed. So, great. We got like the actual AJAX part of it working and now we just have to make it look better. OK? So we will do that.

First, you can see how the dates here are in the standard RSS date format. We can fill in some Javascript to format those dates nicely. So in the interest of saving time I'm going to copy and paste from something we did earlier. OK. So this is just standard issue Javascripts.  Now paste it into my file here. If we get rid of all these windows... OK. You paste it in here. OK?

So now, if we preview our dates to look better... OK, where did you go? No, they don't. How embarrassing. Yeah. That's right. OK. Thanks. OK. So now, preview. Here we go. OK. Yay, now it looks better. And that was, like, just write more Javascript. That wasn't AIR.

OK. But our application's still really boring-looking, so let's make it look prettier. OK? So I'm going to just throw in some CSS code that I did earlier.

So we'll copy and paste this in. So we create a new file in Dreamweaver. CSS. I'll paste my code in here. OK? So I want to save it in the same folder of course as the rest of my saved, I'll call it styles.css. And we can just kind of look at it here. We close out these.

OK. So basically what's going on here is... OK. I want to create a navigation bar later and that will have a little x-out and minimize button on. So these styles are for the back. I'm just going to reformat the H1 and P tags a little bit, make them have a curvy border.

OK? And the rest is just formatting the P tags to look better. So, I'll save that. And so now we'll preview our application. Oh no, you know what? I forgot something else.

Tech: The style page.

Christina Dulude: Yeah. Yeah. CSS styles. OK. So now they will preview.

OK. So now it looks a little more like how we want it. But it still looks kind of web page-ish. And so now we can go ahead and make it look more desktop application-ish. OK?

OK. So now I'm going to do more actual Adobe AIR stuff. If we go into site, and then we can change our AIR application settings... OK? And so, remember when we looked--actually let's go back to our application here. Cancel.  We talked about how this top border and these x-out buttons are called 'Chrome', so you can actually make your own 'Chrome' to make your application be branded with your own look and feel. So that is what we're going to do. OK? So now I'm going to go back to site in application settings.

So this is basically the function where we can specify options for your actual application, like the width and the height of it, and this whole System Chrome thing. And you can also set icons for your application.

So, initial content is what's the main page of your site. So I'm going to select 'Index', because that's the page I was working on. And 'System Chrome' by default, I have the System Chrome which has those standard Apple x-out buttons. But what I'd like to do is create my own custom Chrome with a transparent background.

If you do opaque, it just has a white background, but you can set the borders and things like that. So I'd like to do transparent. And that was a little too wide before, so I'm going to set my application to be 500 pixels wide by 500...yeah, width. 500 both.

'Icon'. I'm not going to set icons now, but what you can do is designate an icon for your application. And so that would show up in the dock part of your desktop and any place else where usually an application has an icon that is placed that would display that.

And you want the same icon for all of these. I mean, they couldn't, I guess, have different icons for different sizes. That might be confusing. So that's where you set your icon.

'Associated File Types'. If you have additional types of files, you can specify them, but I'm pretty sure we actually don't need to do anything there. OK.

'Included files'. It'll create this application .xml file, which basically specifies parameters for the application of what your icons are, what Chrome you want, as well as the width and height parameters. And so that all looks good.

And so I'm going to save it for now. And so now when I preview... OK, come on, preview. Why won't it preview? Let's see, 'File'. 'Preview'. How embarrassing. I don't know what's going on.

OK. Let me actually go... Maybe next time I'll be skipping the live demo aspect. OK. So let's see if it's the file types. Let's see. Well, I'm not actually sure what the system...

Well, yeah, usually that should work. Oh! Digital certificate, I forgot this. Sorry. This is actually another major point. This is actually the bottom of this, which is... All right, how to get to--let's see.

Basically what happens is down here below this, on a regular computer screen--it's probably very easy to get to--you need to create and sign a digital certificate. So let's see if I can do this. In fact, let me... maybe turn off there for a minute? Sorry, guys. OK. So now... They drag this over. Let's do this again. OK. Site. My application settings.

And so now... OK. Down here. OK, here where it says, "Digital Signature" which also even displaying properly. Basically what happens is you say "Set" and then it opens up this box. And what the digital signature does is that it ensures your users who download your application that it's authentic and it's legitimate and it's not like some malware thing. Or I guess in theory you could create some malware thing and then like digitally sign it. But in theory it's supposed to, I guess, make you more credible.

So, if I had a digital certificate already created, I could use it. And once you create one, you keep it in the same folder as the rest of your Adobe AIR applications. You don't have to create it again and again and again. You can just browse and find it. But I don't have one created, so I'm going to create a new one.

I... OK so I put my name here. We can skip all that. My password, I'll put in some random password and I'll confirm it. And so I'm going to save the name of my digital certificate, so I'm going to call it 'Digital Cert', which is not very creative.

And I'm going to browse for where I want to put it. And I'll just probably save it here again. And so I put it in the same directory as my application, but I don't have to. I could put it somewhere else if I wanted to. And I will say "Save." And so it's there. And so I say "OK." OK, so I have a dialog here saying that it's successful. So I say, "Yay!"

OK, so I've created this certificate, but I have to actually attach it to my application. So I will put it here. And remember the password. Yes. And I will click 'OK'.

And so, great. So now that thing has been signed digitally, and that mentions nothing else I have to put down there. OK. There's a couple of other fields at the bottom of this which don't show up on the screen, but they don't really matter. So let's skip that and we'll say "Save".

So now, back to my application. I'm going to go back into Mirror View again. OK. So this is my information. So hopefully this will preview correctly this time. Now why aren't we previewing? Well, did you memorize it. OK. I'm actually not sure why that isn't previewing, so I'm going to copy over code from my other folder.

Tech: Yeah, the type.

Christina Dulude: Oh, I do? Where?

Tech: Yeah. A bit higher up.

Christina Dulude: Here? Oh. OK.

Tech: Would that matter?

Christina Dulude: Possibly.

Tech: You see up there?

Christina Dulude: Oh, yeah! I copied it twice. Thanks. OK, so, yeah. OK. Let's see if that works. Yeah. How embarrassing. No, oh no. That's OK. That's actually... I think we're kind of running low on time anyway, so...

Anyway, if we were packaging this as a real actual Adobe AIR application, we go back into this AIR application settings option and we would say, "Create AIR File." And so now it is creating it even though maybe something is potentially wrong with it. OK. Yay, it created it!

So now, this AIR file is stored in that same folder as my application. We can pull this out here... which I think I closed out accidentally. But it's in my other folder here. [35:29 XX] which also isn't here. Oh no! Where? You do my presentation better than me. Here you go. Come on.

OK. So then, do the RSS Viewer. Here is my actual application. And so now I could upload this to a website and people could download it and install it on their own machines, or I could go and email it to people and they could install it and they would have their special Duke RSS Viewer if they wanted.

So yeah. That's it. Sorry about all the technical difficulties. Do you guys have any questions, comments? Yes.

Audience 1: Can you run the AIR app with Adobe Runtime Environment? So is it a one-click install or two-step install?

Christina Dulude: I honestly don't know. I haven't heard of being able to do that. I don't know. I mean, do the rest of you know who download in Solex? No? I mean you can't say no, but I honestly don't know, so... Yeah.

Audience 2: How would you connect this to mnemonics or something like that. Can you use it to push back that--

Christina Dulude: Yeah. You can do that, I'm guessing through other types of web services. I think XML is the most common with transferring that data. So yeah. But anyway, I mean, it is a two-way thing. It can go back and forth. Yeah.

Audience 3: I think you have some bases that are assumed?

Christina Dulude: It is. Yeah. The one that's bundled with AIR, yeah. OK. Yeah?

Audience 3: Do you know any available tools in making it less techy?

Christina Dulude: You mean directly from the application or...

Audience 3: Synchronize it more with the server.

Christina Dulude: OK. I actually don't know how to do that specifically, but I think that's actually how it syncs up with data that's stored on a remote server versus what you do in the actual AIR application. I don't know how to do that. That's sort of the short answer to it. Sorry. Anyone else?

OK. I guess that's a wrap. Thanks for the--I'm sorry for the road bumps and the technical demo, so...yeah?

Facilitator: Any more questions?

Christina Dulude: Thanks, everyone.

Facilitator: Thank you!

[Applause]

Announcer: For more presentations from the 2008 HighEdWeb Conference visit HighEdWeb.org/2008 or sign up for our podcast and feed at HighEdWeb.org/podcast.xml

[End of Music]