Archive for March, 2009

tortoiseSVN

March 31, 2009

create new project in repository

1. Create new folder in repository, such as “http://www.mydomain.com/projectscode/trunk/companyName/prjName//flex/”
2. Import the working copy to the folder
3. Checkout from the repository back to local machine. I usually create another folder in the local machine (at the same workspace with a slightly different folder name); after the successful export, I delete the original working copy (and optionally rename the checked out folder to be the same name as the original copy)

switch when you rename the project om repository.

Casting and as in ActionScript 3

March 31, 2009

Here.

Basically if casting fails (MovieClip(object)), Flash Player will throw a TypeError at runtime; if as operator fails (object as MovieClip), null gets returned.

Postfix operators: x++

March 30, 2009

Although postfix operators are unary operators, they are classified separately from the rest of the unary operators because of their higher precedence and special behavior. When a postfix operator is used as part of a larger expression, the expression’s value is returned before the postfix operator is processed. In other unary operators, such as prefix increments/decrements, the increment or decrement operation is completed before the value of the overall expression is returned.

#include <iostream>
using namespace std;

int main()
{
int max = 3;
int total = 7;

int count = 0;
cout<<“unary test for postfix:”<<endl;
for(int i = 0; i< total; i++)
{
count = count >= max? 0 : count++;
cout<<“#”<<i<<“: “<<“count is “<<count<<endl;
}
cout<<endl;

count = 0;
cout<<“unary test for prefix:”<<endl;
for(int i = 0; i< total; i++)
{
count = count >= max? 0 : ++count;
cout<<“#”<<i<<“: “<<“count is “<<count<<endl;
}
cout<<endl;

cout<<“for loop test:”<<endl;
count = 0;
for(int i = 0; i< total; i++)
{
if(count >= max)
{
count = 0;
}else
{
//both are the same.
//count++;
++count;
}
cout<<“#”<<i<<“: “<<“count is “<<count<<endl;
}
cout<<endl;
}
/**result
unary test for postfix:
#0: count is 0
#1: count is 0
#2: count is 0
#3: count is 0
#4: count is 0
#5: count is 0
#6: count is 0

unary test for prefix:
#0: count is 1
#1: count is 2
#2: count is 3
#3: count is 0
#4: count is 1
#5: count is 2
#6: count is 3

for loop test:
#0: count is 1
#1: count is 2
#2: count is 3
#3: count is 0
#4: count is 1
#5: count is 2
#6: count is 3
*/

Cairngorm 101: Take one

March 28, 2009

Here is how things are set up in Cairngorm v2.2, based on what I learned this morning through this series of step-by-step tutorials (text accompanied by videos):

  • The members in views are bound to the model locator using Flex binding. This is the foundation of the whole mechanism, which ensures whenever the model is changed, the corresponding views get updated. Flex uses [Bindable] meta data tags for binding properties and setters.
    Note that there are situations where bindings cannot be used or you prefer not to use bindings. For example, properties of the main application is not binable, which means you cannot bind width/height property of your WindowedApplication to some properties of your model locator. All the code inside a [Bindable] setter is lazy execution (meaning if you are trying to assigned the same value using the setter, nothing will happen).
  • You will also need to declare and instantiate the Control in your Main application, either by ActionScript or by MXML, in order for the whole thing to be set in motion.
  • The following shows how different parts are chained up in the Cairngorm flow to react to a user gesture. Note this flow doesn’t include a detailed view about how Model delegates to the business logic (residing largely on servers):
    View->Event->Front Control->Command->Model->View
    (here is a much nicer looking diagram from the original site)
  • ModelLocator is a singleton class that contains all the model/data classes plus the states of the models (such as “login”, “checkout”, “view in thumbnail”, “view in grid”, etc..) Again, in Cairngorm, the model updates views by utilizing the Flex binding mechanism.
  • Model classes (TODO)
  • Business delegate classes (TODO)
  • Command is the worker class who does the heavy lifting. Usually, it knows the business logic and carries the underlying algorithms. In your code, there should be defined separation of labor among Command objects and each Command should only concentrate on one thing. Each command object is associated with a a typed Cairngorm Event, which is passed down from the Front Controller. All Command objects carry out their duties by responding to a centralized Front Controller instead of directly to a user request.
  • Then how does a user request get satisfied? In Cairngorm, all the hooks between user gestures and their corresponding workers are done by the Front Controller. Front Controller is the manager class that keeps the list of commands for your application and keeps track of which command responds to which user guestures (presented as CairngormEvent objects). At the time an event is dispatched, it invokes the excute() method on that command and passes the typed Cairngorm event object which contains information about the specific user gesture that the Command object expects. The philosophy for Command/Cairngorm Event/Front Controller is similar to that of  Mediator Pattern: Encapsulating all the worker objects’ communication by decoupling the explicit dependency of objects on one another.:)

Here is how I approach the code flow, which for now I feel easier to follow:

  1. Create ModelLocator. This includes adding related model/data and “states”. This is like blocking of your drawing. After this, we can drill down into the details:
  2. Create VO;
  3. Layout View (UI control);
  4. Define event for the control;
  5. Create command to handle event. The command is the control in the MVC pattern, it interprets an user gesture and modifies the model ;
  6. Add the command to the Front Controller. This is like in your drawing when you are happy with the details, you step back again to adjust the relations of different parts ;
  7. Add Front Controller to the Main application if you haven’t done so,
    Add view/UI controls to the Main application if you haven’t done so;
  8. Go back to #3 > #6 to add more features.

Install flare as ActionScript project

March 27, 2009

1. You will need to include “framework.swc” from the Flex SDK in order for it to compile.

In my computer, the framework.swc is at

“C:\Program Files\Adobe\Flex Builder 3\sdks\3.3.0\frameworks\libs”

2. In “ActionScript Build Path”->”Source path”, you would need both folders under “flare” folder. One is “src” (where all the  flare classes reside”; the other is “lib” which is namespaced “com.adobe.serialization.json”.

3. This one just keeps puzzling me. Please let me know if I am missing anything obvious. Flex throws the following error at the compile time,  for this signature

internal function doEnd(evtType:String=TransitionEvent.END):void in flare.animate.Transition:

"Type 1047: Parameter initializer unknown or is not a compile-time constant. Transition.as"

What I did to fix it was I had to change it to:

internal function doEnd(evtType:String=”end”):void

Flex 101: measured width vs. explicit width vs. width

March 26, 2009

Here.

clipContent of Container

March 18, 2009

All the flex mx.core.Container subclasses have a “clipContent” property. mx.core.Application is a subclass of LayoutContainer which is a subclass of Container. By default, the value of the property is “true”, which means the container applies a mask that clips its child contents that go outside of its borders.

Container.clipContent = "false" will make the children content visible regardless of their 2D positions.

“Effects in response to user input”

March 18, 2009

From” Joy of Flex“, buzzword UI/eye candy guru David Coletta.

Know who you are dealing with…

March 16, 2009

This morning I kept getting this mysterious complaint from the compiler:

“Error: No class registered for interface ‘mx.styles::IStyleManager2′.”

After reading this, I found out I was unintentionally running/debugging an MXML component instead of my MXML application (the “main” application), which I intended to run/debug. I wonder why mxmlc allowed this to happen in the first place.

It’s like the cop lurking behind the bushes where a stop sign is extremely easy to miss and ready to give tickets to those unlucky mindless drivers;)

flex 3 skinning examples

March 9, 2009

CSS explorer in Flex 3

Button

Scrollbar