Layout your resume
March 22nd, 2009 in Flex | No CommentsCreate a great layout for your resume with the Accordion component in Flex.
1. In this example we use the Accordion component to layout all the informations that are displayed in a resume. Look at the code and try to understand it as it doesn’t present much difficulties.
2. Here is the entire code :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" backgroundGradientColors="[#000000, #FFFFFF]"
pageTitle="Curriculum Vitae" backgroundGradientAlphas="[1.0, 1.0]">
<mx:Style>
Label{
fontFamily : Verdana;
fontSize : 10px;
color : #000000;
}
Text{
padding-right : 10px;
padding-left : 10px;
}
</mx:Style>
<mx:VBox width="500" height="400"
backgroundColor="#FFFFFF" borderColor="#0B0FB4"
borderStyle="solid" borderThickness="3">
<mx:HBox width="100%" verticalAlign="middle" fontStyle="normal"
fontWeight="bold" height="140">
<mx:VBox height="100%" paddingLeft="10" paddingTop="5" verticalGap="3">
<mx:Label text="Mr John XXX" fontSize="13" fontWeight="bold"/>
<mx:Label text="767 Fifth Avenue"/>
<mx:Label text="New York City, NY 10153"/>
<mx:Label text="(212) 336-****" />
<mx:Label text="johnxxx@gmail.com" />
</mx:VBox>
<mx:Label text="RIA developer / designer" fontSize="15" fontWeight="bold" />
<mx:VBox height="100%" verticalAlign="middle">
<mx:Image source="assets/photo.png"/>
</mx:VBox>
</mx:HBox>
<mx:Accordion width="100%" height="100%">
<mx:VBox label="Profile" width="100%">
<mx:Text width="100%">
<mx:htmlText>
<![CDATA[
I am an American software developer, currently living and working in New-York. I am available for consultancy, application development, or delivery of a Flex training course tailored to your company's needs.
I am an expert application developer (Flex AS3, AIR, Flash), with over 10 years experience in cutting-edge technologies, an expert in object oriented software development.
I have extensive experience in enterprise web application design, development, production, testing and maintenance for small and large enterprises. ]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
<mx:VBox label="Education" width="100%">
<mx:Text width="100%">
<mx:htmlText>
<![CDATA[
- Adobe Flex Certified Expert : 2008
- Bachelor of Arts degree in Science, Technology, and Society from Stanford University : 2000
]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
<mx:VBox label="Experience" width="100%">
<mx:Text width="100%">
<mx:htmlText>
<![CDATA[
- Senior Web Developer/Manager - XXX Group - june 2007 to september 2008
- Designed & developed several Flash widgets, integrated modules and full SWF websites as FreeLancer
- Developed Flash Games and Multimedia Desktop Applications.
- Experienced with Web Services and Flash Video.
- Developed Rich-Media Flash banner Ads for XXX brand.
]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
<mx:VBox label="Areas of Expertise" width="100%">
<mx:Text width="100%">
<mx:htmlText>
<![CDATA[
- Flex, Flash, Air, AS3, Papervision, Cairngorm, LiveCycle , BlazeDS, design patterns, pureMVC
- PhotoShop, Illustrator, Dreamweaver
- Php, Java , C++
]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
<mx:VBox label="Others activities & Hobbies" width="100%">
<mx:Text width="100%">
<mx:htmlText>
<![CDATA[
Travels, BasketBall, Tennis ]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
</mx:Accordion>
</mx:VBox>
</mx:Application>
3. Few explanations.
The header of the resume is an HBox which contains the personal infos, a title and a photo.
The rest of the infos are displayed in an Accordion Component.
Each section (Profile, Experience, Education, Areas of Expertise, Others activities & Hobbies) is placed in a VBox so that the Accordion has 5 VBox inside it.
Inside each section VBox we put an htmlText tag inside a Text tag.
Basically we have
<mx:Accordion>
<mx:VBox>
<mx:Text>
</mx:htmlText>
<![CDATA[
]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
<mx:VBox>
<mx:Text>
</mx:htmlText>
<![CDATA[
]]>
</mx:htmlText>
</mx:Text>
</mx:VBox>
</mx:Accordion>
And so on.
The only thing that left to do, is to fill the html with your infos.
No Comment yet. Why not leave one?