Web Info & Tutorials

January 2nd, 2008

GOOGLE GEARS FUTURE APIS

Gears Monster

Over on my personal blog I kicked off a series of articles on some future APIs that are on the table for Gears, and how in my opinion, Gears is mistakenly seen to be about "offline", when that is just the surface.

I started off by discussing the Image Manipulation API, "is a module to give Javascript a way to resize, crop and compose images together on the client side. This will allow, for example, images to be resized into a web-friendly format before being uploaded to a photo album. Another use is for composition of images together as an efficient alternative to server-side composition or CSS layering. Yet another use is for basic photo editing - a user can edit a photo with instantly applied changes before uploading it to the server."

Then I went on to the Desktop Shortcut API where you can:

JAVASCRIPT:
  1.  
  2. var desktop = google.gears.factory.create('beta.desktop');
  3. desktop.createShortcut("Test Application",
  4.                        "An application at http://www.test.com/index.html",
  5.                        "http://www.test.com/index.html",
  6.                        {"16x16": "http://www.test.com/icon16x16.png",
  7.                         "32x32": "http://www.test.com/icon32x32.png",
  8.                         "48x48": "http://www.test.com/icon48x48.png",
  9.                         "128x128": "http://www.test.com/icon128x128.png"});
  10.  

The Location API provides a means to fetch the location of a device running a Web browser with Gears:

The Location API is an abstraction for the various LBS APIs that currently exist on mobile platforms (GPS-based, network/cellid-based). The API consists of the Location class, which encapsulates various location attributes (latitude, longitude, etc), and also provides the means to query the platform for a location fix. This API also adds a new event type that is fired every time the location changes. Location implementations can be straightforward mappings to native LBS APIs (e.g the S60 Location Acquisition API) or have a more complex design that combines several location providers (e.g a GPS-based provider and a cell id-based provider) and returns the location from the most accurate provider at any given time.

The Messaging API fits in with the current WorkerPool API to give you cross domain rich messaging:

JAVASCRIPT:
  1.  
  2. var port = google.gears.factory.create('beta.messageport', '1.0');
  3. port.onmessage = function(port, msg, sender) {
  4.   alert("message: " + msg);
  5. };
  6. port.listen("name");   // Omit for anonymous listener.
  7.  
  8. // and having a way to send it a message:
  9.  
  10. var port = google.gears.factory.create('beta.messageport', '1.0');
  11. port.open("name");
  12. port.sendMessage("hello there");
  13.  

There there were smaller fry such as a Logging API, the Blob API, and Factory API updates.

To finish off we have the issue of developer tools. We need to make sure developers have the tools they need to enable successful app development using the APIs, so we want to first add:

  • Database
  • List databases per origin
  • Create new
  • Delete
  • Interactive DB command line (can just use existing /sdk/tools/dbquery.html)
  • LocalServer
    • List ResourceStores (and ManagedResourceStores) per origin
    • ResourceStore and ManagedResourceStore status (last error, update history, etc)
    • command line (like db command line, but pointed at localserver DBs)
  • WorkerPool
    • Show running workers
    • Interactive JS prompt to run JS inside a worker
    • Interactive prompt to send messages to a worker
  • Logging (requires LoggingModule)
    • Show logging in real time as it happens
    • Show historical logging
    • Sort/filter by origin/page of source page

    I would love to see what you would like to see, and these thoughts will be the subject of future posts.

    January 2nd, 2008

    COOL AND USEFUL GWT SOLUTIONS

    David Geary and Rob Gordon have launched a companion Website to their book on GWT.

    The website uses GWT itself of course, and the most interesting section is the example code that they have made available:

    This stack panel contains some examples from GWT Solutions.
    These examples showcase the power of GWT. Short of implementing cross-browser JavaScript and integrating it into your application, most of these examples are very difficult, if not impossible, in other Java based-web application frameworks. GWT is all about doing amazing things in the browser with ease, and here I show you how to do some of them.

    Here's something fun to try. Click on the Yahoo Maps Enhanced tab and click on the Get Map button. Then type in a new address and click on the button again. Try some different zoom levels, and then drag the maps inside the windows, but don't drag for more than 1 second. If you drag for less than a second, you will initiate animated scrolling in the same direction as the mouse drag, and proportional to the how many pixels you covered while dragging. After you get one or more maps animating, switch to the Maps tab and initiate animated scrolling inside the viewport. Now click on one of the tabs at the top of the page, such as About the Authors, and then click on the Run some of the book's examples tab, and you will see the Maps viewport fade into view, but notice that the Map's viewport scrolls while it's fading.

    Cool GWT Solutions

    January 2nd, 2008

    EDITAREA: RICH SOURCECODE EDITOR

    EditArea is a free JavaScript editor for source code. This editor is designed to edit source code files in a textarea. The main goal is to allow text formatting, search and replace and real-time syntax highlight.

    Features

    • Easy to integrate, only one script include and one function call
    • Tabulation support (allow to write well formated source code)
    • Search and replace (with regexp)
    • Customizable real-time syntax highlighting (currently: PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, Pascal, Basic, Brainf*ck)
    • Auto-indenting new lines
    • Line numerotation
    • Multilanguage support (currently: Croatian, Danish, English, French, German, Italian, Japanese, Polish, Portuguese)
    • Possible PHP gzip compression (compress the 12 core files to one file of ~20Ko)
    • Allow multiple instances
    • Full screen mode
    • Possible plugin integration
    • Possible save and load callback functions
    • Possible dynamic content management
    • Can work in the same environment than "protype" and "mootools"'s like libraries.

    You setup the text area, and then make sure to transform via something like:

    JAVASCRIPT:
    1.  
    2. editAreaLoader.init({
    3.                 id: "exemple_3" // id of the textarea to transform       
    4.                 ,start_highlight: true 
    5.                 ,font_size: "8"
    6.                 ,font_family: "verdana, monospace"
    7.                 ,allow_resize: "y"
    8.                 ,allow_toggle: false
    9.                 ,language: "fr"
    10.                 ,syntax: "css" 
    11.                 ,toolbar: "new_document, save, load, |, charmap, |, search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help"
    12.                 ,load_callback: "my_load"
    13.                 ,save_callback: "my_save"
    14.                 ,plugins: "charmap"
    15.                 ,charmap_default: "arrows"                 
    16. });
    17.  

    Edit Area

    January 2nd, 2008

    JAVASCRIPT: IT’S JUST NOT VALIDATION!

    Colin Morris, communicator of Y-Validator, has cursive a example on JavaScript: It’s Just Not Validation! which discusses JavaScript validation, and “input assistance”:

    JavaScript signaling assistance, when shapely severally from back-end validation, is not ideal. At worst, the digit example of functionality impact differently, and what’s legal on the computer lateral isn’t legal at the server. At prizewinning they impact dustlike — initially. But with determination system in binary locations, there’s an crescendo probability that exclusive digit module intend updated when changes are required, at which saucer we intend contradictory results.

    Finally, back-end determination is required. JavaScript resource is nice.

    The ingest of a bicentric goal to curb both the determination and signaling resource tasks creates a conformable modify individual undergo modify with JavaScript disabled.

    • We hit digit locate to update both the improvement (JavaScript assistance) and the required functionality (back-end validation). Therefore, the digit can’t intend discover of step, and we crapper secure a unseamed undergo for the user.
    • We hit digit locate to encounter the enhancement, so it’s inferior unclear for forthcoming maintainers of our cipher to settled the points at which different validations and assistances are implemented in the code.
    • The cipher also promotes the change of activity from presentation. The technologist programs the determination and the specializer implements the show of the feedback.
    • The individual feels in more control, having certainty in touch the bounteous accede button.

    Don’t forget: the cipher for the PHP-Validate and a distribution modify is available for download.