File viewer

Two widgets show a file inside a screen: file-viewer shows the text of a file (an application log, a generated report) and pdf-viewer shows a PDF document. Both are a widget element whose type picks the component, and both ask the server for their file. Below are the real widgets of the AWE React client. Switch the type, scroll the file and change the attributes: the XML below follows.

Live preview

LightDark

Controls

Widget type

File viewerPDF viewer

Follow the end of the file

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>

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
type	Widget type	file-viewerpdf-viewer
widget-parameter	Follow the end of the file	true / false

Full reference

• Full documentation of this component
• XSD reference of the element

The server is simulated

A viewer posts the values of the screen to its target-action and shows the answer. Here the request is answered with a small static file of this site: an invented application log and a one-page PDF. The viewers are the real ones; the only thing missing is the server. The PDF is drawn by the PDF plugin of your browser, so it does not show where the browser has none.

Recipes

Follow a log

autoload reads the file when the screen starts, and autorefresh (in seconds) reads it again from time to time. The widget parameter stickBottom keeps the view at the end of the file while the reader is at the bottom, which is what a log needs.

<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>

Show a document

pdf-viewer fetches the document from the target-action and embeds it. Give it room with style="expand", so it fills the space of its container.

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

Images and videos

Pictures and videos have their own elements: image (an url and a title), video (a src, with controls, autoplay, loop and a poster) and the carousel widget, which cycles through images, PDF documents and videos. See the XSD reference and the widget guide.

Events and actions

A viewer has no event or action of its own: it reads its file when the screen starts (autoload) and, with autorefresh, again every few seconds. Its attributes can be changed by dependencies like those of any other component.

More

• Full documentation of widgets: the built-in types, the parameters and how to register your own.
• XSD reference of the widget element.