Wicket is a lightweight Java web framework. After prototyping, Wicket quickly caught my interest due to its Simplicity, Clean Separation of Concerns, and Ease of Deployment. With my experience in Swing, I found it familiar and easy to use, especially for small scale web development.
To start with Wicket, first download the latest binary from Apache Wicket. The latest stable version at the time of this writing is 1.4.1. Here is a hello world example:
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
</display-name>MyApp</display-name>
<filter>
<filter-name>MyApp</filter-name>
<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>com.mycompany.wicket.MyApp</param-value>
</init-param>
</filter>
</web-app>
Next, you can start developing your web application. A Wicket page consists of two parts, HTML and Java class. They should have the same naming, but just with different file extension. For instance, HelloPage.html and HelloPage.java.
HelloPage.html
<html>
<head>
<title>Hello World</title>
</head>
<body>
<span wicket:id="hello">Label here</span>
</body>
</html>
HelloPage.javapackage com.mycompany.wicket;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.basic.Label;
public HelloPage extends WebPage {
public HelloPage() {
add(new Label("hello", "Hello World"));
}
}
Please notice Wicket defines a property wicket:id which is used in Java for correlation. The discerning reader may notice that the text "Label here" will be replaced with "Hello World" in this example. It provides the clean way to separate the view from controller and model. Therefore, web designer can prototype the web pages with mockup data and only need to deal with pure HTML.Remember we set applicationClassNamein web.xml. Before deployment, this class need to be created. In this example, we configure the bookmarkable URL for HelloPage.class as "/hello". Now, it's time to deploy the web application. I chose Jetty in favor of its lightweightness so that it's fast to test. Once deployed, you could access the page by pointing your browser to http://127.0.0.1:8080/hello if on local.
MyApp.java
package com.mycompany.wicket;
import org.apache.wicket.markup.html.WebApplication;
public MyApp extends WebApplication {
@Override
public void init() {
super.init();
mountBookmarkablePage("/hello", HelloPage.class);
}
@Override
public Class getHomePage() {
return HelloPage.class;
}
}
You should see "Hello World" if everything goes smoothly so far. However, you will find it's not displayed in correct zoom level on iPhone. To solve the issue, simply add following line in the header of your HTML.
<head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <title>Hello World</title> </head>
Programming on mobile devices has its own discipline which lies in the limitations of the resources such as CPU power, memory, network bandwidth, just to name a few. There may be some unexpected behaviors when you start testing on the handset. For instance, you might see a noticeable flash while navigating pages. Following is a list of some advices:
1. Avoid background images in CSS.
2. Store larger static files in native application.
3. Delayed refresh and update in a batch.
4. Server side caching (ex. Hibernate caching).
5. Avoid using redirect.
The iPhone SDK allows you to create sleek and user-friendly interface. And mobile web provides you the flexibility to update your software. How you decide to use them really depends on your requirements. A common best practice is try to mimic the look and feel of native interface for you mobile web if used. It will give your users better navigation experience.
No comments:
Post a Comment