maSnun's logs » jQuery http://masnun.com/blog Personal Blog of maSnun Sat, 24 Jul 2010 04:33:21 +0000 en hourly 1 http://wordpress.org/?v=3.0 Updated AIR APP http://masnun.com/blog/2009/11/30/updated-air-app/ http://masnun.com/blog/2009/11/30/updated-air-app/#comments Mon, 30 Nov 2009 15:02:06 +0000 masnun http://masnun.com/2009/11/30/updated-air-app/ I have updated the AIR app with a better GUI and advanced features.

Download App: http://masnun.googlecode.com/files/maSnun-AIR.air

Download Source: http://masnun.googlecode.com/files/maSnun_AIR_Source.zip

I have added a few more JavaScript files for better interactions :D

]]> http://masnun.com/blog/2009/11/30/updated-air-app/feed/ 1 My First AIR App http://masnun.com/blog/2009/11/30/my-first-air-app/ http://masnun.com/blog/2009/11/30/my-first-air-app/#comments Mon, 30 Nov 2009 11:25:53 +0000 masnun http://masnun.com/?p=728 Continue reading →]]> I have been looking forward to trying the Adobe AIR platform for desktop GUI development for a long time. Recently I started learning more on JavaScript, jQuery and CSS. So I decided to try out the AIR SDK for javascript engineers. I must agree that AIR is simply great. The platform is strong and powerful while the development curve is very low :)

I read just one article and it helped understand the basics. Later I had some issues regarding the packaging system but managed to hack through :D

First, I downloaded the Adobe AIR runtime and Adobe AIR SDK for Linux since I am on Ubuntu 9.04. I installed the runtime environment for testing the final product. The SDK has built in tools for testing and debugging the apps. I extracted the SDK into my home folder and then added the “bin” directory of the SDK to the system path by editing the “/etc/environment” file.

I then created a directory for the air application named “myair”. Inside that directory, I created an application descriptor named “myair.xml”. Here’s the source code for the file:

<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>com.example.masnun-air</id>
  <version>1.0</version>
  <filename>maSnun-AIR</filename>
  <initialWindow>
    <content>index.html</content>
    <visible>true</visible>
    <width>300</width>
    <height>600</height>
  </initialWindow>
  <icon>
    <image16x16>icons/AIRApp_16.png</image16x16>
    <image32x32>icons/AIRApp_32.png</image32x32>
    <image48x48>icons/AIRApp_48.png</image48x48>
    <image128x128>icons/AIRApp_128.png</image128x128>
  </icon>
</application>

This descriptor file holds all the basic information regarding the application. I created three more directories under the application directory:

– icons: for the icons described in the descriptor
– js: for the javascript files (mainly jQuery)
– build: for building the final product (packaging)

Then I went on building the initial and only view of the application. It’s nothing but a very simple html file. Here’s the source of the “index.html” file:

<!--
Author: maSnun
URL: http://masnun.com
Email: masnun@gmail.com
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>maSnun's AIR Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/JavaScript"
        src="js/jquery-1.3.2.min.js"></script>
        <script type="text/JavaScript">
            $(document).ready(function() { masnun(); });
 
            function masnun() {
 
                i = 0;
                $("p").prepend("&#187;")
                total = $("p").length - 1;
                $("#hide").click(function (e) {
                    if(i > total) {
                        alert("No more paragraphs to hide!");
                        e.preventDefault();
                    } else {
                        e.preventDefault();
                        $("p:eq("+i+")").hide("slow");
                        i = i + 1;
                    }
                });
 
 
                $("#show").click(function (e) {
                    e.preventDefault();
                    $("p").show("slow");
                    i = 0;
                });
 
 
                $("p").hover(function () {
                    $(this).addClass("hover");
                }, function () {
                    $(this).removeClass("hover");
                });
 
                $("p").click(function() {
                    alert("You clicked a menu item :D");
                });
 
 
            }
        </script>
        <style type="text/css">
            body { font-size:18px; background:black; color:white;  border: dashed 3px fuchsia;
            margin:5pt;}
            p { color:red; margin:5px; cursor:pointer; }
            p.hover { background: blue; color: white; }
        </style>
    </head>
    <body >
        <div style="margin: 10pt; color:lime;">
        <font size="2"> Welcome to the demo AIR app! Clicking the "Hide" option
        hides the menu items one by one. Clicking the "Reset" option brings
        all the hidden items back. Clicking a menu item shows a dialog box :D</font>
            </div>
        <div align="center"  >
            <a href="" id="hide" style="color:orange;">Hide</a> || <a href="" id="show" style="color:orange;">Reset</a>  <br/><br/>
        </div>
        <div align="left" style="color:white;">
            <p> Menu Item 1</p>
            <p> Menu Item 2</p>
            <p> Menu Item 3</p>
            <p> Menu Item 4</p>
            <p> Menu Item 5</p>
            <p> Menu Item 6</p>
            <p> Menu Item 7</p>
            <p> Menu Item 8</p>
            <p> Menu Item 9</p>
        </div>
 
        <div style="margin: 10pt; color:yellow;">
        <font size="2"> <b>Created by:</b> maSnun</font>
            </div>
 
    </body>
</html>

If you are familiar with HTML, CSS and jQuery, the code will be self explanatory for you.

Thats completes the development cycle. I tested the application by typing the following commands on my terminal:

cd myair
adl myair.xml

And it worked! :D

Now for packaging, I first created a selfsigned certificate:

adt -certificate -cn SelfSign -ou Dev -o "Example" -c US 2048-RSA cert.px masnun

Then packaged the application using the following command:

adt -package -storetype pkcs12 -keystore cert.pfx build/maSnun-AIR.air myair.xml index.html icons/*.png js/*.*

It packaged the application and created an air archive for me. I tested it and it installed, worked and uninstalled fine on my machine.

Download the App: http://masnun.googlecode.com/files/maSnun-AIR.air

Have fun! :D

]]> http://masnun.com/blog/2009/11/30/my-first-air-app/feed/ 2 jQuery with PHP http://masnun.com/blog/2009/11/29/jquery-with-php/ http://masnun.com/blog/2009/11/29/jquery-with-php/#comments Sun, 29 Nov 2009 17:34:28 +0000 masnun http://masnun.com/?p=724 Continue reading →]]> I am learning jQuery these days and here’s the source code of a php script that uses jQuery on the client side.

I have mainly demonstrated jQuery here. PHP has been used to manipulate desired number of paragraphs quickly :D

You get a number of paragraphs. Hovering over them changes their style. Clicking the “Hide” link hides the paragraphs one by one. :) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>jQuery with PHP</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/JavaScript"
        src="jquery-1.3.2.min.js"></script>
        <script type="text/JavaScript">
            $(document).ready(function() { masnun(); });
 
            function masnun() {
 
                i = 0;
                total = $("p").length - 1;
                $("a").click(function (e) {
                    if(i > total) {
                        alert("No more paragraphs to hide!");
                        e.preventDefault();
                    } else {
                        e.preventDefault();
                        $("p:eq("+i+")").hide("slow");
                        i = i + 1;
                    }
                });
                $("p").hover(function () {
                    $(this).addClass("hover");
                }, function () {
                    $(this).removeClass("hover");
                });
 
 
            }
        </script>
        <style>
            p { color:black; margin:5px; cursor:pointer; }
            p.hover { background:black; color: white; }
        </style>
    </head>
    <body>
 
        <a href="">Hide</a> <br/><br/>
 
 
        <?php
        for($i=0; $i < 7; $i++) {
            echo "<p> Paragraph number: {$i} </p>";
        }
        ?>
 
 
 
 
    </body>
</html>
]]> http://masnun.com/blog/2009/11/29/jquery-with-php/feed/ 4