Flex (Flash Player) – DPI and input/output

May 29, 2009 at 5:22 PM | In Flex / AS, Internet, Programming, webApp | Leave a Comment
Tags: , , , , , , , , , ,

DPI is often confused with screen resolution. Actually when screen resolution changes (in pixel height x width) the DPI rate is not necessarily changed.

In most cases DPI remains same, unless changed intentionally. In simple language, increasing screen resolution will allow more dots to be displayed on screen, by decreasing distance between each dot. Increasing DPI rate of screen but keeping resolution will increase number of dots per inch; by decreasing dot thickness, and that will eventually result into more dots in whole screen, with unchanged resolution.

When image resolution comes into picture, DPI plays role to consider depth of an Image. More the DPIs, better is the image – depth.
Two similar looking image (at its original size) may have different DPIs. The image with higher DPI rate, if zoomed in, will not get blurred or distorted very easily.

DPI is the somewhat similar concept of mega pixel – the camera term.

This term and its effect came into picture when I started input and output to real wprld from Flex application!
Flex application (or flash player) accepts width, height, x, y or such dimension properties in pixels only. The real world deals with inch, foot, centimeter or any such unit.

So where the game is?

Above simple question puzzles many.
widthInch = widthPixels/DPI is the key!

Say you have image with 500 pixels, width in inch will be 500/DPI. So if DPI is 96, then width is 500/96inches.

In case of flash player, DPI rate is 96.
So if I want to display an image in 2 inches width, I need to set image width to 2*96 pixels. This ignores Image (physical image file) and its DPI rate as I am going to display in flash player, not any image editor.

Also, this bug post is strange upto my knowledge. Flash Player’s DPI seems constant, ignoring screen DPI.

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

February 10, 2009 at 6:10 AM | In Flex / AS, Programming | Leave a Comment
Tags: , , , , ,

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)"/>

Parameter sequence disturbed : Web Service in Flex

January 31, 2009 at 12:05 AM | In Flex / AS, Programming | 1 Comment
Tags: , , , , , , , , ,

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

December 30, 2008 at 7:27 AM | In Flex / AS, IT, Programming, Software | Leave a Comment
Tags: , , , , , , ,

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;

Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.