IntroductionWelcome| 00:04 | Hi! My name is David Gassner.
| | 00:07 | I'd like to welcome you to Flash
Builder 4 and Flex 4 Essential Training.
| | 00:11 | Adobe Systems has been working on this
critical upgrade to the Flex development
| | 00:15 | platform for about two years.
| | 00:17 | There are plenty of new features in
both the Software Developer's Kit and the
| | 00:21 | Integrated Development
Environment, Flash Builder 4.
| | 00:24 | In this series, I'll show you how
to build and deploy Rich Internet
| | 00:27 | Applications, including how to use
the MXML and ActionScript 3 programming
| | 00:32 | languages, and how to use the Flex
implementation of Cascading Style Sheets, and
| | 00:38 | create an MXML-based component skins
with the new Spark component architecture.
| | 00:43 | I'll give you a tour of the newly renamed
Flash Builder 4, formerly known as Flex Builder.
| | 00:49 | You'll see examples of the product's new
code generation and debugging features
| | 00:53 | and how to integrate Flex
applications with application servers, using Flash
| | 00:57 | Builder's new data-centric development tools.
| | 01:00 | This course is designed for anyone
who wants to learn how to develop Rich
| | 01:04 | Internet Applications for Flash
Player 10, but it also contains great
| | 01:08 | information for developers who have some
experience with earlier versions of Flex.
| | 01:12 | I hope you find that the Flex 4 SDK and
Flash Builder 4 give you all the tools
| | 01:17 | you need for building dynamic
applications for the web and the desktop.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Just a quick word about the
Exercise Files I'll be using.
| | 00:04 | If you're a Premium Member of the
lynda.com Online Training Library, or if you're
| | 00:08 | watching this tutorial on a disc, you
have access to the Exercise Files used
| | 00:12 | throughout the title.
| | 00:13 | In the Exercise Files folder, I've
collected some assets for you to use
| | 00:17 | during our tour of building Rich
Internet Applications with Flash Builder 4
| | 00:21 | and the Flex 4 SDK.
| | 00:23 | They include starting and solution
projects in applications, graphic files, and
| | 00:28 | an SQL script to create a sample
MySQL database, and other useful assets.
| | 00:35 | Most of the projects are in the form of
FXP files, a new zip-based format that's
| | 00:41 | supported by Flash Builder 4 that
can be imported into Flash Builder.
| | 00:45 | I've copied the Exercise Files folder to my
Desktop, but you can put it wherever you want.
| | 00:50 | To get started with the video series,
you'll need to follow the instructions in
| | 00:53 | Chapter 1 where I describe
how to install Flash Builder.
| | 00:57 | You can choose to work through the
entire video series from start to finish, or
| | 01:01 | if you'd like to jump in a particular chapter,
you can use the starter files for that chapter.
| | 01:06 | For each chapter, make sure you
follow the instructions for importing the
| | 01:09 | starting project from the Exercise Files folder.
| | 01:12 | The last chapter in this video
series describes how to integrate Flex
| | 01:15 | applications with PHP, one of the most
popular available application servers.
| | 01:20 | That chapter includes instructions for
downloading and installing the required
| | 01:23 | server software for Windows and Mac OS X.
| | 01:27 | This is also where you'll find the SQL
file that you can import into MySQL to
| | 01:31 | create the sample database.
| | 01:34 | In this chapter, you'll need to
follow the steps sequentially.
| | 01:37 | You'll learn how to install PHP, Apache,
and MySQL, configure a Flex project for
| | 01:42 | use with PHP and create a PHP
data connection in Flash Builder.
| | 01:47 | If you have a lynda.com subscription
that doesn't give you access to the
| | 01:50 | Exercise Files, you can follow along
the instructions and demonstrations
| | 01:54 | on screen and use any files you want as you
create your own Rich Internet Applications.
| | Collapse this transcript |
| Understanding the prerequisites| 00:00 | The Flex Software Developers Kit and
Flash Builder 4 are designed for use by
| | 00:04 | application developers, specifically,
developers who work with object-oriented
| | 00:09 | languages, building either small-
scale or enterprise applications.
| | 00:13 | You will be doing some programming in
this course and some knowledge of the core
| | 00:17 | programming language,
ActionScript 3, is recommended.
| | 00:20 | If you haven't worked with
ActionScript 3 before, as long as you worked with
| | 00:24 | some programming language that uses
object-oriented programming principles,
| | 00:28 | you'll feel pretty comfortable very quickly.
| | 00:31 | Examples of languages that are very
similar to ActionScript 3 include Java, C#,
| | 00:35 | C++, and JavaScript.
| | 00:39 | If you'd like to learn a little bit
more about ActionScript 3, take a look at
| | 00:42 | lynda.com video series ActionScript 3.0
in Flex Builder Essential Training.
| | 00:48 | This course is a couple of years old, but the
language hasn't changed very much since then.
| | 00:53 | ActionScript 3 is still the same
language that we used in Flex 2, Flex 3, and
| | 00:57 | now in Flex 4, and is also
used in Flash Professional.
| | 01:01 | Once you've gone through the series,
you might want to learn about how to build
| | 01:04 | desktop applications
using Flex and Flash Builder.
| | 01:08 | If you'd like to learn these skills,
take a look at the video series AIR
| | 01:11 | Essential Training and AIR for Flex
Developers, also available in the lynda.com
| | 01:16 | Online Training Library.
| | Collapse this transcript |
|
|
1. Getting StartedIntroducing the history of Adobe Flex| 00:00 | Before we get started with Flex 4, I
would like to tell you a little bit about
| | 00:03 | the product's history.
| | 00:05 | When Flash MX was released in 2002, it
was branded as the new way to build Rich
| | 00:10 | Internet Applications, known by the acronym RIA.
| | 00:14 | The term was invented at Macromedia
to describe a new class of applications
| | 00:18 | that would offer the benefits of
being connected to the Internet, but would
| | 00:21 | solve many of the nagging issues that
had plagued browser-based applications
| | 00:25 | since the mid 1990s.
| | 00:27 | Using Flash Player to host graphically
rich applications would address issues
| | 00:31 | such as differences between web
browsers and their implementation of Cascading
| | 00:35 | Style Sheets and JavaScript, and
because such applications would be able to
| | 00:40 | leverage Flash Players strengths,
including animation and delivery of audio and
| | 00:45 | video, the applications could be
both functional and visually compelling.
| | 00:51 | The first portion to the new
frontier of RIA is met with mixed success.
| | 00:56 | Many applications built and
delivered with Flash MX were very impressive,
| | 01:00 | but developers were
madly pulling their hair out.
| | 01:03 | Flash application source files
were binary, making it difficult to
| | 01:07 | integrate with source control
systems, and ActionScript 1 wasn't
| | 01:11 | particularly object-oriented.
| | 01:13 | There was no enforcement
of code placement standards.
| | 01:17 | ActionScript 1 and 2's loose data
typing and lack of strong compile-time error
| | 01:22 | checking led to phenomena such as
silent failure, the moment when something
| | 01:27 | that's supposed to happen and doesn't
and no errors or other information are
| | 01:31 | offered as to the reason.
| | 01:32 | Developers who would work with Java, C-
Sharp or other object-oriented languages
| | 01:37 | were accustomed to using
sophisticated code editors.
| | 01:40 | Working in the Flash ActionScript
Editor slowed their productivity.
| | 01:44 | Flex 1 was released in 2004
as a server-based product.
| | 01:49 | It introduced MXML and used ActionScript 2.
| | 01:53 | Developers placed code on the server,
and the application was compiled upon
| | 01:57 | request from a browser.
| | 01:59 | Flex Builder 1, built on top of the
Dreamweaver code base, was a better code
| | 02:03 | editor and was included for those
organizations that purchased a server license.
| | 02:08 | Flex 2 went even further in 2006 with
the introduction of ActionScript 3, a true
| | 02:14 | object-oriented language.
| | 02:16 | The Flex 2 SDK was free and Flex
builder 2 was the first version of the
| | 02:21 | integrated development
environment delivered as an eclipse plug-in.
| | 02:26 | FlexBuilder was now licensed to per developer.
| | 02:29 | Flex 3 came along in 2008 and offered
developers the ability to deliver desktop
| | 02:34 | applications based on Adobe Air, also
known as the Adobe Integrated Runtime.
| | 02:40 | Anything you could do in Flex 3 on the
web, you could now do on the desktop.
| | 02:45 | The Flex 3 SDK added new visual controls,
such as the Advanced Data Grid, that
| | 02:50 | were licensed as part of Flex builder 3
Professional, now known in Flash Builder
| | 02:55 | 4 as the Premium edition.
| | 02:57 | Flex Builder 3 added new debugging
features, such as the Flex Profiler, that
| | 03:02 | improved developer productivity.
| | 03:04 | With Flex 4, Adobe introduces a new
way of implementing Visual Designs.
| | 03:09 | The new Spark Component Set includes a
radically redesigned component skinning
| | 03:13 | architecture that combines the ease of
MXML-based programming with the power of
| | 03:18 | Flash Player's visual rendering capabilities.
| | 03:21 | The Flex 4 SDK is a transitional release.
| | 03:24 | It establishes the way forward for the
Flex Component Architecture, but still
| | 03:29 | depends on some older components that
were used in Flex 3 and haven't yet been
| | 03:33 | replaced with Spark based versions.
| | 03:36 | These are now known as the MX
Components, and they remain vital to Flex
| | 03:40 | Application Development.
| | 03:43 | Flex 4 applications can take advantage
of the new features of Flash Player 10,
| | 03:48 | including the Flash Text Engine and
Text Layout Framework, that enable complex
| | 03:53 | Text Presentation and 3D animations.
| | 03:57 | The software formerly known as Flex
Builder, now named Flash Builder 4, is
| | 04:02 | positioned as the ActionScript Editing product
of choice for both Flex and Flash developers.
| | 04:08 | Flash Builder 4 includes new code
refactoring and formatting features and the
| | 04:13 | Network Monitor debugging tool that
traces network traffic when a Flex
| | 04:17 | application communicates with an
Application Server at run time.
| | 04:22 | You can use Flash Builder to edit
ActionScript code for projects built in
| | 04:26 | Flash Professional CS5.
| | 04:29 | Flex has changed a lot over the years,
but it remains a powerful platform for
| | 04:33 | creating and deploying cross-operating
system applications, delivered through
| | 04:38 | the web or to the desktop.
| | Collapse this transcript |
| Installing Flash Builder on Windows| 00:00 | The process of installing Flash
Builder on Windows is fairly simple.
| | 00:04 | You can choose between two architectures,
the standalone and the plug-in version.
| | 00:09 | If you're already an Eclipse Developer
and you have at least Eclipse 3.4, you
| | 00:14 | can choose the plug-in version.
| | 00:15 | Otherwise, you should use
the standalone installer.
| | 00:18 | I am going to show you to use
the standalone installer here.
| | 00:22 | I've already started up the installer
application. The first screen is the Adobe
| | 00:26 | Software License Agreement. Read
through it, and then if you accept its terms,
| | 00:31 | click to the Accept button.
| | 00:32 | On this screen, you are asked for a
serial number or to select a trial.
| | 00:37 | If you don't have a serial number,
choose Install this product as a trial.
| | 00:42 | Then either way, with or without a
serial number, you will see a dropdown list
| | 00:46 | that allows to select a
language that you want to install.
| | 00:49 | I am going to choose English
(North America) and click Next.
| | 00:54 | This is the Install Options screen.
| | 00:56 | The only available options are whether
you want to install the Flash Player 10
| | 01:01 | ActiveX control or Plug-in control.
| | 01:04 | Notice that they are both about the
same size, a little bit over 5 MB.
| | 01:08 | I've recommend that you go ahead and
install these, even if you already have
| | 01:11 | Flash Player installed.
| | 01:13 | That will ensure that you have the
correct version of Flash Player, Flash Player
| | 01:17 | 10 Debug version, that you'll need
for Flex Application Development.
| | 01:22 | You can also modify the location
of the installation, if you like.
| | 01:26 | On Windows, the default installation is
under C:\Program Files\Adobe, and then
| | 01:32 | there will be a new folder under
there named Adobe Flash Builder 4.
| | 01:37 | Click the Install button, and
your installation will start.
| | 01:41 | Along the way, if you have any browser
windows open, such as Internet Explorer,
| | 01:46 | Firefox or Google Chrome, the Installer
Application will ask you to close them
| | 01:59 | before it continues with the process.
| | 02:02 | This is important, because it allows
the Installer to complete the installation
| | 02:05 | of Adobe Flash Player
without any file conflicts.
| | 02:10 | Once the installation is
complete, you'll have three options:
| | 02:13 | You can click the Done button -
and that will close the Installer
| | 02:16 | Application completely,
| | 02:18 | you can click on the View Video
Tutorials link to take a look at some online
| | 02:21 | documentation, or you can immediately start
Adobe Flash Builder by clicking this button.
| | 02:27 | I am not going to start it from here
because I want to show you how to start
| | 02:30 | Flash Builder from the Windows Start menu.
| | 02:32 | I'll close the Installer.
| | 02:36 | If you are working on Windows Vista or
Windows 7, you can simply type in 'flash
| | 02:41 | builder,' and the link to
the application will appear.
| | 02:45 | If you are working on Windows XP, go
to the Start menu and go to All Programs
| | 02:50 | and from there, locate Adobe Flash
Builder 4 and open the application.
| | 02:56 | The first time you open the application,
if you didn't provide a serial number
| | 03:00 | during the installation, you'll be
prompted for the serial number again, or to
| | 03:04 | accept using the application as a trial.
| | 03:07 | You'll have 60 days to work with Flash
Builder 4 from the time you first start it up.
| | 03:13 | Just click the Start button, and then you'll
go to this screen asking you for an Adobe ID.
| | 03:19 | An Adobe ID is your e-mail address.
| | 03:22 | If you don't have one yet, you can create
one by clicking the Create An Adobe ID button.
| | 03:28 | An Adobe ID is free.
| | 03:30 | It just gives you a way for Adobe
systems to keep in touch with you.
| | 03:33 | If you don't want to enter your Adobe
ID at this point or create one, you can
| | 03:37 | click SKIP THIS STEP, and that will
take you directly to Flash Builder 4.
| | 03:44 | When Flash Builder opens, it shows the
welcome screen in the central area, which
| | 03:49 | includes links to various
online documentation resources.
| | 03:53 | If you've gotten this far, you've
succeeded in installing Flash Builder 4
| | 03:57 | on Windows.
| | Collapse this transcript |
| Installing Flash Builder on Mac OS X| 00:00 | If you typically do your software
development on Mac OS X, and if you don't
| | 00:04 | already use Eclipse for java or other
software development, you will want to
| | 00:09 | install the standalone
configuration of Flash Builder for Mac.
| | 00:12 | This configuration includes the
Flash Builder plug-in, a complete copy
| | 00:16 | of Eclipse 3.5.1 and everything
else you need to do basic Flex
| | 00:21 | application development.
| | 00:22 | When you download the installer from the
Adobe website, it comes to you as a DMG File.
| | 00:27 | When you double-click that file, it
mounts as a virtual disk, and within that
| | 00:32 | disk, you will find an install application.
| | 00:35 | When you run the install application,
it takes a few moments to extract itself
| | 00:39 | and then opens up to this
license agreement screen.
| | 00:43 | Read through the license agreement, and then
if you agree with its terms, click Accept.
| | 00:47 | On this screen, you are
asked for a serial number.
| | 00:50 | If you haven't purchased Flash Builder
yet, you can use the product in trial
| | 00:53 | or evaluation mode.
| | 00:56 | Click the radio button labeled
Install this product as a trial.
| | 00:59 | Then, whether you install a serial number
or not, you will be asked for a language.
| | 01:05 | You can install Flash Builder 4
using a number of different languages.
| | 01:08 | I am going to choose English (North
America) and then click Next. That's it!
| | 01:15 | There are not many options available.
| | 01:17 | When you install Flash builder 4 on Mac,
it will install, by default, into the
| | 01:22 | /Applications folder.
| | 01:23 | Under that folder, you will find a
folder called Adobe Flash Builder 4 and
| | 01:27 | within that, the application.
| | 01:29 | Click the Install button to
complete the installation process.
| | 01:33 | You might be prompted for your
Administrative Password, because there are some
| | 01:37 | changes that need to be made to
your system to install Flash Builder 4.
| | 01:42 | Enter your Password and then click OK or
press Return, and the installation will continue.
| | 01:47 | The amount of time it takes for your
installation to complete depends on your
| | 01:51 | computer's resources and speed.
| | 01:53 | Once you have completed the
application, you will be able to start up Flash
| | 01:56 | Builder by navigating to the Mac hard
disk, from there, to the Applications
| | 02:01 | folder and from there, to the Adobe
Flash Builder 4 folder, and then just
| | 02:05 | double-click the application to start it up.
| | Collapse this transcript |
| Installing Flash Builder as an Eclipse plug-in| 00:00 | If you already use Eclipse in your
application development work, you can
| | 00:04 | choose to install Flash Builder as a plug-in
on top of an existing Eclipse installation.
| | 00:10 | There are some
restrictions you should know about.
| | 00:12 | First, you must be using at least
Eclipse 3.4, and if you are working on Mac
| | 00:17 | OS X, you must use the older Carbon
Architecture, rather than the newer Cocoa Architecture.
| | 00:23 | Flash Builder 4 is not
compatible with the newer version.
| | 00:26 | If you want to download
a recent copy of Eclipse,
| | 00:29 | go to the website www.Eclipse.org/
dowloads, and on this screen, you will be able
| | 00:35 | to choose from many available
distributions of the Eclipse workbench.
| | 00:40 | I have installed the Eclipse IDE
for Java Developers on my system.
| | 00:44 | I like this particular distribution
because it's among the smallest of the
| | 00:47 | distributions, but it includes
everything I need for Flex development.
| | 00:52 | If you are working with PHP, you might
try this one, Eclipse for PHP Developers.
| | 00:57 | And you can also go with the classic
version, Eclipse Classic 3.5.1. Download the
| | 01:04 | version of Eclipse that you want and install it.
| | 01:06 | You typically install Eclipse just by
extracting the contents of an archive file.
| | 01:11 | I am working on Windows, and I have
placed my copy of Eclipse in the Program
| | 01:15 | Files/Eclipse folder.
| | 01:17 | Here is my application, Eclipse.EXE.
| | 01:20 | I am not going to start it up yet.
| | 01:22 | I will wait until after I have
installed Flash Builder 4.
| | 01:27 | Once you know where your Eclipse
installation is, start up the Flash
| | 01:31 | Builder Plug-in installer.
| | 01:33 | This is the version for Windows.
| | 01:34 | I will click OK on the initial
screen, and then I will see this text
| | 01:40 | information telling you that I am about to
install the primary Flash Builder 4 Plug-in files.
| | 01:45 | I will click Next again.
| | 01:47 | Then I read through the license agreement,
and if I agree with its terms, I will
| | 01:51 | click the appropriate
radio button and click Next.
| | 01:54 | On this screen, you are asked where
you want to install the Flash Builder
| | 01:57 | 4 executable files.
| | 02:00 | This is not the location of
your Eclipse installation.
| | 02:03 | You will be asked for that later in the process.
| | 02:06 | I recommend that you accept the
default setting and click Next.
| | 02:10 | Now, you are asked whether you want
to include a bundled copy of Eclipse.
| | 02:14 | If you already have Eclipse installed,
select Plug into another copy of Eclipse,
| | 02:19 | and then select your Eclipse folder.
| | 02:21 | My copy is under C:\Program Files\eclipse.
| | 02:27 | Click next, and then on the final
screen, review the installation information
| | 02:33 | and then click Install.
| | 02:34 | It will take a few minutes
to complete the installation.
| | 02:39 | Along the way, if you have any web
browser windows open, you might be
| | 02:43 | prompted to close them to allow the installer
to install Flash Player 10, the Debug version.
| | 02:50 | Once the installation is complete,
click done to close the installer and
| | 02:55 | then start up Eclipse.
| | 02:56 | I will go to my Program Files folder,
to the Eclipse folder, and then I will
| | 03:08 | double-click on eclipse.exe
and start the application.
| | 03:15 | If this is the first time you have
started up this copy of Eclipse, you will be
| | 03:19 | prompted for a workspace.
| | 03:21 | I will describe workspaces in other
videos of this series, but essentially, a
| | 03:25 | workspace is a folder on disk
that keeps track of your projects.
| | 03:30 | Your projects can be in the
workspace folder, but don't have to be.
| | 03:34 | If you see the Workspace launcher
dialog, just click OK and continue.
| | 03:40 | The amount of time it takes to
start up Eclipse after doing a Plug-in
| | 03:43 | installation depends on your
computer's resources and memory.
| | 03:47 | Once Eclipse has started, go to the
menu and select Window > Open Perspective
| | 03:53 | and then select other.
| | 03:56 | You should now see three perspectives
that are associated with Flash Player.
| | 04:00 | They are named Flash,
Flash Debug and Flash Profile.
| | 04:05 | Click on Flash and click OK, and that
will switch you to the Flash Builder
| | 04:09 | perspective in Eclipse.
| | 04:12 | From this point forward, you should be
able to work with the Flash Builder in
| | 04:15 | exactly the same way as you
do with the standalone version.
| | 04:19 | You might find that there are some
differences in Keyboard shortcuts or menu sequences,
| | 04:24 | but for the most part, everything that
you see in the standalone version is also
| | 04:27 | available in the Plug-in
version of the Flash Builder 4.
| | Collapse this transcript |
| Creating the Hello World application| 00:00 | Whenever you learn a new programming
language or development platform, it's
| | 00:04 | traditional to create an
Application that says 'Hello World'
| | 00:08 | that outputs a simple string to the screen.
| | 00:11 | I'll show you how to do this in the
context of creating a brand new Flex Project
| | 00:15 | and Flex Application, and along the way,
I'll show you how Flash Builder 4 helps
| | 00:19 | you get the job done.
| | 00:21 | Open Flash Builder 4.
| | 00:22 | You'll see the Start Page,
shown in the central area.
| | 00:26 | The Start Page includes links to
various documentation resources, including
| | 00:30 | videos and online documentation.
| | 00:33 | Of special note is a link
labeled Moving from Flex 3 to Flex 4.
| | 00:37 | If you've been working with Flex 3, I encourage
you to explore this area of the documentation.
| | 00:42 | Every Flex Application is stored
in a Flex Project in Flash Builder.
| | 00:47 | So, to get started, create a brand new
Flex Project. Go to the menu and select
| | 00:52 | File > New > Flex Project.
| | 00:55 | In the New Flex Project dialog box,
type in the name of your Project.
| | 01:00 | I'll name my Project HelloWorld.
| | 01:02 | Your Project, by default, is placed
in an area known as the workspace.
| | 01:07 | A workspace is a folder on your
hard disk which contains configuration
| | 01:10 | information for your copy of Flash Builder.
| | 01:13 | By default, a New Project is placed
under the workspace folder, and you'll see
| | 01:17 | that on Windows 7, the workspace folder,
by default, is set to C:\Users, then
| | 01:23 | the username, which on my computer
is Administrator, and then Adobe Flash Builder 4
| | 01:29 | You'll see a similar path on Mac OS X
and a slightly different path if you're
| | 01:33 | working on Windows XP. Accept the
default location of the Project and go to
| | 01:38 | the Application type.
| | 01:40 | You set the Application type to
indicate whether the Application will be
| | 01:43 | deployed through the Web, running in
Adobe Flash Player, or to the Desktop as a
| | 01:48 | native application running on Adobe AIR.
| | 01:50 | I'll accept the default
setting of a Web Application.
| | 01:54 | The next setting has been added
in Flash Builder 4 to this dialog.
| | 01:58 | It allows you to choose the particular
version of the Flex Software Developers
| | 02:02 | Kit that you want to use
to build this Application.
| | 02:05 | The default is the new Flex 4 SDK.
| | 02:08 | If you like, you can still use Flash
Builder 4 to build Flex 3 Applications.
| | 02:13 | You would select Use a specific SDK and
then choose the included Flex 3.5 SDK,
| | 02:20 | which requires Flash Player 9 or higher.
| | 02:22 | We're going to be building Flex 4
Applications in this video series, so I'll
| | 02:27 | use the default SDK.
| | 02:30 | The next option allows you to
select an Application server.
| | 02:33 | Flash Builder 4 has integration
capabilities with four application servers:
| | 02:38 | ASP.NET, ColdFusion, J2EE
Applications, such as LiveCycle Data Services
| | 02:43 | and BlazeDS, and PHP.
| | 02:46 | In Flash Builder 4, you can add server
configuration information to a project
| | 02:51 | after the project has been created.
| | 02:53 | That's a new feature of the product.
| | 02:55 | But for this HelloWorld Application,
we don't need any application server
| | 02:59 | functionality, so I'll leave
Application server type set to None or Other, and
| | 03:05 | then I'll click Next.
| | 03:06 | On this screen, you're asked
for the name of the Output folder.
| | 03:10 | The Output folder is where the
Debug version of your application is built
| | 03:14 | during the compilation process.
| | 03:16 | The default is a folder named bin-
debug, under the Project's root folder.
| | 03:21 | You can change this if you like, but
it's important to note that this folder
| | 03:25 | will contain only the
Debug version of your Application.
| | 03:28 | A version for the Application SWF file
is significantly larger than the version
| | 03:32 | you'll deploy, because it contains
debug symbols and lots of Meta information.
| | 03:38 | I'll accept the default setting
for the Output folder and click Next.
| | 03:42 | On this screen, I'm asked
what Component set I want to use.
| | 03:46 | I can either choose the default,
MX + Spark, which means that I'm using both the
| | 03:51 | older Components from Flex 3, now
known as the MX Components, and a set of
| | 03:56 | Components that are new to Flex 4,
known as the Spark Components.
| | 04:00 | If you're building a Flex 3 Application,
select MX only, and that will make your
| | 04:05 | Application SWF file significantly smaller.
| | 04:09 | The Framework linkage option allows you
to define how your Application will be
| | 04:13 | built, either as a single monolithic
SWF file or as a smaller SWF file with
| | 04:19 | linked SWF files known as
runtime shared libraries.
| | 04:23 | I'll talk more about that
option in another video.
| | 04:26 | The Build path library section asks you
where existing code is that you want to
| | 04:31 | incorporate into your Application.
| | 04:34 | By default, there's a section called Flex 4.0,
which refers to files in this SWC format.
| | 04:41 | These are precompiled Component libraries,
which collectively contain the entire Flex SDK.
| | 04:47 | The Build path libraries also
refer to a folder named libs.
| | 04:51 | This is a folder where you can drop
your own precompiled Component libraries, or
| | 04:55 | SWC files, and any code within those
libraries will automatically be available
| | 05:00 | to your Flex Project.
| | 05:01 | There are some other options below
that configure the compilation process.
| | 05:05 | The Main source folder is the name of
the folder under the Project root, where
| | 05:09 | you'll create your Main Application files.
| | 05:12 | And the Main Application file, by
default, is set to the same name as the
| | 05:16 | Project itself, but with the .mxml extension.
| | 05:20 | You could name this file anything you
want, but there are certain conventions
| | 05:23 | that you must follow and
others that you should follow.
| | 05:26 | The name of the Application will become
the name of an ActionScript class in the
| | 05:31 | background, and so you want to
use class naming conventions.
| | 05:34 | You can use letters, numbers and
underscores, but you must start with
| | 05:38 | an alphabetical letter and by convention,
the initial character should be uppercase.
| | 05:44 | The Output folder URL option indicates
where the browser will navigate to, when
| | 05:48 | you test the Application from Flash Builder.
| | 05:51 | When you leave this value blank in
an Application that does not use an
| | 05:55 | Application server, it will result in
loading the Application from the local
| | 05:59 | hard disk at run time.
| | 06:00 | That'll be fine for most testing
purposes, but if you want to incorporate a
| | 06:05 | simple Web server, you can place the
Output folder underneath the Web server's
| | 06:09 | document root and then put
in an equivalent URL here.
| | 06:14 | I'll click Finish to create the
New Project and the New Application.
| | 06:20 | Once the Project and Application have
been built, the New Application opens in
| | 06:24 | the Editor region in Flash Builder.
| | 06:26 | On my system, the
Application opened in Source mode.
| | 06:30 | That means that I can see the
actual source code of the Application.
| | 06:34 | I'll click the Design button, and that
will switch the Application over to a
| | 06:38 | WYSIWYG, or what you see is what you
get appearance, and this will allow me
| | 06:43 | to do a little bit of visual design by
dragging and dropping objects into the Application.
| | 06:50 | Now, in the lower left corner,
there's a view named Components.
| | 06:54 | The name is hidden a little bit because
of the size of my screen, but this view
| | 06:58 | allows you to select and drag
Components into your Application.
| | 07:04 | I'll scroll down a bit and locate the
Label Component, and I'll drag it into
| | 07:08 | place in the Application.
| | 07:10 | With the Component still selected,
I'll go to the Properties view in
| | 07:14 | the lower-right corner.
| | 07:15 | I'll set the Text Property of
the Label Component to Hello World.
| | 07:20 | I'll then click into the font size
control, which is under the Text section, and
| | 07:25 | set it to a size of 18.
| | 07:27 | And then I'll click this icon, which
will cause that control to be bold.
| | 07:32 | Now I'll go back to Source mode and
show you the result, a Label control placed
| | 07:37 | in a specific position on the screen,
because of these two properties, x and y.
| | 07:43 | The Text Property has been set to a
value of Hello World, a style named font
| | 07:48 | size has been set to a value of 18 -
which means 18 pixels - and the fontWeight
| | 07:54 | has been set to a value of bold.
| | 07:55 | I'm going to change the values of the x
and y Properties manually to 100 pixels
| | 08:01 | each, and that means that the Label
will be placed 100 pixels from the left and
| | 08:07 | 100 pixels from the top.
| | 08:08 | I'll then save my file by pressing
Ctrl+S on Windows, or Cmd+S on Mac.
| | 08:15 | Then I'll run my first Application in
the browser by going to the menu and
| | 08:19 | choosing Run and then
scrolling down, Hello World.
| | 08:25 | After a few moments, the
Application opens in the browser and shows the
| | 08:29 | Hello World message.
| | 08:30 | Now this may look like an HTML page -
and in fact, if you look at the URL in the
| | 08:35 | browser, you'll see that it's loaded in
HTML file, but the HTML file is simply a
| | 08:41 | wrapper for Flash Player, and it's
Flash Player that's rendering this text.
| | 08:46 | I can tell that by right-clicking
anywhere on the surface of the Application,
| | 08:51 | and I'll see the Flash Player 10 About screen.
| | 08:55 | So, that's your Hello World Application.
| | 08:58 | In another video, I'll describe the
anatomy of this Application a little
| | 09:01 | more carefully, describing not just
the code in the Application, but also
| | 09:06 | the structure and names of the files
that are compiled and generated by the
| | 09:10 | Flex SDK.
| | Collapse this transcript |
| Understanding the anatomy of web applications| 00:00 | Flex Applications have a unique architecture.
| | 00:03 | They incorporate two programming languages:
| | 00:06 | MXML and ActionScript 3.0, and are compiled
as a combination of files that work together.
| | 00:12 | I'm going to describe the basic anatomy
of a Flex Application, both the simplest
| | 00:17 | aspect of its code and also
its compilation architecture.
| | 00:20 | I will start with the code.
| | 00:22 | First, I am going to expand
the font size in Flash Builder.
| | 00:27 | You do this by going to the menu and
choosing Window > Preferences, and then
| | 00:32 | under the General category, open
Appearance and choose Colors and Fonts.
| | 00:38 | From there, go to the list of categories
on the right and open the Basic category.
| | 00:44 | Scroll down to the bottom of
the list and choose Text Font.
| | 00:49 | Click Edit and then select the font you want.
| | 00:52 | I will choose 16 pixels and click OK
and then click OK again, and now the font
| | 00:59 | will be displayed in a nice, large size.
| | 01:02 | Flex Applications are known in
Flash Builder as MXML Applications.
| | 01:06 | Every main application
file is built as an MXML file.
| | 01:10 | MXML is a pure XML-based language.
| | 01:14 | The root element of every web-based
Flex Application is named Application, and
| | 01:20 | it has a namespace prefix
of 'S,' standing for Spark.
| | 01:24 | Within a new Flex Application, you'll
also see namespace prefixes declared for
| | 01:28 | FX, which is used for many compiler
tags, and also tags that describe certain
| | 01:33 | ActionScript classs, and one named
MX, which is used to describe older
| | 01:38 | components that are now
known as the MX components.
| | 01:42 | Wherever you see a tag with the 'S'
prefix, that's an instance of a component
| | 01:46 | that's a part of Flex 4.
| | 01:47 | For example, this is the new
Spark version of the Label component.
| | 01:53 | Each tag describes an
instance of an ActionScript class.
| | 01:56 | So, this is an instance of the Label
class, and it has certain styles and
| | 02:01 | properties that are being set in the MXML Code.
| | 02:04 | The X and Y properties determine
the object's position on the screen.
| | 02:09 | The text property describes the value
that it displays and the fontSize and
| | 02:14 | fontWeight settings describe its appearance.
| | 02:16 | I will be describing a lot more
about the code architecture of MXML files
| | 02:22 | throughout this video series.
| | 02:24 | Now, I am going to show you the
anatomy of the compiled files.
| | 02:28 | Take a look in the bin-debug, or
output folder, in your project, in the
| | 02:32 | Package Explorer view.
| | 02:35 | When you open the bin-debug folder,
you'll see that there's an application file
| | 02:39 | named HelloWorld.swf.
| | 02:42 | That's your compiled application, and
using your Flex Project's default settings,
| | 02:47 | you will see a whole bunch of other SWF files.
| | 02:50 | These are known as Runtime Shared
Libraries, or RSLs, and collectively, they
| | 02:56 | include the entire Flex SDK in a compiled form.
| | 03:01 | When you deploy your application, you
need to deploy both your application's SWF
| | 03:05 | file and all of these RSL files.
| | 03:09 | There's also a file name HelloWorld.html.
| | 03:12 | This is the HTML wrapper file that
loads Flash Player, which in turn loads the
| | 03:17 | SWF file, and then there's a folder
named history, which contains three files:
| | 03:22 | history.css, .js and historyFrame.html.
| | 03:26 | These files are used to
manage navigation at run time.
| | 03:30 | You don't have to use them - and many
applications don't, but if you want to
| | 03:34 | use features known as Deep Linking or
History Management, these files are also required.
| | 03:41 | And then, finally, there is
a file named swfobject.js.
| | 03:45 | This is a JavaScript library that's
included in Flash Builder 4, that's used by
| | 03:49 | the HTML Wrapper file to deploy Flash Player.
| | 03:52 | A SWF object is actually an open
source free Library, and you can learn more
| | 03:57 | about it at its home website,
| | 04:00 | by going to Google and typing 'SWF
Object' and then navigating to the Project
| | 04:07 | Page. You'll find all sorts of
documentation about the SWF Object
| | 04:12 | JavaScript file here.
| | 04:16 | Now some developers prefer to deploy
their SWF files as one large monolithic file.
| | 04:21 | That means that the SWF file includes
both the specific application code and
| | 04:25 | also the entire Flex SDK.
| | 04:27 | I will go to HelloWorld.swf, and I will
right-click on it and select Properties,
| | 04:33 | and I'll show you its initial
size is 71,000 bytes, approximately.
| | 04:38 | So, that's the size of the
file without the entire Flex SDK.
| | 04:41 | I will cancel out of that, and then I
will go to top of the Package Explorer
| | 04:47 | to the Project Name.
| | 04:49 | And I will right-click on the
Project and choose Properties.
| | 04:53 | Then I will go to the
category labeled Flex Build Path.
| | 04:59 | I am going to change the value
of the Framework Linkage option.
| | 05:04 | By default, the SDK files are
compiled into runtime-shared libraries.
| | 05:08 | I'm going to change that to Merged into code.
| | 05:11 | I will click OK, and then
I'm going to clean the project.
| | 05:17 | When you clean the project, it clears
out all of the files in the output folder
| | 05:21 | and re-compiles the project from Scratch.
| | 05:24 | I will select Project > Clean and then click OK.
| | 05:29 | It takes just a few moments to
rebuild this very simple project.
| | 05:32 | Then I will go to HelloWorld.swf.
| | 05:35 | I will right-click on it, once again,
choose properties and show that the file
| | 05:40 | is much larger, 780,000 bytes, approximately.
| | 05:45 | So, this SWF file includes both the
specific application code and also
| | 05:49 | the entire Flex SDK.
| | 05:51 | I will cancel that.
| | 05:56 | Go back to the Project Properties.
| | 05:58 | Once again, go to the Flex Build Path
and change back to the SDK default of
| | 06:03 | using runtime shared
libraries and click OK again.
| | 06:08 | That automatically rebuilds the project,
and you'll see the RSLs, or Runtime
| | 06:12 | Shared Libraries, reappear.
| | 06:14 | So, that's a little bit about the basic
anatomy of a Flex Application, both its
| | 06:18 | basic code architecture and also how the
files are created in the output folder.
| | 06:24 | Now once again, these are not the
files that you deploy to your Web Server.
| | 06:28 | This is the Debug version of the application.
| | 06:31 | I'll show you how to create a
deployable version known as the Release Build in
| | 06:35 | a separate video.
| | Collapse this transcript |
| Creating a release build| 00:00 | The compiled version of a Flex
Application that's created in a project's output
| | 00:04 | folder is the Debug version, and it
contains a lot of debug information that
| | 00:09 | makes the application
significantly larger than it needs to be.
| | 00:12 | When you get ready to deploy your
application, you should create what Flash
| | 00:16 | Builder calls a Release Build.
| | 00:18 | A Release Build folder will contain
exactly the same set of files as the output
| | 00:22 | folder, but the Application's SWF
file will be significantly smaller.
| | 00:27 | I will show you how to create a Release
Build using the HelloWorld project that
| | 00:31 | I created in another video.
| | 00:32 | I will go to the menu and
select File > Export > Release Build.
| | 00:40 | You can also get to this feature by
going to Project > Export Release Build.
| | 00:45 | Either way, you will go to the
Export Release Build dialog box.
| | 00:50 | In this dialog box, you select
a Project and an Application.
| | 00:53 | You can only export one
application at a time in a Release Build.
| | 00:57 | I will talk about the View
Source option a little bit later.
| | 01:01 | You indicate the name of the folder
in which you want to create the Release
| | 01:04 | Build and click Finish. That's it.
| | 01:08 | The Release Build is created in a
folder underneath your Project Root.
| | 01:12 | So, let's take a look at the
relative size of the Application's SWF files.
| | 01:17 | Here is the SWF file for the
Debug version of the application.
| | 01:20 | I will right-click on it and
choose Properties and show you that it's
| | 01:24 | about 71,000 bytes.
| | 01:26 | Then I'll go to the Release Build version.
| | 01:30 | I will locate the same file.
| | 01:32 | I will right-click on it and choose
Properties, and this version is a little
| | 01:38 | more than half the size of the other one.
| | 01:40 | Now this is a trivial application that
just says HelloWorld, but you can imagine
| | 01:45 | that as your application gets more
complex, the relative size of the Release
| | 01:49 | Build versus the Debug build
will become more and more important.
| | 01:54 | You will also see that the RSL files
that are included with the Release Build
| | 01:57 | are in a different format called SWZ.
| | 02:00 | This is an archived, or compressed,
version of the SWF format, which is
| | 02:05 | significantly smaller than the debug version.
| | 02:08 | Taken collectively, the application is
going to be significantly smaller, and in
| | 02:13 | a web environment that's absolutely
critical, because it means that the
| | 02:16 | application will download more quickly
and will start up on the user's system
| | 02:20 | for the first time much more quickly.
| | 02:23 | These are the files that
you deploy to your Web server.
| | 02:26 | You copy all of the files into Bin
Release folder up to your Web server in
| | 02:30 | whatever folder you like and then to
help your users start the application,
| | 02:35 | provide them with a link to the HTML file.
| | 02:38 | Don't send them directly to the SWF file.
| | 02:40 | That doesn't give you control over the
size of the application in the browser.
| | 02:44 | Instead, you want to load this one.
| | 02:46 | Now, if you want to test the release
build in a browser, try this. Right-click
| | 02:51 | on the HTML file, or Ctrl+Click on Mac,
and then select Open With > Web browser,
| | 02:58 | and that will open the application
directly within Flash Builder, within a
| | 03:03 | Nested Web browser.
| | 03:06 | Now, I will show you one other aspect
of exporting a Release Build - using the
| | 03:10 | View Source feature.
| | 03:11 | I will, once again, go to the menu, and I
will select Project > Export Release Build.
| | 03:17 | And I will change the name of the
folder to bin-release-withcode, and I will
| | 03:23 | select the option Enable view source.
| | 03:26 | When you select this option, you can
then select source files that you want the
| | 03:30 | user to be able to see when
they choose a View Source option.
| | 03:34 | By default, all of the files
within your project will be included.
| | 03:38 | I'm just going to include the HelloWorld.mxml
file in my Published Source field,
| | 03:44 | and I will click OK.
| | 03:46 | And then I will click Finish, and
then I will scroll down to my new Release
| | 03:53 | Version of the application.
| | 03:55 | A new source view is included with the
deployable application, which includes a
| | 04:00 | whole set of files that I can
look at. And within the source folder,
| | 04:04 | I will find an HTML version of the
XML file, which has color coding.
| | 04:10 | Now watch what happens when I run this
version of the application in a browser.
| | 04:14 | I will go to the generated HTML Wrapper.
| | 04:17 | I will right-click on it and select
Open With > Web Browser, and then with the
| | 04:24 | application open, I will right-click on
it, and the Flash Player menu now shows
| | 04:29 | an option labeled View Source.
| | 04:30 | I will click that option, and I see a
new Web Browser window, which shows the
| | 04:36 | code in the application file.
| | 04:39 | I can then go to the source folder,
over here in this tree, and if there's more
| | 04:44 | than one source code file available, I
can select the one I want to look at.
| | 04:48 | Finally, all the source code that I
included with the Release Build will
| | 04:52 | be available in this zip file, and a link
to download the Flex SDK is also included.
| | 04:58 | You can use this View Source feature
to share code and demonstrations with
| | 05:02 | other Flex developers.
| | 05:04 | It's a great teaching tool and a great
way to show new techniques that you've
| | 05:08 | learned about developing applications in Flex 4.
| | Collapse this transcript |
|
|
2. Using Flash Builder 4Choosing a workspace| 00:00 | Flash builder projects are stored in Workspaces.
| | 00:04 | A Workspace is a folder on your hard
disk that contains a table of contents
| | 00:08 | referencing your projects and also
a lot of configuration information.
| | 00:12 | The concept of a Workspace is a part
of Eclipse, the underlying development
| | 00:17 | environment that Flash
Builder is designed to work on.
| | 00:20 | You can switch Workspaces easily by
creating a new folder on your hard disk.
| | 00:25 | I typically use Workspaces
to manage groups of projects.
| | 00:28 | For example, I have one Workspace to
manage all of the projects for this video series.
| | 00:32 | I'll show you how to switch Workspaces.
| | 00:36 | From the menu, go to File > Switch Workspace.
| | 00:40 | If you've previously used other
Workspaces, you might see them listed on
| | 00:44 | the menu that shows up.
| | 00:46 | Otherwise, you can click Other, and
then you can choose any existing folder on
| | 00:51 | your hard disk, or you can create a new one.
| | 00:53 | I'll choose the folder C:\flex4esst.
| | 00:59 | Now this is a folder that already
exists on my hard disk, but if it didn't
| | 01:03 | exist, it would be created for me.
| | 01:05 | You can also choose Options from
this section, labeled Copy Settings.
| | 01:10 | In this section, there are Options to
copy the Workbench Layout and what are
| | 01:14 | called Working Sets from the
current Workspace to the new Workspace.
| | 01:18 | I'll leave those on unselected and click OK.
| | 01:22 | When you click OK, you should see that
Flash Builder closes and then reopens,
| | 01:28 | and when it reopens, it should show
the default appearance, including the
| | 01:32 | Flash Builder start page.
| | 01:34 | Now you can reference a single
project for more than one Workspace.
| | 01:38 | I created my initial project named
Hello World in a folder under my home
| | 01:42 | directory called Adobe Flash Builder, but I
can reference it in this Workspace as well.
| | 01:46 | I'll go to the menu and
choose File > Import Flex Project.
| | 01:51 | Then I'll choose Project folder,
I'll click Browse, I'll navigate to my
| | 01:58 | Administrator folder and from there,
to Adobe Flash Builder 4 - that's the
| | 02:03 | folder in which I'd created my original project.
| | 02:06 | Then I'll choose the project, Hello
World, I'll click OK and click Finish.
| | 02:12 | I can then open the project
and open its application files.
| | 02:16 | If I switch back to the original
Workspace, the project will still be referenced
| | 02:19 | there, but it's the same project.
| | 02:22 | Any changes I make to the code or
configuration of the project will look exactly the same.
| | 02:27 | Finally, it's worth mentioning that a
lot of the configurations in Eclipse, such
| | 02:31 | as your Font display or the arrangement
of the views, or windows on the screen,
| | 02:36 | is a part of the Workspace.
| | 02:38 | So when you switch from one
Workspace to another, you'll lose those
| | 02:41 | configurations and need to rebuild them.
| | 02:44 | For the rest of this video series,
I'll be building all the projects in the
| | 02:47 | flex4esst folder, or Workspace, and so
I'll leave this as my selected Workspace.
| | 02:54 | But if at any time I need to choose a
new Workspace, I'll go the menu and choose
| | 02:57 | File > Switch Workspace again.
| | Collapse this transcript |
| Importing and exporting projects as FXP files| 00:00 | Many of the exercise files in this video
series are provided in the form of FXP files.
| | 00:07 | An FXP file is a ZIP archive file
that contains a project, its source code
| | 00:13 | files, its configurations
and other associated assets.
| | 00:17 | The FXP format is new to Flash Builder 4,
and it's also used by Flash Catalyst,
| | 00:23 | Adobe's new application that enables
graphic designers to easily prototype
| | 00:28 | interactive Flex applications.
| | 00:30 | I'm going show you how to export a
Flex project as an FXP file in Flash
| | 00:35 | Builder 4, then I'll show you the file's
contents and finally, I'll show how to re-import it.
| | 00:41 | I'll be working with a project named HelloWorld.
| | 00:44 | The project has one application, Hello
World.mxml, in its source folder, and
| | 00:49 | it has a bin-release folder,
because in this project, I've previously
| | 00:53 | exported a release build.
| | 00:55 | Now before you try to export an FXP file, the
project must first be open in Flash Builder.
| | 01:02 | Then from the menu, select
File > Export Flex Project.
| | 01:07 | In the Export Flex Project dialog box,
make sure you've selected the project
| | 01:12 | that want to export.
| | 01:13 | I've selected the only
project I have open, Hello World.
| | 01:17 | And then you can click the browse
button and select the location where you want to
| | 01:20 | create the file, and you can set the file name.
| | 01:24 | The default file name will start
with the project name and end with .fxp.
| | 01:29 | The option labeled validate project
compilation, when checked, causes the
| | 01:33 | project to be rebuilt
before the FXP file is created.
| | 01:38 | I'll click Finish to create the FXP file.
| | 01:40 | It takes just a few moments to create
the file on my desktop. Here is the file.
| | 01:46 | It's named Hello World.fxp.
| | 01:49 | Now I'm going to make a copy of this file
and give the copy a new file extension of .zip.
| | 01:56 | I'll copy and then paste it to the
desktop, and then I'll rename it with
| | 02:01 | an extension of .zip.
| | 02:02 | If you see a confirmation message
asking if you mean to change the file name
| | 02:06 | extension, click Yes or Ok.
| | 02:09 | Now the reason I created the ZIP file
was so that I could look at its contents
| | 02:14 | outside of Flash Builder.
| | 02:15 | I'll double-click the Zip file.
On Windows Vista, and on Windows-7, by default,
| | 02:21 | this opens the Zip file as a folder.
| | 02:23 | If you double-click the zip file on a
Mac, by default, it creates a new folder,
| | 02:28 | extracting the contents of
the Zip file to that folder.
| | 02:31 | And if you've installed other
software that's associated with the Zip file
| | 02:35 | extension, such as WinZip, you'll
open the Zip file in that application.
| | 02:41 | Either way, you'll be able to
look at the contents of the Zip file.
| | 02:44 | The Zip file is a compressed file that
contains the application assets, such as
| | 02:50 | the source folder with
the application MXML files.
| | 02:53 | If you have any other folders that
aren't related to the application, such as
| | 02:57 | this bin-release folder that I created,
it will also be included in the FXP
| | 03:01 | file, and you'll see a bunch of
other files that start with a dot.
| | 03:05 | These are configuration files.
You can explore them in any text editor.
| | 03:11 | So now, I have an FXP file, and
I'll show you how to import it.
| | 03:15 | I'll go back to Flash Builder, and
I'm going to delete the current project.
| | 03:19 | I'll right-click on it, or Ctrl+Click
on Mac, and choose delete, and then I'll
| | 03:25 | choose Also Delete Contents
under the name of that folder.
| | 03:29 | When you delete the contents of the project,
the operation cannot be undone. I'll click Yes.
| | 03:35 | That removes the project from the
workspace and deletes the project and all of
| | 03:39 | its files from the hard disk.
| | 03:41 | Now I'll re-import the
project from the FXP file.
| | 03:45 | I'll choose File > Import Flex Project.
I'll browse, I'll go to my desktop, and
| | 03:53 | I'll choose the file Hello World.fxp.
| | 03:57 | I'll select the file and then
click Finish to import the project.
| | 04:03 | I'll open the project, open the source
folder, open the default package and open
| | 04:08 | the application file, Hello World.mxml.
| | 04:12 | And you'll see that all the code is in
place, exactly as it was when I created it.
| | 04:17 | So, the FXP file format is new to Flash
Builder 4, is shared with Flash Catalyst
| | 04:23 | and is a ZIP archive format that's
designed to export and import Flex projects.
| | Collapse this transcript |
| Setting Flash Builder preferences| 00:00 | Eclipse and Flash Builder are both
designed to be highly configurable.
| | 00:04 | When you first install them, they behave
in a particular way, but there are many
| | 00:08 | changes you make to make the
application look and behave the way you want.
| | 00:12 | I am going to show you how to change
a couple of very common preferences.
| | 00:16 | First of all, I am going to modify the
font on my screen so that you will be
| | 00:20 | able to see it more easily.
| | 00:21 | And I will also show you how to
control which browser is being used when you
| | 00:25 | test your application.
| | 00:26 | I will go to the menu and choose
Window, and then down at the very bottom,
| | 00:31 | choose Preferences.
| | 00:33 | The Preferences dialog box
includes all of the Eclipse preferences;
| | 00:37 | that is everything having to do with
the underlying Eclipse workbench and then
| | 00:41 | also all of the preferences
that are part of Flash Builder.
| | 00:44 | I will start with the font
that's used to display my code.
| | 00:47 | I will go to the General category,
open that up and from there, go to
| | 00:52 | Appearance, and then I
will choose Colors and Fonts.
| | 00:56 | In this screen, I will choose Basic
and then scroll down to the bottom of the
| | 01:00 | list of all the different font settings.
| | 01:02 | And I will choose Text Font.
| | 01:04 | That's the font that is used by all the
text editors in Eclipse and Flash Builder.
| | 01:09 | Then I will click Edit, and notice that on
Microsoft Windows the default font is Courier New.
| | 01:15 | On Mac OS X, you'll see a different setting.
| | 01:18 | I am just going to increase
the font size from 10 to 14.
| | 01:21 | I will click OK, and then click OK again,
and now the font is much larger on the screen.
| | 01:28 | You should be able to see this a
lot more easily in the video series.
| | 01:31 | For example, you can choose any font
you have installed on your local hard disk
| | 01:36 | and set it to any size and style you like.
| | 01:38 | Here is another preference that
developers frequently like to change, the browser.
| | 01:43 | When I run my applications,
right now, they're opened in Firefox.
| | 01:48 | That's because Firefox is
my default system browser.
| | 01:51 | You can run the application, as I have
previously shown, by choosing Run and
| | 01:55 | then choosing Run and the name
of the application from the menu.
| | 01:59 | But you can also run the application by
clicking the Run button on the Toolbar.
| | 02:03 | I will click the button, and that
opens up the application in Firefox.
| | 02:08 | Now I'm going to change my browser preferences.
| | 02:11 | From the menu, I will choose Window >
Preferences and then, still in the General
| | 02:16 | category that I was working
with before, I will choose Web Browser.
| | 02:21 | Notice the selection is set
to Default system Web browser.
| | 02:24 | I am going to change to
Internet Explorer and click OK.
| | 02:28 | I will run the application, and
now it opens up in Internet Explorer.
| | 02:32 | I will switch back to Firefox by
selecting Window > Preferences, and this time,
| | 02:41 | I will explicitly set it to
Firefox instead of just assuming that
| | 02:44 | that's my default system browser.
| | 02:46 | I will click OK, and once
again, run the application.
| | 02:53 | So, that's, once again,
a very common preference.
| | 02:56 | The final preference I will show
you is how to set your indentation.
| | 02:59 | By default, Flash Builder creates
Flex applications using tabs as the
| | 03:04 | indentation characters, and it
displays four space characters per tab.
| | 03:09 | You can change these settings both for
MXML and for ActionScript files. Here's how.
| | 03:15 | I will go back to the Preferences
dialog, and this time, I'll go to the
| | 03:20 | Flash Builder settings.
| | 03:22 | These settings have to do with Flash
Builder's own components, not Eclipse's.
| | 03:25 | I will go to the Indentation section.
| | 03:29 | Notice here that it says that I'm indenting
using Tabs and that the Tab size is 4 spaces.
| | 03:35 | I will choose Spaces instead of Tabs
and then set the Indent size and Tab size
| | 03:40 | to 2 characters each.
| | 03:42 | I will click OK, and notice that
the display has changed so that it's
| | 03:47 | 2 characters per tab.
| | 03:49 | But if I place the cursor in some
of the whitespace inside the code and
| | 03:53 | press the left arrow and right arrow
a few times, you will see that those
| | 03:57 | are still tab characters.
| | 03:59 | The file wasn't automatically
rewritten for me just because I made
| | 04:02 | that preference change.
| | 04:04 | But here's a great new feature of Flash
Builder that will allow you to reindent
| | 04:08 | and reformat your code automatically.
| | 04:10 | I will select all of the code in the
file and then go to the menu and choose
| | 04:14 | Source > Correct Indentation.
| | 04:17 | And notice now, if I place the cursor
in the whitespace and move the cursor
| | 04:21 | around, that now it's all made up of spaces.
| | 04:25 | Also, you'll see that all the
attributes have been aligned with each other.
| | 04:28 | This is sort of the default
appearance of Flex applications in the
| | 04:32 | Flex documentation.
| | 04:34 | And if you want to replicate that,
those are the settings that you would use.
| | 04:38 | If you don't like the indentation of the
attributes, that's yet another setting.
| | 04:41 | I will go to the menu and choose Window >
Preferences, and this time, I'll open
| | 04:47 | up the Indentation
category and look at MXML files.
| | 04:52 | Here are some other preferences you can set.
| | 04:54 | I will uncheck the option Align
attributes, and now all the attributes will
| | 04:59 | simply be two characters indented,
regardless of whether there are any other
| | 05:03 | attribute above them. I will click OK.
| | 05:07 | This time, I will select
everything with a keyboard shortcut.
| | 05:09 | Ctrl+A to select all on
Windows, or Command+A on Mac.
| | 05:14 | Then I will use the keyboard shortcut
for Indentation, Ctrl +I on Windows,
| | 05:20 | or Command+I on Mac.
| | 05:22 | So, this is how you can easily format
your code and set the Preferences for how
| | 05:26 | the formatting will look.
| | 05:28 | This is the code appearance that I will
be using throughout this video series.
| | 05:31 | I will be intending with spaces rather than
tabs and using two spaces before each line.
| | 05:37 | This will allow me to get as much code
on the screen as possible, but you can
| | 05:41 | configure your own copy of Flash
Builder to your own preferences:
| | 05:45 | Tabs or Spaces, Firefox, Safari or
Internet Explorer, whichever browser you want
| | 05:51 | to use, whatever font you want to use.
| | 05:54 | And I encourage you to explore the
other available preferences so that you can
| | 05:58 | modify Flash Builder to your liking.
| | Collapse this transcript |
| Using Eclipse views and editors| 00:00 | The Eclipse interface is
made up of views and editors.
| | 00:04 | Both views and editors are rectangular
regions that serve particular purposes.
| | 00:10 | The area where you see your source
code is called the editor region.
| | 00:14 | Eclipse is installed with some basic editors,
including a web browser and a text editor.
| | 00:20 | Flash Builder 4 adds a few other editors.
| | 00:23 | This is called the MXML editor, and
it's used every time you open a file with
| | 00:28 | a .mxml extension.
| | 00:30 | The MXML editor can be used in two
modes: Source mode and Design mode.
| | 00:36 | The purpose of design mode is to give
you a WYSIWYG, or what you see is what you
| | 00:40 | get, look and what your
application is going to look like.
| | 00:44 | It isn't 100% effective;
| | 00:46 | that is to say it isn't going to show
the every application exactly as it will
| | 00:49 | look when you run it in the browser.
| | 00:52 | That's because the design mode can only
evaluate code that's complied into the
| | 00:57 | application, rather than run at run time.
| | 01:01 | But it can give you a strong sense of
what the application will look like.
| | 01:04 | That's the MXML editor.
| | 01:06 | You will see, when you start creating
ActionScript classes, that there is also
| | 01:10 | an ActionScript editor, which shares a
lot of behaviors and capabilities with the
| | 01:14 | MXML editor, but is actually
completely separate component.
| | 01:19 | All of the other rectangular areas that
surround the editor area are called Views.
| | 01:24 | When you first open Flash Builder, you
have a Package Explorer view, an Outline
| | 01:29 | view, Problems, Data/Services,
Network Monitor and ASDoc view.
| | 01:37 | There are many other views available.
| | 01:39 | You can go to the menu and choose
Window > Other Views, and you can see a
| | 01:44 | listing of all the different views that
are included in Flash Builder, but also
| | 01:49 | all the views that are available in
all of your other Eclipse plug-ins.
| | 01:52 | For example, the Team category is
where you would access views, say for
| | 01:56 | subclips, a plug-in that
manages subversion repositories.
| | 02:01 | If you use CFEclipse, you will see the
views for that product here as well and
| | 02:05 | if you use ColdFusion Builder, Adobe's
new plug-in for ColdFusion developers,
| | 02:09 | you will see those views here as well.
| | 02:12 | Views are designed to be configurable.
| | 02:15 | You can resize them, dock them in other
areas of your interface, or make them float.
| | 02:19 | For example, let's say that I wanted to make
my Problems view appear in a different area.
| | 02:25 | I can click on the tab and then drag
and dock it somewhere else on the screen.
| | 02:31 | Similarly, if I don't want to use a
particular view, for example, I am not going
| | 02:34 | to use ASDoc, I can move the cursor
over the tab and then click the X icon, and
| | 02:40 | that view will go away.
| | 02:42 | Whenever you need to bring a view back,
just go to the menu and choose Window,
| | 02:46 | and for example, I would like to bring my ASDoc
view back, click the item and it will reappear.
| | 02:53 | If you want to make a view float, that
is not to be docked into the interface,
| | 02:58 | go to the tab, right-click on it, or
Ctrl+Click on Mac, and choose Detached.
| | 03:04 | That view can now be dragged
around the screen, or if you are using a
| | 03:08 | spanned monitor environment with two monitors,
you can drag it over to the second monitor.
| | 03:13 | If you want to redock the view, right-
click on its tab again and deselect Detached.
| | 03:20 | It will drop into whichever area is closest.
| | 03:23 | You can then click on the tab, drag it
and replace it exactly where you want.
| | 03:27 | I will click and drag it and place
it back in its original position.
| | 03:32 | You can also maximize any view or editor.
| | 03:35 | There are few ways of doing this.
| | 03:36 | For example, I would like to
look at my code in fullscreen.
| | 03:41 | So, I will go to the tab for the MXML
editor I am using and double-click it.
| | 03:46 | And that opens it up to fullscreen.
| | 03:48 | Double-click again and it
brings it back to its original size.
| | 03:52 | You can also use keyboard shortcuts for
this: Ctrl+M on Windows, or Command+M on Mac.
| | 03:59 | It's a toggle keyboard shortcut,
maximizing and restoring as needed.
| | 04:05 | There's one other trick that's available.
| | 04:07 | If a particular view or editor is
maximized, you can go to the tools over on
| | 04:11 | the left side, and the very first button at
the top of that list will be labeled Restore.
| | 04:16 | Click that button and it brings the viewer
editor back to its original position.
| | 04:22 | So that's a look at how views and editors work.
| | 04:24 | There is lot more to know about them,
but I will show you some tricks in other
| | 04:29 | videos as we create our Flex applications.
| | Collapse this transcript |
| Using Flash Builder perspectives| 00:00 | In Eclipse, a Perspective is a
particular arrangement of views on the screen.
| | 00:05 | When you first install Flash Builder,
you're installing Eclipse 3.51, if you're
| | 00:09 | using the standalone configuration.
| | 00:12 | And regardless of whether you are using
the standalone or the plug-in edition,
| | 00:16 | Flash Builder is installed with three
built-in Perspectives named Flash, Flash
| | 00:21 | Debug, and Flash Profile.
| | 00:24 | There are a few different ways of
switching between these Perspectives.
| | 00:28 | One way is to go through the menu.
| | 00:29 | I'll choose Window > Perspective, and
I'll see the three primary Perspectives of
| | 00:35 | Flash Builder displayed here.
| | 00:38 | I'll choose Flash Debug, and that will
switch to a new arrangement of views on
| | 00:42 | the screen, with the Debug view at the
top-left, the Variables, Breakpoints, and
| | 00:47 | Expressions views in the top-right,
the Console, Data/Services and Network
| | 00:52 | Monitor views at the bottom and
the Editor in the vertical center.
| | 00:57 | Then I'll go to another Perspective.
| | 00:58 | I'll choose Window >
Perspective > Flash Profile.
| | 01:03 | This takes you to the Flash Profiler
tool, a tool that's only available if you
| | 01:08 | have a license for the
Premium Edition of Flash Builder.
| | 01:11 | Finally, I'll go back to the Flash
Perspective, which is your primary
| | 01:15 | editing Perspective.
| | 01:17 | Here's another way of
switching between Perspectives.
| | 01:20 | In the top-right corner, you'll see a
little icon that has a set of buttons, and
| | 01:25 | if you click and drag the border to the
left, you'll see buttons displayed for
| | 01:28 | Perspectives that you've recently visited.
| | 01:31 | Once again, here's Flash,
Flash Debug, and Flash Profile.
| | 01:37 | Now a Perspective, once again, is a
particular arrangement of views and editors,
| | 01:42 | and you can create your own custom Perspectives.
| | 01:45 | For example, let's say that I wanted
to take the Outline view and dock it
| | 01:50 | over on the right side.
| | 01:51 | So, I'll click and drag it until it
docks, and then I'll drop into place.
| | 01:56 | Then perhaps I never used the ASDoc view.
| | 01:59 | So, I'll click that tab and then
click its X icon, and it will disappear.
| | 02:03 | So now let's say that this was my
custom arrangement, how I typically like
| | 02:08 | to use Flash Builder.
| | 02:10 | I'll go to the menu and choose Window >
Perspective > Save Perspective As, and
| | 02:15 | I'll name this David Custom.
| | 02:20 | Now David Custom appears in the
Perspective selector in the top right, and if
| | 02:24 | I go to the menu and choose Window >
Perspective > Other, I'll see my
| | 02:29 | Perspective listed there.
| | 02:31 | So, now I can easily switch back and
forth between the different Perspectives.
| | 02:35 | There is Flash Debug, there is David
Custom, and I'll go to the menu and
| | 02:40 | choose Window > Perspective > Flash, and
that'll take me back to the default Perspective.
| | 02:47 | Finally, I'll show you
how to reset a Perspective.
| | 02:50 | Let's say, for example, that
you had deleted various views,
| | 02:53 | you had redocked others, and
you had detached still others.
| | 02:57 | And you had gotten the Perspective to
a customized point where you knew you
| | 03:01 | didn't want to save that.
| | 03:03 | You can easily reset a Perspective to
its current setting as stored on disk by
| | 03:08 | going to the menu and choosing
Window > Perspective > Reset Perspective.
| | 03:14 | When prompted, click OK, and that
will restore all the views and editors to
| | 03:19 | their original positions.
| | 03:21 | If you've customized your current
Perspective, then when you close Flash Builder
| | 03:25 | and reopen it, the Perspective will be
restored to however you had it when you
| | 03:30 | closed the application.
| | 03:32 | Perspectives are how you
customize the appearance of Flash Builder.
| | 03:36 | You can create as many customized
Perspectives as you want, and you can use
| | 03:39 | the Perspectives that are included
with Flash Builder 4 and switch easily
| | 03:44 | between them.
| | Collapse this transcript |
|
|
3. Using Flex Programming LanguagesUnderstanding MXML| 00:00 | You build Flex 4 applications
with two programming languages:
| | 00:03 | MXML and ActionScript.
| | 00:06 | MXML is a pure XML-based language,
also known as a Markup Language, which is
| | 00:11 | actually a facade or a convenience
language for ActionScript, which means that
| | 00:16 | when you code in MXML, it gets
compiled into ActionScript in the background.
| | 00:20 | For the demonstrations in this
chapter, I'll work on a new project.
| | 00:24 | I have a number of starting files that
are included with the Exercise Files.
| | 00:28 | I'll first start by
closing any existing projects.
| | 00:32 | In the Package Explorer, if you have
a project open, such as HelloWorld,
| | 00:36 | right-click on it, or Ctrl+Click
on Mac, and choose Close Project.
| | 00:41 | Then follow these steps to
import an existing project.
| | 00:45 | Go to the menu and choose
File > Import Flex Project.
| | 00:51 | Navigate to the Exercise Files
folder, which I've placed on my Desktop.
| | 00:55 | Go to the 03_Languages to the begin
folder and then select and import the
| | 01:01 | file Languages.fxp.
| | 01:04 | Open the project, open its source code
root folder named src, open its default
| | 01:09 | package, and then double-click
and open the file HelloWorld.mxml.
| | 01:15 | This is the simplest of Flex applications,
displaying a simple string on the screen.
| | 01:20 | I am going to use this application
to describe the nature of MXML and
| | 01:25 | its component parts.
| | 01:27 | Every Flex main application
file is built as an MXML file.
| | 01:31 | That means two things.
| | 01:32 | Number one, that it has a .mxml
extension, as this one does, HelloWorld.mxml,
| | 01:37 | but also that its root element uses a
tag name, or an element name, that's a part
| | 01:42 | of the MXML language.
| | 01:44 | Every main application starts
with a root element of Application.
| | 01:48 | The Application element in MXML
represents an ActionScript Class named
| | 01:53 | spark.components.Application.
| | 01:56 | You can find out what the equivalent
ActionScript Class is for any MXML tag by
| | 02:01 | just hovering the cursor over the tag name.
| | 02:04 | You'll see a little bit of help pop-up.
| | 02:05 | It shows you right away the name and
package in which the class is stored.
| | 02:09 | But then if you press the F2 key, and
that's the same keyboard shortcut on
| | 02:13 | either Mac or Windows, you'll get an
expandable window, and you'll be able to
| | 02:18 | open it and scroll it to see more documentation.
| | 02:21 | Press Escape to make the help go away.
| | 02:24 | In the root element of each MXML
file, you'll find a number of XML
| | 02:28 | namespaces declared.
| | 02:29 | When you create a brand-new application,
or component, in Flash Builder these
| | 02:33 | three namespaces are included automatically.
| | 02:36 | The first is associated
with a namespace prefix of fx.
| | 02:40 | This new namespace represents the MXML
language itself, and it tells us that
| | 02:44 | we're working with a version of
MXML that was created in 2009.
| | 02:48 | The second namespace is associated with
the prefix 's,' and it stands for Spark.
| | 02:53 | This namespace is associated with all
components that are members of the new
| | 02:57 | Spark framework that
includes the application tag itself.
| | 03:01 | And finally, the third namespace is
associated with the namespace prefix mx.
| | 03:06 | This namespace is associated with the
older components, the components that were
| | 03:10 | part of Flex 3 but which we
still use in the Flex 4 SDK.
| | 03:15 | When you declare an object using MXML
in a Flex application, you start off with
| | 03:19 | the XML prefix - in this case, the
letter s which means the Spark framework -
| | 03:24 | and then the name of the tag.
| | 03:26 | This tag, in turn, is associated
with what's called an XML Manifest.
| | 03:31 | An XML Manifest, which is stored in
the flex SDK folder, is a mapping of the
| | 03:36 | MXML tags to their
equivalent ActionScript Classes.
| | 03:39 | Some classes are associated with the mx
prefix, some with the s prefix and some with fx.
| | 03:45 | Here is an example of a
prefix that's associated with fx.
| | 03:48 | I'll place the cursor
inside the Declarations block.
| | 03:51 | This is where you place non-visual
elements, such as simple variable
| | 03:55 | declarations, value objects, class
instances and instances of what are known as
| | 04:00 | RPC components, or Remote
Procedure Call components.
| | 04:04 | I'm going to declare a simple string.
| | 04:06 | I'll type in a less than character to
start the tag, and then type the word
| | 04:10 | 'string.' The list that pops up is
called the Code Assist List, and it shows me
| | 04:14 | a list of all known tags that
I can place in this position.
| | 04:18 | I can either press Enter or Return to
select an item from the list, or I can use
| | 04:22 | the mouse and double-click.
| | 04:23 | Notice that the Code Assist tool
automatically fills in both the tag name
| | 04:27 | and its correct prefix.
| | 04:29 | I'll assign the string an id, which is
the equivalent of a variable name, and
| | 04:33 | I'll name it myString.
| | 04:35 | And then I'll type in the less than
character and Flash Builder automatically
| | 04:39 | adds the required end tag.
| | 04:41 | And I'll type in a value of a simple string.
| | 04:44 | So, that's one way of
declaring a variable in Flex.
| | 04:48 | When you declare a variable like this
in the Declarations block, it makes it
| | 04:51 | persistent for the lifetime of this
application, or if you're working in a
| | 04:55 | custom component, for the
lifetime of the component.
| | 04:58 | It also makes it public to the rest
of the application, meaning that any
| | 05:02 | other part of the application can access that
variable, myString, using simple dot notation.
| | 05:08 | So, now we have examples of the
Application component, the string and the label.
| | 05:12 | Now, let's take a look at an example
of an mx component, a component from the
| | 05:16 | Flex 3 framework that has not
been replaced by a new version.
| | 05:20 | I'll place the cursor after the label tag.
| | 05:22 | I'll type in a less than
character and start off with data.
| | 05:26 | There are a number of components
that start with the word 'data.' Notice
| | 05:29 | that some are members of the Spark Component
Group and others of the MX Component Group.
| | 05:34 | I'll choose the DataGrid.
| | 05:35 | A DataGrid is a component that
displays data in rows and columns.
| | 05:39 | I'll complete the tag by just typing in a slash
and greater than character, and then I'll look at the
| | 05:44 | application in Design mode by clicking
the Design button, and I'll show you that
| | 05:49 | the DataGrid tag results in creating
this component, the DataGrid component.
| | 05:54 | Now, I'm not going to fill it
in with complex data right now.
| | 05:57 | The purpose of this lesson is
to understand the nature of MXML.
| | 06:01 | When you use MXML, you are
declaring instances of classes.
| | 06:05 | There are some MXML tags
that don't represent classes.
| | 06:08 | For example, the fx declaration tag
is used to wrap instances of non-visual
| | 06:14 | classes, and there are a number
of these types of tags as well.
| | 06:17 | When you build a Flex application, the
main application file, again, always is
| | 06:22 | in an MXML file, and then the rest of
the application will be made up of a
| | 06:25 | combination of MXML and ActionScript files.
| | 06:28 | And I'll describe the use of
ActionScript Code in other videos.
| | Collapse this transcript |
| Setting properties and styles with MXML| 00:00 | The MXML programming language is used
typically to declare instances of visual
| | 00:05 | objects that are presented on the screen
and also of non-visual objects that you
| | 00:10 | use at run time to assist
in running the application.
| | 00:14 | I'm going to create a brand-new application.
| | 00:16 | Each Flex project in your workspace
can contain one or more applications.
| | 00:21 | Here is how you create a brand-new one.
| | 00:23 | Go to the Project, right-click
and choose New > MXML Application.
| | 00:29 | Or you can go to the menu and
choose File > New > MXML Application.
| | 00:34 | Either way, you'll land in this dialog
box, the New MXML Application dialog.
| | 00:39 | Enter the name of the
application without a .mxml extension.
| | 00:43 | I'm going to create a brand-new
application called HanselAndPetal.
| | 00:47 | This is the name of our fictional company
that sells plants, flowers and the like.
| | 00:52 | And I'm going to be building a web-
based Flex application for the company
| | 00:55 | throughout this video series.
| | 00:57 | Also on this screen, you can
select something called a layout.
| | 01:00 | There are four layouts available.
| | 01:02 | The default is something called Basic Layout.
| | 01:05 | This is a layout that will let you
place objects on the screen anywhere you
| | 01:09 | want, and they'll hold their position.
| | 01:10 | If you have worked with Flex 3, it's
just like Flex 3's Absolute Layout,
| | 01:15 | Horizontal and VerticalLayout layout
objects either from left to right, or
| | 01:19 | from top to bottom.
| | 01:21 | And the new TileLayout replaces
the old Flex 3 tile container;
| | 01:25 | that is to say it causes the
application's objects to layout in rows and columns.
| | 01:31 | I'm going to choose the VerticalLayout
architecture to cause objects to stack
| | 01:35 | from top to bottom and click Finish.
| | 01:37 | When you first create an application,
it has a root application tag, the
| | 01:41 | three namespaces that I've
described in other videos and a minWidth and
| | 01:45 | minHeight attribute.
| | 01:47 | This will restrict the user from
reducing the application beyond a certain level.
| | 01:51 | The layout is declared in Flex 4 as a
child element of the Application Class.
| | 01:56 | It's still a property.
| | 01:58 | And if you already had an object that
was an instance of a Layout Class, you
| | 02:02 | could apply it using an attribute.
| | 02:03 | But this is the most common syntax that you see.
| | 02:06 | The purpose of this video is to show you
how to set styles and properties using MXML.
| | 02:11 | Styles and properties are
set in MXML as XML attributes.
| | 02:15 | And you really can't tell the
difference by looking to see whether something is
| | 02:19 | a style or property.
| | 02:20 | For example, the minWidth and
minHeight settings are properties.
| | 02:24 | Now I am going to apply another setting
to the application tag, which is a style
| | 02:29 | that is which affect its visual appearance.
| | 02:31 | I am going to set a value called
backgroundColor, I'll type in the word back and
| | 02:35 | then press Ctrl+Space to bring up a
list of matching attributes, and then I'll
| | 02:40 | choose backgroundColor.
| | 02:41 | You set the background
color style to a color value.
| | 02:45 | And just like in HTML, when you are
working in MXML, you use hexadecimal values,
| | 02:50 | six characters preceded by a pound sign.
| | 02:53 | I'll use this color #1E5C75, and then
I'll look at the application in Design
| | 03:00 | mode to see the effect of that style.
| | 03:02 | And I'll see that the application has
this deeper color as its background.
| | 03:06 | Now, I'll go back to Source mode and
place the cursor after the Declarations
| | 03:10 | element and press Enter, or
Return, to create a new line.
| | 03:14 | As I've showed in other videos, you can
create a label by using the tag s:Label
| | 03:19 | and setting its text property to a value.
| | 03:22 | I'm going to give this label a value of
Hansel and Petal, and then I am going to
| | 03:27 | apply a few other attributes,
which, again, are styles.
| | 03:30 | I'll set a fontSize style of 36.
| | 03:34 | It's worth mentioning that in Flex all
fonts are measured in pixels, never in
| | 03:39 | points, ems, or any other unit of measurement.
| | 03:42 | I'll also set the color to #FFFFFF.
| | 03:46 | I finish the tag by adding in the
slash and the greater than sign at the end,
| | 03:50 | and then I will, once again, look at the
application in Design mode and show you
| | 03:54 | that a label object appears in the
top left corner of the application.
| | 03:57 | Using the Vertical Layout, if you'd
like to add a little bit of padding around
| | 04:01 | the objects within the application,
you don't do it in the Application tag,
| | 04:05 | like you did in Flex 3.
| | 04:07 | Instead, you do it in the Layout tag.
| | 04:08 | I am going to use a set of padding
settings, which in Flex 3 were set as styles
| | 04:14 | and in Flex 4 are set up as properties.
| | 04:17 | I'll place to cursor after
VerticalLayout and press the Spacebar and then type
| | 04:22 | 'p-a-d-d,' and that brings up a
list of the four padding settings.
| | 04:26 | I'll set paddingBottom, paddingTop,
paddingRight and paddingLeft all to values of 10.
| | 04:34 | I'll once again, look at the
application in Design mode, and I'll see that I
| | 04:43 | have a little bit of extra
space now around the objects.
| | 04:47 | Finally, I'll show you how to add
other complex properties to an object.
| | 04:51 | Specifically, I am going to
add a Drop Shadow to a label.
| | 04:54 | A Drop Shadow is one type of filter that
you can apply to visual objects in Flex.
| | 05:00 | Every visual control in the Spark
components set has a property called filters.
| | 05:05 | It's an array and can take
more than one filter object.
| | 05:08 | And so in order to declare this kind of
complex object in MXML, you break up the
| | 05:12 | top-level tag, in this case the
label, into a Begin tag and an End tag.
| | 05:17 | I did that just by typing in the
greater than character and allowing Flash
| | 05:21 | Builder to autocomplete the element.
| | 05:23 | Now, I'll add the filters property.
| | 05:26 | The filters property is declared as a
child element of the parent element, in
| | 05:30 | this case the label.
| | 05:32 | And once again, it's declared
as a Begin tag and an End tag.
| | 05:35 | And then I'll declare a DropShadowFilter.
| | 05:38 | Notice that there are two versions of
the Drop Shadow filter class that are
| | 05:42 | shown in the code assist list.
| | 05:44 | The first one, which I currently have
highlighted, has a prefix of mx and is
| | 05:48 | designed for use on the mx components.
| | 05:51 | I am using this Spark label component,
so I'll use the Spark DropShadowFilter.
| | 05:56 | I'll apply a color to the
DropShadowFilter of #CCCCCC - that's a light gray, and
| | 06:03 | then I'll close the tag with empty tag syntax.
| | 06:06 | I'll, once again, look at the
application in Design View, and I'll see a nice
| | 06:10 | drop shadow is being displayed.
| | 06:12 | Finally, I'll test the application in
the browser and show that the appearance
| | 06:15 | of the Drop Shadow looks the
same as it did in Design mode.
| | 06:18 | So this has been a look at how to
set properties and styles using MXML.
| | 06:23 | Once again, they look the same - they
appear as XML attributes - but in the
| | 06:27 | background, they are translated as
ActionScript styles and properties.
| | Collapse this transcript |
| Translating MXML to ActionScript 3| 00:00 | As I've mentioned in other videos,
MXML is translated into ActionScript code
| | 00:05 | during the compilation process.
| | 00:07 | I'll show you an easy trick that allows
you to see the actual ActionScript code
| | 00:11 | before it's compiled into SWF bytecode.
| | 00:14 | For this demonstration, I'm going to
use the HanselAndPetal application that
| | 00:18 | I've created previously, but you
can do this with any Flex application.
| | 00:22 | First, I'll go to the Project Properties.
| | 00:24 | To get to the Project Properties, you
can either right-click on the project
| | 00:28 | name in the Package Explorer and
choose Properties, or you can simply select
| | 00:33 | the Project in the Package Explorer, and then
go to the menu and choose Project > Properties.
| | 00:39 | Either way, you start in this dialog,
properties for the current project.
| | 00:43 | The Resource category shows you the
location of the project on your hard disk.
| | 00:48 | There're many other categories that I'll be
talking through throughout this video series.
| | 00:52 | The one I'm concerned with here is
called the Flex Compiler category.
| | 00:56 | It shows you all of the different
compiler options, including which SDK is being
| | 01:01 | used to build the application, what
is the minimum version of Flash Player
| | 01:05 | that's required by this version of
the Flex SDK, and many other options.
| | 01:09 | Here's how you cause the compiler to
keep the generated ActionScript code after
| | 01:14 | it's been translated from your MXML.
| | 01:16 | I'll place the cursor into the
Additional compiler argument's text entry and
| | 01:21 | then put in a space and then
the following compiler argument,
| | 01:25 | -keep-generated-actionscript=true.
I'll click OK to save the property changes,
| | 01:36 | and then I'll go to the bin-debug or
the output folder for this project.
| | 01:41 | I'll find a new folder called generated.
| | 01:44 | I'll open up that folder, and I'm
going to expand the size of the Package
| | 01:48 | Explorer view so we can see
all of these files more clearly.
| | 01:51 | You'll see many files with a .as
extension that have been generated.
| | 01:55 | There are a bunch of files that
start with an underscore character.
| | 01:58 | These are considered private files.
| | 02:01 | You can open them up and
examine them if you want, but they're
| | 02:03 | fairly boilerplate.
| | 02:04 | But I find these files more interesting.
| | 02:08 | Here's the file that's the
ActionScript equivalent of your MXML application.
| | 02:12 | If the name of your application is
HanselAndPetal.mxml, then the name of the
| | 02:17 | equivalent ActionScript file
is HanselAndPetal-generated.as.
| | 02:22 | I'll double-click to open that file
and then double-click the tab on the new
| | 02:26 | file to open it to fullscreen.
| | 02:29 | I recommend that you spend some time
examining the code that's generated in
| | 02:32 | these ActionScript files.
| | 02:34 | It's not only a great way of
understanding how MXML is translated into
| | 02:38 | ActionScript, but if you're new to
ActionScript 3, it will help you learn
| | 02:41 | the language itself.
| | 02:42 | Here are some examples.
| | 02:44 | I'm going to press Ctrl+F to
bring up the Find/Replace dialog.
| | 02:47 | If you're working on Mac, that's
Command+F. And I'm going to type in the word
| | 02:51 | 'Label' and click Find.
| | 02:54 | That takes me to a function that's
returning an array, and within the array,
| | 02:58 | there is a call to a function
called HanselAndPetal Label1_c.
| | 03:03 | Take a look at that function.
| | 03:05 | Within that function, there is a
variable named temp datatyped as a Label,
| | 03:09 | constructed from the Label constructor method.
| | 03:12 | There is a text property set to
HanselAndPetal, a filters property, which is
| | 03:17 | getting its filter from yet another
internal function, a method called setStyle
| | 03:21 | - that's setting the font size, and
another that's setting the color, a couple
| | 03:25 | of other lines of code that bind it all
together, and then a return statement.
| | 03:29 | The result of all this code is to
construct the Label object that was declared
| | 03:34 | here in my MXML code.
| | 03:36 | If you explore this code, you'll
find all of the different aspects of the
| | 03:39 | application translated exactly as
they're going to be executed when the
| | 03:44 | application runs in Flash Player.
| | 03:46 | Now generating this ActionScript
code doesn't do anything to improve the
| | 03:50 | performance or
functionality of your application.
| | 03:52 | It's just a learning tool, and in some
cases, is great for debugging as well.
| | 03:56 | But it's an incredibly useful trick
and great for understanding how MXML and
| | 04:02 | ActionScript relate to each other.
| | Collapse this transcript |
| Using ActionScript in MXML files| 00:00 | Nearly all Flex applications are built with a
combination of MXML and ActionScript code.
| | 00:05 | I am going to show you how to
incorporate ActionScript code into your MXML
| | 00:09 | applications in a couple of different ways.
| | 00:12 | I am going to start with an application
that's a part of the Languages project
| | 00:16 | that comes with the Exercise Files.
| | 00:18 | If you don't have access to the
Exercise Files, you can create this
| | 00:21 | application on your own system.
| | 00:23 | I will open the application code to fullscreen.
| | 00:26 | I am going to start by showing you how
to execute ActionScript code when the
| | 00:30 | application first starts up.
| | 00:32 | I will talk about events and the
entire Flex event architecture in another
| | 00:36 | chapter of this video series, but it's
important to know from the beginning that
| | 00:41 | there is a particular event that is
dispatched by the application, when the
| | 00:45 | application has finished loading
into Flash Player and is ready for use.
| | 00:50 | The name of this event is
creationComplete, and you can react to the
| | 00:55 | creationComplete event by executing some
arbitrary ActionScript code that you write.
| | 01:00 | Here's the easiest way to
use the creationComplete event.
| | 01:03 | Place the cursor at the end of the
starting Application tag, after the
| | 01:07 | backgroundColor setting, press the
Spacebar and start typing in the name of the
| | 01:13 | event, creationComplete.
| | 01:15 | When you see the event name appear in
the code assist list, press Enter or
| | 01:19 | Return to select it, and you
will see a prompt labeled Generate
| | 01:23 | CreationComplete Handler.
| | 01:24 | This is a new feature of Flash Builder 4.
| | 01:26 | Flash Builder automatically generates
a function for you that will be called
| | 01:31 | when this event is dispatched.
| | 01:32 | To select the option, either press
Enter, or Return, or double-click it.
| | 01:36 | I will press Enter on my computer,
and that fills in the rest of the
| | 01:40 | creationComplete attribute with
the call to a new method called
| | 01:44 | application1_
creationCompleteHandler, and the function
| | 01:48 |
| | 01:48 | application1_
creationCompleteHandler is created for me.
| | 01:51 | Now, to execute code when the
application starts up, just put the code
| | 01:56 | inside that function.
| | 01:57 | Here's something you might want to
do in ActionScript instead of in the MXML.
| | 02:01 | I have been told by the marketing
department of Hansel and Petal that the name
| | 02:06 | of the company is always spelled with
an ampersand in the middle, instead of
| | 02:09 | the word 'and.' And so I go to the
Label control, and I type in an ampersand
| | 02:14 | character, and I Save my changes, and I see
a little Error icon appear over on the left.
| | 02:20 | I move the cursor over the Error icon,
and I see the message, The entity name
| | 02:25 | must immediately follow the '&'
in the entity reference. Wow!
| | 02:29 | What the heck does that mean?
| | 02:30 | Well, the ampersand character is one
of five reserved characters in XML, not
| | 02:35 | just in MXML, but in all XML-based languages.
| | 02:39 | A reserved character is a character
that you can't place literally within
| | 02:43 | certain XML contexts, and an ampersand
character can't be placed in an attribute
| | 02:48 | value without it being turned
into what's known as the XML entity.
| | 02:52 | So one way around this would be to spell out
the entity, and it would look like this &.
| | 02:59 | I will save and run the application,
and you will see that that entity, &,
| | 03:06 | is translated into the literal
semicolon when the application runs.
| | 03:10 | But if you prefer, you can set this label's
text property in ActionScript code instead.
| | 03:15 | So, I am going to strip out the text
property from the Label tag, and then I am
| | 03:20 | going to go to the function that was
generated, and I will Delete the comment
| | 03:24 | that was added to the function automatically.
| | 03:27 | Notice that the Label
control has an ID of headline.
| | 03:30 | That's going to allow me to
address it in my ActionScript code.
| | 03:34 | I will type in 'headline.,' and then in
the code assist list, I will choose the
| | 03:39 | text property from the list of all
of the Label classes, properties, and
| | 03:43 | methods, and I will set
its value to Hansel & Petal.
| | 03:47 | This time, because I am working in
ActionScript code, I can use the reserved
| | 03:52 | characters that weren't allowed in the MXML.
| | 03:54 | I will Save and run the application again.
| | 03:57 | And once again, you see the correct
display in the application, with the literal
| | 04:01 | ampersand, but I haven't had to play
XML formatting tricks to make it happen.
| | 04:07 | You use ActionScript code to handle the
logic of your Flex application, to react
| | 04:12 | to events that are dispatched by the
application or its components, or any time
| | 04:16 | you want to have a little bit more
flexibility in how you write your code.
| | 04:20 | The MXML code gets compiled into the
application and is typically used to
| | 04:24 | declare objects that are always there.
| | 04:27 | But ActionScript code is more flexible.
| | 04:29 | You can use conditional clauses,
looping constructs, and everything else that
| | 04:33 | the language offers.
| | 04:34 | And since we already know that MXML is
really ActionScript in the background, it
| | 04:39 | just tells you that you can choose
between the two languages in many cases.
| | 04:43 | The only exception to this is that the main
application file itself is always an MXML file.
| | 04:49 | Other than that, a lot of the work
that you do in Flex applications can be
| | 04:53 | done in either language.
| | Collapse this transcript |
| Declaring and using variables| 00:00 | You can declare variables using
either MXML or ActionScript code.
| | 00:05 | For this demonstration, I will use the
application file UsingVariables.mxml.
| | 00:10 | I will open it up to fullscreen so
we can see as much code as possible.
| | 00:14 | If you want to declare a variable using
MXML code, and the variable is going to
| | 00:18 | have a non-visual data type -
| | 00:20 | that is something that's not a label, a
button, or something else the user can see -
| | 00:24 | you place that inside the
<fx:Declarations> element.
| | 00:27 | I am going to Select and Delete the
comment inside the Declarations element, and
| | 00:32 | then, on a new line of code, I
will create a String variable.
| | 00:35 | The String, Number, Date, Boolean,
and other data types that are built into
| | 00:41 | Flash Player are represented in the
Flex SDK with the fx namespace prefix.
| | 00:47 | I will start by typing in a less than
character and then 'str.' And then I will
| | 00:53 | select the <fx:String> tag.
| | 00:55 | When you declare a variable using
MXML, if you want to address it in your
| | 01:00 | ActionScript code, assign it an ID,
just like you do with visual objects.
| | 01:05 | I am going to assign an ID of
helloString, and then I will type in the greater
| | 01:10 | than character to close the tag.
| | 01:11 | And Flash Builder automatically adds
the matching end tag, and I will type in a
| | 01:15 | String of 'Welcome to our store.'
| | 01:18 | Next, I will add another Label.
| | 01:20 | I will do this part in Design mode so
I can place the Label exactly on the
| | 01:24 | screen where I want it.
| | 01:26 | I restore the Editor to regular size,
and then click the Design button.
| | 01:30 | And then I will go down to the Component's
view and drag in a new Label into the application.
| | 01:35 | I will place it on the screen,
somewhere where it looks good, and then I
| | 01:39 | will set some Styles.
| | 01:40 | I will set this to 24 pixels and Italics.
| | 01:45 | Then I will go back to Source mode, and
I will look at my new Label that's been
| | 01:49 | added to the application.
| | 01:52 | In order to be able to address the Label,
I will add an ID attribute of welcomeLabel.
| | 02:01 | So, I have a string called
helloString and a label called welcomeLabel.
| | 02:05 | To put them together at run time, I
will click into the creationCompleteHandler
| | 02:09 | function and apply the variable value
to the object property, with this code,
| | 02:15 | welcomeLabel.text = helloString.
| | 02:20 | I will Save and run the application, and
there's my welcome message displayed on the screen.
| | 02:30 | You can also declare
variables using ActionScript code.
| | 02:33 | If you declare a variable inside a
function, the variable is local to the function.
| | 02:38 | And if you declare the variable outside
the function, it represents a variable
| | 02:42 | that persists for the lifetime of the
application, and it's available to any
| | 02:46 | code within the application MXML file.
| | 02:49 | To declare a variable inside a function,
you start with the keyword 'var' and
| | 02:54 | then the name of the
variable that you want to define.
| | 02:56 | I will declare a variable called myLocalVar.
| | 03:00 | For any variable, you always add a
colon at the end and then a data type.
| | 03:05 | This is a syntax known as post-colon
data typing, and it's a critical part of
| | 03:10 | the ActionScript 3 syntax.
| | 03:11 | I am going to set this variable to a
data type of String, and then I will set
| | 03:18 | its value using an equals
operator and a literal String.
| | 03:22 | This variable will only persist for the
time that it takes to execute this function.
| | 03:26 | When the function is done
executing, it will go out of memory.
| | 03:30 | If you want to declare a variable
that persists, declare it before any
| | 03:34 | functions, but after import statements.
| | 03:36 | I will place the cursor after the import
statement and declare another variable.
| | 03:40 | I will call this one myPublicVar, and
once again, data type it as a String, and
| | 03:51 | then assign a literal String.
| | 03:53 | This variable will be available to all
the code throughout the MXML document.
| | 03:58 | Now, when I Save the changes, I will
see a little warning icon appear next to
| | 04:02 | that line of code, and I see the
message, var 'myPublicVar' will be scoped to
| | 04:07 | the default namespace: UsingVariables:
| | 04:10 | internal.
| | 04:11 | It will not be visible outside of this package.
| | 04:13 | Here's what that message is talking about.
| | 04:16 | Whenever you declare a variable that's
outside of the function, it's known as an
| | 04:20 | instance variable, that is a variable
that is a member of the current instance
| | 04:25 | of this application, or when you get
into writing custom components, the current
| | 04:29 | instance of the component.
| | 04:30 | These types of variables should
have access modifiers applied.
| | 04:34 | There are four access
modifiers in ActionScript 3:
| | 04:37 | Public, Protected, Private, and Internal.
| | 04:41 | If you don't declare one, the variable
is automatically Internal, meaning that
| | 04:45 | it can be addressed by the code in this
component and also any other components
| | 04:50 | in the same package or folder.
| | 04:52 | More commonly, when you declare a
variable in an application outside of
| | 04:56 | functions, you use the keyword
or access modifier Protected.
| | 05:00 | I will type in the word 'protected' and,
once again, Save my changes, and you
| | 05:04 | will see the warning go away.
| | 05:06 | Protected means that the variable is
available to this application and also to
| | 05:11 | any components that extend or
inherit capabilities from this application.
| | 05:16 | So that's Protected and Internal.
| | 05:18 | The other two access modifiers are
Public, which means that a variable is
| | 05:21 | available to the entire application
and to the outside world, and Private,
| | 05:26 | which means that the variable is only
addressable by code in this application or component.
| | 05:31 | So those are the three ways that we
declare variables in Flex applications,
| | 05:35 | using MXML code, and it's worth
mentioning that when you declare variables in
| | 05:39 | this way, that they are always Public
to the entire application, as variables
| | 05:43 | that are local to a function and as
variables that are declared outside of
| | 05:47 | functions and are therefore
controlled by their access modifiers.
| | Collapse this transcript |
| Understanding ActionScript data types| 00:00 | Most variables that you declare in flex
applications have associated data types.
| | 00:05 | In this demonstration, I am going to
show you how to use various data types, how
| | 00:10 | to do calculations with some of the
most commonly used data types, and then how
| | 00:14 | to convert those data types into
Strings for display on the screen.
| | 00:17 | I will be working in the
application file, UsingDatatypes.mxml.
| | 00:22 | I will start with the String data type.
| | 00:25 | As I have shown in other videos, when
you declare a variable in ActionScript
| | 00:29 | 3, you start with the variable name,
and then after a colon, you declare the
| | 00:33 | type of the variable.
| | 00:35 | The variable name follows the naming
conventions of all identifiers in ActionScript 3.
| | 00:41 | It consists of letters, numbers, and
underscores, and starts with either an
| | 00:45 | underscore or an alphabetical letter.
| | 00:48 | By very strong convention, variables
that are Protected, Public, or Internal
| | 00:52 | start with a lowercase initial character.
| | 00:54 | Variables that are Private are
frequently named with an underscore as
| | 00:58 | their first character.
| | 00:59 | I am going to declare variables in
each of the functions that are already a
| | 01:03 | part of this application, one for each of
four commonly used data types in ActionScript 3:
| | 01:09 | Strings, Numbers, Booleans, and Dates, and I
will start in the function for the String class.
| | 01:15 | I am going to use a Label that's been
placed at the bottom of this application -
| | 01:21 | that has an ID of out - to display
results for each of the functions.
| | 01:26 | Going back to the functions, stringBtn_
clickHandler, I will add the following code:
| | 01:31 | var strTemp:
| | 01:34 | String equals, and then I am going to
show you how to take two Strings and push
| | 01:39 | them together in an
operation known as concatenation.
| | 01:43 | The plus character is used as the
concatenation operator in ActionScript.
| | 01:47 | So, I will start off with a simple
string of Hello, and then I will add a plus
| | 01:52 | operator, and then I will wrap up the
expression with another literal string of World.
| | 01:59 | And then I will display that value using
the following code, out.text = strTemp.
| | 02:07 | I will Save and run the application,
and then click the Show String button.
| | 02:14 | And there's the result, the String
Hello World is displayed in the out Label.
| | 02:20 | One other thing about Strings that's
worth mentioning, in ActionScript 3 you can
| | 02:23 | use either double quotes or single quotes.
| | 02:26 | If you prefer, you could
format your code like this.
| | 02:29 | I will replace the double quotes for
both literal strings with single quotes,
| | 02:35 | and the code will work
exactly the same as it did before.
| | 02:39 | You can interchange double quotes
and single quotes in ActionScript 3.
| | 02:42 | As long as you match them up
correctly, everything should work fine.
| | 02:46 | Now, I am going to show you how to use numbers.
| | 02:49 | There are actually three data
types for numbers in ActionScript 3:
| | 02:53 | the Number class and the primitive types
int for Integer and uint for Unsigned Integer.
| | 02:59 | I am going to focus here on the Number class.
| | 03:01 | I will declare a variable called
numTemp inside the numberBtn_clickHandler
| | 03:07 | function, and data type it as a Number.
| | 03:12 | Now, for this expression, I am going to
take two numbers and add them together,
| | 03:17 | typing in the values 100 + 200.
| | 03:21 | Notice that the plus operator is
the same character as was used in
| | 03:24 | string concatenation.
| | 03:26 | We say that the plus character is an
overloaded operator, meaning that it has
| | 03:31 | more than one purpose.
| | 03:32 | In any expression that includes at
least one literal String, the plus operator
| | 03:37 | is used for concatenation, but in an
expression that only has literal numbers
| | 03:42 | or variables that are data types
as Numbers, the plus operator does
| | 03:45 | mathematical addition.
| | 03:47 | Now, I am going to display the
result in my out label, like this.
| | 03:51 | I will type out.text = numTemp;.
| | 03:56 | Now, watch what happens when
I Save the changes to my code.
| | 04:00 | I see an error in the code.
| | 04:02 | It's represented both here on the line of
code and also down here in the Problems view.
| | 04:07 | I will open up the Errors list and see
the message Implicit coercion of a value
| | 04:13 | of type Number to an unrelated type String.
| | 04:16 | Well, that tells me that the Number
class is not automatically convertible to a
| | 04:20 | String in ActionScript 3.
| | 04:23 | There are a couple of ways of
handling this, but the simplest way to turn
| | 04:26 | this strongly typed value, a Number,
into a String, is to use the Number
| | 04:31 | class' toString method.
| | 04:33 | The toString method is
implemented on every ActionScript class.
| | 04:37 | It doesn't always give you a useful
output, but it does, in the case of
| | 04:41 | these basic data types.
| | 04:43 | So I will assign the value of numTemp
to the text property of the Label using
| | 04:48 | the expression, numTemp.toString.
| | 04:53 | Notice that there is an optional
argument in the toString method.
| | 04:56 | That's shown in the Bubble help
that's shown on the screen right now.
| | 04:59 | I am not going to use that optional argument.
| | 05:01 | I will just put in the closing parenthesis.
| | 05:03 | I will Save my change and the error goes away.
| | 05:06 | I will run the application.
| | 05:09 | I will click the Show Number button,
and I see the result of the calculation.
| | 05:15 | Now I will add two more variables, one
for a Boolean value that can have a value
| | 05:20 | of true or false, and one for a Date.
| | 05:23 | For the Boolean demonstration, I will
declare a variable called boolTemp, and I
| | 05:28 | will data type it as Boolean.
| | 05:31 | This time, I won't assign an initial value.
| | 05:34 | The reason is because I want to show you
that every variable has a default value.
| | 05:39 | In the case of the Boolean data
type, the default value is false.
| | 05:44 | And then I will use the syntax
to output the value, out.text
| | 05:48 | = boolTemp.toString.
| | 05:52 | Now, for the Date class, I am going
to create a Date typed variable using a
| | 05:56 | different kind of syntax.
| | 05:59 | I will say var dateTemp:Date = new Date ();
| | 06:07 | Of all of the simple data types in
ActionScript 3, the Date class is the most complex.
| | 06:13 | You don't simply assign a value.
| | 06:15 | Instead, you create an instance of
the Date class, calling what's known as
| | 06:19 | its constructor method.
| | 06:21 | To call a class' constructor method,
you start with the keyword 'new,' and then
| | 06:25 | you call a method that has the same
name as the class itself, and you use opening
| | 06:30 | and closing parentheses at the end.
| | 06:32 | Many constructor methods allow you
to pass in initialization values.
| | 06:36 | For instance, the Date class
constructor method allows you to pass in Year,
| | 06:42 | Month, Date, and so on, but if you don't
pass those values in, as I am not doing
| | 06:46 | here, the new instance of the Date
class will represent the current date and
| | 06:51 | time on the user's client computer.
| | 06:54 | Now, I will output the value of
dateTemp as a String using the
| | 06:58 | expression dateTemp.toString.
| | 07:01 | You see the pattern here.
| | 07:03 | For any non-string variable, if you
need to cast or convert it to a String, you
| | 07:08 | use the toString method.
| | 07:09 | I will, once again, run the application
in the browser, and now I will be able
| | 07:14 | to test all four data types.
| | 07:17 | Here is the result of the String, Hello
World, the Number, a calculated value,
| | 07:23 | the Boolean, a default value, and
the Date, the current date and time.
| | 07:29 | So that's a look at how to use
various data types in ActionScript 3.
| | 07:32 | You will see plenty of other
examples throughout the rest of this video
| | 07:36 | series, but having an understanding of
what the data types are and how to set
| | 07:41 | variables as particular data types is
incredibly valuable as you build your
| | 07:45 | Flex applications.
| | Collapse this transcript |
| Getting language and API help| 00:00 | Flash Builder 4 is delivered with a
complete online help system called The Adobe
| | 00:05 | Community Help Application.
| | 00:07 | This is a new application that's based
on Adobe AIR, that's included not just
| | 00:11 | with Flash Builder 4, but is also
bundled with all of the new Creative Suite
| | 00:15 | 5, or CS5, products.
| | 00:17 | The purpose of the Community Help
Application is to give you access to all of
| | 00:21 | the online help provided by Adobe,
but also to help and other supporting
| | 00:26 | documentation that's been created by
the very wide community of Flex and other
| | 00:30 | application developers.
| | 00:32 | To open up the Community Help
Application, go to the Flash Builder menu and
| | 00:36 | choose Help > Flash Builder Help.
| | 00:38 | The first time you open this application,
you'll probably see some dialog boxes
| | 00:43 | pop up that prompt you to download offline help.
| | 00:46 | If you click the appropriate buttons on
those online help dialog boxes, it will
| | 00:50 | result in downloading the current
version of the help for Flash Builder 4.
| | 00:54 | And then later on, if you are
working in Flash Builder, and you are not
| | 00:58 | connected to the Internet, you'll still
have access to the API help documents.
| | 01:02 | I am going to give you a little tour of
this new Adobe Community Help Application.
| | 01:07 | First of all, there are a number
of Preferences that you can set.
| | 01:10 | To set the Preferences, go to the
menu and choose Edit > Preferences.
| | 01:14 | In the General Settings, you can indicate
whether you want use the Dark or the Light theme.
| | 01:18 | I'll choose the Dark theme and click
Done to show you the difference, and you'll
| | 01:22 | see a different look and
feel for the application.
| | 01:26 | I'll go back to the Preferences
and switch back to the Light theme.
| | 01:30 | I'll go back to the Preferences dialog
again and show you that if you prefer,
| | 01:34 | you can open the help system in a Web Browser.
| | 01:37 | Once you select this option, you will no
longer be able to open up the Community
| | 01:41 | Help Application directly
from within Flash Builder.
| | 01:44 | As indicated in this note, you can
actually reopen the Community Help
| | 01:48 | Application again from your hard disk.
| | 01:50 | If you are working on Mac, you'll find
it under the Applications folder, and if
| | 01:55 | you are working on Windows, you'll
find it under the Program Files folder.
| | 01:59 | Next are the Download Preferences.
| | 02:01 | This is where you can indicate what
content you want to download and save
| | 02:04 | locally on your system.
| | 02:06 | Whenever the content changes online,
you'll be prompted, again, to re-download
| | 02:10 | and keep your local content up-to-date.
| | 02:13 | There are also categories for
Updater Settings and for Local Content.
| | 02:17 | When you are inside the Community Help
Application, you can open up the Action
| | 02:21 | Script 3.0 Reference.
| | 02:23 | And from there, you can click on any
of the links in the top-right corner.
| | 02:27 | Notice this message.
| | 02:29 | This is the ActionScript 3
Reference for the Flash Platform.
| | 02:32 | You can also get links for various
specific implementations of Flash or other
| | 02:37 | tools from the links on the screen.
| | 02:39 | You can get to the top-level Table of
Contents for the entire ActionScript 3
| | 02:43 | Reference by clicking on this link.
| | 02:46 | Up at the top of the screen, you'll find
a link that takes you to the equivalent
| | 02:50 | page on the Adobe website.
| | 02:52 | And if you click that link, it will
open the same page in a Web Browser.
| | 02:56 | So, if you prefer working in a Web
Browser interface, that's an easy way to get
| | 03:00 | there without disabling
the Help Application itself.
| | 03:03 | Now I'm going to keep this application
open and just switch back to Flash Builder.
| | 03:08 | The reason I keep the application open
in the background is because I frequently
| | 03:12 | look information up in the API
Documentation as I am coding.
| | 03:16 | There are so many classes and so many
styles, properties, events and so on, that
| | 03:21 | nobody can keep it all in their head.
| | 03:22 | Knowing how to find information quickly
in the API Documentation is critical to
| | 03:27 | being productive in Flex.
| | 03:30 | Let's say, for example, that I want
to look up the Documentation for the
| | 03:33 | Application Component.
| | 03:34 | I'll place the cursor inside that tag and
then press the keyboard shortcut Shift+F2.
| | 03:40 | This is the same keyboard
shortcut for both Windows and for Mac.
| | 03:45 | And the result will be that I come back
to the Community Help Application, and
| | 03:49 | the Documentation for that
component is displayed automatically.
| | 03:53 | I'll switch back to Flash Builder again,
and this time, I'm going to click into
| | 03:58 | a data type that's
declared in ActionScript code.
| | 04:00 | I'll look up the
Documentation for the String class.
| | 04:03 | Once again, I click into the name
of the class and press Shift+F2.
| | 04:08 | The Help Application comes to
the foreground, and I am taken to
| | 04:11 | that Documentation.
| | 04:13 | So, this is how you can quickly find
information for any ActionScript class or
| | 04:18 | for any MXML tag that
represents an ActionScript class.
| | 04:21 | You can also use the Search
capabilities of the Community Help Application.
| | 04:25 | Now this takes a little bit of fine-tuning.
| | 04:27 | Let's say, for example, that you
wanted to find information for the
| | 04:30 | Application Component.
| | 04:32 | You might type in the word
'Application' and then press Enter or Return, and
| | 04:36 | you'd find that you don't
get to the API Documentation.
| | 04:39 | Instead, you're taken to a whole series
of Documentation Sections and Articles
| | 04:45 | having to do with Building
Flex Applications in general.
| | 04:48 | If you want to get to the API Help for
a particular class, you have to type in
| | 04:52 | the entire package and class name.
| | 04:55 | For example, I'll type in
spark.components.Application and then, once again,
| | 04:59 | I'll press Enter or Return,
| | 05:02 | and now I'm taken to the API
Documentation for that Component.
| | 05:06 | This is a little bit clunky, because
the reason I look at the API Documentation
| | 05:10 | sometimes is to find out what the package is.
| | 05:12 | And so this is why the context-sensitive
Help within Flash Builder is so useful.
| | 05:17 | If you know how to get to the context-
sensitive Help, by simply placing the
| | 05:21 | cursor and then pressing the keyboard
shortcut, Shift+F2, you'll be able to
| | 05:25 | get all the API Documentation you need,
and it will be right there online on
| | 05:30 | your client's system.
| | Collapse this transcript |
|
|
4. Using Flash Builder Debugging ToolsUsing the debug version of Flash Player| 00:00 | Flash Builder 4 includes many
valuable tools for debugging and fixing your
| | 00:05 | applications during the development process.
| | 00:08 | In order to use these tools, you must
have the Debug version of Flash Player.
| | 00:12 | This version is installed
automatically when you install Flash Builder 4, but
| | 00:16 | there are many circumstances where you
might find that it's overwritten by other
| | 00:20 | installations, or you need to
update your copy of Flash Player.
| | 00:23 | Here are some of the ways you can
get the Debug version of Flash Player.
| | 00:28 | First of all, when you install Flash
Builder 4, the installation folder includes
| | 00:32 | a subfolder called player.
| | 00:35 | This will be the case
both on Windows and on Mac.
| | 00:38 | On Windows, the default location is
under C:Program Files/Adobe/Adobe Flash
| | 00:44 | Builder 4, while on Mac OS X, it's under
its Applications/Adobe Flash Builder 4.
| | 00:51 | From there, you can go down to the
player folder, and within that folder, you'll
| | 00:55 | find a folder for your Operating System.
| | 00:58 | I'm working on Windows 7, so
I have a folder called win.
| | 01:02 | Under that folder, I find three
executable installers, one for the ActiveX
| | 01:07 | version of Flash Player - that's the one
that works under Internet Explorer, and
| | 01:11 | one called Plugin - that's the version
that works under Netscape, Firefox and
| | 01:16 | other plug-in compatible browsers.
| | 01:19 | There is also an
application called FlashPlayer.exe.
| | 01:23 | This is called the standalone
version of Flash Player, and you can
| | 01:26 | double-click it to open it.
| | 01:28 | And from there, you can select File >
Open and open any SWF file to play it.
| | 01:34 | So, that's how you can reinstall Flash
Player on your system if you need to.
| | 01:39 | It's also very important that before
you use any of these installers that you
| | 01:43 | uninstall the existing versions of Flash Player.
| | 01:46 | On Windows, you can do
that from the Control panel.
| | 01:49 | On both Windows 7 and Windows Vista,
just go to Uninstall a program, and on
| | 01:55 | Windows XP, choose Add or Remove
Programs, and you'll find the various versions
| | 02:00 | of Flash Player there.
| | 02:02 | If you want to uninstall Flash Player
on Mac, you can download the appropriate
| | 02:06 | application from the Adobe website.
| | 02:08 | Go to www.adobe.com/go/14157.
| | 02:17 | That will take you to a knowledge-base
article that includes links that you can
| | 02:21 | use to download uninstallers for
Mac and other operating systems.
| | 02:26 | Now if you need a more recent version of Flash
Player, you can get it from the Adobe website.
| | 02:31 | The most common way to download Flash
Player from Adobe is to go to this URL,
| | 02:36 | get.adobe.com/flashplayer, but
this is not the version that you need.
| | 02:43 | This version is the Non-Debug, or
the standard version of Flash Player.
| | 02:48 | In order to get the Debug version of
Flash Player, go to the Adobe website and
| | 02:52 | click into the Search dialog and type
in 'debug flash player.' The first item
| | 02:59 | that shows up in my Search is
labeled Adobe Flash Player - Downloads.
| | 03:04 | I'll click that link,
and I am taken to this page
| | 03:07 | www.adobe.com/support/
flashplayer/downloads.html.
| | 03:16 | On this page, there are many
hyperlinks to download various versions of the
| | 03:20 | Flash Player, not just the most recent version.
| | 03:23 | As of the date of this recording, you'll
find installers going back to Flash Player 8.
| | 03:28 | And whenever Flash Player 10.1, the
newest version of Flash Player, is released,
| | 03:33 | which will be after Flash Builder
itself is released, a link for that version
| | 03:37 | of Flash Player will appear here as well.
| | 03:39 | At the top of the page, you'll find
links to the most recent version of
| | 03:42 | Flash Player, the Non-Debug version,
but if you scroll further down you'll
| | 03:46 | find the Debugger version.
| | 03:48 | Now again, if you want to ensure 100%
compatibility with your applications, just
| | 03:53 | install the Debugger version of Flash
Player that's included with your Flash
| | 03:57 | Builder installation.
| | 03:58 | Use these links if you need to go
back to previous versions or you need to
| | 04:02 | update to a newer version.
| | 04:04 | Finally, I'll show you how to find out
whether you have the Debug version of
| | 04:08 | Flash Player installed.
| | 04:10 | The easiest way is to go to
any Flash-enabled website.
| | 04:14 | I'll go to the Adobe website's homepage,
which always has a bit of Flash content.
| | 04:20 | To find out whether I have the Debug
version of Flash Player, I'll move the
| | 04:24 | cursor over any area of the Flash
content, and then I'll right-click, or
| | 04:29 | Ctrl+Click on Mac.
| | 04:31 | If you're running the Debug version
of Flash Player, you'll see a menu
| | 04:35 | choice labeled Debugger.
| | 04:37 | It doesn't matter whether it's enabled or not.
| | 04:39 | If the menu choice appears, then you are
running the Debug version of Flash Player.
| | 04:44 | If you want to find out exactly
which version of Flash Player you have
| | 04:47 | installed, choose the About menu choice.
| | 04:51 | That will take you to a webpage on the
Adobe website, and it will show you which
| | 04:56 | version of Flash Player you have installed.
| | 04:58 | I have version 10.0.42.34.
| | 05:03 | The first number is called the Major
version, the second, the Minor version, the
| | 05:07 | third is the Update, and the
last is the Maintenance Number.
| | 05:12 | So that's how you can find out which
version of Flash Player you have installed,
| | 05:16 | and also whether it's the Debug version.
| | 05:18 | Again, you must have the Debugger
version of the player installed in order to
| | 05:22 | use the Debug tools that are
included with Flash Builder 4.
| | Collapse this transcript |
| Starting and stopping debugging sessions| 00:00 | Once you've confirmed that you have the
debug version of Flash Player installed,
| | 00:04 | you can then use the debugging tools
that are a part of Flash Builder 4.
| | 00:08 | For the demonstrations in this chapter,
I'll use the set of Flex applications
| | 00:12 | that are included with the Exercise Files.
| | 00:15 | If you have access to the
Exercise Files, you can import them now.
| | 00:19 | Go to the menu and choose
File > Import Flex Project.
| | 00:23 | In the Import dialog box, Browse and
navigate to the Exercise Files folder.
| | 00:29 | I've placed it on my Desktop.
| | 00:31 | From there, go to 04_Debugging,
and from there, to the begin folder.
| | 00:36 | Locate, in the Import, a
file called Debugging.fxp.
| | 00:40 | I'll choose the project archive and
then click Finish to complete the Import.
| | 00:46 | I'll open up the package in
the Package Explorer view.
| | 00:50 | Open up the source folder, the
default package, and I'll start with the
| | 00:55 | file debugging.mxml.
| | 00:59 | I'm going to start by showing
you the Flash Debug Perspective.
| | 01:03 | This is the definition of a Perspective,
a particular arrangement of views and
| | 01:07 | editors that's included with Flash Builder 4.
| | 01:10 | To use the Flash Debug Perspective,
go to the menu and choose Window >
| | 01:15 | Perspective > Flash Debug.
| | 01:18 | Or if you've already been using
Perspectives, you might find a button for Flash
| | 01:22 | Debug at the top-right corner of
your interface labeled Flash Debug.
| | 01:27 | When you use the Flash Debug Perspective,
you'll see a number of views that you
| | 01:30 | haven't used before.
| | 01:32 | In the top-left corner is the Debug view.
| | 01:35 | The Debug view includes tools
on the toolbar that will let you
| | 01:38 | Terminate debugging sessions,
| | 01:40 | Resume existing debugging
sessions, and Step Into code.
| | 01:45 | I'll show you those in other videos.
| | 01:47 | In the top right corner, you'll find
the Variables view, the Breakpoints view
| | 01:51 | and the Expressions view.
| | 01:53 | At the bottom, you'll find the
Console view, the Data/Services view and the
| | 01:58 | Network Monitor view.
| | 02:00 | Of these, the only one that's not really
used for debugging is the Data Services view.
| | 02:05 | I'll be talking about this view at the
end of this video course, when we talk
| | 02:08 | about working with application servers.
| | 02:11 | For now, I'm going to remove it from this
Perspective, by just clicking the X icon on the tab.
| | 02:17 | The Console view is used to
output debugging messages.
| | 02:21 | When you run an application in Debug mode,
you'll see messages appear in the bottom.
| | 02:25 | My Console is displaying debugging
messages already, because I've been running
| | 02:29 | debugging sessions in the past.
| | 02:31 | To start a debugging session, open
an application and then go to the menu
| | 02:35 | and choose Run and then Debug, and
the name of the application that you
| | 02:40 | currently have open.
| | 02:41 | You'll also see that there is
a keyboard shortcut available.
| | 02:44 | It's F11 on Windows and Command+F11 on Mac.
| | 02:49 | You can also start a debugging
session from the toolbar by clicking on the
| | 02:52 | button with a picture of a bug on it,
or if you have multiple applications in
| | 02:57 | your project, you can pull down the menu and
choose an application that you want to debug.
| | 03:01 | I'll run an application in Debug mode
by clicking the button on the toolbar.
| | 03:08 | Now once you're in the browser, you really
can't tell that you're in a debugging session.
| | 03:12 | The URL, for example, looks exactly the
same, and the application looks the same.
| | 03:17 | But now, I'm going to switch back to
Flash Builder by pressing Alt+Tab on
| | 03:21 | Windows, or Command+Tab on Mac.
| | 03:24 | If I now look at the Debug view,
I'll see that most of the buttons on the
| | 03:28 | toolbar have come to life:
| | 03:30 | the Suspend button, which temporarily
causes the application to suspend its
| | 03:34 | operation, the Resume button, which
causes the application to resume, Stepping
| | 03:40 | buttons, which are disabled, because I
don't have any code to Step Into yet, and
| | 03:44 | other buttons that let you
navigate through the application.
| | 03:47 | Here is a very important button
that I want to point out right away,
| | 03:50 | the Terminate button.
| | 03:51 | When you run an application in Debug mode,
it's called running a debugging session.
| | 03:56 | The Terminate button allows you to
stop the debugging session and go back to
| | 04:00 | more of a normal Flash Builder editing mode.
| | 04:02 | The Terminate button is displayed in
two places in your user interface, both in
| | 04:07 | the Debug view where my cursor is
pointing now and also in the Consol view, where
| | 04:12 | it shows up also enabled.
| | 04:14 | You can click either of these
buttons to terminate the debugging session.
| | 04:18 | Now when I click the button,
watch what happens to my browser.
| | 04:22 | I'm going to arrange my Windows so you
can see both on the screen at the same time.
| | 04:27 | I'll use one of my
favorite new Windows 7 techniques.
| | 04:30 | I'll click and drag the browser all
the way over to the right corner and then
| | 04:34 | drop it, and it will snap into place,
taking up one half of the interface.
| | 04:38 | Then I'll go to Flash Builder interface and
do the same thing, dragging it to the left.
| | 04:45 | Now they are each taking up half of the screen.
| | 04:47 | That's a Windows 7 trick
| | 04:48 | you won't have it available on Vista or
Windows XP, or on Mac for that matter,
| | 04:52 | but either way, arrange your
windows so you can see both applications.
| | 04:57 | Now I'm going to terminate the
debugging session by clicking the button.
| | 05:01 | If you're using Windows and Firefox
as I am, when you click the Terminate
| | 05:05 | button, you'll see that the browser closes.
| | 05:08 | That doesn't happen on all
operating systems in all browsers.
| | 05:12 | But even if it doesn't close the
browser, it does terminate the connection
| | 05:16 | between Flash Builder and the browser.
| | 05:18 | Now I'm going to run the
application in Debug mode again.
| | 05:21 | I'll choose Run > Debug, and
that opens the browser again.
| | 05:27 | I'm going to make sure that I
only have this one tab open.
| | 05:32 | I'll click and once again,
drag over, and snap into place.
| | 05:37 | Now this time, I'm going to close the
browser, and watch what happens to all the
| | 05:41 | buttons on the Debug view.
| | 05:43 | When I close the browser, that, once
again, terminates the connection between
| | 05:47 | the browser and Flash Builder, and
again, terminates the debugging session.
| | 05:51 | So, when I say terminate the
debugging session, you can either go to Flash
| | 05:56 | Builder and Terminate, or you
can simply close the browser.
| | 06:00 | If you're working on an Adobe AIR
desktop application, debugging works
| | 06:04 | exactly the same way.
| | 06:06 | If you terminate from Flash Builder,
you'll end up closing the application.
| | 06:10 | If you close application, you'll
terminate the debugging session in Flash Builder.
| | 06:15 | So those are the basics about
navigating the Debug Perspective and starting and
| | 06:19 | stopping a debug session.
| | Collapse this transcript |
| Tracing application execution| 00:00 | One of the simplest and most valuable
tools you have available in Flash Builder
| | 00:04 | and Flash Player is the trace function.
| | 00:07 | The trace function allows you to send
a debugging message to Flash Builder's
| | 00:11 | Console view at run time.
| | 00:13 | You can use the trace function to
output values of variables and to tell you
| | 00:17 | when particular bits of code execute, so
you can trace the flow of execution in a
| | 00:22 | Flex application at run time.
| | 00:24 | For this demonstration, I'll use the
application traceDemo.mxml, which is
| | 00:29 | included in the debugging
project of the Exercise Files.
| | 00:33 | If you have access to the
Exercise Files, open the application now.
| | 00:38 | In this application, I'm listening
for an event called creationComplete.
| | 00:43 | I've described this event previously.
| | 00:45 | It's dispatched by the application to
tell you when the application has opened
| | 00:50 | up in Flash Player and is
completely available for use.
| | 00:53 | Inside the method, I'm setting the text
property of a label control to the value
| | 00:58 | of a variable strHeadline.
| | 01:01 | Now I'm going to show you how to add a
trace command to simply tell you when
| | 01:05 | the event is occurring.
| | 01:08 | I'll place the cursor after the bit of
code inside the function, and I'll call trace.
| | 01:14 | The trace function is called a top
-level function in Flash Player.
| | 01:18 | That means that it's built into Flash
Player, and you don't need to reference an
| | 01:22 | object with dot notation.
| | 01:24 | For example, I don't have to say
Player.trace or anything like that.
| | 01:29 | I simply call the trace function.
| | 01:31 | When you call the trace function, you
can then pass in a simple string or a
| | 01:35 | concatenation, or combination
of values that result in string.
| | 01:39 | I'm going to pass in a literal
string of creation complete event.
| | 01:46 | At the end of the call to the trace
function, I'll put in the semicolon to
| | 01:49 | terminate the statement.
| | 01:51 | Then I'll save and run the
application, being sure to run it in Debug mode.
| | 01:57 | Before I run the application, though,
I'll make sure that I can see all of my
| | 02:00 | views surrounding the Editor region.
| | 02:04 | I'll click the Debug button on the
toolbar, and if prompted to save.
| | 02:08 | I'll click OK, and then the
application runs in the browser.
| | 02:14 | In the background, because of the way
I have my windows arranged, I can see
| | 02:18 | the Console view appears in Flash
Builder and my trace message appears,
| | 02:22 | creation complete event.
| | 02:24 | So, the trace method results in sending
this message over to the Console view so
| | 02:29 | I can find out what happened.
| | 02:31 | Now I'm going to terminate the
debugging session and show you another use of
| | 02:34 | the trace function.
| | 02:35 | I'll go to the button
with the label of Trace Me.
| | 02:39 | I'll place the cursor at the end of
all of the attributes but before the
| | 02:42 | closing slash character.
| | 02:44 | I'll press Spacebar, and then from the
list of available attributes, I'll type
| | 02:49 | in 'cl,' and I'll choose the click
event, moving the cursor to it and then
| | 02:54 | pressing Enter, or Return.
| | 02:57 | Then I'll press Enter, or Return, one more
time to generate the function that will
| | 03:01 | be called when the click event happens,
| | 03:03 | that is when the user clicks the button.
| | 03:05 | Here is the generated function.
| | 03:08 | It's named automatically button1_clickHandler.
| | 03:13 | Now I'll select and delete the
automatically-generated comment code and replace
| | 03:18 | it with another call to the
trace function that looks like this.
| | 03:21 | Trace and then I'll type in a literal
string of The value of strHeadline is.
| | 03:29 | I'll make sure I put an extra space
at the end and then close the string
| | 03:33 | with a double quote.
| | 03:35 | Then I'll put in the Plus operator,
which will be in this context, the
| | 03:38 | concatenation operator.
| | 03:41 | Then I'll output the value
of the variable strlHeadline.
| | 03:46 | Notice that the entire expression,
that is the literal string and a variable
| | 03:51 | combined with the Plus operator,
| | 03:53 | are wrapped inside parentheses.
| | 03:54 | I'll once again, save my file.
| | 03:57 | This time, I'll use the keyboard
shortcut, Ctrl+S on Windows, or Command+S on Mac.
| | 04:02 | I'll once again, Debug the application.
| | 04:05 | Now watch what happens in the Console
view, in the background, whenever I click
| | 04:09 | the button labeled Trace Me.
| | 04:12 | Every time I click, the value that I
pass into that trace function is output
| | 04:16 | in the Console view.
| | 04:17 | The trace function gives you a way of
finding out not only when certain code is
| | 04:21 | being executed, but also easily
outputting the values of various variables.
| | 04:26 | The one restriction about it is that any
value that you pass into the trace function
| | 04:30 | must be serializable, or
convertible to a string.
| | 04:33 | I'll show you one more example.
| | 04:35 | I'll do this work, once again, in the
to clickHandler function of the button.
| | 04:40 | I'll place the cursor after the first
trace function, and then I'm going to
| | 04:44 | declare a variable data typed as an array.
| | 04:46 | This is a more complex type of
variable than we've seen before.
| | 04:50 | An array is an ordered collection of values.
| | 04:54 | I'll create a variable with the
keyword var, and I'll name the
| | 04:57 | variable (stooges:Array).
| | 05:04 | Here is a bit of shorthand that lets you
create an array very simply and easily.
| | 05:08 | I'll start with an opening square
bracket, and then I'll type in a series of
| | 05:12 | values separated with commas:
| | 05:14 | "Moe", "Larry", and "Curley".
| | 05:22 | Then I'll output the value of that
array by using the trace function.
| | 05:26 | I'll type in trace(stooges).
| | 05:30 | Now an array is a complex object.
| | 05:32 | It's not a string, but if the values in
the array are simple values, the entire
| | 05:37 | array can be serialized, or
converted to a string automatically by the
| | 05:41 | ActionScript Virtual Machine.
| | 05:44 | I'll save my changes and run
the application in Debug mode.
| | 05:50 | I'll check my Console to make sure
that my initial trace message is being
| | 05:54 | displayed, and then I'll click
Trace Me, and here is the result.
| | 05:58 | In the Console, I get The value
of strHeadline is Hansel & Petal.
| | 06:04 | I get this serialized version of the array,
Moe, Larry and Curley separated with commas.
| | 06:09 | So when you use the trace
function, here is the rule.
| | 06:12 | You can either pass in a literal string,
a variable that can be turned into a
| | 06:15 | string, or any other complex
object that can be turned into a string.
| | 06:20 | Either way, it will be
automatically shown in the Console view.
| | 06:24 | There are ways of targeting the output
of the trace function to other debug or
| | 06:28 | what are called logging targets.
| | 06:30 | This is an advanced technique, but,
for example, in an Adobe AIR application
| | 06:35 | where you have access to the local
hard disk, it's possible to redirect the
| | 06:39 | output of the trace function
to a text file on the disk.
| | 06:43 | It's even possible with a couple of
little configuration changes to make the
| | 06:47 | output of trace appear in the text file
that's created automatically by Flash Player.
| | 06:51 | Those are advanced techniques, though.
| | 06:53 | If you're just getting started with
Flex, this is the easiest way to use the
| | 06:57 | trace function, outputting
strings to the Console view.
| | Collapse this transcript |
| Using breakpoints| 00:00 | Flash Builder 4 and the debug version of
Flash Player have the ability to use Breakpoints.
| | 00:06 | Breakpoints give you a way of
suspending the application's execution
| | 00:09 | temporarily, so that you can examine
its internal state, including looking at
| | 00:14 | values of variables, view states, and so on.
| | 00:18 | For this demonstration, I'll use the
application Breakpoints.mxml that's
| | 00:22 | included with the Debugging
project of the Exercise Files.
| | 00:26 | I'll open the application and expand it
to fullscreen by double-clicking its tab.
| | 00:31 | In this application, I have a button
with a label of Debug, and when the user
| | 00:36 | clicks the button, it executes this
function, which sets a simple variable data
| | 00:41 | typed as an 'int,' or integer.
| | 00:46 | Now there are a few different ways of
setting a debug Breakpoint in Flash Builder.
| | 00:51 | One way is to go to the line where you
want to freeze or suspend the application.
| | 00:55 | And then double-click to the left of the
line number - that shows a little round
| | 01:00 | icon - and that's the Breakpoint.
| | 01:02 | When you double-click again, it takes it away.
| | 01:05 | You can also right-click on the same
location and choose Toggle Breakpoint.
| | 01:10 | Right-click again, Toggle it
again, and that takes it away.
| | 01:13 | There is also a keyboard shortcut,
Ctrl+Shift+B on Windows, or Command+Shift+B
| | 01:20 | on Mac, and that does, yet again, the same
thing, turning the Breakpoint on and off.
| | 01:25 | Now, you can't set a Breakpoint just anywhere.
| | 01:28 | The rule is fairly simple though.
| | 01:30 | You can set a Breakpoint on any
line that includes ActionScript code.
| | 01:34 | For example, this line includes a
declaration of a variable, so that would be okay.
| | 01:39 | You can also set Breakpoints
on the last line of a function.
| | 01:43 | That's the line that includes
the Closing Brace character.
| | 01:47 | But you can't set Breakpoints on lines that
only have an MXML code but no ActionScript.
| | 01:52 | So for example, if I try to set a
Breakpoint here on line 19, where I only have
| | 01:57 | the beginning tag and a text property,
while Flash Builder shows the Breakpoint
| | 02:01 | icon, it won't succeed in
freezing the application at Debug time.
| | 02:07 | Now to show you how to use your first
Breakpoint, double-click on the line that
| | 02:12 | includes the variable declaration, and
you should see the little bubble that
| | 02:15 | shows the Breakpoint up here.
| | 02:17 | Then before you run the application,
make sure that your editor is restored, so
| | 02:22 | you can see all the other views around it.
| | 02:24 | That'll help you get into the
debugging perspective most easily.
| | 02:28 | Also, to reproduce what I'm about to
show you, make sure you're in the Flash
| | 02:32 | perspective, not the Flash Debug perspective.
| | 02:35 | Then Run the application in Debug mode.
| | 02:39 | The application opens up in the browser
and shows the Label and the Debug button.
| | 02:44 | Now, when I click the Debug button,
that will cause the ActionScript Virtual
| | 02:48 | Machine to hit the line of code
where I've placed the Breakpoint.
| | 02:51 | I'll click the button and over in Flash
Builder, I'll see a dialog box appear.
| | 02:57 | If it doesn't actually take focus,
just switch over to Flash Builder.
| | 03:02 | I've just clicked on the dialog box in
the background to bring the focus forward.
| | 03:06 | Here is the message you're getting.
| | 03:08 | Flash Builder is telling you that the
kind of launch you're doing, specifically
| | 03:12 | a Breakpoint execution, should open the
Flash Debug perspective, and it asks you
| | 03:17 | if you want to do that right away.
| | 03:19 | If you always want to go to the Debug
perspective when you hit a Breakpoint,
| | 03:23 | click on this option, Remember my decision.
| | 03:26 | I'm going to leave the option unchecked
so I can show you, in future videos, how I
| | 03:30 | get back to the debugging perspective
during a Breakpoint, but I'll click Yes
| | 03:34 | for now, and that will take
me to the Debug perspective.
| | 03:38 | So, in the Editor view, which is now in
the vertical middle of the interface, I
| | 03:43 | now see a highlight bar, showing me
which line of code is about to be executed.
| | 03:48 | To step through the code, go to the
Debug view, and you can now use one of
| | 03:53 | these three buttons:
| | 03:55 | Step Into, Step Over, and Step Return.
| | 04:00 | If I click the Step Over button, that will
execute that line of code and go to the next line.
| | 04:05 | In a more extensive function, if I've
already done all the inspection work that
| | 04:09 | I want to, and I want to continue
running the application, all I need to do is
| | 04:14 | click the Resume button, or press
the associated keyboard shortcut.
| | 04:18 | When you click Resume, it won't
automatically take you back to the browser.
| | 04:22 | You have to do that part yourself.
| | 04:24 | I'll press Alt+Tab on
Windows, or Command+Tab on Mac.
| | 04:28 | Go back to the browser, and
I'll see that the browser is live.
| | 04:31 | Now, I'll click Debug again to execute
the Breakpoint again, because I want to
| | 04:35 | show you what happens to the browser
while you have the application suspended.
| | 04:39 | Notice that in the browser, if I try to
click the button, that brings focus to
| | 04:44 | Flash Player and to the browser, but
it can cause a lot of problems, such as
| | 04:48 | freezing Flash Player and disabling the browser.
| | 04:51 | In this case, when I double-clicked,
that caused Flash Player some confusion.
| | 04:56 | I've got my browser in a
bad state at this point.
| | 04:59 | So, to terminate the debugging session,
I'll come back to Flash Builder and
| | 05:03 | click the Terminate button.
| | 05:05 | That closes the browser,
and I can start over again.
| | 05:09 | Here is another little trick you can use,
once you have gotten into breakpoints.
| | 05:12 | If you want to start up an application
again, you can either go through the same
| | 05:16 | steps as before - going to the Editor
view for the application and running the
| | 05:21 | Debug session from the menu or from the
toolbar, or you can go to the Debug view
| | 05:27 | and locate a terminated debugging session.
| | 05:30 | Then right-click on the debugging
session, or Control+Click on Mac, and choose
| | 05:35 | Relaunch, and that will cause the
application to run again from the beginning.
| | 05:41 | So that's a look at how
to use basic Breakpoints.
| | 05:44 | Here is one other trick that you can use.
| | 05:47 | The Breakpoints view, which is shown
in the tabbed interface in the upper
| | 05:51 | right-hand corner of the Flash Debug
perspective, has a listing of all of the
| | 05:55 | Breakpoints they you have set.
| | 05:57 | You can right-click on any Breakpoint,
or Ctrl+Click on Mac, and choose a
| | 06:02 | Breakpoint Properties.
| | 06:04 | In Flash Builder 4, there are some new
features having to do with Breakpoints.
| | 06:08 | One of the most valuable is the
ability to set conditions for a Breakpoint.
| | 06:12 | For example, if I only want to
respect a Breakpoint, that is suspend the
| | 06:17 | application when a particular condition
is true, I can do it like this.
| | 06:22 | I can type in an ActionScript expression,
i==1, and as a result, that Breakpoint
| | 06:28 | will only be respected when those
two values match. I'll click OK.
| | 06:35 | Notice in the Breakpoints view, that the
Breakpoint is now shown as being been conditional.
| | 06:40 | I'll Run the application and click the button.
| | 06:47 | You'll see that the Breakpoint is not respected.
| | 06:49 | The reason is because the Breakpoint
has been placed at the beginning of the
| | 06:53 | statement, rather than after it.
| | 06:56 | The variable value does
not yet have a value of 1.
| | 06:59 | So, if I want the Breakpoint to be
respected, I would change the condition from
| | 07:03 | i=1 to i=0, because that is
the default value of an integer.
| | 07:10 | So, conditional Breakpoints are a
new feature of Flash Builder 4, and
| | 07:13 | Breakpoints in general are incredibly
valuable for freezing the application at
| | 07:17 | run time and seeing what's going on
inside the application, including checking
| | 07:22 | variable values and checking view states
and anything else having to do with the
| | 07:27 | application's internal state.
| | Collapse this transcript |
| Using the Variables view| 00:00 | When you use debugging sessions and
breakpoints, it gives you an opportunity to
| | 00:04 | look at the state of internal values,
or variables, inside a Flex application.
| | 00:09 | For this demonstration, I'll use the
application Variables.mxml, which is
| | 00:14 | included in the debugging
project in the exercise files.
| | 00:18 | I have the file open on the screen already.
| | 00:21 | Notice, in this version of the
application, that there is a function that gets
| | 00:25 | executed when the user clicks a button.
| | 00:28 | Within the function, it declares a
variable called myVar as an integer, and sets
| | 00:33 | its initial value to 1.
| | 00:35 | I'll set a breakpoint on the line that
declares and sets the variable's value.
| | 00:40 | Then I'll return the Editor to its original
size and run the application in Debug mode.
| | 00:48 | I'll click the Debug button, and that
causes me to come back to Flash Builder,
| | 00:53 | and I'll click Yes to go into
the Flash Debug perspective.
| | 00:58 | In the top-right corner of Flash
Builder, in the Tabs section, you'll find a
| | 01:02 | view called Variables.
| | 01:04 | This view has a tree organization that
lets you examine the values of variables
| | 01:09 | and of properties of all the objects
in your Flex application at the moment
| | 01:14 | where the application is
suspended at the breakpoint.
| | 01:17 | Now, I'm going to expand the size
of the Variables view to fullscreen.
| | 01:21 | I'll double-click on its tab, or you
can click once on the tab, and then press
| | 01:26 | Ctrl+M on Windows, or Command+M on Mac.
| | 01:30 | Notice that the variable value
is initially set as undefined.
| | 01:35 | If I look at the code that's being
executed and the position of the breakpoint,
| | 01:39 | I'll find something called
the Current Instruction Pointer.
| | 01:42 | This tells you where the debug
breakpoint is currently suspended.
| | 01:46 | Because I've suspended the application
before that line of code is executed, the
| | 01:51 | value of the variable int is
undefined, rather than a value of 1.
| | 01:55 | Now I'll rearrange everything so I can
see both the Variables view and the code.
| | 02:01 | Then I'll go to the Debug view,
and I'll click the Step Over button.
| | 02:05 | When I click that button, the line of
code is executed, and the value of the
| | 02:09 | variable is changed to 1.
| | 02:11 | Now, I'll add a little bit of code, so
we can see the use of a breakpoint and
| | 02:15 | the Variables view in a little more useful way.
| | 02:19 | I'll terminate the debugging session.
| | 02:22 | Then I'll double-click the Editor tab
to expand it to fullscreen, and I'll add
| | 02:27 | some new code into the function.
| | 02:29 | After the initial setting of the
variable, I'll add a few lines of code that
| | 02:33 | each increment the value of the variable by 1.
| | 02:35 | I'll use this shorthand expression, myVar ++.
| | 02:41 | Now, I'll clone that line of code, like this.
| | 02:44 | On Windows, I'll hold down Ctrl+Alt,
on Mac Command+Option, and then press
| | 02:51 | the down arrow key.
| | 02:53 | Each time you do that, you'll be
cloning the current line of code.
| | 02:57 | You can also clone upwards by holding
down the same keys, Ctrl+Alt on Windows or
| | 03:03 | Command+Option on Mac,
and pressing the Up arrow.
| | 03:06 | Once again, I've set my initial breakpoint
right before the first line of code is executed.
| | 03:12 | I'll save and once again, run
the application in Debug mode.
| | 03:22 | I'll click the Debug button, and that
takes me, once again, into the breakpoint.
| | 03:27 | I'll make sure that I can see all of my views.
| | 03:30 | I'll click into the Editor view and
scroll down a bit, so I can see where the
| | 03:34 | Current Instruction Pointer is.
| | 03:37 | Then, once again, I'll click
the Step Over button a few times.
| | 03:40 | Watch what happens in the Variables
view when the myVar variable value changes.
| | 03:46 | Each time I click, the value changes
from undefined to 1, to 2, to 3, to 4.
| | 03:55 | Then when I'm done executing the
application, I can click the Resume button.
| | 03:59 | Now, I'll show you one other very
important thing to know about the nature
| | 04:02 | of the Variables view.
| | 04:04 | I'll terminate the debugging session
and return to the Flash perspective.
| | 04:10 | I'm going to declare an additional
variable, this time outside of the
| | 04:13 | clickHandler function, and it's
going to be a complex variable.
| | 04:16 | I'll type in the word 'Protected' as
the access modifier, then var, then, once
| | 04:22 | again, I'll create my stooges array,
which I used in a previous exercise.
| | 04:30 | Now, once again, I'm going to run the
application in Debug mode and then click
| | 04:35 | the Applications button
to trigger the breakpoint.
| | 04:40 | I'll go to the Flash Debug perspective
and show you that the variable stooges,
| | 04:44 | which I declared outside of the
functions, is not displayed in the default
| | 04:48 | presentation of the Variables view.
| | 04:51 | To see it, I'm going to expand
the Variables view to fullscreen by
| | 04:54 | double-clicking its tab, and then
I'll go to the item labeled "this".
| | 04:59 | In the context of a Flex main
application file, the expression "this" refers to
| | 05:04 | the application itself.
| | 05:06 | When you declare a variable outside
of any functions, that variable is a
| | 05:10 | property of the application object.
| | 05:14 | I'll expand this and show you that
the variable stooges appears right here.
| | 05:19 | If I expand that, it will show me the actual
values, or items, in the array, 0, 1, and 2.
| | 05:26 | There are couple of things to
learn from this demonstration.
| | 05:29 | One is that variables that you declare
outside of functions are properties of
| | 05:33 | the application, or if you're working
within an MXML component, as I'll show
| | 05:37 | you in another video, that they are
properties of the instance of the current component.
| | 05:42 | These variables don't show up at
the top-level of the Variables view.
| | 05:46 | Instead, they are shown under this, which
refers to the application object itself.
| | 05:52 | You can also find any other
properties of the application.
| | 05:55 | For example, this application has
an object, which is a Label Control.
| | 06:01 | It has an ID of headline, and
it also shows up under "this."
| | 06:06 | You can open up, or drill down, into
the object to see all of its properties,
| | 06:11 | styles, and other settings.
| | 06:14 | So for example, I'll scroll down
through all these different items until I find
| | 06:19 | the text property of the Label, and it
shows me its value is "Hansel and Petal".
| | 06:25 | So, the Variables view gives you
access not just to top-level variables that
| | 06:30 | you might declare within a function,
but also to all of the properties of your
| | 06:33 | application and also to all of the
visual objects that are child DisplayObjects
| | 06:38 | to the application.
| | 06:40 | You can navigate through the
Variables view as much as you want.
| | 06:44 | In fact, you can either recursively move around.
| | 06:47 | So, for example, if I go to the parent
property of the Label Control, that takes
| | 06:52 | me to a Group component
that's wrapped around the Label.
| | 06:55 | If I go from there into the inherited
section, and once again, scroll all the
| | 07:01 | way down to the parent, and then all
the way down again, if I keep going far
| | 07:06 | enough, I'll end up back at the application.
| | 07:09 | The Variables view gives you a
recursive, tree-oriented display that lets you
| | 07:14 | find the value of any
property, any style, any object.
| | Collapse this transcript |
| Watching ActionScript expressions| 00:00 | A Watch Expression is an ActionsScript
Expression that you can evaluate at run
| | 00:04 | time in the Expressions view.
| | 00:06 | The Expressions view appears, by
default, in the Flash Debug perspective.
| | 00:10 | I'll switch to that perspective by
clicking on the Flash Debug button that
| | 00:14 | currently appears in my
perspective selector area.
| | 00:18 | The Expressions view appears in the top
-right corner of the interface, in the
| | 00:22 | same tabbed area as Variables and Breakpoints.
| | 00:25 | I'll switch back to the Flash
perspective and open an application named
| | 00:29 | WatchExpressions.mxml
from the Debugging project.
| | 00:33 | In order to evaluate a Watch
Expression, you place the Expression in
| | 00:37 | the Expressions view.
| | 00:38 | There are a couple of ways of doing that.
| | 00:41 | Let's start with this variable, stooges.
| | 00:43 | It's declared outside of any
properties, and so therefore is a persistent
| | 00:47 | property of the application.
| | 00:49 | As I've shown in other videos, I can
evaluate this variable in the Variables
| | 00:53 | view, but I have to drill down
a couple of layers to find it.
| | 00:57 | To make it easier to work with,
I'll add it to the Expressions view.
| | 01:01 | I'll double-click to select the
variable name, and then I'll right-click on
| | 01:04 | the variable name, or Ctrl+Click
on Mac, and I'll choose Create Watch
| | 01:09 | Expression from the menu.
| | 01:11 | I'm currently in the Flash
perspective, and the Expressions view is
| | 01:14 | automatically added to the
interface in the lower area.
| | 01:18 | If I switch to the Flash Debug
perspective, I'll see that it appears in
| | 01:22 | the top-right area.
| | 01:24 | You can also add Expressions to the
Expressions view by right-clicking on the
| | 01:28 | view and choosing Add Watch Expression.
| | 01:32 | Here, you can type in any complex Expression.
| | 01:34 | For example, if I type in this.width,
that means I want to see the current width
| | 01:40 | of the application when it's suspended.
| | 01:43 | Notice I'm not pressing Enter or
Return at the end of the string.
| | 01:46 | That's very important.
| | 01:48 | I'll click OK, and now I have
two Expressions to evaluate.
| | 01:53 | Finally, I'll scroll-down in the code to
the function that will be called when I
| | 01:57 | click the button in the
application, and I'll add a breakpoint.
| | 02:01 | This will allow me to easily suspend the
application, and examine my Expressions.
| | 02:06 | Now, I'll run the application in Debug mode.
| | 02:10 | When the application appears in the
browser, I'll click the Debug button, and
| | 02:14 | that will bring me back to Flash Builder,
and I'll be in the Debug perspective.
| | 02:18 | Here is the Expressions view.
| | 02:21 | The stooges variable appears because I right-
clicked on it, and chose Add Watch Expression.
| | 02:28 | You'll see that you can actually examine
very complex objects, including arrays,
| | 02:32 | objects, data collections and so on.
| | 02:36 | Here's my this.width Expression.
| | 02:39 | It shows the width of the application in pixels.
| | 02:42 | So that's a simple look at
how to work with Expressions.
| | 02:45 | You can add as many Expressions
into the Expressions view as you want.
| | 02:49 | Expressions are managed on a per project basis.
| | 02:52 | If you're working with multiple
applications, that means that when you switch to
| | 02:56 | another application in the same project,
the Expressions that you've placed in
| | 03:00 | this view won't automatically go away.
| | 03:02 | To remove them, just select one at
a time, and click Remove Selected
| | 03:06 | Expressions, or you can click the
Remove All Expressions button, and that will
| | 03:11 | remove them all from the Expressions view.
| | 03:14 | Once again, Expressions can only be
used when the application is suspended
| | 03:18 | during the breakpoint, but you can use
as many as you want, and you can use very
| | 03:23 | complex Expressions, much more
complex than you could in Flex Builder 3.
| | Collapse this transcript |
| Using watchpoints to detect state changes| 00:00 | A WatchPoint is a new
feature of Flash Builder 4.
| | 00:04 | WatchPoints allow you to watch
particular expressions in your Flex
| | 00:07 | application and suspend the
application when the value of that expression
| | 00:11 | changes at run time.
| | 00:13 | To demonstrate WatchPoints, I'll use
the application file WatchPoints.mxml,
| | 00:18 | which is in the debugging
project of the Exercise Files.
| | 00:21 | In this application, a variable called
strHeadline is declared outside of any
| | 00:26 | functions and is therefore a
persistent property of the application.
| | 00:31 | This variable has an initial value of Hansel
and Petal with the word 'and' in the middle.
| | 00:35 | As the application starts up, a
function called resetHeadline is called and
| | 00:40 | inside this function, the value of
that variable is applied to the label.
| | 00:46 | As a result, when you run the application,
initially, the label shows that value,
| | 00:51 | Hansel and Petal with the word 'and.'
| | 00:54 | Now returning to the code, when the
user clicks the button labeled Change
| | 00:58 | Headline, we call this function, which
changes the value of strHeadline, recalls
| | 01:04 | resetHeadline and once again, changes the label.
| | 01:08 | So, demonstrating the application again,
initially, it shows Hansel and Petal
| | 01:13 | with the word 'and,' and when I click
the button, changes it to the ampersand.
| | 01:19 | Now here is the demonstration of a WatchPoint.
| | 01:21 | You can only set a WatchPoint when the
application is suspended at a breakpoint.
| | 01:25 | So, I am going to set a breakpoint
right here, at the line that declares
| | 01:30 | the variable myVar.
| | 01:32 | That will allow me to suspend the
application upon a button click.
| | 01:36 | Then I'll restore the editor to regular
size and run the application in Debug mode.
| | 01:43 | When the application shows up, I'll
click the Debug button and then return to
| | 01:47 | Flash Builder and switch to
the Flash Debug perspective.
| | 01:51 | In the Flash debug perspective, I'll
double-click the Variables view, so I can
| | 01:56 | see all of my variables.
| | 01:59 | Then if it isn't already expanded,
open up the tree branch labeled "this" and
| | 02:04 | locate the strHeadline variable, right-click
on the variable and choose Toggle Watchpoint.
| | 02:11 | Now, whenever the value of that
variable changes, the application will be
| | 02:15 | suspended, and I'll return to Flash Builder.
| | 02:17 | I'll restore the size of the Variables view and
then click the Resume button in the Debug view.
| | 02:27 | Then pressing Alt+Tab on Windows or Command+
Tab on Mac, I'll switch back to the application.
| | 02:33 | Next, I'll click the button Change Headline.
| | 02:36 | This results in changing the value of
the variable, and I immediately come back
| | 02:41 | to Flash Builder, and I am shown that
the current instruction pointer is placed
| | 02:45 | on the line of code right
after that variable was changed.
| | 02:49 | So that's how you use WatchPoints.
| | 02:51 | Once again, you can only define a
WatchPoint when the application is already
| | 02:56 | suspended at a breakpoint.
| | 02:58 | You go to the Variables view and you
locate the expression that you want to watch.
| | 03:02 | You right-click, choose Toggle Watchpoint
and then resume running the application.
| | 03:08 | Whenever that variable's value changes,
the application will be suspended, and
| | 03:13 | you will be able to inspect everything
about the application's internal state.
| | Collapse this transcript |
|
|
5. Using Visual ControlsUnderstanding MX and Spark components| 00:00 | One of the most important new
features in the Flex 4 SDK is a new set of
| | 00:05 | components known as the Spark components.
| | 00:08 | We still use many older components from Flex 3.
| | 00:11 | These are now known as the mx components,
and they still use the mx namespace prefix.
| | 00:17 | For example, we still
use the DataGrid component.
| | 00:20 | There isn't a Spark version of that in
Flex 4, and it's still declared within
| | 00:24 | the mx prefix before the name of the control.
| | 00:28 | The Spark components are new to Flex 4, and
they use the namespace prefix 's,' as in Spark.
| | 00:35 | In this example, I'm declaring an
instance of the RichEditableText control
| | 00:40 | using the Spark prefix.
| | 00:42 | This is a list of some the
most commonly used new components.
| | 00:46 | You'll notice many of the component names
match older components that we used in Flex 3.
| | 00:51 | For example, Application and
WindowedApplication are new versions of the primary
| | 00:56 | Application containers.
| | 00:59 | There're also new components that
have names different than Flex 3.
| | 01:02 | For example, Group, VGroup and
HGroup are non-skinned containers;
| | 01:08 | that is their designed to layout
their contents but not have any visual
| | 01:12 | appearance of their own.
| | 01:14 | And there's a new container called
DataGroup that's used to accomplish a lot of
| | 01:18 | the same functionality as
the old Repeater component.
| | 01:21 | The BorderContainer is new to Flex 4.
| | 01:24 | It's designed to render a rectangular
area that contains other content and whose
| | 01:28 | visual appearance can be defined
using simple style declarations.
| | 01:32 | There's a new version of the panel
container and a new container called
| | 01:36 | NavigatorContent that's specifically
designed for use with the ViewStack,
| | 01:40 | TabNavigator and AccordionContainers.
| | 01:44 | And there's a new version of the Window
Container, designed for creating native
| | 01:48 | Windows in Adobe AIR desktop applications.
| | 01:51 | The Spark components include many new controls.
| | 01:54 | They are new versions of the Button and
ButtonBar, a completely new control -
| | 01:58 | called ToggleButton, and new
versions of CheckBox and RadioButton.
| | 02:02 | There are text display controls, a new
version of the Label, and a new control
| | 02:07 | called RichText, and new versions
of text entry controls, including
| | 02:11 | RichEditableText, TextInput and TextArea.
| | 02:15 | There are new versions of the List and
ComboBox controls and a completely new
| | 02:19 | control called the DropDownList.
| | 02:21 | And there's a new control called the Spinner.
| | 02:25 | As I've mentioned, many of the older
MX-based components are still in use.
| | 02:29 | In Flex 4, they have not been rewritten
in the new Spark Component architecture.
| | 02:34 | These include the NavigatorContainers,
ViewStack, TabNavigator and Accordion,
| | 02:39 | the DividedBox containers - including
VDividedBox and HDividedBox - and the
| | 02:45 | FormContainers, Form and FormItem,
among commonly used controls that we
| | 02:49 | still use in Flex 4.
| | 02:51 | The MX controls include DataGrid,
AdvancedDataGrid and OLAPDataGrid.
| | 02:56 | We still use the Alert component
and Spacers, HRules and VRules.
| | 03:01 | When you move to the new Spark
Components, you'll need to learn something
| | 03:04 | about how to use them.
| | 03:06 | One of the most important features of
the Spark Component architecture is the
| | 03:10 | ability to skin certain components.
| | 03:13 | There's a primary class called
SkinnableComponent and two derived classes named
| | 03:17 | SkinnableContainer and SkinnableDataContainer.
| | 03:20 | Any class that's derived from these
ActionScript classes supports the new custom
| | 03:25 | skinning architecture.
| | 03:27 | There's also some new support for
describing vector graphics in MXML - using
| | 03:32 | primitive classes named Rect, Ellipse
and Path - and new Rich text rendering
| | 03:37 | capabilities in Flash Player 10 such
as the ability to display Bidirectional
| | 03:42 | text and display text in wrapped columns.
| | 03:45 | All of these new controls and
capabilities together make up the most important
| | 03:50 | new features of the Flex 4 SDK.
| | 03:53 | The Flex 4 SDK has been described as
a transitional release, going from the
| | 03:58 | older component architecture,
represented as the mx components to the new
| | 04:03 | component architecture,
represented as the Spark Components.
| | 04:07 | In Flex 4 Applications, you can pick
and choose from the two component sets
| | 04:12 | using the ones that make
sense for your application.
| | 04:14 | Wherever there are two versions of the
components, such as Label, Application or
| | 04:20 | panel, Adobe strongly recommends that
you use the new version of the component
| | 04:24 | in a Flex 4 application.
| | 04:26 | But wherever they haven't had time to
create new versions, such as with the
| | 04:30 | DataGgrid, we still use those older components.
| | 04:33 | And Adobe has done a lot of work to
make sure that they fit in well in the new
| | 04:37 | Flex 4 architecture.
| | Collapse this transcript |
| Declaring visual controls with MXML| 00:00 | Most of the time, you declare
controls using the MXML programming language.
| | 00:05 | MXML, as I've described in previous
videos, is a markup language that allows you
| | 00:10 | to define the look and
appearance of your application.
| | 00:13 | For the demonstrations in this chapter,
I'll use a project that's included with
| | 00:17 | the exercise files, named Controls.
| | 00:20 | If you have access to the Exercise Files,
you can import it now into Flash Builder.
| | 00:25 | Select File > Import Flex Project.
| | 00:28 | In the Import Flex Project dialog,
browse and navigate to the 05_Controls folder
| | 00:34 | under your Exercise Files, and from
there, to the begin folder, and locate and
| | 00:39 | import the file Controls.fxp.
| | 00:43 | This project has a number of
applications that I will be using for all the
| | 00:46 | different demonstrations.
| | 00:48 | It also contains a number of assets in a
subfolder called assets, including some
| | 00:53 | JPG graphic files, a SWF file,
and a couple of PNG files.
| | 00:59 | I'll start with the
Application file, ControlsWithMXML.
| | 01:04 | As you can see on the screen, this
application starts with next to nothing.
| | 01:08 | It has a backgroundColor setting that
sets it to our standard background color
| | 01:12 | for our sample application, Hansel and Petal.
| | 01:16 | When I run this version of the application
in the browser, it shows just the background.
| | 01:20 | I'll close the browser
and return to Flash Builder.
| | 01:24 | When you declare a control using MXML
code in an application file, the control
| | 01:29 | is actually placed inside
something called a Group.
| | 01:32 | The Group has an automatically
created ID called Content Group.
| | 01:37 | Now you won't see this Content Group in
your code - it happens completely in the
| | 01:41 | background - but all you need to do
is declare the control using MXML code.
| | 01:47 | So, for example, I'm going
to create a simple Label.
| | 01:49 | I'll place the cursor after the declarations
element, and I'll make a blank line of code.
| | 01:55 | Then I'll type in a less than character
and start typing the name of the element
| | 01:58 | or control I want to place, 'la.'
| | 02:01 | That takes me to the Label Component.
| | 02:04 | Notice that the Label Component, as
shown in the content assist list, is a
| | 02:08 | member of the package called spark.components.
| | 02:11 | That tells you that it's the Spark version
of the Label Control, not the old MX version.
| | 02:16 | I'll press Enter or Return to select
the tag, and then after I press the
| | 02:21 | Spacebar, I'll be shown all
of the attributes of this tag.
| | 02:25 | Attributes can be properties,
styles, or event listeners.
| | 02:30 | I'm going to type in 'te.' That will
get me to the text property, which is the
| | 02:35 | most commonly used
property of the Label Control.
| | 02:38 | I'll select it, and I'll type in
a value of Enter Text and a colon.
| | 02:44 | Then I'll move the cursor to the end of the
line, and type in a slash and a greater than.
| | 02:50 | This /> character sequence
means that this is an empty tag;
| | 02:55 | that is to say there is no matching end tag.
| | 02:58 | Now, if I look at the application in
Design view, which I'll do by clicking
| | 03:02 | the Design button at the top of the editor,
I'll see my Label up here in the top-left corner.
| | 03:08 | When you declare a control using MXML,
by default, it's placed in the top-left
| | 03:14 | corner of its container.
| | 03:15 | Literally, its X and Y
properties are set to default values of 0.
| | 03:21 | Now, don't worry about the
placement of the Label quite yet.
| | 03:24 | Go back to Source view by
clicking the Source button.
| | 03:27 | You can also use the keyboard
shortcut for switching back and forth
| | 03:30 | between Source and Design.
| | 03:32 | Hold down the Ctrl key, and press the
tilde key, which is right next to the number 1.
| | 03:37 | That's the same keyboard
shortcut on both Mac and Windows.
| | 03:41 | That will toggle you back and
forth between Source and Design mode.
| | 03:46 | Now, I'll add another MXML component.
| | 03:49 | I'll place the cursor after the Label
tag and make a new line, and now I'm going
| | 03:54 | to add a TextInput control.
| | 03:56 | I'll type in a less than character and
type 'te,' and then I'll scroll down to
| | 04:01 | TextInput and press
Enter or Return to select it.
| | 04:05 | The TextInput control is an
example of a data entry control.
| | 04:09 | It's interactive and allows the
user to type in a single line of text.
| | 04:12 | When you use a TextInput control, you
nearly always assign an id attribute.
| | 04:18 | The id is a unique identifier, and it
will allow you to address the control in
| | 04:23 | your ActionScript code.
| | 04:25 | I'm going to give it an id of myInput.
| | 04:28 | And then, once again, I'll move the
cursor to the end of the line, and put in
| | 04:30 | the empty tag sequence.
| | 04:33 | Finally, I'll add a button.
| | 04:35 | I'll type a less than character and
start typing the name of the control.
| | 04:38 | I'll select s:Button, and I'll
assign the label property of the button.
| | 04:45 | The label is a string that appears on
the face of the button, and I'll type in
| | 04:49 | a string of Click me, and once again, add a
slash and a greater than character at the end.
| | 04:56 | Now, if I switch over to Design view,
you'll see that these controls are stacked
| | 05:00 | on top of each other and that the
control I declare last overlaps the others.
| | 05:05 | So, the button is in the foreground,
the TextInput control is right behind it,
| | 05:09 | and the Label is completely invisible.
| | 05:11 | Don't move them around with the mouse.
| | 05:13 | Instead, we're going to wrap
those controls inside a container.
| | 05:18 | And this is the first use of a container,
other than an application, that you all have seen.
| | 05:23 | I'm going to use a container
called the BorderContainer.
| | 05:26 | The BorderContainer allows you to add a
backgroundColor and border to a simple
| | 05:31 | container to wrap other controls.
| | 05:34 | I'll place the cursor above the label
tag and make an extra line, then type in
| | 05:38 | a less than character and type 'bor.' That
takes me to the BorderContainer component.
| | 05:44 | I'll press Enter, and this time,
instead of putting in the slash, I'm going to
| | 05:49 | put in just the greater than character.
| | 05:52 | Flash Builder then
autocompletes the BorderContainer tag;
| | 05:56 | that is, it creates the end tag for me.
| | 05:58 | And then I'm going to move the
BorderContainer end tag down a few lines.
| | 06:02 | I'll place the cursor on the line that
has the end tag, and then I'll hold down
| | 06:07 | the Alt key on Windows, or the Option
key on Mac, and press the down arrow key.
| | 06:13 | And I'll do that three times
to move the code down that far.
| | 06:16 | Now, I'm going to look at the file in
Design view again, and I'll see that
| | 06:22 | everything is inside the
BorderContainer, which is represented by this white
| | 06:25 | rectangle, but the objects are
still stacked one on top of another.
| | 06:30 | So, I still have a little bit more
work to do to lay out the controls.
| | 06:33 | I'll go back to Source view, and
now I'm going to add a layout object.
| | 06:41 | The Spark container components use
layout objects rather than a simple layout
| | 06:46 | string, as was the case in Flex 3.
| | 06:49 | Here is how you declare it.
| | 06:50 | I'll place the cursor on the empty
line after the BorderContainer start tag.
| | 06:55 | I'll type in a less than character to
begin a new tag, and I'll type in 'la.'
| | 07:00 | That takes me to all of the components
that start with the characters la, and
| | 07:05 | I'll choose the s:layout attribute.
| | 07:07 | I'll press Enter, or Return, and then
put in the greater than character, and
| | 07:13 | that will result in
autocompleting the layout tag set.
| | 07:17 | And then within the layout tag set,
I'm going to add something called a
| | 07:21 | HorizontalLayout object.
| | 07:23 | I'll type in a less than
character and then hori.
| | 07:27 | That will take me to the
HorizontalLayout object.
| | 07:30 | I'll press Enter, and I'm going to
add some other attributes, including a
| | 07:35 | verticalAlign attribute, set to a
value of middle, and then paddingRight, and
| | 07:41 | paddingLeft settings of 10 pixels each.
| | 07:44 | For each, I'll type in 'padd,' I'll
press Ctrl+Spacebar, and I'll choose
| | 07:50 | paddingLeft first, type in a value of 10.
| | 07:53 | Move the cursor past the Attribute setting,
and add paddingRight, also set to a value of 10.
| | 08:01 | So, now I'm declaring an object using
MXML code, and setting its attributes.
| | 08:07 | I'll add in the slash and greater than
and then, once again, I'll look at the
| | 08:10 | file in Design view.
| | 08:12 | And I'll see that the objects are now
nicely aligned, the Label, the TextInput
| | 08:17 | control, and the Button.
| | 08:18 | I'll go back to Source view,
and add a few more properties.
| | 08:23 | I'm going to assign the
BorderContainer an explicit height of 50 pixels.
| | 08:28 | I'm going to assign the
BorderContainer an explicit height of 50 pixels, and
| | 08:33 | then I'm going to add some
styles to set its appearance.
| | 08:37 | I'll add a borderStyle of inset.
| | 08:42 | I'll add a borderColor of a light
gray, using the hexadecimal value #CCCCCC.
| | 08:50 | And I'll also add a borderWeight of 4.
| | 08:55 | The borderWeight, it's the
width of the border, in pixels.
| | 08:59 | I'll look at the file in Design view,
and now my BorderContainer wraps the
| | 09:05 | controls and has a nice little border around it.
| | 09:09 | In Design view, I'll click on the outer
area of the BorderContainer, making sure
| | 09:14 | I don't click on the controls within it,
and then I can place it anywhere on the
| | 09:18 | screen using the Design
view placement capabilities.
| | 09:22 | I'm going to snap it into
place at the top-left corners
| | 09:26 | and then look at the file in Source
view again, and I'll see that X and Y
| | 09:30 | properties have been added.
| | 09:33 | Finally, I'm going to quickly format my code.
| | 09:37 | I'll press Ctrl+A to select all of the
code, or Command+A on Mac, and then go to
| | 09:43 | the menu and choose Source > Correct
Indentation, and that nicely indents all of
| | 09:48 | the code and shows how each object
is contained within each other object.
| | 09:52 | I'll save my changes by
pressing Ctrl+S, or Command+S on Mac.
| | 09:58 | And then I'll run the application in
the browser, and here is the result.
| | 10:03 | My Label, my TextInput control, and
my Button are nicely aligned within the
| | 10:08 | BorderContainer, and the BorderContainer is
placed exactly where I want it on the screen.
| | 10:13 | So, this is a look at how to
declare various types of controls and
| | 10:17 | containers using MXML code.
| | 10:20 | The MXML code is translated in the
background into ActionScript code, which
| | 10:24 | would be much more complex than this.
| | 10:26 | You use XML Attributes to set
properties and styles, and you also use XML
| | 10:32 | Attributes in each MXML declaration
to set properties, styles, and listen
| | 10:39 | for events.
| | Collapse this transcript |
| Declaring visual controls with ActionScript| 00:00 | As I've described in other videos,
MXML is a facade, or a convenience
| | 00:05 | language for ActionScript.
| | 00:07 | When you write MXML code, you are
really writing ActionScript, and the
| | 00:11 | ActionScript code is generated for
you during the compilation process.
| | 00:15 | If your application calls for it
and if it's your preference, you can
| | 00:19 | instantiate and add controls to your
user interface using pure ActionScript code.
| | 00:24 | And I'll show you how to do
that in this demonstration.
| | 00:27 | I'll use the application
ControlsWithActionScript.mxml, that's a part of the
| | 00:31 | controls project in the Exercise Files.
| | 00:35 | In this application, I've
created a BorderContainer.
| | 00:38 | The BorderContainer has an id of container.
| | 00:41 | When you add an id attribute to a
container, it allows you to address the
| | 00:45 | container in ActionScript code.
| | 00:48 | It has a number of properties and
styles that control its appearance, and a
| | 00:52 | horizontal layout object that will
cause its nested child objects to lay out
| | 00:57 | from left to right.
| | 00:59 | The application also has a
creationComplete event listener.
| | 01:03 | When the application starts up, it
dispatches the creationComplete event to tell
| | 01:08 | you that it's ready for use.
| | 01:10 | And you can add code into the
function that's called upon the event.
| | 01:14 | I'm going to add some code into that
function so that I'm placing controls
| | 01:19 | within that container, using pure ActionScript.
| | 01:23 | Now at its current state, when I run
the application, it looks like this.
| | 01:28 | It shows the BorderContainer object
in the top-left corner, but it has no
| | 01:32 | contents, currently.
| | 01:33 | I'll close the browser
and return to Flash Builder.
| | 01:38 | I'm going to add three
controls to the container:
| | 01:41 | a label, a text input control and a button.
| | 01:44 | I'll add them one at a time, in exactly that
order, so that they layout from left to right.
| | 01:50 | I'll start with the label.
| | 01:52 | In order to declare a control using pure
ActionScript, start with the var keyword.
| | 01:58 | This is going to be a reference variable
that refers to a complex object in memory.
| | 02:03 | Assign a variable name.
| | 02:05 | You can name the variable anything you
want, but you should follow the standard
| | 02:09 | convention that variable names
start with a lowercase character.
| | 02:13 | You also can't include any spaces or
special characters in variable names.
| | 02:18 | I'm going to name my variable myLabel.
| | 02:21 | Then I'm going to type in a colon
character, and I'll set the datatype of the
| | 02:26 | variable as the Label class. I'll type in 'l-a.'
| | 02:31 | Now, notice, in the list of
available classes, that the mx version of the
| | 02:36 | label appears at the top.
| | 02:38 | I want to make sure that I'm using
the Spark version of the Label class.
| | 02:42 | So, I choose Label-spark.components,
and then I press enter.
| | 02:47 | Notice when I select Label from the list
of available classes that Flash Builder
| | 02:52 | automatically adds an
import statement for that class.
| | 02:56 | With all visual components, when
you want to refer to them using pure
| | 02:59 | ActionScript code, you must import the class
before you refer to it in the rest of your code.
| | 03:05 | Now, I'm going to place the cursor
after the declaration of the variable, and
| | 03:10 | I'll put in an equals assignment operator.
| | 03:13 | I'll type in the keyword 'new,' and
then I'll call the constructor method for
| | 03:17 | the label component.
| | 03:20 | I'll type in 'L-a-b' again.
| | 03:21 | I'll, once again, make sure that
I'm choosing the Label class in the
| | 03:25 | spark.components package.
| | 03:28 | I'll type in an open paren, and I'll
see a little pop-up help that shows me the
| | 03:32 | syntax of the Label class's constructor method.
| | 03:36 | Notice that the constructor
method takes no arguments.
| | 03:39 | I'll close the call and finish
the statement with the semicolon.
| | 03:44 | Now I'm going to set the
Label control's text property.
| | 03:48 | In another video where I declared the
same control using MXML code, I set the
| | 03:53 | property using an XML attribute.
| | 03:55 | This time, because I'm working in
ActionScript, I'll set it using dot notation
| | 04:00 | like this, myLable.text = Click me.
| | 04:07 | This is a literal string, so it's wrapped in
quotes, and the statement ends with a semicolon.
| | 04:12 | Now, I'm going to add the
control to the container.
| | 04:16 | Each Spark-based container has a nested
group that has an id of content group.
| | 04:22 | In order to add an object to a container,
you don't add it directly to the container.
| | 04:27 | Instead, you add it to its
content group, like this.
| | 04:29 | I'll start with the id of my
borderContainer object, container.
| | 04:34 | Then I'll put in a dot, and then
I'll refer to its content group object.
| | 04:39 | Then I'll put in another dot, and
I'll call the method addElement.
| | 04:45 | Notice that there's both an
addChild and an addElement.
| | 04:48 | When you're working with Spark components,
you should always use the addElement method.
| | 04:54 | I'll select that method, and then
I'll pass in as an argument the variable
| | 04:58 | that's referring to my label object in memory.
| | 05:01 | Now, I'm ready to test the application.
| | 05:04 | I'll save and run it.
| | 05:06 | And as the application starts up, that
method is called, and the result is that
| | 05:11 | the label appears inside the container group.
| | 05:15 | Now, I'm going to add two more controls:
| | 05:18 | a text input and a button.
| | 05:21 | I'll follow exactly the same set of
steps for each of the other controls.
| | 05:25 | I'll create a variable
referring to the object I want to use.
| | 05:28 | I'll set any required properties, and
I'll add it to the container's content group.
| | 05:34 | I'll create a variable called
myInput, data typed as TextInput.
| | 05:39 | Once again, make sure that you're
using the Spark version of the class.
| | 05:43 | Then I'll instantiate it by
calling its constructor method.
| | 05:49 | For the Input class, I'm going to set its id.
| | 05:53 | The id is the same property that you set
in the MXML, but it's not automatically
| | 05:57 | set for you when you instantiate
an object using ActionScript code.
| | 06:04 | By setting the id property, it
ensures that you can address the control in
| | 06:08 | exactly the same way as an object
that was instantiated with MXML.
| | 06:12 | And then I'm going to copy and paste
the line of code that added the label.
| | 06:16 | I'll select that line of code and
press Ctrl+C, or Command+C on Mac.
| | 06:20 | Then I'll move down to the blank
line and paste, pressing Ctrl+V, or
| | 06:25 | Command+V on the Mac.
| | 06:27 | Then I'll change the
argument from myLabel to myInput.
| | 06:30 | I'll follow the same set
of steps for the button.
| | 06:36 | I'll declare the variable.
| | 06:39 | I'll set the variable name as myButton.
| | 06:41 | I'll make sure I data type it as the
Spark version of the button control.
| | 06:48 | I'll instantiate it using the
Button class's constructor method.
| | 06:53 | For this control, I'll set the Label property.
| | 06:59 | And finally, I'll once again, paste
in the code that adds an element to
| | 07:02 | the content group of the container, and I'll
change the argument to refer to myButton.
| | 07:10 | So there's all the code, adding three
controls to an existing container, using
| | 07:15 | pure ActionScript code.
| | 07:16 | I'll test the application in the
browser, and there is the result.
| | 07:21 | The application has the same appearance
as if I had declared all these controls
| | 07:25 | using MXML code, but it's now
done completely with ActionScript.
| | 07:29 | When you learn how to use ActionScript
code to instantiate and add controls to a
| | 07:35 | user interface, it gives you the
ability to build very flexible Flex
| | 07:39 | applications, but it also teaches you
a lot about how MXML is translated into
| | 07:44 | ActionScript in the background.
| | Collapse this transcript |
| Using text display controls| 00:00 | The Flex 4 SDK includes five new
text controls that are members of the
| | 00:05 | Spark component set.
| | 00:07 | These controls are named Label, RichText,
RichEditableText, TextInput and TextArea.
| | 00:14 | For this demonstration, I'll use the
application TextControls.mxml, which if you
| | 00:20 | have access to the Exercise Files,
you'll find in the controls project.
| | 00:24 | In this application, I've
created a BorderContainer.
| | 00:27 | It has a border, and it uses a
vertical layout object, which will cause its
| | 00:32 | nested objects to stack from top to bottom.
| | 00:35 | I'll start by creating a Label.
| | 00:38 | The Label control is the
simplest of the five text controls.
| | 00:42 | It can display wrapped text, which
makes it different from the Label control
| | 00:45 | that was used in Flex 3.
| | 00:47 | But it doesn't do background colors,
borders, scrollbars or anything else
| | 00:52 | that's at all fancy.
| | 00:53 | I'll type in the Label tag, making
sure that I use the Spark version of the
| | 00:58 | component, and I'll set the
text property to My Label.
| | 01:02 | I'll close the tag, and then I'll look
at the application in Design View and
| | 01:09 | show you that the Label
displays as a very simple presentation.
| | 01:13 | Again, the Label control is very
limited, but it's the most lightweight of
| | 01:17 | the five text controls.
| | 01:19 | You can add fontFamily settings.
| | 01:21 | For example, I'll set my fontFamily to
Georgia, fontSize, which I'll set to 24
| | 01:27 | pixels, and other font display styles.
| | 01:32 | There is the control again, this time
displayed with the new font settings.
| | 01:36 | The next control, in increasing order of
complexity and capability, is RichText.
| | 01:43 | The RichText control, once again, has a
text property, which I'll set to My Rich
| | 01:47 | Text, and also supports all of the
font settings styles fontFamily, fontSize,
| | 01:52 | fontWeight and so on.
| | 01:54 | But unlike the Label control, it
supports the backgroundColor setting and other
| | 01:59 | rich presentation capabilities.
| | 02:01 | I'll set the background color to
#EEEEEE, which is a light gray.
| | 02:07 | And for this control, I'll set
it to an explicit width of 200.
| | 02:10 | I'll look at the application in
Design View and show you that this control
| | 02:17 | displays with the background color.
| | 02:20 | The next control is called
RichEditableText, and it's exactly what it says.
| | 02:25 | It's actually an input control, but
without any of the chrome, that is
| | 02:29 | borders and scrollbars that are typically
associated with the TextInput and TextArea controls.
| | 02:35 | You use it like this.
| | 02:37 | I'll declare and instance of it,
RichEditableText, and as with other input
| | 02:42 | controls, you typically assign an ID so
that you can refer to its text property.
| | 02:49 | I'm going to, once again, set a backgroundColor.
| | 02:51 | I'll use a named color, this time, of
aqua and an explicit width of 200.
| | 02:59 | And I'll set the initial text
property to Enter text here.
| | 03:06 | This time, I'll save and run
the application in the browser.
| | 03:09 | The RichEditableText control is
interactive, so you'll only see its full
| | 03:14 | capabilities by looking at
it in a running application.
| | 03:18 | I'll click into the control, select the
text and Backspace, or Delete, and then
| | 03:23 | type in My own custom text.
| | 03:26 | As with TextInput and TextArea controls,
you can refer to the value that the
| | 03:31 | user types in with the
text property of the object.
| | 03:36 | Finally, two more controls:
| | 03:39 | the TextInput and the TextArea.
| | 03:43 | I'll create a new TextInput control within id
of myInput and just use it in its simplest form.
| | 03:50 | And I'll create a TextArea
control with an id of myArea.
| | 03:56 | And then I'll show you the
application in Design view.
| | 03:59 | The difference between TextInput and
TextArea is that the TextInput control is
| | 04:03 | used to receive a single line of text,
whereas the TextArea control supports
| | 04:08 | linefeeds, lots of special
characters and a much richer presentation.
| | 04:13 | With both controls, you can use an
attribute called displayAsPassword.
| | 04:19 | If you set that attribute to true and
then run the application, as the user
| | 04:23 | types a value in, they'll only see asterisks.
| | 04:27 | This mimics the behavior of
the password control in HTML.
| | 04:32 | You can also set the same property on
the TextArea control, but it doesn't make
| | 04:36 | much sense to do that.
| | 04:38 | It's also worth noting, with the
TextArea control, that when you type in a lot of
| | 04:42 | code - which I'll do just by typing a
whole bunch in - you'll see that the
| | 04:46 | TextArea control
automatically presents a scrollbar.
| | 04:50 | That doesn't happen on the TextInput control.
| | 04:53 | So, if you want to receive a large
amount of text, use the TextArea control, and
| | 04:57 | if you want to accept a
single line of text, use TextInput.
| | 05:01 | So those of the five new
text controls in Flex 4:
| | 05:04 | the Label, RichText,
RichEditableText, TextInput and TextArea.
| | Collapse this transcript |
| Displaying rich text| 00:00 | Most of the Text controls that are
included in the Flex 4 SDK support a special
| | 00:05 | property called content, which
allows you to present mixed text, using a
| | 00:10 | particular style of markup.
| | 00:12 | All of the controls, except for the
Label Control - that is the RichText, Rich
| | 00:16 | editable Text, Text Input, and
TextArea Controls - support this property.
| | 00:22 | I'll demonstrate how to use the
property, with the file RichTextDisplay.mxml,
| | 00:27 | which I'm showing on the screen.
| | 00:29 | It starts off as a pretty much
empty file with just a background color.
| | 00:34 | I'll first create a RichText control,
and I'll leave out any x or y properties so
| | 00:39 | that it appears in the top-
left corner of the application.
| | 00:42 | Now, when you declare the content
property using MXML markup, you typically do
| | 00:47 | it as a child element.
| | 00:49 | So, I'm going to type in a greater
than character, and that will cause Flash
| | 00:53 | Builder to autocomplete the RichText
element, and then I'll add the content
| | 00:59 | property as another tag set, typing in
the less than character and then 'con'
| | 01:04 | and then content, and I'll allow Flash
Builder to autocomplete that tag set.
| | 01:10 | The content property represents an
instance of a class called TextFlow.
| | 01:15 | The TextFlow class is a tree of objects,
and you can add a number of different
| | 01:20 | kinds of objects to the tree,
including paragraphs, divs and spans.
| | 01:25 | For example, to add a paragraph to
the content, you use the tag s:p, which
| | 01:32 | represents an instance of a
class called ParagraphElement.
| | 01:36 | This is called a TextFlow element and
each of the TextFlow elements supports
| | 01:41 | all of the standard font styles, such as
font family, font weight, font size and so on.
| | 01:47 | In this example, I'm going to set the
font family for the paragraph to verdana,
| | 01:52 | a sans-serifed, or non-serifed, font.
| | 01:55 | Now I'll autocomplete that tag set, and
I'll be able to add other tags inside of it.
| | 02:01 | I'm going to create three
sets of spans, like this.
| | 02:04 | I'll first type in the beginning tag
and type in the closing greater than
| | 02:08 | character so that Flash
Builder will auto complete the tag.
| | 02:11 | And then I'll eliminate the extra white space
that Flash Builder adds in between the tags.
| | 02:17 | Now, I want to present Hansel and Petal
as three different spans, allowing me to
| | 02:22 | apply different font settings.
| | 02:25 | I'm going to clone this line of code twice.
| | 02:27 | I'll hold down the Ctrl and Alt key on
Windows, or if you're working on Mac, hold
| | 02:32 | down Command and Option and
then press the down arrow twice.
| | 02:37 | And now I have three span
elements inside the paragraph.
| | 02:41 | I'll type in the strings that I want to present.
| | 02:44 | The first span will be the word Hansel,
the second string will be ampersand and
| | 02:51 | because I'm working in the context of
MXML, I'm going to use the entity for the
| | 02:56 | ampersand that looks like this, &.
| | 03:02 | And then finally, I'll move to the
third span and type in the string Petal.
| | 03:07 | Now, I'll look at the application
in Design view to see how I'm doing.
| | 03:11 | Here's my simple RichText object.
| | 03:13 | Right now, it's being
displayed in the default font size.
| | 03:18 | I'll go back to Source view and
make some changes to these spans.
| | 03:21 | In the first one, I'll add a
fontSize of 36 and a color of #CCCCCC.
| | 03:33 | I'll go to the second span and add a
fontSize of 54 pixels and a color of
| | 03:39 | #EEEEEE, and I'll go to the third span
and add a fontSize, once again, setting
| | 03:46 | it to 36, and this time, setting
the color as black or #000000.
| | 03:54 | Now for simplicity, I'm using grayscale
colors, but if you're a graphic designer
| | 03:59 | and have a particular appearance that
you want to create, you can use whatever
| | 04:02 | hexadecimal color values you want.
| | 04:04 | Here is the result.
| | 04:07 | When I go back to the Design mode,
| | 04:09 | I see the resulting RichText object
contains all three strings in separate
| | 04:14 | spans, but it's all a single object.
| | 04:17 | So, I can now click and drag the object
and place it anywhere on the screen I want.
| | 04:22 | So the RichText Control is one of the
Controls that supports the content property.
| | 04:27 | Once again, the content property is an
instance of a TextFlow object and the p
| | 04:33 | span and other tags that you use to add
to the content represent particular
| | 04:38 | classes in the Flex 4 SDK.
| | 04:41 | Using RichText, Rich editable Text,
TextInput and TextArea, you can take
| | 04:47 | advantage of the enormous
capabilities of Flash Player 10's Text Layout
| | 04:51 | Framework, using the content
property and the TextFlow class.
| | Collapse this transcript |
| Using text input controls| 00:00 | As I've described in other videos, there
were three TextInput controls in the Flex 4 SDK:
| | 00:07 | the RichEditableText control, which is
the lightest weight of the controls, the
| | 00:11 | TextInput control, which can accept a
single line of text and the TextArea
| | 00:16 | control, which can accept
a larger amount of text.
| | 00:20 | For this demonstration, I'll use the
application TextInputControls.mxml, which
| | 00:25 | is a part of the controls
project in the Exercise files.
| | 00:29 | This application declares
three controls, one of each type.
| | 00:34 | Each has an ID of myRich
Editable text, myInput and myArea.
| | 00:38 | I am going to show you how to capture the
value that the user types into a control.
| | 00:44 | I've created a Button with a label of
Show values and three Label controls with
| | 00:49 | IDs of richTextLabel, inputLabel and areaLabel.
| | 00:54 | When the user clicks the button, I'll
use a little bit of ActionScript code to
| | 00:58 | capture the value that the user has
typed into each of the controls and display
| | 01:02 | those values in the three labels.
| | 01:05 | First, I'll add an
eventListener for the button control.
| | 01:08 | I'll place the cursor after the label
attribute and before the closing slash
| | 01:14 | and press the Spacebar.
| | 01:15 | This brings up a list of the
available attributes of the Button tag.
| | 01:18 | I'm going to use the click attribute,
I'll type 'cli' to get to that part of the
| | 01:24 | list and then press Enter
to select that attribute.
| | 01:28 | Then I'll press Enter, or Return,
again to generate a function that can be
| | 01:32 | called when the user clicks the button.
| | 01:35 | Now, that function will have been
created above the Visual controls in a
| | 01:39 | new fx:Script section. Here it is.
| | 01:43 | It's called button1_ClickHandler.
| | 01:46 | Now to capture the values, I'll
get rid of the comment that was
| | 01:49 | generated automatically.
| | 01:52 | Each of the three text entry
control supports the text property.
| | 01:56 | It will return the value
that these user has typed in.
| | 01:59 | I'll take that value and pass it to the
text property of the matching label, like this.
| | 02:06 | I'll start off with richTextLabel.
text = myRichEditableText.text.
| | 02:14 | Now, if you are wondering how I typed
that in so quickly, for each control, I am
| | 02:18 | just typing the first few characters
of the ID and then pressing CTRL+SPACE.
| | 02:23 | If the control has an ID that matches
the string that I've typed in and there
| | 02:28 | aren't any other classes or objects
that match that string, Flash Builder
| | 02:32 | autocompletes the ID for me.
| | 02:34 | Next, I'll grab and display the value that
the user types into the TextInput control.
| | 02:40 | I'll type in inputLabel.text =
myInput.text and finally, I'll handle
| | 02:47 | the TextArea control.
| | 02:49 | Once again, I have a matching
label, this time called areaLabel.
| | 02:53 | I'll use the code areaLabel.text = myArea.text.
| | 02:59 | So now I am grabbing the values from
the three controls and displaying those
| | 03:04 | values in the three labels.
| | 03:06 | I'll run the application in the browser,
and then I'll click into each of the
| | 03:12 | three data entry controls,
and I'll type in some simple text.
| | 03:17 | This is the rich editable text control.
| | 03:25 | This is the text input control and
notice that the text input control is only
| | 03:29 | displaying asterisks because I have it's
displays password property set to True.
| | 03:36 | Then I'll type a value into the TextArea
control, This is the text area control.
| | 03:40 | I'll click the Show values button and
show that I have captured the values and
| | 03:47 | displayed them in the labels.
| | 03:48 | When you work with data entry controls
in Flex, you don't have to grab them in a
| | 03:53 | form or any other kind of container
in order for the data to be usable.
| | 03:57 | You grab the values using pure
ActionScript code, or as I'll show you in another
| | 04:02 | video, with binding expressions, and
then you take those values and if you like,
| | 04:06 | display them on the screen as I've
done here, or using RPC components, such as
| | 04:12 | HTTP service, web service, or Remote
Object, send those values to a server.
| | Collapse this transcript |
| Using button controls| 00:00 | The Flex 4 SDK includes a number
button controls, controls that the user
| | 00:05 | interacts with to take some action.
| | 00:07 | I'm going to show you each of these
controls in turn and talk about when you use
| | 00:11 | them, and how you use them.
| | 00:12 | For this demonstration, I'll work with
this application, ButtonControls.mxml.
| | 00:17 | It's a starter application that just has
a BorderContainer with a vertical layout.
| | 00:22 | As I add ButtonControls inside the
BorderContainer, they'll stack from top to bottom.
| | 00:26 | I'll double-click the tab at the top of
the Editor to look at the code in fullscreen.
| | 00:30 | First, I'll show you the Spark
version of the button control.
| | 00:35 | You start with an s:
| | 00:36 | Button tag, and then you apply a Label.
| | 00:40 | The Label attribute is a string of any length.
| | 00:43 | I'll type in a string of Click me.
| | 00:45 | When the user clicks the button, it
dispatches a click event, and you can react
| | 00:50 | to that click event by executing some code.
| | 00:52 | I'll press the Spacebar and then choose
the click event from the list and then
| | 00:57 | press Enter or Return to
generate a clickHandler.
| | 01:01 | Before I fill in the generated
function's code, I'll complete the Button
| | 01:04 | tag, moving the cursor to the end of
the line and typing in a slash and a
| | 01:09 | greater than character.
| | 01:10 | Now I'll go to the clickHandler method.
| | 01:13 | I'll select and delete the comment,
and then I'm going to use a very popular
| | 01:17 | class in the Flex SDK called the Alert class.
| | 01:21 | The Alert class presents a
message as a pop-up window to the user.
| | 01:26 | Here's how you use it.
| | 01:28 | I'll type in the word 'Alert,' and
then I'm going to cause Flash Builder to
| | 01:32 | automatically add an import
statement for the Alert class.
| | 01:35 | I'll press Ctrl+Space, and then Enter,
or Return, and choose the Alert class.
| | 01:41 | Flash Builder adds an import statement
above the function, and I can now call
| | 01:45 | the Alert class's methods as much as I want.
| | 01:48 | I'll type in a dot, and I'll call a
method called show, and I'll pass a simple
| | 01:53 | string in of You clicked the button.
| | 01:56 | Now, I'll talk more about the nature of
these events and how you handle them in
| | 02:00 | another video, but for now, all you
need to know is that when the user clicks
| | 02:04 | the button, a pop-up window will
appear with the message that I typed in.
| | 02:08 | I'll save the change and run the application.
| | 02:11 | And when it appears in the browser,
I'll click the button labeled Click me, and
| | 02:15 | I'll see a pop-up window with
the message You clicked the button.
| | 02:19 | So, that's the simplest sort of
button that's supported in the Flex SDK.
| | 02:23 | Now, I'll show you another control
that has a slightly different behavior.
| | 02:27 | The Flex 4 SDK includes the ToggleButton.
| | 02:30 | This is a new component
that didn't exist in Flex 3.
| | 02:33 | In Flex 3, you could do ToggleButtons,
but they were handled in a different way.
| | 02:37 | In Flex 4, it's a completely new class.
| | 02:40 | I'll declare ToggleButton, and
I'll give it an ID of myToggle.
| | 02:44 | I'll give it a label of Toggle Me, and
just as with the standard button control,
| | 02:52 | it supports the click event.
| | 02:54 | I'll create a click attribute and then
generate the clickHandler, and just as
| | 02:59 | before with the Button control, I'll
complete the tag by moving the cursor to
| | 03:03 | the end of the line and typing in a
slash and a greater than character.
| | 03:06 | The ToggleButton control supports a
property called selected, which returns
| | 03:11 | either true or false.
| | 03:12 | By default, its value is false, but
each time the user clicks the button, the
| | 03:16 | value of the selected property
toggles between true and false.
| | 03:20 | I'm going to use that Alert class to
display the current state of that property.
| | 03:24 | I'll delete the generated comment and
type in the beginning code, Alert.show,
| | 03:30 | and then I'll type in the
following literal string, The value of
| | 03:33 | myToggle.selected is.
| | 03:36 | And then I'll close the string with
the double quote, put in a + operator as
| | 03:39 | a concatenation operator, and then I'll output
the value of that expression, myToggle.selected.
| | 03:46 | Now I'll demonstrate the use of
the property, running the application.
| | 03:50 | Each time I click that button, it's going
to change the value of the selected property.
| | 03:55 | The first time I click it, it changes
to true, the second time, it's false.
| | 04:00 | Also, notice a difference in
the appearance of the button.
| | 04:02 | By default, a Toggle button looks
just like a standard button, but when you
| | 04:06 | change its value to true, it shows
a dark shaded area instead of the
| | 04:10 | original light-colored area.
| | 04:11 | That's the visual indicator to the user
that the state of the button has changed.
| | 04:15 | And when you click it again, it
returns to its original appearance.
| | 04:19 | You can modify that appearance by
skinning the component, creating a custom skin.
| | 04:24 | That's a skill that I'll show you in
another chapter of the video series.
| | 04:28 | Finally, I'm going to show you one other
button that's a part of the Flex 4 SDK.
| | 04:32 | This is a control that was part of Flex
3 and has not been replaced in Flex 4.
| | 04:37 | So, if you want to use it, you
can still use the original version.
| | 04:40 | It's called a LinkButton.
| | 04:41 | I'll type in a less than character
and then 'l-i-n-k,' and I'll choose the
| | 04:46 | LinkButton control.
| | 04:47 | Notice that the LinkButton control is
a part of a package called mx.controls,
| | 04:52 | and it uses the MX prefix.
| | 04:54 | So, this tells you that this control
is a member of the MX component group.
| | 04:58 | As with the standard button
control, you apply a label.
| | 05:01 | I'll use a label of Click me, just like
before, and also just like the button,
| | 05:07 | it dispatches a click event.
| | 05:10 | I'll generate a
clickHandler for the Link button.
| | 05:12 | I'll make sure I finish the tag with the
slash and a greater than character at the end.
| | 05:17 | And then, once again, I'll use the Alert
class to show the user what they clicked.
| | 05:22 | I'll type in Alert.show and then display a
literal string of You clicked the link button.
| | 05:31 | I'll save and run the application.
| | 05:34 | And when it appears, I'll show
the appearance of the link button.
| | 05:37 | It appears initially as a simple label,
but when the cursor moves over it,
| | 05:41 | it changes color, and then when you
release the mouse button, it dispatches
| | 05:45 | the click event, and you can react to that
event by executing some ActionScript code.
| | 05:50 | So these are three buttons that
you can use in your application:
| | 05:53 | the standard button, the
toggle button and the link button.
| | Collapse this transcript |
| Loading images at runtime| 00:00 | The Flex 4 SDK includes two controls
that present images on the screen, the MX
| | 00:06 | image control and the
Spark bitmap image control.
| | 00:09 | Of these, however, only one of them is
capable of loading images at run time,
| | 00:14 | either from the web or in a native
desktop application from the local hard disk.
| | 00:18 | That's the MX image control.
| | 00:20 | Both controls can embed images;
| | 00:23 | that is compile the images into the application.
| | 00:25 | But if you want to load images
dynamically, you must use the MX image control.
| | 00:30 | Here's how you use it in its simplest form.
| | 00:32 | I'm going to use the
application RuntimeImages.mxml.
| | 00:36 | That's a part of the Controls project.
| | 00:38 | I've also included some image files
to play with that are stored under the
| | 00:42 | assets subfolder, under the src folder.
| | 00:45 | I'll be working with these two images in
this exercise: aloe_vera.jpg and bonsai.jpg.
| | 00:51 | The image control is capable of
loading four types of images at run time:
| | 00:56 | JPG files, GIF, PNG and SWF, or SWF
files that have been generated out of
| | 01:03 | Illustrator or Flash.
| | 01:05 | Typically, in Flex applications, you
choose between the JPG and PNG files.
| | 01:10 | JPG files frequently come from
digital cameras and represent photographs,
| | 01:15 | whereas PNG files can either be
photographic in quality, or in some cases are
| | 01:20 | created from computer rendered graphics.
| | 01:22 | Here is how you declare an
image control using MXML.
| | 01:25 | I'll place the cursor after the layout
section and make a little bit of extra
| | 01:29 | space, and then I'll create an MX image tag.
| | 01:34 | The image tag has a source property,
which you set to a value that indicates the
| | 01:38 | location and name of the graphic
relative to the location of the application.
| | 01:42 | I'm going to start by displaying the
file aloe_vera.jpg. It's in the assets
| | 01:47 | folder, so I'll type in the name of the
folder and then a forward slash and then
| | 01:52 | the name of the file. That's it.
| | 01:56 | Now as the application loads into the
browser, it will automatically load the
| | 02:00 | graphic from the hard disk, or if the
application is downloading from the web,
| | 02:05 | it will download it from the website.
| | 02:07 | I'll save and run the
application, and there is the result.
| | 02:11 | The graphic has displayed on the screen.
| | 02:13 | Now if you want to change the graphic
at run time, there are two ways to do it.
| | 02:17 | One way is to change the source
property of the image control, and the other's
| | 02:22 | to call a method called load.
| | 02:23 | I'll show you both.
| | 02:25 | First, in order to be able to address
the image object in ActionScript code, I'm
| | 02:30 | going to assign it a unique ID of
myImage. Then I'm going to create a couple of
| | 02:35 | buttons in the application.
| | 02:36 | I'll look at the application in Design
view, and then I'll drag in two buttons,
| | 02:44 | and I'll place them above the image.
| | 02:47 | Then I'm going to change the labels on
the buttons to indicate their actions.
| | 02:51 | In the first one, I'm going to Change the
source property, so that's the label I'll put in.
| | 02:56 | Notice that I simply double-clicked on
the Button in order to change its label.
| | 02:59 | For the second Button, once again,
I'll double-click it, and this time, I'll
| | 03:03 | call the load method.
| | 03:05 | Now I'll go back to the Change source
button, and this is a little trick that
| | 03:09 | you can use in Design view to add some
ActionScript code that will be executed
| | 03:13 | when the user clicks the button.
| | 03:15 | With the button selected, I'll go to
the Properties view, which is in the
| | 03:18 | lower-right corner.
| | 03:19 | I'll go to the On click property, and
I'll click the little lightning bolt
| | 03:23 | button and choose Generate Event Handler.
| | 03:26 | That takes me to Source mode.
| | 03:28 | If I look at the Button control, I'll
see that it's been generated down here
| | 03:32 | below the BorderContainer, although
it's presented above it on the screen.
| | 03:37 | And the click event attribute has been
added and the method or function that's
| | 03:41 | being called has been added as well.
| | 03:44 | Now I'm going to change the graphic at
run time by changing the value of the
| | 03:48 | object's source property.
| | 03:49 | I'll use this code myImage.
source = assets/bonsai.jpg.
| | 03:58 | I'll save and run the application,
and when I click the Button, it results
| | 04:03 | in changing the image.
| | 04:05 | Notice that the BorderContainer in which
the image is wrapped is resizing itself
| | 04:09 | automatically to
accommodate the new image dimensions.
| | 04:13 | Now I'll add some code for the second button.
| | 04:16 | I'll go back to Design mode.
| | 04:18 | I'll click the button labeled Call load.
| | 04:20 | I'll go to the Properties view and
once again, Generate an Event Handler.
| | 04:25 | And this time, instead of setting
the source property, I'll call the load
| | 04:28 | method, and I'll switch back to
the original image, aloe_vera.jpg.
| | 04:37 | I'll run the application, I'll click
the first button to change to the bonsai
| | 04:42 | plant, and then I'll call the load
method and show that I'm switching back.
| | 04:48 | So both approaches, changing the
source property or calling the load method,
| | 04:52 | result in re-downloading an image from
the web or in Adobe AIR application from
| | 04:57 | the local hard disk and allowing
the image control to display it.
| | Collapse this transcript |
| Embedding images| 00:00 | The Flex 4 SDK includes a number of
ways to embed images in an application.
| | 00:05 | When you embed an image, it becomes
a part of the application's SWF file.
| | 00:09 | There are pros and cons to this approach.
| | 00:11 | On the positive side, an embedded image is
displayed instantly when you want it to show up.
| | 00:17 | You don't have to download it from
the website or from the local disk, so
| | 00:20 | there is no latency, or delay, between
the time you request the image and the
| | 00:25 | time it's displayed.
| | 00:26 | On the downside, when you embed an
image, it expands the size of your SWF
| | 00:30 | file, and especially when you're
working with an application that's downloaded
| | 00:33 | from the Web at run time, it takes
longer for the application to download
| | 00:37 | before the user can see it.
| | 00:39 | I'm going to show you how to embed
an image using the two image controls:
| | 00:44 | the MX image control and the
Spark bitmap image control.
| | 00:48 | I'll start with the Spark bitmap image.
| | 00:50 | The Spark bitmap image control is one
of a set of controls known as primitives.
| | 00:56 | This means that they aren't complete
components and technically what this means
| | 01:00 | is that if you try to add a bitmap
image control, let's say to an older MX
| | 01:05 | container like VBox or
HBox, you won't be able to.
| | 01:09 | It doesn't extend a very special class
called UIComponent, but you can place
| | 01:13 | a bitmap image control within any
Spark-based container, such as the
| | 01:17 | application component.
| | 01:19 | For this demonstration, I'm using
EmbedImages.mxml, from the Controls project.
| | 01:24 | I'll create a bitmap image control
and just like the image control, it has
| | 01:29 | a Source attribute.
| | 01:30 | But with a bitmap image, you can't
use downloaded or run time images.
| | 01:35 | You can only use embedded images.
| | 01:36 | I'm going to use this graphic, flowers.png.
| | 01:40 | I'll start with something
called the @Embed compiler directive.
| | 01:44 | A compiler directive is a special bit
of syntax, in Flex, that tells the compiler
| | 01:50 | what to do, rather than how
to call something at run time.
| | 01:53 | When you call the @Embed compiler
directive in the context of an MXML tag, it
| | 01:58 | gets an @ character as a prefix, and
it looks like a function, but it has an
| | 02:03 | upper case E at the beginning.
| | 02:05 | You type in the beginning of the
directive, and then after the opening
| | 02:08 | parenthesis, you put in a single quote
and then the relative location of the
| | 02:12 | file that you want to embed.
| | 02:13 | I'll type in assets/flowers.png, and
then I'll move the cursor to the end of the
| | 02:20 | line and complete the tag.
| | 02:22 | Now I'm going to look at the
application in Design view.
| | 02:26 | There is the graphic that I'm
embedding in the application.
| | 02:28 | Now I'm going to right-click on the PNG
file in the Package Explorer and go to
| | 02:33 | the Properties and show you that
this is a fairly sizable PNG file.
| | 02:38 | The result of embedding this PNG
file in the application will be that the
| | 02:42 | application's SWF file grows by this
amount, and it's quite significant.
| | 02:47 | So, it's something you have to watch out
for when you build your Flex applications.
| | 02:50 | If the graphic is too large, you might
think about taking it into Fireworks or
| | 02:55 | some other graphics application and
optimizing it, just like you would for a
| | 02:59 | website, reducing its resolution in
its native size to get it down to the
| | 03:04 | smallest possible size.
| | 03:05 | Once I've created the bitmap image,
I can then resize it all I want.
| | 03:10 | One way of resizing it is to look
at the application in Design mode.
| | 03:14 | And then use your mouse, click the
corner, hold down the Shift key to make sure
| | 03:19 | that you're maintaining the aspect
ratio - that is the ratio between the height
| | 03:24 | and the width - and then just drag and resize.
| | 03:27 | If you look at Source mode after that
operation, you'll see that that results in
| | 03:31 | sending an explicit width and height in pixels.
| | 03:35 | Here's another way of doing the same thing.
| | 03:37 | You can scale an image by setting
properties called scaleX and scaleY.
| | 03:42 | So, for example, if I wanted this
image to be three quarters of its original
| | 03:46 | size, I would set the properties
scaleX and scaleY to values of .75.
| | 03:53 | With the scale properties, the value 1
means full-size, a fractional value means
| | 03:58 | smaller and a value
larger than one means larger.
| | 04:01 | Now I'll look at the application in
Design mode, and there's the result, and
| | 04:05 | I'll drag it down toward the
lower right-hand corner of the current
| | 04:08 | application dimensions.
| | 04:10 | That'll be good for now.
| | 04:12 | Now I'm going to embed another image.
| | 04:14 | This time, I'm going to embed a SWF file.
| | 04:16 | This SWF file was created in Adobe Flash.
| | 04:19 | There are a couple of ways of
working with SWF files in Flex.
| | 04:23 | If you're working with a static SWF file,
such as this one - that is a SWF file
| | 04:27 | that doesn't have an active timeline
and doesn't have any embedded ActionScript
| | 04:31 | code - you can simply treat it as an image.
| | 04:34 | I'm going to embed this SWF file in the
application, but it's important to note
| | 04:38 | that the bitmap image
control cannot deal with SWF files.
| | 04:41 | That's because SWF files are vector
graphics, and the bitmap image control is
| | 04:46 | designed to work with bitmap images.
| | 04:48 | So this time, I'm going to
use the MX image control.
| | 04:53 | Just like with the bitmap image
control, you can use the embed compiler
| | 04:57 | directive and compile the SWF
file into your Flex application.
| | 05:01 | I'll type in relative filename assets/
FlashLogo.swf and just like with the
| | 05:09 | bitmap image, I'll use the scaleX and
scaleY to set the image's dimensions as
| | 05:14 | they're displayed to three
quarters of the image's original size.
| | 05:17 | I'll look at the application in Design
mode and show you that the graphic that
| | 05:22 | was generated in Flash is
being displayed correctly.
| | 05:25 | I can now click and drag and
place it anywhere on the screen.
| | 05:28 | When I do that, that adds X and Y
properties, placing the object in an absolute
| | 05:34 | position relative to the top-
left borders of the application.
| | 05:39 | Now I'll save and run the application
in the browser and show you that the
| | 05:43 | images are a part of the application
and that they're loaded instantly up on
| | 05:47 | application startup.
| | 05:48 | So that's a look at how to embed images
with the image tag in the bitmap image.
| | 05:53 | They both result in compiling the
image into the application, making the
| | 05:56 | application SWF file larger, but
allowing you to present the images
| | 06:00 | instantly upon request.
| | Collapse this transcript |
| Presenting Flash content| 00:00 | The Flex 4 SDK and Flash Player both
deal with SWF files - that is Flash content
| | 00:07 | with the file extension .swf - in the
same ways they do other image files.
| | 00:12 | You can either load SWF files at run time,
or you can embed them in your application.
| | 00:17 | As I've shown in other videos, you
can't use the Spark BitmapImage control to
| | 00:22 | display Flash content.
| | 00:23 | Instead, if you're working with Static
Flash content, you use the Image tag,
| | 00:27 | just like you do with JPEG, GIF or PNG files.
| | 00:31 | But if you're working with a Dynamic
Flash presentation, either one built in
| | 00:35 | Flash Professional or in Flex itself,
there's another control that's designed to
| | 00:40 | load those kinds of files,
called the SWFLoader class.
| | 00:44 | I'll demonstrate how to use this with
an application called FlashContent.mxml.
| | 00:48 | I'll place the cursor inside the
BorderContainer object that's already in that
| | 00:53 | application, and I'll declare
a new object named SWFLoader.
| | 00:58 | The SWFLoader class is the super class,
or the parent class, of the Image class,
| | 01:04 | and so a lot of the features of the
Image class, such as the use of the Source
| | 01:08 | property and the Load method,
are also implemented in SWFLoader.
| | 01:12 | I'll give this SWFLoader object
an id of loader and close the tag.
| | 01:18 | Now the SWFLoader object is a Visual
Container, and it's going to load a SWF
| | 01:22 | file - that is a precompiled Flash application -
into the position where you place the class.
| | 01:28 | I'm going to size the
SWFLoader object explicitly.
| | 01:31 | I'll click on the Design button to
look at the application in Design mode.
| | 01:35 | The SWFLoader object shows up in the
top-left corner of the BorderContainer.
| | 01:40 | I'm going to click in the lower right corner,
and then drag out the size of the container.
| | 01:45 | And I'm going to scroll down a bit so I
can see the bottom of the container, and
| | 01:49 | then I can fit the SWFLoader to
just about the right dimensions.
| | 01:53 | So, I'm leaving just a little
bit of border around the container.
| | 01:57 | Then I'll scroll back up to the top of
the Application, and I'm going to drag in
| | 02:01 | a Button Control from the
Components view in the lower-left corner.
| | 02:06 | When the user clicks the button, I'm
going to react by loading a precompiled SWF
| | 02:10 | file into the application.
| | 02:11 | I'll double-click on the button to
provide a Label, and I'll make the
| | 02:16 | Label, Load Flash Content.
| | 02:20 | And then, in order to execute a
little bit of ActionScript, with the button
| | 02:23 | still selected, I'll go to the
Properties view, and I'll click the button with
| | 02:27 | the lightning bolt next to On click
and choose Generate Event Handler.
| | 02:33 | This takes me to a new generated function that
will execute when the user clicks the button.
| | 02:38 | Now, I gave the SWFLoader object an id
of loader, so when the user clicks the
| | 02:43 | button, I'll use this code
to load an existing SWF file.
| | 02:47 | I'm going to use another of the Flex
applications that I've built in this
| | 02:50 | Project, named RuntimeImages.mxml.
| | 02:54 | I'll call loader.load, and then I'll
pass in the relative URL of the SWF file
| | 02:59 | that I want to load.
| | 03:00 | The name will be RuntimeImages.swf.
| | 03:05 | Now that SWF file does not yet exist
in my Source directory, but because I
| | 03:10 | created the application RuntimeImages in
a previous video, the SFW file for that
| | 03:15 | application has been
created in the Output folder.
| | 03:18 | Both compiled applications will be in
the same directory, and so the first, Flash
| | 03:23 | content, will be able to
load the second, RuntimeImages.
| | 03:26 | I'm going to scroll back up and choose
the FlashContent.mxml file again, and
| | 03:32 | then I'll run it by clicking
the Run button in the toolbar.
| | 03:35 | Now when the application first loads,
the BorderContainer is empty, but when
| | 03:39 | I click Load Flash Content, it results
in loading the other application as a
| | 03:44 | subapplication, or a child application of
the first, and it's completely interactive.
| | 03:50 | Any functionality that I built into
the child application, that is, the
| | 03:53 | application that's nested in the
larger one, will be completely active.
| | 03:57 | So, I can click the button to change
the Source, to call the Load method and do
| | 04:02 | anything else that that child
-nested application can do.
| | 04:05 | So the general rule is, if you're
loading a static SWF file, one that's designed
| | 04:10 | just to present some vector
graphics, use the image component.
| | 04:14 | If the Flash content that you're
loading is interactive, dynamic or has
| | 04:18 | animations, use SWFLoader instead.
| | Collapse this transcript |
| Passing data with binding expressions| 00:00 | In Flex applications, there are a
number of ways to pass data, or information,
| | 00:04 | around from one object to another,
but one of the key techniques that
| | 00:08 | developers use, and one of the things
that makes Flex somewhat unique, is the
| | 00:12 | use of Data Bindings.
| | 00:14 | A Data Binding is a relationship
between two objects, or more accurately,
| | 00:18 | between two properties of two objects,
that allows one object to broadcast
| | 00:23 | changes to its properties and another object
to listen for those changes and react to them.
| | 00:28 | There are a couple of
ways of declaring bindings.
| | 00:31 | There's a shorthand and a longhand version.
| | 00:33 | I'm going to show you the shorthand
version here and then show you the longhand
| | 00:37 | version in another video.
| | 00:38 | I'll be working in an application
called BindingExpressions.mxml, which is part
| | 00:43 | of the Controls project in the Exercise Files.
| | 00:47 | I'll place the cursor inside the
BorderContainer - that's in the application
| | 00:51 | already - and I'm going to create two controls:
| | 00:54 | a TextInput and a Label.
| | 00:57 | I'll start with the TextInput control,
and I'll give it an id of myInput, and
| | 01:04 | then I'll create a Label control,
and I'll assign it an id of myLabel.
| | 01:11 | Now let's say, for example, that the
user types a value into the TextInput
| | 01:15 | Control, and you want to snag that
value, which will be represented in the
| | 01:18 | control's text property, and pass it
into the text property of the Label.
| | 01:24 | You could do this by listening for an
event and executing some ActionScript, but
| | 01:27 | you can do it much more easily
with a lot less code using a binding.
| | 01:32 | Here's what the binding looks like.
| | 01:34 | We describe the two objects in the binding
relationship as the source and the destination.
| | 01:39 | The TextInput control's Text property
is the source, and the Label control's
| | 01:43 | Text property is the destination.
| | 01:46 | To use a shorthand binding, you
start off in the destination object.
| | 01:50 | You set the property of the destination
object, and you refer to the id of the
| | 01:55 | object you want to get the information from
and its property, wrapped in a pair of braces.
| | 02:00 | I'll type in the beginning brace and
then type in 'm-y' and then press Ctrl+Space
| | 02:06 | and select myInput from the
list of available Controls.
| | 02:10 | The reason Ctrl+Space worked there
to bring up the content assist tool is
| | 02:15 | because I had put in the brace character first.
| | 02:18 | Then I'll put in a dot and select the
property I want to get the value from,
| | 02:22 | text, and I'll close the binding
Expression with the closing brace.
| | 02:27 | So that's the basic syntax of a binding.
| | 02:29 | You wrap the expression inside a pair
of braces, and you refer to the property
| | 02:33 | of the object that you want to grab.
| | 02:36 | By placing the binding expression
in the destination object's property
| | 02:39 | declaration, it will grab the
value and place it in the Label.
| | 02:44 | Now I'll test the application in the browser.
| | 02:46 | I'll click into the
TextInput control and start typing.
| | 02:51 | So, as I type characters into the
TextInput control, each time I add a new
| | 02:56 | character, it triggers an event,
which, in turn, triggers the binding.
| | 03:00 | We call that executing the binding.
| | 03:02 | The Label control is listening for
the value and whenever it changes, it
| | 03:06 | grabs it and presents it.
| | 03:09 | In Flex 4, you can actually do
something called two-way Bindings.
| | 03:13 | To demonstrate this, I'll create another
TextInput control, and I'll assign this
| | 03:18 | one an id of input2.
| | 03:22 | Now the first TextInput
control is my Source object.
| | 03:26 | You can actually use a single Source
object with multiple targets and to do
| | 03:31 | that, I'm going to select, copy and
paste the existing Text property with the
| | 03:36 | binding expression from the Label.
| | 03:38 | I'll select it, I'll copy it to
clipboard, I'll click into the second TextInput
| | 03:45 | control, and I'll paste it into place.
| | 03:50 | Now in its current state, as I type a
value into the first TextInput control,
| | 03:55 | the value will be presented in both
the Label and the second Input control.
| | 03:59 | But a two-way binding means that you can
type into either of the Input controls,
| | 04:04 | and the new value will
be reflected in the other.
| | 04:06 | Here is the shorthand for
creating a two-way binding in Flex 4.
| | 04:11 | Place the cursor before the existing
binding expression, and then just add a
| | 04:15 | single At character.
| | 04:17 | That means it's a two-way binding, passing
data back and forth between the two controls.
| | 04:22 | I'll save and run the application, and
I'll click into the first Input control
| | 04:27 | and type input 1, and you'll see the value
represented in both the Label and the second Input.
| | 04:33 | Now I'll click into the second Input
and change the value to input 2, and
| | 04:39 | you'll see that value reflected both in
the first Input and in the Text control.
| | 04:44 | In a sense, we're now daisy chaining bindings.
| | 04:46 | The first Input is connected to the
second Input through the two-way binding,
| | 04:51 | and the Label is still
connected to the first Input.
| | 04:54 | So, I make a change in the second,
and that change ripples back through
| | 04:57 | the chain of bindings.
| | 04:59 | Finally, I'll show you one other use of
binding expressions that will be useful.
| | 05:03 | Up at the top of the application, I've
created a control called a DropDownList.
| | 05:07 | This is a DropDownList that present
two strings, the names of the two graphic
| | 05:12 | files I've used elsewhere in this
chapter, aloe_vera.jpg and bonsai.jpg.
| | 05:17 | I'm going to click into the commented
section and then go to the menu and choose
| | 05:22 | Source > Toggle Block Comment.
| | 05:26 | When the user clicks on this control, it
presents a list of the strings that are
| | 05:30 | a part of its data provider,
aloe_vera.jpg and bonsai.jpg.
| | 05:36 | Now here's how I'm going to use those values.
| | 05:38 | I'll place the cursor inside the
BorderContainer, after any of its other nested objects.
| | 05:45 | Then I'll create an Image tag.
| | 05:47 | Notice that I'm using the MX Image
tag and not the Spark BitmapImage.
| | 05:51 | Only the MX Image tag will be able to
do this trick because I'm going to be
| | 05:55 | loading images at run time, based
on changes in a binding expression.
| | 05:59 | I'll set the Source property, starting
with a string representing the location
| | 06:06 | of my Image files assets/, and then
I'll append the binding expression.
| | 06:12 | The ID of my DropDownList is imageList,
shown on line 9, and so I'm going to
| | 06:18 | use this expression to get the string
represented by the row that the user has
| | 06:23 | selected, imageList.selectedItem.
| | 06:28 | The selectedItem property returns the
currently selected value from the list.
| | 06:33 | I've wrapped that entire
expression inside braces to make it a
| | 06:36 | binding expression.
| | 06:38 | So now, the Source property is a
combination of a literal string,
| | 06:42 | representing the location of the image and
the binding, representing the name of the image file.
| | 06:46 | I'll save and run the application and
at the beginning, you'll notice that the
| | 06:51 | image shows up as a broken image icon,
because I'm not successfully loading an
| | 06:56 | actual graphic file.
| | 06:57 | But then I'll choose one of the
items from the dropdown list, and you'll
| | 07:01 | see that the graphic is successfully
loaded and now I can switch back and
| | 07:05 | forth between the two graphics by simply
switching the item I've selected from the list.
| | 07:10 | And the binding expression in the MX
Image tag does all of the other work.
| | 07:15 | Binding expressions are a critical
aspect of Flex application development.
| | 07:18 | They create relationships between visual
and non-visual objects and make it very
| | 07:23 | easy to pass data around the
application without having to write a lot of
| | 07:27 | explicit ActionScript code.
| | Collapse this transcript |
|
|
6. Using the Flex Event ArchitectureHandling dispatched events| 00:00 | The Flex 4 development
environment is event-oriented;
| | 00:04 | that is, you typically execute
ActionScript code in reaction to events that are
| | 00:08 | dispatched by the application
platform and your specific application code.
| | 00:13 | For all the demonstrations in this
chapter where I will talk about the
| | 00:16 | event architecture in Flex, I'll use a
project that's included with the Exercise Files.
| | 00:21 | If you have access to the
Exercise Files, import the project now.
| | 00:25 | Choose File > Import Flex Project from the menu.
| | 00:28 | Click the Browse button next to
File and navigate to the Exercise Files
| | 00:32 | folder 06_Events, begin.
| | 00:35 | From there, select and
import the file Events.fxp.
| | 00:39 | Then open the Project, open its src
folder, open the (default package) and open
| | 00:45 | the application file EventLogger.mxml.
| | 00:49 | This is a completed application that
presents a Text control and a couple of buttons.
| | 00:55 | The first button is going to be used
to demonstrate different kinds of events
| | 00:58 | that are dispatched by Flex controls.
| | 01:01 | As each event is dispatched, the
application handles the event and logs it by
| | 01:06 | registering it in this TextArea control.
| | 01:08 | When the user clicks the second button,
labeled Clear Event Log, the TextArea
| | 01:13 | control is cleared, so you can wipe
out your event log and start over.
| | 01:16 | Now, I am not going to talk too much
right now about how this application is built.
| | 01:20 | I'll show you how to build the sort of
application in other videos of the chapter.
| | 01:25 | I'll just go ahead and run the application.
| | 01:27 | As the application starts up, the
Button control dispatches three events.
| | 01:32 | Every Visual control in the Flex
SDK dispatches these events during
| | 01:36 | its construction cycle.
| | 01:38 | These are sometimes called life
cycle events, and they happen with every
| | 01:42 | control in the SDK.
| | 01:44 | As a Visual Control is constructed,
upon application startup or when it's first
| | 01:48 | used in an application, it
dispatches these three events:
| | 01:52 | preinitialize, initialize and CreationComplete.
| | 01:55 | They tell you, the developer, the
stage of construction that that control is at.
| | 02:00 | The preinitialized event tells you
that the control has been read and
| | 02:04 | constructed in memory, but is not at a
state where you could present it on the screen.
| | 02:08 | The initialize event tells you that
the control not only has been read into
| | 02:12 | memory, but also all of its properties
and styles have been read into place.
| | 02:17 | Finally, the CreationComplete event
tells you that the control is completely
| | 02:21 | ready for use in the application.
| | 02:23 | These events always occur in the same order,
and again, they're called life cycle events.
| | 02:28 | Every component in your application
dispatches these events, including
| | 02:32 | the application itself.
| | 02:33 | One useful thing to know about the
application's events is that events always
| | 02:37 | happen after the nested components events.
| | 02:40 | So, for example, if you have a button
inside a container, which is inside an
| | 02:44 | application, The button's
CreationComplete event would happen first, then the
| | 02:48 | containers, and finally, the application's.
| | 02:50 | So, when you get an application
CreationComplete event, that means that the
| | 02:55 | entire application is ready for use.
| | 02:58 | Now here is some other events that I
am listening for and handling on this
| | 03:02 | Event Dispatcher button.
| | 03:03 | I am going to move the cursor over the
button, and you'll see in the EventLogger
| | 03:07 | that two events occur
called rollOver and mouseOver.
| | 03:10 | The mouseOver event is called a raw mouse event.
| | 03:13 | It tells you the physical aspect of
what happened, that the user move the
| | 03:17 | cursor over an object.
| | 03:18 | The rollOver event is more of a logical event.
| | 03:22 | It doesn't happen on all of the Visual
controls in the Flex library, although
| | 03:25 | it happens on most.
| | 03:27 | Typically, if you want to react to
the mouse moving over an object, you use
| | 03:31 | the rollOver event.
| | 03:32 | When I move the cursor off of that
button, I get mouseOut and a rollOut event.
| | 03:37 | Now I'm going to clear the
event log and start over.
| | 03:40 | I'll move the cursor over the
Event Dispatcher button again.
| | 03:44 | I'll click down with the mouse
button, and you'll see two events occur,
| | 03:47 | mouseDown and buttonDown.
| | 03:49 | Now, keeping the mouse button pressed,
I'll move the cursor off the button, and
| | 03:53 | you'll see events named mouseOut and rollOut.
| | 03:56 | Now I'll clear the event log
again and show you another sequence.
| | 03:59 | I'll move the cursor
over the button, click down.
| | 04:03 | Once again, I get mouseDown and a buttonDown.
| | 04:06 | And then I will release the mouse
button without moving the cursor off the
| | 04:09 | object, and I get a mouseUp and a click event.
| | 04:12 | The click event is one of the most
commonly used events for Button controls.
| | 04:17 | It tells you that the user clicked
down on the button and released the button
| | 04:21 | while keeping the cursor over the Button object.
| | 04:24 | There are many other events that
happened during the sequence, but you don't
| | 04:27 | have to react to all of them.
| | 04:29 | So, how do you find out which
event a particular object dispatches?
| | 04:34 | As with all such code, you
start with the documentation.
| | 04:37 | I'll look at the application in Source mode
and show you how the events are being handled.
| | 04:42 | Each of the events that I am handling
is represented by an attribute in the
| | 04:45 | Button tag, so there's preinitialize,
initialize, CreationComplete and so on.
| | 04:51 | In Flex, there is isn't a
single universal event handler.
| | 04:54 | You have to listen for each event
you're interested in individually.
| | 04:58 | But for each of those events, I am
calling a single global function,
| | 05:01 | called eventHandler.
| | 05:03 | This function is defined
up here, at lines 8 to 11.
| | 05:07 | It has a single line of code, which is
writing information about the event to
| | 05:11 | the TextArea, which has an ID of Event Log.
| | 05:14 | I am capturing the name of the event,
which is expressed with this syntax
| | 05:18 | event.type and then appending a line
feed to the end of the line with the
| | 05:23 | syntax \n. I'll talk about each element
of this syntax in other videos, but for
| | 05:29 | now, I just want to show you how to
find out which events a particular
| | 05:33 | component can dispatch.
| | 05:35 | I'll go to the Button tag.
| | 05:37 | This is the button that was
dispatching all of those events that I was
| | 05:40 | handling and logging.
| | 05:41 | I'll press Shift+F2 to go to the documentation.
| | 05:44 | When the Adobe Help application opens
and shows me the API Documentation for the
| | 05:48 | button class, I first maximize it
so I can see it in fullscreen mode.
| | 05:53 | Then in the list of the
links, I'll click on Events.
| | 05:57 | In the Events section, you'll see a
link labeled Show Inherited Events.
| | 06:01 | The Spark Button component, which is
the component I'm looking at here, doesn't
| | 06:05 | have any of its own events.
| | 06:07 | Instead, it inherits them
from all its superclasses.
| | 06:11 | Here, for example, is the click
event, which is defined in an object
| | 06:14 | called InteractiveObject.
| | 06:16 | To find out more about the click event,
click into the link, and you'll see all
| | 06:20 | sorts of information about the nature
of that event. To go back to the original
| | 06:24 | documentation for the
Button, click the back button.
| | 06:27 | So, these are all the events that
the button control is capable of
| | 06:30 | dispatching. Wherever you see an event
name that is shown with the Adobe AIR
| | 06:35 | Icon, such as contextmenu,
| | 06:37 | that means that this is an event
that can only occur in a native desktop
| | 06:41 | application that's deployed with Adobe AIR.
| | 06:43 | But otherwise, all of these events can
be dispatched by the Button control, and
| | 06:48 | you can listen for them in a variety of ways.
| | 06:52 | So in other videos in this chapter,
I'll show you a variety of approaches for
| | 06:56 | listening to and handling these events
using both MXML and ActionScript code.
| | Collapse this transcript |
| Using inline event handlers in MXML| 00:00 | When an event occurs, you can react to
it either with code that you put right
| | 00:04 | into an MXML tag, or you can
react by calling a custom function.
| | 00:09 | If all you need to do when an event
occurs is to execute a single statement of
| | 00:13 | ActionScript code, it's frequently the
easiest thing and the shortest amount of
| | 00:17 | code to write the ActionScript
code right there in the MXML tag.
| | 00:21 | For this demonstration, I'll use the
application file, InLineHandlers.mxml.
| | 00:27 | I'll open and maximize the application file.
| | 00:30 | This is a new version of my EventLogger
application, which only has the Visual controls:
| | 00:36 | the Label at the top, the TextArea
control that will be used to log the events -
| | 00:40 | that I'll use to listen for and
react to events - and another Button that
| | 00:44 | already has code to clear the Event Log.
| | 00:47 | I'll start in the Button with an ID of
eventListnerButton and a label of Event Dispatcher.
| | 00:52 | I'll place the cursor after the
Label attribute and press the Spacebar.
| | 00:56 | Then type the first few
characters of the click event.
| | 01:00 | I see the click event displayed in the
code assist list, and I press Enter, or
| | 01:04 | Return, to select it.
| | 01:05 | Now, if all I need to do is execute a
single line of ActionScript code,
| | 01:09 | I don't need a complete ClickHandler.
| | 01:11 | Instead, I'll press Escape to clear
the code assist list and then type in the
| | 01:16 | ActionScript code I want to use, right here.
| | 01:18 | I'll type in eventLog.text = and
then in a pair of single quotes 'You Clicked.'
| | 01:26 | So, my ActionScript code is
right here inline in the MXML tag.
| | 01:31 | Again, if that's all the code I need,
there is no reason to write more.
| | 01:35 | I'll save and run the
application and show you the result.
| | 01:38 | When I click the button, I
see the message You Clicked.
| | 01:41 | Now, if I click it multiple times,
you'll see that it doesn't change.
| | 01:45 | That's because in my code, I'm just
setting the value of the text property, but
| | 01:50 | I'm not appending to the existing text property.
| | 01:53 | So now, to allow myself to log
multiple events, I'm going to go back to the
| | 01:57 | click Event Handler in the code.
| | 01:59 | I am going to add plus before the equals.
| | 02:02 | The plus equals operator, in ActionScript 3,
appends text to an existing text value,
| | 02:08 | rather than replacing the old value.
| | 02:10 | Then I'll add a line
feed right after You Clicked.
| | 02:14 | I'll run the application.
| | 02:16 | Then each time I click the button,
I'm getting another item in the log.
| | 02:20 | When I clear the Event Log, I am
starting over, and then I can continue
| | 02:24 | logging the clicks.
| | 02:26 | So, that's how you create
ActionScript code as an InLineEventHandler.
| | 02:30 | Once again, if you only need to execute
a single ActionScript statement, this is
| | 02:35 | the easiest way to do it.
| | Collapse this transcript |
| Using custom event handler functions| 00:00 | When you need to execute multiple lines
of ActionScript code in reaction to an
| | 00:05 | event, you're best off creating a custom
function and calling that function when
| | 00:10 | the event is dispatched.
| | 00:12 | I'll demonstrate this in the
Application file, HandlerFunctions.mxml.
| | 00:18 | In the beginning state of this
application, I'm listening for the click event on
| | 00:21 | a button, and I'm logging the event by
incrementally adding text to the text
| | 00:27 | property of a TextArea you
control with an ID of eventLog.
| | 00:31 | In previous videos of this series,
I've already described how to use Flash
| | 00:35 | Builder 4's new feature that generates
event handler functions from scratch, but
| | 00:40 | in this example, I'm going to code it
manually, so you can see how to write the
| | 00:44 | tightest, most concise code, if all
you need to do is call a single function.
| | 00:49 | I'm going to start above the
BorderContainer and create a little bit of extra
| | 00:53 | space between the Application
tag and the BorderContainer tag.
| | 00:57 | Then I'll create a script section.
| | 01:00 | I'll type in a less than character and
type 'scr' and press Enter to select the
| | 01:06 | fx:Script tag and then type the greater
than character to autocomplete the tag.
| | 01:12 | You can call any function you
want in reaction to a click event.
| | 01:16 | Typically, these functions have a
name consisting of the name of the event
| | 01:20 | you're listening for, plus the word
Handler at the end and optionally, the id of
| | 01:25 | the object that's dispatched in the event.
| | 01:29 | I'm going to create a protected function.
| | 01:31 | That means it's a function that's
available to any code within this application
| | 01:35 | and any ActionScript classes
that extend the application.
| | 01:40 | Now I will name the function clickHandler.
| | 01:43 | For this function, I don't need to
receive any arguments, or parameters,
| | 01:48 | so I'll just put in an
opening and closing parenthesis.
| | 01:51 | And then at the end of the function, :void.
| | 01:54 | This is a return data type declaration,
and the word 'void' means that this is a
| | 01:59 | function that won't return any values.
| | 02:02 | When you write an event handler function for
Flex, typically, you don't return a value from it.
| | 02:08 | Now, right after the function
declaration, I'll put in a pair of braces, and
| | 02:13 | then within the braces, I can write
as much ActionScript code as I want.
| | 02:17 | I'll go down to the click event of the
Button control that I'm listening to,
| | 02:22 | and I'll select all of the ActionScript code
between the double quotes for the Click attribute.
| | 02:27 | Then I'll release the mouse button, and
then click and drag and move that code
| | 02:32 | up to the clickHandler method.
| | 02:33 | So, now that code is being
called when the method is called.
| | 02:38 | I'll add a semicolon to the end of the line.
| | 02:40 | It's not technically required,
but it's a good style to use.
| | 02:44 | And then in order to call the function,
I'll go back to the Button controls
| | 02:47 | Click attribute, and now instead of
executing the code directly, I'll call the function.
| | 02:53 | I'll type in the word 'click,' press
Ctrl+Space and Flash Builder automatically
| | 03:00 | fills in the method call.
| | 03:01 | I'll save my changes, and I'll run
the application and then click the
| | 03:08 | button multiple times.
| | 03:09 | And you'll see that the code is still
working exactly the same way as before,
| | 03:13 | but now, I have a function in which
I can add as much code as I need to.
| | 03:18 | So, that's how you create simple
custom event handler functions.
| | 03:22 | When you use Flash Builder's handler
generation tool, you'll see quite a bit
| | 03:26 | more code than this, but in many
cases, it's not really necessary.
| | 03:31 | If all you need to do is react to a
particular event of a particular object,
| | 03:35 | then the eventHandler function
probably doesn't need any more than this:
| | 03:39 | a simple function, returning void,
and executing whatever ActionScript
| | 03:44 | code you need to.
| | Collapse this transcript |
| Understanding event objects| 00:00 | Each event in the Flash Platform,
including the Flex framework, dispatches
| | 00:05 | something called an Event object.
| | 00:07 | An Event object is an instance of
an ActionScript class, which contains
| | 00:11 | properties that tell you all sorts of
useful information about the nature of the event:
| | 00:16 | what object dispatched the
event, the name of the event
| | 00:20 | and all sorts of other contextual
information that can be incredibly valuable.
| | 00:25 | To demonstrate this, I'll use the
application file EventObjects.mxml.
| | 00:30 | That's part of the project files.
| | 00:32 | In the current state of the application,
the button listens for its click event
| | 00:37 | and reacts by calling a
function called clickHandler.
| | 00:41 | Right now, I'm not handling the Event
object and so I have no way of getting
| | 00:45 | this valuable information.
| | 00:48 | Here is how you would redesign a
function so that you're listening for and
| | 00:51 | handling the Event object.
| | 00:54 | First, I'll go to the place where I
am calling the eventHandler function.
| | 00:58 | That's the click attribute of the Button tag.
| | 01:01 | When the event occurs, the name of the
Event object variable is always the same.
| | 01:06 | It's always named 'event'
with all lowercase characters.
| | 01:11 | So, to capture that Event object,
you pass the Event object to the
| | 01:15 | function, like this.
| | 01:16 | You just type in the word event.
| | 01:18 | It doesn't matter whether you're
working with a visual control and
| | 01:21 | non-visual control.
| | 01:23 | It doesn't matter what the name of the event is.
| | 01:25 | At the moment of handling it, the name
of the object is always the same, event.
| | 01:30 | Now, I'm going to refactor, or redesign,
the function to receive that Event object.
| | 01:35 | Within the parentheses, in the method
signature, I'll type the word 'event' again.
| | 01:41 | This will be the name of the
parameter that I'm receiving.
| | 01:44 | Now, you don't need to name it event here.
| | 01:46 | You'll see some developers name
it e, or ev, or evObj or EventObj.
| | 01:53 | The name of the parameter doesn't matter.
| | 01:55 | It can be anything you like, but the
data type of this parameter is critical.
| | 02:00 | You can always data type the
Event object as a class named event.
| | 02:06 | The Event class is the base class, or
the super class, for a whole set of other
| | 02:12 | event style classes that
are a part of the Flex SDK.
| | 02:16 | Each event that occurs dispatches its
own type of event, but all of these event
| | 02:21 | classes are subclasses, or are
extended from the event class.
| | 02:26 | So, even if you know you're getting
some other event, such as a MouseEvent
| | 02:30 | class - that's the class that's
actually dispatched by a button's click event -
| | 02:35 | you can always put in event as the
data type, because it's the super class.
| | 02:39 | And in the world of object-oriented
programming, the polymorphic nature of this
| | 02:44 | architecture means that you can refer to
the object either as its native type or
| | 02:50 | as its superclass type.
| | 02:52 | Now, I'm going to do a little bit of
debugging to examine the structure of the
| | 02:56 | Event object when it's captured.
| | 02:59 | I'm going to place a breakpoint
on the line that includes the code,
| | 03:02 | eventlog.text et cetera.
| | 03:04 | Then I'll save, and I'll run the
application in Debug mode by clicking the Debug
| | 03:09 | button on the toolbar.
| | 03:11 | When the application opens up in the
browser, click the Event Dispatcher button.
| | 03:16 | Then switch back to Flash
Builder, if it doesn't take focus.
| | 03:19 | And if you're prompted to open the
Flash Debug perspective, click Yes.
| | 03:24 | Now, take a look at the Variables view.
| | 03:26 | Here is the event parameter that's
being passed into the clickHandler function.
| | 03:31 | I'm going to double-click the Variables
tab to make it display fullscreen, and
| | 03:35 | then I'll open up the tree structure
that shows me what's in the Event object.
| | 03:40 | Notice, first of all, that the
name of the variable is event.
| | 03:44 | That's because that's what I
named it in my method signature.
| | 03:47 | And also notice that the data
type is flash.events.MouseEvent.
| | 03:52 | This is the native data type of the
Event object for this particular object and
| | 03:57 | this particular event.
| | 03:59 | Also, notice all of the different
properties that are members of this Event object.
| | 04:04 | A MouseEvent object, for example, has
properties called ctrlKey and shiftKey,
| | 04:10 | and altKey, which tell you whether
those keys were being held down at the
| | 04:13 | moment the event occurred.
| | 04:16 | But under this inherited section,
you'll see all of the properties that are
| | 04:20 | members of this superclass, that is
the event class or its superclasses.
| | 04:26 | I'll open up the inherited section and
show you two critical properties that are
| | 04:30 | members of every Event object.
| | 04:33 | The type property is the name of the
event that occurred, and its value, in
| | 04:38 | this case, is click.
| | 04:40 | The target is a reference variable,
which refers to the visual or non-visual
| | 04:44 | object that dispatched the event,
which, in this case, is a button.
| | 04:50 | I'm going to drill down a little
further here, going down to the target
| | 04:53 | property, and from there,
into its inherited section.
| | 04:57 | And I'll scroll down to the label and
show you that, in fact, this is the button
| | 05:02 | with a label of Event
Dispatcher that generated the event.
| | 05:07 | So let's go back to the code.
| | 05:09 | I'm going to terminate the debugging
session by clicking the Terminate button on
| | 05:13 | the Debug View, and then I'll
go back to the Flash perspective.
| | 05:19 | When you listen for this event, once
again, you can either data type it as the
| | 05:23 | superclass, event or as the subclass, MouseEvent.
| | 05:28 | I'm going to use the MouseEvent class,
because that's going to give me the
| | 05:31 | ability to address all those other
detail properties, such as, ctrlKey,
| | 05:35 | shiftKey, and altKey.
| | 05:38 | Then I'll add some code
to the clickHandler method.
| | 05:42 | I'll start by appending text to the eventLog.
| | 05:46 | First, I'll output the name of the event.
| | 05:53 | The name of the event is in the type property.
| | 05:55 | So, I'll output, The event name is,
and then I'll append to that event.type.
| | 06:06 | Next, I'll log the id of the
object that dispatched the event.
| | 06:10 | I'll say The id of the target object is,
and then I'll refer to event.target,
| | 06:18 | that refers to the button control, and
from there, to id, which is the id of the
| | 06:23 | Button control as declared in my MXML code.
| | 06:27 | And finally, I'll use one of the
special properties of the MouseEvent class,
| | 06:31 | like this, eventLog.text +=, then the
literal string, Shift key pressed, and
| | 06:39 | then I'll append to that event.shiftKey.
| | 06:43 | And that will tell me whether the
Shift key was being pressed when the
| | 06:46 | click event occurred.
| | 06:47 | I'll run the application and click
the button, and I'll see all of this
| | 06:51 | useful information.
| | 06:53 | Now notice it's all being kind of run together.
| | 06:55 | So, I'm going to make one more change
here, and I'm going to add a line feed to
| | 07:00 | each of these lines.
| | 07:02 | I'll type in plus and then the '\n,'
I'll select that and copy it to the
| | 07:10 | clipboard by pressing Ctrl+C, or Command
+C on Mac, and then I'll paste it into
| | 07:14 | each of the other lines of code by
pressing Ctrl+V, or Command+V on Mac.
| | 07:20 | Then I'll, once again, run the
application, and now I should see a nice, clean
| | 07:26 | logging of information.
| | 07:29 | The event name is click.
| | 07:31 | The ID of the target object is
eventListenerButton and Shift key pressed is false.
| | 07:38 | This time, I hold down the Shift key
and click the button again, and I'll see
| | 07:42 | that Shift key pressed returns true.
| | 07:45 | So this is how you can use Event
objects to get detailed information about the
| | 07:49 | events that have occurred.
| | 07:52 | If you want to find out which event
class is being used for a particular event,
| | 07:57 | use the documentation.
| | 07:58 | I'll go to the Button control
and press Shift+F2 to go to the API
| | 08:02 | documentation for that class.
| | 08:05 | From there, I'll click the Events link,
I'll click the click link, and that will
| | 08:11 | take me to the description of that event.
| | 08:14 | Notice here that the documentation
tells me exactly which event class will be
| | 08:18 | used, flash.events.MouseEvent.
| | 08:21 | And I can click into that link and
get all the detailed information about
| | 08:25 | that class as well.
| | 08:27 | The API documentation is critical
when you start working with the event
| | 08:30 | architecture of Flex.
| | 08:32 | It will tell you which event class is
being used for which object and which
| | 08:36 | event, and what detailed
information is available in that event class.
| | Collapse this transcript |
| Using event listener functions| 00:00 | As I've shown in other videos, you
can listen for and react to events using
| | 00:05 | MXML-based inline event listener code,
but another, and somewhat more flexible
| | 00:10 | approach, is to create your
event listeners using ActionScript.
| | 00:14 | To demonstrate this technique, I'll
use the application EventListeners.mxml.
| | 00:19 | In this version of the application,
I once again have a function called
| | 00:23 | clickHandler, which is accepting an
event object, datatyped as MouseEvent.
| | 00:28 | This is the event class that's used
whenever you deal with a mouse event, such
| | 00:32 | as click, mouseover,
mouseup, mousedown and so on.
| | 00:37 | Right now, in the application,
I have a Button with an ID of
| | 00:41 | eventListenerButton, which has a
click event Handler declared using MXML.
| | 00:46 | When I run the application and click
the button, I get output that tells me all
| | 00:50 | about the event that occurred.
| | 00:52 | Now, I'm going to show you how to
register that Event Listener using
| | 00:56 | ActionScript code instead.
| | 00:57 | I'll close the browser
and return to Flash Builder.
| | 01:01 | I'm first going to remove the
click event from the MXML tag.
| | 01:07 | Next, I'll go to the application tag
and add a creationComplete event handler,
| | 01:12 | using Flash Builder's
automatic handler generation feature.
| | 01:17 | I'll press the Spacebar, after the
backgroundColor attribute, and choose the
| | 01:21 | creationComplete event from the list.
| | 01:24 | Then when the Generate
CreationComplete Handler prompt appears, I'll press
| | 01:28 | Enter, or Return, to automatically generate an
event handler function and the matching call.
| | 01:35 | Notice that this syntax follows the same
rules as the clickHandler function that
| | 01:39 | I created manually in another video.
| | 01:42 | In order to be used in an event handler
architecture, event handler functions
| | 01:46 | should receive a single argument, the
event object, datatyped as the appropriate
| | 01:52 | class for that object and event,
and should always return void.
| | 01:56 | Here is how I'm going to add the
event listener using ActionScript code.
| | 02:01 | I'll go to the application1_
creationCompleteHandler function, remove the
| | 02:05 | generated comment, and then I'll
start with the id of the object to whose
| | 02:11 | event I want to listen.
| | 02:13 | The id is eventListenerButton.
| | 02:16 | Then I'll put in a dot, and I'll
call the function addEventListener.
| | 02:21 | When you call addEventListener,
you pass in two arguments minimally.
| | 02:25 | The first argument is a string, which is
the name of the event you're listening to.
| | 02:30 | Now, I could pass in the simple
string "click," wrapped in quotes, like this.
| | 02:36 | But the problem with that approach
is that it's very prone to error.
| | 02:39 | If I misspell the event name, for
example, if I leave out the c, then I'll be
| | 02:44 | listening for an event that will never happen.
| | 02:47 | And it won't be an error that can be
caught by the syntax checker at compilation
| | 02:51 | time, or by the runtime engine.
| | 02:53 | It will just be a bug in my
program that's very hard to track down.
| | 02:58 | So instead, when you type in the
addEventListener function and the opening
| | 03:01 | parenthesis, you'll see a list appear
of classes and their contained constants.
| | 03:07 | These constants represent the names of
events that this control is capable of
| | 03:12 | dispatching, in this case, a Button control.
| | 03:16 | I'm going to be listening for
this event, MouseEvent.CLICK.
| | 03:21 | And notice, if I move the cursor over
the word CLICK, I see a description of the
| | 03:25 | constant, that it's a string and that
it's a member of the MouseEvent class.
| | 03:30 | Its value is the word click
as a string all lowercase.
| | 03:35 | Now the second argument that you must
pass in is the function that you want to
| | 03:40 | call when the event occurs.
| | 03:41 | You only pass in the name of the function.
| | 03:44 | You're not calling it at this moment.
| | 03:46 | And technically speaking, you're passing
in a reference to the function as an object.
| | 03:51 | I'm going to type in the name
of the function, clickHandler.
| | 03:55 | And that now means that when the
click event occurs, the clickHandler
| | 03:59 | function will be called.
| | 04:01 | The syntax of the clickHandler
function is already known to the object that
| | 04:05 | will call it, because it follows the
signature, or model, for every eventHandler function.
| | 04:11 | It receives the event
object, and it returns void.
| | 04:16 | I'll run the application again and test
it, clicking the Event Dispatcher button.
| | 04:20 | And I see that even without the MXML-
based listener, my click event is still
| | 04:24 | being heard and responded to.
| | 04:27 | Now the Flex 4 SDK allows you
to add and remove event listeners
| | 04:31 | using ActionScript code.
| | 04:34 | First, to demonstrate this, I'm
going to rename this function,
| | 04:37 | application1_creationCompleteHandler,
and I'm going to use Flash Builder 4's
| | 04:42 | refactoring capability to rename the
function and update all of its references.
| | 04:47 | I'll right-click on the function
name and choose Refactor > Rename.
| | 04:54 | And I'm going to change the name of
the function simply to initEvents.
| | 05:00 | You can name the function anything you want,
| | 05:02 | but all I'm doing with it is
initializing event listeners.
| | 05:06 | I'll click OK, and see that the
name of the function has been changed.
| | 05:11 | And the call to the
function has been changed as well.
| | 05:14 | Now, I'm going to scroll down to the
bottom of the code, and I'll find a button
| | 05:19 | there labeled Add Listener.
| | 05:21 | And I'll add an event handler for this button.
| | 05:25 | And in the clickHandler button, I'm
going to copy and paste the code from the
| | 05:29 | initEvents method, creating a copy
of it in this button's clickHandler.
| | 05:34 | Then I'll go to this
button, labeled Remove Listener.
| | 05:37 | I'll add a click event.
| | 05:39 | Once again, I'll generate an
automatic Handler function for it.
| | 05:43 | And when the user clicks this
button, I'm going to remove the event
| | 05:46 | listener, EventListenerButton.
removeEventListener, and I'm going to pass in
| | 05:52 | exactly the same two arguments:
| | 05:54 | MouseEvent.CLICK, and the name
of the function, clickHandler.
| | 05:59 | So now, when the user clicks this button,
it will remove the event listener from
| | 06:04 | the object, and it will no
longer respond to the event.
| | 06:07 | I'll run the application and test it.
| | 06:10 | As the application starts up, it's
adding the event listener automatically.
| | 06:14 | So, if I click the button, I'll get a response.
| | 06:18 | I'll clear the event log, and
then click once on Remove Listener.
| | 06:22 | I don't see any visual response because
I didn't do anything to make it respond
| | 06:26 | in the code, but now when I click the
Event Dispatcher button, nothing happens.
| | 06:30 | I'll click Add Listener again, and now I,
once again, am responding to the event,
| | 06:36 | executing my ActionScript code.
| | 06:39 | So to add an event listener, you use
the addEventListener method, and to remove
| | 06:44 | it, you call removeEventListener.
| | 06:46 | In both cases, you pass in the name
of the event you're listening for and a
| | 06:50 | reference to the function you want to
call, and the function must follow the
| | 06:54 | standard event handler syntax,
accepting a single argument datatyped as the
| | 06:59 | appropriate event class and returning void.
| | Collapse this transcript |
|
|
7. Laying Out an ApplicationSetting the application's layout property| 00:00 | In Flex 4 applications, you lay out the
application's appearance using a variety
| | 00:05 | of containers that are
known as Layout Containers.
| | 00:08 | The application itself is a layout
container, as is the panel, the group, and
| | 00:13 | a number of others.
| | 00:15 | For the demonstrations in this
chapter, I'll use a Project that's part of
| | 00:18 | the Exercise Files.
| | 00:20 | If you have access to the
Exercise Files, go to the menu and choose
| | 00:23 | File > Import Flex Project.
| | 00:27 | Browse and select the file Layout.fxp,
which you'll find in 07_Layout/begin
| | 00:33 | folder, under Exercise Files.
| | 00:36 | Select and import the file, and that
will create a new project called Layout.
| | 00:43 | Open the new project and in the
default package, open the application
| | 00:48 | file AppLayout.mxml.
| | 00:51 | I'm going to take a look at
this application in Design mode.
| | 00:54 | You'll see that it presents a variety
of visual objects, including an Image
| | 00:58 | control, a Button, a CheckBox, a Date
Chooser, a PopUpButton and a Data Grid.
| | 01:06 | These objects are scattered around the
screen, and they are currently placed in
| | 01:10 | their particular positions
based on their X and Y properties.
| | 01:14 | For example, the Image has an x
property of 31 and a y of 40, meaning that its
| | 01:19 | place 31 pixels from the
left and 40 pixels from the top.
| | 01:24 | The Application container, and all other
spark containers that use the new layout
| | 01:29 | architecture, by default, use
architecture called Basic Layout.
| | 01:33 | If you've worked with Flex 3, this will
be similar to Flex 3's Absolute Layout,
| | 01:38 | meaning that objects are placed in
specific pixel positions on the screen, or
| | 01:42 | relative to other borders if you know
how to use constraint-based properties.
| | 01:46 | If you prefer, you can set up your
application to stack items from top to
| | 01:51 | bottom, using a special class called
VerticalLayout, or from left to right
| | 01:56 | using HorizontalLayout.
| | 01:58 | You can set these properties in code
or you can do it in Design mode, and the
| | 02:02 | code will be generated for you.
| | 02:04 | I'll start in Design mode.
| | 02:07 | I'll click on the background of the
application, and then over in the Properties
| | 02:11 | view in the lower right-hand corner,
I'll scroll down to the bottom, and I'll
| | 02:15 | open up a dropdown list that shows
the four available Layout classes.
| | 02:19 | Now in Flex 3, the Layout
property was set to a simple string:
| | 02:23 | a Vertical, Horizontal or Absolute.
| | 02:25 | In Flex 4, you set the Layout
property to an instance of a complex class.
| | 02:31 | These are the four Layout
classes that are provided for you.
| | 02:33 | I'm going to start with a VerticalLayout.
| | 02:37 | Notice in Design mode that as soon as
I choose that item that objects are now
| | 02:41 | stacked from top to bottom.
| | 02:44 | Also, once you've chosen that layout
architecture, you can add properties,
| | 02:48 | such as the Gap between objects, the
Alignment, the Row Height and Count and
| | 02:55 | Padding settings.
| | 02:56 | So for example, if I want to provide a 30
pixel Padding all around the application,
| | 03:01 | I would add a value of 30 to
each of the Padding settings:
| | 03:07 | Left, Right, Top and Bottom.
| | 03:09 | Now, when I run the application, the
result will be a nice 20 pixel padding
| | 03:13 | between the border of the application
and the first visual object, and that's on
| | 03:18 | all sides, because I said
all four Padding properties.
| | 03:23 | Now, before I choose another Layout
architecture, I'll show you the resulting code.
| | 03:27 | I'll click the Source button, and show
you that the Layout property has been
| | 03:33 | populated with an instance
of the VerticalLayout class.
| | 03:36 | Each of the settings that I set through Design
mode has been translated into an MXML attribute.
| | 03:43 | If you don't want to use
VerticalLayout, perhaps you want to use
| | 03:45 | HorizontalLayout. It works exactly the
same, but instead of Vertical, you type
| | 03:51 | in 'Horizontal' or choose
that setting from Design mode.
| | 03:56 | Once again, look at the application in
Design mode and now I'll see the objects
| | 04:00 | laid out from left to right.
| | 04:02 | Notice that these objects have their
vertical tops aligned with each other.
| | 04:07 | If you don't like that, you can change
it using a style called verticalAlign.
| | 04:10 | I'll change it to middle, and then I'll
look at the application in Design mode
| | 04:16 | again and now the objects are
aligned in the middle of the screen.
| | 04:22 | So, that's how you set the
Layout of an application in Flex 4.
| | 04:26 | You can choose from any of the Layout
classes, and the ones provided with the
| | 04:30 | Flex 4 SDK include HorizontalLayout,
VerticalLayout, TileLayout and BasicLayout,
| | 04:37 | which is the default, and allows you to
place objects in positions relative to
| | 04:41 | the top-left corners of the application.
| | Collapse this transcript |
| Using Spark Group containers| 00:00 | Flex 4 provides a number of Layout
containers that allow you to group and
| | 00:04 | lay out content together.
| | 00:06 | The most low level of these
containers, and the lightest weight, is called
| | 00:10 | the Group container.
| | 00:11 | There are three variations on the Group:
| | 00:14 | Group itself, and then two subclasses
of the Group container, named VGroup, for
| | 00:19 | vertical layout, and
HGroup, for horizontal layout.
| | 00:22 | For this demonstration, I'll use
the application GroupDemo.mxml.
| | 00:28 | This application has three buttons
laid out in specific positions, based on
| | 00:33 | their X and Y positions.
| | 00:35 | I'm going to group them together and
initially, I'm going to use a class called VGroup.
| | 00:40 | A VGroup is a Group Container that
already has vertical layout built into it.
| | 00:46 | I'll go to the code and place the
cursor before the three button tags.
| | 00:51 | Then I'll create a paired s:Group tag set.
| | 00:55 | I'll type in the less than character
then the word Group, and I'll choose
| | 01:00 | s:Group from the list of available
classes and then autocomplete the MXML element.
| | 01:07 | Now I'll take the three buttons,
and I'll drag and drop them and move
| | 01:12 | them inside the Group.
| | 01:14 | I'll select all of that code and then
choose Source > Correct Indentation to
| | 01:19 | properly show the nesting of
the objects within the container.
| | 01:23 | If you use a simple Group Container,
it's going to implement basic layout by
| | 01:27 | default, just like the application.
| | 01:29 | For example, here I have a group
containing the three buttons and notice that
| | 01:34 | the buttons are retaining their
positions relative to the top-left corner of the
| | 01:38 | Group, rather than the application.
| | 01:41 | If I were to reposition the Group by
setting its X and Y properties, the entire
| | 01:45 | Group would move around.
| | 01:47 | If on the other hand, I want to Group
these three buttons together and make them
| | 01:51 | stack on top of each other,
| | 01:53 | I can either add a Layout property,
set to an instance of the VerticalLayout
| | 01:57 | class, or more simply, I can
simply change the Group to a VGroup.
| | 02:02 | The VGroup stacks objects from top to
bottom, because it automatically has a
| | 02:08 | layout property of VerticalLayout.
| | 02:10 | I'll show the same application in
Design mode now, and there is the result.
| | 02:15 | Now the object's layout is
determined by the Gap, Alignment and other
| | 02:20 | properties of the VGroup.
| | 02:23 | Now, before I copy and paste this code
to show you other groups, I want to show
| | 02:27 | you that the X and Y properties of the
three buttons are still in the code, but
| | 02:32 | they aren't doing anything anymore.
| | 02:34 | Because I've placed the buttons inside
a VGroup, the Layout is now automatic.
| | 02:38 | So, I'm going to remove the X and Y
properties from all three buttons.
| | 02:43 | Then I'm going to copy and paste the Vgroup.
| | 02:45 | I'm going to set the second VGroup's X
property to a value of 250, meaning that
| | 02:54 | it will be placed 250 pixels from
the left side of the application.
| | 02:59 | For the second Group, I'll
change the VGroup to an HGroup.
| | 03:04 | Then I'll look at the application in
Design mode, and there is my second Group.
| | 03:10 | Because I used an HGroup, the
objects are laid out from left to right.
| | 03:15 | Now one of the limitations of both
the VGroup and of the HGroup and the
| | 03:18 | Group itself is that you can't provide
skinning, or visual presentation, to the container.
| | 03:24 | The Group object is the
lightest weight of all the containers.
| | 03:28 | It doesn't support background colors.
| | 03:30 | It doesn't support borders, or
any other visual presentation.
| | 03:34 | Essentially, a Group is always
invisible and only presents its nested content.
| | 03:39 | If you want to group content together
and add some visual presentation to the
| | 03:43 | container itself, there are two main options.
| | 03:48 | One is to use the BorderContainer.
| | 03:50 | The BorderContainer component is
one I've shown in other videos.
| | 03:54 | It provides some of the most commonly
used styles from the world of Flex 3, such
| | 03:58 | as Background Color, Simple Borders and so on.
| | 04:02 | The other one you can use
is called SkinnableContainer.
| | 04:06 | A SkinnableContainer implements the
Layout property just like BorderContainer
| | 04:11 | and the group components, but it
supports the Spark Skinning Architecture, which
| | 04:16 | allows you to create a separate MXML
skinning component and bind that skin to
| | 04:21 | the container either during
compilation or at run time.
| | 04:25 | I'm going to copy and paste the three
buttons into the BorderContainer and into
| | 04:30 | the SkinnableContainer.
| | 04:33 | Then I'm going to cause them to stack
on top of each other by adding a Layout
| | 04:37 | property set to
VerticalLayout inside the application.
| | 04:46 | I'll take that Layout property.
| | 04:49 | I'll Copy it to the Clipboard, and I'll
Paste it into both the BorderContainer
| | 04:55 | and into the SkinnableContainer.
| | 04:57 | The point I want to make here is that
the Layout property is the same for all of
| | 05:02 | these Spark-based containers.
| | 05:04 | The big difference between them is
that Groups are invisible, don't have any
| | 05:09 | visual presentation, whereas
BorderContainer and SkinnableContainer do have
| | 05:13 | visual presentation.
| | 05:15 | The BorderContainer is typically used
when you want to set simple styles and the
| | 05:19 | SkinnableContainer, when you
want to do something more complex.
| | 05:24 | I'll save and run the application.
| | 05:27 | The first three buttons are in the VGroup.
| | 05:29 | The second, three laid out
horizontally, are in the HGroup.
| | 05:34 | The third are in the BorderContainer,
and the final three buttons are in the
| | 05:38 | SkinnableContainer, which
currently, does not have a skin applied.
| | 05:42 | So, those are the primary ways that
we lay out objects on the screen in Flex
| | 05:46 | 4 Applications.
| | Collapse this transcript |
| Using the Spark Panel container| 00:00 | The Flex SDK implements a special
container called the panel, which has the
| | 00:05 | appearance of a dialog box but is
really a two-dimensional container, just like
| | 00:09 | other containers I've shown in other videos.
| | 00:12 | For this demonstration, I'll use
the application panelDemo.mxml.
| | 00:17 | This application presents a number of labels.
| | 00:21 | There are three labels that have
titles or category names, and three other
| | 00:26 | labels that show larger amounts of text.
| | 00:30 | Now I'm going to show you how to take
the text that's presented, using the Label
| | 00:34 | objects in this application, and wrap
the text into panels, so that they have
| | 00:39 | more of a dynamic appearance.
| | 00:42 | I'll start above the first Label,
after the fx:Declarations element.
| | 00:46 | I'll create my first panel like this.
| | 00:48 | I'll type in a less than character and
then 'p-a.' That takes me to the panel component.
| | 00:55 | Notice that there are two versions of panel,
the older MX version and the new Spark version.
| | 01:01 | In a Flex 4 Application, you
typically want to use the new version.
| | 01:04 | I'll select s:panel, and then
type in the greater than character to
| | 01:09 | autocomplete the panel.
| | 01:10 | Now, there are a couple of places
where you can display content in a panel.
| | 01:14 | The first is in the title.
| | 01:16 | The title is a simple string that gets
presented in the top-left corner of the
| | 01:20 | header of the panel.
| | 01:22 | I'll go to the Label that
displays the text Shrubs.
| | 01:26 | I'm going to cut that text from
the Label and move it into the title
| | 01:30 | attribute of the panel.
| | 01:33 | I'll set title="Shrubs".
| | 01:38 | Then because I no longer
need it, I'll delete the Label.
| | 01:42 | Next, I'm going to take the
Label that has the longer text
| | 01:47 | and I'm going to cut and paste it
and place it inside the panel.
| | 01:51 | So, now the panel contains a
Label with a large amount of text.
| | 01:56 | The Label is word
wrapping the text automatically.
| | 01:59 | Now, let's take a look at the
application in Design view and see what happened.
| | 02:05 | The panel Container can be moved
anywhere on the screen right now, because the
| | 02:09 | application is using the default basic layout.
| | 02:12 | The title appears in the top-left
corner in the header region, and any content
| | 02:17 | that you place within the panel is
placed within its content group, which, by
| | 02:22 | default, has a white Background.
| | 02:24 | Now, you'll notice that the Layout is
a little bit interesting, because I'm
| | 02:28 | getting some extra Padding
at the top and on the side.
| | 02:31 | If you want to control the layout of a
panel, you do the same thing as with the
| | 02:36 | Application, Group and other containers.
| | 02:39 | You set a Layout property.
| | 02:41 | Just like those containers, the
Layout property supports the default
| | 02:45 | BasicLayout, Horizontal,
Vertical and TileLayout.
| | 02:48 | I'll add a Layout object, set to VerticalLayout.
| | 02:58 | Then I'll set the four
Padding settings to 10 pixels each.
| | 03:13 | Here is the result.
| | 03:14 | Now, the panel presents the
text with 10 pixels all around.
| | 03:18 | The width of the panel, right now, is
being determined by its nested Label control.
| | 03:23 | The Label has a width of 200 pixels.
| | 03:25 | You add the extra padding all around,
and you end up with the panel width.
| | 03:30 | Now, I'll repeat the
exercise for the other labels.
| | 03:36 | In order to make this go a little bit
more quickly, I'm going to Copy and Paste
| | 03:40 | the panel two times.
| | 03:45 | Then I'll go and get all the text
and move it into the right place.
| | 03:48 | I'll go to the Label with Container
Plants, go to the second panel and Paste
| | 03:55 | that into the title.
| | 03:58 | Then I'll go and get the text below
Container Plants, select all of that
| | 04:05 | text, copy it to the clipboard, and then come
back to the Label that's nested within the panel,
| | 04:13 | I'll select and delete all of the text that's
already there, and then paste the new text in.
| | 04:20 | Then I'll do the whole operation again,
this time, for the last Label and panel.
| | 04:29 | I'll go to the third panel and paste
in the text, Herbaceous Perennials.
| | 04:39 | Then I'll go grab the text from the
final Label and Paste it into the Label
| | 04:43 | inside the third panel.
| | 04:46 | Finally, I'll delete all of the remaining
labels at the bottom of the application.
| | 04:51 | If you're following along and want
to check your work, take a look at the
| | 04:54 | Outline view in the lower-
left corner of Flash Builder.
| | 04:58 | You should see three panels, with
three different titles of Shrubs, Container
| | 05:03 | Plants and Herbaceous Perennials.
| | 05:06 | Within each panel, there should
be a Layout object and the Label.
| | 05:10 | And because I copied and pasted the
VerticalLayout classes, I'm using the same
| | 05:14 | padding for all three panels.
| | 05:16 | Now to lay out the panels, I'll add a
Layout object to the application itself.
| | 05:22 | I'll add a layout tag set as a
property, and then, I'll use the
| | 05:27 | HorizontalLayout object.
| | 05:29 | Because I'm using HorizontalLayout for the
panels, I no longer need the X and Y settings,
| | 05:34 | so I'll go through and
remove those from all three panels.
| | 05:40 | If you have trouble finding any of the
code at any point, go to the Outline view
| | 05:45 | and use the outline to get to
the object you want to modify.
| | 05:48 | Here is the panel for Herbaceous Perennials.
| | 05:54 | I'll Run the application, and there
is the result, three panels with three
| | 06:00 | labels and each with an appropriate title.
| | 06:03 | So the panel container can be
used to present any sort of content.
| | 06:07 | In these panels, I'm only presenting
one label per panel, but you can add as
| | 06:12 | many visual controls and
objects to your panels as you like.
| | 06:15 | And as I'll show you in a separate video,
you can also add a control bar at the
| | 06:19 | bottom of the panel to display
buttons and other interactive controls.
| | Collapse this transcript |
| Using the Application and Panel control bars| 00:00 | The Flex 3 SDK included a
container called the Control Bar.
| | 00:04 | The Control Bar was a container
designed to be placed at the bottom of a panel.
| | 00:09 | When you placed the control bar at the
bottom of the panel, it created a footer
| | 00:12 | in the panel, and you could then add
other objects, horizontally laid out, such
| | 00:17 | as buttons and other interactive
objects, creating a wizard style interface.
| | 00:23 | Flex 4 implements the same sort of
functionality but as a property of the panel
| | 00:27 | called controlBarContent.
| | 00:29 | I will show you how to use this in an
application called ControlBarDemo.mxml.
| | 00:36 | This application contains a panel.
| | 00:38 | The panel has a title and a rich
text object with some mixed content.
| | 00:43 | Now, I am going to add a series
of buttons in the panel, like this.
| | 00:46 | I will go to the code, and I will
place the cursor at the bottom of the panel,
| | 00:51 | just before the closing tag, and
I will make a little bit of space.
| | 00:55 | In the Spark version of the panel
container, controlBarContent is a property of
| | 01:00 | the panel, rather than its own separate object.
| | 01:02 | So, you declare it like this,
controlBarContent as a paired tag set.
| | 01:09 | Now, any objects that you place
within this property will be laid out
| | 01:13 | horizontally from left to
right, in a bordered area.
| | 01:16 | So, I will create a few buttons.
| | 01:18 | I will give the first one a label of
Click me, and then I will create a second
| | 01:25 | button, and I will give
that a label of No, click me.
| | 01:30 | Now, I will look at the application in
Design view and show you that the buttons
| | 01:34 | are laid out side-by-side.
| | 01:37 | In some applications, you might want to
create some space between the buttons,
| | 01:41 | in fact, having each hung on the
right or left side of the container.
| | 01:46 | You can do that in the
controlBarContent by adding a Spacer Control.
| | 01:50 | The Spacer Control is a member of the
older mx component set, and it has not
| | 01:54 | been replaced for Spark, so we still use it.
| | 01:57 | It looks like this.
| | 01:59 | It has an mx prefix, and you set its
width or height to the number of pixels, or
| | 02:05 | percentage of available
space that you want it to take up.
| | 02:09 | So, for example, I will set
this spacer's width to 100%,
| | 02:14 | meaning take up as much
space as you possibly can.
| | 02:17 | The result will be to
push the two buttons outward,
| | 02:20 | so that they will be flushed with
their left and right sides of the panel.
| | 02:23 | I will save and run the application
this time, and you will see the two buttons
| | 02:28 | lined up in the panel at
the bottom in the footer area.
| | 02:32 | The spacer is invisible and takes up the
space where I have my cursor right now.
| | 02:36 | The two buttons are pushed to the side,
with padding around the buttons, with
| | 02:40 | the padding size being determined by
the skin that's applied to the panel.
| | 02:45 | Now, if you want to change the appearance
of a Spark panel, you do it through skinning.
| | 02:50 | I will be showing you how to define
a skin for a Spark-based component in
| | 02:54 | another chapter of the video series,
| | 02:56 | but it's worth knowing that if you
are a Flex 3 developer that many of the
| | 03:00 | properties and styles that we use to
modify the appearance of these components
| | 03:05 | no longer apply to Spark components.
| | 03:07 | Instead, you create custom skins and so
for example, if you want curved corners,
| | 03:13 | you would do it through the skin.
| | 03:15 | If you want to change the color of the
shadings in the header and footer, you do
| | 03:19 | it through the skin.
| | 03:21 | So, this is a look at how to
create controlBarContent in a panel.
| | 03:25 | Once again, it's a property of the
panel component, in Flex 4, and when you add
| | 03:29 | visual objects, they are laid out
horizontally from left to right.
| | Collapse this transcript |
| Using the BorderContainer| 00:00 | Spark-based containers, such as the
panel, the skinned container, and the
| | 00:05 | application, require custom skins if
you want to make drastic alterations
| | 00:10 | in their appearance.
| | 00:11 | But there are lots of times in a Flex
4 application where you simply want a
| | 00:15 | rectangular area with a different
background color, background image, border
| | 00:20 | or rounded corners.
| | 00:21 | The BorderContainer component is
designed to provide this capability with just
| | 00:25 | simple Style settings.
| | 00:27 | I have already used the
BorderContainer in other videos in this series, but I
| | 00:31 | am going to demonstrate it thoroughly here,
so you can see its various capabilities.
| | 00:36 | For this demonstration, I will start
with the file BorderContainerDemo.mxml.
| | 00:41 | This application has a Group
container wrapped around an image.
| | 00:45 | The image is displaying an embedded SWF file.
| | 00:47 | I'll run the application in the browser
and show you that the group container
| | 00:52 | that's wrapped around the SWF file
doesn't have any visual appearance of its
| | 00:56 | own. All you see is the graphic.
| | 00:58 | I would like to wrap this graphic
inside a container that has a particular
| | 01:03 | background color and a particular border.
| | 01:05 | So, here are the steps.
| | 01:08 | First of all, I am going to replace the
group with a BorderContainer component.
| | 01:13 | I will make the change to both the
starting and the ending tags for this element.
| | 01:23 | Then I am going to add a
VerticalLayout object as the layout property.
| | 01:28 | The reason I am adding the
VerticalLayout object, even though this container
| | 01:32 | only has one nested object, the
Image, is that the VerticalLayout, and the
| | 01:36 | HorizontalLayout components
allow the use of the padding styles.
| | 01:40 | This will allow me to add a little bit
of space around the image without having
| | 01:44 | to do too much additional work.
| | 01:46 | I will set the four padding styles,
paddingBottom, paddingLeft, paddingRight and
| | 01:57 | paddingTop, all to 20 pixels each.
| | 02:01 | Then I will look at the application in
the Design mode and show you that the
| | 02:05 | BorderContainer creates a
white background by default.
| | 02:09 | Now so far, this isn't that much more
interesting than what I already had.
| | 02:13 | To get a really striking appearance, I am
going to need to add some additional styles.
| | 02:17 | So, I will go back to Source mode.
| | 02:21 | Here are some of the styles that
are supported in the BorderContainer.
| | 02:25 | First, I will add a
backgroundColor set to a value of #6DB6C6.
| | 02:34 | Now, after adding each style, I will show you
what the application looks like in Design mode.
| | 02:39 | And you will see that I now have a
nice compatible color, displayed by
| | 02:43 | the BorderContainer.
| | 02:45 | Now, I will add a border.
| | 02:46 | The border will be of a particular
color with a particular weight and
| | 02:51 | a particular style.
| | 02:52 | I will start with the borderStyle setting.
| | 02:56 | The borderStyle can be set to
one of two values: inset or solid.
| | 03:00 | I will use an inset border.
| | 03:03 | Next, I will set a borderColor.
| | 03:06 | The borderColor can be set to
any hexadecimal color value.
| | 03:09 | I will use this one, #84CBDA, and then I
will set the borderWeight to a value of 10.
| | 03:19 | That means that the border
will be 10 pixels all around.
| | 03:22 | Let's take a look at Design
view and see how we are doing.
| | 03:25 | So, now I have some nice background
colors and a good border around the graphic.
| | 03:30 | I would also like to have this
container have rounded corners.
| | 03:34 | Again, if you are working with one of
the Spark components that uses custom
| | 03:37 | skins, this requires a bit of work.
| | 03:40 | But if you are using the
BorderContainer it's a simple style
| | 03:43 | called cornerRadius.
| | 03:44 | I will go back to Source mode, and I
will set the cornerRadius to a value of 15.
| | 03:51 | Once again, I will look at the
application in Design view and show you that the
| | 03:55 | cornerRadius style results in creating
a rounded corner on both the inside and
| | 04:01 | the outside of the border.
| | 04:03 | Finally, I am going to add one more style.
| | 04:06 | If you want a drop shadow on a visual
object in Flex, typically you have to
| | 04:10 | add a Filters property and then one
or more Filter objects, including the
| | 04:15 | DropShadow Filter object.
| | 04:17 | But again, the BorderContainer
component is designed to give you shortcuts for
| | 04:22 | some of the most commonly used visual effects.
| | 04:26 | And so, I will use this
setting, dropShadowVisible=true.
| | 04:30 | I will look at the application in
Design view again, and there is my
| | 04:34 | DropShadow, down at the bottom.
| | 04:36 | Now, the BorderContainer
automatically will size itself to accommodate
| | 04:40 | its nested objects.
| | 04:42 | And right now, its size is
determined by its nested graphic.
| | 04:45 | I am going to resize the graphic by first
clicking on it in the middle of the object,
| | 04:51 | and then I will move the cursor down to
the visible handle in the lower-right corner.
| | 04:55 | I will hold down the Shift Key to make
sure that as I resize it, I maintain the
| | 05:01 | graphic's aspect ratio.
| | 05:03 | And then I'll reduce the
size down to 250x154 pixels.
| | 05:08 | And you will see that when
the graphic resizes, so does the
| | 05:12 | surrounding BorderContainer.
| | 05:14 | Then finally, I will click outside
the graphic, and that selects the
| | 05:18 | BorderContainer, and then I will
click and drag down and to the right,
| | 05:21 | until the BorderContainer snaps into place.
| | 05:24 | I will go back and look at the source
code now and show you that that results
| | 05:29 | in placing the object 14 pixels from
the left and 13 pixels from the top border
| | 05:34 | of the application.
| | 05:35 | I will save and run the application
in the browser, and here is the result.
| | 05:42 | My logo is now nested within a
rectangular area, with a nice background color,
| | 05:48 | border and rounded corners, all
created with very simple styles.
| | 05:53 | You could create this same
appearance, using a complex custom skin.
| | 05:58 | But if all you need to do is affect
those settings, the background color, the
| | 06:02 | rounder corners and the border, then
the BorderContainer component is the
| | 06:06 | easiest way to get the job done.
| | Collapse this transcript |
| Using constraint-based layout properties| 00:00 | Flex 4 containers can place objects
in a variety of ways: using the x and y
| | 00:05 | properties in basic layout, meaning
objects are placed relative to the top left
| | 00:10 | borders of a container, using vertical
layout, horizontal layout or tile layout.
| | 00:16 | Another very common approach to
placing objects on the screen is to use
| | 00:19 | Constraint properties.
| | 00:21 | Constraint properties only work in
containers that use basic layout, that is
| | 00:26 | that support the x and y properties.
But instead of limiting yourself to placing
| | 00:31 | objects relative to the top left
border, you can also anchor objects to the
| | 00:36 | bottom, right, horizontal
center and vertical center.
| | 00:41 | For this demonstration, I'll use an
application named ConstraintDemo.mxml.
| | 00:46 | When I first open the application in
Design mode, you'll see that it has
| | 00:50 | three main components:
| | 00:52 | a BorderContainer containing a logo, a
panel containing some text and an Image control.
| | 01:00 | The application looks good when I
present it in this particular size, but when I
| | 01:05 | run the application in the browser,
you'll see that not everything is good.
| | 01:10 | The application looks great when it
first starts up, but when the user resizes
| | 01:15 | the browser everything stays in the same place.
| | 01:17 | The purpose of using Constraint
properties is to position objects dynamically,
| | 01:22 | based on the size of the container
and the properties that you apply.
| | 01:26 | You can set Constraint properties
either in code or in Design mode.
| | 01:30 | I'll start in Design mode and
then show you the generated code.
| | 01:34 | I'm going to start with the flowers picture.
| | 01:37 | Notice in Design mode that I've placed
it in the lower right-hand corner of the
| | 01:41 | screen, but you saw when I ran the
application in the browser that the image
| | 01:45 | stayed in the same place.
| | 01:47 | I'd like it to always be in
that lower right-hand corner.
| | 01:50 | I select the Visual control in the
Design area and then go to the Properties
| | 01:55 | view and scroll down to the bottom,
the Size and Position section.
| | 02:00 | This is called the Constraints interface.
| | 02:02 | It allows you to select any of the
six constraints, which are, respectively:
| | 02:08 | left, right, top, bottom,
horizontal center, and vertical center.
| | 02:14 | Each of these checkboxes represents one
of those constraints, and when you select
| | 02:18 | one of the checkboxes, you're actually
adding that Constraint to the object.
| | 02:23 | So if I click on this checkbox, that
adds a right Constraint and below the
| | 02:29 | Constraints interface, a text field pops up.
| | 02:32 | Notice that the control is set
automatically at zero pixels from the right
| | 02:36 | edge of the application.
| | 02:38 | Now the reason that happened was
because that's where the object was positioned
| | 02:42 | in my current Design dimensions.
| | 02:44 | I'll deselect the Constraint and move
the object a little bit and then choose
| | 02:49 | the Constraint again, and this
time, you see a different value.
| | 02:53 | So don't take the initial value that is
proposed by Flash Builder too seriously.
| | 02:58 | It only shows you the position of the object
in the current dimensions of the Design area.
| | 03:03 | I'll select the object, check the
Constraint, and then click into the text
| | 03:08 | field and set its value to zero, and
that glues or docks the object to the right
| | 03:14 | side of the screen.
| | 03:15 | Now, I'll also set a bottom
Constraint for this object.
| | 03:18 | I'll click the option, then go to the
matching text field and once again, enter
| | 03:24 | a value of zero and when I press Enter,
that saves the change, and the object
| | 03:29 | will now be in the lower-right corner.
| | 03:32 | I'll save and run the application and
when the browser opens, you'll see the
| | 03:38 | flowers are glued to the bottom-right
corner of the application and if the user
| | 03:43 | resizes the browser, the
object moves accordingly.
| | 03:47 | Now let's take a look at
the code that was generated.
| | 03:49 | I'll close the browser and go back to
Flash Builder and here's the BitmapImage
| | 03:54 | control that's presenting the flowers.png file.
| | 03:57 | I'll refactor the code a bit, adding a
line feed so that I can see all of the
| | 04:02 | attributes of the tag onscreen.
| | 04:04 | Here are the two Constraint
settings that I've applied:
| | 04:07 | the right and bottom attributes.
| | 04:09 | When you set these values to zero,
that means that you're making the object
| | 04:13 | flush to the border.
| | 04:15 | Now let's take a look at a
couple of other Constraints.
| | 04:18 | I'll click on the panel, and then, once
again, go over to the Properties view,
| | 04:22 | and scroll down to the
Size and Position section.
| | 04:25 | This time, I'm going to use the
horizontal center Constraint.
| | 04:29 | I'll click that option
and set to a value of zero.
| | 04:36 | I'll save and run the application, and
you'll see that the dialog box appears in
| | 04:41 | the direct horizontal center of
the application, and as I resize the
| | 04:46 | application, it snaps
into place, staying centered.
| | 04:50 | You can also use Constraints to resize
objects, by adding two Constraints in
| | 04:55 | the same dimension.
| | 04:56 | So for example, for this panel, if I
want to center it but also stretch and
| | 05:01 | contract it as the browser is resized,
I can get rid of the horizontal center
| | 05:06 | and instead set both left and right
Constraints, and I'll set those values
| | 05:11 | to 150 pixels each.
| | 05:14 | I'll run the application in the browser,
and now watch what happens as the user
| | 05:19 | resizes the browser.
| | 05:21 | The panel changes its size automatically,
and the Label control, which is nested
| | 05:26 | within the panel, has its width set to
100%, so it stretches and contracts at
| | 05:31 | the same time as the panel itself.
| | 05:34 | Once again, let's take a look at the code.
| | 05:36 | I'll select the panel in Design view
and then go to Source mode and show you
| | 05:41 | that the left and right
attributes have been set.
| | 05:46 | So, once again, the names of these
attributes are left, right, top, bottom,
| | 05:52 | horizontal center, and vertical center.
| | 05:55 | With the centering properties, you can
use either positive or negative values.
| | 06:00 | For horizontal center, a positive value
means that the object is offset to the
| | 06:04 | right and a negative value offset to
the left, and for the vertical center
| | 06:08 | property, a positive value offsets it
downward and a negative value upward.
| | 06:14 | Constraint properties, again, are
only usable in containers that use basic
| | 06:19 | layout, which is the default layout
for all Spark components that support
| | 06:23 | the layout property.
| | 06:25 | If you use horizontal or vertical
layout in an Application or other container,
| | 06:29 | then objects are layed out
automatically, and these Constraint properties
| | 06:33 | don't do anything for you.
| | 06:34 | But for basic layout containers,
they give you a way of placing objects
| | 06:38 | dynamically and repositioning them
automatically, without having to do a lot of
| | 06:42 | complex calculations.
| | Collapse this transcript |
| Declaring view states| 00:00 | View States are a critical part of
the Flex architecture that allow you to
| | 00:04 | modify the appearance of components and
applications at run time, based on simple states.
| | 00:10 | Each application, and each custom
component that you build, automatically has
| | 00:15 | a default state, and when you set
properties and styles they're members of
| | 00:19 | that default state.
| | 00:20 | But the Flex framework allows you to
define multiple states and call them by
| | 00:24 | name, so that when you change from one
state to another you can add and remove
| | 00:29 | objects, change the values of
properties and styles and change the ActionScript
| | 00:34 | code that gets executed when
certain events are dispatched.
| | 00:37 | For this demonstration, I'll use
an application called ViewStateDemo.
| | 00:41 | This application has a company logo,
another graphic and then a panel in the
| | 00:47 | center, which contains a
set of data entry controls.
| | 00:51 | Looking at the application in
Design view, you'll see that the controls
| | 00:55 | collect a User name and a Password and
that there are two buttons with labels
| | 01:00 | of Log In and New User.
| | 01:02 | The intent of this sort of dialog box
is to allow an existing user to type in
| | 01:06 | their User Name and Password and Log
In, or for New Users to be able to click
| | 01:11 | the button and see additional information that
they can enter to register for the first time.
| | 01:16 | In many application development
environments, you would need two separate
| | 01:19 | components, one login
form and one register form.
| | 01:23 | The View State architecture allows you
to create a single form and then change
| | 01:28 | its behavior and appearance
depending on what State you're in.
| | 01:31 | When you create View State, you
do it at the MXML document level;
| | 01:35 | that is you declare the States in
the MXML document, in this case, the
| | 01:40 | application, and when you change from
one state to another, the rules associated
| | 01:44 | with that state are executed.
| | 01:47 | Now to demonstrate this, I'm
first going to define a new State.
| | 01:51 | The easiest way to do that is in Design mode.
| | 01:54 | I have the application
open in Design mode already.
| | 01:58 | I'll go up to the top-right corner of the
Flash Builder interface, to the States view.
| | 02:03 | Notice, in the States view, that the
component, or application, already has
| | 02:08 | a State named State1.
| | 02:10 | It's not explicit though.
| | 02:12 | The carets around the State
name mean it's the default State.
| | 02:15 | Now I'm going to add a new explicit State.
| | 02:18 | I'll click on this New State button and
in the dialog that pops up, I'll name my
| | 02:24 | New State register, and I'll say that
this will be a duplicate of the original
| | 02:29 | default State and click OK.
| | 02:32 | In the States view, I now
have two explicit States:
| | 02:35 | State1 and register.
| | 02:39 | I'll go back to State1 and look at the
application in Source mode and show you
| | 02:43 | that this code has been
added to the application.
| | 02:46 | The State element contains one or more State
object declarations, and each has a name attribute.
| | 02:53 | Notice that with the State class you
assign a name and not an id, and that's
| | 02:58 | because there's an advantage in being
able to address a State as a string,
| | 03:02 | rather than as a reference object.
| | 03:05 | If you have experience working in Flex
3, you might remember that States were
| | 03:09 | defined there too, and you added a
bunch of code at the State level, right
| | 03:14 | here in the State tags.
| | 03:16 | In Flex 4, the State
syntax has changed dramatically.
| | 03:20 | Instead of declaring what happens in
all the States right here in the States
| | 03:24 | section, you declare it in the tags
themselves that are modified when you change
| | 03:29 | from one state to another.
| | 03:30 | To demonstrate this, I'll go back to
Design view, and I'll go to the Log In button.
| | 03:36 | Notice in the States view that I
currently have State1 selected.
| | 03:40 | I'll switch to the register State, and
then I'll change the label of the Log In
| | 03:44 | button from Log In to Register.
| | 03:48 | Because I selected the State named
register before I made that change, the
| | 03:53 | change only applies to that State.
| | 03:55 | Now I'll take a look at
the code for that button.
| | 03:59 | I'll double-click the tab to expand to
fullscreen, and you'll see that there
| | 04:03 | are now two attributes in the Button
tag, label, which contains the default
| | 04:09 | setting of the Label attribute and
label.register, which is the value of the
| | 04:14 | Label when we're in the register State.
| | 04:18 | If you prefer, you can apply the new value
for the property in the new State in pure code.
| | 04:24 | I'll go to the second button that has
a label of New User, and I'll type in
| | 04:28 | label equals, and then in double
quotes, I'll set the new value of Existing
| | 04:33 | User, then I'll go back to label and
type a dot character, and I'll see a list
| | 04:39 | appear that shows me the available
States for the current MXML document
| | 04:44 | I'll choose the register State and
now I have exactly the same syntax.
| | 04:49 | I'm going to add a little bit of code to
the Spacer to cause these buttons to be
| | 04:53 | pushed apart. I'll add width equals 100%,
then I'll restore the editor to normal
| | 05:01 | size and look at the application in
Design mode again and watch what happens as
| | 05:06 | I switch from one State to the other.
| | 05:08 | I'll go back to the original State.
| | 05:10 | The buttons have labels of Log In and
New User and the new State, Register.
| | 05:16 | Here's another thing that you can do with
States that goes beyond just changing values.
| | 05:21 | When a user is registering for the
first time, they have to provide both their
| | 05:25 | user name and their first and last name.
| | 05:29 | I'll select and copy the HGroup
that contains the Label and TextInput
| | 05:33 | control for the user name.
| | 05:35 | I'll copy that code to the
clipboard and then paste it in twice.
| | 05:44 | For the first version I copied in,
I'll change the Label to First name and
| | 05:49 | the TextInput id to firstNameInput,
and then I'll go to the second HGroup
| | 05:55 | that I pasted in, and change its Label to
Last name and its TextInput id to lastNameInput.
| | 06:04 | Now I only want these two HGroups to
appear when I'm in the Register State.
| | 06:09 | So, I'll go to the HGroup, and I'll
use a new attribute that's a part of the
| | 06:12 | Flex 4 SDK, called includeIn.
| | 06:16 | There's also an excludeFrom attribute.
| | 06:19 | For any visual component, you can use
either the includeIn attribute or the
| | 06:24 | excludeFrom, but not both at the same time.
| | 06:27 | For the HGroup, I'll say that I want to
include the HGroup in the Register State,
| | 06:32 | and now it won't appear in
the initial default State.
| | 06:37 | And I'll do the same thing for the
HGroup containing the lastNameInput and Label.
| | 06:44 | Now once again, I'll go back to Design
mode, and this is what the form looks
| | 06:49 | like when I'm in the Register State, and
now I'll go back to the default State,
| | 06:53 | and you'll see that the form
resizes and so does its containing panel.
| | 06:58 | So now I've defined States.
| | 07:00 | You can continue on with this model,
making whatever changes you need to,
| | 07:05 | to styles, properties and event
handlers, and you can add as many States to
| | 07:10 | any MXML document as you need to, to
get the variations you need in your
| | 07:15 | visual presentations.
| | Collapse this transcript |
| Changing view states at runtime| 00:00 | Once you've defined multiple View
States, you can change States at run time by
| | 00:04 | changing the value of the currentState property.
| | 00:08 | The currentState property is
implemented in all visual controls, in both the MX
| | 00:13 | and the Spark component sets.
| | 00:15 | To demonstrate this, I'll use the
application file ViewStateRuntime.mxml.
| | 00:21 | This application picks up where the
ViewStateDemo Application left off.
| | 00:25 | In this version of the application,
I've already defined some View States.
| | 00:29 | The names of the States are State1,
the default State, and Register.
| | 00:33 | I have a couple of objects that are
being added into the presentation when I
| | 00:38 | change the Register State - that's
these two HGroups and their nested controls
| | 00:44 | - and I'm also changing the properties
of two Buttons in the Register State,
| | 00:48 | the first one changes from Log In to Register
and the second one from New User to Existing User.
| | 00:54 | Now I'm going to show you how to
move from one State to another.
| | 00:58 | I'm going to go to the second Button
that starts with a Label of New User and
| | 01:02 | changes to Existing User
when it's in the Register State.
| | 01:05 | The design of the application is that
when the user clicks this button, they
| | 01:09 | should see the expanded version of the
dialog box, so they can type in all of
| | 01:13 | the information that's
needed to register as a new user.
| | 01:18 | I'll add a click event handler for the Button.
| | 01:22 | I'm not going to add a full event
handler function because I only need to
| | 01:25 | execute a single statement of ActionScript code.
| | 01:28 | It'll look like this, "currentState='register'".
| | 01:33 | Now notice that I applied the State as
a string, rather than as a variable name.
| | 01:39 | I've wrapped quotes around that value,
and I use single quotes around the string
| | 01:44 | because I want to properly nest the
string inside the double quotes that are
| | 01:48 | wrapped around the
entire ActionScript statement.
| | 01:51 | I'm also going to add another click
handler, this time for the Register event.
| | 01:55 | I'll add another click attribute,
and this time, I'll set the value as
| | 02:01 | currentState=' '
| | 02:05 | Notice that I'm not
referencing State1, although I could.
| | 02:09 | CurrentState equals quote quote means go to
the default State, which would be whatever
| | 02:14 | State is declared first in the State's list.
| | 02:17 | Then to distinguish this event handler
from the first one, I'll go back to the
| | 02:22 | word click, type in a dot
and choose the Register State.
| | 02:28 | So having two different event handlers
is just like having two different values
| | 02:33 | for a style or a Property.
| | 02:35 | The first one without a dot and
without a State name is what happens in the
| | 02:39 | default State, and the second one that
ends with dot register is what happens
| | 02:44 | in the Register State.
| | 02:46 | Now I'll run and test the application.
| | 02:50 | When the application first opens in
the browser, it's in the default State,
| | 02:53 | also known as State1.
| | 02:57 | When I click the New User button, I go
to the Register State, and when I click
| | 03:02 | the button again, I go
back to the default State.
| | 03:04 | I'll make one other change in the dialog box.
| | 03:08 | Notice that the title of
the panel isn't changing.
| | 03:11 | I left this for the very end of the
exercise because I wanted to show you how
| | 03:16 | easy it is to make changes to State
management even after you've defined the
| | 03:20 | initial State names, and you've added the
functionality that will change States at run time.
| | 03:26 | I'll go back to Design mode in Flash
Builder. In the States view, I'll choose the
| | 03:31 | register State, and then I'm just going
to double-click on the panel header, and
| | 03:36 | I get a little text input that allows
me to modify the title of the panel.
| | 03:40 | And I'll change it to Please Register.
| | 03:42 | Then I'll go back and look at the
code that was modified and show you that
| | 03:47 | Flash Builder reacted to that
gesture by adding title.register="Please
| | 03:53 | Register" to the tag.
| | 03:55 | The original default title is still there.
| | 03:57 | I'll test the application again, and now my
View State management should be complete.
| | 04:05 | When the Application first opens, I see
the User name and Password data entry.
| | 04:10 | When I click on New User, I see a
Register button and a title of Please Register
| | 04:16 | and the new visual controls, but when I
click on Existing User, I'm taken back
| | 04:21 | to the original presentation.
| | 04:23 | View States are a very easy way
to make incremental changes to
| | 04:26 | visual presentations.
| | 04:28 | They're not necessarily the best way to make
changes to all aspects of your Flex applications.
| | 04:34 | You can also use navigator containers,
which I described in a separate chapter
| | 04:37 | of the video series, but the new View
State syntax, that's a part of the Flex 4
| | 04:42 | SDK, is a lot easier to use and
manage than the old Flex 3 version.
| | 04:48 | And it's just as powerful,
allowing you to design and maintain your
| | 04:52 | application very easily.
| | Collapse this transcript |
|
|
8. Using Custom ComponentsDefining MXML components| 00:00 | When you build a large-scale Flex
application, you want to break it down into
| | 00:04 | small pieces known as components.
| | 00:07 | While it's possible to create complete
applications in a single MXML file,
| | 00:11 | they quickly become difficult to maintain.
| | 00:13 | These are sometimes called monolithic
applications, that mix up the application file,
| | 00:18 | all of the individual visual
components, and any ActionScript logic.
| | 00:22 | In this chapter of the video series,
I'm going to describe how to create MXML
| | 00:26 | components, reusable bits of code
written in MXML as MXML files that can then be
| | 00:32 | instantiated or used in your applications.
| | 00:36 | For all of the demonstrations in
this chapter, I'll use a project that's
| | 00:39 | included with the Exercise Files.
| | 00:41 | Go to the menu and choose File >
Import Flex Project, Browse, then select and
| | 00:47 | import a file called Components.fxp.
| | 00:50 | Open the new project's source folder
and it's default package and then open the
| | 00:55 | application file HanselAndPetal.mxml.
| | 00:59 | In this application, there is a
BorderContainer, which contains an image tag
| | 01:03 | which in turn embeds a SWF file.
| | 01:05 | I am going to run the application and
show that it displays that graphic and
| | 01:09 | another one in the lower right-hand corner.
| | 01:12 | This application has a nice beginning
visual appearance, but already we can see
| | 01:16 | there's quite a bit of MXML code
at the top level of the application.
| | 01:20 | You might want to take that code and
convert it into a reusable component that
| | 01:24 | can then be used in other parts
of the application as necessary.
| | 01:27 | So I am going to start by creating
a component that encapsulates the
| | 01:31 | presentation of the logo.
| | 01:33 | When you create your own custom
components, it's strongly recommended that you
| | 01:36 | place them in sub-folders or packages
within the application, rather than in the
| | 01:40 | source code root folder.
| | 01:42 | This really improves your ability to
maintain the application over the long-term.
| | 01:46 | I've already created a folder called
components and I am going to place my
| | 01:50 | new component there.
| | 01:51 | I'll right-click on the components folder or
Ctrl+click on Mac and choose New > MXML Component.
| | 01:58 | In this dialog, I'm
asked for the component name.
| | 02:01 | A component name is the
same thing as a class name.
| | 02:04 | You have to follow
ActionScript naming conventions.
| | 02:07 | The name can include letters,
numbers and the underscore characters.
| | 02:11 | But in a component definition, it
should always start with an initial uppercase
| | 02:15 | alphabetical character.
| | 02:17 | I'm going to name my first component SimpleComp.
| | 02:20 | Then I'm going to indicate which
existing component I want to base it on.
| | 02:24 | This relationship will be that of a
superclass and a subclass or of inheritance.
| | 02:29 | When you create your own custom
component, you can extend any visual
| | 02:32 | component in the Flex SDK.
| | 02:35 | Now, my goal is to replace all of this
longer code with a single component call.
| | 02:40 | So I'm going to base my first
component on the BorderContainer.
| | 02:44 | I'll click the Browse button and in
the dialog that pops up, I'll type the
| | 02:48 | beginning of the name of the component
that I want to extend, BorderContainer,
| | 02:52 | and then I'll select it.
| | 02:53 | The Based on value now indicates the
fully qualified name of the component,
| | 02:58 | spark.components.BorderContainer.
| | 03:01 | The BorderContainer component supports
absolute widths and heights, but if you
| | 03:06 | want it to just resize itself
automatically based on its nested contents,
| | 03:10 | delete the width and height from
this dialog and then click Finish.
| | 03:14 | This is what a basic component looks like.
| | 03:17 | It's just like an MXML application
but the root element, instead of being
| | 03:21 | Application, is the component that
this component extends or subclasses.
| | 03:26 | Now, to replicate the functionality at
the top level of the application, I'll go
| | 03:30 | back to the application.
| | 03:32 | I'll start by selecting and
copying all of the nested content within
| | 03:36 | the BorderContainer.
| | 03:37 | I'll take the layout setting and the
image and I'll copy it to the clipboard.
| | 03:42 | Then I'll go back to the component,
I'll make a little bit of space between the
| | 03:45 | tags and I'll paste the copied code into place.
| | 03:49 | There are other important settings in
the original code that I'm going to need.
| | 03:54 | I'll go back to HanselAndPetal.mxml and
I'll select all of the styles that are
| | 03:58 | creating the BorderContainer's appearance.
| | 04:01 | Notice that I'm not taking the x and y
properties, which determine the position
| | 04:05 | of the BorderContainer.
| | 04:06 | Those will be set from the
application level eventually.
| | 04:09 | I'll copy those settings to the
clipboard and return to my component.
| | 04:14 | Then I'll paste those settings in the
place and now my component is complete.
| | 04:19 | I can look at it in Design view,
completely isolated from the rest of the
| | 04:22 | application, and see that it successfully
presents the BorderContainer and its nested image.
| | 04:28 | I'll return to HanselAndPetal.mxml.
| | 04:31 | So that's how you create a
very basic MXML component.
| | 04:35 | Once you have defined an MXML component,
you can use it in any part of the application.
| | 04:40 | You can instantiate it.
| | 04:41 | That is, create an instance of the
component using MXML or ActionScript code.
| | 04:47 | I'll show you how to do
those steps in separate videos.
| | Collapse this transcript |
| Instantiating components in MXML| 00:00 | Once you have defined a custom component,
you can instantiate it and use it in
| | 00:04 | your application in a variety of ways.
| | 00:06 | In this demonstration, I'll show you
how to instantiate and place a visual
| | 00:10 | component on the screen using MXML code.
| | 00:13 | I'll use this application. CompWithMXML,
which has a background color setting and
| | 00:18 | a bitmap image that displays
flowers in the lower-right corner.
| | 00:22 | I'll also use this completed version
of a component called LogoComp.mxml.
| | 00:30 | This component displays a graphic
wrapped in a BorderContainer and, in fact,
| | 00:34 | the component's superclass is BorderContainer.
| | 00:37 | There are a number of styles that
determine its presentation, but its size
| | 00:41 | is based on the nested content, that is,
the image control with the embedded SWF file.
| | 00:46 | I'll go back to CompWithMXML.
mxml, the main application file.
| | 00:51 | In order to instantiate in MXML
component using MXML code, you first add a
| | 00:56 | custom namespace that declares
the location of the component.
| | 01:01 | This namespace follows the same basic
syntax as the namespaces that are built
| | 01:05 | into the application already.
| | 01:06 | You start with xmlns then
colon and then an arbitrary prefix.
| | 01:12 | The prefix is then mapped to the
folder in which the component is located.
| | 01:16 | I am going to first show you how to
create the namespace prefix manually and
| | 01:21 | then I'll show you a shortcut
that Flash Builder can provide.
| | 01:24 | I'll create a blank line underneath
the existing namespace declarations
| | 01:28 | then I'll type in xmlns:
| | 01:30 | and then the name of a prefix.
| | 01:34 | Now, again the prefix itself is
arbitrary. It can be any string at all.
| | 01:37 | I'll put in an equals operator and a
beginning quote and then the name of the
| | 01:42 | sub-folder in which the component is stored.
| | 01:45 | This part has to be very, very specific.
| | 01:47 | It must be the name of the
folder and it is case sensitive.
| | 01:52 | The name of my sub-folder is components.
You type in the name of the folder then
| | 01:56 | a dot and then an asterisk.
| | 01:58 | The asterisk is a wildcard that means
that the comps prefix is mapped to all
| | 02:02 | components within that folder.
| | 02:04 | I'll complete the namespace declaration
and now I can instantiate as many copies
| | 02:09 | of the component as I want.
| | 02:11 | If there is more than one component in that
folder, I can use as many of those as I want.
| | 02:16 | Now, I'll move the cursor down to the
empty space below the Application start tag.
| | 02:20 | I'll type in a less than character
character and then my new prefix, comps.
| | 02:25 | Notice that there are bunch of
components already in that folder.
| | 02:29 | If you've worked through the video
prior to this one, you would have created a
| | 02:32 | component called
SimpleComp and that's shown here.
| | 02:36 | Here is the component I'm using
for this demonstration, LogoComp.
| | 02:39 | I'll select it from the list and then
I'll complete the tag with the empty tag
| | 02:44 | syntax, slash and greater than.
| | 02:46 | Now, in the original application, the
BorderContainer had x and y properties.
| | 02:51 | I didn't copy the x and y properties
into the custom component because the
| | 02:55 | placement of the component
should be up to the application.
| | 02:59 | So I'll go back to the application
and I'll add those properties here.
| | 03:02 | I'll set both X and Y to values of 10 each.
| | 03:08 | I'll save and run the
application and there is the result.
| | 03:10 | The custom component is
displayed exactly as it was before.
| | 03:14 | But now at the top level of the
application, the code is much cleaner.
| | 03:18 | Here are a couple of cool tips about
working in Flash Builder with custom components.
| | 03:23 | If you want to jump to the code for
the component, move the cursor off the
| | 03:27 | component declaration.
| | 03:28 | Then hold down the Ctrl key on Windows
or the Command key on Mac, and move the
| | 03:34 | cursor over the component
declaration until you see it underlined.
| | 03:37 | Then click and you will jump
tot the component definition.
| | 03:41 | If the file wasn't already open,
it would have been opened for me.
| | 03:45 | Here is another trick that you can use.
| | 03:47 | You can double-click on the component
and once again it will take you to the
| | 03:51 | code that defines that component.
| | 03:53 | So that's one way of declaring
MXML components in MXML code.
| | 03:58 | Now, I'm going to strip out all that
code and start over again because I want to
| | 04:01 | show you a shortcut that Flash Builder provides.
| | 04:04 | I'm going to start off with the
application in its simplest form, without the
| | 04:08 | custom namespace and without
the component instantiation.
| | 04:12 | I'll type in a less than character
and then instead of typing the namespace prefix,
| | 04:17 | I'll type the
name of the component, logo.
| | 04:20 | Notice now that Flash Builder designates
the namespace prefix as the same as the
| | 04:26 | folder name, components.
| | 04:28 | When I press Enter to select the
component, Flash Builder auto-completes the
| | 04:32 | tag, but it also adds the
required namespace prefix.
| | 04:36 | This time, setting the
prefix to the same name as the folder.
| | 04:39 | Once again I'll add the x and y
properties, setting the position of the object
| | 04:44 | at 10 pixels from the left
and 10 pixels from the top.
| | 04:48 | I'll run the application and there is
my custom component displayed in the
| | 04:52 | top-left corner of the application
with the requested positioning respected.
| | Collapse this transcript |
| Instantiating components in ActionScript| 00:00 | Just as with the visual components that
are included with the Flex SDK, you can
| | 00:05 | treat your own MXML components as
ActionScript classes, instantiating them and
| | 00:10 | adding them to the display list of
the application using ActionScript code.
| | 00:14 | For this demonstration I'll use the
application file CompWithAS.mxml and I will
| | 00:20 | use the completed MXML component
LogoComp.mxml but I will treat it as an
| | 00:25 | ActionScript class this time.
| | 00:27 | Going back to the application, I'll
run the application in the browser and
| | 00:31 | show you that it currently displays the
flowers graphic down in the lower right-hand corner.
| | 00:36 | Now as the application starts up,
I am going to create an instance of that
| | 00:40 | component and place it on the
screen in a specific position using
| | 00:44 | ActionScript instead of MXML.
| | 00:47 | Going back to the application code,
I will first add an event listener for the
| | 00:51 | creationComplete event in the Application tag.
| | 00:55 | I place the cursor after the background
color setting and press the Spacebar and
| | 01:00 | I will choose the creationComplete attribute.
| | 01:02 | When I press Enter to select the
attribute, I am prompted to generate a
| | 01:06 | creationCompleteHandler and I press
Enter or Return to generate both the
| | 01:10 | handler and the call.
| | 01:12 | Now I place the cursor inside the
handler function and I will delete
| | 01:16 | the generated comment.
| | 01:17 | The first step in working with an MXML
component as an ActionScript class is
| | 01:22 | to create an instance of it.
| | 01:23 | I will create a variable called logo
and I will set its datatype as LogoComp in
| | 01:30 | the components package.
| | 01:31 | When I select that class from the list
of available classes, notice that Flash
| | 01:36 | Builder automatically adds an
import statement, shown here on line 7.
| | 01:40 | That import statement is required if
you are going to work with MXML components
| | 01:44 | as ActionScript classes.
| | 01:47 | So that's the declaration of the variable.
| | 01:48 | Now I will instantiate it by
calling the constructor method.
| | 01:52 | I put in the new keyword and then call
the constructor method, which is the same
| | 01:57 | as the component name.
| | 01:59 | So now I have an instance
of the component in memory.
| | 02:02 | Next I will add x and y properties to
determine its position within its container.
| | 02:07 | I will set logo.x to 10 and logo.y to 10.
| | 02:13 | Finally I will add the component to
the display list of the applications
| | 02:17 | content group like this, this.
contentGroup.addElement, and then I will pass in
| | 02:24 | the logo object.
| | 02:27 | Remember that in Flex 4, you always add
visual elements to the content group of
| | 02:32 | the container and not to the container itself.
| | 02:34 | So there is the completed code.
| | 02:37 | The flowers image is still being placed
on the screen with the BitmapImage tag,
| | 02:41 | but the logo is being placed
dynamically using ActionScript code that is
| | 02:45 | executed as the application starts up.
| | 02:47 | I'll run the application and show that
the logo is successfully being placed 10
| | 02:52 | pixels from the top and 10 pixels from the left.
| | 02:55 | So it's up to the developer whether you
want to use MXML or ActionScript code.
| | 03:00 | For a simple operation like this,
typically you will find MXML takes a lot less
| | 03:04 | code than ActionScript, but
ActionScript gives you a lot more flexibility
| | 03:08 | because you can use conditional logic,
loops, and any other sort of code you
| | 03:13 | need to accomplish what your application needs.
| | Collapse this transcript |
| Declaring and using custom properties| 00:00 | An MXML component is really an
ActionScript class under the surface and just as
| | 00:05 | with all classes, it supports custom
properties, methods, event, and other
| | 00:10 | members that go along with API objects.
| | 00:13 | In this demonstration, I will show you
how to define custom properties in an
| | 00:17 | MXML component and then pass values
into these properties from an application.
| | 00:22 | I will use the
application UseCompWithProps.mxml.
| | 00:26 | This version of my sample
application has three components right now.
| | 00:30 | In the top left corner is a logo, the
lower right corner shows an image, and in
| | 00:35 | the center there's an
instance of the custom component.
| | 00:38 | The custom component has three visual elements,
a label, a rich text object, and another image.
| | 00:45 | Let's take a look at the code
that makes up the component.
| | 00:48 | From the application I'll go to the
tag, which is the instantiation of the
| | 00:52 | component, and I'll hold down the Ctrl
key on Windows or Command on Mac and move
| | 00:56 | the cursor over the component instance.
| | 00:59 | When I see the underlying, I click
and that takes me to the implementation
| | 01:03 | of the component, a file called CompWithProps.
mxml, which is located in the components folder.
| | 01:10 | This custom component is derived
from the BorderContainer component.
| | 01:13 | It has a number of styles
that determine its appearance.
| | 01:16 | It has a vertical layout with padding of
20 pixels all around and then the three
| | 01:21 | visual objects I mentioned, the
Label, the RichText and the Image.
| | 01:25 | I'm going to declare three public
properties that the application can use to
| | 01:30 | pass in values into this component, so
that instead of displaying literal values
| | 01:35 | such as Bonsai $45.99 or the bonsai.
jpg file, I will be able to reuse this
| | 01:41 | component and pass the
values in that I want to display.
| | 01:44 | You can declare custom properties
using either MXML or ActionScript code.
| | 01:48 | But most developers prefer to use
ActionScript because it gives you
| | 01:51 | more possibilities.
| | 01:53 | I'm going to place the cursor after
the layout declaration and press Enter or
| | 01:57 | Return to create a new line and
then I'll add a script section.
| | 02:00 | I will type in a less than
character and SCR and then press Ctrl+Space
| | 02:05 | and choose fx Script.
| | 02:08 | Then I'll type in the greater
than character and Flash Builder auto
| | 02:11 | completes the script section.
| | 02:12 | The syntax for declaring a public
property looks just like declaring a variable.
| | 02:16 | If you want to be able to set and get
the value from the application, you must
| | 02:21 | declare the variable as public.
| | 02:23 | So I'll start off with word public and
then the keyword var and then I'll set
| | 02:28 | the name of the first variable as productName.
| | 02:31 | I'll set its value as a String and I'll
also set it with an initial value of Bonsai.
| | 02:37 | So this is my first public property. It has
a name, a data type, and an initial value.
| | 02:43 | You don't have to set the initial value
but by doing so it will make it easier
| | 02:47 | to test the component when you
first drop it into an application.
| | 02:50 | I will declare two more variables.
| | 02:53 | The next one will be named price.
| | 02:55 | It will also be set as a string for
the moment because I want to maintain any
| | 02:59 | formatting that's passed
in from the application.
| | 03:02 | And it will set its initial value as 45.99.
| | 03:06 | And then I'll set the last variable and
name it image and once again set it
| | 03:11 | as a string and this variable's
initial value will be bonsai.jpg.
| | 03:16 | So those are my three public properties.
| | 03:19 | Now, I will show you in a little while
how to use those properties within the
| | 03:23 | component using binding expressions.
| | 03:25 | But for the moment, I am just going
to save the file by pressing Ctrl+S or
| | 03:29 | Command+S and return to the application.
| | 03:32 | At the application level, I can now
inspect the properties that I have
| | 03:36 | declared in the component.
| | 03:37 | I'll place the cursor at the end of
the attributes for the CompWithProps
| | 03:41 | instance and I'll press Enter to move
down to a new line and then Ctrl+Space to
| | 03:47 | bring up the Code Assist list.
| | 03:49 | I will type in the beginning of the
first property that I declared, productName,
| | 03:53 | and show you that Flash Builder
already knows about the property.
| | 03:57 | I'll select that property and I'm
going to set it to a new name of Aloe Vera.
| | 04:02 | Now, I'll move the cursor passed the
attribute and press the Spacebar.
| | 04:05 | That will bring up code list again.
| | 04:07 | I'll select the price property and
set its value to 24.99 and finally I'll
| | 04:12 | set the image and the name of the image file
that I want to display will be aloe_vera.jpg.
| | 04:18 | So one of the things that Flash Builder
brings to the table is the ability to
| | 04:22 | introspect components as you make
changes to them and to show you the
| | 04:25 | available custom properties and methods.
| | 04:28 | I will save my changes to the
application and return to the component.
| | 04:32 | Now in order to display these values,
which are now dynamic at runtime, I'm
| | 04:36 | going to replace the literal strings in
the components with binding expressions.
| | 04:41 | I will select the word Bonsai
and delete it and replace it with a
| | 04:45 | binding expressions starting with
the brace character and then the
| | 04:48 | variable name, productName.
| | 04:50 | I will do the same thing for the price.
| | 04:52 | I will delete 45.99, notice I am leaving
the $ sign in place, and I'll replace it
| | 04:58 | with a binding expression for price.
| | 05:00 | So notice that you can use binding
expressions in the context of XML elements,
| | 05:04 | just like you can in attributes. And
then finally I'll replace the value bonsai.jpg
| | 05:09 | with a binding
expression for the variable image.
| | 05:13 | Notice that I'm leaving the
location of the image files intact.
| | 05:17 | Assets/ is a literal string because
that's always going to be the same for every
| | 05:22 | product I want to display.
| | 05:24 | What's going to change is the file name.
| | 05:27 | Now when I save these changes, you'll
see three warnings appear in the trough
| | 05:32 | next to the line numbers, way over on the left.
| | 05:35 | This is a very common warning that
you'll see when you use binding expressions.
| | 05:39 | "Data binding will not be able to
detect assignments to" and then the
| | 05:42 | ActionScript expression that
I am including in the binding.
| | 05:45 | The issue here is that I've declared
these variables without making them
| | 05:50 | bindable, and in ActionScript 3, if the
property isn't marked as bindable, then
| | 05:55 | it's not going to broadcast at
runtime when it's value changes.
| | 05:58 | In an MXML component, you have to
declare each individual property as bindable.
| | 06:03 | There is no way for example to the group
a bunch of properties together and make
| | 06:07 | them all bindable with one instruction.
| | 06:10 | So for each variable, I'll make an
extra line above the variable declaration
| | 06:15 | and added a metadata tag called Bindable.
| | 06:17 | I will copy that line of code to the
clipboard. I will select the entire line
| | 06:21 | and then press the keyboard shortcut
for copying, Ctrl+C on Window, Command+C
| | 06:26 | on Mac and then I will paste that line of code
above each of the other variable declarations.
| | 06:30 | I will press Ctrl+S or Command+S to save
and you'll see that the warnings go away.
| | 06:36 | So this now a complete custom
component with public properties marked as
| | 06:41 | bindable, so that visual objects
within the component can get and display the
| | 06:46 | values dynamically at runtime.
| | 06:48 | I go back to the application and run
it and show that the custom component
| | 06:52 | instance now displays the values that
are passed in from the MXML declaration.
| | 06:58 | So this has been a look at how to declare
custom properties in a custom MXML component.
| | 07:03 | They are declared just like variables,
but if you want to set and get them from
| | 07:06 | the application you mark them as public.
| | 07:08 | If you want to axis those values
within the component using binding
| | 07:12 | expressions, you mark each property as
bindable and then you pass the values in
| | 07:17 | from the instance of the component,
in this example from the application,
| | 07:21 | making sure to pass values in that
match the declared data types of the
| | 07:25 | properties in the component.
| | Collapse this transcript |
| Declaring and using custom methods| 00:00 | As I've described in other videos in
the series, a custom MXML component is
| | 00:05 | really an ActionScript class
beneath the surface and it supports the
| | 00:09 | implementation of custom
properties and functions.
| | 00:12 | I'm going to show you how to declare a
public function in an MXML component and
| | 00:16 | then how to call that function in
order to pass values into the component.
| | 00:21 | For this demonstration I'll use the
application file, UseCompWithFunction.mxml.
| | 00:26 | It calls a version of a custom
component called CompWithFunctions.mxml.
| | 00:32 | This component has three public
properties named ProductName, Price and Image.
| | 00:37 | These properties are marked as bindable
and are used in binding expressions in
| | 00:41 | the visual controls nested within the component.
| | 00:43 | When you declare a function within a
custom component, it's then called a method.
| | 00:48 | Using object-oriented programming
vocabulary, a method and a function are pretty
| | 00:52 | much the same thing.
| | 00:53 | But a method specifically is a
function that belongs to a class definition.
| | 00:58 | Here is the syntax for
declaring a method within a component.
| | 01:01 | I'm going to place the cursor after
the three property declarations and
| | 01:06 | I'll create a couple of empty lines.
| | 01:08 | Now, here is the syntax for
declaring a public method or function.
| | 01:12 | I will start off with the word
public and then the keyword function.
| | 01:15 | Then I will set the name of
the function as set product.
| | 01:20 | Now if you're familiar with the concept
of implicit setter and getter functions,
| | 01:24 | I'll tell you right now
that that's not what this is.
| | 01:27 | This is an explicit function that
I'm designing to be called from the
| | 01:31 | application as a function.
| | 01:33 | Implicit setters and getters are
supported by ActionScript 3 but they're not the
| | 01:38 | focus of this demonstration.
| | 01:40 | When you declare function in ActionScript,
you should always declare its return data type.
| | 01:45 | You do this after the parenthesis,
starting with colon and then a data type that
| | 01:50 | you might want to return.
| | 01:51 | In this example, the function will
be called without returning any value.
| | 01:56 | So I put in the keyword void
at the end of the function.
| | 02:00 | Then I'll add the braces and this is
where I'll add the body of the function.
| | 02:04 | Now the when the application calls the
function, it's going to pass in three
| | 02:08 | new values which will be then applied to the
three variables, productName, Price and Image.
| | 02:13 | So I am going to place the cursor
inside the parenthesis and declare three
| | 02:18 | arguments that can be passed in.
| | 02:19 | I will use the same names as the
variable names, productName, data typed as a
| | 02:25 | string, price, data typed as a
string and image, data typed as a string.
| | 02:30 | Now to take those values and pass
them to the public properties, here is
| | 02:34 | the pattern I'll use.
| | 02:35 | Notice that the property name declared as
public and the argument have the same name.
| | 02:41 | So I need a way of
distinguishing between the two.
| | 02:44 | The property is a member of the
current instance of the component, which
| | 02:48 | you refer to as this.
| | 02:51 | So here is the syntax to pass the
argument value to the public property value.
| | 02:56 | This.productName = productName.
| | 03:00 | When you reference the word
productName without a prefix, it defaults to the
| | 03:04 | argument. That takes
precedence over the property.
| | 03:07 | But when used to prefix this, you're
explicitly talking about the property
| | 03:12 | that's a member of the component.
| | 03:14 | I'll repeat that syntax for the other
two properties. this .price=price and
| | 03:21 | this .image = image.
| | 03:24 | Now I'll expand the editor to
full screen to look at all the code.
| | 03:27 | So I have three public properties each
with default values, but I also have a
| | 03:32 | public function or method that can be called
from the application to reset those values.
| | 03:36 | I will save my changes and
return to the application.
| | 03:40 | Notice that this version of the
application has a button with a label of Show Bonsai.
| | 03:46 | When the user clicks this button,
I'm going to call the public method that I
| | 03:49 | just declared and pass in the new
values for the bonsai product and it will
| | 03:53 | replace the values for Aloe
Vera that are currently displayed.
| | 03:57 | I'll place the cursor at the end of the
attributes for the button control,
| | 04:01 | I'll press the Spacebar and choose the click
attribute and then I'll press Enter or
| | 04:06 | Return to generate a clickHandler function.
| | 04:09 | In order to call the methods of this
component, I need to assign it an ID.
| | 04:14 | I will go back to the component and I'll add
an ID attribute and set it to productDetail.
| | 04:19 | So now I can address this object and
its member properties and functions.
| | 04:24 | I'll go to the generated handler method
and delete the auto-generated comment.
| | 04:29 | I'll start with productDetail and
then put in a dot, and then I'll use
| | 04:34 | the setProduct method.
| | 04:35 | Notice that Flash Builder shows me that names
and data types of the arguments I need to pass in.
| | 04:40 | So I will pass in Bonsai and then
finally the image name bonsai.jpg.
| | 04:48 | So when I click the button, I will
be passing these values in and the
| | 04:52 | implementation of the method within the
component will take the values and save
| | 04:56 | them to the public properties,
the bindings in the visual controls will grab
| | 05:00 | those values, and the
screen will automatically update.
| | 05:03 | I will save and test the application.
| | 05:06 | When it first opens, it
shows the details for Aloe Vera.
| | 05:09 | When I click the Show Bonsai button,
the custom component updates instantly
| | 05:14 | and notice that it reformats and resizes
itself to match the new dimensions of the image.
| | 05:19 | So that's a look at how to build a
custom function in an MXML component and how
| | 05:24 | to call that function from the application.
| | Collapse this transcript |
| Declaring and setting component states| 00:00 | The view states architecture gives
you a way of modifying a component
| | 00:04 | presentation at runtime.
| | 00:06 | Just as with applications each MXML
component has a state's property and you can
| | 00:11 | define as many different states as you
want to and then change from one state to
| | 00:15 | another at runtime in a
reaction to particular events.
| | 00:19 | For this demonstration I'll use an
application called UseCompWithStates.mxml.
| | 00:24 | This application has two instances
of a component called CompWithStates.
| | 00:28 | It passes different values into the two
instances and places them side-by-side
| | 00:34 | using an HGroup container.
| | 00:35 | When I run the application it shows
the two components laid out side-by-side
| | 00:40 | from left to right and each shows a
product name, a price, instructions for
| | 00:45 | care, and a product image.
| | 00:48 | Now I'm going to redesign the MXML
component so that in its initial state it
| | 00:52 | doesn't show all this detail.
| | 00:54 | It just shows the product name and the image.
| | 00:56 | But when the user moves the cursor over
the component, it expands to this full-size.
| | 01:01 | I'll close the browser and return to
Flash Builder then I'll hold down the
| | 01:06 | Ctrl key or Command on Mac and click on one
of the component instances to go to the code.
| | 01:12 | The first step is to add state declarations.
| | 01:15 | You can do this in either
Design or in Source mode.
| | 01:18 | I prefer to do it in Source mode so I
can see exactly what the code looks like.
| | 01:22 | I'll place the cursor after the
layout setting and add a states property.
| | 01:28 | Within the states property I'll add an
initial state with the name of the State1.
| | 01:33 | You don't have to use the word
State1 for your default state.
| | 01:36 | It can really be anything you want.
| | 01:37 | But this is the term that would be used
if Flash Builder generated the code for me
| | 01:41 | and so for consistency I'm using it.
| | 01:44 | Then I'll add a second state and this
is the state that I'm really going to use
| | 01:48 | my code and I'm going to give
it a meaningful name of detail.
| | 01:53 | So all of the settings that I've added
to the BorderContainer that's containing
| | 01:57 | the components and to all of the
other visual controls, those settings will
| | 02:00 | apply in the default state, State1.
| | 02:03 | Now I'm going to define what happens
when I change to the detail state.
| | 02:07 | First of all, when I'm in the initial
state, I'm going to stop the controls that
| | 02:11 | are displaying the price and
instructions from appearing at all.
| | 02:15 | I'm going to do that by adding the includeIn
attribute and setting it to a value of detail.
| | 02:21 | So if I included in the detail state,
then it's not included in the default state.
| | 02:25 | I'll do the same thing for the label
that's displaying the instructions.
| | 02:30 | I'll set includeIn once again to detail.
| | 02:35 | Now I'm going to resize the image.
| | 02:37 | When these product components
appear at first, I want the image in this
| | 02:41 | component to be of a different size
when it's displayed in the default state as
| | 02:45 | opposed to the detail state.
| | 02:47 | So here are the changes I'll make.
| | 02:49 | I'm going to reset the values of the
scaleX and scaleY properties to .3 each
| | 02:55 | so that instead of being 60% of the
original size of the image, they're now
| | 03:00 | 30% of the original size.
| | 03:02 | Then I'll declare two new versions of
scaleX and scaleY, this time associating
| | 03:07 | the new values with the detail state.
| | 03:09 | The code will look like this.
| | 03:11 | scaleX.detail=".6" and scaleY.detail=".6".
| | 03:18 | So now the default display is 30% of the
native size of the image and the detail
| | 03:23 | shows 60% of the original size
or twice the default presentation.
| | 03:28 | I'll save those changes and
return to the application and run it.
| | 03:32 | When the application displays now,
it shows the initial presentation, that is,
| | 03:37 | the images are half the size that they will
be the detail display and I'm not seeing
| | 03:42 | the price or the instructions.
| | 03:43 | So now I'll go back to the
component code and add a little bit of event
| | 03:48 | handling to change from one state to
another when the cursor moves over the
| | 03:53 | component instance.
| | 03:55 | I'll use the two events, rollOver and rollOut.
| | 03:58 | When the cursor moves over the object
I'll get a rollOver event and I'll change
| | 04:02 | it to the detail state and when the
cursor moves off of the component instance,
| | 04:06 | I'll get a rollout even and I'll react
by switching back to the original state.
| | 04:10 | I'll place the cursor at the end of the
BorderContainer start tag after all of
| | 04:14 | the attributes and press
Enter to make a new line.
| | 04:18 | I'll use the rollOver event first
and I'll react with a single statement.
| | 04:23 | "currentState='detail'"
| | 04:26 | In this context currentState is a property
of the current instance of the component.
| | 04:30 | I could add a prefix of this, as in
this.currentState=detail,and it would mean
| | 04:35 | the same thing, but it's not
necessary. The this prefix is implied.
| | 04:41 | Then I'll add a rollOut event and I'll
reset the currentState to either a blank
| | 04:46 | string or the explicit state of State1.
| | 04:50 | I'll save my changes and go back to
the application and run it again and once
| | 04:54 | again when the application first
appears it displays the default presentation
| | 04:59 | with the title and the small image.
| | 05:01 | But when I move the cursor over the
object it expands, when I move it off,
| | 05:06 | it restores to its original size and
I can switch back and forth between the
| | 05:10 | components showing them each in
their default and detail states.
| | 05:15 | The great thing about using view
states in custom components is that you
| | 05:18 | can expand, reduce them, change
properties, change styles and even change the
| | 05:23 | way they react to different events
using the new view state architecture
| | 05:28 | that's a part of Flex 4.
| | Collapse this transcript |
| Dispatching events from custom components| 00:00 | Custom MXML components can be both
interactive and they can encapsulate data and
| | 00:05 | functionality in such a way that you
have to find a way to share data from the
| | 00:09 | MXML component with the rest of the application.
| | 00:12 | It is possible with MXML components
that you instantiate in MXML to reach
| | 00:17 | into the component to get data out of them,
but that violates the rules of encapsulation.
| | 00:22 | MXML components are mostly reusable
and most maintainable when they're black boxes
| | 00:27 | and only share data with the rest
of the application when they determine
| | 00:30 | it's the right time.
| | 00:32 | In order to define this encapsulation
and black box behavior, Adobe recommends
| | 00:37 | that you share data and information
with the rest of the application from an
| | 00:41 | MXML component by dispatching events.
| | 00:44 | In this demonstration I'll use an
application called UseCompWithEvents.mxml.
| | 00:50 | This application has two instances of a
custom component called CompWithEvents.
| | 00:56 | This version of the custom component
includes a button labeled Add to Cart and
| | 01:01 | when the user clicks that button,
I want to instruct the application to add an
| | 01:05 | instance of this product to
a shopping cart, let's say.
| | 01:09 | So here are the steps you need to follow.
| | 01:11 | First, you need to understand how to add a
custom event to the API of a custom component.
| | 01:17 | An event is a member of the component
or its underlying class, just like a
| | 01:22 | property or a method.
| | 01:23 | But unlike properties and methods
you don't declare events initially
| | 01:26 | in ActionScript code.
| | 01:28 | You declare it in a metadata tag called event.
| | 01:32 | In this custom component I'm going
to place the cursor after the states
| | 01:36 | declaration and above the Script
section and I'll create a pair of
| | 01:40 | fx:Metadata tags.
| | 01:43 | Within the metadata tags you add one
event metadata tag for each event that this
| | 01:48 | component might dispatch.
| | 01:50 | I'm going to declare an event and I'm
going to assign it a name of addtocart and
| | 01:56 | this will tell the rest of the
application that this is a custom event that this
| | 02:00 | component might dispatch.
| | 02:02 | You can optionally also indicate the
data type of the event object that will
| | 02:07 | be dispatched. Just like the events that are
dispatched from the Flex SDK's own components,
| | 02:12 | whenever you dispatch your own event, you'll
be dispatching an instance of an event class.
| | 02:17 | You do this with the type attribute and
you set it to the fully qualified name
| | 02:23 | and package of the event class
that you're going to dispatch.
| | 02:27 | I'll dispatch an instance
of the super class of event classes,
| | 02:30 | flash.events.Event.
| | 02:34 | So now I've added the event
addtocart to the API of the component.
| | 02:39 | I'll save those changes to the
component and go back to the application code,
| | 02:43 | because at this point I want to show
you that Flash Builder knows about the
| | 02:47 | event that's a part of that component.
| | 02:49 | I'll place the cursor after the first
line of the first CompWithEvents instance
| | 02:54 | and I'll type in the first few
characters of the event name, add, and press Spacebar
| | 03:00 | and show that the event name appears in the
list of available attributes of this component.
| | 03:05 | Now I'm not quite ready to do
something with that yet, so I'm going to press
| | 03:08 | Ctrl+Z or Command+Z on
the Mac to undo those changes.
| | 03:14 | I'll return to the component definition.
| | 03:17 | Now in order to dispatch an
event you follow these steps.
| | 03:21 | First you create an instance of the
event class that you said you're going to use
| | 03:26 | as the type for the event object
and you'll pass in the name of the event
| | 03:30 | into the constructor method of that event class.
| | 03:33 | That will be known as the event
object's type and then you'll call a method
| | 03:37 | called dispatch event and
pass the event object in.
| | 03:40 | The result of this is that the
component dispatches or throws the event upward
| | 03:45 | through the containership so that
the application which instantiated the
| | 03:49 | component will receive the
event and be able to react to it.
| | 03:53 | I'll go to the button that
has a label of Add to Cart.
| | 03:56 | I'll add a click event handler in MXML
and I'll allow Flash Builder to construct
| | 04:03 | an event handler function.
| | 04:05 | So when the user clicks the button, all
the code in that function will be called.
| | 04:09 | I'll delete the automatically
generated comment and the first step will be to
| | 04:14 | create an instance of the event class.
| | 04:18 | Within the function I'll use this code,
var eventObj, data typed as the Event
| | 04:24 | class, equals new Event and now I'm
going to pass in the name of event that I've
| | 04:31 | defined in the metadata tag, addtocart.
| | 04:35 | The next step is to dispatch the event.
| | 04:38 | I'll do that by calling the
dispatchEvent method and passing in the eventObj.
| | 04:44 | When that function is called, the event
object will be dispatched up to containership.
| | 04:50 | I'll save those changes.
| | 04:52 | Now I'll go back to the application and
I'll be ready to add event handlers to
| | 04:56 | the two instances of my component.
| | 04:59 | I'll start with the first one that has
a product name of bonsai and I'll add an
| | 05:04 | addtocart attribute.
| | 05:06 | Now once again this appears in the list
because of the metadata in the component
| | 05:10 | and I'll generate a handler for that event.
| | 05:14 | The name of my new event handler
function is compwithevents1_addtocartHandler.
| | 05:23 | Within the event handler function I'm going
to refer to the target of the event object.
| | 05:27 | This will refer to the instance of the
component that generated or dispatched
| | 05:32 | the event and I'm going to display
the name of the product that the user
| | 05:35 | selected using this code.
| | 05:37 | I'll use the Alert class
to display a pop-up dialog.
| | 05:41 | The Alert class displays a pop-up window
that can display two different strings,
| | 05:46 | the body and a title.
| | 05:48 | I'll type in the word Alert and then
press Ctrl+Space and select the class from
| | 05:53 | the list of available classes.
| | 05:56 | This adds a required import statement.
| | 05:59 | Then I'll use the show method of the
Alert class and I'll pass in the following
| | 06:03 | string, event.target.productName.
| | 06:09 | event.target refers to the instance
of the component that dispatched the
| | 06:13 | event and productName is its product name
property, which was set in the MXML declaration.
| | 06:20 | I'll append to that a
literal string, added to cart.
| | 06:25 | Then I'll add another string after a comma.
| | 06:29 | Product added to cart.
| | 06:33 | I'll run the application and when the
application first appears, it shows the
| | 06:38 | default appearance of these components.
| | 06:40 | I'll move the cursor over Bonsai and
click Add to Cart and I get the message
| | 06:45 | Bonsai added to cart.
| | 06:48 | I'll click OK and clear the dialog.
| | 06:51 | Now I'm going to add the event handler
to the second instance of the component.
| | 06:56 | I'll go to the first instance and copy
the event handler code to the clipboard,
| | 07:02 | then I'll go to the second
instance and paste the event handler in.
| | 07:06 | I'm calling the same function
for each instance of the component.
| | 07:11 | I'll save and run the application and
show you now that I'm able to call the
| | 07:15 | function and add each of the
products to the shopping cart.
| | 07:19 | Now this is obviously not
a complete implementation.
| | 07:23 | I would need to build shopping cart
functionality internally, storing information
| | 07:27 | that the user has selected, and I would
also need more tightly control moving
| | 07:31 | back and forth between the default and
the detail states of the MXML component.
| | 07:36 | But you can see that the MXML component
is successfully sharing information with
| | 07:41 | its containing application.
| | 07:44 | To review the steps for each event that
you want to dispatch from the component,
| | 07:48 | you add an Event metadata tag.
| | 07:51 | You set the name and optionally the type.
| | 07:53 | If you don't set the type,
it defaults to flash.events.Event.
| | 07:58 | Then when you want to dispatch
information, you construct the event object as an
| | 08:03 | instance of the Event class,
you pass in the name of the event to the
| | 08:06 | constructor method, and you call the
dispatchEvent method and pass in the event
| | 08:10 | object and that shares the data,
dispatching or throwing the event upward from
| | 08:15 | the containership of the Flex application.
| | Collapse this transcript |
| Creating custom event classes| 00:00 | When an MXML component dispatches an
event, it frequently shares custom data
| | 00:05 | with the rest of the application.
| | 00:07 | I've shown you already how to dispatch a
basic event, one that tells the rest of
| | 00:11 | the application that something happened.
| | 00:13 | But if you use the standard event
class, there's no place in that class to
| | 00:18 | share complex data.
| | 00:20 | If you want to share a custom data you
have to create your own custom event class.
| | 00:24 | The rules for custom event
classes are fairly straightforward.
| | 00:27 | First of all they must
extend or be subclasses of Event.
| | 00:31 | Then any data that you want to share
with the rest of the application is
| | 00:35 | declared as public
properties of the Event class.
| | 00:38 | For this demonstration I'll
create a brand-new event class.
| | 00:42 | When you create custom classes in a
Flex application, you should place them in
| | 00:46 | folders or packages
underneath the source code root folder.
| | 00:50 | In my project I've created a folder
called events and that's where I'll place
| | 00:54 | my custom event class.
| | 00:56 | I'll right-click on the events folder
and choose New > ActionScript Class and
| | 01:03 | that opens the New
ActionScript Class dialog box.
| | 01:06 | First check that the package is correct,
that you're placing the class where you
| | 01:09 | want it to go, and then
assign your new class a name.
| | 01:13 | Custom event classes frequently follow
a convention where the first part of the
| | 01:17 | name is the type of data you're
sharing and the last part is the word event.
| | 01:22 | So for an event class that's going to
share data about a product, you might name
| | 01:26 | the event class ProductEvent.
| | 01:29 | Your naming convention can differ, but this is a
common convention that a lot of developers use.
| | 01:34 | Next, you must extend the Event class.
| | 01:38 | You place this information in the
Superclass text box and you can either type in
| | 01:42 | the fully qualified Name and Package
of the class or you can browse for it.
| | 01:47 | I'll click the Browse button.
| | 01:49 | I'll type in the word Event and
choose the Event class in the flash.events
| | 01:54 | package and click OK.
| | 01:57 | You can leave everything else at its
default settings including the option for
| | 02:01 | generating a constructor from the
superclass and then click Finish.
| | 02:06 | So this is the syntax of a basic event class.
| | 02:10 | Notice that by default the constructor
method for my new class has three arguments.
| | 02:15 | One required argument named type.
| | 02:18 | This will be the name of the
event that I'm dispatching.
| | 02:21 | One named bubbles, which if set to true
will cause the event to bubble up the
| | 02:26 | containership and be dispatched multiple times.
| | 02:30 | And one called cancelable, which if
set to true means that the event can be
| | 02:34 | canceled and any actions of the
event can be prevented from happening.
| | 02:38 | If you're simply sharing data
with an event, you don't necessarily need
| | 02:42 | these last two arguments.
| | 02:44 | So I'm going to delete the last two
arguments from the constructor method and
| | 02:48 | also from the call to super.
| | 02:51 | I'm going to leave the type argument
in super, because that's how the name
| | 02:55 | of the event or the event type gets shared
with the superclass and that code is required.
| | 03:01 | Now the next step in declaring the
custom event class is to clear public
| | 03:06 | properties for each element of data that you
want to share with the rest of the application.
| | 03:11 | I'm going to share two bits of
information about the current product.
| | 03:15 | The product name and the price.
| | 03:16 | I'll place the cursor above the
function declaration for the constructor method
| | 03:22 | and I'll declare public var
productName:String and public var price:String.
| | 03:32 | So now my custom event class is capable
of storing two bits of information,
| | 03:37 | the product name and price.
| | 03:39 | There's one more bit of code that
you'll commonly see in a custom event class.
| | 03:43 | It's called the clone method.
| | 03:46 | The clone method can be called at any
time to create a copy or a clone of the
| | 03:51 | current event object.
| | 03:52 | The syntax for the clone method looks like this.
| | 03:55 | It overrides an existing function called
clone that's a member of the Event class.
| | 04:00 | So you typically start off
with override public function.
| | 04:05 | Because you include the override
keyword, you now see a list of all of the
| | 04:09 | functions that are members of
the Event class, the superclass.
| | 04:13 | I'll choose the clone method and the
return data type for this method gets
| | 04:18 | filled in automatically.
| | 04:20 | It's Event, the superclass.
| | 04:24 | Within the function I'm going to
create a new instance of the current class.
| | 04:29 | I'll create a variable called eventObj,
data typed as ProductEvent, the current class,
| | 04:35 | and I'll construct it by calling
the ProductEvent constructor method and
| | 04:41 | pass in the current event name or type.
| | 04:45 | So now I have a copy of the
ProductEvent class, which knows what the
| | 04:48 | current event name is.
| | 04:50 | I'm also going to set the productName
and the price for the new copy like this.
| | 04:55 | eventObj.productName = this.
productName and eventObj.price = this.price.
| | 05:05 | If the custom event class has more
public properties than that, you copy
| | 05:09 | them each one at a time.
| | 05:11 | Finally, I'll return the new
instance of the class. return eventObj.
| | 05:18 | Now this clone method is optional in most cases.
| | 05:21 | The only time it's absolutely required
is if in an event handler you handle an
| | 05:26 | event and you capture this object and
then you re-dispatch the event by calling
| | 05:31 | the dispatch event method again
and passing in the same event object.
| | 05:35 | In that case this clone method will be
called automatically by the Flex framework.
| | 05:40 | If you never are going to re-dispatch
this event object, then the clone method
| | 05:44 | probably isn't required.
| | 05:45 | But a lot of developers expect to
see it there, so if you want to create
| | 05:49 | well-formed custom event classes,
go ahead and create the clone method and
| | 05:54 | everybody will be able to
use it in all circumstances.
| | 05:58 | So this is a complete custom event class now.
| | 06:01 | It extends the Event class.
| | 06:03 | It declares public properties for each
of the elements of data it wants to share
| | 06:07 | with the rest of the application,
in the constructor method it calls the
| | 06:10 | superclass's constructor method and
passes in the type or the event name, and
| | 06:15 | it implements the optional clone method
so that if the event object has to be
| | 06:19 | re-dispatched, it will work correctly.
| | 06:21 | Now I'll show you how to use this
event class, constructing an instance of the
| | 06:25 | event class, populating it with data,
and dispatching it in a separate video.
| | Collapse this transcript |
| Dispatching and handling custom events| 00:00 | Once you have defined a custom event
class that has custom properties, you can
| | 00:04 | use that class to share data
with the rest of the application.
| | 00:08 | For this example, I will use the
application file UseCompWithCustomEvents.
| | 00:12 | A component called
CompWithCustomEvents.mxml, which currently dispatches a
| | 00:17 | custom event called addtocart,
data typed as flash.events.Event.
| | 00:22 | And a custom event class called
ProductEvent2, which has two public properties
| | 00:27 | named productName and price.
| | 00:29 | I will start the changes to
the application at the component,
| | 00:32 | CompWithCustomEvents.mxml.
| | 00:35 | Currently this mxml component
dispatches an event named addtocart.
| | 00:40 | The data type of the event
object is flash.events.Event.
| | 00:44 | I am going to replace that event
declaration with my custom class ProductEvent2.
| | 00:48 | I will delete the name of the event
class and I will replace it with the fully
| | 00:54 | qualified package and name of my
custom class, events.ProductEvent2.
| | 01:01 | Note that in this context Flash
Builder is not able to help you auto complete
| | 01:06 | the package and class name.
| | 01:08 | You just have to know the class name
and location and type it in correctly.
| | 01:13 | Now, I will go to the function
that's being called when the user clicks
| | 01:16 | the addtocart button.
| | 01:18 | Currently, it's declaring an eventObj
data typed as Event and constructing it
| | 01:23 | from that class's constructor
method, passing in the event name.
| | 01:26 | I am going to replace the data type of
the EventObj, removing the Event class and
| | 01:33 | replacing it with ProductEvent2.
| | 01:34 | I will type in the beginning of the
class name and then press Ctrl+Space.
| | 01:39 | I will see a list of all
classes that start with that string.
| | 01:45 | And I will choose my event class, ProductEvent2.
| | 01:46 | Now when I do that Flash Builder
automatically adds an import statement for that class,
| | 01:53 | up at the top of the code.
| | 01:55 | I will go back down to the code, and I
will also replace the constructor method
| | 02:01 | name, taking out Event and
replacing it with ProductEvent2.
| | 02:07 | So now, I am constructing an instance of
my custom class instead of the standard
| | 02:12 | Event class and I can add data
to it using simple dot notation.
| | 02:16 | I will place cursor at the end of the
line and press Enter to create a new
| | 02:20 | line and I will pass in the two
properties that I want to share with the rest
| | 02:24 | of the application.
| | 02:25 | eventObj.productName = this.
productName and eventObj.price = this.price.
| | 02:40 | So, here are all the steps
that I followed in this code.
| | 02:43 | I have instantiated my ProductEvent2
class and I have passed in the event name.
| | 02:49 | I have populated the event object with
data and I am dispatching the event to
| | 02:54 | share the data with the rest of the application.
| | 02:56 | My changes to the custom component are done.
| | 02:59 | Now, I will go to the application.
| | 03:02 | In the application I already have an
event handler for the addtocart event.
| | 03:06 | This event is being handled on two
instances of my custom component.
| | 03:11 | The one is for the bonsai
plant and the one for aloe vera.
| | 03:14 | Right now, I am getting the
productName to display in the alert pop-up by
| | 03:19 | referencing it from the event target.
| | 03:21 | That is, the instance of the custom component.
| | 03:24 | But now that data is being passed to
me much more directly in the event object.
| | 03:28 | So, I am going to redesign the event
handler to address the event object directly.
| | 03:33 | First, I will start in the method signature.
| | 03:35 | I will select the event argument's data
type, the Event class, and delete it and
| | 03:41 | replace it with ProductEvent2.
| | 03:44 | As before, I will get Flash Builder
to add an import statement for me.
| | 03:48 | I will type in the beginning of the
ProductEvent2 class name and press
| | 03:52 | Ctrl+Space and choose the class and
Flash Builder adds the import statement at
| | 03:57 | the top of the code.
| | 03:59 | Then I will be able to address both of
the properties of the event object without
| | 04:04 | having to go through the target,
which is the visual component that
| | 04:07 | dispatched the event.
| | 04:08 | I will delete .target from the expression.
| | 04:13 | And now I am referring to the property
of the event object rather than the property
| | 04:18 | of the visual component.
| | 04:19 | I will also change the second string
that I am passing into the show method
| | 04:24 | of the Alert class.
| | 04:25 | Instead of displaying just a literal
string in the title of the pop-up window,
| | 04:30 | I'll show the user the price of the
product that they added to the cart.
| | 04:33 | Like this. I will type in a literal
string of Price and then I will add another
| | 04:40 | expression after a plus operator of event.price.
| | 04:45 | And notice that because I data typed
the event property as ProductEvent2
| | 04:50 | Flash Builder knows that price and
productName are properties of the event object.
| | 04:53 | I will save my changes and run
the application in the browser.
| | 04:57 | I will move the cursor over the first item.
| | 05:01 | I will click the Add to Cart button and
I get both, the name of the product and
| | 05:07 | the price displayed in
title of the pop-up window.
| | 05:09 | I will go to the second and click Add
to Cart and once again, I get the details
| | 05:15 | by handling the event object
and displaying its properties.
| | 05:19 | So, that is how you use a custom event class.
| | 05:22 | Once you have created the custom event
class to encapsulate data properties,
| | 05:27 | you instantiate the custom event class,
you populate it with data, you pass in its
| | 05:31 | event name when you
instantiate it and then you dispatch it.
| | 05:35 | And in the application you listen for
the event object, you put in the specific
| | 05:39 | event class type that you know you are
going to be receiving and in your event
| | 05:43 | handler function you extract the data
and do whatever you need to with it.
| | 05:47 | Displaying it to the user, passing it
to an application server or saving it
| | 05:51 | locally, perhaps in an Adobe AIR application.
| | Collapse this transcript |
|
|
9. Managing Application NavigationUsing the ViewStack container| 00:00 | In Flex applications, you
implement navigation by stacking views or
| | 00:06 | rectangular components on top of each other so
that the user can only see one view at a time.
| | 00:13 | You then reveal or expose one view at
a time to create a navigational pattern
| | 00:17 | so that the user is going from screen to screen.
| | 00:21 | Navigation is created in Flex
using the Navigator containers.
| | 00:25 | A particular style of containers
that contains nested containers and only
| | 00:30 | exposes one layer at a time.
| | 00:32 | The parent container of these is called
the ViewStack, and there are two related
| | 00:36 | containers called the
TabNavigator and the Accordion.
| | 00:39 | For all of the demonstrations in this
chapter, I will use a project that's
| | 00:42 | included with the Exercise Files.
| | 00:45 | If you have access to the Exercise
Files, you can import the project now.
| | 00:50 | Go to the menu and choose File > Import
Flex Project, browse and navigate to the
| | 00:57 | Exercise Files folder and from there
to 09_Navigation. From there go to the
| | 01:03 | begin folder, and select and
import the file Navigation.fxp.
| | 01:10 | Then open the Navigation
project that's created.
| | 01:13 | Open the src folder and the default
package, and open an application file
| | 01:18 | called ViewStackDemo.mxml.
| | 01:22 | In this application, there are three
instances of custom components named
| | 01:27 | Home, Products and Login.
| | 01:31 | They are stacked within a VGroup or a
Vertical Group so that they are stacked
| | 01:35 | one on top of each other
going from top to bottom.
| | 01:38 | The three components in turn display
this welcome message, these two product
| | 01:44 | elements, and a login form down at the bottom.
| | 01:48 | Each of these three elements is
designed to be a distinct view and the user
| | 01:52 | should only see one of them at a time.
| | 01:53 | So I am going to show how to wrap
these components inside a ViewStack so that
| | 01:59 | they are layered and one of them
is visible at any given moment.
| | 02:02 | I will close the application
and return to Flash Builder.
| | 02:06 | I will place my cursor above the
VGroup and start by creating a ViewStack.
| | 02:14 | In Flex 4, the ViewStack is still an
MX component, not a Spark component.
| | 02:20 | So you declare it with the MX prefix.
| | 02:23 | When you declare the ViewStack you
typically assign it an ID so that you can
| | 02:27 | address the ViewStack in you
ActionScript code and binding expressions.
| | 02:31 | I am going to give my ViewStack an
id of views and then I will put in the
| | 02:36 | greater than character to close the tag and
Flash Builder will auto-complete the element.
| | 02:41 | The ViewStack is designed to wrap
other containers but because it's an MX
| | 02:46 | component and not a Spark component,
it can only directly nest MX components or
| | 02:51 | containers or if you want to nest Spark
components, you have to wrap them in a
| | 02:57 | special component called NavigatorContent.
| | 03:00 | Each of the components that you
see here, the Home, Product and Login
| | 03:03 | components, are extended from MX
components such as BorderContainer.
| | 03:08 | And so, they must be wrapped in the
NavigatorContent component in order to be
| | 03:13 | compatible with the ViewStack.
| | 03:16 | So, within the ViewStack, I am going to
create three NavigatorContent elements.
| | 03:20 | I will give the first one an ID of home
and I will also assign a label of Home.
| | 03:27 | I will show you how to use the label later on.
| | 03:30 | I will declare each of the
NavigatorContent elements as a pair of tags.
| | 03:36 | And then I will go get the matching
component, such as the Home component, and
| | 03:40 | I will select the code
and then drag it into place.
| | 03:43 | So now, the NavigatorContent
wraps around the Home component.
| | 03:48 | Now I'll repeat that process for
the Products and for the Login.
| | 03:51 | I will create a NavigatorContent,
assign it an id and a label,
| | 04:02 | and then I'll go get the instance of the
Products component and drag it into place.
| | 04:07 | And finally, I will do the same
thing for the Login component.
| | 04:10 | I will create a NavigatorContent,
assign an id of login, and a label of Log In,
| | 04:19 | and then I will select and drag
in the Login component instance.
| | 04:25 | I no longer need the Vgroup.
| | 04:27 | So I will select and delete it and
now I have created the beginning of a
| | 04:31 | navigational architecture for my application.
| | 04:34 | I will save and run the application and
you will see that the ViewStack appears
| | 04:39 | in the top-left corner of
the application by default.
| | 04:43 | And it only shows the welcome message and
not all the other components. They are hidden.
| | 04:49 | Now, I am going to position the
ViewStack on the screen where I want it.
| | 04:52 | I will go to the MX ViewStack component
and add a horizontalCenter property of
| | 04:58 | zero, meaning that it will center on the
screen and I will add a top property of 172.
| | 05:03 | I will save and run the application
again and now my ViewStack appears in the
| | 05:10 | direct center of the screen.
| | 05:12 | So far, I have created the ViewStack
and wrapped it around my custom components
| | 05:17 | but I have not done anything to provide
navigational functionality to the user.
| | 05:22 | That is, they do not have any way to move
from one element of the ViewStack to another.
| | 05:27 | You can provide navigation using
ActionScript code or a particular dynamic
| | 05:32 | component called the ButtonBar.
| | 05:34 | I will show you how to use
those techniques in other videos.
| | Collapse this transcript |
| Managing navigation with ActionScript| 00:00 | The ViewStack container
is a navigation container.
| | 00:04 | It provides navigational functionality.
| | 00:06 | But it doesn't have any
visual interface of its own.
| | 00:10 | In order to allow your user to move
from one screen to another, you need to
| | 00:13 | provide user interface controls.
| | 00:16 | Buttons, link buttons, tabs or
something like that lets the user move from one
| | 00:21 | screen to another by clicking on items.
| | 00:24 | You can provide this
functionality in a couple of different ways.
| | 00:27 | Either through manual navigation
using ActionScript code or through a special
| | 00:32 | component called the ButtonBar that
binds to the ViewStack and creates the
| | 00:36 | navigational functionality more automatically.
| | 00:40 | In this demonstration, I will show you
how to write a little bit of ActionScript
| | 00:43 | code that reacts to some buttons and
moves the user from one screen to another.
| | 00:48 | I will be working with the
application file ASNavigation.mxml.
| | 00:54 | In this application, I have a ViewStack
with three NavigatorContent containers.
| | 00:59 | The NavigatorContent containers
contain instances of the Home, Products,
| | 01:04 | and Login components.
| | 01:06 | If I run the application in its
current state, I see that the ViewStack only
| | 01:11 | exposes its first view or first layer.
| | 01:14 | So I am going to create three buttons
in the application that when clicked
| | 01:18 | take the user to the
particular layers that they want.
| | 01:21 | I will return to the code.
| | 01:24 | First, I'll create the buttons.
| | 01:27 | I could place the buttons
anywhere on the screen I'd like.
| | 01:30 | But I'll take an opportunity here to
show you a particular feature of the
| | 01:34 | Application component in Flex 4.
| | 01:36 | The Application component implements
a property called controlBarContent.
| | 01:41 | When you add visual objects to the
controlBarContent array, it places them in a
| | 01:46 | horizontal group across the top of the screen.
| | 01:49 | And then if the rest of the
application has to scroll up and down,
| | 01:53 | that component stays docked to the top.
| | 01:55 | I will add the controlBarContent
right after the Declarations element,
| | 02:00 | and before the logo.
| | 02:04 | I'll create a pair of tags called s:
controlBarContent and then I'll create three
| | 02:09 | buttons, and I'll assign the
first one an explicit label of Home.
| | 02:15 | Now, I'm going to clone that line of
code by holding down the Ctrl and Alt keys
| | 02:19 | on Windows or the Command and Alt
keys on Mac, and pressing the Down arrow.
| | 02:25 | There is one more button and two more buttons.
| | 02:29 | Then I'll release all of the keys,
and I'll change the label for the second
| | 02:33 | button to Products and for
the third button to Login.
| | 02:38 | Here's how the application looks now with
the controlBarContent and the three buttons.
| | 02:45 | I have buttons labeled Home, Products, and Login.
| | 02:48 | And again, they are contained within his
control bar that's docked to the top of the screen.
| | 02:53 | Now, in order to move from one screen
to another in a ViewStack, you can use
| | 02:57 | one of two properties.
| | 02:59 | The first property is called selectedIndex.
| | 03:02 | If you want to navigate using the
selectedIndex property, you have to know the
| | 03:06 | index position of a
component within the ViewStack.
| | 03:10 | The first component, that is the
NavigatorContent that wraps the Home component,
| | 03:15 | would have an index of zero.
| | 03:17 | The second would have an
index of one, and so on.
| | 03:20 | That can be useful in some applications,
but a lot of times it doesn't make any sense.
| | 03:25 | For example, in this application,
I have three components called Home,
| | 03:29 | Products, and Login.
| | 03:30 | I don't care about the order in which
they are declared and later on that
| | 03:35 | order might change.
| | 03:36 | So it's going to be more maintainable
to address and expose these layers by
| | 03:41 | their unique identifiers.
| | 03:43 | To do that, make sure that you've
assigned an id to each of the components
| | 03:48 | that you want to expose.
| | 03:50 | Then in order to navigate from
screen to screen when the user clicks the
| | 03:54 | buttons, use this code.
| | 03:56 | I'll add a Click event and I'm not
going to generate a full clickHandler
| | 04:01 | function, because I only need to
execute a single line of code which will look
| | 04:05 | like this, views.selectedChild = home.
| | 04:10 | The home reference refers to the home id of
the NavigatorContent in the first position.
| | 04:17 | Now, I'm going to select and copy that
code that sets the click event and I'll
| | 04:23 | paste it into the other two buttons,
and I'll change the references for the
| | 04:30 | selectedChild property to Products and to Login.
| | 04:35 | So this is now programmatic navigation.
| | 04:37 | I am listening for events that are
dispatched by visual controls, which
| | 04:42 | I have placed in the controlBarContent area,
but could be placed anywhere on the screen.
| | 04:47 | And when the user clicks on those
buttons, I'm calling a little bit of
| | 04:50 | ActionScript code to move from screen to screen.
| | 04:53 | I will run the
application and here's the result.
| | 04:58 | I can now go from the Home screen to
the Product screen to the Login screen.
| | 05:04 | All of the navigation is being
controlled by my explicit ActionScript code.
| | 05:09 | Now, there are more automated ways
of creating this form of navigation.
| | 05:13 | Now, I'll show you one that uses a
component called the ButtonBar in another video.
| | 05:17 | But it's worth knowing that if you
need to use explicit navigation, you can
| | 05:21 | control it completely with
your own ActionScript code.
| | Collapse this transcript |
| Using the ButtonBar component| 00:00 | The Flex 4 ButtonBar component is
designed to provide a navigational interface
| | 00:05 | when you use a ViewStack.
| | 00:07 | When you use the ButtonBar, it gets
its data from the ViewStack through a
| | 00:10 | property called dataProvider.
| | 00:13 | You bind the two controls together using
the dataProvider property of the ButtonBar.
| | 00:18 | And then the ButtonBar will
automatically create one button for each nested
| | 00:22 | layer within the ViewStack.
| | 00:24 | And it will display on its face a label
which is derived from the Label property
| | 00:29 | of the nested container.
| | 00:31 | For this demonstration, I will use an
application called ButtonBarDemo.mxml.
| | 00:36 | This version of the application
already has a ViewStack with three layers.
| | 00:41 | Three NavigatorContent containers, each
containing one component, for the Home
| | 00:46 | screen, the Product screen, and the Login screen.
| | 00:50 | Now, I'm going to add the ButtonBar
component toward the top of the screen.
| | 00:53 | I will place the cursor above the Logo
component and then create the ButtonBar.
| | 00:59 | And I will set its dataProvider using
a binding expression, binding to the id of the ViewStack.
| | 01:08 | Now, notice that each of the
NavigatorContent components has a label attribute
| | 01:13 | with the value set to strings
that are viewable by the user:
| | 01:17 | Home, Product and Login.
| | 01:18 | When I run the application, these
labels will be displayed on the faces of each
| | 01:23 | of the three generated buttons.
| | 01:26 | I'm going to add constraint properties to
the ButtonBar to place it on the screen.
| | 01:31 | I'll add a top setting of 10
pixels and a horizontalCenter of 0.
| | 01:35 | So it will be centered on the
screen and placed 10 pixels from the top.
| | 01:39 | I will run the application and show
you that the ButtonBar is generated
| | 01:45 | just where I wanted it.
| | 01:46 | And notice that the three buttons
are created automatically one for each
| | 01:50 | layer of the ViewStack.
| | 01:52 | And also that the labels are displayed
correctly, just as declared in the nested containers.
| | 01:56 | I will click the Products button and that
takes me to that layer and the Login button.
| | 02:02 | And then finally go back to Home.
| | 02:05 | Here's another thing to
think about with ViewStacks.
| | 02:08 | Notice as I cycle through the
ViewStack that the positioning of the
| | 02:12 | objects doesn't change.
| | 02:14 | That's because even though the
ViewStack is placed on the screen
| | 02:17 | centered initially.
| | 02:19 | When I navigate to other layers of
ViewStack, it's not resizing automatically.
| | 02:23 | That's a default behavior
that can save on resources.
| | 02:26 | But in a small-scale application like
this, it's nice to have the ViewStack
| | 02:30 | automatically conform to its nested contents.
| | 02:34 | You can make that happen with a very
simple property called resizeToCcontent.
| | 02:38 | I will go back to the code
| | 02:41 | to the mx: ViewStack tag and I will add a
resizeToContent property set to a value of true.
| | 02:47 | I will run the application again.
| | 02:51 | And once again, I'll navigate through
the different layers of the ViewStack.
| | 02:55 | And this time you will see that
the ViewStack positioning is changing
| | 02:57 | automatically so that it continues to be
positioned in the center of the screen.
| | 03:03 | And I will mention one more thing
about the ButtonBar while we are at it.
| | 03:06 | Notice that the ButtonBar component
generates toggle buttons, not simple command buttons.
| | 03:12 | For developers who might have worked
with Flex 3, the ButtonBar is designed to
| | 03:16 | replace all of the navigator
toolbars that were included with Flex 3:
| | 03:20 | the ButtonBar, the
ToggleButtonBar, the TabBar and the LinkBar.
| | 03:25 | The reason you don't need those
other components anymore is because the
| | 03:29 | ButtonBar is a skinnable component.
| | 03:31 | That is to say you can create your own
custom skin for the ButtonBar component
| | 03:37 | and give it any appearance you like.
| | 03:39 | So the ButtonBar component is designed
to bind directly to the ViewStack and
| | 03:44 | produce all of the user interface
controls you need to provide easy automatic
| | 03:48 | navigation in your Flex application.
| | Collapse this transcript |
| Using the TabNavigator and Accordion containers| 00:00 | The Flex 4 SDK includes two other
useful navigation containers called the TabNavigator
| | 00:06 | and the Accordion.
| | 00:08 | Just as with the ViewStack, these are
older MX components that have not been
| | 00:12 | updated for Spark and Flex 4,
but are still very usable.
| | 00:16 | I'll demonstrate these in the
applications TabNavDemo and AccordionDemo.mxml.
| | 00:23 | I'll start in TabNavDemo.
| | 00:25 | In the current version of the
application, I'm displaying three containers in a
| | 00:29 | ViewStack so that only one of the
containers is visible at a time.
| | 00:34 | In this version of the application,
I don't have any user interface controls
| | 00:38 | that the user can click to
move from one screen to another.
| | 00:40 | So I'm going to replace the
ViewStack with the TabNavigator.
| | 00:45 | I'll go first to the begin tag.
| | 00:47 | I'll delete the term ViewStack and
I'll replace it with TabNavigator.
| | 00:52 | Then I'll go down to the end
tag and replace that as well.
| | 01:00 | I'll save and run the application and
show you that the initial presentation
| | 01:04 | doesn't look so great.
| | 01:06 | Notice that the TabNavigator has an
automatic background color that doesn't look
| | 01:10 | too sharp in this application and also
when you move from one screen to another--
| | 01:14 | Right now I don't have the resized
content property set to true, so the
| | 01:18 | TabNavigator itself is retaining its
original size creating a big rectangular
| | 01:24 | spot in the background that I don't like.
| | 01:26 | So here's how I'm going to solve the
appearance of the TabNavigator in this application.
| | 01:30 | I'm going to reset a couple of styles.
| | 01:34 | First of all, I'm going to copy the
backgroundColor setting from the Application
| | 01:38 | to the TabNavigator so that it's
sharing the same background color.
| | 01:42 | I'm also going to get rid of the
automatic border that appears in a TabNavigator
| | 01:47 | to make sure it's not displaying an
extra rectangle in the background.
| | 01:51 | I'll set the borderStyle to none.
| | 01:53 | I'll save and run the application again.
| | 01:59 | This time you'll see that tabs appear
that look pretty much the same as the
| | 02:02 | toggle buttons produced by the ButtonBar.
| | 02:05 | As I click around, I'm
navigating from screen to screen.
| | 02:09 | So the TabNavigator provides pretty
much the same functionality as a ViewStack
| | 02:14 | and a Spark ButtonBar.
| | 02:16 | The benefit of the Spark
ButtonBar is that it's skinnable.
| | 02:19 | The benefit of the TabNavigator is
that it's all a single container.
| | 02:24 | Now let's take a look at
the Accordion component.
| | 02:26 | I'll close this application
and go to AccordionDemo.mxml.
| | 02:32 | This time, I'm starting with the
TabNavigator and I'm going to make some changes.
| | 02:36 | I'll change the TabNavigator to
Accordion both in the begin tag and the end tag.
| | 02:44 | I'm going to reposition the object
a little bit higher on the screen.
| | 02:47 | Instead of placing it 172 pixels from the top,
I'll place it just 70 pixels from the top.
| | 02:54 | Then I'm going to give it an explicit
height of 500 pixels and an explicit
| | 02:59 | width of 700 pixels.
| | 03:01 | I'll run the application and let's
see what the Accordion looks like.
| | 03:07 | The Accordion is bleeding off the screen,
because I made it a little higher than
| | 03:11 | my browser will allow.
| | 03:13 | So I'll so go back to the application and
change its height from 500 to 400 and run it again.
| | 03:21 | Now I'm able to see all of the
various controls of the Accordion.
| | 03:25 | The Accordion provides
navigation through headers.
| | 03:28 | Each header has a label that's derived from
the nested components it's going to display.
| | 03:33 | When you click on the link, you're
navigating from one layer to another.
| | 03:37 | Now just as with the TabNavigator
container, you can control the appearance of
| | 03:42 | the Accordion by setting its
backgroundColor and other styles.
| | 03:46 | Take a look at the Accordion container
documentation for more ideas about how to use it.
| | 03:50 | But again remember that
these are older MX components.
| | 03:54 | They are compatible with the new
Spark architecture if you wrap your Spark
| | 03:59 | components in the
NavigatorContent container first.
| | 04:02 | For the moment, the TabNavigator and
the Accordion have not been rewritten into
| | 04:07 | the new component architecture, but
they work fine in Flex 4 applications.
| | Collapse this transcript |
|
|
10. Using Cascading Style Sheets (CSS)Understanding inline CSS declarations| 00:00 | The visual appearance of a Flex
application is determined by a combination of
| | 00:04 | vector graphics, bitmap graphics,
and cascading style sheets or CSS.
| | 00:10 | The Flex 4 SDK implements the
cascading style sheet standard.
| | 00:14 | Its implementation is neither a
superset nor a subset of the CSS
| | 00:18 | implementation in a web browser.
| | 00:20 | It has certain things in common and
certain things that are different.
| | 00:24 | For the demonstrations in this chapter,
I'll import a project from the Exercise Files.
| | 00:30 | If you have access to the Exercise
Files, you can import it yourself.
| | 00:34 | You'll find it in a folder called
10_CSS > begin and the name of the
| | 00:38 | importable project is CSS.fxp.
| | 00:44 | After importing the file, open the
source folder, open the default package and
| | 00:50 | open the file InlineCSS.mxml.
| | 00:56 | Cascading style sheets are implemented
internally different than actual properties.
| | 01:00 | For example, the Label
control has a property called text,
| | 01:05 | but a number of styles such as
fontFamily, fontWeight, Color, and so on that
| | 01:10 | determines the appearance of the text.
| | 01:13 | One of the main differences between a style and
a property is in how you can set it at runtime.
| | 01:18 | For example, properties can be set
using dot syntax whereas styles have to be
| | 01:23 | set using an
ActionScript method called setStyle.
| | 01:27 | But when you declare a style inline in an
MXML tag, it looks just like a property.
| | 01:33 | For example, if I wanted to set the
size of a Label control, I'd use a
| | 01:38 | style called fontSize.
| | 01:41 | The fontSize style must be set to a
numeric value, which is the number of pixels.
| | 01:47 | As I've mentioned in other videos, font
sizes in Flex are only measured in terms
| | 01:52 | of pixels and never in terms of
ems or any other unit of measurement.
| | 01:57 | Here is another style that's
available on all controls that display text.
| | 02:01 | fontStyle takes a string.
| | 02:04 | One of these two values, italic or normal.
| | 02:07 | I'll set this first Label to a fontStyle
of italic, and then run the application
| | 02:12 | to show you the result.
| | 02:16 | Here is the label that has a fontSize
of 24 pixels and a fontStyle of italic.
| | 02:23 | Now to find out what styles are
available on any particular control, look at
| | 02:27 | the API documentation.
| | 02:29 | I'll place the cursor inside the Label
tag and then press Shift+F2. That will
| | 02:35 | take me to the Help screen for this control.
| | 02:38 | Remember that that's the same
keyboard shortcut on both Mac and Windows.
| | 02:42 | Now if for any reason that context-
sensitive help doesn't work, you can click
| | 02:47 | into the text box and type in the fully
qualified name of the class you're interested in.
| | 02:52 | In the API documentation screen for
this component, click the Styles link.
| | 02:57 | Within the Styles section, you can
either look at all styles that are applied
| | 03:01 | for this component, including the
styles that are natively set up on it super
| | 03:05 | classes or you can hide the inherited
styles and only look at the styles that
| | 03:10 | are declared natively in this class.
| | 03:12 | I'm going to look at all styles.
| | 03:15 | I'll scroll down to the section that's
start with the word font and show you
| | 03:19 | that there is a style called
fontFamily, another one called fontLookup,
| | 03:22 | fontSize, fontStyle, fontWeight and so on.
| | 03:27 | As I mentioned, certain styles accept
strings but require particular values.
| | 03:32 | The fontStyle for example requires
values of either NORMAL or ITALIC or you can
| | 03:37 | always put in value of INHERIT.
| | 03:40 | These enumerated values are
frequently represented as constants in
| | 03:44 | particular classes.
| | 03:45 | For example, the possible values
for the fontStyle are represented in a
| | 03:50 | class called FontPosture.
| | 03:53 | You can use these classes in MXML
declarations in inline styles if you prefer.
| | 03:59 | I'll switch back to Flash Builder,
and I'm going to remove the word italic.
| | 04:03 | Then put in a binding expression.
| | 04:06 | I'll start with a brace and type in the
class name FontPosture, then a dot and
| | 04:12 | then the constant name ITALIC.
| | 04:14 | I'll close the expression and press
Ctrl+S or Command+S on Mac to save the file,
| | 04:21 | and you'll see an error occur.
| | 04:23 | The message I'm interested in is
"Access of undefined property FontPosture."
| | 04:28 | Now the reason that's happening is because I'm
referring to a class that has not been imported.
| | 04:33 | Here is a very simple way to import
the class without having to know ahead of
| | 04:36 | time what its package is.
| | 04:39 | I'll place the cursor after the
class name and press Control+Space.
| | 04:44 | That's again the same keyboard
shortcut on both Mac and Windows.
| | 04:48 | It appears that nothing happened,
but if I scroll up to the top of the
| | 04:52 | application, I'll find a Flash Builder
has added a new Script section and the
| | 04:57 | required import statement
for the FontPosture class.
| | 05:00 | Now I'll scroll back to the code and
once again save the file and now the
| | 05:05 | error goes away, and the constant wrapped
inside of binding expression works correctly.
| | 05:10 | I'll run the application to show you
that the constant in fact does affect the
| | 05:13 | appearance of the Label.
| | 05:16 | Some developers prefer to use this
style of coding instead of simple strings,
| | 05:20 | because we you use a constant, for
example by adding an s where it doesn't belong.
| | 05:26 | When you save and try to rebuild the
application, you'll get a compiler error
| | 05:31 | such as this one, "Access of
possibly undefined property ITALICs."
| | 05:36 | So constants are available for styles
that take strings in many cases, not all.
| | 05:41 | If you're not sure, look at the documentation.
| | 05:44 | So inline style declarations are nothing
more than MXML attributes that name the
| | 05:50 | style and pass in a value.
| | 05:52 | Different styles take different data types.
| | 05:55 | The documentation will tell you what
data type is appropriate for which style
| | 05:59 | and sometimes you can use constants
to pass in the value that you want.
| | Collapse this transcript |
| Using embedded style sheets| 00:00 | You can declare styles in three major
ways, as inline styles, which I have shown
| | 00:05 | in another video, as an embedded
style sheet, or in an external style sheet.
| | 00:10 | An embedded style sheet is placed
within an MXML document, a main application file,
| | 00:16 | or a custom MXML file.
| | 00:19 | For this demonstration, I'll use
the application EmbeddedCSS.mxml.
| | 00:25 | When you declare a style sheet within an
MXML file it's called an embedded style sheet
| | 00:29 | and it's placed within a
pair of tags labeled fx:Style.
| | 00:34 | I'll place the cursor after the
Script section in this application.
| | 00:37 | I'll type in a less than character and
then the beginning of the tag, sty.
| | 00:43 | That takes me to the fx:Style tag name.
| | 00:45 | I will select that tag from the list
and type in the greater than character and
| | 00:50 | Flash Builder auto completes the style element.
| | 00:53 | Notice that Flash Builder adds a
couple of namespace declarations.
| | 00:58 | These operate exactly the same way as
the namespace declarations in an MXML tag.
| | 01:02 | For example, this is the Spark
namespace declaration in the Application tag.
| | 01:07 | The string library://ns.adobe.com/flex/
spark is associated with the prefix s.
| | 01:19 | In a style element you are doing exactly
the same thing but the syntax is different.
| | 01:24 | You start with a string @namespace.
| | 01:27 | Then after a space, you declare the prefix.
| | 01:30 | Then within a pair of quotes the
namespace string and you finish the
| | 01:34 | declaration with a semicolon.
| | 01:36 | This syntax for declaring namespaces in
cascading style sheets is determined by
| | 01:41 | the W3C's recommendation for namespaces in CSS.
| | 01:45 | Adobe adopted this syntax for
Flex 4 because it makes it possible to
| | 01:50 | distinguish between style declarations
for Spark components or MX components
| | 01:55 | that share the same name.
| | 01:58 | In order to declare a style for a
particular component, you start with
| | 02:02 | the namespace prefix.
| | 02:04 | So I will type in the letter s for Spark
and then I will type in the pipe character.
| | 02:10 | You will find this character on your
keyboard on the same key as the Backslash.
| | 02:14 | Hold down the Shift key, press
that key, and you will get this
| | 02:17 | vertical character.
| | 02:18 | Flash Builder shows me a listing of all
of the known components that are members
| | 02:22 | of the Spark namespace.
| | 02:24 | For this demonstration, I'll
choose the Label component.
| | 02:28 | This is called a CSS selector.
| | 02:31 | It's a way of determining how
set of styles will be applied.
| | 02:35 | In this case, I'm declaring a set of
styles or a style rule, which will be
| | 02:40 | applied to all instances of the Label class.
| | 02:43 | Now after a space, I will type in a
beginning brace character and press Enter
| | 02:47 | and Flash Builder adds a closing
brace and an empty line, and I can now
| | 02:52 | declare one or more styles within
the braces that will be applied to all
| | 02:57 | elements that match the selector.
| | 02:58 | I will type in the word font because
there are many styles I could apply to a
| | 03:02 | Label that start with that
string and then I press Ctrl+Space.
| | 03:06 | When you declare styles within an
embedded style sheet, you can use either
| | 03:11 | hyphenated style names as shown in the drop
-down list or you can use CamelCase names.
| | 03:17 | CamelCase is the style
that you use in an MXML tag.
| | 03:20 | For example, in the Application tag,
BackgroundColor is using CamelCase.
| | 03:26 | Once again I place the cursor after
the word font and press Ctrl+Space, and
| | 03:31 | I will choose the font-size style.
| | 03:33 | I type in a colon and then a
value of 20 followed by a semicolon.
| | 03:39 | So this means that all label
controls should be 20 pixels in size.
| | 03:44 | I will also set a font-family of Verdana.
| | 03:51 | Once again the syntax will be the
property name, a colon, the property
| | 03:55 | value, and a semicolon.
| | 03:58 | Now I'll save and run the application
and show you that the result is that all
| | 04:03 | labels are 20 pixels and all labels are
Verdana and the exception to this would
| | 04:09 | be any Label control that already
has an inline CSS declaration.
| | 04:13 | For example, in this application, the
first label has a font size of 24 set
| | 04:19 | as in inline style.
| | 04:21 | Anything that you set as in the
inline style takes precedence over an
| | 04:25 | embedded style sheet.
| | 04:27 | However, that first Label control does
not have a font-family setting so it uses
| | 04:32 | the font-family style from the Label selector.
| | 04:35 | So that's one very simple
use of an embedded style sheet.
| | 04:38 | Here is another way to think
about using an embedded style sheet.
| | 04:41 | This time I'm going to take the
BorderContainer styles that are
| | 04:44 | declared multiple times.
| | 04:47 | This BorderContainer component, for
example, has backgroundColor, borderStyle,
| | 04:52 | borderColor, borderWeight and so on,
and I have another BorderContainer right
| | 04:56 | below it that is using exactly the same styles.
| | 04:59 | So I am going to place the cursor
after the Label selector and I will type in
| | 05:03 | Border and press Ctrl+Enter.
| | 05:06 | This is another approach to filling
in selector names in Flash Builder.
| | 05:10 | Instead of starting with the prefix,
I start with the component name.
| | 05:13 | I press Ctrl+Space to bring up the Code
Assist list and choose the component I
| | 05:18 | want to use and Flash Builder
fills in the namespace prefix for me.
| | 05:21 | I put in my braces and then I'm going
to copy and paste all of these settings,
| | 05:29 | moving them from the MXML tag to the styles tag.
| | 05:34 | For each of these settings, I am going
to remove the equals and quote before
| | 05:37 | the value and replace it with colon
and also remove the closing quote and
| | 05:42 | replace it with a semicolon.
| | 05:44 | I will do that for the backgroundColor,
the borderStyle, the borderColor,
| | 05:50 | the borderWeight, the cornerRadius
and the dropShadowVisible styles.
| | 06:20 | I will then go to each of the
BorderContainers and remove those styles so that
| | 06:24 | I only having to clear the styles once.
| | 06:26 | I am now saying that all
BorderContainers have these default styles.
| | 06:32 | Notice I am leaving the x and y
properties in the first BorderContainer and
| | 06:36 | horizontalCenter,
verticalCenter and width in the second.
| | 06:39 | That's because those are properties
and not styles and properties can't be
| | 06:44 | declared inside an embedded style sheet.
| | 06:46 | I'll run the application and show you
that the BorderContainers look exactly the
| | 06:51 | same as they did before with the
borders, the backgroundColors, cornerRadius,
| | 06:56 | dropShadows and so on but now those
visual presentation settings are being
| | 07:00 | determined within the embedded style sheet.
| | 07:04 | Embedded style sheets have the advantage
of grouping the code that's determining
| | 07:08 | the visual appearance of the
application with the application code itself.
| | 07:13 | Many developers, however, prefer to
place their CSS code in external CSS files.
| | 07:18 | I will show you how to do
that though in a separate video.
| | Collapse this transcript |
| Using type, style name, and id selectors| 00:00 | When you use embedded or external style
sheets to determine the appearance of a
| | 00:04 | Flex application, you
create style rules in selectors.
| | 00:09 | The Flex 4 SDK supports a
number of different selector types.
| | 00:13 | I'll show you how to use them
in this demonstration using the
| | 00:16 | application, CSSSelectors.mxml.
| | 00:21 | In the beginning state of the application,
I have three buttons wrapped inside a BorderContainer.
| | 00:26 | Within the BorderContainer, there is a
panel and the panel contains a couple of
| | 00:30 | Labels, a TextInput control,
and a TextArea control.
| | 00:35 | I'll take a look at the application in
Source View and I'm going to start by
| | 00:39 | creating an embedded style sheet inside
the application, after the Application tag
| | 00:44 | and before any of the visual components.
| | 00:46 | I'll make a blank line and type in a
less than character, then sty, and I'll
| | 00:53 | press Enter or Return to select the
fx:Style tag and type the greater than
| | 00:57 | character to auto-complete the tag and add the
name spaces for the Spark and MX component sets.
| | 01:03 | The first selector I'll show you
is one of the most commonly used.
| | 01:06 | It's called the type selector.
| | 01:08 | It's similar to a tag selector in HTML.
| | 01:12 | You set the name of the selector
matching the name of the component or class
| | 01:16 | that you want to display the styles.
| | 01:19 | So for example, if I want all Spark
buttons in the entire application to show a
| | 01:24 | particular font size, I would
create a button selector like this.
| | 01:28 | I'll type in the word Button,
and then press Ctrl+Space.
| | 01:33 | Notice that there are two button
controls, the MX button and the Spark button.
| | 01:37 | I'll choose the Spark button, type in a
Spacebar, an opening brace and press Enter.
| | 01:43 | And now, any styles that I declare
between the braces will be applied to all
| | 01:48 | instances of the button
component throughout the application.
| | 01:51 | You can declare type selectors only in the
application itself, not in any custom components.
| | 01:57 | I'll add the font-size style of 18 pixels
and a color of red or I could use the
| | 02:06 | hexadecimal value FF0000.
| | 02:11 | I'll save and look at the application
in Design mode and you'll see that all
| | 02:15 | button controls are now displaying a red
font in 18 pixels and I'll go back to the code.
| | 02:22 | Now, if I have another kind of control
to which I want to apply a certain set of styles,
| | 02:26 | I can declare the
styles again in a separate selector.
| | 02:30 | I'll add a comment after the s|Button
selector, and I'll add a selector for the
| | 02:35 | Spark TextInput control.
| | 02:37 | So now, all controls in the comma
delimited list will receive the styles
| | 02:41 | that I've declared.
| | 02:43 | This is still called a type selector,
but it's a list of type selectors now,
| | 02:48 | instead of just a single selector.
| | 02:50 | There is my three buttons and
there is my TextInput control.
| | 02:56 | You can also apply type selectors,
taking into account the object-oriented
| | 03:00 | inheritance of components.
| | 03:02 | For example, the TextInput control and
the TextArea control are both sub-classed
| | 03:08 | from a special component
called SkinnableTextBase.
| | 03:12 | If you apply a style to the superclass,
all of the subclasses receive that style as well.
| | 03:18 | I'll start off by typing the word
Skinn with two Ns and then I'll press
| | 03:23 | Ctrl+Space and select the
s|SkinnableTextBase class.
| | 03:27 | Now this is not a class you would typically
instantiate directly in a Flex application.
| | 03:35 | But I'm going to apply a style called
content-background-color and I'll set it
| | 03:40 | to a named value of aqua.
| | 03:41 | Then I'll look at the application in
Design view and you'll see that both the
| | 03:45 | TextInput and the TextArea controls
have received this style, again because
| | 03:50 | they are both subclasses of
the SkinnableTextBase component.
| | 03:55 | So that's a look at how to use type selectors.
| | 03:59 | Now let's talk about how
to use style name selectors.
| | 04:02 | A style name in Flex is similar to
a CSS class in HTML. That is, it's an
| | 04:09 | arbitrary class name to which you explicitly add
controls using MXML markup or ActionScript code.
| | 04:16 | I'm going to declare a style name like this.
| | 04:19 | I'll put in a dot and then apply the style name.
| | 04:24 | The name of the style will be blueText.
| | 04:27 | And I'll add a style to its rule, where
the name of the style is color, and the
| | 04:31 | value is #0000FF for blue.
| | 04:36 | Now, on its own the style
name doesn't do anything.
| | 04:39 | If I look at the application in
Design View, you'll see that none of the
| | 04:42 | controls have changed.
| | 04:43 | But I'll go back to the code and I'll
go to the second button, and I'll add a
| | 04:48 | style name property set to a value of blueText.
| | 04:53 | Now notice that you used the dot
when you defined the style name in the
| | 04:57 | embedded style sheet.
| | 04:59 | But when you refer to the style name in
your MXML or ActionScript code, you just
| | 05:03 | pass in the name itself without the dot prefix.
| | 05:07 | Now, I'll look at the application in
Design Mode again, and show you that the
| | 05:11 | second button is using blue text.
| | 05:15 | So that's how you use style names.
| | 05:17 | Again, you define them in your style
sheet and then you apply them using the
| | 05:21 | style name property in any
component that you want to use those styles.
| | 05:26 | Finally, I'll show you one more
CSS selector that's new to Flex 4.
| | 05:30 | It's called the id selector.
| | 05:32 | The id selector works
exactly like it does in HTML.
| | 05:36 | Let's take this Button
component that has an id of button3.
| | 05:41 | I can add styles directly in the MXML
component or I can add a style selector
| | 05:46 | in the style sheet.
| | 05:47 | An id selector starts with a pound and
finishes with the id of the control to
| | 05:55 | which you want to apply the style.
| | 05:57 | I'll add a pair of braces and I'll add the
font-style style and set it to a value of italic.
| | 06:06 | And I'll also add a text-decoration style,
and set that to a value of underline.
| | 06:11 | Then I'll look at the application in
Design Mode again and show you that
| | 06:16 | the one control that has the id that
matches that selector has italics and underlining.
| | 06:23 | So again, id selectors
are new to the Flex 4 SDK.
| | 06:27 | You couldn't use them in Flex 3.
| | 06:29 | Both style name selectors and id
selectors can be defined in either custom
| | 06:34 | components or at the application level.
| | 06:37 | In this example, I've defined my embedded
style sheet in the application main file.
| | 06:42 | And so the styles will apply not just
to the application file, but also to any
| | 06:47 | nested custom components.
| | 06:49 | As I've mentioned, your type
selectors must be defined at this level.
| | 06:53 | But style name and id
selectors can be defined in the custom
| | 06:56 | components themselves.
| | Collapse this transcript |
| Using descendant and global selectors| 00:00 | The Flex 4 SDK supports a couple of
selectors that you can use to affect
| | 00:04 | controls throughout an
application or in very specific situations.
| | 00:10 | In this demonstration, I'll show you
the global selector and a new feature of
| | 00:14 | the Flex 4 SDK called descendant selectors.
| | 00:18 | The global selector is applied only at
the application level that is you can
| | 00:22 | declare it only in an embedded style
sheet within the application or an external
| | 00:26 | style sheet that's linked
into the application main file.
| | 00:30 | You can't use the global selector
say in a style sheet that's linked into
| | 00:34 | a custom component.
| | 00:36 | When you declare the global selector,
its properties are applied to all visual
| | 00:40 | components throughout the application.
| | 00:43 | Common uses of the global selector
include setting a default font family,
| | 00:46 | font size, and color.
| | 00:49 | I'll demonstrate the global
selector in the application file,
| | 00:52 | AdvancedSelectors.mxml.
| | 00:55 | I'll place the cursor above the
existing style declarations in the embedded
| | 00:58 | style sheet, and type in the
name of the selector, global.
| | 01:02 | Notice that it's in all lowercase.
| | 01:04 | This is a requirement.
| | 01:06 | Within the global selector, I'll set
the font-family style and I'll set it to a
| | 01:11 | value of _typewriter.
| | 01:15 | _typewriter is a system font name.
| | 01:18 | It doesn't refer to a specific font
face such as Courier or Courier New, but
| | 01:23 | instead to all fonts of that style,
fixed-pitch typewriter style fonts.
| | 01:28 | Similar system names
include sans-serif and serif.
| | 01:33 | So this means that all visual controls
that render text such as labels and rich
| | 01:37 | text controls throughout the
application will use whatever is the system
| | 01:42 | typewriter font on the users' computer.
| | 01:46 | I'll save and run the
application, and here's the result.
| | 01:50 | Every visual control which
previously might have been displaying Arial or
| | 01:53 | Geneva, or whatever the standard font was,
is now displaying a Courier style font.
| | 01:59 | So that's the global selector.
| | 02:01 | Going to the other extreme of applying
styles only in very specific situations,
| | 02:06 | the Flex 4 SDK now implements what
are known as descendant selectors.
| | 02:11 | A descendant selector, sometimes
also called a contextual selector, is a
| | 02:15 | selector that defines styles for an object
only when it's placed within a container.
| | 02:20 | For example, let's say that I wanted to set
styles for all labels throughout the application.
| | 02:27 | I'll put in a style selector for
s| Label and then within the braces, I'll set a
| | 02:32 | style called text-decoration and
I'll set it to a value of underline.
| | 02:37 | This means that all label
controls are now underlined.
| | 02:40 | I'll run the application and show you
that the label controls within the panel,
| | 02:46 | the label within the header of the panel,
and even the label controls that are
| | 02:50 | in the buttons are underlined.
| | 02:52 | This is actually something very
important to know about the nature of the
| | 02:56 | Flex visual controls.
| | 02:58 | A label control is used in
a lot of different components.
| | 03:02 | So, if you apply a style to the
Label selector, you're affecting a lot of
| | 03:06 | controls throughout the application.
| | 03:09 | So, let's say instead that what I have
really want to do is apply underlining
| | 03:14 | only to labels that are
contained directly within panels.
| | 03:17 | Here is how I do it.
| | 03:18 | I'll place the cursor before the Label
selector, and I'll add s|Panel and
| | 03:26 | I'll separate the two selectors with the space.
| | 03:29 | This is now a descendant selector.
| | 03:32 | It means that these styles are
applied to labels only when they are direct
| | 03:35 | child objects of a panel.
| | 03:38 | I'll save and run the
application again, and here's the result.
| | 03:42 | Now, the Button control labels don't
have the underlining, but the label
| | 03:47 | controls within the panel do, both
within the content area of the panel
| | 03:51 | and within the header.
| | 03:53 | In order to be more specific,
you can apply a combination of styles.
| | 03:57 | So for example, let's go down
to the labels within the panel.
| | 04:02 | Here are my two labels inside the panel.
| | 04:05 | I'm going to give them a style name of content.
| | 04:11 | Now that style name doesn't actually exist yet.
| | 04:13 | That is, it hasn't been
declared in the CSS style sheet.
| | 04:17 | But now, I'll go back up to my style
selector for labels within panels and
| | 04:23 | after the Label selector, I'll add .content.
| | 04:27 | So this now means that only labels
that are within panels that are members of
| | 04:32 | the style name content will receive underlining.
| | 04:36 | I'll run the application and here's the result.
| | 04:41 | Now the labels that are contained
within the content area of the panel have
| | 04:44 | underlining, but the label
that's in the header doesn't.
| | 04:47 | You might notice that there is an
underline on the third button and if you
| | 04:52 | look at the code, you'll see the
reason for that is that I already have an id
| | 04:56 | selector that's applying that
underlining in that style sheet.
| | 05:01 | So, understanding how to use cascading
style sheets in a Flex application is a
| | 05:05 | combination of understanding the
rules of the different selectors, that the
| | 05:10 | global and type selectors can only be
applied in the application itself, while
| | 05:14 | style name and id selectors can be
applied in custom components as well and also
| | 05:20 | understanding the precedence
of the different selectors.
| | 05:23 | The global selector has the lowest precedence.
| | 05:26 | Style names have the next level of precedence.
| | 05:29 | Type selectors and id
selectors round out the rules.
| | 05:33 | Cascading style sheet selectors and
styles are then used to determine the
| | 05:39 | overall appearance of your Flex application.
| | Collapse this transcript |
| Using external style sheets| 00:00 | The styles that you declare in an
embedded style sheet can also be declared in
| | 00:04 | an external style sheet.
| | 00:06 | External style sheets are simply text
files with the file extension of .CSS.
| | 00:11 | They must be placed in your source code
root folder or in a package within the
| | 00:15 | source code root and they are compiled
into the application rather than being
| | 00:19 | loaded at runtime by default.
| | 00:22 | There are a few ways of creating an
external style sheet, but I'd like to show
| | 00:25 | you a particular approach that
involves the use of Design Mode.
| | 00:29 | I'll start with the
application ExternalCSS.mxml.
| | 00:34 | When I run the application,
you'll see that it has a few buttons.
| | 00:38 | The first button has some
styles that are declared inline.
| | 00:42 | So these styles are applied
only to this particular button.
| | 00:45 | There is a particular font-
face and a particular font-size.
| | 00:49 | The other buttons have default styles.
| | 00:53 | Now I'll take a look at the code for
the button controls, and show you that the
| | 00:57 | first button has font-family and font
-size styles, again declared inline.
| | 01:03 | Here's how you can move inline styles
to an external style sheet and along the way,
| | 01:08 | create a brand-new external style sheet.
| | 01:12 | I'll choose the button that has the
inline styles in Design Mode and then look
| | 01:16 | at the Properties view
in the lower-right corner.
| | 01:20 | I'll click the button Convert to CSS.
| | 01:23 | This is called the New Style Rule dialog.
| | 01:26 | It will move the styles that are
declared inline in the selected control to an
| | 01:30 | external style sheet.
| | 01:32 | The first item to select
is the Define style in list.
| | 01:36 | I don't have any external style sheets
already created, so the list is empty.
| | 01:40 | So I'll click the button labeled New.
| | 01:43 | Now again, you can create your
external style sheets in a package or in
| | 01:47 | the source code root.
| | 01:48 | I'm going to leave the Package
setting blank, choose a file name of styles.
| | 01:54 | Don't add the .CSS extension here.
| | 01:57 | If you do, Flash Builder will add it twice.
| | 02:00 | That is to say, you might get
a file called styles.CSS.CSS.
| | 02:05 | Just put in the beginning of the
filename you want to create. Then click Finish.
| | 02:10 | There is the new file, src/styles.css, placed
in the source code root folder of the project.
| | 02:18 | Next, I determine how the style selector
for the selected button will be created.
| | 02:22 | The default is to apply the styles to
a specific component, more specifically
| | 02:27 | all Button controls.
| | 02:29 | You can also add the styles to the
global selector, to all components with a
| | 02:34 | particular style name, or to a
specific component with the style name.
| | 02:38 | I'm going to use the default setting
that is I'm going to apply the inline
| | 02:42 | styles to all instances of the
Spark button control and I'll click OK.
| | 02:48 | And here is the new style sheet that results.
| | 02:50 | It includes the Spark and MX name
space declarations and it has a new
| | 02:55 | selector that implements the styles
that previously were declared inline in
| | 03:00 | the button control.
| | 03:01 | Now, I'll go back to the file, ExternalCSS.mxml.
| | 03:05 | That's the MXML application I started
with, and you'll see that all three of the
| | 03:09 | buttons now have those styles.
| | 03:11 | I'll go to the Source Mode,
and show you the reason.
| | 03:15 | Up toward the top of the file, a new
style tag has been added to the application.
| | 03:21 | It's an empty tag, that is it only has
a begin tag, and not an end tag, and
| | 03:25 | it has a source attribute that
references the new external style sheet.
| | 03:29 | You can take all of the other styles
that you've already declared in an embedded
| | 03:33 | style sheet and manually move
them into the external style sheet.
| | 03:37 | So I'm going to go up to my embedded
style sheet and select just the styles.
| | 03:42 | I'm not going to take the name
space declarations or the wrapping text.
| | 03:47 | And I'll cut those to the clipboard.
| | 03:50 | I'll go to the styles.CSS
file and I'll paste them in.
| | 03:57 | Notice that when you paste in the new
code that Flash Builder automatically
| | 04:01 | fixes the indentation, so
everything matches up really nicely.
| | 04:05 | Now, I'll save my changes to styles.
CSS and go back to the application.
| | 04:11 | And I'm going to delete the fx:Style tag
set that formally included the embedded
| | 04:16 | styles, leaving just the fx:
Style tag with the source attribute.
| | 04:21 | I'll save and run the application and
you'll see that all the styles that were
| | 04:26 | previously controlled by the embedded
style sheet are now being implemented by
| | 04:30 | the external style sheet.
| | 04:32 | When you use an external style sheet
using the fx:Style tag, the styles are
| | 04:37 | compiled into the application.
| | 04:39 | They aren't loaded at runtime, like a
browser might with an external style sheet.
| | 04:43 | Instead they are part of the
application and you can overwrite the styles in a
| | 04:47 | few different ways at runtime by
executing ActionScript commands that either
| | 04:52 | modify explicit styles or style names
or by loading styles from the disk or
| | 04:57 | server that have been
precompiled into SWF files.
| | 05:01 | I'll show you how to use
those techniques in other videos.
| | Collapse this transcript |
| Setting and getting styles with ActionScript| 00:00 | The Flex SDK gives you a couple of
ways of changing styles at runtime,
| | 00:05 | including the setStyle method and a
set of functions that are members of a
| | 00:09 | class called the styleManager.
| | 00:11 | I'll show you how to use both
techniques in this demonstration.
| | 00:14 | I'll start with the setStyle method.
| | 00:17 | Every visual control
supports the setStyle method.
| | 00:21 | You don't set styles using simple dot notation.
| | 00:23 | For example let's take this
label with an id of myLabel.
| | 00:28 | If I wanted to change its typeface at
run time to say a Courier or I wanted to
| | 00:33 | change its font size,
| | 00:35 | I would not use the code
myLabel.fontsize or myLabel.fontfamily.
| | 00:41 | If you try to do that, the compiler
will throw an error because you can't use
| | 00:45 | dot notation on styles.
| | 00:47 | Instead you call the setStyle method.
| | 00:50 | The first requirement is that the control
you want to modify at runtime has an ID.
| | 00:54 | In this case, I'll use the
label with an ID of myLabel.
| | 00:58 | Then you call the setStyle method and
you pass in minimally two arguments.
| | 01:03 | The first argument is the name of the
style as a string and the second is the
| | 01:08 | new value, you want to assign to the style.
| | 01:11 | I'll demonstrate this by adding a
click event to this first button control.
| | 01:16 | I'll click into the button tag and
press the Spacebar and add a click attribute
| | 01:21 | and allow Flash Builder to
generate a click handler function.
| | 01:26 | Then I'll scroll up to the top and see the
new script section that Flash Builder has added.
| | 01:32 | I'll delete the comment that was added
in the function and replace it with this code,
| | 01:36 | myLabel.setstyle.
| | 01:40 | Then I'll pass in the name of the
property and I'll use the style name fontSize
| | 01:46 | and a new value, which
I'll assign to a value of 24.
| | 01:50 | Notice in the signature of the setStyle
method that the second argument labeled
| | 01:54 | newValue has a data type of an asterisk.
| | 01:58 | That means that you can pass in any
data type into var argument that you want.
| | 02:03 | It's designed that way because
different styles require different data types.
| | 02:07 | Numbers, unsigned integers, strings and so on.
| | 02:13 | I'll complete the statement with a
closing parenthesis and semicolon and save
| | 02:17 | and run the application.
| | 02:22 | I'll click the button labeled Set
Control Style and there is the result,
| | 02:27 | the label size changes instantly.
| | 02:29 | Now, you should be cautious
using the setStyle method.
| | 02:32 | It's fine using it on an
individual control such as I've done here.
| | 02:36 | But if you call the setStyle at the
application level or on a container that has
| | 02:40 | a very deeply nested containership
hierarchy you can see sluggish performance.
| | 02:46 | The reason is because the framework has
to dig through the entire containership
| | 02:50 | and figure out each individual object
to which the new style should be applied.
| | 02:54 | So if you need to set Styles at runtime
on a single object, it should work fine.
| | 02:59 | If you need to set them on a lot of
objects at the same time, you might examine
| | 03:04 | another approach, and here's one of those.
| | 03:07 | The application component in Flex 4 has
a property called styleManager, which is
| | 03:12 | an instance of a class called styleManager.
| | 03:14 | The styleManager class has a number of
useful functions including one that can
| | 03:19 | modify a style name at runtime.
| | 03:22 | I'll demonstrate this using
the second label in my panel.
| | 03:27 | It has an id of redLabel.
| | 03:29 | But to demonstrate the use of the
styleManager I'll add a style name
| | 03:33 | attribute of redFont.
| | 03:36 | Now, this style name hasn't been
declared anywhere in my application yet.
| | 03:41 | If you go to the embedded style sheet,
you'll see that there is no .redFont selector.
| | 03:47 | Now, I'll show you how to create CSS style
declaration object and apply styles to it
| | 03:54 | and then apply that object to
the style name at run time.
| | 03:58 | I'll go to the applications second button and
add a click event and generate a clickHandler.
| | 04:06 | I'll go to the generated clickHandler
method and remove the comment and I'll
| | 04:10 | start by declaring a variable.
| | 04:13 | I'll name the variable css and set
its data type as CSSStyleDeclaration.
| | 04:22 | Then I'll instantiate that object
using the new keyword and the constructor
| | 04:27 | method for CSSStyleDeclaration.
| | 04:30 | This constructor method can take a
couple of different arguments but they are
| | 04:33 | all optional, so I'll call the
constructor method with no arguments.
| | 04:38 | Now, I'm going to use the same
setStyle method that I used before.
| | 04:42 | But I'll apply it to this abstract declaration.
| | 04:45 | That is it hasn't been applied to any
particular object or style name yet.
| | 04:50 | I'll use css.setstyle, I'll pass in a
string of "color" that's the name of the style,
| | 04:57 | and a value of 0XFF0000 and
that's the hexadecimal value for red.
| | 05:05 | So now, I have an instance of the
CSSStyleDeclaration class that represents my color.
| | 05:10 | Now, I'm going to use this
styleManager class, like this.
| | 05:15 | The application has a property called
styleManager. I'll start off by typing the
| | 05:21 | word style and pressing Ctrl+Space
and I'll choose the styleManager object.
| | 05:27 | When you refer to styleManager
object like this, it's shorthand.
| | 05:31 | The long hand would be this.styleManager
and every application has only one
| | 05:36 | instance of the styleManager class, a singleton.
| | 05:40 | Now, I'll type in a dot and I'll
call the setStyleDerlaration method.
| | 05:46 | Here, you can pass in any selector as a string.
| | 05:50 | I'm going to use the
style name selector .redFont.
| | 05:54 | Now, remember that style name did not
exist before. I am creating it on the fly now.
| | 06:00 | Then I'll pass in my CSSStyleDeclaration.
The name of it is simply css.
| | 06:05 | I already created it.
| | 06:07 | Then I'll pass in a required attribute,
which is a Boolean value, which asks
| | 06:12 | whether I want to do an
immediate update on the application.
| | 06:16 | I'll pass in a value of true and when
the user clicks the button they should see
| | 06:20 | an immediate change to the
appearance of the application.
| | 06:24 | I'll save and run the application.
| | 06:27 | I'll click the Set Style Name button and
you'll see the color of the font changes.
| | 06:32 | Now, to make this a little bit more
dramatic I'll go back to my code and add a new
| | 06:37 | style to the CSS object.
| | 06:39 | I'll place the cursor after this call
to setStyle method and I'll add another
| | 06:45 | call, css.setstyle, and I'll
pass in fontSize and a value of 24.
| | 06:53 | So, now my CSSStyleDeclaration object
encapsulates two different styles and
| | 06:59 | they will both be applied to the
redFont style name when I click the button.
| | 07:05 | I'll run the application to test it,
click the button and there's a much more
| | 07:10 | dramatic demonstration.
| | 07:11 | I'll click the original button to show
that I can still update a single object.
| | 07:16 | You can see that both of these
approaches for modifying the appearance of an
| | 07:20 | application at runtime work great.
| | 07:22 | So if you need to modify the style of a
single object at runtime, just call the
| | 07:28 | object setStyle method.
| | 07:29 | If you need to modify more than one
style or applies styles to a whole set of controls,
| | 07:34 | use the CSSStyleDeclaration
object to encapsulate the styles and the
| | 07:40 | styleManager object's setStyleDeclaration
method to apply the style object.
| | Collapse this transcript |
| Loading styles at runtime| 00:00 | Neither Flash Player nor the Flex SDK
have the ability to parse and load raw CSS
| | 00:06 | style declarations at runtime.
| | 00:08 | That's something that
browsers know how to do with CSS.
| | 00:11 | That is in a web browser you can create
multiple cascading style sheet external
| | 00:15 | files and then switch among them at runtime.
| | 00:18 | But because Flash Player and the
Flex SDK don't have that ability,
| | 00:22 | you need another approach.
| | 00:24 | So the Flex SDK includes the ability, first
of all, to precompile CSS files as SWF files.
| | 00:31 | Then the Style Manager class has a
method called loadStyleDeclarations that can
| | 00:36 | load a precompiled SWF file that
contains CSS declarations and applied those CSS
| | 00:41 | styles to the entire
application, instantly at runtime.
| | 00:45 | For this demonstration, I'll use
an application named RuntimeCSS.mxml.
| | 00:50 | The application has an embedded
style sheet that applies styles to the
| | 00:54 | BorderContainer, Buttons, TextInput
controls and include a style name and an
| | 00:59 | ID Selector.
| | 01:01 | I'll run the application and show the
result, which is that the Button, Label,
| | 01:07 | Text Input controls and so on
all have different styles applied.
| | 01:12 | Now, I'm going to create a new external
style sheet and I'll move the embedded
| | 01:16 | styles into the external file.
| | 01:19 | I'll go to the project source folder,
right-click and choose New > CSS File and
| | 01:27 | I'll name the file runtimestyles.
| | 01:30 | Notice that I am not
adding the .css file extension.
| | 01:33 | In some cases, if you add the .css
extension here, you'll get a file called
| | 01:38 | runtimestyles.css.css.
| | 01:41 | So I just put in the beginning of the
file name and click Finish and here is
| | 01:45 | the resulting file.
| | 01:47 | Its name is runtimestyles.css
and it already has the spark and mx
| | 01:52 | namespace prefixes.
| | 01:55 | Now, I'll go back to my
application and I'll select all of my styles.
| | 02:00 | I won't take the namespace declarations
because my external file already has them.
| | 02:04 | I'll click at the top of the style
declarations, scroll down, hold down the Shift key
| | 02:10 | and click at the bottom,
then right-click and choose Cut.
| | 02:16 | I'll go to the runtimestyles.css file
and I'll Paste those styles into place and
| | 02:22 | then I'll save the file.
| | 02:23 | I return to RuntimeCSS.mxml and
I'll select and delete the entire
| | 02:31 | fx:style element.
| | 02:32 | I don't need it anymore.
| | 02:35 | Now, I'll save and run the application
and show you what it looks like without
| | 02:39 | all of those style declarations.
| | 02:42 | Without the style declarations, the
BorderContainer is just a simple white rectangle.
| | 02:46 | All of the visual controls, such as
the Button, the Label, the Text Input
| | 02:50 | controls and so on all displayed the default
font and it has a very simple plain appearance.
| | 02:57 | I'll go back to Flash Builder and now
I am going to compile that external style
| | 03:01 | sheet as a SWF file.
| | 03:04 | Flash Builder makes this incredibly easy.
| | 03:06 | I'll go to the Package Explorer view,
locate my new external style sheet,
| | 03:11 | right-click on it and choose Compile CSS to SWF.
| | 03:16 | Now that option on the menu is a toggle.
| | 03:18 | That is to say if you right-click on
the CSS file again you'll see that there's
| | 03:22 | a check mark next to that option and
that means that if you make any changes to
| | 03:26 | the CSS file in the future,
it will automatically be recompiled.
| | 03:31 | Now, you won't see the SWF file
appear in the source code folder.
| | 03:35 | Instead, if you go and look at your
output folder named bin-debug, you'll see
| | 03:42 | that file runtimestyles.
swf has been created here.
| | 03:46 | I have a couple of other files that
are left over from previous exercises.
| | 03:51 | But I'll go to the Project menu and
choose Clean and click OK and that will
| | 03:56 | reconstruct the entire
project as deployable files.
| | 04:01 | I'll show you that what I end up
with is just the SWF file itself.
| | 04:05 | When you create a compiled SWF file,
it ends up in the output folder and the
| | 04:09 | original.css file is no longer
copied to the output folder by default.
| | 04:15 | Now, I'm going to add code to the
application that loads that SWF file at runtime.
| | 04:21 | I'll go to the Button with a label of Load
Styles and I'll add a click event handler.
| | 04:26 | I'll choose the click attribute and
then have Flash Builder generate a
| | 04:30 | clickHandler function.
| | 04:34 | I'll go up to the generated code and
remove the generated comment and I'll start
| | 04:39 | with the styleManager object.
| | 04:42 | The styleManager object is a property
of the application, which is a singleton
| | 04:47 | and implements an
interface called IstyleManager2.
| | 04:50 | I have used this object in other videos
to demonstrate how to update styles at
| | 04:54 | runtime using pure ActionScript code.
| | 04:58 | From the styleManager object,
I'll type in a dot and call the method
| | 05:01 | loadStyleDeclarations.
| | 05:04 | You notice that there are two; one with
just loadStyleDeclarations and the other
| | 05:08 | called loadStyleDeclarations2.
Use the first one.
| | 05:12 | Now, I'll pass in the URL that
references the file I want to load.
| | 05:17 | This is a string, so I'll wrap it in
quotes and I'll pass in the name of the file,
| | 05:22 | "runtimestyle.swf".
| | 05:26 | The next value is a Boolean argument,
which determines whether the new styles
| | 05:30 | will be updated immediately.
| | 05:33 | It defaults to true, but I'll go
ahead and pass in a value of true anyway.
| | 05:36 | The rest of the arguments have to do
with security, whether the SWF file that
| | 05:41 | you are loading is to be considered
trusted content, the application domain and
| | 05:45 | the security domain.
| | 05:46 | For more information about those
security settings, see the Flex documentation.
| | 05:51 | I'll complete my statement by typing in
a closing parenthesis and a semicolon.
| | 05:56 | So now when the user clicks the button,
the application will load the styles
| | 06:00 | from the server and
immediately update its appearance.
| | 06:05 | I'll run the application and once
again when it first loads it's showing the
| | 06:08 | very simple presentation.
| | 06:10 | When I click the button, the
applications appearance updates instantly.
| | 06:15 | Any styles that you declare in a
runtime loaded style sheet will be applied to
| | 06:19 | the entire application.
| | 06:21 | Not just the components that are
declared at the top-level main application file,
| | 06:25 | but also all
custom components and modules.
| | 06:29 | So that's a look at, how to
use at runtime loadable styles.
| | 06:33 | Once again they must be precompiled
into SWF format and use the styleManager
| | 06:38 | object's loadStyleDeclarations method
to load the SWF file from the server and
| | 06:43 | update the application's appearance instantly.
| | Collapse this transcript |
|
|
11. Skinning Spark Components with MXML and FXGDrawing vector graphics with MXML| 00:00 | The Flex 4 SDK includes a number of new
ActionScript classes, which are used to
| | 00:06 | render vector graphics on the screen
and are at the core of the new Spark
| | 00:10 | skinning architecture.
| | 00:12 | In this chapter, I'm going to
describe how to use these vector graphic
| | 00:16 | classes, declaring instances of vector
graphics with MXML code, and then how
| | 00:21 | to incorporate those vector graphics into
custom skins that are applied to Spark components.
| | 00:28 | All of the exercises in this chapter
will be done in a project that's included
| | 00:32 | with the Exercise Files.
| | 00:34 | If you have access to the Exercise
Files, you can import this project now.
| | 00:38 | Select File > Import Flex Project, then
click Browse and navigate to the folder
| | 00:45 | 11_Skinning/begin and select the
file Skinning.fxp, and import it.
| | 00:52 | That will create a new project
in your workspace named Skinning.
| | 00:55 | Open the Project, open its source
folder and its default package, and then open
| | 01:00 | an application named MXMLGraphics.mxml.
| | 01:05 | I'll expand the MXML editor to full screen.
| | 01:08 | This is a very simple application
that starts with a layout property set to
| | 01:12 | VerticalLayout so that objects that
I place in the application will stack
| | 01:16 | from top to bottom.
| | 01:18 | I'm going to show you how to declare
instances of vector graphic objects using
| | 01:23 | these new primitive classes
that are a part of the Flex 4 SDK.
| | 01:27 | There are three primary graphic classes
that you can use, named Rect to create
| | 01:32 | rectangles or squares, Ellipse to
create ellipses or circles, and Path to create
| | 01:38 | graphics that have arbitrary shapes.
| | 01:41 | All three of these classes
render graphics as a vector graphics.
| | 01:45 | That makes them very scalable. In contrast to
bitmap graphics where you show one bit at a time,
| | 01:52 | vector graphics are calculated mathematically.
| | 01:55 | So if you grow them or shrink them,
they still retain smooth curves and other
| | 02:00 | aspects of their presentation.
| | 02:02 | These vector graphics are members
of a package named spark.primitives.
| | 02:06 | They are called primitives because
that contrasts them with components.
| | 02:11 | Full components such as the Group, Panel,
Button and other interactive controls
| | 02:16 | in the Flex SDK, all are implemented
as subclasses of the UIComponent class.
| | 02:22 | Those full components can be added
to either Spark containers such as the
| | 02:27 | application or to the older MX containers.
| | 02:31 | In contrast, the primitive graphics can
only be added directly to Spark containers.
| | 02:37 | I'll show you how to use two of the
primitive graphics here, the Rect and
| | 02:40 | the Ellipse classes.
| | 02:41 | I'll place the cursor after the layout
property in the application, and I'll
| | 02:47 | start by creating a rectangle,
creating an instance of the Rect class.
| | 02:53 | Each of the primitive graphics supports
a width and height property, which you
| | 02:56 | can set to explicit sizing with a
numeric value, which is translated as the
| | 03:00 | number of pixels, or with percentage values.
| | 03:05 | For the Rectangle, I'll use explicit sizes
with the width of 300 pixels and a height of 200.
| | 03:13 | Each of the graphic classes supports a
property named Fill and another one named Stroke.
| | 03:18 | You use the Fill property to set the
inner presentation of the graphic and
| | 03:22 | the Stroke to set its border.
| | 03:25 | When you declare these classes in MXML, you
can set the Fill property using a child element.
| | 03:31 | I'll create an s:fill child element.
| | 03:34 | Then within the fill element, you can
add instances of one of these four classes.
| | 03:40 | BitmapFill, which is used to render a
bitmap graphic in the center of a vector
| | 03:44 | graphic, LinearGradient and
RadialGradient, to create gradient presentations
| | 03:49 | and SolidColor.
| | 03:53 | For this first very simple graphic,
I'll use the SolidColor class.
| | 03:58 | I'll set its color property to #FF0000.
| | 04:03 | If you like, you can
also set the alpha property.
| | 04:07 | The alpha property renders
transparency and its set to a value from 0 to 1.
| | 04:12 | 0 being fully transparent,
and 1 being fully opaque.
| | 04:16 | I'll give this rectangle an alpha property
of .8 or 80% opaque and I'll complete the tag.
| | 04:25 | Now I'll run the application in the
browser and show you the results so far.
| | 04:29 | The rectangle is rendered as a solid red color.
| | 04:33 | It's a little lighter than a full red because
of the transparency and the white background.
| | 04:38 | So that's about as simple a
graphic as you can render.
| | 04:41 | Now I'm going to add a
couple of other properties to it.
| | 04:44 | I'm also going to add the Stroke property.
| | 04:47 | The Stroke property renders a
border around the edges of the rectangle.
| | 04:51 | You set the Stroke property to one
of these classes: LinearGradientStroke,
| | 04:55 | RadialGradientStroke, or SolidColorStroke.
| | 04:59 | I'll use SolidColorStroke.
| | 05:00 | I'll set the color attribute to #000000.
| | 05:07 | I'll set the weight property to 5.
| | 05:09 | That means that the stroke
will have a width of 5 pixels.
| | 05:12 | I'll then save and run the application again.
| | 05:19 | Now the rectangle has a 5-pixel
wide black stroke all the way around.
| | 05:24 | There are many other properties
that you can add to the stroke object.
| | 05:27 | You can set its color,
shape, and other attributes.
| | 05:30 | Take a look at the documentation for
the Stroke classes for more information.
| | 05:35 | Finally, I'm going to add
radius settings to the rectangle.
| | 05:40 | The Rect class supports
properties named radiusX and radiusY.
| | 05:44 | I'll set these to values of 10 and
that will result in the graphic being
| | 05:49 | presented with rounded corners.
| | 05:53 | Once again, I'll run the application
and here is my graphic with a border
| | 05:57 | and rounded corners.
| | 06:00 | Now I'll show you how to use the Ellipse class.
| | 06:03 | You can use the Ellipse class
to create a circle or an ellipse.
| | 06:07 | If you set the width and height to
the same values then it's a circle.
| | 06:10 | Otherwise it's an ellipse.
| | 06:12 | With the Ellipse class, I'll show
you how to use percentage sizing.
| | 06:16 | I'll set the width to a property of
75%, and that means that the graphic will
| | 06:21 | shrink and grow to fill 75% of
its container, the application.
| | 06:27 | I'll give it an explicit height of 200 pixels.
| | 06:31 | For the Ellipse, I'll set the
Fill property to a gradient object.
| | 06:35 | I'll create the Fill property as a
child element of Ellipse and then declare an
| | 06:40 | instance of the RadialGradient class.
| | 06:43 | The RadialGradient class
has a property named entries.
| | 06:47 | The entries property is set to
an array of GradientEntry objects.
| | 06:51 | I'll declare the entries property
as a child element of RadialGradient.
| | 06:57 | Then I'll create three
instances of the GradientEntry class.
| | 07:01 | The GradientEntry class has a color property.
| | 07:04 | I'll set the first one to a
color of red using #FF0000.
| | 07:12 | Then I'll clone that line of code,
holding down Ctrl+Alt on Windows or
| | 07:17 | Command+Option on Mac, and
pressing the Down Arrow twice.
| | 07:22 | Then I'll change the colors for the
second and third GradientEntry objects.
| | 07:27 | The second one will be
green with a color of #00FF00.
| | 07:33 | The last one will be blue
with a color of #0000FF.
| | 07:40 | I'll run the application
and here is the visual result.
| | 07:44 | The ellipse expands to fill 75%
of the container, the application.
| | 07:49 | If I resize the browser, you'll
see the object shrink and grow to
| | 07:53 | accommodate the change.
| | 07:55 | Now the application has a min width setting.
| | 07:58 | So if I shrink the width of the
browser to less than the minimum width of the
| | 08:02 | application, the graphics stops growing.
| | 08:06 | So this is a look at how you can use a
vector graphics in a Flex application,
| | 08:10 | declaring them with MXML code.
| | 08:12 | Once again, these are simply ActionScript
classes that are parts of the Flex 4 SDK.
| | 08:18 | In addition to the Rect class, which
you'll use for rectangles and squares, and
| | 08:22 | the Ellipse class, which you used for
ellipses and circles, you can also use the
| | 08:27 | Path class that renders arbitrary shapes.
| | 08:31 | You'll be able to use these vector
graphics in custom skins that you build for
| | 08:35 | your Spark-based components.
| | 08:37 | I'll show you how to incorporate
such graphics in custom skins in other
| | 08:41 | videos in this chapter.
| | Collapse this transcript |
| Exporting FXG files from Illustrator and Fireworks| 00:00 | Adobe's Creative Suite 4 products,
including Illustrator, Fireworks and Photoshop,
| | 00:06 | have the ability to export vector
graphics in a format called FXG.
| | 00:11 | FXG stands for Flash XML Graphics,
and it's an XML-based markup language.
| | 00:17 | In Flex 4, you can use these FXG
files as graphics in your applications.
| | 00:22 | I am going to show you how to export
these files from both Illustrator and
| | 00:26 | Fireworks, which both have the ability
to work with pure vector graphic formats.
| | 00:32 | I'll start with Illustrator CS4.
| | 00:34 | If you don't have access to Illustrator
or Fireworks, you can just watch these
| | 00:38 | demonstrations, and then I'll provide a
finished version of an exported FXG file
| | 00:43 | that you can use in the
other tutorials of this chapter.
| | 00:48 | In Illustrator, I'll
open a vector graphics file.
| | 00:50 | I'll select File > Open, I'll navigate
to my Exercise Files folder, from there
| | 00:58 | to the 11_Skinning folder, to the begin folder.
| | 01:01 | And I'll select and open the file hp_logo.ai.
| | 01:07 | This is a vector graphic design
for use as a logo for the fictional
| | 01:10 | company Hansel & Petal.
| | 01:12 | Before you export an FXG graphic
from Illustrator, you should resize
| | 01:17 | the graphic's artboard.
| | 01:19 | The artboard is like a canvas in Fireworks.
| | 01:22 | It's the rectangular region
that contains the graphic.
| | 01:26 | If you export this graphic without
resizing the artboard, the resulting FXG
| | 01:30 | graphic will define a lot of
whitespace around the actual vector graphics.
| | 01:35 | I'll go to the toolbar and click the
Artboard tool, and then I'll manually
| | 01:40 | resize the artboard by
clicking and dragging its handles.
| | 01:44 | And I'll just eyeball it, resizing it
so that I make sure I include all of
| | 01:49 | the vector graphics.
| | 01:51 | I'll resize from the top left and from
the top right and then finally I'll go
| | 01:57 | down to the bottom and resize vertically.
| | 02:00 | Don't worry about being too exact here.
| | 02:02 | However, it comes out will be fine and
will be usable in your Flex application.
| | 02:07 | Now, I'll export to the FXG format.
| | 02:11 | I'll go to the Illustrator
menu and select File > Save As.
| | 02:14 | I'll set the File Type as FXG.
| | 02:20 | Notice that Illustrator automatically
gives the file an extension of .fxg.
| | 02:25 | I'll add the letters AI to the end of
the file name and I am also an upper case
| | 02:30 | of least the first
character of the file name here.
| | 02:33 | That's because Flex is going to treat
this as an ActionScript class and
| | 02:37 | I'd like to follow
ActionScript class naming conventions.
| | 02:42 | Now, I'm going to save the file to my Desktop.
| | 02:46 | I'll select my Desktop and then click Save.
| | 02:51 | Illustrator presents a number
of options in this dialog box.
| | 02:54 | The Creative Suite 4 products export FXG 1.0.
| | 02:59 | The Flex 4 SDK can also use FXG
2.0, which will be exported by the
| | 03:04 | Creative Suite 5 products.
| | 03:07 | I'll accept all of the default options and
click OK, and that saves the file to the Desktop.
| | 03:13 | Then I'll close the file in
Illustrator selecting File > Close.
| | 03:18 | The resulting file has been saved
to my Desktop as HP_logo_ai.fxg.
| | 03:22 | I'll come back to this file in a
moment, but first I'll show you how to do
| | 03:27 | exactly the same operation in Fireworks.
| | 03:31 | I'll go to Fireworks and I'll open the file.
| | 03:34 | I'll choose the File > Open.
| | 03:36 | I'll once again navigate to the 11_
Skinning/begin folder and I'll select and HERE
| | 03:42 | open the file hp_logo.AI.
| | 03:46 | When you open an Illustrator file
in Fireworks CS4, you are presented
| | 03:49 | with these options.
| | 03:51 | I'll click OK to accept all of the
default options and that opens the file.
| | 03:57 | Just as in Illustrator, the
vector graphic has a large canvas.
| | 04:02 | A canvas in Fireworks is
similar to an artboard in Illustrator.
| | 04:06 | And as in Illustrator, I'm going to
resize the canvas to match the dimensions
| | 04:11 | of the actual graphic.
| | 04:13 | I'll go to the menu and choose Modify >
Canvas > Fit Canvas, and that sizes the
| | 04:20 | canvas to exactly match the
dimensions of the graphic.
| | 04:23 | Now here is how you export
the fxg file from Fireworks.
| | 04:27 | I'll go the menu and
choose Commands > Export to fxg.
| | 04:31 | I'll once again export to the desktop,
and I'll click Select Desktop and
| | 04:38 | then set the file name.
| | 04:40 | Once again, I'll be using file
extension of .fxg, and I'll use a name of
| | 04:46 | HP_logo_fw.fxg, fw is for
Fireworks, and I'll click OK.
| | 04:56 | So, now I have two fxg files on my
desktop, the original one from Adobe
| | 05:01 | Illustrator and the new one from Fireworks.
| | 05:05 | Notice that there is also a
folder named HP_logo_fw.assets.
| | 05:10 | This assets folder is designed to
contain bitmap graphics that the vector
| | 05:14 | graphic is depended on.
| | 05:16 | In some cases you will see bitmap
graphics created in that folder that implement
| | 05:20 | various visual effects.
| | 05:22 | In fireworks, even if no bitmap
graphics are created, the assets folder is
| | 05:26 | created anyway, but you
will find that it's empty.
| | 05:30 | Now, the next step is to copy the
fxg file into your assets folder.
| | 05:34 | I am going to click on the
Illustrator version and on the Fireworks version
| | 05:39 | holding down the Ctrl key on Windows or
Command on Mac as I click and then I'll
| | 05:43 | copy these to the clipboard.
| | 05:46 | Then I'll go over to Flash Builder and
I'll place these files into my assets
| | 05:51 | folder, pasting the file into place.
| | 05:55 | Then I'll open each of the two files.
| | 05:58 | Here's the Illustrator version
and here's the Fireworks version.
| | 06:01 | I'll scroll down to the bottom of the
Illustrator version and show you that it's
| | 06:05 | about 260 lines long.
| | 06:08 | When Illustrator exports an fxg file,
it includes a lot of XML markup that's
| | 06:13 | exclusively for the use of Illustrator itself.
| | 06:16 | It's placed in an element named Private.
| | 06:19 | You'll see that the tags within the
Private section have a name space prefix of
| | 06:22 | AI for Adobe Illustrator.
| | 06:25 | That means that these tags are used by
Illustrator and won't be used by Flex 4.
| | 06:31 | The Fireworks version of the file much smaller.
| | 06:34 | I'll go to that file and scroll down to the
bottom and show you that it's only 184 lines.
| | 06:40 | That's because Fireworks does not
add private metadata to the file.
| | 06:45 | All other things being equal, the file
size of an fxg file will be significantly
| | 06:50 | smaller than the Illustrator version.
| | 06:52 | Now, in other tutorials of this
chapter, I am going to show you ways
| | 06:56 | of incorporating this fxg file as a
primitive vector graphic in your Flex application.
| | 07:02 | If you don't have access to the
graphic applications, Illustrator and
| | 07:06 | Fireworks, that's okay, because I've
included a finished version of this file
| | 07:11 | named H&P_logo.fxg.
| | 07:14 | This version of the file was exported
from Fireworks, so it represents the
| | 07:18 | smallest possible file.
| | 07:20 | Once you've learned how to export a
vector graphic from one of the Creative
| | 07:24 | Suite products, whether the format is
FXG 10.0 exported from Creative Suite 4
| | 07:30 | products, or FXG 2.0 exported from
Creative Suite 5, you'll be able to use these
| | 07:36 | fxg graphics in your Flex applications,
treating them as bitmap graphics, as
| | 07:41 | vector graphics, or as primitive
ActionScript vector graphic classes, and I'll
| | 07:47 | show you how to do that in other videos.
| | Collapse this transcript |
| Using FXG files in Flex applications| 00:00 | Once you've exported vector graphics
in the FXG format from Illustrator,
| | 00:05 | Fireworks or Photoshop, you can
incorporate them into your Flex applications as
| | 00:10 | ActionScript classes.
| | 00:12 | I'll show you how to do this in the
application named AppWithLogo.MXML.
| | 00:17 | In the application's beginning state,
it uses a BitmapImage control to embed a
| | 00:22 | PNG file named logo.png.
| | 00:25 | I'll run the application in the
browser and show you its current
| | 00:29 | visual presentation.
| | 00:32 | The PNG file is a bitmap graphic and
it's been scaled, using the height and
| | 00:37 | width properties of the BitmapGraphic class.
| | 00:40 | Notice that the graphic
pixelates showing stairstep artifacts.
| | 00:45 | This is something that will happen
whenever you scale a Bitmap Graphic such as a
| | 00:49 | PNG, JPEG or GIF file.
| | 00:53 | The advantage of using FXG graphics is
that number one, they're very lightweight.
| | 00:58 | They don't take up as much space on
disk or in memory, and number two,
| | 01:03 | they are highly scalable.
| | 01:04 | If you shrink or grow them, they'll
scale elegantly because vector graphics'
| | 01:09 | sizing is calculated
mathematically rather than as a series of bits.
| | 01:15 | So I'll return to the code, and I am
going to remove the BitmapImage control.
| | 01:22 | I'll select it and just comment it out
selecting, Source > Toggle Block Comment,
| | 01:28 | then I'll place the cursor
after that commented code.
| | 01:31 | You can declare an instance of an FXG
graphic using either MXML or ActionScript,
| | 01:37 | but it's typically done within
MXML and I'll show you that approach.
| | 01:41 | The name of the file I'll be
working with is HandPLogo.fxg.
| | 01:46 | Just as within MXML or ActionScript
file, I'm going to treat that as a class name,
| | 01:51 | ignoring the .FXG extension
and addressing the class just by the
| | 01:55 | beginning of the file name.
| | 01:57 | I'll type in a less than character and
then the beginning of the file name, h-a-n-d.
| | 02:04 | The file is displayed in the Code
Assist list as an ActionScript class.
| | 02:09 | I'll select it and Flash
Builder auto completes the tag name.
| | 02:14 | At the same time, it adds the required
namespace prefix in the beginning tag
| | 02:19 | of the application.
| | 02:20 | The namespace prefix pattern matches
exactly the same approach he used with MXML
| | 02:25 | and ActionScript files.
| | 02:27 | Flash Builder generates the custom XML
namespace to match the folder or package name.
| | 02:34 | Now I'll assign the Logo object, an
explicit width and height, I'll set its
| | 02:39 | width to 180 pixels and its height to 111.
| | 02:44 | You can also look at the graphic in Design
Mode and grab the handle and size it manually.
| | 02:51 | Now I'll look at the application in
Design Mode and you'll see that the scaled
| | 02:54 | graphic is displayed very cleanly,
nested within the border container.
| | 03:01 | I'll save and run the application,
and now the FXG file is incorporated into
| | 03:06 | the Flex application.
| | 03:08 | With both MXML graphics and FXG files,
you can declare these in a Library at the
| | 03:15 | top of an MXML document, and then
refer to the graphic as a reusable class.
| | 03:20 | So this is the simplest approach to
using FXG files in your Flex applications.
| | 03:25 | Treat them as ActionScript classes.
Take a look at the documentation for more
| | 03:30 | information about incorporating FXG
graphics, including how to instantiate and
| | 03:35 | add them to Flex 4 Containers,
using pure ActionScript code.
| | Collapse this transcript |
| Creating a custom application skin | 00:00 | The Flex 4 SDKs new Spark component
architecture supports the creation and
| | 00:06 | binding of custom skins to both
Spark containers and controls.
| | 00:11 | You define these skins using
an MXML code as MXML components.
| | 00:16 | The SkinClasses are sub-classed from a
class called Skin, and you create them as
| | 00:21 | their own separate MXML files and then
bind them to component instances using
| | 00:26 | the SkinClass style.
| | 00:27 | I'll show you how to create a new
custom skin for a Flex application using this
| | 00:32 | application, AppWithCustomSkin.mxml.
| | 00:35 | In the applications beginning state,
it uses a backgroundColor attribute and
| | 00:39 | then a combination of a BorderContainer,
FXG file and a BitmapImage to create
| | 00:44 | the appearance of the application.
| | 00:46 | Here is the application in its beginning state.
| | 00:50 | Now I'm going to replace all of this
visual presentation with the custom skin
| | 00:54 | and the only piece that I'm going to
reuse is the FXP graphic. Everything else
| | 00:58 | will be in the skin itself.
| | 01:00 | I'll go back to the application
and look at it in Design Mode.
| | 01:04 | The easiest way to get started creating
a custom skin is to create a copy of the
| | 01:09 | default skin for the current component.
| | 01:12 | You do this from Design Mode.
| | 01:14 | Go to Design Mode and right-click
anywhere on the surface of the application,
| | 01:18 | then choose Create Skin.
| | 01:21 | In the dialog that appears, first
indicate where you want to create your new
| | 01:25 | custom skin component.
| | 01:27 | I typically created in a package named
Skins, then assign your new component a name.
| | 01:33 | I'd name it CustomAppSkin.
| | 01:36 | This dialog box also asks
you what the HostComponent is.
| | 01:39 | That is, which component will use the
new custom skin and it will default to the
| | 01:43 | component that you right clicked on in
Design Mode and it also asks you which
| | 01:48 | existing skin you want to copy, if any.
It defaults to the default skin for the
| | 01:53 | component you right clicked on.
| | 01:55 | In this case spark.skins.
| | 01:57 | spark.ApplicationSkin.
| | 02:00 | The final option allows you to
remove ActionScript styling code.
| | 02:03 | This is ActionScript code that's
automatically added to some skins that allows
| | 02:08 | you to pass certain styles in from the
HostComponent and those styles are then
| | 02:12 | used in the skin component.
| | 02:14 | I'll keep the styling code in initially,
so I can show you what it looks like,
| | 02:18 | and I'll click Finish to
create my new custom skin.
| | 02:21 | The custom skin initially opens in
Design Mode. I'll click Source Mode and
| | 02:26 | review some of the code.
| | 02:28 | The skin begins with an XML declaration
at the top, and then the root element is
| | 02:33 | declared as an instance of the SkinClass.
| | 02:36 | After the Skin start tag, there is
a metadata tag named HostComponent.
| | 02:40 | The HostComponent metadata tag
references the complete qualified name and
| | 02:45 | location of the component
that will use this skin.
| | 02:48 | You declared the HostComponent
attribute, so you can refer to the instance of
| | 02:52 | the HostComponent using a variable
named HostComponent with a lowercase h.
| | 02:57 | The next section is a Script tag.
This is the styling code that was referred
| | 03:01 | to in the dialog box.
| | 03:02 | The code for the application component
skin allows you to pass in the background
| | 03:07 | color style from the HostComponent.
That style is then applied to a Rect class
| | 03:12 | with an ID of bgRectFill.
| | 03:14 | That vector graphic is declared down here.
| | 03:17 | It defaults to a color of white but if
you pass the background style in from
| | 03:21 | the HostComponent using MXML code,
that value is overwritten with this
| | 03:26 | ActionScript code here.
| | 03:28 | Now if you want to keep things simple in a
custom skin, you can just delete the styling code.
| | 03:33 | It will mean that you can no longer pass
in the style from the HostComponent and
| | 03:37 | then whatever style you set in the
skin will always be the right color.
| | 03:41 | So I'll select that Script section and
delete it and then I'll go down to the
| | 03:46 | backgroundRect setting and I'll set
its color to the same color that I was
| | 03:49 | passing in from the application, #1E5C75.
| | 03:54 | I'll then go back to the application
that's using the custom skin and look at
| | 03:58 | it in Source Mode and I'll remove the
backgroundColor from the application.
| | 04:03 | Notice that the skinClass style has
been set to the fully qualified name and
| | 04:07 | location of the custom skin.
| | 04:09 | I'll now save all my changes and
run the application in the browser and
| | 04:13 | you'll see that the background color is still
there, this time implemented by the custom skin.
| | 04:19 | Now I'll make some more changes.
| | 04:21 | I'm going to eliminate the presentation
of all these graphics in the application
| | 04:24 | itself and I am simply going to put in
a label with a text property of My Store.
| | 04:30 | I'll set the fontSize to 18 pixels
the fontWeight to bold and the fontStyle
| | 04:37 | to italic.
| | 04:41 | Now by default this label control will be
placed in the top-left corner of the application.
| | 04:47 | When I look at the application in
Design Mode now here's the label.
| | 04:51 | I'm going to use the custom skin
both to add graphical elements to the
| | 04:55 | presentation but also to add code
that places that label in a particular
| | 05:00 | location on the screen.
| | 05:02 | I'll go back to Source Mode
and then back to the skin itself.
| | 05:05 | Now I'm going to add some
vector graphics to the skin.
| | 05:09 | I'd like to create a nested vector
graphic that has BevelFiltered edges and
| | 05:13 | rounded corners and is used as the
nested area in which any content is
| | 05:17 | presented in the application.
| | 05:19 | After the rectangle that implements the
background color, the next group expands
| | 05:24 | to take up the entire space of the
application because of its constraint
| | 05:28 | properties of left, right, top and
bottom being set to zero, and it has a
| | 05:32 | VerticalLayout object as its layout property.
| | 05:34 | The first item within this group is the
application control bar represented by this group.
| | 05:40 | Notice that this group has an includeIn
attribute, which is set to only two view states.
| | 05:45 | nrmalWithControlBar and
disabledWithControlBar. If you look in the code
| | 05:49 | for the application component, you'll
see where that view state is set based on
| | 05:54 | whether the application
implements a control bar or not.
| | 05:57 | I'm going to move down past that group
because I want to keep the possibility of
| | 06:01 | a control bar in the application and
down here at line 103, I'll find a group
| | 06:07 | with an ID of ContentGroup. This is
a critical group element in the skin.
| | 06:12 | It's called a required skin part.
| | 06:15 | At runtime as the application starts up,
it looks for this group, which is a
| | 06:19 | part of the application skin, and any
MXML objects that are declared in the
| | 06:24 | application file are passed
into this group container.
| | 06:27 | So if you want to modify the layout and
placement of objects that are declared
| | 06:32 | in MXML from the application,
you modify the properties of this group.
| | 06:37 | I'm going to change it from a Group to
VGroup. That will mean that objects are
| | 06:42 | stacked vertically within the application.
| | 06:45 | I can now add the horizontalAlign
property and set it to a value of Center and
| | 06:50 | the result will be that any objects
declared in MXML in the application are now
| | 06:55 | going to be aligned in the center of the VGroup.
| | 06:58 | I'll save the changes of the skin and
then come back to the application and look
| | 07:02 | at it in Design Mode and now that
label is centered on the screen.
| | 07:06 | Notice that I didn't make any changes to
the application itself to make that happen.
| | 07:11 | Now I'm going to make the application
a little more interesting to look at.
| | 07:15 | I am going to wrap the VGroup, which is
the contentGroup, inside another group.
| | 07:20 | I'll give this group a height and width
of 100%, so that it expands to fill the
| | 07:25 | entire available space in the application, and
I'll move the contentGroup inside that group.
| | 07:33 | Then within the group, I'll add a
vector graphic, a rectangle that will be laid
| | 07:38 | behind the contentGroup.
| | 07:39 | I will declare a rect object and I'll
assign it to constraint properties of the
| | 07:46 | top, bottom, right and left,
setting them all to values of 10 pixels.
| | 07:53 | I'll add a fill property to the
rectangle and set it to an instance of the
| | 07:57 | LinearGradient class.
| | 08:00 | The LinearGradient will have an
entries property with two colors.
| | 08:05 | The first GradientEntry will have a color
of #1E5C75, one of the standard colors I've
| | 08:12 | been using in my application, and the second
GradientEntry will have a color of 6DB6C6.
| | 08:21 | I'm going to add some
more effects to my rectangle.
| | 08:23 | I am going to add a set of filters, a
BevelFilter and a BlurFilter, and the
| | 08:28 | result will be creating a nice
border around this nested region.
| | 08:33 | I'll create a Filters property and
within the Filters property, I'll add an
| | 08:37 | instance of the BlurFilter class
and an instance of the BevelFilter.
| | 08:42 | Each of these classes has specific
properties that you can set to customize
| | 08:46 | the appearance, but I'll use the
BlurFilter and BevelFilter using their
| | 08:49 | default properties.
| | 08:51 | Now after that rectangle I am
going to add the Logo again.
| | 08:55 | The Logo was originally presented from
the application file and now it's going to
| | 08:59 | become a part of the skin.
| | 09:01 | I'll create an instance
of the HandPLogo FXP file.
| | 09:06 | I'll give it an explicit width of 180
pixels and an explicit height of 111 and
| | 09:12 | then I'll set both its left and
top properties to 20 pixels each.
| | 09:17 | Finally, I will set the VGroup's top property
to a value of 100 and its gap to a value of 20.
| | 09:24 | The top property will cause the first
object in the VGroup or the contentGroup
| | 09:29 | to appear 100 pixels below the top of
its container, the group its nested in,
| | 09:34 | and the gap will dictate how many pixels are
between each object with in the contentGroup.
| | 09:40 | My custom skin is now complete.
| | 09:43 | I'll go back and review
a couple of its elements.
| | 09:45 | This group now wraps around this vector
graphic, which creates the nested visual
| | 09:50 | region, this FXP file, which is placed
20 pixels from the left and top of its
| | 09:55 | container, and the contentGroup, which
is where the MXML content declared in the
| | 10:00 | application itself will be placed.
| | 10:03 | I'll save the changes to the application
skin, I'll come back to the application
| | 10:07 | itself, save those changes and then
I'll run the application, and here's my
| | 10:11 | customized application with a custom skin.
| | 10:14 | The label is placed 100 pixels from the
top of its container because of the top
| | 10:19 | property of the contentGroup.
| | 10:22 | The FXG logo is placed 20 pixels from
the left and top of its container and the
| | 10:27 | BevelFilter and BlurFilter give
this rectangle its unique look.
| | 10:32 | Finally if you add control bar content
to the application, the control bar will
| | 10:36 | appear above the rectangle.
| | 10:38 | This is now a completely separate
skin component, which can be used in this
| | 10:42 | application and many others.
| | 10:44 | The idea of this separation of the
skin from the implementation of an
| | 10:49 | application or component is that it
gives you the ability to easily incorporate
| | 10:54 | vector graphics in the form of MXML
graphics and FXG graphics and also to
| | 11:00 | incorporate bitmap graphics if you need them.
| | 11:02 | Any visual objects that you place in
the application file in MXML will now be
| | 11:07 | presented in the context of the custom
skin and the custom skin can be reused on
| | 11:12 | this and other applications.
| | Collapse this transcript |
| Using custom component skins| 00:00 | Just as with Flex 4 application
components you can also provide custom skins
| | 00:05 | to any Flex-based component that's
extended from the component named
| | 00:10 | SkinnableComponent.
| | 00:11 | These include buttons, checkboxes, panels,
and all other sorts of containers and controls.
| | 00:17 | In this exercise, I will show you how to
create a custom skin for the button control.
| | 00:21 | I will start by following the same
workflow as I did with the application,
| | 00:25 | creating a copy of the default skin for
the Spark button control, and then I'll
| | 00:30 | show you some ways of customizing it.
| | 00:31 | I work with this application,
UseCustomButtonSkin.mxml.
| | 00:36 | It already uses a custom skin for the
application itself and if you look at it
| | 00:40 | in Design Mode you will see that it
incorporates some vector graphics that are
| | 00:44 | implemented with MXML and with FXG.
| | 00:47 | There's also a button in the
application with the label of Click me.
| | 00:51 | I am going to right click on the
button control and select Create Skin.
| | 00:55 | Just as with the application skin,
I am presented with this dialog box.
| | 00:59 | I will set the Package to skins
and then I'll give this file and name
| | 01:03 | of CustomButtonSkin.
| | 01:05 | The HostComponent is set
to spark.components.Button.
| | 01:09 | That's the fully qualified name and
location of the button component in the Flex
| | 01:13 | SDK and the skin is set
to the default skin name.
| | 01:16 | I will click Finish and that
result in creating a file named
| | 01:20 | CustomButtonSkin.mxml and if I go
back to the application and look at it in
| | 01:25 | Source Mode, I will see that the
button component that I right clicked on now
| | 01:29 | have to skin class set to the fully
qualified name of my new custom skin.
| | 01:35 | Now I'll go back to the new custom
skin and look at it in Source Mode.
| | 01:40 | Each time you declare a custom skin
you will see this metadata tag, HostComponent,
| | 01:45 | which references the fully qualified
name of the component that uses the skin.
| | 01:50 | The purpose of the metadata tag is to
allow Flex to populate a variable named
| | 01:55 | host component, with a reference to
HostComponent that's using the skin.
| | 01:59 | Scroll all the way down toward the
bottom of the skin and you'll see a label
| | 02:03 | control with an ID of label display.
| | 02:06 | This label implements a skin part
that's defined by the button control.
| | 02:11 | At runtime the value that you pass into the
Label property of the button is directly
| | 02:15 | passed to this Label control because
its ID matches the required ID of the
| | 02:21 | labelDisplay's skin part.
| | 02:23 | You can find information about the skin
parts in the API documentation for the
| | 02:28 | host component, in this case the Button control.
| | 02:30 | Here is another
interesting aspect of the skin file.
| | 02:34 | You will find that each custom skin
file declares a set of states. These are
| | 02:38 | called skins States. If you look at the
API documentation for the Button control
| | 02:43 | you will see that these four
states are defined as required.
| | 02:47 | When the user interacts with the button
by moving their cursor over the button
| | 02:51 | clicking down, releasing, or when the
button is disabled, Flex sets the current
| | 02:56 | state of the Skin component
automatically and you can write your vector graphic
| | 03:01 | code to take advantage of this.
| | 03:03 | So for example, if you look at the
various vector graphics, you'll see in many
| | 03:07 | cases that the colors are
different for the different states.
| | 03:11 | Here is a LinearGradient that has
different colors for the default state and
| | 03:15 | for the over and down states and
here's a set of gradient entries where the
| | 03:19 | alphas are different for the different states.
| | 03:22 | And here's an example of a complete
graphic that's either shown or hidden
| | 03:26 | depending on the state.
| | 03:27 | I will scroll over and show that it
has an includedIn attribute of down.
| | 03:31 | So that means that that graphic only
appears when the user has their mouse
| | 03:35 | button pressed down with
the cursor over the component.
| | 03:39 | Now to make this go a little bit faster,
I've already created an alternative
| | 03:43 | custom skin for the button control.
| | 03:45 | I will open it now.
| | 03:47 | It's in the Skins folder of the Project
that's included with the Exercise Files
| | 03:51 | and its name is EllipticalButtonSkin.
| | 03:54 | Notice that this version of the skin
has had all the comments removed, but it
| | 03:58 | still has the HostComponent attribute
and in this skin all of the rectangles
| | 04:03 | have been replaced with Ellipses.
| | 04:05 | The Ellipses implement the same set of
colors as the original skin, but now the
| | 04:10 | button will appear as an ellipse
instead of a rectangle. I will go back to the
| | 04:14 | application and I will
modify the code as follows.
| | 04:17 | I will go to the skinClass attribute
that was added automatically when I
| | 04:20 | generated the copy of the skin and I'll
delete all of the code within the quotes
| | 04:25 | and then press Ctrl+Space to
bring up the Code Assist list.
| | 04:28 | I will start typing e-l until I get to the
EllipticalButtonSkin class and I will select it.
| | 04:34 | Flash Builder automatically adds an
import statement for the skinClass and also
| | 04:39 | since the skinClass style using
the fully qualified skinClass name.
| | 04:44 | I will save and run the application and
you'll see that the application's button
| | 04:49 | is now presented not with the original
rectangular button but with the newly
| | 04:53 | skinned elliptical button.
| | 04:55 | Once again as with the application you
can incorporate either vector graphics
| | 04:59 | declared in MXML, FXG graphics
exported from Photoshop, Illustrator or
| | 05:04 | Fireworks, or bitmap graphics that
you embed into the application with the
| | 05:09 | BitmapGraphic class.
| | 05:11 | Regardless of how you style your
components, the new Spark component skin
| | 05:15 | architecture gives you the ability
to separate the implementation of the
| | 05:19 | component from its visual presentation.
| | Collapse this transcript |
| Assigning skins to multiple components| 00:00 | When you create custom skins using the
new Spark component architecture in Flex 4,
| | 00:05 | you can assign the skins to
components using the skinClass style.
| | 00:09 | So far, I've shown you in other videos
how to assign the skin to one instance
| | 00:13 | of a component at a time, but using
style declarations, you can assign skins
| | 00:19 | more globally throughout the application.
| | 00:21 | I'll show you how to do this in the
application file MultipleButtons.mxml.
| | 00:26 | I'll start in Design Mode showing
you that only the first button in this
| | 00:30 | application has a custom skin, the
EllipticalButtonSkin, and if you wanted to
| | 00:34 | assign the skin to all of the buttons, right
now you'd have to assign it one at a time.
| | 00:39 | But I'm going to instead use a
cascading style sheet declaration to assign the
| | 00:44 | skin to all buttons
throughout the entire application.
| | 00:47 | I'll place the cursor after the
Declarations section of the application and I'll
| | 00:52 | create a Style tag set.
| | 00:54 | When I create the Style tag set,
Flash Builder automatically adds the spark
| | 00:58 | and the mx namespaces.
| | 01:01 | Now I'm only going to assign the
skin to the Spark versions of buttons.
| | 01:05 | I'll type in the name of the component
and then press Ctrl+Space and I'll make
| | 01:11 | sure I choose the Button selector
that starts with s rather than mx.
| | 01:15 | Then I'll create a pair of braces.
| | 01:19 | Now I'll assign the skin class style
using the skin-class property name.
| | 01:24 | I'll type in Skin and press Ctrl+Space and
Flash Builder automatically completes the
| | 01:29 | style name, using the
hyphenated naming convention.
| | 01:32 | Then I'll put in the colon.
| | 01:34 | Next I'll declare a compiler
directive named ClassReference.
| | 01:39 | It looks like this.
| | 01:40 | It looks like a function. You put in
a pair of parentheses and then within
| | 01:44 | the parentheses, you type in the fully
qualified name of the skin class you want to use.
| | 01:49 | I already have that skin class
referenced in this code, in the Button control.
| | 01:54 | So I'll select it and copy it to the
clipboard, and then I'll paste it into
| | 01:59 | place in the ClassReference compiler directive.
| | 02:02 | Then I'll close the name of the class,
close the directive and complete the
| | 02:06 | style selector with a semicolon.
| | 02:09 | This skin class style is now applied
to all instances of the Button control
| | 02:13 | throughout the application and you
can use any other cascading style sheet
| | 02:17 | selectors as you like, including
comma delimited lists of type selectors,
| | 02:22 | style name selectors, descendent
selectors, or any other style syntax that
| | 02:27 | you're familiar with.
| | 02:28 | I now no longer need the
skinClass attribute in that first Button.
| | 02:32 | It's going to get its
skin class from the CSS selector.
| | 02:35 | I'll look at the application in
Design Mode and show you that now all four
| | 02:39 | Buttons in the application
are using the same skin class.
| | 02:43 | So the skin-class setting is nothing
more than a cascading style sheet's style
| | 02:48 | setting. You can set it as an in-line
style as was done automatically when you
| | 02:53 | generated a copy of the skin or if you
want to apply the skin more globally,
| | 02:57 | use the CSS selector, either in an embedded
style sheet as I've done here or in an
| | 03:02 | external style sheet that's
linked into your application.
| | Collapse this transcript |
| Loading skins at runtime| 00:00 | You apply custom skins to Spark-
based components such as the application
| | 00:04 |
|
|
