Top 5 of WidgetFactory 5 – #1 Custom Properties Dialog Size

When you compare widgets in Captivate 5 and widgets in Captivate 4, Captivate 5 doesn’t seem to be all that more powerful. Yes, Captivate Events do open up some interesting possibilities, but none are really earth shattering. The things that give widgets most of their power, (such as being able to access items on the Captivate Slide) are all available in Captivate 4 as well as Captivate 5.

However, if any of you reading this ever set out to make a widget in Captivate 4 that had more than a few options for the Captivate Author to specify, you would probably have found yourself bumping into an infuriatingly simple boundary.

The complexity of your widgets is set by its interface. The interface must fit in the Widget Parameter tab. The Widget Parameters tab is too small.

Seriously, take a look. A StaticWidget could be pretty much anything. But the size of its Widget Parameters tab limited them to medium complexity at best.

Interactive Widgets were better. Yet strangely, I find that most of the Interactive widgets I’ve ever built don’t have really complex interfaces.

Personally, I reckon that Question Widget’s will in general end up having more complicated properties than all other types of widgets put together. But in Captivate 4, they had the smallest properties area of all!

True, you could harness the almighty power of tabs to give yourself some room. However, you can only have so many tabs, and some tabs would end up being more densely populated than others.

On the other side of the scale, what if your widget was simple? What if all you needed for your Widget’s Properties Interface was an input text field? In that case, the interface ended up swimming in room and looked downright unprofessional.

On the humanity! What are we to do?!

Answer: Upgrade. Captivate 5 takes the one thing that was holding widgets back, and lifts it effortlessly away. Yes, widgets are now big enough to decide on their own how big they want their Properties Interface to be.

Cool, How do I do that?

Couldn’t be easier (well I suppose if the program you were using could read your mind so you didn’t have to write any code then that would be even easier than this. But I say this in a practical sense). There are two properties that handle the size of the Properties Dialog, propertiesDialogWidth and propertiesDialogHeight.

What’s that you say? You want your Properties Dialog to be 500 pixels wide by 600 pixels high? Why my good friend, just set your propertiesDialogWidth to 600, and your propertiesDialogHeight to 500. Like so:

1
2
3
4
5
6
7
8
9
10

package {
    import widgetfactory.StaticWidget;
    public class PropertiesDialogWidget extends StaticWidget
    {
        public function PropertiesDialogWidget() {
            propertiesDialogWidth = 500;
            propertiesDialogHeight = 600;
        }
    }
}

This code must go in your constructor function. By the time the widget gets to the enterPropertiesDialog() template method – it’s too late, as the size has already been set. If you publish this widget and open it up in Captivate 5, the Properties Dialog will look like this (minus the outspoken comment of course).

That’s pretty much it. I have now run out of practical things to tell you.

OH! If you want to optimise your code by one line, and make it look like you understand how Object Oriented Programming works, you can get the same result as above by writing this instead.

1
2
3
4
5
6
7
8
9
10
11

package {
    import widgetfactory.StaticWidget;
    public class PropertiesDialogWidget extends StaticWidget
    {
        public function PropertiesDialogWidget() {

            //super(Properties dialog width , Properties dialog height);
            super(500,600);
        }
    }
}

This does exactly the same thing, the first parameter takes the width, and the second the height. It’s no more or less powerful, it just looks cooler. Technically what’s going on here is that we’re sending our desired width and height for the Properties Dialog into the constructor function for the StaticWidget class (That be the class we’re extending. Known as the Super Class).

Anything else?

Well… here are a couple of tips for you:

The Properties Dialog width and height will default to (almost) the same size as it was for that type of widget in Captivate 4.
If you specify a Properties Dialog size that is different to the stage size of your flash file, then be warned, the widget WILL be resized. Now there is more than one way to resize a swf. WidgetFactory sets the resize mode for the stage to NO_SCALE. Which means that when we make the window larger we will see more of the stage, and when we make the window smaller we’ll see less of it. Outside of WidgetFactory, the typical method of resizing the stage would stretch it to the new size, but this results in the contents of the swf being distorted. For more information on stage scale stuff, see the ActionScript Live docs.
If your widget doesn’t need a Properties Interface, you can make impossible for the Captivate Author to open the Properties Dialog by setting its width and height to 0, or by calling disablePropertiesDialog() in your constructor function. Note: This will not stop the Widget Parameters tab from appearing in Captivate 4.

End of an Error

Well that’s the top 5 features in this release of WidgetFactory. You now have some serious weapons at your disposal for your next widget. But wait! There’s more! Starting from next week I’ll be blogging about… Something else. Haven’t quite decided what yet as there are so many things to blog about. So I thought rather than being selfish and writing about whatever I want, I’d let you guys decide.

Loading ...

Got something pretty specific you’d like to learn? Perhaps some feature of widgets that is making itself hard to grasp? Let me know and I’ll see what I can do (that is of course if I’m not totally flummoxed by it too. Which is more than likely).

Happy Widget(t)ing!

Top 5 of WidgetFactory 5 – #2 Question Widget Improvements

As wonderful as widgets are in general, I think we could see some particularly interesting Question Widgets crop up. Let’s face it, everybody wants more question types. Some are general such as: Drag and Drop, and Crossword. Others are more specific, such as: Disarm the explosive before the countdown ends (although I don’t really see what the practical use of that would be…). Despite the possibilities Question Widgets present, if you take a look at the Widget Treasury you’ll see that there are currently only two Question Widgets available for download across the whole Internet! *Sigh* what can we do about that? I know, let’s make them cooler!

WidgetFactory 5 provides some new, specifically QuestionWidget related, features.

Access Question Slide Elements

I find that trying to find things in the Captivate Movie feels a lot like traversing a rain forest with a large machete. As you hack back undergrowth you occasionally find some golden statue which is a remnant from an ancient civilisation that thought toes were holy and the earth was nothing but a giant golf ball. Well on one of my most recent escapades into the jungles of Adobia, I found the long lost treasure of King Questionsliduselementus! (strange how this king’s name sounds like a Latin animal) What’s more, there wasn’t just one statue, there were 6!

Okay, THAT was a weird metaphor. Plain Language: When your Question Widget is in the Captivate Movie, it can now access the elements that accompany its question slide. These are the…

Back Button,
Skip Button,
Clear Button,
Submit Button,
Question Title, and
Question Text.

You can edit these objects just like you would any other display object. You could change their location, rotation, visibility, and… Oh! Visibility that’s a good one. So if you wanted to hide all these elements, here’s how you could do that:

1
2
3
4
5
6
7
8
9
10

override protected function enterRuntime():void
{
        backButton.alpha = 0; // The Back Button
        skipButton.alpha = 0; // The Skip Button
        clearButton.alpha = 0; // The Clear Button
        submitButton.alpha = 0; // The Submit Button
        questionTitle.alpha = 0; // The Question Title
        questionText.alpha = 0; // The Question Text

}

Of course you’d probably want to show the back and skip button again when you’re reviewing the quiz. Seeing as I’m recovering from ten collective hours on a plane, I’m not in the right frame of mind to show exactly how you’d do that. If you really want to know, leave a comment and I’ll get back to you when my brain syncs in with the rest of the planet.

FYI: These properties only access the elements on the same Question slide as the Question Widget. So when you go to the next slide, all the elements will be visible again.

Auto Submitting

At first glance, this feature may be a bit underwhelming. However, I believe this opens up a lot more possibilities for Question Widgets.

What is it?

It’s a method: triggerSubmitProcess();

What does it do?

It submits the question without the user having to click the submit button.

Why do we need this?

Say you took one of the examples I wrote above of cool potential Question Widgets. More specifically the question where you had to disarm an explosive, how would this really work? Well for starters I’d say that the widget would display a bomb, and two wires coming out of it, one red, one blue. To ‘cut’ a wire, you’d click it. If you cut the red wire the bomb will explode (incorrect), if you cut the blue wire the bomb will disarm (correct). But think about this. What the user would really have to do is click one of the wires, AND THEN click the submit button to see if he got it correct. That really doesn’t make sense. In real life you’d get the answer instantaneously, and likely, very painfully.

triggerSubmitProcess() to the rescue!

Here’s how we’d fix this. Add an event listener that will listen for the user clicking on one of the wires. When they do, call this method and the question will submit! No need for the user to click the submit button. Captivate receives the question depending on what the isCompleteAnswer and isCorrectAnswer properties are set to.

Take a look for yourself.

Before you ask, the submit() template method and QuestionWidgetEvent.SUBMIT event will still be triggered, so you can put your complete/incomplete and correct/incorrect checking code there if you wish.

triggerSubmitProcess could be used in a heap of other circumstances. For example: Say you had a question widget that was a racing game, and when the user crossed the finish line the question auto submitted. What if you wanted to add a ticking clock to one of your questions? If the user didn’t answer the question in time, it would auto submit as an incorrect answer.

Got any other ideas of how this would be useful? Feel free to post them below.

Top 5 of WidgetFactory 5 – #3 Captivate 5 Events

So far the features I’ve written about are used with both Captivate 4 and 5. I’m all for keeping widgets version neutral, but we gotta start moving with the times right? Enter feature number 3: Captivate 5 events!

What’s an ‘Event’?

Have you ever watched a track race? I’ll take your silence as a yes. Well, you know when all the runners are lined up at the start of the race, waiting for the official to fire the starter pistol? Think of your widget as one of those runners, and events as the pistol firing. When the pistol is fired the runner will start running. Same with a widget, when an event happens, code will start running. However, the athlete will only start running if he is listening for the shot. In the same way, our widget will only respond to an event if it is listening for it.

How do I get my widget to listen for one of these Events?

Any object that can listen for events has a method called addEventListener() for this very purpose. To set the type of event you wish to listen for, as well as the action to be taken when this event happens, you must pass this information into addEventListener()’s parameters. Parameters are things we pass into the method’s parentheses () to customize its behaviour. For example: If you pass in a number into the parenthases of the gotoAndPlay() method, your flash movie will jump to the frame of that number. So gotoAndPlay(4) will make the movie go to the fourth frame and play. If a method has multiple parameters, then they are separated by a comma. addEventListener has a lot of parameters, but for our purposes, we’ll only look at the first two.

The first parameter is the event we want to listen to. In ActionScript, events are categorized into classes. All events that are caused by the mouse are available through the MouseEvent class, all events that are caused by the keyboard are available through the KeyboardEvent class, and all events that deal with widgets are available through the WidgetEvent and QuestionWidgetEvent classes. If you’re going to listen for any of these events, you need to import those classes into your widget.

The second parameter is where we pass in a function to call when the event is dispatched (when an event has been ‘dispatched’, that mens it has ‘happened’).

So say we wanted our widget to run the code in the ‘onMoviePaused’ function when the Captivate Movie is paused, here’s how we would write that event listener…

1	addEventListener(WidgetEvent.PAUSE, onMoviePaused);

…and here is how this would fit in to a widget’s class…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

package

{

    import widgetfactory.StaticWidget;

    // REMEMBER TO IMPORT THE EVENT CLASS

    import widgetfactory.events.WidgetEvent;

    public class AttentiveWidget extends StaticWidget

    {

        public function AttentiveWidget ()

        {

            addEventListener(WidgetEvent.PAUSE, onMoviePaused);

        }

        private function onMoviePaused(e:WidgetEvent):void

        {

            // Your code here will be run when the movie is paused.

        }

    }

}

Notice how the onMoviePaused function has (e:WidgetEvent) between its braces? Well this is what a parameter looks like from the function’s point of view. According to the function, a parameter is just another variable, and what we’re doing in between the braces is declaring that variable. The part before the :is the variable name (e), and the part after the : is the data type (WidgetEvent). Why do we need to create this parameter? Well when the event is dispatched, the widget will call the onMoviePaused function, but it will also pass in information about the current WidgetEvent. If you leave this information out, then you’ll get an error, because the onMoviePaused function isn’t expecting anything to be passed into it.

So now that we’ve covered how to listen and respond to events, let’s find out what events we can respond to.

New To Captivate 5 Events

Like I said above, WidgetEvent and QuestionWidgetEvent hold all the events that deal with widgets. Here’s a list of all the new events in Captivate 5, and an example of how you would listen to that event. All these events are only dispatched in the output Captivate Movie. Remember, unless otherwise stated, these events will only be dispatched in Captivate 5 or above.

WidgetEvent.ENTER_SLIDE

This event is dispatched on the first frame of a new slide, the only exception being the first slide.

1	addEventListener(WidgetEvent.ENTER_SLIDE, onEnterSlide);

WidgetEvent.EXIT_SLIDE

This event is dispatched on the last frame of a slide. Useful if you need to do a little cleanup on the slide to make it look like it did at the start. Remember, the audience can always rewind the movie and watch it again.

1	addEventListener(WidgetEvent.EXIT_SLIDE, onExitSlide);

WidgetEvent.PAUSE

This event is dispatched when the movie pauses. The movie may pause for a number of reasons. It may be that the audience has clicked the pause button on the playbar, or it may be that some object (say a button) has paused Captivate internally. Remember that (e:WidgetEvent) event information parameter thingo? Well, that little ‘e’ has a property called isActOfUser. If that property is true, it was the audience who paused the movie. If it’s false, then the movie was paused by some Captivate operation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

addEventListener(WidgetEvent.PAUSE, onMoviePaused);

private function onMoviePaused (e:WidgetEvent):void

{

    if (e.isActOfUser) {

        // The user paused the movie! How dare they!

    } else {

        // Captivate paused the movie... I'll let it slide.

    }

}

WidgetEvent.RESUME

After the movie has been paused, hopefully at some point it will be resumed again. This event is dispatched when it is. This event also has the isActOfUser property to inform us of whether it was the audience, or Captivate, that resumed the movie

1	addEventListener(WidgetEvent.PAUSE, onMovieResumed);

WidgetEvent.MOVIE_START

Remember how I said that the ENTER_SLIDE event is not dispatched at the beginning of the first slide? Well this event is. Very useful if you need to set up stuff right at the start of the movie. Or if you want to do some covert monitoring on the Captivate Movie…

There are two unique things with this event:

There is also a movieStart() Template Method.
This event also works in Captivate 4 if widgets are set up to be externalized. (Update: As of WidgetFactory 5.1, this Template Method works in Captivate 4 regardless of it being externalized)

1	addEventListener(WidgetEvent.MOVIE_START, onCaptivateMovieStart);

WidgetEvent.MOVIE_END

This event is dispatched right at the end of the Captivate Movie. This would be useful for a widget that confirms whether or not the user has finished watching the lesson. Hmm… Interesting…

1	addEventListener(WidgetEvent.MOVIE_END, onCaptivateMovieEnd);

WidgetEvent.INTERACTIVE_ITEM_SUBMITTED

This one is interesting. It’s dispatched when an interactive object (anything that has success and failure captions) sends information to Captivate on the result of the user’s interaction with it. You can also read the data that the interactive item sent… Well… You will be able to in the next patch release of WidgetFactory. Didn’t quite have enough time to squeeze it in this release. Stay tuned!

1	addEventListener(WidgetEvent.INTERACTIVE_ITEM_SUBMITTED, onInteractiveItemSubmit);

QuestionWidgetEvent.QUESTION_SUBMITTED

Like the INTERACTIVE_ITEM_SUBMITTED event, only for questions. Yes, you can read the data about how the question was answered, and yes, that ability is not in the current WidgetFactory but will be soon.

BTW: All the other events in the QuestionWidgetEvent class can only be used if your widget is a Question Widget. This one however, can be used regardless of the type of widget.

1	addEventListener(QuestionWidgetEvent.QUESTION_SUBMITTED, onQuestionSubmit);

Conclusion

So, lots of new stuff to play around with. These events can be used to create some interesting widgets. Let me know how you use them, I’d be very interested to know.

I hope to post #2 next week, but I’ll have to see how I go. Next week is going to be unusually busy as I’m helping out Allen Partridge with his free eSeminar on building widgets! We’re going to be building a widget from scratch. Tune in, it’s going to be awesome.

Top 5 of WidgetFactory 5 – #4 Version Detection

One of the features I like to tote about WidgetFactory 5 is that it’s compatible with both Captivate 5 AND Captivate 4. That means a single widget file can be imported into both versions of Captivate and still work. However, what if you built a widget that used the new Captivate 5 events? What if you built a widget that had a MASSIVE properties interface in Captivate 5, that won’t fit into the tiny Widget Parameters tab in Captivate 4? Or, what you just flat out don’t want to support Captivate 4? Well then my friends, let me introduce you to two properties that will save your day.

isCaptivate4, and isCaptivate5.

Shake hands now.

Nicely.

Nice to meet you isCaptivate4 and isCaptivate5. WHAT exactly are you?

isCaptivate4 and isCaptivate5 are properties in the widget classes (the widget classes are: StaticWidget, InteractiveWidget, and QuestionWidget) that give you a true or false value depending on which version of Captivate the widget is currently in. If your widget is inside Captivate 4, then isCaptivate4 will be true, and isCaptivate5 will be false. If your widget is inside Captivate 5 the opposite will be true. isCaptivate4 and isCaptivate5 (this is getting a little ridiculous, I’m going to call them the ‘isCaptivate properties’ from now on) only reflect the Captivate version they are in at Runtime (inside the published Captivate Movie) and inside the Properties Dialog; otherwise they default to Captivate 4. While this may seem a bit of a bummer, believe me when I say that the Runtime and Properties Dialog modes are the only places where there is enough difference between Captivate 4 and Captivate 5 to need to use these properties.

Okay, so WHY would I want use them?

When you want something to happen differently in one version of Captivate than the other. Captivate 5 has a fantastic new feature that allows you to set the size of the widget’s Properties Dialog. So if you have a superawesomefulcomplicated widget that demands at least 1000×1000 pixels of room for the Captivate Author to set its properties, then you’d set the propertiesDialogWidth and propertiesDialogHeight properties to 1000 each and your widget will be satiated.

However, what if someone tried to pull that widget into Captivate 4? The Widget Parameters tab isn’t nearly spacious enough to show the above, but seeing as this widget’s properties aren’t too complex, we can provide an alternative interface that will fit the smaller screen.

Using the isCaptivate properties, we can differentiate how the properties dialog will be set up in each version.

HOW do I use them?

Good question eager young space cadet! Typically, in an if statement. Like so:

1
2
3
4
5

if (isCaptivate4) {
// I'm in Captivate 4!
} else {
// I'm in Captivate 5!
}

Any code inside the first two {} brackets will be executed if your widget is in Captivate 4, any code inside the second {} brackets will be executed if your widget is inside Captivate 5, and any code outside this if else statement would be executed regardless of the Captivate version.

Of course this code would be inside either the enterRuntime() or enterPropertiesDialog() Template Method (See previous post for information on Template Methods).

Can you give me an example?

You know, I can!

The widget below will display a textField in the Properties Dialog that will tell you what version of Captivate the widget is running in.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

package {

    import widgetfactory.StaticWidget;
    import flash.text.TextField;

    public class MyVersionHipWidget extends StaticWidget {

        override protected function enterPropertiesDialog():void
        {
            var textField:TextField = new TextField();
            addChild(textField);

            if (isCaptivate4) {
                textField.text = "I'm in Captivate 4!";
            } else {
                drawPropertiesDialogBackground();
                textField.text = "I'm in Captivate 5!";
            }

            // Center Text Field
            textField.x = stage.stageWidth / 2 - textField.width / 2;
            textField.y = stage.stageHeight / 2 - textField.height / 2;
        }
    }
}

Notice how there’s a call to this ‘drawPropertiesDialogBackground’ method when we’re in Captivate 5? What this method does is make the background of the widget appear the same colour as the frame of the Widget Properties dialog in Captivate 5. The result being: your widget looks one with the Properties Dialog.

Check it out! Download this widget.

But isn’t stage mode different in Captivate 5 as well?

Captivate 5 does add the new isReadyForStageSnapShot property for use with stage mode. For those who don’t know, this new property tells Captivate whether or not the widget has finished drawing it’s stage preview. If it hasn’t, Captivate will give the widget a few milliseconds to keep drawing, then check again. Using this feature in Captivate 4 isn’t going to break anything though, Captivate 4 will just ignore it.

However, there is the case that you have a widget that will only work in Captivate 5, and if the widget has been inserted into Captivate 4 you want to give the Captivate Author fair warning that it’s not going to work. You could tell them in the Properties Dialog, but if you want to take it that little extra mile and display something on stage along the lines of…

…then what you could do is record the value of one of the isCaptivate properties into a Widget Property when you’re in the Properties Dialog.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package
{
    import widgetfactory.StaticWidget;

    public class IHateStage extends StaticWidget
    {
        // Properties Dialog wants to save the properties
        override protected function saveProperties():void
        {
            properties.isCaptivate4 = isCaptivate4;
        }

        override protected function enterStage():void
        {
            if (properties.isCaptivate4){
                // Your widget's refusal of Captivate 4 code here.
            } else {
                // Your widget's love of Captivate 5 code here.
            }
        }
    }
}

However you use the isCaptivate properties, I’m sure you’ll find it gives your widget just that extra bit of pollish.

Top 5 of WidgetFactory 5 – #5 Template Methods

I’m glad to see that people are enjoying WidgetFactory 5. There are a tonne of new features. However, not all features are created equal, and some of the more obscure ones are actually really powerful. So over the next five weeks I’ll be counting down my top 5 new features of WidgetFactory. I’ll be separating the wheat from the chaff! No wait… that makes the rest of the features sound lame. I’ll be separating the wheat from the slightly less cooler wheat.

So what’s #5? It’s a feature that works in both CP4 and CP5 – Template Methods!

Note: Some of these new features are fairly advanced. For these posts I’m assuming you know the basics of how to build a widget with WidgetFactory. Don’t worry if you don’t understand this stuff yet. I’ll be coming back with more posts on the basics soon.

(I’d like to thank Whyves for suggesting this feature. I was cautious at first, but now I can’t live without them )

What do Template Methods allow you to do? A Template Method allows you to code your widget to react according to what Captivate needs it to do at that point in time. For example, when Captivate displays the widget on stage, it should show a preview of what it will look like in the published Captivate Movie. There’s a Template Method for that. What about when your widget is actually in the Captivate Movie and not only needs to LOOK the part, but ACT the part too? There’s a Template Method for that. For each different role the widget has to play, there is a corresponding Template Method. As you can imagine, this multi-role lifestyle must be incredibly demanding on widgets. They must feel like they have no identity of their own.

But you know, that’s life.

What is a Template Method? In WidgetFactory, Template Methods are functions (functions and methods are the same thing. Programmers use the word ‘method’ when we want to sound smart) inside the StaticWidget, InteractiveWidget, and QuestionWidget classes that are called when Captivate needs the widget to do something. For example: the enterStage() Template Method is called when Captivate needs the widget to display something for the Stage.

The official term for each of these locations that the widget finds itself in is ‘Mode’. So shown above is a widget in ‘Stage Mode’. To get the widget to do something in one of these modes, we add some code to that mode’s corresponding Template Method and POOF, a pie will be thrown at the Captivate Author when the widget is displayed on the stage.

But how do we use Template Methods? Answer: Be a rebel! Get your widget to say to the widget class it is extending: “Yo-daddy-o! I love what you’re doing and all, but your enterStage method is a joke. Now if I had my way, here’s what I’d do with it.” In ActionScript (or any other programming language that labels itself as ‘Object Oriented’) classes can override, or provide an alternative for, the functions in the class that they are extending. We can override the enterStage Template Method like so:

1
2
3
4
5
6
7
8
9
10
11

package {
    import widgetfactory.StaticWidget;
    public class MyWidget extends StaticWidget {

        override protected function enterStage():void
        {
            // Your stage code here
        }

    }
}

Now, when the widget is displayed on stage, and the StaticWidget class goes to call the enterStage method, it will be diverted to our new and improved enterStage function! Any code that you write in the enterStage method will be executed at that time.

Just to let you know, not all Template Methods are to inform you that the widget is entering a Widget Mode. The saveProperties Template Method is called when Captivate needs to extract properties information from the widget. The clearAnswers Template Method for QuestionWidgets is called when the user clicks the CLEAR button on the Question Widget’s interface. The use of all Template Methods are exactly the same, regardless of their purpose.

Now some of you are probably raising your hands and saying: “Whoa dude! Didn’t we used to do all this stuff with WidgetEvents? What happened to them?” Don’t fret, the WidgetEvents are still there (though some have been renamed), if you’re more comfortable with events, then go ahead and use them instead.

Which one is more powerful? Template Methods, or WidgetEvents? I’m not going to go out on a limb here and say: Neither.

Then why did you add Template Methods to WidgetFactory? Well they’re quicker to code. Compare how much code it takes to use an event…

1
2
3
4
5
6

addEventListener(WidgetEvent.ENTER_STAGE, onEnterStage);

private function onEnterStage(event:WidgetEvent):void
{

}

…as opposed to a Template Method.

1
2
3
4

override protected function enterStage():void
{

}

That’s a real timesaver. It also looks more magical.

AWED CLIENT: Hey, if that enterStage function isn’t called anywhere in your code, how come your widget works?

YOU: Magic.

Let’s wrap up with a widget that harnesses this feature. This widget displays a text field, and when each widget mode ticks around, it fills that text field with information about said widget mode:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

package {

    import flash.text.TextField;
    import flash.text.TextFieldAutoSize
    import widgetfactory.StaticWidget;

    public class WidgetModeWidget extends StaticWidget {

        private var textField:TextField;

        public function WidgetModeWidget ()
        {
            textField = new TextField(); // Create a new TextFiekd
            addChild(textField); // Display the TextField on the stage
            centerTextField();

            // The textField will resize to our text according to its center
            textField.autoSize = TextFieldAutoSize.CENTER;
            textField.text = "No Widget Mode";
        }

        private function centerTextField():void
        {
            // Center textField
            textField.x = stage.stageWidth / 2 - textField.width / 2; // Horizontal
            textField.y = stage.stageHeight / 2 - textField.height / 2; // Vertical
        }

        /* The window that opens up when you click the widget's 'Properties Dialog' button in CP5,
         * or the Widget Parameters Tab in CP4.
         */
        override protected function enterPropertiesDialog():void
        {
            textField.text = "Properties Dialog Mode"
                                    + "\n" + "Template Method: enterPropertiesDialog()"
                                    + "\n" + "Widget Event: WidgetEvent.ENTER_PROPERTIES_DIALOG";
                                    // The \n starts a new line in the text field.
            centerTextField();
        }

        /* The preview window in the Widget Properties Dialog in CP4
         * Not available in CP5
         */
        override protected function enterPropertiesDialogPreview():void
        {
            textField.text = "Properties Dialog Preview Mode"
                                    + "\n" + "Template Method: enterPropertiesDialogPreview()"
                                    + "\n" + "Widget Event: WidgetEvent.ENTER_PROPERTIES_PREVIEW_DIALOG";
            centerTextField();
        }

        /* When the widget appears in the output Captivate Movie
         *
         */
        override protected function enterRuntime():void
        {
            textField.text = "Runtime Mode"
                                    + "\n" + "Template Method: enterRuntime()"
                                    + "\n" + "Widget Event: WidgetEvent.ENTER_RUNTIME";
            centerTextField();
        }

        /* When the widget is previewed on the Captivate Stage.
         *
         */
        override protected function enterStage():void
        {
            textField.text = "Stage Mode"
                                    + "\n" + "Template Method: enterStage()"
                                    + "\n" + "Widget Event: WidgetEvent.ENTER_STAGE";
            centerTextField();
        }

        /* The preview of the widget that is shown in the Widget Panel.
         *
         */
        override protected function enterWidgetPanelPreview():void
        {
            textField.text = "Widget Panel Preview Mode"
                                    + "\n" + "Template Method: enterWidgetPanelPreview()"
                                    + "\n" + "Widget Event: WidgetEvent.ENTER_WIDGET_PANEL_PREVIEW";
            centerTextField();
        }
    }
}

Click here to download the widget.

Happy Widgeting. (Would that word have two ‘t’s?)

The Widget King