IntroductionWelcome| 00:00 | Hi, my name is David Gassner, and I'd like to welcome you to
this AIR 1.0 Essential Training video series from lynda.com.
| | 00:07 | AIR, the Adobe integrated runtime from Adobe Systems,
has been in development for the last couple of years
| | 00:13 | and with this 1.0 release of the product, developers
will now be able to build cross-platform applications,
| | 00:19 | leveraging their existing skills in HTML, Flash and Flex,
and deploy them on both Mac and Windows operating systems.
| | 00:27 | The primary goal of this series is to get you acquainted
with the product and to show you the options and capabilities
| | 00:32 | and to show you what it feels like to
develop in the different environments.
| | 00:36 | The AIR STK, Flex Builder, Dreamweaver and Flash.
| | 00:41 | In the video series that lynda.com is publishing,
| | 00:43 | you'll be able to dive deeper into these technologies
focusing on your development platform.
| | 00:48 | For instance, one of the follow up video series will be totally
focused on Flex, allowing Flex developers to dive deeper
| | 00:55 | into this technology and see what kind of applications they can create.
| | 00:58 | Similarly for Flash and HTML developers.
| | 01:01 | You can select a video series that's dedicated
to the way you develop applications.
| | 01:06 | So I hope this training is helpful and that you learn a lot
about what the Adobe integrated runtime is and how you
| | 01:12 | use it to build these cross operating system applications.
| | Collapse this transcript |
| Setting up the exercise files| 00:00 | If you're a premium member of the lynda.com Online Training Library
| | 00:04 | or if you are watching this tutorial on a disk, you have
access to the exercise files used throughout this title.
| | 00:09 | The exercise files are delivered in a ZIP or an archive file
| | 00:13 | that can be extracted and used on either Windows or Mac OS X.
| | 00:17 | You can extract these exercise files anywhere on disk. For
instance, if you're working on Windows, you might install them
| | 00:23 | right into the C drive root.
| | 00:24 | Or if you're working on a Mac, you might create
them in a folder under your user directory.
| | 00:28 | You can extract these files using either your
operating system capabilities or a ZIP utility.
| | 00:34 | I'm working on Windows Vista
| | 00:35 | so I'll double-click the .ZIP file to open it up
| | 00:38 | and you'll see that it contains a single
folder called AIR Essential Training.
| | 00:42 | I'm going to extract this file by simply copying and pasting
and again, the technique you use to extract will differ
| | 00:48 | depending on how you work with ZIP files.
| | 00:51 | I'll open a copy of Windows Explorer
and navigate to the C drive root.
| | 00:55 | If you're working on Mac OS X, you might
navigate instead to your documents folder
| | 00:59 | and then drag and drop the AIR Essential Training folder
from the ZIP area over to where you want to install it.
| | 01:05 | And that will result in copying the files from
the ZIP file into where you want use them.
| | 01:11 | Throughout the demonstrations in this video series I'll be
referring to the exercise files area or exercise files folder.
| | 01:18 | I'll always be referring to this AIR Essential Training
folder, where ever you install it on your system.
| | 01:25 | The exercise files are structured like this.
| | 01:28 | There's an Assets folder that contains the
various graphics, PDF files, text files and icons.
| | 01:34 | If you follow along in the exercise files,
| | 01:36 | you need some of these assets during
various demonstrations and exercises.
| | 01:40 | There are three folders labeled Flash, Flex and HTML,
| | 01:44 | which are your exercise areas for these different technologies.
| | 01:48 | There's a Projects folder which contains ZIP files and folders
for use in getting started with various applications.
| | 01:54 | Some of the ZIP files there are Flex project archives.
| | 01:58 | When you have to deal with those, I'll describe
how to deal with them in the exercise videos.
| | 02:03 | And then finally there's a Solutions folder which contains
the final version of all the code, once again separated by
| | 02:09 | the different technologies, Flash, Flex and HTML.
| | 02:13 | So that's how you install the exercise files and how they're structured.
| | 02:16 | And now you should be ready to get started learning
all about the Adobe integrated runtime or AIR 1.0.
| | Collapse this transcript |
| Understanding the prerequisites| 00:00 | This video training series, AIR 1.0 Essential Training,
is designed for developers who have pre-existing skills
| | 00:06 | in building applications that are delivered over the web,
| | 00:09 | and now want to leverage the skills to build
desktop applications delivered with AIR.
| | 00:14 | I won't be talking a lot about how to build applications
in Flex, Flash or HTML throughout this video series.
| | 00:20 | For instance, for a Flex developer, anything you can do
in Flex, you can do in an AIR application built in Flex
| | 00:26 | and the same thing is true for Flash and HTML.
| | 00:28 | Instead, the focus of this video series is on how to take
those web-based applications or web-based interfaces and
| | 00:35 | deploy them in AIR and also how to use the added features
of the AIR libraries that allow you to do things in
| | 00:41 | AIR applications that you can't do in web applications.
| | 00:44 | You'll need certain software to work through some of these exercises.
| | 00:48 | For instance for Flex, you'll need Flex Builder 3.
| | 00:51 | The release of Flex Builder 3 is synchronized with the release of AIR 1. 0,
| | 00:55 | so you'll be able to get Flex Builder 3 from
Adobe at the same time as AIR is available.
| | 01:00 | For HTML, I'll be working primarily in Dreamweaver CS3.
| | 01:04 | Although if you're an HTML developer who uses some other developer tool,
| | 01:08 | you'll be able to work through any of those exercises
using a combination of your HTML development tool plus
| | 01:14 | the AIR software developers kit.
| | 01:16 | For Flash, you'll need Flash CS3 Professional
| | 01:19 | and you'll need to update that product as I'll describe
in the videos in that section with updaters from Adobe,
| | 01:25 | both to bring it up to speed to the latest maintenance release
| | 01:28 | and to install the specific tools for
Flash and AIR application development.
| | 01:33 | For additional information about building
applications in Flex, Dreamweaver or Flash,
| | 01:38 | check out some of the video titles from lynda.com that are
specifically designed to teach you about those technologies.
| | Collapse this transcript |
|
|
1. Getting StartedUnderstanding Adobe Integrated Runtime (AIR)| 00:00 | In this video, and I'm going to describe the basic nature of
the Adobe integrated runtime, or AIR, and some of its benefits.
| | 00:07 | The Adobe integrated runtime, now known
as AIR, used to be known as Apollo.
| | 00:12 | It is a product that's been in development
by Adobe Systems for a couple of years now.
| | 00:16 | And this process has included in number of public betas, which
has allowed the developer community to become accustomed to
| | 00:21 | building desktop applications using
traditional Web style architectures.
| | 00:26 | The Adobe integrated runtime includes two major aspects.
| | 00:30 | First the runtime itself.
| | 00:32 | The runtime is installed as software on
a number of different operating systems,
| | 00:36 | and it supports the installation and running of desktop applications
that are built in the Flex, Flash and HTML architectures.
| | 00:44 | Second, there's a whole set of development tools that
are provided by Adobe for building these applications.
| | 00:49 | Some of these development tools are free and some of them are incorporated
into existing commercial tools such as Flex Builder, Flash and Dreamweaver.
| | 00:58 | AIR applications can be installed and run on
a number of different operating systems.
| | 01:03 | These include Windows XP SP2 and Windows Vista,
including all editions, such as Home, Business and Ultimate,
| | 01:11 | and on a Macintosh, these applications can be installed
on the latest versions of the Mac OS X operating system,
| | 01:17 | including both Tiger version 10.4 and Leopard 10.5.
| | 01:21 | Also there's complete support for both the
older PowerPC and the newer Intel-based Macs.
| | 01:27 | AIR applications can also be installed on the older Windows 2000 operating
system, but not all of the installation features are supported.
| | 01:34 | Specifically, there's a feature known as a seamless install, which means
the user can install the runtime and the application at the same time.
| | 01:42 | That features is not supported on Windows 2000,
| | 01:44 | but users can install the runtime separately and
then install applications as separate processes.
| | 01:51 | Support for the Linux operating system is
scheduled for future release by Adobe Systems,
| | 01:55 | but Adobe hasn't promised a particular date for delivery of this support.
| | 02:00 | Here are some of the benefits of the Adobe integrated runtime.
| | 02:03 | First, rapid application development.
| | 02:05 | All of the platforms and languages you use in building
AIR applications have existed for quite a while and are
| | 02:10 | completely documented and there's a lot of support out
there both from Adobe and from third parties.
| | 02:16 | For instance, if you're Flex developer you'll
be working with XML and ActionScript 3.
| | 02:20 | If you're Flash developer, you'll be working with ActionScript as well.
| | 02:24 | And if you're an HTML developer, you'll be working
with HTML, cascading style sheets and JavaScript.
| | 02:29 | The bottom line is that there aren't new languages to learn so much as new
techniques and packaging them and leveraging the capabilities of the runtime.
| | 02:38 | The different development platforms that you'll use.
| | 02:41 | If you're a Flex developer, you'll want to upgrade
to the latest person to Flex, version 3. 0.
| | 02:46 | As with Flex 2, you'll be working with the languages XML and ActionScript 3.
| | 02:50 | If you use Flex Builder, you'll have a new version of Flex Builder that has
integrated support for the building and deploying of these applications.
| | 02:57 | For Flash developers you'll want to be working in the latest version
of the product version CS3 and working with the language ActionScript 3.
| | 03:05 | In a later video I'll describe the requirements for working in Flash,
including which version of the Flash authoring environment you need,
| | 03:12 | and how to get the plug-in that allows to build
and deploy applications from directly within Flash.
| | 03:17 | For HTML developers, you can work in HTML, cascading style sheets and JavaScript.
| | 03:22 | If you know how to program using Ajax style development, or
asynchronous JavaScript and XML, you'll be able to leverage
| | 03:29 | these techniques to make calls to Web services from within your HTML-based content.
| | 03:33 | And if you're a Dreamweaver developer there's an extension
you can download and install from Adobe for free that
| | 03:38 | upgrades Dreamweaver CS3 to allow you once again to build these
applications and deploy them from directly within your development tool.
| | 03:46 | Here are some of the benefits of the Adobe integrated runtime.
| | 03:49 | First of all, you have access to complete Web services, including rest-based
services, meaning XML that you retrieve from a Web server at runtime.
| | 03:57 | SOAP-based Web services that leverage the
SOAP protocol and Flash remoting-based services.
| | 04:03 | Examples of application servers that support the
Flash remoting architecture include Cold Fusion,
| | 04:09 | Blaze DS and Live Cycle data services from Adobe for Java developers,
| | 04:13 | the open source product Florine and the commercial product WebOrb
for ASP.net developers, and OpenAMF for PHP and Java developers.
| | 04:22 | You can select any of these applications servers to
integrate with your AIR applications at runtime.
| | 04:27 | Now in the next set of videos I'll talk about some of the development
tools that you can select to build your AIR applications,
| | 04:33 | and I'll give you an overview of AIR security, how you apply security models
to both the AIR installation process and to running applications at runtime.
| | Collapse this transcript |
| Using development tools for building AIR applications| 00:00 | In this video I'm going to describe the different software
development tools that you can select from to build, compile
| | 00:06 | and deploy your AIR applications.
| | 00:08 | First the AIR software developers kit or the SDK.
| | 00:12 | This is a set of command line tools that you can download
and install from Adobe Systems. It is completely free.
| | 00:18 | There are no license fees or royalties that you have to pay to Adobe
and the applications that you build with the SDK can be deployed freely,
| | 00:24 | and the applications that you build with the SDK can
be based on a combination of Flash and HTML content.
| | 00:31 | First for Flex developers, there's a command line compiler called amxmlc.
| | 00:37 | This is analogous to the MXML C command line
compiler that's a part of the Flex SDK.
| | 00:42 | You take your MXML and ActionScript 3 assets,
| | 00:45 | and you build Flash-based content using this command line compiler.
| | 00:49 | There's also command line compiler called acompc,
| | 00:52 | which is analogous to the Flex compc command line compiler,
which can be used to build both components and component libraries.
| | 00:59 | There's a debug launcher in the SDK that
you can use to debug and test your applications,
| | 01:04 | and then the critical piece of the SDK is the AIR developer tool or the ADT.
| | 01:09 | The purpose of the ADT is twofold.
| | 01:11 | First of all, its main purpose is to export complete installation files.
| | 01:16 | An AIR installation file has .air or AIR file
extension and it's built using the ADT tool.
| | 01:23 | In order to build an AIR application, you
take your Flash and HTML formatted content,
| | 01:29 | you combine that with something called an application
descriptor file that I'll describe in detail in later videos,
| | 01:34 | and from the there you can build the AIR install file.
| | 01:37 | The ADT also knows how to create something
called a self-signed security certificate.
| | 01:42 | I'll talk about the nature of that in the next video.
| | 01:45 | Typically you'll get a security certificate from one of the
main security vendors, Thawte or VeriSign for instance,
| | 01:50 | but if you're building an application for internal use or
just for testing the ADT allows you to build lower level
| | 01:56 | security certificates that don't require
a purchase from a security vendor.
| | 02:01 | Finally, integration with the Apache ANT package is supported and documented.
| | 02:05 | For developers to know how to use Apache ANT to automate their build processes,
| | 02:09 | this allows you to integrate the AIR command line tools into the ANT
processes and make sure that you're building consistently and reliably.
| | 02:17 | In addition to the SDK, Adobe is also
delivering a set of commercial development tools.
| | 02:22 | For Flex developers, a new version of Flex Builder has
been delivered, Flex Builder 3, that includes integrated
| | 02:28 | support for building and deploying Flex-based AIR applications.
| | 02:31 | When you create a new Flex project in Flex Builder 3, you now have
a choice between creating a web-based project or a desktop project.
| | 02:39 | And when you create the desktop version, you'll be building an AIR application.
| | 02:43 | All of the command line tools that are available
in the SDK are also integrated into Flex Builder 3.
| | 02:48 | And if you have Flex Builder it makes it a lot
easier to build and deploy these applications.
| | 02:54 | For Flash developers there's an upgrade to version 9.02 that
you'll need. That's a free upgrade to the existing Flash CS3
| | 03:01 | package, so if you already have a Flash CS3 license,
you won't need to purchase anything else from Adobe.
| | 03:07 | And then there's an additional patch that needs to be
installed that adds commands to the Flash authoring environment,
| | 03:12 | to support creating and deploying Flash-based AIR
applications directly from within that environment.
| | 03:19 | If you use Dreamweaver to build HTML-based content, you'll want
to go get the Dreamweaver AIR extension for Dreamweaver CS3.
| | 03:26 | Once again you have to have a Dreamweaver CS3 license
to use this tool but if you already have that license,
| | 03:31 | the extension that adds AIR functionality to Dreamweaver again is free.
| | 03:36 | So those are the major development tools from Adobe, the free
SDK for building AIR applications from the command line
| | 03:42 | and the commercial development tools, the new Flex
Builder 3 and upgrades to Flash and Dreamweaver CS3.
| | 03:48 | Whether you're a Flex, Flash or Dreamweaver developer, Adobe delivers these
tools to help you get started building and deploying your AIR applications.
| | Collapse this transcript |
| Understanding AIR security| 00:00 | In this video I'm going to describe the security model of
applications deployed with the Adobe integrated runtime.
| | 00:07 | There are two aspects to security with AIR.
| | 00:09 | First, installation security, and then runtime security.
| | 00:13 | In both cases the security model is determined by the fact
that AIR applications are local native desktop applications,
| | 00:20 | and just like applications such as Microsoft Word
or other software that you might install locally,
| | 00:25 | an AIR application has the ability to access local resources,
such as the local file system, printers and so on.
| | 00:32 | The major difference between desktop applications and Web applications, in terms
of security, has to do with the model of something we call the security sandbox.
| | 00:41 | Web based applications, whether built in HTML,
Flash or Flex, have to run within the sandbox.
| | 00:47 | This means that as content is downloaded from the Internet,
| | 00:50 | that content, such as scripting routines, Flash-based
content and Flex applications, can't access local resources.
| | 00:57 | The problem with the Web is that users freely
download content from the web and just blindly trust it
| | 01:03 | and the world of the web browser has been carefully designed
to make sure that content coming from the Internet doesn't
| | 01:09 | have the ability to disrupt or damage content on the local system.
| | 01:12 | When a user installs an application locally as a desktop
application, they grant much broader access to their system.
| | 01:19 | And so there are two aspects to installation
of these applications that have to be handled.
| | 01:23 | During the installation process the user has to be given
adequate information that allows them to make an informed
| | 01:28 | decision as to whether to grant this local access.
| | 01:31 | And then at run time, the application has to make informed
decisions as to which of its components will be allowed to
| | 01:37 | access content on the desktop and which won't. First of all,
| | 01:42 | in order to use this access, AIR applications have
the ability to read and write to the local disk.
| | 01:47 | Both simple text files and complex data.
| | 01:50 | This is implemented through a set of code libraries
that you use in access in your AIR applications.
| | 01:56 | There's a set of ActionScript 3 libraries that you use from both Flash and
Flex and a set of job descript base libraries to use in your HTML applications.
| | 02:05 | These libraries include the ability to read and write text files
to the local disk and then in addition there's data access.
| | 02:12 | The Adobe integrated runtime incorporates a local database called SQLite.
| | 02:17 | This is actually an open-source database that is used in a lot of environments.
| | 02:21 | If you're interested in finding out a lot of detailed information
about the SQLite database, you can go to their website at SQLite.org.
| | 02:29 | You can find out detailed information including what SQL syntax is supported,
| | 02:33 | what kind of data structures are supported, data types and so on.
| | 02:38 | Once again, there's a set of API libraries incorporated into
the Adobe integrated runtime and made available to you as the
| | 02:44 | developer, in both the command line tools and the commercial tools.
| | 02:47 | And as with local file system access, these libraries are
implemented both in ActionScript 3 and in JavaScript.
| | 02:54 | Security in AIR installations is managed through signing.
| | 02:58 | Whenever you create an AIR application, you must provide something
called a digital certificate that verifies your identity.
| | 03:05 | There are two ways to create these digital certificates.
| | 03:08 | First of all, all of the development tools, including
the command line tool, Flex Builder, Dreamweaver and Flash,
| | 03:14 | once they've been upgraded to incorporate the AIR development tools,
allow you to create your own self-signed certificates.
| | 03:21 | These certificates are created without any cost, and they're
very easy to create, as I'll show you in later videos.
| | 03:26 | But they're only designed to be used for internal or for low security environments.
| | 03:31 | This is because when you install an AIR application that's been signed
with the self-signed certificate the user sees that the publisher is unverified.
| | 03:39 | If you trying to build a commercial software
application this is clearly an unacceptable state.
| | 03:44 | And so it's also possible to go get a commercial code signing certificate
from one of the security vendors such as VeriSign or Thawte.
| | 03:51 | When you incorporate one of the commercial code signing certificates
into your application, the application publisher's
| | 03:56 | name is then shown as verified during the installation process
| | 04:00 | and the user will have better information
about who exactly published this application.
| | 04:04 | These commercial code signing certificates are very strongly
recommended if you're building and deploying a commercial
| | 04:09 | application where the user may not necessarily know you personally.
| | 04:14 | At runtime, security is implemented once again around the security sandbox.
| | 04:19 | The application sandbox makes a distinction between resources
that are on the Internet and resources on the client system.
| | 04:26 | Any content that the user has explicitly installed has both
complete access to the client system and Internet-based services.
| | 04:34 | But there are three other types of categories.
| | 04:36 | There's content that you download from the Internet,
which by default only has access to Internet resources.
| | 04:42 | You can use the Settings Manager of the Flash Player
that's a part of the Adobe integrated runtime,
| | 04:47 | or something called a local trust configuration file,
to grant additional permissions to this kind of content.
| | 04:54 | There's a category called local trusted content.
| | 04:56 | This is a kind of content that can read from local data sources and can
communicate with the Internet but doesn't have complete AIR permissions.
| | 05:03 | And then there's a category called local with networking, which can
communicate with the Internet but not from local data sources.
| | 05:10 | As we work through the rest of these videos I'll point out particular
aspects of the runtime security model for AIR applications.
| | 05:16 | But take a look at the documentation as well for more complete information.
| | 05:20 | You'll see the content that's actually compiled into the
application has that complete permission to access the local
| | 05:26 | system where as content to its download from the Internet at
runtime has built-in restrictions, because the user has no way of
| | 05:39 | knowing that that content, such as JavaScript files, and so on, is built
by a trusted vendor. So that's a look at the security model for AIR.
| | 05:41 | As I demonstrate building AIR applications in each of these
environments, I'll show you how to build the self-signed
| | 05:47 | certificate and then integrate it into your installation process.
| | 05:51 | And then in later chapters as I talk about accessing
local files or creating local data structures using the built-in
| | 05:57 | SQLite database, I'll talk about the security issues with those features as well.
| | Collapse this transcript |
| Understanding the AIR application installation experience| 00:00 | In this video I'm going to demonstrate and describe the user
experience when downloading an AIR application from the web.
| | 00:06 | I'm going to be showing you what happens when the user downloads
and installs an application and doesn't already have
| | 00:12 | the Adobe integrated runtime installed.
| | 00:14 | You can deliver an AIR installer to users in a number of
different ways. Because they're simple binary files, you can
| | 00:20 | email them to the user, provide a link on your
website to a simple AIR file, and so on.
| | 00:25 | But you can create the best and most intuitive user
experience with something called an install badge.
| | 00:30 | An install badge is an Adobe Flash file, which when the user
clicks on it, detects whether the Adobe integrated runtime
| | 00:37 | is installed on the user's system.
| | 00:39 | If it's already installed, it walks users through
the simple application installation process
| | 00:44 | but if the runtime isn't already installed, it detects that and
offers to install the runtime in addition to installing the application.
| | 00:51 | From the user's point of view, it creates a single easy experience.
They don't have to figure out where to go get the runtime from.
| | 00:57 | They simply click your link, your badge, and from there
both the runtime and the application are installed.
| | 01:02 | I'm going to demonstrate this using a sample application from Adobe Systems.
| | 01:06 | If you're interested in following along, go to the
AIR sample applications page at the Adobe website.
| | 01:11 | The URL for this page, as of the date I recorded this video,
is labs.adobe.com/technologies/AIR/samples.
| | 01:21 | Now it is quite possible that Adobe will move this around at
some point, so if you don't find it at this page, do a Google
| | 01:27 | search or take a look round the Adobe website
and see if you can find a sample apps.
| | 01:31 | I'm going be installing an application called Fresh.
| | 01:34 | This is an RSS feed Reader that allows you to
connect to and read RSS feeds from online blogs.
| | 01:40 | I'll navigate down to the Fresh badge and click the Install Now button.
| | 01:45 | The first step for an installation badge is to detect
whether the Adobe integrated runtime is installed.
| | 01:51 | It's not currently installed on my system so I see this message indicating
that I'll be downloading and installing the integrated runtime.
| | 01:58 | I'll click Yes to continue,
| | 01:59 | and now the correct version of the Adobe
integrated runtime is downloaded to my system.
| | 02:04 | There are multiple versions of the Adobe integrated runtime out there.
| | 02:08 | Primarily, you'll see applications that require Beta 2,
Beta 3 and the final release version of AIR.
| | 02:14 | If you have an existing copy of the Adobe integrated
runtime on your systems, such as Beta three,
| | 02:19 | and this application requires the final release version of the Adobe
integrated runtime, you'll still need to do the installation.
| | 02:26 | But starting with Beta 3, the Adobe integrated runtime
versions can be installed side by side so that you can have
| | 02:32 | more than one version of the runtime on your system at the same time.
| | 02:36 | And one application might require Beta 3,
another the final release version and so on.
| | 02:41 | From the users' point of view, you shouldn't have to worry about that.
| | 02:44 | To continue with the installation, I'll click the
Install button from the Application Install window
| | 02:49 | and then I'll see a set of options.
| | 02:50 | Notice that this application requires Beta 3 of the Adobe integrated runtime,
| | 02:55 | and it's required, so I can't uncheck the option.
| | 02:58 | I'm also able to add shortcut icons and
start the application after the installation,
| | 03:03 | and I also have control over where the application will be installed.
| | 03:06 | This application's default location is on my hard
disk, in the Program files, AIR examples folder.
| | 03:12 | I'll click Continue, and then I'm presented with the license agreement.
| | 03:16 | If I agree with the license agreement I click I agree.
| | 03:19 | And now the installation starts.
| | 03:22 | Depending on your network connection, the installation
should take only a few moments to complete,
| | 03:27 | and then, if you selected the option to start up the application upon
completing the install, the application should open on your desktop.
| | 03:34 | I'm not going to spend a lot of time on this particular
application. I'll show you just a couple the simple features.
| | 03:39 | I'll click on an RSS feed, one is provided from the beginning,
| | 03:43 | and then I can click on the topic of interest. For instance,
I'm a Java developers, and I'm interested in this new
| | 03:48 | product Blaze DS, which is an open-source implementation
of some of the features of Live Cycle data services.
| | 03:54 | I'll double click and I'll see the actual HTML
content from the Adobe website displayed.
| | 04:00 | Additionally I can add my own preferred RSS feeds from any
blog I want and I can view those items in the application.
| | 04:07 | I'll close the application and show you my desktop,
| | 04:10 | because I want to show you that the application has been installed on
my desktop, and I can double-click on it anytime I want to restart it.
| | 04:19 | If you want to uninstall the application on Windows,
it's just like any other native local application.
| | 04:25 | Go to the Control Panel in Windows Vista, click Uninstall a program
or on Windows XP, click Add or Remove programs.
| | 04:32 | Locate the application, Fresh, and double-click to uninstall.
| | 04:36 | If your goal is to remove the runtime environment as well,
| | 04:40 | make sure that you uninstall any applications
first and then the runtime environment.
| | 04:45 | If you want to remove the runtime environment from your system,
| | 04:48 | you'll find it under Adobe AIR in the list of installed
applications on Windows or if you're running on the Mac,
| | 04:54 | you'll find it in the Applications folder.
| | 04:56 | So that's a look at the user experience when installing an
application and the Adobe integrated runtime at the same time.
| | 05:03 | As a developer, you might want a little bit more control over which
version of the runtime is installed at any given time on your system.
| | 05:09 | So in the next couple of videos I'll show you how to install
the Adobe integrated runtime explicitly on both Windows and Mac.
| | Collapse this transcript |
| Installing AIR on Windows| 00:00 | In this video I'm going to describe how to explicitly install
the Adobe integrated runtime on the Windows platform.
| | 00:07 | This installer should work on Windows Vista, Windows XP SP2 and Windows 2000 SP4.
| | 00:14 | In order to install the Adobe integrated runtime
in your system, you do need administrative privileges.
| | 00:19 | You'll be able to download the install from Adobe Systems.
| | 00:22 | Go to www.adobe.com/products/air to find
the installer for your operating system.
| | 00:29 | Then on the Windows platform, after you've
downloaded the software, double-click to install.
| | 00:35 | In the Security Warning dialog, click the Run button
and you're presented with the Adobe AIR setup screen.
| | 00:41 | At this initial screen, a license agreement is presented.
| | 00:44 | If you agree with license agreement, click I agree.
| | 00:47 | And that's it. The installer does its thing and takes just a few seconds.
| | 00:51 | click Finish to complete the installation.
| | 00:54 | Once you've done the installation, any applications that require this version of the
Adobe integrated runtime should install without you having to reinstall the runtime.
| | 01:03 | And as I mentioned in previous video,
| | 01:05 | as Adobe upgrades the Adobe integrated runtime, you'll be able to install and
store more than one version of the runtime on your system at the same time.
| | 01:13 | For instance, applications that require Beta 3 of the
Adobe integrated runtime can leverage that version and
| | 01:19 | applications that require the final public release,
version 1. 0, will be able use that version.
| | 01:25 | To uninstall the runtime from Windows, at any time, go to the Control Panel.
| | 01:30 | On Windows Vista, click Uninstall a program.
| | 01:33 | In Windows XP, click Add or remove programs.
| | 01:36 | Locate Adobe AIR from the list of available runtimes.
| | 01:39 | And then double-click to uninstall.
| | 01:42 | So that's a look in how to install the runtime. It's a very simple, fast
process and the entire size of the runtime installer is right around 11 MB.
| | 01:50 | It's a lot larger, you'll notice, than the Flash Player,
but that's because it includes so much more functionality.
| | 01:56 | Now in the next video , I'll show you how to do the same installation on Mac OS X.
| | Collapse this transcript |
| Installing AIR on Mac OS X| 00:00 | In this video I am going to describe how to download and
install the Adobe integrated runtime installer on Mac OS X.
| | 00:07 | When you download the installer from Adobe
Systems, it comes to you as a DMG file,
| | 00:11 | and upon download, or if you double-click
it later, will mount a virtual disk
| | 00:15 | and then you'll see the file the Adobe AIR installer.
| | 00:18 | You can copy this installer file to your desktop, just drag it out.
| | 00:22 | And then you can run the installer from the desktop.
| | 00:24 | When you run it after downloading it from the
adobe.com website, you may see a security warning.
| | 00:30 | If so, just click the Open button,
| | 00:32 | and you'll see the Adobe AIR installer screen.
| | 00:34 | If you agree with a license agreement, click the I agree button
| | 00:38 | and then you need to type in your administrator password.
| | 00:42 | Type in your password and click OK
| | 00:44 | and the installation continues.
| | 00:46 | The installation takes just a few minutes.
| | 00:48 | When it's done, you'll see the message Installation Completed.
| | 00:51 | click Finish.
| | 00:52 | And now you'll be ready to install any AIR applications that you
can download from websites or build yourself on this local system.
| | 01:00 | You can share the Adobe integrated runtime
installer with your users quite easily.
| | 01:04 | Just post it somewhere on a website and let them know how to download it
| | 01:07 | or you can point to the Adobe Systems website and
let users go get the installer directly from there.
| | 01:13 | Either way, once they've installed the Adobe integrated runtime once,
they'll be able to install and use as many AIR applications as they need.
| | Collapse this transcript |
|
|
2. Using the AIR SDKInstalling and using the SDK on Windows| 00:00 | In this video I'm going to describe how to install
the AIR SDK or software developers kit on Windows.
| | 00:06 | You going to need two software packages, one of
which may already be installed on your machine.
| | 00:12 | First of all of you need to download the AIR SDK from Adobe Systems.
| | 00:16 | Go to www.adobe.com/products/air
| | 00:21 | and locate the SDK and download it to your system.
| | 00:25 | The SDK comes in the form of a ZIP file, an archive,
which you then extract to anywhere on your system
| | 00:32 | I'm working on Windows Vista. So I'm going to right click on the ZIP file
| | 00:37 | and select Extract All.
| | 00:38 | And then indicate that I want to extract the files
to a folder that I'm going to name AIR SDK.
| | 00:46 | You can place these files again anywhere on your system.
I prefer to have them under the C: root.
| | 00:52 | I'll click Extract, and after a few moments the
files in the SDK are extracted and ready to use.
| | 00:58 | That's the only required part of the installation.
| | 01:02 | There are another couple things that you need to check though.
| | 01:05 | First of all, the AIR SDK depends on the Java runtime environment.
| | 01:09 | You must have at least version 1.42 of the Java runtime environment
installed on your system in order to use the command line tools in the SDK.
| | 01:18 | If you're not sure whether you have the Java runtime environment installed, try this.
| | 01:23 | Go to the Windows Start menu.
| | 01:26 | If you're working on Windows XP, choose Run.
| | 01:28 | Otherwise, if you're working on Vista, just click in the search box
| | 01:32 | and then type CMD, for command, and press Enter.
| | 01:38 | That will open up a command window.
| | 01:41 | Then to find out whether Java is installed properly, try this.
| | 01:45 | Type Java -version.
| | 01:49 | If you're working on Windows Vista, you probably have Java 1. 6 already installed.
| | 01:55 | If you're working on Windows XP, you'll only have the Java runtime
installed if it's been explicitly installed on your system.
| | 02:01 | If you need to go get the Java runtime, you can get it from this website,
| | 02:06 | java.sun.com.
| | 02:08 | I recommend that you download and use the most recent version of the Java runtime.
| | 02:13 | From the homepage, move the cursor over the Downloads link
and then select JAVA SE, which stands for Standard Edition.
| | 02:20 | And from there, you should be able to download and install the Java runtime.
| | 02:24 | Once you've installed the Java runtime and
the SDK, here's one more recommended step.
| | 02:29 | I'm going to close all these windows.
| | 02:32 | It's a good idea to add the location of the
command line tools to your system path.
| | 02:37 | You modify this by modifying the system environment variable named path.
| | 02:42 | First I'll go into Windows Explorer.
| | 02:45 | Then navigate to my C drive, and from there to
the new AIR SDK directory that I just created.
| | 02:52 | Within that directory, there's a bin directory,
| | 02:55 | and this is where the two major command line tools are stored, ADL and ADT.
| | 03:01 | So now I'm going to close Windows Explorer.
| | 03:04 | And I'm going into the Control Panel.
| | 03:07 | When you open the Control Panel, you'll either be at what's
called the Control Panel Home screen or in the classic view.
| | 03:14 | On Windows Vista, the Control Panel Home screen looks like this.
| | 03:17 | If you find yourself here, click on Classic View,
| | 03:21 | then scroll down to the bottom of the list and locate System, and double-click on it.
| | 03:27 | From here, click on Advanced in Windows XP
| | 03:31 | or Advanced Systems Settings in Windows Vista.
| | 03:34 | You should see the System Properties dialog box appear.
| | 03:38 | From there, click on Environment Variables.
| | 03:41 | Then scroll down until you locate the Path variable,
| | 03:45 | and either double-click on it or single click and then click Edit.
| | 03:49 | Move the cursor to the end of the variable value.
| | 03:53 | Check to see if there's a semicolon at the end, if not put it in.
| | 03:57 | And then type in the location of the AIR SDK's bin subfolder.
| | 04:01 | If you install it on the C: root in a folder named AIR SDK,
| | 04:06 | your path will have this, C:\AIRSDK\bin.
| | 04:13 | Click OK.
| | 04:14 | Click OK again,
| | 04:16 | and click OK one more time.
| | 04:19 | You're done in the Control Panel.
| | 04:22 | Now to test the environment variable,
| | 04:24 | once again go to a command window.
| | 04:27 | I have opened up the Windows menu and type CMD.
| | 04:30 | And again on Windows Vista, instead choose Run and then type CMD
| | 04:34 | and then press Enter.
| | 04:36 | And then try typing ADT.
| | 04:39 | You should see this Help screen appear,
| | 04:42 | indicating that you're successfully running the AIR developer tool.
| | 04:46 | You can also try accessing the debug launcher, ADL,
| | 04:49 | and once again, you should see a Help screen indicating the usage of this tool.
| | 04:54 | So that's the installation of the software developers kit on Windows.
| | 04:58 | Now as I've mentioned previously, if you're Flex developer using Flex Builder 3,
| | 05:03 | or a Flash developer using Flash CS3,
| | 05:06 | or Dreamweaver developer using Dreamweaver CS3, you may not need this SDK.
| | 05:12 | That's because all the tools that are part of
the SDK are also part of the Dreamweaver extension,
| | 05:18 | the Flash CS3 update or Flex Builder 3, the new version of the
Flex Builder development environment for Flex application developers.
| | Collapse this transcript |
| Installing and using the SDK on Mac OS X| 00:00 | In this video I'm going to describe how to install
the AIR software developers kit on Mac OS X.
| | 00:05 | The software developers kit is free to download from Adobe Systems.
| | 00:09 | Go to the website to be www.adobe.com/products/AIR
| | 00:15 | and you should be able to find a link to download the SDK.
| | 00:18 | Make sure you download the right version for
your operating system, Mac OS X in this case.
| | 00:23 | The installer comes to you as a DMG file.
| | 00:26 | Either upon download, or if you double-click it later, you'll mount a virtual disc
| | 00:30 | and then that disc will contain all of the files that make up the SDK.
| | 00:34 | The simplest way to install them is simply to copy and paste
or drag them into a new folder in your Applications area.
| | 00:40 | I'll go to the Macintosh hard disc,
| | 00:43 | to the Applications folder,
| | 00:45 | and then in Finder I'll create a new folder by selecting File, New Folder.
| | 00:50 | I'll name the folder AIR SDK.
| | 00:53 | Now I'll arrange the windows on my screen,
| | 00:56 | come back to the folder containing the files,
| | 00:58 | select all of them by selecting Edit, Select All or pressing Command + A,
| | 01:03 | and then I'll dragged those files over to the new folder.
| | 01:11 | Once the files had been copied over, you're ready to start using the SDK tools.
| | 01:15 | In order to use the command line tools on Mac OS X,
| | 01:18 | use the Terminal utility.
| | 01:20 | This is located on a Mac hard disc under Applications, Utilities, Terminal.
| | 01:30 | All of the binary files that you call in the SDK are in its bin folder.
| | 01:35 | You can either set an environment variable to
make these items available to all the time,
| | 01:39 | or perhaps a little bit more easily,
| | 01:41 | you can simply call each application by including
the entire path each time you call it.
| | 01:45 | For instance, in Terminal I'll start off by typing /App with an uppercase "A"
and pressing Tab. And Terminal fills out the name of the folder Applications.
| | 01:55 | Then "AIR", again uppercase, and then Tab again,
| | 01:59 | that takes me to the SDK folder.
| | 02:01 | From there to the bin folder, and from there, I'll run the debug launcher, ADL.
| | 02:06 | And you'll see that I can successfully run the launcher
and see the Help information that it displays automatically.
| | 02:12 | You'll also be using the ADT or the developer tool.
| | 02:15 | I'll press the Up cursor key to bring back the
last command and then change it from ADL to ADT.
| | 02:21 | And once again I see feedback from the
application showing that it's running successfully.
| | 02:25 | You'll learn how to use these tools in later videos.
| | 02:28 | How to use the debug log for ADL to test applications
and how to use the ADT or the developer tool
| | 02:34 | to generate self-signed certificates for testing your applications,
and then to package applications to get them ready for installation.
| | Collapse this transcript |
| Creating a Hello World application| 00:00 | In this video, I'm going to describe how to create the
simplest possible AIR application. I'm going to use Notepad,
| | 00:07 | and create a simple HTML file.
| | 00:09 | And then in subsequent videos, I'll show you how to create something
called an application descriptor file that describes how to
| | 00:15 | compile the application to the AIR compiler and then
I'll show you how to test and compile the application.
| | 00:23 | I'm going to get started by creating a new folder
| | 00:26 | in which I'll be storing the application source code,
| | 00:29 | assets and the application descriptor file.
| | 00:32 | I'll also be compiling the application into this
folder and creating everything I need there.
| | 00:37 | I'll be working in the folder in AIR Essential Training.
| | 00:41 | If you're working on Windows, this folder will be on the C drive
under the root or whoever you created it when you installed
| | 00:47 | the exercise files, and if you're working on the Mac,
it will be under your users directory somewhere.
| | 00:53 | Go to the AIR Essential Training folder
| | 00:55 | and create a new folder
| | 00:58 | and name it Hello World.
| | 01:03 | Then double-click into the Hello World folder.
| | 01:07 | Now open up your text editor.
| | 01:09 | As I mentioned, I'm going use Notepad just
to prove that you don't need anything fancy.
| | 01:14 | Within Notepad I'll start off by saving the new file into the correct location.
| | 01:19 | I'll select File,
| | 01:20 | Save As,
| | 01:22 | and I'm going to place this file into my new Hello World folder.
| | 01:26 | I'll give it a filename of Hello World.HTML
| | 01:31 | and click Save.
| | 01:34 | Next I'm going to create some HTML markup.
The HTML markup doesn't have to be fancy.
| | 01:40 | I'll just create a pair of HTML tags.
| | 01:43 | Within the HTML tags I'll create a pair of body tags,
| | 01:48 | and then within the body tags, a pair of h1 or heading one tags.
| | 01:54 | Then within the h1 tags,
| | 01:56 | I'll put in the text Hello World.
| | 02:00 | I'm not using any cascading style sheets or JavaScript or any
other advanced technologies, because again I want to show you how
| | 02:07 | simple an AIR application can be.
| | 02:09 | I'll save the file,
| | 02:12 | close Notepad,
| | 02:14 | come back to the Hello World folder, where I see the new file,
| | 02:17 | and then I'll double-click to open it in the browser.
| | 02:20 | And show you that this is basic everyday HTML that
is being displayed correctly in the browser.
| | 02:26 | Now in the next video I'll show you how to create the application descriptor
file that will be used to tell the compiler how to build the application.
| | Collapse this transcript |
| Creating the application descriptor file| 00:00 | In this video I'm going to create the application descriptor file.
| | 00:03 | The application descriptor file is an XML file with a particular
element names and property settings. The purpose of
| | 00:11 | the application descriptor file is to tell the
compiler how you want your AIR application to be built.
| | 00:17 | Rather than creating this file from scratch, I'm going to start from
sample file that's included with the AIR software developers kit.
| | 00:25 | In Windows Explorer, I'll start by going to the C drive
| | 00:28 | and then from there to the AIR SDK folder.
| | 00:32 | If you're working on the Mac, go to the AIR SDK folder that you created in
your Applications folder when you installed the AIR software developers kit.
| | 00:41 | The AIR SDK folder has a Samples folder
| | 00:44 | in which you'll find a file called descriptor-sample.XML.
| | 00:48 | I'm going to make a copy of this file.
| | 00:51 | I'll right-click on it and select Copy,
| | 00:54 | then I'll go back to the C drive, to the AIR Essential Training folder,
| | 00:59 | to my new Hello World folder,
| | 01:01 | and I'll paste the file into this folder.
| | 01:04 | Then I'm going to rename the file.
| | 01:06 | Instead of descriptor-sample.XML. I'll name it HelloWorld.XML.
| | 01:13 | And then I'll open it in a text editor.
| | 01:17 | If you're following along, you can use whatever text editor or XML editor you like.
| | 01:23 | I'll open the file in Notepad
| | 01:26 | and then expand Notepad to full screen so we can see what's in the file.
| | 01:31 | The application descriptor file always starts with an XML declaration at the top
| | 01:35 | and then has an application root element.
| | 01:38 | The XMLNS attribute represents an namespace.
| | 01:43 | The nature of an XML namespace is that it's an identifier for the XML processor, in
this case the AIR compiler, that tells it what version of the language is being used.
| | 01:53 | The XML namespace represented here, ending with the value
1. 0, describes the initial public release of AIR 1.0.
| | 02:02 | In older versions of these files, you might see something like 1.0.M5 or M6.
| | 02:08 | This would describe a particular beta version, an older version of the runtime.
| | 02:13 | The purpose of the namespace here is to tell the compiler
which version of the runtime this application requires.
| | 02:20 | And this particular namespace, ns.adobe.com/AIR/applications/1.0,
describes the initial public release. Not any of the betas.
| | 02:31 | I'm going to go through and strip out values that really
aren't needed for a very simple application descriptor.
| | 02:37 | For instance, the minimum patch level has to do with managing upgrades and
we're not going to be upgrading this file initially so I'll take that out.
| | 02:45 | And this initial comment isn't required either. I'll remove it.
| | 02:50 | The next element listed is called the ID.
| | 02:53 | The ID is the unique identifier for the application.
| | 02:57 | Every AIR application has an ID
| | 03:00 | and the most common convention for creating an ID is to
take your organization's domain name [and] reverse it.
| | 03:07 | So for instance lynda.com would be com.lynda and then using
dot notation, adding a unique identifier for the application.
| | 03:16 | My application is simply called hello world and its built for lynda.com
so I'm going to set the unique identifier to com.lynda.helloworld.
| | 03:27 | Each AIR application you create should have its own unique ID.
| | 03:31 | The next few values are informational.
| | 03:34 | I'll set the name of the application to Lynda.com Hello World,
and the name can be anything you like, and then version
| | 03:44 | number is a value that you assign to indicate
which version of the application you're building.
| | 03:49 | This is going to be version .1.
| | 03:53 | Meaning it's in a very early phase of development.
| | 03:57 | The filename element is a descriptive value that describes
the name of the installer or the application executable.
| | 04:04 | You put a value here that represents the beginning of your application installer
without the .AIR extension. I'll change my filename to Hello World with no spaces.
| | 04:14 | The description is just that- it's a descriptive value,
and you can either fill it in or leave it out.
| | 04:20 | I'm going to set my description to the value,
"This is the Lynda. com Hello World application."
| | 04:26 | The copyright again is informational only; it doesn't affect
the functionality of the application but if you want to
| | 04:32 | copyright the content you should put in your organization name.
| | 04:36 | The next set of values do affect the application's functionality.
| | 04:40 | The initial window element contains properties
that describe the initial window of the application.
| | 04:46 | As the application starts up,
| | 04:48 | the file name that you put into the content element
represents what will be presented to the user.
| | 04:53 | This file can either be a SWF file, generated out
of Flex or Flash, or it can be in HTML file.
| | 05:00 | In my very simple application, I'm going to set the content to HelloWorld.HTML.
| | 05:10 | The title element contains a string value, which is displayed to the
user in the title bar of the initial window of the application.
| | 05:17 | I'm going to change the title from example application
| | 05:21 | to a value that the user will see of "Hello from AIR!"
| | 05:27 | The next two values are optional, systemChrome and transparent.
I'll describe those in a later video and for now I'm just
| | 05:33 | going to remove them from my very simple application descriptor.
| | 05:37 | The visible property for a simple application like this should be set to true.
| | 05:42 | That means that the application's initial window will be visible to the
user without having to execute any code upon application startup.
| | 05:50 | The next few values affect the behavior of the initial window,
| | 05:55 | indicating whether the application can be minimized maximized
and resized. If you leave these out, they're reset to defaults,
| | 06:02 | so I'm going to remove them,
| | 06:04 | and move on to the application dimensions.
| | 06:07 | The width and height of the application are set in terms of pixels.
| | 06:11 | I'm going to set my application's initial width to 400 pixels
| | 06:15 | and the initial height to 300 pixels.
| | 06:19 | The X and Y properties indicate the location of the initial window on the screen.
| | 06:24 | If you set these values you're specifically positioning the
application's initial window. If you leave them out, as I will,
| | 06:31 | you're allowing the operating system to place the initial window.
| | 06:35 | You can also set the minimum and maximum size of the window,
but I'm going to take these values out and once again allow the
| | 06:41 | operating system to manage those settings.
| | 06:44 | The rest of the settings within the application descriptor
file can be removed. They all have default values or are
| | 06:50 | otherwise not required for a very simple application like this.
| | 06:54 | So I'm going to remove all the elements underneath
initial window but make sure that you leave in the closing
| | 06:59 | application tag to ensure that your XML file is well formed.
| | 07:04 | So this is a minimal application descriptor file.
| | 07:07 | Nw in the next video I'll show you how to test the application
using the debug launcher and then I'll show you in the
| | 07:13 | following video how to compile the application and get it ready for installation.
| | Collapse this transcript |
| Testing an AIR application from the command line| 00:00 | In this video I'm going to describe how to run an AIR application
from the command line using an application called the debug launcher.
| | 00:07 | The actual name of this application is ADL
and it's in the bin folder of the AIR STK.
| | 00:14 | When you installed the SDK in an earlier video, I described
how to add the bin folder to your system path, meaning that you
| | 00:21 | can run the ADL application from anywhere, from any command window.
| | 00:25 | To run the Hello World application, start by opening a command window.
| | 00:30 | On Windows Vista or XP, open the Start menu
| | 00:33 | and then if you're running on XP, click Run. If your running
on Vista, you'll start off in the start search dialog and
| | 00:40 | type CMD and press enter.
| | 00:43 | If you're working on a Mac, open the Terminal application
from the Utilities section of the Applications folder.
| | 00:49 | Next switch to the location of your application. I'll type in cd\
| | 00:55 | then I'll type in AIR and press Tab.
| | 00:58 | That takes me to the AIR Essential Training folder
| | 01:00 | and then I'll start typing hello, press Tab again.
| | 01:03 | And that switches to the Hello World folder.
| | 01:06 | I'll type DIR
| | 01:08 | to give me a listing of the files in this
folder and verify that I'm in the right place.
| | 01:13 | Now I'm going to run the application from the command line.
Type ADL, then a space, then the name of the HelloWorld.XML file,
| | 01:23 | the application descriptor and press Enter or Return on the Mac.
| | 01:28 | If all goes well, you should now be able to
run your application and it should become visible.
| | 01:33 | So notice that this is a standard operating system application.
| | 01:37 | If you're running on Windows, you should see the Windows
chrome or standard buttons at the top bar and if you are
| | 01:43 | running on a Mac, it should look just like a standard Mac application.
| | 01:46 | You can resize it, maximize it, move it around the screen,
and do everything that you would normally do with the standard
| | 01:53 | native application, because that's what it is.
It's a native local application running on your desktop.
| | 01:59 | Close the application and you'll return back to the command window.
| | 02:04 | Now in the next video I'll show you how to add a little bit of debugging so that you can actually send tracing messages to the command window,
| | 02:12 | from within your application.
| | Collapse this transcript |
| Using Debug Tracing in an HTML application| 00:00 | In this video I'm going to show you how to
add tracing functionality to an AIR application.
| | 00:05 | Tracing describes the ability to add debug messages to an application,
| | 00:09 | whether those messages then show up in a
console or other sort of debugging environment.
| | 00:14 | When you're using the software developers kit, the SDK,
| | 00:18 | the command window itself is your debug environment,
| | 00:21 | and after we add this functionality, you'll be able to send
debugging messages to that environment using JavaScript code.
| | 00:27 | I'll show you how to do the same thing using Flex
applications and Flash applications in later chapters.
| | 00:33 | For AIR applications that are built in HTML, in order to send these sort of
tracing messages, you need to add a JavaScript file to your application.
| | 00:43 | I'll navigate to the AIR SDK folder, for software developers
kit folder, and from there to the frameworks folder.
| | 00:50 | The frameworks folder has a number of different JavaScript
files named AIR aliases, AIR Introspecter and AIR source viewer.
| | 00:58 | I'm going to copy and paste the AIR aliases JavaScript file
| | 01:02 | into my application folder.
| | 01:05 | I'll select the file,
| | 01:06 | copy it to the clipboard.
| | 01:09 | Return back to my Hello World folder
| | 01:12 | and paste the JavaScript file.
| | 01:15 | Now I'm going to link that file into my Hello World file.
| | 01:19 | I'm going to open up Notepad
| | 01:23 | and then come back to the folder and drag that file into Notepad
| | 01:27 | so that I can make some changes.
| | 01:33 | You can use whatever text editor you like, if you're following along.
| | 01:37 | Within the HTML element of my file, but before the body,
I'll start off by creating a head section. Within the head
| | 01:46 | section I'll declare 2 script elements. The first will be a source
attribute, actually SRC, which will point to my aliases file.
| | 01:55 | The name of the file is AIR Aliases.JS.
| | 01:59 | Make sure that you spelled this exactly correctly, including case sensitivity,
| | 02:03 | and then set the script element's type to a value of text/JavaScript.
| | 02:11 | After the script begin tag, put in a script end tag. You must close
the end tag in this fashion, otherwise the scripting won't work.
| | 02:20 | Next, create another script element and set the type once again to text/JavaScript.
| | 02:28 | And add an end tag on the next line.
| | 02:31 | And then between the two script tags declare a JavaScript
function. Name the JavaScript function load handler. We're going
| | 02:40 | to be calling this upon the load event of the body element.
| | 02:46 | Put a pair of braces after the function
| | 02:49 | and then within the braces put in this command, air.trace.
The variable air is declared by the AIR Aliases.JS file,
| | 03:00 | and it's an alias that describes a particular object, the runtime itself.
| | 03:04 | The trace method can be called from the AIR object whenever you need it.
| | 03:09 | I'm going to put in a simple message, "This is an AIR trace message."
| | 03:16 | Now in order to call that method upon application start up,
I'll go down to the body element and put in an onLoad event handler.
| | 03:25 | Within the quotes I'll call my new method, loadHandler.
| | 03:30 | Make sure to include the opening and closing parentheses both after the
function name and where you call the function in the on load event handler.
| | 03:39 | Save your changes.
| | 03:42 | So this should now work. I declared the AIR aliases
JavaScript file and incorporated it into the application.
| | 03:48 | I declared my custom loadHandler function,
| | 03:51 | and within that function called the trace method of
the AIR object, which was declared in the Aliases file,
| | 03:57 | and then as the application starts up, when the on
load event occurs, I'm calling the loadHandler function.
| | 04:04 | Lets give it a try. I'll now switch back to the command window.
| | 04:08 | If you following along and you closed your command window,
open it and switch back to the Hello World folder.
| | 04:15 | Now we'll run the application again. Once again we run the
debug launcher, ADL, and pass in the name of the application
| | 04:23 | descriptor file, HelloWorld.XML.
| | 04:26 | There's the application again,
| | 04:28 | and now I'll switch back to the command window
and you'll see the trace message appear.
| | 04:33 | Once you've incorporated the AIR Aliases.JS file,
you can call the trace message whenever you need to.
| | 04:40 | Particularly when you're working with the software developers
kit, and not with one of the more advanced development
| | 04:45 | environments such as Flex or Dreamweaver, you'll find that this
feature will really help you debug your applications and
| | 04:51 | find out what's going on in them at runtime.
| | Collapse this transcript |
| Creating a self-signed security certificate| 00:00 | In this video I'm going to describe how to use the AIR developer
tool ADT to generate a self-signed security certificate.
| | 00:07 | As I described in a previous video, before you can compile your AIR
application into an installable file, you first need a security certificate.
| | 00:17 | This self-signed version of the security certificate is
suitable for internal use and for testing and development. As I
| | 00:23 | mentioned earlier, if you're actually building an application
for commercial distribution, you'll want to investigate
| | 00:29 | getting of verified security certificate from one
of the security vendors, Thawte or VeriSign.
| | 00:36 | To create a self-signed security certificate,
| | 00:38 | open the command window and switch to whichever
folder you want to create a certificate in.
| | 00:43 | I typically create the certificate right there
in the application folder just for simplicity.
| | 00:48 | Then type in the following syntax: ADT,
| | 00:53 | then the property -certificate, meaning we're using
the developer tool to create a certificate.
| | 01:00 | Next pass in the certificate name. The certificate name
can be any value you want and is simply an identifier.
| | 01:07 | I'm going to call it MyCertificate.
| | 01:11 | Next pass in this literal value: 1024-RSA.
| | 01:18 | You can also use other values such as 2048.
| | 01:21 | If you curious about what these values mean, check the documentation.
| | 01:25 | Next, type in the name of the file that you
want to create with the .PXF file extension.
| | 01:31 | I'll type in a value of MyCertificate.PFX,
| | 01:37 | And then finally type ub a password.
| | 01:40 | Whatever password you type in and will be encrypted into
the security certificate and then later on, when you compile
| | 01:47 | your applications using the certificate,
you need to provide the password each time.
| | 01:51 | So make sure you put in a password that you remember.
| | 01:54 | I'll execute the command,
| | 01:56 | then switch back to Windows Explorer, or Finder if you're on
the Mac and show you that the certificate has been created.
| | 02:03 | The name of the file is MyCertificate.PFX and in next video I'll show you how to
use the self-signed security certificate to build your application install file.
| | Collapse this transcript |
| Compiling an AIR application from the command line| 00:00 | In this video, I'm going to describe how to build your applications installer file.
| | 00:05 | Before you create the installer, you must have a security certificate.
| | 00:09 | If you haven't done that yet, go back to the previous video
and generate your own self-signed security certificate and
| | 00:15 | then you'll be able to do this exercise.
| | 00:18 | I'm once again using the software developers kit to do all this so to get started
open a command window and navigate to the Hello World application folder.
| | 00:27 | Here's the syntax for creating the AIR file.
| | 00:30 | The installer.
| | 00:32 | Start off with the name of the developer tool application, ADT.
| | 00:36 | Then the command, package.
| | 00:38 | You type it in with a hyphen in front -package.
| | 00:42 | Next type in the value -store type, space,
| | 00:47 | PKCS 12 and that indicates what kind of encryption certificate you're using.
| | 00:54 | Next type in a value of -keystore.
| | 00:58 | And then the name of your PFX security certificate file. Mine is MyCertificate.PFX.
| | 01:06 | Next type in the name of the AIR file you want to create.
| | 01:09 | The file name can be anything you like, but it must have a
.AIR extension. I'm going to type in the value of Hello World.AIR.
| | 01:17 | And next, type in the name of the application
descriptor file. Mine is called HelloWorld.XML.
| | 01:25 | Finally, type in the names of all the files that need to be included in this application.
| | 01:31 | Now you may be thinking, what about a complex a
pplication that includes literally dozens of files?
| | 01:36 | Well in that case their ways of creating application descriptor
files that indicate all the files that need to be included.
| | 01:43 | Here we're doing something very simple, an application that just includes two files.
| | 01:48 | I'll start with the name of my initial content file, HelloWorld.HTML,
| | 01:53 | and then I'll also include the AIR Aliases.JS file,
| | 01:57 | because I refer to that file in my HTML content.
| | 02:01 | So that's the entire command. Let me review it before I press Enter.
| | 02:05 | Start off with ADT,
| | 02:07 | and the command package,
| | 02:08 | then a store type property set to PKCS 12,
which is the type of certificate you're using.
| | 02:15 | Then the name of the certificate file in the keystore property,
| | 02:19 | then the name of the AIR file that you're creating.
| | 02:22 | Then the name of the application descriptor file,
| | 02:25 | and finally at the end, a list of all the files
that need to be incorporated into the installer.
| | 02:31 | I'll press Enter
| | 02:33 | and notice that I'm prompted for a password.
| | 02:35 | This is the password of the self-signed
security certificate. I'll type in the value,
| | 02:41 | and press Enter.
| | 02:44 | And after just a few moments, the compilation is complete.
| | 02:47 | I'll switch back to Windows Explorer, or if you're working on a Mac, to Finder.
| | 02:52 | And you should find your compiled application there HelloWorld.AIR.
| | 02:57 | So that's how you do the compilation.
| | 02:59 | Check the documentation for additional details of the properties that
you can use when you call the ADT application from the command line.
| | 03:06 | And again remembered that ADT is used both to generate the certificate and
then to use the certificate to compile the AIR application installer.
| | Collapse this transcript |
| Installing and uninstalling an AIR application| 00:00 | In this video I'm going to describe how to install your completed AIR application.
| | 00:05 | In previous videos, if you followed along in the exercises,
you installed the latest version of the Adobe integrated
| | 00:11 | runtime on your operating system.
| | 00:13 | And then using the SDK, you created your AIR file.
| | 00:17 | The AIR file now stands alone from the rest of the source code. It
incorporates everything you need for the AIR application install.
| | 00:24 | So to demonstrate this, I'll open up Windows Explorer, or Finder on the Mac,
| | 00:29 | and navigate to the Hello World folder that contains my application files.
| | 00:34 | I'm then going to copy and paste the AIR file to my desktop
| | 00:42 | and then I'll close Windows Explorer.
| | 00:44 | My goal here is show you that this file is no longer dependent
on the other files in that folder and can be installed
| | 00:50 | on any client systems running Windows or the Mac,
as long as the integrated runtime is already installed.
| | 00:57 | Now to do the installation I'll double-click on the AIR file,
| | 01:01 | and I'll be prompted, are you sure you want
to install this application to your computer?
| | 01:05 | Notice that the publisher name says Unknown.
| | 01:08 | This is because I used a self-signed security certificate
and its examples of the reasons why for a commercial
| | 01:15 | application you want use one security certificates
from one of the major security vendors.
| | 01:20 | I know that I created this application though and
I'm just testing, so I'll click the Install button
| | 01:26 | and then I'll be prompted for various options.
| | 01:29 | Notice that the application name, version and description are
listed on the application install screen. These values came
| | 01:37 | from the application descriptor file.
| | 01:40 | I have installation preferences to add shortcut icons my
desktop and to start the application after installation.
| | 01:47 | I can also select the installation location.
| | 01:50 | Notice that the default location is simply C:\program files.
I'm going to install my application in the Hello World folder,
| | 01:59 | and I'm going to except all the installation preferences.
| | 02:02 | I'll click Continue and after just a few seconds my application
has been installed, and it's running on the desktop.
| | 02:10 | I did include the application preferences to add the icon on
the desktop and so I'll close the application and show you that
| | 02:17 | the icon is there and now I'll double-click to run the application again.
| | 02:22 | I can also go to the menu
| | 02:26 | and notice that the Hello World item appears in the Start menu of
Windows. Now if you're running on a Mac, you'll go to the
| | 02:32 | Applications folder and you will create a Hello World folder under Applications.
| | 02:38 | On Windows I can run the application from the Programs folder and it works fine.
| | 02:43 | And I can also go to the C drive's Program Files folder.
| | 02:46 | From there to Hello World,
| | 02:49 | and there you'll see another folder named Hello World and within
that an executable or in the case of the Mac, an app file.
| | 02:57 | I'll double-click the executable.
| | 03:00 | And once again, there's my application.
| | 03:03 | Also you one other thing in Windows, which I think is useful to understand.
| | 03:07 | With the application running I'll go to the Task Manager.
| | 03:11 | If you're working on a Mac, you can use the Activity Monitor instead.
| | 03:15 | And I'll show you that the Hello World application is listed under
the Processes list. It is using about 13 1/2 megabytes of memory
| | 03:22 | to execute a very simple bit of functionality.
| | 03:25 | Every AIR application has a base memory usage,
| | 03:29 | and then as your application gets more complex, it will
increase as needed, but you'll notice that relative to other
| | 03:34 | Windows-style applications, it is pretty reasonable.
| | 03:38 | Finally let's take a look at how to uninstall the application.
| | 03:42 | I'll close the windows,
| | 03:44 | go to the Control Panel.
| | 03:47 | From there click on Uninstall a program, or if you're
working on Windows XP, select Add and remove programs.
| | 03:54 | And then you'll see the application listed by its application name.
That's the value that was put into the application descriptor file.
| | 04:01 | is noted here is Lynda.com Hello World 1. 0.
| | 04:05 | Within this list I'll double-click on it.
| | 04:07 | When I see the Installer dialog, I'll click Uninstall,
| | 04:11 | and I've now removed the application from my desktop system.
| | 04:14 | I'll click Finish
| | 04:16 | and close the Uninstaller window.
| | 04:18 | So this is been a look at how to install and uninstall
and how to use the application on the Windows platform.
| | 04:25 | If you're working on the Mac, it'll be a little bit different
in that there's no official uninstall process. Instead you
| | 04:31 | just go to the Applications folder and you remove
the application by dropping it in the trash.
| | Collapse this transcript |
|
|
3. Creating AIR Applications in Flex Builder 3Creating a desktop application project| 00:00 | In this chapter of the video series I'm going to describe
how to create an AIR application using Adobe Flex Builder 3.
| | 00:08 | One of the most important new features of Flex Builder 3
is the fully integrated AIR software developers kit.
| | 00:14 | When you create a new Flex project, you now select from the beginning
whether the project is designed to be deployed on the web or on the desktop.
| | 00:22 | When you select the desktop, you are creating an AIR application.
| | 00:26 | It's important to note that isn't currently possible to
create a single project that can deploy both to the web and to
| | 00:33 | the desktop. It is possible to create two projects that share
assets, and that's a very common approach for developers
| | 00:46 | who want to multi-purpose their content. That is create a
single application that they can deploy to either target.
| | 00:47 | To get started, if you're following along with the exercises, open Flex Builder
3, which I'll already have open on my desktop, and then switch workspaces.
| | 00:56 | From the Flex Builder menu, select File, Switch Workspace, and
| | 01:00 | then select the folder that I have displayed here, C:\AIREssentialTraining\Flex.
| | 01:08 | As always when you switch workspaces in Flex Builder 3,
it will result in closing, Flex Builder and then re-opening it,
| | 01:14 | This allows Flex Builder and Eclipse to release any locks on files or folders.
| | 01:20 | Now, create a brand-new Flex project.
| | 01:22 | From the menu, select File,
| | 01:26 | New,
| | 01:27 | Flex Project.
| | 01:29 | If you've already been working with Flex 3 so far, this will be familiar.
| | 01:33 | Now set the project name, which can be anything.
I'm going to call it Hello From Flex and AIR.
| | 01:40 | I'll use the default location to create a project folder right
under my workspace, where the name of the project folder
| | 01:46 | matches the name of the project.
| | 01:48 | For the application type, select Desktop application (runs in Adobe AIR).
| | 01:54 | This first application won't use an application server
so leave the application server type set to None
| | 02:00 | and click Next.
| | 02:02 | The output folder is where your compiled application is created.
| | 02:05 | Flex Builder 3 distinguishes between the output folder, which
you create during project creation, which is your debug output,
| | 02:12 | and the release version folder, which you create during the export process.
| | 02:17 | Leave the output folder set to the default of bin-debug and click Next.
| | 02:21 | Next set the main application file.
| | 02:24 | The main application file should have a .MXML file extension
and follow the conventions of an ActionScript class name,
| | 02:31 | that is include letters, numbers and underscores
and you must start with an alphabetical letter.
| | 02:36 | By convention, the initial character of an ActionScript
class name is uppercase, so I'll usually create my
| | 02:43 | applications with initial uppercase characters too.
| | 02:46 | If you worked through the previous chapter about the AIR SDK,
| | 02:49 | I described in that chapter the nature of the application ID.
| | 02:53 | An application ID is the unique identifier.
| | 02:56 | The intention of the application ID is to create a globally unique identifier.
| | 03:00 | You typically do this by prefixing the ID of the application
with the domain of your organization reversed.
| | 03:07 | So for instance, Lynda.com becomes com.Lynda.
| | 03:12 | I'm going set my application ID as com.lynda.HelloFromFlexAndAIR.
| | 03:18 | If you want to change the application ID later on, it will be
very easy because this information will be stored in the
| | 03:23 | application descriptor file, the same XML
file that I showed in the previous chapter.
| | 03:28 | Now click the Finish button to create both
the Project and the main application file.
| | 03:33 | It takes a few moments to create the application.
| | 03:36 | The first thing that you may notice is that the root element
of an AIR application uses an element called windowed
| | 03:42 | application, instead of the Flex application
element that's used for web applications.
| | 03:48 | The windowed application component is a subclass of the
application. So if you're familiar with the Flex application
| | 03:54 | component in all of its properties, methods and capabilities,
| | 03:58 | this component does all the same things,
| | 04:00 | that is designed to be presented as a desktop window instead
of the window embedded and displayed in the Flash Player.
| | 04:07 | Over in the Flex Navigator view, you'll notice that in
addition to the .MXML file, an application descriptor file has
| | 04:13 | been created with the.XML extension.
| | 04:16 | This file follows the same structure as the version that I used in the SDK chapter.
| | 04:21 | It has all the same properties and the properties meanings
are the same and so for instance, if you wanted to reset
| | 04:27 | the application ID, the file name or the
application name, you would do it in this file.
| | 04:32 | Go back to the application file and set its Layout property to a value of Vertical.
| | 04:39 | Then place the cursor inside the windowed application component
and add a Label component, set its Text property to "Hello
| | 04:48 | from Flex and AIR!" and to make it a little more dramatic, set its font size to
18 pixels and its font weight to bold. Save your change and run the application.
| | 05:05 | The application opens as a desktop window.
| | 05:08 | This is a native application now running in your Windows or Mac operating
system. To close the application, click the appropriate close button.
| | 05:15 | The application look like a native
application, determined by your operating system.
| | 05:20 | If you're running on Windows, it looks like Windows application
and if you're running on Mac, it looks like a Mac application.
| | 05:25 | So that's the basics of how to create an AIR application
in Flex. In the next few videos I'll talk about some of the
| | 05:31 | details of working with AIR applications and Flex Builder
including how to package your application for installation.
| | Collapse this transcript |
| Understanding Flex/AIR application architecture| 00:00 | In this video if I'm going to describe some of the unique behaviors and capabilities
| | 00:04 | of AIR applications that are built in Flex Builder.
| | 00:07 | As I showed in the previous video,
| | 00:09 | when you create a brand-new desktop application in Flex Builder
3 the root element of the MXML file is windowed application.
| | 00:17 | Instead of the traditional application element
that you see in web-based Flex applications.
| | 00:21 | One of the best ways to learn about some of the unique
capabilities of desktop applications built in Flex is
| | 00:27 | to take a look at the Help system for the windowed application component.
| | 00:30 | If you're following along in these exercises, open the file
that you created in the previous vide, HelloFromFlexAndAIR.MXML,
| | 00:38 | and then place your cursor into the windowed application tag,
| | 00:41 | and press Shift + F2 to open the Help screen for that component.
| | 00:46 | Once the Help screen opens,
| | 00:48 | the first thing to look at is the inheritance
hierarchy of the windowed application component.
| | 00:53 | Notice that the windowed application class is
subclassed or extended from the application class.
| | 00:59 | It inherits all the properties, methods and
capabilities of the traditional application component.
| | 01:06 | So that means anything you can do in a web-based application
in Flex, you can also do in an AIR application,
| | 01:12 | but there are certain capabilities and behaviors that have been added to AIR
applications because of their unique capability as desktop applications.
| | 01:20 | To see some of these, go to the Property section of the documentation.
| | 01:24 | Click the Properties link. When you get to the public properties,
if you see all the properties of both the windowed
| | 01:29 | application and the application components,
| | 01:32 | click the link Hide inherited public properties, so that now
you're only looking at the properties their unique to the
| | 01:38 | windowed application. Here are some the things
that you can do that are a little different.
| | 01:42 | AlwaysInFront is a property of the windowed application component
which helps you dictate that your application should
| | 01:48 | always have the usual focus in the Windows system.
| | 01:51 | This is something that wouldn't make any sense in the context
of a Web application, where the application is running in the
| | 01:56 | Flash Player nested within the browser.
| | 01:59 | But because AIR application is a part of the native operating
system, whether you are running on Windows or the Mac,
| | 02:05 | it can participate in the Z order of the window layering and
by setting AlwaysInFront to true, you're indicating that
| | 02:11 | your application should always stay on top of the stack.
| | 02:15 | There are properties called dockIconMenu and menu,
which are datatyped to the class called FlexNativeMenu.
| | 02:21 | I'll be describing how to use these many classes
in a later chapter of the video series,
| | 02:25 | but briefly, these allow you to assign operating system native
menus to your Flex application, so that the menus look
| | 02:32 | exactly the same as the other menus for other applications that
are running in your operating system, either Windows or the Mac.
| | 02:39 | There are a few properties that determine
how the user can interact with the window.
| | 02:43 | Their named to minimizable, maximizable and resizable.
| | 02:48 | These are values that are read only. For the windowed application component, you set these to the application descriptor file
| | 02:55 | so that they're compiled into the application and they
determine how many control buttons are displayed by the
| | 03:00 | application and whether the user is allowed to resize the application.
| | 03:04 | There's a property called showStatusBar that
I'm going to go into in a little more detail.
| | 03:09 | The nature of the showStatusBar property is that if set to true, which is
the default, it shows the status bar at the bottom of the application.
| | 03:17 | Then in your ActionScript code or MXML declarations, you can set a status
property that causes a value to appear in the status bar when it's visible.
| | 03:27 | I'm going to close the application
| | 03:29 | and I'm going to add an attribute called status
| | 03:33 | and set its value to a simple string of "the application is open!".
| | 03:39 | I'll save it and run the application
| | 03:44 | and take a look in the lower left-hand corner.
| | 03:47 | The status bar appears at the bottom of the application
and whenever you create a brand-new window in your Flex
| | 03:52 | application, by default every window has the status bar.
| | 03:56 | If you don't want the status bar to appear, set a
property called showStatusBar to a value of false.
| | 04:03 | Now, even with the status property set, the status bar won't appear.
| | 04:08 | There are many properties like this throughout the AIR application architecture.
| | 04:12 | It's up to you to decide how you want your application to look and behave.
| | 04:16 | The best way to acquaint yourself with all these details
is to take a look at the documentation for the windowed
| | 04:22 | application component and from there, follow the trail of all
the new components that are unique to AIR applications when
| | 04:28 | you're building applications in Flex Builder.
| | Collapse this transcript |
| Debugging an AIR application in Flex Builder| 00:00 | In this video I'm going to describe how to debug
AIR applications that are built in Flex Builder 3.
| | 00:06 | To demonstrate this, I'm going the import a project from the exercise files area.
| | 00:10 | From the menu and select File,
| | 00:13 | Import,
| | 00:14 | Flex Project.
| | 00:15 | In the Import Flex Project dialog box, click the first Browse button
| | 00:20 | and navigate to the location of your exercise files.
| | 00:23 | I've placed mine under AIR Essential Training.
| | 00:26 | From there go to the Flex folder,
| | 00:29 | and from their select debuggingAIRapps.ZIP and click Finish.
| | 00:35 | Open the project and then open the source route
| | 00:39 | and open the file debuggingAIRapps.MXML.
| | 00:42 | This application is designed to allow is to do a little bit of debugging.
| | 00:46 | The tools for debugging AIR applications built in Flex
are exactly the same as Web applications built in Flex.
| | 00:52 | You can use the trace function, the breakpoints, variables views and so on.
| | 00:57 | The first demonstration will be of the trace function.
| | 01:00 | The trace function in Flex sense logging messages to logging targets
| | 01:05 | and the default logging target is the console view in Flex Builder 3.
| | 01:10 | Notice that there's a function called traceIt in this application which
calls the trace method and passes a simple string of executing traceIt.
| | 01:18 | And then there's a button at line 24 that executes that method.
| | 01:22 | To see traceIt at work, open the application.
| | 01:25 | Then go to the toolbar and click the Debug button.
| | 01:29 | When the application opens, click the Trace button
| | 01:32 | and watch the console view in Flex Builder.
| | 01:34 | Each time you click the button, you'll see the trace
message sent over to the Consule view and displayed there.
| | 01:41 | To terminate the debugging session, just close the
AIR application and you return back to Flex Builder.
| | 01:47 | Next breakpoints.
| | 01:49 | Breakpoints work exactly the same as they
do in Web applications built in Flex.
| | 01:53 | You place a breakpoint at the line you want to suspend the application.
| | 01:57 | You can do this in Flex Builder by double-clicking
next to the line number, right-clicking and selecting
| | 02:02 | Toggle Breakpoint or pressing Control + Shift + B.
| | 02:06 | Once again, debug the application.
| | 02:10 | When the application appears, click the Debug button.
That will execute the method in which the breakpoint was placed.
| | 02:17 | In the background Flex Builder presents a dialog asking
if you want to open the Flex debugging perspective.
| | 02:23 | Click on the dialog, then click Yes.
| | 02:26 | Just as with Web-based applications and Flex Builder.
| | 02:29 | You can inspect variables, use watch expressions and otherwise inspect
what's going on internally in your Flex application as it executes.
| | 02:37 | For instance with the active breakpoint in the debugIt
method I have access to the property's localVar and i
| | 02:43 | that are declared within this application.
| | 02:45 | I can step through application code using
the stepping buttons in the debug view.
| | 02:50 | I'll click the Step Over button or press F6 to step one line at a time
| | 02:55 | and watch what happens in the variables view in the upper right hand corner.
| | 03:00 | As I step through the code, I'm updating the value of various variables.
| | 03:04 | As with Web applications, you can use the expressions view.
| | 03:08 | I'm going to right-click on the myVar expression,
| | 03:11 | and then select watch myVar.
| | 03:14 | That opens the expressions you and places myVar in the expressions view.
| | 03:19 | And then I'll continue stepping through the code and
watch the value update each time through the for loop.
| | 03:26 | So that's a basic look at debugging applications in AIR.
| | 03:29 | Every debugging tool that you have available and Flex Builder
for classic web applications built in Flex also works
| | 03:36 | exactly the same way when you're working with AIR applications.
| | 03:39 | Just as with Web applications, make sure that you explicitly
terminate your debugging session either by closing the
| | 03:46 | application or by clicking the Terminate button from within Flex Builder.
| | 03:50 | If you click Terminate button within Flex Builder,
it will result in closing the application as well.
| | 03:55 | And just as with classic Flex applications built for the Web,
| | 03:59 | trace statements and other debugging information is not a
part of the final release build that you create when you're
| | 04:05 | ready to package your application for installation.
| | 04:08 | That version of the application will be fully optimized and all
of the debug symbols, trace functions and so on will be removed.
| | Collapse this transcript |
| Using HTML content in a Flex application for AIR| 00:00 | In this video I'm going to describe how to embed an HTML
browser component in a Flex application that's deployed on AIR.
| | 00:08 | The Adobe integrated runtime includes an integrated Web browser
kernel that's based on the Web kit kernel, the same one
| | 00:15 | that's a part of the Safari web browser.
| | 00:17 | You can embed any number of instances of this kernel in a
Flex application deployed on AIR and it will be able to browse
| | 00:23 | websites, execute JavaScript, use cascading style
sheets and so on to display organizations webpages.
| | 00:30 | To demonstrate this I'm going to create a brand-new Flex project.
| | 00:34 | If you'tr following along in the exercises from the menu, select File,
| | 00:38 | New,
| | 00:39 | Flex Project.
| | 00:41 | Name the project HTMLinFlex.
| | 00:46 | Set the application type to Desktop application.
| | 00:49 | Click the Next button.
| | 00:51 | click Next again,
| | 00:53 | and then click Finish to create the project and the application.
| | 00:59 | Set the application's Layout property to Vertical and
then place the cursor between the windowed application tags.
| | 01:07 | To instantiate an HTML component in a
Flex application, declare an mx:HTML tag.
| | 01:14 | This tag creates an instance of a browser.
| | 01:17 | Assign an unique ID property.
| | 01:20 | I'll call it myHTMLBrowser
| | 01:24 | and set its width and height properties to 100% of the application.
| | 01:28 | To set the browser's current URL, that is
indicate which webpage you want to display,
| | 01:32 | set the HTML component's location property.
| | 01:36 | I set the location property to a value of http://www.adobe.com.
| | 01:45 | Than I'll save and run the application.
| | 01:48 | As the application starts up, it creates the browser
kernel and then navigates to the page that I selected.
| | 01:54 | I'll double-click on the top of the application to expand it to full screen
| | 01:58 | and you'll see that the embedded browser is able to display
complex HTML, cascading style sheets, execute JavaScript code
| | 02:06 | and display Flash-based content.
| | 02:08 | I'm going to close the browser and create some controls above it.
| | 02:13 | Go back to the code and place the cursor above
the HTML component and create an Hbox container.
| | 02:21 | Within the Hbox container, declare a label
| | 02:25 | and said its text property to URL.
| | 02:28 | Set the label control's font size style to 18 pixels.
| | 02:33 | Then after the label create a text input control. Set its ID to urlInput.
| | 02:41 | After the text input control, add a button control,
| | 02:46 | said its label property to Go,
| | 02:49 | its font size once again to 18,
| | 02:55 | and then add a click event handler.
| | 02:58 | In the click event handler, execute this ActionScript code.
| | 03:03 | myHTMLBrowser.location equals urlInput.txt.
| | 03:12 | Be sure to add the characters at the end of the line to close the button
tag and now test the ability to navigate with a browser to other webpages.
| | 03:21 | Click the Run button.
| | 03:23 | As the application starts up, it once again displays the Adobe webpage.
| | 03:28 | But now I can click into the URL input and type
in another site. I'll navigate to www.google.com,
| | 03:38 | and now I'm looking at the Google page.
| | 03:40 | Let's had a couple other functions.
| | 03:42 | As with all good browsers, you can move
forward and back through the browser's history.
| | 03:48 | The HTML component includes methods for this
purpose called historyForward and historyBack.
| | 03:54 | I'll create a button and set its label to forward. I'll match
the existing font size of the other button and I'll set it to
| | 04:02 | 18 and so it's more visible in the recording. And then
the click event I'll call myHTMLBrowser.history.Forward.
| | 04:11 | Now I'll select that button and clone it by pressing Control
+ Alt + Down. For the new instance the button I'll set
| | 04:18 | it's label to back.
| | 04:20 | And in the click event handler I'll call the browser's historyBack function.
| | 04:26 | I'll save and run the application.
| | 04:33 | As the application starts up, it loads the Adobe website once again.
| | 04:38 | I'll click into the URL input control
| | 04:41 | and type in http://www.bardotech.com, that's my own company's website,
| | 04:49 | and bardotech.com.
| | 04:52 | I'll click the Go button.
| | 04:54 | I'll see my website.
| | 04:56 | I'll click the Back button
| | 04:58 | and go back to Adobe.
| | 05:00 | Click the Forward button
| | 05:01 | and go forward to mine.
| | 05:03 | So the HTML component allows you to embed complex HTML.
It's able to display content based on Flash of course, because
| | 05:11 | the application itself is Flash-based. So you
have Flash embedded in HTML embedded in Flash.
| | 05:17 | The HTML component is a complete Flash component too.
| | 05:21 | You can apply filters to rotate the object and do anything
else you can with visual components in the Flex environment.
| | 05:29 | So that's a look at how you can integrate HTML content and
a complete web browser inside a Flex application designed for
| | 05:36 | deployment on the Adobe integrated runtime.
| | Collapse this transcript |
| Deploying a release version from Flex Builder| 00:00 | In this video I'm going to describe how to package your Flex
applications that's designed for AIR as an AIR install file.
| | 00:08 | In Flex Builder 3 this process is called exporting a release build.
| | 00:12 | During the expert process you'll have an opportunity to
create a brand-new security certificate if you need one or
| | 00:18 | you'll be able to select your security certificate that you've already created.
| | 00:22 | For this demonstration I'm going use the HTMLinFlex
application that I created in the previous video.
| | 00:29 | If you're following along with the exercises, you can do
this with any of the applications that you've created.
| | 00:34 | From the menu, select Project,
| | 00:38 | Export Release Build.
| | 00:39 | You can also get to this feature from the menu through File, Export.
| | 00:43 | In the Export Release Build dialog select the
project and application that you want to export.
| | 00:49 | I had already selected my application in the Flex navigator view, so
the Export Release Build wizard is already set to the correct items.
| | 00:57 | Next, set the name of the file that you want to create.
| | 01:01 | I'm going to except the default of HTMLinFlex.AIR.
| | 01:04 | Then click Next.
| | 01:06 | As with all AIR applications, in order to build the
installer you must provide a digital certificate.
| | 01:12 | If you have a certificate that you've purchased
from Thawte or VeriSign, you can import it here.
| | 01:17 | Or you can create a self-signed digital certificate,
| | 01:20 | As I described in previous videos, when use a self-signed certificate,
the installer will show that the publisher is unknown and unverified.
| | 01:28 | So these kind of certificate is only really useful for internal or testing use.
| | 01:33 | You can also export what's called an intermediate
AIRI file that you can sign and complete later.
| | 01:40 | For instance in an organization where there are security
specialists who have access to the security certificates,
| | 01:46 | you might export the intermediate file and then hand the file
to those people for actual signing and preparation for release.
| | 01:53 | I'm going to create a brand-new digital certificate in this exercise.
| | 01:57 | I'll click the Create button
| | 01:59 | and then fill in the information for the certificate.
| | 02:02 | The publisher's name will be Lynda.com.
| | 02:05 | You can also add information such as an organizational unit
and an organizational name or you can leave those values blank.
| | 02:12 | There are two types of certificates that you can select, 1024 and 2048 RSA.
| | 02:18 | As I did in the demonstrations for the SDK, I use the 1024-RSA style.
| | 02:24 | Now I enter a password. I need to type it twice.
| | 02:29 | And then I indicate where I want to save the file.
| | 02:32 | I'll Browse folders,
| | 02:34 | and select my HTMLinFlex folder,
| | 02:37 | and then I'm going to set the file name as myCertificate and
notice that it has a type and a file extension of .P12.
| | 02:46 | Click OK.
| | 02:48 | Notice that the certificate location and
password are automatically filled in for you.
| | 02:52 | If you're going to be generating additional AIR applications
during the session, you might want to check this option,
| | 02:58 | Remember password for the session, so you don't
have to type in the password over and over again.
| | 03:04 | Click the Next button,
| | 03:06 | and on the next screen indicate which files
you want to include in your AIR file.
| | 03:11 | If your application includes assets such as graphics,
| | 03:15 | XML files and so on, you'll need to make sure that these
items are selected. In the case of a simple application like
| | 03:21 | this one where it doesn't have any extra resources, the only
files that need to be included are the application descriptor file
| | 03:27 | with the .XML extension and the compiled application with
the .SWF extension. You don't need to include your MXML
| | 03:35 | and ActionScript source files. These are already compiled into the SWF file.
| | 03:40 | click Finish and your AIR application is now complete.
| | 03:45 | To install the application on your desktop,
| | 03:49 | double-click on the .AIR file and assuming that you already have the
appropriate version of the Adobe integrated runtime installed on your system,
| | 03:56 | you should now see the Application Install dialog.
| | 03:59 | Click the Install button.
| | 04:01 | Select whatever installation preferences you like and click Continue.
| | 04:06 | After a few moments the application is installed and it should
open up on your desktop. I'll double-click its title bar to
| | 04:12 | expand it to full screen.
| | 04:14 | Then close the application,
| | 04:16 | and I'm going to minimize Flex Builder and show you
that the application's icon has been added to my desktop.
| | 04:22 | Now I'm going to uninstall the application.
| | 04:26 | I go to the Control Panel
| | 04:28 | to Uninstall a program.
| | 04:30 | If you're working on Windows XP, select Add and remove programs
and if you're working on a Mac, removing the application is a
| | 04:37 | matter of moving to the applications folder and locating and deleting the application.
| | 04:42 | I'll scroll down to the application,
| | 04:45 | HTMLinFlex,
| | 04:46 | double-click,
| | 04:48 | and uninstall.
| | 04:50 | So that's a look at how the package a Flex application
for deployment on the Adobe integrated runtime.
| | 04:56 | All the tools you need are integrated into Flex Builder 3 so you don't
need to work with the command line tools like you do with the SDK
| | 05:04 | and you can use any Flex features that you're familiar
with and uncomfortable with to build your Flex application.
| | Collapse this transcript |
|
|
4. Creating AIR Applications in Dreamweaver CS3Installing the AIR extension for Dreamweaver| 00:00 | In this chapter of the video series I'm going to describe how
to build and deploy the AIR applications using Dreamweaver CS3.
| | 00:07 | As I described in previous videos, you can build AIR
applications completely using HTML, cascading style sheets and
| | 00:14 | JavaScript. You don't necessarily need to include
Flash-based content built in Flash or Flex.
| | 00:21 | If you already have a license for Dreamweaver CS3,
you'll be with the download and install the Dreamweaver
| | 00:26 | extension for Adobe AIR from Adobe Systems.
| | 00:29 | During the beta cycle this extension was
available for download on the lab site.
| | 00:34 | Once the product has been released,
| | 00:36 | you'll be able to find it at www.adobe. com/products/Flex.
| | 00:42 | For additional information about the extensions,
| | 00:44 | you should also look on the Adobe Developer Center area,
an area specifically designed for developers who use HTML and
| | 00:51 | JavaScript to build AIR applications.
| | 00:54 | I have already downloaded the extension file onto
my desktop. Notice that it has a file extension of.MXP.
| | 01:01 | The actual name of the final product release may differ.
| | 01:04 | In order to install the file, first make sure you have Dreamweaver closed.
| | 01:08 | Then just double-click on the file,
| | 01:11 | and that will result in opening the Extension
Manager application and installing the extension.
| | 01:16 | During the installation process, the Adobe Extension
Manager application shows you the license agreement.
| | 01:23 | If you agree to the license agreement, click on the Accept button
| | 01:26 | and then the extension is installed.
| | 01:28 | Once the extension has been installed, you'll see this confirmation message.
| | 01:32 | Click OK
| | 01:34 | and then in the Extension Manager, make sure that you
have Dreamweaver CS3 selected and it should show that the
| | 01:40 | Adobe AIR extension has been installed correctly.
| | 01:43 | The version number may change depending on which version you install.
| | 01:46 | Also make sure that the checkmark under on/off is checked.
| | 01:51 | Close the Extension Manager and then open Dreamweaver CS3
| | 01:56 | Within Dreamweaver CS3, here's how you verify that the
extension has been install. If you go to the Site menu,
| | 02:03 | you'll notice that there are new menu choices
labeled AIR Application Settings and Create AIR File.
| | 02:09 | The initially disabled because I don't have a site open,
| | 02:12 | but in next video I'll say how to start building an HTML JavaScript
application that's explicitly designed for use on the AIR runtime.
| | Collapse this transcript |
| Creating a Dreamweaver site for AIR| 00:00 | In this video I'm going to show you how to build
an application based on HTML and JavaScript
| | 00:06 | using the Dreamweaver extension for Adobe AIR
that was installed in the previous video.
| | 00:10 | If you're following along in these exercises, make sure
that you've already installed the Dreamweaver extension.
| | 00:16 | You'll then be ready to create a new site in Dreamweaver and then learn
how to package it and get it ready for installation as an AIR application.
| | 00:24 | To get started, you'll create a site definition.
| | 00:26 | From the Dreamweaver menus, select Site,
| | 00:29 | New Site and then set two properties. The site name and the local root folder.
| | 00:36 | The site name can be anything you like,
I'm going to call it, Hello from Dreamweaver,
| | 00:43 | and then I'll set the local root folder to a new empty folder.
| | 00:47 | Click the Browse button,
| | 00:49 | go to Computer or if you're working on Windows, My computer,
| | 00:52 | or if you're working on a Mac select the hard disk,
| | 00:55 | and navigate to the exercise files.
| | 00:59 | From there drill down into the HTML subfolder and create a new folder
| | 01:04 | and name it Hello from Dreamweaver.
| | 01:07 | And click Select.
| | 01:10 | Those are the only two settings that you need to create for the site definition.
| | 01:15 | You don't need to include remote info because this is not a
conventional website where you'll be uploading the application's
| | 01:20 | assets to a Web server,
| | 01:22 | and you don't need a testing server because AIR applications
built from HTML and JavaScript can use dynamic application
| | 01:28 | pages such as those hosted by ASP.net, Cold Fusion or PHP.
| | 01:33 | It can only use static HTML content.
| | 01:36 | Click OK
| | 01:38 | and that creates the site.
| | 01:40 | Next, create an HTML page which will serve as your application's initial content.
| | 01:45 | You can either create a blank HTML page, or as I'm going
to do in this example, you can create a starter page based on
| | 01:51 | some of the themes that are included with Dreamweaver CS3.
| | 01:54 | I'm going to create a fairly complex initial page, because then when
I package the application for installation as an AIR application,
| | 02:02 | I'll be able to show you how to make sure
all the applications and assets are included.
| | 02:07 | Within the New Document dialog, Starter Page
(Theme) and then select Entertainment Homepage.
| | 02:13 | I'm selecting this particular sample page because it incorporates cascading style sheet files and graphics. Then click Create.
| | 02:22 | Next you're prompted for the name of the file.
| | 02:25 | The file extension can be either HTML or HTM
and I'm going to name my file default.HTML
| | 02:32 | and click Save.
| | 02:35 | Next I'm prompted for where I want to place this page's dependent files.
| | 02:39 | There's a CSS, cascading style sheet, file and a number of
graphic files that are going be incorporated into the page.
| | 02:46 | For ease of packaging, always place additional files inside a
subfolder of the site rather than in the site folder itself.
| | 02:54 | When you get to packaging the actual application you'll see why.
| | 02:57 | I'm going to create a new folder under the site root called
assets. I'll just type in the name the folder, I don't need
| | 03:03 | to browse and explicitly create the folder, it will be created for me.
| | 03:07 | And then I'll click Copy,
| | 03:09 | and that creates the page. It also creates the Assets subfolder
and all the required graphics and CSS files are created
| | 03:17 | in that subfolder. Next I'll make a couple of changes to the
application. I'll select the text "welcome message here" and
| | 03:23 | replace it with "Hello from Dreamweaver and AIR."
| | 03:30 | Now I'll go up to the website name here and replace it with some text, "my website," and if you like, you can replace the
| | 03:36 | graphics or change styles, whatever you like.
| | 03:39 | So that's how you basically create this site. It is just like
creating a conventional website except that you don't provide
| | 03:45 | any information about remote servers or testing servers.
| | 03:48 | In the next video I'll show you how to create your application
settings file and then test the application from within Dreamweaver.
| | Collapse this transcript |
| Creating HTML content for AIR| 00:00 | In this video, I'm going to show you how to generate the application
descriptor file from within Dreamweaver CS3, how to set some
| | 00:07 | of the application settings and then how to make sure all
the assets that are required by the application are packaged
| | 00:19 | into the AIR installer file that will be generated.
First of all make sure to save any changes to your webpages
| | 00:19 | and then go to the Dreamweaver menu and select Site,
| | 00:23 | AIR Application Settings.
| | 00:25 | Now if you don't see the menu choice in AIR Application Settings,
it means you didn't install the Dreamweaver extension for
| | 00:31 | Adobe AIR. You'll want to go back and follow the
steps first before you continue on with these.
| | 00:37 | I'll select the menu choice and this takes me into a
dialog box labeled AIR Application and Installer Settings.
| | 00:44 | The settings you see here are the ones that
you see in the application descriptor file.
| | 00:48 | In fact, the values here are going to be transferred
directly into an XML file that will be generated for you.
| | 00:54 | As with creating an application using the SDK or Flex,
the application ID should be a fully qualified identifier that
| | 01:02 | incorporates your organization's domain reversed.
So for instance lynda.com becomes com.lynda.
| | 01:08 | I'll set my ID to com.lynda.HellofromDreamweaver.
| | 01:13 | The version number is up to you, you can set it to a value
of one, or if you want to indicate that it's an application
| | 01:19 | still in development, you can set it to a point release such as. 5.
| | 01:24 | You must set the initial content.
| | 01:26 | The initial content for an application
built with HTML and JavaScript is an HTML file.
| | 01:32 | Click the Browse button
| | 01:34 | and select default.html, the application file,
| | 01:38 | and click Open.
| | 01:39 | There are many other properties that you can set here.
I'll describe those in later videos when I go through the
| | 01:44 | application descriptor file in detail.
| | 01:46 | In the Installer settings section, you need indicate
which files should be included in the AIR install.
| | 01:53 | You can add individual files by clicking the plus button or by
clicking the folder icon, you can add entire folders to the list.
| | 02:00 | I'll click the folder icon
| | 02:02 | and I'll choose the assets folder
| | 02:05 | and click Open
| | 02:06 | that I'll click Select.
| | 02:08 | And that adds the entire contents of the Assets folder to
the application installer. This is why I encouraged you when
| | 02:15 | creating the file to put all the graphics, cascading style sheets and
so on in subfolders of the site rather than in the site folder itself.
| | 02:24 | In the Program menu folder setting, you can indicate
where you want the default installation folder.
| | 02:29 | For now, we don't need that,
| | 02:31 | and in fact we've set all the required properties.
| | 02:34 | The file name, the ID, the version.
| | 02:36 | The initial content and the files we wanted to include.
| | 02:40 | Click Save,
| | 02:41 | and that creates the application.XML file.
| | 02:45 | Over in the Files panel, you'll see that file has now
been created and you can double-click to open it.
| | 02:51 | The application descriptor file includes all the same settings
in exactly the same format as when we created the same
| | 02:57 | file for the SDK or from Flex Builder.
| | 03:00 | One difference that you might notice on my screen is that the
XML namespace in the application tag has been set to 1.0.M6.
| | 03:09 | This indicates that this application is going use a beta version
of the Adobe integrated runtime because the version of
| | 03:15 | the Adobe integrated runtime that this
application requires at the moment is Beta 3.
| | 03:20 | Once the product goes through initial release the namespace
should be updated to eliminate the d.M6 at the end.
| | 03:26 | Now to test the application, I'll close the application.XML file,
| | 03:31 | return to the menu and select Site,
| | 03:34 | AIR Application Settings again.
| | 03:38 | Over on the right under the buttons, you'll notice the Preview button.
| | 03:41 | This is how you test the application from within Dreamweaver.
| | 03:45 | I'll click the Preview button.
| | 03:47 | The application is packaged and shown in an AIR window, and
that's how you test the application. Notice that as I move the
| | 03:54 | cursor over the hyperlinks that the cascading style sheet settings
are working correctly, those are hover settings in the CSS,
| | 04:01 | and any hyperlinks that I may have created to
go to other pages would be operational as well.
| | 04:07 | Now in the next video, I'll show you how to package the application
from within Dreamweaver CS3 and get it ready for installation.
| | Collapse this transcript |
| Deploying an AIR application from Dreamweaver| 00:00 | In this video I'm going to describe how to generate an
application installer from a Dreamweaver CS3 site.
| | 00:06 | In previous exercises I showed you how to install the Adobe integrated runtime,
| | 00:11 | the Dreamweaver extension for Adobe AIR
| | 00:13 | and I showed you how to set up the Adobe AIR settings for the application.
| | 00:17 | Now I'll generate the installer file from within Dreamweaver.
| | 00:21 | From the Dreamweaver menu, select Site, AIR Application Settings.
| | 00:26 | Notice that there's also a menu choice labeled Create AIR File.
If you've already set up your digital certificate during
| | 00:32 | the session, you can use that many choice directly. Otherwise,
you need to go through the Application Settings dialog.
| | 00:39 | Now set up your digital certificate.
| | 00:41 | If you already have a self-signed certificate or a certificate
that you've purchased from one of the security vendors,
| | 00:47 | you can click the Set button next to Digital Signature
and then select your certificate and provide a password.
| | 00:53 | If you need to create a digital certificate from scratch, click the Create button,
| | 00:57 | put in the publisher name,
| | 00:59 | and set the password.
| | 01:01 | You must have the password in the future to reuse the certificate.
Then indicate what you want to name the certificate.
| | 01:10 | Click the Browse button and place the certificate in your site root.
| | 01:14 | I'll name it mycertificate.PFX.
| | 01:18 | Click the Save button,
| | 01:20 | and then click OK.
| | 01:23 | After a moment you'll get a confirmation message indicating
that the digital certificate file has been created. Click OK
| | 01:29 | to return to the Digital Signature dialog,
| | 01:31 | and then type in the password for the certificate you just created.
| | 01:35 | If you're going to be generating multiple AIR files,
| | 01:39 | you can select the option Remember password for the session.
| | 01:42 | Also if you don't have direct access to the digital certificates for your organization,
| | 01:47 | you may need to create an intermediate AIR
package, which has a file extension of AIRI,
| | 01:53 | and then send a package to the person who actually
is in charge of applying the digital certificates.
| | 01:59 | I'll click OK to indicate that I'm ready to create the AIR file
| | 02:03 | and then I'll click the button Create AIR File.
| | 02:06 | After just a few moments, you should get a confirmation
message indicating that the operation succeeded.
| | 02:11 | If you have any problems, check to make sure that you entered the password correctly
and also make sure that the certificate is in the location you indicated.
| | 02:19 | Click OK
| | 02:21 | and you should see the file HellofromDreamweaver.AIR
created and displayed in the Files panel.
| | 02:28 | Now to do the installation, follow the same steps as
before. I'll double click on HellofromDreamweaver.AIR,
| | 02:35 | I'll be presented with the Application Install dialog.
| | 02:38 | Now if you have any problems at this point, it may be an issue of the
Adobe integrated runtime version that's installed on your computer.
| | 02:45 | I'm assuming that the runtime is already been
installed before I tried this operation.
| | 02:50 | And if you see this screen, then you should be in good shape.
| | 02:53 | I'll click the Install button.
| | 02:55 | I'll select my installation preferences and click Continue to install the file.
| | 03:01 | Once the application is installed, it starts up automatically.
| | 03:05 | I'll close the application,
| | 03:06 | close Dreamweaver,
| | 03:08 | and I should now see the HellofromDreamweaver icon appear on my desktop.
| | 03:13 | I'll double-click it to run the application again,
| | 03:15 | confirming that the application is been correctly installed.
| | 03:19 | I'll close the application
| | 03:21 | and now I'll uninstall it exactly as I have with previous applications.
| | 03:25 | If you're working on Windows, open the Windows start menu
| | 03:28 | and go to the Control Panel.
| | 03:30 | If you're working on Vista, select Uninstall a program and if
you are working on Windows XP, select Add or remove programs.
| | 03:37 | If you're working on a Mac, it's a lot easier. You just go to
the Applications folder, to the location of the installed
| | 03:43 | application and delete it.
| | 03:45 | I'll click Uninstall program,
| | 03:47 | navigate to the application HellofromDreamweaver,
| | 03:50 | and double-click to uninstall and confirm.
| | 03:54 | And the application is removed from my system.
| | 03:57 | So that's how you packaged application from within Dreamweaver CS3.
| | 04:01 | The steps are pretty much the same is with the SDK or with Flex Builder
and you can follow all the steps from right there inside Dreamweaver.
| | Collapse this transcript |
| Programming with JavaScript| 00:00 | In this video I am going to describe how to integrate
JavaScript programming into your applications built from HTML.
| | 00:07 | The steps I'm going to describe work whether you
work with Dreamweaver or with the software developers kit.
| | 00:12 | You can execute any JavaScript that would normally
be handled by a browser within your applications.
| | 00:17 | In addition, there are some pre-built JavaScript libraries
that are a part of the software developers kit that you
| | 00:23 | can use to implement particular bits of functionality.
| | 00:26 | Dreamweaver improves that development experience by being
able to recognize the objects that are a part of those
| | 00:32 | JavaScript libraries and providing good code
coloring, code completion and other tools.
| | 00:38 | For this demonstration I am going to create
a brand-new site in Dreamweaver CS3.
| | 00:43 | From the menu select Site, New Site.
| | 00:46 | Name the site, AIRWithJavaScript
| | 00:51 | and place it in a new local root folder.
| | 00:54 | Place the new folder in the AIR Essential Training.HTML folder
| | 00:58 | and name the new folder, AIRWithJavaScript.
| | 01:04 | After creating the folder,
| | 01:06 | click Select
| | 01:07 | and then click OK.
| | 01:10 | Next create a brand new HTML page.
| | 01:13 | Save the HTML page in the news site's root folder and name it default.HTML
| | 01:19 | and click Save.
| | 01:21 | Then go into Design view.
| | 01:23 | Press Control + 1 to add an h1 tag set and type in
heading for the application of AIR with JavaScript,
| | 01:31 | and press Enter.
| | 01:33 | Now go back to Code view.
| | 01:35 | Place the cursor inside the head section of the application.
| | 01:39 | Any JavaScript code that you write should typically be placed within script tags
| | 01:43 | that are defined within the head section of the HTML page.
| | 01:46 | Alternatively, you can create JavaScript functions in separate external
JavaScript files with the .JS extension and link them in with script tags.
| | 01:55 | I'm going to create a script tag set here
| | 01:58 | and I'm going to set its type to text/JavaScript.
| | 02:03 | And then creating an ending script tag.
| | 02:06 | Within the script tag you can define as many functions as you need.
| | 02:09 | The syntax for declaring a function in JavaScript is the same is in the browser.
| | 02:13 | You put in the word function and then the name of your function.
| | 02:17 | I'm going to create a function called to sayHello.
| | 02:21 | Now, if you're coming from a Flex development
background working with ActionScript 3,
| | 02:25 | there are a couple things that aren't in
JavaScript that you do use an ActionScript 3.
| | 02:29 | In ActionScript 3 for instance, you always put in access modifier
before the word function such as public, private, protected or internal.
| | 02:36 | You don't do that in JavaScript. And after the function
name in ActionScript 3, you typically declare a data type
| | 02:43 | that will be returned. In JavaScript that's not required.
| | 02:46 | Other than that, the syntax of the two languages is very similar.
| | 02:50 | Within my custom function sayHello,
| | 02:52 | I'm going to call commonly used method of the Window object
named alert. The window.alert method takes a simple string.
| | 03:03 | I'll type in the string "Hello from AIR,"
| | 03:06 | and then I'll go down to the body of the HTML page and inside the
paragraph tags that have been created when I was in Design view,
| | 03:13 | I'll remove the nonbreaking space.
| | 03:16 | Then I'll create an input tag.
| | 03:19 | I'll set its type to button and the value, which is the value
that's displayed on the face of the button, to "Click Me."
| | 03:27 | Next I'll add an onClick event handler.
| | 03:30 | Again, if you're coming from Flex, this a little different than programming in
that environment. In MXML you would put in an event handler named simply click.
| | 03:39 | In JavaScript, it's onClick.
| | 03:41 | Now we'll call my custom function, sayHello. Make sure to
include the opening and closing parentheses at the end.
| | 03:48 | I'll put in the closing greater than symbol and Dreamweaver adds the extra slash
at the end to make the tag compatible with the XHTML architecture of the state.
| | 03:58 | I'll save the change,
| | 03:59 | and now I'm ready to test it in AIR.
| | 04:02 | I'll go to the Site menu.
| | 04:05 | From there I'll select AIR Application Settings.
| | 04:09 | I'll set the ID to com.Lynda.AIRWithJavaScript, then click
Browse to set the initial content and select default.HTML.
| | 04:20 | Those were all the settings I need.
| | 04:22 | Now I'll preview the application,
| | 04:25 | and when the application appears, I'll click the button,
| | 04:29 | and there's the resulting dialog box produced by the alert method.
| | 04:33 | So that's the simplest sort of JavaScript code.
| | 04:36 | I'll close the application and return to Dreamweaver and then click Save.
| | 04:41 | Now in next video I'll describe how to use some of the
JavaScript library functionality that's included with the software
| | 04:47 | developers kit and integrate that functionality
into applications that you build in Dreamweaver.
| | Collapse this transcript |
| Integrating JavaScript Libraries| 00:00 | In this video I'm going to describe how to integrate some of the
JavaScript functionality that's a part of the software developers kit.
| | 00:07 | If you're following along with these exercises, you must have
first downloaded the softer developers kit from Adobe and
| | 00:13 | installed the Dreamweaver extension for Adobe AIR.
| | 00:15 | I'll be demonstrating this in the AIRWithJavaScript
site that I created in the previous video.
| | 00:20 | First of all, the actual JavaScript files that we'll be
using are part of the SDK, the software developers kit.
| | 00:27 | When you downloaded the SDK, it was an archive, a ZIP file,
which you then simply unpacked somewhere on your system.
| | 00:33 | I have opened the folder AIR SDK in which I
extracted the software developers kit files
| | 00:38 | and from there I'll drill down to the Frameworks subfolder.
| | 00:42 | There are three JavaScript files included in the Frameworks,
including AIR Aliases, AIR Introspecter and AIR SourceViewer.
| | 00:51 | I'm going to demonstrate functionality that's a part of the AIR Aliases.JS file.
| | 00:56 | I'll select the file and copy it to the clipboard.
| | 00:59 | Then I'm going navigate back to the AIR Essential Training folder.
| | 01:04 | From there down to HTML,
| | 01:06 | and then into the AIRWithJavaScript folder in which I'm creating the application.
| | 01:11 | And I'll paste the file into the location then
I'll close the window and return to Dreamweaver.
| | 01:16 | Over in Dreamweaver, I'll click the Refresh button to show that the file is there.
| | 01:21 | Now to integrate the functionality of this JavaScript file
into the application, I'll return to the file default.HTML,
| | 01:28 | which is my application's initial content.
| | 01:31 | Then within the head element of the file,
| | 01:33 | I'll add a script tag and I'll set its SRC attribute
| | 01:38 | to the location of the JavaScript library I want to include.
| | 01:42 | I'll also set the type property to text/JavaScript
| | 01:48 | and then I'll be sure to put in the closing script tag
to make sure that the elements are well formed.
| | 01:53 | The AIR Alias's library creates a set of aliases that allow
you to easily access common functionality in the AIR libraries.
| | 02:01 | I demonstrated one aspect of this in an earlier video
when I used the AIR object and called the trace method.
| | 02:07 | Now in this application I am going to use other features of the AIR object.
| | 02:12 | I'm going to create another button down here.
| | 02:17 | I'll declare it as an input control with a type of button.
| | 02:21 | A value of "Click to Navigate,"
| | 02:25 | and an onClick event handler that calls a custom function
I'm about to create called navigateNow. Next I'll go up to the
| | 02:34 | script section where I'm creating my functions. I'll press the F4 key
to expand to full screen so we can see as much code as possible.
| | 02:41 | And then I'll add in the function and I'll name it navigateNow.
| | 02:48 | Within the function, I'm going to call a
method of the AIR object called navigateToURL.
| | 02:55 | Notice that as I type in the name of the method, Dreamweaver
is helping auto-complete the code. It's also providing
| | 03:03 | really great color coding, so I can see exactly what
the structure of the code is that I'm putting in.
| | 03:08 | The purpose of the navigateToURL method is to
cause navigation to a website of your choice.
| | 03:15 | It takes as its one required argument a request,
which is an instance of an object called URLRequest.
| | 03:22 | You create the URLRequest object using this syntax, new AIR.URLRequest.
| | 03:30 | And then within parentheses pass in the location that you
want to navigate to. I'm going to put in http://www.adobe.com
| | 03:42 | and then put in two closing parentheses. The first to close
the constructor method call for the URLRequest object,
| | 03:49 | and the second to close to navigate URL method.
| | 03:52 | I'll save my changes and now we're ready to test the application.
| | 03:57 | If I try to run this application in a standard web browser, it
won't work because the AIR object is, referred to with line 15,
| | 04:04 | is only available when you're running within the runtime.
| | 04:08 | So I'll go up to the menu and select Site,
| | 04:11 | AIR Application Settings.
| | 04:14 | I set the ID of the application already in the
previous video to com.lynda.AIRWithJavaScript,
| | 04:20 | andI have already set the initial content to the default.HTML file.
| | 04:24 | I also need to make sure that I include all of the files that
are part of the application. This includes the JavaScript
| | 04:31 | library that I copied into the folder,
so I'll go down to the included files,
| | 04:36 | click the plus button and double-click on
AIR Aliases.JS to add it to the application.
| | 04:43 | Now I'm ready to preview and test.
| | 04:46 | I'll click the Preview button.
| | 04:48 | The application pops up.
| | 04:50 | I'll click the Click to navigate button
| | 04:53 | and the URL that I requested opens in a web browser.
| | 04:57 | So that's just a very small part of the functionality that's
available in the Adobe integrated run-time JavaScript libraries.
| | 05:03 | There's extensive documentation for all the tricks and tools
that are available in these libraries, but the tools are
| | 05:09 | extensive and detailed and there's no replacement for going through the
documentation when you need to learn how you use a particular feature.
| | Collapse this transcript |
|
|
5. Creating AIR Applications in Flash CS3Installing the AIR extension for Flash| 00:00 | In this chapter of the video series I'm going to describe how to
create and deploy AIR applications using Flash CS3 Professional.
| | 00:07 | If you want to follow along with these exercises
| | 00:10 | you'll need to have installed Flash CS3 on your system,
| | 00:13 | either on a Windows or Mac platform.
| | 00:15 | To get started, first you need to make sure did you have the
most recent version of Flash CS3 Professional, version 9.0.2.
| | 00:23 | If you're not sure whether your system is upgraded,
| | 00:25 | you can go to the Flash menu to the
Help menu and from there select Updates.
| | 00:30 | Flash will scan the Adobe website and make sure that it has all recent updates.
| | 00:35 | Alternatively, you can go over to the Adobe website to this URL,
| | 00:39 | www.adobe.com/support/Flash/downloads.html.
| | 00:48 | On this page you'll find a downloadable copy
of the update for both Windows and the Mac.
| | 00:53 | To install the update in this fashion, download the update for
your operating system and then make sure that you've closed
| | 00:59 | Flash and any browser windows before you run the update.
| | 01:03 | Once you've upgraded your copy of Flash CS3 Professional to 9.0.2,
| | 01:07 | you'll be ready for the next installation step.
| | 01:11 | I've already downloaded the Flash CS3 AIR extension application.
| | 01:15 | This is another application updater so once again before you run it,
you must have closed Flash CS3 Professional and any browser windows.
| | 01:23 | To install the update on Windows, just
double-click on it and follow through the prompts.
| | 01:27 | The same thing is true on the Mac; just follow
through the prompts until the installation is complete.
| | 01:32 | From this screen, the Adobe Software Update dialog and click Next.
| | 01:37 | And after a few moments the patch will have been installed.
| | 01:40 | Once the patch has been completely installed,
you can re-open Flash CS3 Professional.
| | 01:46 | And here's what to look for to make
sure that the update happened correctly.
| | 01:50 | On the initial welcome screen, you'll now see a link
that allows you to create a Flash file for Adobe AIR.
| | 01:57 | You'll also find items under the Commands menu for AIR
Application and Installer Settings and creating an AIR file.
| | 02:03 | So if you follow the steps, and you have your copy of Flash ready to go,
| | 02:08 | you can go onto the next set of videos and learn how to create
Flash-based content and package it as an Adobe AIR application.
| | Collapse this transcript |
| Creating an AIR application in Flash CS3| 00:00 | In this video, I'm going to describe how to create an AIR
application from scratch using Flash CS3 Professional.
| | 00:06 | If you're following along these exercises, you must have
first updated your copy of Flash to version 9.0.2 and
| | 00:12 | installed the AIR updater for Flash.
| | 00:15 | If all this is been done correctly on the Flash welcome screen
under Create New, you'll see a link labeled Flash File (Adobe AIR).
| | 00:22 | To get started, click that link to create a new file.
| | 00:26 | You'll see an informational dialog box that tells you that when you test
your movie in Flash you'll actually be running it in the AIR environment.
| | 00:33 | Click OK to clear this dialogue,
| | 00:35 | and then save your new Flash file.
| | 00:37 | Select File, Save As,
| | 00:40 | navigate to a folder in which you'd like to save it and give it a name of HelloWorld.FLA.
| | 00:45 | I'm placing the file in the Flash folder within
my exercise files area, AIR Essential Training,
| | 00:52 | and then clicking Save.
| | 00:54 | Here are some critical settings that get set up when you first create this file.
| | 00:58 | Go to the menu and select File, Publish Settings
| | 01:02 | and then within the Publish Settings dialog, click on Flash.
| | 01:06 | You find that the version is set to Adobe AIR 1.0.
| | 01:10 | This is an application that specifically targets the Adobe integrated runtime
| | 01:14 | and is not designed to run on top of the Flash Player. Also
notice that the ActionScript version is said to ActionScript 3.0
| | 01:20 | and a selector for the ActionScript version is disabled.
| | 01:23 | This is because applications running on AIR must use
ActionScript 3 and can't use previous versions of the language.
| | 01:30 | Click OK to close the dialog and now we're ready to add some content.
| | 01:34 | Go to the layers and add two new layers.
| | 01:40 | Name the bottom layer Labels,
| | 01:44 | name the second layer Animation and name the top layer Actions.
| | 01:51 | Now go to the Labels layer.
| | 01:54 | Click the Text tool in the toolbar
| | 01:57 | and then click and drag a text field across the top of your application.
| | 02:02 | Position the text field around the center,
| | 02:04 | set its properties to Arial, with the size of 36. Nice and large.
| | 02:10 | And then set the text in the text field to "Hello from AIR!"
| | 02:15 | If your text comes out in a slightly different color, no problem.
| | 02:19 | Now select the Selection tool,
| | 02:21 | click anywhere on the Stage and go down to the Properties panel.
| | 02:25 | Click the Background color picker
| | 02:27 | and choose a nice color that you like.
| | 02:30 | Go back to the layer's presentation, to the Animation layer.
| | 02:34 | Right-click and select Lock Others.
| | 02:37 | We're about to add content to this layer and we
want to make sure it goes into the right layer.
| | 02:42 | Now we're going to add a very simple animation to the application.
| | 02:46 | Go over to the toolbar and click the Oval tool. If you don't
see the Oval tool, click and hold on the rectangle or whichever
| | 02:53 | tool appears in this position, and then select the Oval tool.
| | 02:56 | And then move down to the bottom of the application.
| | 03:00 | Hold down the Shift key to make sure that you're adding a perfect
circle and then click and drag to place the object on the screen.
| | 03:07 | Use the Selection tool and double-click the object,
| | 03:10 | then right-click and select Convert to Symbol.
| | 03:13 | This will take the drawing that we just created
| | 03:15 | and change it into a symbol in the library.
| | 03:17 | In the Convert to Symbol dialog box set the
symbol type to Graphic and name this grBall.
| | 03:25 | And click OK.
| | 03:26 | Next, go up to the Timeline,
| | 03:28 | place your cursor in Frame 24, right-click and select Insert Keyframe.
| | 03:33 | Then go down to the Stage area
| | 03:36 | and hold down the Shift key and click and drag the ball to
the right side of the Stage, until it's just off the Stage.
| | 03:44 | In the first keyframe, the ball should be on the left. In
the last keyframe, it should be all the way off the Stage.
| | 03:51 | Then click into the center of the Timeline, between the two keyframes.
| | 03:54 | Go down to the Properties panel,
| | 03:56 | open the Tween selector and choose Motion.
| | 03:59 | And that will create a very simple animation.
| | 04:02 | Go back up to the Timeline.
| | 04:04 | Go to frame 24 of the Labels layer,
| | 04:07 | right-click and select Insert Frame.
| | 04:09 | This extends that layer out to the end of the Timeline so that the
label will be visible throughout the running of the application.
| | 04:15 | So that's your very simple Hello World application in Flash.
| | 04:19 | Test the application by pressing Control + Enter
| | 04:22 | and you should see the application present the label and you
should see the animation run across the bottom of the screen.
| | 04:28 | Now this is obviously the simplest possible Flash application,
| | 04:32 | but in next video, I'm going to say how to take a fairly
complex Flash application that incorporates video and sound
| | 04:39 | and show you how to take existing content and
convert it into an AIR application very easily.
| | Collapse this transcript |
| Converting existing Flash content to AIR| 00:00 | In this video, I'm going to describe how convert existing
Flash content to an AIR application in Flash CS3 Professional.
| | 00:07 | To demonstrate this, I'm going to use an application from Adobe Systems.
| | 00:11 | It's been a popular application over the last number of years that's
used to demonstrate some of the advanced capabilities of Flash Player.
| | 00:18 | it's called the Flash Video Gallery.
| | 00:20 | And there's a version for ActionScript 3 that you can download
from the Adobe website. Its current location is this URL,
| | 00:27 | www.adobe.com/devnet/Flash/articles/video_gallery.html.
| | 00:38 | This article contains a complete description of how the
video application is built and at the bottom of the article,
| | 00:44 | there's a link from which you can download the sample files.
| | 00:47 | The name of the ZIP file. You'll download is AS3_Flash_video_gallery.ZIP.
| | 00:54 | Now for any reason you can't find this file to a search on the
Adobe website or on Google for Flash Video Gallery ActionScript 3.
| | 01:03 | It is critical that any content that you decide
you want to convert for AIR must use ActionScript 3.
| | 01:09 | Older Flash content that uses ActionScript 1 or 2 will not be convertible
and less you import the code and make it all ActionScript 3 compatible.
| | 01:17 | I'm going to demonstrate this by unpacking this ZIP file and
placing the contents in a folder within my exercise files directory.
| | 01:25 | I'll right click on the ZIP file
| | 01:27 | and select Extract All.
| | 01:29 | And then I'll browse to my exercise files area,
| | 01:32 | which is under the C drive, under AIR Essential Training,
| | 01:35 | and I'll place this under Flash.
| | 01:38 | Within the Flash folder, I'll create a new folder called VideoGallery.
| | 01:43 | Then I'll select that folder and click OK.
| | 01:46 | So the location on Windows will be C:\AIREssentialTraining\Flash\VideoGallery.
| | 01:54 | If you're working on a Mac, place the files in any folder you like and
I recommend putting them somewhere in your exercise files area.
| | 02:01 | I'll click Extract to finish the extraction.
| | 02:04 | It will take a few seconds because they're quite a few files here,
including some video files that we'll be presenting in the application.
| | 02:11 | Then within the folder, I'll navigate down to the contents
| | 02:15 | and I'll double-click on the file FlashVideoGallery.FLA
to open the source file for this application.
| | 02:21 | Here's what the application does. Before I convert it to AIR, I'll run it.
| | 02:25 | Press Control + Enter and run the application,
| | 02:29 | and you'll see that this is a highly interactive application.
| | 02:32 | As the user moves the cursor over each of the cells,
| | 02:35 | a video starts playing.
| | 02:37 | And then when you click to select a video it
actually plays in the preview screen on the right.
| | 02:42 | So I'll click another one, show that video, click another and so on.
| | 02:46 | So here's how you convert a Flash document to AIR.
| | 02:49 | From the menu, select File,
| | 02:52 | Publish Settings.
| | 02:53 | Then go to the Flash tab of the Publish Settings dialog and
change the version from Flash Player 9 to Adobe AIR 1.0.
| | 03:02 | As I mentioned in the previous video, at this point
the ActionScript version selector will become disabled.
| | 03:07 | Is it because you can't write code in ActionScript 2 and port it to AIR.
| | 03:12 | I'll click OK to save the change.
| | 03:14 | Next I'll go into the application descriptor for this application.
| | 03:18 | To get into the application descriptor properties,
| | 03:21 | go to the Menu and select Commands,
| | 03:23 | AIR - Application and Installer Settings.
| | 03:26 | It takes a few moments because a publication
process has to happen in the background.
| | 03:31 | If you see any prompts asking if you want
to override existing content, click Yes.
| | 03:36 | Once the AIR - Application and Installer Settings dialog appears,
you can make any changes to the way you want to present your content.
| | 03:43 | For instance, the default ID is com.adobe.example.FlashVideoGallery.
| | 03:48 | This is a application that was built by Adobe
Systems, I'm going to keep that ID in place.
| | 03:53 | Also if there is any content that you want to include in the application,
| | 03:57 | add the files at the bottom of the dialog.
| | 03:59 | Click OK to save your changes,
| | 04:01 | and now to run this Flash document as
an AIR application press Control + Enter.
| | 04:07 | And the application is now running in the AIR runtime.
| | 04:10 | Notice that I can once again move the cursor over each
of the cells, select an item and I'll be able to see the video
| | 04:16 | appear in the screen on the right.
| | 04:19 | None of the functionality has been disturbed in any way.
| | 04:22 | The point here is that what ever you know
how to do in Flash, you know how to do in AIR,
| | 04:26 | because every component in the Flash environment
works under the Adobe integrated runtime.
| | 04:31 | But there's an added features that are also available
to you, just like there are for HTML and Flex developers.
| | 04:37 | You'll be able to take advantage of all the ActionScript
libraries that allow you to read and write to local system
| | 04:43 | files, save data locally in the embedded database and
control your Flash environment using all of the AIR APIs.
| | Collapse this transcript |
| Deploying an AIR application from Flash| 00:00 | In this video I'm going to describe how to deploy
an AIR application from within Flash CS3 Professional.
| | 00:06 | In previous videos I showed you how to
create an application from scratch,
| | 00:10 | and how to convert existing content to AIR.
| | 00:12 | Now I'm going to create the installer package,
| | 00:15 | using the features of the updater for AIR that we installed previously.
| | 00:19 | The first step is to open the Flash document
that you want to deploy as an AIR application.
| | 00:24 | Then from the Flash menu, select Commands,
| | 00:27 | AIR - Application and Installer Settings,
| | 00:29 | and set the file name, the name and the ID.
| | 00:32 | As before, I'm using a unique identifier of com.lynda.HelloWorld.
| | 00:37 | By default, you might see, com.adobe.examples.HelloWorld.
| | 00:41 | If it's your own application, you should change
the prefix to reflect your organization name.
| | 00:46 | Down below, you can select a custom application descriptor file.
| | 00:50 | If you've already created an application descriptor
file manually, you can simply choose it from here.
| | 00:55 | Next set your digital signature.
| | 00:58 | Click the Change button,
| | 00:59 | and then if you already have a digital certificate, select it.
| | 01:02 | Otherwise, click the Create button.
| | 01:04 | In this version of the Create dialog, you must fill in all
values, including the publisher name, the organization unit
| | 01:11 | and the organization name, so I'll fill these values in. I'm going
to be a little bit lazy and fill in the same values three times.
| | 01:19 | And then I'll set the certificate password by typing it in twice.
| | 01:24 | And then I'll browse for the location
where I want to create the certificate.
| | 01:27 | I'll navigate to the exercise files location,
which on Windows is under C:/AIREssentialTraining.
| | 01:34 | From there, to the Flash folder where I'm creating the application,
| | 01:37 | and then I'll click OK.
| | 01:38 | Then I'll click OK to create the certificate.
| | 01:42 | After a moment I get the confirmation that the certificate has been created.
| | 01:46 | I'll click OK and return back to the digital signature dialog.
| | 01:50 | Now I'll enter the password again.
| | 01:53 | Click OK,
| | 01:55 | and then click the Publish AIR File to create my installer.
| | 01:59 | You should now get a confirmation that the AIR file has been created.
| | 02:02 | Click OK
| | 02:03 | and click OK again.
| | 02:05 | Now, the AIR file will been created in the same
folder in which the Flash document was created.
| | 02:10 | So I'll navigate once again to the location of my exercise files.
| | 02:14 | From there to the Flash folder,
| | 02:16 | and there's my HelloWorld.AIR file.
| | 02:19 | I'll double-click to install it.
| | 02:21 | This process should look pretty familiar now; it's
the same as happened with this software developers kit,
| | 02:26 | with Dreamweaver and with Flex.
| | 02:28 | I'll click Install and set my installation preferences
| | 02:31 | and click Continue to install the application.
| | 02:34 | The application runs automatically upon completing the installation.
| | 02:38 | I'll close the application,
| | 02:40 | Close all windows.
| | 02:42 | Close Flash.
| | 02:45 | I'll then come back to the desktop.
| | 02:47 | Notice that when you create a new AIR file using Flash,
application icons are provided automatically. I'll describe
| | 02:54 | how to modify or select other icons in a later chapter.
| | 02:57 | I'll run the application from the desktop, showing
once again that the installation was successful.
| | 03:03 | I'll close the application
| | 03:04 | and then following steps that I've followed before, I'll
uninstall the application. On Windows, I'll go to the Control Panel.
| | 03:11 | On Vista, I'll select Uninstall program.
| | 03:14 | If you're working on XP, select Add or remove programs.
| | 03:17 | Then locate the HelloWorld application and double-click to uninstall.
| | 03:21 | If you're working on the Mac, simply navigate to the Applications folder.
| | 03:26 | Find your HelloWorld folder and move it to the trash.
| | 03:29 | So you can see how easy it is to take Flash content,
package it and set up for installation as an AIR application.
| | 03:36 | This will be a cross-platform AIR application, like all
the others, running easily on either Windows or on the Mac,
| | 03:43 | and you can build into that application whatever features
you know how to build using your skills in Adobe Flash.
| | Collapse this transcript |
|
|
6. Setting Application PropertiesUnderstanding the application descriptor file| 00:00 | In this chapter of the video series, I'm going to describe
some of the details of the application descriptor file,
| | 00:06 | the file that sets properties for the ADL, the debug launcher, and the ADT,
the developer tool, that are use to test and package your AIR applications
| | 00:14 | regardless of whether you're working with the software developers
kit, Flex Builder, Flash CS3 Professional or Dreamweaver CS3,
| | 00:22 | you'll start off with the default application descriptor file.
| | 00:25 | The version I'm displaying on the screen
right now comes from the Samples folder
| | 00:29 | and represents a completed application
descriptor file with various settings.
| | 00:34 | In this video, I'm going to show you four different versions of
the file and then I'll talk about some of the key properties,
| | 00:40 | and then later videos I'll get into some of the other details.
| | 00:43 | This version of the file, as I said, is a completed
example and it comes with the software developers kit.
| | 00:48 | The next version of the file HelloWorldApp.XML came from Flash CS3 Professional.
| | 00:53 | Notice that the namespace in this version of the file has a suffix of .M6.
| | 00:59 | That would indicate that the AIR application is generated with this
file requires the Beta 3 version of the Adobe integrated runtime.
| | 01:06 | If for instance I wanted to upgrade this application
and make it require the final public release of AIR 1.0,
| | 01:12 | I would change the namespace by removing the .M6 from the end.
| | 01:16 | I'll leave that alone for compatibility with the current version
of the Flash CS3 updater that I'm using and recording this video.
| | 01:22 | Notice that there are a lot of commonalities between
the version with the SDK and the version with Flash.
| | 01:27 | You always, for instance, set an ID element,
the unique identifier for the application,
| | 01:32 | and you always set a version and a filename.
| | 01:35 | The description and copyright, however, can be left out,
| | 01:37 | and in the Flash version of the file are simply left blank.
| | 01:40 | The Flash version of the file sets icon values.
| | 01:44 | These are the names of graphic files that are used in
different circumstance to visually represent the application.
| | 01:49 | For instance, one version is used as a desktop
icon, one is used in system trays and so on.
| | 01:54 | Here is the version of the file that is created
in Dreamweaver. It is probably the most concise.
| | 01:59 | It has a file name, a custom update UI, an ID and a version. Notice
that it doesn't include a title element in the initial window element.
| | 02:06 | That's because when you're working in HTML,
| | 02:08 | the title of the initial window is taken from the title element in HTML.
| | 02:13 | And finally here's the version of the file that's built in Flex Builder.
| | 02:16 | When you create a new AIR application using Flex Builder,
| | 02:19 | you get a completed file with all the optional elements commented out.
| | 02:24 | It's up to you to go through and uncomment the elements
that you want to use and fill in their values.
| | 02:29 | So it doesn't really matter how you create the application
descriptor. It always has the same basic structure but some of
| | 02:35 | the rules are slightly different depending on whether you're
building your AIR application in Flex Builder, Flash CS3,
| | 02:47 | Dreamweaver or with the software developers kit.
| | 02:49 | In the next couple of videos, I'm going to take a look at a couple of specific
properties in the application descriptor file and describe how to use them.
| | Collapse this transcript |
| Setting basic application properties| 00:00 | In this video, I'm going to describe some of the basic properties
that you set to control application dimensions and position.
| | 00:06 | I'll also talk about the namespace setting and show how
it affects running an application from within one of the
| | 00:11 | development tools versus running it from
the command line with the software developers kit.
| | 00:16 | I'll be working with the application I
created in Dreamweaver in an earlier chapter.
| | 00:20 | I'll open the file default.HTML in Design view
| | 00:23 | and show you that it contains a simple h1
tag with some text and a couple of buttons.
| | 00:28 | The buttons, respectively,
| | 00:30 | use a little bit of generic JavaScript to show an alert window
| | 00:34 | and then use the AIR Alias to navigate to a URL in a browser.
| | 00:38 | If I run the application from within Dreamweaver, it looks like this.
| | 00:41 | I'll go to the Site menu,
| | 00:43 | to AIR Application Settings,
| | 00:46 | and then preview the application.
| | 00:49 | I'll click the Click Me button to show the
dialog box produced by the alert method
| | 00:53 | and then click Navigate to open a browser and navigate to website.
| | 00:59 | OK, let's take a look at the application descriptor file.
| | 01:02 | In Dreamweaver, there's a dialog box that you can use to set many
but not all of the properties in the application descriptor file.
| | 01:08 | For example, if I set the application dimensions, the width
and height, using this dialog box. I'm just changing the
| | 01:15 | contents of the application descriptor file.
| | 01:17 | So as an experiment, I'm going to set this to a width of 300 and a height of 200.
| | 01:23 | Then I'll preview the application to see what it looks like.
| | 01:26 | It's a little smaller than before. Then I'll click Save.
| | 01:29 | Then up come back and open the application .XML file
| | 01:33 | to show that all Dreamweaver is done is to modify the XML file for me.
| | 01:37 | Now when you're working in Dreamweaver, one of the things you'll run into is that
you can either be working in the application.XML file open in the workspace,
| | 01:44 | Or you can go into the application settings
dialog, but you can't do both at the same time.
| | 01:49 | If you try to, for instance, I'll go to the Site menu
| | 01:52 | and select AIR Application Settings,
| | 01:54 | and I'll get this error message.
| | 01:56 | "Please close the application.XML document before running this command."
| | 02:00 | So you can either edit the file manually
| | 02:03 | or you can go through the Application Settings
dialog but you can't do both at the same time.
| | 02:08 | If you want to work in the application descriptor file manually,
| | 02:11 | you can then try keeping it open in Dreamweaver and then
using the command line tools to launch an test your application.
| | 02:18 | One of the advantages you get out of this is debugging. When you have debugging tracing statements for instance and
| | 02:24 | you run the application from the command line, you'll get the tracing statements on the command line.
| | 02:29 | So that's what I'll try this time. I'll manually change the height and width to 400 and 600,
| | 02:35 | and I'm also going to change the namespace of the application.
| | 02:38 | The version of the default namespace when it's generated with
the current version of Dreamweaver and beta has the .M6 extension.
| | 02:45 | I'll remove that value to make this application compatible with the
final release version, which is what I'm running on the command line.
| | 02:53 | Then I'll come to the command line
| | 02:54 | and I'll type ADL application.XML.
| | 02:59 | Run the application and you'll see it's much larger than before.
| | 03:03 | Now I'm going to change the application title.
| | 03:05 | I'll close the application,
| | 03:07 | come back to Dreamweaver,
| | 03:09 | go to the HTML file,
| | 03:12 | locate the title element,
| | 03:14 | and I'll change it to "Hello World from Dreamweaver,"
| | 03:20 | save the change,
| | 03:22 | switch back to the command line,
| | 03:25 | and run the application again from the command line, and there's my title.
| | 03:29 | So you can see that certain properties get set in the application code
itself and certain properties get set in the application descriptor.
| | 03:36 | There's another set of properties you can set easily in the application
descriptor file. The X and the Y properties of the initial window.
| | 03:44 | Now the version of the file that's created in
Dreamweaver doesn't contain these properties,
| | 03:49 | and if at any point your not sure what the names of the properties
are in, you don't have Dreamweaver help you fill them in,
| | 03:54 | you can go back to the sample version that comes
with the SDK. So I'm going to go re-open that file,
| | 04:00 | is called descriptor-sample.XML,
| | 04:03 | and then I'll scroll down to the initial window,
| | 04:05 | and show that there are X and Y properties being set right here.
| | 04:09 | I'll copy those to the clipboard,
| | 04:11 | come back to the application.XML file,
| | 04:13 | and then paste them in.
| | 04:18 | To show the behavior the X and Y properties,
I'll set them to values of zero.
| | 04:23 | I'll save the changes,
| | 04:24 | come back to the command line,
| | 04:26 | and run the application again.
| | 04:28 | And notice that the application appears in the
upper left-hand corner of the Windows interface.
| | 04:33 | I'll close the application,
| | 04:35 | come back to the descriptor file, and change these values
to 300 pixels each, which means position the window
| | 04:42 | 300 pixels from the top of the screen and
300 pixels from the left, save the change,
| | 04:47 | come back, run the application,
| | 04:49 | and now the application appears in that position.
| | 04:51 | See, you can set the application's position
easily using the X and Y properties.
| | 04:56 | I'll close the application, come on back to Dreamweaver and so on.
| | 05:00 | So as you set each of these properties, you can either run the
application from right within Dreamweaver or you can run
| | 05:05 | it from the command line using the softwood
developer's toolkit command line tools.
| | 05:09 | My preference is to switch back and forth and run from the command line
| | 05:13 | because of the additional debugging capability
that you get with the command line tools.
| | Collapse this transcript |
| Using application icons| 00:00 | In this video I'm going to describe the use of custom icons
that you associate with your AIR application when you create
| | 00:06 | the installer for the application.
| | 00:08 | Each AIR application supports four icons of different sizes.
| | 00:12 | There are samples of these icons included with the AIR software developers kit.
| | 00:17 | If you've installed the AIR SDK and you'd like to take a
look at the sample graphics, go to the SDK's Samples folder.
| | 00:24 | From there, go to the Icons subfolder
| | 00:26 | and you'll find four files of different sizes.
| | 00:29 | When you build an AIR installer, you can specify
four different icons used in different circumstances.
| | 00:34 | The smallest icon, for instance, is presented in the upper
left corner of the application as its control menu icon.
| | 00:41 | Other sizes are used in different circumstances.
For instance, if you create a desktop shortcut or alias,
| | 00:46 | the 48 pixel version is used in that circumstance.
| | 00:50 | If you want to create your own custom icons
you can create them in any graphic application.
| | 00:55 | Ideally you should set them up as PNG or TIF files with transparency
so that they show up correctly against the background
| | 01:01 | of an operating system screen.
| | 01:03 | Now I've created my own set of custom icons to show you how this works.
| | 01:07 | If you go to the exercise files folder, in my case, C:\AIREssentialTraining,
| | 01:13 | and from there go down to the Assets folder,
| | 01:15 | you'll find an Icon subfolder there.
| | 01:18 | Open that, and you'll find four files.
| | 01:21 | Each of them designed as the perfect icon for a HelloWorld application.
| | 01:25 | You can tell immediately that I'm not a graphic designer-
this definitely qualifies as programmer art -
| | 01:30 | but these files will suffice to show you how this works.
| | 01:33 | I created these files in Adobe Fireworks CS3.
| | 01:37 | So if you have that product, you can open them up there.
| | 01:39 | But I want to make the point that these icon graphics can be
created in any graphic application with which you're comfortable.
| | 01:45 | Now to use the icons I'm going to copy them
to the clipboard. I'll take the whole folder,
| | 01:51 | and copy it,
| | 01:52 | and then I'm going over to Flex Builder.
| | 01:55 | The Icon Architect works exactly the same for any AIR application,
| | 01:59 | regardless of what he build the application
Flex, Dreamweaver, Flash or with the SDK.
| | 02:04 | You and the icons to your folders assets,
| | 02:07 | and then you go into the application descriptor XML
file and describe the files that you want to use.
| | 02:13 | I'm going to paste the files into the source root of my application.
| | 02:17 | Notice that with Flex Builder you can copy and paste between
the operating system and the Flex Navigator view quite easily.
| | 02:23 | And then I'll open up the application descriptor file.
| | 02:26 | The name of the file is HellofromFlexAndAIR-app.XML.
| | 02:31 | And then I'll scroll down for the bottom of the file.
| | 02:34 | Notice that in this version of the application descriptor file,
| | 02:37 | there's an icon element that's been commented out.
| | 02:40 | The first step to using the icons is remove the comments,
| | 02:44 | and then fill in the elements for each size graphic.
| | 02:48 | To make sure I to get this right, I'll go over
to the Icons folder in the Flex Navigator view,
| | 02:53 | and then for each of the items I'm going to carefully
typing the name of the files in each location.
| | 03:00 | I going to put in the directory name "icons" in each
case, and then the name of the file, HelloWorld16x16.PNG.
| | 03:08 | I'll copy that one.
| | 03:12 | And then paste it in and change the measurements for each one.
| | 03:21 | The second one is for the 32 pixel dimensioned icon,
| | 03:25 | for the next one for the 48,
| | 03:29 | and the last one for the largest version, that's 128 pixels square.
| | 03:37 | I'll save the changes and then re-build the AIR application install.
| | 03:41 | I already have an AIR file that I created previously.
| | 03:44 | So I'll delete it.
| | 03:47 | And then from within Flex Builder, I'll create my AIR installer
by going to the Project menu and selecting Export Release Build.
| | 03:54 | I'll go through the steps including selecting a
security certificate and entering the password.
| | 04:01 | Then on the next screen I'll indicate which
files I need to include in the exported AIR file.
| | 04:05 | Notice that now I have to include the icon files
| | 04:08 | and Flex Builder does this automatically for me.
| | 04:12 | I'll click Finish,
| | 04:13 | and after just a moment my new AIR file is created.
| | 04:16 | I'll double-click it to install it in the operating system.
| | 04:20 | I'll walk through the install process
| | 04:23 | and as soon as the installation is complete,
the application opens on the screen.
| | 04:28 | Notice that my icon is now displayed as part of the application interface.
| | 04:32 | I'll close the application,
| | 04:34 | go back to the desktop and show that a larger version
of the icon is included in the desktop shortcut.
| | 04:40 | Now I'll uninstall the application,
| | 04:43 | in Windows, I'll go to the Control Panel.
| | 04:45 | Select Uninstall a program or Add or remove programs in Windows XP,
| | 04:50 | navigate to the HelloFromFlexAndAIR application and once
again, there's the icon displayed in the uninstall list.
| | 04:57 | I'll double-click to uninstall, click the Uninstall link, and I'm done.
| | 05:01 | So that's how the custom logos work. You can create them in
any graphic application you like and you designate which
| | 05:07 | logos you want use is using the application descriptor file.
| | 05:11 | There is a user interface for selecting these
files in both Dreamweaver and Flash CS3.
| | 05:17 | If you're working in Flex Builder or using the software developers kit, you'll
need to make the changes to the application descriptor file manually,
| | 05:24 | but no matter whether you use the developer tools or
make changes to the application descriptor file yourself,
| | 05:29 | the underlying architecture for how you select the icons is always the same.
| | Collapse this transcript |
|
|
7. Working with PDF DocumentsUnderstanding AIR and Acrobat PDF fundamentals| 00:00 | In this chapter of the video series, I'm going to describe how
to display Acrobat PDF documents inside your AIR applications.
| | 00:07 | Regardless of whether you build your applications using Flex, Flash or
HTML, you're able to create an instance of an object called HTMLLoader.
| | 00:16 | The purpose of the HTMLLoader control is to load HTML
content but it can also load Acrobat PDF content as well.
| | 00:23 | The HTMLoader control is used in its raw form in
both HTML and Flash and can be called a nested control
| | 00:30 | within another control called HTML, which
makes it a little bit easier to use in Flex.
| | 00:35 | One important thing to know about working with PDF in AIR,
| | 00:39 | is that the Adobe integrated runtime
doesn't actually include the Acrobat Reader.
| | 00:43 | Instead, it depends on the version of the Acrobat
Reader that's installed on the client's system already.
| | 00:48 | This makes things a little bit different
than working with Flash-based content or HTML,
| | 00:53 | because the Adobe integrated runtime includes both the
Flash Player and a web browser kernel you can always display
| | 00:59 | that kind of content in a matter what's going on on the client
system. But the Acrobat Reader is significantly larger and
| | 01:05 | so the runtime depends on the Readers. It's already
installed on the client system to do its thing.
| | 01:10 | Specifically the user system must have Acrobat Reader or
Professional version 8.1 or higher already installed in order
| | 01:17 | to successfully display PDF-based content.
| | 01:20 | You can programmatically determine whether the right version
of the Reader is already installed, and I'll show you how to do that
| | 01:26 | in the next few videos, and then once you decided it's OK
to present content, you can use code either ActionScript or
| | 01:32 | JavaScript, to create the instance of the
HTMLLoader and present it on the screen.
| | 01:39 | If the user has the right version of Acrobat Reader, here is what you can do.
| | 01:43 | You can display the PDF document, in which case you'll get
standard Acrobat Reader controls, such as paging controls,
| | 01:49 | zooming controls and print buttons.
| | 01:52 | You'll be in a programmatically control the behavior of the Acrobat document
| | 01:55 | and you'll be able to use embedded Acrobat forms.
| | 01:58 | The extent which the Acrobat forms will work successfully will depend on
whether you load the Acrobat document from the local disk or from the Internet.
| | 02:08 | In order to display in Acrobat document you'll use
a different approach for each development platform.
| | 02:13 | If you're working in Flex, you have two possible approaches.
One is to create an instance of a class called HTMLLoader and
| | 02:19 | then load up the content using that class and then present it.
| | 02:22 | The HTMLLoader class is directly extended from the Sprite
class and because it doesn't implement the interface known
| | 02:29 | as IUI component, you can't directly add an instance of the
HTMLLoader class to a Flex container such as the application.
| | 02:36 | So to make things a little bit easier,
| | 02:38 | there's a control and Flex called mx:HTML. This is the same
control that I demonstrated in an earlier video when I showed
| | 02:45 | how to load basic HTML content in an AIR application. Just
like standard HTML, you set the HTML control's location property
| | 02:52 | to the location of your PDF document
and you'll successfully load the content.
| | 02:57 | If you build your application in HTML, once again you can
use the HTMLLoader class instantiated in JavaScript or
| | 03:04 | you can use an HTML tag called object. You typically use the
object tag, a declarative approach, if you're really sure that
| | 03:11 | the local system has Acrobat Reader 8.1 or higher.
| | 03:15 | The reasons to use the HTMLLoader class is because you can
instantiate it in code and wrap that code inside a conditional
| | 03:21 | section that first checks to see whether the
right version of the Reader is installed.
| | 03:26 | If you're working in Flash CS3 Professional,
you once again use the HTMLLoader class.
| | 03:31 | In the next three videos are surely how to display
Acrobat PDF content using Flex, HTML and Flash.
| | 03:38 | I'll first show you how to detect PDF capability, that is whether
the appropriate version of the Acrobat Reader is installed locally,
| | 03:45 | and then I'll show you how to actually display the content
on the screen using any of these development environments.
| | 03:51 | In the follow-up series to this essential training, I'll
show you did how to exert programmatic control over Adobe
| | 03:57 | Acrobat content, paging, zooming, printing and so on,
using the development platform of your choice.
| | Collapse this transcript |
| Displaying PDF documents with Flex| 00:00 | In this video I'm going to describe how to display an
Acrobat PDF document in an AIR application built with Flex.
| | 00:07 | I'll be creating this project from scratch using just an
existing PDF document that's in the exercise files folder.
| | 00:14 | If you follow along in the exercises, open Flex Builder and
close any existing projects that you might have open.
| | 00:20 | Then create a new Flex project. From the menu, select File,
| | 00:24 | New, Flex Project.
| | 00:27 | Name the project PDFReader.
| | 00:30 | Accept the default location underneath your current workspace
| | 00:34 | and set the application type to Desktop application (runs in Adobe AIR)
| | 00:38 | and click Finish.
| | 00:41 | Next, go to the exercise files directory and locate the PDF document.
| | 00:46 | I'll navigate to the AIR Essential Training folder on my C drive
| | 00:50 | and from there I'll go down to the assets
folder and I'll locate the agenda.pdf file.
| | 00:56 | I'll copy that to the clipboard,
| | 00:58 | go back to Flex Builder,
| | 01:01 | and then paste that document into the source root of the project.
| | 01:07 | There are two classes that you can use to present
Acrobat PDF documents within an AIR application in Flex.
| | 01:13 | These classes are named HTMLLoader and HTML.
| | 01:16 | The HTMLLoader class is extended from the sprite class, not from UI
component, so you can't simply add it to the Stage of a Flex application.
| | 01:25 | Instead, to use HTMLLoader, you have to first wrap it inside
your own class that extends UI component and then and only
| | 01:32 | then can you add it to the Stage.
| | 01:34 | For convenience, the Flex class library includes a component called HTML.
| | 01:38 | The HTML component I'm going to use is the same one that
I demonstrated in a previous video when I showed you how to
| | 01:44 | display HTML content within a Flex application.
| | 01:47 | You can declare the HTML component in pure ActionScript like this.
| | 01:51 | I'll put in a MX:HTML component, I'll give it an ID of myPDF
and then I'll set its location property to the location of
| | 02:00 | the PDF document I want to display.
| | 02:03 | If you want to display PDF document that's downloaded from a website,
put the absolute URL of the location of the document right here.
| | 02:11 | If on the other hand, the PDF document is local, that is
stored in the same local directory as the application itself,
| | 02:17 | you can use a special URL that looks like this- app:/
| | 02:21 | This is a pointer to the application's
installation directory and the user's local system.
| | 02:28 | And then put in the name of the file that you want to display.
| | 02:31 | I'll put in agenda.pd.
| | 02:33 | The HTML component is just like any other visual control
in Flex. You can add width and height properties.
| | 02:40 | I'll set those to 100% each.
| | 02:44 | And you can control its position in the same way you do any other control.
| | 02:48 | For the moment, though, that's all I need.
| | 02:50 | Above the HTML control, I'm also going add a label
control. I'll set its text property to PDFReader,
| | 02:57 | and I'll send its font size to 18 pixels. Before I run
the application, I'm going to set the application's layout
| | 03:05 | property to vertical so that the label and the
HTML component will stack on top of each other.
| | 03:10 | And in the resulting application you'll see the label at the
top displaying the text PDFReader and you'll see the HTML
| | 03:16 | component below displaying the PDF content.
| | 03:19 | Notice that as I resize the browser that the embedded Reader is
resizing automatically and the PDF document is resizing as well.
| | 03:27 | Also notice that at the top of the PDF interface, you get the
standard Acrobat Reader toolbar including the ability to print,
| | 03:34 | save, e-mail, page forward and back, zoom, pan and so on.
| | 03:40 | So everything you're able to do in Reader, you're able to do here.
| | 03:44 | So that's one approach. You can simply declare the HTML
component. On the other hand, there are times when you have to
| | 03:50 | first check to see whether the user has the ability to display
the PDF document. And in next video, I'll show you how to
| | 03:56 | programmatically detect whether the user has the
right version of the Acrobat Reader installed,
| | 04:00 | and then how to instantiate the HTML component
programmatically and place it on the Stage.
| | Collapse this transcript |
| Detecting PDF capability with Flex| 00:00 | In this video, I'm going to describe how to detect whether
a user system has Acrobat PDF capability. That is, whether
| | 00:07 | it has the right version of the Acrobat Reader before
you try to present Acrobat content in the AIR application.
| | 00:13 | To accomplish this, you use a property of the HTML
and HTMLLoader components called PDF capability.
| | 00:20 | The value of this property can be compared to constants
which are members of another class called HTML PDF capability.
| | 00:27 | To demonstrate this I'll work in the same application as before, PDFReade.MXML.
| | 00:32 | I'll start by commenting out the existing HTML component.
| | 00:36 | I'll select the MXML tag that's implementing the HTML component
then from the menu I'll select Source, Toggle Block Comment.
| | 00:45 | Next I'll add a script section.
| | 00:48 | Within the script section I'll create a new private function called initApp,
| | 00:53 | returning void and then I'll go up to the start tag of the windowed
application components and add a creationComplete event handler,
| | 01:02 | in which I'll call the new function initApp.
| | 01:08 | I'm double-clicking on the tab to expand the editor to full
screen. As the application starts up, I want to detect whether
| | 01:15 | the user is going to be able to display the PDF content correctly.
| | 01:19 | I'll add the if clause and use this evaluation:
| | 01:23 | if HTML...
| | 01:25 | now before I continue typing, I'm going to press Control + space
and select the HTML class from the list of available classes.
| | 01:31 | This causes Flex Builder to add in an import statement for that class.
| | 01:35 | Then I'll continue with the code, .pdfCapability.
| | 01:40 | This is a static property so you can call the property directly
from the class rather than from an instance of the class.
| | 01:46 | Then I'll put in the equivalence operator.
| | 01:49 | And I'll compare that values to HTMLPDFCapability.Status_OK.
| | 01:56 | These are the five possible values.
| | 01:58 | Error_cannot_load_reader means that the Reader couldn't be loaded for whatever reason,
| | 02:02 | and the other values indicate that the Reader either wasn't
installed at all, or that it is installed, but it's too old.
| | 02:09 | I'm looking for the value of Status_OK, so I'll complete
the conditional clause and then put in a pair of braces.
| | 02:16 | Within the braces I'll create an instance of the HTML component.
| | 02:20 | I usually like to declare this kind of component outside of
any functions, so I'll place the cursor outside the initApp function,
| | 02:27 | below the import statement,
| | 02:28 | and add a declaration of private var myPDF,
type as an instance of the HTML object.
| | 02:36 | And then within the conditional block I'll instantiate the
object using the HTML classes, no arguments constructor method.
| | 02:44 | Next I'll set some of its properties.
| | 02:47 | As with the XML version, you indicate what
you want to load with the location property.
| | 02:52 | And just as before you can use at app:/ to indicate that
you're loading a document locally. So I'll copy and paste
| | 03:01 | the existing string app:/agenda.pdf and put it in
the new declaration in the ActionScript section.
| | 03:08 | Next I'll set the component's width and height.
| | 03:11 | When you set percentage width and height dimensions using
ActionScript, you have to use properties called percentWidth
| | 03:17 | and percentHeight, which are set to numeric values.
So I'll do it that way, I'll say myPDF.percentHeight equals 100,
| | 03:26 | and myPDF.percentWidth equals 100.
| | 03:30 | I've constructed the object, I set its location, and I've
set its dimensions. Now it's time to add it to the Stage.
| | 03:36 | I'll use the syntax this.addChild, which can be used to add any
visual component to the Stage and I'll pass in the object myPDF.
| | 03:45 | Notice that the application is executing this function upon
application startup, so as the application starts up, it first
| | 03:51 | checks to see whether the user will be able to correctly display
the PDF document and then it constructs the object and displays it.
| | 03:58 | After the if statement I'll add an else condition, in which
we won't see executed on the system because I do have Adobe
| | 03:58 | Acrobat Reader installed. And I'll use the alert class.
| | 04:07 | I'll type in alert and press Control + space, and select the alert class
| | 04:11 | and then use its show method to show an error indicating
that the user won't people to display the PDF document.
| | 04:18 | I'll use a message of "Can't display PDF content."
| | 04:23 | And in the alert.Show method's second argument I'll just pass in a
simple string "error" to show up in the title of the dialog box.
| | 04:31 | That's it. Now for testing.
| | 04:33 | I'll save the file
| | 04:35 | and then run it from the toolbar by clicking the Run button.
| | 04:40 | And as the application starts up, once again it first checks
to make sure that the Reader can be loaded correctly
| | 04:45 | and then it displays the content.
| | 04:47 | So these are the two approaches for displaying Acrobat content in Flex.
| | 04:51 | You can either use a simple MXML declaration or you can create the object
programmatically and first check to make sure that the user has PDF capability.
| | 05:00 | Also remembered the other class, the HTMLLoader, which I won't
demonstrate here but can also be used when wrapped inside
| | 05:07 | your own classes that implement the UI component interface.
| | Collapse this transcript |
| Displaying PDF documents with HTML| 00:00 | In this video I'm going to describe how to display an
Acrobat PDF document in an AIR application built in HTML.
| | 00:07 | You can use an ActionScript class called HTMLLoader and you
can also use an HTML object tag. I'm going to use the object
| | 00:13 | tag in this approach because it's a little bit simpler.
| | 00:16 | I'll be creating the application from scratch and I'll use the same PDF
document I did in the previous video showing how to do this with Flex.
| | 00:23 | In Dreamweaver select Site, New Site.
| | 00:28 | Set the name of the site to PDFReader,
| | 00:31 | and then click to browse.
| | 00:33 | Navigate to the exercise files folder,
where ever you installed it on your system.
| | 00:37 | I'll go to C:/AIR Essential Training.
| | 00:41 | From there, go to the HTML folder.
| | 00:43 | Then once you're in that folder create a new folder and name it PDFReader.
| | 00:49 | Select that folder and then click Select.
| | 00:52 | Then from the Site Definition dialog box, click OK.
| | 00:56 | Next create a brand-new HTML document.
| | 00:59 | Under the Create New heading on the Dreamweaver welcome screen, click HTML,
| | 01:04 | and save that document as PDFReader.HTML.
| | 01:10 | Then create your application descriptor file.
| | 01:13 | Go to the menu and select Site,
| | 01:15 | AIR Application Settings,
| | 01:17 | click the Browse button next to Initial Content.
| | 01:20 | Select your HTML file,
| | 01:23 | and click Save.
| | 01:25 | So that's your beginning HTML file.
| | 01:27 | Next I'm going to go get the PDF document that I want to include in this project.
| | 01:31 | I'll go to my exercise files folder.
| | 01:34 | If you're following along just go to which ever
folder you installed the exercise files in.
| | 01:38 | Go to the Assets folder,
| | 01:41 | select the file agenda.pdf, and copy it to the clipboard.
| | 01:46 | Go back up a folder to the AIR Essential Training and down to HTML,
| | 01:51 | from there to PDF Reader,
| | 01:53 | and paste the document into place.
| | 01:56 | Close Windows Explorer or Finder on the Mac
| | 01:59 | and return to Dreamweaver.
| | 02:02 | Over in the Files panel, you may need to click the Refresh
button to see that the PDF document is now in your site.
| | 02:08 | Here is the simplest possible code to display a PDF document
inside an application built in HTML. Place the cursor
| | 02:16 | between the body tags and put in an object tag.
Add to the object tag a data property
| | 02:23 | and set it to the PDF file. Just as with the application built
with Flex, if you want to load a document from the local
| | 02:29 | disk where the document is stored in the same folder
in which the application lives, use the protocol app:/
| | 02:37 | and then put in the name of the document.
| | 02:41 | Also add width and height properties of 100% each. This will
cause the PDF document to expand to fill the application.
| | 02:48 | Then close the object tag by putting in a slash and a greater than symbol.
| | 02:53 | Go to the title element within the head section
of the document and change it to PDF Reader.
| | 02:59 | Save your changes.
| | 03:01 | Now you're ready to test.
| | 03:03 | In Dreamweaver, go to the menu and select Site,
| | 03:06 | AIR Application Settings,
| | 03:08 | and click the Preview button.
| | 03:11 | The application should load up and should display the PDF document.
| | 03:15 | If you have any problems with this, check that your
system has Acrobat Reader 8.1 or higher installed.
| | 03:21 | Now, just as with Flex, it's possible to programmatically detect
whether the user has the right version of Acrobat Reader installed
| | 03:27 | and then to instantiate this object programmatically.
| | 03:31 | Before you can do this, you need to go get the file AIR Aliases.JS
from the software developers kit and make it a part of this application.
| | 03:39 | Here's how I'll do that.
| | 03:41 | First of all, I'll navigate to the folder
where I installed the software developers kit.
| | 03:45 | On my system, it's under C:\AIRSDK. You'll
go to whichever folder you installed it in.
| | 03:52 | From there go to the frameworks folder where there are three JavaScript files.
| | 03:56 | The one we need in our application is AIR Aliases.JS.
| | 04:00 | I'm going to select and copy that file to the clipboard.
| | 04:04 | Then I'll navigate back to my exercise files folder, AIR Essential Training.
| | 04:09 | From there to the HTML folder,
| | 04:12 | and from there into my new PDFReader folder,
| | 04:15 | and I'll paste the file into the folder.
| | 04:18 | Now close Windows Explorer or Finder, if you're on the Mac
| | 04:22 | and return to Dreamweaver.
| | 04:23 | In Dreamweaver you may need to click the
Refresh button to cause the new file to show up.
| | 04:29 | Now I'm going to link to AIR Aliases.JS file into the application.
| | 04:33 | Place the cursor inside the head section of
the HTML document and put in a script element.
| | 04:40 | Add in an SRC attribute.
| | 04:42 | I'll then press Enter or Return to browse,
| | 04:46 | and select AIR Aliases.JS by clicking,
| | 04:49 | and then clicking OK.
| | 04:51 | Also be sure to add the type attribute
and set it to a value of textJavaScript.
| | 04:57 | Close a tag with the greater than symbol,
| | 04:59 | and then be sure to put in the end tag for the script.
| | 05:03 | That results in linking in the JavaScript library into the application.
| | 05:07 | Now in order to detect whether you have PDF capability,
| | 05:11 | put in another script tag. Once again set the type to text/JavaScript
and a couple lines further down putting an end tag.
| | 05:22 | We're going to put in some JavaScript code that won't be inside
a function so it will execute as the application starts up.
| | 05:28 | Place the cursor inside the script tags and typing if (.
| | 05:33 | In HTML -based applications in AIR, all the components that
we refer to directly in ActionScript code are exposed as
| | 05:40 | aliases that are members of the AIR object. So to refer to the HTMLLoader
class, which is going to tells whether the user has PDF capability,
| | 05:49 | thee expression looks like this: air.HTMLLoader.
| | 05:54 | And then type in another dot and you'll see that the HTMLLoader
class has a bunch of properties that Dreamweaver knows about
| | 06:01 | and I'm going to select PDFCapability.
| | 06:04 | If you work through the previous video with Flex, this will
look very familiar. The only real difference is that the
| | 06:09 | HTMLLoader class is prefixed with the AIR object,
which is an alias. Now putting the double equals.
| | 06:17 | And I'll move down a line so it's easier to see on the screen.
| | 06:20 | And I'm going to compare that value to air.HTMLPDFCapability.Status_OK.
| | 06:30 | The version of Dreamweaver I'm working in doesn't know
about that class, but that's OK. I know that it's there and
| | 06:36 | it's in the AIR aliases file. So this all worked fine.
| | 06:39 | After the if clause add a pair of braces and then within the if clause,
we're going to use a standard JavaScript command document,
| | 06:48 | document.write to add the object to the application.
| | 06:51 | Put in the code document.write('');.
| | 07:02 | Now go down to the line that has the object
declaration at the bottom of the application,
| | 07:08 | select that line of code,
| | 07:10 | cut it to the clipboard.
| | 07:12 | I'm going to right-click or Control-click on the Mac and select Cut.
| | 07:17 | Then place the cursor inside the single quote's, inside the document.write command,
| | 07:22 | and paste the code into place.
| | 07:25 | So now we're dynamically writing content to
the HTML presentation as the application starts up.
| | 07:32 | After the if clause, add an else clause.
| | 07:34 | The syntax is else and then a beginning and ending brace, and then type in the command window.alert
| | 07:42 | and type in an error message of "PDF content can't be loaded."
Notice how I'm nesting the various quotes. I used single quotes
| | 07:52 | in the document.write command because the expression I wanted
to write has double quotes and in the window.alert command,
| | 07:58 | I am wrapping double quotes around the string that has a single quote.
In JavaScript you can change double quotes and single quotes as needed
| | 08:04 | as long as everything's nested properly.
| | 08:07 | This couple execute automatically upon application startup,
because that's the nature of how JavaScript executes code
| | 08:14 | that's outside of any functions.
| | 08:16 | To test, I'll go to the menu and select Site,
| | 08:20 | AIR Application Settings,
| | 08:22 | and once again click Preview.
| | 08:24 | The application loads up and displays the Acrobat PDF content.
| | 08:29 | So that's how you display PDF content in an HTML-based application.
| | 08:33 | The simplest approach is to use the object tag with the data
property and you can either declare it directly within
| | 08:39 | your HTML body content or you can dynamically write
it to the screen using the document.write command.
| | 08:45 | As with the other development platforms, the HTMLLoader object has
the PDF capability property and the HTML PDFCapability class has
| | 08:53 | constants that you can use to compare it to, to find out
whether the user has the right version of the Acrobat Reader to
| | 08:58 | do what you want to do: displaying the Acrobat PDF content.
| | Collapse this transcript |
| Displaying PDF documents with Flash| 00:00 | In this video, and I'm going to show how to display an
Acrobat PDF file in an AIR application built in Flash CS3.
| | 00:07 | As in the previous two videos, where I showed how to accomplish
this task using either Flex or HTML, I'll show you how to both
| | 00:15 | display the PDF document and also how to check to see whether
the user has the right version of the Acrobat Reader installed.
| | 00:22 | I'll be creating this document from scratch and placing it
under the Flash folder under the exercise files area.
| | 00:29 | To get started, navigate to the exercise files folder.
I've placed it in C:\AIR Essential Training or
| | 00:35 | if you're working on a Mac, locate the folder where you installed it.
| | 00:39 | And navigate down to the Assets folder.
| | 00:42 | Locate and copy the agenda.pdf document to the clipboard.
| | 00:47 | Then return back to the exercise files folder,
| | 00:50 | go down to the Flash folder and paste it,
| | 00:55 | and then returned to Flash CS3.
| | 00:59 | Next create a brand new Flash file for Adobe AIR.
| | 01:02 | You can do this from the welcome screen, just click the link.
| | 01:06 | If you see this informational dialog, click OK to clear it
| | 01:10 | and then save the file.
| | 01:12 | I'll select File, Save As.
| | 01:15 | Make sure you're in your Flash folder underneath the exercise
files area and name the new document to PDFReader.FLA.
| | 01:25 | Next, set up your application descriptor settings.
| | 01:29 | Go to the menu and select Commands,
| | 01:32 | AIR Application and Installer Settings,
| | 01:35 | and click OK.
| | 01:37 | Now we're going to be using classes from the AIR libraries.
| | 01:41 | There's a file called playerglobal.SWF that's a
part of the Flash updater installation for AIR.
| | 01:48 | Before you get started doing any programming, you should check to make sure
that your documents class path includes the folder that contains that file.
| | 01:56 | To check this and set it if necessary, go to the menu and select File,
| | 02:01 | Publish Settings.
| | 02:03 | Click on the Flash tab,
| | 02:06 | and then right next to the ActionScript
version selector, click the Settings button.
| | 02:11 | In the Classpath section, this value may already be set up,
but if you don't see an item pointing to a classes directory,
| | 02:18 | under an ActionScript 3.0 for AIR 1. 0 folder,
| | 02:22 | click the Browse button for the classpath,
| | 02:25 | and then navigate first to your Flash installation directory.
| | 02:29 | On Windows, the default location is C:\Program Files, Adobe, Adobe Flash CS3.
| | 02:39 | On the Mac it'll be under the Applications folder,
| | 02:42 | under Adobe and then again, Adobe Flash CS3.
| | 02:46 | From the Installation folder, navigate down to the EN folder.
| | 02:50 | From there to Configuration,
| | 02:52 | and to ActionScript 3.0 AIR 1. 0,
| | 02:57 | and from there to the Classes folder.
Click to select the Classes folder.
| | 03:02 | Click OK,
| | 03:03 | and click OK again.
| | 03:06 | This brings you back to the Publish Settings.
| | 03:08 | Click OK one more time,
| | 03:10 | and now you're ready to do a little bit of
ActionScript programming using the AIR Libraries.
| | 03:15 | Go to the default layer, double-click on it
and change the name of the layer to Actions.
| | 03:22 | Then click into the first frame of that layer
| | 03:25 | and from the menu select Window, Actions,
| | 03:29 | or press the F9 keyboard shortcut.
| | 03:32 | In order to display an Acrobat PDF document in Flash, you use a class
called HTMLLoader, which is a member of a package called Flash.html.
| | 03:42 | This class is part of the AIR API libraries and the reason
you had to go check the classpath was to make sure that
| | 03:49 | the SWIK file or component library for AIR
is a part of this document's classpath.
| | 03:55 | You also have to explicitly import the class
that displays the Acrobat PDF content.
| | 04:00 | To do this, type in an import statement,
| | 04:03 | and then put in Flash.HTML.HTMLLoader.
| | 04:11 | Next create a new instance of the HTMLLoader class. First declare a variable,
| | 04:17 | name it PDF,
| | 04:18 | and datatype it as an instance of the HTMLLoader class,
| | 04:22 | and then instantiate the class using the syntax = new HTMLLoader.
| | 04:30 | You're calling the HTMLLoader class's no argument
constructor method to create an instance of the class.
| | 04:36 | Next you need to create an instance of another class called URLRequest.
| | 04:41 | The URLRequest class is designed to wrap a URL
and it verifies that the URL is well formed.
| | 04:48 | To create the URLRequest class declare another variable.
Name it request and datatype it as URLRequest.
| | 04:57 | Construct it with this code: new URLRequest
| | 05:04 | and then inside the parentheses, type in a string
that indicates where the PDF document is.
| | 05:11 | As I described in the previous videos about accomplishing
this task with Flex and HTML, you can refer to a PDF document
| | 05:18 | that's in the same local folder as the
application itself with the prefix app:/.
| | 05:24 | This is an AIR-based protocol details the
application to look in the local disk.
| | 05:30 | Next, put in the name of the file agenda.pdf.
| | 05:35 | To load the document, use the load method of the HTMLLoader class.
| | 05:41 | I'll type in the syntax, PDF.load, and then pass in the request object.
| | 05:48 | Next set the HTMLLoader object's dimensions.
| | 05:52 | I'd like to set the object's dimensions to the same size as the Stage itself.
| | 05:57 | So I'll click the minimize icon on the Actions panel.
| | 06:01 | Then click on the Stage and check the dimensions.
| | 06:04 | Notice that the Stage dimensions are 550 pixels wide by 400 high.
| | 06:09 | So now I'll go back to the Actions panel,
| | 06:12 | and I'll set the HTMLLoader objects dimensions as follows.
| | 06:16 | I'll set the width to 550 and the height to 400. Finally,
I'll add the document to the Stage. I'll use the addChild method
| | 06:31 | and pass in PDF.
| | 06:33 | And that's all the code you need to display
the PDF document in the AIR application.
| | 06:39 | I'll close the Actions panel and save the document,
| | 06:43 | and then run the application. You can run the application
from the Control menu by selecting Test Movie.
| | 06:51 | As the application opens up, it loads the PDF document and displays it.
| | 06:56 | As with the other examples in this chapter, you'll see
that you have complete skinning of the PDF document.
| | 07:02 | You have controls to print, save, e-mail, page forward and back and essentially
navigate the Acrobat document just as you would using the Acrobat Reader.
| | 07:12 | Lets go back to the code and I'll show you how to accomplish the task of
checking to see whether the user has the right version of the Acrobat Reader.
| | 07:21 | Go to Window, Actions again.
| | 07:24 | And place the cursor after the import statement
and before the variable declaration for the HTMLLoader.
| | 07:31 | Change the import statement as follows. We're going to
be using another class from the Flash.HTML package.
| | 07:38 | So take out the HTMLLoader class and instead put in an *,
meaning that we want to be able to use any class from that package.
| | 07:46 | Then go down a couple lines to a blank line and type in an if statement.
| | 07:52 | Check the following.
| | 07:53 | if (HTMLLoader.PDFCapability == HTMLPDFCapability.Status_OK)
| | 08:09 | See you see that the code you use here is almost exactly the
same as the version in HTML. It's slightly different than
| | 08:16 | the version in Flex, because there I used an HTML object instead of an HTMLLoader.
| | 08:21 | Then I'll wrap all this code inside braces and this will ensure that the document
only shows up if the user has the right version of Acrobat on their system.
| | 08:32 | I'll close the Actions panel,
| | 08:34 | returned to the document and then test it again,
| | 08:37 | and you'll see that the PDF document once again does display correctly.
| | 08:42 | Finally, I'd like to show you one other thing that may have happened
in the background. I'm going to go back to the Publish Settings dialog.
| | 08:48 | I'll go to the menu and select File, Publish Settings,
| | 08:52 | go back to the ActionScript settings by clicking the
Settings button next to the ActionScript version selector,
| | 08:58 | and in the classpath, notice the location of my classes folder under
ActionScript 3.0 AIR 1.0 has been modified to show a variable of app config.
| | 09:10 | This value made shown up for you when you first
created the project and if so, it works out of the box,
| | 09:15 | but there are times when it isn't set up automatically right away
and later on if you have set up manually, Flash will go in and
| | 09:29 | change that value, the prefix before the ActionScript 3.0
AIR 1.0 folder, to the appropriate variable.
| | 09:30 | That's an expected behavior.
| | 09:32 | So now you know how to display a PDF document using either Flex,
HTML or Flash. The code styles are a little bit different
| | 09:41 | for each platform, but the end result is the same.
| | Collapse this transcript |
|
|
8. Creating Applications with TransparencyUsing application properties for transparency| 00:00 | In this chapter of the video series I'm going to describe
how to create transparent window applications in AIR.
| | 00:06 | A transparent window application, sometimes
known as a gadget or a widget application,
| | 00:11 | displays graphic elements that you create and supply in the application
but doesn't wrap the application inside operating system style windows.
| | 00:19 | Instead the background of the application is completely transparent,
allowing the rest of the windows of the operating system to show through.
| | 00:26 | This behavior is enabled through the AIR nativeWindow class.
| | 00:30 | All windows, including the initial window of the application,
| | 00:33 | are constructed as instances of this class.
| | 00:36 | The nativeWindow class has a couple properties
that you can set to support transparency.
| | 00:41 | There are two steps to turning on transparency for any particular window.
| | 00:45 | The first step is to indicate that you would
don't want use the operating systemChrome.
| | 00:50 | And then the second step is to turn transparency on.
| | 00:53 | For the application's initial window, these
options are set in the document descriptor file.
| | 00:58 | For additional windows that you might pop up during the
applications running, you can set these values programmatically
| | 01:04 | in ActionScript or JavaScript.
| | 01:07 | For the initial window, in order to set the values in the
document descriptor file, both Flash and Dreamweaver provide
| | 01:13 | a user interface where you can easily set up the transparency
options using the dialog box for the application settings.
| | 01:20 | If you're building AIR application using Flex Builder or the SDK,
you need to set these properties manually and I'll show
| | 01:26 | you how to do that in the Flex video.
| | 01:29 | Here are the requirements for the application itself.
| | 01:31 | For both Flash and HTML, once you turn off the operating system
chrome and set the windows transparent property to true,
| | 01:39 | the background of the application becomes transparent.
| | 01:42 | For HTML, if you set the HTML pages body element's
background image or color to some value, it'll show up.
| | 01:48 | For Flash, the application background always becomes
transparent and any color that you might set in Flash is ignored.
| | 01:55 | For Flex, there's an additional trick. Instead of using the windowed
application element as the root of your Flex application,
| | 02:00 | you instead use MX application.
| | 02:05 | The windowed application element always shows a certain amount of
application chrome, that is minimize/maximize buttons and so on,
| | 02:12 | where as the MX application element is
capable becoming completely transparent.
| | 02:17 | In addition, you'll set certain cascading style sheet properties
| | 02:21 | to ensure that there's no background
color or background image that shows up.
| | 02:25 | And then any graphical elements that you create will become
visible, but the rest of the window will be transparent,
| | 02:31 | allowing other windows in the operating system to show through.
| | 02:34 | Once you've created a new window this transparent, you've taken
away the chrome and the controls that typically allow
| | 02:41 | the user to move windows around the workspace.
| | 02:44 | And so if you want the user to be able to move the
application around, you have to program it.
| | 02:49 | This is done by candling an event called mouseDown.
| | 02:52 | The mouseDown event is the same regardless
of what you're working in Flex, Flash or HTML.
| | 02:57 | The syntax for handling the event will be different,
| | 03:00 | but in reaction to the mouseDown event you call a method called
startMove, which is a method of the current nativeWindow object.
| | 03:08 | That nativeWindow object is accessed through the current Stage.
Again the syntax will be slightly different for each platform,
| | 03:15 | but the basic idea is that you call this line of code
| | 03:19 | and you're telling the application that once the move operation
has been initiated, every time the user moves the mouse around,
| | 03:25 | without having lifted up the mouse button,
the application should move in reaction.
| | 03:30 | Once the user releases the mouse button, the move action is
terminated automatically. You don't have to execute any code
| | 03:37 | to stop that from happening.
| | 03:38 | And then each time the user presses down on the mouse or the mouse is
over the appropriate object, you'll be starting the move operation again.
| | 03:46 | In each of the next three videos I'll show you
how to implement this in Flex, HTML and then Flash.
| | 03:52 | And again you'll see that the coding is all pretty much the
same but the style is a little bit different and some of the
| | 03:59 | application requirements, especially in Flex are a little bit
different as well. The end result though will be the same.
| | 04:05 | An application that appears as a widget or a gadget on the desktop
without the standard window chrome that you see in
| | 04:11 | conventional Windows or Mac OS X applications.
| | Collapse this transcript |
| Creating transparent applications in Flex| 00:00 | In this video I'm going to describe how to convert a Flex application
written for AIR into an application that has an invisible background window.
| | 00:08 | I'll be using a finished application called the StockQuoter application.
| | 00:13 | This application is available in the exercise files,
in a project archive file called stockquoter.ZIP.
| | 00:20 | If you're following along in the exercises, go to Flex Builder 3.
| | 00:24 | Close any project you might have open,
| | 00:26 | and then from the menu, select File, Import, Flex Project.
| | 00:32 | In the Import Flex Project dialog box,
| | 00:35 | click the first Browse button next to Archive File
| | 00:38 | and then navigate to the Projects
folder under the exercise files area,
| | 00:43 | select the stockquoter.ZIP file and click Open.
| | 00:47 | In the Import Flex Project dialog, click Finish to import the project.
| | 00:52 | In the Flex Navigator view, open the project.
| | 00:55 | Open the source root,
| | 00:57 | and then double-click to open stockquoter.MXML.
| | 01:01 | This application uses the Yahoo Web
service to get current stock information.
| | 01:07 | Run the application to see its current behavior.
| | 01:10 | As the application opens the cursor ends up in a text input control.
| | 01:15 | You can type any stock symbol you want and
press Enter or click the Get Quote button,
| | 01:19 | and a Web service call goes out Yahoo to get the current
price of that stock and when data comes back from Yahoo,
| | 01:25 | it's displayed in a separate component.
| | 01:28 | Down at the bottom of the screen in the status bar,
if you type in the value that's not a valid stock item,
| | 01:34 | you'll see a message, "Symbol blah blah...",
or whatever symbol you typed in, "not found."
| | 01:39 | I'm not going to do full code review of this application. It is a fairly
conventional Flex application that uses an HTTP service component,
| | 01:47 | and also uses of a view state definition and a transition to
manage the presentation of the data results. The one thing that
| | 01:54 | makes it an AIR application specifically is the use of
the windowed application component as the application root.
| | 02:00 | Also there's an existing application
descriptor file named stockquoter-app.XML.
| | 02:06 | To convert this application to a transparent
window, there are a few steps to follow.
| | 02:11 | First open the application descriptor file stockquoter-app.XML.
| | 02:16 | Then double-click the tab at the top
of the editor to display full-screen
| | 02:20 | and scroll down to the initial window settings.
| | 02:23 | There are three properties that you have to set
to create an application with transparency for Flex.
| | 02:29 | First, the systemChrome.
| | 02:30 | The default for the systemChrome element is standard, meaning
that the application initial window displays the buttons
| | 02:38 | and gadgets for the current operating system, Windows or the Mac.
| | 02:41 | In order to remove the operating systemChrome,
| | 02:44 | remove the comments from around the system
chrome element and set it to a value of None.
| | 02:49 | Next set transparency.
| | 02:51 | Go down to the transparent element, remove the comments from around
the element and then within the transparent tags, type in true.
| | 03:00 | The transparent value can only be set to
true if systemChrome is set to None.
| | 03:05 | Finally you have to explicitly make the initial
window visible on application startup.
| | 03:10 | Go down to the visible element remove the comments and once
again, click between the tags and type in the value of true.
| | 03:20 | Save your changes.
| | 03:21 | Go back to the application source code and
click the Run button again to run the application.
| | 03:27 | And let's take a look of what's happened so far.
| | 03:29 | Notice that the look of the window is somewhat different.
Instead of the classic Windows Vista look and feel,
| | 03:35 | which was displaying before, I now have a much plainer look.
| | 03:38 | I don't have any transparency in the title bar,
which Windows Vista was providing before,
| | 03:43 | and the buttons over on the right are much simpler than before.
| | 03:47 | But I still don't have complete transparency.
| | 03:50 | Close the application and now we're going to make changes to
the application itself to implement the transparent window.
| | 03:57 | In order to implement transparency in a Flex application,
you need to switch from the windowed application
| | 04:02 | as the application root to the MX application root.
| | 04:06 | This is the traditional application root
that's used in Flex Web applications.
| | 04:11 | Go to the start tag and change from MX
windowed application to application,
| | 04:16 | and then scroll down to the bottom of the application
and make the same change in the end tag.
| | 04:21 | Save your changes.
| | 04:22 | Now, you'll notice that you end up with a
couple problem spots in the application code.
| | 04:27 | There are references to a property of
the application element named status.
| | 04:32 | This status property referred to the status bar within the
windowed application root element, but when we switched to
| | 04:38 | the application element the status property didn't exist anymore.
| | 04:42 | So in order to display the error message if a symbol isn't found,
| | 04:46 | go to about line 57, the line that starts with this.status=
| | 04:52 | and remove this.status=
| | 04:56 | and replace it with alert.show.
| | 04:59 | And then wrap the error message in parentheses.
| | 05:02 | Then go back to the alert class that you typed in, and to make
sure to Flex builder has added an import statement for
| | 05:08 | the alert class, press Control + space and then Enter or Return.
| | 05:14 | Scroll up to the top of the code and you should see that Flex
Builder has added in the import statement for MX.controls.alert.
| | 05:22 | There is one other reference to this.status. It's right here.
| | 05:26 | This is no longer needed, so I'll just comment it out,
| | 05:29 | and I'll save the application
| | 05:31 | and run it again.
| | 05:33 | This time the application shows up without any window chrome around
the edges, but I still see all the background of the application.
| | 05:40 | So I'll close the application on Windows. I'll pressed Alt + F4,
| | 05:44 | and if you're working on a Mac, press Command + Q.
| | 05:47 | Next you'll remove the background from the application.
| | 05:50 | Notice in this application there's a reference
to a file called styles.CSS at line 19 or so.
| | 05:56 | I'll go back to the Flex Navigator view
| | 05:59 | and open the file styles.CSS. Place the cursor after the comment
and type in a new selector for the application component.
| | 06:07 | Within the application component, set two properties.
First, background colors, which is set to a blank string
| | 06:17 | and then background image, which you also set to a blank string.
| | 06:20 | Save your changes,
| | 06:22 | go back to the application and run it again.
| | 06:25 | And now the application shows up without any background.
| | 06:27 | I'll click in and type a stock quote,
| | 06:30 | press Enter,
| | 06:31 | and there's the symbol showing up.
| | 06:33 | Now in the next video, and I'll show you how to add code
to allow the user to move the application around
| | 06:39 | by clicking some more on the application. You'll handle the mouseDown
event and execute a little bit of code to start the mouse move operations.
| | Collapse this transcript |
| Creating application movement in Flex| 00:00 | In this video I'm going to describe how to implement user
movement in an application that has transparent windows.
| | 00:07 | By user movement, I mean the ability for the user to click somewhere
in the application and move the application around the screen.
| | 00:14 | This capability, while it's there automatically when you use the
windowed application component, is gone when you take away the
| | 00:20 | operating systemChrome and make the rest of the application transparent.
| | 00:24 | There are two steps to the process.
| | 00:26 | First, for each component on which you want the user to be
able to click to move the application, you add an event listener
| | 00:32 | for the mouseDown event.
| | 00:34 | And then when that event occurs, call a method
of the nativeWindow object called startMove.
| | 00:40 | Whenever the user clicks on any visual
component that's listening for the event,
| | 00:44 | you'll then start the move operation.
| | 00:47 | As the user moves the mouse around the screen, the position
of the application will track with the mouse movement.
| | 00:52 | When the user releases the mouse button, the move
operation will be terminated and you don't have to add
| | 00:57 | any additional code to make that happen.
| | 01:00 | To start, go down to the stockquoter application
| | 01:04 | and place the cursor after any of the variable declarations.
| | 01:07 | Then create a new private function and name it mouseDownHandler.
| | 01:14 | Have the function receive an event object,
typed as a MouseEvent class and return void.
| | 01:22 | And then within the function, use this code to start a move operation.
| | 01:27 | this.Stage.nativeWindow.startMove. That's it, that's all you have to do.
| | 01:34 | Now to trigger this function,
| | 01:36 | I'll go to the two components that the user is able to see.
| | 01:40 | The HBox component that displays the entry inputs
and also the container that displays the results.
| | 01:46 | For each of the containers I'll add a mouseDown event listener
| | 01:50 | and call my function mouseDown handler
| | 01:52 | and pass the event object.
| | 01:54 | I'll go up to the view state declaration at the top of the application
and add the same code to the quote view component instance.
| | 02:01 | Once again, I'll put in the mouseDown event listener in MXML,
| | 02:06 | and I'll call my custom function and pass the event object.
| | 02:10 | Now to test it.
| | 02:11 | I'll run the application,
| | 02:14 | and now I can click on the application and move it
anywhere around on the screen. I'll type in a stock quote
| | 02:21 | and click the button or press Enter or Return.
| | 02:23 | And now that component also has the mouseDown handler and
so I can click on that visual component and move it around also.
| | 02:30 | Notice if I click anywhere else in the rectangular region
of the application, that the mouse click event goes through to
| | 02:36 | the underlying window, in this case Flex Builder.
| | 02:39 | So you only handling the mouseDown event on the visible objects,
not on the entire application, and as the user clicks on
| | 02:46 | any of those objects you're able to
move the application around as needed.
| | 02:51 | It's also possible to add any other visual components you need to
create the full user interface that you think your application requires.
| | 02:59 | Now in the next videos, I'll show you how to accomplish the same steps
using applications for AIR that are built in either HTML or Flash.
| | Collapse this transcript |
| Creating transparent applications in HTML| 00:00 | In this video I'm going to describe how to create in AIR
application in HTML that uses a transparent window.
| | 00:06 | I'll also show you how to allow the user
to drag the window across the screen,
| | 00:10 | after you've removed all the window chrome, the standard
gadgets and widgets that usually allows the user such actions.
| | 00:17 | I'm going to demonstrate this capability using an existing
applications that you'll find in the exercise files folder.
| | 00:23 | To get started, navigate to the exercise files folder.
From there go down to the Projects folder
| | 00:29 | and look for a ZIP file called stockquoter.HTML
| | 00:32 | Extract the contents of that file to the HTML
folder under the exercise files directory.
| | 00:38 | In Windows Vista I can do this with right-clicking on the ZIP file,
| | 00:42 | selecting Extract All,
| | 00:46 | and then navigating to the appropriate location
| | 00:49 | I'll select Computer,
| | 00:50 | C drive,
| | 00:53 | AIR Essential Training,
| | 00:55 | HTML,
| | 00:56 | and click OK.
| | 00:58 | If you're using WinZIP on Windows or you're using Mac OS X,
| | 01:02 | extract the files using whatever features you have available
| | 01:04 | and place the content of the file in the HTML
folder underneath the exercise files area.
| | 01:10 | I'll click Extract,
| | 01:12 | and in Windows Vista that results in opening the HTML folder.
| | 01:17 | I'll drill down into the StockQuoter folder that was created,
| | 01:20 | and you'll see that there are three files there.
| | 01:23 | The application itself stockquoter.HTML,
| | 01:26 | the application descriptor file, application.XML,
| | 01:29 | and the copy of the AIR Aliases file that
comes from the software developers kit.
| | 01:34 | Now I'll close whatever operating system windows
I still have open and return to Dreamweaver.
| | 01:40 | Next, create a site definition that points to this folder.
| | 01:43 | From the Dreamweaver menu and select Site, New Site.
| | 01:48 | Name the new site stockquoter,
| | 01:52 | and change the local root folder setting to the new stockquoter
folder under the HTML section of the exercise files.
| | 01:59 | From the exercise files folder, I'll drill down into HTML
| | 02:03 | and select the new StockQuoter folder
| | 02:05 | and then click Select.
| | 02:07 | And then I'll click OK to create the site.
| | 02:11 | Let's take a look at what the application does in its initial state.
| | 02:15 | I'll go to the Site menu,
| | 02:16 | to AIR Application Settings
| | 02:19 | and click the Preview button.
| | 02:21 | The application exercises the same sort of functionality
as the Flex application I demo'd in the last video.
| | 02:28 | The user can click into a text input control,
| | 02:31 | type in a stock quote symbol, click the button,
| | 02:34 | and get a response.
| | 02:35 | This version of the application uses the same Yahoo Web
service that it used in the previous Flex application.
| | 02:42 | It retrieves the content using a JavaScript
component called XML HTTP request.
| | 02:48 | It navigates to the site, retrieves the string and then in the
function that's defined as the on ready state change property
| | 02:55 | of this object, the date is parsed and presented to the user.
| | 03:00 | Now my goal is to give the application a transparent background
and then allow the user to easily drag it around the screen.
| | 03:07 | The first part is quite simple in Dreamweaver because the
Dreamweaver user interface for controlling the application
| | 03:13 | descriptor properties let's you make all
the required changes with one setting.
| | 03:18 | From the menu, go to the Site
| | 03:20 | AIR Application Settings,
| | 03:23 | and then take a look right around the middle of the dialog box for an item labeled Window Style.
| | 03:28 | There are three possible settings.
| | 03:30 | The default is systemChrome, meaning make the
application look like the native operating system.
| | 03:35 | Select Custom Chrome Transparent,
| | 03:38 | and then click Save.
| | 03:40 | And then go back to the Files panel in Dreamweaver
and double-click to open the file, application.XML.
| | 03:48 | That single change that I made in the Application Settings dialog
changed three properties of the application descriptor file.
| | 03:55 | systemChrome, transparent and visible.
| | 03:58 | And you'll notice if you worked through the previous video about
the Flex application that the property settings are the same.
| | 04:05 | systemChrome is set to none,
| | 04:06 | transparent and visible are both set to true.
| | 04:09 | Now to show the results in the application,
I'll close the application.XML file.
| | 04:15 | I pressed Control + W to do that. On the Mac you press Command + W.
| | 04:19 | And then I'll go back to Site,
| | 04:21 | AIR Application Settings.
| | 04:23 | Preview again,
| | 04:25 | and now you'll see that the application shows up but without any
background window chrome and without the application background itself.
| | 04:32 | I can click into the application,
type in a symbol and click the button,
| | 04:36 | and I get back the response.
| | 04:38 | So the functionality of the application hasn't changed at all.
| | 04:42 | I don't have the ability to drag the application around the screen.
| | 04:45 | And I also don't have any visible widgets
that allow me to close the application.
| | 04:50 | So I'll press Alt + F4 to close it on Windows,
or Command + Q if you're on a Mac,
| | 04:55 | and then I'll close the Installer Settings
dialog and go back to the code.
| | 04:59 | In order to provide dragability, that is to allow the user to move
the application around the screen, to go to the Script section
| | 05:06 | of the application. It is the Script section
that contains all of the existing code.
| | 05:11 | Place the cursor after the variable declaration of RSS root,
and create a new function and name it startMove.
| | 05:20 | The function signature doesn't need any arguments
| | 05:24 | and within the braces, you'll use a single
statement to start a move operation.
| | 05:29 | As with the Flex version of this application, you'll
be dealing with the nativeWindow object that makes up the
| | 05:36 | initial window of the application.
| | 05:38 | In JavaScript and HTML,
| | 05:40 | The syntax for referring to this object is very simple.
It is simply nativeWindow and then as I did in Flex,
[00:05:4.90]
I'll call a method called startMove.
| | 05:51 | When this method is called, it means that the application's
position on the screen should track with any mouse movement
| | 05:57 | until the user releases the mouse button.
| | 05:59 | And when the user releases the mouse button, the move operation
is terminated without you having to execute any additional code.
| | 06:06 | Now to call this function, I'll go down toward the
bottom of the code to the two visible div tag sets.
| | 06:13 | There's two divs, one as the data entry form,
the other is the display of the results.
| | 06:18 | I'll go to each of them and add in onmouseDown event handler,
| | 06:24 | and within the event handler I'll call my startMove method.
| | 06:29 | I'll put in that code for both the entry form div
and also put it in for the quote display div tag.
| | 06:37 | I'll save the changes,
| | 06:39 | go back to the menu and select Site,
| | 06:42 | AIR Application Settings,
| | 06:44 | click Preview,
| | 06:46 | the application appears on the screen,
| | 06:48 | and now I can click on either of the visual div tags
and move the application around the desktop. If I click
| | 06:54 | somewhere other than on the visual components, the mouse click event
is handled by the background window and not by the application.
| | 07:01 | So now to close the application, I'll bring it
back and press Alt + F4 or Command + Q on a Mac.
| | 07:08 | It's also good idea to give the user
a visual way of closing an application.
| | 07:12 | The code to close an application is incredibly simple.
| | 07:16 | It is the same as with the window that's hosted
inside a browser. It's simply called window.close.
| | 07:21 | I'll create a function called up closeApp,
| | 07:26 | put in a pair of braces, and then call the code window.close.
Then to give the user a visual widget that they can click
| | 07:36 | to close the application,
| | 07:37 | I'll go to the entry form div tag
| | 07:40 | and add another button.
| | 07:43 | In the onClick event handler I'll call my new method closeApp,
| | 07:49 | and then set the label of the button
between the tags as simply close.
| | 07:54 | And then put in the end tag for the button component.
| | 07:57 | I'll also check out the application in Design view.
| | 08:00 | I'll click the Design button because I want
to make sure that the buttons aren't wrapping.
| | 08:04 | Notice that they're wrapping because
the div tag that hosts them is not wide enough.
| | 08:09 | So in Dreamweaver, I'll click on the div tag and then drag
it out to right so that there's enough space to display
| | 08:15 | both of the buttons.
| | 08:17 | I'll save,
| | 08:18 | go to the menu and select Site, AIR Application Settings,
| | 08:23 | then Preview.
| | 08:25 | Notice I'm still able to move the application around the screen,
| | 08:29 | I'm able to click in and type in a stock symbol and get a quote.
| | 08:34 | And I'm able to close the application.
| | 08:37 | So you can control the window programmatically.
| | 08:40 | To close the entire application call window.close.
To allow the user to drag the application around the screen,
| | 08:47 | call the start move function of the nativeWindow object.
| | 08:50 | Now the next video, I'll show you how to do all
the exact same stuff, but this time in Flash.
| | Collapse this transcript |
| Creating transparent applications in Flash| 00:00 | In this video, I'm going to describe how to create an AIR application
in Flash CS3 Professional that uses a transparent initial window.
| | 00:08 | I'll be working from an existing Flash document that's located in the
Projects folder of the exercise files area for this video series.
| | 00:16 | If you're following along with the exercises, go to the Projects folder underneath the exercise files area
| | 00:22 | and locate the file StockQuoterFlash.ZIP.
| | 00:26 | Extract the contents of this file and place the contents
in the Flash folder underneath the exercise files area.
| | 00:33 | In Windows Vista, I'll right-click on the file
| | 00:36 | select Extract All.
| | 00:38 | And then change the target folder to the Flash
folder underneath the exercise files directory
| | 00:44 | and click Extract.
| | 00:46 | If you're using WinZIP or you're working on Mac OS X, follow
the steps for extracting ZIP files in your environment.
| | 00:53 | Now in the Flash folder, I'll go to the StockQuoterFlash
folder, which contains my existing application
| | 00:59 | and then double-click on the FLA file,
| | 01:02 | and that will result in opening the application in Flash.
| | 01:05 | If you've been working through all the videos
in this chapter, this looked really familiar.
| | 01:10 | It's the same application again. Once again, this application
makes a Web service request to a Yahoo Web service,
| | 01:17 | retrieves content and then displays the
results to show a current stock price.
| | 01:22 | I'll run the application,
| | 01:24 | and you'll see that the application shows up with standard window chrome.
| | 01:28 | I'll enter a symbol,
| | 01:31 | click the Get Quote button,
| | 01:32 | and I'll get back a response from the Yahoo service.
| | 01:36 | Most of the code for this application is in the first frame of layer 1.
| | 01:41 | I'll click into that frame, then go to the menu and select Window,
| | 01:44 | Actions
| | 01:46 | and show that the content is being retrieved from
the Yahoo service using a class called URLRequest.
| | 01:52 | I want to make a point before I continue on with this exercise that
I've accomplished the same task in all three development environments.
| | 02:00 | In Flex, I used the HTTP service object. In HTML, I used
the XML HTTP request object and in Flash I used URLRequest.
| | 02:09 | They're all the same sort of object. They know how to make
an HTTP request to a Web server and retrieve content.
| | 02:16 | And then I'm using either ActionScript 3 in the case of Flex and Flash,
or Java script in the case of HTML to parse the results and present them.
| | 02:25 | OK, so let's continue on with the task at hand.
When you create a brand-new Flash document for AIR,
| | 02:31 | you get an application descriptor file that has
all the same properties I have described previously.
| | 02:36 | Here is the default file and I'll show you what it looks like.
| | 02:40 | I'll open it with WordPad. If you're following along,
you can use whatever text editor you prefer,
| | 02:45 | and then I'll show you that the default settings for
the initial window are systemChrome set the standard,
| | 02:51 | transparent set to false and visible set to true.
| | 02:54 | Now I'll go back to Flash because I want to show you a feature that's
been implemented in the Flash version of the application settings dialog.
| | 03:02 | I'll go to the Command window,
| | 03:04 | to AIR Application and Installer Settings,
| | 03:07 | and then rather than change the values right here,
I'm going to use a custom application descriptor file.
| | 03:14 | I'll select that option and then click the Browse button,
| | 03:18 | then I'll navigate to the folder that contains my application.
| | 03:21 | It's under the exercise files area
| | 03:23 | under Flash, StockQuoter Flash,
| | 03:26 | and I have a pre-built version of this XML file
called StockQuoterFlashtransparent.XML.
| | 03:33 | This file'ss almost identical to the default version except
that it has all the settings I need for transparency.
| | 03:40 | That is to say, the systemChrome is set
to none and transparent is set to true.
| | 03:45 | I'll save the changes,
| | 03:47 | close down everything and run the application again.
| | 03:52 | And there's my application with transparent background.
To show that the functionality the application is still intact,
| | 03:59 | I'll click into the text input, type in a stock symbol,
| | 04:02 | get the quote and get back the result.
| | 04:05 | Now as I've shown in previous videos, at this point I'm no
longer able to move the application around the screen.
| | 04:12 | The window chrome, including the title bar on which the user
normally clicks to drag the application, isn't there.
| | 04:19 | There aren't any close buttons and minimize buttons and
so on. So if I want that functionality I have to provide it.
| | 04:25 | So I'll close the application. I press
Alt + F4 on Windows or Command + Q on the Mac,
| | 04:31 | and I'll come back to the code.
| | 04:33 | In order to implement event handling, I need to make sure
that any objects on which I want to capture the event
| | 04:40 | are implemented as instances of movie clip objects. So I'm
going to close my Actions panel and then show you that
| | 04:53 | the two background elements are instances of a movie clip object called
a GR background, and they each have an ID of BGform for the first one
| | 04:56 | and BGOutput for the second one.
| | 04:59 | So here's how I'm going to set up the ability
to drag the application around the screen.
| | 05:03 | I'll go back to the Actions window by selecting Window,
| | 05:07 | Actions,
| | 05:08 | and then I'm going add a function called startMove.
| | 05:12 | Now the startMove function is going to be designed as an
event handler function that receives an event object.
| | 05:17 | And I'll show you why in a moment.
| | 05:19 | But we're going to set it up to receive
an event object typed as a mouse event,
| | 05:24 | and return void.
| | 05:30 | In the body of the function, I'll use the code this.Stage.nativeWindow.startMove. As I've shown in previous videos,
| | 05:40 | calling the startMove method of the nativeWindow object
results in causing the application's position to track
| | 05:47 | the mouse movement. When the user releases the mouse button,
the move operation is canceled and you don't have to write any
| | 05:52 | additional code for that to happen.
| | 05:55 | Now to make the move happened upon the mousedown
event for those two background components,
| | 06:00 | I'll add code at the top that executes as the application starts up.
| | 06:04 | First, BGForm.addEventListener
| | 06:11 | and I'll pass and MouseEvent.Mouse_Down
| | 06:18 | And then I'll call the startMove method. This is why I
set up the startMove method as an event handler function
| | 06:25 | receiving an event object. When you set up an event handler
using the addEventListener method, the functions that you
| | 06:31 | call must receive an argument typed as
the appropriate kind of event object.
| | 06:36 | Now I'll do the same thing for the BGOutput background.
| | 06:41 | Once again, I'll call addEventListener
| | 06:49 | and once again, I'll call the startMove function when that event occurs.
| | 06:56 | I'm ready to test my application.
| | 06:58 | I'll run it.
| | 07:03 | And now I should be able to click anywhere on the visible
part of the application and be able to move it around.
| | 07:09 | And there's the result.
| | 07:11 | The functionality of the application is completely intact.
I'll type in a symbol click the button and get back a response.
| | 07:18 | And then I'll close the application with
Alt + F4 on Windows or Command + Q on the Mac.
| | 07:24 | So this is one of the ways in which you can handle an event in
Flash and then trigger functionality of the nativeWindow object.
| | 07:30 | So here are the steps I followed.
| | 07:33 | Any object whose events I wanted to trigger this kind of
functionality was set up as a movie clip instance.
| | 07:39 | Then I used the addEventListener method to set
up an event listener for the appropriate event.
| | 07:45 | In this case, the mouse down event.
| | 07:47 | And in reaction, called the function
| | 07:50 | startMove in this case,
| | 07:51 | and within the startMove function, I called the startMove
method of the nativeWindow object of the Stage.
| | 07:57 | This code looks almost identical to the version in Flex
in the sense that there's an event listener but we're using
| | 08:03 | ActionScript-based event listeners
rather than an XML event-based listeners.
| | 08:07 | And it's similar to the version in HTML. In HTML, we simply had
to say nativeWindow.startMove rather then Stage.nativeWindow,
| | 08:16 | but the basic functionality is exactly the same between
the three development environments, Flex, HTML and Flash.
| | Collapse this transcript |
|
|
9. Using File System Input and OutputUnderstanding AIR file system access| 00:00 | In this chapter I'm going to describe some of the tools that
are available that allow you to access the local file system
| | 00:06 | from an AIR application.
| | 00:08 | Local file system access is one of the great benefits of desktop
applications in contrast to web-based applications, which
| | 00:16 | are restricted by the browser security sandbox. When you install an
application as a native local application, as you do with AIR applications,
| | 00:32 | the application is allowed to access files, directories, create new directories,
remove them, create new files, read existing ones and so on and so forth
| | 00:34 | and AIR libraries anticipate this capability and make it quite
easy to get to the local content and manipulate it as needed.
| | 00:42 | All applications written for AIR have
access to the local client's file system
| | 00:47 | and as a result, the AIR libraries that include the
fundamental components for file access are available to all
| | 00:54 | applications, regardless of whether they're built using Flex, Flash or HTML.
| | 01:00 | The AIR API libraries include classes
that allow you to navigate the file system,
| | 01:05 | search for local files and read and write local files.
| | 01:09 | Then in addition to the different architectures,
HTML, Flash and Flex, provides various visual tools.
| | 01:16 | For instance, the Flex framework provides a rich set of visual
components based on the data grid, list, combo box, and tree
| | 01:24 | controls, that automatically know how to read the local file system and
present information about the files and directories that are already there.
| | 01:32 | Because they are interactive components, originally designed
for presenting and manipulating data in a Flex application,
| | 01:39 | you use them in pretty much the same
way as you do their parent classes.
| | 01:42 | If you know how to use a data grid, you already know most
of what you need for a FileSystemDataGrid, and so on.
| | 01:50 | The key classes in the AIR API for getting to and manipulating
local content include the File and the FileStream.
| | 01:58 | The File class represents a path to a local file or directory.
| | 02:02 | It doesn't have to point to a directory or file that already
exists because you also use the File class to represent
| | 02:09 | a path to a file or directory you want to create.
| | 02:12 | And then the FileStream class encapsulates all the
functionality you need for reading and writing local files.
| | 02:18 | It has the ability to read and write simple text
files and also is able to deal with binary files.
| | 02:26 | In addition to these basic AIR API classes, the File and the
FileStream, of the Flex framework adds these visual components.
| | 02:34 | The FileSystemComboBox and the FileSystemList define combo
boxes or lists that are sensitive to the local file system.
| | 02:43 | When you create them, you point them in a specific directory
and then at run time these components go get information
| | 02:48 | about the selected directory and present it to the user.
| | 02:52 | The FileSystemDataGrid does pretty much the same thing
but it displays much more detailed information about
| | 02:58 | each file and each directory.
| | 03:00 | And then finally the FileSystemTree control
presents this information in a hierarchical display.
| | 03:06 | Again, if you're familiar with the tree, the data grid, the combo
box or the list controls in Flex, then you'll find these controls
| | 03:13 | very easy to learn because they use exactly the same sort of programming
architecture and add to those capabilities local file system sensitivity.
| | 03:22 | This is one area where the tools in the Flex framework are
more extensive than what you get in either HTML or Flash.
| | 03:29 | The component-based architecture of the Flex framework encourages you
to use these prebuilt components rather than building UI from scratch.
| | 03:37 | But over on the HTML side, if you're familiar with some
of the really great visual tools that are Ajax-based,
| | 03:44 | for instance, Adobe Spry framework or the Dojo framework and
open source Ajax library, it is pretty simple to use the tools in
| | 03:53 | the AIR API libraries and feed data into these pre-built visual components.
| | 03:57 | Similarly Flash CS3 comes with a set of components and you can take
the data you get out of the area API and feed into those components.
| | 04:06 | So in the next video I'm going to show you how to build an
application in Flex that uses the FileSystemDataGrid and
| | 04:14 | the File and FileStream classes to explore the local disk, select files
| | 04:19 | and present the contents in an AIR application.
| | Collapse this transcript |
| Navigating the file system with Flex controls| 00:00 | In this video I'm going to describe how to create an AIR
application using Flex that allows the user to explore their
| | 00:07 | local disk and select text files and display the contents on the screen.
| | 00:12 | I'll be creating this application from scratch and Flex Builder.
So if you're following along in the exercises, close whatever
| | 00:18 | projects you currently have open in Flex Builder
| | 00:21 | and then from the menu, select File,
| | 00:24 | New, Flex Project.
| | 00:27 | Name the new project FileReader,
| | 00:31 | Make sure its application type is set to Desktop application
| | 00:34 | and click Finish to create the project and the main application file.
| | 00:40 | Once the application loads, set its layout property to vertical.
| | 00:45 | I'll do that in Source view, just locate the layout property,
| | 00:49 | remove absolute and then start typing vertical and press Control + space
to complete it. Next within the windowed application tags,
| | 00:57 | declare an instance of the FileSystemDataGrid.
| | 01:01 | Notice that there are a quite a few different components you can
use. I described the combo box, the list control, the tree.
| | 01:08 | We'll use the DataGrid because it gives
you the most detailed information.
| | 01:12 | Set the ID property of the FileSystemDataGrid to
fileGrid then save the changes to your application,
| | 01:21 | and click the Run button on the toolbar
to run your new AIR application.
| | 01:28 | When the application opens up, it displays a data grid
and populates it with the root contents of your local system.
| | 01:35 | Working on Windows, I see a list of drives. If you're
working on the Mac, you'll see the root of your hard disk.
| | 01:41 | Notice that the data grid displays the name of the directory or file,
| | 01:45 | whether it's a folder or file.
| | 01:48 | Its size, if it's a file,
| | 01:50 | and it's created and modified dates.
| | 01:53 | One of the built-in features of this component is that you
can double-click to drill down into the directory contents.
| | 01:59 | So I'll double-click into the C drive,
| | 02:01 | and there's my AIR Essential Training folder, which
contains my exercise files for this video series.
| | 02:07 | I'll double-click on that folder and that takes me down into
the directory structure, which to a be familiar with if you've
| | 02:13 | been working through these exercises.
| | 02:16 | Notice that there's no built-in functionality for navigating
upward through the directory structure, but that's something
| | 02:22 | is pretty easy dad with a little bit of code.
| | 02:25 | Close the application and returned to Flex Builder.
| | 02:29 | Then place the cursor under the FileSystemDataGrid
declaration and add a button component.
| | 02:35 | Set its label property to up
| | 02:38 | and its click event listener to call this bit of ActionScript code,
| | 02:43 | fileGrid.navigateUp.
| | 02:47 | Notice that there are a number of different navigate functions.
| | 02:50 | navigateForward, navigateBack,
| | 02:52 | navigateUp, navigateDown and navigateTo.
| | 02:55 | So you can programmatically walk the directory tree.
| | 02:59 | I'll select the navigateUp method of the grid control,
close the tag and once again run the application.
| | 03:09 | I'll expand the size of the application so I can see the entire grid.
I'll double-click on the root almonds to drill down into the folders.
| | 03:17 | And then each time I click the Up button, I'll be
navigating upward through the directory structure.
| | 03:25 | If you want to find out which item is currently selected in the
FileSystemDataGrid, you can use a property called selected path.
| | 03:32 | If you're familiar with the dataGrid component, it is
very similar to the dataGrid's selected item property.
| | 03:38 | The selected path property returns a string, which reflects
the currently selected item in the FileSystemDataGrid.
| | 03:45 | I'll add a label control above the FileSystemDataGrid
and set its text property using a binding expression
| | 03:53 | fileGrid.selectedPath.
| | 03:58 | I'll run the application.
| | 04:03 | I pressed Control + F11. If you're working on Windows, you can do
that or if you're working on a Mac, you can press Command + F11.
| | 04:11 | And now each time I select an item, you'll see the label
component above the dataGrid that's showing my current path.
| | 04:18 | I'll double-click to drill down
| | 04:20 | and each time I select an item in the
data grid, I'm showing the current path.
| | 04:24 | Finally one more task for this video. I'd like to show you
how to set the FileSystemDataGrid's currently selected item
| | 04:32 | upon application startup.
| | 04:34 | I'm going to create a script section and within the script section,
I'll create a function called initApp and this would be
| | 04:42 | my application initialization function.
| | 04:45 | It will return void,
| | 04:48 | and then I'll go to the root element of windowed application and
add a creationComplete event handler and call the method initApp.
| | 04:58 | Within the method, I'm going to set a property of the grid named directory.
| | 05:04 | The directory property points to an instance of the file class
and this will be a first look at the file class.
| | 05:10 | When you instantiate the file class, you can pass in a path, a
string that describes the file or directory you're interested in.
| | 05:18 | I'll set it like this, fileGrid.directory = new File
| | 05:26 | and then within the constructor method of the
File class, I'll pass in the location of the file.
| | 05:32 | And here's what is an important distinction between Windows and the Mac.
| | 05:36 | The Windows operating system uses backslashes.
| | 05:40 | Where as the Mac operating system uses forward slashes.
| | 05:43 | In fact, even when you're working on Windows you can use forward
slashes to designate file paths and it's typically a little bit
| | 05:51 | easier to do. Because if you want use backslashes, you have
to double them up. So for instance, if I wanted to point to
| | 06:05 | my exercise files directory on Windows, and I wanted to use back slashes, I would have to type it like this C:\\AIREssentialTraining,
| | 06:11 | Now this exercise only makes sense on Windows.
| | 06:14 | If you're Mac user, don't worry about this. You should use
forward slashes all the time, but notice that I'm putting in
| | 06:20 | a double backslash there.
| | 06:22 | And then I'll run the application.
| | 06:25 | And I automatically come up in that directory from the very beginning.
| | 06:30 | If I prefer I can use forward slashes instead, even though I'm
running on Windows and then I only need a single forward slash.
| | 06:38 | I'll save the changes.
| | 06:40 | Once again, run the application,
| | 06:43 | and once again, I get to the correct location.
| | 06:46 | That's a beginning look at how to use these visual components. In the next
video on so you had to read a file from disk and present it on the screen.
| | Collapse this transcript |
| Reading and displaying text files| 00:00 | In this video I'm going to describe how to add functionality
to my Flex AIR application that knows how to read files
| | 00:07 | from the local disk and display their contents in the application.
| | 00:11 | The code I am going use for this purpose is pretty much the
same, regardless of what you're working in Flex HTML or Flash.
| | 00:18 | So unlike previous videos where I repeated the exercises
three times. I'm only going to do this one once because
| | 00:25 | the basic code that you use is pretty much identical.
| | 00:28 | I'll be working on the same application that I
created in the previous video, FileReader.MXML.
| | 00:36 | I'll start by creating a button at the bottom of the application
and when the user clicks this button and I'm going to use
| | 00:42 | the file that they've selected from the FileSystemDataGrid
control and present it on the screen.
| | 00:48 | I'll start by creating the button,
| | 00:50 | and now give it the label of Read File.
| | 00:53 | Now I can only read a file and not a directory.
| | 00:57 | So I'd like to disable this button if in fact
they have selected a directory in the grid.
| | 01:02 | The FileSystemDataGrid component's selected item property
| | 01:06 | always points to an instance of the File class.
| | 01:09 | And every File object has a property called isDirectory,
| | 01:13 | which is a Boolean value that you can inspect to find
out whether you're working with a directory or file.
| | 01:19 | I'll add an enabled property and I'll use of
binding expression that looks like this.
| | 01:25 | I'm going to expand the application to
full screen so I can see more of the code,
| | 01:30 | and then I'll use this binding expression.
I'll start off with the !, the negation operator,
| | 01:37 | and then I'll put in fileGrid.selectedItem.isDirectory.
| | 01:43 | The logic is that I only want this button
to be enabled if I'm looking at a file.
| | 01:49 | If I'm looking in a directory, I want to be disabled.
| | 01:52 | I'll save and run the application
| | 01:57 | and then I'll exapnd the size the application so I can see more of it.
| | 02:00 | Notice when I click on a directory, that button is disabled.
| | 02:05 | I'll double-click into that directory and select a file,
| | 02:08 | and now the button is enabled.
| | 02:10 | So now I have a button that the user can click.
| | 02:13 | Now when the user clicks the button, I'm going to open the
file from disk and display its contents on the screen.
| | 02:19 | My next task is to create a user interface for displaying
the contents of the file. I'll create a panel component with
| | 02:27 | the title of File Viewer
| | 02:30 | and I'll set its width to 300 pixels
| | 02:36 | and its height to 200 pixels.
| | 02:40 | Within the panel, I'll create a text area control
| | 02:44 | and I'll assign an ID of Text Viewer
| | 02:48 | and give it a width and height of 100% each so
that the text area control fills the entire panel.
| | 02:56 | And then I'll put in the /> to close the text.
| | 03:01 | Next, I'll create a function that knows how to read the file from disk.
| | 03:06 | Go to the script section and create a new private function
| | 03:10 | and name it displayFile. The function should return void.
| | 03:17 | Within the function declare a new variable named currentFile
and data type it as an instance of the File class.
| | 03:26 | Then construct the object with the File class's constructor
method and pass in the selected path from the grid.
| | 03:37 | The selectedPath property returns the location of the selected
file as a string. You take that string you pass it into
| | 03:46 | the File class's constructor method and now you have an
instance of the File class that represents that file on disk.
| | 03:54 | To read the file from disk, we're going use a class called the FileStream.
| | 03:58 | I'll declare new variable called stream data typed as FileStream.
| | 04:03 | And then I'll instantiated using the class's no argument constructor method.
| | 04:09 | Now I'm going to open the file from disk.
| | 04:13 | When you open a file, you can open it in a number of different modes
| | 04:17 | and the different modes represented in a class called FileMode.
| | 04:21 | To open the file, I'll use this syntax-
| | 04:23 | stream.open
| | 04:25 | then I'll pass in a variable representing the
file on disk and then I'll use the FileMode class,
| | 04:31 | and you'll see that there are four constants
available, for append, read, update and write.
| | 04:37 | I'm going to read the file, so I'm going to select
the READ constant and then close the method call.
| | 04:44 | And I now have a handle the allows me to read the file from disk.
| | 04:48 | When you read the file you can either
do so synchronously or asynchronously.
| | 04:53 | For a very small file, synchronous operations work fine, but if you're
reading a very large file, you might want use asynchronous operations.
| | 05:01 | I'm show you how to do synchronous reading.
| | 05:04 | It'll look like this.
| | 05:05 | I'll create a new string variable called
fileText. I'll datatype it as a string.
| | 05:12 | Then I'll call a method of the FileStream object named readUTFbytes.
| | 05:19 | You'll see in the list that I'm showing on the screen that
there are many read functions. The readUTFbytes function
| | 05:25 | specifically allows you to read UTF-8 encoded text.
| | 05:29 | And that's the kind of text my files is going to have.
| | 05:33 | You pass a numeric value into this function,
| | 05:36 | and you can find out how many bytes there are available by
looking at the FileStream object's bytesAvailable property.
| | 05:43 | So I'll pass this expression in as the
only argument in the readUTFbytes function.
| | 05:50 | stream.bytesAvailable.
| | 05:53 | Now the fileText string will contain the text of the file I just opened.
| | 05:59 | The last step is to take that string and assign it to the
text area control that I'm using to present it to the user.
| | 06:06 | So I'll use that object ID, Text Viewer,
and assign its text property to fileText.
| | 06:14 | The last step in this application to glue it all together
is to go down to the button that I previously created that
| | 06:21 | has the label of readFile,
| | 06:24 | and add a click event handler,
| | 06:27 | and call the displayFile method.
| | 06:30 | So now when the user clicks the button, it will open the
file from disk and display its contents on the screen.
| | 06:36 | Now I'll test the application.
| | 06:38 | I'll save my changes and run the application
by clicking the Run button on the toolbar.
| | 06:44 | I'll maximize the application.
| | 06:47 | I'll double-click into the Assets folder
| | 06:50 | and locate the text file, simpletext.txt.
| | 06:53 | Notice that the Read File button is now enabled,
| | 06:57 | and I'll click the button,
| | 06:58 | and there's the contents of the text file.
| | 07:01 | With a small text file like this, it will open very, very quickly.
| | 07:05 | Now, I've set up this code to read text files. If I try to
open a PNG file for instance, I'll just get a binary string.
| | 07:13 | Same thing with PDF files.
| | 07:15 | Or if I go to my icons folder, where I created custom icon
graphics for a previous exercise, once again, I won't be able to
| | 07:23 | read and present the contents of these files
because they're binary files, not text files.
| | 07:28 | But this give you a start in understanding how to get to the
local disk, read files from the disk and get their contents out.
| | 07:35 | Once again, I'll select the text file,
| | 07:37 | click the button, to leave you with the successful exercise in getting
contents for the users local disk and presenting it in an AIR application.
| | 07:46 | Now if you're an HTML developer, the steps are almost exactly the same.
| | 07:51 | The File and the FileStream class are accessible from the AIR object
that you have available when you've linked in the AIR Aliases.
| | 07:59 | And in Flash, these classes are available all the time because Flash
uses exactly the same set of actions for libraries that Flex does.
| | 08:07 | So regardless of whether you're an HTML, Flash or Flex
developer, you're able to get to the local disk, open the files
| | 08:15 | and present them to the user.
| | 08:17 | You can also write files to the local disk. I won't be getting
into those techniques in this video series, but in each of
| | 08:24 | the follow-up series to this essential training, the ones for each
of the individual development environments, Flex, Flash, and HTML,
| | 08:31 | you'll learn not only how to read and use more complex
files but also how to write content to the local disk.
| | 08:38 | You'll also learn how to use the embedded database
engine that's a part of the Adobe integrated runtime
| | 08:43 | to store complex relational data and cache it on the client.
[00:08:48.6 6]
| | Collapse this transcript |
|
|
10. Distributing ApplicationsUnderstanding the seamless installation experience| 00:00 | In this video I'm going to describe how to
create a seamless install for an AIR application.
| | 00:06 | The goal of the seamless install process is to allow your
user to install both your application and the required runtime
| | 00:13 | at the same time. So that instead of having to go find the
runtime and install it separately, they'll be able to go to a page
| | 00:20 | on your website and with just a few clicks, install everything
they need to get started with your application.
| | 00:26 | The AIR software developers kit or SDK includes
a couple versions of the required files.
| | 00:32 | I've open Windows Explorer to the AIR SDK folder,
| | 00:36 | and if you like to follow along in this exercise, you do the same.
| | 00:40 | Regardless of where you installed the software
developers kit, whether on the C drive,
| | 00:44 | Or if you're working on a Mac, in the Applications folder,
just navigate there in Windows Explorer or finder.
| | 00:50 | First let's look in the SRC folder.
| | 00:52 | This folder contains a subfolder called Badge,
| | 00:56 | and within that folder there are two files names badge.FLA and AIRbadge.AS.
| | 01:02 | The badge.FLA file is a source code file for Flash
that contains the visual presentation of the badge.
| | 01:09 | The other file AIRbadge.AS is an ActionScript file that contains all the logic.
| | 01:15 | The FLA file is provided to use so that you
can customize the look of the badge if you like.
| | 01:20 | The two files depend on each other and the ActionScript
file contains all the logic for implementing the batch.
| | 01:26 | It's strongly recommended that you do not change the ActionScript
code in the AIRbadge.AS file, but if you're comfortable
| | 01:32 | working in Flash, you can use the FLA file
to generate your own copy of the badge.
| | 01:38 | Now the binaries for these files and all the supporting files
are contained in another folder of the AIR SDK named Samples.
| | 01:46 | Under the Samples folder there's a Badge folder,
| | 01:50 | and here you'll find a number files that I'll describe.
| | 01:54 | First the bagde.SWF is the compiled version of the Flash
application that creates the seamless install experience,
| | 02:01 | and then there's a JavaScript file AC_RunActiveContent.JS
| | 02:06 | that's designed to load the Flash content correctly in the browser.
| | 02:09 | If you decide to work with the precompiled versions of this application,
you won't need to change anything about the JS or the SWF file.
| | 02:16 | Next, there are two HTML files named default badge.html and red badge.html.
| | 02:23 | These are the files that you'll change to work with your application.
| | 02:27 | I'm going to open default badge.HTML in Dreamweaver so we
can take a look at the code and I'll describe the different
| | 02:34 | options and how it can be used.
| | 02:36 | Now if you don't have Dreamweaver, you can
open this file in any text editor you like.
| | 02:41 | I've opened the file in Dreamweaver and pressed F4
| | 02:44 | to display it in full screen, and I'm going to scroll down
toward the bottom of the file to the important section.
| | 02:50 | The call to the function AC_FL_RunContent loads the badge installer.
| | 02:55 | In order to configure this file, you'll modify the
Flash var section, at line 55 in my copy of the file,
| | 03:03 | and you'll provide a few required properties.
| | 03:06 | The appname property should match the name of your application
as it was described in the application descriptor file.
| | 03:12 | The appURL should point to the location of your AIR file,
| | 03:15 | and should actually be a complete URL starting with HTPP
and designating the exact location of the AIR file on the web.
| | 03:23 | The AIR version property should be a value of 1.0.
| | 03:27 | if you're building the application for that version of AIR.
| | 03:30 | Older versions of application might have valuea such as 1.0.M6.
That would refer to the Beta 3 release of AIR.
| | 03:38 | If you're building your application for the
1.0 final release, it should be simply 1.0.
| | 03:44 | And then the imageURL is the name of a graphic that you
can plug into the badge to customize its look and feel.
| | 03:51 | This graphic should have a fixed size of 215 pixels wide and 100 pixels high.
| | 03:57 | Now I'll show you in the next video that I've created my
own version of this graphic that I can present to the user.
| | 04:03 | Do that one line of code is the only thing that you have to
customize to make this badge work with your application.
| | 04:10 | There are a couple of other files in the folder.
The readme.txt file is just informational.
| | 04:15 | You don't need to include that in your copy of the files.
| | 04:18 | and test.jpg is a sample graphic. It's sized correctly for
this version of the bad and so if you want to customize
| | 04:26 | the look of your application, you can plug in your own graphic
and then reference it in the Flash vars property within the HTML.
| | 04:34 | Now in the next video, I'll show a how to package all this
together and post your application up on the website so that
| | 04:41 | users can run through the seamless install experience.
| | Collapse this transcript |
| Testing the seamless install with a web server| 00:00 | In order to properly test the seamless install on your local
system, you'll need to have installed a Web server product.
| | 00:07 | Any Web server will do the trick. For instance, if you're working on Windows
and you already have Internet information services installed, use that.
| | 00:15 | If you're working on Mac OS X and you know how to use
the Apache Web server that packaged with the Mac,
| | 00:21 | you can use that as well.
| | 00:23 | If you need a Web server package, I recommend
going and getting one of these packages.
| | 00:29 | Wamp or Mamp. Wamp is a free integrated server package that
includes the Apache Web server, the PHP application server
| | 00:37 | and the my SQL database.
| | 00:39 | It's easy to download and install,
| | 00:41 | and when you install it on Windows using the default settings,
it will create a web root folder under C:\WAMP\WWW.
| | 00:53 | You'll then be able to copy files into those locations and
load them from the Web server and see how everything will
| | 00:59 | behave in a Web server environment.
| | 01:01 | You can download the Wamp software from this URL,
| | 01:04 | www.wampserver.com.
| | 01:08 | If you're working on a Mac and you want
a similar package, go to www.mamp.info.
| | 01:14 | On the main screen, there are two links,
one for Mamp Pro and one for Mamp.
| | 01:19 | Mamp itself is free and has everything you need.
| | 01:22 | Once again, it includes Apache, mySQL and PHP.
| | 01:27 | Now in these demonstrations I'll be using Wamp, the version
for windows, and I won't be using to mySQL database or the
| | 01:35 | PHP application server. The only purpose in installing the
software for the purposes of this video is to make sure that
| | 01:42 | I have a Web server running on my local system that I can
easily use for testing of the seamless install experience.
| | 01:48 | So in the next video I'll show you how to create the seamless
install experience and test it on your local system and
| | 01:55 | where ever I refer to the Wamp server, you should just use
which ever Web server you have installed on your local system.
| | Collapse this transcript |
| Installing WAMP on Windows| 00:00 | For the next set of exercises in this video series,
I'm going to need an application server.
| | 00:06 | Flex applications are able to communicate
with a number of different application servers
| | 00:10 | including Cold Fusion, ASP.net,
| | 00:13 | Live Cycle data services or its open source version, Blaze DS.
| | 00:18 | But one of the simplest to install
and setup is PHP with Apache and mySQL.
| | 00:24 | I like this particular combination for a beginning application server,
| | 00:28 | because there's a version of these products that you can
download and install for free that wraps Apache, the Web server,
| | 00:35 | mySQL, the database, and PHP, the application server, in a single package.
| | 00:41 | There are versions of yhis for many operating systems. In this
video I am going to show you how to get and install a version
| | 00:48 | called Wamp, which stands for Windows,
Apache, mySQL and PHP on Windows.
| | 00:55 | You can get this software for free from the URL
displayed on the screen at www.wampserver.com/en.
| | 01:04 | You can download this file and install it easily without
paying for any license fees and Flex Builder will do a great
| | 01:11 | job working with this application server,
generating code for your applications.
| | 01:16 | I've already downloaded the installation file to my desktop,
| | 01:20 | where it's located and named for WampServer 2.0a.
| | 01:24 | I'm going to show you how to install it
and you'll find that it's very, very simple.
| | 01:28 | I'll double-click on the WampServer icon
| | 01:31 | and click Run.
| | 01:34 | You'll get an informational message,
| | 01:36 | indicating that if you have an older version of the Wamp
package, you should explicitly uninstall it and delete it
| | 01:42 | before you install this version.
| | 01:44 | I'll click Yes to indicate that I want to continue the installation.
| | 01:48 | Then click Next.
| | 01:50 | If you accept the agreement, just click
the radio button and click Next again.
| | 01:55 | And then indicate where you want to install the Wamp server package.
| | 02:00 | This is going to be a root directory that includes the
installations of Apache, mySQL and PHP all wrapped together.
| | 02:09 | Click Next
| | 02:11 | and then indicate what you want particular icons to appear.
| | 02:14 | I'm going to install without any icons and click Next again.
| | 02:20 | Finally I see a summary screen that indicates
that the application installation is ready to go.
| | 02:25 | I click Install
| | 02:27 | and installation starts.
| | 02:29 | It takes just a few minutes for the installation to complete.
| | 02:32 | And remember that we're installing everything
you need, including a database, a Web server,
| | 02:38 | and an application server.
| | 02:40 | One important note about this installation.
| | 02:42 | Apache installs on the standard port of 80.
| | 02:46 | Meaning that it's going to be listening for requests from the
browser or from your Flex applications on the same port as
| | 02:53 | other Web servers might be using.
| | 02:54 | If, for instance, you all read have Internet information
services installed on your system you should deactivate
| | 03:00 | Internet information services before you install Wamp.
| | 03:04 | Or you can go into the configurations for the two servers and
change one of them from the default port 80 to some other port.
| | 03:11 | My recommendation though is that for development purposes,
you should choose which Web server you prefer to work with
| | 03:17 | and primarily work with that one.
| | 03:20 | During the setup, the Wamp installation notes that I have
Firefox detected on my computer and asks if I'd like to use it
| | 03:26 | as the default browser.
| | 03:28 | Sure. I'll use Firefox. I tend to move back-and-forth between
the two major browsers, Firefox and Internet Explorer,
| | 03:35 | and find that they both do the job just fine.
| | 03:38 | Next you're asked for a couple bits of information. If you
have an SMTP server, you can now configure PHP so that
| | 03:46 | it knows where to send e-mails through.
| | 03:48 | I don't have one of those installed right now,
so I'll just go to the next screen.
| | 03:52 | And now I'll go ahead and click Finish
and launch the server all at the same time.
| | 03:58 | After a few moments the server will have started up in the background.
| | 04:02 | Here are two ways to verify that everything started up.
| | 04:05 | First, I'll go to a web browser,
| | 04:08 | and I'll type in the URL http://local host,
| | 04:14 | because Apache installs on the standard
port 80, I don't need any more than that.
| | 04:20 | And I should see this screen indicating that
the server is running in the background.
| | 04:25 | It tells me which version of each software package were installed.
| | 04:28 | Apache version 2.2.6,
| | 04:31 | PHP 5.2.5,
| | 04:33 | and mySQL 5.0.45.
| | 04:36 | There are also links down at the bottom of the
screen to various applications that will be useful.
| | 04:42 | For instance, PHPmyadmin is a web-based
interface for managing a mySQL Server.
| | 04:48 | I'll use that in one of the later videos to set up a database.
| | 04:51 | SQLitemanager is a web-based interface for managing SQLite databases.
| | 04:57 | Scrolling down a little further,
| | 05:00 | you can set up virtual directories or aliases using the Wamp interface,
| | 05:04 | and those aliases are listed on this homepage as well.
| | 05:08 | The Wamp administrative interface appears in your system tray.
| | 05:11 | I'm going to double-click on the Wamp icon in the system
tray and you'll see in a battle dialog that shows you
| | 05:17 | which version of the Wamp server package was installed.
| | 05:20 | I'll close that dialogue,
| | 05:22 | come on back to the system tray and single click,
| | 05:25 | and you'll find a very intuitive interface
| | 05:27 | that allows you to start and stop services as needed.
| | 05:31 | You can start and stop all the services from this interface
or on the Windows platform, you can go to the Control Panel.
| | 05:39 | From the Control Panel, go to the classic view,
| | 05:43 | to Administrative Tools,
| | 05:46 | to Services.
| | 05:48 | Within the Services window, you should find two services listed as Wamp.
| | 05:54 | They're named WampApache
| | 05:56 | and WampmySQLd.
| | 05:58 | They're listed individually and can be stopped
and started manually from this interface.
| | 06:03 | Notice that they are radically set up as manual services,
| | 06:07 | which means that if you restart your computer,
| | 06:09 | they won't restart automatically upon application startup.
| | 06:12 | If you want them to do that, you need to
configure that in this Services area.
| | 06:17 | So that's how easy it is to get started with
the combination of Apache, mySQL and PHP.
| | 06:24 | In the next video, I'll show you how to do the same installation
on Mac OS X, if you're working on a Mac and then I'll show you
| | 06:30 | in a later video how to use Flex Builder to interact with the PHP
application server, the mySQL database and the Apache Web server
| | 06:39 | to generate a project from a database structure very easily.
| | Collapse this transcript |
| Installing MAMP on Mac OS X| 00:00 | In this video, I'm going to describe how to install Mamp,
the installation of a combined server install that
| | 00:07 | includes Apache, mySWL and PHP designed for Mac OS X.
| | 00:12 | This is a free download and install that you can get from
the website I have shown on the screen www.mamp.info.
| | 00:21 | In order to get a copy of the Mamp server,
| | 00:23 | navigate to this site and then download the Mamp install.
| | 00:27 | Notice that there are two versions, Mamp Pro and Mamp,
| | 00:31 | the free version is Mamp.
| | 00:34 | Click the Mamp button and then download the software from here.
| | 00:38 | Before you install the Mamp server, make sure that your Apache server
that's included with the Mac OS X operating system isn't active.
| | 00:46 | To check this, go to your System Preferences.
| | 00:50 | Go to the Apple menu and click System Preferences.
| | 00:53 | Click Sharing,
| | 00:56 | and then check Web Sharing.
| | 00:58 | If Web Sharing is turned on, that means you're already
running the Apache server and you may run into a conflict
| | 01:04 | between that and the Mamp server.
| | 01:06 | Turn it off.
| | 01:07 | And then close your System Preferences.
| | 01:11 | Now for the installation.
| | 01:13 | When you download the Mamp server, you'll
get a DMG file. Double-click the DMG file
| | 01:19 | and then if you agree with the license agreement, click Agree,
| | 01:23 | and you'll open up the DMG file.
| | 01:27 | The installation of the Mamp server is very simple.
| | 01:30 | Just click on the Mamp folder
| | 01:32 | and drag it to the Applications folder.
| | 01:35 | The installation takes just a few seconds
while files are being copied over.
| | 01:39 | Once the installation is finished, double-click the Applications folder
| | 01:43 | and navigate to the new Mamp folder.
| | 01:48 | Within the Mamp folder, you'll find an application named Mamp.
| | 01:52 | Double-click to open and start the Mamp servers.
| | 01:56 | You're starting two different servers, the
Apache Web server and the my SQL database server.
| | 02:02 | When you first install this software, custom ports
are assigned to the Apache and mySQL servers.
| | 02:08 | The Apache server, for instance, is running on port 8888.
| | 02:13 | You typically want to make sure that the
servers are running on their default ports.
| | 02:18 | To reset the ports, return back to the Mamp Control Panel
| | 02:22 | and click the Preferences.
| | 02:25 | Click the Ports button
| | 02:28 | and then click the button Set to default Apache and mySQL ports.
| | 02:32 | Then click OK.
| | 02:34 | This will restart both the Apache and the mySQL database servers.
| | 02:42 | At this point Mamp asks you to type in your administrator password.
| | 02:46 | This is your Mac user password.
| | 02:49 | Then to test the installation, click the Open start page button
| | 02:53 | and you'll see the at the Apache server is now running on port 80.
| | 02:56 | This is the port that you should use as you work through the
rest of the exercises in this chapter of the video series.
| | 03:02 | You also might want to reset the home directory of the Apache server.
| | 03:08 | Once again click the Preferences button,
| | 03:10 | then click the Apache button.
| | 03:12 | Notice that the document root for the Apache Web server
| | 03:15 | is in the Applications/MAMP/htdocs folder.
| | 03:19 | I usually prefer to place this htdocs folder
in my Sites area underneath my personal directory.
| | 03:26 | To make this change click the Select button.
| | 03:29 | Then navigate to your personal directory.
| | 03:32 | From there to Sites,
| | 03:34 | and then click Open.
| | 03:36 | Then back in the Mamp dialog box, click OK
| | 03:41 | and you'll see that the servers are restarting in the background.
| | 03:45 | Now click Open start page,
| | 03:48 | you'll still see the default Mamp homepage.
| | 03:51 | If you look at the URL, you'll notice that you're pointing to an alias
named mamp, which is still back in the Mamp installation directory.
| | 03:58 | But to see your personal startup page in your sites folder,
remove everything except the URL http://local host
| | 04:07 | and press Return.
| | 04:08 | And you should see the default homepage
that was installed with Mac OS X.
| | 04:13 | As you work through the remainder of the exercises in this
video, I'll be doing my demonstrations on Windows using Wamp,
| | 04:20 | the Windows version of the integrated installation.
| | 04:23 | The folder in which I'll be installing all
of the PHP files on Windows is C:\Wamp\WWW.
| | 04:32 | If you're working on a Mac, you should replace that with your
personal Sites directory, under Users, your user name
| | 04:40 | and then Sites.
| | 04:42 | Other than that, the two products work pretty much the same.
| | 04:45 | Two more tips about using Mamp.
| | 04:48 | First of all,
| | 04:49 | keep the Mamp Control Panel open. When you close it,
you're shutting down both the Apache and the mySQL servers.
| | 04:55 | Second, I'll be demonstrating the use of an application called
PHPmyadmin, which is an administrative interface for mySQL server.
| | 05:04 | To locate this administrative application on Mamp,
| | 05:07 | go to the Control Panel and click Open start page,
| | 05:11 | and click PHPmyadmin.
| | 05:14 | From here the interfaces look exactly the same between
Mac OS X and Windows. You'll be able to import and inspect
| | 05:21 | the database that I'll use in the remainder of these exercises
| | Collapse this transcript |
| Creating the seamless installation experience| 00:00 | In this video, I'm going to describe how to use the sample files from the
AIR SDK and your AIR file that you've packaged to create a seamless install.
| | 00:09 | If you're following along these exercises,
go to the exercise files area,
| | 00:13 | to the Projects folder
| | 00:15 | to the HelloWorld folder.
| | 00:17 | This is one of the applications that was created earlier in
this video series. It's a HelloWorld application that uses HTML
| | 00:24 | and a little bit of JavaScript code.
| | 00:26 | The AIR file has already been built and is ready to use.
| | 00:30 | Your first step in creating a seamless install experience
is to create a folder under a Web server directory.
| | 00:37 | where you can test the installation correctly.
| | 00:39 | I'm going to go into Windows Explorer,
if you're working on a Mac, go into Finder,
| | 00:44 | and then navigate to your web root.
| | 00:46 | I've installed Wamp,
| | 00:48 | the integrated server package that includes Apache,
| | 00:51 | and I'll navigate to the C drive
| | 00:54 | to Wamp, to WWW.
| | 00:57 | If you're working with another Web server or working
on the Mac, navigate to your web root folder.
| | 01:02 | Next create a new folder
| | 01:05 | and name it HelloWorld. Now go back to the folder under
the exercise files area that contains the application
| | 01:15 | and the AIR file that's the installer.
| | 01:17 | Copy that AIR file to the clipboard,
| | 01:20 | return back to your web root folder and paste the file
into the new folder that you created under the web root.
| | 01:28 | That's the first piece of your seamless install experience.
| | 01:32 | Next go back to the AIR SDK folder.
| | 01:35 | I have it installed under c:\AIRSDK.
| | 01:39 | From there, go down to the Samples folder,
| | 01:41 | and from there to the Badge folder.
| | 01:43 | Here are the files that you need to select and copy:
| | 01:46 | AC_RunActiveContent.JS. That's the JavaScript library.
| | 01:51 | badge.SWF, the precompiled badge, default_badge.html and test.jpg.
| | 01:59 | Copy those files to the clipboard,
| | 02:01 | and then once again return back to your seamless install folder,
| | 02:04 | and paste the files.
| | 02:06 | So you now have five files in your seamless install folder.
| | 02:10 | The AIR file, which is your installer,
| | 02:12 | The badge.SWF, the HTML wrapper for the badge, the JavaScript library for
the badge and the graphic that the user will see as part of the badge.
| | 02:21 | The next step is to customize the
HTML file that wraps the badge file.
| | 02:27 | Open the file in any text editor.
| | 02:30 | I'll open it in Dreamweaver,
| | 02:33 | and then once the file is open, scroll down to the
section that calls the function AC_FL_RunContent.
| | 02:40 | Go to the Flash var declaration.
| | 02:42 | Notice that there are these three properties,
appname, appURL and imageURL.
| | 02:47 | Change the appname to the name of your application,
as it was known in the application descriptor file.
| | 02:54 | This application was simply known as HelloWorld.
| | 02:57 | Next change the appURL property and type in the location
of the AIR file as it will be known to the web browser.
| | 03:04 | You need to put in a full URL, including the HTTP
prefix. I'll put in http:/localhost/HelloWorld,
| | 03:15 | that's the name of the folder containing these files,
| | 03:18 | and then HelloWorld.AIR, the name of the installer.
| | 03:23 | For the moment I'm going to leave the imageURL alone.
I'll leave it set to simply test.jpg.
| | 03:28 | I'll save the file,
| | 03:30 | and now I'm going to open this HTML file in a web browser.
| | 03:34 | You can use whichever web browser you usually use for this
process as long as the Flash Player has been installed.
| | 03:41 | In order to run the install badge,
| | 03:43 | the user's browser must have at least
version 9 of the Flash Player installed.
| | 03:48 | Now I'll navigate to the location of
my badge file, it's local host/HelloWorld.
| | 03:55 | And I'll see a listing of all the files. Now at this point,
if you're having any trouble finding the files
| | 04:01 | you may need to go back and troubleshoot your Web server installation.
| | 04:04 | Notice my file default_badge.HTML is listed here.
| | 04:08 | I'll click the link.
| | 04:10 | So this is the default appearance of the badge.
I'll click the Install now link
| | 04:15 | and the badge application notices that I don't have
the Adobe integrated runtime currently installed.
| | 04:20 | It asks me if I want to install the runtime.
| | 04:23 | I'll click Yes.
| | 04:25 | It takes a few moments to download the installer
for the AIR runtime from the Adobe website.
| | 04:31 | And then I see my application installer.
| | 04:34 | I'll click the Install button,
| | 04:36 | and as you've seen in previous videos, you now
see the application install user interface.
| | 04:41 | I'll click Continue.
| | 04:43 | If I agree to a license for the Adobe integrated runtime, I click Agree.
| | 04:47 | And now the installation of both the application and
the Adobe integrated runtime happens all in a single process.
| | 04:54 | Because I selected the option to open the application upon completing
the installation it pops up and is available for immediate use.
| | 05:02 | When the user encounters another application, either from you or
another developer, that requires the same version of the
| | 05:08 | Adobe integrated runtime, this time they'll just be installing the
application because the runtime will already be installed on their system
| | 05:21 | and the badge application is capable of detecting that state and
making sure that they're not having to install the runtime yet again.
| | Collapse this transcript |
| Customizing the Install Badge's appearance| 00:00 | In this video, I'm going to describe how to
customize the appearance of the installation badge.
| | 00:05 | There are a number of properties that you can set in
the installation badge through the Flash variables.
| | 00:10 | You can control, for instance, the background color of the
button and the foreground color of the text on top of the button
| | 00:16 | that shows the text, Install now.
| | 00:18 | But you can also change the graphic that's displayed.
| | 00:21 | The default badge that's delivered with the SDK samples
expects a graphic of a particular dimension,
| | 00:27 | 215 pixels wide by 100 pixels high.
| | 00:31 | You can create any graphic of the appropriate dimensions
and easily integrate it into the badge presentation without
| | 00:38 | having to re-open the source code for
the badge and recompile it in Flash.
| | 00:43 | You do this through Flash variable settings.
| | 00:46 | Now I've already created a simple graphic so
I can plug it in on top of this default map image.
| | 00:51 | Once again, I'll remind you that I'm not a graphic designer,
so what you're about to see is definitely programmer art.
| | 00:58 | If you're following along in the exercises,
| | 01:00 | go to the exercise files folder,
| | 01:02 | and from there to go down to the Assets folder
| | 01:05 | and you find the file there named HelloWorldBadge.PNG.
| | 01:08 | This file is of the appropriate size,
215 pixels wide by 100 pixels high.
| | 01:14 | Copy this file to the clipboard
| | 01:17 | and then navigate back to the folder
in which you created your seamless install
| | 01:21 | and paste the graphic file into that location.
| | 01:25 | Next to open the HTML wrapper file for the badge,
| | 01:28 | which is currently named default_badge.HTML.
| | 01:32 | I'll open the file again in Dreamweaver and locate the
Flash vars setting within the call to AC_FL_RunContent.
| | 01:40 | Reset the imageURL property to the name of your file.
| | 01:45 | My file was named HelloWorldBadge.PNG
| | 01:50 | and again, make sure that you copied this file
into the same folder along with the badge itself.
| | 01:57 | I'll come back to Dreamweaver, save the changes.
| | 01:59 | Then come back to the browser where I'm displaying the badge and refresh
and you'll see that my graphic is now plugged into the application.
| | 02:07 | Now as I mentioned there also properties that you can use to
reset the colors of the button at the bottom of the badge.
| | 02:14 | These properties are named button color and message color.
| | 02:17 | You set them through the Flash var setting within the HTML wrapper.
| | 02:21 | So once again, I'll return back to the HTML file.
| | 02:24 | I'm editing in Dreamweaver but you could use any text editor you like.
| | 02:28 | Place the cursor inside your Flash var section.
| | 02:31 | Make sure that the cursor is right inside the
closing single quote, after the name of the image.
| | 02:37 | Then put in an ampersand, to separate
the new property from the previous ones.
| | 02:42 | Type the name of the property want to set, buttoncolor.
| | 02:45 | Then put in the equals assignment operator,
| | 02:48 | and then type in the color that you want.
| | 02:51 | Colors must be assigned using six character, hexadecimal
color values. You can not use named colors in this context,
| | 02:59 | and you don't include the # sign at the beginning.
| | 03:02 | So for instance, to change the color of the button to red,
I would type in the hexadecimal value for red, FF0000.
| | 03:11 | I'll save the change,
| | 03:13 | come on back to the browser, and refresh again, and
you'll see that the color of the button is now red.
| | 03:19 | The AIR SDK under the Samples folder includes
an example of a file that's been customized.
| | 03:25 | If you navigate to your AIR SDK folder and from there to Samples,
| | 03:29 | and from there to Badge,
| | 03:31 | you'll find a file there called red_badge.HTML.
| | 03:35 | Open that in any text editor, I'll once again use Dreamweaver.
| | 03:39 | Once you've opened the file, scroll down to the section of code
that's calling the Flash Player, that's the call to a AC_FL_RunContent,
| | 03:46 | and you'll see that this version of the file sets the button
color and the message color in addition to the imageURL.
| | 03:53 | So those of the properties that you can use to
exert visual control over the badge application.
| | 03:58 | Once again, the software developers kit includes the
source code for the Flash application that is the badge.
| | 04:05 | You can modify that, change its dimensions and make it look
how ever you want to. The only part of the installation that
| | 04:11 | you shouldn't change if you do work with the source code is
the ActionScript file, because that ActionScript file contains
| | 04:24 | all the code and logic that's needed to detect whether the
runtime already exists on the system and to actually execute
| | 04:24 | the integrated seamless installation of both
the Adobe integrated runtime and the application.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Hi, this is David Gassner again.
| | 00:02 | Thank you for joining me in this video series, AIR 1.0 Essential Training.
| | 00:06 | In this series you learned how to use the Adobe integrated runtime to
build and deploy desktop applications built with Flex, HTML and Flash.
| | 00:15 | In the followups to the series, you'll be able to select from
three titles that are dedicated to the different technologies.
| | 00:21 | Regardless of which technology you select as your primary
entry into AIR application development, these titles will
| | 00:27 | show you how to manage files on the server in a more advanced fashion,
| | 00:30 | how to leverage the database that's integrated
into the Adobe integrated runtime, and more.
| | 00:35 | So thanks for sitting through the training, and I hope you feel
ready to build and deploy some great desktop applications.
| | Collapse this transcript |
|
|
