Documentation on lg.page js package (and use...)

[Yoann]

Hello Giraldo,

I saw differences between the documentation of lg.page javascript
package and its implementation.
In the documentation, you're talking about lg.page.open(...). But, it
seems this function is not yet implemented. In the other side, I saw
implementation of the functions lg.page.load(...) and lg.page.add(...)
but they're not yet documented.

My goal is to use this package to manage pages from the TabBar (not
from the NavBar). Is it possible?

The design of my expeted code is more or less the following :

---------------
Shell.js
---------------
lg.bind('lg_init', init);

function init() {
// Add 2 pages
lg.page.create({id:'info', url:'info.html', title:'Info',
desc:'Device information', callback:'setInfo'});
lg.page.create({id:'contacts', url:'contacts.html', title:'Contacts',
desc:'Contact directory', callback:'setContacts4'});

// Add 2 Tabs
lg.tabs.add({btn:1, title:'info', icon:'btn1.png', callback:'gotoInfo
()'});
lg.tabs.add({btn:2, title:'contacts', icon:'btn2.png',
callback:'gotoContacts()'});

lg.tabs.show();
}


function gotoInfo() {
lg.page.open('info'); // I'd like someting like that...
}

function gotoContacts() {
lg.page.open('contacts'); // I'd like someting like that...
}

Thx a lot for the good work you made.

Yo

[Yoann]

Well, I saw the implementation of lg.page.open(obj) in a previous
version of LG ...

lg.page.open:function(obj) {
$('#stage').load(obj.url, null, obj.callback);
}

In the current version, this function is deleted. Why?

I developed a new function "lg.page.switchTo(id)" which could be
interesting for the TabBar navigation. It's quite the same function
than lg.page.next(id). The difference is that there aren't any slide
effect and no navigation history : indeed, these features are not
necessary for TabBar navigation.

lg.page.switchTo = function(id){
if(id.indexOf('page_') < 0) {
id = 'page_'+id;
}

//If we are already on the selected page, do nothing...
if(id == lg.page.current){
return;
}

//Find page in list
var page = lg.page.getByID(id);

//Set current positions
lg.page.previous = lg.page.current;
lg.page.current = id;
lg.page.next = null;

lg.page.putIn(lg.page.current);

if(page.callback) {
window.setTimeout(page.callback+'();', 0.1);
}

if(lg.page.previous) {
lg.page.putRight(lg.page.previous);
}
}

Regards,
Yo

[iHello]

Can you please describe how to use switchTo function ?

[Giraldo Rosales]

Most of the navigational functions were moved to navigation. There is
an option in the navigation to not include it in the NavBar if set to
false.

If you don't mind, what does your code look like in for lg.page.putIn
and lg.page.putRight?


-G

[iHello]

function gotoSettings() {
lg.page.open('settings');
}

This function want work with the TabBar.
What function should I use to open the page using TabBar ?

Thanks.

[Giraldo Rosales]

You will also have to make sure the following div is in the body of the index.html page:

<div class="page" type="html" id="settings" url="settings.html" title="Info" desc="Settings" callback="setInfo" navigation="true"></div>

It is described in detail at: http://www.liquidgear.net/?page_id=77. This will set your page up to be loaded to be called.

-G

[Yoann]

iHello,

In a previous version of LG, the function lg.page.open was implemented
like the following code :

lg.page:{

open:function(obj) {
$('#stage').load(obj.url, null, obj.callback);
}
}

You can add it in lg_iphone.js.

As described in the documentation http://www.liquidgear.net/?page_id=61,
an example of use is :
lg.page.open({url:‘home.html’, callback:onOpen});

-----------------------
Giraldo,

The code of lg.page.put* is almost the same one than lg.page.slide*

/** Put **/
lg.page.putIn = function(id) {
$('#'+id).put(0);
}

lg.page.putLeft = function(id) {
var width = -($('#stage').width());
$('#'+id).put(width);
}

lg.page.putRight = function(id) {
var width = $('#stage').width();
$('#'+id).put(width);
}

jQuery.fn.put = function(x) {
this.css({'-webkit-transform':'translate(' + x + 'px, 0px)', '-webkit-
transition-duration':'0s'});
return this;
};

Yo

[Yoann]

Example : lg.page.switchTo('info');

Yo

[iHello]

No result :(

part of index.html:

<script type="text/javascript">
lg.navigation.show();
lg.bind('lg_init', initTabs);

function initTabs() {
lg.tabs.add({btn:1, title:'Suggestions', icon:'btn1.png',
callback:'gotoSuggestions'});
lg.tabs.add({btn:2, title:'Options', icon:'btn2.png',
callback:'gotoOptions'});
lg.tabs.show();
}

function gotoSuggestions() {
lg.page.open('suggestions');
}
function gotoOptions() {
lg.page.open('options');
}
</script>
</head>
<body id="stage">
<div class="page" type="html" id="home" url="home.html" title="home"
desc="home" navigation="true" selected="true"></div>
<div class="page" type="html" id="suggestions"
url="suggestions.html" title="suggestions" desc="suggestions"
navigation="true"></div>
<div class="page" type="html" id="options" url="options.html"
title="options" desc="options" navigation="true"></div>
</body>
</html>

shell.js:

function init() {
console.log('Shell::init');
console.log('info: '+lg.info.batteryLevel + ' ' +
lg.info.batteryState + ' ' + lg.info.proximity);

lg.page.create({id:'info', url:'info.html', title:'Info',
desc:'Device information', callback:'setInfo'});
lg.page.create({id:'contacts', url:'contacts.html',
title:'Contacts', desc:'Contact directory',
callback:'setContacts4'});

lg.page.create({id:'options', url:'options.html', title:'options',
desc:'options', callback:'gotoOptions'});
}

No one of this tabs works :(

[iHello]

Please help me with this. Thank you.

[iHello]

lg.page.open not working with tabs...