2014-09-04 2 views
7

Vaadin에서 내 페이지의 favicon을 어떻게 바꿀 수 있습니까? 내 페이지의 favicon을 변경하고 싶지만 어디에서 변경해야하는지 모릅니다. 누군가 그것을 경험 한 적이 있습니까? 그런 다음 Vaadin : favicon을 변경하는 방법?

/의 WebContent/만약 angel/테마/mynewtheme

을이 디렉토리에 사용자 정의의 favicon.ico를 넣어 :

답변

9

첫째, 테마 디렉토리를 생성합니다. 또한 응용 프로그램에서 테마 속성을 설정해야합니다

사용자 정의 아이콘 이름의 경우
public class MyNewApplication extends Application { 

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

angel이라는 7 : 내 아이콘 이름은 ** custom.ico 인 경우 @theme는 ("mynewtheme") 공용 클래스 MyUI 대신 ** 파비콘의 ** UI {... – Krayo

+0

를 확장 .ico **, 일할 수 있을까요? – Cataclysm

+2

아주 이상한 ... 내 UI 클래스에 @Theme ("mytheme") 주석이 있지만 favicon을 변경하려면 setTheme ("mytheme")을 호출해야합니다. – shinchillahh

4

(angel이라는 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) { 
      } 

     }); 
    } 

} 

편집

BootstrapListener를 사용하는 것이 좋습니다 정적 중첩 클래스 : link

+0

이 답변을 주셔서 감사합니다. 그러나 이것을 적용했습니다. 내 프로젝트에'.../favicon.png "). attr ("type ","image/png ");'그리고 브라우저의 탭에 아무것도 보이지 않는다. Vaadin의 기본 favicon이 더 이상 표시됩니다. (v7.5.0.rc1) –

+0

재미 있습니다 .ff의 기록에 올바른 favicon이 표시되었음을 발견했습니다. 페이지의 탭에는 표시되지 않습니다. –

+1

@GeroldBroser 최근 버전 일부 브라우저는 favicon을 탭에 표시하지만 일부는 URL 주소 표시 줄에 표시하고 일부는 표시하지 않습니다. 일부는 책갈피 메뉴에 표시되지만 일부는 표시하지 않습니다. –

6

다음은의 더 자세한 버전입니다.210 그렉 투표 용지. 내 답변은 Vaadin 7과 관련이 있으며, 현재 7.5.3입니다.

Vaadin 7.5에서

사용자 정의 테마, 당신은 your own custom theme로 파비콘 그래픽 이미지 파일을 삭제할 수 있습니다. 다양한 IDEs (NetBeans, Eclipse) 또는 Maven archetypes에 Vaadin 플러그인을 사용하는 경우 mytheme이라는 사용자 지정 테마가 이미 만들어져 있어야합니다. 이미지 파일을 해당 mytheme 폴더에 저장하십시오.

Vaadin 7 앱의 주요 부분 인 서브 클래스 UI에 맞춤 테마를 사용하도록 지정해야합니다. IDE 플러그인 및/또는 Maven 아키타 입을 사용하는 경우,이 설정은 이미 구성되어 있어야합니다. 가장 쉬운 방법은 UI 하위 클래스의 Java Annotation입니다.

@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 
{ 
… 

파비콘 사용/행동 표준은

그 파비콘 동작은 표준화되지 않은 기억하지. 파비콘은 우연히 발달했는데, 대부분 재미있게 보였습니다. 정확한 동작은 특정 브라우저 및 특정 서버에 따라 다릅니다. 특정 폴더 위치 이외에는이 중 아무 것도 Vaadin에게 특별하지 않습니다.

이미지 파일 형식 원래 ICO file format 독점적으로 사용

. 그 이후 대부분의 브라우저는 JPEG, TIFFPNG을 비롯한 여러 형식 중 하나를 채택하도록 진화했습니다.

이미지 크기/해상도

는 원래 파비콘은 매우 작은 비트 맵 아이콘 의도되었다. 일부 브라우저는 더 높은 해상도의 이미지를 제공하려는 상황에서 파비콘을 다양하게 사용합니다. 그러나 작은 파일은 사용자를 기다리지 않고 더 빨리로드됩니다.

파비콘 파일 이름

일부 브라우저 나 서버가 다른 파일 이름이나 확장명을 처리 할 수 ​​있지만, 내 파일을 이름으로 쉬운을 발견했습니다 정확히 favicon.ico - 심지어 다른 형식을 사용하는 경우!보통 PNG 파일을 사용하지만 .ico 확장자로 이름을 지정합니다. 이 방법이 모든 서버와 브라우저에서 작동한다는 것을 보장 할 수는 없지만 문제가 발생하지는 않았습니다. 만약 angel의

파비콘 파일을 기존

최신 버전의 구성된 프로젝트에서의 favicon.ico 파일에 만약 angel 관련 아이콘을 포함했다. 그래서 당신은 그 파일을 자신의 파일로 대체해야합니다. 당신이 당신의 자신의 드롭 있도록

Vaadin logo favicon provided by default in a configured project

이전 버전은 파일을 추가하지 않은 : Vaadin이 7.5.3에서 파일이 네 개의 크기가 가장 큰이처럼 보이는이 포함되어 있습니다.

IDE 스크린 샷

여기에 한 쌍의 스크린 샷이 있습니다. 하나는 NetBeans 8의 프로젝트 (논리적) 뷰이고 다른 하나는 파일 (물리적) 뷰입니다.

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

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

관련 문제