Fixed positioning with WebApp.net

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

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