Fred Visticot blog

Fixed positioning with WebApp.net

2010-02-03T01:54:00.001-08:00

Introduction

It is actually not possible with mobile Safari to realize CSS fixed positioning. As a result of this constraint, iPhone web applications can not have fixed header or footer positioning natively.

Hopefully, there is a trick powered by several lines of javascript….Thanks a lot to cubiq.org !!!

This powerful javascript file allows you to include a scrollview to your webapp and choose to specify if you want an horizontal or vertical scrollbar…or both.

Of course, this trick is available for all webapp microframework and is working as well with WebApp.net !

Integration

This demonstration will show you how to include a fixed header to your WebApp.

Step1: Download the script from here.

This original script can be replaced by this one if you want to restrict scrolling to the correct direction. I have used the modified version for this demonstration.

Step2: Include the script in your webapp

You simply need to add the downloaded javascript in your html file.

Step3: Initialize the “scrolling framework”

In the WebApp.net load callback, you need to add the following code:

Add the following CSS style to your WebApp.net application as well

Step4: Add the wrapper in the WebApp.net application

Before the iGroup div block, include the wrapper and scroller divs as followed:

Step5: Enyoy !!!

You can take a look of the demonstration here.

Conclusion

This trick is really an interesting solution waiting for the native one provided by Apple...

JSON Cross domain…How it works

2010-01-17T15:03:00.001-08:00

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

2010-01-15T15:57:00.001-08:00

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

2010-01-02T13:26:00.001-08:00

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

2009-12-29T14:34:00.001-08:00

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

2009-12-28T06:22:00.001-08:00

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

WebApp.Net and AdSense integration

2009-10-05T14:37:00.001-07:00

Introduction

In a previous post, i have explained how to integrate AdMob advertising with WebApp.

Today Google has announced the launch of AdSense for Mobile (high end devices only). Thanks to this new feature, you can now develop your mobile advertising with Google as well !!!.

This post will briefly describe how to integrate AdSense with WebApp.Net framework.

Mini tutorial

Step1: Registering an AdSense account

Of course this step is mandatory. All explanation are described here.

Step2: Creating your app advertising

This 4 steps wizard helps you to customize your advertising (device type, format, colors, channels). The last step provides you the javascript code to be included in the web page.

Step3: Adding the javascript to the WebApp.net app

Simply add the javascript code just after the iHeader section of the app and just before the IGroup section as described in the next picture.

Step4: Enjoy !!!

That’s all for the integration…You can see as easy it is…

The sample code and the demo for the tutorial is available here: http://visticot.frederic.perso.neuf.fr/webapp/adsense/

Conclusion

It is very easy to integrate both of AdSense and AdMob advertising API. What will be your choice ?

Add location in a IPhone WebApp with Google maps

2009-08-21T16:08:00.001-07:00

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.

WebApp.Net and AdMob integration

2009-08-12T16:27:00.001-07:00

Introduction

When designing Web applications for IPhone, it could be useful to add advertising to your mobile application. My first idea was to use Google Ad for mobile but the product is only available for early access and i have not the possibility to use it.

After some googling, i have found that AdMob solution was a good alternative.

AdMob is an advertising platform specialized for mobile applications (Web and embedded). For the “business and marketing” side, they provide a suite of web tools to monitor and analyze web audience. For the developers, they provide a very flexible JavaScript Api witch is very easy to integrate in your WebApp. They also provide a dedicated SDK API for IPhone applications.

WebApp.Net is for me one of the best IPhone Web micro framework. It provides many powerful and easy to use items to help you designing great and must seen web applications for Apple's latest mobile devices.

After the presentation, let’s go to the integration…

Mini tutorial

Step1: Registering an AdMob account

This step needs only to be executed 1 time (and takes 5 minutes). It provides you an account and an access to the AdMob portal.

Step2: Registering a new web application

Click on the Add IPhone Site link

Click on the IPhone Site icon. You need yet to provide information regarding your web site and the look and feel of the advertising. After feeling the form, click on the Add button.

If the step has been successfully completed, you should see the newly registered application in the list.

Click on the Setup link to access the JavaScript code that needs to be added in your mobile web site.

Copy the script in the clipboard…

Step3: Adding the JavaScript snippet in the WebApp

…and then simply past it in the section just after the iHeader section (before the iGroup).

Pay attention that you only need to insert the code one time, all the other layers will display the advertising.

Step4 Testing the result…and activating the script

The default JavaScript provided by AdMob is for debug purpose and does not provide any “real advertising”. One you have made your tests, you need to activate the script by setting the test parameter to false;

AdMob provides other interesting JavaScript functions described into their developer website

The sample application is available at : http://visticot.frederic.perso.neuf.fr/webapp/admob/index.html

The result of the previous sample code is shown in the next picture.

Do not hesitate to give your feedback regarding AdMob and WebApp.Net !!!

del.icio.us Tags: AdMob,WebApp.Net

My first Google Analytics WebApp

2009-07-08T05:11:00.001-07:00

Introduction

I really think that Google Analytics is a great application to display statistics about Web applications. I use this powerful tool to display statistics about my blog.

I have an IPhone and i would like to use an analytics WebApp on my mobile. Of course some WebApps and Apps are available on the Apple Store but those applications are not free or does not provide all the reports i need.

I have decided to create my own Webapp to use Google Analytics on my IPhone. To do this, i am using the Google Analytics API available here.

Google Analytics API

Most of the information required to use the API is available on the Google Web site, i will only sum up my understanding of the API and present a complete sample code using the API.

This Google Analytics API is available for Java and JavaScript. As my objective is to develop a Web client for IPhone, i have decided to use the JavaScript version.
Authentication and authorization steps are done by the Google JavaScript client library. No need to create a login /password page or request any user account information, all is done by the library. Multiple solution are provided for this step (see the Account Authentication APIS for more information). For my Web application, i have selected the AuthSub solution.
Flexible report configuration is available with the API. Only a simple HTTP request needs to be created with all the metrics and dimensions required by the report (huge quantity of statistics are available, the list is available here). As a result, the API returns an array of entries…simple…

Hello Google Analytics !!!

The API documentation provides an interactive sample code section used to test the API. The only problem i see with this sample code is that not all the HTML page is available and we can not easily “copy past” the code to create our own application…. It is why i have decided to create this page…

To begin…

You must be aware that it is not possible to test the API without deploying the HTML page on a server on the Internet. This is for security reason and Google needs to authorize your application. So the first thing to do is to register a new domain. This first step is mandatory and is clearly explained here.

Domain creation

You need to enter your web server domain name or IP address.

Managing you new domain

You only need to click on the domain name you have created on the previous step.

Domain verification and activation

Because the application i am using is available on a port different than 80, i have chosen the Upload an HTML file method. Google provides you an HTML file that you need to place on your WEB server. After uploading the file on your WEB server, please click on the Verify button.

The Web application

After successfully executed the previous step, you can now create the Google Analytics Web page. The following sample code is a very basic web application returning the available Google analytics profiles.

Adding a dummy image in your Web page…

your page must contain an image that's hosted at the same domain as your page. (see code line 63 of the next section).

Google Analytics initialization, authentication and authorization

The Google Analytics JavaScript API is loaded (line 3 and line 5). A callback to the init function is declared (line 6).

The initFunction(line 23) will check (with cookies) if the user is already authenticated. If the user is already authenticated, the statictics are displayed (line 32). If not (line 26) a Login button is displayed for authentication.

The login function (line 15) will ask the user if he allows the application to access his Google Account. If the user is not actually logged with his Google Account, the Google Login/Password page is displayed.

After this login operation, the Google Authentication will redirect the user to this page and the InitFunction will be called again. The initFunction will check if the user is authenticated (and it is the case now) and the statistics are displayed.

Remark: I actually don’t know how to redirect to another page… a next parameter is mention in some documents but i don’t know how to use it…

Asking for statistics

This step is very easy and correctly documented by the Google documentation. I have nothing to add… Only my sample code is provided here…

The available profiles are displayed in a table (line 64). To retrieve the different profiles, an HTTP requested is prepared (line 42) and the request is sent (line 43). A callback is provided in parameter (listProfiles method line 43). The callback method is in charge of formatting the result (line 48 to 58).

Download the HTML sample code

You can download the sample Web page here.

Conclusion

The Google Analytics API is a powerful library to manage the statistics of your Web sites. Authentication and authorization are managed as well with the Google Data API. Still a very good API from Google…

Google Gears Desktop Drag and drop operation

2009-06-08T14:44:00.001-07:00

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

2009-06-03T10:25:00.001-07:00

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.

Google App Engine for Java, GWT and GXT

2009-05-18T13:35:00.001-07:00

Introduction

With the launch of the new Google App Engine (Beta) delivered with an Eclipse plugin managing GAE and GWT1.6, it is now very easy to deploy new GWT applications in the Google cloud.
GXT is a java library for building rich Internet applications with GWT. As demonstrated on their Web site, this library provides a huge quantity of graphical components to help you creating applications very quickly.

My objective was to evaluate how easy it is to deploy a basic application combining GAE-1.2.1, GWT-1.6.4 and GXT-2.0-md01.

Steps to create the application

Downloading and installing the GAE SDK-1.2.1

This step is done without any problem.

Installing the Eclipse Plugin for GAE

The Eclipse Plugin for GAE is easy to install as well and adds 3 buttons in the toolbar.

The contextual menu is modified as well to add a a Google entry

Those 3 buttons are used to:

Create a new GAE application. You can choose to use GWT, GAE or both.
Compile the code (transform the Java code in JavaScript)
Deploy your application on the Google App Engine servers.

Adding the GXT2.0-md01 jar library

You simply need to add an external java library in the project.

Coding the application using GWT and GXT

No remark in this section, no specific think related to GAE.

Compiling and deploying the application

Of course, you need to have a developer account to deploy your application.
Before deploying the application, you need to enter the applicationId obtain on the GAE web portal

After entering this information, you only need to click on the button from the toolbar. A popup appears asking you to fill your Google password. If all is OK, you should visualize your application on a Web browser.

Remarks and problems

For a basic application, there is really no problem, compilation and deployment is working fine. For a more elaborated application with GXT library, problems can occurs.

StackOverflow error during compilation

You need to click on the Advanced link and add the –Xss16M VM argument.

Max number of files and blobs is 1000

Your application can use a lot of static files for images, CSS, and JavaScript. When the number of files is greater than 1000, the deployer fires an error.

To avoid this problem, you need to reduce the number of static files included in your application.

Multiple options are available:

Locating your static file in an other Web server
Zipping the static files and serving those zipped files with a Servlet included in your application. This solution is working fine for development process but can not be used in a production solution. A link with a sample code is available ">here.

Other remarks

During the tests i need to connect behind a proxy. The Eclipse proxy configuration needs to be used to deploy the GEA with a proxy.
GAE can be used with an ant file available here. This build file does not include the target to compile the GWT code. To compile the GWT code with this build, you need to add the gwtc target section.

Conclusion

This post explains very quickly the main steps to create an application with GWT, GAE and GXT. The Eclipse Plugin is well designed and the application development is easy. I will try to continue playing with all capabilities provided by the GAE (database, …)

Location with the IPhone Safari browser (SDK3.0)

2009-05-17T15:35:00.001-07:00

Introduction

In a previous article, the Google Gears geo-location technology has been introduced to demonstrate how to retrieve the location from the Internet browser.

The IPhone SDK3.0 is introducing a W3C standardized location API in the Safari browser. Objective of this post is to evaluate this JavaScript API provided by the Mobile Safari browser.

I have found the following information from the Apple Web site:

A PDF document providing information regarding geographic location classes.
A podcast describing the JavaScript location API.

IPhone Web application illustration

A very basic IPhone WebApp is developed to test the JavaScript API.
The WebApp.Net micro framework has been used for this evaluation.

The application is containing the JavaScript code used to retrieve the location. This code is located in the <script> section of the HTML page. As you can see, 3 JavaScript functions has been used and any JavaScript import or other configuration is required.
You can call directly the navigator.geolocation.watchPosition function without any initialization…the navigator object is already known by the Safari…

getCurrentPosition returns the current position in the displayLocation callback.
watchLocation is used to track the IPhone location. Each time a new location is available, the displayLocation callback is triggered. This method is returning a watchId used to stop the tracking.
clearWatch is used to stop the tracking started with the watchLocation.

The getCurrentPosition and watchLocation can have up to 3 parameters in input:

The success location callback is returning a Position object.

I have only checked that longitude, latitude and accuracy was returned, i need to complete the tests for altitude and speed. For the heading (direction) i think that this information is not returned with the current IPhone.
The error callback is returned in case of error
The PositionOptions object has 3 parameters

Starting the WebApp

When starting the application for the first time, the Safari browser displays a popup. You need to confirm that you agree to give your location. After multiple uses, the popup does not appear anymore.

In this sample application, the location is displayed in a popup.

Conclusion

The W3C standard API provided with IPhone 3.0 SDK is very easy to use and provides a position through multiple sources (GPS, WIFI, BTS…).
Any Geocoding API is provided by Safari to retrieve an address from this location.
This interesting feature is available with the Google Gears API…
During my evaluation (with the Beta version), the Safari browser was frozen multiple times and i need to restart the mobile…

The application sample will be available in a near future…

GeoLocation with Google Gears and GWT

2009-05-17T14:20:00.001-07:00

Introduction

Geo-location is used and available everywhere and it exists multiple solutions to retrieve the position.
Computed position is more or less accurate regarding the technology used.

Basic handsets can retrieve the location thanks the operator base stations.
GPS handsets can retrieve a more accurate position with GPS or AGPS technologies.
When GPS signal is to limited and WIFI available, WIFI positioning can be used...

More and more applications are available with location capabilities.
Those applications are used to find the nearest restaurant, cinema.
Big companies are launching new services to locate your friends (Google Latitude)…

To create those applications, a location API is required to get the handset or laptop position.
The main features of those API are:

Returning a position (longitude, latitude, speed) taking abstraction of the underlying technologies (GPS, WIFI, BTS...)
Returning the response accuracy.
Tracking the handset(return multiple location each time a modification is observed)

This article will focus on the location API's available for PCs and laptops Internet browsers(Safari, IE, Firefox) and more especially on the Google Gears technology.

Google Gears

Google is proposing the Gears API for Geo-Location purpose.

This Google API like the majority of other APIs is returning the position BUT can in addition return geocoding information like the country, city, street number, street and region information.
After installing this plugin, web applications have the possibility to retrieve the location from the Internet browser.
A very basic JavaScript API is proposed to fulfill the main location features exposed previously.

For people familiar with the Google Web Toolkit framework, this Gears API is available as a GWT module.

Next part of the article will demonstrate how to use this GWT Gears API.

To create a web application with GWT and Gears, you need:

Download the Gears plugin available Here
Download the Gears GWT module available Here
Create a basic GWT application with Eclipse or other Java editor

The GWT-Gears Java code

Retrieving the GeoLocation service from the Gears factory

To retrieve the current location, you can use the getCurrentPosition method. As you can see in the code, options can be used to specify the accuracy.

If you want to retrieve the address information determined from the longitude and latitude, you need to set the gearsRequestAddress to true. By default, the geocoding is disabled.

If you want to be notified each time the location is modified, you need to use the watchPosition method. This method is returning an identifier used to stop the tracking.

If you want to stop the tracking (started with the watchPosition method), you need to call the clearWatch method.

Conclusion

The Google Gears API (available as a JavaScript library or a GWT module) is very easy to use and provides interesting geocoding features to retrieve Address information.

A W3C standard available here is describing an API for location for Web browsers. The Google API seems very closed from this specification.

In a next article, an overview of the IPhone3.0 Safari location API will be exposed.

IUI library for Iphone

2008-10-25T14:05:00.001-07:00

I'm evaluating the IUI library for the iphone. This library has a dedicated .css and .js to skin an iphone web appliation. This library is using AJAX technology for better performances. Take a look to this video for a better understanding

Joe Hewitt: "An Introduction to iUI" @ Yahoo! Video

JSF and Weblets, how simple it is …

2008-10-23T14:55:00.001-07:00

When creating JSF components libraries, the rendering part of the JSF component needs make some references to resource files (.css, .js, images).

Those resources needs to be stored in the component library jar file. By this way the webapp using this library does not require any configuration.

Main JSF frameworks (Trinidad, Adf, IceFaces…) already include a resource manager servlet used to retrieve resources files.

When creating a JSF component library from scratch (starting from MyFaces or Sun JSF implementation), this kind of resource manager does not exist and it is in charge to the library developer to manage the resource management.

Different solutions are available and are described in the post:

http://www.developpez.net/forums/d239467/java/developpement-web-java/frameworks/jsf/participez-creation-faq-jsf/

This post will sum-up the weblets1.0 solution.

Objectives of the weblets project is to simplify the management of resources. Weblets are not restricted to JSF frameworks and can be use in multiple ways.

Steps to call a resource from JSF component:

1. Downloading the weblets libraries(weblets-api-1.0.jar, weblets-impl-1.0.jar) and add it in your project

2. Creating the weblets-config.xml file located in the META-INF directory of the component library.

<?xml version="1.0" encoding="UTF-8" ?>


  
    myapp.resources
    net.java.dev.weblets.packaged.PackagedWeblet
    
      package
      com.myapp.resources
    
  

  
    myapp.resources
    /resources/*

The only thinks to configure are:
-Defining a weblet-name (myapp.resources)
-Referencing your resource directory path containing your css, js with the weblet init-param element (com.myapp.resources).
com.myapp.resources refers to the directory path com/myapp/resources

3. Referencing a resource managed by the weblets from the JSF component

        String cssFile = FacesWebletUtils.getURL(context, "myapp.resources","/myapp.css");
        writer.startElement("link", this);
        writer.writeAttribute("rel", "stylesheet", null);
        writer.writeAttribute("href", cssFile, null);
        writer.endElement("link");

FacesWebletUtils.getURL(context,, "/") is used to retrieve the resources stored in the library jar file.
In the sample code, myapp.css is located in the com/myapp/resources directory.

Conclusion

Weblets is a very usefull library used to simplify the resource management. We can regret that this is not part of the basic JSF framework. You can download and access all weblets documentation here

Masking the URL bar on an iphone web application

2008-09-27T08:16:00.001-07:00

With the firmware 2.1, it’s possible to mask the URL bar with a meta tag. Previous this meta tag instruction, the masking was done with javascript code.

Adding <meta name="apple-mobile-web-app-capable" content="yes" /> instruction in the HTML code will result in masking the URL bar.

Take attention that this instruction is only valid when your webapp is added as the home screen.

Using the apt ant task

2008-09-04T08:08:00.001-07:00

I'm using Jdeveloper and there is not support for the apt task in this IDE. Ant 1.7.0 has a built in support task for Apt.
To use it, add the apt tag in your build file as followed.

GWT-Ext: Wrapping a Google Map component

2008-07-26T06:35:00.001-07:00

The aim of this tutorial is to present how to wrap a Google Map component with GWT-Ext.

GWT-Ext proposes a lot of Google Map wrappers. The tutorial proposes to demonstrate how to wrap the “Direction” and “Map” components. Thanks this component it’s now easy to reuse a Direction in a web page.

Direction widget features:

Map and direction in the same component
Map and directions size are automaticaly adjusted depending component size
Optional form to define origin and destination
Horizontal or vertical layout

Main steps to create the widget:

Overloading the Panel component

Creating the “<Div>” elements used by the Google Map API

Those 2 elements are used by the Google API (next step) to display the map and the directions components.

        String mapDiv = "
";
        String directionsDiv = "
";
        _mapHTMLPanel = new HTMLPanel(mapDiv);
        _directionsHTMLPanel = new HTMLPanel(directionsDiv);

Initializing the Google Map API

GMap2 and GDirections javascript objects are initialized. $wnd is used by GWT API to access javascript objects.

    private native JavaScriptObject initializeMap() /*-{
     var map = new $wnd.GMap2($doc.getElementById('widget_map_canvas'));
     map.addControl(new $wnd.GSmallMapControl());
     map.addControl(new $wnd.GMapTypeControl());
     return map;
    }-*/;
    
    private native JavaScriptObject initializeDirections(Directions thisModule) /*-{
     var map = this.@com.benevolarc.gwt.client.Directions::_map;
     var gdir = new $wnd.GDirections(map, $doc.getElementById('widget_directions'));
     $wnd.GEvent.addListener(gdir, "load", function(response) {
        if (response && response.getStatus().code == 200) {
            thisModule.@com.benevolarc.gwt.client.Directions::directionsOK()();                          
        } 
     });

Creating the layout (horizontal or vertical) to store the Map and the Direction components

The layout allows to display the map and the directions with 2 options (left-rigth or top-down)
Muliple GWT-Ext layouts are used for that purpose:

FitLayout is used a base class for layouts that contain a single item that automatically expands to fill the layout's container

Panels with ColumLayoutData are used for the Horizontal mode

AnchorLayoutData with PanelListenerAdapter is used for the Horizontal mode

The difficulty was to display an horizontal panel with a height expressed in percentage instead of pixel. The solution was to use a PanelListenerAdapter.

    private void init() {
        setLayout(new FitLayout());
        setBorder(false);
        String mapDiv = "
";
        String directionsDiv = "
";
        _mapHTMLPanel = new HTMLPanel(mapDiv);
        _directionsHTMLPanel = new HTMLPanel(directionsDiv);
        
        //_panel.add(new HTMLPanel("
")); 
        
        if (_displayMode == DisplayMode.HORIZONTAL) {
            Log.debug("Horizontal mode");
            Panel columnLayoutPanel = new Panel();
            columnLayoutPanel.setBorder(false);
            columnLayoutPanel.setLayout(new ColumnLayout());

            col1Panel = new Panel();
            col1Panel.setBorder(false);
            col1Panel.setLayout(new FitLayout());
            Panel panelMap = new Panel();
            panelMap.setBorder(false);
            _mapHTMLPanel.setMargins(10, 10, 10, 10);
            panelMap.setLayout(new AnchorLayout());
            if (_displayForm) {
                panelMap.add(createFromToForm());
            }
            panelMap.add(_mapHTMLPanel, new AnchorLayoutData("100% 100%"));
            col1Panel.add(panelMap);
            col2Panel = new Panel();
            col2Panel.setBorder(false);
            col2Panel.setLayout(new FitLayout()); 
            col2Panel.add(_directionsHTMLPanel);

            columnLayoutPanel.add(col1Panel, new ColumnLayoutData(.50));
            columnLayoutPanel.add(col2Panel, new ColumnLayoutData(.50));
            columnLayoutPanel.addListener(new PanelListenerAdapter() {
                    public void onResize(BoxComponent component, int adjWidth, int adjHeight, int rawWidth, int rawHeight) {
                        col1Panel.setHeight(rawHeight);
                        col2Panel.setHeight(rawHeight);
                    }
                });


            add(columnLayoutPanel);
           
        } else {
            Log.debug("Vertical mode");
            Panel panel = new Panel();
            panel.setLayout(new AnchorLayout());
            if (_displayForm) {
                FormPanel fPanel = createFromToForm();
                panel.add(fPanel);  
            } 
            panel.add(_mapHTMLPanel, new AnchorLayoutData("100% 50%"));
            _mapHTMLPanel.collapse();
            panel.add(_directionsHTMLPanel, new AnchorLayoutData("100% 50%"));
            add(panel);  
        }
    }

Invoking the directions

When the user clicks on the "get directions" button a call to the Google API has to be done. A listener is attached on the button and a call to the JSNI method is done

        
	goButton.addListener(new ButtonListenerAdapter() {
            public void onClick(Button button, EventObject e) {
                lauchDirections();
            }
        });

launchDirections checks if origin and destination are correctly filled and call the setDirections native method.

    private void lauchDirections() {
        Log.debug("Getting direction" + _map);
        if (_toTextField.getText().length() > 0 && _fromTextField.getText().length() > 0) {
            setDirections(_fromTextField.getValueAsString(), _toTextField.getValueAsString(), _locale);
            clearErrorMessage();
        } else {
            Log.warn("From and to must be filled");
            setErrorMessage("From and to must be filled");
        }
    }

The setDirections method calls the Google API method gdir.load. In case of success, the Map and the directions components are updated. In case of error, a message is displayed to the user.

  public native void setDirections(String fromAddress, String toAddress, String locale) /*-{
     var gdir = this.@com.benevolarc.gwt.client.Directions::_gdir;
     gdir.clear();
     gdir.load("from: " + fromAddress + " to: " + toAddress,
                  { "locale": locale });
    }-*/;

Using the Directions component

Using the component is easy

Displaying the Directions and Map component with origin and destination in the constructor (horizontal layout)
Default component size is 600px*600px
```
	directions = new Directions("paris","bordeaux", Directions.DisplayMode.HORIZONTAL);
```

Displaying the Form allowing the user to enter origin and destination (horizontal layout)


        //directions with Horizontal layout
        directions = new Directions(true, Directions.DisplayMode.HORIZONTAL);
        directions.setWidth("1000px");
        directions.setHeight("800px");
        directions.setBorder(true);

Displaying the Form allowing the user to enter origin and destination vertical layout)


        //directions with Horizontal layout
        directions = new Directions(true, Directions.DisplayMode.VERTICAL);
        directions.setBorder(true);

Conclusion

The tutorial demonstrates how to wrap a Google component. Of course this component is not perfect and a lot of improvement needs to be done.

Improve the look and feel

Support to Google street

Internationalization support

Printing capabilities

And more...

Feel free to reuse it and please don't hesitate to give your opinion. If you find this component usefull, the source can be use for GWT-EXT extenstion...
Thanks for GWT-Ext forum for the support regarding layout management.

Complete Code

 
package com.benevolarc.gwt.client;

import com.allen_sauer.gwt.log.client.Log;

import com.google.gwt.core.client.JavaScriptObject;

import com.google.gwt.user.client.ui.HTML;

import com.gwtext.client.core.EventObject;
import com.gwtext.client.widgets.BoxComponent;
import com.gwtext.client.widgets.Button;
import com.gwtext.client.widgets.HTMLPanel;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.event.ButtonListenerAdapter;
import com.gwtext.client.widgets.event.PanelListenerAdapter;
import com.gwtext.client.widgets.form.Field;
import com.gwtext.client.widgets.form.FormPanel;
import com.gwtext.client.widgets.form.MultiFieldPanel;
import com.gwtext.client.widgets.form.TextField;
import com.gwtext.client.widgets.form.event.FieldListenerAdapter;
import com.gwtext.client.widgets.layout.AnchorLayout;
import com.gwtext.client.widgets.layout.AnchorLayoutData;
import com.gwtext.client.widgets.layout.ColumnLayout;
import com.gwtext.client.widgets.layout.ColumnLayoutData;
import com.gwtext.client.widgets.layout.FitLayout;


public class Directions extends Panel{
    //private Panel _panel;
    private TextField _fromTextField;
    private TextField _toTextField;
    private HTMLPanel _mapHTMLPanel;
    private HTMLPanel _directionsHTMLPanel;
    private JavaScriptObject _map;
    private JavaScriptObject _gdir;
    public enum DisplayMode {HORIZONTAL, VERTICAL};
    private DisplayMode _displayMode = DisplayMode.VERTICAL;
    private boolean _displayForm = true;
    private Panel col1Panel = null;
    private Panel col2Panel = null;
    private HTML _errorMessage = new HTML();
    private String _from = null;
    private String _to = null;
    private String _locale = "EN";
    
    public Directions(boolean displayForm) {
        _displayForm = displayForm;
        init();
    }
    
    public Directions(boolean displayForm, DisplayMode displayMode) {
        _displayForm = displayForm;
        _displayMode = displayMode;
        init();
    }
    
    public Directions(String from, String to, DisplayMode displayMode) {
        _displayMode = displayMode;
        _displayForm = false;
        _from = from;
        _to = to;
        init();
    }
    
    private FormPanel createFromToForm() {
        _fromTextField = new TextField("From", "from", 250);
        _toTextField = new TextField("To", "to", 250);
        Button goButton = new Button("Get directions");
        
        MultiFieldPanel directionsFormPanel = new MultiFieldPanel();
        
        directionsFormPanel.setBorder(false);
        directionsFormPanel.setPaddings(10, 10, 10, 10);
        directionsFormPanel.addToRow(_fromTextField, 300);
        directionsFormPanel.addToRow(_toTextField, 300);
        directionsFormPanel.addToRow(goButton, 100);
         
        FormPanel fPanel = new FormPanel();
        fPanel.setBorder(false);
        fPanel.setLabelWidth(30);
        fPanel.add(_errorMessage);
        fPanel.add(directionsFormPanel);
        _fromTextField.addListener(new FieldListenerAdapter() {
            public void onSpecialKey(Field field, EventObject e)  {
                if (e.getKey() == EventObject.ENTER) {    
                   lauchDirections();
                }
            }
        });
        _toTextField.addListener(new FieldListenerAdapter() {
        public void onSpecialKey(Field field, EventObject e)  {
            if (e.getKey() == EventObject.ENTER) {    
               lauchDirections();
            }
           }
        });
         
        goButton.addListener(new ButtonListenerAdapter() {
            public void onClick(Button button, EventObject e) {
                lauchDirections();
            }
        });
        return fPanel;
    }
    
    private void setErrorMessage(String message) {
        _errorMessage.setHTML("Error: "+ message + "
");
    }
    
    private void clearErrorMessage() {
        _errorMessage.setHTML("
");
    }
    
    private void lauchDirections() {
        Log.debug("Getting direction" + _map);
        if (_toTextField.getText().length() > 0 && _fromTextField.getText().length() > 0) {
            setDirections(_fromTextField.getValueAsString(), _toTextField.getValueAsString(), _locale);
            clearErrorMessage();
        } else {
            Log.warn("From and to must be filled");
            setErrorMessage("From and to must be filled");
        }
    }
    
    private void init() {
	Log.debug("Setting default width and heigth");
        setWidth(600);
        setHeight(600);
        setLayout(new FitLayout());
        setBorder(false);
        String mapDiv = "
";
        String directionsDiv = "
";
        _mapHTMLPanel = new HTMLPanel(mapDiv);
        _directionsHTMLPanel = new HTMLPanel(directionsDiv);
        
        //_panel.add(new HTMLPanel("
")); 
        
        if (_displayMode == DisplayMode.HORIZONTAL) {
            Log.debug("Horizontal mode");
            Panel columnLayoutPanel = new Panel();
            columnLayoutPanel.setBorder(false);
            columnLayoutPanel.setLayout(new ColumnLayout());

            col1Panel = new Panel();
            col1Panel.setBorder(false);
            col1Panel.setLayout(new FitLayout());
            Panel panelMap = new Panel();
            panelMap.setBorder(false);
            _mapHTMLPanel.setMargins(10, 10, 10, 10);
            panelMap.setLayout(new AnchorLayout());
            if (_displayForm) {
                panelMap.add(createFromToForm());
            }
            panelMap.add(_mapHTMLPanel, new AnchorLayoutData("100% 100%"));
            col1Panel.add(panelMap);
            col2Panel = new Panel();
            col2Panel.setBorder(false);
            col2Panel.setLayout(new FitLayout()); 
            col2Panel.add(_directionsHTMLPanel);

            columnLayoutPanel.add(col1Panel, new ColumnLayoutData(.50));
            columnLayoutPanel.add(col2Panel, new ColumnLayoutData(.50));
            columnLayoutPanel.addListener(new PanelListenerAdapter() {
                    public void onResize(BoxComponent component, int adjWidth, int adjHeight, int rawWidth, int rawHeight) {
                        col1Panel.setHeight(rawHeight);
                        col2Panel.setHeight(rawHeight);
                    }
                });


            add(columnLayoutPanel);
           
        } else {
            Log.debug("Vertical mode");
            Panel panel = new Panel();
            panel.setLayout(new AnchorLayout());
            if (_displayForm) {
                FormPanel fPanel = createFromToForm();
                panel.add(fPanel);  
            } 
            panel.add(_mapHTMLPanel, new AnchorLayoutData("100% 50%"));
            _mapHTMLPanel.collapse();
            panel.add(_directionsHTMLPanel, new AnchorLayoutData("100% 50%"));
            add(panel);  
        }
    }
    
    protected void onAttach() {
        Log.debug("Component attached");
        _map = initializeMap();
        _gdir = initializeDirections(this);
        if (_from != null && _to != null) {
            setDirections(_from, _to, _locale);
        } else {
            _mapHTMLPanel.collapse();
        }
        super.onAttach();
    }
    
    private native JavaScriptObject initializeMap() /*-{
     var map = new $wnd.GMap2($doc.getElementById('widget_map_canvas'));
     map.addControl(new $wnd.GSmallMapControl());
     map.addControl(new $wnd.GMapTypeControl());
     return map;
    }-*/;
    
    private native JavaScriptObject initializeDirections(Directions thisModule) /*-{
     var map = this.@com.benevolarc.gwt.client.Directions::_map;
     var gdir = new $wnd.GDirections(map, $doc.getElementById('widget_directions'));
     $wnd.GEvent.addListener(gdir, "load", function(response) {
        if (response && response.getStatus().code == 200) {
            thisModule.@com.benevolarc.gwt.client.Directions::directionsOK()();                          
        } 
     });
     
     $wnd.GEvent.addListener(gdir, "error", function(response) {
        if (!response || response.getStatus().code != 200) {
            thisModule.@com.benevolarc.gwt.client.Directions::directionsError(I)(response.getStatus().code);                          
        } 
     });
     return gdir;
    }-*/;
    
    public void directionsError(int error) {
        Log.debug("Error");
        String errorMessage = "Unknown error";
        switch (error) {
            case 601: errorMessage = "Missing query";break;
            case 602: errorMessage = "Unknown address";break;
            case 603: errorMessage = "Unavailable address";break;
            case 604: errorMessage = "Unknown direction";break;
            default: errorMessage ="Unknown error";
        }
        setErrorMessage(errorMessage);
        _mapHTMLPanel.collapse();
        _directionsHTMLPanel.collapse();
    }
    
    public void directionsOK() {
        Log.debug("Directions OK");
        _mapHTMLPanel.expand(true);
        _directionsHTMLPanel.expand(true);
    }
    
    
    public native void setDirections(String fromAddress, String toAddress, String locale) /*-{
     var gdir = this.@com.benevolarc.gwt.client.Directions::_gdir;
     gdir.clear();
     gdir.load("from: " + fromAddress + " to: " + toAddress,
                  { "locale": locale });
    }-*/;
    
     public void setLocale(String locale) {
         this._locale = locale;
     }

     public String getLocale() {
         return _locale;
     }
    
   

}

Google App Engine: Queries as an SQL “LIKE”

2008-07-20T07:46:00.001-07:00

Introduction:

When i have developed my first GAE application, i wanted to use a request with a “LIKE” to find all tuples beginning with a prefix.
GQLQuery does not allow this kind of SQL request (SELECT * FROM user where name LIKE ‘SMIT%’).
The solution is to use this kind of request:


query = self.request.str_POST['query']
queryEnd = query+"\xEF\xBF\xBD".decode('utf-8')
res=db.GqlQuery('SELECT * FROM User WHERE name>=:1 AND name<=:2 ORDER BY nom DESC', query, queryEnd)

I was obliged to modify the sample code provided by the documentation (here)
queryEnd = query+"\xEF\xBF\xBD".decode('utf-8') was added.

Thanks a lot to José Oliver Segura for his support.

Information can be found here

Inserting code snippet in Blogger

2008-07-17T14:50:00.001-07:00

It was really difficult for me to find a solution to insert java code snippets in my Blogger !!
I found a solution using the syntaxhighlighter JavaScript plugin.
The steps used to insert code snippet:

Download syntaxhighlighter from syntaxhighlighter
Unzip the file and place the Scripts and Styles directories in a URL (location in my sample)
Modify your blogger template adding those lines just after the </div></div> <!-- end outer-wrapper –>

To publish a post with code snippet, insert your code inside the <pre> or <textarea> tags

<textarea name="code" class="c#" cols="60" rows="10">

... some code here ...

</textarea>

More information and configuration is available on the syntaxhighlighter web site.

Rounded corners panel with GWT

2008-07-15T13:11:00.001-07:00

Native GWT solution

GWT provides a native solution to build panels with rounded corners. This solution is done with a DecoratorPanel component.

The rounded corners are build thanks a .css file customization where images needs to be provided in the css file.

html>body .gwt-DecoratorPanel .topLeft {
background: url(images/corner.png) no-repeat 0px 0px;
}

The drawback of this solution is that images need to be provided when a new rounded panel has to be created with a new color.

Bouwkamp solution

An other solution without providing any images for corner definition is available thanks http://code.google.com/p/com-bouwkamp-gwt/. By this way creating a new rounded corner panel with different colors is a very basic task.

Steps to create a new rounded panel:

Download the jar file and reference this file in the classpath
Modify the <appli>.gwt.xml and add :

<inherits name='com.bouwkamp.gwt.user.User' />

Create your java file:
By default the height of the corners is 2px. It is possible to set a different height at construction time. The height can be a value between and including 1 and 9. This value doesn't correspond exactly with the height, e.g. 9 is 12px height.
```
 // all 4 corners are rounded and height index 5
      RoundedPanel rp = new RoundedPanel(yourWidget, ALL, 5);
```
In the previous sample yourWidget can be any component like a VerticalPanel

You can even define the color of the corner programaticaly:
```
// all 4 corners are rounded.
      RoundedPanel rp = new RoundedPanel(yourWidget); 
      rp.setCornerColor("red");
```

Customize the .css application file for rounder corner customization

Default the css style name of the rounded corner divs is cbg-RP. Use it to set the colors of the corner. For example:

 .cbg-RP { background-color:#c3d9ff; }

Conclusion

The solution provided by the Bouwkamp library is very easy to use. Some improvement can be done like providing a rounded corner support and shadow borders. It seems javascript libary is available for this feature see:

http://www.ruzee.com/blog/shadedborder/

GWT-Ext, Remote ComboBox tutorial

2008-07-12T07:58:00.001-07:00

Designing a local comboBox is a basic documented task. For the remote mode (where data to be suggested are returned from a server) the documentation is not so clear.

In this post, a basic review of the LOCAL mode is done and in a second part, the REMOTE mode is developped.

Local comboBox mode:

Basic steps:

Store initialization
Loading the store
Creating the combobox with LOCAL mode
Linking the combobox with the store

Sample code:

        final Store store = 
            new SimpleStore(new String[] { "civilite", "desc", }, 
                            new String[][] { new String[] { "Mr", "Mr" }, 
                                             new String[] { "Mlle", "Mlle" }, 
                                             new String[] { "Mde", "Mde" } });
        store.load();

        final ComboBox cb = new ComboBox();
        cb.setForceSelection(true);
        cb.setMinChars(1);
        cb.setFieldLabel("Civilité");
        cb.setStore(store);
        cb.setAllowBlank(false);
        cb.setDisplayField("civilite");
        cb.setMode(ComboBox.LOCAL);
        cb.setTriggerAction(ComboBox.ALL);
        cb.setEmptyText("Enter civilité");
        cb.setLoadingText("Recherche...");
        cb.setTypeAhead(true);
        cb.setEditable(false);
        cb.setSelectOnFocus(true);
        cb.setWidth(230);

        cb.setHideTrigger(false);
        add(cb);

Remote comboBox mode:

In that case, the store needs to be constructed dynamicaly from the server.

Each time the user tapes a new key in the combobox, a request has to be sent to the server to update the suggest box. The current combobox value has to be sent as a parameter to the server.

The combobox REMOTE mode uses a POST query to the server with the query parameter filled with the current combobox value.

The server side (any servlet or CGI) needs to analyze the POST request, retrieve the query parameter and return an answer to be displayed in the combobox (in the sample code, JSON is used). Some parameters can be set for autocomplete configuration:

setMinChar: The minimum number of characters the user must type before autocomplete activate (default is 4)

setQueryDelay: The length of time in milliseconds to delay between the start of typing and sending the query to filter the dropdown list (defaults to 500 ms)

Basic steps:

Store creation and loading with a HttpProxy and a JsonReader

Combobox creaction with REMOTE mode

Linking the combobox with the store

Creating the server side part (servlet or CGI) by analyzing the query parameter on the POST request.

Sample code:

         HttpProxy dataProxy = new HttpProxy("/rpc/adherents");
         final String resultTpl = "{nom} {prenom}
{email}
";   
         RecordDef adherentsRecordDef =  
                 new RecordDef(new FieldDef[] { new StringFieldDef("id"),
                                                new StringFieldDef("nom"), 
                                                new StringFieldDef("prenom"), 
                                                new StringFieldDef("telephoneFixe"), 
                                                new StringFieldDef("telephoneMobile"), 
                                                new StringFieldDef("email"), 
                                                new StringFieldDef("adresse"), 
                                                new StringFieldDef("codePostal"), 
                                                new StringFieldDef("ville") });
         JsonReader reader = new JsonReader(adherentsRecordDef);
         reader.setRoot("adherents");
         Store store = new Store(dataProxy, reader);
         store.load();
         ComboBox cb = new ComboBox();   
         cb.setStore(store);   
         cb.setDisplayField("nom");   
         cb.setId("nom");
         cb.setTypeAhead(false);   
         cb.setLoadingText("Searching...");  
         cb.setFieldLabel("Nom");
         cb.setWidth(230);   
         cb.setTpl(resultTpl);
         cb.setPageSize(10);   
         cb.setHideTrigger(true);   
         cb.setMode(ComboBox.REMOTE);   
         cb.setTitle("Users");   
         //cb.setHideLabel(true);   
         cb.setItemSelector("div.search-item");

Google Calendar API: managing main and secondary calendars

2008-06-29T15:27:00.001-07:00

Adding an event in a Google calendar is pretty easy. For me, the only touchy think is to select the correct calendarID.

To add an event in the main calendar (the default calendar created by Google when the account is created) the url is: /calendar/feeds/default/private/full
To add an event in a secondary calendar the url is: /calendar/feeds/<calendarID>/private/full

To find the calendarID:

1) Go to Google Calendar.
2) Click on "Manage calendar
3) Select the tab Calendars
4) Click on the name of the secondary calendar
5) You will see an entry that says "Calendar address"
6) Search (CalendarID:...@group.calendar.google.com)

Don't forget to replace the @ with %40 when used in you application.

Google App Engine: basic tips

2008-06-22T08:14:00.001-07:00

To start the local python server in debug mode:

python dev_appserver.py –debug

To reset the datastore:

python dev_appserver.py --clear_datastore

To use Google App Engine behind a proxy

With Windows, 2 system variables need to be set:

http_proxy =http://<login>:<password>@<proxy_address>:<proxy_port>

https_proxy = "http://<login>:<password>@<proxy_address>:<proxy_port>

To access the local datastore to view the application data:

http://localhost:8080/_ah/admin

EJB3 and JUnit

2008-05-04T02:22:00.001-07:00

For EJB3 testing, an interesting solution based on JBoss embedded package. Of course other alternative are available (Cactus, EJB3Unit...).

Thanks to this solution, it is now possible to launch an embedded JBoss container in standalone (without the need to install and configure a full JBoss container).

This solution is very interesting for testing purpose because there is no need to deploy and un-deploy each time on the server.

This JBoss package includes all mandatory libraries used to validated an EJB3 solution:

1 EJB3 container
The EJB3 Hibernate implementation
1 embedded java database: HSQLDB
JUnit (3) for testing purpose

For this tutorial, the embedded-jboss-beta3 is used and can be downloaded here

All the tutorial sources is available here.

Tutorial objective: Testing an EJB3 solution with JUnit based on

1 entity bean (Person)
1 session bean used for CRUD operation (Create, Remove, Update, Display)
1 JUnit test case used to validate session bean operation

Step 1: Download the embedded JBoss library

Step 2: Create a startup project

Create a project with your favorite IDE and import the JBoss embedded library (from the library and from the optional-lib directories). Do not forget to add all the .jar files in the classpath. Embedded configuration directory needs to be in the classpath also (/embedded-jboss/bootstrap).

Step 3: Create your Entity bean

For this tutorial, the Person class is created

Step 4: Create your session bean

For this tutorial, the PersonService session bean (interface and local implementation)

Step 5: Create your JUnit test case

It's the most interesting part of the tutorial.

To create and deploy JUnit tests easily, JBoss provides an extension of the JUnit TestCase class, the BaseTestCase. This class needs to package the application hosting the testes. A dynamical jar builder is used to create the package.

Step 6: Build your applications and tests with ant

Ant 1.7 is used for this tutorial.

Step 7: Run the tests

The tests ant task is used. This task will execute all tests available in the test directory.

An other ant task tests-report-html can be used to generate the report in html format.

Step 8 (optional): Running multiple tests

To avoid deploying and starting the JBoss container for each test case, it's possible to group all test cases in a suite by extending the JUnit TestSuite class.

For the tutorial, the AllTests class has been used and 2 test cases has been added in the suite. The all-tests task is used to run the TestSuite.

Conclusion

Embedded JBoss seems to be an attractive solution for EJB3 testing with JUnit. For now, only the internal java DB is used for persistence but it seems possible to configure an other database like Mysql. I will try to cover this feature in a new post.

The JUnit4 framework has not been tested and can be evaluated in an other post.

Mots clés Technorati : junit,ejb3,embedded-jboss,hibernate

Hibernate...

2007-12-01T00:47:00.001-08:00

JDeveloper and Jad

2007-11-16T07:34:00.001-08:00

JDeveloper does not decompile the class file automaticaly. When you drop a .class in the editor, jdev only provides the class description with methods...not the java code.

Jdev configuration file located in <jdev-home>/jdev/bin/jdev.conf has to be modified to allow jad to be taken into account for decompilation. The following line has to be added at the end of the jdev.conf file.

AddVMOption -Djcncmd=c:/jadnt158/jad.exe -p -b -ff -nl -pi99999 -space -t2 -noinner

Take care to modify the jad path !

GWT and Gears, automatic manifest generation

2007-11-16T05:03:00.001-08:00

When you create an application with GWT and Gear (http://code.google.com/p/gwt-google-apis/), a manifest has to be created to manage offline content.
Depending the targeted browser (Safari, IE, Gecko1.8, Gecko, Opera) GWT generates specifics files for html and javascript.
To minimize the manifest management (and the downloading process) a dedicated manifest has to be created for each browser.
A solution is to use a ServletFilter. This filter will automaticaly return the manifest regarding user's browser.
The filter configuration manages manifest version and resources to be included in the manifest (.css, .html, .gif...).
This filter will only be trigged when the manifest file is requested by Gears.

I hope this solution can help..
Don' t hesitate to post any comments or modifications.

FilterServlet code:

download the file

package com.alu.gwt.server; import java.io.BufferedReader;import java.io.File;import java.io.FileFilter;import java.io.FileReader;import java.io.FilenameFilter;import java.io.IOException; import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map; import java.util.regex.Matcher;import java.util.regex.Pattern; import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;  public class GearManifestFilter implements Filter {    public static final String EXTENSIONS = "extensions";    public static final String MANIFEST_VERSION = "manifestVersion";        public static final String OPERA_PATTERN = "'opera'],";    public static final String SAFARI_PATTERN = "'safari'],";    public static final String GECKO1_8_PATTERN = "'gecko1_8'],";    public static final String GECKO_PATTERN = "'gecko'],";    public static final String IE6_PATTERN = "'ie6'],";     public static final String OPERA = "opera";    public static final String SAFARI = "safari";    public static final String GECKO1_8 = "gecko1_8";    public static final String GECKO = "gecko";    public static final String IE6 = "ie6";     protected String _operaCacheFilename;    protected String _safariCacheFilename;    protected String _gecko1_8CacheFilename;    protected String _geckoCacheFilename;    protected String _ie6CacheFilename;     protected String _extensions;     protected String _manifestVersion = "1.0";     protected Map _manifestMap = new HashMap();     public static class GearRegexpFilenameFilter implements FilenameFilter {        private String _regexpFilter;        private Pattern _regexpPattern;         GearRegexpFilenameFilter(String regexpFilter) {            _regexpFilter = regexpFilter;            _regexpPattern = Pattern.compile(_regexpFilter);        }         public boolean accept(File dir, String name) {            if ((name.indexOf(".cache.") == -1) &&                 (name.indexOf("-xs.nocache.") == -1)) {                Matcher matcher = _regexpPattern.matcher(name);                return matcher.find();            } else                return false;        }    }     public static class GearResourcesExplorer {        List _result = new ArrayList();         public GearResourcesExplorer() {         }         public List list(File directory, FilenameFilter filter,                          boolean recursive, boolean root) {            if (recursive) {                File[] dirs = directory.listFiles(new FileFilter() {                             public boolean accept(File pathname) {                                if (pathname.isDirectory())                                    return true;                                return false;                            }                        });                for (int i=0; i < dirs.length; i++)                    list(dirs[i], filter, recursive, false);            }                        String[] res = directory.list(filter);            for (int i = 0; i < res.length; i++) {                if (root) {                _result.add(res[i]);                } else {                    _result.add(directory.getName() + File.separator + res[i]);                }            }            return _result;        }    }     public GearManifestFilter() {    }     public void init(FilterConfig filterConfig) {        _extensions = filterConfig.getInitParameter(EXTENSIONS);        _manifestVersion = filterConfig.getInitParameter(MANIFEST_VERSION);        System.out.println("Extensions: " + _extensions);        String realPath = filterConfig.getServletContext().getRealPath("/");        System.out.println("Path:" + realPath);        File dir = new File(realPath);                List resourceFilenames = new GearResourcesExplorer().list(dir, new GearRegexpFilenameFilter(_extensions), true, true);                for (int i = 0; i < resourceFilenames.size(); i++) {            System.out.println("File: " + resourceFilenames.get(i));        }         FilenameFilter noCacheFilter = new FilenameFilter() {                public boolean accept(File dir, String name) {                    if (name.endsWith(".nocache.js") &&                         !name.endsWith("-xs.nocache.js"))                        return true;                    return false;                }            };        String[] noCacheFilenames = dir.list(noCacheFilter);        if (noCacheFilenames.length != 1) {            System.out.println("Error !!");        } else {            getResourcesAccordingUserAgent(realPath + noCacheFilenames[0]);        }         _manifestMap.put(SAFARI,                          createManifest(_safariCacheFilename, _manifestVersion,                                         resourceFilenames));        _manifestMap.put(GECKO,                          createManifest(_geckoCacheFilename, _manifestVersion,                                         resourceFilenames));        _manifestMap.put(GECKO1_8,                          createManifest(_gecko1_8CacheFilename, _manifestVersion,                                         resourceFilenames));        _manifestMap.put(OPERA,                          createManifest(_operaCacheFilename, _manifestVersion,                                         resourceFilenames));        _manifestMap.put(IE6,                          createManifest(_ie6CacheFilename, _manifestVersion,                                         resourceFilenames));    }     protected void getResourcesAccordingUserAgent(String noCacheFilename) {        System.out.println(noCacheFilename);        BufferedReader in = null;        StringBuffer buffer = new StringBuffer();        try {            in = new BufferedReader(new FileReader(noCacheFilename));            String currentLine;            while ((currentLine = in.readLine()) != null) {                buffer.append(currentLine);            }            in.close();        } catch (IOException e) {            System.out.println("Error");        } finally {            if (in != null) {                try {                    in.close();                } catch (IOException e) {                    e.printStackTrace();                }            }        }         _operaCacheFilename = getFilename(buffer, OPERA_PATTERN);        _geckoCacheFilename = getFilename(buffer, GECKO_PATTERN);        _gecko1_8CacheFilename = getFilename(buffer, GECKO1_8_PATTERN);        _safariCacheFilename = getFilename(buffer, SAFARI_PATTERN);        _ie6CacheFilename = getFilename(buffer, IE6_PATTERN);         System.out.println("OperaFilename: " + _operaCacheFilename);        System.out.println("GeckoFilename: " + _geckoCacheFilename);        System.out.println("Gecko1_8Filename: " + _gecko1_8CacheFilename);        System.out.println("SafariFilename: " + _safariCacheFilename);        System.out.println("IE6Filename: " + _ie6CacheFilename);     }     protected String getFilename(StringBuffer noCacheStringBuffer,                                  String agentPattern) {        String noCacheString = noCacheStringBuffer.toString();        int beginIndex =             noCacheString.indexOf(agentPattern) + agentPattern.length() + 1;        int endIndex = noCacheString.indexOf("'", beginIndex);        String filename = noCacheString.substring(beginIndex, endIndex);        return filename;    }     protected String createManifest(String userAgentHash, String version,                                     List resourceFilenames) {        StringBuffer manifestBuffer = new StringBuffer("{\n");        manifestBuffer.append("\"betaManifestVersion\": 1,\n");        manifestBuffer.append("\"version\": \"");        manifestBuffer.append(version);        manifestBuffer.append("\",\n");        manifestBuffer.append("\"entries\": [\n");         manifestBuffer.append("{ \"url\": \"");        manifestBuffer.append(userAgentHash + ".cache.js\"");        manifestBuffer.append("},\n");        manifestBuffer.append("{ \"url\": \"");        manifestBuffer.append(userAgentHash + ".cache.html\"");        manifestBuffer.append("},\n");         for (int i = 0; i < resourceFilenames.size() - 1; i++) {            manifestBuffer.append("{ \"url\": \"");            manifestBuffer.append(resourceFilenames.get(i));            manifestBuffer.append("\"},\n");        }        manifestBuffer.append("{ \"url\": \"");        manifestBuffer.append(resourceFilenames.get(resourceFilenames.size() - 1));        manifestBuffer.append("\"}\n");        manifestBuffer.append("]\n");        manifestBuffer.append("}\n");        System.out.println("Manifest: " + manifestBuffer.toString());        return manifestBuffer.toString();    }     public void doFilter(ServletRequest servletRequest,                          ServletResponse servletResponse,                          FilterChain filterChain) throws IOException,                                                          ServletException {        HttpServletRequest request = ((HttpServletRequest)servletRequest);        String userAgentString = request.getHeader("user-agent");        System.out.println("UserAgent: " + userAgentString);        String userAgent = getUserAgent(userAgentString);        ServletOutputStream out = servletResponse.getOutputStream();        HttpServletResponse response = (HttpServletResponse)servletResponse;        response.setContentType("application/jsonrequest");        out.println((String)_manifestMap.get(userAgent));    }     protected String getUserAgent(String userAgentString) {        if (userAgentString.indexOf("IE6") != -1 ||             userAgentString.indexOf("MSIE 7") != -1) {            System.out.println("IE6 or more detected");            return IE6;        } else if (userAgentString.indexOf("MOZILLA") != -1) {            System.out.println("MOZILLA detected");            return GECKO;        } else if (userAgentString.indexOf("MOZILLA") != -1) {            System.out.println("MOZILLA detected");            return IE6;        }        return SAFARI;    }     public void destroy() {    } }

web.xml:

<filter>
    <filter-name>gearManifestFilter</filter-name>
    <filter-class>com.alu.gwt.server.GearManifestFilter</filter-class>
    <init-param>
        <description>Resources to be include in manifest</description>
        <param-name>extensions</param-name>
        <param-value>.htm|.css|.html|.js|.gif|.jpg</param-value>
    </init-param>
    <init-param>
        <description>manifest version</description>
        <param-name>manifestVersion</param-name>
        <param-value>1.0</param-value>
    </init-param>
</filter>
 <filter-mapping>
    <filter-name>gearManifestFilter</filter-name>
    <url-pattern>/manifest.json</url-pattern>
</filter-mapping>