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

Using javascript to Include a html file inside another html file

When there is no server side functionality needed we create the whole site in plain html. Usually these sites have left/right side menu, top header, footer etc.. If the site grows in to 20, 30 pages, it will be a headache to do a simple change like changing footer text. We will have to change each page. If we were using a server side technology like PHP, JSP, etc.., we will have the chance to keep the common areas in the site in different pages and include these parts in each page using a “include” statements. We can do the same thing with the plain old html and javascript. But how? First you need to create the site main layout using divs and give them unique ids. <html> <title>HTML Includes</title> <script language="javascript" src="js/main.js"></script> <script src="js/prototype.js" type="text/javascript"></script> <script language="javascript" xml:space="preserve"> // <...
6 comments
Read more

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

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