JSON Cross domain…How it works

Introduction

More and more applications are mashup applications and need to make several JSON requests to multiple external services. Actually, for security reasons, AJAX requests can only be done in the same domain used for the application itself…How can we solve this cross domain problem ?

The solution called JSONP exists from 2 or 3 years using the HTML script tag. Indeed this tag is mostly used to load several Javascript files from different servers.

Therefore, the solution/trick consists of creating dynamically a script tag with the source attribute pointing to the external JSON server and passing in the url the Javascript  callback function name.

The server part needs to be modified as well to treat this kind of cross domain requests. The server will read from the url, the callback function he needs to call with the resulting data.

Implementation

• Creating the Javascript function in charge of creating the script tag

• Calling the external JSON server

As you can see the Javasript callback function name is passed as an url argument.

• Adapting the External JSON server

Of course, you need to have the possibility to modify the JSON server part to have the solution working !

The servlet or PHP code needs to read the callback name and return the appropriate answer

Conclusion

This JSONP solution is very useful for mashup web applications. Of course, this solution requires to have the target server implementing the JSONP protocol. Google and Yahoo JSON services have already implemented this protocol in their services.

A second problem with this solution is that only GET requests can be done through cross domain….No solution are available regarding POST requests…

This post is mostly inspired from this french blog.

iPhone, Flash and… Javascript

Today i read a post about someone who has implemented a Javascript engine in charge of reading flash files…

The article is available here.

I found first that it was a fake…but after downloading the source files it appears that is was a real project !!!

Actually the engine, in its current stage is very limited and not useful for anything… I have tested with different flash files and only very basic files are working…

I'm really interested to know the Apple strategy regarding flash... How can we imagine an iSlate or the next iPhone without flash !!!

Scalable Image with GWT2.0 and DataResource

Introduction

Today, i wanted to use an ImageResource combined with an Image widget to display a resizable image. My first approach was not the good one !!! and it’s why i decided to write this note to provide the trick. Hopefully GWT2.0 has the solution !

Using ImageResource

When using ImageResource, GWT2.0 uses a CSS background url property to render the complete image and set automatically the width and height properties with the image original size. You can see the sources and related CSS just below.

Resizing the original image

My objective was to resize the original image. I tried to use the setSize method. When running the application, the image was cropped (0, 0, 400, 300) and not resized.

The problem with this ImageResource implementation is that a CSS background property is used and CSS does not allow to resize an image background yet.

The DataResource to the rescue !

The DataResource solution does not use the CSS background property but fills the img src property with the base64 encoded image. The image is correctly resized with the setSize() method.

Conclusion

When the objective is to display a simple image with the original size, using ImageResource is the good approach. When an image dimensioning is required, the DataResource is the solution !

del.icio.us Tags: GWT2.0

Rounded button, CSS3 and GWT2.0 ClientBundle

Introduction

CSS3 introduces new powerful capabilities for web designers. Instead of merging several sub-images to generate a rounded button, CSS3 allows to define this button with properties.

This tutorial will not only expose the CSS3 instructions to create the  button. The new GWT2.0 ClientBundle facility will be used to create a GWT RoundedButton.

The basic GWT Button will be used with a dedicated CSS3 style provided by a ClientBundle.

Let’s go !

ClientBundle introduction

GWT2.0 introduces this new  functionality bringing the power of combining and optimizing resources into one download for things like text files, CSS, and XML. This means fewer network roundtrips, which in turn can decrease application latency, especially on mobile applications.

More information regarding ClientBundle can be found here.

Step1: Creating the CSS clientBundle

The .iPush style is used to polish the button in the “normal state”. Basic attributes like color, font and positioning are described in this section. As CSS3 webkit implementation is used, you can notice that a \ is added in front of the webkit. without this \, GWT compile will fire an error during compilation.

The .iPush.IBClassic is used to add the rounded button properties. A “templated button image” is required to define the button properties. This image will automatically adapt is size regarding the text contained in the button or the button forced width.

@url annotation is used to define the “templated” image required to design the button(lines 182-183).

• the @url annotation will produce the url CSS instruction
• the imageUrl1 is the image referenced in the CSS instruction
• the bigButtonWhite is a reference to a property defined in the ClientBundle java file in charge of locating the image (.png). This java file will be presented just after…

If we take a look at the generated CSS with the Chrome developer tools, we can see that the image has been base64 encoded during the GWT compilation !! no additional network access is used to download the image.

Step2: Creating the Java ClientBundle

The Resources interface is used to define all the resources (CSS files, images, JavaScript..) that are part of the bundle.

The previous CSS file is referenced by the @Source(“test.css”) annotation, the image location defined in the CSS file is defined in this interface as well.

An other interface (MyCssResource) returned by the previous Resources interface is used to access the styles defined in the CSS file.

Using the button in the application

GWT.create method retrieves the Resources interface (56).

The button is “styled” with the MyCssResources iPush and iBClassic methods. This 2 methods are related to the .iPush and .iPush.iBClassic defined in the CSS file.

Finally, the resource is injected to the component (60)

And the result is:

Conclusion

This tutorial was for me the occasion to test the ClientBundle provided by the new GWT2.0 framework. Using ClientBundle seems really a good way to reduce the network transfers and only use the “active” part of the CSS.

Special thanks to Thomas Broyer who provide me efficient support !

del.icio.us Tags: GWT,CSS3,GWT2.0

Activity indicator with WebKit CSS animation

Introduction

It is possible to create loading indicators with animated gif. A lot of sites are proposing this service like mentalized.net.

An other approach is to use a CSS animation provided by Safari WebKit. This solution will work for WebKit browsers (Chrome, Safari).

I will expose briefly how this animation is working.

Tutorial description

Objective of this tutorial is to create a loading indicator that is activated when the user click on a start button.

Starting the tutorial

Step1: The Activity indicator HTML code

2 divs are used for the indicator.

• The fisrt div(activityIndicatorCont) is used to add extra parameters of the indicator like text or background color.
• The second div is used to display the transparent load indicator image. This div will be used during the CSS animation (rotation).

Step2: The Activity indicator CSS animation code

The activityIndicatorCont is used to customize the loading indicator (background-color, rounded border…). As the animation is only visible when the user clicks on the start button, this div is hidden.

The activityIndicator defines the animation parameters and the image used for the indicator.

Step3: The CSS keyFrames animation description

The animation used to rotate the loading indicator image is described in this section. The activity-indicator name will be used to reference this keyframes animation (JavaScript part).

Step4: Starting the animation with JavaScript

When the user click the go Button, the Javascript function starts the animation. The components becomes visible (line 10) and the animation name is assigned (line 11).

You can try the animation here.

You can download the project (html + css + png) here.

Conclusion

CSS webKit animation provides powerful animation possibilities. Actually the CSS functions described in this tutorial are only available for webKit browser (-webkit).

More information regarding the functionalities are available on the Apple developer website available here.

del.icio.us Tags: CSS,webkit animation,html5

Add location in a IPhone WebApp with Google maps

Today, i wanted to test how to display user location on a Google maps using an IPhone Safari browser. In a previous blog, i have already demonstrated how to use the embedded JavaScript location Api provided by Safari. The only thing that was missing with that previous Web App was to display the user location on the Google maps.

For this demo, i have used the new Google maps Api (V3) available here.

I have developed 2 versions of the demo, 1 “standalone” Web App and an other Web App using the WebApp-Net framework.

Standalone WebApp

This very basic Web application will display your location when you click on the “Get Location” button. If you click on the “Watch Location”, the map will be refreshed each time your location has changed. To stop the tracking, you need to press the “Clear watch” button.

The location method used to retrieve your location can be GPS, WIFI, or other methods provided by the network.

Graphical interface:

As described in the next code, a div(map_canvas) is used to display the map.
3 buttons are available to get the location. A JavaScript listener is attached to each buttons to trig the location operation.
Initialization of the Google Maps Api is done in the initialize JavaScript method. 2 Divs are used to display the current location and address.

Google Maps initialization:

The initialize function initializes the Geocoder (used to return the address) and initialize the map. A default location is provided during the initialization.

JavaScript Safari Location Api:

4 functions are provided by the JavaScript Api to retrieve the location. Details of this function is available here. The displayLocation method is provided as callback when location is successfully retrieved by the location Api.

Sample application:

Go to this URL with your IPhone to test the application. http://visticot.frederic.perso.neuf.fr/webapp/loc/index-basic.html

Using the application, you can see that you can scroll the map !!!

 

Using the WebApp-Net framework

I wanted to test if the WebApp-Net framework was “compatible” with the Google maps and Location Api. No particular “tricks” needs to be solved during the development. You simply need to add the div used to display the map as described in the next picture:

Sample application:

Go to this URL with your IPhone to test the application. http://visticot.frederic.perso.neuf.fr/webapp/loc/index.html

Actually, scrolling the map like the previous application is not possible, some investigation need to be done with the WebApp-Net framework.

Google Gears Desktop Drag and drop operation

Introduction

During the Google I/O event, The Google Wave prototype has been unveiled. During the demonstration, a drag and drop operation has been realized between the desktop and the browser. This new capability is possible thanks the new Google Gears plugin V0.5.21.0.
The main new features available with this Gears version are:

• Drag & Drop support for dragging files into a web page and letting the web page act on those files.
• Image thumbnailing.
• Blob builder API, which allows script to build binary blobs, including valid multi-part-form-encoded blobs that contain binary file parts, which can then be uploaded using Gears.HttpRequest.

In this post, i will demonstrate how to use 2 features:

• Drag & Drop support between desktop and browser.
• Image thumbnailing.

To illustrate those 2 interesting features, a basic web application is developed. This web application allows a user to drag and drop pictures from desktop to browser. The Gears plugin will resize the image to keep in the local server 2 versions of the image (1 thumbnail and 1 800x600 normalized). A basic image gallery browser allows to review the images even in offline mode.

Preparation

This demonstration is only available with Firefox3.0 with the Gears plugin V0.5.21.0.

Drag & Drop support

The drag and drop operation is available between the desktop and an HTML element of the web page. To specify the drop element target, listeners should be added to the DOM element. As you can see in the next JavaScript code, 4 events are configurable (‘dragenter’, ‘dragover’, ‘dragexit’, ‘dragdop’) and need to be linked to callbacks. Event names are clear enough to not be explained more.

This next JavaScript code illustrates how to activate or de-active the drag and drop operation on an HTML DOM element (dropZone).

The handleDragEnter, handleDragOver and HandleLeave callbacks call the finishDrag method in charge of modifying the mouse cursor (in blue, indicating that copy is in progress) and checking if the drop operation is allowed (in green)

The handleDrop callback is used to manage the drop operation. This function will do the following action:

• Receive and analyze the file coming from the desktop. MetaData like the image dimension, imageType are available from the blob object (line 132)
• Create a thumbnail of the picture(used later for the gallery). This operation is explained more into detail in the next paragraph.
• Create a reduced picture (800x600) of the original picture.
• Store those 2 new pictures in the Local server. The captureBlob (line 144) method is call to save the picture blob into the local server.
• Store this new image in the local database.

Image thumbnailing

This new feature allow to resize a picture directly in the browser. This operation was not possible before and a round trip was required with the server to do this operation. Operation to resize a picture are the following:

• Create a GearsCanvas (line 133).
• Use the decode method with the blog information in parameter (line134).
• Use resize method (line 135) to resize the image (2 methods are available: nearest and bilinear).
• Use the encode method (line 136) to return the resulting blob.
• To use the image later in the HTML page, the blob must be stored in the local server (line144).

You can note that it is not possible yet to display directly the resized image in the HTML web page and the Gears localServer must be used to store this picture. The img element tag will use this localServer image to display the picture in the browser.

A next step could be to create an other GearsCanvas and display the resizing picture blob directly in that canvas.

Accessing the demo and browsing the code

To test the prototype:

• Use Firefox 3.0.
• Install Gears V0.5.21.0.
• Drag and drop pictures(more than 1024x768 images) in the drop zone.
• The dropped image is displayed in the zone and added in the gallery. Multiple pictures can be drag and drop in the same operation.
• The new added images are stored in the local server and in the localDb. When you will access the web page another time, the picture gallery is still present.
• If you want to erase the Local store and the Local db 2 buttons are available.
• In bonus, the web application is available offline (Gears feature). Some bugs are still present for the offline management mode.

The demo is available here.

The code is available here.

Conclusion

Those new Drag and Drop operation and thumbnailing features are very promising and can be use for multiple use cases where the traditional “browse button” was added in the web page. Those features are not HTML5 compliant and will be available only with the Gears plugin…

Location with Firefox3.5

The recent Google I/O event demonstrates the Firefox3.5 location feature. Indeed, in a near future, every HTML5 browser will have the possibility to return the browser location. This new interesting feature will allow developers to propose new kind of web applications taken into account user location.

Today, I decide to evaluate the Firefox3.5Beta4 location capabilities.
In a previous article, i had already evaluated the Safari IPhone3 W3C implementation. Idea was to verify if the same JavaScript code was working on both IPhone Safari and Firefox browsers.

For my tests, i take the same JavaScript used for the previous article and test it in the Firefox browser.

I’m happy to check that it works without ANY source code modification !!!

Even if it’s working fine, i have some interrogations regarding the location information returned by both implementation. I don’t understand very well how this location is returned with the IP address information. During my evaluation, without moving my laptop or changing my IP address, the location returned by the API is not always the same… more interesting, the location returned by both Safari and Firefox is not exactly the same !!! I will try in a next article to enter more into details in this interesting behavior.