Agregar una ToolBar con comandos (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

ToolBar es un control simple que aborda la escalabilidad de comandos. Tiene una action area donde los comandos están disponibles de inmediato y una overflow area donde se encuentran ocultos los comandos, pero que pueden mostrarse cuando lo solicite el usuario final. El control admite comportamiento adaptativo al permitir que los comandos se muevan dinámicamente desde el área principal al área secundaria cuando el espacio es limitado. ToolBar no está limitado a una única ubicación en una aplicación, sino que puede encontrarse en varios lugares, como Splitview, Flyout y en canvas.

Nota  Los siguientes escenarios de codificación se pueden ver con más detalle en el sitio web de Probar WinJS.

 

Crear una barra de herramientas con comandos agregados de forma declarativa

Los comandos pueden agregarse a la barra de herramientas de forma declarativa. En este escenario, la barra de herramientas tiene cuatro comandos principales y dos comandos secundarios.

Dn972389.sample_toolbar(es-es,WIN.10).png

<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 la agrupación y colocar comandos de orden

Los desarrolladores pueden especificar la agrupación y colocar una orden de comandos para el área de desbordamiento que no sigue el orden visual de derecha a izquierda. Esto resulta útil para cuando el espacio en pantalla es limitado. El control va desde el valor máximo al mínimo. De manera predeterminada, los comandos van de derecha a izquierda. Pero el valor predeterminado de prioridad no está definido.

Dn972389.grouping_order_toolbar(es-es,WIN.10).png

<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 varias barras de herramientas a la vez

Los desarrolladores pueden crear varias barras de herramientas y mostrarlas a la vez.

Ejemplo de varias barras de herramientas

<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();

Crear una barra de herramientas con comandos agregados con WinJS.Binding.List

WinJS.Binding.List puede usarse para rellenar una barra de herramientas con comandos a través de la propiedad data de la barra de herramientas.

Ejemplo de una barra de herramientas con comandos de una lista de enlace de winjs

<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 la barra de herramientas

Se establecen los colores predeterminados de la barra de herramientas, mediante las hojas de estilo ui-dark.css o ui-light.css, en función de la hoja de estilos que se haya cargado. Puede personalizar los colores de la barra de herramientas reemplazando las reglas CSS adecuadas. En este ejemplo, se establece el color de fondo de la barra de herramientas para que sea transparente y se personaliza el color de fondo del área de desbordamiento de la barra de herramientas para que coincida con la imagen de fondo detrás de ella.

Ejemplo de barra de herramientas personalizada

<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();

Observaciones

Estas y otras muestras de codificación se pueden ver con más detalle en el sitio web Proar WinJS. Jugar con el código y ver los resultados inmediatamente.

Temas relacionados

WinJS.UI.Toolbar