Adobe is planning to relase a new product this year, Adobe THERMO. This program is aimed at designers because what you can basically do with it is to take for example a photoshop file and slice it up to a RIA (rich internet application) which you can then transfer into Flex.
Sounds like a great tool and i´m looking forward to try it out.
Yesterday when I was presenting my Flex in FlashJam at school I showed an application which I called “online photoshop”. I thought this was a good example of how powerful Flex actually is. But yesterday i had never heard of Photoshop Express. Those geniuses at Adobe have created an online Photoshop where you can upload and edit your images. This is just fantastic.
Now I have handed in the report and today there was a FlashJam at school where I presented my stuff. Don´t know if anybody understood what i was mumbling about but I think it was OK. I think I will keep on blogging on this site about Flex. Just to keep my a little bit busy.
And by the way! For all you students out there, get Flex builder 3 free from this site http://flexregistration.com/
I applied for it yesterday, just scanned my student card and sent with the application. Got the serial number today and now I have a totally legal full version of Flex builder 3.
Today I made my first video tutorial ever! It was much harder then I thought to do a good tutorial. I found out that you have to plan it very well before you start. It was also hard for my to do it in English because that is not my first language. So there are probably to many hmm and uumm in the video.
But what count is that i made this video tutorial about the basics regarding Flex3 builder. What i covered in this tutorial is
The link to the tutorial is http://flex3.bippi.net/projects/tutorials/basicFlex.html
Enjoy!!!
Flex and Flash have many things in common. The final product from both is a swf file which in turn is played in Adobe Flash Player. In both one can use Actionscript 3.0. But they differ also in many things (information from http://paragmetha.blog.com/1831276/):
Flex isn´t Flash
Flash isn´t Flex
Flex Strengths
Flash Strengths
So a simple answer to the above question would be that if you want to make an RIA application which heavily relies on data manipulation then you would use Adobe Flex. If you on the other hand want to make ad-banners, animations or some fancy graphical web page then the platform to choose would be Adobe Flash. Another answer could also be if your project needs a lot of programming then you would use Flex but if you want to do a nice visual design then you would use Flash.
There are basically two ways to influence the visual layout of Flex application that is by styling and skinning.
Styling
There are many ways to style components in Flex. Here I will talk about 3 ways to use styling: with stylesheet, instance Styles (inline styles) and with AS3.
Stylesheets in Flex are almost identical to CSS and if you know CSS well then styling in Flex will be no problem. Here is an example of how to style a button with stylesheet within the MXML code.
<mx:Style>
Button
{
color:#ff0000;
width:200;
paddingLeft: 18;
paddingRight: 20;
}
</mx:Style>
This would effect all buttons in the application but if you would like to just style a specific button I would give it a styleName like this <mx:Button styleName="myButton" label="My Button" /> and change the style code to this.
<mx:Style>
.myButton
{
color:#ff0000;
fontSize:16;
paddingLeft: 20;
paddingRight: 20;
}
</mx:Style>
This works just like classes in CSS. The syntax for stylesheet is a little bit different from CSS but don’t worry because you can also use the same syntax as in CSS, then the code would look like this:
<mx:Style>
.myButton
{
color:#ff0000;
font-size:16;
padding-left: 20;
padding-right: 20;
}
</mx:Style>
To use external stylesheet you simply store your styling code in a different file with .css ending and you import it into the application like this:
<mx:Style source="style.css" />
When using instance Styles then each component is styled when it is declared, that is it is similar to inline styling in html. The code for the same button as before would then look like this:
<mx:Button id="myButton" styleName="myButton" color="#ff0000" fontSize="16"
paddingLeft="20" paddingRight="20" />
It is also possible to use Actionscript 3.0 code to set the style for a component. For example to set the style for our button it is possible to use the id and set the style like this inside of a script block.
myButton.setStyle(“color”,“#ff0000″);
myButton.setStyle(“fontSize”, 16);
myButton.setStyle(“paddingRight”, 20);
myButton.setStyle(“paddingLeft”, 20);
Skinning
Although it is possible to change the visual layout of a component with style in many ways it has its limitations. What if for example one would like to totally change the appearance of a button, make it in circle shape instead of square shape. For that one would have to use skinning.
“Components skins are graphics or classes that you can specify for states and/or parts of a component that will completely replace the standard appearance of the component. Every component type will have different skins that you can set.”
(Programming Flex2, O´Reilly, 2007. page 333)
As an example I´m going to write a code which would apply skin to the up state, over state and down state for our button. This is an example off how it can be done inline but it is also possible to do it with stylesheet and AS3.
<mx:Button id="myButton" upSkin="@Embed(‘/assets/buttonUp.png')"
overSkin="@Embed(‘/assets/buttonOver.png')"
downSkin="@Embed(‘/assets/buttonDown.png')" />
In this example three png images are used to skin the button in those three states.
Flex 3 uses two scripting lanuage, MXML and Actionscript 3 .
MXML is a XML-based language so if you are familiar with XML or even XHTML the MXML shouldn’t be so unfamiliar. MXML can be written in any text-editor or XML-editor but the easiest way is to use Flex because of code hinting and auto tag closing. Like in XML each node has to have an open tag and a close tag like this: <mx:Label></mx:Label> but it is also allowed to write the same node like this: <mx:Label />. Each node can also have attributes like this: <mx:Label text=”My Label” font-color/>
Here is a little example of how to use MXML to make applicaton with one label and one button:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:VBox>
<mx:Label text="My Label" fontSize="18" />
<mx:Button label="My button" />
</mx:VBox>
</mx:Application>
To use AS3 along with MXML one has to nest it inside of a mx:Script block like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="initApp()">
<mx:Script>
<![CDATA[
private function initApp():void
{
myLabel.text = “My Label”;
myButton.label = “My Button”;
}
]]>
</mx:Script>
<mx:VBox>
<mx:Label id=”myLabel” fontSize=”18″ />
<mx:Button id=”myButton” />
</mx:VBox>
</mx:Application>
In the last code example AS3 is used to give the text property and label property of the Label and Button value instead of doing it inline as done in the first example.
To be able to use AS3 like this gives the developer a great power to build very complex web applications.
Flex is a platform where you can design, program and compile web applications. One can say that Flex is similar to Adobe Dreamweaver, that is you both have design view and a source (code) view
.
Design View (click to enlarge)
In design view the user can drag components into the design area from the components window. In the window above the components window is a navigator window. In there the user can navigate through his projects and select files from it. He can also add and delete projects. The Properties window gives the user a easy panel to style his components. The property window has tree views, one where all the most used properties are, one where properties are categorized and the third where properties are in alphabetical order.
Source view (click to enlarge)
In source view the user can code his application. To the left there is still the Navigator and below that is the Outline window shows a tree of all the components that the user has in his application. From there it is easy to navigate to a certain component in the program. This function is very convenient when programs become big.
In the bottom of the window is a area with several windows. The one most used is the problem window and the debug window. In the problem window you get information about coding errors and in debug window you get information when you are debugging the program. For example all traces are printed out in the debugging window.
A basic workflow for making a Flex application could look like this:
When you export a Flex application the Flex builder makes all the code and files for you. The only thing the user has to do is to upload those file to his server and the application is ready on the web.
Today I made a little application that displays the newest currency-rate for the icelandic krona. I thought it was a good idea because our beloved krona is in a free fall now and that is very inconvenient for me and my family.
Well. what I used to make this table was a component called TileList. With TileList you can easily arrange a table like this. You can manipulate the number of columns and their height and with. Each item in the tilelist is a so called component of an itemRenderer. Inside a item renderer you can add what ever component you like and it will be rendered for each item from the dataprovider which in this case is a xml file loaded with HTTPService.
I found out that to be able to load a xml file from another domain one has to make a little php script wich first reads the xml file and then again prints out another identical xml. In that way you are reading a file into Flex from the same domain as the application is located.
To see the code of the application just right click on it and select “View Source”
Yesterday I was struggling with making an email form in Flex. I managed to do one with a little help from the adobe Flex site. The form is now in the sidebar on this page, Feel free to try it out.
Flex has a validation system that is very easy to use. It has text validation, email validation, phone number validation ect. I made the email form in that way that the submit button will not be enabled (active) until all the three fields are validated. Then the user can send the form. In the PHP code i dont have to do any validation.
BUT, i have a problem. If the user tries to send a special icelandic (or danish) characters then i only receive total jabberish. I´ve before spent hours on dealing with xml and icelandic characters and that can be very annoying. Well I hope I will find the solution today.
You need a flash player
You can get it here!!