BTA Flexing

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

Archive for March, 2008

Flash and Flex Integration

Posted by Shardul Singh Bartwal on March 31, 2008

Flex and Flash Integration
==========================

The Flex technology is based on the flash player. So how can be it difficult to get and access the content of any swf in Flex and reflecting the changes in the flash swf.Here I  am just  discussing the case  when  you   are  using  Action Script 3 version of the flash, and as all of us know that the Flex 2.0  and Flex 3.0  both uses Action Script 3.In depth we can say that in both cases we are using AVM 2. I have just created a swf in flash namely ‘ProAddRemoveApp.swf’. In this swf I am having two button with label ‘Add’ and ‘Remove’,and  their id in flash are ‘btnAdd’ and ‘btnRemove’.Also I am having  a MovieClip in Flash  with id ‘MC’.In flash on the click of Add button I am  creating a movieclip (red hexagonal),and adding that movieclip in an array and then attaching all items of the array to the ‘MC’ movieclip.Similarly on click of  Remove button I am  removing the last item  from the array and attaching the array to movieclip MC. Here In flash the name of my array is ‘arr’.  Now come to the Flex side,I have just loaded the earlier  discussed swf in my  Flex  Application. Here I am simply creating a MovieClip and pushing  all  content  of the swf in that.Now I can get  the object of the flash swf by just using a dot with this one movieclip.In my application I have added a handler with  each  these  two  flash button,which is just showing an alert message of item Added/Removed.Except this swf I am adding a flex button here with id ‘btnRemoveOfFlex’.Now this is flex button and I am  directly removing  item from the array ‘arr’ of flash on its click and hence the item is removed from flash Swf.

In the image below the upper red rectangle is the swf of flash and lower rectangle red box is showing a flex button.

 

 

flex_flash1.png

Hope you can get the clear idea after looking the code. I am just putting the

‘Flex’ code here for your better understanding.

*************************************************************************

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml
 width=”35%” height=”60%” layout=”absolute” creationComplete=”creationComplete()”
 backgroundColor=”#ffffff”
 horizontalAlign=”center” verticalAlign=”middle”
 horizontalScrollPolicy=”off” verticalScrollPolicy=”off”
 cornerRadius=”10″
 >
<mx:Script>
 <![CDATA[
  import mx.controls.Button;
  import mx.controls.Alert;
  import flash.display.MovieClip;
  import flash.display.DisplayObject;
  
  private var addButtonCount:Number=0;
  private var mc1:MovieClip;
  
  private function creationComplete():void
  {
   mc1=MovieClip(mySWF.content);
   mc1.btnAdd.addEventListener(MouseEvent.CLICK,addHandler,false);
   mc1.btnRemove.addEventListener(MouseEvent.CLICK,removeHandler,false);
  }
  
  private function btnOfFlexHandler():void
  { 
   var len:int =mc1.arr.length;
   mc1.arr.pop();
   if(len >0)
   {
   mc1.MC.removeChildAt(len);
   }
  }
  
  private function addHandler(event):void
  {
   Alert.show(“Added from Flash”);
  }
  
  private function removeHandler(event):void
  {
   Alert.show(“Removed from Flash”);
  }
 ]]>
</mx:Script>
<mx:HBox width=”100%” horizontalAlign=”center”>
<mx:VBox width=”50%” horizontalAlign=”center”  verticalGap=”5″ verticalAlign=”top” top=”15″>
<mx:SWFLoader id=”mySWF” source=”ProAddRemoveApp.swf” autoLoad=”true”/>
<mx:Button id=”btnRemoveOfFlex” width=”150″ height=”30″ click=”btnOfFlexHandler()” label=”Remove From Flex”/>
</mx:VBox>
</mx:HBox> 
</mx:Application>

******************************************************************************************

Hope you will enjoy this.
Enjoy Flexing…………………………….

Posted in Flex 3.0 | 1 Comment »

Import Web Service(WSDL) Wizard in Flex 3.0

Posted by Shardul Singh Bartwal on March 20, 2008

Using webService In Flex 3.0 Application

Flex  3.0  provides  the  easiest  way  to  use  the  web  services. Under the ‘Data’  Menu on your  Flex Builder IDE there is a submenu namely ‘Import Web Service(WSDL)’,We can use it to Directly use the Web Services.Just create a Flex  Project. No need  to chose any  ‘Applciation Server Type’  under ‘Server Technology’  title. After that just go to the Import Web Service(WSDL)’ under ‘ Data’ menu.

importwsdl.png

After clicking on this you will see like below.

importwsdl1.png

Just click on the ‘Next’ button.

importwsdl2.png

Now you have to enter your webService url in the box with label ‘WSDL URI‘,and after that just click on the ‘Next’ button. 

importwsdl3.png

Here you can  change  the  service  if  you are  having  more than  one  service. Also  you  can  change package.If you  don’t  want  just  click  on ‘Finish‘.  After  you  will  click  on  the  ‘Finsh’ button you will find  a folder ‘generated’  under  your  ‘src’ folder in  your  application. Under this ‘generated’ folder there  you will saw a ‘webservice’ folder. Just  open  it  and  find  the total conversion  of  your webservice in now action Script 3. Just  open  the ‘Service.as’ file you  will  find  how to use these classess for retreving results from your WebService. I  am  just  telling you the way of using it via MXML tags,you can also use these with action script. Just  copy  and  paste  the  code below in  you Application file,and run it to find out the result.

*******************************************************************************************

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”horizontal”
 xmlns:myService=”generated.webservices.*”>
 <mx:Script>
  <![CDATA[
   import generated.webservices.*;
   
   private var number1:int;
   private var number2:int;
   private function f1():void
   {
    number1=(int)(txtInput1.text);
    number2=(int)(txtInput2.text);
   }
  ]]>
 </mx:Script>
<myService:Service id=”myService”>
 <myService:multi_request_var>
  <myService:Multi_request/>
 </myService:multi_request_var>
</myService:Service>

<mx:VBox width=”50%” horizontalAlign=”center”>
 <mx:HBox width=”100%” horizontalAlign=”center”>
  <mx:Label width=”150″ text=”Enter First Number”/>
  <mx:TextInput id=”txtInput1″  width=”100″ height=”30″ change=”f1()”/> 
 </mx:HBox>
 <mx:HBox width=”100%” horizontalAlign=”center”>
  <mx:Label width=”150″ text=”Enter Second Number”/>
  <mx:TextInput id=”txtInput2″  width=”100″ height=”30″ change=”f1()”/> 
 </mx:HBox>
  <mx:Button id=”myButton” label=”Call WebService” click=”myService.multi(number1,number2)”/>
  <mx:Label id=”l1″ text=”{isNaN(myService.multi_lastResult)? ”: myService.multi_lastResult}” width=”150″/> 
</mx:VBox>
</mx:Application>
*****************************************************************************************

Hope you will enjoy it……

Enjoy Flexing……………………..

Posted in Flex 3.0 | 20 Comments »

Module Based Application In Flex 3.0

Posted by Shardul Singh Bartwal on March 9, 2008

Module Based Application in Flex 3.0

 Using  Module  in  flex 3.0  based  application  is one of the best approach from the performance perspective. The  importance  of  the  module based  application increases when this is a big one application.One of the major benifit by using module is the independecy during development phase. Let  uppose  I am dividing my  Project in 3 modules for the assigment of development to 3 developers.Now these 3 people can develop their own module(here module is reffering general term of Software Engineering)by using the Module(Flex 3.0’s Module).The  another  and  main  benifit is  related  to the performance.Let suppose my final swf’s size is 3 MB. So  for  using the application we have to load this 3 MB’s SWf. But let suppose I divide my Application  in  3  modules  then  definetly  the  size  of  the  Module  will  be  one  third  of  the Application.Now when I have to use the first Module I will load only it.When I have to use Second Module I Will simply unload the first one and will Load Second one.Hence my memory Consumption will be One by third of the Earlear non Module based approach.Further we can also divide a  Module in to the other Modules so this can be done up to any level.The important  thing  is  to  divide  your  needs in such  small unit of requirements. This will increase your performance in a amazing way. Here  one  thing  which  should  must  added  is  that  the  swf generated after the compilation of the Module will  not show  you  any  thing  if  you  will run  it  separetly. If  you  have  to  use  it  then  it is  must  to  load it  at  Application  level. It  is  also  allowed that  if  you  load  a  module  A into another module B then only after Loading B at Application level you can access module A.

Its all the theory related to the Modules now come to the implementation…………………………..

Open your Flex Builder and create a new Flex Project as I named it ‘ModuleBasedApplication’.Now under the ‘src’ folder create the folder structure as I have created.Here I am creating three folders under ‘modules’ folder named ‘mod1′,’mod2’ and ‘mod3’ for putting three modules.Look at Below.

a.png

Now you Have to place Module inside mod1,mod2 and mod3 folders.Just goto  File > New >MXML Module as below.Name it ‘Mod1’ and then put it into ‘mod1’.Simlarly create ‘Mod2’ Module in ‘mod2’ folder and ‘Mod3’ Module in ‘mod3’ folder.

b.png

After adding the Module in these folders it will look like below.

c.png

Now you have added the modules and you can code according to your use,for example I have simply placed one Label inside each which is just showing the name of that particular Module i.e Mod1,Mod2 or Mod3.Now go to the ‘Properties‘ of you project on Right Mouse Pressing on it you will find a window on the left of which you can see the ‘Flex Modules’  tab.Just click on this tab.A window with title ‘Flex Modules’ will open.At the right corner of this window is a ‘Add’ button click on it,‘Add Module’ window will open.Click on the ‘Borwse’ button then you will find ‘Select Module‘ window.Now just select the Module which you have to add as here ‘Mod1.MXML’ is selected,and then click ‘OK’.Again click ‘OK’ on ‘Add Module’ window.

z.png

Similarly add all other Modules.Yours Modules has been added and now just compile your project.After building it you will find the structure as below your project’s ‘bin-debug’ folder.

e.png

Now I am giving you the code related to the Application file in which I am showing these modules separetly on the click of a tab of TabBar.On click of each tab a separate module is can be seen.Just copy and paste the code below into your Application file i.e. main file.

***************************************************************************************************************************

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”horizontal”
width=”60%” height=”60%” left=”15″ right=”15″ top=”15″ bottom=”15″
backgroundColor=”#000000″>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

private var acTabBar:ArrayCollection=new ArrayCollection([
{data:’tab1′,label:’tab1′},
{data:’tab2′,label:’tab2′},
{data:’tab3′,label:’tab3′}
])
]]>

</mx:Script>
<mx:VBox width=”100%” height=”100%” left=”150″ right=”150″ top=”150″ bottom=”150″>
<mx:TabBar id=”tabModules” width=”80%” height=”25″ dataProvider=”{acTabBar}” />
<mx:ViewStack id=”v1Vstk” width=”100%” height=”100%” selectedIndex=”{tabModules.selectedIndex}”>
<mx:ModuleLoader url=”com\myProject\modules\mod1\Mod1.swf” width=”100%” height=”100%”/>
<mx:ModuleLoader url=”com\myProject\modules\mod2\Mod2.swf” width=”100%” height=”100%”/>
<mx:ModuleLoader url=”com\myProject\modules\mod3\Mod3.swf” width=”100%” height=”100%”/>
</mx:ViewStack>
</mx:VBox>
</mx:Application>

***************************************************************************************************************************

After this once again compile your Application.You will find a TabBar there as below on the click of which’s tabs you will find different modules.

f.png

Hope you will enjoy this.

Enjoy Flexing…………………………………………………………..

Posted in Flex 3.0 | 7 Comments »