Mobile-Web-App

Monday, February 6, 2012

Selection Menu: Desktop html vs jQuery Mobile

On Desktop:

<!doctype html>
<html>
   
<head>
<meta charset="utf-8"></meta>
<title>Mobile-Web-App: Selection Menu</title>
</head>
<body>
<h1>Mobile-Web-App</h1>
 
<label for "dayofweek">Day Of Week:</label>
<select name="dayofweek" id="dayofweek">
 <option value="Sunday">Sunday</option>
 <option value="Monday">Monday</option>
 <option value="Tuesday">Tuesday</option>
 <option value="Wednesday">Wednesday</option>
 <option value="Thursday">Thursday</option>
 <option value="Friday">Friday</option>
 <option value="Saturday">Saturday</option>
</select>

</body>
</html>

On jQuery Mobile:

<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App: Selection Menu</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: Selection Menu</h1>
</div>
 
<div data-role="content">

<label for "dayofweek">Day Of Week:</label>
<select name="dayofweek" id="dayofweek">
 <option value="Sunday">Sunday</option>
 <option value="Monday">Monday</option>
 <option value="Tuesday">Tuesday</option>
 <option value="Wednesday">Wednesday</option>
 <option value="Thursday">Thursday</option>
 <option value="Friday">Friday</option>
 <option value="Saturday">Saturday</option>
</select>

</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>

Next:
- jQuery Mobile: select menu inside fieldcontain

jQuery Mobile: textarea

Example of using jQuery Mobile textarea, displayed on Android device running Opera Mobile, version 11.50.

<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App: textarea</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: textarea</h1>
</div>
 
<div data-role="content">

 <label for="textarea-a">Textarea:</label>
 <textarea name="textarea" id="textarea-a">
textarea WITHOUT data-role="fieldcontain"
 </textarea>

 <div data-role="fieldcontain">
  <label for="textarea">Textarea:</label>
  <textarea name="textarea" id="textarea">
textarea INSIDE data-role="fieldcontain"
  </textarea>
 </div>
</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>

Sunday, February 5, 2012

jQuery Mobile: text input types

Last post show a direct porting from desktop html to jQuery Mobile version, with some basic text input and input type. It's further modified to target mobile device, using jQuery Mobile. Also show more text input types.

<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App: text input and input type</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: text input types</h1>
</div>
 
<div data-role="content">
 <label for="name">Text Input:</label>
 <input type="text" name="name" id="name" />

 <label for="password">Password:</label>
 <input type="password" name="password" id="password" />
 
 <label for="number">Number:</label>
 <input type="number" name="number" id="number" />
 
 <label for="email">Email:</label>
 <input type="email" name="email" id="email" />
 
 <label for="url">Url:</label>
 <input type="url" name="url" id="url" />
 
 <label for="tel">Tel:</label>
 <input type="tel" name="tel" id="tel" />
 
 <label for="time">Time:</label>
 <input type="time" name="time" id="time" />
 
 <label for="date">Date:</label>
 <input type="date" name="date" id="date" />
 
 <label for="month">Month:</label>
 <input type="month" name="month" id="month" />
 
 <label for="week">Week:</label>
 <input type="week" name="week" id="week" />
 
 <label for="datetime">Datetime:</label>
 <input type="datetime" name="datetime" id="datetime" />
 
 <label for="datetime-l">Datetime local:</label>
 <input type="datetime-local" name="datetime-l" id="datetime-l" />
 
 <label for="color">Color:</label>
 <input type="color" name="color" id="color" />
 
</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>

HTML Text input and input type@jQuery Mobile

jQuery Mobile can convert text input to suitable for mobile device automatically, without change. Below HTML code is same as previous post "HTML Text input and input type", with jquery and jquery mobile javascript and stylesheet linked.

<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <title>Mobile-Web-App: text input and input type</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<h1>Mobile-Web-App</h1>

<form>
<p>Name: <input type="text" name="name" placeholder="Name"/></p>
<p>Email: <input type="email" name="email" placeholder="Email" /></p>
<p>Tel: <input type="number" name="tel" placeholder="Tel" /></P>
<p>Password: <input type="password" name="password" placeholder="Password" /></p>
<p>Birthday: <input type="date" name="birthday" /></p>
<p>Now(Date-Time): <input type="datetime" name="now" /></p>
</form>

</body>
</html>

The html loaded on Android tablet running Honeycomb (3.2.1):

On Android build-in browser

HTML Text input and input type@Android Browser

Firefox for Android (version 10)

HTML Text input and input type@Firefox for Android

Opera Mobile (version 11.50)

Next: jQuery Mobile: text input types

HTML Text input and input type

HTML5 Text input and input type

It's a example of text input and input type.

<!doctype html>
<html>
  
<head>
<meta charset="utf-8"></meta>
<title>Mobile-Web-App: text input and input type</title>
</head>
<body>
<h1>Mobile-Web-App</h1>

<form>
<p>Name: <input type="text" name="name" placeholder="Name"/></p>
<p>Email: <input type="email" name="email" placeholder="Email" /></p>
<p>Tel: <input type="number" name="tel" placeholder="Tel" /></P>
<p>Password: <input type="password" name="password" placeholder="Password" /></p>
<p>Birthday: <input type="date" name="birthday" /></p>
<p>Now(Date-Time): <input type="datetime" name="now" /></p>
</form>

</body>
</html>

Please note that part of the attributes are introduced in HTML5, not implemented in all browser.

On Google Chrome (version 16.0.912.77):

On Mozilla Firefox (version 10.0):

On Opera (version 11.61):

On Opera Mobile (version 11.50) on Android Honeycomb (3.2.1):

Saturday, February 4, 2012

Change color theme of Aptana Studio 3.0

Once you installed(un-zipped) and run Aptana Studio 3.0, you may be un-satisfied on the default color theme.

To change the color theme:
- Click Window -> Preferences.

- Expend Aptana Studio -> Theme, Click to change the current theme.

- Theme of Eclipse

Appcelerator Titanium Smartphone App Development Cookbook

Written in a cookbook style, this book offers solutions using a recipe-based approach. Each recipe contains step-by-step instructions followed by an analysis of what was done in each task and other useful information. The cookbook approach means you can dive into whatever recipes you want in no particular order. This book is an essential for any developer who possesses some JavaScript or web development knowledge and wishes to take a leap into building native applications for both the iPhone and Android. No knowledge of Objective C and Java is required.

Related: Titanium Studio