为了保障原创作者在本站发表文章的利益, 并维护本站原创的精神, 特声明: RIAShanghai对有以下任何情况之一的文章将不通知作者并直接进行快意删除:
- 非原创, 或者原创但一文多发;
欢迎各位读者监督. 谢谢合作. 另: 作为Adobe正式的UG, 我们将把Adobe不定期分发的软件,书籍及各种纪念品赠送给发文活跃的作者, 共同进步.
We love Flex, but we are not fans of the default layout management in Flex. Flex offers a number of layout containers like Box, Panel, etc. If you take a careful look at them, most of them are derived from BoxLayout - a simple sequential layout algorithm that lays out components either horizontally or vertically. I'll use an example to illustrates the consequences of such over simplistic (or naive if you like) design.
Let's pick a real example - Juniper credit card application:
For the sake of brevity, we ignore all other parts except the address area.
If you use Flex to design the form above, you need around six HBox/VBox to get it right. Six is a big number considering this tiny form, and Adobe recommends that "It is good practice to avoid deeply nested layouts when possible."
The Solution: borrow layout management from other languages/frameworks.
We managed to port Java's most flexible layout manager to Flex: GridBagLayout. The screenshots below demonstrate our implementation of the UI using GridBagLayout. The best part is that it loves changes - change the form size and its sexy remains. It's super fast too.
<?xml version="1.0" encoding="utf-8"?>
// Container 2. label = new Label(); label.text = "Input prompt: "; gbc = new GridBagConstraints(0, 0, 1, 1); gbc.insetBottom = 12; container2.addComponent(label, gbc); text = new TextInput(); text.setStyle("fontSize", 20); text.text = "Input value."; gbc = new GridBagConstraints(1, 0, 1, 1); gbc.insetBottom = 12; container2.addComponent(text, gbc); label = new Label(); label.text = "Input prompt: "; container2.addComponent(label, new GridBagConstraints(0, 1, 1, 1, 0, 0, GridBagConstraints.BASELINE_LEADING)); text = new TextInput(); text.text = "Input value."; text.setStyle("fontSize", 20); container2.addComponent(text, new GridBagConstraints(1, 1, 1, 1, 0, 0, GridBagConstraints.BASELINE_LEADING));
With GridBagConstraints.BASELIINE_LEADING, you can easily create polished UI.
Porting GridBagLayout to Flex requires major effort - code copying never works as ActionScript AS3 and Java differ in fundamental details and their UI mechanisms vary in many tricky places.
We offer this package as a commercial package. Site license with full source code costs USD 2,498 only; update and support subscription is at USD 998 per year. To order, please contact firstname.lastname@example.org (please use your corporate email account; free email addresses could be blocked; thanks).