Integração do Internet Explorer 9 com Windows 7

Se você está vendo este artigo, então sabe que a Microsoft lançou o beta do Internet Explorer 9 na última semana, e sabe que ele tem funcionalidades interessantes para o Windows 7: fixar site na barra de tarefas, listas de tarefas do site e até ícones para sobreposição.

Se você é desenvolvedor web, então esse post é para você. Saiba como fazer as coisas divertidas que o Internet Explorer pode fazer.

A primeira coisa que você precisa aprender é que essas funcionalidades estão disponíveis apenas para Internet Explorer 9. Por isso, se você tentar executar algum código dessas funcionalidades em outro navegador, um belo erro de script vai acontecer.

Há quem faça detecção de browser via script. Nesse caso, não é necessário (e é contra-producente, não faça). O que você precisa fazer é detecção de funcionalidade. Para checar se o site suporta as funcionalidades, cheque por msIsSiteMode.

try {
    if (window.external.msIsSiteMode()) {
        // suportado, tudo certo no deserto
    } else {
        // IE9, mas SiteMode não suportado
    }
} catch(ex) {
    // Outro navegador, não suportado
}

Dito isso, vamos às funcionalidades.

Fixar aplicação na barra de tarefas ou menu Iniciar

Qualquer site pode ser fixado na barra de tarefas ou menu Iniciar, seja ele preparado para o IE ou não. Fixar é tão fácil quanto arrastar a aba do navegador para a barra de tarefas. Você ainda pode usa o botão Ferramentas (Alt+X) para fixar no menu Iniciar.

 

Quando você fixa o site, várias coisas acontecem:

• O site fica fixado como se fosse um programa

• Quando aberto, o IE mostra o ícone do site na extrema esquerda
• Os botões de voltar e avançar mudam de cor

Para configurar o ícone do site, continua o bom e velho link shortcut icon.

<link rel="shortcut icon" type="image/x-icon"
    href="/themes/gizmodo3/favicon.ico" />

A cor dos botões, por padrão, é baseada na cor predominante do ícone do site. Web designers provavelmente irão querer fazer tweaks no ícone do site para melhorar a aparência da aplicação. Mas é possível alterar a cor padrão usando uma meta tag:

<meta name="msapplication-navbutton-color" content="red"/>

Também é possível alterar a URL que é aberta quando o usuário clica no link da barra de tarefas:

<meta name="msapplication-starturl"
    content="http://example.com/start.html"/>

E além disso, é possível customizar o tamanho da janela que é aberta:

<meta name="msapplication-window" content="width=800;height=600"/>

Jump lists

Jump lists, ou lista de tarefas, podem ser criadas no ícone com uso de scripting. As listas de tarefas são úteis para criar atalhos para partes do site, como no site do Paul Turrott:

Ou para relembrar atividades recém feitas no site, como neste exemplo usando o Twiter:

Existem dois tipos de jump lists: as tarefas de aplicação e as listas dinâmicas.

Tarefas de aplicação

As tarefas de aplicação estão ligadas à categoria Tarefas do menu de aplicação. Elas tendem a ser estáticas e são relacionadas às atividades que seu usuário usa o site.

Pelo caráter estático das tarefas, elas são mais facilmente declaradas como meta tags no site. Dessa forma:

<META name="msapplication-task"
    content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/>
<META name="msapplication-task"
    content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"/>

Cada meta msapplication-task admite três parâmetros:

• name: o nome da tarefa
• action: a URL que é aberta ao clicar na tarefa
• icon-uri: o endereço do ícone da tarefa.

As tarefas podem ser atualizadas. Sempre que o usuário abre a aplicação via ícone fixado, as tarefas são atualizadas pelas meta tags encontradas no momento.

Ah, e metas podem ser criadas sem medo de compatibilidade. Navegadores que não entendem msapplication-task simplesmente a ignoram.

Listas dinâmicas

Você pode criar sua própria categoria e lista de links. Isso é feito com um pouco de JavaScript. Existem várias etapas para criar uma categoria:

• Crie a categoria: primeiramente, use msSiteModeCreateJumpList para criar uma categoria com um nome. Você precisa criar pelo menos uma categoria antes de começar a criar itens para ela.

window.external.msSiteModeCreateJumplist('List1');

• Adicione itens: Adicione itens à categoria com msSiteModeAddJumpListItem. Note que nesse momento, os itens são adicionados apenas em memória e não aparecem no link.

window.external.msSiteModeAddJumpListItem(
    'Item 1', 'http://host/Item1.html', 'http://host/images/item1.ico');
window.external.msSiteModeAddJumpListItem(
    'Item 2', 'http://host/Item2.html', 'http://host/images/item2.ico');
window.external.msSiteModeAddJumpListItem(
    'Item 3', 'Item3.html', 'images/item3.ico');

Cada item requer um nome, uma URL de ação, e um ícone de aparência.

• Mostre a lista: usando a função msSiteModeShowJumpList, a categoria do link é atualizada com a lista em memória.

window.external.msSiteModeShowJumplist();

Note o seguinte:

• Um site pode criar apenas uma categoria customizada, portanto escolha bem o nome
• Quando atualizada, a categoria não perde todos os itens; os itens em memória são adicionadas aos itens já existentes.
• A atualização não duplica itens iguais: os itens referenciados são movidos para o topo da lista
• A categoria suporta somente 20 itens; depois disso os itens mais antigos são removidos
• É possível limpar a lista imediatamente chamando msSiteModeClearJumpList
• Sites podem receber notificações quando o usuário manualmente remove um item da Jump List com o evento mssitemodejumplistitemremoved

document.addEventListener(
    'mssitemodejumplistitemremoved', handler, false);

Ícones de Sobreposição

Enquanto o site está aberto, você pode sobrepor o ícone de aplicação na barra de tarefas com seus próprios ícones.

Para definir um ícone de sobreposição, basta chamar msSiteModeSetIconOverlay.

window.external.msSiteModeSetIconOverlay(
    'http://host/images/search.ico', 'Searching');

O primeiro parâmetro é o endereço do ícone. O segundo parâmetro é opcional e muda a tooltip do ícone da aplicação.

Similarmente, para remover o ícone de sobreposição, basta chamar msSiteModeClearIconOverlay.

Botões no preview miniatura

O site pode também adicionar aqueles pequenos botões em cima do preview em miniatura da janela.

Os botões são criados por janela, primeiramente em memória. Use o método msSiteModeAddThumbBarButton para adicionar um botão:

btn1 = window.external.msSiteModeAddThumbBarButton(
    'http://host/images/button1.ico', 'button 1');
btn2 = window.external.msSiteModeAddThumbBarButton(
    'http://host/images/button2.ico', 'button 2');
btn1 = window.external.msSiteModeAddThumbBarButton(
    'http://host/images/button3.ico', 'button 3');

O valor de retorno é um identificador do botão na barra de botões.

Para detectar se o usuário clicou em um botão, escute o evento msthumbnailclick:

document.addEventListener('msthumbnailclick', handler1, false);
…
function handler1 (btn) {
         alert ("addeventlist:thumbnail btn id" + btn.buttonID);
}

O botão pode ser identificado com a propriedade buttonID do objeto de evento. Ele vai ser um dos identificadores retornados por msSiteModeAddThumbBarButton.

E depois de definidos, você pode mostrar a barra de botões com msSiteModeShowThumbBar.

O código completo de inicialização da barra é algo assim:

var btn1, btn2;

function init()
{
    document.addEventListener('msthumbnailclick', processSelection, false);
    
    btn1 = window.external.msSiteModeAddThumbBarButton('Images/play.ico', 'Play');
    btn2 = window.external.msSiteModeAddThumbBarButton('Images/stop.ico', 'Stop');
    
    window.external.msSiteModeShowThumbBar();
}

function processSelection(btn)
{
   if (btn.buttonID == btn1) 
   {
       // Play video
   }
   else if (btn.buttonID == btn2) 
   {
       // Stop video
   }
} 

Modificando os botões

Depois que a barra de botões foi mostrada, você pode habilitar/desabilitar, ocultar/mostrar, e mudar o ícone do botão.

Para desabilitar e ocultar, você pode chamar o msSiteModeUpdateThumbBarButton.

window.external.msSiteModeUpdateThumbBarButton(btn1, false, true);
window.external.msSiteModeUpdateThumbBarButton(btn2, true, true);
window.external.msSiteModeUpdateThumbBarButton(btn3, true, false);

O primeiro parâmetro é o identificador do botão, o segundo parâmetro indica se o botão está habilitado (verdadeiro/falso), e o terceiro indica se o botão está visível.

Para modificar o ícone do botão, você primeiro precisa declarar estilos de botão. Declare estilos usando msSiteModeAddButtonStyle, passando o identificador do botão, um endereço de ícone e a tooltip do botão.

style1 = window.external.msSiteModeAddButtonStyle(btn1,
    'http://example.com/img/down.ico', 'Button depressed');
style2 = window.external.msSiteModeAddButtonStyle(btn1,
    'http://example.com/img/up.ico', 'Button released');

Um botão pode ter vários estilos.

Alterne os estilos de botão usando msSiteModeShowButtonStyle, passando como parâmetros o identificador do botão e o identificador do estilo.

window.external.msSiteModeShowButtonStyle(btn1, style1);

Chamando atenção do usuário

É possível fazer o ícone da aplicação piscar chamando msSiteModeActivate:

window.external.msSiteModeActivate();

Tamanho dos ícones

Os sites fixados usam ícones em vários lugares. É recomendado que os arquivos de ícones tenham as seguintes resoluções: 16×16, 24×24, 32×32, 64×64.

Na configuração padrão, os ícones usados são:

• Ícone da barra de tarefas: 32×32
• Ícone de Jump List: 16×16
• Ícone de botão de preview em miniatura: 16×16
• Ícone no canto esquerdo superior no navegador: 24×24
• Ícone de sobreposição: 16×16

Conclusão

Espero que tenha achado interessante as novas ferramentas do Internet Explorer. Elas fazem com que o limite entre desktop e a web fique um pouquinho mais nublado. No mais, inclui ferramentas interessantes para power-users.

Lembre-se que o IE9 ainda está em beta, e alguma coisa pode sempre mudar. Fique de olho na documentação em progresso, e no blog do time do IE.

As informações aqui contidas foram retiradas em parte do tutorial na documentação do IE.