Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Author Topic: Anyone using Phonegap?  (Read 966 times)

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Anyone using Phonegap?
« on: August 23, 2011, 02:03:13 AM »

Just as the title says. I just started trying to do a basic app for Android to get a feel for doing a whole app in HTML/CSS/Javascript and then applying PhoneGap API to the elements that need it.

A few things to ask:
 - Alot of sites recommend using jQuery Mobile, but I really find jQuery Mobile to be slow on my Android - anyone else using something different?

 - WebDB - I know the HTML5 docs say it depreciated but the Phonegap and webkit still use it.  Does anyone know of a simpler function set similar to the php db functions?  I came up with the below, but it is still in the testing phase and for right now, it's ok...
Code: [Select]
var DB = function() {
var _db = null;
return {
init: function(dbname) {
_db = openDatabase(dbname, '1.0', '', 5 * 1024 * 1024);
},
query: function(sql, arr) {
_db.transaction(function(tx){
tx.executeSql(
sql,
arr,
function (tx, rs) {
if (!rs.rowsAffected) {
console.log('No rows affected on query: ' + sql);
return false;
}
},
function(tx, error) {
console.log(error.message + ' on query: ' + sql);
}
);
});
},
resultSet: function(sql, arr, callback) {
_db.readTransaction(function(tx){
tx.executeSql(
sql,
arr,
function(tx,rs) {
var output = [];
for(i = 0; i < rs.rows.length; i++) {
output.push(rs.rows.item(i));
}
if ( typeof(callback) == 'function' ) {
callback(output);
}
},
function(tx, error) {
console.log(error.message);
}
)
});
}
}
};


Usage would be like this:
Code: [Select]
var AppDAO = (function() {
var _db = new DB;

function _init() {
_init_db();
}

function _init_db() {
_db.init('app');

// Create initial tables
_db.query('CREATE TABLE categories (id INTEGER PRIMARY KEY, name VARCHAR NOT NULL UNIQUE)');
_db.query('CREATE TABLE sites (id INTEGER PRIMARY KEY, name VARCHAR NOT NULL, url VARCHAR NOT NULL UNIQUE)');
// More tables here
}

function _add(name, table) {
_db.query('INSERT INTO ' + table + '(name) VALUES("' + name + '")');
}
function _update(old_name, new_name, table) {
_db.query('UPDATE ' + table + ' SET name="' + new_name + '" WHERE name="' + old_name + '"');
}
function _get_all_cats(callback) {
_db.resultSet(
'my SQL query',
[],
function(data) {
callback(
(function() {
var list = [];
// some code here
return list;
}())
);
}
);
}
return {
 'init'  :_init
, 'add'   : _add
, 'update': _update
, 'getAllCats' : _get_all_cats
}
}());

// Initialize App DB
AppDAO.init();

AppDAO.getAllCats(function(data) {
data.forEach(function(el,i) {
// Do something with the data
});
});

 - To mimic the Android buttons, I made this snippet of code - again, I didn't see any mobile frameworks that laid this out:
Code: [Select]
<!doctype html>
<html>
<head>
<script type="text/javascript">
// Libraries

// Source: Sitepoint book, Simply Javascript
document.getElementsByClass = function(theClass) {
var elementArray = [];
if (typeof document.all != "undefined") {
  elementArray = document.all;
} else {
  elementArray = document.getElementsByTagName("*");
}
var matchedArray = [];
var pattern = new RegExp("(^| )" + theClass + "( |$)");
for (var i = 0; i < elementArray.length; i++) {
  if (pattern.test(elementArray[i].className)) {
      matchedArray[matchedArray.length] = elementArray[i];
}
  }
  return matchedArray;
};

// From http://stackoverflow.com/questions/1129216/sorting-objects-in-an-array-by-a-field-value-in-javascript/4760279#4760279
function dynamicSort(property) {
   return function (a,b) {
       return (a[property] < b[property])
        ? -1
        : (a[property] > b[property])
        ? 1
        : 0;
   };
}

// Modified from http://bonrouge.com/~togglit
document.write('<style type="text/css">.clicker { cursor:pointer; }</style>');

function toggleNext(elm) {
var next = elm.nextSibling;
while ( next.nodeType != 1) {
next = next.nextSibling;
}
next.style.display = (
(next.style.display=="none")
? "block"
: "none"
);
}

function toggleEl(elm) {
var clss = "clicker";
elm.className += " " + clss;
elm.onclick = function() {
toggleNext(this);
}
toggleNext(elm);
}
</script>
<script>
// sort of eqivilent to jQuery's bind function
function bindAction(evt, elm, callback) {
var _list = document.querySelectorAll(elm);
for(var i = 0; i < _list.length; i++) {
_list[i].addEventListener(evt,callback,false);
}
}

var globalMenu = (function() {
var _dataArray = [];

function _init(elm) {
bindAction('click', elm + ' a', function(e) {
e.preventDefault();
});
}

function _add(page_type, txt, callback, seq){
_dataArray.push({
'type': page_type,
'text': txt,
'callback': callback,
'seq': seq
});
_dataArray.sort(dynamicSort('seq'));
_dataArray.sort(dynamicSort('type'));
}

function _getData(page_type, elmId) {
var elm = document.getElementById(elmId);
_dataArray.forEach(function(el, i) {
if( _dataArray[i].type == page_type ) {
elm.innerHTML += '<li><a href="#' + _dataArray[i].callback + '" class="menu-data">' + _dataArray[i].text + '</a></li>';
}
});

var menuLi = document.getElementsByClassName('menu-data');
for (var j in menuLi) {
if( menuLi[j].href ) {
menuLi[j].onclick = function(e) {
e.preventDefault();
var fnCall = this.getAttribute('href').substring(1);
if( typeof window[fnCall] == "function" ) {
window[fnCall]();
}
return false;
};
}
}
  }

return {
'init': _init,
'add' : _add,
'data': _getData
}
})();
</script>
</head>
<body>
<div id="android-buttons" class="app-menu">
<ul>
<li><a href="#" id="android-button-back" class="back">Back</a></li>
<li><a href="#" id="android-button-menu" class="menu toggle">Menu</a>
<ul id="inner-menu"></ul>
</li>
<li><a href="#" id="android-button-search" class="search">Search</a></li>
</ul>
</div>
<script>
window.onload = function() {

// Globals
var appMenuUlId = 'inner-menu';

// Global Menu
globalMenu.init('.app-menu');

bindAction('click', '.back', function() {
history.back();
});
bindAction('click', '.search', function() {
alert('Search clicked!'); // Ok I need a search function here....
});
// Toggle divs
var toggle = document.getElementsByClass('toggle');
for(var i = 0; i < toggle.length; i++) {
toggleEl( toggle[i] );
}

window.addEventListener(
'hashchange',
function() {

var currHash = location.hash.split('/'),
currPage = currHash[0].substring(6)
currSubPage = currHash[1];


// Global Menu - Menu button
// On hashchange, close the Menu 'menu', Remove the old data, and add the new
var menuElm = document.getElementById(appMenuUlId);
menuElm.style.display = 'none';
menuElm.innerHTML = '';
globalMenu.data(currPage, appMenuUlId);

},
false
);

// Add to menu button - page, title, callback, sequence
globalMenu.add('category', 'Cat Test', 'catTest', 1);
globalMenu.add('site', 'Site Test', 'siteTest', 3);
globalMenu.add('site', 'Site Test 2', 'siteTest2', 1);
globalMenu.add('category', 'Cat Test 2', 'catTest2', 0);
};
</script>
</body>
</html>
« Last Edit: August 25, 2011, 12:50:06 PM by nukpana »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Anyone using Phonegap?
« Reply #1 on: August 23, 2011, 06:49:37 PM »

Nope, not using PhoneGap (or other tool of the same vein), still haven't decided whether to venture into the app-building side of things or not. Whenever I think about it I feel a splitting headache coming on. Don't know if that's a sign...
That said, what would be interesting (to me) (at this time) is to emulate the sliding footer PhoneGap has on their site - it's really nice. I've never really liked the sliding sidebar version, that SmashingMag uses (used?) for example, but it's real nice as an effect for the footer.
Plus they (Phonegap) have cool icons (on the site)...
Not being helpful, I know. Sorry.
;)
Logged

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: Anyone using Phonegap?
« Reply #2 on: August 25, 2011, 12:55:19 PM »

Quote
Whenever I think about it I feel a splitting headache coming on. Don't know if that's a sign...
haha lol.  How have you been?

re: Phonegap/Mobile Web App - I basically started out with a simple page changing HTML based form jQuery and went from there:
Code: [Select]
<!doctype html>
<html>
<head>
<title></title>

<style type="text/css">
/* CSS from http://buildmobile.com/mobile-web-apps-loading-pages */
#pages > div { display: none; }
#pages > div.current { display: block; }  
</style>
<script type="text/javascript">
// Source: Sitepoint book, Simply Javascript
document.getElementsByClass = function(theClass) {
var elementArray = [];
if (typeof document.all != "undefined") {
  elementArray = document.all;
} else {
  elementArray = document.getElementsByTagName("*");
}
var matchedArray = [];
var pattern = new RegExp("(^| )" + theClass + "( |$)");
for (var i = 0; i < elementArray.length; i++) {
  if (pattern.test(elementArray[i].className)) {
      matchedArray[matchedArray.length] = elementArray[i];
}
  }
  return matchedArray;
};
</script>
</head>
<body>
<ul>
<li><a href="http://localhost/projects/test2.html">Home</a></li>
<li><a href="#page-category">Categories</a></li>
<li><a href="#page-site">Sites</a></li>
</ul>

<div id="pages">
<div id="page-category">
<div class="header">
<h2>Categories</h2>
</div>
<div class="content">
<ul id="ul-category" class="content-list"></ul>
</div>
</div>
<div id="page-site">
<div class="header">
<h2>Sites</h2>
</div>
<div class="content">
<ul id="ul-site" class="content-list"></ul>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {

// Globals
var homePage = 'category';

// Set default page if hash is empty
if(location.hash == '') {
location.href = location.href + '#page-' + homePage;
}

window.addEventListener(
'hashchange',
function() {
// Reset the default page on hash change
if(location.hash == '') {
location.href = location.href + '#page-' + homePage;
}

var currentDivs = document.getElementsByClass('current'),
currHash = location.hash.split('/'),
currPageEl = document.getElementById(currHash[0].substring(1));

// Change Page Div to current
currentDivs.forEach(function(el,i) {
currentDivs[i].removeAttribute('class');
});
currPageEl.setAttribute('class','current');
// End Change Page Div to current
},
false
);
};
</script>
</body>
</html>

Then you can ajax your content into the pages.. now dynamic pages.... that's where I am at now.
« Last Edit: August 25, 2011, 01:26:57 PM by nukpana »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Anyone using Phonegap?
« Reply #3 on: August 26, 2011, 03:32:05 AM »

Quote from: nukpana
How have you been?

Up and down, thanks for asking. And you?
Am watching the progress of this thread, for when I find the applicable headache remover...
Logged

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: Anyone using Phonegap?
« Reply #4 on: August 30, 2011, 12:54:32 PM »

Np. Same here.  Just getting power back from a hurricane...
Logged