|
Complex AS3 form
Overview:
This form shows the beginnings of a complex AS3 form.
We start by adding the display of the form.
In this case embeded images are used to give the input boxes a little shadow effect.
(The flash.filters package could be used to accomplish the same effect.)
Unlike the basic form, this form uses a self made function to make some of the
TextFields instead of repeating the same thing over.
To help ensure the form is used only in the wrapper,
a check of the loaderInfo.url is done,
and a JavaScript function in the wrapper is set up to be the real trigger for posting.
Simple validation of the input is done before posting.
A server request is defiend, and a loader for it; headers and variables are added,
then the data goes to a server page and a function gets the response from the server.
(In the basic form the data was simply sent to another page)
package
{
import flash.display.Sprite;
import flash.display.Graphics;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.net.URLRequestHeader;
import flash.net.URLRequestMethod;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.text.TextFieldType;
import flash.text.TextFieldAutoSize;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;
import flash.external.ExternalInterface;
public class ComplexForm extends Sprite
{
private var firstWordField:TextField;
private var lastWordField:TextField;
private var emailField:TextField;
private var commentlField:TextField;
private var theTXTFormat:TextFormat = new TextFormat();
private var errorTXT:TextField;
private var noCacheHeader:URLRequestHeader =
new URLRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
private var cacheControlHeader:URLRequestHeader =
new URLRequestHeader("Cache-Control", "post-check=0, pre-check=0");
private var expiresHeader:URLRequestHeader =
new URLRequestHeader("Expires", "Tue, 24 April 1994 04:00:00 GMT");
private var pragmaHeader:URLRequestHeader =
new URLRequestHeader("Pragma", "no-cache");
private var myHome:String = loaderInfo.url;
/* if this file were loaded by another swf we would use
loaderInfo.loaderURL instead */
[Embed(source="../testimages/shadeinbox.png")]
private var BoxBack:Class;
[Embed(source="../testimages/shadeinboxcm.png")]
private var CommentBoxBack:Class;
public function ComplexForm()
{
theTXTFormat.font = "Arial";
theTXTFormat.color = 0x000000;
theTXTFormat.size = 12;
theTXTFormat.align = TextFormatAlign.LEFT;
var fnLabelTXT:TextField = new TextField();
fnLabelTXT.selectable = false;
fnLabelTXT.text = "First Name:";
fnLabelTXT.x = 10;
fnLabelTXT.y = 20;
addChild(fnLabelTXT);
var fwBox:Sprite = new Sprite();
fwBox.addChild(new BoxBack());
firstWordField = makeATXTField(TextFieldType.INPUT, 20, 20, 150);
fwBox.addChild(firstWordField);
fwBox.x = fnLabelTXT.x;fwBox.y = fnLabelTXT.y + 15;
addChild(fwBox);
var lnLabelTXT:TextField = new TextField();
lnLabelTXT.selectable = false;
lnLabelTXT.text = "Last Name:";
lnLabelTXT.x = fwBox.x;
lnLabelTXT.y = fwBox.y + 25;
addChild(lnLabelTXT);
var lwBox:Sprite = new Sprite();
lwBox.addChild(new BoxBack());
lastWordField = makeATXTField(TextFieldType.INPUT, 20, 20, 150);
lwBox.addChild(lastWordField);
lwBox.x = lnLabelTXT.x;
lwBox.y = lnLabelTXT.y + 15;
addChild(lwBox);
var emLabelTXT:TextField = new TextField();
emLabelTXT.selectable = false;
emLabelTXT.text = "Email:";
emLabelTXT.x = fnLabelTXT.x + emLabelTXT.width + 70;
emLabelTXT.y = fnLabelTXT.y;
addChild(emLabelTXT);
var eBox:Sprite = new Sprite();
eBox.addChild(new BoxBack());
emailField = makeATXTField(TextFieldType.INPUT, 35, 20, 150, false, "a-zA-Z@.");
eBox.addChild(emailField);
eBox.x = emLabelTXT.x;
eBox.y = emLabelTXT.y + 15;
addChild(eBox);
var cmLabelTXT:TextField = new TextField();
cmLabelTXT.selectable = false;
cmLabelTXT.text = "Comments:";
cmLabelTXT.x = eBox.x;
cmLabelTXT.y = eBox.y + 25;
addChild(cmLabelTXT);
var cBox:Sprite = new Sprite();
cBox.addChild(new CommentBoxBack());
commentlField = makeATXTField(TextFieldType.INPUT, 100, 70, 170, true, "a-zA-Z0-9 ");
cBox.addChild(commentlField);
cBox.x = cmLabelTXT.x;
cBox.y = cmLabelTXT.y + 15;
addChild(cBox);
var submitButton:Sprite = new Sprite();
submitButton.graphics.lineStyle(1, 0x000000);
submitButton.graphics.beginFill(0x000000, .2);
submitButton.graphics.drawRect(0, 0, 40, 17);
submitButton.buttonMode = true;
var subTXT:TextField = new TextField();
subTXT.selectable = false;
subTXT.text = "Submit";
submitButton.x = lwBox.x;
submitButton.y = lwBox.y + 33;
subTXT.x = submitButton.x +2;subTXT.y=submitButton.y;
submitButton.addEventListener(MouseEvent.CLICK, subStartHandler);
addChild(subTXT);
addChild(submitButton);
/* I've called the response text field errorTXT because any post errors
would be shown in it as well and the text color is red */
errorTXT = new TextField();
errorTXT.autoSize = TextFieldAutoSize.LEFT;
errorTXT.selectable = false;
errorTXT.textColor = 0xFF0000;
errorTXT.text = "";
errorTXT.x = submitButton.x;
errorTXT.y = submitButton.y + 43;
addChild(errorTXT);
}
private function makeATXTField(tftype:String, tfmax:Number, tfh:Number, tfw:Number, tfmulti:Boolean = false,
tfrestrict:String = "a-zA-Z", tftxt:String = ""):TextField
{
var fieldToCreate:TextField = new TextField();
fieldToCreate.type = tftype;
fieldToCreate.defaultTextFormat = theTXTFormat;
fieldToCreate.maxChars = tfmax;
fieldToCreate.border = true;
fieldToCreate.height = tfh;
fieldToCreate.width = tfw;
fieldToCreate.wordWrap = true;
fieldToCreate.multiline = tfmulti;
fieldToCreate.restrict = tfrestrict;
fieldToCreate.background = false;
fieldToCreate.backgroundColor = 0xFFFFFF;
fieldToCreate.text = tftxt;
return(fieldToCreate);
}
private function subStartHandler(event:MouseEvent):void
{
errorTXT.text = "posting";
var shouldBeThis:RegExp = /http:[\/]{2}[w\.\/]{0,}actiontad[\.\/]{1}/i;
if (!myHome.match(shouldBeThis))
{errorTXT.text = "wrong location "+myHome;}
else
{
if (ExternalInterface.available)
{
ExternalInterface.addCallback("backfromjs", validateTXT);
ExternalInterface.call("outtojs");
}
else
{errorTXT.text = "No external interface available.";}
}
}
private function validateTXT(fname:String = "", lname:String = "", themail:String = "", comms:String = ""):void
{
fname = firstWordField.text;
lname = lastWordField.text;
themail = emailField.text;
comms = commentlField.text;
var badWords:RegExp = /f[ ]{0,}u[ ]{0,}c[ ]{0,}k|s[ ]{0,}h[ ]{0,}i[ ]{0,}t|b[ ]{0,}itch|a[ ]{0,}s[ ]{0,}s/i;
var anEmail:RegExp = /[0-9]{0,}[a-z]{4,21}[0-9]{0,}[\@]{1}[a-z]{3,}[\.]{1}[comnetrgdu]{3}/i;
if (fname.length < 3)
{errorTXT.text = "First name must be 3 or more letters";return;}
if (lname.length < 3)
{errorTXT.text = "Last name must be 3 or more letters";return;}
if (themail.length > 0 && !themail.match(anEmail))
{errorTXT.text = "Email must be valid.";return;}
var allFieldsTXT:String = ""+fname+lname+themail+comms+"";
if (allFieldsTXT.match(badWords))
{errorTXT.text = "No bad words please.";return;}
doSubmit(fname, lname, themail, comms);
}
private function doSubmit(frn:String, lsn:String, em:String, commen:String):void
{
var holdResponse:URLLoader = new URLLoader();
holdResponse.addEventListener(Event.COMPLETE, computeResponse);
holdResponse.addEventListener(IOErrorEvent.IO_ERROR, sayError);
var theHeaders:Array /* of URLRequestHeader */ = [noCacheHeader, cacheControlHeader, expiresHeader, pragmaHeader];
var theRequest:URLRequest = new URLRequest("responsivepage.php");
var varsToSend:URLVariables = new URLVariables();
varsToSend.frname = frn;
varsToSend.lsname = lsn;
varsToSend.emailis = em;
varsToSend.comments = commen;
theRequest.data = varsToSend;
theRequest.method = URLRequestMethod.POST;
theRequest.requestHeaders = theHeaders;
holdResponse.load(theRequest);
}
private function computeResponse(event:Event):void
{
var theResponse:URLLoader = URLLoader(event.target);
errorTXT.text = theResponse.data+"";
}
private function sayError(event:IOErrorEvent):void
{
errorTXT.text = "There was an error while posting.";
}
}
}
The JavaScript code used with this example:
//this is the function called from the form
function outtojs()
{
//complexer is the id of the swf object in this case
tellingflash("complexer");
}
//tads js-to-as communication try catch function
//this is used for backwards compatability
//and to ensure that js to swf communication will happen in most browsers
//please see the wrappers section for more info on this
function tellingflash(thisid)
{
try
{
var fcontenter=window.document.getElementById(thisid);
}
catch(e)
{
try
{
var fcontenter=window.document.thisid;
}
catch(e)
{
var movie=thisid;
if (navigator.appName.indexOf("Microsoft")!=-1 || navigator.appName.indexOf("MSIE")!=-1)
{
if (window.document[movie])
{var fcontenter=window.document[movie];}
else
{var fcontenter=window[movie];};
}else{
if (document.embeds[movie])
{var fcontenter=document.embeds[movie];}
else
{var fcontenter=document[movie];};
}
}
}
try
{
fcontenter.backfromjs();
}
catch(e)
{
//nothing happens, in this case, if communication fails
var nojstoflerthreeas="yes";
}
}
The php code used with this example:
responsivepage.php
<?php
if (isset($_POST["frname"]))
{
//of course one would do something with frname and the rest of the data
//like put it in a database
//but this is just to show you what the server is doing in this case
//and also it is important to note that you should always validate any input
echo("Your information has been posted.");
exit;
}
?>
|
