This text is replaced by the Flash movie.

Archive for the ‘Javascript’ Category

Form Sencha Touch 2.0

August 3rd, 2012
If you are planning to create a simple email form for your mobile site you might find this app helpful and add it to your own application. Assisted by Sencha Architect 2, this form panel uses model to validate the form fields and send data to server side script in my case using PHP.

Setup with Sencha Architect. Sencha Architect Setup

Code for submitting the fields
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
onSubmitContactTap: function(button, e, options) {
        var values = this.getValues();
        var contactData = Ext.create('MyApp.model.ContactForm', {
            fullname: values.fullname,
            email: values.email,
            phone: values.phone,
            inquiry: values.inquiry  
        }),
        errs = contactData.validate(),
        msg = '';
 
        if (!errs.isValid()) {
            errs.each(function (err) {
                msg += Ext.String.capitalize(err.getField()) + " " + err.getMessage() + '<br/>';
            });
            Ext.Msg.alert('ERROR', msg);
        } else {
            Ext.Ajax.request({
                url: 'inquiry.php',
                params: {
                    fullname: values.fullname,
                    gender: values.gender,
                    email: values.email,
                    phone: values.phone,
                    inquiry: values.inquiry 
                },
                method: 'POST',
                success: this.handleSuccess,
                failure: this.handleError
            });
 
        } // if

Testing with Chrome.
Sencha Debug

PHP Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
  //The Posts
  $fullname = make_safe($_POST['fullname']);
  $email = make_safe($_POST['email']);
  $gender = make_safe($_POST['gender']);
  $phone = make_safe($_POST['phone']);
  $inquiry = make_safe($_POST['inquiry']);
 
  //Simple escape string for mysql insertion
  function make_safe($variable) {
	$variable= strip_tags($variable); 
	$variable = mysql_real_escape_string(trim($variable));
        return $variable;				
  }
 
echo json_encode(array('fullname' => $fullname,
						'email'   => $email,
						'gender'  => $gender,
						'phone'   => $phone,
						'inquiry' => $inquiry));


Download the code (Sencha Architect 2.0)

PhoneGap Copy Javascript Error

May 16th, 2011
I'm trying something new right now, web apps on smartphones, while trying to shell a simple html I did, (just displaying a JS alert box) I got this error that phoneGap can't transfer something.

PhoneGap JS Debug

The simple fixed was just rename the folder that has space on it going to your xcode project.

PhoneGap JS Test

Flash AS3 and Mootools Slimbox

February 26th, 2010
Most the site I made were based on mootools library but when it comes to Overlay Images Scripts I prefer to use Light box v2 that also you can easily call with in Flash AS3 using the ExternalInterface.call using a bridge which is available for download - flashlightboxinjector unfortunately this is base on jQuery library so I tried to find a "Lightbox" similar Overlay Image function that has available javascript that I can call within Flash AS3 code so Slimbox I guess the easiest for me to follow, it got API documentation you can follow http://code.google.com/p/slimbox/wiki/MooToolsAPI.
So this is the code inside the flash movie
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//Begin AS3 Script
  import flash.geom.*
  import flash.display.*
 
//Mouse Events  
  import  flash.events.MouseEvent;
//External Command
  import flash.external.*;
 
//gradient background color  
  var fillType:String = GradientType.LINEAR;
  var colors:Array = [0x330000, 0x333307];
  var alphas:Array = [1, 1];
  var ratios:Array = [0x00, 0xFF];
  var matr:Matrix = new Matrix();
  matr.createGradientBox(150, 20, 0, 0, 0);
  var spreadMethod:String = SpreadMethod.PAD;
  this.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);  
  this.graphics.drawRect(0,0,250,200);
//gradient background color  
 
//Add handler Event
  img1.addEventListener(MouseEvent.CLICK, onClickHandler01);
 
 
 
function onClickHandler01(myEvent:MouseEvent){
    //call	Javascript Command
	ExternalInterface.call("Slimbox.open","/images/demon.png", "This Kanji means Demon");
 
}		
 
//End AS3 Script
ExternalInterface.call("Slimbox.open","/images/demon.png", "This Kanji means Demon");
This simply calls the javascript Slimbox.open function that will open an Overlay Image also make sure that parameters that "wmode" = "transparent" and "allowScriptAccess" = "always"
I used swfobject to render my Flash movies. So here how you implement the html code to make the flash work with slimbox.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <!-- Slimbox Start //-->
    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/slimbox.js"></script>
    <link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
    <!-- Slimbox End //-->
 
 
               <script type="text/javascript">
                             window.addEvent('domready', function(){ //for IE 7 problem
			var soSlim = new SWFObject("slimbox.swf", "slimbox", "250", "200", "8", "#FFFFFF");
			soSlim.addParam("quality", "high");
			soSlim.addParam("wmode", "transparent");
			soSlim.addParam("allowScriptAccess", "always");
			soSlim.write("flashcontentSlim");
                            });   
		</script>
Demo:
Flash required


You can also try milkbox

Download Source Code.