Unified Mobile Web Framework
Nov 22
Instead of writing native mobile apps for iOS, android, BlackBerry, Win Mobile, etc. it is possible to write your code once and publish it to all above considered platforms.
I have come up with a unified mobile web framework which I will describe it’ s pieces below.
- HTML 5
- JQuery Mobile
- Adobe Spry
- PhoneGap
HTML 5
Html 5′ s core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices.
html 5 at Wikipedia
jQuery Mobile
Touch-Optimized Web Framework for Smartphones & Tablets:
A unified, HTML5-based user interface system for 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.
A basic jQuery Mobile page structure:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
Adobe Spry
I used Adobe Spry for converting json objects to datasets.
Spry Data
- Retreiving the data.
- Using the data on the page.
Pulling in the Data
It is possible to construct XML, HTML or Json based datasets with Adobe Spry. For instance:
<script>
var ds1 = new Spry.Data.XMLDataSet("folder/products.xml","products/product");
</script>
Spry Regions
Spry regions are elements on the page where Spry processing happens. These elements are denoted by custom attributes applied to elements on the page.
A basic Spry region looks like
<div spry:region="datasetname"></div>.
Spry regions can be used with most HTML tags.
For example with a following xml dataset:
<students> <student id="1"> <name>Fatih</name> <adr>Acibadem</adr> <competency>Machine Learning</competency> </student> </students>
A Basic html page looks like:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spry Page</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet("data/adobe_products.xml", "products/product");
</script>
</head>
<body>
<div spry:region="ds1"> {ds1::name}</div>
</body>
</html>
Refernce:
Adobe Spry Primer
PhoneGap
