Wednesday, August 19, 2009

Working Of Struts 2 Hello World


In my previous post on Getting started with struts 2, i have explained about the configuration of eclipse, the localhost server and the folder structure of a hello world program. Now let me explain the flow of the project and its working of the struts-blank project.

Struts is purely based on the Model- View- Contoller (MVC) design pattern. It is one of the best and most well developed design patterns in use. By using the MVC architecture we break the processing in three sections named Model, the View, and the Controller.

The struts container first of all reads the WEB-INF/web.xml file which instructs the server to use the required filter and mapping conditions. This is the file which has got the welcome list tag. You must specify the file name in the welcome-list tag, whichever you want as the index file for your project.

In struts application we have another xml file which is a Struts configuration file named as struts.config.xml. The name of this file can be changed. The name of the struts configuration file can be configured in the web.xml file. This file is placed under the WEB-INF directory of the web application. It is an XML document that describes all or part of Struts application. In our project it is nothing but the struts.xml file which include the example.xml file. These two xml files acts as the controller. When ever a action is called, the control flow to struts.xml and finds the corresponding class file linked to that action. The class files are the compiled form of java file which are the actual performer in the project. These file contains the getter setter methods and the database handling codes. Generally these java files are called as the Model. Every function in the class has got the SUCCESS and FAILURE, depending upon the result the corresponding jsp files are linked in the controller. Those jsp files are called as View. In the run time controller acts as the interface between the model and view.

In this Hello world, first of all the web.xml file is called, that tells
org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter as filter and the index.html as welcome file. In index.html a action is being called, the corresponding class file(java page - model) and the result page(jsp page - view) will be found in the struts.xml file. Now the HelloWorld.java file in the WEB-INF/example folder will be executed because helloworld.action is called from index.html. In HelloWorld.java the string 'MESSAGE' is assigned to a value by retriving it from the package.properties file through getter and setter methods. Then the output of the program is show in the HelloWorld.jsp file as mentioned in the struts.xml.

The same control flow applies for all the Complex project, first try to run this project and understand its flow which will make you feel comfortable when handling complex projects. Lot more example are available in the same pack downloaded from Apache struts. Try all those examples. Get more details and simple explanations on struts from

Thursday, June 25, 2009

Getting Started with Struts - Hello World

To get a basic knowledge and introduction about Struts 2, You can read my previous post on Struts 2, now i have planned to write a post on getting started with struts 2 for Beginners. When i started Learning Struts, as a regular thing a googled for information, but unfortunately i ended up in flustration. No site gave me fulfleged infomation on getting kick started with Struts. But i believe you could get enough information from the following article.

I prefer eclipse IDE as the best for development purpose so i have used eclipse, you could get one from eclipse.org. Coming to the topic, for writing a hello world in struts i insist you to make use of the struts-blank package, so that you need not worry about the folder structures needed to follow in the framework. On understanding the first program you can get familiar with those thing. Download the Struts-Blank package, in this link you could find lots of distribution, But don't get confused with that. Choose the latest stable release, its only up to you whether to download full struts or only the application(Depends on your internet Speed!!!).

Unzip the downloaded package, in that you could find a file named struts2-blank-2.1.6.war import the file in your Eclipse IDE. You could find import option in the File->import in Eclipse. On Clicking on import, You could find a dialog asking for the type of file to import, select the war file inside the web folder or simply type war in the text box. then you will be asked for the location of the war file and a project name, after finishing that list of libraries will be shown, for an hello world those libraries are not needed. So you can skip that dialog and press Finish. And thats it your project is ready to launch.

Here Goes the snap shots:



To run a J2EE project you need a server that can be either Apache or JBoss or asny other that eclipse support. You can get apache or Jboss and install it. I have used JBoss for my application but apache is the default and popular one. But configuring the servers both covers for the same procedure.In the servers tab, right click and select new->server. You will be shown a list of servers Eclipse supports.
Select the server you have installed with the correct version, and in the next screen you will be shown the port number and other information how the server is going the run. And in the next screen you can click finish and now the right click on the project name and select "Run as"->"Run on server".
For the first Time you will be asked to choose the server to run, in that dialog a server that you have configured in the last step will be shown and you can check the option "Always use this server" so that from the next you will not be asked for confirmation on server. Then Click finish in the next dialog.
The server will start and You can see your hello world running.

You can find the working and logic beind the Struts-blank2 project in my following blog.

Struts 2


Apache Struts 2 is an elegant, extensible framework for creating enterprise-ready Java web applications. The framework is designed to streamline the full development cycle, from building, to deploying, to maintaining applications over time.

Apache Struts 2 was originally known as WebWork 2. After working independently for several years, the WebWork and Struts communities joined forces to create Struts. This new version of Struts is simpler to use and closer to how Struts was always meant to be.

You can get more information about struts and struts itself from http://struts.apache.org/

Apache Struts is an open-source framework that is used for developing Java web application. Originally developed by the programmer and author Craig R. McClanahan, this was later taken over by the Apache Software Foundation in 2002. Struts have provided an excellent framework for developing application easily by organizing JSP and Servlet based on HTML formats and Java code. Strut1 with all standard Java technologies and packages of Jakarta assists to create an extensible development environment. However, with the growing demand of web application, Strut 1 does not stand firm and needs to be changed with demand. This leads to the creation of Strut2, which is more developer friendly with features like Ajax, rapid development and extensibility.

Struts is a well-organized framework based on MVC architecture. In Model-View-Controller Architecture, Model stands for the business or database code, View represents the page design code and the Controller for navigational code. All these together makes Struts an essential framework for building Java applications. But with the development of new and lightweight MVC based framworks like Spring, Stripes and Tapestry, it becomes necessary to modify the Struts framework. So, the team of Apache Struts and another J2EE framework, WebWork of OpenSymphony joined hand together to develop an advanced framework with all possible developing features that will make it developer and user friendly.

Strut2 contains the combined features of Struts Ti and WebWork 2 projects that advocates higher level application by using the architecture of WebWork2 with features including a plugin framework, a new API, Ajax tags etc. So the Struts communities and the WebWork team brought together several special features in WebWork2 to make it more advance in the Open Source world. Later the name of WebWork2 has changed to Struts2. Hence, Apache Strut 2 is a dynamic, extensible framework for a complete application development from building, deploying and maintaining.

Wednesday, May 27, 2009

Increase Ur Internet Speed


(This thing works good... But I am Not Sure about the security issues.)

You Can:

  • Increase your browsing experience
  • Play online games LAG free
  • Load videos almost instantly
  • Turn your slow internet connection into Broadband DSL or even T1
  • Download anything faster with our "intelligent packet configurator"
  • Increase Speeds Up To 375% Faster!
PLEASE NOTE: Only works for Mozilla Firefox

1) Open Mozilla Firefox.

2) In addreas bar type: "about:config"
You will be warned here, If you are dare enough just proceed!!!

3)Look for were it says "network.http.pipelining" to TRUE
(Double Click it until it says TRUE)
Scroll down a lot to find it out or pressing 'n' will make the process easy on the browser.

4)Look for "network.http.proxy.pipelining" to TRUE
(Same way as stated above)

5) Now. Right-Click Anywere then click "Create New" Then "Integer". Name it "nglayout.initialpaint.delay"




Then Click Ok,then put the number "0" (Zero) in the next box



6) Click OK,

7) Restart Firefox.

8) Feel The Difference in Speed

Google Transliteration


Google is Simply Amazing. Can anyone stop them from their rapid growth, No one!! . They are really unbeatable. They are very innovative, i guess they will beat Apple soon. Today i was searching for a Tamil transliteration, I could not use orkut or blogger for this transliteration because i have not yet installed Tamil fonts in the system. So i googled and the very first link took me to the wonder. And this is the link.




It is a very simply page just like their all other services, But they are very power full. That page is specially designed from Indian languages. It has got the options to transliterate in Hindi, Bengali, Gujarati, Marathi, Nepali, Tamil, Telugu, Kannada, Malayalam. Its Cool.
The speciality in this tool is the use of the bookmark let. If the specific link is bookmarked for each of the languages. This tool can be used in any web page. Different bookmarks are provided depending on the Browser and the language required.YOu can get those stuffs here.




But the drawback here is this tool works only in the text boxes not even in the rich text box. Lets wait for the updated version .



Monday, May 25, 2009

Adobe CS4


        Adobe Creative Suite (CS) is a collection of graphic design, video editing, and web development applications made by Adobe Systems. The collection consists of Adobe's applications (e.g., Photoshop, Acrobat, InDesign), that are based on various technologies (e.g., PostScript, PDF, Flash). The latest version, Adobe Creative Suite 4 (CS4), was announced on September 23, 2008 as the successor to Adobe Creative Suite 3. It was officially released on October 15, 2008.

                        All applications in CS4 feature the same user interface, with a new tabbed interface for working with concurrently running Adobe CS4 programs where multiple applications can be opened inside multiple tabs contained in a single window. It was announced that nVidia CUDA technology is now available via 3rd party plugins which will accelerate H.264 video encoding.
Adobe CS4 is also developed to perform better under 64-bit and multi-core processors. On Windows, Adobe Photoshop CS4 runs natively as a 64-bit application, and although they are not natively 64-bit applications, Adobe After Effects CS4 and Adobe Premiere Pro CS4 have been optimized for 64-bit computers. However, Adobe has stated that no 64-bit version of CS4 will be available for Mac OS X. In early testing of 64-bit support in Adobe Photoshop CS4, overall performance gains ranged from 8% to 12%. Those who work with extremely large files may realize noticeably greater gains in performance, in some cases as dramatic as ten times the previous speed. This is because 64-bit applications can address larger amounts of memory and thus result in less file swapping — one of the biggest factors that can affect data processing speed.
 
PRODUCTS INCLUDED IN THE LIST ARE:
  • Adobe Acrobat 9 Professional
  • Adobe After Effects CS4
  • Adobe Contribute CS4
  • Adobe Dreamweaver CS4
  • Adobe Encore CS4
  • Adobe Fireworks CS4
  • Adobe Flash CS4 Professional
  • Adobe Illustrator CS4
  • Adobe InDesign CS4
  • Adobe Illustrator CS4
  • Adobe InDesign CS4
  • Adobe OnLocation CS4
  • Adobe Photoshop CS4
  • Adobe Photoshop CS4 Extended
  • Adobe Premiere Pro CS4
  • Adobe Soundbooth CS4
SOME OF THEIR ICONS:




Friday, April 17, 2009

Adobe AIR


Adobe integrated runtime is a cross-platform environment for building rich internet application using Adobe flash, Adobe flex , HTML and AJAX that can be deployed as a desktop application. This environment helps the developers to use their web development skills, tools and codes to develop a application that runs without the support of a browser.

Important Dates:
Air, once called as Apollo gave extension for developing application with the flex framework on March 19, 2007.
A stable Linux version of AIR was released on October 1, 2007.
Adobe AIR 1.1 was released on June 16, 2008.

Both the deployment paradigms provide advantage as well as disadvantage. Say, for a rich internet application developed in browser doesn't need any installation, but the application that is developed using flex must be downloaded, checked for certificate and finally installed in the desktop. In the same way a the user can get lots of freedom in accessing the file in his local system using the application developed in AIR since it s in local, on the other hand a browser application has got lots of restriction and security issues in accessing and storing data in the local.



AIR applications can operate offline, and then activate further functionality or upload data when an active Internet connection becomes available.

Thursday, April 16, 2009

<STYLE> <DIV> <SPAN>

<div> and <span> are two different useful and powerful tools when dealing with cascading style sheet. Both the tags are used to describe the contents that cannot be properly described by other HTML tags because these tags supports additional formatting capabilities both for inline elements and block elements.
On the other hand <style> tag provides a way to define style rules within the documents <head> tag. The style rules may help the developers to set the visual attributes like color,size,algnments to the elements that are displayed.

<DIV>
Div (short for division) divides the content into individual sections. Each section can then have its own formatting, as specified by the CSS. Div is a block-level container, meaning that there is a line feed after the tag.
For example, if we have the following CSS declaration:
.large { color: #00FF00; font-family:arial; font-size: 4pt; }
The HTML code
<div class="large"> This is a DIV sample. </div>
gets displayed as
This is a DIV sample.

<Span>

Span is similar to div in that they both divide the content into individual sections. The difference is that span goes into a finer level, so we can span to format a single character if needed. There is no line feed after the tag.
For example, if we have the following CSS declaration:
.largefont { color: #0066FF; font-family:arial; font-size: 6px; }
The HTML code
Span is not at the <span class="largefont">block level.</span>
gets displayed as
Span is not at the block level.

Differences and default behavior

div and span differ from each other in one regard. In standard HTML, a div is a block level elements (and so visually isolates a section of a document on the page, in the same way as a paragraph) whereas a span is an inline element (for containing a piece of information inline with the surrounding text). In practice, even this feature can be changed by the use of CSS.

<STYLE>

Whenever a browser reads a style sheet, it will format the document according to it. In the early version of html, it is only used to markup the text. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags. But as the HTML grown with new tags and attributes(such as font and color), it become more complicated for a browser to differentiate tag and text.

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0. All major browsers support Cascading Style Sheets.
Usage

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag.
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style></head>

Inline Styles

An inline style should be used when a unique style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style=" margin-left: 20px"> This is a paragraph </p>

Monday, April 6, 2009

Train Scheduler in Flex

This component is developed to illustrate the use and usage of most of the basic components.
The basic components that are used in this application are :
  1. Labels
  2. Image box
  3. Combo box
  4. Canvas
  5. Check boxes
  6. Timer
  7. and Datagrid
The output of the application gets a look as

This is a simple example which gives us some detailed idea about the data binging between components. The check boxes in the canvas gets exchanged based upon the event of combo box.
A timer runs getting the local time from the system. Then a datagrid gets input from a xml file and shows it.
And the source for the above application comes here.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="white" backgroundImage="@Embed(source='background.jpg')" alpha="0.49" cornerRadius="5" themeColor="#1884C9" xmlns:local="*" creationComplete="showTime()">
<mx:XMLList xmlns="" id="trainDetails">
<trains>
<name>bangalore Mail</name>
<number>2352</number>
<picture>vidhana-soudha-in-bangalore.jpg</picture>
</trains>
<trains>
<name>Kovai Express</name>
<number>4545</number>
<picture>kovai.jpg</picture>
</trains>
<trains>
<name>Nizamuddin Express</name>
<number>9320</number>
<picture>nizamiddin.jpg</picture>
</trains>
<trains>
<name>pandyan Express</name>
<number>2548</number>
<picture>panyan.jpg</picture>
</trains>
<trains>
<name>Rockfort Express</name>
<number>5896</number>
<picture>rockfort.jpg</picture>
</trains>
<trains>
<name>Mumbai Express</name>
<number>8569</number>
<picture>mumbai.jpg</picture>
</trains>
<trains>
<name>Cochin Express</name>
<number>1201</number>
<picture>cochin.jpg</picture>
</trains>
<trains>
<name>Secundrabad Express</name>
<number>8523</number>
<picture>secundrabad.jpg</picture>
</trains>
</mx:XMLList>

<mx:Script>
<![CDATA[
import mx.formatters.DateFormatter;
import mx.controls.Alert;

private var arrive:Array;
private var departure:Array;
private var ticker:Timer;
[Bindable] private var time:String;

public function showTime():void
{
var currentTime:Date = new Date();
var timeFormat:DateFormatter = new DateFormatter;
timeFormat.formatString = "KK:NN:SS"; //"HH:NN:SS" for 24hr clock
time=currentTime.hours+":"+currentTime.minutes+":"+currentTime.seconds;
ticker = new Timer(1,1);
ticker.addEventListener(TimerEvent.TIMER_COMPLETE,onTimerComplete);
ticker.start();
}

public function onTimerComplete(event:TimerEvent):void{
showTime();
}

private function reshedule(event:Event):void{
arrive=arrivalForm.getChildren();
departure=departureForm.getChildren();
if(schedulerCB.selectedLabel=="Move to Departures"){
for each(var aname:CheckBox in arrive){
if(aname.selected==true){
arrivalForm.removeChild(aname);
departureForm.addChild(aname)
aname.selected=false;
}
}
schedulerCB.selectedItem=action[0];
}
else if(schedulerCB.selectedLabel=="Move To Arrivals"){
for each(var dname:CheckBox in departure){
if(dname.selected==true){
departureForm.removeChild(dname);
arrivalForm.addChild(dname);
dname.selected=false;
}
}
schedulerCB.selectedItem=action[0];
}
}

private function selectAll(event:Event):void{
if(event.currentTarget.id=="arrivalAllLB"){
arrive=arrivalForm.getChildren();
for each(var status:CheckBox in arrive)
status.selected=true;
}
else{
departure=departureForm.getChildren();
for each(var status:CheckBox in departure)
status.selected=true;
}
}

private function selectNone(event:Event):void{
if(event.currentTarget.id=="arrivalNoneLB"){
arrive=arrivalForm.getChildren();
for each(var status:CheckBox in arrive)
status.selected=false;
}
else{
departure=departureForm.getChildren();
for each(var status:CheckBox in departure)
status.selected=false;
}
}
]]>
</mx:Script>

<mx:Array id="action">
<mx:Object label="--SELECT--"/>
<mx:Object label="Move To Arrivals"/>
<mx:Object label="Move to Departures"/>
</mx:Array>
<mx:Canvas width="1328" height="658">
<mx:ComboBox x="414" y="109" id="schedulerCB" dataProvider="{action}" change="reshedule(event);" borderColor="#338CCA" color="#E88FA0"/>
<mx:Text x="164" y="43" text="SOUTHERN RAILWAYS TRAIN SCHEDULE " fontSize="36" fontFamily="Georgia" width="803" textDecoration="underline" fontStyle="italic" color="#F56C21" height="58"/>
<mx:Image x="57" y="25" source="Indian_Railways_logo.png"/>
<mx:Panel title="Train Details" paddingTop="10" paddingLeft="10" paddingRight="10" x="817" y="111" height="396" borderColor="#BA8383" width="501">
<mx:DataGrid id="databaseDG" width="450" height="100%" rowCount="5" dataProvider="{trainDetails}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="name"/>
<mx:DataGridColumn dataField="number" headerText="number"/>
</mx:columns>
</mx:DataGrid>

<mx:Form width="455" height="180" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:HBox width="435" height="163" >
<mx:VBox>
<mx:FormItem label="Individual Train Details" fontWeight="bold" fontSize="12">
</mx:FormItem>
<mx:FormItem label="Train Name" fontSize="12">
<mx:Label text="{databaseDG.selectedItem.name}" width="151"/>
</mx:FormItem>
<mx:FormItem label="Train Number" fontSize="12">
<mx:Label text="{databaseDG.selectedItem.number}"/>
</mx:FormItem>
</mx:VBox>
<mx:Image source="{databaseDG.selectedItem.picture}" width="176" height="140"></mx:Image>
</mx:HBox>
</mx:Form>
</mx:Panel>
<mx:Canvas id="arrivalCan" x="146" y="148" width="312" height="460">
<mx:Form id="arrivalForm" x="15" y="89" width="276" height="361" backgroundAlpha="1.0" backgroundColor="gray" borderColor="#B20808" color="#850303">
<mx:CheckBox id="bangloreCB" label="Bangalore Mail" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
<mx:CheckBox id="kovaiCB" x="52" y="58" label="Kovai Express" color="#FFFFFF" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1"/>
<mx:CheckBox id="nizamCB" x="47" y="217" label="Nizamuddin Express" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
<mx:CheckBox id="pandyCB" x="47" y="302" label="Pandyan Express" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
</mx:Form>
<mx:Label x="78" y="10" text="ARRIVALS" fontSize="27" fontWeight="bold"/>
<mx:Label x="62" y="61" text="Select:" fontSize="12" fontWeight="bold" color="#1C6DBF"/>
<mx:LinkButton id="arrivalAllLB" x="126" y="59" label="All" alpha="0.0" color="#1C6DBF" click="selectAll(event); "/>
<mx:LinkButton id="arrivalNoneLB" x="190" y="59" label="None" alpha="0.0" color="#1C6DBF" click="selectNone(event);"/>
</mx:Canvas>
<mx:Canvas id="departureCan" x="483" y="148" width="326" height="460">
<mx:Form id="departureForm" x="22" y="81" width="284" height="369" backgroundAlpha="1.0" backgroundColor="gray" borderColor="#B20808" color="#850303">
<mx:CheckBox id="rockfortCB" x="53" y="22" label="Rockfort Express" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
<mx:CheckBox id="mumbaiCB" x="53" y="103" label="Mumbai Express" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
<mx:CheckBox id="cochinCB" x="53" y="185" label="Cochin Express" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
<mx:CheckBox id="secudCB" x="53" y="266" label="Secundrabad Mail" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
</mx:Form>
<mx:Label x="52" y="10" text="DEPARTURE" fontSize="28" fontWeight="bold"/>
<mx:Label x="37" y="59" text="Select:" fontSize="12" fontWeight="bold" color="#1C6DBF"/>
<mx:LinkButton id="departureAllLB" x="101" y="57" label="All" alpha="0.0" color="#1C6DBF" click="selectAll(event);"/>
<mx:LinkButton id="departureNoneLB" x="165" y="57" label="None" alpha="0.0" color="#1C6DBF" click="selectNone(event);"/>
</mx:Canvas>
<mx:Label x="949" y="42" text="TIME : {time}" fontSize="34" fontWeight="bold" textDecoration="underline"/>
</mx:Canvas>
</mx:Application>


If you find it difficult to trace the code, download the source of trainscheduler.mxml here and arrange the supporting file like the images for the different trains. Then that example must work fine.

Work it out and dont forget to comment me ..

Thursday, April 2, 2009

Video Resume

April 1st, End of the first month after joining in chipkidz. To evaluate myself a video session was shoot to record my experience and knowledge i gain working in chipkidz. Here comes the video.

Thursday, March 26, 2009

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

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).

Tuesday, March 17, 2009

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.

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

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

Friday, March 6, 2009

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


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....

Wednesday, March 4, 2009

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.

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.