Category Archives: Programming - Page 2

Color Fill in Flex

<mx:Script>
	<!&#91;CDATA&#91;
		private function fill(event:MouseEvent):void
		{
			var data:BitmapData = Bitmap(imageObject.content).bitmapData;
			data.floodFill(event.localX,event.localY,0x00ffff);  // replace 0x00ffff with your choice of color
		}
	&#93;&#93;>
</mx:Script>
<mx:Image id="imageObject" source="...." click="fill(event)" />

This few lines simply fills selected or defined color to DisplayObject / Image like fill tool of any Paint tool.

Simple solution to a complex problem – customized Rich Text Editor

Apparently, creating customized RichTextEditor component in flex was looking time consuming. The rich APIs that flex provides made this task easier.

I retrieved reference of different styling controls from a hidden richTextEditor object, arranged them as per my requirement, and its done!

I thought to make a custom editor with customized control positions is a big task, but is not what I thought! 🙂

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Script>
		<!&#91;CDATA&#91;
			import mx.controls.Button;
			import mx.controls.TextArea;
			import mx.controls.TextInput;
			import mx.controls.RichTextEditor;

			private function init():void
			{
				var textInput:TextInput = rte.linkTextInput;
				textInput.visible = false;

				var bulletsButton:Button = rte.bulletButton;
				bulletsButton.visible = false;

				var fontFamily:DisplayObject = rte.fontFamilyCombo;
				font.addChild(fontFamily);
				var fontSize:DisplayObject = rte.fontSizeCombo;
				font.addChild(fontSize);

				var alignBtns:DisplayObject = rte.alignButtons;
				effects.addChild(alignBtns);

				var boldBtn:DisplayObject = rte.boldButton;
				var italicBtn:DisplayObject = rte.italicButton;
				var underlineBtn:DisplayObject = rte.underlineButton;
				var colorPicker:DisplayObject = rte.colorPicker;
				var styles:HBox = new HBox();
				styles.addChild(boldBtn);
				styles.addChild(italicBtn);
				styles.addChild(underlineBtn);
				styles.addChild(colorPicker);
				effects.addChild(styles);

				var textArea:TextArea = rte.textArea;
				editor1.addChild(textArea);
			}
		&#93;&#93;>
	</mx:Script>
	<mx:VBox id="controls" width="250" height="100">
		<mx:HBox id="font" />
		<mx:HBox id="effects" />
	</mx:VBox>
	<mx:Panel id="editor1" x="300" width="300" height="300"/>
	<mx:RichTextEditor id="rte" visible="false" />
</mx:Application>

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");
}

A statement can change the life

This makes very generic sense – this is about my experience in terms of software programming.

My team was facing big pain to solve a very small – simple looking issue. Everything was logically simple and correct.

In flex 3, I disabled TextInput something like under:

objTextInput.enabled = false;

After that I tried to change color through stylesheet (CSS) and it did not work. Contradictory I was able to change font-family and font size of the same component in same fashion, and was working fine.

Changing to objTextInput.enabled = true; worked perfectly fine as expected!

What can I consider this as? A bug in Flex 3 SDK or bug in my understanding? 😉

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

Setting up Subversion under windows

Prerequisites:

  1. Subversion Binary (http://subversion.tigris.org/servlets/ProjectDocumentList?folderID=91)
  2. TortoiseSVN (http://tortoisesvn.net/downloads)
  3. SVN Service Wrapper for Windows (http://www.lw-works.com/files/svnservice/svnservice-1.0.0.msi) – svnservice

Alternate to 1 & 2 – download 1 Click Setup (http://svn1clicksetup.tigris.org/)

Step 1

  1. Install Subversion binary.
  2. Make sure that the bin directory of Subversion is under PATH environment variable.
  3. Set any text Editor’s path as SVN_EDITOR environment variable. (e.g. c:\windows\notepad.exe)

Step 2

  1. Create code / document repository (the main destination or data centre!!)
svnadmin create "d:\codeRepo"
               Alternatively, you may also use explorer’s context menu to add selected folder as repository using TortoiseSVN.
  1. Go to the repository folder (e.g. codeRepo)
    1. Edit /conf/svnserve.conf file

Uncomment following:

                               [general]
                               anon-access = read
                               auth-access = write
                               password-db = passwd
    1. Edit /conf/passwd file

Uncomment following / specify allowed username & passwords:

                               [users]
                               harry = harryssecret
                               sally = sallyssecret
                               harit = harit’s password

Step 3

  1. Start svnservice
               svnserve --daemon --root "d:\codeRepo"
  1. Add new Project directory by
               svn mkdir svn://localhost/myproject
  1. Provide correct username & password (that is configured earlier)

Otherwise, use SVN repository browser to browse SVN repos. Right click provides rich set of options like adding new files/folders, delete, etc. etc. Use svn://localhost/myproject or similar as URL to browse.

Optional options!

  1. Setup svn-service to start at startup
               svnservice -install --daemon --root "d:\codeRepo"
               sc config svnservice start= auto
               net start svnservice
  1. Bind windows user for authentication (see source link 1 – http://www.stanford.edu/~bsuter/subversion-setup-guide/#svnserve-windows-user)

Please make sure that the svnservice is running correctly. Use Control Panel > Administrator Options > Services > Subversion (or whatever you named it) to verify. If the service is not running, it is the root of many problems.

This setup also works on network. You can access this repo through other machines connected through network. Each time you modify the files and commit, subversion will do authentication based on username and commit new version.

Major advantage of subversion – old (and deleted) files remain there in repository and can be retrieved back, so is perfect backup solution for code!

Sources for more advanced setup:

  1. http://www.stanford.edu/~bsuter/subversion-setup-guide/
  2. http://blogs.vertigosoftware.com/teamsystem/archive/2006/01/16/Setting_up_a_Subversion_Server_under_Windows.aspx
  3. http://blog.excastle.com/2005/05/31/mere-moments-guide-to-installing-a-subversion-server-on-windows/
%d bloggers like this: