In the first article in this series I described a way to redirect iPhone clients to our mobile application. Now I will describe how to build a registration application using JQTouch.
A typical web application sends the content of each page, but in this model we deliver the whole application and only parts of the document are active at one time. To start, install JQTouch. I put it in js/ and css/ folders of the site. Then the JQTouch application needs a special header and container to refer to them. Notice I refer to an icon for the app which will appear if the user adds the web site to their home screen.
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>Sneak on the Lot</title>
<style type=”text/css” media=”screen”>@import “js/jqtouch/jqtouch.min.css”;</style>
<style type=”text/css” media=”screen”>@import “css/themes/jqt/theme.min.css”;</style>
<script src=”js/jqtouch/jquery.1.3.2.min.js” type=”text/javascript” charset=”utf-8″></script>
<script src=”js/jqtouch/jqtouch.min.js” type=”application/x-javascript” charset=”utf-8″></script>
<script type=”text/javascript” charset=”utf-8″>
var jQT = new $.jQTouch({
icon: ‘images/icon.png’,
addGlossToIcon: false,
startupScreen: ‘images/splash.jpg’,
statusBar: ‘black’,
preloadImages: [
‘css/themes/jqt/img/back_button.png’,
‘css/themes/jqt/img/back_button_clicked.png’,
‘css/themes/jqt/img/button_clicked.png’,
‘css/themes/jqt/img/grayButton.png’,
‘css/themes/jqt/img/whiteButton.png’,
‘css/themes/jqt/img/loading.gif’
]
});
</script>
The landing page has a fullscreen background image with two buttons. Each one can be clicked to go to either the registration page or to a youtube video that talks about the site.
To make the links in the image work properly, they needed to be set up as <li> tags. We just need to remove the styling to make them invisible over the top of the background image. For simplicity, this styling is put in the header.
<style type=”text/css” media=”screen”>
#home {
background-image: url(images/main.jpg);
background-repeat: no-repeat;
}
a.splashlink {
position: absolute;
display: block;
padding: none;
margin: none;
text-shadow: none;
background-color: transparent;
border-bottom: none;
border-top: none;
}
.register {
width: 140px;
height: 40px;
top: 156px;
left: 89px;
}
.video {
width: 72px;
height: 63px;
top: 284px;
left: 17px;
}
ul.nostyle {
-webkit-background-clip: none;
background-image: none;
background-color: none;
color: none;
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
}
li.nostyle {
-webkit-background-clip: none;
background-image: none;
background-color: none;
color: none;
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
}
</style></head>
Next, the pages in the app are contained in divs and forms in the body.
<body>
<div id=”home”>
<ul>
<li><a href=”#register”></a></li>
<li><a href=”http://www.youtube.com/watch?v=VXB4LqW6AYI” rel=”external”></a>
</ul>
</div>
<form id=”register” action=”AppServlet” method=”POST”>
<div>
<h1>Register</h1>
<a href=”#”>Back</a>
<a href=”#”>Sign up</a>
</div>
<ul>
<li><input type=”text” name=”first_name” placeholder=”First Name” id=”some_name” /></li>
<li><input type=”text” name=”last_name” placeholder=”Last Name” id=”some_name” /></li>
<li><input type=”text” name=”email” placeholder=”Email” id=”some_name” autocapitalize=off /></li>
<li><input type=”text” name=”username” placeholder=”Username by which you’ll be known” id=”some_name” autocapitalize=off /></li>
<li><input type=”password” name=”password” placeholder=”password” id=”some_name” /></li>
</ul>
</form>
</body>
What happens when the user submits the form? We make an ajax request to the action AppServlet on the server. In the case of a successful user create, it returns html like this:
<div id=”confirm”>
<div>
<h1>Thank you</h1>
<a href=”#home”>Home</a>
</div>
<center> Thank you for signing up! <p>
You will receive an email soon with instructions on how to activate your account. <p>
Please also check your Spam folder! </center>
</div>
In the case that it doesn’t work, we return a div with error messages that lets the user go back to the form.
<div id=”fail”>
<div>
<a href=”#register”>Try again</a>
</div>
<center> <div>Please try again.</div> </center>
</div>
In the next article I’ll talk about how to make these actions work in a java servlet inside jetty (specifically embedded in the smart fox server).
Try the app out in action by pointing an iPhone at sneakon.com or any webkit browser at sneakon.com/sneakapp