Tag Archives: flex - Page 2

3 ways to get control in Flex over user input through Keyboard

1. Use of restrict property. The following example allows only numeric input

<mx:TextInput id="textInput" restrict="0-9\-" />

2. Use of unicodeRange style property inside CSS (stylesheet) while embedding fonts. The following example restricts all special symbols except period sign(.).

@font-face
{
src:url("../assets/myFont.ttf");
fontFamily: myFontFamily;
flashType: true;
unicodeRange:
U 0041-U 005A, /* Upper-Case [A..Z] */
U 0061-U 007A, /* Lower-Case a-z */
U 0030-U 0039, /* Numbers [0..9] */
U 002E-U 002E; /* Period [.] */
}

3. Use of Flex built in validator components. Following example calls handleValid and makes it sure that user does not leave inputComponent blank.

<mx:Validator id="reqValid" required="true" source="{inputComponent}" property="text" valid="handleValid(event)" invalid="handleValid(event)"/>

Font transcoding error – specify font style

Flex SDK has rich set of font managers. Those 3 (Batik, AFE, JRE) manage and transcode to flash player fonts.
However, using following code in CSS caused comile time exception.

“exception during transcoding: Font for alias ‘Arial Bold’ with plain weight and style was not found at…”

@font-face
{
src: url('/assets/fonts/arial-bold.ttf');
fontFamily: "Arial Bold";
}

@font-face
{
src: url('/assets/fonts/arial-bold-italic.ttf');
fontFamily: "Arial Bold Italic";
}

The perfect solution that I could find was that I also need to specify font weight & style in CSS, as per the type of font, I am embedding.

Here is the perfect solution:

@font-face
{
src: url('/assets/fonts/arial-bold.ttf');
fontFamily: "Arial Bold";
font-weight:bold;
}

@font-face
{
src: url('/assets/fonts/arial-bold-italic.ttf');
fontFamily: "Arial Bold Italic";
font-weight:bold;
font-style:italic;
}

Flex SDK is really very smart in this case. It actually detects that the font supplied is of which type effect – bold, italics or both.
More on font managers is here.

Parameter sequence disturbed : Web Service in Flex

I implemented an application in Flex that used web service, written in PHP with NuSOAP library. The WSDL file that was available for Web Service is as under:

<?xml version="1.0" encoding="ISO-8859-1"?>
<definitions xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xmlns:tns="http://server" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns="http://schemas.xmlsoap.org/wsdl/" targetNamespace="http://server">
<types>
<xsd:schema targetNamespace="http://server" >
 <xsd:import namespace="http://schemas.xmlsoap.org/soap/encoding/" />
 <xsd:import namespace="http://schemas.xmlsoap.org/wsdl/" />
</xsd:schema>
</types>
<message name="saveImgRequest">
<part name="id" type="xsd:string" />
<part name="data" type="xsd:string" />
<part name="emailId" type="xsd:string" />
<part name="notes" type="xsd:string" /></message>
<message name="saveImgResponse">
<part name="return" type="xsd:boolean" /></message>
<message name="purchaseRequest">
<part name="id" type="xsd:string" />
<part name="data" type="xsd:string" /></message>
<message name="purchaseResponse">
<part name="return" type="xsd:boolean" /></message>
<portType name="purchasePortType">
  <operation name="saveImg">
    <input message="tns:saveImgRequest"/>
    <output message="tns:saveImgResponse"/>
  </operation>
  <operation name="purchase">
    <input message="tns:purchaseRequest"/>
    <output message="tns:purchaseResponse"/>
  </operation>
</portType>
<binding name="purchaseBinding" type="tns:purchasePortType">
  <soap:binding style="rpc" transport="http://schemas.xmlsoap.org/soap/http"/>
  <operation name="saveImg">
    <soap:operation soapAction="http://server/webservice.php/saveImg" style="rpc"/>
    <input><soap:body use="encoded" namespace="http://server" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></input>
    <output><soap:body use="encoded" namespace="http://server" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></output>
  </operation>
  <operation name="purchase">
    <soap:operation soapAction="http://server/webservice.php/purchase" style="rpc"/>
    <input><soap:body use="encoded" namespace="http://server" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></input>
    <output><soap:body use="encoded" namespace="http://server" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></output>
  </operation>
</binding>
<service name="purchase">
<port name="purchasePort" binding="tns:purchaseBinding">
    <soap:address location="http://server/webservice.php"/>
  </port>
</service>
</definitions>

After carefully considering the sequence of parameters in web service method call, I tried to import Web Service through Flex Builder’s Import web service wizard.

Surprisingly, methods that are served by the Web Service have been detected with all parameters. But, with a surprise:

Web Serice Import Wizard in Flex Builder 3

Why is the sequence of parameters been changed? Neither parameters are in ascending/descending order of alphabets nor are in original sequence as are declared!

Can anyone give reason?

Ignoring unwanted sequence through import wizard, I finally implemented Web Service with parameters as are there in WSDL, and it worked fine for me!

private function initAndCallWS():void
{
    saveImageWebService = new WebService();               
    saveImageWebService.wsdl = "http://server/webservice.php?wsdl";
    saveImageWebService.saveImg.addEventListener("result", resultHandler);
    saveImageWebService.saveImg.addEventListener("fault", faultHandler);
    saveImageWebService.addEventListener(LoadEvent.LOAD,loadHandler);
    saveImageWebService.loadWSDL();
}

private function loadHandler(event:LoadEvent):void
{
    saveImageWebService.saveImg("userID","image_content", "email@server.com", "notes");
}

Masking with customized / polygon shape

A typical requirement to create custom closed shape was a big pain till now at my workplace. Many were working to create some run time changeable shape and through that, mask an image. I achieved this; finally, after visiting a blog and a forum for Flash programming. Also, my colleague Mayur helped to organize once I was ready and I explained like Proof of Concept.

For custom shape, you will require a reference to public property of any DisplayObject / UIComponent – that is graphics (flash.display.Graphics)

Now is the real crux.

The next steps work just like you draw something on paper (or Canvas)

// Create and initialize Sprite object
var spriteObj:Sprite = new Sprite();

// Clear graphics
spriteObj.graphics.clear();

// Define style of line (border of the shape)
spriteObj.graphics.lineStyle(1, 0xff00ff);

// Start filling with a selected color
spriteObj.graphics.beginFill(0x00ff00);

// Move to a position to start from (without actually drawing)
spriteObj.graphics.moveTo(x, y);

// Draw a line / curve or anything that is supported by graphics
// This may be used in a loop or recursive manner to draw lines / curves passing through n points
for(...;...;...)
{
	spriteObj.graphics.curveTo(handlerX, handlerY, x, y);
}

// End filling process, just like you put pen aside!
spriteObj.graphics.endFill();

// Define a new canvas and initialize it
var canObj:Canvas = new Canvas();

// Add the just created Sprite object as a raw (not direct UIComponent child) child
canObj.rawChildren.addChild(spriteObj);

// Use over image as a mask, if required
imgComp.mask =  canObj;

Flexible Eclipse

Flex SDK is Free & Open Source but Flex Builder is neither free nor open source.

I googled if there is any way to use Flex SDK with Eclipse (because Flex Builder is built on Eclipse too) for development purpose.I found 2 useful results; Of course I haven’t tried yet.

http://cfsilence.com/blog/client/index.cfm/2007/3/26/Setting-Up-Eclipse-For-Flex-2
http://www.darronschall.com/weblog/archives/000182.cfm

%d bloggers like this: