PhoneGap and Vaadin Touchkit Integration

General
1

Hi All,

I am trying to use touchkit with Phone gap . My first aim is to use static files ( generated js files, images etc.) from client side (assets/www folder). Since files cached through cache.manifest file, has size limitation (as far as I know)

To achieve this,

  1. I copied the generated VAADIN folder under the assets/www folder.
  2. I copied the generated html code (before repaintAll is called from serverver side) to the index.html file under the same folder(assets/www).
  3. I edited the appUri value inside index.html to the server url like below:
vaadin.vaadinConfigurations["ROOT-2521314"]
 = {[b]
[color=#fa2c2c]
appUri:'http://192.168.1.26:8091'
[/color]
[/b], standalone: true,..

with this configuration,

  • index.html is being loaded by phone gap
  • xxx.cache.html is being loaded by phone gap
  • deferred xxx.cache.js files are also loaded …
  • application is initialized at server side,
  • and response of repaintAll request is being sent to the client from server.

However, There is nothing on the simulator screen. :blink:

I am using
android simulator with Android 2.2
touchkit agpl 2.0.0
vaadin 6.7.1

Anyone succeeded integrating touchkit with phone gap? Or any ideas?

thanks in advance,
Alper.

2

Hi,

I’d guess the embedded browser won’t accept the cookie from the server. One easy option is to whitelist the server and just redirect to the server on the index.html. Check out my
blog post about the topic
.

If you wish to store static files in “phone gap packages” I think the easiest method would be to use
Vaadin XS
 based solution. It will over come the cookie issue. The svn version of the add-on (which I suggest to use as the release is quite old) sends session id in UIDL requests so it will work totally without cookies support.

cheers,
matti

3

Hi Matti,

Thank you for your response. After my post I dig into the problem that I faced. When I explicitly define the height of the main window content in pixels. Every thing (more or less) working fine. I am not sure but I think there is a problem updating the height of the window with the browsers height and width at serverside… (that’s happening onBrowserready function at TouchkitApplication class) , setting the height of the window content explicitly is a workaround, If you have any idea on this, I would appreciate…

For static resources especially images, I am using the ExternalResource class. by using this class resources are retrieved from assets/www folder .
Also I dont face any problem with cookie issue , well i mean, I have an sessionid at serverside…

Some layout problems that i see are,

  • Table is not rendering correctly, no column header names and sort images…
  • Button texts are not centered, but left aligned…
    Any ideas why layouting fails?

Another simple integration, can be just setting the app url in the Activity class onCreate method, and also set loadUrlTimeoutValue property to some higher value 60000 for example in order not to get a timeout error before loading the app…

[code]
public class HelloPhoneGapActivity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setIntegerProperty(“loadUrlTimeoutValue”,
60000
);


super.loadUrl(“http://192.168.1.20:8091”);

}

}

[/code]kinds,
Alper.

4

Hi,

Maybe the base theme isn’t loaded properly? That might cause pretty much all the issues you are describing. TouchKits own theme is bundled in the GWT module, but it expects that the base theme added to the host page as well.

On Android you probably are safe with cookie issue. It is only Apple and Microsoft that are by default blocking “third party cookies”. It is kind of Googles interest to be able to track everybody’s actions in the web :wink:

Keep us informed how it works!

__
cheers,
matti

5

Hi,

You are absolutely right. It worked like a charm :slight_smile: Now For android case my application behaves as expected. Ive attached screenshots where you can see the table and button layouting are fine.
For the Cookie issue, I will check the Vaadin cross domain plugin and will share the outcomes in this forum…
And the next step will be gwt-phonegap vaadin integration for accessing device resources… Any experience on this?

kinds,
Alper
12340.png
12341.png
12342.png
12343.png

6

Hi Alper,

I read your thread and it looks very interesting, could give me any source of your integration of vaadin and phonegap.

Best regards

7

Hi,

I have developed phonegap camera addon, it may be usefull for you .

https://vaadin.com/directory#addon/phonegap-camera

8

Hello,

I’m starting with vaadin and phonegap, before that, I would have helped me to understand the functioning of the integration of the two frameworks.

Could help me with a basic example of integration between the two frameworks?

Type: I have a project done in vaadin, and would apply the same in phonegap. I wonder simply and clearly, the steps to perform the integration.

It is the phonegap vaadin going on, or is it the opposite?

Thank you in advance for your help.

9

Hi Sergio,

Did you get any idea of working with vaadin and phonegap. I am searching for months but still dont know how to achieve this still cant find proper way to integrate. Please give some pointers to get right way.

Thanks.