IntroductionWelcome| 00:00 | Hi, my name is David Gassner and I would like to welcome
you to this video series, Flex 3 Essential Training.
| | 00:05 | In this video series, I am going to describe for
new Flex developers how to install Flex Builder 3
| | 00:11 | and how to build and deploy Flex applications.
| | 00:14 | The focus of this video series will be on
building applications deployed over the web.
| | 00:19 | In another video series, AIR Essential Training,
I will be describing how to take those applications
| | 00:25 | and deploy them as desktop applications,
using the Adobe Integrated Runtime.
| | 00:29 | Also, there will be a follow-on video training
series called Flex 3 Beyond the Basics
| | 00:35 | in which I will cover integration with
ColdFusion, ASP.NET, PHP and Java-based servers.
| | 00:41 | So welcome to this video series, settle back,
and I hope you will enjoy it and learn a lot.
| | Collapse this transcript |
| Setting up the exercise files| 00:00 | If you are 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:10 | The exercise files for this title are
available in a file called exercise files.zip.
| | 00:15 | This is just a standard archive file that you can
open up and extract on either Windows or the Mac.
| | 00:21 | To use these files, extract them anywhere on your system.
To demonstrate this, I will open up the zip file on Windows Vista
| | 00:28 | and from there, I am going to drag the exercises
folder within the archive to the desktop.
| | 00:35 | The files are now extracted and ready to use.
| | 00:38 | Here is what's in the exercise files.
| | 00:40 | There's an Assets folder which contains just a couple of files,
| | 00:44 | one graphic and one SQL script that's used in Chapter 11.
| | 00:48 | The remainder of the folders have to do
with each chapter of the video series,
| | 00:52 | and they each contain either one or two archive files themselves.
| | 00:56 | These archive files are Flex Project archives,
files that are designed to be imported into Flex Builder.
| | 01:03 | I am going to demonstrate how to use one of these files and then
for each chapter where I indicate that you should import a project,
| | 01:10 | you should go to this exercises folder area
| | 01:13 | and import the appropriate archive.
| | 01:16 | To import a Flex Project archive, go to the Flex Builder
File menu and select Import, then select Flex Project,
| | 01:25 | click the first Browse button next to archive file
| | 01:29 | and navigate to the appropriate chapter.
| | 01:32 | For instance, I am going to navigate to my desktop, to Exercises, to Chapter
01 and then select the archive file you want to import and click Open,
| | 01:42 | Then click Finish.
| | 01:44 | It takes just a few moments to import a Flex Project archive file.
| | 01:48 | When it's finished, you have a project ready to use and from there,
open a file called travelrequest.mxml and then from there,
| | 01:55 | I will click the Run button and run the application in the browser.
| | 02:00 | So those are the exercise files. They are Flex
Project archives that you import from Flex Builder.
| | 02:06 | The archive file should work exactly the same on either Windows
or the Mac, and they are portable between the operating systems.
| | 02:13 | Also, it doesn't matter where you put your Flex Builder workspace.
| | 02:16 | You can import these files and use them anywhere on your
disk depending on where you set up your workspace.
| | 02:22 | I will be describing the use of workspaces
and projects in the videos in Chapter 1.
| | Collapse this transcript |
| Understanding the prerequisites| 00:00 | In this video, I would like to briefly describe the prerequisites or
requirements for being successful with Flex Application Development.
| | 00:07 | Flex was originally built for application developers,
that is developers with a background in programming.
| | 00:13 | It doesn't really matter what language you might have worked with previously
whether it would be Java or JavaScript or C# or VB.NET or ColdFusion.
| | 00:21 | Any developer who has worked in any programming language
| | 00:24 | will pick up the Flex application architecture pretty quickly.
| | 00:28 | There are two languages involved in Flex MXML and ActionScript.
| | 00:32 | ActionScript is most similar to JavaScript and Java. So if you have a
background in either of those languages, you will pick it up very quickly.
| | 00:40 | If you are interested in further training on ActionScript,
take a look at the ActionScript training title from lynda.com.
| | 00:47 | That title focuses on the use of ActionScript
in the context of Flex applications.
| | 00:52 | There is also a training title from lynda.com
about using ActionScript in the context of Flash.
| | 00:57 | It's the same language but the usage is a little bit
different depending on the programming environment.
| | 01:02 | If you are brand new to programming, go ahead and jump on in.
| | 01:06 | I think you will find that Flex application
development comes pretty quickly.
| | 01:09 | and then you can go back to these other resources for
the training on the languages as you need them.
| | Collapse this transcript |
|
|
1. Getting StartedUnderstanding Adobe Flex 3| 00:00 | In this chapter of the video series, I am going to give you an
overview of the world of Adobe Flex 3 Application Development.
| | 00:06 | I will start with a description of what Adobe Flex is.
| | 00:10 | I will look at the development environment and at the various
tools that Adobe delivers for Flex Application Developers.
| | 00:17 | We'll take a look at how to install and then how to use Flex Builder 3,
| | 00:21 | the integrated development environment
that's built around the Eclipse workbench.
| | 00:25 | We will take a look at how to use Flex Builder's Design view to build
applications in a WYSIWYG or what you see is what you get manner.
| | 00:33 | We will take a look at how to build a basic Hello World application.
| | 00:36 | And we will look at how an application is built into context of a Flex
Builder project which in turn is stored in a Flex Builder workspace.
| | 00:44 | We will take a look at the anatomy of the application.
| | 00:47 | What are the application files that are
generated during the compilation process
| | 00:51 | and how do you deploy those applications
to a web server for use by your users.
| | 00:56 | So what exactly is Adobe Flex 3?
| | 00:59 | Flex is Adobe's platform for developing and deploying
rich Internet applications, and beginning with Flex 3,
| | 01:05 | it's also the platform for developing and deploying desktop applications
that are deployed using the Adobe Integrated Runtime known as AIR.
| | 01:14 | Flex includes both free and commercial tools.
| | 01:17 | The free tools are all part of something called
the Flex 3 SDK or the Software Developers Kit.
| | 01:23 | This is a set of tools that you can download from Adobe and you can
use for free without registering or incurring any licensing costs.
| | 01:31 | The Software Developers Kit includes command-line compiler, the
Flex Class Library or the list of the components that are used
| | 01:38 | to build the Flex applications and a set of
powerful debugging tools that you can use to debug
| | 01:43 | and otherwise fine-tune your applications
before you deliver them to your users.
| | 01:48 | The commercial tools for Flex include Flex Builder 3, the Integrated
Development Environment that's based on the Eclipse workbench.
| | 01:56 | In this video series, I will primarily be using Flex
Builder 3 to build the Flex applications that I demonstrate,
| | 02:02 | but all of the application that I demonstrate in this
video series could also have been built using the SDK,
| | 02:07 | the Software Developers Kit, without incurring any licensing costs.
| | 02:12 | There are also server-based products that are available
from Adobe that have strong Flex Integration Tools,
| | 02:19 | LiveCycle Data Services 2.5.1 is a Java-based application
designed to run on top of Java Enterprise Edition or J2EE Servers.
| | 02:28 | You can run LiveCycle Data Services on top of WebSphere,
WebLogic, JBoss and other J2EE Server products.
| | 02:35 | There is also an open source version of this product
that's coming from Adobe soon called BlazeDS.
| | 02:41 | This will be a completely free Java-based server product that incorporates
many of the most popular features of LiveCylce Data Services, but for free.
| | 02:49 | You can also use ColdFusion 8 with Flex.
| | 02:52 | ColdFusion has powerful Flex integration features, and I will
be describing some of these features later in this video series.
| | 02:59 | So what is a Flex application?
| | 03:01 | A Flex application is delivered as a Flash SWF file.
| | 03:05 | When it's delivered to the web, it's wrapped in a generated HTML page.
| | 03:10 | And when the same application is wrapped up and distributed for AIR
deployment or as a desktop application, it's generated as an application
| | 03:17 | that can be installed locally on a Windows, Mac or Linux-based system.
| | 03:21 | Flex applications that are delivered through the
web browser require the Flash Player on the client.
| | 03:27 | They require the most recent version of the Flash Player, Version 9.0,
which is the same version of the Flash Player that's required by documents
| | 03:34 | that are generated with Flash CS3, the most
recent version of the Flash authoring environment.
| | 03:39 | As a Flash document, a Flex application gives you complete access
to all the Flash tools that you might be used to if you worked
| | 03:46 | in the Flash authoring environment; such as the
drawing API and the ActionScript Programming Language.
| | 03:53 | Flex applications use ActionScript 3, the most
recent version of the ActionScript Language.
| | 03:58 | And as such, they are compatible with Flash documents that you might
generate in the Flash authoring environment using ActionScript 3.
| | 04:05 | You create a Flex application with these steps.
| | 04:08 | First, you select predefined visual components that are a part
of the Flex Class Library, also known as the Flex Framework.
| | 04:15 | You then arrange those components into a user interface.
| | 04:18 | You use Styles and Skins to customize the application appearance.
| | 04:22 | If you have graphic designers involved
in your Application Development Process,
| | 04:26 | they might create what we call graphical
skins using Flash, Illustrator or Fireworks.
| | 04:32 | You then add interaction to the application
using Event Handling and ActionScript code.
| | 04:38 | This allows you to react to user gestures
such as mouse actions and the keyboard.
| | 04:44 | You connect to data and communication services.
| | 04:47 | You can use one of the servers I described earlier or you can use remote
services that are encapsulated in SOAP or REST based web services.
| | 04:55 | And then finally, when you put all the tools
together, you build and you run the application.
| | 05:01 | To see examples of great Flex applications at work,
you can go to a couple of different locations.
| | 05:06 | All of these applications include full source code,
fully commented and they include such applications
| | 05:12 | as the Flex Store, the Flex Dashboard and the Component Explorer.
| | 05:17 | You can find all these sample applications at the URL that you see on
the screen, examples.adobe.com/flex3/componentexplorer/explorer.html.
| | 05:29 | I will navigate to that site in my browser now and show
you one of the applications, the Component Explorer.
| | 05:36 | The Component Explorer is an application
that contains many miniature applications.
| | 05:42 | Each of these applications demonstrates the use
of one or more components of the Flex Framework.
| | 05:47 | For instance, this first application shows the use of the Alert Class.
| | 05:51 | The Alert Class knows how to produce a dialog box or a window and
either display a simple message or create simple interactions.
| | 06:00 | When you click one of the buttons in the sample application,
you will see the interactive application at work.
| | 06:06 | At the bottom of the screen for each application, you see full source code.
| | 06:11 | You can select and copy any of the source
code and try it into your own application.
| | 06:16 | Certain Flex resources will be invaluable to you as you learn how to build
applications using the Flex Framework; first, the Adobe Developer Center.
| | 06:24 | The Developer Center is a location where Adobe puts all of the
most interesting information about Flex Application Development,
| | 06:30 | including articles, tutorials, sample applications and so on.
| | 06:35 | The Developer Center is at the URL www.adobe.com /devnet/flex.
| | 06:41 | A large part of the Flex Application Framework has been open sourced
and the open source homepage for this platform is at flex.org.
| | 06:50 | Here, you can find additional tutorials, information about all sorts of
resources for Flex Application Developers including information about how
| | 06:58 | to build Flex applications with ColdFusion, Java, .NET, PHP and Ruby,
and information about user groups that you can find in your area.
| | 07:07 | So that's an introductory look at the
world of Flex Application Development.
| | 07:11 | In the next set of videos, I am going to show you
how to install Flex Builder 3 and then show you how
| | 07:17 | to build a basic Hello World application
that's delivered to the web browser.
| | Collapse this transcript |
| Installing Flex Builder on Windows| 00:00 | In this video, I am going to describe
how to install Flex Builder 3 on Windows.
| | 00:04 | When you download Flex Builder 3 from Adobe, you will find that there are
four versions currently available; two for Windows and two for the Mac.
| | 00:13 | For each operating system, there are two versions; one known as
the Standalone Installer and the other as the Plugin Installer.
| | 00:19 | I am going to be demonstrating the use of the Standalone
Installer in this video, but if you are already an Eclipse user,
| | 00:26 | you might instead decide to use the Plugin Installer.
| | 00:29 | Now, in Flex Builder 2, there was only a single installer
executable and you made the selection of Standalone
| | 00:35 | versus Plugin Installation during the installation process.
| | 00:39 | In Flex Builder 3, there are actually two separate installers
and you want to make sure you start with the right one.
| | 00:45 | Now, how do you decide which one you want?
| | 00:46 | Well, if you are a developer who is already using
Eclipse for other purposes such as Java Development,
| | 00:52 | you might decide to use the Plugin Installer, so that you are
installing Flex Builder 3 on top of an existing Eclipse installation.
| | 01:00 | This allows you to keep all of your existing plugins and then just
simply lay Flex Builder in on top of your existing environment.
| | 01:07 | If you are new to the world of Eclipse though, you will probably be better
off using this Standalone Installer, which includes a copy of Eclipse.
| | 01:15 | Even if you are using the Standalone Installer
though, it's important to know
| | 01:18 | that you are installing not just the Flex Builder
plugins but also a complete copy of Eclipse.
| | 01:24 | And you are free then to go and get other plugins for other platforms.
| | 01:28 | For instance, ColdFusion Developers sometimes like to go get
CFEclipse, a free plugin for ColdFusion Application Development.
| | 01:35 | Even with that Standalone Installer, you are still running
the basic Eclipse workbench and that means that you can go
| | 01:41 | and get these additional plugins and lay them
in on top of your Flex Builder installation.
| | 01:46 | So let's gets started.
| | 01:47 | I have downloaded the Flex Builder 3 Windows
Installer and placed it on my desktop.
| | 01:53 | To get started, I will double-click and start the installation process.
| | 01:57 | It takes a few moments for the installer to unpack all of its
files, but once it's done, you will be ready to do the installation.
| | 02:04 | You could install the Windows version of Flex Builder
3 on Windows 2000, Windows XP or Windows Vista.
| | 02:12 | It is important to make sure that you have enough memory.
| | 02:14 | I recommend a minimum of 1 gigabyte of RAM on your
Windows machine and if you are also running databases
| | 02:21 | or other heavy duty memory intensive applications, you will
probably be better off with 2 gigabytes of RAM if you can get it.
| | 02:28 | When the installer's finished unpacking all of its files onto your
hard disk, you are first presented with this informational screen
| | 02:34 | and asked what language you want to use for the installation.
| | 02:37 | I will leave it to the default selection of English and click OK.
| | 02:40 | After a few moments, I see the introduction screen.
| | 02:43 | Make sure that you have quit all programs
before you continue with the installation.
| | 02:47 | In particular, make sure that you have closed any web
browser windows such as Firefox or Internet Explorer.
| | 02:53 | As part of this installation, you will be installing the ActiveX and
the plugin versions of the Flash Player and you need to make sure
| | 03:00 | that the browser windows are completely
closed before you can continue that process.
| | 03:05 | I will click the Next button.
| | 03:06 | On the screen, if you accept the terms of the license
agreement, click the I Accept button and click Next,
| | 03:12 | and then indicate where you want to install Flex Builder.
| | 03:15 | I always use the default setting of program files Adobe Flex Builder 3.
| | 03:20 | But you can put Flex Builder 3 anywhere on disk.
| | 03:23 | On the next screen, you are asked what
additional software you would like to install.
| | 03:28 | You always want to include the Flash Player.
| | 03:31 | The version of the Flash Players that's going to be installed at
this point is called the Debug Flash Player 9 and this version
| | 03:38 | of the Flash Player is critical to debugging
and otherwise testing your applications.
| | 03:43 | There are also two additional installations available called
the ColdFusion Extensions for Flex Builder and JSEclipse.
| | 03:50 | The ColdFusion Extensions for Flex Builder are a valuable
plugin that can be used by ColdFusion developers.
| | 03:57 | The extensions include RDS capability, Remote Development
Services, that allows you to connect to a ColdFusion Server
| | 04:03 | and get data structure information and generate valuable code.
| | 04:08 | The JSEclipse installation is for Java Script developers.
| | 04:12 | The JSEclipse plugin is especially useful for
developers who are going to be building AIR
| | 04:17 | or desktop applications and incorporating Java Script based functionality.
| | 04:22 | You don't need either of these installations and
in fact, if you don't install them at this point,
| | 04:27 | it's okay because you will be able to install them later on.
| | 04:30 | I am a ColdFusion developer as well as a Flex developer so I will
| | 04:33 | like to install the ColdFusion Extensions for
Flex Builder during the initial installation.
| | 04:38 | I also sometimes do Java Script application development
and it doesn't hurt to have the JSEclipse plugin installed.
| | 04:44 | So I will go ahead and select that as well and click Next.
| | 04:48 | After a few moments, I'll see a summary of the installation selections
and then I click the Install button to complete the installation.
| | 04:56 | The installation takes a few minutes to run but once it's installed,
| | 04:59 | you will then be able to start up Flex
Builder 3 and start building applications.
| | 05:04 | When the installation is complete, you will see this congratulations
message "Adobe Flex Builder 3 has been installed successfully,"
| | 05:11 | and at this point, you are ready to get started with the application.
| | 05:14 | In the next set of videos, I will give you a tour of the Flex
Builder 3 interface and talk about some basic Eclipse vocabulary.
| | Collapse this transcript |
| Installing Flex Builder on Mac OS X| 00:00 | In this video, I am going describe how
to install Flex Builder 3 on the Mac.
| | 00:04 | First, you want to go to the Adobe website to www.adobe.com/products/flex
and locate the Flex Builder Standalone Installer from Mac OS X. In order
| | 00:16 | to download this software from the Adobe website, you need an Adobe ID.
| | 00:20 | Registration at the Adobe website is free.
| | 00:23 | Once you have downloaded the installer, you should find
the file that I have on my desktop, FB3 Mac Installer.
| | 00:30 | The name of the file may differ, but you are
looking for a file with the .dmg extension.
| | 00:35 | When you download this file, the installer should appear automatically.
| | 00:39 | To get started with the installation,
double-click on the installer executable.
| | 00:43 | If you see this message indicating that the application
was downloaded from the Internet, click the Open button.
| | 00:49 | After a few moments, the installer welcome screen appears.
| | 00:52 | Select the language you want to install
in, the default is English and click OK.
| | 00:57 | Click the Next button on the introduction screen and then if you agree to
the terms of the license agreement, click the Radio button and click Next.
| | 01:05 | The default installation location on Mac OS X is the Adobe Flex
Builder 3 folder in the applications folder on your hard disk.
| | 01:13 | You can install the application anywhere you like.
| | 01:16 | I typically use the default location.
| | 01:18 | So click Next to accept the default.
| | 01:20 | And on the next screen, you are prompted for additional installations.
| | 01:24 | You always want to install the latest version
of the Flash Player 9, Debugging version.
| | 01:29 | On Mac OS X, there is only one version of the Flash Player installed.
| | 01:33 | It will install automatically to whichever browsers
you already have installed; such as Safari or Firefox.
| | 01:38 | In addition, you can add optional plugins.
| | 01:42 | There are two plugins included with the installer.
| | 01:45 | The ColdFusion Extensions for Flex Builder is a
plugin for ColdFusion Developers, which enables RDS
| | 01:51 | or Remote Development Service connectivity
from Flex Builder to the ColdFusion Server.
| | 01:56 | If you don't use ColdFusion, you don't need that plugin.
| | 01:59 | The JSEclipse plugin is a plugin for editing Java Script files.
| | 02:03 | Once again, this is included with the Flex Builder
installation and it's particularly valuable for developers
| | 02:08 | who will be Builder AIR applications that incorporate Java Script code.
| | 02:12 | Select whichever optional plugins you want
to include and then click the Next button.
| | 02:17 | If you have any browsers open, go ahead and close them now.
| | 02:21 | I have Safari running so I will switch over to
Safari and click the browser, and then click OK.
| | 02:28 | At the summary screen, review the information about
what you have selected and then click Install.
| | 02:33 | The Flex Builder installation takes just a few moments.
| | 02:37 | Once the installation is complete, to start up Flex Builder, go to
the applications folder, from there to the Adobe Flex Builder 3 folder
| | 02:45 | or wherever you install the software and then
double-click the Flex Builder 3 executable.
| | 02:50 | When you see this screen "your installation is complete,"
click the Done button and the new Adobe Flex Builder 3 folder,
| | 02:57 | which is your installation folder, automatically opens.
| | 03:00 | To start Flex Builder, locate the Flex Builder
application, double-click on it and the application opens.
| | 03:07 | So that's how you get Flex Builder installed.
| | 03:09 | I am going to show you one other aspect of the Flex Builder installation.
| | 03:13 | In the previous video which described how to set up the exercise files
that come with the DVD or premium memberships in the online library,
| | 03:21 | I described how to import Flex projects from Flex project archives.
| | 03:26 | In order to do this on the Mac, you need to
know where you installed your exercise files.
| | 03:30 | I have installed the exercise files on my desktop in an exercises folder.
| | 03:36 | Each project is located within the appropriate
chapter folder and has a .zip extension.
| | 03:42 | For instance, Chapter 01 begin .zip is the beginning project for Chapter 1.
| | 03:47 | I am going to walk through the import process for one of these projects.
| | 03:52 | I'll return to Flex Builder, select File, Import Flex Project.
| | 04:00 | In the Import Flex Project dialog, click the first browse button.
| | 04:04 | From there, I will go to my desktop, to the
exercises folder, to the Chapter 01 folder
| | 04:11 | and then I will select the project archive I want to import.
| | 04:15 | I will click Open and then Finish.
| | 04:19 | The import takes just a few moments, and then to verify that the
import worked, open up the project, go to the project source root,
| | 04:27 | which is a folder named SRC, and then double-click
to open up one of the Flex applications.
| | 04:33 | To run the application, click the Run button and
you should see the application open in the browser.
| | 04:39 | So that gets you started with installing Flex Builder 3 on Mac OS X.
| | Collapse this transcript |
| Starting Flex Builder| 00:00 | In this video, I am going to show you how to
start up Flex Builder 3 following installation.
| | 00:04 | I will also show you how to switch workspaces and I will
talk about the nature of the workspace and what it does.
| | 00:10 | I will be doing this demonstration on
Flex Builder 3 installed on Windows Vista.
| | 00:14 | The process for starting Flex Builder 3 on the Mac or on Windows XP
is very similar and I will describe some of those differences as well.
| | 00:22 | On Windows Vista, to get started, go to the Windows Start menu
and then in the search text entry area type in Flex Builder.
| | 00:31 | After a moment, you should see Adobe Flex
Builder 3 listed under the Programs area.
| | 00:35 | You can't start directly from here or if you would like to make
it a little bit easier to start up Flex Builder 3 later on,
| | 00:41 | you can copy the shortcut that's listed here
and place the new version on your desktop.
| | 00:46 | To do that on Windows Vista, right-click on the Flex Builder 3 link,
copy to the clipboard, then go to the desktop, right-click and paste.
| | 00:57 | You can do exactly the same process on Windows XP.
| | 01:00 | On Mac OS X, Flex Builder 3 installs by default
to the applications folder on your hard disk.
| | 01:06 | You can go to the applications folder, from there,
to the Adobe Flex Builder 3 directory and from there,
| | 01:12 | double-click on Flex Builder 3 to start the application.
| | 01:14 | I will now start Flex Builder 3 by double-clicking
and Flex Builder 3 will open and be ready to use.
| | 01:21 | When you first open up Flex Builder 3, it opens
on something called the default workspace.
| | 01:26 | The nature of the workspace in the world of Eclipse is that
it serves as a table of contents for all of your projects.
| | 01:33 | Each workspace can reference multiple projects and
each project can contain multiple applications.
| | 01:40 | When you first install Flex Builder 3, it sets a default
workspace that's located in your personal directory.
| | 01:46 | The personal directory on Windows XP is under a
Documents and Settings folder of the C drive root.
| | 01:52 | The personal directory in Windows Vista
and on the Mac is under a Users directory.
| | 01:56 | And either way, the actual directory or folder is named for your username.
| | 02:00 | Under there, there is a Documents directory and under that, a Flex
Builder 3 directory that's created during the installation process.
| | 02:07 | To switch your workspace, go to the Flex Builder
menu and select File, Switch Workspace, Other.
| | 02:15 | In the Workspace Launcher dialog, you
will see the current workspace displayed.
| | 02:19 | You can then type in the name of a new folder that you
want to use as your workspace, your table of contents,
| | 02:24 | or you can click Browse to select an existing folder.
| | 02:27 | I will click the Browse button, go to the computer, from there,
to the C drive and from there, to the Flex 3 ESST directory
| | 02:37 | and under there, I will select the Workspace directory.
| | 02:40 | I will click OK and then click OK again.
| | 02:45 | Whenever you switch workspaces, Flex Builder 3
or Eclipse automatically closes and then reopens.
| | 02:52 | The purpose of this is to release any directory
or file logs that the old workspace might have had
| | 02:58 | and then when Flex Builder 3 reopens, you are ready to start working.
| | 03:01 | In the next video, I will show you how to create your first Flex
Project and then I will give you a tour of the Flex Builder interface.
| | Collapse this transcript |
| Creating a Flex project| 00:00 | In this video, I will show you how to create your first Flex Project
and then I will give you a tour of the Flex Builder Interface.
| | 00:07 | To get started, we are going to create a Flex Project.
| | 00:10 | The nature of a Flex Project is that it
manages Flex Application Development.
| | 00:15 | When you create the project, you will set certain properties to
the project, including whether you want the project to manage web
| | 00:21 | or desktop applications and whether you want the project to interact with
the remote server such as LiveCycle Data Services, BlazeDS or ColdFusion.
| | 00:31 | To creat your first Flex Project, select File, New, Flex Project.
| | 00:39 | This is the new Flex Project wizard.
| | 00:41 | Each project requires a name.
| | 00:44 | The name must contain letters, numbers or underscore
characters and can't include spaces or other special characters.
| | 00:51 | I will be following a very strict project name
and protocol for all these demonstrations,
| | 00:56 | but for your actual applications, you can
name the projects really anything you like.
| | 01:01 | I will be naming my project starting with chapter,
then the number of the chapter and then begin.
| | 01:08 | Later on, when we get into later chapters, you
will be importing chapters that have beginning code
| | 01:13 | and the names of the projects always follow this model.
| | 01:17 | Your project location can be anywhere on disk.
| | 01:20 | The default though is to create a folder with the same name as the project
itself and then to create that folder underneath your Workspace directory.
| | 01:29 | Again, this is not a technical requirement and you
can place your project anywhere on disk that you like.
| | 01:34 | Next, you select an application type, a
web application or a desktop application.
| | 01:40 | If you select web application, the applications in this project
will load into the Flash Player running within a web browser,
| | 01:47 | and the goal then is to design an application
that will download from a web server at runtime
| | 01:52 | and run on the user's desktop in the context of the browser.
| | 01:55 | If you select desktop application as the
application type, then this project will be designed
| | 02:00 | to deploy applications running on Adobe AIR, the Adobe Integrated Runtime.
| | 02:05 | These applications are designed to run locally as
native applications running on Windows or the Mac.
| | 02:11 | For the most part, in this video series, we will be using web applications
to do the demonstrations, but just know that most of the techniques
| | 02:19 | that I will be showing you can be used for
either web applications or desktop applications.
| | 02:24 | For the server technology, you'll have many choices
including ASP.NET, ColdFusion, J2EE and PHP applications.
| | 02:32 | For most of the videos in this series,
we won't be using application servers,
| | 02:36 | but I will show you a couple of little tricks along
the way when you want to deal with .NET or ColdFusion.
| | 02:42 | From this screen, click the Next button and now you
will select the folder known as the Output folder.
| | 02:48 | The Output folder is where the debug version of your application is placed.
| | 02:53 | Now, if you have worked with Flex Builder 2, you may remember that the
Output folder in the older version of the software included both the debug
| | 03:01 | and what we now call the release version of the application.
| | 03:05 | Now, in Flex Builder 3, the Output folder that you
creat during project creation is called binDebug
| | 03:12 | and only contains the debug version of the application.
| | 03:15 | Creating a deployment version of the application,
now known as a release version,
| | 03:19 | is a new and separate step in Flex Builder
3, and I will be showing that to you later.
| | 03:24 | The Output folder name really can be anything you like,
but will be accepting the default setting of binDebug.
| | 03:30 | I will click the Next button and on this screen, I am asked for all
the information I need to finalize the creation of the Flex Project.
| | 03:38 | I will be talking about source and library
paths later on in this video series.
| | 03:42 | I will skip that for now.
| | 03:43 | The main source folder is the name of a folder
in which you want your source code to be stored.
| | 03:49 | In Flex Builder 2, the main source folder was set to a blank string meaning
that the project root and the source code root were the same folder.
| | 03:58 | In Flex Builder 3, there is a new best practice
recommendation that your source code goes
| | 04:03 | into a separate subdirectory and the default name of this directory is SRC.
| | 04:08 | You also have the opportunity at this point
to select the main application file name.
| | 04:13 | A project can contain multiple applications, but this will be the
default application, at least at the beginning of the project creation.
| | 04:21 | You can name your application anything you like.
| | 04:24 | Common names for applications include
main.mxml, index.mxml or descriptive names.
| | 04:32 | For instance, my main application file, when I first
get started, is going to be named HelloWorld.mxml.
| | 04:38 | There are some very important requirements
for naming your application file.
| | 04:42 | You can only include letters, numbers and underscores in the application
file name and you can't include any spaces or special characters.
| | 04:49 | Also, the initial characters should always be in alphabetical character.
| | 04:53 | Whether you capitalize the first character
or not is really a question of Style.
| | 04:57 | I tend to always uppercase the first character
of the application file name.
| | 05:02 | I will be talking more about the reasons behind this, but
briefly right now, an application is a class definition.
| | 05:09 | In object-oriented software conventions, class
names always have an initial uppercase character.
| | 05:15 | So by using an initial uppercase character in my file
names, it reminds me that this is a class definition.
| | 05:21 | For the Output folder URL, you can either
leave it blank or put in an explicit URL.
| | 05:28 | When you leave it blank, you are telling Flex Builder
that when it launches the application for testing,
| | 05:33 | it should simply load the finished application directly
from the hard disk and not expect to look for a web server.
| | 05:39 | Even in fact, you are running web server and the reason to do this
would be so you can see exactly what's going to happen at runtime
| | 05:46 | when your users use the application, you should put in a URL
that allows the browser to download the application at runtime.
| | 05:53 | For now, we are going to be leaving the Output folder URL blank.
| | 05:56 | I will click finish and this will result in creating the
project and the new default application HelloWorld.mxml.
| | 06:05 | It takes a few moments for the project and application
to be created, but once I see the application,
| | 06:10 | I am now ready to start creating the functionality in my Flex application.
| | Collapse this transcript |
| Touring through Flex Builder 3| 00:00 | In the previous video I created a Flex Project called Chapter 01 Begin.
| | 00:05 | And in this video I am going to use that project as an example of how
you can build, compile and deliver Flex applications using Flex Builder.
| | 00:13 | I will start with the Flex Navigator View, the view that
shows you the folders and files within your Flex project.
| | 00:20 | You may remember that I mentioned that in Flex Builder 3 the source
code files that make up your application go into an SRC folder.
| | 00:29 | The first thing I would like to show you is how the
Flex Navigator View is integrated into your file system.
| | 00:35 | If you are working on Windows then Windows Explorer is completely
integrated into the Flex Navigator View meaning that you can copy
| | 00:43 | and paste files back and forth between the two interfaces.
| | 00:47 | The same thing is true in Mac OS X. You can
go into folders in the Finder interface,
| | 00:52 | locate files and then copy and paste them into your Flex Builder interface.
| | 00:57 | To demonstrate this I am going to go to my Exercises folder on the Desktop.
| | 01:02 | From there I will go to the Assets directory and you
will see that there is a graphic there labeled Big Ben.
| | 01:09 | I am going to copy that file to the Windows clipboard.
| | 01:13 | I will then return to the Flex Builder Interface.
| | 01:16 | Whenever you add graphics XML files or other assets to the
application you should place these files somewhere in your source root.
| | 01:24 | I will typically create a new folder to do this I will Right
Click or Ctrl Click on the Mac and then select New Folder.
| | 01:34 | And then I will name the folder Assets
then to paste the file in that I had copied
| | 01:40 | from Windows Explorer I will Right Click
on the new Assets folder and select Paste.
| | 01:46 | And you will see that the graphic is now a
part of the applications available assets.
| | 01:51 | Here's another trick about the Flex Navigator View.
| | 01:55 | For any folder in the view you can use a function called GoInto.
| | 02:01 | When you go into a folder you eliminate the view of all
of that folder's siblings and its containing project.
| | 02:08 | So to limit my view to just the source code I will go to the SRC
folder Right Click or Command Click on the Mac and select GoInto.
| | 02:19 | Now I am only seeing the subfolders and files
that are a part of the actual source code.
| | 02:24 | To go back to a full Project View go to the Flex Navigator toolbar and
click the Back To Workspace button and now you will see the entire project.
| | 02:34 | You can do this for any subfolder within the project.
| | 02:37 | Next let's look at the Outline View.
| | 02:39 | To understand the Outline View I am going to
open the HelloWorld.xml file in the editor.
| | 02:45 | Notice the file on the right shows the
actual source code for the Flex application.
| | 02:50 | I will describe the structure of this application a
little bit later and in the lower left hand corner
| | 02:55 | of Flex Builder the Outline View shows
the objects that make up the application.
| | 03:00 | This is currently a very simple application
so it only shows the application icon
| | 03:06 | but for instance what would happen when I add Label control?
| | 03:10 | I will put in a label control with a Text property of Hello World
and as soon as I finish typing in the code notice in the Outline View
| | 03:22 | that the Label control is now displayed and I
can single click on any item within the outline
| | 03:28 | to switch back and forth between the different bits of code.
| | 03:31 | Notice I only have to single click I don't have
to double click so that's the Outline View.
| | 03:37 | The Outline View can be very useful in navigating
around your application and finding the code.
| | 03:44 | The Edit Review is the area in the center that actually shows the code.
| | 03:48 | The Edit Review has two buttons labeled Source and Design.
| | 03:52 | When you click the Design view you go into the Design view of Flex Builder.
| | 03:57 | The purpose of Design view is to allow you to easily create an
application using a wheezy vague approach or what you see is what you get.
| | 04:05 | You can drag objects around the screen, you can
double click into objects and change their values
| | 04:13 | and you can get a very strong sense of
what the application is going to look like.
| | 04:18 | In a later video I will give you a complete
tour dedicated to the world of Design view.
| | 04:22 | For now I will go back to Source view.
| | 04:26 | Each of the views and the application can be resized and moved
around the interface for instance let's say that I wanted
| | 04:33 | to move the Problems View so that it was
in another area of the application.
| | 04:38 | I can click on any tab of any view and then drag
the tab to any other location in the application
| | 04:46 | so now my Problems View is docked on the right side.
| | 04:50 | To change that back again I will just click on the tab and drag again.
| | 04:54 | You can also change any view to full screen by double clicking on
its tab, for instance I will double click on the HelloWorld.mxml tab
| | 05:05 | and that switches the Source view editor to full screen.
| | 05:09 | To restore the view to its original size double click
again and now you go back to the original size of the view.
| | 05:16 | I will go back to full screen view because I want
to show you a couple of other icons that appear.
| | 05:22 | Over on the left there is a Restore button that does the same thing as
double clicking on the tab again, it restores back to the original size.
| | 05:30 | There is also a button labeled Flex Navigator.
| | 05:34 | This icon allows you to bring in the Flex Navigator
View on top of the Source view Editor in the background
| | 05:41 | and then when you click that button again it goes away.
| | 05:44 | It's just a nice little trick that allows you to get to an important view
| | 05:47 | without actually closing your editor or
restoring it back to the smaller size.
| | 05:53 | There are two other buttons down here labeled Restore
at Outline and the Outline button does the same thing
| | 05:59 | as for Flex Navigator button i.e. it brings in the
Outline View and lays it on top of the text editor.
| | 06:06 | This makes it quite easy to use the Outline View to find particular code
and then you can click the Outline View again and go back to editing.
| | 06:14 | Now I will double click on the tab one
more time and go back to the regular view.
| | 06:21 | Flex Builder includes multiple Perspectives.
| | 06:24 | A Perspective is a particular arrangement of views on the screen.
| | 06:29 | There are 3 built-in Perspectives in Flex Builder called the Flex
Development View, the Flex Debugging View and the Flex Profiling View.
| | 06:38 | You can switch perspectives in a couple of different ways.
| | 06:42 | To switch Perspectives from the menu select
Window Perspective and you will see a list
| | 06:48 | of the three primary Flex views Debugging, Development and Profiling.
| | 06:52 | For instance if I wanted to go to the Debugging View I would select
Flex Debugging and after a moment the views would rearrange themselves
| | 07:00 | so that now in addition to the Editing View in the center and the Flex
Navigator View on the left up at the top I now have Debug Variables,
| | 07:08 | Break Points and Expressions views and at the bottom I have a Console View.
| | 07:13 | I will switch again this time to the Flex Profiling View.
| | 07:16 | I will go to Window, Perspective, Flex Profiling and now
I see a completely different look including the Profile,
| | 07:27 | The Safe Profiling Data and The Console View.
| | 07:31 | And then to switch back to the Default Flex Development
View I will select Window, Perspective, Flex Development.
| | 07:39 | You can also select Perspectives from the
Open Perspective button on the toolbar.
| | 07:43 | This is located in the upper right hand corner of your clips
and is represented by a button with a little plus icon.
| | 07:49 | When you click that button you will see the list of available
views once again Flex Debugging, Development and Profiling.
| | 07:56 | I will choose Flex Debugging and once again I will switch.
| | 08:01 | Notice that once you have selected multiple
perspectives you can move your cursor to the border
| | 08:05 | between the perspective selector and the rest of the toolbar.
| | 08:09 | You will see the cursor shape change to an
icon with two arrows pointing left and right.
| | 08:14 | Click to drag to the left and you will see buttons appear for each
of the major perspectives Debugging, Development and Profiling
| | 08:22 | and from there you can now more easily
switch between the different perspectives.
| | 08:28 | Finally, you may want to create your own custom perspective
that is a custom arrangement of the views on the screen.
| | 08:35 | It's very common for developers to have an
additional monitor setup in a spammed format
| | 08:40 | so that you can drag objects back and forth
between two completely different screens.
| | 08:45 | Eclipse does a good job with this sort of setup, for instance any
particular view can be detached from the rest of the Eclipse interface.
| | 08:54 | I can go to the Problems View for instance,
right click on its tab and select Detached.
| | 09:00 | This is now an undocked or a detached window which I can move
around the screen and if I have an additional monitor for instance
| | 09:08 | over to the right I could move it way off to that area.
| | 09:12 | Once you have created this sort of customized look and
feel you can save it and get back to it easily later on.
| | 09:19 | To do this go to the menu and select Window,
Perspective, Save Perspective As
| | 09:26 | and then you can create your own custom perspective
and you can save the perspective under any name.
| | 09:33 | I will call this My Custom and click Okay.
| | 09:37 | Now I can easily switch back and forth between the
pre-build perspectives and my custom perspectives.
| | 09:43 | I will go up here to the Perspective Selector and choose Flex Development
and then come back here to My Custom Perspective and choose that one.
| | 09:52 | So you can have as many perspectives as you like each one
constituting a particular arrangement of views and tools on the screen.
| | 10:00 | Finally one other thing about Perspectives, I will go back to
the Flex Development Perspective and let's say for instance
| | 10:06 | that I had closed certain views and otherwise customized this
perspective but now I want to see the perspective in the original state
| | 10:15 | as it was defined when Flex Builder was first opened.
| | 10:18 | To reset the Perspective go to the menu and select Window, Perspective,
Reset Perspective and then click OK to confirm that you want
| | 10:29 | to reset the current perspective back to its default settings.
| | 10:33 | All of the views of the Perspective will be
restored to their original locations and sizes.
| | 10:38 | Now I am going to show you a little bit about configuring Flex Builder 3.
| | 10:43 | Flex Builder configuration is a combination of Eclipse
configuration plus specific settings for the Flex Builder plug-in.
| | 10:51 | All the Preferences for Eclipse are stored
under the Window menu under preferences.
| | 10:57 | To give you a sense of how to configure and customize your Flex
Builder interface first I am going to reset the font that's used
| | 11:04 | to display source code in the Flex Builder interface and then I am going
to show you how to select a web browser for your Flex application testing.
| | 11:13 | To reset the font in the Preferences dialog
go to General, Appearance, Colors and Fonts.
| | 11:21 | From there go to Basic and from there to Text
Font that's the setting that's going to be used
| | 11:28 | when Flex Builder decides how to display source code.
| | 11:33 | Now I will click the Change button and I am going to select a much larger
font so that's a little bit easier to see in this video and click OK.
| | 11:42 | And then I will click OK again and you will see that
the size of the font is much larger than it was before.
| | 11:48 | I am also going to show you how to change
which browser is used when you do your testing.
| | 11:55 | Once again go to the Window menu from there to
Preferences and from there go to Web Browser.
| | 12:03 | Notice that the default is to use this system web browser whichever
is considered the default browser when you open up any website.
| | 12:12 | If you want to select a specific browser, choose
for instance Firefox or Internet Explorer.
| | 12:18 | I am going to choose Firefox and click OK.
| | 12:22 | And now when I run my application I will see it
displayed in Firefox instead of Internet Explorer.
| | 12:28 | I will click the Run button to run the application
in the browser and now it appears in Firefox.
| | 12:35 | I will close the browser and then I will change my configuration again,
once again going to Window, Preferences, under Web Browser I will go back
| | 12:45 | to the Default System Web Browser which on my system
is Internet Explorer, click OK, click the Run button
| | 12:54 | and now the application opens up in Internet Explorer.
| | 12:58 | So it's really up to you how you want to configure your system.
| | 13:02 | If you like using Internet Explore, Firefox, Safari on the Mac or
any other web browser you can configure Flex Builder so that it opens
| | 13:11 | up the application for testing in the web browser of your choice.
| | Collapse this transcript |
| Building a basic application| 00:00 | In this video I'm going to describe how to build a basic application.
| | 00:04 | The application will contain a data entry form that
allows the user to enter their name and e-mail address
| | 00:11 | so that they can submit a request for information.
| | 00:13 | I'll start by creating a brand-new application
that's a part of the Chapter01begin project.
| | 00:19 | You can create as many Flex applications
in a single project as you like.
| | 00:24 | From the menu I'll select File, New, MXML Application.
| | 00:31 | When you create a brand-new application,
the file name must have an MXML extension.
| | 00:37 | You can either put in just the first part
of the name or include the .MXML extension.
| | 00:41 | If you leave it out, the Flex Builder will add it for you.
I'm going to call this application TravelRequest.MXML.
| | 00:50 | The layout property is set to one of these three values:
| | 00:54 | vertical, horizontal or absolute.
| | 00:57 | I'll describe the purpose of the layout property later,
| | 01:00 | but for now, I'm going to set the
layout to vertical and click Finish.
| | 01:05 | When you create a brand-new Flex application,
it always starts off with a pair of application tags.
| | 01:11 | And again I'll describe the nature of these
application tags and their syntax a little bit later.
| | 01:16 | For now I'm going to go into design mode,
and I'm going to build the application visually.
| | 01:22 | First I'll set the background of the application.
| | 01:25 | Notice that in design mode the application is selected.
You can tell that it selected by the presence of the handles,
| | 01:32 | the little icons in the corners and on
the sides of the application work area.
| | 01:37 | With the application selected, I'll go to the Flex Properties
view in the lower right-hand corner of Flex Builder.
| | 01:44 | I'm going to scroll down toward the bottom to the Fills section.
| | 01:48 | The Fills section allows me to specify
the background of the application.
| | 01:53 | There are two fill color selectors,
one on the left, one on the right.
| | 01:57 | The fill selector on the left is the
basic background color of the application.
| | 02:02 | I'll click and I'll select a color.
| | 02:05 | Notice that you have a complete color wheel to select from.
| | 02:09 | Or if you already have the color that you know and want to enter, you can
enter the hexadecimal color value in the # text entry box in the lower right.
| | 02:18 | I'm going to select a bluish color as the
beginning color of my background and click OK.
| | 02:25 | And notice that the background color that
I selected is shown now in the design area.
| | 02:30 | Next I'll click the second fill color selector.
| | 02:33 | And this is going to be the second color of the background gradient.
| | 02:37 | I'm going to choose a white value which can be phrased
either as a set of red, green and blue values
| | 02:44 | or as simply the hexadecimal color value, FFFFFF.
| | 02:50 | And I'll click OK.
| | 02:52 | That creates a gradient from top to bottom
from the first color to the second.
| | 02:57 | Now I'm going to add a container that will contain my form.
| | 03:01 | I'll go over to the Components view, which is
in the lower left-hand corner of Flex Builder
| | 03:05 | and scroll down to the Layout section.
| | 03:08 | I'll drag in a Panel container.
| | 03:12 | A Panel is a container that can contain other objects.
| | 03:16 | By default, the Panel has a certain amount of transparency.
| | 03:20 | So the background color of the application
shows through the border of the Panel
| | 03:25 | The Panel has a title area and you can set the
title either through the Flex Properties view,
| | 03:31 | by clicking into the Title property and typing in a value,
or you can double-click on the Panel in the header area
| | 03:39 | and type the title in directly.
| | 03:47 | I double-clicked on the Panel and then typed in the
label that I wanted to show at the top of the Panel
| | 03:52 | and notice that that same value is also displayed
in the Flex Properties view in the Title property.
| | 03:59 | Not I'm going to create a form style interface
that includes labels and text input controls.
| | 04:06 | I'm going to let the Panel and then confirm that it has a layout property set to absolute.
| | 04:11 | That means when I drop objects onto the Panel they will retain
their position relative to the top left corner of the Panel.
| | 04:20 | Next I'll add a label control.
| | 04:24 | The label control will go in the upper left-hand corner.
| | 04:27 | I'll add the label control and then go to the Flex
Properties view and change its text value to First Name.
| | 04:36 | I'll add a second label control,
| | 04:38 | place it under the first, and notice that I can click and drag
it and I'll get an automatic alignment guide that lets me
| | 04:46 | make sure that the two label controls are nice and lined up.
| | 04:49 | This time I'll double click on the label control
to change its text value and type in Last Name.
| | 04:57 | Now I'm ready for text input controls.
| | 05:00 | Text input controls allow users to type in values.
| | 05:05 | I'll drag in a text input control.
| | 05:08 | Resize the Panel so that I can see more of the control
| | 05:11 | and drag in a second text input control
and place it right below first.
| | 05:17 | I'll add in one more label.
| | 05:21 | This will have a text value of E-mail Address.
| | 05:28 | And I'll drag in another text input control
and place it below the first two.
| | 05:34 | Now to line everything up, I'm going to
click on the first text input control,
| | 05:39 | Hold down the Shift key, click on the second
| | 05:42 | let go of the keys and then click and drag the first two
text input controls so that they align with the third.
| | 05:50 | Finally I'll add a button control.
| | 05:53 | I'll click and drag and place the button control in the Panel.
| | 05:58 | To change the text on the face of the
button, I'll set its label property.
| | 06:06 | The value of the label it will be Click Me.
| | 06:09 | Finally, I'll resize the Panel so that it's
about the right size for all of its content.
| | 06:15 | I'll save my change.
| | 06:16 | To save the file I can need to go
to the menu and select File, Save,
| | 06:21 | or I can click the Save button on the toolbar.
| | 06:25 | Finally to run the application, I'll click the Run button
| | 06:30 | and the application loads into the browser, looking
exactly the same as it did in Flex Builder's Design view.
| | 06:37 | Now in the next video, I'll show you what the code looks like
that was generated during this design process and I'll talk
| | 06:43 | about the syntax of the MXML code that generates this user interface.
| | Collapse this transcript |
| Understanding the anatomy of an MXML application| 00:00 | In this video I am going to describe the nature of the MXML programming
language and take a look at and describe the syntax of the code
| | 00:08 | that was generated during the design process in the last video.
| | 00:12 | I have opened the file travelrequest.mxml
and I am going to go into Source view.
| | 00:18 | Notice by the way that you can go into Source view in a
number of different ways including the keyboard shortcut,
| | 00:23 | ctrl plus the tilde key that's the key next to the number 1,
| | 00:28 | that's a toggle keystroke that takes you
back-and-forth between source and Design view.
| | 00:32 | Then I am going to expand the Source view
Editor, so we can see as much code as possible.
| | 00:38 | Let's start with the Application tag.
| | 00:42 | The MXML Programming Language is up here XML Based-Language
that describes an application through its containership.
| | 00:50 | The top level or the root element in this file is called <mx:Application>.
| | 00:55 | The application tag set, which has a begin tag and an
end tag wrapped around the rest of the application,
| | 01:02 | always has something called a namespace declaration.
| | 01:05 | The syntax "xmlns:" in XML is way of declaring a namespace, the
nature of a namespace is that it's an arbitrary string that identifies
| | 01:17 | to the XML processor which XML language is being used.
| | 01:21 | The namespace http://www.adobe.com/2006/mxml is the unique identifier
for the particular version of the MXML language used in Flex 3.
| | 01:37 | The ":mx" after the XML ns-declaration the syntax ":mx" after XML
ns and before the "=" sign is something called a namespace prefix.
| | 01:50 | Namespace prefix is our arbitrary that is you can name them anything
you want, but the default namespace prefix MX that's associated
| | 01:59 | with the string ending with 2006/mxml is used throughout the Flex
documentation in example applications and so it's very strongly encouraged
| | 02:08 | that you always use MX as your namespace prefix as well.
| | 02:12 | The MX prefix is declared in the root element
of the application and then it's applied
| | 02:18 | to every declaration of an element that's a member of the MXML language.
| | 02:23 | The application element, the penal element, the
label, the text input, and the button element,
| | 02:29 | these are all commands or tags or elements of the MXML language.
| | 02:35 | When you see an MXML declaration such as <mx:Label>, this
is a declarative instantiation of an ActionScript class.
| | 02:45 | The mx:Label element is a reference to and a creation of an instance
of that label class and one of the most important components
| | 02:53 | of the Flex Framework beyond the compiling
tools and debugging tools is the class library,
| | 03:00 | the set of components that you use to plug
in and put together a Flex application.
| | 03:05 | The application container, the panel container, the label, the text
input, and the button controls are all members of this Flex Framework.
| | 03:15 | The application itself has been set up with a layout, a vertical.
| | 03:21 | Now, I am going to add some hard returns here so
that we can see the code completely on screen.
| | 03:26 | And it's important to note that MXML as an XML based language is not
sensitive to white space i.e. you can add as many hard returns, line feeds,
| | 03:37 | extra white space in terms of tabs or spaces
as you like to make the code more readable.
| | 03:43 | I do strongly recommend that you retain the indentation
that you see in generated MXML code as you see here,
| | 03:50 | because it makes it easier to read the code and understand
the parent child relationship of objects to each other.
| | 03:56 | For instance, the panel is a child of the application container and
the labels, text inputs, and button controls are children of the panel.
| | 04:06 | This sort of containership is critical to
understanding how Flex applications are laid out.
| | 04:12 | The application and the panel both support a layout property.
| | 04:17 | The possible values of the layout property
are vertical, horizontal, and absolute.
| | 04:22 | When you set up a layout property a vertical or horizontal, you
are allowing the container to layout its objects automatically.
| | 04:30 | In this case going back to design mode, I will show you
that the panel is a direct child of the application.
| | 04:36 | The application's layout property is set to vertical and that causes
objects that are direct children of the application to be stacked
| | 04:43 | in a single column vertically one on top of another.
| | 04:47 | I will show you in a later video the difference
between these different layout properties.
| | 04:51 | But then I also want to show you that the panel
container also supports the layout property
| | 04:57 | and here we would set its layout property to a value of absolute.
| | 05:01 | The purpose of absolute layout is to allow you to place objects in
specific positions relative to the top left corners of their applications.
| | 05:10 | Each of the controls within the panel has an X and Y property.
| | 05:14 | The X property is the number of pixels from the panel's left border and
the Y property is the number of pixels from the top border of the panel.
| | 05:23 | So label within X and Y of 10 would be 10
pixels from the left and 10 pixels from the top.
| | 05:29 | Now, you can change these values manually in the Source view
or you can go back to Design view and move things around.
| | 05:37 | For instance, I will go back to Design view and click and drag and object
and move it around a little bit, go back to Source view and I will show
| | 05:44 | that that text input controls X property
has now changed to a new value of 78.
| | 05:50 | I will go back to Design view, move it back in the place using the
alignment guides that appear automatically, go back to Code View
| | 05:58 | and you will see that the X property is once again back to
106, which matches the X property of the other text input
| | 06:06 | and in fact that's what's determining the left
alignment of the controls with each other.
| | 06:12 | Each of the other XML attributes that you see
listed here is either a property or a style;
| | 06:16 | I would be talking about styles more extensively in a later video.
| | 06:21 | But, regardless of whether something is classified as a property
| | 06:24 | or a style you can typically declare these
settings through the use of MXML attributes.
| | 06:30 | The background gradient alphas and background gradient colors for instance
that are applied to the application are arrays of two values each.
| | 06:40 | The background gradient colors takes in array of
two colors, the first color being the top color
| | 06:45 | and the second being the bottom and the
gradient is calculated automatically.
| | 06:51 | Within the panel there is a width and a height property.
| | 06:54 | In my version of the application the width and the height
came out respectively at 306 pixels wide and 164 pixels high.
| | 07:02 | I didn't have to figure out those numbers, I just used the Design view
of Flex Builder and dragged the container to the size that I wanted.
| | 07:10 | And all of the other settings such as X and Y for each of the nested
controls was again automatically calculated by Flex Builder's Design view.
| | 07:19 | Notice, that the panel container has a title property; this is
the value that's used as the title with the top of the panel.
| | 07:26 | Going back to Design view you see the title listed there.
| | 07:29 | I can change the value either in Design view or in Source view
and either way I will be changing the view of both and when I Save
| | 07:38 | and Run the application again, you will see the results in the browser.
| | 07:42 | So that's a look the source code that makes up a Flex application.
| | 07:47 | Now, in a later video I am going to talk about
the relationship between MXML and ActionScript,
| | 07:53 | the programmatic language that's also
used in building your Flex applications.
| | Collapse this transcript |
| Understanding Flex application output files| 00:00 | When you create a Flex application the project automatically creates a
folder known as the Output Folder which has a default name of bin-debug.
| | 00:09 | The bin-debug folder is populated with all of the generated
files that are typically used in deploying a Flex application.
| | 00:16 | But in Flex Builder 3 this bin-debug directory only contains the
debug version of the application not the final release version.
| | 00:23 | In this video, I am going to describe the contents of the bin-debug folder
| | 00:27 | and also another folder called HTML template that's
used for modeling the output of your Flex application.
| | 00:34 | The bin-debug folder contains a history folder and then
it contains all of the generated application files.
| | 00:41 | I am going to focus on two of these files both have the same
name as the original source code file, in this case Helloworld
| | 00:48 | or Travelrequest and have file extensions of .HTML and .SWF.
| | 00:54 | The .SWF file known as the Swif file is the compiled application,
| | 00:59 | for instance if I have an application
source code file called travelrequest.mxml,
| | 01:03 | that results in a compiled application called travelrequest.swf.
| | 01:07 | The swf file is in the same format as would be generated when
you build a Flash document using the Flash Authoring environment
| | 01:14 | that is it is an application that can
be run and executed by the Flash Player.
| | 01:18 | The .html file of the same name is something we call the html wrapper file.
| | 01:24 | At runtime the browser opens the html file.
| | 01:28 | The html file contains instructions that tell it to open the Flash Player
and then to load the application into the Flash Player for execution.
| | 01:36 | Let's take a look at the contents of the html file.
| | 01:40 | I am right clicking on the file in the Flex Navigator View or
control clicking on the MAC and then selecting open with Text Editor.
| | 01:49 | Notice that if you just double click on the file
you are actually open it up in a web browser
| | 01:55 | and you will be running the file right there within Flex Builder.
| | 01:58 | If you want to see the file source code you have to right
click on it and open it with the appropriate editor.
| | 02:04 | Now I will double-click on the tab for the HTML
file to expand it to full screen and I am going
| | 02:10 | to describe the contents of this file intersections purpose.
| | 02:14 | The basic structure of this file is html.
| | 02:17 | It's designed to be loaded into a browser.
| | 02:19 | In the head section of the html file there is a
link element that links to a history.css file.
| | 02:25 | I will talk about History Management in a much later video in this
series but briefly it's a tool that allows you to manage navigation
| | 02:32 | within the Flex application at Runtime and this
history.css file manages the appearance of those tools.
| | 02:39 | Next within the Head section there is a script element within
SRCH we are appointing to a JavaScript file called ACOEtags.js.
| | 02:47 | This is a link to a critical JavaScript that's used to
manage the presentation of the Flex application at Runtime.
| | 02:55 | Next is another script element.
| | 02:57 | This one linking in a file called history.js.
| | 03:00 | This JavaScript file is used to manage the history
or the navigation of the application at Runtime.
| | 03:06 | Continuing down the application, notice in the global section that
there are three variables being declared: the required major version,
| | 03:14 | the required minor version and the required revision.
| | 03:17 | This is how you instruct the browser and the Flash Player indicating
which version of the Flash Player is required to run your application.
| | 03:24 | Applications built and delivered in Flex Builder
3 require a minimum of Flash Player 9028.
| | 03:31 | Now if you wanted to change which version of the
Flash Player you need it you wouldn't change it here.
| | 03:35 | I will show you where to make that change in a little bit.
| | 03:38 | You always leave this generated HTML file alone.
| | 03:41 | Further down in the application within the body section
there is some JavaScript code that detects which version
| | 03:46 | of the Flash Player is installed on the user's machine.
| | 03:50 | If the user has the right version of Flash Player you
simply run the application but if you have the player
| | 03:55 | but you don't have the right version the user will then
be prompted to install or upgrade the Flash Player.
| | 04:02 | Now it's important to note at this point
that the user must have administrative access
| | 04:06 | to their own client computer in order
to install or upgrade the Flash Player.
| | 04:11 | Because the Flash Player is either an Active X control
running on the Internet Explorer or a plug-in running
| | 04:16 | under other browsers the user must be able to install
local software in order to do this upgrade or install.
| | 04:22 | The next section of the HTML wrapper is
responsible for actually running the application.
| | 04:28 | Starting at line 80 and the version of the HTML wrapper I am displaying
there is a call to a JavaScript function called ACFLruncontent.
| | 04:36 | Notice that it's passing in the SRCH bit of travel request
that's translated by this JavaScript function call as the name
| | 04:43 | of the swf file or compiled application that should be displayed.
| | 04:48 | There is one other section in the JavaScript
area here called the alternate content.
| | 04:53 | This section of code executes only if the user doesn't have
the Flash Player installed or doesn't have the minimum version
| | 04:59 | of the Flash Player that's required to do
an automatic upgrade to Flash Player 9.
| | 05:04 | There is one other section at the bottom of the file called the
noscript section, which repeats the instruction to run the Flash Player
| | 05:10 | and open the application but does so in
pure html code rather than with JavaScript.
| | 05:16 | Hopefully this little bit of code never
executes because when it does especially
| | 05:20 | under Internet Explorer the user has a somewhat
cumbersome experience where they have to click
| | 05:24 | on the Flash component or press the Spacebar to activate the application.
| | 05:29 | Now this bit of code only executes if the user's browser
actually does not support JavaScript or if the user has gone
| | 05:35 | into their browser security settings and disabled JavaScript.
| | 05:38 | So this bit of code hardly ever actually
executes but it's there just in case.
| | 05:43 | So that's a look at the HTML file.
| | 05:45 | Now as I mentioned earlier you never actually change the HTML file itself.
| | 05:50 | Instead, you make changes to how your Flex application
loads by modifying something called the html template.
| | 05:57 | The html template file is stored in the html template
directory and it's named index.template.html.
| | 06:06 | I am going to open it with a Text Editor and show you that it has
the same basic code as the generated file but throughout this version
| | 06:14 | of the file wherever you see a dollar sign and then braces wrapped
| | 06:18 | around a variable name that's a value that
we placed during the code generation process.
| | 06:23 | If you want to make a change to the way your application
looks you make the change here in the indextemplate.html file.
| | 06:30 | And then during the compilation process those changes are transferred
to the generated version of the file in the bin-debug directory.
| | 06:38 | So that's a high level look at how the compilation process works.
| | 06:42 | The html template file contains the model and then that model
is implemented for each application in a generated version
| | 06:49 | of the HTML Wrapper that's placed in the bin-debug directory.
| | 06:53 | And finally the swf file which is the compiled application is
placed in the same bin-debug directory and is available for testing.
| | 07:00 | At the end of this video series I will show you how to actually
create what we call a release version of a Flex application,
| | 07:07 | one that's suitable for deployment to a
web server and for sharing with your users.
| | 07:11 | But for most of your application development process you will
use the version in this bin-debug directory and just remember
| | 07:17 | that this is not the version that you
will be actually deploying to the website.
| | Collapse this transcript |
| Importing and exporting projects| 00:00 | In this chapter I am going to describe a new feature of Flex Builder
3 that allows you to package up Flex projects into zip files,
| | 00:08 | archive files that can then be moved between
operating systems and computers.
| | 00:13 | This feature allows developers to more easily
share code with each other and it also allows you
| | 00:18 | to export file and move it around to another system if necessary.
| | 00:22 | I will demonstrating this using the Chapter 01 Begin Project
but this will be a critical skill as you move forward
| | 00:28 | through the video series if you are going to be using the exercise files.
| | 00:32 | To export a project, go to the Flex Builder menu
and select File Export Flex Project Archive.
| | 00:40 | From the Export Flex Project Archive dialog
select the project that you want export.
| | 00:46 | You can only export a project that is currently open in your workspace.
| | 00:50 | I will choose Chapter 01 Begin and then I have to apply a
specific folder location where I want the zip file to be created.
| | 00:58 | I will click the Browse button and now I will go to the Exercises
folder under my desktop area and choose Chapter 01 and click OK.
| | 01:08 | The name of the archive file will be the same as
the project name Chapter 01 Begin but it will end
| | 01:15 | with a .zip file extension and it will
be placed in that Chapter 01 directory.
| | 01:21 | I will click Finish and that creates the zip file.
| | 01:26 | Let's take a look at the zip file.
| | 01:27 | I will go to the Exercises folder.
| | 01:29 | If you are working along with these exercises you can do the same.
| | 01:33 | And then I will go to the Chapter 01 directory and I will see
my new file Chapter01Begin.zip that's located it in that folder.
| | 01:42 | Notice that for each chapter in this video series
you will find a Begin project and an End project,
| | 01:48 | this will allow you to start wherever you
need to in working through the exercise files.
| | 01:53 | Now go back to the Flex Development Area and
I am going to delete the existing project.
| | 01:58 | I will go up here to the Flex Navigator, Right
or Control click on the project, select Delete.
| | 02:06 | And then I am going to delete all the contents of
the project in addition to that project definition.
| | 02:12 | So that project is no longer a part of my workspace and
in fact its original files don't even exist on disk.
| | 02:20 | Now I am going to reimport the project.
| | 02:23 | From the menu I will select File Import Flex Project.
| | 02:30 | You can import a project from an archive file or from project folder.
| | 02:34 | I will select archive file because that's
how I created it in the first place.
| | 02:38 | I will click the browse button, I will choose the archive file
| | 02:43 | that I just created Chapter 01 Begin and click
Open and then click Finish and that's it.
| | 02:51 | After a few moments my project is imported and all of its
settings are recognized so whatever properties, configurations,
| | 02:58 | assets and so on that I had already created in the
project are now made a part of this new project on disk.
| | 03:05 | One of the benefits of this new technique in Flex Builder
3 is that project archive files are compatible and portable
| | 03:11 | between the different operating systems on with
Flex Builder 3 is supported and it doesn't matter
| | 03:15 | where you place the project you can easily move the project around
retaining all of its settings and configurations by exporting
| | 03:22 | to these archive files and then importing into the new location.
| | 03:26 | To prove that this is all still working I will
open the imported project, go to the source route,
| | 03:31 | open the travelrequest.mxml file and run the application in the browser.
| | 03:40 | And you will see that it looks and behaves exactly the same as it
did before I exported and then reimported it into Flex Builder 3.
| | Collapse this transcript |
|
|
2. Programming LanguagesUnderstanding Flex programming languages| 00:00 | In this chapter of the video series, I am going to describe the
nature of ActionScript 3 and its accompanying language MXML.
| | 00:07 | I will start with the description of benefits of ActionScript
3, and then I will move to more specific looks at coding syntax.
| | 00:15 | So what is ActionScript 3?
| | 00:17 | The Flash authoring environment and the Flash Player have been
in the process of evolving ActionScript for a number of years,
| | 00:23 | starting with ActionScript 1 which was a
very simple line-by-line command language.
| | 00:28 | And then moving to ActionScript 2 which began to
introduce object-oriented concepts in the language.
| | 00:34 | ActionScript 3 is the most recent version of this evolving language.
| | 00:38 | ActionScript is based on the ECMAScript recommendation which is
the same parent language that's produced JavaScript and JScript.
| | 00:46 | So if you are familiar with JavaScript in the context of the web
browser, you will be very comfortable with ActionScript code.
| | 00:52 | The basic syntax of ActionScriipt 3 is almost
identical to ActionScript 2 and to JavaScript,
| | 00:58 | but it's much more strongly tied and much
more object oriented in its nature.
| | 01:03 | The use of ActionScript 3 requires much greater use and
enforcement of object-oriented development practices.
| | 01:09 | In ActionScript 3, nearly everything is in a class and it's important
to understand the basic nature of object-oriented programming
| | 01:17 | to be successful with this version of the programming language.
| | 01:20 | One of the great benefits of ActionScript
3 over its predecessors is performance.
| | 01:24 | ActionScript 3 code executes nearly 10
times faster than ActionScript 2 code did.
| | 01:29 | There are a lot of reasons behind this performance benefit but it is real.
| | 01:34 | ActionScript 3 introduced these new features.
| | 01:37 | Compared to ActionScripts 2, there is much
better runtime and compile-time type checking.
| | 01:43 | The implication for that is that if you are used to
ActionScript 2 programming in the world of Flash,
| | 01:47 | you will be familiar with the phenomenon known as Silent Failure in
Flash authoring environments using earlier versions of the language.
| | 01:55 | If you're declared to variable and then you misspell
it at a later point into the development process,
| | 02:00 | it would be very common for the runtime Flash Player to simply
skip that line of code and not to report any sort of errors.
| | 02:08 | This makes it a very difficult debugging because if you don't see an
error, it's very hard to track down what you might have done wrong.
| | 02:15 | ActionScript 3 requires more in the way of variable typing and
declarations and pays you back for the extra effort through the generation
| | 02:23 | of much better errors at both compile and at runtime.
| | 02:26 | ActionScript 3 makes extensive use of sealed classes.
| | 02:30 | The difference between a sealed class and a
dynamic class is that with dynamic classes,
| | 02:35 | you can add arbitrarily named properties and functions at runtime.
| | 02:40 | And while this is convenient to you as a developer, it
caused a lot of performance issues in ActionScript 2.
| | 02:47 | In ActionScript 3, we almost exclusively use sealed classes,
classes that pre-declare all of their properties in all
| | 02:54 | of their functions, and the result is much better performance.
| | 02:58 | It also creates a more seamless development experience.
| | 03:01 | When you use sealed classes, it's easier for the Integrated Development
Environment Flex Builder to know about the structure of the classes
| | 03:09 | and help you with tricks such as Code Completion and better compile-time
syntax checking to make sure that you are only using properties
| | 03:16 | and methods or functions that have already been declared.
| | 03:19 | ActionScript 3 also introduced ECMAScript for XML, known as E for X, a nice
syntax that allows you to search and access XML formatted data very easily.
| | 03:30 | And there is more, regular expressions; the ability to create your
own text patterns for searching, replacing and validating text,
| | 03:38 | the introduction of primitive types, the integer
and unsigned integer numeric types which can be used
| | 03:44 | for much greater specificity in data storage in the client.
| | 03:48 | So at a high level, that's what ActionScript is about.
| | 03:51 | So what in the heck then is MXML?
| | 03:53 | MXML is a convenience language.
| | 03:56 | There are many examples of convenience
languages in current computer technologies.
| | 04:01 | A great example is JavaServer Pages, which is a
hybrid language that combines HTML and Java together.
| | 04:08 | When you create a JSP file and you place it on a J2EE
Server, when that file is first requested by the browser,
| | 04:16 | it's up to the server to rewrite that code into Peer Java.
| | 04:19 | The reason to use JavaServer Pages rather than Peer Java
is because the code can be much easier to read and write.
| | 04:25 | But at runtime, it's really Java under the covers.
| | 04:29 | That's exactly the relationship between MXML and ActionScript.
| | 04:33 | When you write code in MXML, you are really
writing code in ActionScript in the background.
| | 04:38 | And at compile-time, your MXML code is converted to ActionScript
before it's then compiled into your Flex application.
| | 04:45 | In fact, nearly everything that you can do
in MXML, you can also do in ActionScript.
| | 04:51 | The difference is that in MXML, it frequently
takes a lot less code to accomplish the same task.
| | 04:58 | MXML is a peer XML-based language, that means
that it follows all the rules of XML syntax.
| | 05:05 | Every tag is declared as a pair or with empty tag syntax.
| | 05:09 | It's case sensitive.
| | 05:11 | Its attribute values have to be wrapped in quotes and so on.
| | 05:14 | So anything that you already know about XML applies directly to MXML.
| | 05:19 | MXML includes many pre-built elements that represent ActionScript classes
that in turn are apart of the Flex Framework or the Flex Class Library,
| | 05:29 | your MXML elements for declaring both visual and non-visual components.
| | 05:34 | Examples of visual components include the controls and containers
that go into making the look and feel of a Flex application,
| | 05:41 | and examples of non-visual components include the objects that are
responsible for remote communications with web services and remote objects.
| | 05:50 | Each MXML element has a set of supported attributes.
| | 05:54 | These attributes in turn represent properties, styles and event
listeners or handlers that you can declare in pure XML code.
| | 06:02 | Once again, all these properties, styles and events could
also be handled to pure ActionScript, but in most cases,
| | 06:08 | the MXML version will be significantly more concise
and shorter than the ActionScript equivalent.
| | 06:15 | To make these applications run, you need the Flash Player.
| | 06:18 | The Flash Player includes a Virtual Machine known
as the ActionScript Virtual Machine or the AVM.
| | 06:24 | And in fact, starting with Flash Player 9, the Player
includes two completely separate versions of the AVM;
| | 06:31 | one for older Flash documents built with ActionScript 1 or 2
and one for newer Flash documents built in Flash CS3 or in Flex.
| | 06:41 | When you build a document that uses ActionScript 3, the newer
AVM, that's a part of the Flash Player, kicks in automatically
| | 06:48 | and with that document loaded, it can now only execute ActionScript 3 code.
| | 06:53 | It doesn't matter whether you build your source code in MXML or in
ActionScript; either way, the AVM for ActionScript 3 is being used
| | 07:01 | in the background at runtime to run and execute your application.
| | 07:05 | So that's a high-level overview of the nature of
ActionScript 3 and how MXML fits into its world
| | 07:12 | and how the Flash Player is the platform
on which your applications are executed.
| | Collapse this transcript |
| Translating MXML to ActionScript| 00:00 | In this chapter, I am going to describe the
relationship between MXML and ActionScript.
| | 00:05 | By accomplishing a single task with both languages, I am going
to be adding a very simple visual control to an application,
| | 00:12 | first using an MXML declaration and then using
a little bit of ActionScript code instead.
| | 00:18 | The goal is to help you see the relationship and
differences between the languages and let you judge
| | 00:24 | for yourself when to use each language in its context.
| | 00:27 | If you are following along in the exercises, start
off by closing the existing project, Chapter 01 begin.
| | 00:34 | You can always close a project by going to the
Flex Navigator view, right-clicking on the project
| | 00:41 | or control clicking on the Mac and selecting Close Project.
| | 00:45 | When a project is closed, its files are still there are on disk,
| | 00:49 | but its application won't be recompiled whenever you make
changes to other applications you might also have open.
| | 00:55 | Next, we import a project from the exercises area.
| | 00:58 | From the Menu select file, Import Flex Project.
| | 01:04 | In the Import Project from selection, choose archive file,
browse, go to the folder that contains the video series exercises
| | 01:12 | to the Chapter 02 Directory, and select the file
Chapter 02 begin.zip and open it and then click Finish
| | 01:21 | in the Import Flex Project dialog box to open the project.
| | 01:26 | With the project open, you go to its source root
and open the file MXML and ActionScript.MXML.
| | 01:33 | This is an empty starting application that only
has a layout and a background color setting.
| | 01:39 | Now, we are going to add a label component using MXML code.
| | 01:43 | Place the cursor between the application
tags and put it in MXML label declaration.
| | 01:49 | When you type in MXML manually in Source view,
notice that when you type in the less than character,
| | 01:54 | you get a listing of all of the available
ActionScript classes that can be declared in MXML.
| | 01:59 | You can then start typing the name of the element you want to insert.
| | 02:03 | I am typing LA for Label and then I can press Enter
or double-click on the item in the list to select it.
| | 02:09 | When you then press the spacebar, you will see a listing
of all of the available attributes of that element.
| | 02:14 | I will choose the text property which is the property
of the label control that determines what text
| | 02:19 | to be displayed, and I will put in the text created in MXML.
| | 02:23 | I will also put in a font size attribute of 14 and
that means that the font will be 14 pixels high.
| | 02:29 | I will then save the changes and run the application, and you will see
that the application displays the label created in MXML, so far so good.
| | 02:39 | I'll close the browser and return to Flex Builder.
| | 02:42 | Now, how would you accomplish the same task using Peer ActionScript?
| | 02:45 | Well, first of all, ActionScript code when incorporated
into an application is placed inside a script tag like this.
| | 02:53 | I am going to type in a less than character and then
SC and notice that I get to an element named mx:Script.
| | 03:00 | I will press Enter and then the greater than character.
| | 03:03 | And Flex Builder automatically fills in the End tag for
the MXScript section and wraps inside it a C data block.
| | 03:11 | Now, let me speak very briefly about C data sections.
| | 03:14 | C data stands for Character Data and it's an XML construct that's
designed to protect literal characters from being interpreted as XML.
| | 03:23 | The XML architecture has five reserved characters that can only
be included in XML if they are interpreted as aliases or entities.
| | 03:32 | For instance, the ampersand character, if you are not
inside a C data block, is represented like this &
| | 03:39 | and the less than character is interpreted like this <.
| | 03:46 | Now, why are these characters problems?
| | 03:49 | Because in ActionScript code, the ampersand, the less than
character and many of the other characters are commonly used,
| | 03:56 | and if you had to put them literally in an XML structure,
you would have to use these entities or aliases all the time.
| | 04:04 | By wrapping your ActionScript code inside a C data block, that
is a Character Data Block, you protect those literal characters
| | 04:11 | and you can type in your ActionScript code in a peer version.
| | 04:14 | Okay, back to the subject at hand.
| | 04:16 | How do you create a label at runtime and add it to the application?
| | 04:20 | Well, first of all, we are going to create a function that looks like this,
Private Function and then we will give the function a name of InitApp.
| | 04:31 | The name of the function really could be anything you wanted, but the
name of the function InitApp is a strong convention that's used by a lot
| | 04:38 | of Flex Developers as the name of the function
that fires as the application starts up.
| | 04:43 | This function will have a written data type of Void.
| | 04:46 | And then, to cause this function to be called as the application
starts, I will place my cursor inside the application tag and I will put
| | 04:55 | in something called a Creation Complete Event Handler.
| | 04:59 | The Creation Complete Event is fired or dispatched by the application
as the application starts up and it's the most commonly used event
| | 05:07 | to trigger startup code, that is Application Initialization Code.
| | 05:12 | To complete the Event Handler, in the Creation Complete attribute,
I will put in ActionScript code that calls the InitApp function.
| | 05:21 | I will type INIT and press Control+Space to see a list of all
available properties and functions that start with those characters.
| | 05:29 | And then, I will choose InitApp by double-clicking.
| | 05:32 | Now, this function will fire as the application starts up.
| | 05:35 | Now, within the function, I am going to construct
an instance of the label control, like this.
| | 05:40 | I will declare a variable called My Label and I
will data type it as in instance of the label class.
| | 05:48 | Notice that as I select that ActionScript class from the pull down list
of available classes, Flex Builder automatically adds an import statement.
| | 05:56 | I will be speaking much more at length about
import statements later on, but for now,
| | 06:00 | it's just important to know that the label class must
be imported before to refer to an ActionScript code.
| | 06:08 | Now, I will initialize this variable by
calling the label class as constructor method.
| | 06:13 | The code looks like this, var My Label:Label=New Label.
| | 06:19 | The Label Constructor Method at the end of the statement
is responsible for creating the instance of the class.
| | 06:25 | Now, I will set its text property.
| | 06:27 | When you set text properties in ActionScript, you just use simple.syntax.
| | 06:31 | So I will put in the text property like
this, My Label.txt=created an ActionScript.
| | 06:41 | I will also set the font size.
| | 06:45 | My goal here is to do exactly the same thing I did in MXML.
| | 06:48 | Font size is a style, not a property, and if you want
to modify style, you do it through the SetStyle Method.
| | 06:55 | The code will look like this, My Label.SetStyle then I will pass in
the name of this style and setting, font size as the first argument
| | 07:04 | and its new value as a number 14 in the second argument.
| | 07:09 | Finally, I will take this new Label object that I have created
and I will add it as a child object to the current application.
| | 07:17 | The code look likes this, this .addChild My Label.
| | 07:25 | When you call a Flex container's addChild
method, you are adding the object that you pass
| | 07:30 | in as an argument to what's called the display list of the container.
| | 07:34 | An object can be created in memory, but if you haven't
added it to a container's display list, it won't be visible.
| | 07:41 | So there is four lines of ActionScript code; declaring and constructing
the Label object, setting its text property, setting its font size style
| | 07:50 | and explicitly adding it to the application
container as a child object or the equivalent
| | 07:56 | of a single line of MXML code at line 19 in my current application.
| | 08:01 | I will save the application in right.
| | 08:04 | By the way, I am running the application
now with the keyboard shortcut Control+F11,
| | 08:09 | and you will be able to do the same thing in your copy of Flex Builder.
| | 08:12 | When I run the application, I now see both labels; the
first created in MXML, the second created in ActionScript.
| | 08:20 | Notice that the version created in XML is listed first, that's because MXML
declarative code is executed before any of the ActionScript equivalent.
| | 08:30 | If you wanted the label that was created in ActionScript to
appear before the MXML created one, you could go back to the code
| | 08:37 | and instead of the addChild Method which appends the object to the
current display list, you could instead use a method called addChildAt
| | 08:46 | which allows you to add the object in a specific
location in the container's display list.
| | 08:51 | One more thing before we end this video.
| | 08:54 | Within the source code of an application or of a custom component, this
refers to the current instance of the current object or current class.
| | 09:03 | So in the context of application, this is pointing to the application.
| | 09:07 | The addChild Method is being called as a method of the
application and My Label is the Label object that's being generated
| | 09:15 | and placed programatically in the application's display list.
| | 09:19 | So you can now see the difference between the two languages.
| | 09:22 | MXML is much more concise in most circumstances and it's doing
exactly the same work as its underlying ActionScript code.
| | 09:30 | It's just a lot faster and easier to code and a lot more
readable in many cases than the ActionScript equivalent.
| | Collapse this transcript |
| Understanding the Flex framework| 00:00 | In this video, I am going to describe the content of the
Flex Class Library, also known as the Flex Framework.
| | 00:06 | And I am going to use the Component Explorer application,
an example application that's available on the Adobe website
| | 00:14 | at the URL examples.adobe.com/flex3/componentexplorer/explorer.html.
| | 00:23 | The Component Explorer is a shell application
that hosts many smaller applications.
| | 00:31 | Each of the hosted applications has this as a purpose the
demonstration of the use of a single visual or non-visual component.
| | 00:39 | I will start with the visual component
section at the top of the application.
| | 00:44 | Within this section, there is sections for general controls;
Button, Date, Loader, Menu, Text Containers and Repeater Controls.
| | 00:54 | And I will specifically use the Button control section to talk about some
of the tools that are available to you as you build your Flex application.
| | 01:02 | The simple Button control, for instance, can be
displayed in a number of different formats depending
| | 01:07 | on Styles, Icons, Fonts and so on that are selected.
| | 01:12 | In this sample application, the code that's being executed is displayed
at the bottom and the finished application was displayed at the top.
| | 01:20 | If you take a look at the code at the bottom, you
will see that there are three Button declarations,
| | 01:25 | each with a different set of Icons, Labels and different Styles.
| | 01:30 | And the application at the top shows these buttons with each
of the sets of Styles implemented, the Button with the Icon,
| | 01:36 | for instance, the Button with Styles and the Default Button.
| | 01:42 | Using this Component Explorer, you can see the basics of
how to use each of the components in the Flex Class Library.
| | 01:49 | Now, let's take a look at Date controls.
| | 01:51 | The Date controls include the DateChooser and the DateField.
| | 01:56 | The DateChooser component displays an inline Calendar
control that the user can interact with to select the date.
| | 02:05 | So I can move forward through the Calendar
or back and select the items as needed.
| | 02:10 | The DateField control in contrast displays
a TextInput control with a Calendar icon.
| | 02:16 | When the user clicks into the control, they get a
DateChooser that's a part of the DateField component.
| | 02:22 | And once again, they have the opportunity to select the Date.
| | 02:26 | So the Date controls our interactive controls that have
an understanding of standard dates and their ranges.
| | 02:33 | Now, let's look at Text controls.
| | 02:35 | There are five different Text controls in the Flex Class Library listed
here; the Label, the Rich Text Editor, the TextArea and TextInput.
| | 02:45 | Once again, each of the sample applications is
designed to show you how to use the control.
| | 02:51 | I can click this button to display HTML formatted
text and then the bottom button to display plain text.
| | 02:58 | I won't go through all of the different controls, it would
take quite a while to do so because the Component Explorer has
| | 03:04 | so many different code samples, but what's important to know is that
the Flex Class Library contains all of these different components,
| | 03:12 | controls and containers that you can use
to put together your Flex application.
| | 03:17 | In later videos, I will dig a little bit deeper into each
of these categories, especially the containers and controls,
| | 03:23 | and talk about how to learn, how to use each of these controls by
looking through the example code and through the API documentation.
| | Collapse this transcript |
| Getting language and API help| 00:00 | In this video, I am going to describe how to navigate
the help system that's delivered with Flex Builder 3.
| | 00:06 | Flex includes extensive documentation about how to program
| | 00:11 | and how to deliver applications using the Flex Development
Platform and the ActionScript in MXML languages.
| | 00:17 | A large part of being successful with Flex depends on
your being able to find information when you need it.
| | 00:24 | I am going to show you a couple of different
ways of navigating the help system.
| | 00:28 | From within Flex Builder, you can get to all of the help
documentation by going to the menu choice Help, Help Contents.
| | 00:36 | The content screen shows all of the different
publications that are a part of the Flex documentation.
| | 00:41 | Notice that there are many publications
available listed here under Flex documentation.
| | 00:46 | Each of these is a completely different document.
| | 00:49 | One of them, the Flex Developer's Guide
runs over 1,400 pages if you printed fully.
| | 00:55 | But using this electronic documentation system, it's
easy to find the information you need when you need it.
| | 01:02 | Let's say, for instance, that you wanted to
locate information about the Label control,
| | 01:06 | the control that displays a single line of text in a Flex application.
| | 01:10 | Place the cursor in the search text entry area and type in the word Label.
| | 01:16 | Then press Enter or click the Go button.
| | 01:19 | Now, if you are trying this at home, you may notice that the first time you
do a search of the help system that there is an extensive indexing process
| | 01:26 | that has to take place; and in fact, if your system is now
indexing, you might want to go, get a cup of coffee or a soda
| | 01:34 | and come on back in about two minutes when it's done.
| | 01:37 | Okay, indexing finished.
| | 01:40 | Well, if you are seeing the list of found topics on the left, the
indexing is finished and you are now able to quickly and easily search
| | 01:47 | for any topic you like throughout the documentation.
| | 01:51 | Notice that the second item down is labeled mx.controls.Label(Flex 3)
| | 01:57 | and that's the topic I was looking for, the
API documentation for the Label control.
| | 02:02 | I will click into the link and after a moment, I see the
API documentation for the Label displayed on the right.
| | 02:10 | Every component that's used in a Flex
application is really an ActionScript class
| | 02:15 | and this is the documentation that you use to learn how to use that class.
| | 02:20 | The Label control, for instance, has Properties,
Methods, Events, Styles, Effects and Constants.
| | 02:26 | You can get to any of these sections by clicking the
appropriate link at the top of the documentation.
| | 02:31 | Clicking on the Properties link, for instance, takes me
to the list of all known properties of the Label control.
| | 02:38 | All Properties, Methods and so on are separated into native
object or native members of the class and inherited members.
| | 02:46 | For the public property section, for instance, properties like condense
white, data, HTML text and text are native to the Label control,
| | 02:57 | that is they are actually defined in the ActionScript Label class.
| | 03:01 | Whereas, there are many, many other properties that you can also
set on the same class that are considered inherited properties,
| | 03:08 | that is they are declared in a class that's a super class of the Label.
| | 03:12 | Active effects, Alfa, Automation Value and so on are all properties
that are declared in the UI component or the display object classes,
| | 03:22 | and they are available to the Label class
because of that class's inheritance hierarchy.
| | 03:28 | Going back to the top of the documentation, notice that every
ActionScript class the documentation has an inheritance section.
| | 03:35 | The Label control, for instance, is extended from or inherited from
the UI component class, which in turn is extended from FlexSprite,
| | 03:44 | which is extended from sprite and so on all
the way up to the super class known as object.
| | 03:50 | Any property or method that's declared anywhere in this
inheritance hierarchy will be available to the label component.
| | 03:57 | Now, let's take a look at another couple
of ways of getting to this documentation.
| | 04:01 | I will close the help screen and return to the code.
| | 04:04 | Let's say, for instance, that you had a Label control
that you would declare in MXML and you wanted to quickly
| | 04:10 | and easily go get help, here are two keyboard shortcuts that you can use.
| | 04:15 | The first, F1 does a search of the selected phrase and
then displays the found subject over on the right side.
| | 04:24 | You can then click on the appropriate link.
| | 04:27 | Once again, here is that Label subject that we saw
earlier, and now that same help system will open
| | 04:32 | in line within Flex Builder in a totally separate view.
| | 04:37 | You can now easily move back and forth between the
documentation and the code that you are writing as you need to.
| | 04:44 | Finally, here is one other keyboard shortcut that can be helpful, Shift+F2.
| | 04:49 | When you place the cursor on a phrase and press Shift+F2,
the same sort of search is executed but now the found subject
| | 04:56 | and the actual documentation that's located
opens up in a separate help window.
| | 05:01 | This is exactly the same help screen that you saw
earlier, but now it's displayed in a separate window.
| | 05:07 | And using the Alt+Tab keyboard shortcut, I can easily move back
and forth between the help screen and the Flex Builder interface.
| | 05:15 | If you are working on the Mac, try the
same thing with Command and the Tab key.
| | 05:20 | So that's, we look at the help system.
| | 05:22 | The help system delivers the enormous amounts of documentation to
you and there as a Flex developer, one of the most important tools
| | 05:29 | and skills that you can build is a knowledge of and are comfortable
with looking through the documentation for the information you need
| | 05:37 | to understand how to implement various controls between the
documentation and the sample applications such as the Component Explorer,
| | 05:45 | you can find pretty much any information you need when you need it.
| | Collapse this transcript |
|
|
3. Using Visual ControlsUnderstanding visual controls| 00:00 | In this chapter of the video series, I am going to describe
the use of visual controls in building your Flex applications.
| | 00:07 | A visual control is one of two types of components that make
up the bulk of the Flex class library or the Flex framework.
| | 00:15 | The other type of component is known as a Container
and I will describe those in separate chapters.
| | 00:20 | The nature of the visual control in Flex is that it presents
information to user and in many cases is interactive, that is,
| | 00:28 | it allows the user to interact with the
control to provide data, make selections,
| | 00:32 | and otherwise execute what we sometimes call user
gestures, keyboard actions, mouse moves and so on.
| | 00:39 | There are many different kinds of controls and as I have mentioned
previously, one of the best ways of learning about the different controls
| | 00:45 | in the Flex framework is to use the Component Explorer, the
sample application that I am showing on the screen here.
| | 00:52 | Within the visual component section of the Component Explorer, you
will find all of the most commonly used controls in the Flex framework
| | 00:59 | and for each mini application that's hosted by the Component Explorer,
you will be able to see sample code that you can copy and paste
| | 01:05 | and use in your own applications and you
will see the actual application running.
| | 01:10 | In previous videos, I have shown the button controls and
certain others, in this one, I will go into the menu controls.
| | 01:17 | Menu controls are a particular kind of control that are interactive,
that is, the user can execute gestures to make selections.
| | 01:25 | Here is one kind of control, the menu.
| | 01:28 | The nature of the menu class in Flex is that it's typically
instantiated and then defined using ActionScript and XML.
| | 01:37 | In the sample code in the explorer, you will see that the menu class is
declared in ActionScript code at the line that says private var myMenu:Menu
| | 01:46 | and then they showMenu method actually
generates the menu and displays it on the screen.
| | 01:51 | Here's how it looks to the user.
| | 01:53 | When the user clicks the Open Menu button, the menu pops
up, they can then move the cursor to select an item,
| | 02:00 | click and that in turn generates an event
which can be handled in your ActionScript code.
| | 02:05 | Here is the menu bar, another menu style control.
| | 02:09 | The menu bar is typically declared using MXML code rather than
ActionScript, because it typically is presented in line with the rest
| | 02:16 | of the application rather than generated
dynamically in reaction to user gestures.
| | 02:22 | But the menu bar control behaves very much like the menu, it presents
a menu that the user can select from and like the menu control,
| | 02:30 | it generates events to which you can react
with your own custom ActionScript code.
| | 02:34 | In the remaining videos in this chapter, I will go through some of the
details of the most commonly used controls, show you some sample code
| | 02:42 | and give you a sense of when these controls can be particularly useful.
| | Collapse this transcript |
| Displaying text with the Label and Text controls| 00:00 | The Flex Framework comes with five pre-built text controls.
| | 00:04 | Two of the text controls are designed only for displaying text
and three of them are designed for both display and data entry.
| | 00:11 | I am going to describe each of these controls in turn and
show you some sample code for how the control might be built.
| | 00:17 | I will be initially creating the control instances in Design
view by dragging the controls from the Components view.
| | 00:24 | And then in each case, I will go to the code that's
generated and show you some variations that you can apply.
| | 00:29 | The two display text controls are called Label and Text.
| | 00:34 | The purpose of the Label control is to display a single line of text,
| | 00:38 | while the purpose of the Text control is
to display longer text that can word-wrap.
| | 00:43 | Here's an example of using a Label control.
| | 00:46 | I have opened the file textcontrols.mxml in the Chapter 03 Begin Project.
| | 00:51 | If you are following along with these
exercises, before you continue go ahead
| | 00:55 | and import the Chapter 03 Begin Project
and then open the file textcontrols.mxml.
| | 01:01 | Now click the Design button in textcontrols.mxml
and that will take you into the WYSIWYG Design view.
| | 01:08 | Notice in the lower left corner of Flex
Builder, there is now a Components view.
| | 01:13 | The Components view has 5 sections labeled
custom, controls, layout, navigators, and charts.
| | 01:22 | All of the Text controls that I will describe in this video are in the
Control section of the Components view, so go ahead and open that section.
| | 01:30 | Then locate the Label control and drag it into the application.
| | 01:36 | The application's Layout property is set to vertical,
so it doesn't matter where you drop the object,
| | 01:41 | it will always drop into the center top of the application.
| | 01:45 | The Label control always presents a single line
of text, it's not capable of word wrapping.
| | 01:51 | It's also not capable of receiving user focus or any sort of data entry.
| | 01:56 | It's really exclusively for displaying text.
| | 02:00 | Label control in its simplest form looks like this in code,
it's a declaration of an <mx:Label> tag with a text property.
| | 02:08 | You can change the value of the text property here in Source view or
if you prefer to work in Design view, you can make the change either
| | 02:15 | by double clicking on the control and
typing in new value here or you can go
| | 02:22 | over to the Flex Property view on the
right and change the text property here.
| | 02:27 | The Label control automatically expands its
width to accommodate whatever text you apply.
| | 02:35 | It's also possible though to set an explicit width,
you can do this in Design view by clicking on one
| | 02:40 | of the horizontal handles and then dragging to a specific size.
| | 02:45 | Notice that by default the text aligns on the left side of the Label.
| | 02:49 | If I now go into Source view, you will see that the
width was set to an explicit size of 150 pixels.
| | 02:56 | It now doesn't matter how long the text value is,
the width of the control will always be the same.
| | 03:02 | One of the features of the Label control
is that if you apply a longer text value
| | 03:07 | that can be displayed it automatically truncates the
value and displays the ellipsis or three dots at the end.
| | 03:14 | So I am going to take this text value and type in a much longer value.
| | 03:17 | I will save the changes and then run the application by pressing Ctrl+F11
and you will see that the text value is now too long to be displayed
| | 03:37 | in the Label with its current absolute width and so the
value is truncated and the three dots are put in at the end.
| | 03:43 | Now you can change that behavior by going into the code
and adding a value of truncate-to-fit, set to false.
| | 03:50 | With that value set, I will run the application again and you will
see that in fact truncation is unavoidable, the text is cut off.
| | 03:59 | But now with the truncate-to-fit property set to
false, you will see that there are no longer three dots
| | 04:04 | at the end, that's the entire effect of the property.
| | 04:07 | So that's the Label control.
| | 04:10 | It's one of the simplest controls in the Flex
Framework and it's also one of the most commonly used.
| | 04:16 | The text control is very similar to the Label control, in fact to
create a text control I am going to select the existing Label control
| | 04:23 | and then I am going to press a keyboard
shortcut of Ctrl+Alt and the down arrow key.
| | 04:30 | In Eclipse, the Ctrl+Alt+Down keyboard shortcut means clone this code.
| | 04:35 | Now I will take the new version of the code and change it from Label to
Text and I will remove the truncate-to-fit property which doesn't apply
| | 04:43 | to the Text control and then I will save and run the application again.
| | 04:48 | Notice that the Text control has word-wrapping implemented.
| | 04:51 | When a value was too long for a Text control with the fixed width, it
automatically word-wraps and then grows vertically to display the text.
| | 05:00 | Both the Label and the Text control have
the ability to display HTML formatted code.
| | 05:05 | The Flash Player's ability to display HTML is very limited, in fact
it can only display HTML 1.0 and there is a very shortlist of tags
| | 05:14 | that it supports including the Bold tag, the
Italics, the Underline, Font and only a few others.
| | 05:21 | HTML features it doesn't support include HTML Tables,
Built-in Cascading Style Sheets, and many others.
| | 05:29 | To demonstrate the use of HTML, I am going to change the text element
to a paired tag and then I am going to eliminate the text property,
| | 05:37 | I will cut the existing text to the clipboard and then
instead of using a text property as an attribute I am going
| | 05:46 | to put in HTML Text property as a nested child element.
| | 05:51 | Notice that when I added HTML Text property in Flex
Builder, Flex Builder automatically adds a C data block.
| | 05:57 | The C data block will be important because we want to
be able to apply HTML Markup wrapped around the text.
| | 06:05 | Now I will paste in the text from the old setting and before I
add any HTML, I will test my code by running it in the browser.
| | 06:17 | You will see that so far the Text control is doing very much the same
thing, but one of the behaviors we will see right away with HTML text is
| | 06:25 | that the control respects any whitespace
such as spaces, hard returns and so on.
| | 06:30 | So the extra space that you are seeing before the words,
the quick red fox is actually a part of my source code.
| | 06:37 | If you want to prevent the presentation of
whitespace, there is a property that's available
| | 06:42 | for both the Label and the Text controls called condensed whitespace.
| | 06:46 | This property is turned off by default, but if you set
it to a value of True and then run the application,
| | 06:53 | you will see that the additional whitespace is removed from the display.
| | 06:57 | Now we are ready to apply some HTML, I will go back to the
code and I am going to add some very simple HTML Markup.
| | 07:06 | I will add a Bold tag before the words the quick red
fox and an End Bold tag at the end of that string.
| | 07:13 | And then I will run the application again and you will
see the bolded text as a result of the HTML Markup.
| | 07:21 | I will return back to the Text control
and now I am going to add a font setting.
| | 07:34 | Notice that I am wrapping the entire string including the Bold tags with
the Font tags and then I will run the application again and you will see
| | 07:45 | that that text that's been wrapped is now both bold and red.
| | 07:49 | Here is couple of tips about using HTML
Text on the Label and the Text control.
| | 07:53 | First of all the HTML tags must be declared in all lower case, if you
place them in upper case the Flash Player won't recognize the tags.
| | 08:01 | Also again there is a very limited set of tags that are supported and the
condensed white attribute is very important because it allows the control
| | 08:09 | to compress that additional whitespace and present the text correctly.
| | 08:14 | So those are the two display controls, the Label and the Text control.
| | 08:18 | In the next video, I will show you how to use the other Text controls
for data entry, the text input, the text area and the rich text edit.
| | Collapse this transcript |
| Using Text Data Entry controls| 00:00 | In this video, I am going to describe the use
of data entry text controls that allow you
| | 00:05 | to collect data from the user in the context of data entry forms.
| | 00:10 | There are three controls designed for this purpose.
| | 00:13 | The text input, the text area and the rich text edit controls.
| | 00:17 | The text input and the text area controls are very similar to each other.
| | 00:22 | They each collect text from the user.
| | 00:24 | The difference is in the number of lines that they accept.
| | 00:27 | The text input control accepts only a single line of text
from the user, whereas the text area can word-wrap the text
| | 00:34 | and the user can type in an enormous amount of content.
| | 00:37 | I am going to start by going into Design view and adding some of
these controls using the Components view's drag and drop capability.
| | 00:46 | If you are following along in these exercises, open the file
dataentrycontrols.mxml, change the layout property of this application
| | 00:55 | from vertical to absolute and then go into Design view.
| | 01:00 | You typically use a label and a control in conjunction with each other.
| | 01:05 | So for each control that I add to the application, I will start by adding a
Label control and set it to a particular text value that I want to display
| | 01:13 | and then I will add the actual data entry control next to it.
| | 01:17 | For the first example, I will add a Label control, I will double click
the label in Design view and change its text property to first name.
| | 01:29 | Now I will add a text input control.
| | 01:31 | The text input control is available in the Components
view in the control section, I will locate it
| | 01:37 | and drag it into the application and place it next to the label.
| | 01:43 | Whenever you add in a text input control,
you should always assign an ID property.
| | 01:48 | The purpose of the ID is to provide a unique identifier.
| | 01:51 | Think of the ID as a handle by which you can
refer to this control in your ActionScript code
| | 01:57 | and in your binding expressions which I will describe in a later video.
| | 02:02 | I typically add the word "input" at the end of the ID of the
text input control, so it looks like this, First name input.
| | 02:11 | After I type in the ID in the Flex Properties view,
I press the enter or return key to save the changes.
| | 02:18 | Now let's look at the code that was generated.
| | 02:20 | I will go to Source view, double click the tab to expand to full screen
and you will see that the input control was added in a particular location
| | 02:29 | in the application, because the application's layout is set to Absolute,
I can place the control anywhere I like and its position will be retained.
| | 02:38 | The ID of first name input is an attribute in the text input MXML Markup.
| | 02:46 | Now text input controls have a default width, but if you want to set
the input's dimensions to a specific width, use the width attribute.
| | 02:56 | The width and the height of a visual control can each be set to
either an absolute numeric value which is interpreted as the number
| | 03:03 | of pixels in that dimension or to a percentage value.
| | 03:07 | When you are working with absolute layout, you typically
work with absolute dimensions as well so I am going
| | 03:13 | to change the width of this control using Source view to 150 pixels.
| | 03:17 | I will go back to Design view and see the visual effect.
| | 03:21 | The controls are little bit wider than before.
| | 03:23 | I will go back to Source view, change the width to 300, go back
to Design view and you will see that the control is much longer.
| | 03:34 | Now the actual width of the control doesn't
affect how much data that user can type in.
| | 03:40 | To affect that value you use a property
called maxchars for maximum characters.
| | 03:46 | It looks like this, "maxchars =" and then the
length of the value that you are willing to accept.
| | 03:53 | If I put in a maximum characters value of 100 that
means that when the user has typed in 100 characters,
| | 03:59 | the next time they type in a value, the data entry will be rejected.
| | 04:03 | There won't be any validation error message or any other output to
the user instead the text input controls simply stop receiving input.
| | 04:11 | You can also restrict input using a property called Restrict.
| | 04:15 | The Restrict property takes a set of characters and ranges, for instance
for a first name, I am going to accept alphabetical characters and spaces
| | 04:24 | and I can dictate those values like this, A-Z
uppercase, A-Z lowercase and a space character.
| | 04:33 | Now the user can type in alphabetical
characters but cannot type in numbers.
| | 04:38 | And just as with the maximum characters attribute, the
reaction from the text input control will be simply
| | 04:44 | to reject any characters that aren't listed in the Restrict property.
| | 04:48 | There won't be any validation error messages or rather
feedback to the users, the input will simply be ignored.
| | 04:53 | One more thing about the text input control,
it has a property called Display as Password.
| | 04:59 | When you set the Display as Password property to True, the user sees
asterisks (*) displayed instead of the actual characters that they type.
| | 05:07 | The purpose of this property is to allow you to create a text input
control that you use to collect password information from the user.
| | 05:15 | The extent of this security model is simply that somebody peeking
over the user's shoulder, won't be able to see what they are typing.
| | 05:21 | Other than that the text input control is
doing exactly the same thing as before.
| | 05:25 | Now I will go back to Design view, I am going to visually
resize the object by clicking and dragging on its right handle
| | 05:34 | and setting it back to an explicit size of 200 pixels.
| | 05:38 | Notice that as I drag right and left I am seeing
the number of pixels displayed in the Tool Tip.
| | 05:43 | I will release it, take a look at the resulting code and you
will see that the width is now set explicitly to 200 pixels.
| | 05:51 | I will save and run the application and when
the application is displayed in the browser,
| | 05:58 | I can now click into the text input control and type a value.
| | 06:03 | Notice the display of the asterisks as a result of the Display
as Password property, so that's the text input control.
| | 06:10 | The text area control is very similar
in behavior to the text input control.
| | 06:15 | I will go back to Design view and then go back to the Components view
and I will select the text area control and drag it into my application.
| | 06:26 | As with the text input control, the text area control
does not have an associated label and so if you want
| | 06:34 | to display a label next to the control, you use a separate label control.
| | 06:38 | I will drag in the label control and give it a text value of notes.
| | 06:43 | The text area control can be sized to whatever width and height you need.
| | 06:49 | Now let's take a look at the code that was generated.
| | 06:51 | The text area control is generated through an MXML tag, mx:TextArea.
| | 06:57 | As with the text input control, you typically want to
assign an ID attribute I will call this notes input.
| | 07:07 | Notice that I am using the word "input" at the end of each of the IDs, this
is simply a convention that I typically use to remind myself of what kind
| | 07:15 | of control it is and it doesn't so much
matter to me that one is a text input,
| | 07:19 | the other is a text area because the way
they return their value is always the same.
| | 07:24 | So that's a look at the text input and text area controls,
the two controls used most commonly to accept simple text.
| | 07:32 | There is one other control that's worth
looking at that I will call the Rich Text Edit.
| | 07:36 | I will go back to Design view, I will add in one more label control
right around here and I will give it a text property of rich text.
| | 07:48 | And now I will go get a Rich Text Editor
control and drag it into the application.
| | 07:53 | Notice that the Rich Text Editor control is
a much larger control than the other two.
| | 07:59 | I am just going to resize the control and then realign some
of the labels to make everything line up a little bit better.
| | 08:11 | The Rich Text Editor control is a compound control that incorporates a
panel container wrapped around the text area control and then a number
| | 08:19 | of different controls that allow you to affect text font, font size,
bolding, italicizing, underlining, text color, alignment and bullets.
| | 08:31 | Here's how the Rich Text Editor control works.
| | 08:34 | I will run the application, I will click
into the Rich Text Editor and type some text.
| | 08:44 | And then I will select some text and then modify the
text using the controls at the bottom of the editor.
| | 08:54 | I will set the selected text to a specific font Courier New,
I will set it to a larger size 22, I will set it to Bold,
| | 09:04 | Italics and then I will also set it to a particular color.
| | 09:07 | Notice that the Rich Text Editor shows you exactly what the affected
text will look like, it's a WYSIWYG what you see is what you get control.
| | 09:17 | You can then retrieve the generated HTML text
by referring to the controls HTML Text Property.
| | 09:24 | I am going to go back and add one more little bit of code
here, I will close the application, go to Source view
| | 09:33 | and then in the Rich Text Editor control, I
will add an ID attribute of myRichTextEditor.
| | 09:39 | Then in the text area control, I am going to set its
text property using something called a binding expression
| | 09:50 | which I will explain more in a later video.
| | 09:52 | The binding expression looks like this, myRichTextEditor.html text.
| | 09:59 | Now the goal of this binding expression is to display
the generated HTML text from the Rich Text Editor
| | 10:06 | in the text area control, I will run the application.
| | 10:14 | Once again I will click into the Rich Text Editor and type in some text
and then I will select some text and make some changes to the formatting.
| | 10:29 | Notice up here in the text area control, I am now seeing
the value of the Rich Text Editor's HTML text property.
| | 10:37 | The purpose of the Rich Text Editor is to allow you to
easily implement a data entry system that supports HTML 1.0,
| | 10:44 | the same sort of HTML that the Flash Player is able to display.
| | 10:48 | Once again there are significant limitations to how much HTML supported,
there is no support for HTML tables or cascading style sheets,
| | 10:56 | but to the extent that HTML is supported the ability
to easily implement an editor is a valuable trick.
| | 11:03 | So those were the three data entry controls, the
text input, the text area and the Rich Text Editor.
| | 11:10 | In the later video, I will show you how to use binding expressions to
easily grab values out of these controls as the user interacts with them.
| | 11:17 | And then in videos in another chapter, I will show you how to put
together full data entry forms, collect the data from multiple controls
| | 11:24 | and package them into data objects that you can
then share with dynamic application servers.
| | Collapse this transcript |
| Using binding expressions| 00:00 | In this video, I am going to describe the use of binding expressions to
pass data from one object to another in a Flex application at runtime.
| | 00:09 | A binding expression is a way of creating relationship between
two objects where the value of a property of a first object known
| | 00:17 | as the Source Property is broadcast to a destination.
| | 00:22 | The destination is a property of another object that wants to receive
that value and have it be updated whenever the value changes at runtime.
| | 00:30 | There are two syntax styles that you can
use to create a binding relationship.
| | 00:34 | There is a shorthand version that you use inside
an MXML attribute declaration and longhand version
| | 00:40 | that uses the MX binding tag to create the relationship.
| | 00:44 | I will show you both syntax styles and
you can choose whichever one you like.
| | 00:49 | To demonstrate a simple binding relationship,
I am going to create two controls.
| | 00:54 | I will start off with a text input control.
| | 00:58 | By the way, if you are following along in these exercises,
| | 01:00 | I am putting this code into a file called
bindingexpressions.mxml in the Chapter 03 Begin Project.
| | 01:08 | I will put in the text input control and assign an ID.
| | 01:11 | This text input control's text property will be the source
for the binding expression and whichever control serves
| | 01:18 | as the source always must have an ID, so that you can uniquely
identify the object and refer to it in the binding expression.
| | 01:26 | I will assign the ID as myInput.
| | 01:29 | Now I will add a label control.
| | 01:32 | The label controls text property will be
the destination for the binding expression.
| | 01:37 | When you use shorthand binding syntax as I am going to do
here, the Destination control does not need unique identifier.
| | 01:44 | I simply put in the text property and
then I will put in a binding expression.
| | 01:49 | The shorthand syntax of a binding expression
consists of a pair of braces wrapped
| | 01:54 | around in ActionScript expression that
refers to the value you want to listen for.
| | 01:59 | The expression here will be myInput.text.
| | 02:04 | I will complete the tag and then save and run the application.
| | 02:09 | When the application appears in the browser, I will
click into the text input control and start typing.
| | 02:16 | Notice that as I type the label control picks up the
new value of the text property of the text input control
| | 02:24 | and displays its new value upon every keystroke, this is because
the text property of the text input control is a bindable value
| | 02:32 | and this text property automatically executes its bindings
whenever the user types in a new value on every keystroke.
| | 02:39 | Let's go back to the code and explain it a little bit more thoroughly.
| | 02:42 | The relationship between the text input and the label
control is the relationship of a broadcaster and a listener.
| | 02:49 | The text input control broadcasts changes each time its
text property is changed and the label control is listening
| | 02:57 | for those changes and using them in its text property.
| | 03:01 | You can also create the same relationship using the <mx:Binding> tag.
| | 03:05 | Using Source view, I am going to create two more controls.
| | 03:08 | The second text input will have an ID of myinput2
and then the second label control will have an ID.
| | 03:22 | When you set up a binding relationship using the <mx:Binding>
tag both the source and the destination controls need IDs
| | 03:29 | because you will be referring to both
of them in the <mx:Binding> attributes.
| | 03:32 | So I will put in an ID for this label of my label 2.
| | 03:37 | Now I will create a binding relationship.
| | 03:41 | The <mx:Binding> tag is a compiler tag.
| | 03:44 | It doesn't actually represent a class per se, instead it's interpreted
in the background into ActionScript code during the compilation process.
| | 03:52 | These sorts of binding tags are commonly placed below
the application start tag, but above any visual controls.
| | 03:59 | Technically it doesn't really matter where they are placed though.
| | 04:02 | I will add an <mx:Binding> tag and I will
set the source and the destination.
| | 04:08 | The source will look like this, myInput2.txt and the
destination will look very similar, it will be the controls ID
| | 04:18 | and its property where I want the value to flow to myLabel2.txt.
| | 04:25 | So that's what an <mx:Binding> tag looks like.
| | 04:35 | I will run the application.
| | 04:37 | I will click into the second text input control and type
some text and once again you see the effect of the binding.
| | 04:48 | That each time the user changes the text input controls text
property by typing another key stroke, the binding is executed
| | 04:55 | and the label that's listening for the
value receives the value and displays it.
| | 05:01 | Now why would you use the <mx:Binding>
tag instead of the shorthand version.
| | 05:05 | Well as long as, you are dealing exclusively with MXML declarations
of objects, the <mx:Binding> tag is really overly verbose.
| | 05:12 | It does what you wanted to do but it obviously
takes a lot more code to do it.
| | 05:17 | But the <mx:Binding> tag is very important where you want to
bind to variables or other values that are not declared in MXML.
| | 05:25 | Let's take an example of a variable.
| | 05:27 | I am going to put in an <mx:Script> section and
then within the <mx:Script> section I am going
| | 05:32 | to declare a variable named myString, data typed as a string value.
| | 05:37 | And I am also going to mark it as bindable.
| | 05:42 | You mark variables as being bindable by adding something called
the bindable metadata tag right before the variable declaration.
| | 05:50 | In ActionScript 3 your own variables are not bindable, that
is they aren't capable of automatically broadcasting changes
| | 05:57 | when their values update unless you mark them explicitly.
| | 06:01 | So you put in the bindable metadata tag
right before the variable declaration.
| | 06:05 | Now to pass a value into this variable,
you can use the <mx:Binding> tag like this.
| | 06:11 | I am going to change the destination of this binding to myString and
this means that as the user types the value into the text input control.
| | 06:20 | The value will be automatically passed over to the myString variable.
| | 06:24 | Then I will take the label control and I will add in a
text property and I will bind to the value of myString.
| | 06:32 | We are now getting a 3 level binding relationship.
| | 06:36 | The user types into the text input control, that value is passed
to the myString variable through the <mx:Binding> tags instructions
| | 06:44 | and then the value is passed over to the label control as
a result of the binding expression in its text property.
| | 06:51 | I will save and run the application one more time.
| | 06:54 | I will click into the second text input control and
type a value and once again you can see the effect.
| | 07:01 | As the user types into the text input control
the value is reflected in the label control.
| | 07:06 | You can use bindings in a lot of different ways, not just for
text values but also to handle the results of interactions
| | 07:14 | with visual controls such as sliders and scrollbars.
| | 07:18 | You can set up these relationships using either the simple
shorthand syntax, wrapping ActionScript expressions inside braces
| | 07:25 | or you can set them up using the more explicit <mx:Binding> tag.
| | 07:29 | The <mx:Binding> tag is typically used in circumstances where you want
to pass a value to an object that's been declared in ActionScript rather
| | 07:37 | than in MXML, but in many circumstances you have
the choice of the style syntax that you prefer.
| | Collapse this transcript |
| Formatting data| 00:00 | In this video, I am going to describe the use of Formatter
classes to format and present data in visual controls.
| | 00:07 | There are five Formatter classes in the Flex Framework
that were designed respectively to format data
| | 00:13 | for currency, numbers, dates and a couple of other types of data.
| | 00:18 | The purpose of a Formatter is to take a value that could be a string
or could be a specifically tight value; such as a number or a date,
| | 00:26 | and we turn that value as a formatted string that
is friendly to the eyes or make sense to the user.
| | 00:32 | To demonstrate these classes, I am going to use
an application called the Currency Converter.
| | 00:37 | I have already built the basic part of the application
and I am going to start by reviewing its functionality.
| | 00:43 | The Currency Converter is a panel that contains
a couple of labels and some data entry controls.
| | 00:49 | There is a text input that allows the users to type in a dollar value and
then a numeric stepper control at the bottom of the panel that allows you
| | 00:57 | to set the current value of a dollar in terms of euros.
| | 01:01 | At the time of the recording of this video, one dollar=0.78 euros,
and so when you run the application by virtue of a couple of bindings,
| | 01:11 | when the user changes either the number of dollars or the value of a
euro, the value of the euro's equivalent is displayed on the screen.
| | 01:19 | So the value of $100 is ?78.
| | 01:22 | If the value of a dollar increases, value of the euros
increases or if you change the value of the dollars
| | 01:30 | that you want to convert, the result changes as well.
| | 01:33 | Let's take a look at the code that's implementing this functionality.
| | 01:37 | I will go back to Flex Builder and go to Source view, and then
double-click on the editor window to expand it to full screen.
| | 01:46 | The user interface consists of a panel wrapped around a few Label controls.
| | 01:52 | The text input control that accepts the number of
dollars uses the restrict property to make sure
| | 01:57 | that the user is only typing in numeric characters or the period.
| | 02:01 | At the bottom of the application within the control bar, there is a
numeric stepper that's allowing the user to set the number of euros.
| | 02:10 | The idea of this control is euros input.
| | 02:13 | By the way, the numeric stepper reflects its current value
through its value attribute rather than through a text attribute.
| | 02:19 | Notice that the step size property of the numeric stepper is set to
0.01, this means each times the user clicks the numeric steppers up
| | 02:27 | or down buttons, it will result in incrementing
or decrementing the value by that amount.
| | 02:32 | Finally, there is an MXML declaration of
a number variable with an ID of euros.
| | 02:38 | I will scroll over a little bit so we can see the
entire expression within the number attribute.
| | 02:42 | It's a binding expression that executes a calculation
incorporating the dollars input control and the euros input control,
| | 02:50 | and executing a type casting against the properties of these
controls to make sure that they are each treated as numeric values.
| | 02:58 | The syntax number () around a value is a casting expression,
it means take this value and turn it into a number.
| | 03:07 | And then the asterisk is a multiplication operator, so no matter whether
the user affects the input for the dollars or the numeric stepper
| | 03:14 | for the euros, this binding expression will re-execute each time.
| | 03:19 | And then the Label control at line 13 is displaying the
value of that euros variable through a binding expression.
| | 03:26 | The reason this binding expression works is because when you
declare variable using an MXML tag set such as the MX number tag,
| | 03:34 | that variable is automatically bindable; unlike an ActionScript, you
don't have to explicitly mark it as bindable using a metadata tag.
| | 03:42 | Now, notice when I run the application that the value is represented
correctly, but if I start making changes to the value in a way
| | 03:50 | that it calculates the value with too many decimal points for instance
or with a complex large value that this value was not correctly displayed
| | 03:58 | as a currency value, and that's what we are
going to use a Formatter class to change.
| | 04:03 | Here is how you use a Formatter class.
| | 04:06 | I am going to place the cursor right after the MX number tag.
| | 04:10 | A Formatter class is a non-visual component, and by convention,
| | 04:14 | non-visual components are commonly declared above
the visual components in an MXML application.
| | 04:20 | I will add a Currency Formatter class and give
it an ID of CF, standing for Currency Formatter.
| | 04:29 | The Currency Formatter class has a number of
properties that you can use to affect its behavior,
| | 04:33 | but for the moment, I am going to use in its default behavior.
| | 04:37 | Each Formatter class has a format method.
| | 04:40 | To execute a formatting operation, you wrap the format
method around the value that you want to present.
| | 04:47 | So now, I will go down to the Label that's
presenting the value of the euros variable
| | 04:52 | and I will wrap it inside the Currency Formatter's format method.
| | 04:58 | Whenever the euros variable updates, it will cause this binding expression
to re-execute and the formatted value will be correctly presented.
| | 05:06 | I will save the changes to run the application.
| | 05:14 | And now, notice that the euros is displayed with a dollar sign,
| | 05:18 | that's because the Currency Formatter class's
default currency symbol is the dollar.
| | 05:24 | So I will make a change to that.
| | 05:25 | I will come back to the code.
| | 05:28 | I am going to come down here to this label where I already
have a euros symbol and I'll copy it to the clipboard.
| | 05:33 | Then I will go back to the Currency Formatter and I am going to change two
properties; first the currency symbol which I will set to the euro symbol
| | 05:43 | and then the precision which I will set to a value of 2.
| | 05:47 | The Currency Formatter's precision property
affects the number of characters after the decimal.
| | 05:53 | It doesn't affect rounding, there is actually a separate
rounding property that you can apply to affect that.
| | 05:59 | But that's enough for the moment to see the result.
| | 06:01 | I will save the change and run the application again, and you can now see
that the value of euros is displayed using a euro symbol at the beginning
| | 06:09 | of the string and the correct number of values after the decimal.
| | 06:13 | But what if you want to change the characters that
are used in the thousands and decimal separators.
| | 06:18 | Well, in European currencies, this is what they do,
they are opposite to what the United States dollar uses.
| | 06:24 | So once again, the Currency Formatter anticipates
this challenge and provides the following properties.
| | 06:31 | I am going to change the decimal separator 2 to
a comma and the thousand separator 2 to a period.
| | 06:39 | Once again, I will save and run the application.
| | 06:45 | And notice that the comma is now being used into the decimal position.
| | 06:49 | And if I add the number of dollars, you will see that
the period is being used as the thousand separator.
| | 06:55 | You can use any of the Formatter classes you need by declaring them using
MXML, setting their properties and then applying the Formatter class
| | 07:04 | through the format method wrapped around the value that you want to format.
| | 07:08 | Again, there are five Formatter classes that are a part
of the pre-built Flex Framework, the Flex Class Library.
| | 07:15 | You can investigate those by looking at the help system.
| | 07:18 | I will go to the Currency Formatter class and press
Shift+F2 to open up the help system for that class.
| | 07:26 | Notice that the Currency Formatter class is
extended from a super class called Formatter.
| | 07:31 | And if I click into the Formatter class, it shows
me that its subclasses include Currency Formatter,
| | 07:37 | Date Formatter, Number Formatter, Phone and Zip Code Formatter.
| | 07:42 | Each of these classes has its own set of rules and
properties that you use to affect the way it formats data.
| | 07:48 | For instance, the Date Formatter class is sort of a special case class.
| | 07:53 | It takes a value which is either a date or a string that
can be parsed as a date and returns a formatted date.
| | 08:00 | You set the format of the date that you want to present using the
format string property, described at the bottom of the screen here.
| | 08:07 | And if you want to see exactly how to present formatted
strings, go to the property section of the Date Formatter,
| | 08:13 | from there to the format string property and you
will find the extensive documentation for each
| | 08:19 | of the patterns that you use in presenting a date value.
| | 08:23 | So that's a quick look at how you use Formatters.
| | 08:25 | I will be using Formatters in other videos and you will see some
specific examples, for instance, of the Date Formatter class when I get
| | 08:33 | into the use of the DataGrid control in a later chapter.
| | Collapse this transcript |
| Presenting images| 00:00 | In this video I'm going to describe how to use the image
control to present graphical images in Flex applications.
| | 00:07 | As with all visual controls in the Flex framework you can
instantiate an image control using either MXML or ActionScript code.
| | 00:15 | In this video, I'm going to exclusively use the MXML tag MX:image,
| | 00:21 | but just keep in mind that all the tasks that I'm
going to accomplish can also be done with ActionScript.
| | 00:27 | To create an image control, use an image tag like this.
| | 00:31 | I'll put in the MX:image tag and
then I'll set the source property.
| | 00:37 | The source is pointed at the location of a graphical file.
| | 00:41 | There are four graphical formats that are supported directly
by the Flash Player, that is that the Flash Player can download
| | 00:47 | and display at runtime.
| | 00:49 | These include the JPEG format, the GIF format,
| | 00:54 | SWF files, which are actually Flash documents,
| | 00:57 | and PNG files which are a newer graphical format that's
used by Fireworks for instance as its native format.
| | 01:04 | The syntax for downloading image and
displaying it at runtime looks like this.
| | 01:09 | I'm going to be using an image that's in the Assets
subfolder of my application's source root called Big Ben.jpg.
| | 01:17 | I'll set this source path to incorporate
the location of the folder Assets
| | 01:22 | and I'll separate the folder name and the image name
with a / and then put in the name of the image, Big Ben.jpg.
| | 01:32 | I'll save and run the application
| | 01:35 | and notice that the image is now displayed in the
application when it's loaded into the browser.
| | 01:41 | The syntax that I used is download the image at runtime,
rather than embedding it into the application.
| | 01:47 | Here's another way of accomplishing the same thing.
| | 01:50 | I'm going to eliminate the image tag and go in to Design view.
| | 01:54 | This time I'm going to drag an image
control from the Components view.
| | 01:59 | I'll locate the image control,
| | 02:01 | drag it into the application where it drops into place.
| | 02:05 | And then with the image control selected,
I'll go to the Flex Properties view.
| | 02:09 | The source attribute has a Browse button.
| | 02:13 | I'll click the Browse button,
and navigate to the source root.
| | 02:18 | From there to the Assets subfolder,
| | 02:20 | and from there I'll double click to select the Big Ben graphic
| | 02:24 | and just as before, the graphic is displayed in the application.
| | 02:28 | I'll look at the Source view to see what code was generated,
| | 02:31 | and it looks exactly like the code that I manually put in before.
| | 02:35 | I'll save and run the application
| | 02:41 | and the application is displayed on screen.
| | 02:45 | When you use this sort of syntax where you put the actual
location of the graphic in the source attribute of the image,
| | 02:52 | you're downloading the image at runtime.
| | 02:54 | It's also possible to embed the image into the application.
| | 02:59 | To do this, wrap the location of the
file in the embed compiler function.
| | 03:05 | The embedded compiler function looks like this. I'll put
in an at character and then the word embed and then a pair
| | 03:13 | of parentheses and single quotes wrapped
around the location of the graphic.
| | 03:18 | I'll save and run the application again.
| | 03:22 | And let's take a look at the result.
| | 03:24 | The application looks exactly the same at runtime as it did before.
| | 03:28 | The difference is that with the embed function that graphic
has been embedded into the application at compile time.
| | 03:36 | There are pros and cons to this approach.
| | 03:38 | The positive aspect to embedding graphics is that the graphic becomes
immediately available as soon as the application loads into the browser.
| | 03:47 | The application doesn't have to make a secondary request
to the Web server and download the graphic at runtime.
| | 03:52 | It's already there.
| | 03:54 | The drawback of embedding a graphic is that it
increases the size of the compiled application.
| | 04:00 | Let's see the result.
| | 04:01 | With the application embedded I'll go to the bin-debug directory.
| | 04:06 | I locate the compiled application, presenting images.SWF.
| | 04:10 | I'll right-click, select Properties,
| | 04:14 | and I'll show you that the size of the compiled application, that
is the debug version of the application, is approximately 263 K.
| | 04:23 | Now I'll get out of the Properties view.
| | 04:25 | I'll go back to the runtime loading syntax. I'll
remove the @embed = function from around the graphic.
| | 04:32 | I'll save the changes, which causes the
application to automatically recompile.
| | 04:38 | Go back and view the properties of the application,
| | 04:41 | and the application, which was 263 K, is now down to 252 K.
| | 04:46 | Whatever the size of your graphic is, that is how much you expand the
size of the application after compilation when you embed the graphic.
| | 04:55 | So again there are pros and cons to that approach.
| | 04:58 | You can resize images very easily by simply setting
the image control's weight and height properties.
| | 05:04 | When you do this, you typically want to make sure that
you're maintaining the aspect ratio of the image.
| | 05:10 | The aspect ratio is defined as the ratio of weight to height.
| | 05:15 | When you set one of the dimensions and not the other,
the image control automatically resizes the other dimension,
| | 05:22 | but it leaves the control itself at a distorted size.
| | 05:25 | So here I've set the width and you'll see
that usually the graphic is displayed correctly.
| | 05:30 | But the image control itself is actually maintaining its original height.
| | 05:34 | You can also explicitly set the width and heigh. Here I'm going
to visually adjust it so that it trims the rest of the image
| | 05:42 | and now I've maintained the aspect ratio.
| | 05:45 | It's also possible to skew an image.
| | 05:48 | Here I'm going to undo the last operation by pressing Control+Z
on my keyboard. Now I'll go back to the code. I'm going to
| | 05:56 | set an attribute called maintainAspectRatio to a value of false.
| | 06:01 | This means that when I said one of the attributes but not the other, I'm
asking the image control to maintain the native dimensions individually,
| | 06:09 | and I'm giving permission to skew the
image in the way it's presented visually.
| | 06:14 | I'll go back to Design view, and now you can see
that the image is stretched in one dimension or another.
| | 06:21 | The default behavior of the image control is to
not skew it, that is to maintain the aspect ratio.
| | 06:27 | And if you want the image to be distorted
in some fashion you have to say so.
| | 06:32 | It's also possible to use a graphic as a background
for many different kinds of components.
| | 06:37 | Here's example I'm going to remove this maintainAspectRatio attribute
and the explicit width and leave the image at its original size.
| | 06:45 | I'm going to give you a demonstration of how to
use this image as a background image for a container.
| | 06:52 | I'm going to add a VBox container in.
| | 06:55 | I'm going to set the background image to the
same graphic that I used in the previous example.
| | 07:00 | I'll copy and paste the URL of the image, assets/BigBen.jpg,
and then I'll set the VBox to an explicit width and height.
| | 07:10 | I'll set the width to 150 pixels and the height to 200
and then I'll look at the application in Design view
| | 07:18 | Notice that the VBox down below now
shows the graphic as its background.
| | 07:23 | To show the effect of this, I'll open up the VBox, the vertical
box, into a pair of tags and then add in some label controls.
| | 07:35 | So I've now added four labels within the VBox.
I'll run the application in the browser,
| | 07:44 | and you'll see that the labels sit on top of the graphic.
| | 07:48 | Here's another little trick that you can play with graphics.
Every container has a property called backgroundAlpha,
| | 07:55 | which you can set to allow transparency in the graphic you're
using as its background image. I'll add it into the VBox.
| | 08:01 | backgroundAlpha=". 3".
| | 08:06 | Alpha settings, or transparency, are always set from a value of zero,
which means fully transparent to a value of 1, which means fully opaque.
| | 08:15 | A value of .3 means a 30% level of opacity,
or 70% transparency phrased another way.
| | 08:23 | I'll save and run the application,
| | 08:26 | and you'll see that that background image is now very light
in the background and the objects are laying on top of it.
| | 08:32 | By using the background image attribute to set containers'
backgrounds and then applying an alpha setting to create
| | 08:39 | a certain level of transparency.
| | 08:41 | You can create some very striking visual presentations,
laying objects in a container that uses the graphic as a
| | 08:48 | background image rather than explicitly using the image control.
| | 08:52 | Again the four kinds of graphics that you can load
dynamically include JPEGs, GIFs, PNGs and SWFs.
| | 09:00 | When you set a SWF file that is a Flash document as a graphic,
| | 09:05 | you're only going to be displaying the first frame of that SWF file.
| | 09:08 | If you want to actually have a dynamic animation that was built
in Flash, take a look at another class called the SWFLoader class.
| | 09:15 | that's as S-W-F loader,
| | 09:18 | and you'll find that you're able to incorporate dynamic content
that perhaps was built in the Flash authoring environment.
| | 09:24 | So that's a quick look at how to use graphics in Flex applications.
| | 09:28 | As we get deeper into building actual applications in this video
series we'll be using quite a few graphics and at one point,
| | 09:35 | we'll actually build the whole photo album application
| | Collapse this transcript |
|
|
4. Using Custom ComponentsCreating custom components| 00:00 | In this chapter with the video series, I am going
to describe how to create and use custom components.
| | 00:06 | As you build your Flex application and it becomes larger, more complex
and has more and more features it's tempting and a natural thing
| | 00:13 | to create the entire application in a single source code file.
| | 00:17 | But when you do this it becomes monolithic and much
more complex and hard to maintain over the long-term.
| | 00:24 | By breaking down an application into components or pieces, you
make the application more maintainable and easier to debug.
| | 00:31 | In this video I am going to show you how to create an MXML component that
is a custom component that's built using the MXML programming language.
| | 00:40 | When you create components they should always be
placed into subfolders of your project source root.
| | 00:46 | You can technically place components into the source root itself
but again as the application becomes more complicated you will find
| | 00:53 | that there is a source code management problem and by grouping components
into their own subfolders named for whatever features or functions you want
| | 01:01 | to group together it makes it easier to
find and fix functionality as it comes up.
| | 01:06 | To get started building a very first component
go ahead and import the chapter 04 Begin Project
| | 01:13 | and then open the file use component.mxml from that project.
| | 01:17 | When you create a new custom component you should first create
the folder into which you are going to place the component.
| | 01:23 | I have already created a component subfolder
within the project source root.
| | 01:28 | To create the new MXML component, right click or Ctrl click on
the MAC on the components folder, then select New MXML component.
| | 01:39 | This is the new MXML component wizard.
| | 01:42 | There are only a few selections in this wizard first of all the location
of the component which we have already selected by right clicking
| | 01:50 | on the target folder, next the file name MXML components
or files with .mxml extension just like an application.
| | 01:59 | I am going to name my component simply mycomponent.mxml.
| | 02:04 | As with the application wizard if you don't put the
.mxml extension in, Flex Builder will do it for you.
| | 02:11 | Next, you select what kind of component you
are going to base this custom component on.
| | 02:16 | This is an inheritance model in object oriented terminology.
| | 02:20 | Whatever component you select here is your
component's super class or base class.
| | 02:26 | The default is to base a component on a canvas but you can actually
base a custom component on any component in the Flex framework.
| | 02:35 | For this example I am going to base my
new component on a VBox or a Vertical Box.
| | 02:41 | I will open up the list, type in the letters VB to
jump to VBox and then select VBox from the list.
| | 02:49 | By default the wizard creates the new component with an
explicit width and height of 400 and 300 pixels respectively.
| | 02:56 | If you want your custom component instead to resize automatically based
| | 03:00 | on its contents just remove the default settings
and the width and height text-entry boxes.
| | 03:06 | Then click Finish to create your custom component.
| | 03:10 | A custom component looks like this.
| | 03:12 | It's an MXML file with a root element but
instead of the root element being an application
| | 03:17 | as in an application file the root element is whatever component you
are basing your custom component on, here the root element is the VBox.
| | 03:26 | The root element of a custom component file must declare
the standard XML name space for the MXML language.
| | 03:35 | When you build the custom component using Flex
Builder wizard, it handles this requirement for you.
| | 03:40 | Now I am going to set certain properties to the VBox.
| | 03:43 | First of all I am going to give the VBox a background color.
| | 03:47 | I will set the background color to a value
of ?EEEE which is just an off-white.
| | 03:55 | Then within the VBox I am going to add some components, I will add
a label component with a text value of this is the custom component,
| | 04:06 | I will add a text input control given an ID of my input
and I will add a button control with a label of click me.
| | 04:18 | That's my custom component.
| | 04:23 | In the next video I will show you how to use this custom
component and instantiate it using the MXML programming language.
| | Collapse this transcript |
| Instantiating custom components in MXML| 00:00 | In the previous video I created a custom component called MyComponent.mxml.
| | 00:05 | The component was created in a component
sub-folder of my project source root.
| | 00:11 | In this video I will show you how to declare an
instance of the component in the application.
| | 00:16 | If you are following along with the exercises,
open the file, use component.mxml.
| | 00:21 | I will double click on the tab for that
editor so I can view it in full screen.
| | 00:26 | I want to show you that I am starting from scratch
in how I would clear an instance of the component.
| | 00:32 | The first step in creating an instance of a custom component is
| | 00:36 | to declare a namespace prefix that's associated
with the folder that the component's contained in.
| | 00:42 | The syntax for this namespace prefix looks like this.
| | 00:45 | You place the cursor inside the root element's start tag.
| | 00:49 | Then just as with the standard MXML namespace
you put in the command xmlns:.
| | 00:56 | Now you declare a namespace prefix that will be associated
with a folder or a package in which the component is stored.
| | 01:03 | You can name the namespace prefix anything
you like I am going to call it comps.
| | 01:09 | Then you put in an equals assignment operator and then within
a pair of quotes the name of the folder using package syntax.
| | 01:18 | The package declaration looks like this components.
| | 01:23 | *. This is a reference to all components within this component sub-folder.
| | 01:28 | The next step is to declare an instance of the custom component.
| | 01:32 | Within the application place your cursor between the application tags.
| | 01:37 | Then put in a less than character and start typing comps.
| | 01:42 | Notice that the new custom component is listed by Flex Builder,
you can select it, close the tag set and run the application
| | 01:52 | and there is the custom component displayed within the application.
| | 01:56 | I am going to show you a couple of shortcuts
that are available with Flex Builder.
| | 02:01 | I am going to remove the component declaration and also the namespace
declaration because I would like to show you that Flex Builder is able
| | 02:09 | to generate all this a code little bit more automatically.
| | 02:12 | This time I will start off by placing the cursor between the
application tags and start typing components the actual folder name.
| | 02:20 | This time Flex Builder shows me the components that are a part of that
folder shown in the list of available ActionScript classes and components.
| | 02:28 | I will select components:mycomponent, press Enter and notice
that Flex Builder automatically fills and completes the code.
| | 02:37 | Well, at the same time it automatically adds a namespace declaration.
| | 02:42 | The namespace prefix when you use this automatic feature is
named exactly the same as the actual folder name components.
| | 02:50 | *. Once it's been declared for the first time, you can add
additional component instances as many times as you need to.
| | 02:57 | This application has its layout property set to Absolute so now I
will go into Design view and then click and drag one of the components
| | 03:06 | so that you can see that there are now two
instances of the same component in this application.
| | 03:11 | And now here's yet a third way of adding the components.
| | 03:14 | I am going to delete these components
in Design view, go back to Source view
| | 03:19 | and remove the custom namespace declaration
and then once again return to Design view.
| | 03:24 | I will shrink the Design view Editor back
to its original size and then make sure
| | 03:28 | that I can see the Components view by
selecting Window Components from the menu.
| | 03:33 | Within the Components view there is a custom section.
| | 03:37 | Any custom components that are available to your application will be
displayed in this custom section of the Components view and so this is
| | 03:45 | yet a third way of adding the component to the application.
| | 03:48 | I will locate the custom component MyComponent and I
will click and drag and place it into the application.
| | 03:55 | Now let's take a look at the generated code.
| | 03:58 | In Source view, you will see that the component was
instantiated using a pair of tags and then assuming
| | 04:04 | that the components folder is not already declared as a custom namespace,
a namespace is created automatically using the name NS1 for namespace 1.
| | 04:15 | So to review you can generate component instances using MXML by completely
hand coding, making up your own namespace declaration and then using it.
| | 04:25 | You can allow Flex Builder Source view to auto complete your MXML
declarations in which case it will create the required namespaces
| | 04:33 | and create namespace prefixes that are the same as the actual folder name
they represent or you can drag and drop custom components in Design view
| | 04:42 | and the Design view feature will generate the appropriate
namespaces using the syntax NS1, NS2 and so on.
| | 04:49 | So that's how you create a custom component using MXML.
| | Collapse this transcript |
| Instantiating custom components in ActionScript| 00:00 | In the previous chapter I showed you how to instantiate
a custom component using the MXML programming language.
| | 00:07 | Just as with the visual components that are members
of the Flex class library it's also possible
| | 00:12 | to instantiate your custom components using ActionScript code.
| | 00:16 | To demonstrate this I am going to create a brand new application.
| | 00:20 | If you are following along with the exercises, follow these steps.
| | 00:24 | From the menu select File, New, MXML application,
name the new application, use component with as.mxml.
| | 00:36 | Set the new applications layout property to Absolute so
that you can position objects in specific pixel locations
| | 00:43 | on the screen and click Finish to create the application.
| | 00:47 | Now our goal is to instantiate and place a custom
component instance on the screen at runtime.
| | 00:52 | We are going to need some ActionScript code to do this.
| | 00:55 | Place the cursor between the application
tags and create a new script section.
| | 01:00 | Within the script section create a new private function named init app
which returns void, void means you aren't actually returning anything.
| | 01:10 | Put in the opening and closing brace that make up the function body.
| | 01:14 | Now go back to the application tag and
add a creation complete event handler.
| | 01:23 | The creation complete event is dispatched as the application starts
up and it's a great place to call startup or initialization code.
| | 01:31 | Within the creation complete event handler call your new init app method.
| | 01:36 | Next you will create a component.
| | 01:38 | It's generally a good idea to declare the
component instance outside of any functions
| | 01:43 | so that you can refer to the object later on in the applications runtime.
| | 01:48 | Place the cursor above the init app function and declare a new
variable named MyComp, after the variable name type in a colon
| | 01:58 | and you will see a list of all available
ActionScript classes in this project.
| | 02:03 | Now start typing the name of the component you want to instantiate.
| | 02:07 | By typing MY I see the component listed, it's the only ActionScript
class available in this project that starts with that string.
| | 02:15 | I will press Enter or Return to select the component.
| | 02:18 | Notice that Flex Builder automatically generates an import statement.
| | 02:22 | The purpose of the import statement is
to tell the compiler where the class is.
| | 02:27 | You only have to import a class once and then
you can refer to it as many times as you want.
| | 02:32 | Finish the declaration of the variable by putting in a semicolon.
| | 02:36 | Now as the application starts up within the init app function we
are going to instantiate the component that is create the instance
| | 02:44 | and then we will add it to the display list
of the application so that it will be visible.
| | 02:49 | Place the cursor inside the init app method.
| | 02:52 | Next create the instance of the component
using the code MyComp=new MyComponent().
| | 03:00 | This is a call to the constructor method of the MyComponent class.
| | 03:10 | The MyComp variable has now been initialized, it's
available in memory but it's not yet visible to the user.
| | 03:17 | To make it visible we need to add it to the applications display list.
| | 03:21 | We will do that by calling the applications addChild
method and passing in the new visual component MyComp.
| | 03:30 | Once the object's been added to the display
list you can then position it on the screen.
| | 03:35 | Remember that this application has its layout property set
to Absolute and so we can add X and Y property settings
| | 03:42 | to the component to indicate where we want it to be positioned.
| | 03:45 | I will add these two lines of code.
| | 03:48 | MyComp.x=100 meaning I want the component's left edge to be 100 pixels from
the left border of its container the application and MyComp.y=100 meaning
| | 04:01 | that we want to place the object's top border 100 pixels
from the top of its container once again the application.
| | 04:09 | That's all the code.
| | 04:10 | Let's review it again.
| | 04:12 | The import statement is an instruction to the compiler
indicating where the MyComponent class is stored.
| | 04:18 | The variable MyComp is declared outside of any
functions so that it persists and can be addressed
| | 04:24 | in other ActionScript code later on in the application.
| | 04:28 | The init app method or function is called upon the creation
complete event of the application that is upon application startup
| | 04:36 | and the job of the initialization function is to initialize or instantiate
the component, add it to the display list using the addChild method
| | 04:45 | and then position it on the screen using the components X and Y properties.
| | 04:50 | Let's see the application at work.
| | 04:52 | I will save and run the application in the browser
and you will see that as the application starts up,
| | 04:58 | it creates and positions the component on the screen.
| | 05:02 | So your custom components that are built in MXML are really
ActionScript classes in the background and you can instantiate them
| | 05:09 | and use them using pure ActionScript code if you prefer.
| | 05:13 | Whether you use MXML or ActionScript in many cases is a
preference on the part of the developer, it's your choice
| | 05:20 | and you should use whichever style of code you are more comfortable with.
| | Collapse this transcript |
| Declaring component properties| 00:00 | When you create your own custom MXML components
it's possible to declare public properties
| | 00:05 | through which you can then pass in values
that affect the component's behavior.
| | 00:10 | To demonstrate this capability I am going to create a brand new component,
the component will be a VBox wrapped around a label control and I am going
| | 00:19 | to create the component with a public property that allows me
to pass in the string that I want to display in the component.
| | 00:25 | If you are following along in these exercises go to the chapter 04 Begin
Project to the source root and from there to the components folder.
| | 00:35 | Right click on the folder and select New MXML Component.
| | 00:40 | Name this component ordered label and base the component on a VBox.
| | 00:48 | Remove any within height settings, they are proposed
by the new MXML component wizard and click Finish.
| | 00:55 | Now within the VBox add a label control and then set these styles on
the VBox tag, set the border style as solid, also add padding settings.
| | 01:12 | The padding settings are the number of pixels from
the inner border of the container to its contents.
| | 01:18 | Add padding bottom, padding top, padding right and
padding left settings also to a value of 5 pixels each.
| | 01:24 | We also want the label to be centered within the VBox so to accomplish
| | 01:38 | that add a horizontal align property of center
and a vertical align property of middle.
| | 01:45 | Now to the point of this exercise we want the user of the component to
be able to pass in the text value that in turn is displayed in the label.
| | 01:53 | To accomplish this create a script section.
| | 01:58 | Within the script section declare a public
variable with the syntax public var,
| | 02:05 | then give the property a name myString and give it a data type of string.
| | 02:12 | We want to be able to display the string value within the
label component that's nested within the custom component.
| | 02:19 | To do this we will mark the variable as bindable
and then go back down to the label control
| | 02:26 | and add a text property using a binding
expression binding to the value of myString.
| | 02:32 | This is our completed custom component.
| | 02:34 | It has a public property called myString
which is displayed within the label control.
| | 02:39 | Save your changes to the component and then create a brand new application.
| | 02:45 | From the menu select File, New, MXML application.
| | 02:50 | Name the application usepropertyvalues.mxml and
set its layout to vertical and click Finish.
| | 02:59 | Now go to Design view.
| | 03:03 | Once Design view is opened look at the Components
View in the lower left corner of Flex Builder.
| | 03:08 | You will see your new custom component bordered label.
| | 03:13 | Drag an instance of the bordered label component into the application.
| | 03:17 | Notice that in Design view it shows that there is
a value called myString that's the public property.
| | 03:23 | Go back into Source view and to clear the myString attribute and
put in some simple text I will put in the text MyCustomMessage.
| | 03:36 | I will save the change and run the application.
| | 03:39 | You will see that the application displays the custom component and it's
very light on the screen but there is a border that's surrounding the text.
| | 03:47 | Now I am going to go back and make some changes to the custom
component to make its effect a little bit more obvious.
| | 03:54 | I will go back to the custom component bordered
label.mxml and first I am going to add some attributes
| | 04:01 | to the label component that's nested within the custom component.
| | 04:04 | I will set the font size to 12 pixels, the
font weight to bold and the color to blue.
| | 04:13 | In addition I will go to the container itself the VBox that's at the
root of the custom component and add a background color attribute
| | 04:29 | of white and I will also make some changes to the border.
| | 04:35 | I will set the border color to black and the border thickness to 2 pixels.
| | 04:42 | I will go back to the application that's using the bordered
label component and run it and you will see the effect
| | 04:48 | of the new component blue text on a black background.
| | 04:52 | I don't like that visual effect but now that the component is built and
here is the magic of this process it's quite an easy matter to go back
| | 05:00 | and make little incremental changes until you
get the component doing exactly what you want.
| | 05:05 | I am going to change the color attribute
of the text value from blue to white.
| | 05:13 | I will save and run the application usepropertyvalues one more
time and you can now see the effect of the bordered label.
| | 05:21 | The nice thing about this component once it's working exactly
the way I want is I can use it as many times as I like.
| | 05:28 | I will add another instance of the bordered label component put in a
myString attribute of another custom message, run the application again
| | 05:39 | and you will be able to see that you can use
the component now as many times as you want.
| | 05:45 | You can use the component from any point in the application and then later
on if you want to change the look of this particular custom component,
| | 05:52 | you will be able to go back to the component source code, make the
changes there, recompile, rebuild the application and you will see
| | 05:59 | that the component always behaves the same wherever it's instantiated.
| | Collapse this transcript |
| Declaring component methods| 00:00 | When you create your own custom components it's possible
to declare public functions that can then be called
| | 00:06 | from outside the component instance to control its behavior at runtime.
| | 00:11 | To demonstrate this capability I have created a new custom component that's
somewhat more complex than the once previously created in this chapter.
| | 00:19 | The name of this custom component is scrollingtext.mxml.
| | 00:24 | It's a component that's designed to allow a bit of
text to move from right to left across the screen.
| | 00:29 | Let's first do a code review of the component
so I can describe how it's built.
| | 00:34 | I will open up the Source view editor to full screen.
| | 00:37 | The component is based on a canvas which is critical
to this functionality because it will allow us
| | 00:42 | to place a label component nested within
the canvas at specific pixel positions.
| | 00:48 | Within the component there is a private variable
called myTimer which is an instance of the timer class.
| | 00:54 | The purpose of the timer class in ActionScript
3 is to allow you to call a bit
| | 00:58 | of functionality periodically each time the
timer indicates that it's now time to do so.
| | 01:04 | The timer does this by dispatching an event called Timer and when the Timer
event happens in this component we are calling a method called Move Label.
| | 01:13 | There is a bit of logic down here that takes a look at
the current position of the label within the component,
| | 01:19 | examines whether it's already gone off the screen to the
left side of the component and if so replaces it on the right
| | 01:26 | and otherwise it simply decrements the value of its
ex-property to move it a pixel over to the left.
| | 01:32 | Notice that as the application is created it
instantiates the timer with a timed value of 10
| | 01:38 | which is the number of milliseconds between each time or event.
| | 01:42 | And then in the init method there is an Add Event Listener Call
that's saying when the event happens, call the method again.
| | 01:49 | I will be describing this sort of event handling
in a later chapter but for now just accept
| | 01:54 | that the timer class is firing this event every 10 milliseconds
causing the Move Label function to be called internally.
| | 02:01 | This component however only does what it's
supposed to do if the timer has been started
| | 02:06 | and that's where our public functions are going to come into play.
| | 02:09 | With the component open we are going to add two methods both marked
as public so that they can be called from outside the component.
| | 02:18 | For each public method, add the words public
function and then the name of the method.
| | 02:24 | The first method will be called Start and it will have a single
line of code that calls the Start method of the myTimer object.
| | 02:34 | Similarly we will have another public function called Stop and its
job is to stop the movement of the label by stopping the timer.
| | 02:44 | So that's how you declare a public function of a component.
| | 02:50 | Now let's create an application that uses this component.
| | 02:54 | From the menu select File, New, MXML Application
name the file callcomponentfunctions.mxml
| | 03:06 | and set its layout to vertical and click Finish.
| | 03:11 | Place the cursor between the application tags and create an instance
of the scrolling text component, give it an ID of MyScrollingText
| | 03:23 | and set its text property to a value of a simple message.
| | 03:29 | Also so we can see the fonts more clearly on the screen,
set the components' font size style to a value of 18 pixels.
| | 03:36 | Next add a couple of buttons.
| | 03:39 | The first button will have a label of start scrolling and a
click event handler that calls the method myscrollingtext.start.
| | 03:52 | Add another button component with a label of stop scrolling.
| | 04:00 | Add a click event handler that calls the method
myscrollingtext.stop and now try out the application.
| | 04:14 | I will run the application in the browser and you will see that as
it starts up it doesn't show any text because the initial position
| | 04:21 | of the label within the scrolling component is off its right edge.
| | 04:25 | I will click the Start Scrolling button and
there goes the text scrolling across the screen.
| | 04:31 | When the label control within the custom component scrolls off the
left edge of the container that is the canvas that's at the root
| | 04:37 | of the component it repositions to the right
side again and continues its scrolling.
| | 04:42 | But to stop its scrolling at any moment I can click
the Stop Scrolling button which calls the stop method
| | 04:48 | of the component which in turns stops its internal timer.
| | 04:52 | So once again let's take a look at the code.
| | 04:54 | I have created an instance of the component and created buttons
within the application that call the component stop and start methods.
| | 05:03 | Within the component I have created public functions that wrap the
appropriate functionality to control the component's behavior at runtime.
| | 05:10 | So when you create your own custom components you can declare them
with your own API that is their own Application Programming Interface
| | 05:19 | that allows the consumers of those custom components to very
specifically control the custom component's behavior at runtime.
| | Collapse this transcript |
|
|
5. Using Design ViewUnderstanding Design view| 00:00 | In this chapter I'm going to describe some of the
capabilities of Flex Builder 3's Design view.
| | 00:05 | Some tools that allow you to build
your application in a WYSIWYG manner;
| | 00:10 | that is, what you see is what you get.
| | 00:12 | To get started if you're following along in the exercises at home,
| | 00:16 | import the Chapter05begin project
| | 00:19 | from the exercises folder.
| | 00:21 | From the menu, select File
| | 00:24 | Import
| | 00:25 | Flex Project.
| | 00:27 | Click the Browse button next to Archive file,
| | 00:30 | navigate to the exercises folder to the Chapter05 directory
| | 00:34 | and select Chapter05begin.
| | 00:37 | After coming back to the Import Flex Project dialog box, click Finish.
| | 00:43 | With the project imported,
| | 00:45 | project and go to the source root
| | 00:47 | and open the file photo album.MXML.
| | 00:52 | This Flex application has a set of images
| | 00:55 | Let's first take a look at the Source view
so we can see how the application is built.
| | 01:00 | It is a very simple application,
| | 01:02 | where the layout property is set to absolute
| | 01:04 | and a set of image controls display graphics
that are stored in the application's assets folder.
| | 01:10 | My goal in this chapter is to show
you some of the tools in Design view.
| | 01:14 | So let's start there.
| | 01:16 | Click the Design button above the editor area
| | 01:19 | and then double-click the tab one more time,
| | 01:22 | so we can take a look and see what's available in Design view.
| | 01:26 | One of the things you sometimes see happen when you move back-and-forth
between Source view in Design view and Flex Builder 3
| | 01:32 | is that certain views don't appear correctly all the time.
| | 01:36 | If you come back to Design view for instance, and you don't see
the Flex Properties view or you don't see the Components view,
| | 01:42 | you try resetting the perspective.
| | 01:45 | Go to the menu and select Window,
| | 01:48 | Perspective.
| | 01:49 | Reset perspective
| | 01:51 | and click OK.
| | 01:54 | You should see all of the views
for the design features show up.
| | 01:58 | This will include the Components view
in the lower left corner of Flex Builder
| | 02:01 | and the Flex Properties view in the lower right corner.
| | 02:04 | You'll also see the States view show
up in the upper right-hand corner.
| | 02:08 | This is for managing view states.
| | 02:11 | When you're in Design view, you have the ability
to drag and drop objects around the screen.
| | 02:16 | As I've shown in previous videos, you can use this to
get the application looking exactly the way you want.
| | 02:22 | Here we have a set of image controls
displaying different graphical files.
| | 02:27 | Instead of going into the code and setting X and Y properties
and then testing the application in an iterative manner,
| | 02:35 | Design view allows me to drag and drop objects
and place them exactly where want them to show up.
| | 02:41 | So for instance in this application where I want a cascading
set of graphics to show up, I can click and drag each object
| | 02:48 | and place exactly where I want it.
| | 02:51 | I'm making a sort of a collage here,
| | 02:54 | graphics laid one on top of another.
| | 02:58 | To test the application after I've moved things around.,
| | 03:01 | I'll save and run it in the browser,
| | 03:04 | and you'll see the graphic show up
exactly like they did in Design view.
| | 03:09 | In later videos in this chapter, I'll show you some of the
more specific tools that are available in Design view,
| | 03:15 | including how to adjust your design area,
| | 03:17 | how to pan and zoom through the design area,
| | 03:21 | and how to use the Flex Properties view
| | 03:23 | to set some of the most common properties in an application.
| | Collapse this transcript |
| Using the Components view| 00:00 | When you layout an application using the Design view,
| | 00:03 | one of the most important tools that you
have available is the Components view,
| | 00:07 | the list of available visual components that
let's you drag-and-drop objects onto the screen
| | 00:12 | and then position them,
| | 00:13 | assuming the application is using absolute layout.
| | 00:17 | To demonstrate some creative use of the Components view,
| | 00:20 | create a new application.
| | 00:22 | Select File, New, MXML Application from the Flex Builder menu.
| | 00:28 | Set the file name as UsingComponents
| | 00:32 | and set the layout property of the application to absolute
| | 00:35 | and click Finish.
| | 00:37 | When used in Design view on an application that uses absolute layout,
| | 00:41 | you can drag and drop objects and
place them in specific pixel locations.
| | 00:46 | For instance in this application I am going
to create a simple data entry form.
| | 00:50 | I'll drag in a label
| | 00:53 | and a text input control
| | 00:56 | and place them vertically aligned with each other
using the automatic alignment guides that appear
| | 01:01 | when you drop objects in the design area.
| | 01:05 | Drag in another label and align
it to the left of the first one
| | 01:09 | and drag in another text input control.
| | 01:13 | Once again use the vertical and horizontal alignment
guides to get everything lined up nicely.
| | 01:18 | Finally, drag in a button
| | 01:21 | and place it underneath the first two text input controls.
| | 01:25 | Now we're going to take all those objects
and wrap them into a container of their own.
| | 01:30 | Go down to the Components view to the Layout section
| | 01:33 | and locate the Canvas container.
| | 01:36 | Drag in a Canvas and place it anywhere on the screen.
| | 01:40 | Then select all the components that you
previously dragged into the application.
| | 01:45 | Click anywhere in the application to release
the current selection of the Canvas container.
| | 01:50 | Then click and drag to select all of
the components you previously created.
| | 01:56 | Release the mouse button.
| | 01:58 | Move the mouse over any of the selected components
| | 02:02 | and then draft them all into the Canvas.
| | 02:05 | Notice that you'll be able to tell with the objects
are inside the Canvas by the blue selection marker.
| | 02:12 | Move the components
| | 02:13 | and drop them into the Canvas.
| | 02:15 | Click and drag the Canvas out so that it's about
the right size to contain all those objects,
| | 02:20 | and then try dragging the entire Canvas around.
| | 02:24 | and you'll find that all the objects
within the Canvas move in it.
| | 02:28 | Now click on the application itself
| | 02:31 | and change the application's layout property
| | 02:33 | from absolute to vertical.
| | 02:36 | You can do this in the Layout section
of the Flex Properties view,
| | 02:39 | which appears at the bottom of that view.
| | 02:42 | Now the Canvas appears at the top of the application,
| | 02:45 | centered horizontally.
| | 02:48 | Go back to the design area
| | 02:49 | and select the Canvas one more time.
| | 02:52 | Then go down to the Fill section of the Flex Properties view,
| | 02:56 | just above the Layout section,
| | 02:58 | and click on the selector to
open up the Color Picker dialog box.
| | 03:03 | Select any background color.
| | 03:05 | For instance, I'm going to select a bluish color
| | 03:08 | by moving the color wheel down to the blue section
| | 03:11 | and then choosing a color randomly
from the Color Picker's design area
| | 03:15 | and click OK.
| | 03:17 | And you'll see that you've use Design view
to set the background color of the Canvas.
| | 03:21 | If you now trying to click and move the
Canvas itself around, you won't be able to
| | 03:25 | because the application's layout property being
set to vertical places the Canvas automatically.
| | 03:31 | But you can resize the Canvas by clicking and dragging its handles
| | 03:35 | and setting it to whatever size you like.
| | 03:39 | So that's a look at how to use the Components view
and the drag-and-drop capabilities of Design view
| | 03:44 | to explicitly set up your application
and make it look exactly the way you want.
| | Collapse this transcript |
| Using the Flex Properties view| 00:00 | In this video, I'm going to describe the use
of the Flex Properties view in more detail.
| | 00:05 | The Flex Properties view appears in the lower right corner
of the Flex Builder interface when you working in Design view,
| | 00:12 | and it allows you to set properties through a nice visual interface.
| | 00:17 | The Flex Properties view changes what
properties it displays and allows you to set
| | 00:21 | depending on what you've selected in the design area.
| | 00:25 | For instance with the application currently selected,
| | 00:27 | you'll see that the Flex Properties view has sections labeled Common,
| | 00:31 | Style and Layout.
| | 00:34 | Within this default presentation of the Flex Properties view,
| | 00:38 | each of these sections can be collapsed and expanded.
| | 00:41 | So you can set up the properties view to only see the headings.
| | 00:45 | And then you can navigate to the particular
area you're interested in modifying.
| | 00:49 | For instance, my photo album application
| | 00:52 | currently has a layout set to absolute
| | 00:54 | and a width and height that adjust
automatically to the size of the browser window.
| | 00:59 | So if I wanted to set the width and height of the application
| | 01:02 | I'd first click on the application
| | 01:04 | then go to the Flex Properties view to the Layout section
| | 01:08 | and then set explicit width and height values.
| | 01:11 | I'm going to set the application to a width the 400,
| | 01:14 | and a height of 300.
| | 01:17 | I'll safe and run the application,
| | 01:20 | and you'll see that the application no longer fills up the
entire web browser, but instead is restricted to the
| | 01:25 | dimensions that I said in the properties view.
| | 01:28 | I'll close the browser and return to Flex Builder
| | 01:31 | and then remove the width and height settings
| | 01:34 | just by deleting their values from the
Layout section of the Flex Properties view.
| | 01:40 | The properties view, again, updates what properties it
displays depending on what you currently have selected.
| | 01:46 | For instance in this application, if I click on the label
control, the common section shows ID, Text and Enabled
| | 01:54 | and in the style section I see styles
that are appropriate for a label control.
| | 01:59 | If I instead click on one of the image controls,
| | 02:02 | I see an ID, a Source,
| | 02:04 | a Scale content property and an Auto load property.
| | 02:07 | And my style selections are much more limited.
| | 02:10 | And if I click on the application itself, I once again see a different
set of properties and styles that I can set through this interface.
| | 02:17 | The Flex Properties view actually has three different subviews,
| | 02:21 | known as the standard view,
| | 02:23 | that category view and the alphabetical view.
| | 02:26 | Not all of the application components properties and styles,
for instance, are accessible through the standard view.
| | 02:33 | Only those that the designers of Flex Builder have
judged to be the most popular and commonly used.
| | 02:38 | But let's say for instance that you wanted to set padding styles.
| | 02:42 | The padding styles determining the amount of padding from
the inside border of a container to its first components.
| | 02:49 | So I'm going to come over to the Flex Properties view
| | 02:52 | and switch to alphabetical view
| | 02:54 | by clicking on the button with the A and Z icons.
| | 02:57 | And I now see all of the properties
and styles of this particular component.
| | 03:03 | They're listed alphabetically,
| | 03:05 | so I'm going to navigate down to the Ps for padding
| | 03:08 | and they are all the padding settings listed together.
| | 03:11 | Now when you have an application whose
layout property is set to absolute
| | 03:16 | the padding styles don't really do anything at run time.
| | 03:19 | But at design time they actually change
the appearance of the alignment guides.
| | 03:24 | So with all my paddings set to values of 20.
| | 03:27 | I can now click and drag on objects and you'll see the
alignment guides appearing 20 pixels from the top,
| | 03:34 | 20 pixels from the left and so on.
| | 03:36 | In addition to the alphabetical view,
there's also the category view.
| | 03:40 | The category view breaks down and displays each of
the styles and properties of the selected object
| | 03:46 | listing them by Common, Effects, Events
| | 03:50 | Constraints, Size, Styles and Other.
| | 03:53 | It takes a bit of getting used to to find the
particular styles and properties that you're looking for.
| | 03:57 | For instance, the padding settings are listed under Styles,
| | 04:02 | whereas event listeners are listed under Events.
| | 04:05 | Remember that the Flex Properties view allows you to navigate easily
| | 04:09 | between the three different presentations.
| | 04:11 | The standard view,
| | 04:13 | the category view,
| | 04:15 | and the alphabetical view.
| | 04:17 | And in any case, the Flex Properties view allows you to
set the properties styles and so on and of every component
| | 04:24 | through a visual interface rather
than directly through Source view.
| | Collapse this transcript |
| Navigating the Design Area| 00:00 | In this video I'm going to describe how to control the design area.
| | 00:04 | That's the desktop area of where you actually do your
visual design while using Flex Builder's Design view.
| | 00:11 | the toolbar across the top of the Design view editor
| | 00:14 | has a number of widgets that you can use to
affect what's happening in Design view.
| | 00:18 | I am going to expand the size of the Design view editor
to full-screen by double-clicking on it's tab
| | 00:25 | and we'll be the better see all the different
tools that are available in the toolbar.
| | 00:29 | Within the toolbar area, there are these buttons.
| | 00:33 | The Refresh button allows you to make sure that the design area
is showing you the current contents of an application.
| | 00:40 | It's very common to make a change to an application in Source view
| | 00:44 | and then when you come back to Design view,
not see the new version of the application.
| | 00:48 | To demonstrate this I'll go to Source view
| | 00:52 | and I'll go to the last image
| | 00:54 | and I'm going to change the image's
Y property to a value of 1000 pixels
| | 00:59 | and then come back to the design tool.
| | 01:02 | And you may not always see the application update.
| | 01:05 | But if you want to make sure you're
seeing the most recent version,
| | 01:08 | just click this Refresh button
| | 01:10 | and the design area will update and make sure
that it's showing you the most recent version.
| | 01:15 | Another valuable tool is the Show Surrounding Containers widget.
| | 01:20 | This widget allows you to click on any object in Design view
| | 01:24 | and click the button
| | 01:26 | and you'll see us shaded presentation of
the containers in which the object is stored.
| | 01:31 | Now in this simple application where there's
only one container, the application itself,
| | 01:36 | you don't see much,
| | 01:37 | but let's say for instance that I'd taken a number of
these images and placed them into of a VBox container.
| | 01:43 | Let's do it.
| | 01:44 | I'll restore the size of the design area,
| | 01:47 | and then I'll drag in a VBox into the application.
| | 01:51 | When you add in a VBox or an HBox container
| | 01:54 | from the Components view,
| | 01:56 | you're prompted for the container's width and height.
| | 01:59 | I'm going to leave the width set to fit the content
| | 02:02 | and the height to 100% of its current container
| | 02:05 | and click OK.
| | 02:07 | Notice the Design view shows that container as an outline.
| | 02:11 | Now I'm going to drag an object into the new container.
| | 02:14 | I'll take the photo of big Ben
| | 02:16 | and drag it and place it in the container.
| | 02:19 | Notice the little blue line that indicates
I am about to drop the object into the VBox.
| | 02:24 | It's now inside the VBox.
| | 02:27 | Now I'll drag in one of the objects and place it
underneath the Big Ben object also inside the VBox.
| | 02:34 | Now I'm going to select the Big Ben image and
once again click the Show Surrounding Containers button
| | 02:40 | and you see now the complete containership hierarchy.
| | 02:44 | The image's inside the VBox and of
the VBox's inside the application.
| | 02:48 | So this is a great way of visualizing and
seeing how the application is behaving.
| | 02:53 | The next one I'm going to show you is the design area selector.
| | 02:57 | By default, the application is set to a design area setting
| | 03:01 | of Fit to window.
| | 03:02 | This is nice in some ways because you can see the part
of the application that will fit inside the visible area.
| | 03:09 | But in an application where objects are flowing off the screen
to the right or to the bottom, it's very useful to be able
| | 03:16 | to pan and move around the application a little bit more Flexibly.
| | 03:21 | To do with this, set the design area to a specific pixel dimension.
| | 03:25 | When you're working in an application file,
| | 03:27 | and you select the design area pulldown list,
| | 03:30 | you'll see sizes of 1024x768,
| | 03:33 | 800x600,
| | 03:35 | and a custom size setting that allows you to set your own dimensions.
| | 03:39 | I'm going to choose 1024x768,
| | 03:43 | which I consider to be the baseline for screen resolutions today.
| | 03:47 | Here a couple of results.
| | 03:49 | First of all, the application design area now show scrollbars
| | 03:54 | that I can use to navigate sideways and vertically
| | 03:57 | to get to different areas of the application.
| | 04:00 | I can also click on the Pan tool
represented by this little hand icon.
| | 04:05 | Once I've done that and I move the cursor into the design area,
| | 04:08 | I now see the cursor appears as a little hand
| | 04:11 | and I can click and drag and move the application
around visually to get to other parts of it.
| | 04:17 | There's also a Zoom tool that you can use to
zoom into a particular part the application
| | 04:22 | and a Scaling tool that allows you to do much the same thing.
| | 04:26 | I'm going to expand the size of my design area,
so I can see the entire toolbar.
| | 04:31 | Here is the Zoom tool.
| | 04:33 | You can click the tool,
| | 04:35 | and then click on any part of the design area to zoom in.
| | 04:39 | And then to zoom back out you can choose the
Scaling tool and choose a specific pixel percentage
| | 04:45 | or choose Fit,
| | 04:46 | meaning fit the entire application
in the available visible space.
| | 04:51 | To go back to being able to move objects around,
| | 04:54 | click the Select tool.
| | 04:56 | Now you may notice that as you move the cursor over these objects
you'll see in a tool tip a letter wrapped in parentheses.
| | 05:03 | V for select,
| | 05:05 | H for pan
| | 05:07 | and Z for zoom.
| | 05:08 | These are keyboard shortcuts,
| | 05:10 | where you can simply press the appropriate key to access that tool.
| | 05:14 | So for instance to pan, I can press the letter H,
| | 05:18 | move the cursor into the design area,
| | 05:20 | and now I can pan around, up, down, left and right.
| | 05:24 | Or I can press the letter Z and click.
| | 05:26 | And I'll be zooming.
| | 05:28 | And finally I can press the letter V
to go back to select mode.
| | 05:31 | And now I can click and select objects
and move them around the screen.
| | 05:36 | So these are the tools that you have for controlling the design area.
| | 05:40 | The design area's default settings are 100%, that is actual size,
| | 05:45 | and Fit to window, meaning that you won't see scrollbars.
| | 05:49 | And if you want to change that, you can use the
tools in the toolbar above the Design view editor
| | 05:54 | to magnify, pan and otherwise navigate around.
| | Collapse this transcript |
| Creating View States| 00:00 | In this video I'm going to describe how to
use Design view to create a view state.
| | 00:06 | View states aren't strictly speaking a Design view tool.
| | 00:09 | They're Based in code,
| | 00:11 | but Flex Builder's Design view has a States view that's
particularly useful for this tool because it knows how to generate
| | 00:18 | view state code.
| | 00:19 | So what is the view state?
| | 00:21 | A view state is a way of making an
incremental change to existing presentation.
| | 00:27 | The incremental change can involve adding and removing components,
changing properties and styles and also changing the
| | 00:33 | way events are handled and dealt with in the application.
| | 00:37 | In this video I'm only going to be shown you how to actually
set up the view state and in next one I'll show you how
| | 00:43 | to change from one view state to another
using a little bit of ActionScript code.
| | 00:48 | To get started, let's create a simple application.
| | 00:51 | From the menu, select File, New
| | 00:54 | MXML Application,
| | 00:57 | and name the application viewstatedemo.MXML.
| | 01:03 | Set the layout property of the new application to vertical
| | 01:06 | and click Finish.
| | 01:08 | Now we're going to create a simple data entry form.
| | 01:11 | Start off by adding a Panel container to the application.
If the application doesn't open up in Design view, click
| | 01:18 | the Design button first.
| | 01:20 | Then go to the Components view and drag in a Panel container.
| | 01:25 | Double-click on the Panel header and said its title to Log In.
| | 01:30 | Next we'll make sure that the Panel's
layout property is set to absolute.
| | 01:34 | Go to Source view
| | 01:36 | and check the Panel and made sure that its layout property was
set to absolute when you dragged it in from the Components view.
| | 01:43 | Then go back to Design view,
| | 01:45 | and we're going to add two labels and two text input controls.
| | 01:50 | Go to the Components view,
| | 01:52 | drag in the first label
| | 01:54 | and set its text property to User Name.
| | 01:59 | Now drag in a text input control
| | 02:02 | and place it next to the User Name label.
| | 02:06 | Click on the Panel and drag it out so that
you can see the entire text input control,.
| | 02:12 | Next drag in another label and another text input control.
| | 02:17 | Align the second label with the first,
| | 02:21 | change its text property to Password,
| | 02:25 | and then drag in another text input control.
| | 02:31 | One more control and then we'll be done
with the application's initial state.
| | 02:36 | Go to the Components view and dragging a Button control.
| | 02:39 | And then resize the Panel also that it's only large
enough to show the controls you've placed inside it.
| | 02:45 | Select the Button control
| | 02:47 | and change its label to Log In,
save your changes and run the application.
| | 02:55 | And you should see the application present a
login data entry form in its initial presentation.
| | 03:01 | Now we're going to create a view state.
| | 03:03 | A view state is defined as an incremental change to an existing presentation.
| | 03:08 | The initial presentation of any application
or custom component is known as its Base state
| | 03:14 | and every application has a Base state
whether you define it or not.
| | 03:18 | You can define a new state through
Design view in the States view,
| | 03:22 | which appears in Design view in the upper
right-hand corner of the Flex Builder interface.
| | 03:28 | I'll go up to the States view, up here,
| | 03:30 | and create a new state called Register.
| | 03:33 | Each state has a name
| | 03:35 | and you want to give the states descriptive
names that describe what they're for.
| | 03:40 | To create a new state, you can either click on the New State button.
| | 03:43 | Or you can right or Control-click in the States view
and select New State from the context menu.
| | 03:50 | This is the New State dialog box
| | 03:52 | I'll give my new state a name of Register,
| | 03:55 | indicate that I'm basing it on the Base state,
that is the application's initial appearance,
| | 04:01 | and I'll click OK.
| | 04:03 | Now to define the meaning of the new state,
| | 04:06 | make sure that you've selected the
Register state from the States view.
| | 04:10 | Then start making changes to the design of the application.
| | 04:14 | First I'm going to expand the size of the dialog box
| | 04:18 | and move the login button down a little bit.
| | 04:22 | Then I'll drag in another label
| | 04:26 | give it a text property of First Name
| | 04:30 | and then I'll drag in other text input control
| | 04:33 | to collect the user's first name.
| | 04:36 | I'll drag in another label control,
| | 04:39 | place it under the other three.
| | 04:41 | Make sure that it's aligned with them
| | 04:44 | and then change its text property to the Last Name.
| | 04:50 | And once again drag in a text input control.
| | 04:55 | I'll move the button down a bit
| | 04:57 | and change its label from Log In to Register.
| | 05:03 | With the Register state still selected,
| | 05:05 | I'll double-click on the Panel header and change
it's title from Log In and to Register as well.
| | 05:11 | We now have two states that the
application is capable of presenting,
| | 05:15 | the Base state and the Register state.
| | 05:18 | To test these in Design view,
| | 05:20 | go back to the States view
| | 05:22 | and click the Base state,
| | 05:24 | and you should see the login form
presented in its original version.
| | 05:28 | Then click the Register state,
| | 05:30 | and you should see the new version of the
login form when the register state is current.
| | 05:35 | Now in the next video, I'll show you how to change states at runtime
by modifying a property of the application called current state.
| | Collapse this transcript |
| Changing View States at Runtime| 00:00 | In the last video I implemented a view state
using the Design view's States view.
| | 00:05 | I created a new view state, and then with that
view state selected I made design time changes,
| | 00:11 | and then I showed you that you could switch back and forth in design
time between the Base state of the application and the new named state,
| | 00:19 | by clicking the appropriate state in the States view.
| | 00:22 | Now in this video, and I'm going to show you how to use a
little bit of ActionScript code to change from one view state
| | 00:28 | to another at run time.
| | 00:30 | I'll start in the base state.
| | 00:31 | With the base state currently selected I'll drag in a Button
control and place it next to the existing login button.
| | 00:38 | Then I'll move both buttons around
a little bit so that they align correctly
| | 00:44 | Now I'll go to the new button,
| | 00:46 | and now give it a label of the New User.
| | 00:50 | When the user clicks the New User button,
| | 00:52 | I want them to switch to the Register view state
so that they see the additional text entry boxes.
| | 00:58 | To make that happen, I'll select the button
| | 01:01 | and then look at the Flex Properties view,
where there's an onClick attribute.
| | 01:05 | The onClick attribute is an event handler that allows you
to put it a little bit of ActionScript code that will
| | 01:11 | execute when the user clicks the button.
| | 01:14 | Here's the ActionScript code
we'll put in: currentState= 'register'.
| | 01:20 | Notice that the name of the state that we're
switching to is wrapped inside single quotes.
| | 01:25 | That's because in the generated ActionScript code that little
bit of ActionScript is actually wrapped inside double quotes.
| | 01:32 | So we wrapped the string inside
single quotes to nest it properly.
| | 01:36 | Now we're going to change the behavior when we're in the register
state, so when the user clicks the button they'll return
| | 01:42 | back to the login form.
| | 01:44 | I'll go to the register state
| | 01:46 | and notice that the button is displayed in its original location.
| | 01:50 | With this register state active,
| | 01:54 | I'll click and drag the button down
so that it's in it's new position
| | 01:57 | and all change its label from New User to Existing User.
| | 02:04 | When the button is clicked in this state,
I want the behavior to be a little bit different.
| | 02:08 | Instead of switching to the register state,
| | 02:10 | that I'm already in, I'll change the onClick
event handler to say: current state= ''.
| | 02:19 | Now when the user clicks the button while they're in the
register state they'll return back to the Base state,
| | 02:24 | which has a name of a blank string.
| | 02:27 | Let's test the functionality.
| | 02:29 | I'll save and run the application.
| | 02:31 | And when the application is first
presented it'll be in its base state.
| | 02:36 | Now I'll click the New User button
| | 02:38 | and the registration form appears instead.
| | 02:41 | The username and password controls are still there,
but now we see first name and last name controls as well.
| | 02:48 | We also see that the buttons have moved their positions
and that the button was clicked before that showed New User
| | 02:54 | now shows Existing User.
| | 02:56 | I'll click the Existing User button
| | 02:58 | and return to the Base state, which shows a title of
Log In and only the username and password controls.
| | 03:05 | There's a lot more to know about view states, but I'll be talking
about those subjects in the Flex 3 Beyond the Basics video series.
| | 03:12 | For now, you can get started with these states by setting them
up in Design view and using very simple event handler code
| | 03:20 | to change the current state property
of the application from the Base state,
| | 03:25 | which is known by its blank string name to a name state,
| | 03:29 | such as the state named register
that I created in this demonstration.
| | Collapse this transcript |
|
|
6. Application LayoutUnderstanding containers| 00:00 | In this chapter of the series, I'm going
to describe the use of layout containers
| | 00:04 | to model the visual presentation of your Flex application.
| | 00:08 | A layout container is a rectangular area
| | 00:11 | that lays out child visual components using
one of a few different kinds of layout rules.
| | 00:17 | There are a number of different layout containers
that are included with the Flex class library
| | 00:22 | and as I've described in previous videos,
| | 00:24 | one of the best ways to discover and explore these containers
is through the Component Explorer sample application,
| | 00:31 | which you can find at the URL:
examples.adobe.com/Flex3/componentexplorer/explorer.html
| | 00:41 | I'm showing this application on the screen right now.
| | 00:43 | And I'll show you where the container sample code is.
| | 00:47 | If you drill down into the Visual Compnents
section of the Component Explorer
| | 00:51 | and from there into the Container section,
| | 00:54 | you'll find an extensive list.
| | 00:56 | I'll be going into the details of many of
these containers in the videos in this chapter.
| | 01:00 | For instance I'll be talking about the HBox container,
| | 01:03 | which lays out objects in a horizontal row from left to right,
| | 01:06 | the VBox container, which lays out objects
in a single column from top to bottom
| | 01:11 | and the Canvas container,
| | 01:13 | which allows you to place objects as specific pixel locations.
| | 01:16 | Additionally I'll be talking about divided boxes,
which allow you to carve up the application into regions
| | 01:22 | that the user can then adjust manually
by clicking and dragging visual widgets
| | 01:27 | that are generated automatically by the divided box architecture.
| | 01:31 | There's another type of container listed in
this Container section of the Component Explorer,
| | 01:35 | which are categorized as Navigator containers.
| | 01:38 | These include the view stack, the accordion and the tab navigator.
| | 01:42 | I'll describe those in detail in a separate
chapter all about application navigation.
| | 01:47 | But for this chapter our focus is on application layout using
the various containers that are provided in the Flex framework.
| | Collapse this transcript |
| Using the VBox, HBox, and Canvas containers| 00:00 | In this video, I am going to describe the use
of the three main box containers: the VBox,
| | 00:05 | the HBox,
| | 00:06 | and the Canvas container.
| | 00:08 | All three of these basic containers
represent rectangular regions,
| | 00:12 | which in turn can nest other visual objects.
| | 00:15 | Many Flex applications are built around
the notion of a containership hierarchy,
| | 00:20 | where the application is the root container
containing all other components,
| | 00:24 | and then within the application a combination of VBoxes, HBoxes
and Canvas containers are used to lay out all the other objects.
| | 00:32 | If you're following along in the exercises,
| | 00:35 | go ahead and import the Chapter06begin project,
| | 00:38 | and then open up the file box containers.MXML,
| | 00:42 | which you'll find is an empty new application
that we'll use to demonstrate these containers.
| | 00:47 | I'm going to be working primarily in Source view in this demonstration
| | 00:50 | but you could also generate most of this code in Design view
by dragging containers and objects from the Components view.
| | 00:57 | I'll place the cursor between the application tags
and then I'll create a VBox. A VBox is a vertical box,
| | 01:05 | which lays out its objects from top to bottom in a single column.
| | 01:08 | Within the VBox I'm going to create three text input controls.
| | 01:13 | I'll put in a first text input control,
| | 01:15 | and then I'm going to use the keyboard s
hortcut Control+Alt+Down arrow
| | 01:20 | to clone this line of code.
| | 01:22 | I do that once
| | 01:23 | and twice.
| | 01:24 | So we end up with three text input controls.
| | 01:27 | The VBox, the HBox and the Canvas container all have in common
| | 01:31 | that by default, they don't have any background.
| | 01:35 | That is when the application is running they aren't actually visible.
| | 01:38 | But all three of these containers have
the ability to show a background color,
| | 01:42 | and also to show borders around their contents.
| | 01:44 | So to make the box visible, I'm going to add a border style of solid,
| | 01:49 | a border color of black,
| | 01:54 | and a background color of white.
| | 02:01 | Now I'll go to Design view so we can see
what the application looks like.
| | 02:06 | Notice that the three text input controls
are wrapped inside the vertical box
| | 02:10 | and the vertical box container is sizing itself auto-
matically to accommodate the size of its nested objects.
| | 02:17 | Also notice that there isn't any padding within
the container wrapped around a text input controls.
| | 02:23 | You can change this behavior by modifying
the padding styles of the container.
| | 02:29 | I'll go back to Source view,
| | 02:31 | and then place the cursor inside the start tag of the
VBox and I am going to add the four padding styles.
| | 02:37 | Padding bottom, padding top,
| | 02:40 | padding left and padding right,
| | 02:42 | and set them each to values of 10 pixels.
| | 02:49 | I'll then once again go back to Design view.
| | 02:52 | And you see that the container now wraps around
the three objects but allows padding around them.
| | 02:58 | Also noticed that there's an automatic vertical gap
between the objects within the vertical box.
| | 03:03 | You can control the size of that vertical gap
| | 03:05 | through the vertical gap style.
| | 03:08 | I'll go back to Source view
| | 03:10 | and expand the Source view editor
so that I can see all the code.
| | 03:14 | And then within the VBox tag, I'll add
a vertical gap setting up 25 pixels.
| | 03:21 | Once again I'll go back to Design view,
| | 03:23 | and now you can see that there's a lot more vertical
space between the components within the VBox.
| | 03:29 | So that's the basic behavior of vertical box.
| | 03:32 | It lays out objects from top to bottom.
| | 03:34 | Now let's take a look at the HBox for horizontal box.
| | 03:38 | First I'm going to select and copy
the code that I've just created
| | 03:44 | and then I'll paste this code below, so I'm creating another VBox.
| | 03:49 | I'm also going to change the layout property
of the application from absolute to vertical
| | 03:54 | so that the containers stack on top of each other.
| | 03:58 | and then I'll take the second of VBox
| | 04:00 | and change it to a HBox
| | 04:04 | The HBox or horizontal box
| | 04:06 | lays out its nested objects in a single row from left to right.
| | 04:10 | Just as with the VBox, it supports the
border styles, border color, and so on,
| | 04:15 | and it supports background colors and background images.
| | 04:18 | It also supports the padding styles,
| | 04:20 | and just like the VBox it automatically sizes
itself to accommodate its nested child objects.
| | 04:26 | Whereas with the VBox container,
| | 04:28 | you typically use a vertical gap setting to control
the amount of vertical space between objects,
| | 04:33 | with the HBox, you would use the horizontal cap setting.
| | 04:41 | end this would control the amount of
horizontal space between the nested objects.
| | 04:46 | I'll go back to Design view now to see the result of this code
| | 04:49 | and you'll see that with the HBox container
objectS are laid out from left to right.
| | 04:54 | Canvas containers are a little bit different than
VBoxes and HBoxes. Both implement the flo -based layout.
| | 05:00 | That is they layout objects automatically using a two step algorithm,
| | 05:04 | where in the first pass they look at the quantity and the cumulative
size of the nested objects and then in the second pass,
| | 05:10 | they lay the objects out,
| | 05:11 | either from top to bottom or from left to right.
| | 05:14 | With the Canvas container, you place objects
at absolute positions within the Canvas.
| | 05:19 | I'm going to select and copy this code again,
| | 05:22 | paste it in again
| | 05:24 | and I'll change this last container from an HBox to a Canvas.
| | 05:29 | By the way here's a little trick you can use when
you're working in Flex Builder's Source view.
| | 05:33 | I've changed the start tag of this container,
| | 05:36 | and now I need to make the end tag match it.
| | 05:38 | I'll go down to the end tag and delete the existing tag name
| | 05:42 | and then press Control+space.
| | 05:45 | Notice that the matching end tag
is the first item in the list.
| | 05:48 | Even though it's not alphabetically in order now.
| | 05:51 | I'll press Enter, and that completes the end tag.
| | 05:55 | Now the nature of the Canvas container is
that it doesn't automatically layout objects.
| | 06:00 | It places objects within the Canvas using absolute style layout,
| | 06:04 | where each component is placed based on its X and Y coordinates.
| | 06:08 | For this reason, settings like padding, gap and so on
| | 06:12 | don't really have any meaning in a Cnavas container. So I'm
going to eliminate those settings in the Canvas container.
| | 06:19 | I'll keep the background color and border settings so we can clearly
see the Canvas in Design view or when we run the application.
| | 06:27 | And then I'm going to set the X and Y properties
of each of the text input controls.
| | 06:32 | I'll leave the first text input control at the default,
| | 06:35 | which is zero for both the X and the Y.
| | 06:37 | A set the second text input controls
X and Y properties at values of 50
| | 06:44 | and the third at values of 100.
| | 06:49 | And this will result in laying out the
text input controls in a diagonal line,
| | 06:54 | from the top left to the bottom right of the Canvas.
| | 06:58 | Notice I haven't set the width and height of the Canvas.
| | 07:01 | When you don't set the width and height
of any of these three containers,
| | 07:04 | they each expand automatically to accommodate their child objects.
| | 07:08 | Now I'll go to Design view and take a look.
| | 07:11 | Notice that in the third container, the Canvas,
| | 07:14 | the objects are laid out at those specific pixel positions.
| | 07:18 | I can click and drag these objects around
in Design view to change their positions.
| | 07:22 | For instance, I'll track the second text input
control to a position a little bit to the left,
| | 07:28 | and I'll drag the other one a little bit to the top
| | 07:30 | and notice that as I make each move the Canas resizes itself
to accommodate the nested child objects again.
| | 07:37 | I'll save and run the application in the browser,
| | 07:40 | and you'll see the results of this application.
| | 07:43 | A VBox, an HBox and a Canvas,
| | 07:47 | each laid out on the screen,
| | 07:48 | and because the application's layout property is set to vertical,
the containers are stacking on top of each other.
| | 07:54 | You don't explicitly have to use absolute layout
| | 07:57 | or flow-based layouts such as vertical or horizontal.
| | 08:00 | Instead, most applications will mix and match these
strategies to get the visual effect that you want.
| | Collapse this transcript |
| Using the Panel and Control Bar containers| 00:00 | In this video I'm going to describe the use
of the panel and control bar containers.
| | 00:05 | The panel container is like a miniature application.
| | 00:08 | It presents a dialog box like appearance
| | 00:11 | and allows you to lay out objects within its containership
| | 00:14 | either using the vertical and horizontal or absolute layout styles.
| | 00:19 | To demonstrate this, I'm going to create a brand-new application.
| | 00:23 | From the menu, select File, New, MXML Application.
| | 00:27 | Name the new file panel demo.MXML.
| | 00:32 | Set the layout property of the application to absolute,
| | 00:35 | so we can place the panel any where we like,
| | 00:38 | and click Finish.
| | 00:40 | If you're following along in this exercise, and your
application opens up in Design view like mine did,
| | 00:46 | click the Source button to go to Source view
| | 00:48 | and then double-click the tab at the top of
the editor to show the editor in full screen.
| | 00:53 | Set the background color of the application
to a value of #EEEEEE, which is an off-white,
| | 01:00 | and then place the cursor within the application.
| | 01:03 | The panel container is a rectangular area
that is surrounded by a thick border.
| | 01:08 | The border has a header and footer section,
| | 01:11 | and you can control the rounding up the corners
on the border and many other properties.
| | 01:16 | I'll start by creating a panel.
| | 01:18 | I'll type the less than character and then P
| | 01:21 | and then Enter to select MX panel.
| | 01:24 | And then I'll put in the greater than character
and allow Flex Builder to auto-complete the tag set.
| | 01:29 | The panel container supports two properties that display
text in its header area. The first is the title property,
| | 01:36 | which results in displaying a bold label
in the upper left corner of the header.
| | 01:41 | I'll put in the title of My Custom Panel.
| | 01:45 | The other text property is called status.
| | 01:49 | The status property displays as a non-bold label
in the upper right area of the panel.
| | 01:55 | And I'll set the status property to My Current Status
| | 02:00 | and then I'll go in to Design view
to see what my panel looks like.
| | 02:03 | The panel container, just like the VBox, HBox and Canvas containers,
automatically sizes itself to accommodate its nested child components.
| | 02:13 | You can either accept this default behavior,
| | 02:16 | or you can explicitly size the panel.
| | 02:19 | In Design view I can size the panel by
clicking and dragging the lower right corner
| | 02:24 | and setting the panel to a specific dimension.
| | 02:26 | And this allows me now to see the title
and the status displayed in the header region.
| | 02:31 | Because the application's layout property is set to absolute
I can place the panel anywhere in the application I like.
| | 02:38 | And now I can start adding components to the panel itself.
| | 02:42 | The panel container, just like the
application, supports the layout property.
| | 02:46 | That means that you can set its layout property
to horizontal and vertical or absolute.
| | 02:51 | I'll go back to Source view
| | 02:52 | and all set the panel's layout property to a value of absolute,
| | 02:57 | and then I'll go back to Design view.
| | 02:59 | Double click the tab at the top of the editor region,
| | 03:02 | and then open the Components view so I
can drag and drop objects into the panel.
| | 03:08 | I'm going to create a little data entry form here.
| | 03:11 | To do so, I'll drag in a couple labels and
place them in specific positions in the panel.
| | 03:16 | And then I'll drag in a couple of text input controls
and place those at specific positions as well.
| | 03:23 | Notice that Design view allows me to very
quickly prototype the look of my panel.
| | 03:28 | I'll save the changes and run the application,
| | 03:31 | and you'll see that the panel appears on the
screen exactly the same as it does in Design view.
| | 03:36 | I'll close the browser and return to Flex Builder.
| | 03:39 | Notice that the panel has rounded corners at the top
and squared off corners at the bottom.
| | 03:44 | You can change this behavior by setting the rounded bottom
corner style of the panel container to a value of true.
| | 03:52 | Go to Source view,
| | 03:54 | place the cursor inside the panel's start tag,
| | 03:57 | and add the rounded bottom corner style set to a value of true.
| | 04:02 | I'll go back to Design view to take a look at the result.
| | 04:05 | And now you'll notice that the corners
are rounded both at the top and bottom.
| | 04:10 | You can also adjust the corner radius.
| | 04:12 | Instead of this very slightly rounded corners look,
| | 04:15 | I'm going to change the style named
corner radius to a value of 20.
| | 04:23 | This is the number of pixels in the circle
that makes up the radius on each corner.
| | 04:28 | Then I'll go back to Design view,
| | 04:30 | and you'll see that the panel now has much more
radical curvature on both the top and bottom corners.
| | 04:35 | The panel container also supports styles that allow you
to control how much of the background shows through.
| | 04:41 | There's a style called border alpha,
which defaults to a value of.5 or 50%.
| | 04:48 | If you want to make the panel be opaque, so that the background
doesn't show up at all, change the border alpha to 1.
| | 04:55 | I'll go back to Design view,
| | 04:57 | and you'll see that the background color of
the application is no longer showing through.
| | 05:01 | Now I'm going to show you the control bar container.
| | 05:03 | The control bar container is designed to go at the bottom of the panel,
| | 05:08 | and it constitutes a horizontal container
that laysout objects from left to right.
| | 05:13 | And it's typically used to create a wizard like interface,
| | 05:16 | where the components that are used to control behavior are
placed at the bottom of the panel in the footer region.
| | 05:23 | Here's how you create a control bar.
| | 05:25 | You always place it inside the panel,
| | 05:28 | but make it the last component within the panel.
| | 05:31 | I'll create the control bar container as a paired tag set.
| | 05:35 | And then I'll add a couple of button components.
I'll create the first one with the label of Click Me.
| | 05:45 | And then I'll clone that line of code
with the keyboard shortcut Control+Alt+Down.
| | 05:50 | And then I'll clone it one more time.
| | 05:53 | Now let's take a look in Design view.
| | 05:56 | Notice that three buttons are laid out from
left to right in the bottom of the panel.
| | 06:00 | That's the behavior of the control bar.
| | 06:03 | It always places objects from left to right.
| | 06:05 | Now, sometimes if you create a wizard style interface,
| | 06:08 | you may want to push some of the components so
that they hug the right side of the control bar.
| | 06:13 | You can accomplish this with an
invisible control called a spacer.
| | 06:18 | I'm going to add a spacer control between the second
and third button and give it a width property of 100%.
| | 06:26 | That means that the spacer should expand to take up
all available space between these two buttons.
| | 06:32 | The practical result will be to take the last
button and push it way over to the right.
| | 06:38 | I'll go to Design view and take a look at the result
| | 06:42 | notice the gap between the second and third button.
| | 06:45 | And then to really dramatically see the result,
I'll explicitly expand the width of the panel
| | 06:51 | and notice that that last button pushes way over to the right side,
| | 06:55 | because the spacers pushing it over.
| | 06:58 | So that's a look at the panel and the control bar containers.
| | 07:02 | The purpose of the panel container is
to create a dialog box style interface
| | 07:07 | that can contain any other objects you
need and do a nice visual presentation.
| | 07:12 | The panels typically presented in line
with the rest of the application.
| | 07:16 | And as I've shown in previous videos, it can be used to
present nice clean data entry forms and other visual interfaces.
| | Collapse this transcript |
| Laying out the Photo Album application| 00:00 | In this video I'm going to start the work
of creating an actual application
| | 00:04 | using the containership model that I have previously described.
| | 00:07 | This application is going use a mixture of vertical, horizontal
and absolute layout to create a photo album that presents images.
| | 00:15 | The photo album will have a shopping cart interface.
| | 00:18 | So the user will be able to see both the photo album as a catalog
| | 00:21 | and will be able to add items to a shopping
cart once the application is complete.
| | 00:25 | If you're following along in this exercise,
just follow the steps that I describe.
| | 00:30 | Start off by creating a brand-new application.
| | 00:33 | From the menu, select File, New, MXML application
| | 00:38 | and name the application photo album.MXML.
| | 00:44 | Set the layout of the application to vertical and click Finish.
| | 00:50 | If the application opens up in Source view,
| | 00:53 | click the Design button to move to Design view instead
| | 00:56 | and then just click once in the design area
to make sure that the application is selected.
| | 01:00 | Go over to the Flex Properties view,
| | 01:03 | scroll down toward the bottom of the
Flex Properties view to the Fill section
| | 01:07 | and click the selector next to the paint bucket
icon to select the fill color of the background.
| | 01:13 | Using the color wheel, click in the blue area
and then select a color of your choosing.
| | 01:18 | I chose the color with a hexadecimal color value of 69CFF5.
| | 01:24 | If you want to follow my steps exactly, just go ahead and type that
hexadecimal color value into the text entry next to the pound sign
| | 01:32 | and then click OK.
| | 01:33 | Now click the second color selector
| | 01:36 | and change the value here to #FFFFFF, or white,
| | 01:43 | and click OK.
| | 01:45 | And the result should be a gradient color going from top to bottom.
| | 01:48 | Next we'll add in a label control that will serve
as a description of what the application is doing.
| | 01:54 | Go to the Control section of the Components view and drag in a label control.
| | 01:59 | It doesn't matter where you place it because
this application is using vertical layout,
| | 02:03 | the label control will drop it in
the center of the application in the top.
| | 02:08 | Change the text property of the label control
to My Travel Photos and press Enter.
| | 02:15 | Also re-size to label by clicking in the
text area of the Flex Properties view
| | 02:20 | and change the size of the Font in the control to 18 pixels.
| | 02:25 | Also click the Bold and Italics buttons
to make a label stand out a bit more.
| | 02:30 | Now to make the label align to the left of the application,
| | 02:34 | click on the application background
| | 02:36 | then go over to the Flex Properties view and
look at the Common section of the properties view.
| | 02:42 | Change the horizontal align property from center to left.
| | 02:47 | And that will move the label control over to that side.
| | 02:50 | Now we're going to add in a horizontal box.
| | 02:53 | The horizontal box will fill the remainder of the application
| | 02:56 | and allow us to layout objects from left to right.
| | 03:00 | Go to the Components view,
| | 03:02 | to the Layout section.
| | 03:03 | Click and drag an HBox into the
application under the existing label.
| | 03:08 | When you release the mouse button,
you'll see this Insert HBox pop-up dialog.
| | 03:12 | Set both the width and height of the HBox container to 100%
| | 03:18 | and click OK.
| | 03:19 | That will cause the HBox container to take up all
of the available vertical and horizontal space.
| | 03:25 | Next we're going to add in a vertical box and a panel nested
within the HBox so that they layout from left to right.
| | 03:31 | Go to the Layout section,
| | 03:33 | and drag in a VBox.
| | 03:35 | Place it inside the HBox.
| | 03:38 | Set its width to 60% and its height to 100%.
| | 03:44 | And this is where will place our photos.
| | 03:46 | Next drag in a panel
| | 03:48 | and place it next to the VBox but inside the HBox.
| | 03:52 | You'll see the vertical blue selector line
showing you where you're dropping in the object.
| | 03:57 | With the panel selected, set its title to Shopping Cart
| | 04:04 | and then scroll down to the bottom of the Flex Properties view
| | 04:08 | and set its width at 40%. That means 40% of
the available space within the HBox
| | 04:14 | and its height to 100%.
| | 04:18 | So we now have a VBox on the left and a panel on the right.
| | 04:22 | The final step in this exercise.
| | 04:25 | Drag in one more label control and place it
inside the VBox that's within the HBox.
| | 04:32 | Once again watch for the blue selector line that
shows you where the object is being dropped.
| | 04:36 | Change this new label's text property to photo catalog
and also change its text size to 12 pixels.
| | 04:47 | Bold and italic.
| | 04:48 | Save your changes and run the application.
| | 04:52 | Here's what it should look like so far.
| | 04:54 | The application lays out a label control
at the top with the text My Travel Photos,
| | 04:59 | a photo catalog element right below that
| | 05:02 | and a shopping cart container over on the right side.
| | 05:06 | Because of the sizing rules that we've implemented
| | 05:08 | where a vertical box on the left takes up 60% of the available space and
the shopping cart component on the right takes up 40% of the available space,
| | 05:16 | As the user resizes the browser, each of
these components resizes automatically.
| | 05:22 | Notice that as I resize the browser interface,
the shopping cart shrinks and grows accordingly.
| | 05:27 | Now in the next video and going to
showyou another container called a Tile,
| | 05:31 | that allows you to layout objects very simply
and easily in a grid-like presentation,
| | 05:36 | and then we'll use the Tile container
within the photo album application.
| | Collapse this transcript |
| Using the Tile container| 00:00 | In this video I'm going to describe the
use of the container called the Tile.
| | 00:04 | The purpose of the Tile container is to
layout objects in a grid-like appearance
| | 00:08 | and then to add as many rows as are needed to display
whatever components you nest within the Tile.
| | 00:14 | The Tile can layout objects row by row or column by column
| | 00:18 | and you select which of these behaviors
it will use by its direction property.
| | 00:22 | When the direction is set to the default of horizontal,
it lays out one row a time until it runs out of space,
| | 00:28 | and then lays out additional rows as needed.
| | 00:31 | When you set the Tile containers direction to vertical,
it then lays out one column at a time,
| | 00:37 | and then continues laying out as many columns as needed.
| | 00:40 | I'm going to demonstrate the use of the Tile container in the context
of the photo album application that I started in the last video.
| | 00:47 | So if you're following along in this exercise.
| | 00:50 | We opened the photo album.MXML file from the last video,
| | 00:54 | and then go into Source view.
| | 00:56 | I'm going to double-click on the tab at the top
of the editor region to expand it to full screen.
| | 01:01 | You may remember that the application uses a layout
property of vertical to stack objects from top to bottom.
| | 01:08 | And then within that layout, it uses a horizontal box
or a VBox to layout other objects side to side.
| | 01:15 | Within the horizontal box, there's a
VBox that currently contains a label.
| | 01:19 | We're going to add the Tile container underneath
that label so that it lays right under it.
| | 01:24 | Place the cursor after the label control
| | 01:26 | and add in a Tile container.
| | 01:30 | The Tile container has a begin tag and an end tag
| | 01:33 | and to make the Tile container expand to the full width of
its container, the VBox, set a width property of 100%.
| | 01:41 | Next we'll add in components that display images.
| | 01:45 | In the application's Assets folder there's a thumbs directory
| | 01:49 | which contains small versions of all the graphics that we want to display.
| | 01:53 | I'm going to hand code the first image control
and show you where it lies within the Tile
| | 01:58 | and then to save some time we're going to copy
and paste some code that's already been prepared.
| | 02:03 | Place the cursor within the Tile container and create an image tag.
| | 02:07 | Set the image control's source attribute to the following location:
| | 02:12 | assets/thumbs/BigBen.jpg.
| | 02:18 | Be sure to add the closing slash and
greater than symbol to close the tag.
| | 02:23 | Then save and run the application.
| | 02:26 | You'll see the small-scale graphic representing the Big Ben
photo appear right underneath the photo catalog.
| | 02:32 | Now to see the real effect of the Tile container
| | 02:35 | let's go get some prepared code.
| | 02:38 | Go to the Flex Navigator view to the Assets folder.
| | 02:40 | Scroll down to about the middle of the list
| | 02:43 | and double-click to open the file image code.txt.
| | 02:47 | You'll find that it contains a bunch of image controls,
| | 02:50 | each with a different source attribute.
| | 02:52 | Select all of this code and copy it to the clipboard.
| | 02:56 | Then return to photo album.MXML.
| | 03:00 | Make a little bit of space below the existing image control.
| | 03:03 | And then paste in that code within the Tile container.
| | 03:09 | We now have a bunch of images, all wrapped inside a Tile container.
| | 03:13 | Save the change and run the application again.
| | 03:17 | What you should see is that the type of container expands to
fill the available space within its container, the VBox.
| | 03:24 | And if you resize the browser window to
expand the available space for the Tile,
| | 03:28 | you'll see that as soon as it has more space available,
it automatically recalculates its layout,
| | 03:34 | expanding the number of images in each row.
| | 03:37 | I'll double click the top of the
browser window to expand to full-screen.
| | 03:41 | And now you see that the title container
is laying out objects from left to right.
| | 03:45 | Once again, you can also use a Tile container
to layout objects from top to bottom
| | 03:50 | by setting its direction property to vertical.
| | 03:53 | It will then lay out as many items as it can
from top to bottom in the first column
| | 03:58 | and then add as many columns as are needed.
| | 04:00 | The title container is especially useful
when you have a display like this one,
| | 04:05 | where the number of items that you're displaying
takes up no more than about one screen of display.
| | 04:11 | If you start finding that you have hundreds or
even thousands of images that you want to display,
| | 04:16 | the Tile container is not as efficient and you should take
a look at another kind of container called the Tile list.
| | 04:23 | that I'll describe in the next chapter in this video series.
| | 04:26 | But this is the beginning of our application.
| | 04:28 | We have a containership layout,
| | 04:30 | for we have a label at the top
| | 04:32 | a horizontal box containing two containers,
| | 04:35 | of vertical box and a panel.
| | 04:37 | Within the vertical box, a label and a Tile
| | 04:40 | and within the Tile, multiple images.
| | 04:42 | So that's a look at how to use the various containers
to achieve application layout in a Flex application.
| | Collapse this transcript |
| Using constraint-based layout| 00:00 | In this video I'm going to describe the use of constraint based layout
| | 00:04 | to secure objects to particular anchors
in a container that uses absolute positioning.
| | 00:09 | Constraint-based layout properties can only be used
within a container that has its layout rule set the absolute
| | 00:16 | such as the application or the panel container
with their layout property set to a value of absolute.
| | 00:21 | Or the Canvas container, which always implements absolute layout rules.
| | 00:26 | To demonstrate this capability, I'm going create a brand-new application
| | 00:29 | So go to menu and select File, New, MXML application.
| | 00:34 | Name the application ConstraintDemo.MXML
| | 00:40 | and set its layout property to absolute.
| | 00:43 | Then click Finish.
| | 00:47 | Go to Design view,
| | 00:48 | and then from the Components view that appears,
drag in an image control and place it somewhere on the screen.
| | 00:55 | It doesn't matter where it goes for the moment.
| | 00:57 | Then with the image control selected,
go to the Flex Properties view
| | 01:01 | and click the Browse button next to the source data entry.
| | 01:05 | Drill down into the project source root,
| | 01:08 | from there into the Assets folder
| | 01:10 | and select a graphic.
| | 01:12 | I'll choose Alcatraz from the Assets directory
| | 01:15 | and click Open.
| | 01:17 | Finally resize the graphic.
| | 01:19 | Move the cursor over the images of lower right hand handle,
| | 01:23 | click and drag upward,
| | 01:25 | and then hold down the Shift key to make sure that
you're maintaining the aspect ratio of the graphic.
| | 01:30 | You should now be able to drag and place the image anywhere you want on the screen
| | 01:34 | because the application is using absolutely layout.
| | 01:37 | Here's how constraint layout works.
| | 01:39 | When you set a container to use absolute layout,
it uses positioning defaults of X and Y,
| | 01:45 | meaning the number of pixels from the left
and from the top of the container.
| | 01:49 | Constraint layout properties include the ability to anchor an object
| | 01:53 | based on the container's bottom, right, horizontal center,
vertical center and again, the top and left corners.
| | 02:01 | To implement constraint-based layout in Design view,
| | 02:05 | select the object that you want to position.
| | 02:07 | Then take a look at the Flex Properties view
down toward the bottom of the screen.
| | 02:11 | You'll see an interface labeled Constraints that has six checkboxes.
| | 02:16 | Each of those checkboxes represents one of the constraint anchors.
| | 02:20 | For each of the dimensions, vertical and horizontal,
| | 02:23 | you can select either one or two anchors.
| | 02:26 | For instance, with this object selected if I
select a right anchor by clicking the check box
| | 02:33 | and then down at the bottom indicate how many pixels
from the right side that I want to keep the object,
| | 02:38 | I'll type in the value of 100,
| | 02:40 | the object will now be anchored 100 pixels
from the right side of the application.
| | 02:45 | I'll do the same thing with a vertical constraint.
| | 02:48 | With the object selected out click the bottom constraint,
| | 02:51 | and once again set the value of the constraint to 100.
| | 02:56 | This object is now 100 pixels from the bottom
and 100 pixels from the right of the application.
| | 03:02 | I'll save and run the application,
| | 03:05 | and let's see the effect.
| | 03:06 | Notice as the application starts up that the graphic is positioned
100 pixels from the right and 100 pixels from the bottom.
| | 03:14 | If I now resize the browser,
| | 03:17 | every time I make any sort of resizing, notice that the image
is floating and anchoring itself to that bottom right corner.
| | 03:24 | So that's the first example of how to use a constraint-based layout.
| | 03:29 | You can also select constraint-based layouts based
on the vertical center and horizontal center.
| | 03:34 | For instance with the object selected,
| | 03:36 | I'll remove the right anchor,
| | 03:38 | and instead choose a horizontal center anchor
| | 03:41 | and change the value of the horizontal center to 0.
| | 03:44 | This means I want the object directly centered in the screen.
| | 03:48 | I'll do the same thing with the vertical dimension.
| | 03:50 | I'll remove the bottom anchor,
| | 03:52 | and add a vertical center anchor,
| | 03:54 | and set its value to zero.
| | 03:57 | This object will now float in the direct center of the application.
| | 04:01 | I'll save it and run the application.
| | 04:04 | And now, no matter what the size of the browser is,
the object will always be in the direct center.
| | 04:11 | I'll close the browser.
| | 04:13 | You can also use constraint anchors to stretch and shrink an object.
| | 04:17 | For instance with this object selected,
I'll remove the horizontal center anchor
| | 04:22 | and add in both a left and a right anchor
| | 04:26 | and I'll set these anchors to values of 100 pixels each.
| | 04:30 | Now when you resize an image control,
by default, it maintains its aspect ratio.
| | 04:34 | So with the image control selected,
| | 04:37 | I'm going to go to the alphabetical listing of properties,
| | 04:40 | locate the maintain aspect ratio property
and set it to a value of false.
| | 04:47 | And let's see what happens at runtime.
| | 04:49 | I'll run the application
| | 04:52 | and then as I resize the browser,
| | 04:55 | notice how the constraint anchors are stretching the
object back-and-forth, shrinking as the browser shrinks
| | 05:01 | and expanding as the browser expands.
| | 05:04 | You can do this with the vertical dimension as well.
| | 05:07 | I'll go back to the Flex Properties standard view.
| | 05:11 | Scroll down to the Constraint section,
| | 05:13 | remove the vertical center anchor,
| | 05:15 | put in a top and a left,
| | 05:17 | and set those two 100 pixels each as well
| | 05:23 | and now I'll run the application.
| | 05:25 | Now this graphic stretches and shrinks
to accommodate the size of the browser.
| | 05:30 | Always retaining the constraint of 100 pixels from each border.
| | 05:33 | I'm going to add one more setting to this control.
| | 05:36 | I'll go back to Source view for this one.
| | 05:39 | And I'm going to add an Alpha setting of .2.
| | 05:44 | This means that I want the object to only have
20% opacity, meaning it's mostly transparent.
| | 05:51 | I'll run the application
| | 05:53 | and what you'll see is that the graphic
now appears as a white background.
| | 05:57 | And as I resize the browser,
the image dimensions change as well
| | 06:01 | The constraint layout properties are controling
not the position of the object so much as its size.
| | 06:07 | Constraint layout properties are very simple in code.
| | 06:10 | I'm going to expand the Source view to full screen so we can
see as much code as possible and now I'll reformat the code.
| | 06:17 | Notice that the properties are simply left, right, top and bottom.
| | 06:21 | And if I were using the centering properties, those
would be named vertical center and horizontal center.
| | 06:27 | You don't have to set up constraint layout in Design view,
| | 06:30 | but the code generation capability of Design view
does a very nice job at mocking up this code.
| | 06:36 | Later on, if you want to change these settings,
it's quite easy to do so in code.
| | 06:40 | I just go into the code and change each of these values
from 100 pixels to 50 pixels from that anchor.
| | 06:49 | I'll save and run the application one more time.
| | 06:51 | And now I see that the graphic takes up
more of the background of the application.
| | 06:56 | So that's a look at constraint-based layout.
| | 06:58 | It's a fairly simple feature of the Flex framework,
| | 07:01 | and it allows you to position on objects based on left, right,
top, bottom, vertical center and horizontal center anchors.
| | 07:09 | Remember that it only works in containers that support absolute layout.
| | 07:14 | The Application and the Panel container
when their layout is set to absolute,
| | 07:18 | and the Canvas container, which always uses absolute layout rules.
| | Collapse this transcript |
|
|
7. Using Cascading Style Sheets (CSS)Understanding Cascading Style Sheets (CSS)| 00:00 | In this chapter of the video series, I'm going
to describe the use of cascading style sheets
| | 00:06 | to affect the look and feel of your Flex applications.
| | 00:09 | If you're already a web developer, you may be familiar
with the use of cascading style sheets in the world of HTML.
| | 00:16 | Cascading style sheets is implemented
in Flex in a very similar fashion.
| | 00:20 | You can apply styles to the individual components,
| | 00:24 | to whole groups of components based on their names,
| | 00:27 | or to groups of components based on
classes or what Flex knows as stylenames.
| | 00:33 | Throughout this video series I've already been
using styles without commenting too much on it
| | 00:38 | but I want to clarify at this point that whenever you set
a font size, a color or a font weight on a label or a text control,
| | 00:46 | you're applying a cascading style sheet.
| | 00:48 | A style is different from a property in many ways,
| | 00:51 | and I'll show you is we go along how styles are implemented.
Not only in line as attributed in an MXML declaration,
| | 00:58 | but also in actual stylesheets that are embedded
in an application or stored in external files.
| | 01:05 | I'll also show you how you can apply styles programmatically
through an API known as the styles interface.
| | 01:12 | In this first video I'm just going to show you a
very simple example of styles applied to label control.
| | 01:18 | I'll set up the styles using Flex Builder's Design view,
| | 01:21 | which does a good job of generating required code.
| | 01:25 | Lets take this label control which has the text Hello World.
| | 01:29 | If you're following along in the exercises, import
the Chapter07begin project from the exercises folder
| | 01:36 | and then open the file CSS demo.MXML.
| | 01:40 | Then go in to Design view and select
the label control that's in the file.
| | 01:44 | With the label control selected,
go to the Flex Properties view
| | 01:48 | and look at the Style section.
| | 01:51 | Make the following changes to the control.
| | 01:54 | Set the font family to Courier New.
| | 01:57 | This is a typewriter style font that has a fixed pitch.
| | 02:02 | Set the font size to 24 pixels.
| | 02:07 | Click each of the style buttons
right next to the font size setting,
| | 02:10 | bold,
| | 02:11 | italics,
| | 02:12 | and underline.
| | 02:14 | And also set the font color by clicking on the
color selector and choosing any color you like,
| | 02:21 | and clicking OK.
| | 02:23 | Now let's take a look at the generated code.
| | 02:26 | I'll click the Source button to go into Source view
| | 02:29 | double-click the Source view editor's tab to take it to full screen,
| | 02:33 | and then I'll do a little bit of code reformatting so you can
see all the code on screen. Each of these settings that
| | 02:39 | was generated as I interacted with
the Flex Properties view is a style.
| | 02:44 | fontFamily, fontSize, fontWeight,
| | 02:47 | fontStyle, textDecoration and color.
| | 02:50 | If you're familiar with cascading stylesheets in the world
of HTML, you'll recognize these property names because
| | 02:57 | they're exactly the same names as are used in web browsers.
| | 03:01 | One of the differences in property naming that you'll see though is that
in an HTML environment that names of properties are commonly hyphenated.
| | 03:09 | For instance fontFamily would be font-family,
| | 03:13 | fontSize, font-size, and so on.
| | 03:16 | In the world of XML, we can't use hyphens in the property names.
So instead Flex uses a style commonly known as camel caps,
| | 03:25 | that is capitalization in the middle of a phrase
to make the words separate from each other.
| | 03:30 | The general pattern in understanding
what the names of properties are,
| | 03:34 | is that if you have a hyphenated name in HTML,
| | 03:37 | to translate that to a Flex name, you take out
the hyphen and you uppercase the next character.
| | 03:44 | So font-family becomes fontFamily with an uppercase F in the middle.
| | 03:49 | These are called in-line style declarations.
| | 03:52 | They're very different from the world of HTML,
| | 03:55 | where you actually have a style attribute and then
you list your properties separated with semicolons.
| | 04:00 | Here each of the properties is represented by its own MXML attribute.
| | 04:06 | Pretty much every visual component in the entire Flex class
library supports these basic styles. The ones that affect fonts.
| | 04:14 | And then different controls support different
styles depending on their requirements.
| | 04:19 | For any particular control, if you're not sure what styles
that control supports take a look at the Help system.
| | 04:26 | I'm going to click into the label control Source,
| | 04:29 | and then press Shift+F2 to bring up
a Help system for that label component.
| | 04:37 | Within the API Help for every component, you'll
see a styles link at the top of the Help screen.
| | 04:43 | Click on the styles link and you'll see a listing of all the
different styles that are supported by that particular component.
| | 04:50 | Each style will be listed by its name,
| | 04:53 | its data type, string, integer, arrays and so on,
| | 04:58 | and whether it supports something called CSS inheritance.
| | 05:01 | I'll talk about CSS inheritance later on.
| | 05:04 | But for now, the important thing is just to know that you can
find out what styles are supported by each individual component
| | 05:11 | just by looking at the documentation
| | 05:14 | Now in the next video, I'll show you how to declare
styles using more conventional stylesheet syntax,
| | 05:20 | something that will look very familiar if you already
use cascading style sheets in the context of HTML.
| | 05:26 | I'll show you how to embed a stylesheet in an application and also
how to create an external stylesheet and link it into an application.
| | Collapse this transcript |
| Using embedded style sheets| 00:00 | In this video I am going to describe the use of embedded
stylesheets to affect all of an application's visual components.
| | 00:08 | As I mentioned in the previous video, the implementation
of cascading style sheets in Flex is similar to that of HTML.
| | 00:15 | As with HTML, you can either embed a stylesheet
or stored it in an external file.
| | 00:21 | In this video I'll show you how to embed the stylesheet and how to set up
what we call selectors that determine what rules apply to what objects.
| | 00:29 | To create an embedded style sheet I'm going to demonstrate
using an embedded style sheet in the file CSS demo.MXML.
| | 00:38 | Start by placing the cursor after the application
start tag. Then put an end mx:Style tag set.
| | 00:45 | Within the mx:Style tag, that you can add as many selectors you want.
| | 00:51 | There are three different kinds of selectors
in the Flex implementation of CSS.
| | 00:56 | The first and most commonly used is called a type selector.
| | 01:00 | It's similar to a tag selector in HTML.
| | 01:04 | Lets say for instance that you wanted to affect
all label controls in the entire application.
| | 01:10 | You'd start off by putting in the name
of the control you want to affect.
| | 01:14 | It is case-sensitive so you want to make sure that you spell the name of
the control exactly the same as its built in its equivalent MXML tag.
| | 01:22 | Then put in a pair of braces.
| | 01:25 | Next, to build the stylesheet within the braces add one
property and value for each property you want to effect.
| | 01:33 | For instance, if I wanted all labels throughout the entire
application to have a font family of Courier New,
| | 01:40 | I would type it in like this: font-family:"Courier New".
| | 01:48 | Noticed that the name of the property
is separated from its value with a colon
| | 01:52 | and the entire declaration is ended with a semi-colon.
| | 01:56 | There are two other things I like to point out about this code.
| | 01:59 | Notice that when you embed a style sheet you can now use
hyphenated property names, just like you would in HTML.
| | 02:06 | In fact, you can go back and forth between
hyphenation and camel case syntax in this context.
| | 02:12 | I tend to use hyphenated names because Flex Builder has an auto
complete feature that recognizes the hyphenated names in this context,
| | 02:20 | but not the camel cased versions.
| | 02:22 | For instance, if I moved down to the next line and typed in font-
and then press Control+space to bring up a list of available properties,
| | 02:30 | I'll see hyphenated names but not camel cased names.
| | 02:33 | I'll select font-size then put it a colon,
| | 02:37 | and then a numeric value.
| | 02:39 | Notice that I'm just mimicking what I
already put in the label control below.
| | 02:47 | I'll go ahead finishing off filling in all the properties that
I had in the in-line versions below. I'll put in text-decoration,
| | 02:55 | set to a value of underline.
| | 03:00 | I'll set the color to the same color I used
before, EBF3F5. I'll set the font style to italic.
| | 03:16 | Now I'm going to take out all the
settings from the original label control.
| | 03:25 | Run the application to test the results,
| | 03:27 | and you'll see that all the styles that I declared
in the embedded style sheet apply to the label.
| | 03:34 | Now I can make as many copies of the label as I want.
| | 03:38 | I'll clone the label code a few times,
| | 03:41 | save and run the application,
| | 03:43 | and you'll see that these styles all apply to all label controls.
| | 03:48 | Now in the next video. I'll describe it a little
bit more detail the meaning of the type selector,
| | 03:53 | and also the other kinds of selectors that you can apply including class,
or stylename selectors and the occasionally used global selector.
| | Collapse this transcript |
| Understanding style selectors| 00:00 | In this video I'm going to describe the
use of selectors in cascading style sheets.
| | 00:05 | Three different types of selectors in the Flex implementation of CSS,
| | 00:10 | known as type selectors, stylename selectors and the global selector.
| | 00:15 | In the previous video I should have is a type selector
to affect all instances of a particular component.
| | 00:22 | One important thing to know about type selector is that
they can only be declared at the application level.
| | 00:28 | If you try to define a type selector in a custom component for instance,
| | 00:32 | you'll get a compiler error indicating that you can't do that.
| | 00:36 | Type selectors and the global selector can
only be declared at the application level.
| | 00:41 | In contrast, stylename or class selectors
can be defined anywhere in the application.
| | 00:47 | In the last video I showed you that by
creating a type selector for the label control,
| | 00:52 | all instances of the label control
received a certain set of properties.
| | 00:56 | I'll run the CSS demo application in its current state
| | 01:00 | to show you that all of the label controls are picking
up all the styles in that particular selector.
| | 01:07 | Here is the next type of selector.
| | 01:09 | It's called a stylename selector.
| | 01:11 | It works like this. You create an arbitrary style
name by declaring it in your embedded style sheet.
| | 01:19 | Style names always start with a period
| | 01:21 | And then have whatever name you assign.
I'm going to call this .redfont.
| | 01:28 | Then I'll put in a pair of braces to wrap
whatever properties I want to include
| | 01:32 | and then I'll put in the color property
set to a color of #FF0000, for red.
| | 01:41 | Now this stylename selector is not yet going to be applied to anything
because no components have said that they're going to use this style.
| | 01:48 | Now, I'll go down to one of the components
at the bottom of the application
| | 01:52 | and I'll add a styleName attribute
| | 01:55 | and set it to the name to redfont.
| | 01:59 | I'll save the changes and run the application,
| | 02:01 | and let's take a look at the result.
| | 02:05 | The last label in the set now is red.
| | 02:09 | It inherits all the other settings because it's still a label,
| | 02:13 | but where there's a conflict between
a type selector and a stylename selector,
| | 02:17 | the property in the style name selector takes precedence.
| | 02:21 | I don't really like the color on that background too much.
| | 02:24 | So I'm going to change things around a little bit.
| | 02:27 | I'll go back to the original label selector and
change that to a standard color of 000000 for black.
| | 02:36 | I'll also use an application type selector to change the
application background. Now there's not a lot of functional
| | 02:44 | difference between applying the style here and applying it in the
application tag, but as long as I'm setting up styles in a style sheet
| | 02:51 | is consistent to do it in this form.
| | 02:54 | I'll put in a background color of #EEEEEE for an off-white.
| | 03:04 | So now the application background will be an off-white,
| | 03:07 | the standard label color will be black,
| | 03:09 | and labels that are members of the redfont stylename
or class will be red. I'll save and run the application.
| | 03:18 | And there's the result.
| | 03:19 | All of the label's black except for the one that's red.
| | 03:24 | Let's try another kind of control.
| | 03:26 | I'm going to add a text control here and give
it a text property of "This is a text value".
| | 03:35 | I'll run the application and let's see what happens so far.
| | 03:41 | Notice that the text control picks up all
the same values as the label control.
| | 03:46 | Even though there isn't a specific
type selector for the text component.
| | 03:51 | This is because of the text component's inheritance hierarchy.
| | 03:54 | Let's take a look at the documentation for the text control.
| | 03:58 | You'll find that the text control is
extended directly from the label control.
| | 04:03 | I'll press F1 to bring up the Help system.
| | 04:07 | Click on the link for the text control to
go into the API documentation for that control.
| | 04:12 | And then take a look at the inheritance tree for the text control.
| | 04:16 | Notice under inheritance it indicates that
the text control extends the label control.
| | 04:22 | In object-oriented terms we say that
a text control is a label control.
| | 04:28 | One aspect of inheritance in the world of cascading style sheets
is that any control that's a subclass of another control
| | 04:35 | gets all of that superclass control settings.
| | 04:39 | But you can also override settings. For instance
I'll put a new type selector for the text control
| | 04:45 | and I'll set its font family to Arial.
| | 04:50 | I'll saves and run the application
| | 04:54 | and now you'll see that the text control displays in an Arial font,
| | 04:58 | but it still picks up all the other settings of the label control.
| | 05:02 | Italics, bolding, underlining and font size.
| | 05:06 | Finally let's take a look at the global selector. You declare
the global selector with the word global in all lowercase.
| | 05:16 | Any properties that you apply within the global selector
| | 05:19 | will apply to every component and every
object throughout the entire application.
| | 05:24 | So you want to be a little bit discreet in terms of what properties to apply.
| | 05:28 | You might for instance set a font family and
a standard font color for the entire application.
| | 05:33 | But there aren't too many other properties
that you would set globally like this.
| | 05:39 | To demonstrate this I'll put in
a standard font family of Courier New.
| | 05:46 | By the way, notice that whenever I put a
font name in, I typically wrap it in quotes.
| | 05:51 | This is only really required if the font name has spaces in it.
| | 05:55 | But it's a good practice to do regardless.
| | 05:57 | Now I'll come back to all the other components
that have font settings and I'll remove them.
| | 06:04 | So that the only place where I'm affecting
the font family is in the global selector.
| | 06:09 | I'll save and run the application
| | 06:12 | and notice that all components in the application
now are using the Courier New font family.
| | 06:19 | Let me mention one other thing about selecting fonts.
| | 06:22 | When you set fonts using cascading style sheets,
| | 06:25 | it's typically a good idea to put in a list
of fonts in order of priority or selection.
| | 06:31 | This is because not all fonts exist on all client systems.
| | 06:35 | And if you put it in the name of a font
that doesn't exist on a client system,
| | 06:39 | the Flash Player will just arbitrarily
replace it with something else.
| | 06:43 | Here's a great example.
| | 06:44 | Lets say that you wanted to use the Helvetica font.
| | 06:47 | Helvetica exists on the Mac operating system, but not always on Windows,
| | 06:52 | and it's never guaranteed to show up
on any particular client system.
| | 06:56 | So typically you'll declare font family
using a set of fonts in order of precedence
| | 07:02 | I'll put in first Helvetica.
| | 07:04 | And then if that font isn't found, Arial.
| | 07:09 | And after that a system font names such as _sans.
| | 07:14 | -sans means choose what ever the system sans-serif font is.
| | 07:19 | I'll save the change and run the application.
| | 07:23 | And now you'll see that all of the components
in the application pick up this font.
| | 07:27 | By declaring the list of fonts in order of preference,
| | 07:31 | I guarantee to get the best look of the application,
| | 07:34 | regardless of what client system the application is being played on.
| | 07:38 | So that's a look at cascading style sheet selectors.
| | 07:42 | To review, you have type selectors,
stylename selectors and the global selector.
| | 07:48 | The settings in the global selector have the lowest precedence,
| | 07:52 | type selectors have the next level of precedence,
| | 07:54 | and stylename selectors have the highest
precedence of these three selector types.
| | Collapse this transcript |
| Using external style sheets| 00:00 | In this video I'm going to describe the use of external style
sheets to hold all of the style information about an application.
| | 00:08 | To demonstrate this capability I'm going to show you two techniques.
First creating an external stylesheet manually and then
| | 00:15 | linking it in using the style element. Then I'll show you
a new feature of Flex Builder 3 that can convert existing
| | 00:21 | styles to a next on a style sheet more automatically.
| | 00:25 | I'll start with the file CSS demo.MXML.
| | 00:29 | Go to the Source view of this file.
| | 00:32 | If you've been follow along in the exercises,
you can go to the Source view of this file.
| | 00:37 | Notice all of the styles are declared within the mx:Style tag set.
| | 00:41 | To move these styles to an external stylesheet,
first create the stylesheet manually.
| | 00:47 | From the Flex Builder menu, select File, New, CSS File.
| | 00:54 | Your stylesheet name can be anything you like,
but it should end with the file extension .CSS.
| | 01:00 | I'll call this simply styles.CSS and click Finish.
| | 01:07 | Now I'll go back to the application
| | 01:09 | and I'll select all of the styles
that are inside the mx:Style tag set.
| | 01:14 | Notice that I'm not selecting the mx:Style tag set itself.
| | 01:18 | And then I'll cut those styles to the clipboard.
| | 01:22 | Next I'll go to the styles.CSS file,
| | 01:25 | place the cursor at the bottom of the file
| | 01:28 | and paste the styles that I cut from the application.
| | 01:33 | I'll just do a little bit of cleanup here. I'll select
all the styles and press Shift+Tab to un-indent them.
| | 01:39 | Because this extra stylesheet is a simple text file, it's not XML,
| | 01:44 | you don't need them XML tags around the styles.
| | 01:47 | All you need are the style declarations.
| | 01:50 | I'll save those changes, and then come back to the application.
| | 01:55 | Now to incorporate the styles in the application I'm going to
remove the ends tag of the style and then add the attribute source
| | 02:04 | and I'll point to the new extra stylesheet, styles.CSS.
| | 02:09 | I'll save the change and run the application,
| | 02:13 | and you'll see that the styles from the external stylesheet are
incorporated into the application during the compilation process.
| | 02:21 | That's an important point that I want to make.
| | 02:23 | Cascading style sheets in the world of Flex is a compile time technology,
| | 02:28 | in contrast to how styles are loaded at runtime in a web browser.
| | 02:32 | Styles must be declared externally and then linked in during the compilation process as I'm doing here.
| | 02:39 | Now I'd like to show you an interesting feature of Flex Builder 3.
| | 02:43 | I'll go to the styles.CSS file and click on the Design button.
| | 02:48 | Flex Builder 3 adds a new ability to view an external stylesheet
in Design view and make changes to the stylesheet in Design view.
| | 02:57 | At the top of the toolbar while you're viewing a style sheet, you'll see
a list of all the styles that are declared in that external style sheet.
| | 03:04 | I'll select the label style,
| | 03:06 | and you'll see a visualization of what this style does
| | 03:10 | that it applies a certain font family,
font size, bold, italics and so on.
| | 03:16 | And in the Flex Properties view, which appears on the right,
exposes all of the most common styles for that particular type.
| | 03:23 | So for instance I can come over here and remove a couple of the styles.
| | 03:27 | The italics and the underlines,
| | 03:29 | go back to Source view,
| | 03:31 | and you'll see that the appropriate
updates have happened in the source code.
| | 03:35 | I'll go back to Design view.
| | 03:37 | Let's say now for instance that I wanted to add a new style.
| | 03:42 | This button with the plus icon allows
you to add a new style from Design view.
| | 03:47 | In this New Style dialogue, I indicate what kind of component
or what kind of style name I want to create a style for.
| | 03:55 | In this case is going to choose the Panel, and click OK.
| | 04:01 | Notice I now see a sample Panel on the screen
| | 04:04 | and the Flex Properties view shows the most
commonly used styles of this component.
| | 04:09 | I'll check the Rounded bottom corner style.
| | 04:12 | I make a change the Border's background color.
| | 04:16 | I'll choose the fill color selector and choose a
background color that shows up in the center of the panel
| | 04:22 | and I'll go down to the title bar and change the styles here as well.
| | 04:27 | These are the styles that are specifically
designed to apply to the Panel's control bar.
| | 04:32 | I'll go back to the panel,
| | 04:34 | take a look at text styles,
| | 04:37 | change the text to perhaps Courier New.
| | 04:40 | Notice that that changed the header of the panel.
| | 04:43 | Go back to the panel again, and so on.
| | 04:46 | Now I'll look at the Source view of the external stylesheet,
| | 04:49 | and you'll see that the panel styles have been built for me
as I've made my selections in the Flex Properties view.
| | 04:55 | This new ability to modify external stylesheets directly from
within Design view is a significant new feature of Flex Builder 3.
| | 05:03 | It allows you to much more easily generate and build
your external style sheets and get a good sense of how
| | 05:10 | the application is going to look as you build the styles.
| | 05:14 | Let's go back one more time to the CSS demo file.
| | 05:18 | Notice that when I save my changes to the stylesheet
| | 05:21 | I see a warning in the problems view indicating
that the panel type selector isn't processed
| | 05:26 | because it's not actually being used in the application.
| | 05:29 | So to fix that I'm going to have a panel wrap around the existing
components. I'll save the changes and run the application,
| | 05:43 | and you'll see that the panel now displays with the selected
colors and with each of the components displayed following
| | 05:49 | the styles that I've declared.
| | 05:52 | Now I'm going to add one more component.
| | 05:55 | I'm going to add a checkbox component and I'll give it a label
of My checkbox and I'll also give it a font size of 14 pixels.
| | 06:05 | My goal here is to show you how you can take an in-line style that's
declared on one object and exported to an external style sheet.
| | 06:13 | Now I'll go to Design view,
| | 06:16 | and I'll select the checkbox that has the style.
| | 06:20 | Take a look at the Flex Properties view.
| | 06:22 | There's a button labeled Convert to CSS
that's a new part of Flex Builder 3
| | 06:28 | I'll click the button,
| | 06:30 | indicate that I want to save any changes that I've made,
| | 06:33 | and then indicate that will apply these
styles to the specific component checkbox,
| | 06:39 | and that I want to define the style
in the external stylesheet styles.CSS,
| | 06:45 | and I'll click OK.
| | 06:48 | Now Design view these switches over to styles.CSS,
| | 06:51 | and it shows the results of the style that I've applied.
| | 06:55 | I'll go to Source view
| | 06:57 | and show you that the check box rule has been
added by Flex Builder to the external stylesheet,
| | 07:02 | and then I'll go back to the application, take a look at
Source view and you'll see that the in-line style that
| | 07:08 | I'd originally applied has been removed because
it was exported to the external style sheet.
| | 07:14 | So once again, this is a new tool of Flex Builder 3.
| | 07:17 | It should make it a lot easier to manage your styles and apply
the graphic design that you want to your Flex application.
| | Collapse this transcript |
| Applying styles to the Photo Album application| 00:00 | In this video I'm going to apply some of the techniques
that have shown so far to my photo album application.
| | 00:06 | I've opened the most recent version of the photo album application
| | 00:10 | from the Chapter07begin project.
| | 00:13 | If you're following along in these exercises,
| | 00:15 | go and open that file now.
| | 00:17 | The application is in the state that it was
left in at the end of the previous chapter.
| | 00:22 | There's a label component at the top of the
pplication with the text My Travel Photos
| | 00:26 | and a smaller label below it
that has the text Photo Catalog.
| | 00:31 | I am going to apply some individual styles to these components,
| | 00:35 | and then I'll export them to an external stylesheet
just to get more practice with these new tools.
| | 00:41 | Let's start with the first label My Travel Photos.
| | 00:45 | Notice that this component has a font size of 18 pixels
| | 00:48 | and has been set to both bold and italics.
| | 00:51 | I'm going to select a different font for this label,
| | 00:55 | and I'll choose Georgia.
| | 00:58 | Georgia is a nice looking serif font.
| | 01:00 | Now I'm going to take all the styles that
have been implemented on this component
| | 01:05 | and I'll export them to an external stylesheet.
| | 01:08 | With the component selected,
| | 01:10 | I'll click Convert to CSS.
| | 01:12 | If I'm prompted to save changes,
I'll say yes, I want to save them.
| | 01:16 | And then I'm going to create a new
cascading style sheet external file from here.
| | 01:22 | Click the New button and type in the name of
the file. I'll call it photos styles.CSS
| | 01:29 | and click Finish.
| | 01:32 | I'll indicate that a war to apply these styles
to the specific component with a style name
| | 01:38 | I'll give it a name of header and click OK.
| | 01:45 | Now I indicate which component
I want to use to preview this style.
| | 01:50 | I want to use a label component.
| | 01:52 | I'll go down to the label component in the
list of available components and click OK.
| | 01:58 | And I can see exactly what the styles going to look like.
| | 02:02 | Now let's take a look at the resulting
cascading style sheets in Source view.
| | 02:06 | The .header style name has been applied with font family,
font size, font style and font weight properties.
| | 02:13 | Notice that when you export properties in this way,
| | 02:16 | Flex Builder uses the camel caps style of syntax.
That's fine. It works just as well as the hyphenated version.
| | 02:24 | If I now go back to the photo album application,
| | 02:27 | notice that the My Travel Photos label still looks the same.
| | 02:31 | And I go to Source view,
| | 02:33 | you'll see that all of the individual settings on that label
control have been removed and have been replaced with
| | 02:39 | the style name, set to header.
| | 02:42 | Now let's go back and make a couple of manual changes.
| | 02:45 | Lets say for instance that what I really wanted was for all
labels to share the same font family, font style and font weight,
| | 02:53 | but for only an individual label to have the font size of 18.
| | 02:58 | So I'm going to start off by changing
the style name from .header to label.
| | 03:04 | Then I'll create the new .header style name down here
| | 03:08 | and I'll take the font size of 18 pixels
and move it into that style name.
| | 03:14 | Then I'll come back to the photo album application.
| | 03:18 | I'll go to the second label, which has the text of Photo Catalog,
| | 03:22 | and now remove the font weight and font style.
| | 03:27 | I'll save all my changes by selecting File, Save All
| | 03:33 | and then let's take a look at the results in Design view.
| | 03:38 | In Design view you'll see that both of
the labels now have the same font family,
| | 03:42 | they're both bold and are both italics,
| | 03:45 | but only the first label, the one in
the header, has the larger font size.
| | 03:50 | Now for consistency's sake I'm going to export the style
from the smaller label out to the extra stylesheet again.
| | 03:58 | I'll select the label, click Convert to CSS.
| | 04:02 | I'll be exporting out the same file, photo styles.CSS
| | 04:07 | and I'm going to export to all components
with the style name subheader.
| | 04:12 | I'll click OK.
| | 04:16 | Once again I'm prompted for which
component I want to use to preview this.
| | 04:21 | I'll choose the label component again and click OK.
| | 04:25 | Go back to photo album.MXML
| | 04:27 | and go to Source view,
| | 04:28 | and you'll see that this second label
now have the style name of subheader.
| | 04:33 | I'll save the changes, run the application,
| | 04:36 | and you'll see that the photo album now
uses the same font for all the labels.
| | 04:42 | Let's make one more change.
| | 04:44 | Notice in the panel component that it's using a different font.
| | 04:48 | That's because the label that's in the panel
isn't, strictly speaking, a label type.
| | 04:53 | So it's not picking up the styles.
| | 04:56 | I'm going to go make a manual change to my stylesheet to fix that.
| | 05:00 | I'll go in to Source view.
| | 05:02 | And I'm going to create a new style name called windowStyles.
| | 05:11 | And then I am going to copy these three properties:
| | 05:14 | font family, font style and font weight,
| | 05:17 | and put them into the windowStyles style name.
| | 05:20 | Now why did I select windowStyles?
| | 05:23 | Well, the Panel component has a special rule
| | 05:26 | that says that the windowStyles style name automatically
applies to objects in the header of the panel.
| | 05:33 | The same style name also applies to
dialog boxes produced by the alert class,
| | 05:38 | which I'll talk about later in this video series.
| | 05:40 | But now I'll come back to the photo album
application and take a look at it in Design view,
| | 05:46 | and you'll see that those font settings
have been picked up in the panel header.
| | 05:50 | I'll run the application
| | 05:52 | and now we get a good sense of how the styles
are affecting the look and feel of the application.
| | 05:58 | So that's a walk through how we can
apply styles to an actual application.
| | 06:02 | I'm applying to styles to the label controls through
pre-declared style names such as with the windowStyles
| | 06:09 | and I'm allowing Flex Builder to do as much work as I can in generating
the external style sheets and exporting styles using the correct syntax.
| | Collapse this transcript |
| Embedding fonts| 00:00 | In this video I'm going to describe how to use cascading
style sheet declarations to embed fonts in a Flex application.
| | 00:08 | Font embedding becomes necessary when you select the font
family that isn't commonly installed on all users computers.
| | 00:16 | There is a cost to embedding fonts because it
results in expanding the size of your application,
| | 00:21 | but the clear benefit is that your application is guaranteed to look the
same to every user regardless of what client systems they're using.
| | 00:30 | There's only a very small set of fonts
that are always available to every user.
| | 00:35 | Every other font needs to be embedded,
| | 00:37 | and the ability to embed a font was available in Flex 2,
| | 00:41 | but Flex Builder 3 adds a new tool that allows
you to generate font embedding code very easily.
| | 00:46 | That's one going to show you here.
| | 00:49 | To embed a font,
| | 00:50 | first create an external style sheet
as I have for my photo album application.
| | 00:55 | Then open the extra stylesheet in Design view.
| | 00:59 | It doesn't matter what style you've selected to get started,
| | 01:02 | although it should be a type selector
| | 01:04 | or style name selector
| | 01:06 | that you want to apply the font family to.
| | 01:09 | With the external style sheet open in Design view,
| | 01:13 | go to the Flex Properties view and
pull down list of available font families.
| | 01:18 | In an external style sheet, you see not just the standard fonts
of Arial, Times New Roman, Courier New, Georgia and Verdana,
| | 01:26 | but you also see all of the fonts that are
installed on your local development system.
| | 01:31 | Now here's where things can get a little touchy.
| | 01:34 | Make sure that you will be select
the fonts that you actually want to use.
| | 01:39 | Each time you choose a font from this list, in the background
Flex Builder is going to be generating font embedding code.
| | 01:45 | And if you don't clean it up afterward, you can end up
really bloating the size of your Flex application.
| | 01:52 | I'm going to play a font called Segoe Script.
| | 01:56 | I'll move down to the S's and locate the font and I'll select it here.
| | 02:00 | And then notice that the Flex Properties view
automatically checks the option Embed this font.
| | 02:06 | Let's take a look at the source code that was generated.
| | 02:09 | I'll click the source button and
scroll down to the bottom of the file.
| | 02:13 | Here's the code for embedding a font.
| | 02:16 | It's a style that starts with an at character (@)
| | 02:19 | and then ends with font-face.
| | 02:22 | Within the braces, you indicate the font family.
| | 02:25 | This is the name by which this font
will be known in your Flex application
| | 02:29 | and then you indicate whether you're embeding a local font,
| | 02:32 | that's one that's been already
installed in your operating system,
| | 02:36 | or a fil -based font,
| | 02:38 | which would be indicated by URL attribute
because instead of a local attribute.
| | 02:42 | Because Segoe Script is already installed on my copy of Windows,
| | 02:45 | I can pull it from the operating system's
font installation by its system name.
| | 02:51 | Now that I've embedded the font,
| | 02:53 | I can now refer to it in any of my other selectors
| | 02:56 | and Flex Builder took care of this too.
| | 02:59 | It applied a font family attribute
and it used the name Segoe Script.
| | 03:04 | Now I'm going to save my changes.
| | 03:06 | I'll come back to the photo album application,
| | 03:10 | and you'll see in the application's Design view
| | 03:13 | that the new font is picked up by
all label controls and displayed now.
| | 03:17 | Notice by the way that this did not affect the header in the panel.
| | 03:21 | So to change that, I'll come back to my CSS file
| | 03:25 | and make a copy of the font family setting from the label control.
| | 03:30 | Come down to my Windows style setting,
| | 03:33 | get rid of the font family of Georgia
and paste in the one for Segoe Script.
| | 03:39 | I'll save my changes.
| | 03:40 | I'll go back to the photo album application,
| | 03:43 | and I'll run the application.
| | 03:46 | And there is the result.
| | 03:48 | The application is displayed and my special font is displayed in
all the labels and panel headers for I want it to be displayed.
| | 03:56 | For one thing you have to watch out for with font embedding is
that it does significantly increased the size of your application.
| | 04:02 | I'll go over to my output folder,
the bin debug folder in my project,
| | 04:06 | and locate the photo album.SWF file.
| | 04:09 | I'll right-click and select Properties
| | 04:13 | and notice the size of the file is now 535 K.
| | 04:17 | There are ways of reducing the impact of embedding fonts.
| | 04:21 | For instance is possible to say, I only want to embed
alphabetical or only alpha and numeric characters
| | 04:27 | and you can significantly decrease the
impact of font embedding on an application.
| | 04:33 | I'll cover some of those more advanced techniques
in the next video series Flex 3 Beyond the Basics.
| | 04:39 | But for now, it's good to know that Flex Builder can help you generate
the code you need to embed your own special fonts in a Flex application.
| | Collapse this transcript |
|
|
8. Application NavigationUsing the ViewStack container| 00:00 | In this chapter of the video series, I'm going to describe
how to implement application navigation using a set of
| | 00:06 | containers known as the navigator containers. A navigator
container is a container that nests other containers
| | 00:13 | and stacks them one on top of another.
| | 00:15 | There are three navigator containers in the Flex class library,
| | 00:19 | the view stack, the tab navigator and the accordion.
| | 00:23 | The view stack is the simplest of the three and is actually
a superclass for the tab navigator. That is, all the behaviors
| | 00:30 | properties and methods of the view stack are also implemented
in the tab navigator and in the accordion so we'll start off
| | 00:38 | learning about the view stack container
and then apply those lessons to the others.
| | 00:43 | If you're following along in these exercises, import the project Chapter08begin and then open the file ViewStackDemo.MXML,
| | 00:49 | the one that I have currently open on the screen.
| | 00:52 | In this application, there are three vertical boxes, each with
explicit dimensions of 200 pixels wide by 150 pixels high
| | 01:00 | and each with a different background color. The application has
a layout property of vertical meaning that the three VBoxes
| | 01:06 | will stack one on top of another.
| | 01:09 | This is what the application looks like in its current state.
| | 01:13 | In order to implement navigation application,
you first identify what your views are.
| | 01:19 | In this application, the views are
represented by the three colored boxes.
| | 01:23 | Then you wrap the views inside of view stack.
| | 01:26 | The effect of view stack is to treat the views like a stack of
cards where only one of the cards is visible at any given moment.
| | 01:33 | Once you've wrapped the views inside a stack,
| | 01:36 | you can provide navigational tools to the user, either through
a set of components that they interact with, to which you react
| | 01:43 | by executing various ActionScript commands that
manipulate the currently active view in the stack.
| | 01:48 | Or you can use one of the navigator tool
bar containers that I'll show you later.
| | 01:52 | I'm going to show you the effect of
a view stack by going to Source view,
| | 01:56 | placing the cursor above the existing VBox containers
| | 02:00 | and then wrapping them inside of a view stack tag set.
| | 02:04 | I'll give the view stack an ID 19 of boxStack.
| | 02:10 | I'll allow Flex Builder to create the end tag for the view stack pair.
| | 02:14 | Then I'll take the 3 VBox tags and move them into the view stack.
| | 02:19 | I'm using the keyboard shortcuts Alt+ the Up cursor key
| | 02:23 | and that means move the code up.
| | 02:26 | Then I'll press the tab key to indent the code to show more
clearly the parent child relationship between the views stack
| | 02:32 | and its nested containers.
| | 02:34 | There's my finished view stack. Now I'll run the application.
| | 02:40 | When I run the application I now only see the first view
in the stack, because only one view or one layer of the stack
| | 02:47 | can be visible at any given time.
| | 02:49 | The next step is to provide a navigation interface for
the user and then next video I'll show you how to do this using
| | 02:55 | programmatic approach where you manipulate the view
stack and its properties using ActionScript code.
| | Collapse this transcript |
| Creating programmatic navigation with ActionScript| 00:00 | In this video I'm going to show you how to implement programmatic navigation.
| | 00:04 | That is, application navigation implemented through ActionScript statements
| | 00:09 | that explicitly control the currently active layer of a view stack.
| | 00:13 | The view stack supports two properties
named selected index and selected child.
| | 00:17 | They both can be used to set and get the currently active object.
| | 00:21 | The difference is in how they operate. The selected index
property is a numeric property that refers to the layers of the
| | 00:28 | view stack by their current index positions,
| | 00:30 | where as selected child refers to the nested
components based on their unique identifiers.
| | 00:35 | I'm going to create a visual interface for the
user working in the file ViewStackDemo.MXML
| | 00:42 | I'll start by creating an HBox container
| | 00:45 | and then within the HBox container, I'll create some buttons.
| | 00:51 | The first button will have a label of a Red Box
| | 00:55 | and then I'll clone that line of code to create two more buttons
| | 00:59 | and set the labels for the other two to Green Box and Blue Box.
| | 01:06 | Now to implement the navigation I'll handle
the click event of each of these three buttons.
| | 01:11 | I'll put in the click event handler and in the first button
I'm going to set the boxStack's selected index to a value of zero.
| | 01:20 | That means make the first layer of
the view stack active and visible.
| | 01:25 | Now I'm going to copy the code,
| | 01:28 | paste it into the second button,
| | 01:31 | ,
change its selected index to one
| | 01:34 | do the paste operation again for the third button,
| | 01:37 | have it selected index set to two
| | 01:39 | and now I've implemented a very simple
programmatic navigation interface.
| | 01:44 | I save my changes and run the application,
| | 01:46 | and you'll see that as I click the buttons, I'm now
moving around from one layer the stack to another.
| | 01:52 | Clicking the Green Box button switches to the Green layer.
| | 01:55 | Clicking Blue Box switches to the Blue layer,
| | 01:58 | clicking the Red Box button, switches to the Red layer.
| | 02:01 | Here's the other approach to handling navigation programmatically.
| | 02:05 | The selected child property of the view stack container
refers to the nested containers by the unique identifiers.
| | 02:11 | So use it, you have to assign an ID
property to be each of those containers
| | 02:16 | I'll go to the first of the VBox containers and assign an ID of redBox.
| | 02:22 | To the second one and assign an ID of greenBox,
| | 02:28 | and to the third and assign an ID of blueBox.
| | 02:32 | Now in the button component's click events, I'll change
the use of selected index instead to selected child.
| | 02:40 | For each operation, I'll set the selected
child to the ID of the appropriate container.
| | 02:45 | The first button's click event, we'll set the view stack selected
child to redBox, the second one we'll set it to greenBox,
| | 02:54 | and the third one, set it to blueBox.
| | 03:00 | I'll save the changes and run the application again.
| | 03:07 | And once again I'm able to click the buttons and navigate
around from one box or one layer of the application to another.
| | 03:14 | So that's programmatic navigation.
| | 03:16 | You can use the selected child or the selected index properties.
The selected index refers to the layers of the view stack
| | 03:22 | by their index positions, determined by the order of declaration,
| | 03:26 | and the selected child property refers to
the nested containers by their unique IDs.
| | 03:31 | Now in the next video I'll show you how to implement a more
automatic navigational system using one of the navigator containers,
| | 03:38 | the tab bar, the button bar, toggle button bar and the link bar.
| | Collapse this transcript |
| Using Navigation Bar containers| 00:00 | In this video I'm going to show you how to create a more
automatic navigational interface using a set of containers
| | 00:06 | known as the navigator bar containers.
| | 00:08 | There are four navigator bar containers in the Flex framework.
| | 00:11 | Each of these containers has the ability to
automatically generate user interface components,
| | 00:17 | buttons, link buttons and tabs,
| | 00:19 | and it determines how the button should be created and
what their labels are based on the contents of a view stack
| | 00:25 | that you bind to the navigator bar container
through its data provider property.
| | 00:29 | To demonstrate this, I'm going to
create a new version of this application.
| | 00:33 | I've opened view stack demo.MXML,
| | 00:36 | and I'm going to save it under another name.
| | 00:38 | I'll select File, Save As
| | 00:41 | and I'll call this ViewStackWithBar and click OK.
| | 00:47 | In this new version of the application
I am going to remove the HBox container,
| | 00:51 | and instead I'm going to add in the first of
the navigator bar containers, the link bar.
| | 00:57 | When you create one of the navigator bar containers,
you then bind it to the view stack that you want to control
| | 01:03 | through its data provider property.
| | 01:06 | I'll put in the data provider property and then link to
the view stack using the binding expression that refers to
| | 01:12 | the view stack's ID, boxStack.
| | 01:17 | Now that's all you need to do for the link bar itself.
| | 01:19 | Now in order for labels to appear on the different link buttons
that are going to be generated, I have to assigned the
| | 01:25 | labels to each of the individual containers within the view stack.
| | 01:29 | The label property that you assign to each container then bubbles
up to the link bar, button bar, toggle button bar and so on
| | 01:36 | to appear on the face of the user interface controls.
| | 01:39 | So for each of these containers, I'll place the cursor after the ID
| | 01:43 | and I'll assign a label attribute.
| | 01:49 | Notice that these are the same labels that I assigned
to my individual buttons in a previous video.
| | 02:02 | I'll save my changes and run the application
| | 02:06 | and you'll see the link bar now appear below the views stack.
| | 02:09 | I can navigate around now by clicking on
each of the link buttons that was generated
| | 02:13 | and noticed that the application navigation is now automated.
| | 02:17 | I can move around,
| | 02:19 | click on each of the links as needed,
| | 02:21 | and the link bar does a nice job of giving me
feedback about which layer is currently selected
| | 02:25 | because it disables the user interface control
that's associated with the currently active layer.
| | 02:32 | Lets take a look at the other components
that you can use instead of the link bar.
| | 02:36 | The first one I will show you is called the tab bar. Each of these
components has a set of styles you can use to affect its look and feel.
| | 02:46 | I'm not going to get that deeply into demonstrating that but it's
worth looking at the documentation for each of these components
| | 02:52 | to see what visual changes are possible.
| | 02:55 | The tab bar generates a set of tabs
| | 02:58 | that serve exactly the same purpose as
the link buttons for the link bar.
| | 03:02 | I'll change the code to change from the link bar
| | 03:04 | to the tab bar and then I'll run the application and
notice now that I see tabs instead of link buttons.
| | 03:11 | Once again, I get nice visual feedback
as to which layer is currently selected.
| | 03:16 | The tab that is currently selected appears in the foreground and the
other tabs are sent to the background with a little bit of shadow.
| | 03:22 | This doesn't quite look right to me.
| | 03:24 | I'd prefer to have the tab bar above the container
so that's a simple matter of cutting and pasting the code
| | 03:31 | and placing the tab bar above the view stack.
| | 03:34 | Because this application has its layout property set to vertical,
| | 03:37 | the objects will simply stack one on top of another.
| | 03:41 | I'll run the application
| | 03:43 | and the other tabs appear above the containers,
| | 03:46 | and I can once again navigate around them easily.
| | 03:51 | Here is the third component that you can
use to implement automatic navigation,
| | 03:55 | It is called the button bar.
| | 03:58 | Just as with the tab bar and the link bar,
| | 04:00 | it generates one user interface component
for each layer of the view stack
| | 04:04 | and then applies each of the nested containers labels to
the appropriate user interface component that's generated.
| | 04:10 | In this case a button.
| | 04:11 | I'll save the change and run the application
| | 04:14 | and you see in this version of the application that the generated
buttons are lined up nicely next to each other from left to right.
| | 04:20 | Also noticed that the button bar automatically creates
rounded corners on the outside of the button set and
| | 04:26 | square corners on the inside corners.
| | 04:28 | And I can once again navigate around by clicking the buttons
| | 04:32 | and moving around the application.
| | 04:34 | One drawback of the button bar is that it doesn't give you
visual feedback about which layer is currently selected.
| | 04:40 | If you want that behavior and you want to use buttons, try to
the toggle button bar instead. I'll just add the word toggle
| | 04:46 | in front of this declaration.
| | 04:48 | So now I'm using the toggle button bar container,
| | 04:51 | and once again I'll run the application.
| | 04:53 | And notice now that the buttons look pretty much the same
as with the button bar, but you get a visual feedback
| | 04:59 | as to which layer is currently selected.
| | 05:01 | The button that's currently selected has a concave or
shadowed look to it and you can easily tell by glancing at
| | 05:07 | the navigator bar container which layer is currently selected.
| | 05:11 | So those are the four navigator bar containerss. Now I'll show you
one more trick you can do with these containers. There's quite a
| | 05:11 | few others. I'm going to take this
view stack and wrap it inside an HBox
| | 05:23 | and then I'll take the navigator bar container,
| | 05:30 | in this case that toggle button bar,
| | 05:32 | and move it so that's inside each box as well.
| | 05:36 | Each of the navigator bar containers has a property called direction which defaults to horizontal,
| | 05:42 | but can also be set to vertical so that you cause the generated
user interface components to stack on top of each other.
| | 05:49 | I'm going to switch back to link bar for this demonstration
and then add the direction attribute set to vertical.
| | 05:56 | And let's take a look at the result.
| | 05:58 | Because I've wrapped at the link bar and the view stack inside an HBox
or horizontal box, they now layout from left to right next to each other.
| | 06:07 | And I get a horizontal navigation tool.
| | 06:10 | I can now click on the links and once again navigate around.
| | 06:13 | And this gives me great control over where I want to place my
navigator tools in relationship to the views that they're controlling.
| | 06:20 | So that's a look at the navigator bar containers.
| | 06:24 | The button bar, the toggle button bar, the link bar, and the tab bar,
| | 06:29 | all of which have the ability to provide a more
automatic navigational system to your users.
| | Collapse this transcript |
| Using the TabNavigator and Accordion containers| 00:00 | In this video I'm going to describe the use of
the tag navigator and the accordion containers,
| | 00:05 | two navigator containers that you can use instead of the view stack.
| | 00:08 | These two containers have in common that they have their
own visual presentation. The visual presentation for the tab
| | 00:14 | navigator is like combining a tab bar with a view stack,
but it combines the two in a coherent visual presentation
| | 00:20 | so that they appear to be a part of the same object.
| | 00:23 | The accordion navigator container, in contrast, presents a
visual interface where the user clicks on headers that slide
| | 00:30 | vertically to reveal or hide the nesting containers within the stack.
| | 00:34 | To demonstrate these two navigator containers, I'll start with
the file ViewStackWithBar that I created in the previous video.
| | 00:41 | I'll save this under a new name.
| | 00:43 | Open the file and select File, Save As
| | 00:47 | and give the files the new name OtherContainers.
| | 00:53 | Next remove the HBox and link bar tags from around the view stack
| | 00:58 | and then change the view stack to a tab navigator.
| | 01:04 | Be sure to change both the begin tag and the end tag.
| | 01:10 | Svae your changes and run the application. You'll see when
the application opens up in the browser you are now presented
| | 01:17 | with a very similar interface to the view stack with the tab bar but
the tabs are now visually integrated with the rest of the presentation.
| | 01:25 | You can click on the tabs to move around,
| | 01:27 | and you'll notice that in this case the tap navigator
is too narrow to display all the labels on the tabs.
| | 01:33 | To fix that problem, I'm going to set the
tab navigator with an explicit width of 300 pixels.
| | 01:40 | And then I'll save and run the application again,
| | 01:45 | and now the tab navigator is wide enough to show all the tabs.
| | 01:49 | And I can once again navigate around.
| | 01:52 | Finally, to make the nested containers match the size of
the tab navigator, I'll change each of their widths to 100%.
| | 02:03 | I'll run the application again.
| | 02:05 | And now the nested containers fill the tab navigator.
| | 02:09 | So this is one of your sizing strategies. You always have
to decide what will determine the size of the objects?
| | 02:15 | Will the nested objects determine the size of the container? Or will the
container determines the size of the nested objects as is happening here?
| | 02:23 | So that's the tab navigator.
| | 02:25 | Now here's the accordion.
| | 02:28 | I'll replace the tab navigator tags with accordion tags.
| | 02:35 | I'll run the application once again.
| | 02:41 | And this time the labels of each of the
nested containers is applied to a header.
| | 02:46 | When the user clicks on one of the headers,
the header slides to reveal that later.
| | 02:51 | So there's the blue layer,
| | 02:53 | the green layer,
| | 02:55 | and the red layer.
| | 02:57 | Accordian containers are especially useful when
you're walking the user through a multistep process.
| | 03:02 | They're ways of getting handles in ActionScript code to each of
the headers and enabling and disabling them at runtime as needed.
| | 03:09 | So that's a look at the accordion. You can choose to view
stack, which is the simplest of these navigator containers,
| | 03:16 | the tab navigator or the accordion,
which add their own user interfaces.
| | 03:21 | Which navigator container you use is completely up to you and
will be determined by the requirements of your application.
| | Collapse this transcript |
| Creating navigation in the Photo Album application| 00:00 | In this video I'll show you how to implement navigation on the
photo album application we been working on in previous videos.
| | 00:07 | If you're following along in the exercises, open the
file photo album.MXML from the Chapter08begin project.
| | 00:14 | This is the application in the same state as
it was in at the end of the last chapter.
| | 00:19 | When you run the application photo album.MXML,
| | 00:23 | you may see a font error if you're running on a Mac or any other
system that doesn't have a special font called Segoe Script.
| | 00:29 | That's alright, just substitute any font you like.
For instance you could substitute the Arial font,
| | 00:35 | which exists on all Windows and Mac installations.
| | 00:38 | We're going to layer the photo catalog and shopping cart components
so that only one of these components is visible at a time.
| | 00:46 | I'll go to Source view to make this change.
| | 00:50 | First of all, the two components, the VBox and the panel,
| | 00:54 | are currently wrapped in an HBox, a horizontal
box that lays the objects out from side to side.
| | 00:59 | I'm going to replace the HBox with a view stack. I'll
go to the HBox tag, replace it with a view stack tag,
| | 01:07 | and then move down to the bottom of the
application and change the end tag as well.
| | 01:16 | I'll then look at the application in Design view,
| | 01:18 | and you'll see that the photo catalog is the only
part of the application that is currently visible.
| | 01:23 | Next I'll go to the panel that currently represents the shopping cart,
| | 01:27 | and I'm going to change that to another VBox and I'm
going to change its width to end its height to 100%.
| | 01:36 | Once again, make sure that you change
both the begin tag and the ends tag.
| | 01:41 | And then within the VBox, I'm going to add a label.
| | 01:45 | This'll be the same sort of label
as exists in the other component.
| | 01:48 | So I'm going to go to the first component,
| | 01:51 | locate the label
| | 01:53 | copy it to the clipboard.
| | 01:55 | Go down to the middle of the new VBox and paste it in.
| | 01:58 | And then change the text of the label to shopping cart.
| | 02:04 | I'll also make some changes to the VBox.
| | 02:07 | Instead of using a title attribute, I'll use a label component, which will
bubble up to the navigator bar component I'll use to provide navigation.
| | 02:15 | Then I'll remove the layout attribute
because it no longer applies to the VBox.
| | 02:21 | I'll go to the first VBox component and
once again to add a label attribute,
| | 02:28 | and again the purpose here is to allow these labels to
bubble up to the visual components we'll use for navigation,
| | 02:35 | and I'll change the width of this component also to 100%.
| | 02:38 | Now go to the view stack and apply an ID of myStack.
| | 02:43 | Now I'll run the application to see how we're doing.
| | 02:49 | As the application starts up, it only shows
the tile container, now showing the photos.
| | 02:54 | The shopping cart is layered behind this catalog and if
we want to get to it we need to provide a navigational tool.
| | 03:01 | So I'll close the browser and I'm going to place
the cursor after the initial label, the header,
| | 03:07 | and I'll add a link bar component.
| | 03:10 | I'll set the link bar component's data provider property,
using a binding expression, to the view stack, myStack.
| | 03:19 | I'll run the application again and remember that I had applied label
attributes to each of the nested containers within the view stack.
| | 03:27 | This will result in generating one link button for each of
those layers and they'll have the labels that were assigned.
| | 03:35 | So there's my photo catalog,
| | 03:37 | and if I now click on the shopping cart
link, I'll see the shopping cart label.
| | 03:41 | I have one more step to follow.
| | 03:43 | I'd like to take this link bar and move it up to the top of the
application in a way that it's always docked to the top of the application.
| | 03:50 | For this purpose I'm going use a container
called an application control bar.
| | 03:55 | When you use an application control bar, it's typically placed at the
top of the application as the first visual components in the application.
| | 04:03 | When you set up the application control bar,
set its dock property to true.
| | 04:08 | This'll cause the control bar to dock or
glue itself to the top of the application
| | 04:13 | and then even if the rest of the application has to scroll
vertically your navigational tools will stay stable at the top.
| | 04:19 | Next take the link bar and move it up into the application control bar.
| | 04:24 | I used the keyboard shortcut Alt+ the Up cursor to make that happen.
| | 04:29 | Now I'm just rearranging the code to make
it look pretty nice. I'll run the application
| | 04:36 | and now my navigation tool is docked to the top of the application.
| | 04:40 | I can click the shopping cart,
| | 04:42 | click back on the photo catalog.
| | 04:44 | Now let's see the real effect and
benefit of the application control bar,
| | 04:49 | I'm going to resize the browser so that there's
not enough space to show all the photos
| | 04:53 | and noticed that I get a couple of scrollbars over on the right.
| | 04:57 | Eliminating one of the scrollbars is pretty easy.
| | 05:00 | But here's the point that I want to make.
| | 05:01 | Even if the application was so tall that it
would have to scroll up and down in the window.
| | 05:06 | The application control bar will always stay stable at the
top of the application and the rest of the application will
| | 05:12 | move up and down behind it. So the application control bar is a great container
that allows you provide a very intuitive, very natural interface for the user.
| | 05:21 | So that's a look at how to provide navigation in a Flex application.
| | 05:25 | Navigation is provided by creating a set of layers. Each of the
layer stays in memory for as long as you run the application.
| | 05:32 | It's not for instance like a page oriented architecture such as in a website.
| | 05:37 | And then you provide a visual interface, such as one
of the navigator tool bars, I'm using the link bar here,
| | 05:43 | that allows the user to click and move
around the application as they want to.
| | Collapse this transcript |
|
|
9. DebuggingUnderstanding the Debugging perspective| 00:00 | In this chapter I'm going to describe basic
debugging techniques using Flex Builder 3.
| | 00:06 | If you're following along in the exercises,
import the project Chapter09begin
| | 00:12 | and open the file debugging demo.MXML.
| | 00:15 | I'll be using this application to demonstrate
some of these debugging techniques.
| | 00:20 | Flex Builder 3 includes a pre-built perspective,
| | 00:23 | called Flex debugging,
| | 00:25 | which includes the most commonly used invaluable views
and tools for use when you're debugging an application.
| | 00:32 | You can switch to this perspective
manually from the Flex Builder menu
| | 00:36 | by selecting Window, Perspective, Flex Debugging.
| | 00:42 | The Flex debugging perspective includes some
views that you may not have seen before.
| | 00:46 | The Debug view in the center top of the screen
| | 00:50 | includes tools for stepping through code, terminating,
| | 00:53 | resuming, running and so on when you're running a breakpoint.
| | 00:57 | The windows in the top right interface,
| | 01:00 | shown as tabs, include Variables, Breakpoints and Expressions.
| | 01:05 | Another valuable view that you'll use in
debugging is called the Console view.
| | 01:09 | This appears in the debugging perspective at the bottom of the screen
| | 01:12 | in a tabbed interface paired with the Problems view.
| | 01:16 | You can move back and forth easily between the debugging
and the development view by using the perspective selector,
| | 01:22 | which by default appears at the top
right of your application interface.
| | 01:26 | You can click the plus button and move back and forth
between the different perspectives provided in Flex Builder.
| | 01:32 | These include Flex debugging, Flex development and Flex profiling.
| | 01:37 | For instance, when I'm done with debugging, I typically
want to go back to the development perspective because
| | 01:42 | it allocates more screen real estate to
the Source view and Design view editors.
| | 01:47 | It's also worth mentioning that the Eclipse kernel,
upon which Flex Builder 3 is based,
| | 01:51 | allows you to move the perspective selector around.
| | 01:55 | You can move a cursor over the perspective selector,
| | 01:58 | right-click or control click on the Mac,
| | 02:00 | and select Dock On and then select one of the three options:
| | 02:05 | Top Right, Top Left and Left.
| | 02:07 | For instance, if I select Left,
| | 02:10 | it moves the prospective selector
over to the left column of Eclipse,
| | 02:13 | and now I can more easily move back-and-forth between
the debugging and the development perspectives.
| | 02:19 | I can then move to selector back again by
right-clicking or Control-clicking on the Mac
| | 02:25 | and selecting Dock On, Top Right.
| | 02:28 | So that's a look at the debugging perspective.
| | 02:30 | Now in the next set of videos I'm going you show the
specific debugging tools that are most commonly used,
| | 02:36 | to trace function, breakpoints and the
ability to inspect variables at runtime.
| | Collapse this transcript |
| Tracing application execution| 00:00 | In this video I'm going to describe the use of the trace function.
| | 00:04 | The trace function is a global function in the Flash Player
which allows you to take a string value and display it in
| | 00:12 | what's called a logging target.
| | 00:14 | There are many possible logging targets in the Flex framework.
| | 00:18 | If you're using Flex Builder 3 though, the most commonly
used and the automatic logging target is the Console view,
| | 00:24 | which appears automatically when you select the Flex debugging
perspective and also appears when you're running an
| | 00:30 | application in debug mode and you send any messages
to the Consule view through the trace function.
| | 00:36 | To use the trace function, place your cursor in
any function that you're going to be calling.
| | 00:41 | And then call the trace function and pass in any string value.
| | 00:45 | I'll be working in the file debugging demo.MXML in the Chapter09begin project.
| | 00:53 | I've placed the cursor inside the traceit function and
now I'll put in the trace method call and I'll pass in
| | 00:59 | a literal value of "Executing traceit".
| | 01:04 | I'll save my changes and then run the application in debug mode.
| | 01:09 | Now they're two critical requirements for using the trace function.
| | 01:13 | First of all, you must have the correct version
of the Flash Player installed in your browser.
| | 01:18 | When you installed Flex Builder 3, you were prompted
to install the debug version of the Flash Player.
| | 01:24 | And if you did, so, you should be in good shape,
| | 01:27 | but it is important to know that you must have the right version
of the Flash Player installed for tracing to work correctly.
| | 01:33 | If you're not sure and want to make sure
you've got the debug version of the player,
| | 01:37 | go to a browser.
| | 01:40 | Then go to any website that has some Flash content.
| | 01:43 | For instance I'll go to www.adobe.com.
| | 01:51 | Then move your cursor over the Flash content.
| | 01:55 | For instance, this movie is clearly Flash on the Adobe homepage.
| | 02:00 | Right click to show the Flash Player context menu.
| | 02:04 | If you have the debug version of the Flash Player installed,
| | 02:07 | you should see a Debugger menu choice,
| | 02:10 | Now it's disabled, because we're not actually
running a Flash document in debug mode.
| | 02:14 | But if I had the production version of the Flash Player
installed. I wouldn't see that menu choice.
| | 02:20 | You could only have one version of the Flash Player
installed at a time on any particular browser.
| | 02:25 | On a development system, you always want have the debug version of Flash
Player installed so you can effectively debug your Flex applications.
| | 02:33 | I'll close the browser and returned Flex Builder.
| | 02:36 | The other requirement for using the trace statement successfully is
that you must be actually running the application in debug mode.
| | 02:44 | The easiest way to do this is by clicking
the debug button on the toolbar.
| | 02:49 | It is represented by little picture of a bug.
| | 02:51 | I think it's a squashed cockroach.
| | 02:53 | With the application currently open
in the editor that you want to debug.
| | 02:58 | Click the debug button.
| | 03:01 | If the application is an unsaved state
you'll be prompted to save and launch.
| | 03:05 | Just as though you were running the application.
| | 03:07 | Click OK,
| | 03:09 | and you'll see the application open in the browser.
| | 03:12 | When the application comes to the screen, it just
shows the two buttons labeled Trace and Debug.
| | 03:18 | Now I'm going to resize the browser so I can see
both the browser and Flex Builder in the background.
| | 03:23 | Notice that when you run the application in debug mode,
Flex Builder now shows the Console view automatically
| | 03:30 | and you see an initial debugging message
| | 03:33 | indicating the size of the application SWF file after decompression.
| | 03:38 | Now I'm going move back to the application running in the
browser then right-click the trace button which calls this
| | 03:44 | method traceit which in turn executes a trace statement.
| | 03:49 | Notice that every time I click the button,
| | 03:52 | I get a message in the console view at
the bottom of the Flex Builder interface.
| | 03:58 | The purpose of tracing is to allow you
to find out when code is executing,
| | 04:02 | but it can also be used to evaluate variable values.
| | 04:05 | You can pass any string you like into the trace function.
| | 04:10 | The trace statement can except any string.
| | 04:12 | In the first example I output a literal string,
| | 04:16 | but you can also output concatenated strings,
that is combinations of literals and dynamic variables.
| | 04:22 | So for instance I'll evaluate the value of the myVar variable
that was declared up at the top of the application.
| | 04:30 | To do this I'll put in a trace statements and then a literal value
of the value of myVar is and then I'll concatenate the value of myVar.
| | 04:44 | I'll save the change and once again run the application in debug mode.
| | 04:52 | Now each time I click the Trace button,
I'll get two messages, one from each trace statement.
| | 04:59 | In the Console view of Flex Builder down at the bottom,
I see the literal message, "Executing traceit",
| | 05:04 | and I see the dynamic message, "The value of myVar is zero."
| | 05:09 | I'll close the browser again and return to Flex Builder.
| | 05:13 | And now right before the trace statement and I'm going
to end a statement that increments the value of myVar.
| | 05:20 | myVar ++.
| | 05:22 | Because myVar was declared outside of any functions,
| | 05:25 | it will persist in application memory
for the duration of the user's session.
| | 05:29 | Each time I execute the traceit function I'll
increment the value of the variable by one.
| | 05:34 | And then output the value using the trace statement.
| | 05:38 | Once again I'll run the application in debug mode,
| | 05:43 | and watch what happens in the console
each time I click the Trace button.
| | 05:48 | Each time I click,
| | 05:49 | the value of the variable is incremented by one,
| | 05:52 | and then the traces them and outputs the new value.
| | 05:55 | So that's a look at the trace statement.
| | 05:57 | You can call the trace statement from any
actionscript code. It accepts a single string
| | 06:03 | that is then output to the logging target
| | 06:06 | and the default logging target is
the console view in Flex Builder 3.
| | 06:11 | Now in the next video I'll show you some additional debugging
tools including how to use breakpoints to suspend application
| | 06:17 | execution and get a chance to peek at the values
of variables from within the Flex Builder interface.
| | Collapse this transcript |
| Using breakpoints| 00:00 | In this video I describe how to use breakpoints.
| | 00:04 | A breakpoint allows you to suspend application execution at a certain
moment so that you can then inspect the application's internal state.
| | 00:12 | Breakpoints can be set in a number of ways,
but there's some basic rules to know about.
| | 00:17 | First off, you can only set a breakpoint on
a line that contains some ActionScript.
| | 00:22 | For example, let's say that I had a label control. I'll
create the label control here. I'll give it a text property,
| | 00:33 | and nothing else.
| | 00:36 | If I were to set a breakpoint at this line of code,
| | 00:39 | the breakpoint would never be reached
so it would be effectively ignored.
| | 00:42 | You can only execute breakpoints upon an ActionScript statement.
| | 00:47 | Examples of actionscript statements in this application
upon which you could set a breakpoint include
| | 00:52 | any of the statements within the functions,
| | 00:54 | or on the lines that declare the buttons that call the functions.
| | 00:58 | Because the click event handlers within the button
declarations constitute ActionScript statements.
| | 01:04 | Here's how you can set a breakpoint.
| | 01:06 | Lets say for instance that I wanted to set a breakpoint on line 9
| | 01:10 | that had the statement of var localVar:Number=0.
| | 01:14 | I can set a breakpoint by right-clicking on the line number
| | 01:17 | and selecting Toggle breakpoint.
| | 01:20 | If I want to remove the breakpoint I can right click and toggle it off.
| | 01:24 | I can also double-click on that same point and it will create
the breakpointt. Notice that the indicator to the user that
| | 01:31 | there's a breakpoint on this line is a little
bubble icon right next to the line number.
| | 01:35 | And then double-clicking it again removes the breakpoint.
| | 01:38 | And finally there's a keyboard shortcut,
Control+Shift+B for breakpoint,
| | 01:43 | that also toggles the breakpoint on and off.
| | 01:46 | I'm going to leave the breakpoint on now
| | 01:49 | and run the application in debug mode.
| | 01:52 | Just as with the trace statement, breakpoints are only be
respected when you running the application in debug mode and
| | 01:59 | you have the debug version of the Flash Player installed.
| | 02:02 | The debugit function in this case would be triggered
by clicking on the button labeled Debug.
| | 02:08 | I'll click the Debug button on the toolbar
| | 02:11 | and then save and launch the application if necessary,
| | 02:15 | and then to trigger to breakpoint out click the Debug button.
| | 02:19 | In the background Flex Builder notices
that I'm trying to debug into a breakpoint,
| | 02:23 | and it asks me if I want to move to the debugging perspective.
| | 02:28 | I'll click Yes
| | 02:29 | and Flex Builder switches to the debugging perspective,
and it shows me where I am in the application.
| | 02:36 | Notice next to the line number that
the breakpoint indicator is still there.
| | 02:40 | But there's also a little right arrow icon
overlaid on top of the breakpoint indicator
| | 02:45 | that indicates that this is the current point of execution.
| | 02:49 | If I try to move back to the browser at this point, I'll see
that I either can't reach the browser at all or if the
| | 02:56 | browser does come up I won't be able
to interact with the application.
| | 03:00 | Notice that when I move the cursor over the screen, I just see a
little busy cursor that indicates the application isn't accessible.
| | 03:07 | To continue or resume execution in the application,
| | 03:12 | Go to Flex Builder is Debug view in the
top center of the debugging perspective
| | 03:16 | and click the Resume button, which is a little right arrow icon.
| | 03:21 | You can also press the F8 function key to resume execution.
| | 03:25 | Then I'll press Alt+Tab
| | 03:28 | or Command+Tab on the Mac
| | 03:29 | to move back to the application and I'll see that the application
is now active again and I can interact with the buttons.
| | 03:37 | I'll debug again, jumping into the application.
| | 03:40 | Alt+Tab back to Flex Builder
| | 03:42 | and I'll show you the next available button in the debug view.
| | 03:46 | The Terminate button allows you to terminate the debugging session.
| | 03:50 | NOtice that there's an instance of
the Terminate button in the debug view.
| | 03:54 | But there's also one in the Console view.
| | 03:57 | They do exactly the same thing-
they terminate the current debugging session.
| | 04:01 | It's up to you to terminate the debugging session. It doesn't
happen automatically and you want to make sure that you've
| | 04:07 | terminated the debugging session before
you make any changes to your code
| | 04:11 | or try to run the application again.
| | 04:14 | So I'll click the Terminate button
to terminate the debugging session.
| | 04:18 | You may have noticed that when I did
that the browser closed automatically.
| | 04:22 | That will happen on some operating
systems and some browsers, but not all.
| | 04:27 | Regardless of whether the browser actually closes, you can tell
whether the debugging session is still current by looking
| | 04:33 | at the debug view at the toolbar.
| | 04:35 | If all these debugging action buttons are disabled,
| | 04:38 | that means that your debug session is terminated.
| | 04:41 | Now if you want to start the debugging session again, you can
either go back to the toolbar and click the debug button.
| | 04:48 | You can go to the menu select and Run, Debug
| | 04:52 | and select the application or you can go to debug session,
right-click on one of the terminated debugging sessions,
| | 05:00 | and then select Relaunch,
| | 05:02 | and that will relaunch the debugging session.
| | 05:05 | Once again, I can debug into the application,
| | 05:08 | freezing the application at the breakpoint,
| | 05:11 | and from this point I'll be able to inspect variables
and other aspects of the application's internal state.
| | 05:17 | In the next video, I'll show you how to inspect these variables
| | 05:22 | using the Variables view and the Expressions view.
| | Collapse this transcript |
| Watching variables and expressions| 00:00 | In this video I'm going to show how to
inspect data when a break point is active.
| | 00:05 | In the last video I showed you how to set the break point
| | 00:08 | and then how to trigger the breakpoint by executing
the code on which the breakpoint was set.
| | 00:13 | I showed you that breakpoints only work while you're in debug mode,
| | 00:17 | and only if you have the debug version of the Flash Player installed.
| | 00:21 | To get started with this demonstration, I'm going to add some
code to the debug function in the file debugging demo.MXML.
| | 00:29 | I'm going to create a loop using the for keyword. I'll use a variable
called i, typed in as int, that starts with the value of zero.
| | 00:40 | In the second part of the for loop expression, I'll loop
as long as the value of i is less than or equal to 10
| | 00:47 | and in the third part of the expression I'll increment
the value by one on each time through the loop
| | 00:52 | using the operator plus plus.
| | 00:56 | I'll put in the code block, consisting of a pair of braces,
| | 00:59 | and on each time through the loop
I'll increment the value of localVar by one.
| | 01:07 | Notice before I run this code that I already have the breakpoint
set at line 9, the first line of code within the function.
| | 01:14 | So when I execute the debug function while in debug mode,
I'll be suspending application execution of line 9,
| | 01:22 | and then I'll have an opportunity to step through the
code one line at a time and inspect the data as I go
| | 01:29 | I'll save my changes and debug the application.
| | 01:35 | I'll click the Debug button to execute the debugit function.
| | 01:40 | Come on back to Flex Builder and open the Flex debugging perspective.
| | 01:46 | Notice that the application execution suspends
at line 9, where I have the breakpoint.
| | 01:52 | Now let's take look at the Variables view.
| | 01:54 | I'm going to expand the height of the top panel
so I can see a little bit more information.
| | 02:00 | Notice within the Variables view, there are three entries.
| | 02:04 | this, localVar, and i.
| | 02:07 | The rules for the Variables view are these.
| | 02:10 | This always appears.
| | 02:12 | And in the context of an application,
it represents the application itself.
| | 02:16 | All of the other top-level entries will be variables
that are declared within the current function.
| | 02:22 | So for instance localVar and i are both
declared within the current function.
| | 02:27 | They are both currently undefined because we haven't
reached the code that sets their initial values yet.
| | 02:33 | I'm now going to step through the code one line at a time,
| | 02:36 | and let's watch what happens in the
Variables view in the top right corner.
| | 02:41 | To step through code, use the stepping tools in the debug view.
| | 02:45 | There are three, labeled step into, step over and step return.
| | 02:51 | When you're just trying to execute one line of code at a time,
without stepping in to functions that you might be calling,
| | 02:57 | you should use the step over button.
| | 03:00 | I'll click this button a few times and watch what
happens in the Variables view in the top right corner.
| | 03:06 | As I click past the first line of code,
| | 03:09 | the localVar variable shows a new value of zero.
| | 03:12 | It's now being both instantiated and its initial value set.
| | 03:17 | Now I'll step over the for statement.
Notice the value of i is set to zero as well.
| | 03:23 | Now each time I click, notice the state of the Variables view
changes and the new value of the variables change as well.
| | 03:30 | Each time I execute the statement localVar++,
| | 03:34 | localVar is incremented by one,
| | 03:36 | and each time I go through the loop again the
value of i is incremented by one as well.
| | 03:42 | OK so that's inspecting a variable that's declared within a function.
| | 03:47 | But what about inspecting a variable
that was declared outside the function?
| | 03:51 | I'll terminate the debugging session and
return to the development perspective.
| | 03:55 | This time instead of incrementing and inspecting the variable
that's declared within a function I want to do the same
| | 04:02 | thing with the variable is declared outside the function,
| | 04:05 | one that persists for the duration of the application sessions.
| | 04:08 | So I'm going to change the code in the debugging function,
| | 04:12 | and instead of incrementing the value of localVar, I'll increment
the value of myVar which was declared outside the debugit function.
| | 04:21 | I'll save the changes and run the application again in debug mode.
| | 04:28 | I'll click the debug button, return to Flex Builder
| | 04:32 | and open the debugging perspective.
| | 04:34 | Notice that the value of myVar is not displayed
at the top level of the Variables view.
| | 04:40 | That's because it wasn't declared inside the current function.
| | 04:43 | Instead we're going to find the value
of myVar as a property of this,
| | 04:48 | which currently represents the application itself.
| | 04:51 | I'll go to the Variables view, click on this
and I'll see a little right arrow icon.
| | 04:57 | When I click that button, it opens up this
and it shows the value of myVar.
| | 05:03 | I'm going to double-click the Variables tab to expand this
to full screen; we'll be able to see a lot more that way.
| | 05:09 | And notice that the application itself shows three items:
| | 05:13 | inherited, document descriptor and the variable that I declared, myVar.
| | 05:18 | You can also dig very deeply down into the application by clicking
on the inherited section and you'll see an extensive list
| | 05:25 | of all the different properties of the current application.
| | 05:29 | We do not need this so I'm going to collapse the inherited section
again, and instead I'm going to put the selection bar on myVar.
| | 05:37 | Double-click the Variables tab again restore it to its original size.
| | 05:40 | Scroll down to the code that I'm stepping through,
| | 05:44 | and now I'll start stepping through the code again.
| | 05:47 | Notice that as I step through. I'm now incrementing the
value of myVar, which is a member of this, the application.
| | 05:55 | There are times however when you want to be able
to inspect values that are a little harder to get to
| | 06:01 | and instead of having the Variables view
completely open to full screen,
| | 06:05 | you want to limit what you're looking at.
| | 06:07 | That's what you use the Expressions view for.
| | 06:10 | The Expressions view appears in the same
tabbed interface as the Variables view
| | 06:14 | In the Expressions view, you can add any expression you like,
| | 06:19 | and then you can evaluate the expression
as you're stepping through code.
| | 06:23 | Here are a few different ways of adding an expression.
| | 06:26 | First of all, you can right-click in the
Expressions view and select Add Watch Expression.
| | 06:32 | So for instance, if I typed in the expression, this and clicked OK,
| | 06:36 | I see the application object, just as I did in the Variables view,
| | 06:40 | but this time it wouldn't separate the properties using the inherited
category. Instead all the properties are listed in a single list.
| | 06:49 | To remove a watch expression, click on it
| | 06:52 | and then click the X icon.
| | 06:54 | Or you can also right-click and select Delete.
| | 06:57 | But here is a much simpler way of adding a watch expression.
Let's say that I wanted to put a watch on the variable myVar.
| | 07:05 | I can go to the variable in my code, right-click on it,
| | 07:09 | and then select this menu choice from the context menu.
| | 07:13 | Watch myVar.
| | 07:15 | When I add the variable as a watch expression to the Expressions view,
| | 07:19 | I can now step through the code and watched just that one variable.
| | 07:24 | The Expressions view allows me to watch data variables
that I'm currently interested in without having to navigate
| | 07:30 | through all the rest of the information
that the Variables view always presents.
| | 07:35 | Finally I'll show you one other trick. The breakpoints view appears
in the same tabbeed interface as variables and expressions.
| | 07:43 | You can use the breakpoint view to manage breakpoints at runtime.
| | 07:47 | The check mark next to each breakpoint listed allows
you to activate and deactivate the breakpoint.
| | 07:53 | So if I click to deactivate that breakpoint,
| | 07:56 | and then I clicked the Resume button,
I'll no longer be hitting that breakpoint.
| | 08:01 | If I click to activate it again and return to the
running application and click the debug button,
| | 08:08 | I'll now be in the breakpoint again,
| | 08:10 | I'll be able to click on the Expressions view and
then be able to continue stepping through the code.
| | 08:16 | So that's a look at how to inspect
data in a running Flex application.
| | 08:20 | You put a breakpoint on the line of code
where you want to freeze execution,
| | 08:25 | and then while you're in the breakpoint, you use the Variables
and the Expressions views to take a look at the data.
| | 08:31 | In later chapters in the video series, as we get into these
of more complex data, you'll find at the Variables and the
| | 08:38 | Expressions views are invaluable for allowing you to inspect
complex data that is returned say from an application server
| | 08:45 | Even if you have a complete data set, you'll be able to drill down into
and inspect that data and see exactly what your application has in memory.
| | Collapse this transcript |
|
|
10. Programming with Events Understanding the Flex event architecture| 00:00 | In this chapter of the video series I'm going to describe
how to use the Flex event model to share information
| | 00:06 | between components and move data around an application.
| | 00:10 | I'll start with the simple description of the basics of how
events work, then we'll take a look at how to handle events,
| | 00:16 | how to listen for them and react by executing ActionScript code.
| | 00:20 | In later videos in this chapter I'll talk about how to
generate your own events building your own custom event classes
| | 00:26 | and dispatching them from custom components.
| | 00:28 | If you're following along in the exercises of this video series, import
the project Chapter 10 Begin and then open the file EventTracker.mxml.
| | 00:39 | This application, the EventTracker, handles events of
the application component and also of a button component,
| | 00:46 | and then logs the event so we can see when they're happening.
| | 00:49 | Go ahead and start up the application if you're following along on
your own system, or you can just watch on the video and you'll see
| | 00:57 | that as the application starts up a number of events occur that are
then logged in the text area control in the center of the application.
| | 01:04 | In this video I'd just like to describe the nature and
names of these events and the order in which they occur.
| | 01:09 | There are 2 basic kinds of events that
you can listen for in a Flex application.
| | 01:13 | Events are informally categorized as either system events or user events.
| | 01:18 | A system event is an event that occurs and is dispatched by
the Flex framework without any interaction from the user.
| | 01:25 | The events that are displayed in this log are all system
events; events that are dispatched as the application starts up.
| | 01:33 | These kind of events are sometimes called LiveCycle Events
because they give you information about the live cycle;
| | 01:39 | the cycle of creating an object and then displaying it on the screen.
| | 01:43 | There are 4 LiveCycle events that are worth knowing about.
| | 01:46 | They're called pre-initialize, initialize,
creation complete, and application complete.
| | 01:52 | All components receive the pre-initialize,
initialize, and creation complete events.
| | 01:57 | The pre-initialize event can be handled from
any component other than the application itself,
| | 02:01 | and it indicates that the object's properties have been read
but the object hasn't actually yet been created in memory.
| | 02:08 | The initialize event happens next, and it tells
you that the object's properties are all created,
| | 02:13 | but the application's properties and methods
may not all be yet be callable.
| | 02:17 | Finally, every component, including the application,
always generates a creation complete event.
| | 02:22 | The creation complete event tells you that the
object is completely created and ready to use.
| | 02:27 | Finally, the application itself dispatches an event called
ApplicationComplete that comes after its creation complete event.
| | 02:34 | This event tells you that the application is completely ready for use.
| | 02:37 | Taking into account the containership architecture of a Flex application
it's also worth knowing that the LiveCycle events always occur
| | 02:44 | from the most deeply nested object outward through the containership.
| | 02:48 | So, for instance, for the initialize and creation complete events
they would occur first on a nested button then on any container
| | 02:55 | in which the button was nested, and then
finally at the very end on the application.
| | 02:59 | So when you get the creation complete event at
the application level it tells you that everything
| | 03:04 | in the application that's being created upon application
startup has been completely created and is ready for use.
| | 03:09 | In fact, the creation complete event of the
application is probably the most common place
| | 03:14 | where you'll see Flex developers executing application startup
code; code that they use to initialize the state of the application,
| | 03:20 | make initial requests for data from remote servers, and so on.
| | 03:24 | You can also choose to use the application complete event
which occurs after the application's creation complete event.
| | 03:30 | So those are system events.
| | 03:32 | Now let's talk about user events.
| | 03:34 | A user event is an event that's dispatched in reaction to a user gesture.
| | 03:39 | Examples of user gestures include pressing a key on the
keyboard, moving or pressing the button on a mouse, and so on.
| | 03:45 | To see some of these user events at work I'm going
to clear the event log by clicking that button,
| | 03:51 | and then I'm going to interact with the button with the label Test button.
| | 03:55 | Notice that as I move the cursor over the
Test button I get an event called MouseOver.
| | 04:00 | I'll move the mouse off the button and I get the event MouseOut.
| | 04:03 | I'll clear the event log, then once again
move the cursor over the Test button.
| | 04:08 | I'll click down on the button and I'll get a ButtonDown event.
| | 04:13 | I'll move the cursor off the button and get a MouseOut event.
| | 04:16 | Now move the cursor over the button again, click down,
and release the mouse button, and now I get a Click event.
| | 04:23 | The difference between a MouseDown event and a click
event is that the click event is only dispatched
| | 04:28 | when the mouse button is pressed down and
released while it's over the same object.
| | 04:33 | That's the basics of how user events work.
| | 04:36 | There are literally hundreds of different kinds of
events that are supported throughout the Flex framework.
| | 04:40 | As with methods and properties, the easiest way to
find out whether a particular event is supported
| | 04:45 | by a component is to look at that component's documentation.
| | 04:49 | So now I'll go back to the code, click onto the MXML button
declaration where I'm actually handling these events,
| | 04:56 | and then I'll press Shift+F2 to go into
the Help screen for the button component.
| | 05:00 | Once the Help screen appears I'll click the events link
at the top of the documentation and I'll see a list
| | 05:07 | of all the events that are supported by the particular component.
| | 05:10 | As we get into handle events you're going to learn about event objects
and how to find out exactly what happened when an event occurs.
| | 05:18 | So in the next video, I'm going to show some basics about how
to handle an event using an MXML attribute-based event listener,
| | 05:25 | and then we'll execute some ActionScript code and inspect the event
information that you receive as a developer in the form of an event object.
| | Collapse this transcript |
| Using MXML attribute-based event listeners| 00:00 | In this video I'm going to describe how to listen for and handle
a simple event using an MXML attribute-based event listener.
| | 00:08 | To demonstrate this I'll create a brand new application.
| | 00:11 | If you're following along with the exercises just follow these steps.
| | 00:14 | I'm working in the project Chapter 10 Begin.
| | 00:17 | From the menu select File>New>MXML Application.
| | 00:23 | Name the new application SimpleEvent.mxml.
| | 00:27 | Set the layout property to vertical and click Finish.
| | 00:30 | Now I'm going to add 2 components to the application.
| | 00:36 | I'll go to Design view, and then in the
Components view I'll drag in a button and a label.
| | 00:42 | I'll set the buttons label to Click Me, and I'll set the
labels ID to Message Label, and then go to Source view.
| | 01:01 | The most commonly used event of the button control is the Click event.
| | 01:06 | This is the event that, as I described in the previous
video, occurs when the user clicks down on the button
| | 01:11 | and then releases the mouse button while
the cursor is still over the component.
| | 01:15 | Here's how you create a simple MXML attribute-based event listener.
| | 01:19 | The event listener is exposed as an attribute of the MX button component.
| | 01:24 | The name of the attribute is the same as
the name of the event, in this case Click.
| | 01:29 | I'll press the space bar, and then start typing Cl
until I see Click in the list of available attributes.
| | 01:36 | Then I'll press Enter.
| | 01:37 | Any ActionScript code that I put between the quotes
will be executed when the click event occurs.
| | 01:43 | So, in order to log the event and show the user what
happened I'll change the text property of the message label.
| | 01:49 | The ActionScript code will be message label.text=
and then in single quotes You click the button.
| | 02:01 | I'll double click on the Source view editor tab so I can see all
of the code on screen, and that's the completed event handler.
| | 02:08 | Now I'll save and run the application, and then when I
click the button the text of the message label updates
| | 02:18 | in reaction to the ActionScript code being executed.
| | 02:21 | This is called an inline event handler.
| | 02:24 | That is to say, all the ActionScript code that's
being executed is right there in the MXML declaration.
| | 02:29 | This works fine as long as you're executing
a single ActionScript statement.
| | 02:33 | More commonly, though, you'll want to execute more than a single statement.
| | 02:37 | In this case, you should create a custom
ActionScript function and then call the function.
| | 02:42 | So to show that, I'm going to create a script section,
| | 02:46 | then within the script section I'll create a
private function and I'll name it ClickHandler.
| | 02:52 | ActionScript event handler methods almost always return void.
| | 02:56 | There's a specific reason for that that I'll talk about in a later video
that's driven by the architecture of a method called addEventListener.
| | 03:03 | In this context you don't necessarily
have to follow the rule of returning void
| | 03:07 | or nothing from an event handler function, but
it's so common that I strongly recommend it.
| | 03:12 | Now I'll take the code that was already in the click event, and I'm
going to cut and paste it, and move it into the ClickHandler function.
| | 03:20 | Then, in the MXML attribute-based event listener, in reaction
to the click event, I'll call the method ClickHandler.
| | 03:27 | I'll save and run the application again,
click the button again in the application,
| | 03:35 | and you can see that the code does exactly the same thing as before.
| | 03:38 | The nice thing now is that because I have a separate function set up if
my code requirements become more complex I can build out this function
| | 03:46 | to whatever complexity is needed to satisfy
the requirements of the application.
| | 03:50 | So that's a simple MXML attribute-based event listener.
| | 03:54 | The name of the attribute matches the name of
the event, and whatever ActionScript code you put
| | 03:59 | into the event listener will be executed upon the
event being dispatched by that declared component.
| | Collapse this transcript |
| Understanding event objects| 00:00 | In this video I'm going to describe the use of event objects;
| | 00:04 | ActionScript objects that are generated whenever
events are dispatched in the Flex framework.
| | 00:09 | Whenever an event occurs in Flex, the framework generates an
instance of an ActionScript class that we call the Event object.
| | 00:16 | The data type of the event object differs depending on
which component dispatches the event and which event it is.
| | 00:22 | Here's an example.
| | 00:24 | Let's take a look at the documentation for the button component.
| | 00:27 | I'm still working in the file SimpleEvent.mxml, I'll place the cursor
in the word button and press Shift+F2 to go to the Help screen.
| | 00:37 | Once the Help screen opens, I'll click on the
Events link and then I'll locate the click event.
| | 00:44 | This is the event that occurs when the user presses down and then
releases the mouse button while the cursor is still over the component.
| | 00:51 | I'll click into the event documentation and it shows me that this
particular event generates and instance of a class called MouseEvent.
| | 01:00 | The MouseEvent class, as with many of the event classes in the
Flex framework is a member of a package called Flash.events.
| | 01:08 | So here's how we handle the event and get information out of it.
| | 01:11 | First of all, you're going to restructure your event handler function.
| | 01:15 | Instead of a simple no arguments function, you should create your handler
functions to receive an event object typed as the appropriate class,
| | 01:23 | and then when the event occurs you pass the event
object explicitly through event handler function
| | 01:29 | by passing it in as an argument to the function call.
| | 01:32 | To demonstrate this, I'm going to save
SimpleEvent.mxml as a new application.
| | 01:37 | From the menu select File>Save As and name the new file EventObject.mxml.
| | 01:47 | Now modify the click handler function.
| | 01:50 | Place the cursor between the parentheses and redesign
the function to receive and argument named event.
| | 01:56 | The actual name of the argument can be anything
you want, but it's commonly called either event
| | 02:02 | or sometimes just the letter e. The data type of
the event object argument should be MouseEvent.
| | 02:09 | Again, we know that because I looked at the
documentation for this component and its click event.
| | 02:15 | Now to pass that argument in when the event occurs place your cursor
between the parentheses in the call to the click handler method.
| | 02:23 | The name of the event object is always
the same at the moment you capture it.
| | 02:28 | It's always called event with a lower-case e. No matter what kind of
event you're passing, no matter what component dispatches the event,
| | 02:36 | the variable name of the event object is always simple event.
| | 02:40 | So now let's track the flow.
| | 02:41 | The user clicks the button, that generates the event
object; it's an instance of the MouseEvent class.
| | 02:48 | We explicitly pass the event object into the event
handler function which we've named ClickHandler,
| | 02:53 | it's received as an argument named event,
data typed as the MouseEvent class.
| | 02:58 | And so now we're ready to test and debug the event object.
| | 03:02 | Place a break point at line 8 of the click handler method.
| | 03:05 | This is the first line of ActionScript code within the function,
and it's our first opportunity to inspect the event object.
| | 03:12 | Save your changes and debug the application.
| | 03:15 | To make sure that you're debugging the new application, click the arrow
next to the Debugging button, and select the new application event objects.
| | 03:25 | After a few moments the application opens up in the browser.
| | 03:29 | Then click the button to dispatch the click event,
and when Flex Builder tries to take focus select it,
| | 03:35 | and if it prompts you to open the Flex Debugging Prospective, click yes.
| | 03:40 | Go to the Variables view and double-click
its tab to open it to full screen.
| | 03:44 | Here's what the event object looks like.
| | 03:47 | Notice that it's data typed as an instance of a class called
MouseEvent, and all of this event class's properties are listed here.
| | 03:55 | Notice that the specific properties of the MouseEvent class
include Boolean values like Alt Key, Control Key, and Shift Key,
| | 04:02 | which help you determine whether the user was
pressing any of those keys when the event occurred.
| | 04:07 | But the MouseEvent also inherits a couple of critical
properties from its superclass known as the Event class.
| | 04:14 | These properties are listed under the inherited section, and the
ones I'm interested in talking about are these: Target and Type.
| | 04:22 | The event objects Type property is a string value, which
always references the name of the event that occurred.
| | 04:29 | Here it is, it's named Type, and it's value is the word Click.
| | 04:34 | There's also a Target property which is a reference variable
that points to the object that dispatched the event.
| | 04:41 | In this case the button that I clicked.
| | 04:43 | Both the Type and the Target property
are members of every single event class.
| | 04:47 | This is because all event classes are subclassed
from a superclass called Flash.events.event.
| | 04:55 | In fact, when you write your own custom event
handler methods, it's possible to take a shortcut.
| | 05:02 | I'm going to terminate the debugging session and then reopen the
code, and I'm going to change the data type of the event argument
| | 05:11 | in my custom event handler method from MouseEvent to simply event.
| | 05:16 | Now we're getting into some object-oriented stuff here.
| | 05:19 | The event object, or event class, is the superclass in a
parent child relationship between event and MouseEvent.
| | 05:26 | We think of the event class as being the
super-duper class of all event classes.
| | 05:31 | All event classes are descended from this class, and the Type and
the Target properties are actually defined in this superclass.
| | 05:39 | If you're building an event handler method
and you don't need all the specific properties
| | 05:43 | of the native event class that's actually being generated, and you
don't feel like going and looking it up in the documentation to find
| | 05:50 | out what class is being generated, you can
always refer to an event object as simply event.
| | 05:55 | You'll still have access to the Type and Target properties because they're
defined at the event class level, but you won't have direct access to any
| | 06:02 | of the specific properties of the native event object.
| | 06:06 | In the case of the MouseEvent, for instance, you wouldn't
have access to things like Shift Key, Control Key, and so on.
| | 06:11 | But this information should be enough.
| | 06:14 | So here's what we're going to do to see the Type and Target properties.
| | 06:17 | I'm going to create another couple of labels.
| | 06:20 | The first one will have an ID of Type label, and
the second one will have an ID of Target label.
| | 06:29 | I'm also going to assign an ID property to the button control.
| | 06:33 | When the event occurs I want to report which button was clicked, and I need
for that component to have a unique identifier so I can refer to it easily.
| | 06:41 | So I'm going to give the button an ID of simply MyButton.
| | 06:46 | Now I'll go back to my click handler, and I'm
going to add another couple ActionScript statement.
| | 06:52 | First I'll use the Type label component to
output the name of the event that occurred.
| | 06:58 | I'll put in the literal text the event is and then
I'll access the Type property of the event object.
| | 07:10 | Then I'll do the same thing with the Target label, and I'll put in the
literal text the object dispatching the event is, and then event.target.id.
| | 07:28 | The ID is a property of the object that dispatched the event,
and the expression event.target references that object.
| | 07:36 | I'll save the change, and run the application.
| | 07:39 | I'll click the button and you'll see the response that the event
is named Click and the object dispatching the event is MyButton.
| | 07:50 | So let's review.
| | 07:51 | When you create an event handler function you should
model the function to expect an event argument.
| | 07:57 | If you know what specific type of event is occurring, such as
mouseEvent, you should data type the event object as that type.
| | 08:05 | If you're not sure and you don't need the specific
properties of that object you can simply refer to it as event.
| | 08:11 | Event handler functions should always return void.
| | 08:14 | This makes them compatible with the addEventListener
architecture that I'll describe in a later video.
| | 08:19 | Every event object has a Type property and a Target property.
| | 08:23 | The Type property is a string value that
references the name of the event that occurred,
| | 08:27 | and the Target property is a reference
to the object that generated the event.
| | 08:31 | So that's how you build an event handler function that gives you specific
information about what event occurred, which object dispatched the event,
| | 08:39 | and other detailed information that might be useful.
| | Collapse this transcript |
| Creating event listeners with addEventListener()| 00:00 | In this video I'm going to describe an alternative approach to
creating event listeners using a method called addEventListener.
| | 00:07 | The addEventListener method is available on every component
in the Flex framework that knows how to dispatch an event.
| | 00:13 | The purpose of addEventListener is to allow you to build
event listeners using ActionScript code instead of MXML,
| | 00:18 | which gives you a little bit more flexibility about when you listen
for events, when you want to remove these event listeners, and so on.
| | 00:25 | Unlike the MXML-based approach you can wrap ActionScript addEventListener
calls inside conditional code, call them only in certain situations,
| | 00:34 | and basically model the application exactly the way you want.
| | 00:37 | To demonstrate the use of the addEventListener
architecture I'll take the EventObjects.mxml file
| | 00:43 | that I already created and save it as a new application.
| | 00:46 | From the menu I'll select File>Save As and
then we'll call this AddEventListenerDemo.mxml.
| | 00:57 | I'm double-clicking on the editor tab to make it full screen,
| | 01:05 | and then I'm going to remove the mxml attribute-based
event listener that I had created in the previous videos.
| | 01:12 | It's very common to create event listeners as the application starts up.
| | 01:16 | So to do it this way in this application I'm
going to create a new function called initApp.
| | 01:22 | You may have noticed that whenever I create an initialization
function for the whole application I name it initApp.
| | 01:28 | That's a convention that a lot of developers follow,
and then I'll place the cursor in the application tag
| | 01:34 | and I'll add a creation complete event handler and call that method.
| | 01:39 | As I mentioned in an earlier video, the creation complete event listener
for the application is the safest place to write initialization code.
| | 01:48 | When that event has occurred you know that all objects have
been constructed in memory and you'll be able to address them,
| | 01:53 | set their event listeners, and otherwise
set up your whole application architecture.
| | 01:59 | Now, I'll move the cursor down to the initApp method.
| | 02:02 | The one requirement you need to satisfy for a component to which you want
| | 02:05 | to add an event listener using ActionScript
is that it must have a unique identifier.
| | 02:09 | This is already the case.
| | 02:11 | I'm going to add an event listener for the button with an ID of myButton.
| | 02:15 | And here's the syntax.
| | 02:17 | I'll call the method addEventListener as a member of the button.
| | 02:22 | Notice I get a list of event names.
| | 02:26 | I'll explain the syntax of these event names, but for now what I
know is that I'm getting an event object typed as a MouseEvent class.
| | 02:34 | So I'm going to start typing in MouseEvent, and you'll
see that that narrows the list of available values
| | 02:40 | to just those events that are generated with the MouseEvent class.
| | 02:44 | I'll select MouseEvent.click.
| | 02:47 | This is a constant of the MouseEvent class.
| | 02:50 | The value of this constant is the word Click, but it's very common to use
these constants as the event names in the addEventListener architecture
| | 02:58 | because by using the constant it ensures that
you won't make any silly coding mistakes.
| | 03:03 | I'll come back to that point in a little bit and explain it more.
| | 03:06 | For now, the point you should take is that the first value that you pass
| | 03:09 | into the addEventListener method if the
name of the event that you're listening for.
| | 03:13 | The second argument that you pass in is the
name of the function that you want to execute.
| | 03:20 | In this case it's ClickHandler.
| | 03:22 | In the context of the addEventListener call
you only pass in the name of the function,
| | 03:28 | you don't pass in additional parentheses and
you don't explicitly pass the event object.
| | 03:34 | When you set up an event listener using the addEventListener
method you're telling the component this is the method I want you
| | 03:40 | to call when this event occurs.
| | 03:42 | It's up to that component to know how to all the method
and the signature it looks for is always the same.
| | 03:48 | It always expects to pass the event object into the method as its only
argument, and it always expects the event handler function return void.
| | 03:56 | So this is the common syntax of all event handler functions, receiving
a single event object as its only argument and returning void.
| | 04:05 | Let's go ahead and test the application.
| | 04:07 | I'll save and run the application, click the button, and you'll see
that the event listener is still working exactly the way it did before.
| | 04:17 | I'm still receiving the event object, which
still has the property's Type and Target.
| | 04:22 | Now I'm going to make one change.
| | 04:25 | I'll go back to the event handler method,
ClickHandler, and I'm going to change the data type
| | 04:30 | of the event object to the actual class that I'm expecting, MouseEvent.
| | 04:35 | Now that I've typed the object as a MouseEvent class, I'll have access to
all those specific event object properties that are a part of this class.
| | 04:44 | And so as one more demonstration I'm going to create another label
at the bottom of the application, and I'm going to give it an ID
| | 04:53 | of KeyMessageLabel and then I'll go back to the ClickHandler
method, place the cursor after the existing code,
| | 05:02 | and then I'll change the KeyMessage label's text property to a combination
| | 05:08 | of a literal string-the Shift key was pressed,
and then the event object's shift key property.
| | 05:20 | This is a Boolean property which indicates whether the
user was pressing that key when they clicked the button.
| | 05:27 | I'll save the change, and now I'll run the application.
| | 05:30 | I'll go to the Run button and select my new application,
AddEventListenerDemo, I'll click the button and you'll see
| | 05:39 | that when I clicked it this time the shift key wasn't pressed.
| | 05:42 | Now I'll hold down the shift key and click the button again and
you'll see the value of the shift key property has changed to true.
| | 05:49 | Knowing the structure of the event object is critical.
| | 05:52 | Let me refer you back one more time to the Help system.
| | 05:56 | I know I'm receiving a mouseEvent object,
and the mouseEvent object is a class.
| | 06:01 | So I can place the cursor in the word MouseEvent and press Shift+F2
for the Help system and I'll get to the Help screen for that class.
| | 06:09 | Then I'll click the Properties link and I'll see a
listing of all the native properties of this class.
| | 06:15 | Knowing your event objects and knowing their structures and
what sort of information they can provide is very important.
| | 06:21 | Clearly, though, there's so much information in the Flex
framework that you'll never be able to remember it all.
| | 06:26 | As an example, take a look at the Flash.events package in the Help system.
| | 06:31 | Notice that there are literally dozens of
different event classes used in the framework.
| | 06:35 | You may never use some of them, you may use some
of them all the time like the mouseEvent class.
| | 06:40 | So what's more important is knowing how to get to the Help system,
knowing how to find out which event object is going to be generated
| | 06:47 | by which component and of which event, and once you've determined which
event class is being used finding out what properties it has available
| | 06:55 | to help you understand what happened when
the user executed whatever gesture it was,
| | 07:00 | or when you've handled whatever system event you need to capture.
| | Collapse this transcript |
| Dispatching Events from Custom Components| 00:00 | In this video I'm going to describe how to declare
and dispatch events from a custom component.
| | 00:06 | Your custom components, just like the components that are pre-built
and delivered in the Flex framework should share information
| | 00:12 | with the rest of the application by dispatching events.
| | 00:15 | Just as with those components you have the opportunity to
create custom event classes that can server as message envelopes
| | 00:21 | that wrap and share data with the rest of the application.
| | 00:25 | In this video I'm going to start with showing you how to declare an event,
| | 00:29 | and then how to construct an event object
and dispatch it to the outside world.
| | 00:34 | And then I'll show you how to handle that event in a listening application.
| | 00:38 | To demonstrate this I'll be working with a
component which I've named DispatchingComponent
| | 00:42 | in the component subfolder of the project's source root.
| | 00:45 | Start by creating a brand new application.
| | 00:48 | From the menu select File>New>MXML Application,
and name the application CustomEventHandler.
| | 00:57 | Set the layout property to vertical and click Finish.
| | 01:01 | If the application opens in Source view switch to Design view.
| | 01:07 | Then go to the Components view and locate the
dispatching component, and drag it into the application.
| | 01:14 | The result should be display of a login form wrapped in a panel.
| | 01:19 | Now let's go to that component.
| | 01:21 | Here's a little Flex Builder trick you can try.
| | 01:24 | When you're in Design view and you see an instance of a
custom component displayed on the screen you can double-click
| | 01:29 | on that component and you'll move over to that component.
| | 01:33 | And then go into Source view.
| | 01:35 | Any component that you want to be able to share information
with the rest of the application should declare a custom event.
| | 01:41 | The name of the event is totally up to you.
| | 01:44 | For instance, this is clearly a component that accepts data from the user
for logging into an application, so the actual event that you might want
| | 01:52 | to dispatch could be named Login, but, again,
the name of the event is totally your choice.
| | 01:57 | Here's how you declare a custom component's event.
| | 02:01 | Place the cursor anywhere after the start tag of the
custom component root, then put in a tag called metadata.
| | 02:09 | The mx:metadata tag pair is a compiler tag that
wraps events and other sorts of declarations.
| | 02:17 | Within the metadata tag set put in an
event metadata tag which looks like this.
| | 02:23 | Start off with a bracket and then the word Event with
an upper case E, and then an opening parentheses.
| | 02:29 | The event metadata tag takes 2 attributes; its Name and its Type.
| | 02:35 | The name of the event is whatever you want it to be.
| | 02:38 | In this case we're going to name the event Login, and then its Type
is whatever event class you want to dispatch to the outside world.
| | 02:47 | If you don't put the Type attribute in it defaults to Flash.events.event,
| | 02:53 | that's the name of the superevent class
that I described in the earlier video.
| | 02:57 | We're going to be explicit here because I
want you to see exactly how the syntax works.
| | 03:02 | You put in the Type attribute and make sure that you include
the fully qualified class name, including its package.
| | 03:12 | You'll notice that Flex Builder isn't able to give you
code Help here, it can't autocomplete the event name,
| | 03:17 | you just have to make sure that you put the class name in correctly.
| | 03:21 | So now we've added information to the interface of this component.
| | 03:25 | We've told the consumer of the component we might be dispatching an event.
| | 03:29 | The name of the event is Login and the Type
of its event object will be the event class.
| | 03:35 | Now to actually dispatch the event I'll create a script section
within the component, and I'll create a function named ClickHandler.
| | 03:48 | As with all good event handler functions I'll pass
in an event object and I'll Type this as event.
| | 03:55 | Even though I know I'm getting a click event from
the button, I really don't care about getting all
| | 04:00 | of the detailed information from the mouseEvent class.
| | 04:03 | So for simplicity I'm just typing the event object as event.
| | 04:09 | Now I'll call this function by going to the button component with the
label of Login, I'll add an MXML attributed-based click event listener,
| | 04:18 | and then I'll call the ClickHandler method and pass the event object.
| | 04:23 | Now for the work of dispatching the custom event.
| | 04:27 | To dispatch the custom event the first step is to
create an instance of the appropriate event class.
| | 04:34 | I'll start by creating a variable called
E and Type it as an instance of event.
| | 04:39 | This is exactly the same class that I declared
in the Type attribute of the event metadata tag.
| | 04:46 | And then I'll construct the event object.
| | 04:48 | When you construct an event object you always pass in
the name of the event that you're about to dispatch.
| | 04:54 | This will be Login.
| | 04:56 | Exactly the same string that I used in the
Name attribute of the event metadata tag above.
| | 05:02 | That's all I need to do in terms of constructing the event object.
| | 05:06 | Now to actually dispatch the event I'll call a method
called DispatchEvent, and I'll pass in my new event object.
| | 05:14 | This is sort of a blind throw.
| | 05:16 | By that I mean that the custom component is throwing the event to the
consumer of the component without knowing whether it's being listened for.
| | 05:24 | But those are all the steps.
| | 05:26 | Let me review.
| | 05:27 | You create a metadata tag set, within the
metadata tag set you declare one or more events.
| | 05:33 | Each event is declared with an event metadata tag which has 2 attributes;
the Name which is your arbitrary event name, whatever you want to call it,
| | 05:43 | and the Type which is a fully qualified class name including it's package.
| | 05:47 | At runtime to actually dispatch the event
you construct an instance of the event.
| | 05:52 | In the constructor method call your passing the name of the event again,
| | 05:56 | and this must match the name of the event
that was declared in the metadata.
| | 06:00 | Then, to actually do the dispatch you call the dispatch
event method which is available on every component
| | 06:06 | in the Flex framework, including your own custom components.
| | 06:09 | You pass the event object into the dispatch event method
and now the application can listen for and handle the event.
| | 06:16 | In the next video I'll show you how to
handle this event from the application level.
| | Collapse this transcript |
| Handling events from custom components| 00:00 | In the last video I showed you how to declare and then dispatch
a custom event using the event metadata tag to declare the event,
| | 00:07 | and then the dispatch event method to throw
the event to the current component's consumer.
| | 00:12 | In this video I'll show you how to listen for that event and react to it.
| | 00:17 | I'll be working in this file CustomEventHandler.mxml.
| | 00:20 | In the previous video we incorporated an instance
of the custom component into the application.
| | 00:26 | Now we'll listen for that custom event named Login and react to it.
| | 00:31 | Open the file CustomEventHandler.mxml, and then
go to Source view if it doesn't open there.
| | 00:36 | Notice that the component is declared with a pair of MXML tags.
| | 00:40 | Let's clean this up a little bit; we don't need both of
those tags there, so I'll put in empty tag syntax instead,
| | 00:47 | and then we'll put in the code to listen for the event.
| | 00:51 | You can listen for an event using either an MXML
attributed-based event listener or the addListener method.
| | 00:56 | I'll work with the MXML approach here.
| | 00:59 | I'll first create a script section, and then I'll
create a private function and name it LoginHandler.
| | 01:06 | The function will receive a single argument
named event typed as the event class.
| | 01:13 | If you go back to the dispatching component you'll
remember that that's the type of the event object
| | 01:18 | that we're dispatching, so that's what we're expecting here.
| | 01:22 | Within the login handler method we simply want to alert
the user that the event has been listened for and handled.
| | 01:28 | I'm going to use the alert class to generate a
dialogue box that gives a simple message to the user.
| | 01:35 | The alert class is a member of the mx.controls
package and must be imported before its use.
| | 01:40 | So I'll type in the word alert and then press control space.
| | 01:44 | I'll see a list of available classes and
press Enter to select the alert class.
| | 01:49 | Flex Builder responds by automatically adding
an import statement for mx.controls.alert.
| | 01:55 | Now, I'll call the alert classes show method, and
output a simple literal message You logged in.
| | 02:02 | Right now because we're using the standard event object we don't have a way
yet of passing detailed information such as the user's name and password
| | 02:11 | up to the application that's listening for the event.
| | 02:14 | So for the moment we'll be satisfied just with
notifying the user that the event occurred.
| | 02:19 | The alert.show method can take 2 strings; the first
string argument appears in the body of the dialogue box.
| | 02:25 | There's an additional optional string argument that
you can pass in which will appear in the title,
| | 02:30 | and this is usually a short string such as Login successful.
| | 02:35 | Now to actually call that method and pass the
event object I'll go to the dispatching component.
| | 02:40 | I'll press the space bar and I'll see a list of all
the events, properties, and methods of this component.
| | 02:46 | I'll start typing Login, and notice that the event that I declared in
the metadata tags appears now in the public interface of this component.
| | 02:55 | So, in order to listen for a login event I use a login MXML attribute.
| | 03:00 | And then to respond to that event I'll call the custom
function LoginHandler and pass the event object.
| | 03:06 | I'll go ahead and run the application, I'll click into the form,
type in some values - right now it doesn't matter what I login
| | 03:19 | with because the actual detail data isn't yet being shared with the
rest of the application - but then I'll click the button and you'll see
| | 03:26 | that the event is dispatched by the component and
received and handled at the application level,
| | 03:32 | and in the application I present the custom
dialogue box generated with the alert class.
| | 03:37 | So let's go back to the code and review it.
| | 03:40 | In the application in which you instantiate the custom component
you listen for the event using an MXML attribute-based event handler
| | 03:48 | where the name of the attribute matches the name of the event.
| | 03:51 | Just as with the built-in component's events
you respond by executing ActionScript code,
| | 03:57 | and if you like you can pass an event object
and receive it within your custom event handler.
| | 04:03 | Now in the next video I'll show you how to create your own
custom event class that knows how to wrap specific types of data,
| | 04:09 | and then share that data with the rest of the application.
| | Collapse this transcript |
| Creating and using custom event classes| 00:00 | In this video I'm going to show you how to build
your own custom event class that knows how to wrap
| | 00:05 | and share specific types of data with the rest of the application.
| | 00:08 | Custom event classes are simple ActionScript classes.
| | 00:12 | You can create them using Flex Builder's Class Creation Wizard,
but the most important thing to understand about them is
| | 00:18 | that they must be extended from the standard event class.
| | 00:21 | As with any ActionScript class you should create your custom event
classes in a subfolder of your source root, typically named Events.
| | 00:29 | I'll be working with the same 2 files that
I was working with in the previous videos.
| | 00:33 | The application CustomEventHandler.mxml and
the custom component DispatchingComponent.mxml.
| | 00:40 | To get started with this demonstration, first
create a new subfolder underneath the source root.
| | 00:45 | Go to the SRC directory in the project, right
click on it or control click with the MAC,
| | 00:52 | and select New>Folder, and name the new folder Events, and click Finish.
| | 01:00 | Now I'll create a custom event class.
| | 01:03 | Right click on the Events folder and select New>ActionScript Class.
| | 01:11 | Set the name of the class to Login Event.
| | 01:15 | You can name the class anything you like, but the strong convention is
that the name of a custom event class always ends with the word event.
| | 01:23 | Now you must set the superclass.
| | 01:26 | The superclass is the class from which this one is extended,
and every custom event class must extend the event class.
| | 01:33 | Click the Browse button next to superclass, start
typing the word event until you get to the event class
| | 01:40 | in the Flash.events package, and select it, and click OK.
| | 01:46 | The superclass should now say Flash.events.event.
| | 01:50 | For the code generation options, leave the option
Generate constructor from superclass selected.
| | 01:56 | That's it.
| | 01:57 | This is all the information that you need to provide for the
new ActionScript class wizard to create your new event class.
| | 02:03 | Click Finish and the basic class structure is created for you.
| | 02:08 | As with all ActionScript classes the class starts with a package
declaration which consists of the word Package and then the name
| | 02:15 | of the folder or package in which the class
is stored followed by a pair of braces.
| | 02:19 | The class itself is declared within that package, and then there's a
public function named Login Event which is the class's constructor method.
| | 02:28 | The constructor method has been modeled on the superclass's
constructor method; that is the event class's constructor method.
| | 02:34 | It has one required argument and 2 that are optional.
| | 02:38 | The optional arguments are named Bubbles and Cancelable.
| | 02:41 | I'll be talking about those in the Flex 3 Beyond the
Basics title when we get into more advanced event handling.
| | 02:47 | For now, all I'd like you to do is remove the last 2 optional arguments.
| | 02:51 | You'll remove them both from the login event constructor
method signature and from the call to the supermethod.
| | 02:58 | Here's what the supermethod is doing.
| | 03:01 | The supermethod call is a call to the superclass's constructor method.
| | 03:05 | The Type is the name of the event that's being generated, such as Login.
| | 03:10 | This is then passed into the superclass by calling the supermethod.
| | 03:14 | So that's the basic structure of the custom event class.
| | 03:18 | Now we want to declare properties.
| | 03:20 | The purpose of a custom event class is to wrap data
that can be shared with the rest of the application.
| | 03:26 | We'll wrap that data by declaring the values as properties of the class.
| | 03:30 | There are 2 values to share; the user name and the password.
| | 03:34 | So we'll create one property for each.
| | 03:37 | Within the class declaration declare 2 public properties.
| | 03:41 | The first will be called UserName and it will be typed as a string, and the
second one will be called Password, and it will also be typed as a string.
| | 03:51 | Now with the constructor method you have the option
to rewrite the signature of the constructor method
| | 03:56 | so that you can pass these values in upon object construction.
| | 04:00 | We'll go ahead and do that.
| | 04:02 | After the Type argument, add 2 arguments
into the constructor method signature.
| | 04:07 | The first will be UserName, typed as a string, and
the second will be Password, also typed as a string.
| | 04:14 | Then within the function after the call to the superclass's constructor
method take those argument values and save them into the public properties
| | 04:23 | like this: First we'll say This .UserName =
username, and then This .Password = password.
| | 04:34 | And that's it, that's all you need.
| | 04:37 | There are some other steps that some developers
follow, including use of a method called Clone.
| | 04:42 | The purpose of the clone method is to support bubbling;
that is the ability of the event object to bubble
| | 04:47 | up through the containership hierarchy of the application.
| | 04:50 | That's a subject best saved for a more advanced video.
| | 04:53 | So for now, we won't put in the clone method and this event
object won't bubble by default, so we don't need the clone method.
| | 05:00 | So that's the basic structure of a custom event class.
| | 05:03 | It extends the standard event class, it declares public properties
for whatever data you want to share with the rest of the application,
| | 05:10 | and then optionally you can set up the constructor method of the
class to allow you to pass values in upon object construction.
| | 05:17 | Now in the next video I'll put this altogether; we'll take that custom
component and instead of dispatching an event typed as event we'll type it
| | 05:24 | as Login Event, we'll use that Login Event object to wrap the custom
data, and then we'll share it and handle it at the application level.
| | Collapse this transcript |
| Dispatching and handling custom events| 00:00 | In this video I'm going to bring it all together using the
custom event class that I just created in the previous video,
| | 00:06 | the custom component that's dispatching the event, and the
application that's listening for and handling the event.
| | 00:12 | I'll use the custom event class named Login Event to wrap
data and share that data with the rest of the application.
| | 00:19 | Let's start off in the custom component named DispatchingComponent.mxml.
| | 00:25 | Notice that the metadata tag currently says that the type of
the event object that's being dispatched is Flash.events.event.
| | 00:32 | We'll change that first.
| | 00:33 | Go to the Type attribute, remove Flash.events.event
and replace it with events.login event.
| | 00:42 | Flex Builder doesn't give you any code Help here; it won't
be able to autocomplete the class name, for instance,
| | 00:47 | you just need to make sure that you spell
the package and the class name correctly.
| | 00:51 | Now go down to the ClickHandler where we're
constructing and dispatching the event object.
| | 00:56 | Change the object Type in both places, from event to Login Event.
| | 01:01 | You do need to import this custom class into the custom component.
| | 01:05 | So place the cursor after the name of the
class Login Event and press Control+Space.
| | 01:11 | Flex Builder recognizes that that class hasn't yet been
imported and it automatically creates an import statement.
| | 01:18 | Also change the call to the constructor method from
event to Login Event, and then in order to pass the data
| | 01:26 | into the event object we'll use the constructor
method's additional parameters or arguments.
| | 01:32 | You may remember going back to the Login Event class that the constructor
method was defined to accept 3 arguments; the name of the event
| | 01:39 | and then the data that we want to wrap in the event object.
| | 01:42 | So going back to the component I'll add in those 2 arguments.
| | 01:46 | I'll get the values from userinput.text, and passwordinput.text.
| | 01:52 | The last line of code in the click handler is already fine.
| | 01:57 | We're going to take this event object and dispatch it to the application.
| | 02:01 | Save the changes in the component.
| | 02:03 | Now go to the application.
| | 02:05 | In the application we're currently expecting
an instance of the event class.
| | 02:09 | Change that from event to Login Event, and then just
as you did in the custom component place the cursor
| | 02:16 | after the name of the class and press Control+Space.
| | 02:19 | And once again Flex Builder will automatically
create an import statement for that class.
| | 02:23 | Now go down to the message that we're giving the user,
and we'll be able to be more specific about what happened.
| | 02:30 | We'll be able to tell the user not just that the
event occurred, but also what data was shared.
| | 02:35 | Change the message in the alert.show method call to You
logged in as, and then concatenate the string event.username.
| | 02:46 | Then add a little bit more text with a
password of, and then the value event.password.
| | 02:59 | So now we're using this custom event object as a message envelope.
| | 03:02 | We're wrapping data inside it, dispatching the event to the rest of the
application, and then at the application level we're handling the event
| | 03:10 | and extracting the data out of the event object
in the context of the event handler function.
| | 03:15 | Let's test the application.
| | 03:16 | I'll save it, and run it.
| | 03:21 | I'll type in a user name and password, and click the Login
button, and you'll see that the data is successfully now shared
| | 03:30 | from the component into the rest of the application.
| | 03:34 | Now in later chapters I'm going to show you what to
do with data that you receive from a custom component.
| | 03:39 | But let's review the code at each level one more time.
| | 03:42 | In the custom event class we declare public
properties for each data value that we want to share,
| | 03:48 | and then optionally in the custom event class's constructor method we
allow the developer to pass those values in upon object construction.
| | 03:57 | In the dispatching component, in the metadata tag set in the event metadata
tag we set the Type to the specific custom event class that we want
| | 04:06 | to dispatch, and then at runtime we construct an instance of that class,
populate it with the name of the event and the data we want to share,
| | 04:14 | and then dispatch the event to the rest of the application.
| | 04:17 | At the application level we listen for the event
using either an MXML attribute-based event listener,
| | 04:23 | or the addEventListener method which would work as well.
| | 04:26 | When the event occurs we pass the event object
to our custom ActionScript event handler method,
| | 04:31 | and in that event handler method we handle the event
object, extract the data and do whatever we want with it.
| | 04:37 | And that's a look at more complex event handling
and event management in Flex applications.
| | Collapse this transcript |
|
|
11. Using Dynamic DataLoading XML data with HTTPService| 00:00 | In this chapter of the video series I'm going to describe
how to use a component called the HTTP service class
| | 00:06 | to retrieve XML-formatted data and use that data in your Flex application.
| | 00:12 | This one of the three RPC components that
are supported by the Flex framework.
| | 00:16 | The HTTP service component I'll be demonstrating in this chapter
retrieves what are sometimes known as REST-based services.
| | 00:24 | That's rest, R-E-S-T, which stands for Representational State Transfer.
| | 00:29 | That's a fancy name that basically means
retrieving XML data from a remote server.
| | 00:34 | The format of XML data can be pretty much anything.
| | 00:38 | It's very frequently in a format known as RSS which is used to
represent content from blogs and other content-oriented sites.
| | 00:45 | But you can use the HTTP service component for any XML format.
| | 00:50 | The other two RPC components in the Flex framework
are the remote object and the Web service components.
| | 00:56 | These are also used with remote application servers, and I'll talk
about in great detail in the FLEX III: Beyond the Basics video series.
| | 01:05 | In this chapter we'll focus on HTTP service.
| | 01:08 | The HTTP service class is a component that you
can instantiate using either MXML or ActionScript.
| | 01:14 | I'll focus on the MXML in this application.
| | 01:18 | If you're following along in the exercises,
import the project Chapter 11 Begin
| | 01:23 | from the exercises area and then open the file HTTP Service Demo.mxml.
| | 01:29 | I have that application open on the screen here and
you'll see that it's pretty much an empty application
| | 01:34 | with just a data grid component with a width of 300 pixels.
| | 01:38 | Here is the data we'll be retrieving.
| | 01:41 | I've created an XML file that's in the Data subfolder of the source root.
| | 01:46 | This XML has a root element called Album,
and the repeating elements called Slide.
| | 01:52 | Each of the Slide elements has a sub elements,
or child elements name Source and Caption.
| | 01:58 | The structure of this XML is similar to a database table where
each slide element would represent a row and each of the source
| | 02:05 | and caption elements would represent a column, but
it's formatted in well-formed XML and is, therefore,
| | 02:11 | suitable for use by the Flex application and the XML service component.
| | 02:17 | The first step to retrieving this file and using
its data is to instantiate the HTTP service object.
| | 02:24 | I'll do this with an MXML declaration that looks like this mx:HTTP service.
| | 02:32 | You should always assign and ID to the service component.
| | 02:35 | This allows you to reference the component in
binding expressions and in your ActionScript code.
| | 02:40 | I'll simply call it Service.
| | 02:43 | Next you identify the location of the file that you want to retrieve.
| | 02:48 | If the file is in the same directory in the
server or in the same directory structure
| | 02:53 | as the application is downloading from, you can put in a relative URL.
| | 02:58 | You put in the URL using the URL attribute of the HTTP service object.
| | 03:04 | My file, Slideshow.xml, is in the data subfolder at the application root.
| | 03:09 | So the relative URL for the file would be data/slideshow.xml.
| | 03:15 | If this XML file were in a completely different server area, say a
completely different domain, you would set the URL to an absolute URL.
| | 03:25 | It's worth mentioning that if you do need to
retrieve data from a remote domain you might run
| | 03:30 | into something called cross-domain security constraints where the Flash
player looks for a cross-domain permissions file on the remote server.
| | 03:37 | I'm not going to get deeply into how to deal with that right now,
but just know that if you do have to work with a remote domain,
| | 03:44 | there are security considerations that you have to deal with.
| | 03:48 | Okay. So we've defined the HTTP service
object and we've told it where the file is.
| | 03:54 | At run time, you initiate a request to the remote
server by calling the HTTP service object send method.
| | 04:02 | That tells the HTTP service object to
initiate an HTTP request for the XML file.
| | 04:08 | You can do this upon a user event such as a click on a button, or as I'm
going to do here, you can execute the request upon application startup
| | 04:17 | by adding a creation complete event handler and
then calling the service object send method.
| | 04:26 | Initially, we're just going to be downloading and
parsing a raw XML file and so we won't be able
| | 04:32 | to send arguments or otherwise send filters to the remote server.
| | 04:36 | In fact, right now we're not using an application server.
| | 04:39 | We're just loading the file directly from the hard disk.
| | 04:42 | In later videos in this chapter we'll talk about how
to deal with dynamically generated XML from a server.
| | 04:48 | Now there are two ways to handle the data when it returns.
| | 04:52 | Requests to remote servers from Flex applications
are handled asynchronously.
| | 04:58 | Here's what I mean by that.
| | 05:00 | Synchronist requests are requests where a bit of
code executes a request and then waits for the data
| | 05:06 | to be returned before the application can continue its work.
| | 05:10 | The Flash Player is not able to work synchronously with remote servers.
| | 05:15 | That's because the Flash Player is fundamentally
a single-threaded architecture.
| | 05:19 | If it had to wait for data to come back from a remote
server, the entire application would have to freeze up
| | 05:25 | and wait and not do anything until the data came back.
| | 05:28 | Animations would freeze.
| | 05:30 | You wouldn't be able to interact with the application, and if
the remote server was a little slow in getting the data back,
| | 05:36 | the application would be unusable until the data returned.
| | 05:40 | So instead, the Flash Player implements
remote server communications asynchronously.
| | 05:46 | You execute the send method and then you set up a mechanism for
handling the data when it shows up in the Flex runtime environment.
| | 05:53 | There are two ways to do this, with binding expressions and event handlers.
| | 05:58 | I'll show you the binding expression approach here.
| | 06:00 | I have a data grid control which is suitable
for displaying rows and columns.
| | 06:06 | Going back to the XML file that we're
retrieving, remember that the root element
| | 06:11 | of my XML structure is Album, and the repeating element is named Slide.
| | 06:16 | I need to know that to construct a well-formed
binding expression that will access the data.
| | 06:22 | I'll go back to the application and then
I'll go to the data grid component.
| | 06:27 | And I'm going to set the data provider property of the data
grid to this binding expression: service.lastresult.album.slide.
| | 06:39 | The first part of this binding expression is the
unique ID of the HTTP service component, Service.
| | 06:45 | The next part is a reserved property name called Last Result, which refers
to the returned data from the last result that came back from this service.
| | 06:55 | The next part is the XML hierarchy in that XML file.
| | 07:01 | The album represents the root element, and
the slide represents the repeating elements.
| | 07:06 | This binding expression is going to return
something called an array collection.
| | 07:11 | The nature of an array collection in Flex is that it's
a dynamic object that knows how to manage a data set,
| | 07:18 | a set of relational data that's returned
from a database query, an XML file,
| | 07:23 | or some other architecture that's returning
data in the structure of rows and columns.
| | 07:29 | That's exactly the kind of data that a data grid requires.
| | 07:33 | I'll be talking about lists and data grids
in the next chapter more extensively,
| | 07:37 | but for now just know that the data grid wants an array
collection and that's what this binding expression is returning.
| | 07:44 | That's all the code.
| | 07:45 | Now I'll test it.
| | 07:46 | I'll save my changes to the application and I'll run it.
| | 07:51 | As the application starts up, the send request is made to the
remote server - in this case, we're just loading from the hard disk,
| | 07:57 | but it's pretty much the same thing because
it's a literal XML file - the data comes back
| | 08:03 | and the binding expression is filled in with the returned data.
| | 08:07 | The data grid then displays the returned data, and notice that
it reacts by displaying two columns, named Caption and Source.
| | 08:15 | Going back to the XML file, here's where those names came from.
| | 08:20 | Each of the slide elements within the album
contains the caption and the source elements.
| | 08:26 | Now let's go run the application again; I want
to point out something about the data grid.
| | 08:30 | The data grid's automatic behavior is to read the first object
in the array collection to see what its named properties are
| | 08:39 | and then to generate one column for each of those named properties and
list them in alphabetical order: first the caption, and then the source.
| | 08:47 | In the next chapter in the video series, I'll be showing
you how to customize the data grid and other list controls
| | 08:53 | to make them present the data exactly the way you want.
| | 08:56 | But for now, the point that I want to make is that we can easily
retrieve and parse XML with just a couple of lines of code.
| | 09:04 | We can use this binding expression to reference the data
that comes back from XML and display it in the data grid.
| | 09:12 | In the next video, I'll show you a more
sophisticated architecture that handles returned data
| | 09:17 | from a remote server using an event handler
instead of a binding expression.
| | Collapse this transcript |
| Handling HTTPService result events| 00:00 | In this video I'm going to show you how to handle
returned data from a remote server using an event handler.
| | 00:07 | The HTTP service component supports two
critical events named Result and Fault.
| | 00:13 | When data is returned successfully from an
HTTP service request you get a result event.
| | 00:19 | The result event generates an event object
which is typed as a class named Result Event,
| | 00:25 | which in turn has a property called Result
which points to your returned data.
| | 00:29 | The advantage of using the event handler architecture
is that it allows you a better chance to debug
| | 00:35 | and then persistently save data that's returned from a remote source.
| | 00:40 | Here's how you set up the result handler.
| | 00:43 | I'll be working in the file HTTP Service
Events.MXML in the Chapter 11 Begin project.
| | 00:50 | This is exactly the same file that I finished with in the last exercise.
| | 00:55 | If you're following along in the exercises, open the file now.
| | 00:58 | Here's the first step.
| | 01:01 | We're going to create an event handler function.
| | 01:04 | In the last chapter of this video series, I showed you that all event
handler functions in the world of Flex follow a common signature
| | 01:11 | where they expect a single event object
as their only argument, and return void.
| | 01:16 | I'll create a script section and then a private
function, and I'm going name it Result Handler.
| | 01:24 | The result event of the HTTP service object
returns an instance of the result event class,
| | 01:31 | so I'm going to type the event argument of this function as Result Event.
| | 01:37 | Notice that Flex Builder automatically adds an import statement
for this class and it shows that it's in the package MX.RPC.events.
| | 01:46 | I'll finish off the function signature, putting
in the void return tide, and the pair of braces.
| | 01:53 | Now to call this result handler function when the data's return
from the server, I'll go down to the HTTP service component
| | 02:01 | and I'll add an MXML attribute-based event listener.
| | 02:05 | The name of the event I'm listening for
Result, so that's the name of the attribute.
| | 02:10 | And within the event listener, I'll call the
result handler method and pass the event object.
| | 02:15 | Now let's debug the application.
| | 02:18 | I'm going to place a breakpoint on the last line of the function,
| | 02:22 | that is the line with the closing brace, and
then I'll save and debug the application.
| | 02:27 | As the application starts up, it sends off the request to the
remote server, or loads the data from hard disk in this case.
| | 02:35 | The data is returned into the Flex application,
and that triggers the result event.
| | 02:40 | The event object is passed to the result
handler method, and we hit the breakpoint.
| | 02:45 | I'll open debugging perspective because I want to show you what
the event object looks like when you get back a result event.
| | 02:53 | I'll double click on the Variables tab to open it to full screen.
| | 02:58 | Here is the event object.
| | 02:59 | It's an instance MX.RPC.events.resultevent.
| | 03:04 | I'll expand the event object and show that it has a result property.
| | 03:09 | The result property points to the data that was returned from the server.
| | 03:14 | Now I'll expand the result property and show you that the album
root element is represented as something called an Object Proxy.
| | 03:22 | This represents the root element of the XML file.
| | 03:25 | And then I'll expand that and show you that there's another
object called Slide which is typed as the array collection class.
| | 03:33 | As I mentioned in the previous video, when you retrieve an
XML-formatted file that has repeating elements of the same name,
| | 03:40 | those elements are automatically cast as an array
collection, and an array collection is a powerful mechanism
| | 03:46 | for wrapping and managing data in Flex application memory.
| | 03:51 | Within the array collection, you'll see all the different
items, each one representing one of the slides in the slideshow,
| | 03:58 | and within each of those object proxies you'll
find the caption and the source properties,
| | 04:03 | in addition to a few other properties that appear automatically.
| | 04:07 | So that shows us that the data is being correctly retrieved and parsed.
| | 04:12 | Now here's what we'll do with it.
| | 04:13 | I'll terminate the debugging session and
return to the Flex development perspective.
| | 04:18 | When the data is returned from the server I want to save
the data persistently in the application so that it persists
| | 04:26 | after the result handler function is finished executing.
| | 04:29 | To make this happen, I'm going to declare a variable
above any functions and I'm going to make it bindable.
| | 04:35 | I'll put in the bindable metadata tag and then declare a variable.
| | 04:40 | And I'm going to name it Slides, and I'll
declare its type as Array Collection.
| | 04:47 | Notice that when I select the array collection class from the list
| | 04:49 | of available classes Flex Builder automatically
creates the import statement that's required.
| | 04:55 | So I've declared the variable.
| | 04:57 | Now within the context of the result handler, I'm going
to extract the data using the expression event.result,
| | 05:05 | and then I'll walk down the XML hierarchy to get to the actual data,
| | 05:08 | and I'll save the result of that expression
to the pre-declared array collection variable.
| | 05:14 | It'll look like this: slides=event.result.album.slide.
| | 05:23 | Again, album.slide is from the XML hierarchy.
| | 05:27 | Event.result is from the result event class.
| | 05:30 | So now my data is stored persistently in the application.
| | 05:34 | To show the data, I'll go down to the data grid component.
| | 05:38 | And now, instead of needing the original long binding expression,
| | 05:41 | all I need in the binding expression is that
bindable array collection variable Slides.
| | 05:47 | I'll expand the code to full screen and review it one more time.
| | 05:52 | The entire mechanism for extracting data
from the returned object works like this.
| | 05:58 | You declare a bindable variable of the appropriate type.
| | 06:01 | I know the data's coming back as an array collection
because that's the behavior of the HTTP service class.
| | 06:07 | Whenever it sees repeating elements of the same name,
it automatically casts it as the array collection.
| | 06:14 | Within the result event handler, named Result Handler,
I extract the data using the expression event.result.
| | 06:21 | Then I walk down the XML hierarchy, album, the
root element, and slide, the repeating element,
| | 06:27 | and I save the results of that expression
to the pre-declared slides variable.
| | 06:32 | Now that data will stick around for the duration of the user's
application session, and the data grid can listen for that expression,
| | 06:39 | the slide's variable, and whenever the data shows up in that variable, it
will display it as a result of its binding expression in the data provider.
| | 06:49 | I'll save and run the application again and show you
that once again, the data is successfully displayed.
| | 06:55 | Using an event handler instead of a binding expression does take a
bit more code, but it's worth it because it gives you the opportunity
| | 07:03 | to capture data, inspect it, and manipulate
it before you present it to the user,
| | 07:08 | and it allows you to store the data persistently
for the duration of the application session.
| | 07:13 | In the next video, I'll show you another event
of the HTTP service component named Fault.
| | 07:19 | That's the event that happens when things go wrong.
| | Collapse this transcript |
| Handling HTTPService fault events| 00:00 | In this video I'm going to describe the use of the fault
event, an event dispatched by the HTTP service component
| | 00:07 | when things go wrong during the request
or receipt of data from a remote server.
| | 00:12 | Just as with the result event, the fault event
is dispatched by the HTTP service component,
| | 00:18 | but it generates an event objected type as something called Fault Event.
| | 00:22 | The fault event class has a fault property which in
turn contains detailed data about what went wrong.
| | 00:28 | It doesn't matter where the error occurs because of network
issues, server issues, problems in the format of the XML file.
| | 00:36 | All of these types of problems are exposed to you as the fault object.
| | 00:40 | Here's how you set up a fault handler.
| | 00:43 | I'm still working in same file as before, HTTP Service Events.MXML.
| | 00:48 | First I'm going to create event handler function.
| | 00:52 | I'll use the syntax Private Function Fault Handler,
and then I'll type the event object as Fault Event.
| | 01:03 | As before, Flex Builder automatically creates an import statement
for the fault event class which is in the package MX.RPC.events.
| | 01:13 | And as with all good event handler functions, I'll return void.
| | 01:16 | Next to handle the fault I'll go down to the HTTP
service declaration and add an event listener.
| | 01:25 | The name of the event is Fault, so that's the name of the attribute,
| | 01:28 | and within the event handler I'll pass the event
object to my new custom function, Fault Handler.
| | 01:36 | Now to trigger a problem, I'm going to open the XML file, Slidehow.XML.
| | 01:42 | I'll go to the source root, to the Slideshow.XML file, right click
on it, or control lick on the MAC, and open with the a text editor.
| | 01:52 | And I'm going to cause an intentional problem in the file by
changing the name of the closing tag in the album element.
| | 02:00 | I'll mismatch the two tags.
| | 02:02 | Remembering that XML is case sensitive, if you have a beg tag
with all lowercase, then end tag is supposed to be lowercase, too.
| | 02:10 | By doing this, I've messed up the formatting of the XML file.
| | 02:13 | And then I'm going to save the file under a new name.
| | 02:17 | I'll save it as Slideshow Malformed.XML.
| | 02:25 | Then I'll come back to the application, HTTP Service Events.MXML,
and I'll change the URL to refer to my malformed XML file.
| | 02:34 | Then I'll put a breakpoint on the last line of the fault handler function.
| | 02:41 | We're going to debug and see what the fault object
is when this particular problem is encountered.
| | 02:48 | Now debug the application.
| | 02:53 | As the application opens, it makes the
request for the XML file, which is returned.
| | 02:57 | And then as the HTTP service component reads
the XML file, it encounters the malformed issue.
| | 03:04 | We hit the breakpoint within the fault handler function, and I'm returned
back Flex Builder where I'll open the Flex debugging perspective.
| | 03:13 | Now let's take a look at the Variables view.
| | 03:15 | In the Variables view, here is the event object
which is an instance of MX.RPC.events.faultevent.
| | 03:24 | I'll expand the event object, and notice that it has a fault object.
| | 03:30 | So the expression event.fault will refer to this instance of MX.RPC.fault.
| | 03:36 | Within the fault object, you'll see a number of properties
including fault code, fault detail, and fault string.
| | 03:44 | These properties will change, depending on the nature of the fault.
| | 03:48 | For instance, in this case we're not getting a
fault detail, but we are getting a fault string.
| | 03:53 | You'll also see there is an inherited property called
Message which consists of the fault code, the fault string,
| | 03:59 | and the fault detail all concatenated together in a single string.
| | 04:04 | In order to handle this fault event, I'm going to use the alert
class to generate the dialogue box and tell the user what went wrong.
| | 04:12 | So I'll come back to the code, terminate the debugging
session, and return to the Flex development perspective.
| | 04:20 | Place the cursor inside the fault handler method.
| | 04:24 | When the fault event occurs, you can handle it in many different ways.
| | 04:27 | I'm going handle it just by telling user what went wrong.
| | 04:31 | So I'll call the alert class.
| | 04:34 | You may remember, if you've been watching all the videos, that when
I used this class previously, I pressed Control Space after typing
| | 04:41 | in the word Alert, and then selected the
class from the list of available classes.
| | 04:46 | That results in creating and import statement
for the alert class, which is required.
| | 04:53 | Now I'll put in the code alert.show, and I can pass in two strings.
| | 04:58 | The first string will appear in the body of
the dialogue box, the second in the title.
| | 05:03 | I'll use the following syntax: event.fault.faultstring
for the first string that will go in the body,
| | 05:12 | and event.fault.faultcode for the second string
that will appear in the title of the dialogue box.
| | 05:20 | I'll save my changes, and then I'll run the
application, this time in standard run mode.
| | 05:26 | As the application starts up, it makes the request for the XML file,
the fault event occurs, and the dialogue box is presented as a result
| | 05:36 | of my call to alert.show in the custom event handler function.
| | 05:41 | So let's review the process for using fault events.
| | 05:45 | You handle the fault event using an MXML attribute-based event
listener or the add event listener method; that will work as well.
| | 05:53 | You create your own custom function that expects an event
object typed as the fault event class and returns void.
| | 06:00 | Within the fault handler function, you
handle the event however you decide to do it.
| | 06:05 | Here I've handled the event just by passing the literal
messages back to the user using the Alert Classes dialogue box.
| | 06:13 | So those are the two events of the HTTP service class that we use the most.
| | 06:17 | The result event occurs when the data is returned successfully,
and the fault event occurs when something goes wrong.
| | 06:24 | To return the application back to its working state, I'll just
change the URL of the HTTP service object back to slideshow.XML,
| | 06:33 | the well-formed version of the XML file, and I'll run the application
one more time and see that the data is now returned successfully.
| | 06:37 | (End of Audio) Lauren Harmon 11_03_faultevent Page 1
of 2 David Gassner www.escriptionist.com Page 1 of 2
| | Collapse this transcript |
| Installing Apache, PHP, and MySQL 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, including cold fusion, asp.net,
| | 00:13 | live-cycle data services, or its open-source version, BlazeDS.
| | 00:18 | But one of the simplest to install and set up is PHP with Apache and MySQL.
| | 00:24 | I like this particular combination for a beginning application server
because there's a version of these products that you can download
| | 00:31 | and install for free that wraps Apache, the Web server, MySQL, the
database, and PHP, the application server, in a single package.
| | 00:41 | There are versions of this for many operating systems.
| | 00:44 | In this video, I'm going to show you how to get and install a version
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:03 | You can download this file and install it easily without paying for
any license fees, and Flex Builder will do a great job of working
| | 01:12 | with this application server generating code for your applications.
| | 01:16 | I've already downloaded the installation file to my
desktop where it's located and named WAMP Server 2.0A.
| | 01:24 | I'm gonna show you how to install it.
| | 01:26 | You'll find that it's very, very simple.
| | 01:28 | I'll double click on the WAMP server icon and click Run.
| | 01:32 | You'll get an informational message indicating that
if you have an older version of the WAMP package,
| | 01:39 | you should explicitly uninstall it and
delete it before you install this version.
| | 01:44 | I'll click Yes to indicate that I want to
continue the installation, then click Next.
| | 01:51 | If you accept the agreement, just click the radio button and click Next
again, and then indicate where you want install the WAMP server package.
| | 01:59 | This is going to be a root directory that includes the
installations of Apache, MySQL, and PHP all wrapped together.
| | 02:09 | Click Next, and then indicate whether 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, and the installation starts.
| | 02:29 | It takes just a few minutes for the installation to complete,
and remember that we're installing everything you need,
| | 02:35 | including a database, a Web server, and an application server.
| | 02:40 | One important note about this installation; Apache installs on the
standard port of 80, meaning that it's going to be listening for requests
| | 02:48 | from the browser or from your Flex applications on
the same port as other Web servers might be using.
| | 02:55 | If, for instance, you already have Internet
information services installed on your system,
| | 02:59 | you should deactivate Internet information services before you install
WAMP, or you can go into the configurations for the two servers
| | 03:07 | and change one of them from the default of Port 80 to some other port.
| | 03:11 | My recommendation, though, is that for development purposes,
| | 03:15 | you should choose which Web server you prefer
to work with, and primarily work with that one.
| | 03:20 | During the setup, the WAMP installation notes that I Firefox detected
on my computer and asks if I'd like to use it as the default browser.
| | 03:28 | Sure, I'll use Firefox.
| | 03:30 | I tend to move back and forth between the two major browsers, Firefox
and Internet Explorer, and find that they both do the job just fine.
| | 03:38 | Next you're asked for a couple bits of information.
| | 03:40 | If you have an SMTP server, you can now configure
PHP so that 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 | Now I'll go ahead and click Finish and
launch the server all at the same time.
| | 03:57 | 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 and I'll type in the URL http://lowcalhost.
| | 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 versions of each software package were
installed: Apache Version 2.2.6, PHP 5.2.5, and MySQL 5.0.45.
| | 04:37 | 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:52 | And SQLiteManager is a Web-based interface for managing SQLite databases.
| | 04:57 | Scrolling down a little further, 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:07 | 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 an About dialogue that shows you
| | 05:17 | which version of the WAMP server package was installed.
| | 05:20 | I'll close that dialogue, come on back to the system tray
and single click, 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 of 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, to Administrative Tools, to Services.
| | 05:48 | Within the Services window, you should find two services listed as WAMP.
| | 05:54 | They're named WAMP Apache and WAMP MySQLD.
| | 05:58 | They're listed individually and can be stopped
and started manually from this interface.
| | 06:03 | Notice that they're automatically set up as manual
services, 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
10 if you're working on a MAC, and then I'll show you in a later video how
| | 06:32 | to use Flex Builder to interact with the
PHP application server, the MySQL database,
| | 06:37 | and the Apache Web server to generate a project
from a database structure very, very easily.
| | Collapse this transcript |
| Installing Apache, PHP, and MySQL on Mac OS X| 00:00 | In this video I'm going to describe how to install
MAMP, the installation of a combined server installed
| | 00:07 | that includes Apache, MySQL, and PHP, designed for MAC OS 10.
| | 00:12 | This is a free downloaded install that you can get from
the Web site I have shown on the screen, www.mamp.info.
| | 00:21 | In order to get a copy of the MAMP server, navigate
to the site and then download the MAMP install.
| | 00:28 | Notice that there are two versions, MAMP Pro, and MAMP.
| | 00:31 | The free version is MAMP.
| | 00:33 | 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 10 operating system isn't active.
| | 00:46 | To check this, go to your system preferences.
| | 00:50 | Go the Apple menu, and click System Preferences,
click Sharing, 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 between that and the MAMP server.
| | 01:06 | Turn it off, and then close your system preferences.
| | 01:09 | Now for the installation.
| | 01:13 | When you download the MAMP server, you'll get a DMG file.
| | 01:17 | Double click the DMG file.
| | 01:19 | Then, if you agree with the license agreement,
click Agree, and you will open up the DMG file.
| | 01:27 | The installation of the MAMP server is very simple.
| | 01:30 | Just click on the on the MAMP folder and
drag it to the Applications folder.
| | 01:35 | The installation takes just a few seconds
while files are being copies over.
| | 01:39 | Once the installation is finished, double click the
Applications folder 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 MySQL database server.
| | 02:02 | When you first install this software, custom ports
are assigned to the Apache and MySQL servers.
| | 02:09 | 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
and click the Preferences button, click the Ports button,
| | 02:27 | and then click the button Set to Default Apache and MySQL ports.
| | 02:33 | Then click Okay.
| | 02:35 | This will restart both the Apache and the MySQL database servers.
| | 02:39 | At this point, MAMP asks you type in your administrative password.
| | 02:46 | This is your MAC user password.
| | 02:49 | Then to test the installation, click the Open Start Page button,
and you will see that 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:03 | You also might want to reset the home directory of the Apache server.
| | 03:08 | Once again, click the Preferences button, then click the Apache button.
| | 03:12 | Notice that the document root for the Apache Web
server is in the Applications MAMP HT Docs folder.
| | 03:19 | I usually prefer to place this HT Docs folder in
My Sites are underneath my personal directory.
| | 03:25 | To make this change, click the Select button, then navigate to
your personal directory, from there to Sites, and then click Open.
| | 03:36 | Then back in the MAMP dialogue box click Okay 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://localhost and press Return,
| | 04:08 | and you should see the default homepage that was installed with MAC OS 10.
| | 04:13 | As you work through the remainder of the exercises
in this video, I'll be doing my demonstrations
| | 04:18 | on Windows using WAMP, 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:29 | If you're working on the MAC, you should replace that with your personal
sites directory under Users, then your username, 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:47 | First of all, keep the MAMP control panel open.
| | 04:51 | 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 call
phpMyAdmin, which is an administrative interface for the MySQL server.
| | 05:04 | To locate this administrative application on MAMP, go to the
control panel, click Open Start Page, then click phpMyAdmin.
| | 05:14 | From here, the interfaces look exactly
the same between MAC OS 10 and Windows.
| | 05:19 | You will be able to import and inspect the database
that I'll use in the remainder of theses exercises.
| | Collapse this transcript |
| Creating a sample database| 00:00 | In this video I'm going to describe how to create a database
that we'll use in the rest of the exercises in this chapter.
| | 00:07 | We'll do this through an application that's included
in the WAMP or MAMP installations that allows you
| | 00:13 | to manager your MySQL database through a Web interface.
| | 00:17 | If you're working on Windows, go to the system tray and click
on the WAMP 5 icon, and then from there, select phpMyAdmin.
| | 00:27 | That will open up a browser window that opens to the phpMyAdmin interface.
| | 00:34 | Next we're going to create a brand new database.
| | 00:37 | Click into the text field under the label Create New
Database and type the word Slideshow, then click Create.
| | 00:45 | If you get a message indicating that you're sending over
an unencrypted connection, click on Continue; it's okay.
| | 00:52 | You've now created a database and you're ready to import some data.
| | 00:57 | There's a file called Slides.SQL that's located in the Exercises folder.
| | 01:03 | To create the table and import the data, Click
on the Import link at the top of the screen.
| | 01:09 | In the File to Import section, click the Browse button,
and then navigate to your desktop to the Exercises folder.
| | 01:19 | From there, go to the Assets folder and locate the file Slides.SQL.
| | 01:26 | This file contains a set a of SQL commands that
will create the table and populate it with data.
| | 01:32 | Click Open.
| | 01:33 | Note down at the bottom of the screen it
indicates the format of the imported file is SQL.
| | 01:40 | Now click Go to execute the import operation.
| | 01:44 | After a few moments, you should see this
message, Import has been successfully finished.
| | 01:49 | Three queries executed.
| | 01:51 | To check the data and make sure that it was imported correctly,
go to the SQL link at the top of the screen and then type
| | 01:59 | in this query, Select asterisk from slides, and click Go.
| | 02:07 | After a few moments, you should see the data from
the Slides.SQL file appear on the screen indicating
| | 02:14 | that your MySQL database table has been correctly
imported and you're ready to go on to the next exercises.
| | 02:20 | In the next exercise, I'm going to show you how to create a complete
application from scratch using Flex Builder's application building wizard.
| | 02:28 | You'll create a new Flex project associated
with the PHP application server.
| | 02:33 | You'll create a data connection to this new database table.
| | 02:36 | And then from there, you'll be able to generate all of the server-side and
client-side code you need for a complete interactive application that sends
| | 02:44 | and receives XML over the network to update,
retrieve, and otherwise manage data.
| | Collapse this transcript |
| Creating a Flex project for use with PHP| 00:01 | In this video I'm going to show you how to create a Flex
project that interacts with the PHP application server.
| | 00:08 | The goal of creating this project is to then be able to use Flex Builder
3's dynamic application building tools that will be able to connect
| | 00:16 | to a PHP server, introspect the data structure of a MySQL database
table, and build an entire application, including server-side PHP code
| | 00:25 | that accesses the database and returns data
to a Flex application in the form of XML.
| | 00:31 | Once that task has been done, our next step
will be to use the server-side PHP code
| | 00:36 | that was generated in combination with our own HTTP service component.
| | 00:42 | If you're following along in the exercises, close any
projects that you might currently have open in Flex Builder 3.
| | 00:49 | You can do that by right clicking on the project in the
Flex navigator view and then selecting Close Project.
| | 00:55 | Then from the Flex Builder menu, select File, New, Flex Project.
| | 01:02 | Name the project PHP Project.
| | 01:07 | This is a temporary project.
| | 01:10 | The goal of the PHP project is to allow us to generate the code we need.
| | 01:15 | Now go to the application server type under Server
Technology and change it to PHP; then click Next.
| | 01:24 | Set the server location, including the Web root and the root URL.
| | 01:29 | If you're working on the Windows platform and you installed the WAMP
studio package into its default location, the Web root will be c:/WAMP/www.
| | 01:38 | If you're working on the MAC, set the Web root to the Web root for the MAC.
| | 01:45 | For the root URL, set it to http://localhost.
| | 01:51 | If your copy of the Apache Web server is running on a
different port number other than the standard Port 80,
| | 01:56 | go ahead and add in the port number with a colon and then the number.
| | 02:00 | After setting those values, click the Validate Configuration button.
| | 02:05 | This allows Flex Builder 3 to verify that the
Web root folder on the root URL are valid.
| | 02:11 | The compiled Flex application location is a folder
outside the project area, but inside the Web root.
| | 02:19 | This is a folder that will be created and populated with our
finished application, including the server-side PHP code.
| | 02:26 | The default is the name of the project plus dash debug.
| | 02:30 | You can change this to anything you like, but
we'll go ahead and keep the default setting.
| | 02:35 | Click the Next button.
| | 02:37 | The main application file is set automatically to the
same as the project name with the .MXML extension.
| | 02:45 | In this case, it's PHP Project.MXML.
| | 02:48 | That's fine.
| | 02:49 | We won't actually be using that application file.
| | 02:52 | It's just a placeholder file that will let us get started with the project.
| | 02:56 | Click the Finish button to create the project and the main application.
| | 03:01 | So that's how you create the PHP project.
| | 03:04 | In the next video I'll show you how to use the application generation
tools in Flex Builder 3 to build a complete client and server application
| | 03:13 | that accesses data from a single MySQL database table
hosted within PHP running behind the Apache Web server.
| | Collapse this transcript |
| Generating a dynamic Flex/PHP application| 00:00 | In previous videos I showed you how to install the
Apache MySQL PHP packages for both Windows and the MAC,
| | 00:08 | and then I showed you how to install the database
that we'll be using to build a Flex application.
| | 00:13 | In the video right before this one, we set a Flex
project associated with the PHP application server.
| | 00:20 | Now you're ready to use the application
generation tools that are a part Flex Builder 3.
| | 00:26 | If you're following along in the exercise, make sure that
you have the PHP project open and all other projects closed.
| | 00:33 | Then from the Flex Builder menu, select
Date, Create Application from Database.
| | 00:40 | If you have more than one project currently open, you need to make sure
that you're selecting the project in which you want generate your code.
| | 00:48 | Next you need to crate a connection.
| | 00:50 | A connection is a definition of a database table location.
| | 00:55 | In order to create it, click the New button right
next to Connection, and give the connection a name.
| | 01:01 | I'm going to name my database Slideshow, and then click the Next button.
| | 01:07 | Next I need to provide information so
that I can connect to the MySQL database.
| | 01:13 | The host URL should be localhost, my local machine.
| | 01:17 | The database name is the name of the database as it was set up in MySQL.
| | 01:22 | The database name we'll connect to is Slideshow.
| | 01:26 | The username and password are your MySQL credentials.
| | 01:31 | When you installed the Apache MySQL PHP packages, a
username of Root was created in MySQL with a blank password.
| | 01:40 | This isn't the best of security setups,
but it's very convenient for development,
| | 01:44 | so we'll leave the username and password at their default values.
| | 01:48 | If you're working MAC OS 10 using the MAMP installation,
you'll need to set the password to a value of Root.
| | 01:54 | This is because the version of MySQL that's installed
with MAMP sets a default root password of Root,
| | 02:00 | whereas the WAMP installation leaves password blank.
| | 02:04 | Now click the Test Connection button.
| | 02:06 | This will let you know whether you can successfully connect to the MySQL
database, and you should see the message, The connection was successful.
| | 02:13 | If you have any problems at this point, go back and make
sure that the MySQL service is running at the moment,
| | 02:20 | and also make sure that you're running the Apache and PHP packages.
| | 02:24 | If you got the message that the connection was successful, click Okay.
| | 02:28 | Now click the Next button.
| | 02:32 | Now you see a summary of information about the new connection profile.
| | 02:36 | It shows you the name of your new connection, Slideshow.
| | 02:39 | You can also add descriptive information at this point and indicate
whether you want to connect to the connection from Flex Builder.
| | 02:46 | You don't need the auto connect feature because any Flex
Builder features that use this will connect as needed.
| | 02:52 | Click the Finish button, and you'll return
back to the Create Application wizard.
| | 02:58 | Next select a database table.
| | 03:00 | This particular database only has one table.
| | 03:03 | Its name is Slides.
| | 03:04 | And then indicate which of the columns of the table is the primary key.
| | 03:09 | In this case, there are three columns in the
table and the slide ID is the primary key.
| | 03:15 | Click the Next button.
| | 03:18 | Now indicate the location of the PHP source folder.
| | 03:21 | This is the virtual name of your output folder in the Flex project.
| | 03:25 | You may remember that the actual output folder was set
in the project as something called PHP Project Debug.
| | 03:32 | But the virtual name of that folder in Flex Builder
is Bin Debug, and that's the value you put in here.
| | 03:38 | The PHP filename is completely up to you.
| | 03:41 | It defaults to the name of the database table for which you're
generating the application and then has a .PHP extension.
| | 03:48 | You can change the first part of the filename, but not the extension.
| | 03:52 | Click the Next button and you'll see your last set of options.
| | 03:56 | In this screen you indicate which columns you want
to show in the sample view in the application,
| | 04:02 | and then the application allows you to enable
filtering on one, and only one, column.
| | 04:08 | Now, again, this is a sample application
that's being generated on the client,
| | 04:12 | and you may or may not actually use the
code that's generated on the client.
| | 04:16 | The real value here is going to be the server side code for PHP.
| | 04:19 | I'm going to enable filtering on the caption
and then click the Finish button.
| | 04:26 | When you click Finish, all of the code for your
application will be built for you automatically.
| | 04:31 | It takes just a few seconds.
| | 04:33 | And when the code has been completely built, you'll see
your new application which will be named by the name
| | 04:39 | of the table, Slides in this case, with the .MXML extension.
| | 04:44 | Run the application to test it.
| | 04:49 | You should see that the application opens by
downloading from the PHP server at the local host URL.
| | 04:56 | When the application opens, you'll see a data grid
displaying the contents of the database table.
| | 05:01 | You can then make changes to the data by clicking into
any of the cells of columns that are not primary keys.
| | 05:08 | You can click the Plus icon to add a new record - I'll cancel that - or
you can select a record and click the Trashcan icon to delete a record.
| | 05:18 | You can also do a search by clicking into the
Search by Caption Text Input and typing a phrase.
| | 05:24 | I'll type the word London and click the search
button, and you'll see a filtered view of the data.
| | 05:30 | So that's the application as generated.
| | 05:33 | Now in the next video we're going to take a look
at the dynamically generated PHP code and then talk
| | 05:39 | about how to use that PHP code in your own applications.
| | Collapse this transcript |
| Reviewing generated PHP code| 00:00 | In this video I'm going to describe the server-side PHP code that
was generated by the application generation tool in Flex Builder 3.
| | 00:08 | I'm working in the PHP project and I'm looking at the file Slides.MXML.
| | 00:13 | The project source root only contains the MXML and
ActionScript code that constitute the client application.
| | 00:20 | You'll find a file called Slides.MXML, another one called
Slides.config.as, and another one called Slides.script.as.
| | 00:28 | The PHP server code is generated in the
project's Output folder named here Bin Debug.
| | 00:35 | Open up the Bin Debug folder and then locate the file Slides.PHP.
| | 00:40 | There are a number of other files that are used by
this core file, such as the Connection PHP file,
| | 00:46 | and the another one called call XML Serializer.class.PHP, but
this is the file that's generated that has specific information
| | 00:54 | about your database table, and it's the one to which you would
make a request at runtime to get data and to change data.
| | 01:01 | Open this file in the Flex Builder by right clicking on it, or
Control clicking on the MAC, and then select Open with Text Editor.
| | 01:10 | Beware that if you simply double click on the file in the
Flex navigator view, it may open up in another application.
| | 01:16 | For instance, Dreamweaver typically sets itself up as the
standard PHP editor, and if you have Dreamweaver installed
| | 01:22 | on your machine, the file may open in that product instead.
| | 01:26 | Now with the Slides.PHP file open, double click the tab
to expand it to full screen, and then do this search.
| | 01:33 | Press Control F, for Find, and search for
the word Insert, wrapped in double quotes.
| | 01:39 | Make sure that you don't have the case-sensitive option turn on.
| | 01:43 | Click the Find button, and you'll get
to about Line 365 to 370 of this file.
| | 01:51 | This bit of code in the PHP file indicates that this file
expect a parameter which can be passed in either through the URL
| | 01:59 | or through an HTTP form, and the name of the parameter is Method.
| | 02:03 | Its possible values include Find All, Insert, Update, Delete, and Count.
| | 02:09 | This file responds to these requests by generating XML code and
returning that XML back to the client, in our case the Flex application.
| | 02:19 | To see what's happening on the inside, I'm going
over to a browser where I've already put in a URL.
| | 02:25 | Notice that I'm calling the file Slides.PHP, from my PHP application
server, and I'm passing a method attribute with a value of Find All.
| | 02:35 | Note that the method names are case-sensitive,
and you have to spell them exactly correctly.
| | 02:40 | Here's what's returned back from the PHP server: Standard.XML.
| | 02:44 | The XML file has root element of Response, a child element of Data,
repeating elements called Row, and then child elements of the row
| | 02:54 | that are named for the database table
columns, Slide ID, Source, and Caption.
| | 02:59 | So once you know that you can make a request to this URL and get data back,
| | 03:04 | it's a fairly simple task at that point to
adapt this file into your own application.
| | 03:09 | So in the next video I'll how you how to create a brand
new application which uses this PHP file that was generated
| | 03:15 | by the application generation tool, and then starts making requests
to the server to get data, to insert data, and to delete data.
| | Collapse this transcript |
| Using a dynamic XML based service| 00:00 | In this video I'm going to describe how to leverage the server-side PHP
code that was generated along with the Flex application by Flex Builder 3.
| | 00:09 | I'll be working in the project Chapter 11 Begin.
| | 00:12 | If you're following along in the exercises, open that project now.
| | 00:16 | In the source root of this project, there's a copy of the photo
album application that we've been working on in other chapters.
| | 00:22 | Open the file Photo Album.MXML and run the application
so that you can remind yourself of what it does.
| | 00:30 | This application currently shows a list of photos wrapped
inside a tile container to create a grid-like presentation.
| | 00:37 | The photos currently are hard-coded into the application.
| | 00:41 | We're going to change the application so that it retrieves the
list of photos dynamically from the PHP application server.
| | 00:48 | Here's the current version of the application showing the photo
catalog and a shopping cart page that we haven't added in yet.
| | 00:56 | Close the browser and return to Flex Builder.
| | 00:59 | Now in the previous video I showed you where to access the PHP service.
| | 01:04 | Go to a browser and test it now by typing in this URL:
http://localhost/phpproject-debug/slides.PHP?method=findall.
| | 01:19 | Navigate to that URL and verify that you're
getting back XML-formatted content.
| | 01:24 | Then copy that URL to the clipboard and return back Flex Builder.
| | 01:30 | In Flex Builder, add an HTTP service component.
| | 01:35 | Give it an ID of Slide Service.
| | 01:39 | Then put in a URL attribute and paste in the URL from browser,
including the method parameter of Find All, and then close the tag.
| | 01:50 | Next, move to the Application Start tag and add a creation complete event
handler that calls the send method of the service Slide Service.send.
| | 02:02 | The next step is to set up a result event handler.
| | 02:06 | Create a script section above the HTTP service component
and create a private function named Result Handler
| | 02:16 | which receives an event object typed as
the result event class and returns void.
| | 02:23 | Go down to the HTTP service component and add a result
event listener as an attribute of the HTTP service tag,
| | 02:31 | and call the result handler method Passing the Event Object.
| | 02:35 | Now place a breakpoint on the last line of the result handler method.
| | 02:40 | Save your changes and debug the application.
| | 02:43 | As the application starts up, it'll send the request to the PHP service,
| | 02:50 | and when the data comes back that will trigger the result
even handler which, in turn, will hit your breakpoint.
| | 02:56 | When Flex Builder takes focus, click Yes to open
up the Flex debugging perspective, if necessary,
| | 03:02 | then go to the Variables view and double click to display it full screen.
| | 03:07 | Locate the event object, click the icon to expand the object,
then click to open the result property of the event object.
| | 03:17 | The result property has the root element response which, in turn, has a
property called Data, which, in turn, has an array collection called Row.
| | 03:27 | So the entire XML hierarchy that we'll work with is Response.data.row.
| | 03:35 | Restore the size of the Variables view,
and terminate the debugging session.
| | 03:40 | Now go back to Photo Album.MXML and double
click to expand the Source view to full screen.
| | 03:46 | Place the cursor above the private function result handler and
declare a new variable named AC Slides data typed as array collection.
| | 04:00 | Then place the cursor inside the result handler method, and you'll capture
the data and save it to the AC Slides variable using this statement
| | 04:09 | and expression: AC Slides=event.result.response.data.row.
| | 04:19 | Save your changes and debug the application once again.
| | 04:22 | We're going to verify that the expression we put in
results in saving the data to the AC Slides variable.
| | 04:30 | Click the Debug button.
| | 04:34 | When Flex Builder takes focus, go back to the Flex Variables view.
| | 04:45 | Go over to the Expressions view.
| | 04:47 | Remove any expressions that are still there from previous exercises.
| | 04:52 | Then right click, or Control click on the
MAC, and add a watch expression of AC Slides.
| | 04:59 | Click Okay, and you should see that AC Slides is evaluated
as an array collection that contains multiple object proxies.
| | 05:07 | Each object proxy contains the source and caption for the current image.
| | 05:12 | So we've verified that we're successfully
getting data from the remote server.
| | 05:17 | In the final video in this chapter, I'll show you how to use
a component called a Repeater that will loop through this data
| | 05:23 | and present the images dynamically within the tile container.
| | Collapse this transcript |
| Using a Repeater to display dynamic data| 00:00 | In this final video of this chapter I'll show you how to use a component
called The Repeater that knows how to loop through an array collection
| | 00:07 | and dynamically generate visual components
for each item within the array collection.
| | 00:12 | I'll be working in the application file Photo
Album.MXML, and using the data that's being retrieved
| | 00:18 | from the PHP application server, and from there, from the MySQL database.
| | 00:23 | We've already retrieved the data and saved it to a
variable called AC Slides, which is an array collection.
| | 00:29 | In order to use this data to dynamically generate
image components, first, make the variable bindable.
| | 00:35 | Place the cursor above the variable AC
Slides, and put in the bindable metadata tag.
| | 00:42 | Then move down to the code that's displaying all
those image components and delete all but one of them.
| | 00:49 | I'll leave the first one so that I can use it as
a model, but I don't need all the others anymore.
| | 00:55 | So now you have a tile component wrapped around a single image.
| | 00:59 | A repeater component is a non-visual control that wraps
around and generates instances of visual controls.
| | 01:06 | The repeater has a property called Data Provider that you set to an
array collection containing the data that you want to loop through.
| | 01:13 | Place the cursor within the tile, but before the
remaining image component, and add a repeater tag.
| | 01:20 | Set its data provider to a binding expression of AC Slides, and then move
the remaining image component to between the repeaters start and end tags.
| | 01:32 | In the current state of the application, the repeater will
loop through the array collection and create one instance
| | 01:41 | of the image control for each item in the array collection.
| | 01:45 | I'll save and run the application so we can see the result.
| | 01:48 | The image control still has a hard-coded source location,
that is the location of the graphic we want to display.
| | 01:55 | And so the result now will be with 23 items in the array
collection, I'll see 23 instances of the same image.
| | 02:02 | Not quite what I want, so now I'm going to
close the browser and return to the code.
| | 02:07 | The repeater component has a property named Current Item, which
refers to the current item as it's looping through the data.
| | 02:14 | You can use the repeater's property current item to refer to
each data item as you're looping through the array collection.
| | 02:20 | And assuming that the array collection
contains complex objects, as this one does,
| | 02:24 | you can then use extended dot syntax to refer to the other properties.
| | 02:28 | In order to refer to the repeater's current
item, first we need to assign an ID.
| | 02:33 | I'll go to the repeater tag and add and ID property of Slide Repeater.
| | 02:40 | I'm going to double click on the tab of the
Source view editor to display it in full screen.
| | 02:45 | Now in the image tag, instead of using a hard-coded
graphic filename, I'm going to use a binding expression.
| | 02:52 | I'll place the binding expression after the
hard-coded directory location of my graphics.
| | 02:57 | And then within the binding expression I'll use
the slide repeater object's current item property,
| | 03:05 | and from there I'll use each data object's source property.
| | 03:10 | Each of the items within the array collection,
remember, has properties named Source and Caption.
| | 03:16 | The caption is a descriptive string that
describes which image is being presented.
| | 03:20 | I'll save the changes and run the application, and this time each
| | 03:25 | of the generated image components will
display the appropriate image on the screen.
| | 03:30 | So as the application is presented in the browser,
it now downloads each of the described graphics
| | 03:35 | from the database and presents them each within the tile.
| | 03:39 | And because of the tile container's behavior, as I resize
the application, notice that the tile dynamically figures
| | 03:46 | out how many rows across it can fit, and presents them accordingly.
| | 03:51 | Remember that the dynamic objects also have properties called Caption.
| | 03:55 | I can use those properties in a text control.
| | 03:58 | Here's how I'll use the property.
| | 04:00 | First, I'm going to wrap the image control within a vertical box
and I'll set the vertical box to a horizontal-aligned property
| | 04:08 | of center and a vertical aligned property of middle.
| | 04:14 | Then underneath the image control, I'll add
in a text control with a width of 100 percent.
| | 04:21 | This will make the text control expand to whatever size
the V box is, and then it'll word wrap if necessary.
| | 04:28 | Then I'll set its text property using a binding
expression of Slide Repeater.current item.caption.
| | 04:41 | So as the repeater control loops through the
data, the array collection named AC Slides,
| | 04:47 | it generates one vertical box for each item in the data set.
| | 04:51 | Within the vertical box you'll get an image and a text control,
each dynamically populated from the data that came from the server.
| | 04:59 | I'll run the application one more time and you'll see
that we're now successfully showing both a graphic
| | 05:07 | and a text object for each item from the data collection.
| | 05:11 | You'll notice that there are still some visual problems, which we can fix.
| | 05:14 | For instance, the Conservatory of Flowers label on the
right is being displayed in much too narrow and area.
| | 05:20 | To fix this, I'm going to come back toe the V box
and I'm going to add an explicit width of 150 pixels.
| | 05:27 | That'll make it a little bit wider so that the text
control can expand and look a little bit better.
| | 05:32 | I'll run the application one more time.
| | 05:35 | And now you'll see that each cell within the tile container
is 150 pixels and is successfully showing the text control.
| | 05:44 | And I'll make one more change, coming back to the text
control and setting its text align property center,
| | 05:52 | and that will cause the text within the
text control to center in the column.
| | 05:58 | From this point on, I'm making visual adjustments to get the application
looking the way I want, and this is the application in its current state.
| | 06:06 | Each image is shown with a caption.
| | 06:08 | You've retrieved data dynamically from an application server.
| | 06:12 | You've used that data to generate a dynamic
compelling visual interface to the user.
| | 06:17 | And as you continue to build out the Flex application, you
will be able to add more and more dynamic capabilities.
| | 06:23 | Now in the next few chapters, I'm going to show you how to build dynamic
data entry forms and share that data with the rest of the application.
| | 06:29 | And then in the final chapter of this video series I'll
show you how to build a release version of the application
| | 06:34 | so that you're ready to deploy your application to your Web server.
| | Collapse this transcript |
|
|
12. Using Data-Driven List ControlsUsing List-Based controls| 00:00 | In this chapter of the video series I'm going to describe
the use of a set of flex controls known as the list controls.
| | 00:07 | There are a number of different list controls in the
flex framework including the list control, the combo box,
| | 00:14 | the daily grid, the horizontal list and the tile list.
| | 00:17 | They all follow a similar model in that they use the same sort
of data provider to fill in their data in array collection.
| | 00:24 | They all generate the same sort of events and
provide the same set of properties that allow you
| | 00:28 | to manipulate and get information from the controls at runtime.
| | 00:32 | In this first video I'm going to describe two of
the key controls named the list and the combo box.
| | 00:38 | If you're following along in the exercises import the
project chapter twelve begin from the exercise files.
| | 00:45 | Then go to the project source route and
open the file list controls dot MXML.
| | 00:52 | This application already has code that retrieves
XML formatted data using an HTTP service component
| | 00:59 | and then saves the data into an array collection named AC slides.
| | 01:03 | Our goal is to display the content of the AC slides' array collection in
a list or a combo box so that the user can then view and make selections.
| | 01:13 | Let's start off by looking at the basic send tag of a combo box or list.
| | 01:18 | The difference between a combo box and list is that the combo box displays
as a pull down list; whereas a list control displays as a list box.
| | 01:27 | If you've worked with HTML data entry forms these two components
taken together implement what you get out of a select control in HTML.
| | 01:36 | In HTML the select control has a size property which when set to
one creates the equivalent of the combo box and which when set
| | 01:44 | to a greater than one creates the equivalent of a list.
| | 01:47 | In this first code demo I'm going to show you how
to build a combo box without using the dynamic data
| | 01:52 | and then we'll plug in the dynamic data as the second step.
| | 01:56 | Create a combo box component underneath the HTT
service and give it an i.d. of my combo box.
| | 02:05 | Declare the combo box as a pair of tags and then
within the combo box put in a data provider property.
| | 02:15 | Also, declare this as a pair of tags.
| | 02:17 | In this initial version we're going to create a data provider
which points to an array collection as a set of simple strings.
| | 02:25 | Within the data provider create a string tag set and then clone that
a couple of times with the keyboard shortcut control alt down arrow.
| | 02:34 | And then add literal strings between each of the string tag sets.
| | 02:39 | I'll put the first one in of red, then green, and then blue.
| | 02:47 | Save those changes and then run the application.
| | 02:50 | When the application opens in the browser
the combo box displays as a list of items.
| | 02:56 | The first item in the list is automatically selected
and when the user clicks the combo box controls
| | 03:02 | down arrow they can then move the cursor up
and down using the up and down cursor arrows.
| | 03:07 | So that's the combo box control.
| | 03:10 | Now let's take a look at the list control.
| | 03:12 | I'm going to make a copy of the combo box.
| | 03:16 | I'll select the declaration of the combo box, right
click and select copy or press control C or command C
| | 03:23 | on the map and then I'll paste that code below the combo box.
| | 03:29 | Now change the combo box declaration in the second one to a list.
| | 03:34 | Make the change in both the begin and the end tags.
| | 03:37 | Change the i.d. of the second control from my combo box to my list.
| | 03:43 | Save your changes.
| | 03:44 | Make sure there aren't any coding errors
and then run the application again.
| | 03:48 | The combo box appears as a pull down list;
whereas the list control appears as a list box.
| | 03:54 | They both have in common that they use
a data provider of an array collection
| | 03:58 | and if the array collection contains simple string values
those values appear automatically in the list control.
| | 04:05 | Notice that the list control and the combo box both have a
behavior where when they have hard coded values their able
| | 04:13 | to size themselves horizontally to accommodate
and display the correct information.
| | 04:17 | I'm going to show you a couple of adjustments
you might want to make to the list control.
| | 04:21 | I'll go back to the code and I'm going to
add two properties to the list control.
| | 04:27 | First, I'm going to set an explicit width of 150 pixels.
| | 04:31 | And then I'm going to set a value of row count to a value four.
| | 04:37 | I'll save the change and run the application.
| | 04:40 | And now the list control is set at a specific
width and it only shows four row items.
| | 04:46 | You can set the height of list control using either
the row count or an explicit height set with pixels.
| | 04:52 | But if you set it with pixels you'll frequently cut off your bottom row.
| | 04:57 | So by using a row count property instead of height you're
able to size the object vertically based on the height
| | 05:03 | of the rows and make sure you're not cutting any data off.
| | 05:06 | So that's the combo box and the list control.
| | 05:08 | Now in the next video I'm going to show you how to use these same
two controls but with an array collection containing complex objects
| | 05:15 | with named properties such as the type of data you would get from an HTTP
service call, from a static XML file or a dynamic application server.
| | Collapse this transcript |
| Using the labelField property| 00:00 | In this video I'm going to show you how to use the combo box and the list
controls with complex data that's returned from an HTTP service component.
| | 00:09 | I'm still working in the file list controls
dot MXML that I used in the previous exercise.
| | 00:15 | In this file we're retrieving data as the application starts up.
| | 00:19 | There's an HTTP service component with an i.d. of slide service.
| | 00:23 | It has a result event handler.
| | 00:25 | Upon application start up in the application's creation
complete event handler we're sending the request for the data
| | 00:32 | and when the result event occurs we're handling the data
and saving it as a bindable variable called AC slides.
| | 00:39 | Let's take a look at the structure of the XML file that's being retrieved.
| | 00:43 | The file is in the source route's data sub
folder and it's names slideshow dot XML.
| | 00:49 | Each of the items in the data collection
has properties of source and caption.
| | 00:53 | Now let's return back to the application.
| | 00:56 | Go to the combo box and remove its data provider property and then
add the data provider as an attribute with a binding expression
| | 01:06 | that points to the array collection variable AC slides.
| | 01:12 | Be sure that you close the tag with the extra
slash to indicate that it's now an empty tag.
| | 01:17 | Save and run the application.
| | 01:19 | Let me just warn you this won't look quite right yet because
you'll see that when you populate a combo box or a list control
| | 01:25 | with an array collection of complex objects with named properties
the control has no idea how to generate a label for each item.
| | 01:33 | You'll see that it's successfully showing
all the items but instead of showing one
| | 01:37 | of the named properties it's generating an output of object object.
| | 01:42 | It definitely doesn't look right to the user.
| | 01:45 | Here's how you're going to fix this.
| | 01:47 | All list controls support a property called label field.
| | 01:51 | The label field property defaults to a value of label and in
fact if any of these objects in the XML file had a label property
| | 01:59 | in fact that's what would have shown up in the combo box.
| | 02:02 | But if as is usually the case your complex
objects don't have a property named label
| | 02:07 | in this case instead they have properties called source and caption.
| | 02:12 | You can tell the list control or the combo box control which
field or property of the data items to display for each item.
| | 02:20 | For the combo box do this with the label field
property and then set the label field property
| | 02:26 | to the name of the property whose value you want to display.
| | 02:30 | I'm going to set it as caption because I know that the
caption is a simple string that the user will understand.
| | 02:37 | I'll save and run the application again.
| | 02:40 | And now the combo box shows the captions for each of the images.
| | 02:44 | So that's a look at how you populate the list controls,
the combo box, the list and others with data providers.
| | 02:51 | The data providers should be an array collection.
| | 02:53 | If the array collection contains simple strings as in the list control
at the bottom of the application then the strings will be displayed.
| | 03:01 | If the array collection contains complex objects with
named properties you typically need to tell the combo box
| | 03:07 | or the list which property's value you want to display.
| | 03:10 | And you do this doing the label field attribute.
| | 03:13 | Now in the next video I'll show you a more complex approach
using a property called label function which allows you
| | 03:19 | to dynamically generate a label for each item within the combo box or list.
| | Collapse this transcript |
| Using the labelFunction Property| 00:00 | In this video I'm going to show you how to use a property of the list
controls, the combo box, the list and so on called label function.
| | 00:09 | The purpose of the label function property is to allow
you to designate a custom function that you design
| | 00:15 | that will determine dynamically what the labels are that
appear on each data item within one of these controls.
| | 00:22 | We'll start in the file using label function dot MXML.
| | 00:26 | Just as with the previous file it starts
by simply retrieving data from an XML file.
| | 00:32 | I'm going to create the control, and in this case I'm going to
use a list control, and then I'll use a label function property
| | 00:39 | to determine what the value of the label is that displays for each item.
| | 00:44 | If you're following along with the exercises start by opening the file
using label function dot MXML from the chapter twelve begin project.
| | 00:53 | Then place the cursor toward the bottom of the
file underneath the HTTP service declaration.
| | 00:59 | Create a list control, give it an i.d. of slide list and a data
provider of AC slides our bindable array collection variable.
| | 01:11 | As with the combo box in the previous video, if you simply run the
application now the list control will show the string object object
| | 01:20 | for each data item.
| | 01:21 | This is because it's lacking any instruction about
how to generate a label to display to the user.
| | 01:28 | So this is obviously not what we want the user to
see; instead, I'd like to show a label for each item
| | 01:34 | that shows both the caption and the source property of each complex object.
| | 01:39 | I'll close the browser and return to Flex Builder and
then expand the Source view editor to full screen.
| | 01:45 | Here's how you build a label function.
| | 01:48 | Label functions always have the same signature that is send tag.
| | 01:52 | When you build a label function for use with a list or a
combo box control the function receives a single argument
| | 01:59 | which is an instance of a data object.
| | 02:02 | The data object will be one of the complex objects
that's wrapped inside the array collection.
| | 02:07 | Create a private function named get list label.
| | 02:14 | Design the function to receive a single data item.
| | 02:17 | The name of the argument doesn't matter
and the data type should be an object.
| | 02:22 | And then this function should return a string.
| | 02:26 | The signature of this function is determined by the label
function architecture and it must always be the same.
| | 02:32 | The only variation that you're allowed
is that the object argument that's passed
| | 02:37 | into the function can also be a strongly typed action
script data object sometimes known as a value object.
| | 02:43 | But it always must return a string.
| | 02:45 | Now this function is going to be called automatically
by the list control as it renders its rows.
| | 02:51 | You won't have control directly over how many
times or how frequently the function is called.
| | 02:56 | So you want to keep the code and function very slim and very concise.
| | 03:01 | Each time the function is called you receive an
instance of a data object from the list control
| | 03:06 | and it's the entire data object including all of
its properties in this case source and caption.
| | 03:13 | Your job is to return a string.
| | 03:16 | I'm going to return a concatenated string
that includes both of those properties.
| | 03:21 | The code will look like this return item dot caption, and
then I'm going to put in a space and an open parenthesis,
| | 03:32 | then item dot source and then a closing parenthesis.
| | 03:39 | So you'll see that you're able to use any
of the named properties of the data item.
| | 03:44 | Now to cause this function to be called whenever the list control needs to
render a label go to the list control and add the label function property.
| | 03:54 | The value of the label function property is the name of the function
that you want to call in this case it will be get list label.
| | 04:03 | Don't put in any parentheses or arguments.
| | 04:06 | All you're providing to the list control is the name of the function.
| | 04:09 | And it's up to the list control to call the function
using the send tag that it expects each time it needs it.
| | 04:17 | I'll save and run the application again.
| | 04:19 | And you'll now see that the labels in the list control
consist of the caption, the literal spaces in parentheses,
| | 04:28 | and the source all wrapped exactly the way I determined it.
| | 04:31 | Now to see what's really happening in the
background we'll do a little bit of debugging.
| | 04:35 | Place the cursor inside the get list label function
and add a trace command and trace item dot caption.
| | 04:44 | Each time this function is called I want to see
a little bit of debugging output so I can figure
| | 04:49 | out how many times and how frequently it's being called.
| | 04:52 | Save your changes, run the application in debug
mode, and then return back to Flex Builder.
| | 04:59 | The Console view which should appear at the bottom of the Flex Builder
interface shows you how often and frequently that function is being called.
| | 05:07 | I'm going to expand the Console view to full screen, clear it, and
then I'm going to go back to the browser and resize the browser
| | 05:16 | so we can see both the browser and the
Flex Builder Console at the same time.
| | 05:20 | I'm going to scroll up and down in the list.
| | 05:23 | Notice as I scroll up and down that label
function is called over and over and over again.
| | 05:29 | So this is the point that I want to make.
| | 05:32 | When you build a label function keep it simple.
| | 05:36 | I'll go back to the code and point out that in terms of functional
code my get list label function has a very simple single statement
| | 05:45 | that takes values out of the data object, concatenates
them together, and returns the string exactly as I want it.
| | 05:51 | If you have formatting that you need to do you can use formatting
classes such as the currency formatter, number formatter,
| | 05:58 | and date formatter to output formatted strings and so on.
| | 06:03 | The label function feature is available on
the list control, the combo box control,
| | 06:08 | and as we get into the DataGrid I'll show
you that it's available there too.
| | 06:11 | But the signature of a label function for
a DataGrid will be a little bit different.
| | Collapse this transcript |
| Creating custom item renderers| 00:00 | In this video I'm going to describe how to use custom item
renderers to customize the appearance of a list control.
| | 00:07 | Custom item renderers can be used on any of the
list controls including the list, the combo box,
| | 00:12 | the horizontal list, the tile list, and the DataGrid control.
| | 00:16 | A custom item renderer is declared as an MXML component
and you can declare it as either an inline component
| | 00:24 | or as a separate MXML component that you refer to in the list declaration.
| | 00:30 | In this video I'm going to show you both approaches.
| | 00:33 | I'll once again be using the array collection that's
returned from the XML file, slideshow dot XML.
| | 00:39 | To get started open the file using item renderers
dot MXML in the chapter twelve begin project.
| | 00:46 | Place the cursor below the HTTP service
component and create a new list component.
| | 00:53 | Give it an i.d. of slide list and a data provider of AC slides.
| | 01:00 | First, I'm going to show you how to declare an inline item renderer.
| | 01:05 | Declare the list control as a pair of list tags.
| | 01:10 | And then within the list tags create an item renderer property.
| | 01:15 | Declare the item renderer property as a
child element also with a pair of tags.
| | 01:21 | When you declare an inline item renderer the next MXML tag set
that's nested within the item renderer is always MX colon component.
| | 01:31 | You're declaring an anonymous component that's only going to be used once.
| | 01:35 | The code looks like this: MX component.
| | 01:38 | This is similar to building a custom MXML component
in a separate file but you indicate to the compiler
| | 01:45 | that you're building it inline with these MX component tags.
| | 01:49 | Within the MX component tags declare the container that
you want to use as the base class of your component.
| | 01:55 | This is very commonly a VBox, an HBox or a canvas.
| | 02:00 | I'm going to use a VBox container as the
root element of my item renderer class.
| | 02:06 | When you use a container as an item renderer you
typically want to suppress any scroll bar activity.
| | 02:12 | These components when they're rendered within a list control tend to
sprout a lot of scroll bars and you typically want to turn them off.
| | 02:20 | You can do this using the horizontal scroll policy and
vertical scroll policy properties set to a value of off.
| | 02:27 | I'm going to expand the Source view editor to
full screen so we can see all of this code.
| | 02:35 | It's also commonly a good practice to set your container that's
an item renderer with explicit width and height settings.
| | 02:43 | This will make sure that the container doesn't
automatically try to resize itself as the list is rendering.
| | 02:49 | I'm going to set this VBox to a width of 125 pixels and a height of 100.
| | 02:56 | As the list renders the items it creates a new
instance of this VBox component for each data item
| | 03:03 | in its data provider in this case the AC slides array collection.
| | 03:07 | The VBox component, the item renderer, has a property called data.
| | 03:12 | This data property is magically filled in by
the list control as it's doing the rendering.
| | 03:18 | And each new instance of the VBox container will have a data property
that points to the current data item from the array collection.
| | 03:27 | This data item is always bindable so you can use the
properties of the data item by referencing data dot
| | 03:34 | and then the name of the property you're interested in.
| | 03:37 | For instance, I'm going to generate an image control and a text control.
| | 03:41 | They'll be stacked on top of each other
because they're inside the VBox container.
| | 03:45 | I'll start with the image control.
| | 03:48 | I'll set the image control source property using the combination
of a literal string indicating the location of my graphic files,
| | 03:56 | assets slash thumbs slash, and then I'll put in a binding expression
that starts with the data property and finishes with the named property
| | 04:07 | of the data object that has the data I need in this case source.
| | 04:11 | Next I'll create the text control and I'll set its tech
property to a binding expression of data dot caption.
| | 04:21 | So that's my completed inline item renderer.
| | 04:25 | I'll save the changes and run the application.
| | 04:30 | And there's my list control.
| | 04:32 | Each item in the list control shows the graphic
and the caption listed exactly the way I want.
| | 04:38 | Now if I want to change the look of each item I simply go back to the
code and make any visual changes I need within the component tags.
| | 04:47 | I can add additional properties to the VBox container
such as horizontal alignment and vertical alignment.
| | 04:53 | I can explicitly change the sides of the image control.
| | 04:56 | I can change the styles on the text control
to make it bold, italics and so on.
| | 05:01 | At this point everything else is a design choice.
| | 05:04 | So that's the inline item renderer.
| | 05:06 | In the next video I'll show you how to use a
separate component item renderer that's built
| | 05:11 | as a separate MXML component and then referenced in the list control.
| | Collapse this transcript |
| Using component item renderers| 00:00 | In this video I'm going to describe how to
create a separate MXML component that's then used
| | 00:05 | as a custom item renderer in the list,
combo box or other list style control.
| | 00:10 | In the last video I created the item renderer as
an inline component that could only be used once.
| | 00:16 | When you create an item renderer as a separate
MXML component it becomes a reusable component
| | 00:22 | that you can use in many places throughout the application.
| | 00:25 | I'll start this exercise by creating a
new folder in my project's source route.
| | 00:30 | I'll go to the SRC folder, right click on it or
control click on the Mac, and select new folder.
| | 00:39 | And I'm going to name my folder renderers and click finish.
| | 00:44 | Now I'll create a new custom component in the renderer's folder.
| | 00:49 | I'll right click or control click on the Mac and select new MXML component.
| | 00:55 | Creating an MXML component for use as an item renderer
is just like creating any other MXML component.
| | 01:02 | You set its file name.
| | 01:04 | I'm going to name this slide renderer.
| | 01:06 | And I'm going to base it on a VBox.
| | 01:13 | I'll set its width and height just like I did in the previous
example to 125 pixels wide by 100 pixels high and click finish.
| | 01:22 | Now I'm going to go back to the using item renderer's
application and I'm going to copy a little bit of code.
| | 01:30 | First of all, I'm going to take the nested
components, the image and the text control
| | 01:35 | that are outputting the graphic image using the
source property and the caption as a string.
| | 01:40 | And I'll copy those to the clipboard, come back to the slide
renderer component, and paste them between the VBox tags.
| | 01:49 | I'll select those lines of code and shift tab to unindent.
| | 01:54 | Next I'll come back to the using item renderer's application and I'm going
to take the horizontal scroll policy and vertical scroll policy settings,
| | 02:05 | copy those to the clipboard, go back to my renderer
component, and then past them into the VBox tag.
| | 02:14 | So you'll see that all the settings in a separate component
look exactly the same as they do in the inline version except
| | 02:20 | that you don't need the component tags wrapping everything.
| | 02:23 | I'll save the changes and then come back to the application.
| | 02:27 | Now I'm going to copy the MX list tag from the existing declaration.
| | 02:34 | I'll copy that to the clipboard.
| | 02:35 | I'll place the cursor down below at the
bottom of the application and paste.
| | 02:40 | And change this version to empty tags send tag.
| | 02:43 | And then I'm going to comment out the original list declaration.
| | 02:48 | I'll select the list declaration, go to the menu and select source toggle
block comment, and that wraps MXML comments around the selected source.
| | 02:58 | Now in order to use that item renderer I'm going
to place the cursor in the list declaration
| | 03:04 | and add an item renderer property setting using an MXML attribute.
| | 03:09 | The value of this property is the fully qualified
name of the MXML component including its package.
| | 03:16 | That's going to be renderers dot slide renderer.
| | 03:22 | Notice that you don't include the dot MXML extension.
| | 03:27 | You only include the package and the name of the component.
| | 03:30 | Also, this is not a binding expression.
| | 03:33 | You don't wrap braces around this string.
| | 03:35 | You're telling the list component whenever you need to render
this information this is the class that you should instantiate.
| | 03:42 | And it will be up to the list component to create as many instances
of this renderer component as it needs to render the information.
| | 03:50 | Save the change and run the application again.
| | 03:54 | You should see that the list control looks
exactly the same as it did before.
| | 03:59 | It shows each data item as an instance of that component.
| | 04:04 | So whether you use an inline component declaration as I did in the
first example or you declare the component as a separate MXML component
| | 04:12 | and then reference that component in the item renderer
property is a question of style and preference on your part.
| | 04:19 | Some developers always prefer to use inline others
prefer to always use separate MXML components.
| | 04:26 | You do have a major advantage in separate
components in that they are reusable.
| | 04:31 | You can reuse this component in many places throughout the application;
whereas with an inline component declaration you can only use it once.
| | 04:39 | Now in later videos I'll show you how to
use this same architecture the item renderer
| | 04:44 | but in the context of a tile list, a horizontal list, and a DataGrid.
| | Collapse this transcript |
| Using the TileList in the Photo Album application| 00:00 | In this video I'm going to describe how to use a tile list
component to present data in a grid like presentation.
| | 00:07 | The tile list component is just like the
list, the combo box and the DataGrid
| | 00:11 | in that it has a data provider property
that expects an array collection of data.
| | 00:16 | Unlike the list control though, which presents its items vertically,
| | 00:20 | a tile list lays out objects row by row in
a similar fashion to the tile container.
| | 00:25 | But unlike the tile container the tile list can generate
its own cell objects and then make those objects interactive
| | 00:33 | so that the user can select items from the tile list
in the same way that they do a list or a combo box.
| | 00:39 | To demonstrate this I'm going to continue work on the photo album
application that I've been creating throughout the previous videos.
| | 00:45 | If you're following along in this exercise open the photo
album dot MXML file from the chapter twelve begin project.
| | 00:53 | Let's take a look at the existing code.
| | 00:55 | In the existing code we're retrieving data from a dynamic
service provided by the PHP code that we generated previously.
| | 01:02 | And then we're using the data that's returned from the
PHP service, looping through that data using a repeater,
| | 01:09 | and then for each data item in the returned
array collection creating a VBox component.
| | 01:14 | We're going to replace the tile component in this version with a tile list.
| | 01:18 | Place the cursor at the beginning of the existing tile component,
| | 01:22 | and move it down a little bit making a little bit
of space, and then declare a tile list component.
| | 01:29 | Set its data provider to the AC slides array collection
variable and then type the greater than character
| | 01:38 | so that Flex Builder will complete the
tile list component adding the end tag.
| | 01:42 | We're going to use an inline component for our item renderer here.
| | 01:46 | So create a item renderer attribute.
| | 01:49 | And within the item renderer tags create a component tag set.
| | 01:55 | Now go down to the tile component and copy the VBox, select the code
copy it to the clipboard, go back up to the component and paste.
| | 02:07 | I'm going to double click to expand the Source view editor to
full screen and now we'll make a couple of changes in that code.
| | 02:14 | Remember that when you have an item renderer
component it gets its data through the data property.
| | 02:20 | We're not longer going to be using a repeater component.
| | 02:23 | So for the image and the text component that are wrapped within the VBox
I'll change the send tags, slide repeater dot current item to simply data.
| | 02:33 | I'll do that for the image control and for the text control.
| | 02:38 | Also, just as I did for previous exercises using item renderers I'll set
the VBox containers' horizontal scroll policy and vertical scroll policy
| | 02:48 | to values of off to make sure that it doesn't
generate scroll bars that we don't want.
| | 02:53 | Now I'll comment out the existing tile container.
| | 02:57 | I'll select its code.
| | 02:59 | From the menu I'll select source, toggle block
comment, and then I'll save and run the application.
| | 03:05 | Notice that the tile list cells are very, very small.
| | 03:11 | I'll fix that and in addition I'll reset the size of the tile list so
that it expands to fill the available space within the current view.
| | 03:19 | I'll close the browser and return to the code.
| | 03:23 | Go to the tile list tag and add a width and height of 100% each.
| | 03:31 | Also add the following properties.
| | 03:34 | Set the row height to a value of 125 and
the column width also to a value of 125.
| | 03:43 | Setting these dimensions is a matter of trial and error.
| | 03:46 | Set the value, run the code, see how it looks, and make any adjustments.
| | 03:50 | I'll go ahead and run the application and
now I get the display I was looking for.
| | 03:55 | The tile list displays one instance of my renderer
component for each item in the array collection variable.
| | 04:02 | But here are a couple of things that are very
different about it compared to the repeater approach.
| | 04:06 | When I demonstrated the use of the repeater I may have mentioned
that the repeater is used in its best situation where the amount
| | 04:13 | of content is limited to a single screen of display.
| | 04:16 | The reason is because with the repeater
component it generates all its visual controls
| | 04:21 | in Flash Player memory even the ones that currently aren't on the screen.
| | 04:25 | With a tile list component the tile list only renders the objects
that are either immediately visible or adjusts off the screen.
| | 04:33 | But if you're dealing with a large amount
of data hundreds or even thousands
| | 04:37 | of records the tile list doesn't generate all the off screen
components; instead, it waits for the user to scroll up and down.
| | 04:44 | The tile list is like the tile in that it automatically resizes and lays
out its object as needed so that if I resize the browser you'll notice
| | 04:52 | that the tile list is automatically reformatting and
repositioning objects to accommodate the available space.
| | 04:59 | But here's another thing that's very different
from the use of the tile and the repeater.
| | 05:03 | With the tile list the user can move the cursor over objects
and select them and when they do so they get the same behavior
| | 05:11 | as with a list, the combo box, and the DataGrid controls.
| | 05:14 | In a later video in this chapter I'll show you
how to handle the change event which occurs
| | 05:19 | when the user selects an item out of one of these list controls.
| | 05:22 | And then I'll show you how to get a reference to the data that
the user has selected by clicking on an item in a list control.
| | 05:30 | So that's a look at the tile list.
| | 05:32 | There's also a component called the horizontal list which does
the same thing as the tile list, the list, and the combo box.
| | 05:39 | But instead of laying out a grid or a
tile it lays out objects horizontally.
| | 05:44 | To see this behavior I'll just very quickly
change this tile list to a horizontal list.
| | 05:51 | I'll change both the begin and the end tag.
| | 05:56 | And I'm going to remove the height property because for a horizontal
list I'd like the height to be calculated more automatically.
| | 06:05 | I'll save and run the application.
| | 06:07 | And there's the result of a horizontal list.
| | 06:10 | It scrolls sideways and just like the tile list, the list, and
the combo box the user can select an item and work with that data.
| | 06:18 | The horizontal list and tile list are
great controls for a visual presentation
| | 06:23 | of graphical information such as a photo album application like this.
| | 06:27 | Now in the next video I'm going to describe one of the most
commonly used components in the Flex class library the DataGrid.
| | 06:34 | The DataGrid may not seem like a list control but it shares almost
every one of the behaviors that I described so far in this chapter;
| | 06:41 | the support for label functions, label field, custom item
renderers, and custom item editors, a more advanced feature.
| | 06:48 | And just like these other list controls
allows you to select and work with data.
| | Collapse this transcript |
| Using the DataGrid control| 00:00 | In this video I'm going to describe the use of the DataGrid component.
| | 00:04 | The DataGrid component is one of the most popular and
commonly used components in the Flex class library.
| | 00:10 | It's designed to present and allow the user to interact with
relational data that is data that's structured as rows and columns.
| | 00:18 | The most common data source for this sort of data is a
relational database such as MySQL, SQL Server, Oracle and so on.
| | 00:26 | And the middleware layer that provides the
data whether its PHP, ColdFusion dot net
| | 00:32 | or Java typically returns the data to the
Flex application as an array collection.
| | 00:37 | Just like the other list controls the list, the combo box, horizontal list,
| | 00:42 | tile list and so on the DataGrid controls data provider property
is designed to receive data in the form of an array collection.
| | 00:49 | I've used the DataGrid here and there throughout this video series
and in this video we'll get to take a look at some of its details.
| | 00:55 | I'm working in the file DataGrid demo dot
MXML in the chapter twelve begin project.
| | 01:01 | If you're following along in the exercises open that file now.
| | 01:06 | To see the basic look of a DataGrid place the cursor below the
HTTP service component and then declare a DataGrid control.
| | 01:15 | Just as with the other list controls the DataGrid gets its data through the
data provider property which was set as a binding expression in this case
| | 01:24 | to a bindable array collection that's already
been declared and populated with data.
| | 01:29 | In this initial demo I'll create the DataGrid,
save the changes, and run the application.
| | 01:36 | And you'll see that the data shows up in the DataGrid.
| | 01:38 | The default behavior of the DataGrid is to automatically create one column
for each named property in the first data item of the array collection.
| | 01:47 | It doesn't scan through in the entire data to
figure this out it just looks at the first one.
| | 01:52 | And then it creates the columns in alphabetical order by property name.
| | 01:57 | So the properties of the complex object in our array collection
variable are named caption and source and the data is put in that order.
| | 02:05 | The DataGrid supports these capabilities.
| | 02:08 | First of all, the user can click on the headers of the
DataGrid to resort the data in ascending or descending order.
| | 02:15 | This is an automatic behavior that's always
available unless you explicitly turn it off.
| | 02:19 | There's a property of the DataGrid component called sortable columns
which when set to false prevents the sorting capability from happening.
| | 02:27 | The user is also able to resize the columns horizontally by
clicking and dragging on the boarders between the columns.
| | 02:34 | They can also reorder the columns by clicking and dragging
on a header and moving the column to a new position.
| | 02:41 | Finally, also notice that the DataGrid
supports alternating row colors automatically.
| | 02:45 | It has a set of default colors and you can
change these colors through style settings.
| | 02:51 | Now most commonly when you use a DataGrid component you want to exert
explicit control over which columns are presented and in which order.
| | 02:58 | To do this you set a property of the DataGrid component named columns.
| | 03:03 | The columns' property is an array of objects
typed as DataGrid column classes.
| | 03:08 | To use the columns property in MXML declare
the DataGrid as a begin tag end tag pair.
| | 03:14 | I change the code by deleting the slash greater than at the end
of the tag and then putting the greater than symbol in by itself.
| | 03:22 | Flex Builder reacts by auto completing the tag set.
| | 03:25 | Now within the DataGrid tag set declare a
columns' property using a child element.
| | 03:32 | Then declare one DataGrid column tag for each column you want to present.
| | 03:37 | The first tag you put in will be the first column starting from the left.
| | 03:41 | The second will be the second starting from the left and so on.
| | 03:44 | Here's how you declare a DataGrid column.
| | 03:47 | Declare an MX DataGrid column tag and then provide these properties.
| | 03:52 | The data field is the name of the property of the
current object that you want to display in this column.
| | 03:58 | This is a case sensitive property and you must spell
it exactly the same way as it comes from the server.
| | 04:04 | Remember that our complex objects have properties of source and caption.
| | 04:08 | So I'll set the data field for my first column to source.
| | 04:11 | Then I'll set a property called header text.
| | 04:14 | The value put in the header text property
appears in the header that is the area at the top
| | 04:19 | of the column that the user can click on to resort the data.
| | 04:23 | You can put any string into the header text.
| | 04:25 | I'll put in the string image file.
| | 04:29 | Now I'll add another DataGrid column and I'll set the DataGrid
for this one to the other property of my complex object's caption.
| | 04:38 | And I'll set the header text to a value of description.
| | 04:45 | Again, the value of the header text is just what the user sees but
the data field must match the structure of the actual data objects.
| | 04:53 | Let's take a look at all the code.
| | 04:55 | The DataGrid column has a data provider pointing
to its data which is an array collection.
| | 05:01 | Its columns property wraps a set of DataGrid column declarations.
| | 05:06 | The DataGrids columns will appear in the order of declaration
| | 05:09 | with the first DataGrid column appearing first
then the next and so on starting from the left.
| | 05:15 | I'll save and run the application.
| | 05:18 | And you'll see now that the columns appear in the order that
I have declared and with the header text as I declared it.
| | 05:25 | Now you can resize a DataGrid in a couple of different ways.
| | 05:28 | First of all, you can set the width of the DataGrid
using either an absolute pixel value or a percentage.
| | 05:35 | For instance, I'll set the width of the DataGrid
at fifty percent of the application's size.
| | 05:40 | The individual DataGrid columns can't be set with percentage
values but they can be set with absolute pixel values.
| | 05:48 | So for instance I might set the DataGrid
column with a width property of 100 pixels.
| | 05:54 | And then the remaining horizontal space in the
DataGrid is allocated to the second column.
| | 05:59 | I'll save and run the application again.
| | 06:01 | And you can see that the width of the DataGrid
is determined by the width of the application.
| | 06:06 | As I resize the application the DataGrid grows
and shrinks but only its second column is changing
| | 06:12 | because I had set a specific pixel width on the first column.
| | 06:16 | If you want to change the order of the columns just change
the order of their declaration within the columns property.
| | 06:22 | Now in the next video I'll show you some other details about how
to use a DataGrid including how to implement an item renderer.
| | Collapse this transcript |
| Using advanced DataGrid cell rendering| 00:00 | In this video I'm going to show you some details about how
to populate or present data using the DataGrid column tag.
| | 00:07 | The DataGrid column tag supports many of the same
properties as the list, combo box, tile list, and so on.
| | 00:14 | For instance, just like the list and combo box
the DataGrid column supports the label function.
| | 00:21 | You can set up a label function for a DataGrid column like this.
| | 00:24 | I'll create a new function and I'm going to call it get source label.
| | 00:32 | When you create a label function for use in
a DataGrid column it receives two arguments.
| | 00:38 | The first argument is the data object which I'll type as an object.
| | 00:43 | And the second is referenced to the DataGrid
column that's calling the function.
| | 00:48 | I'll name this variable column and type it as a DataGrid column object.
| | 00:54 | And just as with a label function for the
list or the combo box it returns a string.
| | 00:59 | At runtime the DataGrid column will call
this function as many times as needed.
| | 01:06 | Each time it calls it, it passes in the entire data object
for the current row including all of its properties.
| | 01:13 | And it also passes in reference to itself so that you can get
additional information that can be useful in generating the label.
| | 01:20 | I'm going to use this function to upper
case the current name of the source.
| | 01:25 | As the data is passed in I receive a data object and I'm going
to return the following code: item dot source dot toUpperCase.
| | 01:36 | The toUpperCase Method is a method of all strings.
| | 01:41 | In a tile you uppercase text in ActionScript.
| | 01:44 | Now I'll go down to the DataGrid column and I'll set the label
function property to the name of the function get source label.
| | 01:53 | Just as with the list and combo box controls when you use a label
function on a DataGrid column you just provide the name of the function.
| | 02:01 | The DataGrid column component already knows how to call
that function you don't need to provide that information.
| | 02:08 | I'll run the application and here's the result.
| | 02:13 | I see that all of the image file names are now uppercased.
| | 02:17 | And just as with the list in the combo box as you scroll up and down
through the DataGrid you're calling that function over and over again.
| | 02:25 | You don't have control over how many times
and how often the function is called;
| | 02:29 | so whenever you create a label function keep the code
short and concise it's going to be executed a lot.
| | 02:37 | Custom item renderers work pretty much the same way for
DataGrid columns as they do for list and combo boxes.
| | 02:44 | To use an item renderer create a DataGrid column and set its data field.
| | 02:52 | I'll set the data field to source again for this version.
| | 02:57 | And then declare the DataGrid column as a pair of tags.
| | 03:01 | Then just as with the list control create an
item renderer attribute as a child element.
| | 03:07 | If you're going to use an inline component as
I will here, declare the MX component tag set,
| | 03:14 | and then declare the object within that component that you want to render.
| | 03:18 | In this example I'm going to use a container
I'm just going to render an image.
| | 03:23 | So I'll put the image tag in and I'll set its source
attribute to the literal string assets slash thumbs slash.
| | 03:32 | And then the binding expression data dot source.
| | 03:37 | As with the list and combo box controls each time an
instance of the component is instantiated to serve
| | 03:43 | as an item renderer its data property is filled in with the
current item from the data provider that is the array collection.
| | 03:51 | So now I'll save and run the application.
| | 03:54 | And you'll see the images appear in a very small format.
| | 03:58 | Now to force this to a larger size I'll go back to the application.
| | 04:02 | I'll set the image tags height and width at 100 pixels each.
| | 04:08 | And then in order to allow each row of the DataGrid to
size appropriately I'll go to the DataGrid start tag
| | 04:16 | and set a property called variable row height to true.
| | 04:20 | This means that each row of the DataGrid can be of
whatever size it needs to be to accommodate its contents.
| | 04:26 | I'll run the application again.
| | 04:31 | And now you'll see that the rows accommodate the graphics as needed.
| | 04:35 | You can add whatever complex presentation you want into a DataGrid column.
| | 04:40 | You can create a container with multiple objects.
| | 04:43 | You can make it interactive.
| | 04:44 | And there's another feature known as an item editor
that allows you to create interactive controls.
| | 04:51 | I'll be describing that feature in some depth in
the next video series, Flex 3 Beyond the Basics.
| | 04:57 | But this should be enough information to
get you started with the DataGrid component.
| | 05:01 | Just like the other list controls the DataGrid uses an array
collection as its data provider and is highly interactive.
| | 05:08 | The user can interact with the data and select it by
moving the cursor and selecting one row at a time.
| | 05:15 | And in the next video I'll show you how to react to
that event and find out what data the user has selected.
| | Collapse this transcript |
| Working with List Control events and properties| 00:00 | In this video I'm going to describe the use of events and properties of
the list controls that allow you to react to when the user selects data.
| | 00:08 | Every list control including the list, combo box,
DataGrid, and so on supports a property called change.
| | 00:15 | The change event occurs whenever the user selects a row of the
DataGrid, a cell of a tile list or an item from a list or a combo box.
| | 00:22 | When the change event occurs you can find out what the user has
selected through a property of that list control named selected item.
| | 00:30 | The selected item property references the underlying
data object of the selected row, tile cell, and so on.
| | 00:37 | To demonstrate this I'm going to continue
work on the photo album dot MXML file.
| | 00:42 | If you're following along in these exercises open this file
and we're going to make some changes to the application.
| | 00:48 | In the last version of the application we had a horizontal
list showing the different graphics that the user selected.
| | 00:54 | As the user moves back and forth through the
images the can click and select an image.
| | 01:00 | Our goal is to handle the event that occurs when the user
selects an image, figure out which item the user has selected,
| | 01:06 | and then display a larger version of that image on the screen.
| | 01:10 | Let's start off in the script section.
| | 01:14 | Create a new private function named change handler.
| | 01:19 | The name of the event that's going to occur
when the user selects an item is change.
| | 01:24 | And then in the change handler function receive an argument
named event typed as the standard event class and return void.
| | 01:33 | Next place your cursor above all the functions
and create a new bindable variable.
| | 01:37 | Name the variable current slide and data type it as an object.
| | 01:45 | Now place the cursor within the change handler
method and set the value of the current slide object
| | 01:51 | to the currently selected item from the horizontal list.
| | 01:54 | Go down to the horizontal list and add an i.d. attribute
and give this a unique identifier of slide list.
| | 02:03 | Then go back to the change handler and set
current slide to slide list dot selected item.
| | 02:11 | Now to actually make the image appear in full
size go down to below the horizontal list.
| | 02:18 | Remember that the horizontal list is stored inside a VBox so we'll
be able to add an image control underneath the horizontal list.
| | 02:25 | Create the new image control and give the
image control an i.d. of detail slide.
| | 02:32 | Set its visible property to false.
| | 02:36 | We're only going to show the image once the
user has selected an item from the list.
| | 02:41 | Then set the image's source property to a literal string of assets
slash and then a binding expression of current slide dot source.
| | 02:52 | Return back to the function change handler.
| | 02:55 | After setting the value of current slide change the
value of the detail slide's visible property to true.
| | 03:03 | Finally, to wire the whole thing together go back down
to the horizontal list and add a change event handler.
| | 03:12 | When the change event occurs, call your new change
handler function and pass in the event object.
| | 03:18 | When the user selects an item from the horizontal list it will
result in passing the source of the image to the image control
| | 03:26 | and then we'll set its visible property to true and
we'll be able to see the full size detail of that image.
| | 03:31 | Save your changes and run the application.
| | 03:38 | Notice as the application opens the detail image control is not visible.
| | 03:42 | But now when I click on an item I see the
actual full size version of that image.
| | 03:47 | We're handling the change event of the horizontal list control
and then grabbing the property of the current selected item
| | 03:53 | and using that to populate the image control at the bottom.
| | 03:56 | The user can now navigate around and see all
the details of the images as they want to.
| | 04:02 | This same change event is used on the DataGrid,
the list control, the combo box, and the tile list.
| | 04:08 | In order to find out what the user has selected handle the change
event and then get the value of the selected item property.
| | 04:15 | The selected item points to the underlying data
object of the currently selected cell or row.
| | 04:19 | And then get the named property of that data object that will
help you fill in the rest of the application; as in this example,
| | 04:26 | where we used the source to populate a large scale image.
| | 04:29 | And that's a basic look at the use of the DataGrid.
| | 04:32 | In the next video series, Flex 3 Beyond the Basics, I'll describe in
detail some new components that have been added to the Flex framework.
| | 04:39 | For example, the advanced DataGrid has the ability to show hierarchal
data, summary columns, and a lot of other great advanced features.
| | 04:48 | In that video series, I'll also be talking
about the advanced charting controls
| | 04:51 | and other data visualization components
that are apart of the Flex 3 class library.
| | 04:54 | (End of Audio) Lauren Harmon 12_09_listevents Page 2
of 2 David Gassner www.escriptionist.com Page 2 of 2
| | Collapse this transcript |
|
|
13. Creating Data Entry Form ComponentsBuilding a form component| 00:00 | In this chapter of the video series I'm going to describe
how to use Data Entry Form components to collect data
| | 00:06 | from the user and then share it with the rest of the application.
| | 00:09 | By the end of this chapter I will have shown you how to create
the component, how to use the component to package data,
| | 00:15 | how to validate the data using Validator Controls and then how to
share the data with the rest of the application through Custom Events.
| | 00:23 | Once the application receives the data from the Form
component I'll then send the data to the dynamic server,
| | 00:28 | the PHP service that I created earlier, to insert
data into the server side data base tables.
| | 00:34 | I'm going to start in this chapter showing
you how to build a Form component.
| | 00:39 | I'm working in the project Chapter 13, Begin.
| | 00:42 | If you're working with the exercises yourself go ahead and import
the project now and then open the existing file ADDSLIDES.MXML.
| | 00:50 | This is a beginning application which contains
only an instance of the HTTP service component
| | 00:55 | with its URL pointing to the slides PHP service that we created earlier.
| | 01:00 | Our first step is to create a Data Entry Form component.
| | 01:04 | Data entry forms can be laid out in a number of different
ways but it's very common to use the Form container.
| | 01:10 | The nature of the Form container is that it lays out two columns,
Labels on the left and Data Entry Form Controls on the right.
| | 01:17 | Some developers prefer to wrap Form components inside panels so that
they can then place the buttons of the components within control bars.
| | 01:24 | That's a design selection that you can make yourself.
| | 01:27 | In this example application I'm going to create
a custom component based on the Form component.
| | 01:32 | Then I'll build the Form component in Design view,
I'll wrap it inside a panel from the application level
| | 01:38 | and then we'll be able to collect data from the user.
| | 01:41 | Start off in the projects Source Route Directory,
SRC; create a new subfolder in the SRC folder.
| | 01:47 | From the Flex Navigator view, right click on the folder
or Control click on the Mac and select New Folder.
| | 01:55 | Name the new folder, Forms.
| | 01:58 | Now right click on the new folder and select New MXML component.
| | 02:04 | The name of our file will be SLIDEFORM.MXML and
we're going to base it on the Form container.
| | 02:13 | Remove any width or height settings that the wizard puts in.
| | 02:16 | We're going to allow the form to size itself
automatically based on its contents, and then click Finish.
| | 02:22 | The Form container is declared with a pair of Form tags.
| | 02:27 | You can also use the Form container inline in an application but
I prefer to build all of my Data Entry Forms as custom components.
| | 02:34 | The nature of the Form container is that it presents
two columns, labels on the left, controls on the right.
| | 02:39 | It wraps these controls and labels with a container named Form Item.
| | 02:44 | The easiest way to build the form is to go into Design view and
then start dragging controls into the form from the Components view.
| | 02:52 | Don't worry about the size of the form.
| | 02:54 | It's actually going to size itself automatically based on its contents.
| | 02:58 | Go down to the Components view.
| | 03:00 | We're going to ask the use to type in two
values, a source property and a caption.
| | 03:06 | So we're going to use a text input control and a text area control.
| | 03:10 | Start by dragging in a text input control
and place it anywhere in the form.
| | 03:15 | Notice that when you drag in an interactive component like a text input,
| | 03:19 | Flex Builder's Design view automatically
wraps the component inside a form item.
| | 03:24 | Let's take a look at the code.
| | 03:25 | The form item is a container that wraps around the control.
| | 03:29 | It has a label attribute or property.
| | 03:31 | This is the value that will appear in the left column.
| | 03:35 | I'll go back to Design view and I'll double-click on the
label and I'm going to change the label text to source.
| | 03:43 | Now I'll select the text input control and
give it a unique identifier of source input.
| | 03:51 | You could do all this in Source view just as well.
| | 03:53 | Now I'll add another control to the form,
I'll go back to the Components view
| | 03:58 | and drag in a text area control and I'll
drop it below the existing control.
| | 04:04 | Notice that the controls line up nicely on the right and the
labels right align with each other within the left column.
| | 04:11 | Now I'll double click on the label for the new form item
and I'll change it to Caption: with a colon at the end.
| | 04:19 | Notice that the form items are repositioning themselves as needed.
| | 04:22 | Finally, I'll drag in a button control.
| | 04:25 | I'm going to place the button control below the existing form items
and then I'll double click on the button to change its label to,
| | 04:34 | insert data and then I'll remove the label from the form item.
| | 04:39 | I'll double click on the form item, press Delete to get
rid of the label and then enter and I'll save my changes.
| | 04:47 | So this Form component is pretty much ready for presentation.
| | 04:51 | It's not yet collecting data and sharing it with the rest
of the application but it has the basic look that we want.
| | 04:58 | Now, go back to the application, ADDSLIDES.MXML.
| | 05:02 | Place the cursor below the HTTP service component and create a panel.
| | 05:08 | Give the panel a title property of Add Slide.
| | 05:13 | Place the cursor at the end of that and type the greater than
character to allow Flex Builder to auto complete the panel tag set.
| | 05:21 | Now, add an instance of the slide form.
| | 05:25 | Start typing less than character, then slide form and you'll
see the component popup in the list of available components.
| | 05:32 | Press enter and give the Form component an ID of, My Slide
Form, close the tag, save your file and run the application.
| | 05:45 | You'll see that the Data Entry Form appears
in the application in the upper left corner.
| | 05:51 | If instead you want the component to appear in the
center, close the browser, return to Source view
| | 05:58 | and change the applications layout property from Absolute to Vertical.
| | 06:03 | Save your changes and run the application again
and now the Data Entry Form component should appear
| | 06:08 | at the top of the application in its horizontal center.
| | 06:12 | So that's how you build a basic Form component
and create the look and feel.
| | 06:16 | There are lots of other options for how you design this.
| | 06:19 | As I mentioned, you could instead have placed
the button inside a control bar inside the panel,
| | 06:23 | you could have made the custom components root
element, the panel itself, instead of the form.
| | 06:28 | These are all design choices that you can exert as the developer.
| | 06:32 | Now in the next video I'm going to show you how to validate the
data entry in the form using something called Validator Components.
| | 06:36 | (End of Audio) Lauren Harmon 13_01_buildformcomponent Page
1 of 3 David Gassner www.escriptionist.com Page 1 of 3
| | Collapse this transcript |
| Validating Data Entry controls| 00:00 | In this video I'm going to show you how to how to validate data
entry when the user types values into a Data Entry Form component.
| | 00:07 | The Flex framework provides a set of classes called Validator Components.
| | 00:11 | There's a single class named Validator which is
the super class of this group and then a number
| | 00:15 | of individual validator components for different types of data.
| | 00:19 | There's a string validator, a number validator and many
other kinds of validators for particular types of data.
| | 00:25 | I'm only going to use one of these validator types, the string validator,
| | 00:29 | because the types of data that my data
entry form accepts are simple strings.
| | 00:33 | But if I wanted to validate for numbers or dates or other data
types I could use those specific types of validators instead.
| | 00:40 | To use a validator go to the component in which you're
collecting the data and then go into Source view.
| | 00:47 | Declare one instance of a validator object for
each form control that you want to validate.
| | 00:53 | I have two different form controls here, one text input with an idea of
source input and another text area which I need to provide an ID for now.
| | 01:02 | I'll set the ID of the text area control to Caption Input.
| | 01:08 | Now, to validate each of these controls I'll
add a validator component of the right type.
| | 01:14 | These are simple strings so I'm going to use the string validator class.
| | 01:19 | Each of the validators should receive an ID.
| | 01:22 | I'll name the first one Source Validator and then set two
properties that indicate which component you're validating
| | 01:31 | and which of its properties you're watching to make sure it's valid.
| | 01:34 | The first property is called the source.
| | 01:37 | The source is set as a binding expression
pointing to the object that you want to validate.
| | 01:41 | I'll put in a binding expression and I'll refer to source input.
| | 01:46 | The next property is named Property.
| | 01:49 | This is a string value which is the name of the property you want to watch.
| | 01:53 | The property of a text input control that you want to watch is simply Text.
| | 01:59 | Next, indicate when you want to do the validation.
| | 02:03 | By default validation occurs when the user clicks into
a control and then either tabs or clicks out of it.
| | 02:09 | This may give you validation that's a little bit
hyperactive so I typically change the validation rules.
| | 02:14 | If I want validation to happen automatically I'll
go to the button control and give it an ID property.
| | 02:20 | I'll call my button Insert button and then I'll go to
the validator object and set a property called Trigger.
| | 02:28 | The Trigger property is a reference to
the object you want to trigger validation.
| | 02:33 | This will be the button with the ID Insert Button
and then another property called Trigger Event.
| | 02:40 | This is the name of the event upon which you want to validate.
| | 02:43 | I'll add a Trigger Event of Click meaning when the user
clicks the button I want to execute this validation rule.
| | 02:50 | Now I'm going to add one more validator.
| | 02:53 | I'll select this one and then clone it and then I'll go
to the ID and I'll change this one from Source Validator
| | 03:00 | to Caption Validator and its source from Source Input to Caption Input.
| | 03:07 | As with the first validator I'm going to trigger
validation upon the Insert button's click event.
| | 03:13 | I'll save the change, go back to the application and run it again.
| | 03:18 | Now when you use this validation technique
here's the user interface that the user sees.
| | 03:23 | I'll click the button to trigger validation.
| | 03:26 | Notice that because I haven't typed any values
into the controls they're now considered invalid.
| | 03:31 | This is because all validator objects by default have a required property
set to True, meaning that their source object property can't be left blank.
| | 03:40 | Now to see what I did wrong I'll move the cursor
over the controls and you'll see a message popup.
| | 03:46 | This is the validation error message for this particular rule.
| | 03:50 | All validator classes have properties that you can
use to override these automatic or default messages.
| | 03:56 | Notice I'm getting the same error message on both validators.
| | 03:59 | So I'll return to the code and I'm going to add a
distinct error message to each of these validators.
| | 04:06 | The validator has a property called Required Field Error
that you use to override that particular error message
| | 04:13 | and I'll put in custom error messages that look like this.
| | 04:17 | Source can't be left blank.
| | 04:21 | And for the Caption Validator I'll use the same property,
required field error equals, Caption can't be left blank.
| | 04:32 | I'll run the application again.
| | 04:34 | Once again I'll click the button to trigger validation, I'll see
the red outlines around the controls but now when I move the cursor
| | 04:41 | over the controls I see the error is customized to each control.
| | 04:45 | For more information on the different validation error messages
for each validator controls check the Flex documentation.
| | 04:52 | For instance, there are different rules and
different error messages for the number validator
| | 04:56 | than there are for the string validator or for the data validator.
| | 05:01 | The next step in using validation is to learn how to
validate programmatically using ActionScript code.
| | 05:07 | Typically you want to trigger validation with action
script rather than with the automatic validation trigger.
| | 05:13 | This allows you to find out whether validation has succeeded or not and if
it has succeeded you can then share data with the rest of the application.
| | 05:22 | In order to trigger validation programmatically
your first step is to suppress automatic validation.
| | 05:28 | Here's how you do that.
| | 05:30 | For each validator class, remove the Trigger property
and then set the Trigger Event property to blank string.
| | 05:37 | This means that the validator only executes automatically when an event
occurs that has a blank string for its name and there is no such event.
| | 05:46 | So setting the Trigger Event to a blank
string means suppress automatic validation.
| | 05:51 | I'll make that change for both string validator objects.
| | 05:55 | Next I'll add a function, add a script section and create a
private function called Is Valid which is returns a Boolean value.
| | 06:05 | In order to validate programmatically I'm going to
call the validator classes Validate All Static Method.
| | 06:15 | When you call the Validate All Static Method
you pass in an array of validator objects.
| | 06:20 | This Validate All method returns an array containing
one object for each validator that fails validation.
| | 06:27 | So the first step is to create that array.
| | 06:29 | The code looks like this.
| | 06:30 | I'm gonna create a variable called Invalid
Array and data type it as an array.
| | 06:36 | Then I'll call a method of the validator class called Validate All.
| | 06:41 | After I type the word Validator, I'll press
Control Space and that will cause Flex Builder
| | 06:46 | to add an import statement for that class which is required.
| | 06:52 | Next I'll reformat the code a bit and I'm
going to set the code editor to full screen.
| | 06:57 | Then after the class name validator I'll press the period.
| | 07:01 | The list of available methods has just one static method, Validate All.
| | 07:06 | I'll select the method.
| | 07:08 | You pass an array into the Validate All method so I'll put in a
pair of brackets which is ActionScript shorthand for an array.
| | 07:16 | And then within the brackets I'll wrap a comma delimited
list of all the validators that I want to validate.
| | 07:23 | The first one will be source validator
and the second will be caption validator.
| | 07:28 | So now I've got my array of objects.
| | 07:31 | In order to find out whether validation was
successful, check the length of the returned array.
| | 07:37 | If the length of the returned array is 0 that
means all the validators passed their rules.
| | 07:42 | If the invalid array is greater than 0
at least one validator will have failed.
| | 07:47 | So I'm going to create an additional section
and check the length of invalid array.
| | 07:52 | If invalid ARRAY.LENGTH is 0 then I'm going to return True,
meaning that everything is okay and whatever the form needs to do
| | 08:04 | in terms of packaging and sharing the data can go forward.
| | 08:07 | Otherwise, I'll put in an Else clause and I'll
return False and at the same time I'll show the user
| | 08:15 | that there's something wrong with the form by putting up an alert dialogue.
| | 08:20 | I'll type in the word Alert and press Control Space,
select the Alert class from the list of available classes,
| | 08:26 | call the Show method and then tell the user that there are form errors.
| | 08:31 | You can create your own custom error messages at this point.
| | 08:41 | Now to trigger this function I'll go down to the button that
has the idea of Insert button and add a Click Event Handler
| | 08:48 | and for the moment I'm just going to call the Is Valid method.
| | 08:53 | When I call this method I'll be triggering programmatic validation.
| | 08:56 | I'll be calling the Validate All method triggering validation on both
validators and then finding out whether the validation was successful
| | 09:03 | or not and if not, I'll show the user the
dialogue box indicating that there are problems.
| | 09:09 | I'll save the changes, go back to the application and run it.
| | 09:12 | I'll click the button and now in addition to seeing the red outline around
the controls I get the Alert dialogue indicating that there's a problem.
| | 09:23 | I'll click into the text input and text area controls and type
some values in and click the button again and this time you'll see
| | 09:35 | that the red outlines around the controls
disappear and I don't get any error dialogue.
| | 09:40 | So that's how you execute validation on a data entry form.
| | 09:43 | In the next video I'll show you how to capture the data from the data entry
form controls and package it for sharing with the rest of the application.
| | Collapse this transcript |
| Packaging data with a Value Object Class| 00:00 | In this video, I'm going to describe how to create
a type of ActionScript class called a Value Object.
| | 00:06 | The Value Object design pattern, also sometimes know as
a Transfer Object, a Data Transfer Object, or a BEAN,
| | 00:13 | is a class designed to contain public properties to wrap data.
| | 00:17 | Value Object classes are very commonly used to hold
individual bits of data and they're typically modeled based
| | 00:23 | on the structure of the backend database table, or an XML structure.
| | 00:27 | As with all other ActionScript classes, you should create your
Value Object classes in sub-folders of your project's source root.
| | 00:35 | To create a Value Object class for this application
I first need to know my database table structure.
| | 00:41 | The database table contains three columns
named: Slide ID, Source, and Caption.
| | 00:46 | The Slide ID is a numeric value, whereas
the caption and the source are strings.
| | 00:51 | I'm going to model the ActionScript class
with public properties containing these values.
| | 00:56 | I'll start by creating a new folder in the source root.
| | 00:59 | I'll right click on the source root, SRC, or
Control click on the MAC, and select New Folder.
| | 01:07 | And I'll name my folder VO, for Value Objects and click finish.
| | 01:14 | Then I'll create the new ActionScript class.
| | 01:17 | I'll right click on the VO folder and select New ActionScript Class.
| | 01:23 | The name of the class should describe
the type of data entity it represents.
| | 01:28 | I'll call mine, Slide VO.
| | 01:31 | Unlike Custom Event classes, which I described earlier,
Value Object classes typically don't extend any other class.
| | 01:38 | They are very simple classes which simply contain public properties.
| | 01:41 | I'll click the finish button to create the class.
| | 01:45 | Then I'll add public property declarations, one for each of
the columns of the database table structure I'm representing.
| | 01:52 | The first will be a variable, named Slide ID typed as an integer.
| | 01:59 | The next will be a string variable named Source, and
the last will be a string variable named Caption.
| | 02:08 | If you like, you can add arguments to the constructor methods of the
class to allow values to be initialized upon object construction.
| | 02:16 | If you follow this model the code would look like this, you would
create one argument for each public property and type it appropriately.
| | 02:23 | So I have three arguments named, Slide ID, Source and Caption.
| | 02:28 | And then within the constructor method I'll add code to pass the
value of the arguments to the values of the public properties.
| | 02:37 | For each public property I'll use this code: THIS.SLIDEID
= SLIDEID, THIS.SOURCE = SOURCE and THIS.CAPTION = CAPTION.
| | 02:53 | Now, as I instantiate the Value Object I'll
be able to pass the values in automatically.
| | 02:59 | I'll save the change to the Value Object and here's how I am
going to use it in the form, I'll go back to the form component
| | 03:06 | and I'll create a new private function named Insert Data.
| | 03:12 | Within the Insert Data function I'll put in a conditional
block that checks the value of the Is Valid function.
| | 03:23 | If all of the form controls are valid I'll
create an instance of the Value Object class.
| | 03:32 | I'll select the class Slide VO.
| | 03:34 | When I select the class from the list of available classes that results
in creating an import statement at the top of the form, which is required.
| | 03:41 | And then I'll construct the object using the Slide VO
components constructor method and I'll pass in some values.
| | 03:50 | Because I'm creating a new object, the Slide
ID, the primary key, can be set initially to 0.
| | 03:57 | Then I'll pass in the two values from the form components.
| | 04:01 | The source value will be from the Source Input Controls Text Property
and the caption will be from the Caption Input Controls Text Property.
| | 04:10 | The next step is to share the data with the rest of the application
and in the next video I'll show you how to use this Value Object,
| | 04:16 | wrap it inside a Custom Event object and
dispatch it to the rest of the application.
| | Collapse this transcript |
| Sharing data with custom events| 00:00 | In this video I'm going to describe how to use
the value object class that we just created
| | 00:05 | and wrap it inside a custom event class for
sharing with the rest of the application.
| | 00:10 | I showed you how to build custom event classes in an earlier chapter,
| | 00:13 | now we're going to create a custom event class that's
specifically designed to share this particular value object.
| | 00:20 | Start off with the file SLIDEEVENT.AS in
the Events subfolder of the source root.
| | 00:26 | This is a custom event class that currently has no public properties.
| | 00:30 | Our job in this class is to declare a single
public property typed as the SLIDE.VO object.
| | 00:37 | Place the cursor after the class declaration and declare a public
property named Slide data typed as the value object SLIDE.VO.
| | 00:48 | Notice that when I select the SLIDE.VO
class from the list of available classes
| | 00:52 | that Flex Builder adds the import statement automatically that's required.
| | 00:56 | That's all we have to do here.
| | 00:58 | Save the change and now go over to the slide form component.
| | 01:02 | I'm going to expand the Editor to full
screen so we can see all of the code.
| | 01:07 | Place the cursor inside the Insert Data method and place it
after the variable declaration of the value object slide.
| | 01:15 | We've created the value object and we've populated it with
data, now we'll wrap it inside the custom event object.
| | 01:23 | Create a new variable named Event typed as
the new slide event class and constructed
| | 01:30 | from the slide even constructor method passing
in the name of an event that we want to dispatch.
| | 01:36 | I'll name the event Insert.
| | 01:38 | Next populate the event object with this statement, EVENT.SLIDE = Slide.
| | 01:45 | So we're taking the value object that we just constructed
and wrapping it inside the custom event object.
| | 01:51 | Finally dispatch the even by calling the dispatch
event method and passing the event object.
| | 01:58 | Before we can execute this code we also need to
declare metadata to tell the rest of the application
| | 02:04 | that this component will be generating and dispatching this event.
| | 02:08 | Go to the top of the component and add
the metadata tag set that you see here.
| | 02:13 | Put in a pair of metadata tags wrapped around an event metadata tag
where the name is Insert and the type is set to EVENTS.SLIDEEVENT,
| | 02:22 | the fully qualified name of the class with its package.
| | 02:25 | We have one more change to make in this component.
| | 02:28 | Right now when the user clicks the button
they're just executing the As Valid method.
| | 02:32 | Go back down to the button at the bottom of the component
and change the Click Event Handler so that instead
| | 02:37 | of directly calling the Is Valid method, it calls the Insert Data method.
| | 02:42 | The Insert Data method in turn calls the Is Valid method to determine
whether the form controls are valid and if they are we generate an instance
| | 02:50 | to the value object populated with the data from the form, we wrap the
value object inside the custom event object and we dispatch the event.
| | 02:58 | I'll return to the application and I'm
going to now add an Insert Event handler.
| | 03:03 | Notice that the Insert attribute already appears as a member of the slide
form component and Flex Builder will help you auto complete the code.
| | 03:12 | When the Insert Event occurs we'll handle the event with a custom function,
create a new script tag set; create a new function called Insert Handler
| | 03:24 | which receives an event object typed as Slide Event.
| | 03:30 | And within the Insert Handler function for the moment just put
in an ALERT.SHOW method that tells us that the event happened.
| | 03:45 | Go back down to the slide form component instance and in the
attributed based insert listener call the Insert Handler method
| | 03:53 | and pass the event object.
| | 03:58 | Now we're ready to test the application.
| | 04:00 | Run the application in the browser.
| | 04:03 | First try clicking the button without adding any values
and you should see the message that there are form errors.
| | 04:09 | Next type values into the source and caption inputs and click the
Insert Data button and now you should see the dialogue box produced
| | 04:20 | at the application level indicating that
the insert event was dispatched and handled.
| | 04:26 | Now in the final video of this chapter I'll show you what to
do with the data, how to extract the data from the event object
| | 04:32 | and then send it to the PHP service at the application server.
| | Collapse this transcript |
| Sending data to the server| 00:00 | In this video I'm going to show you how to take the data that's shared
from the data entry form in the context of the custom event class,
| | 00:07 | how to extract that data and put it into a
form that you can send to an HTTP service.
| | 00:12 | I'm working in the application ADDSLIDES.MXML.
| | 00:17 | Start off by going to the Insert Handler Method.
| | 00:20 | In order to pass named properties to an HTTP
service call create a generic ActionScript object
| | 00:27 | where each named property will be an expected parameter
in the service side page such as the PHP page.
| | 00:33 | In PHP the names of the properties are case sensitive so I need
| | 00:37 | to make sure I know exactly what the names of
the properties are and their expected values.
| | 00:42 | In the PHP code that we're using that was generated in an earlier video
the expected value of the method property is Insert with an uppercase I.
| | 00:51 | So my first step in getting ready to send data to
the server is to declare a variable named Params.
| | 00:58 | You can name the variable anything you want but declare
it as an instance of the ActionScript object class
| | 01:04 | and then instantiate it using the object class constructor.
| | 01:09 | Next set a property called Method to a value of Insert.
| | 01:13 | And again, the reason the value is Insert with an uppercase
I is because that's what the PHP page is expecting.
| | 01:20 | Next, set one property for each of the database columns.
| | 01:24 | We're going to get these properties from
the event objects value object class.
| | 01:29 | I'll start with slide ID and I'll populate
its value from EVENT.SLIDE.SLIDEID.
| | 01:38 | Then I'll populate the source parameter.
| | 01:42 | Notice that because I'm using a strongly typed value object
class that Flex Builder is able to help auto complete the code.
| | 01:53 | Finally, I'll set the caption value, once again from EVENT.SLIDE.CAPTION.
| | 02:00 | So now my parameters object is ready for
us and ready to send to the server.
| | 02:04 | The last step is to send the data to the server
using the HTTP service components Send Method.
| | 02:10 | The syntax looks like this, SLIDESERVICE.SEND and then
I'll pass the parameters object as the only argument.
| | 02:19 | When the parameters object is sent to the PHP page the values are
received as individual named parameters and it's up to the PHP page
| | 02:27 | to interpret the request and our generated PHP page will respond
to this request by inserting the data into the database table.
| | 02:35 | I'll save and test the application.
| | 02:37 | When the application opens in the browser I'll type
values into the source and caption input controls.
| | 02:45 | My source will be MYSOURCE.JPG and the caption will be
THISISMYCUSTOMCAPTION and I'll click the Insert Data button.
| | 02:55 | I get a message indicating that the insert event was dispatched and
I note that I also made the request to the PHP page at the same time.
| | 03:03 | Now to test the result I'm going to go
back to the PHP My Admin application.
| | 03:09 | This is the application that we used to manage the
database from within the WAMP or MAMP installation.
| | 03:14 | The URL is HTTP://LOCALHOSTPHP/MYADMIN within the administrative
interface I'll select the slide show database, click the SQL link,
| | 03:29 | select * from slides, click the Go button, scroll down to the bottom
of the list and you should see that your custom data has been added.
| | 03:41 | If the primary keys are a little bit out of order don't worry about
that, that's a result of the database structure having been used before
| | 03:48 | and the primary key values having been already used and then deleted.
| | 03:51 | It's not a problem because the primary
key values are essentially meaningless.
| | 03:56 | Now if you have any problems running this code on your
system check something in your Project Properties.
| | 04:01 | Go through the Flex Builder menu and select Project Properties.
| | 04:05 | When you run an application and you try
to communicate with a network resource
| | 04:09 | such as a PHP page you will sometimes encounter security constraints.
| | 04:14 | This depends on the operating system configuration, the
browser configuration and the version of the Flash Player.
| | 04:20 | If you see a security constraint error fix it like this,
go to the Project Properties and click on Flex Compiler
| | 04:27 | and then in the additional compiler arguments right here in the middle
of the screen add the property, -use-network=false this basically means
| | 04:37 | that you're telling the Flash Player that the application
is loading from the hard disk rather than from the network.
| | 04:42 | This is an issue that only comes up during development.
| | 04:45 | Later on when you start running the application by downloading it from
the web server the issue won't happen and it won't get in your way.
| | 04:53 | So that's a look at how to send data to a remote applications server.
| | 04:57 | When you're working with the HTTP service component you create an
object, you populate it with the named properties that you want to send
| | 05:04 | and then you send the object by passing it
into the HTTP service components send method.
| | 05:09 | The data goes off to the server and it's up to the dynamic applications
server page such as the PHP page that was generated and that we're using
| | 05:17 | to actually execute the functionality
and insert the data into the database.
| | 05:22 | In the next video series Flex 3, Beyond the Basics, I'll go
much more deeply into working with dynamic application servers.
| | 05:29 | I'll be talking about working with Cold Fusion, ASP.NET, Java
and a whole bunch more information about working with PHP.
| | 05:37 | Until then this should get you started in the direction of
working with Flex applications and dynamic application servers.
| | Collapse this transcript |
|
|
14. Deploying Flex Applications to the WebExporting a Release Build| 00:00 | In this chapter of the video series, I'm going to describe
how to create a release build of your Flex application.
| | 00:06 | As you develop, test and debug your application, the application
is compiled and built in a folder called the output folder,
| | 00:13 | which has a default name of bin-debug.
| | 00:16 | This version of the application contains everything you would
need to deploy, but the compiled application has a lot of
| | 00:22 | debug information in it, which makes it
significantly larger than it really needs to be.
| | 00:26 | Flex Builder 3 includes a new feature called export
release build, which creates an optimized version of the
| | 00:32 | application and places it in its own special output folder
that contains everything you need for deployment.
| | 00:38 | I'll demonstrate this using the project Chapter 4 Begin and
another version of the application photo album that I've
| | 00:44 | been working on throughout the video series. If you're
following along with the exercises, import the project now
| | 00:51 | and then open the file, photo album.MXML.
| | 00:54 | When you run the application, it opens data from an XML file
| | 00:58 | and then as you've seen in previous videos, it's highly interactive,
allowing you to select photos and see the large detailed
| | 01:06 | versions of those photos.
| | 01:08 | Here's how you create the release build.
| | 01:10 | From the menu, select File,
| | 01:13 | Export,
| | 01:14 | Release Build.
| | 01:17 | Set the project and application that you want to export.
| | 01:19 | Leave the View Source option unchecked for the moment.
I'll show you how that works in a later video.
| | 01:24 | And then set the Export to folder option to the name of the folder
that you want to create and populate with the deployment files.
| | 01:31 | The default name of the release folder is bin-release.
| | 01:35 | click Finish to create a release build.
| | 01:38 | It takes just a few moments, but during this process a number
of things are happening. First of all your application
| | 01:44 | is being compiled.
| | 01:46 | The compiled version of the application, plus the HTML wrapper and
all the accompanying support files are added to the bin release folder.
| | 01:54 | At the same time, all of the non-source code assets, such as
graphic files and XML files, are also copied to the bin
| | 02:01 | release directory.
| | 02:02 | So my Assets directory is copied.
| | 02:05 | There's all the graphics.
| | 02:06 | The Data directory is copied, there is the slideshow.XML file,
and then all the support files, such as the HTML wrapper,
| | 02:15 | the installation SWF file and the JavaScript file that the HTML
wrapper is dependent on, are all copied to the single directory.
| | 02:22 | To deploy this application for use by your users all you need
to do is create a folder on your website and then copy the
| | 02:30 | contents of this bin-release folder up to that folder using an FTP client
or whatever mechanism or tool you use to manage a website assets.
| | 02:39 | That's how you create to release build. It's a very simple
process and all you need to do for deployment is to take the
| | 02:46 | contents of the bin release directory, move them to your website,
| | 02:49 | tell the user of which HTML file to open and
your Flex application is now ready to use.
| | Collapse this transcript |
| Using the View Source feature| 00:00 | In this video I'm going to show you how to create a
release build that includes the view source feature.
| | 00:06 | The view source feature creates an interactive display of
all the source code of a project. The purpose is to be with a
| | 00:13 | show other developers how an application works.
| | 00:16 | It also creates an archive or a zip file containing all of
the source code and assets of your particular application.
| | 00:23 | I usually create this sort of release build
within a directory and a Web server root.
| | 00:27 | The reason is because if you try to view this sort of View
Source file using Internet Explorer and load the file from
| | 00:33 | the hard disk, it contains a lot of what Internet Explorer
calls active content, which because of security restrictions,
| | 00:46 | doesn't always work in that context. So I'm first going
to take you through a couple of preparatory steps before we
| | 00:48 | We're going to create a folder under the Web server root. Then
within Flex Builder we'll create a linked folder that points to that
| | 00:54 | location and then we'll generate a release build in that folder
and we'll be able to test it adequately under the Web server.
| | 01:01 | The first step is to open up Windows Explorer or Finder on
the Mac and navigate to the web root of your Apache server.
| | 01:04 | actually get to creating the release build.
| | 01:09 | If you're working on Windows,
the location is under the C drive, under WAMP,
| | 01:15 | under WWW.
| | 01:17 | Within this folder, create a new subfolder and name it viewsource.
| | 01:22 | Now return back to Flex Builder.
| | 01:25 | Eclipse supports the concept of linked folders.
| | 01:28 | The purpose of a linked folder is to be of a point to a folder
that's outside your project root but still be able to access
| | 01:34 | it easily from within the project. To create a
linked folder, go to the project Chapter14begin,
| | 01:40 | right-click on the project or Control-click
on the Mac and select New Folder.
| | 01:46 | Set the folder name to viewsource
and then click the Advanced button.
| | 01:51 | Click the option Link to a folder in the file system,
| | 01:55 | and then browse and locate the folder that you just created.
| | 01:59 | I'll go to the computer, to the C drive,
| | 02:03 | to WAMP,
| | 02:05 | to WWW,
| | 02:07 | to viewsource and click OK.
| | 02:10 | Viewsource will now be a virtual folder that's linked to the
actual physical folder on disk, and that's where I'm going to
| | 02:17 | create the release build that
includes the view source functionality.
| | 02:21 | click Finish.
| | 02:23 | Now you're ready to create the release build with
view source. From the Flex Builder menu, select File,
| | 02:30 | Export
| | 02:32 | Release Build.
| | 02:33 | As before, select the project Chapter14begin
and the application photo album.MXML
| | 02:40 | and then under the view source section, check Enable view source.
| | 02:44 | If you want to limit which source files you publish in this way,
click the button Choose source files. Notice that everything
| | 02:50 | is selected by default and everything will be placed in
a subfolder called SRCview. Uncheck the viewsource folder
| | 03:04 | because that would be recursive. That is to say you'd be
including the viewsource folder in the viewsource output and
| | 03:05 | and click Finish to publish the release build with view source enabled.
| | 03:09 | It takes a few more moments to build this version of the
release build, because in addition to publishing the actual
| | 03:15 | application, Flex Builder is also building the release build,
and then zipping it up so you can easily give it to another developer.
| | 03:21 | Now when the build process is complete, within the viewsource
links directory, you'll find an SRCview subfolder
| | 03:23 | then click OK
| | 03:29 | and within that a file called index.html.
| | 03:32 | Now to test the release build's the
view source feature, go to a browser.
| | 03:39 | and navigate to this URL. http://localhost/viewsource.
| | 03:49 | This is the folder that I created under the web root.
| | 03:52 | From there, click into the subfolder SRCview.
| | 03:55 | This is the view source feature at work.
| | 03:57 | It shows you all if your code, and it's
completely color-coded and easy to read.
| | 04:03 | Over on the left, there's a source tree that let you navigate around
and see what content is that was used to build this application.
| | 04:10 | You'll see all the data files and you'll see all the actual source code,
whether it's an XML, ActionScript or cascading style sheets.
| | 04:19 | Down at the bottom of this menu, there are two links.
The first one is Download source. When you click that link,
| | 04:26 | the user will be able to download the actual application
source code file, which is been wrapped into an archive or zip file.
| | 04:33 | So I'll cancel that.
| | 04:34 | The other link is labeled Download Flex 3 SDK. This is a
little bit of advertising on Adobe's part. When you click
| | 04:41 | this link, the browser navigates to a page from which you
can download the Flex 3 software developers kit and from
| | 04:54 | So that's the view source feature.
| | 04:54 | there find information about purchasing Flex Builder and
other products from Adobe having to do with the Flex platform.
| | 04:55 | In an actual production application you may not find a use for it.
| | 04:59 | But if your goal in building Flex applications is then to
be able to share with other developers how you built them,
| | 05:05 | this Source view feature makes for great documentation and a great
way of archiving and documenting how the application was built.
| | 05:12 | It's a feature of Flex Builder that you might find valuable.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Hi, David Gassner here again.
| | 00:02 | Thanks for sitting through the video
series Flex 3 Essential Training.
| | 00:05 | In this video series hopefully you learned how to
build and deploy Flex applications over the web.
| | 00:10 | If you're interested in deploying Flex applications on the
desktop watch for the AIR Essential Training video series
| | 00:16 | coming out around the same time.
| | 00:18 | And then watch for the Beyond the Basics titles for both Flex
and AIR that lynda.com will be publishing later this year.
| | 00:24 | Thanks for sitting through the training and happy programming!
| | Collapse this transcript |
|
|
