I'm trying to load .html, .js, .css files from device's local file system into React Native WebView component. I was able to get the path to the index.html file but specifying this as the url for the WebView simply throws an error. How would I go about this? Please help!
In react native it is now possible to require an HTML file and use it as the source for the web view like this (the path is relative to the react-native file you use it in):
const webapp = require('./webapp/index.html');
and the use it in the WebView like this:
<WebView source={webapp} />
Unfortunately this does not load CSS and JavaScript files, that are referenced in the HTML. A solution could be, to write all the CSS and JS inline (e.g. by using a build process).
I was able to include html5/javascript into project by using { html: , baseUrl: } as source.
But to be frank, it's more like a lucky shot.
<WebView source={{ html: HTML, baseUrl: 'web/' }} />
I have index.html, which require pano2vr_player.js and pano.xml to make this code work.
const HTML = `
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />
<style type="text/css" title="Default">
body, div, h1, h2, h3, span, p {
font-family: Verdana,Arial,Helvetica,sans-serif;
}
</style>
</head>
<body>
<script type="text/javascript" src="pano2vr_player.js">
</script>
<div id="container" style="width:100%;height:100%;">
<br>Loading...<br><br>
This content requires HTML5 with CSS3 3D Transforms or WebGL.
</div>
<script type="text/javascript">
// create the panorama player with the container
pano=new pano2vrPlayer("container");
window.addEventListener("load", function() {
pano.readConfigUrlAsync("pano.xml");
});
</script>
</body>
</html>`;
class PanoView extends Component {
render() {
return (
<View>
<WebView
style={{ flex: 1, width: 1024, height: 768 }}
source={{ html: HTML, baseUrl: 'web/' }}
javaScriptEnabledAndroid={true} />
</View>
);
}
}
And finally add files/folder ('/web' same as baseUrl) to XCode project
And it works! But I'm not sure how...
I stumbled upon the same issue and, after running in circles for hours trying all sorts of solutions, I finally solved it by following this tutorial. Major kudos to the author.
In the article there's some extra info which is a bit outdated, so here's the concise version instead:
create a folder in your main project root (e.g. /html);
put all of your files in a folder (e.g. Web, with index.html being your WebView entrypoint), give it a .bundle extension (e.g. Web.bundle), and place it into /html;
Now you have to add these files to the project so they are recognized and bundled together in your next build, this process is done differently in iOS and Android:
iOS: open your project in Xcode, drag n drop Web.bundle into the project's main folder, and confirm the dialog with the "Copy items if needed" option left unchecked;
Android: open /android/app/build.gradle and add:
android {
...
sourceSets {
main { assets.srcDirs = ['src/main/assets', '../../html'] }
}
}
Now rebuild your project from scratch to have your changes take effect.
In your WebView file, calculate the path to index.html and feed it to the WebView:
const sourceUri = (Platform.OS === 'android' ? 'file:///android_asset/' : '')
+ 'Web.bundle/index.html';
return (
<WebView
source={{ uri: sourceUri }}
originWhitelist={['*']}
javaScriptEnabled={true}
allowFileAccess={true}
/>
);
This will load your index.html and all of its js and css files, as long as they're included in the bundle.
You may have to wrap your own Native Module to do this. React Native's WebView uses UIWebView, for info on loading a local file take a look here: https://gist.github.com/amster/9160860
However it is recommended you use WKWebView, you can wrap one yourself relatively easily. There is currently a repo that is WIP: https://github.com/qrush/react-native-wkwebview
Accomplishing loading local resources using WKWebView can be found in this answer: https://stackoverflow.com/a/28676439/398136
Place this script in any file of ReactNative or your code, recomended to first or top index file.
And it will fix problem, tested on RN0.39
import { Platform } from 'react-native';
import { setCustomSourceTransformer } from 'react-native/Libraries/Image/resolveAssetSource';
setCustomSourceTransformer(function (resolver) {
if (Platform.OS === 'android'
&& !resolver.serverUrl
&& !resolver.bundlePath
&& resolver.asset.type === 'html') {
resolver.bundlePath = '/android_asset/';
}
return resolver.defaultAsset();
});
Related
I'm a newbie to reactjs and trying to test a very basic component, however it seems all my struggle is futile because its not showing up in the browser.
I'm using asp.net MVC 5 app and I've been following along this tutorial https://reactjs.net/getting-started/tutorial_aspnet4.html as the tutorial states you need to add React.Web.Mvc4 Nuget package which have some dependencies.
My simple React component (SimpleComponent.jsx)
var ComponentBox = React.createClass({
render: function() {
return (<div style="background-color:antiquewhite">Hello World ReactJs Component!</div>);
}
});
ReactDOM.render(
<ComponentBox />,
document.getElementById('reactDiv')
);
and my razor view is pretty simple
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
</head>
<body>
<div id="reactDiv"></div>
<script src="#Url.Content("~/Scripts/SimpleComponent.jsx")"></script>
</body>
</html>
Did I miss something?
The Solution for my problem was to replace the style element in my jsx file as following
var ComponentBox = React.createClass({
render: function () {
return (<div style={{background:'antiquewhite'}}>Hello World ReactJs Component!</div>);
}
});
Based on react docs "using the style attribute as the primary means of styling elements is generally not recommended"
by using javascript object to store the style as properties and I hope this'll help someone.
I am working on an app for both android and iOS that will be opening external links. I am currently using cordova-plugin-inappbrowser 1.0.1 to open my links and it is working perfectly in Android, but I seem to be running into the same problem that many other people have. In iOS, I do not get a toolbar to appear and thus am stuck as I cannot click on the "done" button (or back/forward buttons for that matter.) I have built the app using both phonegap build online and through the command line tools, with the same behavior in each instance. It does not work in either an emulated environment or a native device environment. I have been searching online and this seems to be an extremely common problem, but none of the proposed solutions have worked over the past 2 days and ~15 hours of testing (for just a stupid little link!) I would like to remain in-app, but would not be opposed to going to safari if that is the only solution. My relevant code and versions:
Phonegap cli-5.1.1 (iOS 3.8/Android 4.02)
Cordova 3.5.0-0.2.7
cordova-plugin-inappbrowser 1.0.1
config.xml relevent code:
<plugins>
<plugin name="InAppBrowser" value="CDVInAppBrowser" />
</plugins>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
index.html:
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Global InAppBrowser reference
var iabRef = null;
function iabLoadStart(event) {
alert(event.type + ' - ' + event.url);
}
function iabLoadStop(event) {
alert(event.type + ' - ' + event.url);
}
function iabClose(event) {
alert(event.type);
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('exit', iabClose);
}
// Cordova is ready
//
function onDeviceReady() {
alert('Device is ready!');
//iabRef = window.open('http://apache.org', '_blank', 'location=yes');
//iabRef.addEventListener('loadstart', iabLoadStart);
//iabRef.addEventListener('loadstop', iabLoadStop);
//iabRef.addEventListener('exit', iabClose);
}
</script>
<style type="text/css">
.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
body
{
background: #000 !important;
background-image:url(backgrounds/1080widephone.png) !important;
background-size:cover !important;
}
.ui-content{
background: transparent !important;
}
.ui-page{
background: transparent !important;
}
.ui-footer{
background: transparent !important;
}
</style>
</head>
Various links (all act as buttons):
window.open('url' ,'_blank')
(NOTE: This appears to open in the default WebView for iOS and the inappbrowser for Android)
cordova.InAppBrowser.open('url' ,'_blank', 'location=yes' , 'toolbar=yes', 'toolbarposition=top' , closebuttoncaption=Return'
(NOTE: Nothing happens when I use this in either iOS or Android builds. I based this syntax off of the description)
My kneejerk reaction is that the plugin isn't loading, but I don't see how that can be the case if it is clearly working in an android build but not an iOS build using exactly the same code on phonegap build. Any help would be greatly appreciated, I feel like I'm running around in circles here!
I know this is a late response but I’ve found one possible solution.
In my case, I was using ngCordova’s $InAppBrowser within the Ionic framework to open a file or url. To test this, I was using Xcode’s iPhone simulator as well as Ionic’s “Ionic View” app. Within both of these options, $InAppBrowser will NOT show a “Back” or “Done” button.
However, if you open your project’s .xcodeproj in Xcode and run your application on an actual iOS device, the InAppBrowser should work as expected.
I spent hours on this issue only to discover Ionic View restricts the options of $InAppBrowser. However, I’m still not 100% sure as to why this doesn’t work in the iOS emulator.
Note: I believe all of this applies even if you’re directly using Cordova and not ngCordova.
The values for the options string in
cordova.InAppBrowser.open
needs to be a single string of name=value pairs separated by ,
So try:
cordova.InAppBrowser.open('url' ,'_blank', 'location=yes,toolbar=yes,toolbarposition=top,closebuttoncaption=Return');
Additionally you should make sure your application's links open with the IAB by hijacking them and opening them in the IAB and suppressing the default event... for example with JQuery to hijack all the links in a div with id "infoExternalContent" and open them in the IAB with some options set for iOS only (using Cordova device platform to detect platform):
$('#infoExternalContent').find('a').each(
function() {
var href = $(this).attr('href');
var iabOptions = (device.platform === 'iOS' ? 'location=no,enableViewportScale=yes,transitionstyle=fliphorizontal' : '');
if (href.indexOf('http') === 0) {
$(this).click(function(e) {
e.preventDefault();
cordova.InAppBrowser.open(''.concat(this.href), '_blank', iabOptions);
});
}
}
);
I don't use phonegap build, but I can't imagine that it wants all of this loaded ...
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
cordova.js is loaded twice, along with phonegap.js. Just sayin'
If you uncomment
iabRef = window.open('http://apache.org', '_blank', 'location=yes');
What happens?
I would also try
cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
If neither of those open a window to apache, I would readd the plugin.
edit: This questions is solved
Stupidly enough, the url /img/images.json is treated differently by the simpleHttpServer used to test the application than by the iOS simulator.
It was a long search why it would show the list in the browser when testing but not in the simulator. Apparently the simpleHttpServer that comes with python will treat a url starting with the / as it's root, for example the www folder. The simulator does not and would appreciate a relative location, starting with no /
The problem seems mostly caused by the rustiness of my web-dev skills ^.^
====================
I am trying to make a simple ionic app, and for some input I am using the Angular Tutorial.
I have a very simple page that should load the contents of a json-file with image data. And all it needs to do for now is showing the image names. At the end it should dump the complete data from the json-file.
This is all based of the blank project created with ionic.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="phocalsApp">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="imageListCtl">
<ul class="imagelist">
<li ng-repeat="image in imagelist" >
{{image.imgName}}
</li>
</ul>
{{imagelist | json}}
</ion-content>
</ion-pane>
</body>
</html>
app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('phocalsApp', ['ionic', 'phocalsControllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controller.js
'use strict';
var phocalsControllers = angular.module('phocalsControllers', []);
phocalsControllers.controller('imageListCtl', ['$scope', '$http',
function($scope, $http) {
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
});
$scope.orderProp = 'imgDate';
}]);
images.json:
[
{
"imgUrl":"",
"imgName":"Nieuwste Foto",
"imgDate":20140525
},
{
"imgUrl":"",
"imgName":"tweede Foto",
"imgDate":20140524
},
{
"imgUrl":"",
"imgName":"derde Foto",
"imgDate":20140523
}
]
Seeing as I pretty much use the same code as the angular example, I would expect this to work, unfortunately all the output I am getting when running in the ios Simulator is an empty page with the header-bar. No errors or nothing. Can anyone tell me what I am doing wrong here?
You are missing some console.log(data) in your controller to check whether the controller is initialized, wether $http actually succeeds etc.
Even after using angular for months, i have to log every step cause there are too many things to go wrong :)
Also you should add an error function to
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
}).error(function(data) ....;
when I tried to run even a blank app, the console output is:
"Error calling js to fire nativeReady event. Did you include cordova.js in your html script tag?"
Doctype is:
<!DOCTYPE html>
And this are script references:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/angular.min.js'></script>
<script type='text/javascript' src='js/angular-ui.js'></script>
<script type='text/javascript' src='js/jqm-setup.js'></script>
<script type="text/javascript" src="js/jquery.mobile.js"></script>
<script type="text/javascript" src="js/jquery-mobile-angular-adapter.min.js"></script>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>-->
This error disappears only when I remove the jquery mobile stuff...
Thanks in advance.
I would avoid JQuery Mobile in PhoneGap applications. I got to meet Andrew Trice, Adobe PhoneGap Evangelist, at a DC Droid Meet and listened to him present in a few Webinars. I've heard him say more than once that JQuery Mobile has huge performance issues. He recommended using other frameworks if possible. There are many other frameworks out there with good design, widgets, and samples that make them easy to learn. I think he even created his own called AppUI. Just look around and you'll find some really cool ones.
That error is definitely what it says: your cordova.js file is not being included correctly. Fix that first.
To answer your larger question: Angular, jQuery Mobile, and PhoneGap will play together but it comes with some big caveats.
The biggest issue is that the jQuery Angular Mobile adapter is currently abandoned while they invest time in building a better solution: angular-jqm. That means that the adapter only works with outdated versions of the libraries.
Second: those outdated library versions have some issues working with Windows Phone. These are fixable, too, but lock you into an even less maintainable version of them.
So here is the setup:
<script src="javascripts/vendor/jquery-mobile-1.3.1.js"></script>
<!-- this angular-1.0.6 includes a patch to support WP8 URLs: https://github.com/angular/angular.js/issues/2303 -->
<script src="javascripts/vendor/angular-1.0.6.js"></script>
<script src="javascripts/vendor/jquery-angular-mobile-adapter-1.3.2.js"></script>
Unfortunately I was never able to get partials to load via XHR so I included all pages in index.html document.
<body ng-controller="AppController">
<div data-role="page" id="first" ng-controller="FirstController">
<h1>First Page</h1>
<p>{{foo}}</p>
<p>Second Page</p>
</div>
<div data-role="page" id="second" ng-controller="SecondController">
<h2>Second Page</h2>
</div>
</body>
Then you need to switch off a few niceties in the JavaScript and set up your routes:
<script>
var so_example = angular.module('so_example', []).
config(function ($routeProvider, $locationProvider, $compileProvider) {
// turn off html5 mode so that we just navigate around using hashes
$locationProvider.html5Mode(false).hashPrefix("");
// allow for the odd URLs included in Windows Mobile PhoneGap
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|x-wmapp0):/);
$routeProvider.
when('/second', {
templateUrl: '#second',
jqmOptions: { transition: 'slide' }
}).
when('/', {
templateUrl: "#first"
});
}).
controller("FirstController", function ($scope) {
$scope.foo = "Hello, World!";
}).
controller("SecondController", function ($scope) {
});
</script>
Now you need to leverage the Cordova library before you bootstrap Angular to your HTML:
var app = (function () {
function onDeviceReady() {
angular.bootstrap(document, ['so_example']);
$.mobile.phonegapNavigationEnabled = true;
}
return {
initialize: function() {
document.addEventListener('deviceready', onDeviceReady, false);
}
};
})();
app.initialize();
I've been developing on 6.7.2 for quite some time and yesterday I noticed the weird looking version of my application. I went to the debug version and found this:
Starting Vaadin client side engine. Widgetset: Xinco
Widget set is built on version: 6.7.2
Warning: widgetset version 6.7.2 does not seem to match theme version
Starting application xincovaadin-1652339780
Vaadin application servlet version: 6.7.2
Application version: NONVERSIONED
inserting load indicator
Making UIDL Request with params: init
Server visit took 30ms
JSON parsing took 0ms
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
How can I fix this? I tried rebuilding my widgets without luck. Line 11 above repeats lots of times.
See: https://vaadin.com/forum/-/message_boards/view_message/953384
Edit:
From Firebug:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style type="text/css">
<link href="/xinco/VAADIN/themes/xinco/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
<link href="/xinco/VAADIN/themes/xinco/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
<title>Xinco</title>
<link rel="stylesheet" type="text/css" href="/xinco/VAADIN/themes/xinco/styles.css">
<link rel="stylesheet" href="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/easyuploads.css">
<link rel="stylesheet" href="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/expandingtextarea/expandingtextarea.css">
<link rel="stylesheet" href="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/stepper/stepper.css">
</head>
<body class="v-generated-body v-ff v-ff8 v-ff80 v-gecko v-win" scroll="auto">
<script type="text/javascript">
<iframe id="__gwt_historyFrame" src="javascript:false" style="position:absolute;width:0;height:0;border:0;overflow:hidden;" tabindex="-1">
<script src="/xinco/VAADIN/widgetsets/Xinco/Xinco.nocache.js?1323124855776" language="javascript">
<script src="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/swfupload.js" language="javascript">
<script defer="defer">
<script type="text/javascript">
<script type="text/javascript">
<div id="xincovaadin-1652339780" class="v-app v-theme-xinco v-app-Xinco">
<noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript>
<iframe id="Xinco" src="javascript:''" style="position: absolute; width: 0pt; height: 0pt; border: medium none;" tabindex="-1">
</body>
</html>
This is what I see when looking at the page source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">html, body {height:100%;margin:0;}</style><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/xinco/VAADIN/themes/xinco/favicon.ico" /><link rel="icon" type="image/vnd.microsoft.icon" href="/xinco/VAADIN/themes/xinco/favicon.ico" /><title>Xinco</title>
</head>
<body scroll="auto" class="v-generated-body">
<script type="text/javascript">
//<![CDATA[
if(!vaadin || !vaadin.vaadinConfigurations) {
if(!vaadin) { var vaadin = {}}
vaadin.vaadinConfigurations = {};
if (!vaadin.themesLoaded) { vaadin.themesLoaded = {}; }
vaadin.debug = true;
document.write('<iframe tabIndex="-1" id="__gwt_historyFrame" style="position:absolute;width:0;height:0;border:0;overflow:hidden;" src="javascript:false"></iframe>');
document.write("<script language='javascript' src='/xinco/VAADIN/widgetsets/Xinco/Xinco.nocache.js?1323183529006'><\/script>");
}
vaadin.vaadinConfigurations["xincovaadin-1652339780"] = {appUri:'/xinco/vaadin', standalone: true, themeUri:"/xinco/VAADIN/themes/xinco", versionInfo : {vaadinVersion:"6.7.2",applicationVersion:"NONVERSIONED"},"comErrMsg": {"caption":"Communication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null},"authErrMsg": {"caption":"Authentication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null}};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
if(!vaadin.themesLoaded['xinco']) {
var stylesheet = document.createElement('link');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('type', 'text/css');
stylesheet.setAttribute('href', '/xinco/VAADIN/themes/xinco/styles.css');
document.getElementsByTagName('head')[0].appendChild(stylesheet);
vaadin.themesLoaded['xinco'] = true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
setTimeout('if (typeof Xinco == "undefined") {alert("Failed to load the widgetset: /xinco/VAADIN/widgetsets/Xinco/Xinco.nocache.js?1323183529006")};',15000);
//]]>
</script>
<div id="xincovaadin-1652339780" class="v-app v-theme-xinco v-app-Xinco" ><div class="v-app-loading"></div></div>
<noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript></body>
</html>
The source code can be downloaded from here. The project is a NetBeans project.
Which theme are you using? Assuming that it's a custom theme, will the error messages disappear if you use the default theme?
Also make sure that:
You have cleaned your project and application server, and rebuilt the project
You don't have two different versions of the Vaadin JAR in your WEB-INF/lib directory
You haven't copied a theme directory from an older Vaadin JAR to your VAADIN/themes directory
Your (assumed) custom theme isn't inheriting any old theme
If you check the loaded css files in your browser (Firebug came in handy when I tried this), styles.css (or one of the styles.css') includes the following beginning part:
.v-theme-version:after {
content: "6_7_2";
}
.v-theme-version-6_7_2 {
display: none;
}
The only way I managed to produce this error was to inherit a custom theme from another Vaadin version's theme.
Update:
I checked your project and I think I know what's wrong. The servlet-mapping in web.xml should read /VAADIN/* instead of /vaadin/*. It should work without this change if you copy the themes from your vaadin.jar to VAADIN/themes in your project. Normally you should also copy the Vaadin widgetsets, but since you are using a custom widgetset, you don't have to do this.
Source: https://vaadin.com/book/-/page/application.environment.html#section.web.web-xml
Have you extracted the VAADIN/themes folder from vaadin.jar so that it is served statically? In that case, you need to update that directory with the contents from Vaadin 6.7.2.
Alternatively, have you created a folder under VAADIN/themes that has the same name as the Vaadin theme that you are using?