Ares
From WebOS101
Project Ares is Palm's Web-based IDE. It is a browser-based IDE with drag-and-drop UI creation, integrated debugging and the ability to deploy apps to the Emulator or the phone. It supports both visual widgets and non-visual components (for actions such as integration with native phone services and Web-based services such as Google Maps and RSS feeds). It has spun off two projects so far, the Ares Debugger and Ares Log Viewer.
Contents |
Ares V8 Debugger
The stand-alone Ares V8 debugger allows developers to debug apps on the emulator (and soon the phone) without having to first load the source into Ares. The debugger allows for breakpoints, single-step execution, value inspection and modification and DOM element viewing.
Ares Log Viewer
The stand-alone Ares log viewer allows developers to monitor their apps for logging messages (those generated by exceptions in their apps and from the output of Mojo.Log.
Snippets
Attaching Mojo Events to Ares Widgets
setup: function() {
Ares.setupSceneAssistant(this);
this.$.panel1.mousedownHandler = kit.hitch(this, "panelMouseDown");
this.$.panel1.mousemoveHandler = kit.hitch(this, "panelMouseMove");
this.$.panel1.mouseupHandler = kit.hitch(this, "panelMouseUp");
},
panelMouseDown: function(event) {
this.mouseIsDown = true;
console.log(event.type);
},
panelMouseMove: function(event) {
if (this.mouseIsDown) {
console.log(event.x + ", " + event.y);
}
},
panelMouseUp: function(event) {
this.mouseIsDown = false;
console.log(event.type);
}
The general pattern is this:
this.$.<objectName>.<event name>Handler = kit.hitch(this, <method name>);
This will work for Mojo events (assuming they fire on the object you are working with), e.g.:
this.$.object[Mojo.Event.tap + "Handler"] = kit.hitch(this, "objectTap");
Accessing the DOM node containing the widget
this.$.object.node
Uploading a file(IMAGE) with POST parameters using Palm.Mojo.Upload Widget
- Drag Palm.Mojo.Upload widget onto design frame.
- Set the 'fileName' to the file you wish to upload. We will set it manually in javascript code.
- Set the Upload URL to the page you need to upload it to. (ex. http://www.website.com/upload.php)
- The 'fileLabel' is the 'name' of the file. It is the same as this HTML code: (ex. myFile)
-
<input name="myFile" type="file" />
-
- The 'contentType' is the type of content type of the file you are uploading, NOT the form, it is automatically set to "multipart/form-data". (ex. image)
- The 'Subscribe' flag is used to poll the UploadWidgets "onSuccess event" periodically to view the status. (ex. Checked)
// Try using this code in a button click event.
// Setting up the file to upload.
this.$.upload1.setFileName('/media/internal/app_images/IMG_001.jpg');
// Setting up POST parameters in JSON format. It uses Key-Value-Pair data items, 'key' and 'data'. The Mojo widget posts the 'data' using the 'contentType' defined in the JSON parameters.
var upload_post_params = [
{ // Example: website.com/upload.php?time_stamp=20101013091545&time_stamp_format=YYYYmmDDHHMMSS
'key': 'time_stamp',
'data': '20101013091545',
'contentType': 'text/plain'
},
{
'key': 'time_stamp_format',
'data': 'YYYYmmDDHHMMSS',
'contentType': 'text/plain'
}
];
this.$.upload1.setPostParameters(query_post_params);
this.$.upload1.upload(); //.execute() also works.
- Here is an example of a PHP script which accepts a file, as well as these POST parameters.
#EXAMPLE upload.php. Note: 'myFile', the fileLabel of the Upload widget.
<?php
$target_path = "images/";
$target_path = $target_path . basename( $_FILES['myFile']['name']);
echo $_POST["time_stamp"]
echo $_POST["time_stamp_format"]
echo $target_path;
if(move_uploaded_file($_FILES['myFile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['myFile']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>
