--- title: Using PhoneGap Build With Vaadin TouchKit order: 15 layout: page --- [[using-phonegap-build-with-vaadin-touchkit]] Using PhoneGap Build with Vaadin TouchKit ----------------------------------------- [.underline]#*_Note:_* _Vaadin Touchkit has been discontinued. A community-supported version is available https://github.com/parttio/touchkit[on GitHub]._# At first, using https://build.phonegap.com/[PhoneGap Build] to point to your Vaadin TouchKit apps seems like a breeze. Just create a simple `config.xml` and an `index.html` that redirects to your web site, and you have an app! Unfortunately, simply doing this is not robust. Mobile devices lose connectivity, and when they do your app not only stops working, it may appear to freeze up and have to be killed and restarted to get working again. With the release of TouchKit v3.0.2 though, there is a solution! This article summarizes this solution, which was worked out over months of trial and error on http://dev.vaadin.com/ticket/13250[Vaadin ticket 13250]. ''''' First, server side you need TouchKit v3.0.2. (The needed enhancements and fixes should roll into _v4.0_ at some point, but as of _beta1_ it isn't there.) You also need to ensure that your VAADIN directory resources are being served up by a servlet extending `TouchKitServlet`. If you have a main application extending `VaadinServlet`, this needs to be changed to `TouchKitServlet`. ''''' When your PhoneGap app runs, it loads your provided `index.html` file into an embedded WebKit browser. Only this file has access to the PhoneGap Javascript library, so it handles things like offline-mode detection, and passes this via messages to the iframe containing your server-provided application. [source,html] ....
<?xml version="1.0" encoding="UTF-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!-- $Id$ -->
<testcase>
<info>
<p>
This test checks markers on broken tables.
</p>
</info>
<fo>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:svg="http://www.w3.org/2000/svg">
<fo:layout-master-set>
<fo:simple-page-master master-name="normal" page-width="5in" page-height="2in">
<fo:region-body margin="0.5in 0"/>
<fo:region-before extent="0.5in"/>
<fo:region-after extent="0.5in"/>
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="normal" white-space-collapse="true">
<fo:static-content flow-name="xsl-region-before">
<fo:block background-color="yellow">
<fo:retrieve-marker retrieve-class-name="test" retrieve-boundary="page" retrieve-position="first-including-carryover"/>
</fo:block>
<fo:block background-color="yellow">
<fo:retrieve-marker retrieve-class-name="test" retrieve-boundary="page" retrieve-position="first-starting-within-page"/>
</fo:block>
</fo:static-content>
<fo:static-content flow-name="xsl-region-after">
<fo:block text-align="end" background-color="yellow">
<fo:retrieve-marker retrieve-class-name="test" retrieve-boundary="page" retrieve-position="last-starting-within-page"/>
</fo:block>
<fo:block text-align="end" background-color="yellow">
<fo:retrieve-marker retrieve-class-name="test" retrieve-boundary="page" retrieve-position="last-ending-within-page"/>
</fo:block>
</fo:static-content>
<fo:flow flow-name="xsl-region-body">
<fo:table color="black" table-layout="fixed">
<fo:marker marker-class-name="test">table1</fo:marker>
<fo:table-column number-columns-repeated="2"/>
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block>blah</fo:block>
<fo:block>blah</fo:block>
<fo:block>blah</fo:block>
<fo:block>blah</fo:block>
</fo:table-cell>
<fo:table-cell>
<fo:block>blah</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row>
<fo:table-cell>
<fo:block>blah</fo:block>
</fo:table-cell>
<fo:table-cell>
<fo:block>blah</fo:block>
<fo:block>blah</fo:block>
<fo:block>blah</fo:block>
<fo:block>blah</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
<fo:table color="red" table-layout="fixed">
<fo:marker marker-class-name="test">table2</fo:marker>
<fo:table-column number-columns-repeated="2"/>
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block>blah</fo:block>
</fo:table-cell>
<fo:table-cell>
<fo:block>blah</fo:block>
<fo:block>blah</fo:block>
<fo:block>blah</fo:block>
<fo:block>blah</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row>
<fo:table-cell>
<fo:block>blah</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
<fo:table color="blue" table-layout="fixed">
<fo:marker marker-class-name="test">table3</fo:marker>
<fo:table-column number-columns-repeated="2"/>
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block>blah</fo:block>
</fo:table-cell>
<fo:table-cell>
<fo:block>blah</fo:block>
<fo:block>blah</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row>
<fo:table-cell column-number="2">
<fo:block>blah</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:flow>
</fo:page-sequence>
</fo:root>
</fo>
<checks>
<true xpath="starts-with(//pageViewport[@nr=1]//regionBefore/block[1],'table1')"/>
<true xpath="starts-with(//pageViewport[@nr=1]//regionBefore/block[2],'table1')"/>
<true xpath="starts-with(//pageViewport[@nr=1]//regionAfter/block[1],'table1')"/>
<true xpath="starts-with(//pageViewport[@nr=1]//regionAfter/block[2],'table1')"/>
<true xpath="starts-with(//pageViewport[@nr=2]//regionBefore/block[1],'table1')"/>
<true xpath="starts-with(//pageViewport[@nr=2]//regionBefore/block[2],'table2')"/>
<true xpath="starts-with(//pageViewport[@nr=2]//regionAfter/block[1],'table2')"/>
<true xpath="starts-with(//pageViewport[@nr=2]//regionAfter/block[2],'table1')"/>
<true xpath="starts-with(//pageViewport[@nr=3]//regionBefore/block[1],'table2')"/>
<true xpath="starts-with(//pageViewport[@nr=3]//regionBefore/block[2],'table3')"/>
<true xpath="starts-with(//pageViewport[@nr=3]//regionAfter/block[1],'table3')"/>
<true xpath="starts-with(//pageViewport[@nr=3]//regionAfter/block[2],'table2')"/>
<true xpath="starts-with(//pageViewport[@nr=4]//regionBefore/block[1],'table3')"/>
<true xpath="starts-with(//pageViewport[@nr=4]//regionBefore/block[2],'table3')"/>
<true xpath="starts-with(//pageViewport[@nr=4]//regionAfter/block[1],'table3')"/>
<true xpath="starts-with(//pageViewport[@nr=4]//regionAfter/block[2],'table3')"/>
</checks>
</testcase>