SlideShare a Scribd company logo
FRESH AIR: Developing AIR
          applications with Aptana Studio
                                   Mark Drew
             4th-6th June 2008
             Edinburgh, Scotland

Friday, 6 June 2008                            1
What’s this about then?
                      •   Getting a “breath” of AIR (Adobe’s Integrated
                          Runtime)

                      •   Getting Aptana Studio up and running for AIR
                          development

                      •   Writing a real application using technologies
                          ColdFusion developers already know: JavaScript
                          (JQuery) and HTML

                      •   Mainly a coding demo (so you might want to
                          move closer rather than going blind)
Friday, 6 June 2008                                                        2
What’s this not about?

                      •   Using FlexBuilder or CFEclipse

                      •   Writing ColdFusion

                      •   Open Sourcing a CFML Engine

                      •   A JQuery tutorial (although I shall
                          show you some of what it can do)

                      •   A slide rich environment. (sorry if
                          you like looking at pretty slides)


Friday, 6 June 2008                                             3
Who is Mark Drew?
              •       CFEclipse’s Lead Developer

              •       Product Manager at Design UK
                      http://www.designuk.com

              •       LavaSuite Content Management System

              •       UK ColdFusion User Group’s Co-Manager

              •       A ColdFusion Developer since ‘97 and Web
                      developer since ‘94

              •       An occasional presenter on topics such as
                      CFEclipse, ColdFusion, Ajax, ColdSpring and
                      ModelGlue

              •       A guy with very little ‘air

Friday, 6 June 2008                                                 4
Top Secret

                      • Don’t tell anyone but....
                      • This is only my second AIR
                        application.
                      • So don’t laugh.
                      • Be kind.

Friday, 6 June 2008                                  5
What is AIR?
                      •   Bringing Rich Internet Applications
                          (RIAs) to the desktop

                      •   Flex/Flash and HTML/JavaScript on
                          the Desktop

                      •   Mac/PC and soon Linux

                      •   Provides access to the filesystem,
                          SQL light database, network
                          functions, custom chrome, drag and
                          drop and more...

                      •   How can we build these applications?


Friday, 6 June 2008                                              6
Flex, Flash or HTML?




Friday, 6 June 2008                          7
Use what you know

                      • As a web developer you can leverage your
                        current knowledge
                      • HTML, JavaScript, JavaScript libraries
                      • Use your weapons of choice


Friday, 6 June 2008                                                8
Enter: Aptana Studio
                      • HTML, JavaScript, SQL, CSS,
                        XML, etc IDE
                      • AutoMagically handles *most*
                        JavaScript libraries
                      • Develop iPhone, PHP and
                        RoR Applications
                      • ... and of course, HTML AIR
                        applications

Friday, 6 June 2008                                    9
Before we go, JQuery!
                      •   JavaScript framework with a difference

                      •   Its a fast, concise way to access the DOM and
                          perform manipulations, transformations,
                          animations and Ajax

                      •   Uses the CSS selector syntax to get objects

                      •   E.g.
                          $(“.someclass #withID”).text();

                          $("p.surprise").addClass("ohmy").show("slow");




Friday, 6 June 2008                                                        10
JQuery Demo




                      Paperclip and chewing gum not required
Friday, 6 June 2008                                            11
Back on topic with AIR

                      • Will be building an
                        application from
                        scratch...
                      • Well no, there will be
                        one I prepared earlier




Friday, 6 June 2008                              12
What are we going to
                             build?
                             • YafTc
                             • (Yet another funky Twitter
                               client)
                             • Uses Twitter’s JSON API to
                               get and send messages
                             • Uses features of AIR as a
                               client
                             • Stores and Sends offline
                               messages
Friday, 6 June 2008                                         13
Installation
          •       Install Aptana Studio
                  (http://www.aptana.com/studio)

          •       Install AIR and AIR SDK
                  (http://www.adobe.com/
                  products/air/)

          •       Install Aptana’s AIR Plugin using
                  the IDE’s Homepage




Friday, 6 June 2008                                   14
Building our Application

              • Create a new AIR Application
              • Choose the window options
              • Add application icons
              • Choose the JavaScript library

Friday, 6 June 2008                             15
Getting the UI ready
       • Copy over all the images/
               styles
       • Changing the Chrome in
               Application.xml
             • Custom
             • Sizes
       • Changing the Transparency
Friday, 6 June 2008                          16
Adding Window
                                   Controls
       • Move:              nativeWindow.startMove();


       • Minimize:                 window.nativeWindow.minimize();


       • Close:var closing = new air.Event(air.Event.CLOSING, true, true);


   	           window.nativeWindow.dispatchEvent(closing);
   	           if(!closing.isDefaultPrevented()){
   	               nativeWindow.close();
   	           }




       • Resize:
               window.nativeWindow.startResize(air.NativeWindowResize.BOTTOM_RIGHT);




Friday, 6 June 2008                                                                    17
Checking Network
                              Status
                      • Add servicemonitor.swf
                      • setup our request
                      • add a monitor
                      • add a listener to
                        air.Event.NETWORK_CHANGE
                      • Respond to changes
Friday, 6 June 2008                                18
Get external data

                      • JavaScript is sandboxed in browsers
                      • AIR has a different set of sandbox rules.
                      • Main change is that we can access external
                        websites via AJAX
                      • Lets do that!

Friday, 6 June 2008                                                  19
Send External Data

                      • Send messages to twitter, update them of
                        our status!
                      • Posting AJAX(AJAJ really) to a remote
                        server




Friday, 6 June 2008                                                20
Saving to the file
                                system
                      • Messages need to be stored when you are
                        not online
                      • When you go back online, we need to send
                        the messages
                      • Lets add some File IO Functionality

Friday, 6 June 2008                                                21
And its that easy!




Friday, 6 June 2008                        22
Finally...

                      • You know how to get the tools to develop
                        AIR Applications
                      • You can leverage your existing knowledge
                        to build desktop apps
                      • You saw how to create a fairly complex AIR
                        application



Friday, 6 June 2008                                                  23
Q&A

                      • mark.drew@gmail.com
                      • Mark Drew http://www.markdrew.co.uk
                      • Aptana http://www.aptana.com
                      • Adobe AIR http://www.adobe.com/air/


Friday, 6 June 2008                                           24

More Related Content

What's hot (11)

Overview of DroidCon UK 2015
Overview of DroidCon UK 2015
Elif Boncuk
 
T 0230 Google Wave Powered By Gwt
T 0230 Google Wave Powered By Gwt
supertoy2015
 
Building an Eclipse plugin to recommend changes to developers
Building an Eclipse plugin to recommend changes to developers
kim.mens
 
OPS4J Pax Tools - Kickstart your OSGi Adventure
OPS4J Pax Tools - Kickstart your OSGi Adventure
Toni Menzel
 
Designing Puppet: Roles/Profiles Pattern
Designing Puppet: Roles/Profiles Pattern
Puppet
 
Maven: from Scratch to Production (.pdf)
Maven: from Scratch to Production (.pdf)
Johan Mynhardt
 
Maven
Maven
feng lee
 
01-a-Intro-BetterDev
01-a-Intro-BetterDev
Marcio Marchini
 
Eclipse e4
Eclipse e4
Chris Aniszczyk
 
Unobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQuery
Simon Willison
 
DevNexus 2019: Migrating to Java 11
DevNexus 2019: Migrating to Java 11
DaliaAboSheasha
 
Overview of DroidCon UK 2015
Overview of DroidCon UK 2015
Elif Boncuk
 
T 0230 Google Wave Powered By Gwt
T 0230 Google Wave Powered By Gwt
supertoy2015
 
Building an Eclipse plugin to recommend changes to developers
Building an Eclipse plugin to recommend changes to developers
kim.mens
 
OPS4J Pax Tools - Kickstart your OSGi Adventure
OPS4J Pax Tools - Kickstart your OSGi Adventure
Toni Menzel
 
Designing Puppet: Roles/Profiles Pattern
Designing Puppet: Roles/Profiles Pattern
Puppet
 
Maven: from Scratch to Production (.pdf)
Maven: from Scratch to Production (.pdf)
Johan Mynhardt
 
Unobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQuery
Simon Willison
 
DevNexus 2019: Migrating to Java 11
DevNexus 2019: Migrating to Java 11
DaliaAboSheasha
 

Viewers also liked (6)

An%20Intermediate%20Google%20SketchUp%20Tutorial%20-%20Part%203
An%20Intermediate%20Google%20SketchUp%20Tutorial%20-%20Part%203
tutorialsruby
 
rails.html
rails.html
tutorialsruby
 
Informing Faculty Case Template
Informing Faculty Case Template
tutorialsruby
 
p10
p10
tutorialsruby
 
M Y S P I R I T U A L Q U E S T O N D R
M Y S P I R I T U A L Q U E S T O N D R
drsolapurkar
 
M.S.Transcript
M.S.Transcript
Kanutsanun Bouking
 
An%20Intermediate%20Google%20SketchUp%20Tutorial%20-%20Part%203
An%20Intermediate%20Google%20SketchUp%20Tutorial%20-%20Part%203
tutorialsruby
 
Informing Faculty Case Template
Informing Faculty Case Template
tutorialsruby
 
M Y S P I R I T U A L Q U E S T O N D R
M Y S P I R I T U A L Q U E S T O N D R
drsolapurkar
 
Ad

Similar to FreshAir2008 (20)

Air(2)
Air(2)
tomcoh
 
Adobe AIR Overview
Adobe AIR Overview
AndreCharland
 
Adobe Air
Adobe Air
Momentum Design Lab
 
Building Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIR
funkatron
 
RIA meets Desktop
RIA meets Desktop
Peter Elst
 
Making Money with Adobe AIR
Making Money with Adobe AIR
Almog Koren
 
Flex3
Flex3
SaurabhIT
 
Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10
Stefano Virgilli
 
iPhone Web Development
iPhone Web Development
Andy Peters
 
Screw HTML5, make cool shit with AIR
Screw HTML5, make cool shit with AIR
Eric Fickes
 
Adobe AIR Seminar
Adobe AIR Seminar
Yoss Cohen
 
Wes Leonardo - Putting AIR into your Application
Wes Leonardo - Putting AIR into your Application
360|Conferences
 
Getting Creative with Adobe AIR
Getting Creative with Adobe AIR
Peter Elst
 
Prototyping Adobe AIR Applications with Fireworks CS4
Prototyping Adobe AIR Applications with Fireworks CS4
Juan Sanchez
 
The Next Generation of Flash User Experience
The Next Generation of Flash User Experience
Kevin Suttle
 
Web Animation Buffet
Web Animation Buffet
joshsager
 
Flex Air Intro
Flex Air Intro
JUG Genova
 
Reasons for Flash: Flash Development in an HTML5 and App Store World
Reasons for Flash: Flash Development in an HTML5 and App Store World
EffectiveUI
 
Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)
Addy Osmani
 
David Coletta Architecting A Shared Codebase For Browser And Desktop Final
David Coletta Architecting A Shared Codebase For Browser And Desktop Final
dcoletta
 
Air(2)
Air(2)
tomcoh
 
Building Desktop RIAs with PHP, HTML & Javascript in AIR
Building Desktop RIAs with PHP, HTML & Javascript in AIR
funkatron
 
RIA meets Desktop
RIA meets Desktop
Peter Elst
 
Making Money with Adobe AIR
Making Money with Adobe AIR
Almog Koren
 
Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10
Stefano Virgilli
 
iPhone Web Development
iPhone Web Development
Andy Peters
 
Screw HTML5, make cool shit with AIR
Screw HTML5, make cool shit with AIR
Eric Fickes
 
Adobe AIR Seminar
Adobe AIR Seminar
Yoss Cohen
 
Wes Leonardo - Putting AIR into your Application
Wes Leonardo - Putting AIR into your Application
360|Conferences
 
Getting Creative with Adobe AIR
Getting Creative with Adobe AIR
Peter Elst
 
Prototyping Adobe AIR Applications with Fireworks CS4
Prototyping Adobe AIR Applications with Fireworks CS4
Juan Sanchez
 
The Next Generation of Flash User Experience
The Next Generation of Flash User Experience
Kevin Suttle
 
Web Animation Buffet
Web Animation Buffet
joshsager
 
Flex Air Intro
Flex Air Intro
JUG Genova
 
Reasons for Flash: Flash Development in an HTML5 and App Store World
Reasons for Flash: Flash Development in an HTML5 and App Store World
EffectiveUI
 
Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)
Addy Osmani
 
David Coletta Architecting A Shared Codebase For Browser And Desktop Final
David Coletta Architecting A Shared Codebase For Browser And Desktop Final
dcoletta
 
Ad

More from tutorialsruby (20)

<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
 
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
tutorialsruby
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
tutorialsruby
 
xhtml_basics
xhtml_basics
tutorialsruby
 
xhtml_basics
xhtml_basics
tutorialsruby
 
xhtml-documentation
xhtml-documentation
tutorialsruby
 
xhtml-documentation
xhtml-documentation
tutorialsruby
 
CSS
CSS
tutorialsruby
 
CSS
CSS
tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
tutorialsruby
 
HowTo_CSS
HowTo_CSS
tutorialsruby
 
HowTo_CSS
HowTo_CSS
tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
cascadingstylesheets
cascadingstylesheets
tutorialsruby
 
cascadingstylesheets
cascadingstylesheets
tutorialsruby
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
 
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
tutorialsruby
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
cascadingstylesheets
cascadingstylesheets
tutorialsruby
 
cascadingstylesheets
cascadingstylesheets
tutorialsruby
 

Recently uploaded (20)

No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 

FreshAir2008

  • 1. FRESH AIR: Developing AIR applications with Aptana Studio Mark Drew 4th-6th June 2008 Edinburgh, Scotland Friday, 6 June 2008 1
  • 2. What’s this about then? • Getting a “breath” of AIR (Adobe’s Integrated Runtime) • Getting Aptana Studio up and running for AIR development • Writing a real application using technologies ColdFusion developers already know: JavaScript (JQuery) and HTML • Mainly a coding demo (so you might want to move closer rather than going blind) Friday, 6 June 2008 2
  • 3. What’s this not about? • Using FlexBuilder or CFEclipse • Writing ColdFusion • Open Sourcing a CFML Engine • A JQuery tutorial (although I shall show you some of what it can do) • A slide rich environment. (sorry if you like looking at pretty slides) Friday, 6 June 2008 3
  • 4. Who is Mark Drew? • CFEclipse’s Lead Developer • Product Manager at Design UK http://www.designuk.com • LavaSuite Content Management System • UK ColdFusion User Group’s Co-Manager • A ColdFusion Developer since ‘97 and Web developer since ‘94 • An occasional presenter on topics such as CFEclipse, ColdFusion, Ajax, ColdSpring and ModelGlue • A guy with very little ‘air Friday, 6 June 2008 4
  • 5. Top Secret • Don’t tell anyone but.... • This is only my second AIR application. • So don’t laugh. • Be kind. Friday, 6 June 2008 5
  • 6. What is AIR? • Bringing Rich Internet Applications (RIAs) to the desktop • Flex/Flash and HTML/JavaScript on the Desktop • Mac/PC and soon Linux • Provides access to the filesystem, SQL light database, network functions, custom chrome, drag and drop and more... • How can we build these applications? Friday, 6 June 2008 6
  • 7. Flex, Flash or HTML? Friday, 6 June 2008 7
  • 8. Use what you know • As a web developer you can leverage your current knowledge • HTML, JavaScript, JavaScript libraries • Use your weapons of choice Friday, 6 June 2008 8
  • 9. Enter: Aptana Studio • HTML, JavaScript, SQL, CSS, XML, etc IDE • AutoMagically handles *most* JavaScript libraries • Develop iPhone, PHP and RoR Applications • ... and of course, HTML AIR applications Friday, 6 June 2008 9
  • 10. Before we go, JQuery! • JavaScript framework with a difference • Its a fast, concise way to access the DOM and perform manipulations, transformations, animations and Ajax • Uses the CSS selector syntax to get objects • E.g. $(“.someclass #withID”).text(); $("p.surprise").addClass("ohmy").show("slow"); Friday, 6 June 2008 10
  • 11. JQuery Demo Paperclip and chewing gum not required Friday, 6 June 2008 11
  • 12. Back on topic with AIR • Will be building an application from scratch... • Well no, there will be one I prepared earlier Friday, 6 June 2008 12
  • 13. What are we going to build? • YafTc • (Yet another funky Twitter client) • Uses Twitter’s JSON API to get and send messages • Uses features of AIR as a client • Stores and Sends offline messages Friday, 6 June 2008 13
  • 14. Installation • Install Aptana Studio (http://www.aptana.com/studio) • Install AIR and AIR SDK (http://www.adobe.com/ products/air/) • Install Aptana’s AIR Plugin using the IDE’s Homepage Friday, 6 June 2008 14
  • 15. Building our Application • Create a new AIR Application • Choose the window options • Add application icons • Choose the JavaScript library Friday, 6 June 2008 15
  • 16. Getting the UI ready • Copy over all the images/ styles • Changing the Chrome in Application.xml • Custom • Sizes • Changing the Transparency Friday, 6 June 2008 16
  • 17. Adding Window Controls • Move: nativeWindow.startMove(); • Minimize: window.nativeWindow.minimize(); • Close:var closing = new air.Event(air.Event.CLOSING, true, true); window.nativeWindow.dispatchEvent(closing); if(!closing.isDefaultPrevented()){ nativeWindow.close(); } • Resize: window.nativeWindow.startResize(air.NativeWindowResize.BOTTOM_RIGHT); Friday, 6 June 2008 17
  • 18. Checking Network Status • Add servicemonitor.swf • setup our request • add a monitor • add a listener to air.Event.NETWORK_CHANGE • Respond to changes Friday, 6 June 2008 18
  • 19. Get external data • JavaScript is sandboxed in browsers • AIR has a different set of sandbox rules. • Main change is that we can access external websites via AJAX • Lets do that! Friday, 6 June 2008 19
  • 20. Send External Data • Send messages to twitter, update them of our status! • Posting AJAX(AJAJ really) to a remote server Friday, 6 June 2008 20
  • 21. Saving to the file system • Messages need to be stored when you are not online • When you go back online, we need to send the messages • Lets add some File IO Functionality Friday, 6 June 2008 21
  • 22. And its that easy! Friday, 6 June 2008 22
  • 23. Finally... • You know how to get the tools to develop AIR Applications • You can leverage your existing knowledge to build desktop apps • You saw how to create a fairly complex AIR application Friday, 6 June 2008 23
  • 24. Q&A [email protected] • Mark Drew http://www.markdrew.co.uk • Aptana http://www.aptana.com • Adobe AIR http://www.adobe.com/air/ Friday, 6 June 2008 24