Tinycon
Display a notification (count) in the browser (tab) favicon
Updates the favicon displayed in the browser (usually in the tab) to display a 'bubble' notification (number).
Can be used (for instance) to draw the users attention to messages/alerts received in a tab that is not currently active.
Note that you have to set up a working favicon for the extension to work.
Also note that the library currently degrades to title update for Internet Explorer 9 and Safari 5, while Chrome, Firefox and Opera is fully supported.
The add-on is Apache 2 licensed, the tinycon.js library that's used has a MIT license.
Sample code
Tinycon t = new Tinycon(); t.extend(this); // UI extension t.setBubble(alertCount);
package com.porotype.tinycon; import java.util.HashMap; import com.vaadin.server.VaadinRequest; import com.vaadin.ui.Button; import com.vaadin.ui.Button.ClickEvent; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; /** * Tinycon demo */ @SuppressWarnings("serial") public class TinyconUI extends UI { // we'll update this counter int n = 0; @Override protected void init(VaadinRequest request) { final VerticalLayout layout = new VerticalLayout(); layout.setMargin(true); setContent(layout); // Extend the UI final Tinycon t = new Tinycon(); t.extend(this); Button count = new Button("Count"); count.addClickListener(new Button.ClickListener() { public void buttonClick(ClickEvent event) { // update bubble t.setBubble(n++); } }); layout.addComponent(count); Button reset = new Button("Reset"); reset.addClickListener(new Button.ClickListener() { public void buttonClick(ClickEvent event) { // reset counter and bubble n = 0; t.reset(); } }); layout.addComponent(reset); Button change = new Button("Change style"); change.addClickListener(new Button.ClickListener() { public void buttonClick(ClickEvent event) { // change style HashMap<String, String> opts = new HashMap<String, String>(); opts.put("background", "yellow"); opts.put("colour", "black"); t.setOptions(opts); // make the bubble update style at once t.setBubble(n); } }); layout.addComponent(change); } }
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Released
- 2013-05-15
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 7.0+
- Browser
- Firefox
- Opera
- Google Chrome