Notes for Pre-conference Viewers• First, thanks for your interest in this presentation. The version you are

viewing is about 90% complete. Most of the content is set but I’m still playing around with the eye-candy (transitions, animation, and such).

• The slides present the basic concepts and show corresponding code. A sample application will be used during the workshop to further demonstrate each idea (outside of these slides). And I’ll flip over to applications to show something live. Plus, I’ll probably do a bit of talking... In other words, there’s much more to the workshop than just these slides (but you probably already knew that).

• I highly recommend that attendees download the following before the conference, if you have not already (all are free):

• Adobe AIR runtime (get.adobe.com/air)

• Adobe AIR SDK (www.adobe.com/products/air/tools/sdk)

• Java Runtime Environment (java.sun.com)

• If you are using either Adobe Dreamweaver or Aptana Studio, you should configure them for Adobe AIR application development. For details, see the corresponding Help files, search the Web, or email me. If you’re not already using Dreamweaver, I would recommend grabbing Aptana Studio: it’s free and runs on most platforms.

• You will be able to download the source files (for the sample application) from www.DMCInsights.com/air/voices2008.php prior to the workshop.

• If you have any questions or comments, you can contact me at larry@DMCInsights.com.

Adobe AIR for Designers

Larry UllmanVoices That Matter: Web Design Conference 2008

Nashville, TN

Introductions

Adobe AIR

Me

Adobe AIR Adobe AIR

This Class

You

Intro to JavaScript

•JavaScript is included using the SCRIPT tag.

•Comments start with double slashes (//).

•Always quote strings, never quote numbers.

•Statements terminate with a semicolon.

•JavaScript is case-sensitive!

The Very, Very Basics

<script type=”text/javascript”>CODE</script>

<script type=”text/javascript” src=”filename.js”></script>

// This is a comment.

‘This is a string’

2 + 2 = 4;

varName != varname

•Use VAR to create a variable of any type.

•A variable’s name contains letters, numbers, and the underscore.

•Use the equals sign to assign a value.

•Variables can also be defined with a value of true, false, null, or an empty string.

Creating Variables

var variableName;

var variableName = value;

var variableName = true;

var variableName = null;

var variableName = ‘’;

Working with Variables

var firstName = ‘Larry’;

var lastName = ‘Ullman’;

var name = firstName + ‘ ‘ + lastName; // Concatenation.

name += ‘, Esq.’; // Concatenation operator.

var age = 36;

age = age + 1;

age++; // Incrementation.

•Conditionals

if

if - else

if - elseif

if - elseif - else

•Loops

for

while

Control Structures

if (sex == ‘M’) {

alert(‘Sir’);

} else if (sex == ‘F’) {

alert(‘Madam’);

} else {

alert(‘You’);

}

Creating Functions

function functionName([args]) {

// function code

}

function alertThis(msg) {

alert(msg);

}

Invoking Functions

function alertThis(msg) {

alert(msg);

}

alertThis(‘Hello, World!’);

function add(n1, n2) {

return n1 + n2;

}

var num = add(2, 2);

•Variables defined outside of a function can be referenced inside of a function.

•Variables defined inside of a function using VAR exist only within that function.

•Variable scope is a common cause of bugs!

Variable Scope

var num = 0;

function plusOne() {

num++;

}

plusOne();

function minusOne() {

var num = 10;

num--;

}

minusOne();

different!

same!

•Event handling means calling a function when something happens.

•Two ways of associating events with functions:

•HTML

•JavaScript

Handling Events

<button onclick=”sayHello();”>Say Hello</button>

window.onload = sayHello;

function sayHello() {...}

varName.addEventListener (eventType, functionName);

Intro to OOP

•A class is a blueprint for a thing.

•Classes define variables and functions necessary for that thing.

•Class variables are called properties.

•Class functions are called methods.

•An object is a special type of variable: an instance of a particular class.

•A constructor is a special function (method) called when an object of that class type is created.

OOP in Practice

var larry = new Person(‘Larry’); // Create the object.

larry.age = 36; // Assign a value to a object variable.

larry.teach(); // Call object function (method).

var rect = new Rectangle(10, 20);

var area = rect.getArea(); // Area == 200

if (rect.isSquare()) { // False

} else {

}

DOM Scripting Basics

•Use document.getElementById().

•Requires unique ID values!

•Can only be called after the page has loaded!

Finding an Element

window.onload = function() {

var p = document.getElementById(‘theText’);

}

...

<p id=”theText”></p>

•For most elements, refer to its innerText or innerHTML attributes.

•For most form elements, refer to its value attribute.

Updating an Element

window.onload = function() {

var p = document.getElementById(‘theText’);

p.innerText = ‘display this’;

}

...

<p id=”theText”></p>

•Use createElement().

•Then add the new element as a child node of another element.

Adding Elements

var p = document.getElementById(‘theText’);

var h1 = document.createElement(‘h1’);

h1.innerText = ‘This is a title.’;

p.appendChild(h1);

Creating Applications

Text Editor and Command Line

Adobe Dreamweaver

Aptana Studio

Components•Project Directory

•application Descriptor File

•HTML Page

•JavaScript

•Other Resources

Development Process

1.Create Components

2.Test

3.Debug and Retest

4.Build

5.Install

6.Distribute

Application Descriptor File

• Defines the application’s name.

• Defines the application’s ID.

• Provides the application’s version number, description, and copyright.

• Dictates the appearance of the primary window.

• Identifies the application’s representative icons.

•any standard of HTML.

•Use CSS, images, videos, etc.

•If it looks okay in AIR, it’ll always look okay!

HTML Page

<html>

<head>

<title>Hello, World!</title>

</head>

<body>

<h1>Hello, World!</h1>

</body>

</html>

Starting the Example Application

1.Structure the Project Folder.

2.Create icons.

3.Copy over other resources.

4.Edit the Application Descriptor File.

5.Start with the HTML page.

6.JavaScript, JavaScript, JavaScrpt!

Creating a Custom Window

Basics

• Primary application window is customized through the application descriptor file:

• Visibility (invisible by default!)

• Size

• Location

• Chrome (standard or none)

• Secondary windows are customized through NativeWindowInitOptions object.

Chrome Options

• Standard chrome looks like normal OS windows.

• No chrome means you give app its entire look.

• Transparent

• Non-rectangular shapes

• Must provide basic functionality!

Native Window Types

Normal

Lightweight

Utility

Change Mac images without border

•Create a NativeWindowInitOptions object.

•Tweak the options.

•Use a Rectangle object to define its size.

•Invoke HTMLLoader.createRootWindow().

Creating Native Windows

var options = new air.NativeWindowInitOptions();

options.type = air.NativeWindowType.UTILITY;

var rect = new air.Rectangle(50, 50, 200, 200);

var popup = air.HTMLLoader.createRootWindow(true, options, false, rect);

List other options

Make note of createRootWindow() arguments

•Create a File object.

•Create a URLRequest object.

•Load the URLRequest.

Loading Window Content

var page = air.File.applicationDirectory.resolvePath('getAccessInfo.html');

var url = new air.URLRequest(page.url);

popup.load(url);

Creating Menus

Basics•All menus are NativeMenu objects.

•Menu items are NativeMenuItem objects.

•Submenus are placed within a parent NativeMenu object.

•Use event listeners to associate menu item selection with a function.

•Create one parent menu.

•Create a submenu.

•Create items.

•Add event listeners.

•Add the item to the submenu.

Creating Menu Objects

var rootMenu = new air.NativeMenu();

var subMenu = new air.NativeMenu();

var item = new air.NativeMenuItem('Label');

item.addEventListener(air.Event.SELECT, doThis);

subMenu.addItem(item);

•Add the submenus to the main menu.

•Add the main menu to the application.

Creating App Menus

rootMenu.addSubmenu(subMenu, 'Menu Label');

// Windows:

window.nativeWindow.menu = rootMenu;

// Mac:

air.NativeApplication.nativeApplication.menu = rootMenu;

Storing Data Securely

Basics

•Uses the EncryptedLocalStore and ByteArray classes.

•Data is stored in an encrypted format.

•Each application has its own secure storage.

•Call the reset() method to start, just in case.

•Create a ByteArray object.

•Write the data to the ByteArray object.

•Store the ByteArray.

Storing Data

air.EncryptedLocalStore.reset();

var output = new air.ByteArray();

output.writeUTFBytes(‘data’);

air.EncryptedLocalStore.setItem('name', output);

•Retrieve the data from the store.

•Read the data from the ByteArray.

Retrieving Data

var input = air.EncryptedLocalStore.getItem('name');

var data = input.readUTFBytes(input.length);

Working with Files and Directories

Basics

•Always starts with a File object.

•Use FileStream and FileMode classes to read from or write to files.

•Use resolvePath() to identify a file or directory.

•userDirectory

•documentsDirectory

•desktopDirectory

•applicationDirectory

•applicationStorageDirectory

Five Locations

var f1 = air.File.userDirectory;

var f2 = air.File.applicationStorageDirectory;

var f3 = air.File.desktopDirectory.resolvePath(‘somefile.txt’;

Prompting the User

var f = air.File.userDirectory;

f.browseForOpen;

// f.browseForDirectory

// f.browseForSave

• exists

• isDirectory

• nativePath

• url

Common Properties

var f = air.File.userDirectory;

f.browseForOpen;

if (f.exists && f.isDirectory) {

alert(f.nativePath);

}

Common Methods

• copyTo()

• createDirectory()

• createTempFile()

• deleteDirectory()

• deleteFile()

• getDirectoryListing()

• moveTo()

• moveToTrash()

Using a Database

Basics

•The runtime installs SQLite (www.sqlite.org).

•Uses the SQLConnection and SQLStatement classes.

•Open the database connection when app starts; close it when app closes.

•Distribute the database with the app!

•Create a File object.

•Create an SQLConnection object.

•Invoke the openAsync() method.

•Invoke the close() method.

Connecting

var dbFile = air.File.applicationStorageDirectory.resolvePath('books.db');

var conn = new air.SQLConnection();

conn.openAsync(dbFile, air.SQLMode.UPDATE);

conn.close();

•Create an SQLStatement object.

•Associate the statement with the connection.

•Add the event listener.

•Define and execute the query.

Simple Queries

var insert = new air.SQLStatement();

insert.sqlConnection = conn;

insert.addEventListener( air.SQLEvent.RESULT, insertResult);

insert.text = “INSERT INTO users (fName, lName) VALUES (‘Larry’, ‘Ullman’)”;

insert.execute();

•Create an SQLStatement object.

•Associate the statement with the connection.

•Add the event listener.

•Define and execute the query.

Selecting Data

var select = new air.SQLStatement();

select.sqlConnection = conn;

select.addEventListener(air.SQLEvent.RESULT, selectResult);

select.text = “SELECT * FROM users”;

select.execute();

•Define the handling function.

•Retrieve the results.

•Confirm that there are results.

•Loop through the results.

Retrieving Data

function selectResult() {

var results = select.getResults();

if (results.data != null) {

for (var i = 0; i < results.data.length; i++) {

// Use results.data[i].

} // End of FOR.

} // End of IF.

} // End of function.

Networking

Basics

•Uses the URLRequest, URLLoader, URLVariables, URLMonitor, and URLStreamclasses (among others).

•The URLMonitor class requires the servicemonitor.swf file (found in the SDK/frameworks folder).

•Many features require some server-side control and implementation.

Check user

online status

Possible Uses

Check server online status

Down-load text

Down-load files

Down-load other data

uploadtext

Upload files

Update the app

•Include the servicemonitor.swf file.

•Create a URLRequest object.

•Create a URLMonitor object.

•Add an event listener

•Start the monitor.

Monitoring a Resource

<script src="servicemonitor.swf" type="application/x-shockwave-flash"></script>

var url = new air.URLRequest('http://www.example.com');

var monitor = new air.URLMonitor(url);

monitor.addEventListener(air.StatusEvent.STATUS, statusChange);

monitor.start();

function statusChange() {

// Check monitor.available

}

•Create a URLResource object.

•Create a URLLoader object.

•Add an event listener.

•Load the resource.

Retrieving Data

var loader = new air.URLLoader();

var url = new air.URLRequest('http://www.example.com');

loader.addEventListener(air.Event.COMPLETE, loadComplete);

loader.load(url);

function loadComplete() {

// Use loader.data

}

Where to Go From Here

Adobe.com

• Download the runtime and SDK.

• Download sample applications.

• Read tutorials.

• View documentation.

• Read security papers.