Preview

The preview pane on the right side of the Theme Builder lets you see any change you apply to the theme in real time. There are three built-in previews, but you can edit or create your own preview script and you can preview your running application right in Theme Builder.

Since Wisej.NET is an open system being able to integrate with countless JavaScript widgets out there, we may need to preview custom widgets and extensions in order to theme them using either a new theme or a theme mixin.

For this purpose, the Theme Builder supports loading or editing custom preview scripts. You may edit the existing built-in scripts, or use them as a reference to see how they have been built, or you can create new scripts.

You can change the current preview view using the toolbar above the preview area:

Tool	Description
	Selects the browser: IE or Edge/Chromium.
	Shows the main view.
	Shows the controls view - contains a number of additional controls.
	Shows the grid preview.
	Changes the zoom level in the preview window.
	Opens a JavaScript editor preloaded with the current preview script. You can modify the built-in script or write a new one.	Custom Preview
	Loads a custom preview script (.js).	Custom Preview
	Saves the current preview script to a JavaScript file.
	Reloads the current preview script.

Windows

The first preview script loads a number of common controls into two floating windows inside a Desktop control. Use this preview to see the result of your changes to active and inactive windows, many common controls, and the Desktop control and Taskbar.

You can modify this preview script by clicking the "Edit custom preview script" button in the toolbar. It will load the Windows script into the custom preview script editor.

Default Windows Preview Script

When you edit a preview script, remember to save it to a file, otherwise when you switch back to another script view your changes will be lost.

Controls

The second preview script shows all the controls that didn't fit in the floating windows in the Windows preview script, plus popup widgets (i.e. Tooltip, MessageBox, AlertBox, ...).

You can modify this preview script by clicking the "Edit custom preview script" button in the toolbar. It will load the Windows script into the custom preview script editor.

Default Controls Preview Script

Grid

The third preview script shows a grid with some sample data and a representation of the most used column types. You can sort, move and resize the columns to see how your changes affect a grid also during normal usage.

You can modify this preview script by clicking the "Edit custom preview script" button in the toolbar. It will load the Windows script into the custom preview script editor.

Default Grid Preview Script

Custom

You can edit the existing preview script, or create and load your own custom preview scripts. The language is JavaScript and runs directly inside the browser instance used in the preview pane.

The code below:

var button = new wisej.web.Button().set({

  label: "My First Preview Button",
  width: 200,
  height: 30

});

root.add(button);

Shows the preview below:

Custom Preview Script

The root element in the preview panel is called root. To show any widget in the preview panel you have to add it to root.

The preview panels in Theme Builder load the built-in preview scripts (JavaScript) to show a predefined selection of controls and layouts.

Default Preview Script in Code Editor

Element	Description
	Deletes the selected text and copies it to the clipboard.
	Copies the selected text to the clipboard.
	Pastes the text in the clipboard at the current location.
	Tries to format the selected text.
	Reverses the last operation.
	Reapplies the previous operation that was reverted using Undo.
	Changes the size of the font in the editor.
	Updates the preview panel with the preview script in the editor. It doesn't close the editor. You can keep changing the script and click save to see the result in the preview panel.

Use the save button to update the preview while editing the custom preview script.