Saltar al contenido principal
Version: Next (5.0)

Visor de archivos

Dos widgets muestran un archivo dentro de una pantalla: file-viewer muestra el texto de un archivo (un log de aplicación, un informe generado) y pdf-viewer muestra un documento PDF. Ambos son un elemento widget cuyo type elige el componente, y ambos piden su archivo al servidor. Debajo están los widgets reales del cliente React de AWE. Cambia el tipo, recorre el archivo y cambia los atributos: el XML de debajo se actualiza.

Vista previa en vivo
XML
<widget id="demo"
        type="file-viewer"
        server-action="file"
        autoload="true"
        target-action="ServerLog"
        style="expand scrollable">
  <widget-parameter type="boolean" name="stickBottom" value="true" />
</widget>

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

AtributoControlValores
typeTipo de widgetfile-viewerpdf-viewer
widget-parameterSeguir el final del archivotrue / false
El servidor está simulado

Un visor envía los valores de la pantalla a su target-action y muestra la respuesta. Aquí esa petición se responde con un pequeño archivo estático de este sitio: un log de aplicación inventado y un PDF de una página. Los visores son los reales; lo único que falta es el servidor. El PDF lo dibuja el complemento de PDF de tu navegador, así que no se ve si el navegador no tiene ninguno.

Recetas​

Seguir un log​

autoload lee el archivo al iniciar la pantalla, y autorefresh (en segundos) lo vuelve a leer cada cierto tiempo. El parámetro de widget stickBottom mantiene la vista al final del archivo mientras el lector está abajo, que es lo que necesita un log.

<widget id="serverLog" type="file-viewer" server-action="file" target-action="ServerLog"
        autoload="true" style="expand scrollable">
  <widget-parameter type="boolean" name="stickBottom" value="true" />
</widget>

Mostrar un documento​

pdf-viewer descarga el documento desde el target-action y lo incrusta. Dale espacio con style="expand", para que llene el hueco de su contenedor.

<widget id="manual" type="pdf-viewer" target-action="Manual" style="expand" />

Imágenes y vídeos​

Las imágenes y los vídeos tienen sus propios elementos: image (una url y un title), video (un src, con controls, autoplay, loop y un poster) y el widget carousel, que recorre imágenes, documentos PDF y vídeos. Consulta la referencia XSD y la guía de widgets.

Eventos y acciones​

Un visor no tiene eventos ni acciones propios: lee su archivo al iniciar la pantalla (autoload) y, con autorefresh, de nuevo cada pocos segundos. Sus atributos pueden cambiarlos las dependencias como los de cualquier otro componente.

Más​