Friday, January 1, 2010

Flex examples - Calendar ( datachooser) border thickness and color assigning

Using dateChooser now we are going to create a calendar and we are going to set the color for the border of the calendar and we are going to give thickness for the calendar.

Here slider is used to increase the thickness for the calendar's border and colorpicker is used for choosing the color for the calendar's border.

Here is the code,


<mx:application mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="vertical" verticalalign="middle" backgroundcolor="white">
<mx:applicationcontrolbar dock="true" paddingtop="100" paddingbottom="100">
<mx:hbox width="100%" height="100%" horizontalalign="center" paddingtop="10" paddingbottom="10" paddingleft="10" paddingright="10" borderthickness="5" bordercolor="black" borderstyle="solid">
<mx:form stylename="plain">
<mx:formitem label="Change the color:">

</mx:colorpicker>
<mx:formitem label="Change the border Thickness:">
<mx:hslider id="borderController" minimum="1" maximum="5" value="1" snapinterval="1" tickinterval="1" livedragging="true">
</mx:hslider>
</mx:formitem>
<mx:spacer width="50">
<mx:datechooser bordercolor="{borderColor.selectedColor}" borderthickness="{borderController.value}">
</mx:datechooser>
</mx:spacer>
</mx:formitem>
</mx:form>
</mx:hbox>
</mx:applicationcontrolbar>
</mx:application>


See the demo


Flex Examples - Calendar ( Datachooser) Border Thickness and Color Assigning

Saturday, November 7, 2009

Flex examples - How to implement a Form and FormItem through actionscritp

To create a form using actionscript we will be using a code like this

var LoginForm:Form = new Form();

and for FormItem

var userItem:FormItem = new FormItem();
var passwordItem:FormItem = new FormItem();

In this example two text box is created in actionscript and added to the FormItem like

userItem.addChild(userBox);
passwordItem.addChild(passwordBox);

Then these two FormItem will be added to a Form which we created in the top by

LoginForm.addChild(userItem);
LoginForm.addChild(passwordItem);

At last the Form will be added to a container say HBox or VBox or any container

The full source code is


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:VBox id="container" width="100%" height="100%">

</mx:VBox>
<mx:Script>
<![CDATA[
import mx.controls.TextInput;
import mx.containers.FormItem;
import mx.containers.Form;

private function init():void
{
var LoginForm:Form = new Form();

var userItem:FormItem = new FormItem();
userItem.label="Username";
var userBox:TextInput=new TextInput();
userItem.addChild(userBox);
LoginForm.addChild(userItem);

var passwordItem:FormItem = new FormItem();
passwordItem.label="Password";
var passwordBox:TextInput=new TextInput();
passwordItem.addChild(passwordBox);
LoginForm.addChild(passwordItem);

container.addChild(LoginForm);
}
]]>
</mx:Script>
</mx:Application>

See how it works