Upload
dohanh
View
232
Download
1
Embed Size (px)
Citation preview
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 [email protected].
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.