Mobile Web Development: HTML5 Android App

Step 1 - Prototypes

Step 2 - Layouts

Step 3 - choose a framework

Step 4 - layout

input:focus {
	outline: 0 none;
}
textarea:focus {
	outline: 0 none;
}
.Button:focus {
	outline: 0 none;
}

 .Header {
	 background-color: white;
	 background-image: none;
	 border: none;
	 text-shadow: none;
	 border-bottom: white solid 3px;
	 font-weight: bold;
	 position: fixed;
	 width: 100%;
	 height: 62px;
	 top: 0;
	 left: 0;
	 z-index: 100
 }

Step 5 - Emulators

Step 6 - Programming

var App = {
	Init: function() {
		this.model = new Model(this.url);
		this.view = new View();
		this.controller = new Controller({
			model: this.model,
			view: this.view
		});
		return this;
	},
	Run: function(task, params) {
		if (typeof task == 'undefined') {
			this.controller.Login();
		} else if (typeof this.controller[task] == 'undefined') {
			this.controller.Login();
		} else {
			this.controller[task](params);
		}
		return this;
	},
	Done: function() {
		return this;
	}
}
$(document).ready(function() {	    
	App.Init();
	App.Run();	
	App.Done();
});

var Controller = function(params) {
	this.view = params.view;
	this.model = params.model;
}
Controller.prototype = {
	Login: function() {		
		this.view.Login();
	},
	LoginSubmit: function() {
		var that = this,
			value = this.model.GetLoginFormValue(),
			errors = this.model.GetLoginFormErrors();
		if (errors !== false) {
			this.view.Login(value, errors);
		} else {
			this.model.SendToServer('teamLogin', value, function(err, data) {
				if (!err) {                    
					that.model.SetTeam(data);
					that.model.ListenServer(data.lastMessageId);
					that.Welcome();
				} else {
					that.view.ShowPopup('error', data)
				}
			});			
		}
	},
	Welcome: function() {
		var that = this;
		this.model.GetWelcomeContent(function(err, data) {
			if (!err) {
				that.view.Welcome(data);
			} else {
				that.view.ShowPopup('error', data);
			}			
		});
	}

var Model = function(url) {
	this.url = url;
}
Model.prototype = {
	GetHelpChat: function(callback) {
		var url = 'helpChat?team='+this.team.teamId+'&hash='+this.team.hash;
		this.ReciveFromServer(url, function(err, data) {
			if (err) {
				callback(true, data);
			} else {
				callback(false, data);
			}			
		});		
	},

var View = function() {
	this.page = $('.Page');
}
View.prototype = {
	TaskIndex: function(status, time, tasks) {
		var num = Util.GetRndNumber();
		this.Show(
			Html.Header(
				Html.IconPanel(status),
				Html.TimePanel(time)
			),
			Html.Content(
				Html.TaskPanel(tasks)
			),
			Html.Footer(
				Html.ButtonPanelBottom('task')
			)
		);
        setInterval(Timer.Total, 1000);
        setInterval(Timer.Current, 1000);            
	        Util.SetScrollToTop();		
	},

navigator.camera.getPicture(OnSuccess, OnFail, {
	quality: 75,
            allowEdit: true,
            targetWidth: 280,
            targetHeight: 280,
	destinationType: destinationType.DATA_URL
});

var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function(e) {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        var r = JSON.parse(this.responseText);
                        if (r.success) {
                            callback(false, r.data);
                        } else {
                            callback(true, r.message);
                        }
                    } else {
                        that.view.ShowPopupWindow('Error', msg.ERROR_CONNECTION);
                    }
                }
            }

Step 7 - debugging

JSCallback Error: Request failed with status 0 at :1180915830

function startXhr() {
    // cordova/exec depends on this module, so we can't require cordova/exec on the module level.
    var exec = require('cordova/exec'),
    xmlhttp = new XMLHttpRequest();
    // Callback function when XMLHttpRequest is ready
    xmlhttp.onreadystatechange=function(){
        if (!xmlhttp) {
            return;
        }
        if (xmlhttp.readyState === 4){
            // If callback has JavaScript statement to execute
            if (xmlhttp.status === 200) {
                // Need to url decode the response
                var msg = decodeURIComponent(xmlhttp.responseText);
                setTimeout(function() {
                    try {
                        var t = eval(msg);
                    }
                    catch (e) {
                        // If we're getting an error here, seeing the message will help in debugging
                        console.log("JSCallback: Message from Server: " + msg);
                        console.log("JSCallback Error: "+e);
                    }
                }, 1);
                setTimeout(startXhr, 1);
            }
            // If callback ping (used to keep XHR request from timing out)
            else if (xmlhttp.status === 404) {
                setTimeout(startXhr, 10);
            }
            // 0 == Page is unloading.
            // 400 == Bad request.
            // 403 == invalid token.
            // 503 == server stopped.
            else {
                console.log("JSCallback Error: Request failed with status " + xmlhttp.status);
                exec.setNativeToJsBridgeMode(exec.nativeToJsModes.POLLING);
            }
        }
    };

var Util = {
	SetNewHash: function(hash) {
		/**
		 * Это не работает в Android 2.3!!
		 */
		//location.href = 'http://'+location.host+location.pathname+'#'+hash;		
	},

Step 8 - Run