Revision as of 08:42, 28 February 2011

This document describe the development of widgets for chumby with liquid layout. The purpose of using liquid layout is to develop only one version of widget that is able to scale to various resolutions.

Resolutions

These are resolutions Chumby widgets run on.
Chumby One: 320x240
Insignia 3.5": 320x240
Insignia 8": 800x600
Sony Dash: 800x480
Android: 800x480 (most popular)

Understand Scaling

Normally Flash scales everything to best fit into its windows. This works and probably looks good too.
For example you develop a widget to display 1 paragraph of text on 320x240. When you move to a 800x600 device, your font is 2.5 times the size, and you are still showing only 1 paragraph of text.
In this case, there is no real benefit of having higher resolution display.

What we want to have is the font size of text generally stay the same while we have more pixels to display more of them at once.
This is where liquid layout comes in.
So, the first thing we need to do is to disable Flash's default scaling.
It is best to do this in the first frame.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

Liquid layout class

See Sample RSS Widget in AS3 com.chumby.widgets.RSSTemplates.RSSFlexibleLayoutManager and
com.chumby.widgets.RSSTemplatesAS3.RSSFlexibleLayoutManager
were written to help implementing liquid layout easily.

public class SplashScreen extends MovieClip
{
    //UI objects placed in Flash stage
    public var splash_logo:MovieClip;
    public var splash_title:TextField;
    public var splash_background:MovieClip;

    //Liquid layout
    var myStage:Stage;
    var myRoot:Object;
    var layoutManager:RSSFlexibleLayoutManager;

    public function SplashScreen()
    {
         ...
         myStage.addEventListener(Event.RESIZE, onResize);
         ...

         //Liquid layout rules
         layoutManager.addDisplayObject(splash_background, false, {height_relative: [1, RSSFlexibleLayoutManager.heightOf(myStage)], width_relative: [1, RSSFlexibleLayoutManager.widthOf(myStage)]  });
         
         layoutManager.addDisplayObject(splash_logo, true, {height_relative: [(splash_logo.height/RSSFlexibleLayoutManager.yDesignSize), RSSFlexibleLayoutManager.heightOf(myStage)], width_relative: [ (splash_logo.width/RSSFlexibleLayoutManager.xDesignSize), RSSFlexibleLayoutManager.widthOf(myStage)], width_max_relative: [0.8, RSSFlexibleLayoutManager.widthOf(splash_background)], height_max_relative:  [0.8, RSSFlexibleLayoutManager.heightOf(splash_background)], center_y_relative: [0.9,  RSSFlexibleLayoutManager.yCenterOf(myStage)], center_x_relative: [1,  RSSFlexibleLayoutManager.xCenterOf(myStage)]   });
         
         layoutManager.addDisplayObject(splash_title,false,{top_relative: [1, RSSFlexibleLayoutManager.bottomOf(splash_logo), 10], left: 0, width_span: [0, RSSFlexibleLayoutManager.widthOf(myStage)], text_size_relative: [ (Number)(splash_title.getTextFormat().size) / RSSFlexibleLayoutManager.yDesignSize, RSSFlexibleLayoutManager.heightOf(myStage)], text_size_min: (Number)(splash_title.getTextFormat().size) / 1.5, text_size_max: (Number)(splash_title.getTextFormat().size) * 2});
         
         layoutManager.layout(true);
    }

    public function onResize(evt:Event)
    {
         layoutManager.layout();
    }
}

This is an AS3 example extracted from SplashScreen.as class of Sample RSS Widget in AS3 template.
See [Developing Widgets for Chumby: ActionScript 3] for information about myStage & myRoot.

Position & size of the UI elements in this class are setup with relative constraints to the stage or one another.
This is done by passing the layout manager the UI elements and a set of rules.
Once we have the constraints established, everytime there is a need to change their layout, we just simply let the layout manager re-applies those rules.

layoutManager.layout();

Liquid layout rules

WIP