Scan the below QRCode to install the latest demo onto iOS & Android

qrcode

source code can be found on the [Source Code] tab of this site/demos/annualtargets

Introduction

Nova PhoneGap framework is a Javascript library that allows you to develop PhoneGap apps easily and acquire the best performance. Full Documentation

Contact cail@shinetechchina.com to join our team. Our goal is to provide the best PhoneGap Framework for all developers for free.

Dowload Demo1: Helpless Maze, Android version | iOS version, Screenshots

Dowload Demo2: Blogger manages your long blogs on mobile., Download

The index.html

This is the startup page of your app. This page should only contain the common js and css files, and basic html layout. It shouldn't have any visible html content. Actually, we take this page as the shell of your app. Take a look at a sample index.html:

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sample Nova PhoneGap Framework</title>
        <script src="scripts/cordova/cordova-2.2.0.js" type="text/javascript"></script>
        <script src="scripts/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="scripts/novas/nova.all.min.js"></script>
        <link href="themes/nova.all.min.css" rel="stylesheet" />
    </head>
    <body>
        <div id="body">
            <script language="javascript" type="text/javascript">
                $(document).ready(function () {
                    nova.application.start("home.html");
                });
            </script>
        </div>
    </body>
</html>

Please notice that there is a div#body element. This element is very special in our framework.

  1. All pages are loaded into this element via ajax calls. You will have full control of pages navigation. Such as busy indicator, transition animation, page events, etc. The common js and css files are loaded only once, which makes your other pages quite clean (no duplicate html, head, body tags).
  2. Special style: it has a full size of the screen, and overflow is hidden. Which means there will be no automatical scroll, instead you should use nova.Scroller. This feature is very important as you will find it makes fixed-positioning and overlay quite easy.

Page Navigation

Page navigation is quite easy. For most cases, you can write below code:

nova.application.gotoPage("pages/products.list.html");
nova.application.gotoBack();

If you want to pass parameters to a new page, or add events handlers, then:

var page = new Nova.Page("pages/products/edit.html");
page.productId = 2;
page.onFormSaved = function(){
    //todo:...
};
nova.application.gotoPage(page);
//...
// on the edit page
$(document).ready(function(){
    var productId = nova.application.currentPage.productId;
    //todo: other logic
        
    function saveForm(){
        //todo...
        nova.application.currentPage.onFormSaved();
    }
});

For android apps, backbutton touches will cause nova.application.goBack(); You can overwrite the default behavior by:

nova.application.currentPage.backButton = function(){
    //todo:
}
//to remove custom backbutton handler
nova.application.currentPage.backButton = null;

Fixed Header/Footer & Scroll

As you already know that all the html content is wrapped in div#body that has full size with the screen and overflow is hidden. It's quite easy to do fixed header/footer. For example:

<div class="page"> <div id="header" style="position: absolute; width: 100%;"> Your Header </div> <div id="content"> large content here... </div> <div id="footer" style="position: absolute; width: 100%; bottom: 0px;"> Your Footer </div> <script type="text/javascript"> $(document).ready(function() { $("#content").css("top", $("#header").height() + "px"); $("#content").height($(window).height() - $("#header").height() - $("#footer").height() + "px"); var scroller = new nova.Scroller("#content"); //todo: set other properties of the scroller scroller.init(); }); </script> </div>

Available UI Widgets & Utilities

Documentation Index

Demos

Helpless Maze: A maze game powered by Nova PhoneGap Framework. It demonstrates pages navigaton, list, icons, busy indicator, SQLite, scroll, dialog, fixed-header, custom touch, custom theme, performance. Download

If you like our framework, you can

donate

Last edited Jan 3 at 12:56 AM by leo_2010, version 32