Vaadin: Làm thế nào để thay đổi favicon?

Question

Làm cách nào để thay đổi favicon của các trang trong Vaadin? Tôi muốn thay đổi favicon của các trang của tôi nhưng tôi không biết nơi nào để thay đổi nó? Có ai đó kinh nghiệm về nó?

Answer 1

Đầu tiên, tạo một thư mục chủ đề:/WebContent/VAADIN/themes/mynewtheme

Sau đó, đặt favicon.ico tùy chỉnh của bạn trong thư mục này. Bạn cũng cần phải thiết lập thuộc tính chủ đề trong ứng dụng của bạn:

public class MyNewApplication extends Application { 

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

Answer 2

Trong trường hợp của tên biểu tượng tùy chỉnh (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

Nó là tốt hơn để sử dụng BootstrapListener dưới dạng lớp lồng nhau tĩnh: link

Answer 3

Đây là phiên bản chi tiết hơn của similar Answer được đăng bởi Greg Ballot. Câu trả lời của tôi ở đây liên quan đến Vaadin 7, hiện tại là 7.5.3.

Tuỳ chỉnh Theme

Trong Vaadin 7.5, bạn có thể thả tập tin hình ảnh đồ họa favicon của bạn vào your own custom theme. Nếu sử dụng plugin Vaadin cho nhiều khác nhau IDEs (NetBeans, Eclipse) hoặc Maven archetypes, chủ đề tùy chỉnh có tên mytheme lẽ ra phải được tạo cho bạn. Thả tệp hình ảnh của bạn vào thư mục mytheme đó.

Phần chính của ứng dụng Vaadin 7, lớp con của bạn là UI, phải chỉ định rằng nó sử dụng chủ đề tùy chỉnh của bạn. Một lần nữa, nếu sử dụng các trình cắm thêm IDE và/hoặc nguyên mẫu Maven, điều này đã được cấu hình cho bạn. Cách dễ nhất là một chú thích Java trên lớp con 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 CÁCH DÙNG/Behavior Không Chuẩn

Nên nhớ rằng hành vi favicon không được chuẩn hóa. Favicons phát triển một cách bất ngờ, chủ yếu là ngoài cảm giác vui vẻ. Hành vi chính xác phụ thuộc vào trình duyệt cụ thể và máy chủ cụ thể. Khác với vị trí thư mục cụ thể, không ai trong số này đặc biệt đối với Vaadin.

Định dạng tệp hình ảnh

Ban đầu ICO file format chỉ được sử dụng riêng. Kể từ đó, hầu hết các trình duyệt đã phát triển để chấp nhận bất kỳ định dạng nào trong số đó bao gồm JPEG, TIFF và PNG.

Kích thước/độ phân giải hình ảnh

Biểu tượng favicon ban đầu được dự định là biểu tượng bitmap rất nhỏ. Một số trình duyệt đã sử dụng các hình đại diện khác nhau trong các tình huống mà bạn có thể muốn cung cấp hình ảnh có độ phân giải cao hơn. Nhưng hãy nhớ rằng các tệp nhỏ hơn tải nhanh hơn mà không cần giữ cho người dùng của bạn chờ đợi.

Favicon File Name

Một số trình duyệt hoặc máy chủ có thể xử lý tên tập tin khác hoặc các phần mở rộng tên, nhưng tôi đã tìm thấy nó dễ dàng nhất để đặt tên cho tập tin của tôi chính xác favicon.ico - thậm chí nếu sử dụng một định dạng khác nhau!Tôi thường sử dụng một tập tin PNG nhưng đặt tên nó với phần mở rộng .ico. Mặc dù tôi không thể đảm bảo thực hành này hoạt động trên mọi máy chủ và trình duyệt nhưng tôi không gặp phải bất kỳ sự cố nào.

hiện Favicon file

các phiên bản gần đây của Vaadin đã bao gồm một biểu tượng Vaadin liên quan trong một file favicon.ico trong một dự án được cấu hình. Vì vậy, bạn phải thay thế tệp đó bằng tệp của riêng bạn. Trong Vaadin 7.5.3 file chứa bốn kích cỡ, lớn nhất tìm kiếm như thế này:

Cũ hơn phiên bản không thêm một tập tin, vì vậy bạn thả trong của riêng bạn.

Ảnh chụp màn hình IDE

Dưới đây là một cặp ảnh chụp màn hình. Một là khung nhìn dự án (lôgíc) trong NetBeans 8, trong khi cái kia là dạng xem (vật lý).