Designing Web Panels

Designing Web Panels

Editing the Web Panel should only be performed ‘live’ that is while the rhapsody executable is connected, so the designer has up to date information on available instance information. The designer has indicators at the top of the page that show if the designer is connected to the Receiver (the Web Panel Receiver) and the Executable (that is the executable model generated from Rhapsody). Both should be green before designing. For example, in the screenshot below the Web Panel Receiver is running and the designer is connected to it but it is not yet connected to the executable model (likely because the executable model is not running).

To being designing / editing a Web Panel:

· Start the Web Panel Receiver

· Run the Executable Model

These actions may be performed in any order. Starting the Web Panel Receiver may be performed using the context menu on a Web Panel model element in Rhapsody.

Note that the designer uses only HTML, CSS and JavaScript so no additional libraries are required. The Web Panel Receiver also has an API so you could also design your own web panels using any libraries you like (see Web Panel Receiver API)

Designs are stored in a layout.json file in the ‘panelDir’ so they persist between sessions even when the executable is not running.

The Palette

When the Web Panel is connected to the executable model, the palette is automatically populated with available instances:

Selecting an instance will populate the palette with all available (exposed) model elements:

Sections may be expanded / collapsed using the arrows at the top:

Expanded sections may be filtered by typing into the Filter panel:

Adding Widgets

To add a widget to the panel, drag a model element from the palette onto the canvas. The widget is automatically bound to that model element, for example dragging ‘activate’ from the Button section creates a button that may be pressed to inject the activate event:

See Available Widgets for a list of widgets and the model elements to which they may be bound.

See Unbound Widgets to detect and rebind unbound widgets.

See Troubleshooting Web Panels for common issues.

Important Note for Modelers:

To correctly instrument attributes, user models should not directly set the values (e.g. x = 1) but instead use the setter functions (e.g. setX(1)).

Widget Controls

Hovering the mouse over a widget shows the available controls:

Dragging a Widget

Some widgets are interactive – for example clicking a button widget will inject that event even while designing. To drag such widgets, drag the ‘drag’ icon in the widget. Other widgets (for example graphs) may be dragged simply by positioning the mouse over them until the move icon is displayed. Click Drag Mode in the toolbar to toggle the view into a mode whereby all widgets are draggable (the widget controls are removed) – some controls remain interactive so move the mouse over them until you see the drag icon.

Multiple widgets may be moved by dragging a window around them first (shift-click will then add/remove widgets to that collection)

The entire set of widgets may be moved slightly using the Nudge menu.

Resizing Widgets

Widgets may be resized by dragging the two lower corners or the left/right/bottom edge.

Snap to Grid

The page has a grid that widgets may snap to while dragging. To change the size of the grid, toggle its visibility, change its color or switch it off, use the Grid menu in the toolbar:

Global Widget Properties

The Appearance menu has settings to globally apply borders / background color / fonts to Widgets. These settings may then be locally overridden on each widget:

Fonts

Standard web fonts are automatically available. Both the font family and the font size may be changed at panel / individual widget level.

To use custom fonts, place font files in the fonts/ subdirectory of your panel directory:

panel/

fonts/

MyFont.ttf

Icons.woff2

Custom font names are immediately available in the Appearance → Panel Font selector and in per-widget Font override fields.