Product Documentation

Migración de funciones de la Interfaz Web a StoreFront

Dec 12, 2016

Muchas de las personalizaciones de la Interfaz Web tienen su equivalente en StoreFront y se pueden configurar usando ajustes de JavaScript, API publicadas de Citrix o la consola de administración de StoreFront.

La tabla ofrece información general acerca de las personalizaciones, así como información básica sobre cómo conseguirlas.  

Ubicaciones de carpetas

  • Para las personalizaciones de script, agregue los ejemplos al archivo script.js, ubicado en: 

C:\inetpub\wwwroot\Citrix\StoreNameWeb\custom.

  • Para las personalizaciones de estilo, agregue el ejemplo al archivo style.css, ubicado en:

C:\inetpub\wwwroot\Citrix\StoreNameWeb\custom.

  • Para el contenido dinámico, agregue el contexto dinámico a un archivo de texto ubicado en:

C:\inetpub\wwwroot\Citrix\StoreNameWeb\customweb

  • Si la suya es una implementación de varios servidores, puede replicar los cambios a los demás servidores desde la consola de administración de StoreFront o mediante PowerShell.

Nota: La Interfaz Web permite que usuarios individuales puedan personalizar varios parámetros. Actualmente, StoreFront no tiene esta capacidad y, aunque es posible agregar una personalización más amplia para admitirla, explicar ese procedimiento no es el objetivo de este artículo.

 

Función de la Interfaz Web

Equivalente de StoreFront

Personalización con la consola de administración

 

  • Distribución sin gráficos
  • Distribución con gráficos
  • Permitir que los usuarios elijan

No aplicable. StoreFront detecta y ajusta automáticamente la interfaz de usuario a la pantalla del dispositivo.

  • Habilitar búsqueda
  • Inhabilitar búsqueda
  • La búsqueda está habilitada de forma predeterminada.
  • Inhabilitar: Para ocultar los cuadros de búsqueda en la interfaz de usuario Web o del escritorio, agregue el siguiente estilo al archivo style.css:

.search-container {

    display: none;

}

Para ocultar los cuadros de búsqueda en la interfaz de usuario del teléfono, agregue:

#searchBtnPhone {

    display: none;

}

Habilitar actualización

Habilitada de forma predeterminada (actualización del explorador).

Habilitar retorno a la última carpeta

No habilitada de forma predeterminada.

Habilitar retorno a la última carpeta. Para recordar la carpeta actual y volver a ella al cargar, agregue lo siguiente a script.js:

CTXS.Extensions.afterDisplayHomeScreen = function ()

{

  // comprobar si la vista se guardó la última vez

  CTXS.ExtensionAPI.localStorageGetItem("view",

  function (view) {

    if (view) {

         // si la vista se guardó, cambiar a ella

         CTXS.ExtensionAPI.changeView(view);

    }

    if (view == "store") {  

        // si la vista es "store", ver si se guardó la carpeta

        CTXS.ExtensionAPI.localStorageGetItem("folder",

          function(folder) {

            if (folder != "") {

              // si la carpeta se guardó, cambiar a ella

              CTXS.ExtensionAPI.navigateToFolder(folder);

            }

          }

        );  

    }

    // configurar la supervisión de carpetas

    CTXS.Extensions.onFolderChange = function(folder) {

      CTXS.ExtensionAPI.localStorageSetItem("folder",

         folder);

    };

    // configurar la supervisión de vistas

    CTXS.Extensions.onViewChange = function(newview) {

      // no conservar las vistas de búsqueda o información de aplicación

      // en vez de ello, recordar la vista primaria

      if ((newview != "appinfo") &&

          (newview != "search")) {

            CTXS.ExtensionAPI.localStorageSetItem(

               "view", newview);

      }

    };

  });

};

Habilitar sugerencias

Citrix Receiver utiliza muy poco los cuadros de información sobre herramientas, ya que está orientado tanto a los dispositivos táctiles como a los que no son táctiles. Puede agregar cuadros de información sobre herramientas mediante scripts personalizados.
  • Vista de iconos
  • Vista de árbol
  • Vista de detalles
  • Vista de lista
  • Vista de grupo
  • Establecer vista predeterminada
  • Vista de iconos (sin gráficos)
  • Vista de lista (sin gráficos)
    Vista predeterminada (sin gráficos)

Citrix Receiver tiene una interfaz de usuario diferente, así que estas opciones no se aplican. Puede usar la consola de administración de StoreFront para configurar las vistas. Para obtener más información, consulte Cómo especificar diferentes vistas de aplicaciones y escritorios.

 

  • Interfaz de usuario de ficha única
  • Interfaz de usuario por fichas
    • Ficha Aplicaciones
    • Ficha Escritorio
    • Ficha Contenido
    • (Orden de las fichas)

De forma predeterminada, la interfaz de usuario de Citrix Receiver está organizada en fichas, con aplicaciones y contenido en una ficha y escritorios en la otra. También existe la ficha optativa Favoritos.

  • Logo de encabezado
  • Color de texto
  • Color de fondo del encabezado
  • Imagen de fondo del encabezado

Equivalentes para colores y logos mediante la consola de administración de StoreFront. En el panel "Acciones" de la consola de administración de StoreFront, haga clic en "Personalizar apariencia del sitio Web" y lleve a cabo sus personalizaciones en la pantalla que se muestra.

Puede establecer una imagen de fondo para el encabezado con una personalización de estilo. Por ejemplo:

.theme-header-bgcolor {

    background-image: url('spirals.png');

}

  • Mensaje de bienvenida previo al inicio de sesión
    (Previo a la configuración regional)
    • Título
    • Texto
    • Hipervínculo
    • Etiqueta de botón

De forma predeterminada, no hay pantalla independiente en el preinicio de sesión.

En este script de ejemplo se agrega un cuadro de mensaje por el que avanzar mediante clics:

var doneClickThrough = false;

// Antes del inicio de sesión Web

CTXS.Extensions.beforeLogon = function (callback) {

    doneClickThrough = true;

    CTXS.ExtensionAPI.showMessage({

        messageTitle: "Welcome!",

        messageText: "Only for <a href="http://www.WWc.com" target="_blank">WWCo Employees",

        okButtonText: "Accept",

        okAction: callback

    });

};

// Antes de la pantalla principal (para clientes nativos)

CTXS.Extensions.beforeDisplayHomeScreen

  = function (callback) {

    if (!doneClickThrough) {

        CTXS.ExtensionAPI.showMessage({

            messageTitle: "Welcome!",

            messageText: "Only for WWCo Employees",

            okButtonText: "Accept",

            okAction: callback

        });

    } else {

        callback();

    }

};

  • Título de la pantalla de inicio de sesión
  • Mensaje de la pantalla de inicio de sesión
  • Mensaje del sistema de la pantalla de inicio de sesión

Existen cuatro áreas de personalización en las pantallas de inicio de sesión. Parte superior e inferior de la pantalla (encabezado y pie de página) y parte superior e inferior del cuadro de inicio de sesión en sí.

.customAuthHeader,

.customAuthFooter

.customAuthTop,

.customAuthBottom {

    text-align: center;

    color: white;

    font-size: 16px;

}

Ejemplo de script (contenido estático)

$('.customAuthHeader').html("Welcome to ACME");

Ejemplo de script (contenido dinámico)

function setDynamicContent(txtFile, element) {

CTXS.ExtensionAPI.proxyRequest({

url: "customweb/"+txtFile,

success: function(txt) {$(element).html(txt);}});

}

setDynamicContent("Message.txt", ".customAuthTop");

Nota: No incluya de forma explícita contenido dinámico en el script; también puede ponerlo en el directorio custom, ya que los cambios realizados aquí obligan a todos los clientes a volver a cargar la interfaz de usuario. Coloque el contenido dinámico en el directorio customweb.

  • Mensaje de bienvenida de la pantalla de aplicaciones
  • Mensaje del sistema de la pantalla de aplicaciones

Consulte los ejemplos mencionados para la pantalla de bienvenida CustomAuth.

Consulte los ejemplos anteriores para el contenido dinámico. Use ‘#customTop’ en vez de ‘.customAuthTop’ para colocar contenido en la pantalla principal.

Texto de pie de página (todas las pantallas)

Ejemplo de script:

#customBottom {

      text-align: center;

    color: white;

    font-size: 16px;

}

Ejemplo de contenido estático con un script:

$('#customBottom').html("Welcome to ACME");

Funciones sin equivalente directo

 

 

  • Pantalla de inicio de sesión sin encabezados
  • Pantalla de inicio de sesión con encabezados
    (incluidos los mensajes)
No existe equivalente directo en StoreFront. Sin embargo, puede crear encabezados personalizados.  Consulte el apartado anterior llamado "Título de la pantalla de inicio de sesión".

Configuración de usuario

De forma predeterminada, no hay ninguna configuración de usuario.  Puede agregar menús y botones desde JavaScript.

Control del espacio de trabajo                       

Funcionalidad equivalente para los parámetros del administrador. Las API de extensión permiten una flexibilidad adicional significativa.

Consulte http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/receiver-customization-api.html.

Personalizaciones completas (código)

 

 

Personalizaciones de conectores de llamadas y enlaces de generación de archivos ICA.

API equivalentes o mejores.

http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/store-customization-sdk.html

Personalizaciones de autenticación

API equivalentes o mejores.

http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/store-authentication-sdks.html

Acceso al código JSP o ASP

No existe ninguna API equivalente en StoreFront, ya que la interfaz de usuario no se representa de la misma manera.  Hay muchas API de JavaScript que permiten la personalización de la interfaz de usuario.