courtesy of Doug Reeder:
Mojo presumes there's a keyboard present, and so sets keyboard focus on the first textfield in a scene, unless you call SceneController.setInitialFocusedElement(null). Many developers don't check whether their app is running on a TouchPad,
Hi All ,
Now I'm in the Webos 2 Developer day in NYC , Having the time of my life.
CYA
Ever wanted to change the background image of a palm dialog but all you could accomplish is an ugly rectangle inside of the Palm's Dialog;
Here is your solution:
In your CSS do this:
.palm-dialog-box
{
-webkit-border-image: url(../images/backdrop-dark.png) 32 24 32 24 stretch stretch;
}
where backdrop-dark.png is your image.
Enjoy
Tried to use FilterList widget with a view menu or a normal header? this is a problem because they collided with the filter field once a letter is typed, because the filter field does not honor the height setting.
to over come it , add a class to your FilterListWidget and in the CSS do that:
.[Filter List Class] .filter-field-container {
top: 0px;
left: 0px;
position: fixed;
width: 100%;
height: 100px;
z-index: 0;
}
top: 0px;
left: 0px;
position: fixed;
width: 100%;
height: 100px;
z-index: 0;
}
This will fix this issue.
Nice Ah?
You have to declare in th attributes of the list swipeToDelete: true to allow the list to delete items , but add this preventDeleteProperty:'noDelete' also if you want the list to be able to determine which items can be deleted or not.
so for example:
var attributes ={itemTemplate: 'food-filter-list/entry',swipeToDelete: true,preventDeleteProperty:'noDelete',reorderable: false,filterFunction: this.FilterList.bind(this),formatters:{Food_Item:this.formatName.bind(this),Points:this.formatNumber.bind(this)},delay: 500, //1 second delay before filter string is useddisabledProperty: 'disabled'};
this.model = {disabled: false};
this.controller.setupWidget('filterlistID', attributes, this.model);
this.filterlist = this.controller.get('filterlistID');
the default implementation allows delete of all the items.
Now if you want to allow an item not to be deleted :
entry = {Food_Item: $L(row.Portion + ConnectionWord + row.Food_Item), Points: row.Points,ItemObj:row,'noDelete':true};
this.FoodList[i] = entry;
this way you can dynamically determine which item can be deleted or not
cool , no?
Want scrollable log trace or text edit? here's how:
HTML:
<div class="palm-group unlabeled" id="scrollID" x-mojo-element="Scroller">
<div id="scrolling_contents">
</div>
</div>
JS:
SETUP
this.modesModel = {scrollbars: true, mode: "vertical"},
this.controller.setupWidget('scrollID', {}, this.modesModel);
this.scroller = this.controller.get('scrollID');
this.scrollStarting = this.scrollStarting.bind(this);
this.controller.listen(this.scroller, Mojo.Event.scrollStarting, this.scrollStarting);
this.controller.setupWidget('scrollID', {}, this.modesModel);
this.scroller = this.controller.get('scrollID');
this.scrollStarting = this.scrollStarting.bind(this);
this.controller.listen(this.scroller, Mojo.Event.scrollStarting, this.scrollStarting);
MyAssistant.prototype.scrollStarting = function(event) {
event.scroller.addListener(this);
Mojo.Log.info(new Date(), "scroll starting");
}
event.scroller.addListener(this);
Mojo.Log.info(new Date(), "scroll starting");
}
MyAssistant.prototype.AddLog= function(str,bClear)
{
if(bClear==undefined){
if(this.controller.get('scrolling_contents').innerHTML.length>0)
this.controller.get('scrolling_contents').innerHTML+="<br />";
this.controller.get('scrolling_contents').innerHTML+=str;
}
else if(bClear==true)
{
this.controller.get('scrolling_contents').innerHTML=str;
}
}
{
if(bClear==undefined){
if(this.controller.get('scrolling_contents').innerHTML.length>0)
this.controller.get('scrolling_contents').innerHTML+="<br />";
this.controller.get('scrolling_contents').innerHTML+=str;
}
else if(bClear==true)
{
this.controller.get('scrolling_contents').innerHTML=str;
}
}
Magic , Isn't it?
Want to add professional advertisements to your palm pre applicatio?
It's as simple as 1,2,3
1 . go to http://code.google.com/p/admob-webos/
download admob.js and place it in your application
2. HTML File:
<div id="admob_ad"></div>
3.
Initialize:
AdMob.ad.initialize({
pub_id: '*********', // your publisher id get it from admob.com
bg_color: '#ccc', // optional background color, defaults to #fff
text_color: '#333'
});
and for each time you want to display ad:
AdMob.ad.request({
onSuccess: (function (ad)
{
Mojo.Log.info("**************** AdMob OK ");
// successful ad call, parameter 'ad' is the html markup for the ad
this.controller.get('admob_ad').insert(ad); // place mark up in the the previously declared div
}).bind(this),
onFailure: (function ()
{ // no ad was returned or call was unsuccessful
Mojo.Log.info("**************** AdMob ERROr ");
}).bind(this),
});
onSuccess: (function (ad)
{
Mojo.Log.info("**************** AdMob OK ");
// successful ad call, parameter 'ad' is the html markup for the ad
this.controller.get('admob_ad').insert(ad); // place mark up in the the previously declared div
}).bind(this),
onFailure: (function ()
{ // no ad was returned or call was unsuccessful
Mojo.Log.info("**************** AdMob ERROr ");
}).bind(this),
});
That is all , Now start earning Money!!
Want to be able to produce HI END graphs like this?:
It's very simple:
1. go to http://code.google.com/p/flot/ and download the package.
2. Extract it and add it to your project(just add the entire folder)
3. Add to the sources.json the relevant source you are going to use
(I.E {"source": "javascript/flot/jquery.js"},{"source": "javascript/flot/jquery.flot.js"}
4. Add new Scene or use exsiting one
5. In the HTML add the tag:
<div id="placeholder" style="top:20px;left:10px;width:300px;height:300px;"></div>
6. In the source file you can use this div:
Thats all!!
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1, d2, d3 ],{ grid: { color: "#100" } });
Thats all!!
Evere wanted to login to a wordpress type of site? here it is
1. load a PHP file to your site called myLogin.php
This file will act as your server side and it's job is to get the request wfom you app , do the login operation and returnt status
write the folowings inside the php file:
2. in your webos application create a scene:
The idea is to send the PHP file the request with parameters
create username and password widget , emit a buttun press for login and write this:
there you go!!
1. load a PHP file to your site called myLogin.php
This file will act as your server side and it's job is to get the request wfom you app , do the login operation and returnt status
write the folowings inside the php file:
<?php
require( dirname(__FILE__) . '/wp-load.php' );
function login() {
$result = wp_signon();
if(!$result->data)
return "<br />Incorrect username or password.";
else
return TRUE;
}
echo login();
?>
2. in your webos application create a scene:
The idea is to send the PHP file the request with parameters
create username and password widget , emit a buttun press for login and write this:
ComunityAssistant.prototype.AjaxLogin = function(user,pwd)
{
var url = '[your site]/SERVICE-login.php';
try {
var request = new Ajax.Request(url, {
method: 'post',
parameters: {log: user, pwd: pwd},
onSuccess: this.AjaxLoginOK.bind(this),
onFailure: this.AjaxLoginError.bind(this)
});
}
catch(e)
{
Mojo.Log.info('Failed to get Ajax response');
Mojo.Log.info(e);
}
}
ComunityAssistant.prototype.AjaxLoginOK = function(response)
{
try
{
if (response.responseText.search("Incorrect username or password") != -1)
{
// error
}
else
{
if (response.responseText.search("1") != -1)
{
// OK
}
}
}
catch(e)
{
Mojo.log.error(e);
}
}
ComunityAssistant.prototype.AjaxLoginError =function(transport)
{
var t = new Template($L("Error: Status #{status} returned from AJAX Google search."));
var m = t.evaluate(transport);
this.controller.showAlertDialog
(
{
onChoose: function(value) {},
title: $L("Error"),
message: m,
choices:[
{label: $L('OK'), value:'ok', type:'color'}
]
}
);
}
there you go!!
The HTML5 Spec says
User agents must consider statements that use the BEGIN, COMMIT, and ROLLBACK SQL features as being unsupported (and thus will mark them as bogus), so as to not let these statements interfere with the explicit transactions managed by the database API itself.
Want to define one app menu , Handle it once but acrivate it from all scenes?
Here is the way
1. Define the menue modal and att as globals in the stage scene
define the handle command in the same stage scene :
now in every scene's setup function do this:
Done!!
Here is the way
1. Define the menue modal and att as globals in the stage scene
glob = {};
glob.MenuAttr = {omitDefaultItems: true};
glob.appMenuModel = {
visible: true,
items: [
Mojo.Menu.editItem, //must
{label: $L("Preferences..."), command: "do-Prefs"},
{label: $L("Help"), command: "do-about"}
]
};
define the handle command in the same stage scene :
StageAssistant.prototype.handleCommand = function(event)}
{
var currentScene = Mojo.Controller.stageController.activeScene();
if (event.type == Mojo.Event.commandEnable) {
if ((event.command == "do-Update")) {
event.preventDefault();
}
}
else {
if(event.type == Mojo.Event.command) {
switch(event.command) {
case "do-about":
Mojo.Controller.stageController.pushScene('support');
break;
case "do-Prefs":
Mojo.Log.info("do-Prefs");
Mojo.Controller.stageController.pushScene("preferences");
break;
case "do-Update":
break;
}
}
}
now in every scene's setup function do this:
this.controller.setupWidget(Mojo.Menu.appMenu, glob.MenuAttr, glob.appMenuModel);
Done!!
Here are some tips regurding capturing "tap" events on itemTemplate on FilterList.
1. Define HTML Mojo object
<div x-mojo-element="FilterList" class="filterlistClass" id="filterlistID" x-mojo-focus-highlight="true"></div>
2. Difine the "filterlistID" in the .js file.
var attributes =
{
itemTemplate: 'food-filter-list/entry',
swipeToDelete: bSwipeToDelete,
reorderable: false,
filterFunction: this.list.bind(this),
formatters:{Food_Item:this.formatName.bind(this),Points:this.formatNumber.bind(this)},
delay: 500, //1 second delay before filter string is used
disabledProperty: 'disabled'
};
this.model = {
disabled: false
};
this.controller.setupWidget('filterlistID', attributes, this.model);
this.tapped = this.tapped.bindAsEventListener(this);
Mojo.Event.listen(this.controller.get('filterlistID'), Mojo.Event.listTap, this.tapped);
3. Int the entry.html file defined for the itemTemplate define
<div class="palm-row" x-mojo-tap-highlight="momentary">
<div class="palm-row-wrapper">
<table width="100%">
<tr>
<td width="90%"><div class="title"><font face="Comic Sans MS, Arial, Impact" size="3">
#{Food_Item} has the value of #{Points} DC Points
</font></div></td>
<td width="10%">
<div class="palm-button InfoBtnCL" id="InfoBtnID"></div>
</td>
</tr>
<tr>
<div id='AdditionalInfoID'>
</div>
</tr>
</table>
</div>
</div>
</div>
now we want to capture the click event of the InfoBtnID button right?
4. in the .js file tapped function
FoodFilterListAssistant.prototype.tapped = function(event)
{
Mojo.Log.info("*************** Tapped " + event.originalEvent.target.id );
if(event.originalEvent.target.alt!=undefined && event.originalEvent.target. id == "InfoBtnID")
{
//code for clicking on the InfoBtnID button
}
else
{
//code for tapping the list item
}
}
Ever thought about why the mojo SDK doesn't contain a floatPicker?
So did I.
With a little code changes and some thought i present to you:
Usage:
HTML :
<div id="FloatPickerID" x-mojo-element="FloatPicker"></div>
JS :
****.prototype.setup = function() {
attributes = {
label: 'Float', // the label next to the control
min: 0, // minimum value
max: 10, // maximum value
modelProperty: 'value',
Interval:0.1 //the "jumps" of the value , use integers to display as integerPicker
};
this.model = {
value : 0.1, // current value
disabled : false // use this to set enable/disable of the control
}
this.controller.setupWidget('FloatPickerID', attributes, this.model);
}
This FloatPicker is a subclass of IntegerPicker so it uses the same attributes and model , with the addition of Interval attribute which determain the value "jumps" of the control.
to change the control's enable disable state use:
this.pickerModelNewPoints.disabled = true; // or false
this.controller.modelChanged(this.model);
Enjoy
v 1.2 comes with
.palm-dialog-box .label.left.mv-picker-label {
display: none;
}
in global-widget-mvpicker.css
to overcome this changed in your css:
.palm-dialog-box .label.left.mv-picker-label {
display: block;
}
SDK version 1.2 issue
The problem happens when you try to call those dialogs from within a dialog created via
this.controller.showDialog(...) with preventCancel: true.
changing it to preventCancel: false Fixed the problem.
Fixing MojoListItemsParentMarker Problem : Ajax with List Widget
Thursday, October 8, 2009
0
comments
add { "escapeHTMLInTemplates": false } in framework_config.json file.
1. Extract the msi file from the executable (run the executable after printing "extracting " and before the first next , you'll see in the %temp% folder this file "5dae9320.msi".
2. open it on orca (if you don't know what it is go here http://www.juergentreml.de/archives/802)
3. search for InstallUMDFXP.
4. remove the row in custo action.
5. save and run the MSI.
worked for me.
in the scenes setup function add this:
this.controller.setInitialFocusedElement(null);
Simple....
Graphs!! - Point,Bar and line graph to allow you to analyze your weight progress and food consumption.
- Favorites - you can now add your favorite food into a section in the database.
- Quantity control - you can now enter the amount of food you have consumed for each food item.
- Weight Update - you can now update your weight(once a day) and look at the progess using the graphs.
- Calculator improvements - You can now enter food description to freely calculated food.
- Help screen on each major scene.
- Brand new UI ,Using view menu buttons.
- Bug fixing.
diet control application
Never before controlling your weight was any easier
Tried to do that and failed?
Well it's a bug in the 191.14 SDK
Here's a workaround
in your .css file place this
.palm-radiobutton {
min-width: 10px;
}
Now change the width
.[YourControl's Class]
{
width:230px;
}
