Logger Widget :: Customizing LogReader UI

Customizing LogReader

The UI of LogReader can be customized via certain properties and methods, as well as CSS classes. Please refer to the Sample Code section for details on how to achieve the following effects.

Example: Compact Ouput

Log a simple message

By default, log messages are printed to the console with a good deal of whitespace for better readability. In this example, verbose output has been disabled so each message gets output on a single line without wrapping.

Sample Code

Example: Oldest On Top

Log a simple message

By default, new messages get prepended at the top of the console. In this example, new messages get appended at the bottom of the console.

Sample Code

Example: Undraggable

Log a simple message

Although the Drag and Drop Utility is available on the page, draggability of this LogReader has been disabled.

Sample Code

Example: Filtered Output

Log a simple message

The first LogReader will show only global info messages. The second LogReader will only show info messages coming from the "LogReader" class.

Sample Code

Example: Buffered

Log a simple message

Output buffer has been increased to 3 seconds. Therefore, messages are printed to the screen every 3 seconds.

Sample Code

Example: Paused

Resume this LogReader | Pause this LogReader | Log a simple message

Output has been paused.

Sample Code

Example: Collapsed

Log a simple message

The LogReader console has been collapsed.

Sample Code

Example: Hidden

Show this LogReader | Hide this LogReader | Log a simple message

The entire LogReader console has been hidden.

Sample Code

Example: Styled via CSS

Log a simple message

The UI has been customized via CSS.

Sample Code