So lets try to do something interesting with symfony and make this possible.
The basic idea behind it is to devise a method that can make it possible to share the assets (JS files, CSS files, Images etc etc) between the two key persons involved, the developer and the designer so that if any change is made by the guy who is designing something, it automatically gets visible in the application( without the need for the developer to implement it ).

Let’s say the designer is working on the theme of the application, which includes changes in images, CSS and JS files while keeping the structure of pages intact. What happens in routine practice is, the designer makes the changes and hands the updated files over to the developer who embeds the modifications into the CSS and images. The separation of two tasks requires more time and it becomes somewhat difficult for the two people to work on the same view file(s).

For a symfony project the directory structure looks like this:

Now inside the ‘web’ folder, there are ‘Images, CSS and JS’ folders which contain the Images, CSS and JS files by default.

Let’s play a little with symfony configuration and create a theme structure!

Create a ‘theme’ folder and within this, create ‘frontend’ and ‘backend’ sub folders. Each of these sub folders will contain themes for the frontend and backend separately, so that we can switch between themes easily in case the need arises.
Having accomplished this, we will have a directory structure which will look somewhat like this:

Notice that we have moved the ‘images, css and js’ folders from main ‘web’ folder to their respective UI folders. We get two advantages by doing so: separation of assets of different applications (Layouts) and managing them inside different themes.

Now lets change the application configuration classes so that the default directories for frontend and backend are changed and symfony knows where to look for the required files.

You can make following changes in ‘apps/frontend/config/frontendConfiguration.class.php‘

Notice that we are changing only the configure() function.

public function configure()
     {
       $current_theme = 'first_ui';
       sfConfig::add (
                      array (
                               'sf_web_images_dir_name' = 'themes' . '/' . 'frontend' . '/' . $current_theme . '/' . 'images',
                               'sf_web_css_dir_name' = 'themes' . '/' . 'frontend' . '/' . $current_theme . '/' . 'css',
                               'sf_web_js_dir_name' = 'themes' . '/' . 'frontend' . '/' . $current_theme . '/' . 'js'
                             )
                      );
     }

This is the time to move all of your images, css anf js files to the respective folders inside the theme folder and symfony will automatically load them from this location.
Now for the last point, in order for the designers to use the same css,js and images lets create a folder ‘xhtml’ inside the main project directory. For this the directory structure will be as follows:

Put the html files inside frontend and backend ‘first_ui’ folder and use relative paths for images,css and js files.
To summarize, the benefits which can be obtained by using the above mentioned technique, are:

1. No need of the developers to implement minor changes given by designers, designers can directly edit design changes right into the application.
2. No need to manage separate svn for application code and application Ui, each UI change will be there side by side the application code inside the same svn repository.

JSF is a server side UI Component based framework for java based web applications. It adapts Component centric approach to develop java web user interfaces, hence simplifying the development. JSF follows the MVC design pattern and creates the manageable separation between the view, application data and logic.

Since the true power of JSF lies in the UI component model and JSF allows us to use prebuilt components or we can build our own, depending on our requirements.

Let’s start with creating a custom component, which would also help us understand who the compoenent model works in jsf.

Writing a Custom JSF Component

Lets start with a simple component which takes the email address as an input.

A component is made up of three main classes

o UIComponent subclass.

o Renderer

o UIComponentTag subclass

First of all we start building a UIComponent subclass, since our component is and input component we would extend this class by javax.faces.component.UIInput.

Here is how our class looks like

public class EmailComponent extends UIInput {

public static final String

EMAIL_FAMILY = “EMAILFAMILY”;

public EmailComponent() {

super();

addValidator(new EmailValidator());

}

public String getFamily() {

return EMAIL_FAMILY;

}

}

The only thing that needs explanation in this class is getFamily() method, this method is used to get the component family which is used to look up the renderer for this component when HTML is to be generated for this component.

addValidator(); is used to make sure that the user enters a valid email address. The EmailValidator class looks like this,

public class EmailValidator implements Validator {

public void validate(FacesContext context,

UIComponent component,

Object value)

throws ValidatorException {

if (null != value) {

if (!(value instanceof String)) {

throw new IllegalArgumentException(

“The value must be a String”);

}

String email = (String) value;

Pattern emailPattern = Pattern

.compile(“[a-z0-9!#$%&'*+/=?^_`{|}~-]+” +

“(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)” +

“*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)” +

“+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?”);

Matcher emailMatcher = emailPattern

.matcher(email);

if (!emailMatcher.matches()) {

throw new ValidatorException(

new FacesMessage(

“Please enter a valid Email Address”));

}

}

}

}

The important thing to know in this validator is if the string does not match the Matcher, then a new FacesMessage is created and a ValidatorException is thrown. JSF will interpret the ValidationException and get the message from it.

Another important thing is, this validator is not part of building a custom component.

We have created a UIComponent Subclass, now next step is to create a renderer, renderer is responsible for turning the component into HTML and taking posted HTML and turning it into values suitable for the component, these processes are also referred as encoding and decoding.

Below is the code for the renderer, I think the comments on the code are explaining it well.

public class EmailRenderer extends Renderer {

//THIS METHOD IS RESPONSIBLE FOR TAKING ANY PARAMETERS THAT WERE PASSED

//IN FROM A FORM POST AND SETTING THE VALUE ON THE COMPONENT

public void decode(FacesContext context,

UIComponent component) {

assertValidInput(context, component);

if (component instanceof UIInput) {

UIInput input = (UIInput) component;

String clientId = input

.getClientId(context);

Map requestMap = context

.getExternalContext()

.getRequestParameterMap();

String newValue = (String) requestMap

.get(clientId);

if (null != newValue) {

input.setSubmittedValue(newValue);

}

}

}

//THIS METHOD IS RESPONSIBLE FOR BUILDING THE HTML TO REPRESENT //THE COMPONENT IN THE BROWSER

//BASICALLY THERE ARE THREE ENCODING METHODS ENCODEBEGIN(), //ENCODECHILDREN() AND ENCODEEND().

//SINCE OUR COMPONENT DOESN’T HAVE ANY CHILDREN WE DON’T NEED //PREVIOUS TWO METHODS.

public void encodeEnd(FacesContext ctx,

UIComponent component) throws IOException {

assertValidInput(ctx, component);

ResponseWriter writer = ctx

.getResponseWriter();

writer.startElement(“input”, component);

writer.writeAttribute(“type”, “text”, “text”);

String id = (String) component

.getClientId(ctx);

writer.writeAttribute(“id”, id, “id”);

writer.writeAttribute(“name”, id, “id”);

String size = (String) component

.getAttributes().get(“size”);

if (null != size) {

writer.writeAttribute(“size”, size, “size”);

}

Object currentValue = getValue(component);

writer.writeAttribute(“value”,

formatValue(currentValue), “value”);

writer.endElement(“input”);

}

protected Object getValue(UIComponent component) {

Object value = null;

if (component instanceof UIInput) {

value = ((UIInput) component)

.getSubmittedValue();

}

// if its not a UIInput or the submitted value

// was null then get the value (it should

// always be a UIInput)

if (null == value

&& component instanceof ValueHolder) {

value = ((ValueHolder) component)

.getValue();

}

return value;

}

private String formatValue(Object currentValue) {

//THIS METHOD SHOULD PERFORM THE CONVERSION NEEDED.IN OUR //CASE WE JUST NEED A STRING.

return currentValue.toString();

}

private void assertValidInput(

FacesContext context, UIComponent component) {

if (context == null) {

throw new NullPointerException(

“context should not be null”);

} else if (component == null) {

throw new NullPointerException(

“component should not be null”);

}

}

}

We are done with the first two classes, now the last class is the subclass of UIComponentTag.

Below is the code for this class

public class EmailInputTag extends UIComponentTag {

private String size;

private String value;

private static final String EMAIL_COMP_TYPE =

“EMAIL_INPUT”;

private static final String EMAIL_RENDER_TYPE =

“EMAIL_RENDERER”;

@Override

public String getComponentType() {

return EMAIL_COMP_TYPE;

}

@Override

public String getRendererType() {

return EMAIL_RENDER_TYPE;

}

protected void setProperties(

UIComponent component) {

FacesContext context = FacesContext

.getCurrentInstance();

super.setProperties(component);

if (null != size) {

component.getAttributes().put(“size”, size);

}

if (null != value) {

if (isValueReference(value)) {

ValueExpression ve= context.getApplication().getExpressionFactory().createValueExpression
(context.getELContext(),value,String.class);

component.setValueExpression(“value”, ve);

} else {

((UIInput) component).setValue(value);

}

}

}

public String getSize() {

return size;

}

public void setSize(String size) {

this.size = size;

}

public String getValue() {

return value;

}

public void setValue(String value) {

this.value = value;

}

}

Two important methods here, getComponentType() and getRendererType().

getComponentType() returns the type of the component that should be created by the tag,this type is sent to the factory for the resolution of the class name and then the instance is created,

getRendererType() returns the type of the renderer and the instance is created the same way as mentioned above. These two methods are responsible for making the connection between the renderer and the component.

Now we are done with all the coding now we have to do some configuration, in faces-config.xml file we have to register our custom component with its renderer, like this.

<component>

<component-type>

EMAIL_INPUT

</component-type>

<component-class>

com.zigron.component.EmailComponent

</component-class>

</component>

Note the <component-type> tag, this is the component type we defined in com.zigron.tag.EmailInputTag class.

And the renderer like this,

<render-kit>

<renderer>

<description>

Renderer for the Email Input component.

</description>

<component-family>EMAILFAMILY</component-family>

<renderer-type>

EMAIL_RENDERER

</renderer-type>

<renderer-class>

com.zigron.renderer.EmailRenderer

</renderer-class>

</renderer>

</render-kit>

One more missing piece is a the tld that would define the tag for JSP, I would paste a part of the email.tld here.

<tlib-version>0.01</tlib-version>

<jsp-version>1.2</jsp-version>

<short-name>Email Input Example Component Tag Library</short-name>

<uri>http://www.zigron.com/jsf/component/email</uri>

<description>

This tag library has the tags for the custom jsf component, which is just a simplest example, hence most of the attributes are ignored in this tld

</description>

<tag>

<name>emailInput</name>

<tag-class>com.zigron.tag.EmailInputTag</tag-class>

<body-content>empty</body-content>

<description>

This is the tag for the Email input component.

</description>

<attribute>….</attribute>

…….

</tag>

Now we have to use this tag on JSP, for that we need to import our taglib, with the URI we mentioned in our email.tld, i.e http://www.zigron.com/jsf/component/email

Here is the example JSP code,

<%@taglib prefix=“h”

uri=“http://java.sun.com/jsf/html”%>

<%@taglib prefix=“f”

uri=“http://java.sun.com/jsf/core”%>

<%@taglib prefix=“email”

uri=“http://www.zigron.com/jsf/component/email”%>

<html>

<head>

<title>Custom Email Component</title>

</head>

<body>

<f:view>

<p>

<h:messages id=“messageList” showSummary=“true”/>

</p>

<h:form>

<h:outputLabel for=“test”>

<h:outputText id=“testLabel” value=“Email Address:”/>

</h:outputLabel>

<email:emailInput id=“test” size=“19″

value=“#{test.emailAddress}“/>

<br/>

<h:commandButton value=“Save”

action=“#{test.showEmailAddress}“/>

</h:form>

</f:view>

</body>

</html>

In this jsp test is the managed bean registered in faces-config.xml.

Now by combining all the above pieces together our component is now ready to serve.

Just for an over view , here is the step by step explanation

1. The URI prefix is used to find the uri in the tld, (email is the prefix in our example)

2. From the TLD the tag name and class pointing to that tag, under the URI is located, in our case tag name is <name>emailInput</name> in tld and the tag class is <tag-class>com.zigron.tag.EmailInputTag</tag-class>.

3. The getComponentType() method of located tag class(com.zigron.tag.EmailInputTag) is called.

4. The returned value is located in the faces-config.xml file to find out the component class against that component type.( as I mentioned earlier as a Note.)

5. Finally the component class is located from the faces-config.xml.

Download Complete Document Here

Few weeks ago, I started work to make my own PHP based MVC framework, all I wanted was a simpler and lighter MVC framework. I just intended to write a controller which can communicate with the model and views. In my googling, I found out CodeIgniter reviews, which were something like “a light weight PHP framework”. I started to look into CodeIgniter. I found it exactly as I was looking for. There was no need to re-invent the wheel, so I spent next few nights with the codeIgniter. I had already worked with Symfony and little bit with cakePHP, so the question arises why to look for any other PHP MVC framework? even when these both are the top frameworks in most comparisons. The answer is yes, Actually Symfony is really great framework for medium to large web applications. It’s good if project is very much scalable and got proper time-line. But If you got a project in which you really need to apply RAD ‘Rapid application development’, in which you do not have much time for deployments, framework installations, PEAR installations, framework plugins supports, You don’t want to do Propel build models and re-generate ORM classes or you simply can’t spend time on writing YAML schema files. In addition to these you also do not want your code to get messy, you really don’t want the business-logic and presentation together in single files OR you just want nothing fancy but a simple MVC framework where you just code and execute. So that’s where CodeIgniter fits in.

Not only CI is light weight, but to assist Programmers write faster code, it comes up with already made classes like: File uploading Class, FTP class, Email class (which supports HTML email, attachments), Pagination, Data encryption, calendar classes and few more. These all classes are by default part of CI. To use those classes, programmers need to include them in their actions. CI uses Active Record for database access, which is fairly simple. CI does all error logging just like the giant frameworks. CI also uses Search Engine Friendly URLs by default.

Now with open source PHP frameworks like CI, symfony and cakePHP, coding is done OOPs way, code remains managed and re-usable. Also Web-applications are built faster and scalable. The good thing about PHP related technologies is that they are open-source, which also means greater and world wide support through a healthy and ever growing community.

This report was created by : Abdul Wadood, Atifa Nadeem, Naima Khan and Haris Khan.

Overview:

Mobile application depends heavily on the exact requirements. Our basic assumptions are stated in the section 3. Based on the basic requirement to create a very generic mobile application following are the three approaches in the order of our preference:

• Considering the basic and generic requirements Java ME is the ideal development platform. We can adopt different approaches within Java ME to reduce the development effort to make the application ready for all possible platforms and devices. Biggest drawback for this approach will be the application performance and security as this app will run on top of JVM.

• Second approach is to create a custom Mobile Execution Environment. We will need to develop this environment for each platform with minimum interfaces/APIs as per our requirements. This will result in more effort to create such MEEs for each platform/handset but application development will be rapid. Users will require downloading our own MEE just like they need to download JVMs.

• Finally the most stable and secure approach will be to create each application in platform’s native language. This will be requiring substantial effort but application’s performance will be at its best.

Development Platforms/Technologies

In this section we have briefly explained how each development platform will be used across different handsets and OS for basic features.

1)- Java ME (formerly, J2ME)

Introduction / Development Approach:

• Java ME Platform represents the only true open solution for building mobile applications for the industry. The technology allows portability of applications between platforms and investments are kept to a minimum through the possibility of reuse.

• The Java ME technology is based on three elements:

a- A configuration provides the most basic set of libraries and virtual machine capabilities for a broad range of devices.
b- A profile is a set of APIs that support a narrower range of devices.
c- An optional package is a set of technology-specific APIs.

Deployment Approach:

To be MIDP 2.0-compliant, devices must support OTA provisioning. The easiest way to package MIDlets for wireless installation is to use the J2ME Wireless Toolkit, which incorporates a small provisioning server that emulates a production OTA environment. Available in version 2.0 Beta 2 and later versions of the toolkit, this nice feature enables you to get an idea of whether a server will provision a device with your application successfully without the hassle of setting up and configuring a local web server to act as an OTA server. Some MIDP 2.0 features – like the push registry – are available only to applications downloaded via OTA. If your application uses those features, the built-in OTA server is a critical tool of the development process.

Features:

PUSH

The MIDP includes a feature called “PUSH Registry” to push data from server to mobile devices, without the interaction of user. The MIDlet registers a port along with the protocol name in the mobile device. From the server, a message is sent to the specific mobile device using the particular protocol and port where the MIDlet application is registered to listen. After the message is delivered to the mobile device, the AMS calls the MIDlet application. Once the message is delivered to the MIDlet, it is the application’s responsibility to process the message accordingly.

SMS Integration

• The Wireless Messaging API (WMA) is an optional package for J2ME that provides platform-independent access to wireless communication resources like Short Message Service (SMS). WMA can be used on top of CLDC and MIDP.

• There are many third party APIs available for SMS integration in Java ME applications. Some examples are Java SMS library from new-phone.com, SMS JDK from NCL Technologies Ltd, jSMS from objectXP, etc.

Data Synchronization:

• Recently released, Sun’s Mobile Enterprise Platform (MEP), provides two-way data synchronization with security, device management and off-line access features for enterprises. It can integrate data from a wide range of back end applications.

• A third party API, Sync4j is an open source initiative to deliver a complete mobile application platform implementing the SyncML protocol. SyncML defines a standard way to synchronize data and remotely manage devices. Sync4j provides SyncML client APIs (J2SE, J2ME and C++) that you can use to build an application.

Devices and Platforms:

Motorola:

• MOTOMAGX, Motorola’s next-generation Mobile Linux®, supports three different application environment– Java ME, Web UI and native Linux

• MOTODEV Studio for Java ME, Motorola’s robust toolset for developer innovation currently supports the Java ME application environment on many Motorola handsets and wireless modules

Nokia:

• Nokia phones have an extensive Java ME API set

• Nokia provides support for the industry’s leading open-source Java™ IDEs: NetBeans and Eclipse. Both IDEs offer robust tools that make it easy to create high-quality Java applications efficiently

Blackberry:

• Many new Blackberry devices support the Java 2 Platform, Micro Edition (J2ME), primarily because Java technology makes developing applications so much easier. Its platform-independence eliminates many porting woes and its automatic garbage collection lets developers concentrate on application logic rather than memory management

• In addition to Java-based handhelds, RIM offers a BlackBerry Development Environment for J2ME

Samsung:

• Some Samsung handsets give errors for J2ME (user experience). Some users have reported errors like Samsung not suitable for J2ME game developers, slow emulator, Java apps can only be loaded via OTA, giving “Unsupported content error” on Samsung F490 phone

LiMO:

• LiMO application developers will be able to use SDKs to write managed code running in a Java virtual machine, browser apps for WebKit, and native code.

S60:

• It supports Java (J2ME MIDP 2.0 commonly, but varies from phone to phone) applications and Symbian C++ applications.

Wireless Providers:

Verizon

• Verizon Wireless doesn’t offer J2ME support on their phones. Instead, it uses BREW but one can run J2ME applications via BREW-Authored KVM but still it is not that simple

T-Mobile

• Users are able to download J2ME apps (JAD+JAR) if they have an offline app, like a standalone mobile game but if the app requires an internet connection the users will be able to access internet if and only if:

• The application was signed with a T-Mobile certificate, or

• The user has a $20 “total internet” plan instead of the regular $6 T-Zones one, or

• The handset was not bought through T-Mobile

In short, if you are aiming for a mass-market consumer application and not just one targeted at business users or tech-savvy users, your hands are pretty much tied. The only way to achieve that goal is to go on-deck with T-Mobile

AT&T

• AT&T appears to be a little less strict than T-Mobile. You can download J2ME applications from anywhere, other applications that want to use socket communication, access to the file system, address book and messaging (SMS/MMS) will probably be blocked

2)- BREW

Introduction/ Development Approach

• BREW is a software platform that can download and run small programs for playing games, sending messages, sharing photos, etc.

• Using BREW, you can easily port your applications between all Qualcomm devices.

• BREW applications can be written using Java™, C, or C++.

• Unlike the Java ME platform where any developer can upload and execute software on any supported handset, BREW applications must be digitally signed

• The BREW developer community is fairly small and limited to Qualcomm’s boards and web sites.

• BREW code can only be compressed if you devise your own method or buy a commercial solution.

Deployment Approach

• Compile for the specific BREW version available on the handset.

• Installer Packaging Options: OTA

Features

• PUSH:

Brew compatible mobile phones can get push based sms/email on the Alltel’s network

• SMS Integration:

Interfaces like ISMS, ISMSMsg, ISMSNotifier, and ISMSStorage are there to handle SMS integration for BREW applications.

• Data Synchronization:

Open Mobile Alliance for Data Synchronization and Device Management.

• Devices and Platforms

The BREW platform is pre-integrated into the MSM™ chip software and includes reference implementations for many other device-specific issues (drivers and UI). All the mobile vendors doesn’t provide with MSM™ chip. So, we have very limited number of mobiles by default for running BREW application.

Wireless Providers

Every mobile vendor is supposed to provide handset with the support of BREW for different wireless providers.

3)- Windows Mobile

Introduction/ Development Approach

• Windows Mobile is an operating system for mobile devices, based on Microsoft Win32 API.

• Devices that run Windows Mobile include Pocket PCs, Smartphones, Portable Media Centers, etc.

• For application development there are different options available, including:

• Writing native code with Visual C++

• Writing Managed code that works with the .NET Compact Framework

• Developing an application using Java Me. There is a limitation if you develop an application in Java ME for Windows Mobile platform. Sun doesn’t officially support windows mobile devices and Sun hasn’t released an official JVM for pocket PC’s so you must go to a third party solution if you intend to use Java ME on Windows Mobile platform.

Deployment Approach

Windows Mobile-based Smartphones and Windows Mobile-based Pocket PCs (Phone Edition) can be bootstrapped by means of over-the-air (OTA) Wireless Application Protocol (WAP) push. This method is useful if the mobile operator prefers to bootstrap the device over the air at the point of sale or after purchase. In this method, a provisioning document that uses the format defined in the WAP Provisioning specifications can be pushed to the device over the air through the WAP connectionless non-secure push mechanism over the Mobile Terminated Short Message Service (SMS) bearer.

Features

• PUSH

The “Direct Push Technology” from Microsoft uses Exchange ActiveSync to keep data on a Windows Mobile based device synchronized with data on a Microsoft Exchange server. The ActiveSync technology on the device manages the direct push communication with Exchange Server. It establishes an HTTP connection with the server for a specified time, and then goes to sleep while waiting for the server to respond. The server responds with either a status indicating that new items were received or that no new items arrived. The device then sends either a synchronization request or another direct push request. Exchange Server 2003 Service Pack 2 includes a direct push component that augments the Exchange ActiveSync infrastructure that supports synchronization.

• SMS Integration

.Net Compact Framework provides different DLLs for SMS integrations (Microsoft.WindowsMobile.dll, Microsoft.WindowsMobile.PocketOutlook.dll). Using these DLLs you can integrate SMS Send and Receive functionality as well as SMS filtering support in your mobile application.

• Data Synchronization

Exchange Server 2003 is used to synchronize data using ActiveSync. It uses OTA for Installer Packaging.

• Devices and Platforms

Nokia & Sony Ericsson
Net60 is an implementation from Red Filve Labs to bring .Net Compact Framework applications unchanged, to Symbian platform (the OS running the Nokia and Sony Ericsson Smartphones).

Wireless Providers

Most of the carriers have handsets with Windows Mobile.

If you have any queries please feel free to contact me at haris[dot]khan[at]zigron[dot]com

Download the report

]]> http://www.zigron.com/blog/2008/08/21/mobile-development-overview/feed/ 4 http://www.zigron.com/blog/2008/07/01/user-xperience-technology-real-world/ http://www.zigron.com/blog/2008/07/01/user-xperience-technology-real-world/#comments Tue, 01 Jul 2008 23:32:15 +0000 Haris Khan http://www.zigron.com/blog/?p=44

For some time I have noticed that in blogosphere, User Xperience has mostly been associated with Web 2.0 companies and hardware devices, well actually only one hardware i.e iPhone. So I decided to go out and see where I can find innovation in UX apart from the web.

On this great adventure the first experience I stumbled across was Bank Of America’s ATM on Van Ness street in San Francisco. I had this old check, which I was planning to deposit for sometime, but hesitated because my last experience with Chase’s ATM in Chicago to deposit a check was very clumsy. One had to seal the check in an envelope, which the machine will vent out and then write the amount and your account info on top of it. One also has to feed in the check amount. Usually I don’t have a pen with me so it was another embarrassing moment and interestingly most ATM machines have a slanting face which makes it even harder to use it as base to write on it.

Anyway this time around, when I was expecting the ATM to throw an empty envelope out, it just asked me to slide the check in a slot which had a blinking light. For a moment I was taken a back and didnt know what to do but the ATM kept beeping. After gaining some intelligence I decided to slide the check in and said to myself that worst come to worst I will just lose it as it wasn’t that big of an amount. It was from a friend who owed me some grocery money, luckily she wasn’t that hungry while grocery shopping.

Eager to see what will happen, the ATM showed me the scanned copy of my check with the exact amount to two decimal points. It had scanned it on the fly and by using some recognition software had understood my friends handwritten amount to the exact amount. While I was still star struck and excited with the experience, I had my receipt in my hand with a scanned printout of the actual check I just deposited.

Now I call this a true user experience. Next time I will make a video of it. So feel free to send me some checks and please feel free to be liberal with the amount

“I need just 2 pages, one where people can add a company and another page they can post for that company. There will two categories of post, In Favor and Against. And I want to show those posts side by side, something like Zebate and that’s it. No design, No formatting nothing else……………” CEO’s Words

I really wasn’t in mood of working on this “something like Zebate” thing, but it was CEO’s order so …………. that day and it was now, this ping, that ping, that ping, this ping, ping, ping, ping.

PingMyCompany was initially RateMyCompany but A great developer’s mind got PINGED and it was changed to PingMyCompany. Also after first release it was noticed that “PING” is only in our logo and no where else in the site, so it was decided to change all “comments” & “post” to “PING”, just to have PINGY touch across the site.

Well, now it’s PingMyCompany.com, and let me share some of technical aspects of the site. Here it goes:

Firstly, why CEO got this idea to develop such a platform? It was Zigron’s review on Green & White, where there been a long debate on Zigron’s hiring process. It meant, people talk about companies, and when they talk so, they would definitely love to ping for or against a company….. Isn’t it?

Now development: PMC is developed in PHP/MySQL (v5),It was started on 18th April 2008, and first release was online on 24th April 2008. It took 3-4 days exactly to put this this Live for 6 Billion people. Wow….! Well, this was the first release and contained very simple interface and features. Here’s the very first layout:

And after this first release, many revisions came and in each revision new feature pinged in it, making it simpler, user friendly, SEO friendly and lot more features. The summary of all those features is as follows.

Few of web 2.0 features it currently have are RSS feeds, DIV based interfaces, AJAX Postings, Sharing, Clouds, etc. It also has Translation Feature and Twitter integration. A bit of detailed description of these features is as follows.

I have used AJAX & DIV based interfaces so that users can have better User Xperience & quick response time. AJAX has been involved where ever it was feasable like paging, sharing, pinging, adding company etc… I have used Prototype JS toolkit (v1.6) for all ajax related work. I will soon be integrating Scriptaculos toolkit (v1.8) for better and cool AJAX affects.

I took the full advantage of MySql fulltext search features to give a better search results for users. However there has been few limitations as well in fulltext for which I am writing a custom solution to eliminate those limitations.

Through RSS you can get Latest PingMyCompany feeds. Right now we provide full text feeds. Of the multiple RSS formats that exist today (RSS 0.91, RSS 0.92, RSS 2.0), PingMyCompany supports only the 2.0 specification for now. You can get PingMyCompany feed from http://www.pingmycompany.com/rss/feed.rss

It also supports Twitter postings for all those who want to follow all updates on Twitter. You can follow it from http://twitter.com/pingmycompany

A full blown Admin panel has also been written to control everything. This is currently a small scale web application, yet with latest buzzing web features and this is not the end, we’re on the go to add more n more….

“To be very honest, I was not interested working on this application at first but now, after working on this for a month, It looks like that i fell in kind of love with PMC. It really made me learn lot of news things, and polish my existing skills. After working on this project, I really see a significant improvment in my skill set. Thanks to PMC for Pinging My Mind”.

PS: Special thanks to CEO (Haris Khan) for His this nice Idea and a bundle of thanks to Zigron Admin and everyone who were involved directly or indirectly in this project and shared there views, suggestions, appreciation, improvments from time to time to make PMC more consistant and reliable.

<!–[if !vml]–><!–[endif]–>

The JSP code to achieve the results of figure looks like:-

1 <div style=“width:620px;height:270px; overflow:auto;”>

2 <a4j:repeat value=“#{controller.imageList}“ var=“imageList”>

3 <div style=“width:85px;float:left;”>

4 <h:graphicImage style=“border:2px solid #ccc;” height=“43″ width=“57″ url=“#{imageList[0]}“></h:graphicImage>

5 <h:selectOneRadio value=“#{ imageList[1]}“ layout=“lineDirection”>

6 <f:selectItem itemLabel=“” itemValue=“selImage”/>

7 <a4j:support event=“onclick” action=“#{controller.selectedImageRenderer}“>

8 <f:param name=“selectedImageId” value=“#{ imageList[2]}“ />

</a4j:support>

</h:selectOneRadio>

</div>

</a4j:repeat>

</div>

At line 1, The outer divs width is responsible for number of images appearing in a row. The outer divs height is responsible for number images appearing in columns after which the scroll bar shall appear. You are most welcome to play with the div to set number of images in rows/columns.
At line 2, the a4j repeat tag repeats through a list of images which was populated at the controller.
At line 3, we see another div whom we assigned the spacing responsibilities between the images.
At line 4, the graphic image in the list is displayed. The zero index of the list contains the url to the image.
At line 5, radio button is displayed for selecting an image, the value to this radio button is assigned by the first index of the imageList.

At line 6, we define the selection criteria, basically whichever radio button element shall contain “selImage”, it will be selected.
At line 7, when the event click happens on the radio button the method selectedImageRender is called, which we assigned the responsibilities of selecting an image and cleaning up the rest of the radio buttons. imageList[2] contains the currently selected image Id.

The code for the method is fairly simple and is written as follows:-

/***

* @author waqas.rajab

* This method makes the selection of the appropriate image selected on the main page

* This method also clears out the remaining selection of images.

*/

public void selectedImageRenderer(){

String param = getRequest().getParameter(“selectedImageId”);

for(int i=0;i<imageList.size();i++){

Object[] obj = (Object[])imageList.get(i);

if(obj[2].toString().equalsIgnoreCase(param)){

obj[1] = “selImage”;

}else{

obj[1] = “”;

}

}

}

Obj[0] contains Image Url
Obj[1] contains selImage i.e. showing the selected image radio button checked.
Obj[2] contains the ID of the selected image sent as a parameter from the page.

Google has always been making things simple and so will App Engine do. Very simple as compared to Amazon, Google App Engine lets developers to run their entire application on Google resources. Google says that:

The goal is to make it easier for web developers to build and scale applications, instead of focusing on system administration and maintenance. Leveraging Google App Engine, developers can:
Write code once and deploy
Absorb spikes in traffic
Easily integrate with other Google services.

Google is on the way to maintain its lead, leaving challenges for Amazon and Microsoft.