BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Archive for December, 2007

Using Inbuilt Validators Of Flex in Classic Style

Posted by Shardul Singh Bartwal on December 22, 2007

 Using Inbuilt Validators Of Flex in Classic Style

 classicvalidations.jpeg

In the flex you can find out many inbuilt Validators.But one of the important thing about using them is that if there is any error messaage on the submition of any button than how to fatch the error message related to the validator.Normally it just makes the border of our Input field red and nothing else.If you want to know what the error message than you have to go to that control and only on the mouse over of that you can see.But the most often need is to get the error message related to all input fields in just one Button’s click.Acheving it is very easy.For acheving this just copy and paste the code below.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init()”
 top=”15″ bottom=”15″ left=”15″ right=”15″ horizontalAlign=”center” verticalAlign=”middle” backgroundColor=”#ffffff” cornerRadius=”5″>
<mx:Style>
 Alert {
            color : #0f3177;
   title-style-name :”.alertTitle”;
   header-height:15;
   border-thickness: 1;
   drop-shadow-enabled: true;
   background-color: #ffffff;
   modalTransparency: 0.5;
   corner-radius :6;
   border-style :solid;
   header-colors : #90a4d1, #5970a0;
   footer-colors : #9db6d9, #ffffff;
   border-color : #5970a0;
   drop-shadow-color :#d1ddf7;
            modalTransparencyBlur:4;
            modalTransparencyColor: #DDDDDD;
            modalTransparencyDuration: 1000;
        }
</mx:Style>
<mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.collections.ArrayCollection;
   import mx.managers.CursorManager;
   import mx.validators.*;
   import mx.rpc.events.ResultEvent;
   import mx.events.ValidationResultEvent;
    
   [Bindable]
         private var validatorArr:Array;
       
         private var shipping:Boolean=false;
        
         private function init():void
        {
         validatorArr = new Array;
         validatorArr.push(nameTxtInputVld);
         validatorArr.push(birthDateFieldVld);
         validatorArr.push(emailTxtInputVld);
        } 
       
         private function funValidateForm(event:MouseEvent):void
        {
              var validatorErrorArr:Array = Validator.validateAll(validatorArr);
              var isValidForm:Boolean = validatorErrorArr.length==0;
              if(isValidForm)
              {
              Alert.show(“Validation Successful”,”Validation Summary !”);
     nameTxtInput.text=””;
              birthDateField.text=””;
              emailTxtInput.text= “”;
       }
        else
        {
          var err:ValidationResultEvent;
         var errorMessageArray:Array=[];
         for each (err in validatorErrorArr)
         {
           var errField:String = FormItem
           (err.currentTarget.source.parent.parent).label
           errorMessageArray.push(err.message);
         }
         Alert.show(errorMessageArray.join(“\n”),”Validation Summary !”);
             }
          }  
   ]]>
</mx:Script>
 <mx:StringValidator id=”nameTxtInputVld” source=”{nameTxtInput}” minLength=”3″ maxLength=”20″ property=”text” required=”true” requiredFieldError=”Please Enter Name.” tooShortError=”There should be minimum 3 characters in first name.”/>
 <mx:StringValidator id=”birthDateFieldVld” source=”{birthDateField}”  property=”text” required=”true” requiredFieldError=”Please Enter Birth Date.”/>
 <mx:EmailValidator  id=”emailTxtInputVld” source=”{emailTxtInput}” property=”text” required=”true” requiredFieldError=”Please Enter Email Address.” tooManyAtSignsError=”More than one @ symbol is not allowed.”/>

 <mx:HBox width=”100%” height=”100%” horizontalAlign=”center” verticalAlign=”middle” paddingBottom=”10″ paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ cornerRadius=”5″>

   <mx:VBox id=”mainVBox”  width=”300″ height=”180″ verticalGap=”10″ horizontalAlign=”center” verticalAlign=”middle” backgroundColor=”#8000ff” borderColor=”#ff0000″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off” cornerRadius=”5″ borderStyle=”solid”>
    <mx:Label text=”*** Applying Flex Validation In Classic Style ***” textAlign=”center” fontThickness=”6″ fontWeight=”bold” color=”#ff0000″/>         
          <mx:Form width=”100%” height=”100%” cornerRadius=”5″ defaultButton=”{submitBtn}”>
 
         <mx:HBox width=”100%” height=”5%” horizontalGap=”0″ horizontalAlign=”Center”>
          <mx:Text text=”Fields marked with (“/>
          <mx:Text text=”*” color=”red”/>
          <mx:Text text=”) are compulsory.”/>
         </mx:HBox>
      
           <mx:FormItem label=”Name:”>
              <mx:HBox width=”100%” horizontalAlign=”center” verticalAlign=”middle” horizontalGap=”1″>
              <mx:TextInput id=”nameTxtInput” restrict=”a-zA-Z” borderStyle=”solid” cornerRadius=”7″/>
                 <mx:Label text=”*” color=”red”/>
                 </mx:HBox>
         </mx:FormItem>
        
        <mx:FormItem label=”Birth Date:”>
            <mx:HBox width=”100%” horizontalAlign=”center” verticalAlign=”middle” horizontalGap=”1″>
                  <mx:DateField id=”birthDateField” yearNavigationEnabled=”true”/>
                   <mx:Label text=”*” color=”red”/>
                </mx:HBox>
           </mx:FormItem>
        
         <mx:FormItem label=”Email Id:”>
       <mx:HBox width=”100%” verticalAlign=”middle” horizontalGap=”1″>
        <mx:TextInput id=”emailTxtInput” restrict=”a-z0-9.@_” borderStyle=”solid” cornerRadius=”7″/>
          <mx:Label text=”*” color=”red”/>
        </mx:HBox>
        </mx:FormItem>
        
       <mx:HBox id=”buttonHBox” width=”100%”  height=”5%” horizontalAlign=”center” verticalAlign=”middle”>
                   <mx:Button id=”submitBtn” label=”Submit” buttonMode=”true” useHandCursor=”true”  click=”funValidateForm(event)”/> 
             </mx:HBox>
           
      </mx:Form>
   
         </mx:VBox>   
 
 </mx:HBox>            
 
</mx:Application>

Enjoy Flexing…………………..

Shardul Singh Bartwal 

Posted in Flex | 2 Comments »

What Is RIAs Exactly?

Posted by Shardul Singh Bartwal on December 16, 2007

What Is RIAs Exactly?

RIAs refers to ‘Rich Internet Applications’ in the Software market.I don’t think that any one can define this word exactly,but the major concerns which are important in this respect are following:-
1).These are the web Application which provides you general look and functionality like a desktop application over the browser.So there is no concept of installations etc.
2).With the RIAs it is a common Practice to transfer bulky data from the Application Server to the web client.But the important thing is that the state of the Application is preserved up to backing the Data to the Application Server.
3).Sendbox can be think as framework for running RIAs.Sendbox is set of Rules and Regulation to run securely any application. If one is going outside the Sendbox Security Mechanism then not possible to run it.
4). For handling such a responsible task at client end there is always a concept of Client Engine.

Why RIAs.?

As After coming through the different Architecture in the Software development currently with web browser. we are simply following the thin client.But with this Architecture, the RIA is one who provides the balance between the thin client and Fat Server(our Application Server).
Because this is the only RIA which transfer enough data to client,and defnetly  it improves the performance.
For the round trips like the HTML pages based application here is no place. Surely require the Server trips,but not every time.The Richness of the Presentation in RIA is unbeatable.

Tools to Develop RIAs:

  Already there were many Tools to develop it, but by the end of year 2007 there are too many options.All the big name are now here.Microsoft has already launched ‘Silver Light’.Adobe’s Flex is already having a good market.Open Laszlo was already performing well in the field.Ajax is also having the same approach and further more let see when will the Sun Micro-System going to launch it’s ‘JavaFx’ which is already announced by Sun.

Just enjoy RIAs……..

Shardul Singh Bartwal

Posted in Flex | Leave a Comment »

Custom ImagePresenter Component

Posted by Shardul Singh Bartwal on December 7, 2007

Custom ImagePresenter Component

This is the concept for the creating an Image Presentation component.As you have seen many Image Gallery playing different Images.This is for the same.You can use this small component for the same purpose and can give many features to this.Below is main logic for this and you can extend it up to any level.You can add any number of the images to the Array-Collection and it will show the images continuously.

Just copy and paste the code below,and put images in the folder structure as the path is used in the code below.

———————————————————————————————————————————

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml
 layout=”absolute” creationComplete=”init()”>
<mx:Script>
 <![CDATA[
  import mx.collections.ArrayCollection;
 
  [Bindable]
  private var selectedImageIndex:Number=0;
 
  [Embed(source=”/assets/productImg/h1.jpg”)]
  [Bindable]
  private var img1:Class;
 
  [Embed(source=”/assets/productImg/h2.jpg”)]
  [Bindable]
  private var img2:Class;
 
  [Embed(source=”/assets/productImg/h3.jpg”)]
  [Bindable]
  private var img3:Class;
   
    [Bindable]
  public var myDataArrayCollection:ArrayCollection = new ArrayCollection([
  {scene:”Image1″,source1:img1},
  {scene:”Image2″,source1:img2},
  {scene:”Image3″,source1:img3},
  ]);
 
  [Bindable]
  private var lengthOfDataSource:Number=myDataArrayCollection.length;
 
  private var timerId:Timer;
  
  private var countersceneIndex:Number=0;
 
    private function ReturnCountersceneIndex():Number
    {
     if(countersceneIndex<lengthOfDataSource-1)
     {
      for(countersceneIndex;countersceneIndex<lengthOfDataSource;countersceneIndex++)
      {
      countersceneIndex++;
      break;
      }
    return countersceneIndex;
     }
     else
     {
      countersceneIndex=0;
      return null;
     }
    }
     
  private function init():void
  {
   timerId = new Timer(1000);
              
   timerId.addEventListener(TimerEvent.TIMER , timerHandler);
  
   timerId.start();
  }
 
  private function timerHandler(event:TimerEvent):void
  { 
   imgscene.source=myDataArrayCollection.getItemAt(countersceneIndex).source1;
   
   imgscene.source=myDataArrayCollection.getItemAt (ReturnCountersceneIndex()).source1;
  }

 ]]>
</mx:Script>
<mx:HBox id=”imgGalary” width=”100%” height=”100%” paddingBottom=”25″ paddingTop=”25″ paddingLeft=”25″ paddingRight=”25″
 horizontalGap=”0″ horizontalAlign=”center” verticalAlign=”middle” backgroundColor=”#8c8c8c”>
 <mx:Box id=”boxImageHolder” width=”250″ height=”200″ borderColor=”#FF0000″ borderStyle=”solid” backgroundColor=”#000000″
   horizontalAlign=”center” verticalAlign=”middle”
   paddingBottom=”10″ paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″>
  <mx:Image id=”imgscene” source=”{myDataArrayCollection.getItemAt(selectedImageIndex).source1}” width=”200″ height=”150″/>
  <mx:Label id=”timeLabel” fontWeight=”bold” fontSize=”11″ width=”200″ textAlign=”center”/>
 </mx:Box>
</mx:HBox>
 
</mx:Application>
Enjoy Flexing…………………

Shardul Singh Bartwal

Posted in Flex | Leave a Comment »

Passing Data With Custom Event

Posted by Shardul Singh Bartwal on December 3, 2007

As being an event driven language Action Script provides the mechanism of sending any kind of object with the event.The concept is more important when we are supposing to get value of any varialbe of mxml into any another mxml which is far enough in the structure(Folder Structure)of our Application.It is very simple to create any custom event for the occurence of any particular event.Within the same parent folder in which your mxml containing the variable create a folder (let suppose with name ‘event’).In this mxml let suppose you are having a variable of arrayCollecton type its name is ‘myArrayCollection’ and it is already having some value.
Now you want to get this variable in any another mxml which is far from this.Then for doing this make one custom event ‘GetMyArrayCollectionEvent’ in the folder where your mxml(which is having that arrayCollection)is present.

Just create one action Script class file Copy and Paste the code below.
——————————————————————————————–
package myPro.events
{
 import flash.events.Event;
 
 public class GetMyArrayCollectionEvent extends Event
 {

  public var mybool:Boolean=true;
  public var myArrayCollection:ArrayCollection;
 
  public function PropertyThumbEvent  (type:String,myArrayCollection,mybool:Boolean=true):void
  {
   super(type);
   this.myArrayCollection = myArrayCollection;
   this.b=b ;
  }
 
  override public function clone():Event
  {
   return new GetMyArrayCollectionEvent(type,myArrayCollection,mybool);
  }
  
 }
}
——————————————————————————————–

Now at this mxml where ‘myArrayCollection’ is present First add Metadata as below :-
——————————————————————————————–
<mx:Metadata>
[Event(name=”myCustomEvent”,type=”myPro.events.GetMyArrayCollectionEvent”)]
</mx:Metadata>
——————————————————————————————–

Again from the same mxml just dispatch one event i.e. as:-

——————————————————————————————–
dispatchEvent(new GetMyArrayCollectionEvent(“myCustomEvent”,myArrayCollection,true));

——————————————————————————————–
One thing noticable here is that here ‘myCustomEvent’ is the name of event which can  be any variable name,and ‘GetMyArrayCollectionEvent’ is the type of the event.
Now on the mxml where you want to get this variable just get the event and with this event you will find ‘myArrayCollection’.You can just see it by tracing i.e.  
      trace(event.myArrayCollection).

Now you can do any thing with this collection as per your requirement.
Enjoy Flexing………………

Posted in Flex | 3 Comments »