FW8 + Touchkit5 problem with widgetset and icons

I have upgrade my Touchkit project, the widgetset is set to local, compiled without error e deployed correctly, but the framework’s icons and application’s icons (VaadinIcons) doeasn’t appear.
In Attachment screenshot FW7+TK4 and FW8+TK5.
I don’t understand what I am missing.

Thanks to anyone

This is my xml widgetset file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.5.0/distro-source/core/src/gwt-module.dtd">
<module>
    <!-- This file is automatically updated based on new dependencies by the
        goal "vaadin:update-widgetset". -->

    <!-- Inherit DefaultWidgetSet -->

    

    <inherits name="org.vaadin.touchkit.gwt.TouchKitWidgetSet" />

    <inherits name="com.vaadin.DefaultWidgetSet" />

    <inherits name="com.vaadin.v7.Vaadin7WidgetSet" />
</module>

34105.jpg
34106.jpg

Looks like some font icon is not loading properly. Have you looked into the browsers debug features (inspect elements)? Does that give any hins?

cheers,
matti

The console report this errors:

?debug:1 Application Cache Error event: Resource fetch failed (404) http://localhost:8080/hotelMobile/VAADIN/themes/base/fonts/fontawesome-webfont.woff com.kosmosol.hotelmobile.pos.gwt.HotelPosWidgetSet-0.js:2858 GET http://localhost:8080/hotelMobile/VAADIN/themes/base/fonts/fontawesome-webfont.wof The ?debug window of vaadin reports alligned versions between client and server 8.0.7 and show the correct Widgetset: com.kosmosol.hotelmobile.pos.gwt.HotelPosWidgetSet

thanks
Cristian

That looks like the TouchKit’s theme is fetching the fontawesome icon set form the old base theme, which is no longer available. Adding this module to your app probably fixes the issue:

<dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-compatibility-themes</artifactId> </dependency> The project could change the font to be refer to a non-compatibility package. I created
an issue about this
to the github project.

cheers,
matti

Thanks Matti, now the touchkit icons are showed, but remain the problem with the VaadinIcons that I use in the application. I had included the dipendence into pom.xml

There are two errors message in the browser consol

Thanks Matti, now the touchkit icons are showed, but still remain the problem with the VaadinIcons that I use in the application.
I included the dipendence into pom.xml

<dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-icons</artifactId> <version>3.0.1</version> </dependency> In java class I import this: import com.vaadin.icons.VaadinIcons; There are two errors message in the browser console:

[code]
com.kosmosol.hotelmobile.pos.gwt.HotelPosWidgetSet-0.js:7716 Wed Jul 26 14:08:24 GMT+200 2017 com.vaadin.client.VConsole SEVERE: Placeholder navigation…

com.kosmosol.hotelmobile.pos.gwt.HotelPosWidgetSet-0.js:7716 Wed Jul 26 14:08:24 GMT+200 2017 com.vaadin.client.VConsole SEVERE: Widget is still attached to the DOM after the connector (NavigationViewConnector (26)) has been unregistered. Widget was removed.
[/code]what else I must do?

Cristian
34113.jpg

I guess the VaadinIcons font-icon is declared in Valo theme, so it would also need to be in the TouchKit’s GWT based theme like FontAwesome is. If you can find similar icons from FontAwesome it probably works ATM.

This and the theme Java file should be updated for VaadinIcons to work in TouchKit:
https://github.com/parttio/touchkit/blob/master/touchkit/src/main/java/org/vaadin/touchkit/gwt/client/theme/touchkit.css

cheers,
matti

Matti, very thanks, I have replaced the VaadinIcons with FontAwesome, that’s fine.

Cristian