Photo Swipe

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery targeting mobile devices, demo.

Awesome Mobile Image Gallery Web App

This is a tutorial blog post written by tympanus.net, really good example to showing step by step creating mobile web image gallery using jQTouch, demo.

Tiny Circleslider

Tiny Circleslider is a circular slider or carousel build based on jquery library, this one have a unique interface as a gallery to be used, the radius size can be customized so it will fit in any mobile devices.

Touch Gallery

A fullscreen photo gallery for touch-devices.

jQTouch Extensions

jQExtensions is a collection of extensions for the jQTouch mobile web app framework based on jQuery. This one already discontinued but have a good example used to creating simple photo gallery, demo.

Jaipho

Jaipho is a mobile web gallery inspired by original iPhone photo application, demo.

Galleria

I’m not really testing this one but from the documentation you can see swipe features, which mean you can use it on mobile devices.

TN3 Gallery

Like galleria I’m not really testing this one but from the sites says it supported mobile devices.

This rich feature whether you called it component, widget or any other, can help you to make user interface faster, without have to write your own style. These might be help if you build an enterprise web application. I list some of javascript framework with rich that maybe can be one of your choice. 

ExtJS

ExtJS is one of the most popular javascript framework that offer very rich and complete UI widget to build web application, created by sencha inc, extjs is very popular since the early release in version 2, even in latest version extjs added an architectural pattern like MVC to make the code more readable.

visit extjs

Dojo Toolkit

Since the first it born dojo is one of the extjs competitor, one of the advantages of dojo is the license. you can use it for free even for the commercial project, it is created by sitepen, unlike extjs who separated the mobile feature in different framework, dojo include the mobile feature.

visit dojotoolkit

Qooxdoo

It is open source and enterprise ready javascript framework maintained by 1&1 hosting company, you can see the real life example on the it official page, to see how this framework are implemented.

visit qooxdoo

Smartclient

Created by Isomorphic Software, smartclient require JDK to work on you machine, smartclient offer variety off license you can get the free version with very limited features, you can see the smartclient version comparison.

visit smartclient

ZK Framework

ZK framework developed and maintained by Potix Corporation, not only offering framework that ready to use by developer but there also a ready to use application like pivot table and spreadsheet, also there is plugin to integrate to eclipse IDE.

visit zk

DHTMLX

Like smartclient, DHTMLX not completely free, it charge by what the features you want to use, see this licenses comparison.

visit dHTMLX

Wijmo

Wijmo is a kit of web UI based on JQuery UI, is offer many ready to use widget, and it can be themed based on JQuery UI theme, but unlike it core JQuery UI license, wijmo only free for the trial edition.

visit wijmo

Vaadin

Vaadin is java web application framework, which mostly used by Java developer, it created by Vaadin Ltd previously named IT Mill.

visit vaadin

Echo Web Framework

visit echo

Rialto

Not really know about this one, it seems it already long time not being updated, but the web still active and you can still download it.

visit rialto

Some Others Web UI Widget

- Uize by Chris van Rensburg

- Alloy UI by Liferay

- YUI Library by Yahoo!

- Based on Mootols: JxLib, MochaUI, MoolegoUI

- Based on JQuery: Intelligent Expert, jQuery Tools, KendoUI

- Uki Simple UI Kit for complex web apps

- Cappuccino an Objective-J javascript framework

$(document).ready(function() {
    $("#field").keypress(function(event) {
        alert(event.charCode);
    });
});

The code above used to get the character code from the input keyboard, you can browse more the “event” callback parameter using console.log() function and browse the entire parameter properties using firebug in firefox or inspect element console in webkit browser,

console.log(event);

and to convert back to character, simply using this javascript code.

String.fromCharCode(charCode);

View Demo

Then convert this to html, just simple div inside div and the difference are id and the css style, and there is one button to triggering the movement of the box inside the container

<body>
	<div id="top">
		<button id="btmove" onclick="moveRandom('box')">
			Move Random
		</button>
	</div>
	<div id="container">
		<div id="box"></div>
	</div>
</body>

The button event triggering to call moveRandom function that I showed next, wait I forgot this is the css

#top {
    margin: 0 auto;
    background: #d3d3d3;
    text-align: center;
    padding: 10px;
    width: 500px;
    margin-bottom: 10px;
}
#container {
    margin: 0 auto;
    width: 500px;
    height: 500px;
    background: #0099cc;
    padding: 10px;
}

#box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #f3f3f3;
}

The #box position must be absolute so it can be moved to anywhere inside windows, and now the javascript. This is the function to get random value between to number thanks to admixweb for this function, work really nice

function randomFromTo(from, to){
	return Math.floor(Math.random() * (to - from + 1) + from);
}

For the function above, range (that will become the parameters) for vertical position must between container top position and container top position plus container height, and range for horizontal position must between container left position and container left position plus container width. Here is how I implement in the code

function moveRandom(id) {
    /* get container position and size
     * -- access method : cPos.top and cPos.left */
    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();

    // get box padding (assume all padding have same value)
    var pad = parseInt($('#container').css('padding-top').replace('px', ''));

    // get movable box size
    var bHeight = $('#'+id).height();
    var bWidth = $('#'+id).width();

    // set maximum position
    maxY = cPos.top + cHeight - bHeight - pad;
    maxX = cPos.left + cWidth - bWidth - pad;

    // set minimum position
    minY = cPos.top + pad;
    minX = cPos.left + pad;

    // set new position
    newY = randomFromTo(minY, maxY);
    newX = randomFromTo(minX, maxX);

    $('#box').animate({
        top: newY,
        left: newX
        }, 500, function() {
    });
}

Jquery really have great function to getting the element properties like css style value or position, here the capture that I’ve been created

View Demo | Download Source

Day by day, web application framework make our development easier and faster, with the growing of mobile devices such as smartphone and tablet pc for browsing the web, the web framework need to meet the difference screen for each devices, different user experience. These are the list of framework (well not all actually a framework) that can be choosen by you for developing mobile web application, some provide full user interface and some only provide a basic framework.

1. Sencha Touch

Sencha Touch is one of the product of SenchaInc, the first HTML5 mobile JavaScript framework that allows developer to develop mobile web apps that look and feel native on iPhone and Android touchscreen devices. Sencha Touch built like the ExtJS component, if have some experience with ExtJS I believe it will bring the advantage for easier learning.

Download Page | View Demo

2. jQuery Mobile

I think this is the most awaited in mobile web application framework, because the popularity of jQuery, this framework is not the first but getting a lot of attention, jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets. A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

Download Page | View Demo

3. WebApp.Net

WebApp.Net is a light weight, powerful javascript framework taking advantage of AJAX technology. It provides a full set of ready to use components to help you develop, quickly and easily, advanced mobile web applications.

Download Page | View Demo

4. DTHMLX Touch

DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touch-screen devices.

Download Page | View Demo

5. jQTouch

This is not a framework but just a jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices. Now this project a part of Sencha Labs, the company who developing Sencha Touch. I love the default theme that have black, dark look and feel.

Download Page | View Demo

6. iWebKit

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp. The kit is accessible to anyone even people without any html knowledge and is simple to understand thanks to the included tutorials.

Download Page | View Demo

7. Jo HTML5 Mobile App Framework

Joapp is a UI Widget Framework With a side of DOM, event and data stuff , Open Source Under a friendly OpenBSD License , Cross Platform webOS, iOS, Android, Symbian, Safari, Chrome, Dashboard Widgets. Light and Efficient Minified JavaScript is just over 8K with no dependancies, and compatible with PhoneGap Plus most other JavaScript frameworks

Download Page

8. iUI: iPhone User Interface Framework

iUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps for iPhone and comparable/compatible devices. iUI has the following features: Create Navigational Menus and iPhone-style interfaces from standard HTML, use or knowledge of JavaScript is not required to create modern mobile web pages, ability to handle phone orientation changes, provide a more “iPhone-like” experience in your Web apps.

Download Page

9. Sproutcore

SproutCore is an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins.

Download Page

10. Zepto.js

Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax. The goal: a 2-5k library that handles most basic drudge work with a nice API so you can concentrate on getting stuff done. Zepto.js is created by Thomas Fuchs the author of script.aculo.us, the javascript user interface framework.

Download Page

With all the choice that we have, sometimes we confuse what should we choose, but I’m sure the most promising framework to use in the future are the first two, they are Sencha Touch, backed by strong company and jQueryMobile, that have very large community.

01. Plupload

Allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads,  Plupload is currently separated into a Core API  and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation, demo.

02. Ajax Upload by Andrew Valums

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and doesn’t require any library to run. AJAX Upload doesn’t pollute the global namespace, and is tested with jQuery, Prototypejs. This plugin is one of the most famous jquery uploader that require no flash. demo

03. Ajax File Upload

This AjaxFileUpload Plugin is a hacked version of Ajaxupload plugin created by yvind Saltvik, which is really good enought for normal use. Its idea is to create a iframe and submit the specified form to it for further processing, demo.

03. jQuery Multiple File Upload Plugin by Fyneworks.com

The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form.

04. jQuery Form Plugin – File Upload by malsup.com

This plugin is a part of jQuery Form Plugin it make you easier to submitting form using Ajax including the input file, and required no flash, demo.

05 . Uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website.  It requires Flash and any backend development language.  An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it. Uploadify free to be used in a number of applications and commercial products, demo.

06. SWFUpload jQuery Plugin by Adam Royle

This plugin created based on SWFUpload and Jquery, it support both single or mutiple file upload, and require flash, demo.

07. jqswfupload by Alexandre Magno

This plugin is the easier way to make a multiple file upload using swfupload library. You can create a complete interface for multiupload files based on Flickr in just one line of code and them make custom settings to controll how works all the features, demo.

08. jcUpload

It’s a small free plugin, that enables ajax-like file upload. It requires Adobe Flash player and jQuery JavaScript library. Plugin is freeware, demo.

09. jqUploader

jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader. This plugin required flash, demo.

10. jqupload by jQframework

From the site it got following feature Easy to integate to your application, easy to define your own logic. lightweight form uploader plugin, source file is just 2k, free and free of charge under the MIT License, demo.

11. uploadprogress

Plugin to augment a standard file upload form with transparent background upload and add uploadprogress meter to keep client informed of progress. This is not really the plugin for uploading file, but just to help inform the progress of uploading file, demo.

Other source that might be useful

http://kisdigital.wordpress.com/2010/03/30/easy-jquery-mutlifile-uploader/

http://docs.jquery.com/Tutorials:Multiple_File_Upload_Magic

http://www.fullfatcode.com/2009/06/06/jquery-ajax-uploader-plugin/

Let’s start :

1. Include EXTJS file in html header

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>

2. Create The EXTJS form

<script type="text/javascript">
Ext.onReady(function(){
	var formRegister = new Ext.FormPanel({
		frame: false, border: false, buttonAlign: 'center',
		url: 'undefined', method: 'POST', id: 'frmRegister',
		bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
		width: 300, labelWidth: 150,
		items: [{
			xtype: 'textfield',
			fieldLabel: 'Username',
			name: 'username',
			id: 'regUsername',
			allowBlank: false,
			vtype: 'uniqueusername'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Password',
			name: 'password',
			allowBlank: false,
			inputType: 'password'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Confirm Password',
			name: 'cpassword',
			allowBlank: false,
			inputType: 'password'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Email',
			name: 'email',
			vtype:'email',
			allowBlank: false
		}
		],
		buttons: [
			{ text: 'Register' },
			{ text: 'Reset', handler: function() {
					formRegister.getForm().reset();
				}
			}
		]
	});

	var winRegister = new Ext.Window({
		title: 'CI_EXTJS &mdash; User Register',
		layout: 'fit',
		width: 350,
		height: 190,
		y: 260,
		resizable: false,
		closable: false,
		items: [formRegister]
	});

	winRegister.show();
});
</script>

3. Code for modified custom validation
The idea is overiding the custom validation everytime it called

<script type="text/javascript">
Ext.apply(Ext.form.VTypes, {
	uniqueusername : function(val, field) {
		var username = Ext.getCmp('regUsername').getValue();
		Ext.Ajax.request({
			url: 'check_username.php',
			method: 'POST',
			params: 'username=' + username,
			success: function(o) {
				if (o.responseText == 0) {
					setusernamevalidfalse();
				}
			}
		});
		return true;
	},

	uniqueusernameText : 'Username Already In Use'
});

function setusernamevalidfalse() {
	Ext.apply(Ext.form.VTypes, {
		uniqueusername : function(val, field) {
			var username = Ext.getCmp('regUsername').getValue();
			Ext.Ajax.request({
				url: 'check_username.php',
				method: 'POST',
				params: 'username=' + username,
				success: function(o) {
					if (o.responseText == 0) {
						setusernamevalidfalse();
					} else {
						setusernamevalidtrue();
					}
				}
			});
			return false;
		}
	});
}

function setusernamevalidtrue() {
	Ext.apply(Ext.form.VTypes, {
		uniqueusername : function(val, field) {
			var username = Ext.getCmp('regUsername').getValue();
			Ext.Ajax.request({
				url: 'check_username.php',
				method: 'POST',
				params: 'username=' + username,
				success: function(o) {
					if (o.responseText == 0) {
						setusernamevalidfalse();
					} else {
						setusernamevalidtrue();
					}
				}
			});
			return true;
		}
	});
}
</script>

4. The simple php file validation
For more advanced usage you can use some database connection, and I call it check_username.php

<?php

$username_list = array('admin', 'administrator', 'superadmin', 'john', 'michael');
if (in_array($_POST['username'], $username_list)) {
	echo 0;
} else {
	echo 1;
}

?>

You can download all files following the download link below, but i’m included EXTJS file you can download from the official site here.

DOWNLOAD SOURCE

1. Table Orderer

Demo | Download

2. Table Sort

Demo | Download

3. Tablekit

Demo | Download

4. Table Sorting With Prototype

Demo | Download

5. Lighweight Table Sorting

Download

6. MyTableGrid

Demo | Download

7. Sortable for Prototype

Demo

1. Follow the examples

ExtJS come with a bunch of great sample use of using widget, this provide the basic use of the component, creating plugin, etc. This is the best way to know what you can do with the component and how to implement the component by viewing the source code, if you somehow don’t understand what the code means, simply you can consult the API documentation first. Just download it first and run on your local server or you can view it online.

2. Read the ExtJS tutorial

So, you are ready to get your hand wet ? but don’t know what to do to digging depper to understanding ExtJS, I suggest you start with tutorial from the ExtJS official site. It’s cover about the getting started guide, dom query helper, combobox, form, grids, drag & drop, menus, tree, etc, even the basic of the application design and some of them provide the downloadable example source code. Although the tutorial is useing version 1.x and 2.x, yes it is compatible if you are using version 3.

3. Don’t fear to read the API

The ExtJS API documentation come with the bundle when you’re downloading ExtJS. So how this gonna be useful ? well for me it provide very useful information about the Ext core and default config options, properties, events, method for each component, it’s a good reference when you are trying to manipulating the component. Some component given the basic example of usage. Just download the ExtJS bundle and you can find it in examples folder or you can view it online

4. Consult the spesific question to the forum

When I get some trouble I always use Google first, type your spesific question on Google and most of the solution found in the ExtJS official forum and i always found the solution is very handy and easy to understand. Even some of the expert member provide advance source about ExtJS like quick search plugin, grid paging row numberer and custom themes and you can download it for free.

5. Use the good IDE

Since you use ExtJS in javascript language, the you must code all the ExtJS component by hand, and you need the good IDE to help you browse the all avaliable API. I’m personally using Netbeans PHP IDE for my project, you can set the project and include the ExtJS style, ExtJS basic and ExtJS all. The IDE will scan all the project including the ExtJS file and when you code the ExtJS component or ExtJS core, you can type shift + space on your keyboard and the IDE will give an autocomplete feature, and it helping me a lot, maybe not all the method shown in the autocomplete feature but you still can browse on the API documentation. If your not the fan of Netbeans, you can use other great IDE like Eclipse or Aptana.

6. You may need to know a bit about Javascript Language

My experience is when i code the event handler of the component, sometimes need like client side validation, like is defined object, sel length etc. When you found this trouble just googling about spesific javascript question and it’is not really hard.

more ExtJS Resource and tutorial

Video tutorial from EXTJS.TV bunch of ExtJS Tutorial

http://defafe.com a blog about ExtJS tutorial

Example ExtJS in Action some of link not working but the ExtPlorer is good.

TuturTinular a blog who have some ExtJS tutorial

ExtJS and WordPress wordpress themes usign extjs and it’s free to download

Using ExtJS grid in WordPress Admin

Integrating CakePHP and ExtJS

http://blog.extjs.eu/