zembly blog

There are two ways to work with JavaFX in zembly:

• Using a JavaFX applet in a zembly widget. This approach allows zembly to provide the seamless hosting of the widget and development of a server side mashup (we call it a data service), while JavaFX provides the rich graphics (JavaScript would be used to communicating with the JavaFX runtime). Embedded a JavaFX applet can be done for both HTML widgets as well as widgets used within application types such as Facebook. There are several steps to use JavaFX in a zembly widget (The wiki contains more information about using JavaFX from zembly) :
  1. Upload the jar file containing the JavaFX code as a widget resource.
  2. In the HTML editor, add a script tag to reference the JavaFX JavaScript runtime.

     <script src="http://dl.javafx.com/1.2/dtfx.js"></script>

  3. In the HTML editor, add another script tag to setup the JavaFX applet. The ${res(’Calculator.jar’)} substitution variable is obtained using the add to editor link from the widget resources panel. This variable ensure the URL link is resolved appropriately throughout the widget lifecycle.

     <script type="text/javascript">
       javafx(
             {
                 archive: "${res('Calculator.jar')}",
                 width: 221,
                 height: 249,
                 code: "calculator.Main",
                 id: "appl"
             }
         );
     </script>

• Consuming data services (see the growing list of public Web APIs) available from zembly in a JavaFX application (running outside zembly). The zembly platform provides an open source client library which allows secure invocation of data services outside zembly. The client library has language bindings for Java and JavaFX. The wiki contains details on invoking data services outside zembly.

Recently we changed the CAPTCHA on the zembly site from a home-grown solution developed in the early days of zembly to one provided by reCAPTCHA. The advantages include an easier to read CAPTCHA that is also harder to crack, which just happens to facilitate the translation of printed material to electronic form. With reCAPTCHA, we gain the ability to offer an audio CAPTCHA, as well as a simple means of allowing a user to request a different CAPTCHA, if the one displayed is difficult to read.

reCAPTCHA screen shot

The reCAPTCHA element is used in places where user validation is necessary, such as at the time of sign up, or when verifying an email address. Beyond preventing spam, reCAPTCHA also helps in the reading of scanned books, turning images that are hard for software to recognize into text in electronic form. So next time you see the reCAPTCHA prompt, take heart knowing that you’re helping a good cause.

Safari 4 is now fully supported in zembly, given you choose to use the bespin editor . One of the most impressive features is the JavaScript performance. In one of the JavaScript benchmark comparisons we performed, we saw a 10x performance improvement over Firefox 3. Remember that even though the zembly site may not support all browsers, the apps you create will be as browser compatible as you make them. The zembly client runtime will work across browsers.

More public APIs are now accessible in zembly. Following is a list of newly-added services.

• MTV Networks - Service for accessing the MTV Networks music video catalog.
• Technorati - The popular  engine for searching blogs.
• Yelp - Popular service for obtaining and entering reviews of commercial establishments.
• Chicago Transit Authority - Service for tracking bus  routes in Chicago.
• WhoIsMyRepresentative - Information on a region’s representatives in the lower and upper house.
• USASpending.gov - Information on where your tax dollars are being spent
• BART - Service for tracking trains in the Bay Area Rapid Transit system

Additionally, the Ericsson APIs for IMS and SMS are now in zembly, thanks to the Ericsson engineers.

You can browse the complete set of APIs in zembly’s Browse API page.

Calling zembly services outside of zembly, say from a Java desktop application, is made possible by the Zembly Client Library (ZCL). To secure the API call to protected resources, ZCL in conjunction with zembly uses the security mechanism specified by the OAuth protocol.

The client library hides all the plumbing in making the secure call. For the most part, the developer task is reduced to copying and pasting code snippets to her Java or JavaFX client code.

Zembly’s keychain page facilitates the generation of two kinds of keys that are required for calling services to protected resources. The first one, dubbed as the “Master key” is the OAuth consumer key and secret that is required in the client code. It is the key to enter the “zembly gateway” so to speak. With a simple click of the mouse, this key is generated and stored for you in zembly. The second, which we will call the “API key” is the key that you normally apply for when calling public APIs such as those from Amazon, Flickr, or Google. The keychain page likewise facilitates the generation and storing of this key.

As a side note, the zembly user experience has been enhanced with the addition of the Browse APIs page. In this page, the developer can navigate through the numerous public APIs that she may want to call either within zembly or outside of zembly. My favorite part of the page is the Test Drive button which, as the name implies, allows the developer to test or preview the API of her choice.

For the Java or JavaFX developer, the typical workflow will probably be something like this:
1. Download the Java or JavaFX client library.
2. Generate the Master key in zembly by going to the keychain page
3. Use the Browse API page to locate and select the API that you want to call.
4. If required, apply for the API key in the keychain page.
5. From the Browse API page, go to the link to the API of your choice and copy the code snippet that is displayed for the language of your choice (currently Java and JavaFX).
6. Paste the code snippet to your client code.

When in zembly, visit the Calling Data Services from outside Zembly page which walks you through the process of calling zembly services from your Java or JavaFX code. More detailed information about calling zembly services outside zembly is available here.

One of the big changes we’ve recently made to zembly is the introduction of Pro accounts. With a zembly Pro account, you can now access premium features like private source code, publishing and promoting external APIs within zembly, and more!

Upgrade to a Pro account

To sign-up for a Pro account, simply access any of the Pro account features available on zembly.com. For example, if you would like to keep your source code private, click change in your app’s permission settings and you will be offered a Pro account upgrade.

We’re also happy to announce that during the public beta we’ll be giving away 6-month Pro accounts for FREE!

And while we plan to announce pricing for Pro accounts later in 2009, it’s important to note that zembly will continue to be completely free to use. With Standard accounts, you can create and host applications on zembly.com at no charge, including free application hosting up to around 1 million monthly active users. We’re committed to delivering new, innovative capabilities in zembly and, as always, we would love to hear your feedback in our forums.

> Learn more about zembly Pro accounts

We have just made debugging of widgets and services a bit easier. As you may know, Log object can be used to log debugging information in services and widgets. It is especially useful in widgets, because unlike when using the console object directly, you don’t need to worry about removing the logging statements from published code. When we serve published widgets, we provide a dummy implementation of the Log object, so the code keeps working and end users are not disturbed with log messages in their browser consoles.

With last week’s push, the implementation of the Log object is more complete. You can now use different logging levels, such as Log.warn and Log.error; and actually any function defined in the Firebug API. Note that Safari 4 now supports a few new logging functions such as Log.group and Log.groupEnd. Moreover, the Log object provides emulation of these two useful functions for Safari 3, so you can use these as well.

The biggest improvement is that logs from services are now shown in the browser console too, when previewing a widget. This helps greatly, when debugging more complex applications composed of multiple widgets and services. If you are a web hacker (or get stuck in debugging the widget to service traffic), you may peek into how we implemented this feature and what’s the impact on service invocation.

Note that logging is enabled by default when previewing widget drafts. For published versions, you can currently enable logging manually by adding ;debug parameter to the URL. This works for plain HTML widgets, as well as for widgets used in Facebook apps (e.g. you can use http://apps.facebook.com/loggingsample/Home;debug). You may want to checkout the source code of LoggingSample app, to see the logging in practice.

Mozilla Labs recently announced the Bespin project, which among other things provides a flexible source code editor written in JavaScript. We thought it was promising, so we made it possible to use the Bespin editor in zembly.



If you’re using a browser which supports Bespin (say FireFox 3), you will see the Try Bespin feature above the default editor. Clicking this button will reload the page and Bespin will now be your default editor for widgets and data services (there is also a way to restore the default editor). Once the page reloads, you will need to press the edit button again.

This is the first of many features we are exposing early to get feedback from our community.

To celebrate the public availability of zembly.com, we’re holding the Zembly Blogging Contest! Simply tell us about your experience using zembly and you could WIN a $200 American Express gift certificate or an official zembly t-shirt.

Enter in Three Easy Steps:

1. Use zembly
Create a Facebook app, mashup, widget or custom application.

2. Blog about it
Tell us about your apps, write a review about your experience, or even embed a widget inside your blog entry.

3. Send us a pointer to your blog for a chance to win a $200 gift certificate!
Send an email to contest@zembly.com with a link to your blog entry, your name, email address, country, and mailing address to be used for prizes.

What are the prizes?

First Prize: The top 5 winners will receive a $200 American Express Gift Certificate.

Second Prize: The next top 100 blog entries will receive a zembly t-shirt.

For all the details, please see the official Zembly Blogging Contest page.

Blog entries must be submitted by 11:59 P.M. (PT) on May 15th, 2009.

» Get started

Many of you have been asking how to make your source code private on zembly. Well, with a pro account (more on that later), you now can! A click on change in the permissions section brings up a pop up, where you can remove Everyone from viewers, and share the source code only with users you pick. Note that a change in permissions for an application will cascade to individual services and widgets. And of course, whoever you add as a contributor can view the source code too.