View States in Flex

In flex we have got a wonderful and amazing concept of states through which different views can be obtained dynamically for a single form. We need to share lots of information in a little space provided, because that would only help the viewer to be busy and interested in reading. To achieve those thing states really helps.

When you define a view state, you specify the changes, or overrides, from the base state to the new view state, or from any other view state to the new view state. As part of the view state, you can define the following overrides:

• Set the value of object properties
• Set the value of component styles
• Add or remove components
• Change the event handler assigned to an event

Simply saying states are used in adding, removing or customizing a component at the run time dynamically. The properties, style, position, event handling even the whole component can be changed or customized at run time through view states.

Here their is a simple example for working out with states



<?xml version="1.0" ?>
<!-- Simple example to demonstrate the States class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="*" width="400" height="334" borderColor="#44A50A" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#BF1F1F, #BF1F1F]">
<mx:Script>
<![CDATA[
import mx.controls.Alert;

private function checkLogin():void{
if(usernameTextInput.text==""||passwordTextInput.text=="")
Alert.show('user name and password are mandatory');
else if(usernameTextInput.text=="gowri"&&passwordTextInput.text=="sankar")
Alert.show('Hi '+usernameTextInput.text+'!, loggedin Successfully');
else
Alert.show(usernameTextInput.text+', You are not authenticated');
usernameTextInput.text=="";
passwordTextInput.text=="";
}

private function checkRegister():void{
if(usernameTextInput.text==""||passwordTextInput.text==""||conformTextInput.text=="")
Alert.show('user name, password and Conform password are mandatory');
else if(passwordTextInput.text!=conformTextInput.text)
Alert.show('password doesnot match');
else
Alert.show('Hi '+usernameTextInput.text+'!, You are registered');
usernameTextInput.text="";
passwordTextInput.text="";
conformTextInput.text="";
}
]]>
</mx:Script>
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:target>
<mx:FormItem id="conform" label="Conform:">
<mx:TextInput id="conformTextInput" displayAsPassword="true"/>
</mx:FormItem>
</mx:target>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}" name="title" value="Register" />
<mx:SetProperty target="{loginButton}" name="label" value="Register" />
<mx:SetEventHandler target="{loginButton}" name="click" handler="checkRegister()"/>
<mx:SetStyle target="{loginButton}" name="color" value="Blue"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:target>
<mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
</mx:target>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel layout="absolute" title="Login" id="loginPanel" verticalScrollPolicy="off" horizontalScrollPolicy="off" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" >
<mx:Form x="10" y="57" width="310" height="120" id="loginForm">
<mx:FormItem label="User Name" id="usernameTI">
<mx:TextInput id="usernameTextInput"/>
</mx:FormItem>
<mx:FormItem label="Password">
<mx:TextInput id="passwordTextInput" displayAsPassword="true" enabled="true"/>
</mx:FormItem>
</mx:Form>
<mx:Text x="10" y="-3" width="100%" text=" GSMail" enabled="true" color="#DFA20F" fontSize="19"/>
<mx:ControlBar>
<mx:LinkButton label="Need to Register?" id="registerLink" click="currentState='Register'" alpha="0.0"/>
<mx:Spacer width="114" id="spacer1"/>
<mx:Button label="Login" id="loginButton" click="checkLogin()"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>

The output of the program looks some thing like this

Here the login gets succuss if the user name is 'Gowri' and the password is 'sankar' that can be changed in the code at line number 11.

For new users to get register a link is provided at the left bottom through which the state of the application is changed. And a new text input appears in the form for password confirmation. if the password in both the fields matches a alert for registration is shown else error!

Here viewstates are used to jump between these two states.

Download source GSMailLogin.mxml here
Add Post To: | | | | | | | | |

RIA

Hi

This session will be about the history and growth of RIA. In this era of rich internet application. People are used to bookmark the website mostly which are beautiful and awesome. The latest technology tools help us in achieving the creation of more richest internet application. The most youngest child of RIA is flex which help the programmer to compile their design through code.

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems.

There are number of RIA widgets available to develop a glassy application. In the video below you can learn the development and need for internet for human.



The other RIA tools are
Openlaszlo - for presenting and editing raw XML data generated by PHP and other web services।

AJAX - HTML+XHTML+CSS+javascript
through this technology data fetch from the server can be done in the background through XMLHTTPRequest

XUL - XML user interface language is exclusively made for and by mozilla. Easy to learn for people with a background in web-programming and design.

WPF(Windows Presentation Foundation) - Microsoft Silverlite is a web-based subset of WPF that enables Flash like web and mobile applications with the same programming model as .NET applications.

Flex - As said earlier it helps in compiling surf from code. Literally it can also referred to be the successor of flash.

Flash player is the single most downloaded software in the history of internet. In 1999, it reached its 100 millionth download , but it got the brand name only in 1997 as Macromedia Flash Player 2 now it is Adobe Flash Player 10 (version 10.0.22.87).

Add Post To: | | | | | | | | |

In oss camp

On 13 and 14th of march 2009, open source software camp was conducted in chennai. Being a open source geek i was interested in participating in it. I came to know about this camp through chipkidz. Then a team was formed in the company to persent on RIA widget. I too got a chance to be a part of the team. Has i have got inspired by blogging. I choose to be a blogger, where i must blog all the events about the preparation of the camp. It was very interesting and i got to know many people in the company through this event. And attended the camp finally and that i was feeling proud to say 'I am a open source geek'. The camp inpired me a lot.
Add Post To: | | | | | | | | |

RIA widget library

The reason the familiarity of flex over other web designing tools is that, it was the first tool to compile swf file from code. Customized components can be created and flex can be mastered easily.
Some of the useful tips that i have gathered from kumaran to master flex are as follows:

• Don't use IDE, because IDE is for Rapid Application Development, so it will not be use for a learner. To learn one must first boycott the syntax and the class names.
  
• Debug, learning to debug without the help of a IDE debugger will improve your knowledge
• Store/ retrieve data try working with database make it more interactive
• learn xml
• built and execute lot of sample programs
• master MVC
• Differentiate component and container architecture 
• Become strong in basic widgets
• learn to integrate search engines to your application
• master oops
• test your project in different browser
• cookies and session ID and threading
• Customize your components in RIA+J2EE+web services

Add Post To: | | | | | | | | |

Overview of Leftouts

It was on 6th march 2009, their was a video session in which videos on working with basic flex components were played. One of those videos was about data binding. Lots of such interesting and simple examples could be found on abode's site in simple English.

Get those videos from
http://www.adobe.com/devnet/flex/videotraining/

After enjoying the weekend, On monday(9th mar), our team leader Sumi gave us some important tips in working with flex. Those things really helped us a lot in learning flex. The topics she specifically covered on that day are as follows

• Barcode generation
• Viewstack
• States

Barcode generation is implemented in billing process, Basically each product will have a price. product database will contain the information about the pricing of the corresponding item. Each character in the product name will be encoded with a specific value and for those values barcode will be generated and pasted on the product. The reverse process will happen will reading the barcode while billing and the price of the product is obtained from the database.
In the session with Mr. Kumaran we discussed about the achivements in last 25 days and works to be performed in the forthcoming 25 days. In the last 25 days the keywords are

• Creating blogs/websites
• Team structure
• Video resume
• road show

In the upcoming days the plan includes

• RIA widget Library
• OSS camp
• Social bookmarking
• Participating in Different user groups
  

Add Post To: | | | | | | | | |

Tip on Flex

Hi...

As i said earlier, I have started learning flex...

Now i am going to share what i learned in flex for this 2 days...

Its may more primitive, still let me share this tips...

1.Accordion panel:

This component is a evolution of tab bars added with some animations. By using this component lot of information can displayed on th eweb page, using very little space. Only sites that are short and crisp will be more attractive so this component will help those situations.

2. Link button:

Link button is a very old component which is already seen in all programming paradigms. But here the syntax slittly varies from those.

Usage:

onClick="navigateToURL(new URLRequest('ur link'),'qoutes')";

3.Repeator control:

Using this control we could get a shadow window effect, which is nothing but the parent page will be made 'not responging' and dimmed, then a small window pops up for ur responce. This will very useful while showing alert msg or err msg.

U can get lots of such examples from

http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

Add Post To: | | | | | | | | |

Lecturer by Murali and Kannan

Hi..

Today in the morning session Mr.Murali and Mr. Kannan gave a good intro lecturer on getting started with Flex.

Those thing that i grabbed from them comes as follows:

• First of all the output file formate of a flex project is .swf file and the files engaged in this project are .mxml and .as(Action script) files.
• RIA history grows like this
• Mainframe
• Desktop computing
• Web application
• and now its RIA
• Now web development jumped from flash to flex the reason behind this is...In flash scrips could be written but programming cannot be done.
• So in those days designing and programming are considered to be different.
• But now both got merged in flex so that programmers could design as well as program as web site.
• Flex can be connected to any kind of backend such as MySQL,postSQl,oracle through java.
• Its very simple to jump from java technology to flex by simply replacing the jsp part with flex component on the web server.
• Cairngorm architecture looks like this:
• flex store_dev
• Assets
• bin-debug
• com
• india
• tpt
• flex store
• buissnesss
• command
• control
• model
• view
• vo
• here the buissness logic are written in command directory and the event handeling and event listening are written in control directory.
• Cairngome
• Methodology for breaking up ur application by logic functions
• This is routinely referred to as MVC(Mode View and Control)
• pieces of architecture
• Model locator
• view
• front controller
• command
• delegate
• service

These are the things that i have gathered from them. Some of the informatiion that i have got may be even wrong because i might have lost concentration at some time. So please feel free to correct me....

Add Post To: | | | | | | | | |

Getting started with Flex 3.0

HI...

Flex is once again a web development IDE, which help in decreasing the client-server traffic by minimizing the request sent to the server from the client. Managing the client to perform those requests by itself. Since the usage as well as the technology plugged in with web getting rapidly multiplied, all this performance optimizers are required. Once such application helping in the grow of web development is Flex from Adobe. To feel the output of Flex visit www.nikeid.com which is developed using Flex. More such innovative, attractive, animated and glassy projects can be developed using Flex.


Add Post To: | | | | | | | | |

First Day on planet Ten

Hi

I am new to chipkidz and i have joint just yesterday(02-03-09). The most inspiring event here is blogging. Because through blogging we could share our ideas, improve our technical and communicating skills. This is my first blog.

Today i have collected some informations about advertisements and its features. Simply advertisement is the way to promote our ideas and products, so that customers could know about the product and its usage.

Advertisement :

An advertisement is simply a public notice meant to convey information and invite patronage or some other response. Advertising has two basic purposes: to inform and to persuade, and while these purposes are distinguishable both very often are simultaneously present.

Business :

Advantages:

1. Tool for sustaining honest and ethically responsible competition that contributes to economic growth in the service of authentic human development.

2. Informing people about the availability of rationally desirable new products, higher incomes and a more decent and humane way of life for all can be achieved.

3. Use advertising to communicate messages and new ideas.

Benefits :

1. Communicate directly with existing customers and new ones as well.

2. Maintain an easily managed, cost-effective mechanism to keep your existing audience informed.

Functional :

1. A linking URL must be submitted for each ad creative.

2. All standard placements may be animated with no looping restrictions.

3. Advertisements must not contain graphics that simulate interactivity without the functionality actually existing (for example:search boxes, pulldown menus, etc.).

4. .gif, .jpg, or .swf graphics files must be used.

Technical :

1. Plugin for adobe flash player.

2. Table for managing all Advertisements information.

Past/Present/Future :

In past, advertisements are done physically through printed materials like palm lets, notices, etc.,. Presently, Advertisements are done digitally through media, Internet. In future, Advertisements can be made more fancy and animated with promoted quality.

Add Post To: | | | | | | | | |