Adicionando uma ToolBar com comandos (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

ToolBar é um controle simples que aborda escalabilidade de comando. Ele tem uma action area onde os comandos estão disponíveis imediatamente e uma overflow area onde os comandos estão ocultos, mas pode ser exibidos mediante solicitação do usuário final. O controle suporta comportamento adaptável, permitindo que os comandos se movam dinamicamente da área principal para a secundária quando o espaço é limitado. ToolBar não se restringe a um único local em um aplicativo, mas pode ser encontrado em vários lugares, como Splitview, Flyout e canvas.

Observação  Os seguintes cenários de codificação podem ser visualizados em mais detalhes no site Experimente o WinJS.

Criar uma barra de ferramentas com comandos adicionados de forma declarativa

Comandos podem ser adicionados à barra de ferramentas de forma declarativa. Nesse cenário, a barra de ferramentas tem quatro comandos principais e dois comandos secundários.

<div class="basicToolbar" data-win-control="WinJS.UI.ToolBar">
    <!-- Primary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdEdit',
            label:'edit',
            section:'primary',
            type:'button',
            icon: 'edit',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdDelete',
            label:'delete',
            section:'primary',
            type:'button',
            icon: 'delete',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdFavorite',
            label:'favorite',
            section:'primary',
            type:'toggle',
            icon: 'favorite',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdOpenWith',
            label:'open with',
            section:'primary',
            type:'button',
            icon: 'openfile',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdDownload',
            label:'download',
            section:'primary',
            type:'button',
            icon: 'download',
            onclick: Sample.outputCommand}"></button>

    <!-- Secondary command -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdSettings',
            label:'settings',
            section:'secondary',
            type:'button',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdShare',
            label:'share',
            section:'secondary',
            type:'button',
            onclick: Sample.outputCommand}"></button>
</div>
<div class="status"></div>

WinJS.Namespace.define("Sample", {
    outputCommand: WinJS.UI.eventHandler(function (ev) {
        var status = document.querySelector(".status");
        var command = ev.currentTarget;
        if (command.winControl) {
            var label = command.winControl.label || command.winControl.icon || "button";
            var section = command.winControl.section || "";
            var msg = section + " command " + label + " was pressed";
            status.textContent = msg;
        }
    })
});

WinJS.UI.processAll();

Especificar o agrupamento e executar comandos de ordem

Os desenvolvedores podem especificar o agrupamento e executar a ordem de comandos na área de excedentes que não segue a ordem RTL visual. Isso é útil quando o espaço na tela é limitado. O controle é executado do valor maior para o valor mais baixo. Por padrão, os comandos são executados da direita para a esquerda. Mas o valor padrão de prioridade é indefinido.

<div class="groupingToolbar" data-win-control="WinJS.UI.ToolBar">
    <!-- Primary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdEdit',
            label:'edit',
            section:'primary',
            type:'button',
            icon: 'edit',
            priority:2,
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdDelete',
            label:'delete',
            section:'primary',
            type:'button',
            icon: 'delete',
            priority:2,
            onclick: Sample.outputCommand}"></button>
    <hr data-win-control="WinJS.UI.Command" data-win-options="{type:'separator'}" />
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdFavorite',
            label:'favorite',
            section:'primary',
            type:'toggle',
            icon: 'favorite',
            priority:3,
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdOpenWith',
            label:'open with',
            section:'primary',
            type:'button',
            icon: 'openfile',
            priority:3,
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdDownload',
            label:'download',
            section:'primary',
            type:'button',
            icon: 'download',
            priority:3,
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdPin',
            label:'pin',
            section:'primary',
            type:'button',
            icon: 'pin',
            priority:3,
            onclick: Sample.outputCommand}"></button>
    <hr data-win-control="WinJS.UI.Command" data-win-options="{type:'separator'}" />
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdZoom',
            label:'zoom',
            section:'primary',
            type:'button',
            icon: 'zoomin',
            priority:1,
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdFullscreen',
            label:'full screen',
            section:'primary',
            type:'button',
            icon: 'fullscreen',
            priority:1,
            onclick: Sample.outputCommand}"></button>

    <!-- Secondary command -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdSettings',
            label:'settings',
            section:'secondary',
            type:'button',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdShare',
            label:'share',
            section:'secondary',
            type:'button',
            onclick: Sample.outputCommand}"></button>
</div>
<div class="status"></div>

WinJS.Namespace.define("Sample", {
    outputCommand: WinJS.UI.eventHandler(function (ev) {
        var status = document.querySelector(".status");
        var command = ev.currentTarget;
        if (command.winControl) {
            var label = command.winControl.label || command.winControl.icon || "button";
            var section = command.winControl.section || "";
            var priority = command.winControl.priority;
            var msg = section + " command " + label + " with priority " + priority + " was pressed";
            status.textContent = msg;
        }
    })
});

WinJS.UI.processAll();

Mostrar várias barras de ferramentas ao mesmo tempo

Os desenvolvedores podem criar várias barras de ferramentas e mostrá-las ao mesmo tempo.

<div class="sampleToolBar" data-win-control="WinJS.UI.ToolBar">
    <!-- Primary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdEdit',
                label:'edit',
                section:'primary',
                type:'button',
                icon: 'edit',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdFavorite',
                label:'favorite',
                section:'primary',
                type:'toggle',
                icon: 'favorite',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdDelete',
                label:'delete',
                section:'primary',
                type:'button',
                icon: 'delete',
                onclick: Sample.outputCommand}"></button>

    <!-- Secondary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdSettings',
                label:'settings',
                section:'secondary',
                type:'button',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdShare',
                label:'share',
                section:'secondary',
                type:'button',
                onclick: Sample.outputCommand}"></button>
</div>

<div class="sampleToolBar2" data-win-control="WinJS.UI.ToolBar">
    <!-- Primary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdBold',
                section:'primary',
                type:'toggle',
                icon: 'bold',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdItalic',
                section:'primary',
                type:'toggle',
                icon: 'italic',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdUnderline',
                section:'primary',
                type:'toggle',
                icon: 'underline',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdEmoticon',
                section:'primary',
                type:'button',
                icon: 'emoji',
                onclick: Sample.outputCommand}"></button>

    <!-- Secondary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdSettings',
                label:'settings',
                section:'secondary',
                type:'button',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdShare',
                label:'share',
                section:'secondary',
                type:'button',
                onclick: Sample.outputCommand}"></button>
</div>
<div class="status"></div>

WinJS.Namespace.define("Sample", {
    outputCommand: WinJS.UI.eventHandler(function (ev) {
        var status = document.querySelector(".status");
        var command = ev.currentTarget;
        if (command.winControl) {
            var label = command.winControl.label || command.winControl.icon || "button";
            var section = command.winControl.section || "";
            var msg = section + " command " + label + " was pressed";
            status.textContent = msg;
        }
    })
});

WinJS.UI.processAll();

Criar uma barra de ferramentas com os comandos adicionados usando WinJS.Binding.List

WinJS.Binding.List pode ser usado para preencher uma barra de ferramentas com comandos por meio da propriedade data da barra de ferramentas.

<div class="imperativeToolBar" data-win-control="WinJS.UI.ToolBar"
     data-win-options="{data: Sample.commandList}"></div>
<div class="status"></div>

WinJS.Namespace.define("Sample", {
    commandList: null,
    outputCommand: WinJS.UI.eventHandler(function (ev) {
        var status = document.querySelector(".status");
        var command = ev.currentTarget;
        if (command.winControl) {
            var label = command.winControl.label || command.winControl.icon || "button";
            var section = command.winControl.section || "";
            var msg = section + " command " + label + " was pressed";
            status.textContent = msg;
        }
    })
});

var dataArray = [
    new WinJS.UI.Command(null, 
      { id: 'cmdEdit', label: 'edit', section: 'primary', type: 'button', icon: 'edit', onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdDelete', label: 'delete', section: 'primary', type: 'button', icon: 'delete', onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdFavorite', label: 'favorite', section: 'primary', type: 'toggle', icon: 'favorite', 
        onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdOpenWith', label: 'open with', section: 'primary', type: 'button', icon: 'openfile', 
        onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdDownload', label: 'download', section: 'primary', type: 'button', icon: 'download', 
        onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdPin', label: 'pin', section: 'primary', type: 'button', icon: 'pin', onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdZoom', label: 'zoom', section: 'primary', type: 'button', icon: 'zoomin', onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdFullscreen', label: 'full screen', section: 'primary', type: 'button', icon: 'fullscreen', 
        onclick: Sample.outputCommand })
];

Sample.commandList = new WinJS.Binding.List(dataArray);

WinJS.UI.processAll();

Personalizar a barra de ferramentas

As cores padrão da barra de ferramentas são definidas por folhas de estilos ui-dark.css ou ui-light.css, dependendo de qual folha de estilos está carregada. Você pode personalizar as cores da barra de ferramentas, substituindo as regras CSS apropriadas. Neste exemplo, a cor de plano de fundo da barra de ferramentas é definida para ser transparente e a cor de plano de fundo da área de excedentes da barra de ferramentas é personalizada para corresponder à imagem de plano de fundo atrás dela.

<div class="image">
    <img src="/pages/toolbar/images/Sunset.jpg" alt="" />
    <div data-win-control="WinJS.UI.ToolBar">
        <!-- Primary commands -->
        <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdEdit',
                label:'edit',
                section:'primary',
                type:'button',
                icon: 'edit'}"></button>
        <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdFavorite',
                label:'favorite',
                section:'primary',
                type:'toggle',
                icon: 'favorite'}"></button>
        <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdDelete',
                label:'delete',
                section:'primary',
                type:'button',
                icon: 'delete'}"></button>
    </div>
</div>

/* Add your CSS here */
 body {
     background-color: rgb(112,112,112);
 }

 #content {
     text-align: center;
  overflow: hidden;
 }

 .image {
     position: relative;
     margin: auto;
     margin-top: 50px;
     margin-bottom:50px;
 }

 img { 
  max-width: 100%; 
 }

 .win-toolbar-actionarea {
  background: transparent;
 }

    .win-toolbar-overflowarea {
        background-color: rgb(74, 61, 78);
        border: 0;
    }

WinJS.UI.processAll();

Comentários

Esses e outros exemplos de codificação podem ser visualizados em mais detalhes no site Experimente o WinJS. Experimente o código e veja imediatamente os resultados.

Tópicos relacionados

WinJS.UI.Toolbar