Skip to main content

Laying out elements - Flex vs HTML

I recently developed a Flex application.


Before everything else I wanted to layout things. I had a trial version of Flex Builder with me. Designing the layout with Flex Builder is very easy. I can simply drag and drop components and create the layout. But I wanted to use IntelliJ IDEA as my IED. The main draw back for using Idea was been not able to preview the layout in design time. The solution to this problem came in two parts.


1 Design the site in relative layout

2 Use Flex component explorer as a reference (http://www.adobe.com/devnet/flex/tourdeflex/web/)


All most all the tutorials out there explains how to create absolute layouts. This is ok when we have Flex builder. But when we are not with this tool, it's not easy to visualize the layout when we create absolute layouts.


So I experimented with relative layouts in “mxml”. It is almost the same as html/css relative layouts. You simply have to make sure layout=”horizontal” or layout=“vertical” is set in the Application tag in the main mxml file. Then we can use “HBox” components to float content horizontally and “VBox” components to float content vertically. And also you can have an external css file linked to this main mxml application and control the look and feel from there by assigning style classes to components. But I must say that we don't have complete control over each components through the style sheet. There are limitations. “http://www.loscavio.com/downloads/blog/flex3_css_list/flex3_css_list.htm” is a good reference on what styles can be use on which components. Of cause you can always refer to the API documentation as well.



<div>

<div style=”float:right”>column 01</div><div style=”float:right”> column 02</div>

</div> 

<div>

next row test content

</div>

The above code displays a layout with two columns with “column 01” and “column 02” in one row and “next row test content” in the second row. We can achive the same in mxml as follows.




<mx:vbox>

   <mx:hbox><mx:text>column 01</mx:text><mx:text>column 02</mx:text></mx:hbox>

   <mx:text>next row test content</mx:text>

</mx:vbox>



When you grab the experience on how to layout content relatively you can use what ever IDE you prefer to develop your Flex application. Also you can use Flex Ant tasks and write an Ant build script to build the application and wrap it in in a html wrapper. I will be able to explain how to do these later with several other blog posts.





Labels:

Comments

Anonymous said…
This comment has been removed by a blog administrator.
December 11, 2009 at 12:25 AM
Post a Comment

Popular posts from this blog

APIM 3.0 - populate multiple apis - bash script

Created a bash script to create, tag and publish multiple APIs. This is useful to populate data for the landing page. #!/bin/bash # get the URL consumer key clientId=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientId') clientSecret=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientSecret') echo $clientId echo $clientSecret encoded=$(echo -ne $clientId:$clientSecret | base64) echo $encoded # get access token accessToken=$(curl -k -d "grant_type=password&username=admin&password=admin&scope=apim:api_view,apim:api_create" -H "Authorization: Basic $encoded" https://localhost:9443/oauth2/token | jq -r '.access_token'
Post a Comment
Read more

Making of my Fist Game ( Angry Wives )

My Fist Game !!! Finally I was able to finish it. It's been two and half years since I start investing my extra time on this. It all started with a joke. My current working place is a real fun place to work. We usually hangout on teatime and through out any thing we got on each other. We use to sit on a circle and pick a subject and laugh the guts out. Ones we were talking about a particular slow server, we thought about letting the users play a game while it loads. Game like Angry Birds. Then an idea came to modify the Angry Birds game to something like Angry Babes. So instead of this birds there are hot hot girls flying and killing dudes inside building blocks. Then I started wondering, " What if this can be done for real? " "How practical is this?" "Can a single person do this?" I think I have done a research on mobile game purchase statistics, it turns out to be IOS users have more trend over buying stuff than Android users. So IOS wa
Post a Comment
Read more

Overriding default look and feel of GREG - 5.3.0

Following list explains what are the best approach for different use cases. 1 ) - You created a new asset type, and you need to change the look and feel of the details page in the listing page just for that new asset type. To create a new asset type you need to login to the carbon console (username:admin, password:admin) https:// :9443/carbon/ Navigate to Extensions > Configure > Artifacts Click "Add new Artifact" link at the bottom of the page. By default in the "Generic Artifact" area "application" asset type is loaded. Note the shortName="applications" in the root node. "applications" is the name of the asset type. Browse in to /repository/deployment/server/jaggeryapps/store/extensions/assets Create a folder with name "applications"    Now we can override the files in /repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults   Since we are overriding the details page we need to
Post a Comment
Read more