pb.window javascript api

[Pebble]

I was just playing around with this bit of 'magic' from the PB's api and decided to share it for others to use as an example. (I'm hoping to start a trend of other developers sharing relevant examples for the API.    Every time I use something in the API I'm planning on getting an example up here or in a relevant new thread.)

Obviously this is open to corrections and improvements!

pb.window.select_dialog


       pb.window.select_dialog(
           {title : 'hello!',
            id : "thisboxesid",
            max : 0,
            options : [{"value":"1","label":"Blah1"},{"value":"2","label":"Blah2"},{"value":"3","label":"Blah3"}],    
            onComplete : function(){
             window.console.log( "values selected = " + arguments[0] );  
            }  
            });More info can be found here : link

And I hope Chris doesn't mind me quoting him here :
Ooops! It seems I can't quote him! Is this on purpose? Or a bug?
Anyway, maybe Chris will get his post from this thread and post it here!  link

[Tim Camara]

Edited for readability: (Makes it easier to read/debug/review)

pb.window.select_dialog({
title : 'hello!',
id : "thisboxesid",
options : [
{"value":"1", "label":"Blah1"},
{"value":"2", "label":"Blah2"},
{"value":"3", "label":"Blah3"}
],
onComplete : function(data){
console.log("values selected = " + data);  
}
});

ProTip: In this case, if you're setting the max to 0 (which sets it to 'no limit'), you can actually just not use the max setting, since it's set to 'no limit' automatically if max is undefined.  Also, you can just call console.log, you don't need to preface it with window.  Saves you a couple of keystrokes.


Edit:
I really like this idea.  One of the items on my legendarily long to-do list is to fill out the API with more in-depth examples, and I'm very tempted to crowd-source it with all you smart and talented developers.

[Bob]

Mar 27, 2014 15:05:55 GMT -8 Tim Camara said:

Edited for readability: (Makes it easier to read/debug/review)

pb.window.select_dialog({
title : 'hello!',
id : "thisboxesid",
options : [
{"value":"1", "label":"Blah1"},
{"value":"2", "label":"Blah2"},
{"value":"3", "label":"Blah3"}
],
onComplete : function(data){
console.log("values selected = " + data);  
}
});

ProTip: In this case, if you're setting the max to 0 (which sets it to 'no limit'), you can actually just not use the max setting, since it's set to 'no limit' automatically if max is undefined.  Also, you can just call console.log, you don't need to preface it with window.  Saves you a couple of keystrokes.


Edit:
I really like this idea.  One of the items on my legendarily long to-do list is to fill out the API with more in-depth examples, and I'm very tempted to crowd-source it with all you smart and talented developers.

Wiki.

[Pebble]

Thanks Tim Camara,
I'm really terrible at explaining things (and also like to learn!), so anything I post feel free to improve (that's aimed at everyone)
Regarding the max, I was using it set to 1 which makes the labels clickable rather than selectable and put it back to 0 for the example as it seemed more appropriate , but get what you're saying.
window.console.log = just a habit!
Cheers,
Pebble.

[Chris]

Mar 27, 2014 14:11:20 GMT -8 Pebble said:

maybe Chris will get his post from this thread and post it here!  link

It's in a board that is now considered archived (read only) and given that it may eventually go bye-bye I think I will quote it here, however keep in mind it might be outdated/incomplete given the numerous pushes since it was written

Mar 25, 2013 5:13:37 GMT -8 Chris said:

Instead of creating a dialog from scratch you could use the built-in functions provided by Proboards. There are several functions varying in degree of complexity and all act as a frontend for the jQuery dialog widget.

• proboards.alert(title, statement)
  This is the simplest of them all and is analogous to the javascript window.alert method with the exception that it is non-modal so will not block all execution until a user action has been taken (this means scripts can continue running in the background). The title argument is optional and if omitted then "Alert" will be used as the title. Statement can be an HTML string which is also an improvement over the native alert.
  
  
  proboards.alert('<span style="font-size:2em;">H</span>ello <span style="font-size:2em;">W</span>orld')
• proboards.confirm(question, onYes)
  This would be the counterpart to the window.confirm method which asks for yes/no input from the user. It is non-modal and question can be HTML. The onYes argument expects a function which will be called if the user chooses yes.
  
  
  proboards.confirm('<span style="font-size:2em;">H</span>ello <span style="font-size:2em;">W</span>hirled?',
function(){console.log('Confirmed! world still spinning');}
)
  
• proboards.dialog(id, options)
  This one is closest to the widget and allows passing options directly to the widget. The id would be the id of a previously used dialog div but if it doesn't exist then it will be created. This is still a frontend for the widget so it adds a few things to make it easier than working directly with the widget so along with the standard ui-dialog options you can also add an html entry in options to specify content for the dialog.
  
  
  proboards.dialog('world', {
title : 'Scarface',
html : '<span style="font-size:2em;">G</span>oodbye <span style="font-size:2em;">W</span>orld',
buttons : {
'Say hello to my little friend' : function () {
$(this).dialog('close');
}
}
})
  
  

Update:

---

...and also a disable entry to simulate a modal dialog (it will create an overlay preventing user from interacting with the page until dialog closes) If you do use the modal form (disable is true) remember that you lose the beforeClose event since that is used to close the overlay

This feature which is already an available option in the dialog widget as modal has been dropped in later V5 releases. My original theory that this was to control the overlay and avoid disabling ad clicks doesn't seem to have been the problem or has been solved by alternate means.

[Tim Camara]

Chris's examples all still work, but are supported as legacy code at this point. All those functions still exist, but should be accessed through the new API: www.proboards.com/developer/js/class/window.

[Peter]

Not sure if I should have posted this in a new topic, as I think it will likely just get lost here.

Anyway...

I spent some time putting together a plugin where you can try some of the things in the API. It's no where near finished, and if people are interested in adding more to it, then feel free, as it's editable. Just post your updated version so others can add onto yours as well.

I / or someone will add in key examples as well, but it's a start.




Download

Source

[Tim Camara]

I don't think I can like that post enough. That is a fantastic idea, and now I'm kicking myself for not having thought of it myself.

I'm all in favor of posting it in it's own thread so that it can get better visibility.

[Pebble]

Super idea Peter

[Peter]

Mar 28, 2014 11:31:43 GMT -8 Tim Camara said:

I don't think I can like that post enough. That is a fantastic idea, and now I'm kicking myself for not having thought of it myself.

I'm all in favor of posting it in it's own thread so that it can get better visibility.

Thanks

I'll work on it a little over the weekend, polish it up a little, and then post a new topic.