Non Gamstop CasinosNon Uk Casino SitesBest Non Gamstop CasinosNon Gamstop Uk SitesCasinos Not On Gamstop

The easiest way for you to start with Flash Builder is to follow some of the excellent videos and examples that Adobe themselves have produced. They have a page called "Learn Flex in a Week" that is fantastic. It has videos, zip files to start you off, solutions and explanations. So, these pages are based on that tutorial except what I'm going to do is tell you which exercises to follow and add a bit more explanation. Then we'll follow that up with a new task that will require you to put all you've learned into practice.

Although it's called learn Flex in a Week I'm thinking, since you can't dedicate more than 8 hours a week to it that it'll take you four weeks to finish pages 1 to 4. You're going to need to carry on with the work outside of the timetabled workshop time, of course.

In fact, let me reiterate that since it's very important: You must must work outside of class and finish pages 1 to 4 in four weeks.

So, what you see below is my cut down version of Adobe's Flex in a Week that only incorporates the sections you need to follow for this module. Pages 5 and 6 are extras that you can do if you want to, they're largely to do with visual extras.

Cut down Flex in a Week

Watch the videos, indicated by the icon;
then do the exercises indicated by the icon.

You should do all of these before the timetabled workshop so that you can do the independent task at the end of this page during the workshop with the lecturer.

Section 1: Flex basics

Setting up Flash Builder

This set of videos and the worksheet won't take you long, an hour at the most, the videos will explain the basics of using Flash Builder and compiling and running an application. The worksheet will simply get you to download and import the Section one exercises and thus you'll learn how to switch workspaces and import projects and start a new project. You'll need to know this in order to be able to start the real work of creating an application, which you'll do in the next part when you start building a data-driven Flex application.

  • Using Flash Builder (19:22)
  • Compiling and viewing the application (13:31)

When you've watched the two videos above, click on the link below to download the files you'll need to do the exercises yourself.

  • Setting up Flash Builder and your project files

Building a data-driven Flex application

This topic will take you about an hour and a half and will explain some important basic concepts and then start you off creating and laying out a form and displaying XML data in it.

  • Understanding namespaces (9:40) This video on namespaces will cover the following topics:
    • Understanding the XML declartion
    • Introducing the Flex namespaces
    • Introducing the Flex class libraries
    • Accessing custom namespaces
  • Introducing Flex components and controls (20:47) This video on Flex components covers:
    • Introducing Flex UI components
    • Differentiating Spark and MX components
    • Understanding Flex 3 and Flex 4 differences
  • Laying out a form in Design mode (11:56) covering:
    • Adding and configuring controls in design mode
  • Introducing styling and skinning (8:09) Covering topics to help you make your application look nicer:
    • Applying application styles using CSS
    • Skinning the application
    • Using the Theme Browser
  • Creating a user interface
  • Understanding data binding (6:16) Introducing the really important topic of data binding.
  • Generating an email address using data binding
  • Requesting and retrieving XML data from the server (10:58) This screencast explains how to incorporate data from the server in your applications, it covers:
    • Retrieving XML data
    • Network Monitor (won't work with the version we have in the labs)
    • Binding to return data
  • Adding data to your application

Organizing visual elements and code

  • Laying out components in containers (15:18) This video introduces:
    • Introducing Spark layout classes
    • Introducing the Spark container class
  • Adding scrollbars (3:26)
  • Experimenting with container layouts
  • Implementing OOP concepts in Flex (30:14) An extremely important video covering:
    • Introducing OOP terminology
    • Understanding MXML classes
    • Creating custom components
    • Creating a class property
  • Creating MXML custom components with ActionScript properties

Independent Task

Example Flash
an example of what your finished app might look like.
Click to load a working version

This task you can do in class if you want having first followed the videos and exercises above in your own time. It will involve linking to and displaying, using the same techniques learned in the videos, information from an xml file showing xml rss feeds.

  1. Create a new project called xmlrss-feed1 and name the Main application file: xmlrssFeed1.mxml
  2. Create a form to display the following components:
    • a title of 'XML RSS Feed One'
    • a drop down list box that will display the title field of each feed
    • a text component to display the category field
    • a text area component to display the description field
  3. Add a call to an HTTPService when your Flash application finishes loading to retrieve the uri https://www.numyspace.co.uk/~unn_isrd1/xml-com/feeds.xml
  4. Use appropriate databindings so that you display the title field from the xml in the drop down list and the description and category fields in the text controls you've chosen.
  5. Add or use appropriate styling and skinning to make your application look good.

Challenge Task

  1. Try adding an image to the right of the application that displays the image from the feeds.xml file. It'll mean you have to find the xml 'address' of the element, and set the source property of the image component to point to the HTTPService id followed by the path to the image in the xml (remember the lastResult property of the HTTPService will be needed, just like you did for the list box).

Resources

Tour De Flex
(please right mouse click and open in a new window) which the Introducing "Flex components and controls" video demonstrates. With it you can explore the various components that Flash Builder has together with code examples to create them. Have a quick browse of Flex 4 Components.

Quality sites