Pure-Essence.Net » ajax

writing an ajax app for Sequence

pureessence — Mon, 02 Aug 2010 12:44:43 +0000

Yesterday I attended Ted Neward‘s game design session at nofluff. It inspired me to begin to implement the game sequence in an ajax app. It will be a private app since I only plan to play it with some friends. But it will be hosted somewhere on my website so it can be accessed from anywhere.

Sequence is a board game my husband and I often played with two of our friends. It’s their favorite game. When I started thinking last night about potentially creating a web version so we don’t need to be physically at their house to play, I became very excited. I believe I may create something that will work with the help of php, mysql + jQuery (ajax).

Why this idea excites me

Before I started as a professional Java developer, I always coded in php & mysql (somewhat a LAMP developer on the side). However most of my old applications and sites are down. I no longer have the desire to maintain them. Now this is a great opportunity and incentive for me to go back to php & mysql and write something I enjoy.
PHP has a special place in my heart. Just a while ago, a coworker asked for my help to create him something to help with the manual text file processing he has to do every month. It only needs to be quick & dirty app. I threw together a php app in half an hour for him. It was super cool. He loved it.
jQuery is my favorite javascript library. You don’t have to look far in my blog to find that out. So the more I get to work with it, the happier I am.
I can also involve my husband on this project. Even though he’s not a programmer but he knows this game as well as I do. Normally he doesn’t have much of stake in my apps but this time he can be my lab rat
With this project, I also get to play with UI. I started as a web designer. So CSS & HTML have been my passion. There will be quite a bit of UI involved in the designing of this game.
It’s fun because it will be very useful. I very much look forward to the day that I can have our friends joining the game.
I can blog about it! I may not share my final product with the public but I will definitely share my progress & experience. Hopefully there will be challenges where I can learn some new stuff.

Last night I started brainstorming with my hushand as how I want the game to work. I started table designing and UI designing. This morning I put together a very prototype version of the UI.

I leveraged jQuery’s “redmond” theme. This way I can use all of the cool jQuery UI widgets and benefit from reusing its css for elements I want to style and create a semi prof looking app in no time.

Why I prefer jQuery over YUI

pureessence — Sat, 11 Oct 2008 14:16:26 +0000

While at work, I was trying to find a way to easily do server side pagination without writing all the lovely logic myself. Due to some constraints, I am unable to use more high end framework such as JSF and struts. Which in a way I believe is a good thing. I would have more control over just writing servlets. However, having written pagination logic before, I really did not want to write that again. Somehow I thought of jQuery. Just for amusement, I looked for jQuery pagination plugin and guess what I found it! By using this plugin, I can pass in some simple parameters such as total records, records per page, number of pages shown etc. to have jQuery generate a paginator for me. That’s beyond cool so I put it into action.

Upload Report Mock uses the jQuery pagination plugin but handles the pagination on the server side via php.

Ultimately what I also want to handle is the following scenario:

I have a table of data, one of the column is editable.
If the user clicks on the column of a particular table row, a modal window will pop up asking for additional information.
The user fills out the information and submits.
The window updates the info for that table via AJAX and updates the results screen

While I was eager for figure out how to accomplish that in jQuery, I found out that it is not one of the previously used javascript framework at work so they asked if I could look into YUI.

Digging into YUI, first I tried to accomplish the same thing using the YUI paginator widget. I spent two hours but it really does not seem like I can generate some href tags with this component like I could with the jQuery plugin. With jQuery, I could produce:


Prev
1
2
3
4
5
6
7
8
...
10
11
Next

With YUI, I have to hook up the paginator with another javascript or YUI widget. So to make things easier, I looked into YUI’s datatable component and found an example to use it with server side pagination and sorting. That seems to accomplish the overall need of pagination. Although that’s a bit of overkill but I thought it’s worth a shot. I spent 8 hours implementing it via server side JSON. Here’s what I produced:
Upload Report Mock with YUI

Instead of 10 lines of javascript code like the previous, this one has 68 lines. But it does provide AJAX pagination so I thought that’s mostly fair.

Next I looked for a simple date picker calendar in YUI like the jQuery date picker plugin. The date picker is a necessary functionality of the application. With jQuery, it’s extremely easy to use. You add the plugin js & css links, and then you give your input css class or unique IDs and with jQuery selector, just call the plugin via:

$("#startDate").datepicker()

Click on the start and end dates in Upload Report Mock to see it in action.

Using YUI, I looked into its calendar component. The closest thing I could find is this example.

Not only would it need all these extra js includes

It also requires another 76 lines of javascript code for just adding one date picker.

Despite the complication, I tried to make it work with my Upload Report Mock with YUI but I failed pretty miserably. Sure if I put in enough hours, I will eventually make it work but WHY? Why would you stop yourself from using something else that takes 2 seconds?

At this point, I presented my findings to my co-workers. I really hope they will accept jQuery. Yea sure it’s yet another new javascript framework but it will save coding time.

Here’s another comparison. I found a very YUI datatable like jQuery plugin flexigrid. Take a look at example 3. Lines of code to use server side pagination and sorting: 33. In my Upload Report Mock with YUI, I used 68 lines. Also let’s do a comparison to see which one makes more sense and is less verbose.

jQuery:

$("#flex1").flexigrid({
	url: 'post2.php',
	dataType: 'json',
	colModel : [
		{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
		{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
		{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
		{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
		{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
		],
	buttons : [
		{name: 'Add', bclass: 'add', onpress : test},
		{name: 'Delete', bclass: 'delete', onpress : test},
		{separator: true}
		],
	searchitems : [
		{display: 'ISO', name : 'iso'},
		{display: 'Name', name : 'name', isdefault: true}
		],
	sortname: "iso",
	sortorder: "asc",
	usepager: true,
	title: 'Countries',
	useRp: true,
	rp: 15,
	showTableToggleBtn: true,
	width: 700,
	height: 200
	}
);

YUI: click for source.

new millennium with web 2.0

pureessence — Fri, 29 Feb 2008 04:09:34 +0000

After much anticipation, it’s finally here!!

I present you the completely rewritten New Millennium – New Millennium with web 2.0

It’s done in ajax with the help of jQuery. The idea is to create a site with no page refresh. Although it was fun, toward the end it was getting a bit tedious. I felt like doing a cross-stitch. Overall, I found ajax coding with no IDE support hard to debug. Some of the bugs eluded me quite a bit. I’ve done extensive testing on the final product. I hope it’s a good one.

It has been a very nice learning experience. I think jQuery is awesome but it’s a client side only library. So if I go try GWT and I should have a very good comparison.

lol json tutorial

pureessence — Mon, 18 Feb 2008 02:29:32 +0000

In my attempt to rewrite new millennium to make it 100% page refresh free, I’ve decided to learn more about json so I can use it with ajax. This is the first json tutorial that popped up in google. Hilarious stuff! I’m about 80% done with the rewrite of new millennium btw. So expected to see its new face on the web in a week or so. The process has been exciting and rewarding except I was pretty disgusted with my old code. Haha, live and learn

Oh yea, if you want to test the json you whipped together, you might find this validator useful. And also jQuery’s json lib is my friend. This is a good tutorial to generate json with PHP.