Masking in Flex 3

Masking in Flex 3

Using the masking in flex is very simple as there is already a property mask with each UIComponet.Just assing this property of the component to that visual display object by which you want to mask it.In most cases you will require to draw the different shapes and mask with them your display object.
You can check it out from here with code.
Hope you will like this.

Shardul Singh Bartwal

Passing variable from outside into a popup window

If we are require to pass any variable from outside into a popup window in flex,the way
is slightly different then creating Popup in a classic way.Actully its not the different
instead there is a type casting into the same class which we are going to display in popup.
Let suppose you want to pass a string value into the popup then inside the popup you need
to create a public varible, like I am creating ‘urlValue’ string type variable inside the popup.

Now pass the value inside the popup as below:-

var myPopUp:MyPopup= MyPopup(PopUpManager.createPopUp(this, MyPopup, true));

myPopUp.move(((Application.application.width/2)-(myPopUp.width/2)),((Application.application.h

eight/2)-(myPopUp.height/2)));

myPopUp.urlValue = “value from outside”;

Here the MyPopUp is the class which we are going to show in popup.

Hope it will be helpfull for you.

Managing Custom Events in Flex 3.0 in a easy way

As all of us require Custom Events in our Flex applications. Also we know the Event Life Cycle in Flex. I am sure that all of you will be familiar with event targating,bubling,capturing etc.Also we know that we are require to remove the Listeners which we adds. We all know that inside a flex application the event first goes to the application level and then from there back to the component which have to listen it. This issue becomes more critical if we are not using any particular architecture like Pure MVC or Cairngorm etc.So in this condition first you have to dispatch a event and listen it at application level and then again dispatch a event on its occurring and listen that at the desired place. The other ways are like by using the references of the Class from where the event is dispatched and where it is being listen in each other etc.I have created a CustomEventManager Class for managing custom event dispatching, and Listening it.Its very simple to use it. It is a static class.

For dispatching event simply write like this:

CustomEventManager.dispatchEvent(new YourCustomEvent(YourCustomEvent.YOUR_CUSTOM_EVENT));

and for Listioning the custom event write like this at right place in the event Listioning
class(e.g. at creationComplete of the class or constructor etc ):

CustomEventManager.addEventListener(YourCustomEvent.YOUR_CUSTOM_EVENT,yourCustomEventHandler);

I am also adding the code of the ‘CustomEventManager’ class.Hope it will be helpful for you.

For CustomEventManager Class click here.

Smoothing the Bitmap

Normally when we are dealing with the ’smoothing’ property of the ‘Bitmap’ class it looks that its effect is not of the major aspect.But it plays a vital role.I found a very help full link related to understanding its value.If you are not getting the quality factor on the movement(by mean of rotation,skew,scale etc) on bitmap then you should check the ’smoothing’ property of the bitmap by tracing it whether it is true or false.The link below will clear you doubts and variations of the quality issue in Bitmap.Its value is more important if u are getting the bitmap of any Image which you are accessing through the url.
Please have a look at the link below to understand this issue and its solution.Thnx to Grant Skinner for this nice post.

The link is……….

http://www.gskinner.com/blog/archives/2007/08/minor_bug_with.html

Using updateDisplayList and invalidateDisplayList in creating custom Component

UpdateDisplayList and InvalidateDisplayList in Flex

I know that all of you have created custom components,and almost of you are very much comfortable with your own approach and logic for that. Here sometimes we create such components which are recreated during the applications. For example if we have simply a canvas and on a slider you have to resize it. I know that you have a multiple ways for achieving this. In flex every UI Component have a method called ‘updateDisplayList’.If we want to recreate our component at runtime then this method is very much supportive for us.We should put our that code inside this method which should be executed when we want to execute this method from somewhere outside. The important thing is that this method is not called with this name, i mean updateDisplayList(). If we want to call this method then we have to call the invalidateDisplayList() method of the instance of this class.On calling invalidateDisplayList() the updateDisplayList() method will be called. In the above example for example we should put the height and width of the component inside updateDisplayList() method. Now on change of slider the width and height will be changed and after that I have to call the invalidateDisplayList() so that the changes will be reflected inside the component.

For your comfort I am also putting the code here.

MainApplication

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”

xmlns:local=”*” creationComplete=”onCreationComplete()”>

<mx:Script>

<![CDATA[

private function onCreationComplete():void

{

hSlider.value = 25;

}

private function onHSliderChange():void

{

can.w = hSlider.value;

can.invalidateDisplayList();

}

]]>

</mx:Script>

<mx:VBox width=”100%” horizontalAlign=”center” verticalAlign=”middle” top=”150” left=”150” right=”150“>

<mx:Canvas width=”200” height=”150” borderColor=”#0000FF” borderStyle=”solid” backgroundColor=”0xCCCCCC” cornerRadius=”5“>

<local:Can id=”can” w=”25“/>

</mx:Canvas>

<mx:HSlider id=”hSlider” width=”150” maximum=”100” minimum=”0” liveDragging=”true” change=”onHSliderChange()”/>

</mx:VBox>

</mx:Application>

Can.as

package

{

import mx.containers.Canvas;

public class Can extends Canvas

{

public function Can()

{

super();

this.x = 50;

this.y = 25;

this.setStyle(“backgroundColor”,0xFF0000);

}

private var _w:Number;

public function set w( value:Number):void

{

_w = value;

}

public function get w():Number

{

return _w;

}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

{

super.updateDisplayList(unscaledWidth, unscaledHeight);

this.height = w;

this.width = w;

}

}

}

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

Deep Linking In Flex 3.0

Deep Linking In Flex 3.0

Deep linking is one of the cool feature of the Flex 3.0.This is mainly for playing with the browser. As all of us know that if we are running any flex application then the url in the browser don’t get effected normally. This is the feature via which we are able to find the current position of the components in the url of the application. Also the changes in the url will effect the changes in the application. For example if you have selected the third item of any viewstack then it will be reflected in the url of your application. Now if you will change it from the url to 0 then the the first element of the viewstack will get selected in the application .This feature will be same as any webpage based application.

This feature is by default disable in any application. For enabling this feature just go the the properties of your application.Here select ‘Flex Compiler’.Here you will find a checkbox with label ‘Enable integration with browser navigation’ just check it to select,and click on ‘Apply’ and then on ‘OK’.Your deeplinking feature is enable now. Now at the end of your url in browser you will find ‘#’. Up to ‘#’ this will be your default setting of the application. And after this the selected container etc will be shown in the url of your application.

 

Pls don’t forget to explore

http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Deep_Linking

for more information.

 

Hope you will like this feature.

 

Enjoy Flexing………………..

 

Encounter with services-config.xml in Adobe Flex

 services-config file is used by us for connection to the server side code.One important thing which should be noticed here is that this file is used at compile time (as we also includes {-services “services-config.xml”} under compiler settings). If you are using this file then there will be a block like below.

 <channels>

     <channel-definition id=”my-amfphp” class=”mx.messaging.channels.AMFChannel”>

           <endpoint uri=”http://IP of ur backend server/Project Name/amfphp/gateway.php”

           class=”flex.messaging.endpoints.AMFEndpoint”/>

     </channel-definition>

</channels>

The important thing here is ‘endpoint’ tag,Which have a uri field.This uri field is used to give

the path of backend server.But I will suggest not to put the this uri field here.As you know why?

Because if u will give this ip related information here then you can never change it because it will

be included in the build.So what we require to do when using this file,we should simply remove ‘uri’

from here and write it with your each and every remote object.And there you can get it from some

external xml,or by any other medium.

 

So the above block in services-config.xml should look like this only.

 

<channels>

<channel-definition id=”my-amfphp” class=”mx.messaging.channels.AMFChannel”>

<endpoint class=”flex.messaging.endpoints.AMFEndpoint”/>

</channel-definition>

</channels>

 

 

 

Hope you will enjoy it…………………..

 

3D in Flex 3

Using Google SketchUp File into Flex 3

 

 3D in flex! Yes, we all know that it is possible but how to implement? Here I am with the solution for this. One thing more if we are going to use 3D in flex then hmmm… I think we should also go for the ‘Google SketchUp to pickup the 3d.By doing so we will also get the way to use the Google SketchUp with flex. So let start step by step for doing this.

1)      If you are not having the Google SketchUp you can get it from here. Just download it and install.

 

2)      Now simply create you 3D in Google SketchUp.

 

3)      After creating your 3D just go to ‘File’ Menu. Then ‘Export ’submenu and then ‘3D Model’.

File    >>   Export   >> 3D Model.

Then save you 3D with .kmz extension. Let I am giving my file the name ‘abc’ so it will be saved as ‘abc.kmz’.

 

4)      Now a very stylish step….just rename your abc.kmz to abc.zip. Now unzip    

Your ‘abc.zip’.There will be a folder ‘model’.Just open it and find your ‘abc.dae’ file.This .dae extension shows the file of collada type, which is supported by the flex. You can close the Google SketchUp now.

 

5)   Now you require the PaperVision 3D.Download it from here. Now unzip it and open the folder Papervision3D_1_5, inside it open PV3D_1_5.Here is a folder src also open it. Now just copy com and org folder from here and paste them into the src folder of your flex application.

 

6)  In your flex application create a folder asset and paste the abc.dae file of step 4 into it.

 

      7) Now…………just copy and paste the code below into your main mxml.

 

 

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

 

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“

 creationComplete=”init(event)”

 >

<mx:Script>

<![CDATA[

import mx.core.UIComponent;

import org.papervision3d.scenes.Scene3D;

import org.papervision3d.cameras.Camera3D; 

import org.papervision3d.objects.DisplayObject3D;

import org.papervision3d.render.BasicRenderEngine;

import org.papervision3d.objects.parsers.DAE;

import org.papervision3d.view.Viewport3D;

 

 

private var myCam:Camera3D = new Camera3D(); 

private var objScene:Scene3D = new Scene3D();

private var objRenEngin:BasicRenderEngine = new BasicRenderEngine();

private var objViewport3D:Viewport3D = new Viewport3D(10,10,true,true);

 

[Embed(source="asset/abc.dae")]

private var objCls:Class;

 

private function init(event:Event): void

{

 var objUIComponent:UIComponent = new UIComponent();

 v1.addChild(objUIComponent );

 objUIComponent.addChild(objViewport3D);

 var objDAE:DAE = new DAE();

 objDAE.load(XML(new objCls() ) );

 var model:DisplayObject3D = objScene.addChild( objDAE );

 myCam.zoom=3;

 myCam.z=-500;

 myCam.lookAt(model);

 this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);

}

 

private function enterFrameHandler(event:Event):void

{

 objRenEngin.renderScene(objScene,myCam,objViewport3D);

}

]]>

</mx:Script>

<mx:VBox id=”v1” width=”100%” height=”100%“/>

</mx:Application>

 

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

 

 

Now run your application…………..and see 3D in flex 

 

 

 

Enjoy flexing………………

 

 

Using Multiple Methods of a WebService In Flex 3.0

One of my friend ask me about how to access multiple methods of a web Service.

I have created a web service which is having 4 methods. Three of them are just returning

a text String. While there is method ‘Login’ which accepts two arguments both of string

type and returns two diffent of text messages depending upon the argument passed. If  u

Pass “Admin” as first argument and also “Admin” as the second argument then it returns

“Login Success” otherwise “Loging Failed”.

            Here is the code of the webservice as well as the flex implementation of it.

Hope it will help you.

 

WebService

 

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

using System;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

 

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class Service : System.Web.Services.WebService

{

    public Service () {

    }

    private string userid=“”;

    private string pwd=“”;

    private string loginResult = “”;

 

    [WebMethod]

    public string Login(string _userid ,string _pwd)

    {  

         this.userid =_userid;

         this.pwd = _pwd;

        if ((_userid == “Admin” )&&(_pwd == “Admin”))

        {

            loginResult = “Loging Success”;

        }

        else

        {

            loginResult = “Loging Failed”;

        }

        return loginResult;

    }

 

    [WebMethod]

    public string HelloWorld() {

        return “Hello World”;

    }

 

    [WebMethod]

    public string HiWorld()

    {

        return “Hi World”;

    }

 

    [WebMethod]

    public string BiWorld()

    {

        return “Bi World”;

    }

}

 

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

 

Flex Application MXML

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

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute“

 xmlns:myService=”generated.webservices.*“>

 <myService:Service id=”myService“>

</myService:Service>

<mx:HBox width=”100%” height=”100%” horizontalAlign=”center“>

            <mx:VBox width=”300” height=”300” horizontalAlign=”center“>

              <mx:Button id=”myButton” label=”Call hiWorld Method Of WebService” click=”myService.hiWorld()” /> 

              <mx:Label id=”l1” text=”{myService.hiWorld_lastResult}“/>

            </mx:VBox>

            <mx:VBox width=”300” height=”300” horizontalAlign=”center“>

              <mx:Button id=”myButton1” label=”Call helloWorld Method Of WebService” click=”myService.helloWorld()” /> 

              <mx:Label id=”l2” text=”{myService.helloWorld_lastResult}“/>

            </mx:VBox>

            <mx:VBox width=”300” height=”300” horizontalAlign=”center“>

              <mx:Button id=”myButton2” label=”Call biWorld Method Of WebService” click=”myService.biWorld()” /> 

              <mx:Label id=”l3” text=”{myService.biWorld_lastResult}“/>

            </mx:VBox>

            <mx:VBox width=”300” height=”300” horizontalAlign=”center“>

              <mx:Button id=”myButton3” label=”Call Login Method Of WebService” click=”myService.login(‘Admin’,‘Admin’)”/> 

              <mx:Label id=”l4” text=”{myService.login_lastResult}“/>

            </mx:VBox>

</mx:HBox>       

</mx:Application>

 

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

 

 

 

Enjoy Flexing………………

 

 

Find Flex 3.0 Components all Together

  Just some days back I found a aowsome link related to the Flex 3.You can say that the all flex 3.0 components under one roof. This link will be helping all of us to find out them quickly with their usability. Except the UI components there is a lot for you. Specially the validators and formaters, Print controls and Data visualization components. You will also find Effects; view States and Transition here with coding for using them. Just see all the effects choose your Data visualization Component and start rocking with flex coding.Ok I think now its time to share it with you. Just check it friends…………there is a lot for you.

 

   http://examples.adobe.com/flex3/componentexplorer/explorer.html

 

Enjoy Flexing………………….