Flash Catalyst Tutorial: Weather Widget, Part 4

Latest files:
www.erikloehfelm.com/catalyst_tutorial/weatherWidget_4.fxp.zip

In Part 4 of our Adobe Flash Catalyst Tutorial, we'll add some data to the project so that our application can represent a real data set. We wont actually be connecting to an data service for the weather, but you can see how the data would be structured to do so.

We'll be focusing on two things in Gumbo: creating a 'model' for our data, applying and binding the information in our model to our interface elements.

We're using a very loose implementation of a design pattern in our example application called the "model, view, controller" pattern or simply MVC. You may have heard of this in regards to RIA (Rich Internet Application) development before. What this means in simple terms is that we will be separating our code into sections that represent the model (data), view (interface stuff) and controller (event handlers, functions, logic, etc). By breaking the code up into these groups and having the groups or 'packages' organized, we will be creating a structure that allows us to easily edit elements without disturbing or breaking pieces that work - ie. changing interface elements without affecting the functions behind them.

Here are the steps I've taken to get to the latest version of the project.

In Adobe Flex 'Gumbo':

• Import the .fxp project
• Go to File > New > ActionScript Class
  
  
  
  Uploaded with plasq's Skitch!


• fill in the appropriate information into the form

You should now have a new class document named 'WeatherDataModel'. We'll be creating a singleton - a class that has one and only one instance - for this class. We do this so that we have one point of contact for our data in the application.


The function 'getInstance()' allows us to access this class from anywhere in our application by stating:

WeatherDataModel.getInstance();

Nice! Next we'll add an actual data set to use. We'll define an XML document as our data source, but you could easily adjust this to any data type you'd like.


Now we have a data model with actual data in it. Lets move on to binding this data to our view. Open the cityComponent.mxml file. We are going to add some code to the Script tag:


Notice how simple it is to reference the model now! We bind the model's data to our visual elements toward the bottom of the page. Move down the file until you see the code for the TextGraphics in the 'current' Group. We'll adjust the parameters to the following:


When we use the curly braces in a parameter like this:

text="{ model.cityData.city[model.currentCity].name }"

we are binding the information to this view. If the information changes, the view updates. In this case, we defined 'model' as our WeatherDataModel. model.cityData points to the XML that we've defined in the model and then we traverse the XML tree to get the value we'd like to display.

Now we need to display the day and the hi and low for each day in our list below the current weather. Move down a few rows in the cityComponent.mxml document to the list of 7 component:dayComponent nodes. These represent the 7 day forecast list. We'll adjust that code to the following:


We've just bound each of the dayComponents to the same data model! If you save all your files and test the application, you should now see something like this:

Uploaded with plasq's Skitch!

Our application now has 'real' data bound to the interface elements. Stay tuned for more Adobe Flex Catalyst and Flex Gumbo goodness!

CSS Body Typography Samples

I just stumbled upon a nice example of some body copy styles applied in CSS:

http://jontangerine.com/silo/typography/p/

It's interesting to see the subtle changes in readability that leading and alignment can make to a block of text. Makes me think back to my days in editorial design and how things seemed to be simpler back then :)

This was a bit of new information to me:

p + p {
text-indent: 1em;
}

The use of the 'p + p' to define a style. I hadn't used that before but will now that I know it's usage and availability! Check out the drop cap example at the bottom... sweet! Too bad that IE doesn't support it very well. What a surprise.

Flash Catalyst Tutorial: Weather Widget, Part 3

Download the file for this part here:
weatherWidget_3.fxp
weather1.ai
Previous tutorial posts:
Part 2
Part 1

Skinning

In this part of our project, I will begin to skin the widget with a graphical treatment similar to the Apple iPhone application. We'll be designing our skin in Adobe Illustrator due to the supported round trip features in the beta release. Normally, I would design these type of skins in Fireworks - I'm more familiar with the drawing and creation tools in Fireworks.

In Illustrator

1. create a new document in Illustrator


2. draw a black background box on the stage 250px wide x 400px tall to match the size of our widget


3. draw a rounded rectangle that is slightly smaller than the background box with a dark blue color and a heavy light colored border


4. name this layer with an appropriate name - blueBack


5. copy blueBack layer and paste. change the color to a grey color for the background and for the lighter rule. this background will be for the 'back' of our widget


6. name this layer - greyBack


7. create 7 rectangles 230px wide x 30px tall for the background color of each of the days in the list


8. alternate the color of the seven rectangles to represent an alternating list of items


9. name these rectangles row1-row7


10. create a small white circle in the lower right corner of the interface for the 'flip button'


11. place the text 'i' on the white circle to represent 'info'


12. group the white circle and the 'i' and call the group infoButton


13. save your work

Uploaded with plasq's Skitch!

Rather than starting from scratch with an import of our Illustrator document, we'll be copying and pasting our design elements into our current work in the Catalyst document.

In Illustrator

1. select the blueBack and row1-row7 layers


2. copy these layers


3. switch to Flash Catalyst

In Flash Catalyst

1. click on the direct select tool - the white arrow


2. double click on the cityComponent to edit it in place - you should see the grey chevrons around the component and see the crumb trail in the upper left and see cityComponent as the right most item


3. paste the copied Illustrator items in the cityComponent


4. to make the items easy to move, group them and name the group graphics


5. move the graphics layer to the bottom of the list in the component's layers


6. adjust the position to your liking

Uploaded with plasq's Skitch!

At this point, you should see the background image in place with the day components laying in place over the rectangles for the alternating days. You might need to adjust the position of those layers to space them evenly. You can do that either in Illustrator or in Catalyst. Next we'll define our info button graphics.

In Flash Catalyst

1. select the direct select tool - white arrow


2. double click on the round button in the lower right of the interface


3. in the HUD click on the 'edit button appearance' 'up' button. this will open up the four states for the button component and list the button in the crumb trail


4. briefly switch to Illustrator and copy the infoButton graphics group


5. switch back to Catalyst and paste the graphics into the 'up' state for the button


6. paste the graphics in each of the button states or select the small colored box in the layers palette for each of the states to copy them over


7. change the colors of the background layers for each of the states by selecting the state and selecting the background layer. change it's color with the HUD

Uploaded with plasq's Skitch!

To make the rounded rectangle background stand out a bit more, we'll add a black background to the component in both states. You can either draw this layer and put it to the lowest layer in Catalyst, or draw it in Illustrator and copy and paste it like the steps above.

For the second state - chooseCity - we'll want to have a background with a rounded rectangle that has a bit of a different color to it to make the transition from the front to the back more dynamic. We created a greyBack layer in Illustrator so copy and paste that layer to the back of the choose city state. It should be placed to the bottom of the cityListGroup in Layer 1 in the layers palette.

If you test the application you'll see the blue background in place with the button graphics. Click on the button to see the transition we've previously built with the 'backside' color applied.