Archive for October, 2007

Component Class – Part Four

In the previous article in this series you saw how the Arrow part of the CycleSelectButton was created. In this article we’ll write the CycleSelectButton from scratch by extending UIComponent. Watch how similar this component’s construction is to the V2 and Arrows components.

Start by creating a new ActionScript class and call it
CycleSelectButtonV3 . Have it extend
UIComponent :

public class CycleSelectButtonV3 extends UIComponent
{
/**
* constructor function
*
* This is a good place to set inital styles
*/
public function CycleSelectButtonV3()
{
super();
}

To make this simple for you – and to drive home the point of how similar things are – copy the following items from the V2 component into this V3 component:

  • The
    [Event] metadata;
  • the linkButton and arrows variable definitions (be sure to copy the import statements, too);
  • the
    createChildren() function;
  • The
    dataProvider property set and get functions;
  • The
    selectedIndex property set and get functions;
  • The
    commitProperties() function;
  • The
    handleClick() event handler function.

So what’s left? I’m not sure all of that will compile, but give it a try and if it does, put it into a Flex application and test it out. Not quite right, huh?

Download file

This zip file contains the source for this component and a sample application.

The V2 version of this component extends HBox which does a couple of things for you: it handles the placement or layout of the component. By using HBox you don’t have to worry about how big things are and where they go. HBox always measures each child and sticks one after the other.

Since this V3 component extends UIComponent you don’t have any of that help. You have to implement a couple of the Flex framework functions to make the component behave correctly.

measure()

Look back at the Arrows component and you’ll see two things that are missing from this V3 component: the
measure() and
updateDisplayList() functions. Measure() is important because the Flex framework needs to know how big the component is in order to position it within a container. The updateDisplayList() function is important to position the arrows and linkButton – something HBox did for you.

		override protected function measure() : void
{
super.measure();

measuredWidth = arrows.getExplicitOrMeasuredWidth() + linkButton.getExplicitOrMeasuredWidth();
measuredHeight= Math.max( arrows.getExplicitOrMeasuredHeight(), linkButton.getExplicitOrMeasuredHeight() );
}

The measure() function must set the
measuredWidth and
measuredHeight properties. Since the component’s design is to be horizontal with the arrows followed by the linkButton, the width is then the sum of each child’s width. The height is the largest of the two.

If your component is also given an explicit width and height, then this measure() method will not be called.

Noticed the call to
getExplicitOrMeasuredWidth (and
getExplicitOrMeasuredHeight ). Since the arrows child has been given a size of 20×20, these functions return the explicit size of 20. The linkButton however, was not given a size, so it has to be measured.

updateDisplayList()

Once the child components have been measured and an overall size for the component has been determined, the Flex framework calls the updateDisplayList() function.

Just as with the Arrows component, updateDisplayList’s purpose is to position and size the child components to make this component look the way it is supposed to look.

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList( unscaledWidth, unscaledHeight );

arrows.move(0,0);
linkButton.move(arrows.width,0);
linkButton.setActualSize(unscaledWidth-arrows.width,unscaledHeight);
}

The arrows are moved to the (0,0) position. Then the linkButton is positioned immediately after it. The linkButton is also given a size. Here, unscaledWidth and unscaledHeight will be whatever measure() determined or they will be the explicit sizes given to your component.

And that’s all there is. The download source file has it all put together for you along with a sample test program. But take a look at the V2 and V3 components; compare them with the Arrows component. In all cases the Flex framework operates consistently. Because V2 was based on HBox, the measure and updateDisplayList functions were not necessary. When writing a component from scratch you have to do these things yourself.

Now you can write components from scratch – either based on existing components or from scratch. The next article in this series looks at skinning and styling components.

Component Class – Part Three

In the previous article you saw how to create a component in ActionScript  and how that mimics a component written in MXML:

MXML ActionScript
Root tag class extends
Metadata tag [Metadata above class definition]
Child component tags override createChildren(), using new operator and addChild() function.
Properties Set and Get functions; override commitProperties()
Events Use addEventHandler and specify an event argument to the handler function.

In this article we’ll look at how to make that circle of arrows rotate.

Download Files

This is a link to the same file download in the previous article; nothing has changed.

Continue reading…

Component Class – Part Two

In the previous article I showed you how to make a component based on an existing MXML component, the HBox. In this article we’ll look at writing that same component in ActionScript. I think this is a worthwhile exercise because you’ll see how similar MXML and ActionScript components are.

Continue reading…

Now Available in Chinese

Several articles have now been translated into Chinese. You can view them at http://www.zhuoqun.net/index.php/archives/tag/peter-ent on Dreamer’s Blog.

It is quite an honor to have someone take time to do this work. Thank you.

Flex Cookbook Authors Wanted

Do you have a good tip or receipe for a Flex solution? Do you want to see your name in print? Then check out this call for topics in the Flex Cookbook:

http://weblogs.macromedia.com/flexteam/archives/2007/10/call_for_topics.cfm

Contribute CS3 Test

I’ve been searching for an easier way to edit my blog articles and I believe I found it, right in my own backyard, so to speak. I’ve been on this quest for a couple of weeks now and created blogs on some of the more popular free blogging sites all in an attempt to make writing articles easier. That’s been a main reason why I don’t have more articles – takes too much time to fiddle with the HTML.

My criteria was that the blog editor should have an easy way to include images, Flash SWFs, and source code snippets. Blogs came about because of computers and the internet and people have been blogging about source code since day one. So what’s the big issue with including source code? Yeah, it needs HTML tags, but why should I have to do that? I was using a WYSIWYG editor in 1984 on my original Mac.

However, it seems to be a huge challenge. Well, once I got the style set for the <pre> tag which surrounds the source code, I moved to the next hurdle: SWFs. Most of the public blogs let you include images and upload them to the same blog server. Your blog account has a limited amount of space, but that’s understandable. But SWFs, that’s another story. Come on, they’re moving images. They do require the use of an <embed> tag and that seems to be the crux of the problem. Some blog hosts just strip it out. Other blog hosts will allow the tags but you have to store the SWF someplace else. In both cases, a hassle for me.

I tried some third party blog editors which you can download and run on your computer. Like Contribute, they offer local editing and draft storage and then upload the finished article to the blog host. But there was always a gotcha in there. In one there wasn’t a way to easily insert source code or SWFs without turning to the HTML editor. No improvement for me there. In another there was a problem connecting to the blog host; nice tools (no SWFs either), but without a reliable connection it wouldn’t work.

I finally decided to try Contribute CS3. It connected right away to all of the blog servers I had set up. I could easily edit articles and create new ones. Adding in headings and source code was pretty easy, too. I can also drag and drop images and SWFs right onto the page. The problem then was uploading the SWFs. Only my current blog host at weblogs.macromedia.com (and the sister site, blogs.adobe.com) let me store the SWFs along with images and zip files.

In the end, I’m still on the same blog server, using a product Adobe makes. I’m pretty happy with this arrangement and I hope it fosters some more creativity.

Component Class – Part One

This is a topic I visit from time to time – writing components. In this example I’ll show you how to write a component from the ground-up. It will take several articles, but in the end you should be able to build your own components.

The component I’ve chosen I call a cycle-select button. This component shows a single entry from a dataProvider along with two arrows in a circle. When you select the button the arrow rotates a bit and the next value in the dataProvider is displayed. Think of it as a ComboBox with no drop-list.

Try clicking on the label and you’ll see how it cycles through the values.

Continue reading…

Extra! BBC Announces Flash Video Adoption

The BBC and Adobe® Systems Incorporated (Nasdaq:ADBE), today announced a strategic relationship around the delivery of Web video. By adopting Adobe® Flash® Player software, the BBC will make its free catch-up TV service — BBC iPlayer —available as a streaming service across Macintosh and Linux®, as well as Windows®, by the end of the year. The strategic relationship will also allow the BBC to provide a single consistent user experience for the majority of streamed video and audio content on www.bbc.co.uk.

You can read more about it on our press release site Adobe Press Room or here on Read/Write Web

Childhood Memories

I was cleaning out my hard drive the other day and came across a directory of old Flash programs. One of these is a demo of the Flash Drawing API that I had set into the background of old my website.

The algorithms are based on the Spirograph(tm) drawing kit I had as a kid. As I recall, no one but me was interested in it (I guess because it didn’t come with an ‘action figure’).

Anyway, here it is running below and you can download the code from the link here Enjoy.

Download source

Flex and Hibernate

For the past month or so I’ve been working on a new example that shows how to use the Hibernate data assembler in LiveCycle Data Services ES. If you aren’t familiar with Hibernate, it is a way to easily persist Java objects – either singularly or in collections and with complex relationships. For example, if you have a data base of employees using several tables, you can make a single Java class that represents the employees and tell Hibernate how to bring it all together. You can load and save these objects using Hibernate and all of the tables will be updated properly.

LiveCycle Data Services ES includes Hibernate. Using the AMF protocol between the Flex client and LC DS you can persist ActionScript objects, too. You can create an Employee ActionScript class and point to a LC DS destination which maps to Hibernate and save and load your ActionScript objects. There’s a bit more to it than that, of course, which is why I wanted to make an example.

This example is complex enough that I have broken it into two parts. This is the first part and shows how to use Hibernate with LC DS along with a simple Flex application. The next part focuses a bit more on the Flex side with a more complex application but still using the same example code from this part.

Here are the basic steps:

  1. You need a database. I’ve used MySQL 5 for the example. You need to create tables and foreign key relationships. The schema which accompanies this article includes that.
  2. You need LiveCycle Data Services ES. Once that’s installed you follow a few more steps to turn on Hibernate. There is nothing else to download.
  3. You make some Java beans that represent your objects. There is a Hibernate tool and Eclipse plugin which can do this but I did it all by hand. If this were a larger project I would opt for the tool. Hibernate persists Java objects, not ActionScript objects, which is why you need these Java classes. LC DS will take care of mapping your ActionScript classes to the Java classes.
  4. You make Hibernate configuration files which maps the Java classes to the database tables. The example I’ve written keeps these pretty minimal, which is good the first time out. In reading a Hibernate book I can see that very complex things can be done using these files.
  5. You make corresponding ActionScript classes. When you request data through the remote data service in LC DS you get back ActionScript objects. There are special ActionScript metadata tags which tell the compiler to expect this.
  6. You make a Flex application.

You also might want to visit this blog to get a more rapid introduction to Hibernate and Flex: Mind the Gap

Continue reading…