rss
twitter
  •  

Virtual Bounty – Engineer

| Posted in amfphp, flex, php |

0

The other day, I was talking to one of my colleagues at work about my interest in all things Flex and seemed to strike a chord with him, when he popped this question, “So can I see some of your work?”  It was a *gotcha* moment for me, since I’d not put up any of my Flex projects live on the Internet. Hence this post!

In my final year of college at NITK Surathkal, I was in charge of an event called Virtual Bounty, an online treasure hunt. This was an application that I had designed using Flex.

What is Virtual Bounty?

Virtual Bounty is the online treasure hunt that is held during Engineer (NITK Surathkal’s annual technical festival). As the name suggests, bounty hunters start off by getting a question and answering it correctly takes you on to the next question in the hunt until you reach the treasure. Each year, the quiz question setters make use of a ‘theme’ modeled on a comic book superhero.

The sponsors for Virtual Bounty were Adobe, and they wanted the Virtual Bounty application to be run on the Flash platform using Adobe Flex. The theme for the questions was “Rich Internet Applications” and the central character of the hunt was Batman.

All that’s fine, but tell me what went into designing it?

  • User Interface- Adobe Flex and Photoshop
  • Backend Scripting – PHP
  • Interfacing between PHP and Flex- AMFPHP
  • Database- MySQL

Can I still play it?

The Virtual Bounty application is available over at: http://vbounty.tekyt.info

The original application required you to register on the Engineer site and then play the game, but you can log in with any username and password that you wish to use (but do note it down somewhere, so that you can log back in). On first login, you are required to choose a ‘nick’ that you will be known by, and which will be shown on the leader-board. Please do take a cursory glance over the guidelines.

NITK has always had a strong quizzing culture, and that is evident when you see the quality of questions. Though the quiz sounds theme specific, the questions can be attempted by anybody. Remember Google is your friend.

When is Virtual Bounty going to be held this year?

Virtual Bounty is held every year as a part of Engineer, and this time Engineer is slated to held between 22nd – 25th October 2010. Do check out http://www.engineer.org.in and especially the business events

Back to the technical stuff

It took me about a week to design the application, and write the backend code. I simply loved using AMFPHP, it provides a great debugging tool, called the AMFPHP browser which you can use to test your Remote Object method calls. If you want me to share the source code of this project with you, please drop a line here

Credits

A big thanks to the Adobe India Evangelist team – @hsivaram, @sujitg and @sriragam in the design and debugging of the application.

Kudos to LWSam, Hanni and others for the questions.

…and the Technical Team at Engineer, led by @trivikram (I was a part of his team), which helped create the buzz about the fest and ‘redefined it on the web’

TravelBuddy – My Final Year Project

| Posted in amfphp, flex, php |

0

As a part of our B Tech degree requirement, we are to work on a project in our final year that applies the skills we have learnt over the duration of the entire course. I teamed up with @trivikram, @vageesh_hg, @bhanubirla and @praveen_soori on developing ‘TravelBuddy’ a social network based travel portal made using Adobe Flex.

We wanted to develop a portal that would make it easy for a user to choose a travel destination, based upon his / her preferences and utilise the network effect to aid in the process.

The project was divided into 2 parts-

1. Development & Design of the Social Networking Portal

2. Internal Algorithms that use the concepts of SNA (Social Network Analysis) and are used to provide the ‘suggests

Our effort was appreciated by the adjudication panel and our project guide, but we were the ones who were satisfied the most as we managed to (more or less) achieve what we set out to do in the first place. I shall soon post more technical details and show you a working demo. What I can tell you in this post is that we used Flex 3, and the backend was written in PHP, interfacing using AMFPPHP and we worked on the code using SubClipse.

It is said that when you work hard, you must play harder. And we did just that-

Clockwise from top left- @praveen_soori, @vageesh_hg, @trivikram, @tusay (thats me!) and @bhanubirla

Personalize funny videos and birthday eCards at JibJab!

A Simple ToDo List Application Made using AIR

| Posted in air, flex |

1

For those starting out with Adobe AIR, and have read about its features, the next logical thing to do in the learning process is to actually build a desktop application.

Here I showcase a simple ToDo List Application (I have named it MyToDo) made using Flex Builder 3 to show you how to leverage the features I explained in the previous post.

“MyToDo” is an application which is to be used as a todo list. User can add todos, and mark them as completed once they are done with. The ones marked completed may either be removed, or sent back to the list of todo items.

Key Features-

  • Uses Custom Chrome
  • Uses SQLite
  • Checks for Application Updates from the internet (from the url “http://tekyt.info/MyToDo-V2.air” in particular)
  • Minimizes to System Tray

[All features found to be working on Windows, not tested on Mac - system tray code might not work on Mac]

How to use the Application-

  • Install MyToDo using the AIR install badge whose link appears at the end of this blog post.
  • To add a new todo, click on the ‘New ToDo’ button.
  • To mark a todo as complete, simply click on the todo item.
  • To mark a completed todo item as incomplete, simply click on it. [For instructions inside the app, hover over the item]
  • Clear Completed button will remove all the completed items forever (from the database)
  • Clicking on the ‘Close’ button on top right will minimize to system tray, with tooltip as number of pending todos.
  • Right-click on the system tray icon for options.
  • The ‘Update Me’ button checks for updates, if a recent version is avaible, the application is updated else, the Welcome message changes text to notify non-availability of updates  [Version 1.0 upgrades to Version 2.0]

Get the Flex Project Source Code here

Install the Application here

If you have any queries on the source code, please do post it in the comments

Developing a Cool AIR Application

| Posted in air, flex |

2

I was thinking, what goes into building a cool Adobe AIR desktop application? An AIR application can be developed either using Adobe Dreamweaver, Flex or Flash. Here are some features of AIR that you can leverage to make your application look cool-

  • Use of custom chrome- Why should applications be bound in a rectangular box? With AIR, you can change the look and feel of your application (even make it apple-shaped) for an intuitive user experience. Here is a wonderful tutorial for  you to get started- http://technoracle.blogspot.com/2007/07/air-apple-shaped-application.html
  • System Tray Integration- Most dektop applications these days have system tray integration, when you minimize them, they dock to the system tray. Here is a tutorial on how to achieve docking- http://www.saskovic.com/blog/?p=5
  • Transitions and Effects- As with Web Applications made in Adobe Flex, you can use transitions and effects in your AIR dektop application. Here is a totally cool effect- http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/
  • Use of the SQLite API- Adobe AIR provides an SQLite API which can be used to make local SQLite databases. SQLite requires no seperate installation and is a serverless, compact DB engine – just what a desktop application needs

Other than this, an AIR application is capable of using the client system’s native filesystem, performing application updates, using the clipboard and everything else a desktop application is capable of. The biggest advantage of developing an AIR application is that it is cross platform- it runs seamlessy on Windows, Mac and Linux.

Exciting times ahead with the upcoming version of AIR 2.0 which facilitates microhpone data access, multi-touch and gesture events, USB detection and much more. Check out a preview here

Using AMFPHP with Flex3 to build a CRUD Application

| Posted in amfphp, flex, php, remoting |

6

As promised in my introductory post, I shall demonstrate how to use AMFPHP in Flex3 in order to perform CRUD (create, retrieve/read, update, delete) operations on the tuples of a table. We will make use of AMFPHP Remoting to invoke RPCs that will perform CRUD operations on a mysql database.

Before we are set to go,  let me give you a brief insight into AMF. AMF is the Action Messaging Format and is used for serializing messages between the webserver and Flex. It is about 10 times faster than using the HTTPService Objects as it uses a binary format to serialize the messages and allows mirroring of server side classes on the Flex client (how this can be done will be covered in a different post). AMFPHP is a PHP Open Source library which allows PHP Classes to talk to Flex .

1. Setting it up

AMFPHP can be downloaded from here

Once you have extracted the archive, paste into your web root or any folder your webserver can access. A clean install can be verified by checking the url http://<path_your_pasted_dir>/gateway.php

2. Writing a Service

Since this post has been talking a lot about classes, you might have figured by now that we will be using OO PHP for writing the service. As mentioned earlier, I shall not talk about the mapping of VOs in this blog post.

I shall call my service as TestService.php, and I have four methods-

feedData- to insert records

getData- to retrieve records

updateData- to update records

deleteData- to remove records

This is the table that I will be working with-


CREATE TABLE `users` (
`id` int(3) NOT NULL auto_increment,
`name` varchar(20) NOT NULL,
`city` varchar(20) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `name`, `city`) VALUES
(1, 'Tom', 'London'),
(3, 'Harry', 'dfgfg'),
(4, 'foo', 'bar'),
(5, 'abc', 'xyz'),
(6, 'sdlj', 'dfdf;');

It is a sample users table with each tuple of the form (id,name,city)

TestService.php


<?php

include('db.php') //define all DB connection settings here;

/**
* TestService to demonstrate CRUD
* Author: tusay
* The PHP Codes here are pragmatic in nature, importance to be given to usage of function parameters and return types
*/

class TestService {

/**
* Inserts a record
* @returns Flag to indicate success or failure
*/

public function feedData($name,$city) {

//Connect to the DB

$dbc=mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME);

$query="insert into users(name,city) values('$name','$city')";

if(mysqli_query($dbc,$query))
return "true";

else return "false";

mysqli_close($dbc);

}

/**
* Gets all the records as an array
*
*/

public function getData() {

//Connect to the DB

$dbc=mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME);

$returnValue=array();

$query="select * from users";
$result=mysqli_query($dbc,$query) or die("Error in SQL Query, please check the SQL");

while($row=mysqli_fetch_array($result,MYSQL_ASSOC))
{
$returnValue[]=$row;
}

mysqli_close($dbc);
return $returnValue;

}

/**
* Deletes a record
* @returns Flag to indicate success or failure
*/

public function deleteData($name) {

//Connect to the DB

$dbc=mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME);

$query="DELETE FROM users WHERE name='$name' LIMIT 1";

if(mysqli_query($dbc,$query))
return "true";

else return "false";

mysqli_close($dbc);

}

public function updateData($name,$new_city) {

//Connect to the DB

$dbc=mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME);

$returnValue=array();

$query="update users set city='$new_city' where name='$name'";

$result=mysqli_query($dbc,$query) or die("Error in SQL Query, please check the SQL");

if($result)
{
$returnValue['flag']="true";

}

else

$returnValue['flag']="false";

mysqli_close($dbc);

return $returnValue;

}

}

?>

Notice that in all cases other that than feedData, the return value is flag denoting the status of the operation. A function may return a single value, an array of key-value pairs or an array of objects too.  The service must go to the services folder inside your amfphp directory.

3. Testing the Service

Once you have the service ready, its better to test it before using it in your Flex Project. For this purpose, AMFPHP provides an excellent Service Browser (which itself is a Flex application). You will find the Service Browser in the browser directory inside your amfphp installation. Here you can make method invocations and it will show you the results of the operations. It also provides other statistical information of interest such as the total time reuired for the invocation, encode time, send/receive time, decode time, network time etc.

4. Using the Service In Flex

In order to use the written service, we will use the Remote Object-


<mx:RemoteObject id=“yourRemoteObject" source="yourAMFPHPFolderName.ThePHPFile" destination="amfphp" showBusyCursor="true">

<mx:method name="theFunctionYouWantToCall" result="myFunctionResultHandler(event)" fault="myFunctionFaultHandler(event)"/>

</mx:RemoteObject>

Notice that the source attribute takes the value- yourAMFPHPFolderName.ThePHPFile where AMFPHPFolderName is the name of the folder inside the aforementioned services folder and ThePHPFile (without the .php extension) is the name of the service (and also the PHP class).

You then write out the methods associated with the particular service, taking care that theFunctionYouWantToCall shares the same name as that in the service you have just written out in PHP. On a successful invocation of the method, the Action Script result handler (myFunctionResultHandler, in this case) will be invoked, in case of an error the Action Script error handler (myFunctionFaultHandler, in this case) will be invoked. All this happens asynchronously.

5. Coding the Action Script Handlers


private function myFunctionResultHandler(event:ResultEvent):void
{
var PHPResult:String=String(event.result);
Alert.show(PHPResult);  //will show what the PHP class returned
}

This means the PHP function has a return statement like this:

return $value
OR
return "Test";

private function myFunctionResultHandler(event:ResultEvent):void
{
Alert.show("Name: "+event.result.name);
Alert.show("Age: "+event.result.age);
}

This means the PHP returns key-value pairs like this:

$returnValue=array();
$returnValue['name']=“tusay”;
$age=21;
$returnValue['age']=$age;
return $returnValue;

You may code the result handlers so as to use the retrieved tuples as data providers to controls.

The error handler may be coded as follows-


private function myFunctionFaultHandler(event:FaultEvent):void
{
Alert.show(event.message.toString());
}

If you want to see a working sample of the project, please refer to my first post to get the Flex Project and the other assets.

žAMFPHP is a PHP open source library

My Presentation at Adobe DevSummit, Hyderabad

| Posted in flex |

1

I was a speaker at the Adobe DevSummit at Hyderabad, where I gave a presentation on using AMFPHP with Flex 3 to build a CRUD Application. Here is my presentation-

Get the other assets here-

PHP Service and Tables

CRUD Flex Project Archive

This was the first time I attended a developer summit of this scale (over 650+ participants), and I was completed awed by the occasion, fellow speakers and delegates. I could meet the top notch flash platform developers from India and could network with them. Hats off to the Adobe Evangelist team.

The Developer Summit has given me a trigger to start blogging on my experiences with Flex and showcase few of my projects (I used to blog on .NET previously here)

Stay tuned for my first post which will be related to the presentation I gave at the DevSummit.