Flex Blog: 2012

Setting Favicon in Flex

We need to put the favicon image in the root folder of project. The favicon image is used to give image to the browser tab and in favorites list..

After adding this image in the root. We may have to add the following line in the index.html page below :

<head>

</head>

Simple Encryption and Decryption

Monoalphabetical Substitution Cipher in Flex Monoalphabetic Substitution Cipher is a encryption algorithm which was used in old times. In this algorithm each letter is replaced with another letter according to the cipher alphabet based on the key word.
Look at the following example:
key word: leila
PlainText Alphabet: abcdefghijklmnopqrstuvwxyz
CipherText Alphabet: leiabcdfghjkmnopqrstuvwxyz
Following is the ActionScript code for the ciphering by monoalphabetic algorithm.

import mx.collections.ArrayCollection;

private var key:String;
private var plainText:Array ;
private var txtPlainWord:ArrayCollection = new ArrayCollection(); 
private var arrSplit:Array = new Array();
private var arrText:Array  = new Array('a', 'b', 'c', 'd', 'e','f','g','h',
                                   'i','j','k','l','m','n','o','p','q','r',
                                      's','t','u','v','w','x','y','z'); 
  
/* get_key function is for omitting the repeated letters 
of the Key and find equal plain and cipher letter*/
private function get_key():void
{
    var flag:Boolean = false;

    key = txtKey.text.toLowerCase();
    plainText = new Array()
    txtPlainWord.removeAll();
   
    //omitting the repeated letters of the Key 
    for (var i:int= 0; i<= key.length-1 ; i++ )
    {
      if (i == 0)
         plainText.push(key.charAt(0));
      else
      { 
         for (var idx:int = 0; idx<= plainText.length -1 ; idx++)
         {
            if (plainText[idx].toString() == key.charAt(i).toString())
            {
               flag = true;
               break;
            }
            else 
               flag = false;
        }
        if (flag == false) 
               plainText.push(key.charAt(i));
      }
    }
   
    // adding modified Key and find equal plain and cipher letter
    for (var ix:int= 0; ix<= arrText.length-1 ; ix++ )
    {
       for (var J:int = 0; J<= plainText.length -1 ; J++)
      {       
         if (plainText[J].toString() == arrText[ix].toString())
         {
           flag = true;
           break;
         }
         else 
           flag = false;
      }
      if (flag == false) 
      plainText.push(arrText[ix]);
    }
   
    for (var obj:int; obj<= arrText.length - 1 ; obj++)
    {
      var obj1:Object = new Object();
      obj1.plain = arrText[obj];
      obj1.cipher = plainText[obj];
      txtPlainWord.addItem(obj1)
    }
}
  
private function do_decrypt():void
{
 get_key();
 txtPlainText.text = txtPlainText.text.toLowerCase(); 
 arrSplit = txtPlainText.text.split(' ');
  
 for (var i:int= 0; i<= arrSplit.length-1 ; i++ ) 
 {
    var txtSplit:String = arrSplit[i];
    for (var obj:int= 0; obj<= txtSplit.length-1 ; obj++ )
    {
       for (var idx:int = 0 ; idx<= txtPlainWord.length-1; idx++)
       {
          if (txtPlainWord.getItemAt(idx).plain == txtSplit.charAt(obj))
          txtCipherText.text = txtCipherText.text +       
                               txtPlainWord.getItemAt(idx).cipher;
       }
    }
    txtCipherText.text = txtCipherText.text  + " ";
  }
}
  
private function do_encrypt():void
{ 
 get_key();
 txtCipherText.text = txtCipherText.text.toLowerCase();
 arrSplit = txtCipherText.text.split(' ');
  
 for (var i:int= 0; i<= arrSplit.length-1 ; i++ ) 
 {
   var txtSplit:String = arrSplit[i];
   for (var obj:int= 0; obj<= txtSplit.length-1 ; obj++ )
   {
     for (var idx:int = 0 ; idx<= txtPlainWord.length-1; idx++)  
     {
       if (txtPlainWord.getItemAt(idx).cipher == txtSplit.charAt(obj))
       txtPlainText.text = txtPlainText.text + 
                           txtPlainWord.getItemAt(idx).plain;
     }
   }
   txtPlainText.text = txtPlainText.text  + " ";
 }
}

Following is the monoalphabetic cipher MXML codes in Flex.

<mx:Canvas width="500" height="203"  borderStyle="inset">
   <mx:HBox x="10" y="10" height="25" >
      <mx:Label  text="Key:" height="100%" width="100" fontSize="11"/>
      <mx:TextInput id="txtKey" height="100%" width="100%"/>
   </mx:HBox>
   <mx:HBox x="10" y="35" width="400">
      <mx:Label text="Plain Text:" height="100%" width="100" 
                 fontSize="11"/>
      <mx:TextInput  id="txtPlainText" height="100%" width="100%"/>
   </mx:HBox>
   <mx:HBox x="10" y="57" width="400">
      <mx:Label text="Cipher Text:" height="100%" width="100" 
                 fontSize="11"/>
      <mx:TextInput  id="txtCipherText" height="100%" width="100%"/>
   </mx:HBox>
   <mx:Button id= "btnDecrypt" label="Decrypt" click="do_decrypt();"/>
 <mx:Button id="btnEncrypt" label="Encrypt"  click="do_encrypt();">
 <mx:Button id="btnReset" label="Clear"  
                click="txtCipherText.text = ''; txtPlainText.text = ''"/>
</mx:Canvas>

Following is the screen shot of monoalphabetic cipher algorithm in flex to show how the codes work.

TileList as a Photogallery

The TileList control displays list of items which are tiled columns and rows. The TileList control is for displaying a list of images which needs itemRenderer to be used to locate the image because the default itemRenderer of TileList is TileListItemRenderer and shows olnly text of data provider's list and icons.
In the source code below it is shown how to display images in a TileList control.

<mx:XML id="xml" source="gallery.xml" />
<mx:XMLListCollection id="xmlListColl" source="{xml.image}" />

<mx:TileList id="tileList" width="100%"
            dataProvider="{xmlListColl}"
            columnWidth="160"
            rowHeight="180"
            themeColor="haloSilver"
            maxRows="2"   
            maxColumns="1"
            itemClick="tileList_itemClick(event);" 
            borderColor="white" verticalScrollPolicy="off">
   <mx:itemRenderer>
     <mx:Component>
       <mx:Panel>
        <mx:Image source="{data.@source}" width="130" height="120" />
       </mx:Panel>
    </mx:Component>
  </mx:itemRenderer>
</mx:TileList>

The following shows how to control the click event of the images and give some effects to the imges:

import mx.events.ItemClickEvent;
import mx.effects.Resize;
import mx.events.ResizeEvent;
import mx.events.ListEvent;
import mx.controls.Image;
import mx.managers.PopUpManager;
private var img:Image;

private function tileList_itemClick(evt:ListEvent):void {
                img = new Image();
                img.maintainAspectRatio = true;
                img.addEventListener(Event.COMPLETE, evtComplete);
                img.addEventListener(ResizeEvent.RESIZE, evtResize);
                img.addEventListener(MouseEvent.CLICK, evtClick);
                img.source = evt.itemRenderer.data.@fullImage;
                img.setStyle("addedEffect", imageEffect);
                img.setStyle("removedEffect", imageRemovedEffect);
                img.height = 400;
                img.width = 600; 
                PopUpManager.addPopUp(img, this, true);
                
            }
            
            private function evtClick(evt:MouseEvent):void {
                PopUpManager.removePopUp(evt.currentTarget as Image);
            }
            
            private function evtResize(evt:ResizeEvent):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }
            
            private function evtComplete(evt:Event):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }
<mx:WipeDown id="imageEffect" startDelay="100" />

<mx:Parallel id="imageRemovedEffect">
    <mx:Rotate/>
    <mx:Fade />
</mx:Parallel>

Tuesday 10 January 2012

Setting Favicon in Flex

Simple Encryption and Decryption

TileList as a Photogallery