Archive for the ‘Flex’ Category

Autohide UIScrollbar on a dynamic text field – AS3

February 22, 2010

mUIScrollBar.visible = (mTextField.maxScrollV > 1);

Advertisements

“Error #1088: The markup in the document following the root element must be well-formed.”

December 5, 2009

I was using PHP and curl as proxy to get some xml files from Basecamp for my Flex UI to consume and was successful (something like “return $response   = curl_exec($session);“. But after I refactored my little php functions into an object/class and included it in another delegation file, it suddenly stopped working. In Flex, I got the following error for the HTTPService fault event:

faultCode:Client.CouldNotDecode
faultString:’Error #1088: The markup in the document following the root element must be well-formed.’
faultDetail:’null’

In Firefox 3.5, the output XML file looked ok. But both Safari and IE gave error messages: There was an “*” in front of the <?xml ..?> header in Safari source code view; while IE gave the following error:

Invalid at the top level of the document. Error processing resource

After comparing the files before refactoring and the one after, I noticed that the refactored one was encoded in UTF-8 while the old one was in ANSI. After I converted my class file into ANSI, XML output became normal in all three browsers.

BTW, I used Notepad++. Not sure if that was an issue.

Anyhow, lessons learned: Make sure the source files are encoded in ANSI.

Any comments and thoughts are welcome!

Refer to component in Flex with curly braces

November 3, 2009

Always use curly braces/brackets to refer to your component by id. Like this:

<mx:Panel …
showEffect=”{shake}”>

<pg:ShakeEffect id=”shake”/>

</mx:Panel>

You can probably do without the curly brace to refer to an effect component if you are in the main application mxml; but it won’t work for a component.

See also:

Curly Braces in Flex Control Properties

Synchronizing small projects in eclipse

August 17, 2009
  • To export the project as a zip: File>General>Archive File;
  • To import it back to the workspace: File>General>Existing Projects into Workspace
    and select the aforementioned zip file. This will result in a new folder in the root of the current workspace.

Accessing UI views, properties and methods in main app in Flex

July 6, 2009

This applies to both AIR and Flex project, in Flex SDK 3.3:

// Application.application refers to the top level application.
// But be aware that it's typed to Object as opposed to Application.
// According to Flex team, it's for the purpose of fast compilation and
// being able to access properties/methods in the <Script> of their
// <Application> without having to cast it to their application's real type.
// So this means you can get:
// var stuff:SomeStuff = Application.application.getStuff();
// but you would have to access the real application each time by saying
// Application.application. Or you can do it this way:

var app:MySubclassedApplication = mx.core.Application.application as
                                  MySubclassedApplication;

// UI components with id names are automatically declared as public
var contactList: ContactList = app.contactList;

// as long as you've declared them as public in your <Script>.:)
var dou:Dug = app.dug;
var stuff:SomeStuff = app.getStuff();

Documentation. Note when you are using SWFLoader to load a module into the main application, you can reference your main application as parentApplication.

Tracking mouse movement in Flash Player

June 8, 2009

In a recent prototyping project, I attempted to simulate “shake” gestures in a desktop AIR application, i.e., using mouse cursor to simulate a hand grabbing some object on the screen…

Anyhow. I found out that Flash Player can send out the mouseMove event must faster than it can update the screen. In the case you want to keep track of the simulated gestural motion, you would want to track the mouse cursor position on the stage, instead of the display object the mouse cursor is dragging. This is because when you drag the object to the point Flash Player cannot keep up with, the redaw will then not necessarily reflect the real positional changes of it in between the frames.

Take a look here. Right click to for the code. Also note that when directly register Application.application as the currentTarget we seem to get smoother tracking than if we registered the display object, like so:

mButton.addEventListener(MouseEvent.MOUSE_MOVE, mButton_handleMouseMove);/** you got more stripped out points than if you do this:

addEventListener(MouseEvent.MOUSE_MOVE, mButton_handleMouseMove);// this is btter.*/

MVC revisit: Take two

June 7, 2009

I find that MVC is much easier to understand both at the conceptual level and at the implementation level if you think about it from the perspective of how you communicate with the Model.

  1. Control is the input to Model. Basically, the Control is responsible to take input from the user or the system and stransfer it to the changes in the Model; The View is merely there to render the changes from the Model; so it can be considered as the output from the Model. You should keep the business logic as much as possible inside the Model and leave Control/View simple and dandy.For Flex 3 (Halo) components, the way of input is realized by implimenting the “change” listener of the controls, like this:

    <mx:TextInput id="mTxt" change="mVO.txtValue = mTxt.htmlText;"/>

    In Flex 3, when you bind a model to a control, it is one-way communication, meaning the control will reflect the change whenever there is one in the model; but the control would not be able to change the model. That’s why we need to wire through the change listener to make this happen.

    The output is hooked up by setter methods in the Model. Whenever you detect some changes that are historical, you would notify your listeners.

    [Bindable]
    public function set myValue(v:int):void
    {
    _
    myValue = v;
    notifyListeners();
    }

    In ActionScript 3, we normally implement “notifyListeners” by way of dispatchEvent. Your client listens to the event and updates the View by querying the changes from the Model. You may want to have different types of events so that your listeners can respond differently. For example, you normally would invalidate properties of your component and regenerate all the renderers when the data provider has changed, besides doing other updates; and you don’t want to do this kind of heavy-lifting each time when changes occur on the “less important” members of the Model.

  2. Asynchronous data. Sometimes you may compose something like an HTTPService component into your Model so that it can request external data.The data that are requested by the Control at a lot of times are not immediately available, and normally you would not notify your listeners until they are ready (For example, parsed into an XMLList object that can be consumed by component’s dataProvider).
  3. Static members are available before non-static members of the objects. You can use static members to set some initial values of your member variables.
  4. When you smell spaghetti code in your Model, try to partition/refactor your Model into smaller Value Objects. Value objects are a good way to structure your data/make flat Model hierarchical.
  5. For larger projects, you may want to duplicate Model (or value objects) so that multiple client can access the same data. For example, in your main window of your AIR application, you initialize your model like so:

    public var chatModel:ChatModel = new ChatModel();In another console window, you want to access the same model, like so:

    private var chatModel:ChatModel = Application.application.chatModel;

JSON to XML

June 1, 2009

A lightweight plugin for Eclipse. Works good for me on Flex Builder 3 (v3.0.1.2x).

JavaScript xml2json and json2xml.

Change Adobe AIR window size dynamically

May 28, 2009

This changes your AIR app (main app’s window) to 100 px by 100 px.

Application.application.width = 100;
Application.application.height = 100;

How to get scrollbars inside background image in Container

May 11, 2009

Unlike a List based component, in which scrollbars always appear _inside_ a background image provided you have one, in a mx:Container subclassed component, such as a Canvas, the scrollbars always go _outside_ of your background image.

So say if the Canvas has a width of 200 px, the background image has a width of 200 px when there is no scrollbar. If the scrollbar is 16 pixels wide, the background image would become 200 – 16 = 184 px, as opposed to staying 200px wide. Sort of reminisentant of the DOM box model in IE vs. that in Firebox?

Solution? use nested containers. Say one called “innerBox” and the other “outerBox”:

For “outerBox”, you have full scaled background image and scroll policy to “off“;

For “innerBox”, you have background image set to null and scroll policy to “on“, plus, set both percentage width and percentage height to 100%. You may also want to setbackgroundAttachment to “fixed“;

See the sample CSS below:

.outerbox
{
background-image: Embed(source=”img/gradientPaneBkg.png”,
scaleGridTop=”7″, scaleGridBottom=”96″,
scaleGridLeft=”7″, scaleGridRight=”148″);
background-size: “100%”;
}
.innerbox
{
background-image: null;
vertical-scroll-bar-style-name: “myScrollBarStyle”;
}
.myScrollBarStyle
{
thumbSkin: Embed(source=”assets/scrollThumb_r.png”,
scaleGridLeft=”5″, scaleGridTop=”6″,
scaleGridRight=”7″, scaleGridBottom=”46″);
trackSkin: Embed(source=”assets/null_17_18.png”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”10″, scaleGridBottom=”170″);
upArrowSkin: Embed(source=”assets/null_17_18.png”);
downArrowSkin: Embed(source=”assets/null_17_18.png”);
}

Now here is the catch: since we have switched off the scrollbar on our component, each time you are are dealing with scrolling, you probably meant to deal with the innerBox’s scrolling. Like so:

override public function set verticalScrollPosition(value:Number):void
{
innerBox.verticalScrollPosition = value;
}
override public function get verticalScrollPosition():Number
{
return innerBox.verticalScrollPosition;
}