2014-09-04 24 views
7

Jak mogę zmienić favicon moich stron w Vaadin? Chciałbym zmienić favicon moich stron, ale nie mam pojęcia, gdzie jest miejsce, aby to zmienić? Czy ktoś ma na ten temat doświadczenie?Vaadin: Jak zmienić favicon?

Odpowiedz

9

Najpierw utwórz katalog tematyczny:/WebContent/Vaadin/themes/mynewtheme

Następnie umieścić swój własny favicon.ico w tym katalogu. Należy również ustawić właściwość rozrywki w aplikacji:

public class MyNewApplication extends Application { 

    @Override 
    public void init() { 
     ... 
     ... 
     setTheme("mynewtheme"); 
    } 
} 
+1

Vaadin 7: @Theme ("mynewtheme") public class MyUI rozciąga UI {... – Krayo

+0

Jeśli nazywam ikona ** custom.ico ** zamiast ** favicon .ico **, czy to będzie praca? – Cataclysm

+2

Bardzo dziwne ... Mam adnotację @Theme ("mytheme") nad moją klasą UI, ale muszę zadzwonić setTheme ("mytheme") RAZ, aby zmienić favicon ... – shinchillahh

4

W przypadku nazwy niestandardowych ikon (Vaadin 7):

public class MyServlet extends VaadinServlet implements SessionInitListener { 

    @Override 
    protected void servletInitialized() throws ServletException { 
     super.servletInitialized(); 
     getService().addSessionInitListener(this); 
    } 

    @Override 
    public void sessionInit(SessionInitEvent event) throws ServiceException { 
     event.getSession().addBootstrapListener(new BootstrapListener() { 

      @Override 
      public void modifyBootstrapPage(BootstrapPageResponse response) { 
       response.getDocument().head() 
        .getElementsByAttributeValue("rel", "shortcut icon") 
        .attr("href", "./VAADIN/themes/mynewtheme/custom.ico"); 
       response.getDocument().head() 
        .getElementsByAttributeValue("rel", "icon") 
        .attr("href", "./VAADIN/themes/mynewtheme/custom.ico"); 
      } 

      @Override 
      public void modifyBootstrapFragment(BootstrapFragmentResponse response) { 
      } 

     }); 
    } 

} 

EDIT

Lepiej jest używać BootstrapListener jako statyczna klasa zagnieżdżona: link

+0

Doceniam tę odpowiedź, ALE: Zastosowałem to do mojego projektu z '.../favicon.png"). attr ("type", "image/png"); 'i nic nie jest wyświetlane jako favicon w zakładce mojej przeglądarki.Jeśli wyłączam/komentuję nowo wprowadzony nawet nie Domyślnie favicony Vaadina są wyświetlane dłużej. (V7.5.0.rc1) –

+0

To zabawne, właśnie odkryłem, że właściwy favicon jest wyświetlany w Historii FF. To po prostu/wciąż nie jest wyświetlane w zakładce strony –

+1

@GeroldBroser Najnowsze wersje Przeglądarki internetowe zmieniają sposób korzystania z Ulubionych Niektóre przeglądarki wyświetlają ikonę w zakładce, niektóre nie, Niektóre wyświetlają się na pasku adresu URL, inne nie, Niektóre wyświetlają się w menu zakładek, inne nie. –

6

Oto bardziej szczegółowa wersja similar Answer opublikowany przez Grega Ballota. Moja odpowiedź tutaj odnosi się do Vaadin 7, aktualny od 7.5.3.

motyw niestandardowy

W Vaadin 7.5, można upuścić plik obrazu graficznego favicon do your own custom theme. Jeśli używasz wtyczki Vaadin dla różnych IDEs (NetBeans, Eclipse) lub Maven archetypes, niestandardowa kompozycja o nazwie mytheme powinna już być dla Ciebie stworzona. Upuść plik obrazu do tego folderu mytheme.

Główna część aplikacji Vaadin 7, podklasa użytkownika UI, musi określać, że używa niestandardowego motywu. Ponownie, jeśli używasz wtyczek IDE i/lub archetypu Mavena, powinno to już być skonfigurowane. Najprostszym sposobem jest Adnotacja Java w podklasie UI.

@Theme ("mytheme") // Tell Vaadin to apply your custom theme, usually a subclass of the Valo or Reindeer theme. 
@Title ("PowerWrangler") // Statically specify the title to appear in web browser window/tab. 
@SuppressWarnings ("serial") // If not serializing such as "sticky sessions" and such, disable compiler warnings about serialization. 
@Push (PushMode.AUTOMATIC) // If using Push technology. 
public class MyVaadinUI extends UI 
{ 
… 

Favicon Wykorzystanie/zachowanie nie standardowa

pamiętać, że zachowanie favicon nie jest znormalizowana. Favicons rozwijał się chaotycznie, głównie z poczucia zabawy. Dokładne zachowanie zależy od konkretnej przeglądarki i konkretnego serwera. Poza konkretną lokalizacją folderu, żadna z nich nie jest wyjątkowa dla Vaadin.

formatów plików graficznych

Oryginalnie ICO file format użyto wyłącznie. Od tego czasu większość przeglądarek ewoluowały przyjąć dowolny z kilku formatów w tym JPEG, TIFF i PNG.

Wielkość obrazu/Rozdzielczość

Pierwotnie Ikony zakładek miały być bardzo małe ikony rastrowe. Niektóre przeglądarki korzystały z różnych funkcji favicon w sytuacjach, w których możesz chcieć dostarczyć obraz o wyższej rozdzielczości. Pamiętaj jednak, że mniejsze pliki ładują się szybciej bez oczekiwania użytkowników.

Favicon Nazwa pliku

Niektóre przeglądarki lub serwery mogą obsługiwać inne nazwy plików lub rozszerzenia nazw, ale znalazłem to najłatwiej wymienić mój plik dokładnie favicon.ico - nawet jeśli przy użyciu innego formatu!Zwykle używam pliku PNG, ale nazywam go rozszerzeniem .ico. Chociaż nie mogę zagwarantować, że ta praktyka działa na każdym serwerze i przeglądarce, nie napotkałem żadnego problemu.

Istniejące favicon plikowi

Najnowsze wersje Vaadin włączyły się ikona związane Vaadin-w pliku favicon.ico w skonfigurowanym projektu. Musisz więc zastąpić ten plik swoim własnym. W Vaadin 7.5.3 plik zawiera cztery rozmiary, największa wyglądające tak:

Vaadin logo favicon provided by default in a configured project

Starsze wersje nie dodać plik, więc spadek własną rękę.

Zrzuty ekranu IDE

Oto para zrzutów ekranu. Jednym z nich jest projekt (logiczny) widok w NetBeans 8, podczas gdy drugi jest widokiem plików (fizycznych).

Project view of a favicon’s location, using NetBeans 8

File system view of a favicon’s location, using NetBeans 8