<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="main-container">
<div class="main wrapper clearfix">
<article >
<h1 class="page_title">OfficeJS Preliminary Specification</h1>
<p>Version: 001 - 2013-11-19</p>
<p>This documents defines the specification of OfficeJS offline HTML5 applications.
</p>
<h2>Dependencies</h2>
<p>OfficeJS applications depends on the following libraries:</p>
<ul>
<li><a href="http://jquerymobile.com/">jQuery Mobile</a>: platform independent user interface widgets (<a href="http://jquerymobile.com/gbs/">more than 30 Web browsers supported</a>)</li>
<li><a href="http://j-io.org/">J-IO</a>: backend independent persistent data management (offline, online, replication, encryption, etc.)</li>
<li><a href="http://renderjs.org/">RenderJS</a>: reusable component system (optional)</li>
</ul>
<p>Applications submitted to OfficeJS HTML5 appstore must provide support for these libraries based on the following rules:</p>
<p>
<table border="1" align="center">
<tr>
<th></th>
<th>jQuery Mobile</th>
<th>JIO</th>
<th>RenderJS</th>
</tr>
<tr>
<td>Application has no persistent data</td>
<td>recommended</td>
<td>optional</td>
<td>optional</td>
</tr>
<tr>
<td>Application has persistent data</td>
<td>recommended</td>
<td>required</td>
<td>optional</td>
</tr>
<tr>
<td>Application data can be embedded by another application</td>
<td>recommended</td>
<td>required</td>
<td>required</td>
</tr>
</table>
</p>
<h2>Structure</h2>
<p>An OfficeJS application is an HTML5 file that defines metadata and dependencies (CSS, JS) of the application. You can use the OfficeJS application template below to start.</p>
<code><pre style="font-size:80%">
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width" />
<!-- required meta tags/information -->
<title>Application Title</title>
<meta name="description" content="Application Description"/>
<meta name="keywords" content="Category_1, Category_2">
<meta name="author" content="John Doe|johndoe@internetl.com"/>
<!-- CSS -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<!-- Custom Stylesheets -->
<link rel="stylesheet" href="path/to/stylesheet_a">
<!-- JQUERY/JQUERY MOBILE -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<!-- JIO -->
<script type="text/javascript" src="path/to/sha256.amd.js"></script>
<script type="text/javascript" src="path/to/rsvp-custom.js"></script>
<script type="text/javascript" src="path/to/jio.js"></script>
<script type="text/javascript" src="path/to/complex_queries.js"></script>
<!-- JIO storages, for example -->
<script type="text/javascript" src="path/to/localstorage.js"></script>
<!-- RenderJS -->
<script type="text/javascript" src="path/to/renderjs.js"></script>
<!-- 3rd Party Plugins/Custom Scripts -->
<script type="text/javascript" src="path/to/plugin_a.js"></script>
<script type="text/javascript" src="path/to/plugin_b.js"></script>
</head>
<body>
<!-- Content of application -->
</body>
</html>
</code></pre>
<p>
<b>Please note:</b>
<ul>
<li>Applications should have a manifest file specifying files to be cached</li>
<li>Custom script and additional plugins can simply be added at the end of the HTML5 file's body. Examples of easy to integrate plugins include:
<ul>
<li>Form Validation - <a href="http://validval.frebsite.nl/">Validval</a></li>
<li>i18n Support - <a href="http://jamuhl.github.io/i18next/">i18next</a></li>
</ul>
</li>
<li>Beware of the <a href="http://view.jquerymobile.com/master/demos/navigation/">jQuery Mobile Ajax based
navigation</a> when creating an HTML5 application.</li>
</ul>
</p>
<h2>Application Examples</h2>
<ul>
<li><a href="http://www.officejs.com/app/task_manager/">Task Manager</a> provides a simple JQuery Mobile example of a persistent application based on JIO.</ul>
</ul>
<br />
<h2>Submitting your own application</h2>
<p>You can submit your own applications here: <a href="http://officejs.com/#apps">Submit application on officejs.com</p>
</article>
</div> <!-- #main -->
</div>
</body>
</html>