Applying the Model Transformer

Overview

There are two steps to make model elements available to a generated web panel:

1. Activate the Model Transformer by applying a stereotype to the component

2. Expose model elements using a Web Panel model element.

Applying a Stereotype to the Component

To apply the Model Transformer that creates the embedded web server, apply the <<MT_WebPanel>> stereotype to a Component:

Note that this stereotype also applies -static as a property value to CPP_CG.Cygwin.LinkerFlags. This is because Cygwin loads its libraries dynamically and when the web panel is exported for use on a machine that does not have Cygwin (Export Web Panel Bundle), dynamic linking will cause the generated application to fail. This switch statically links the libraries

Exposing Model Elements

To expose model elements and make them available to the web panel designer:

· Create a Web Panel model element.

· Connect it to the MT_WebPanel component.

· Connect it to the elements to expose.

Creating a Web Panel Model Element

A Web Panel model element is a new term in the Rhapsody Power Pack, based on Requirement. If you are using SysML or any other profile which hijacks the ‘Add New’ menu then you can use the Add New Model Element or Change To helpers to add one. There is also a Web Panel Diagram for convenience (although note that Rhapsody does not allow all types of model element to be added to a diagram, for example event receptions).

Connecting the Web Panel to a Model Transformed Component

Connection to the component is achieved through a dependency stereotyped <<webPanelFor>> as shown on the Web Panel Diagram below:

Connecting the Web Panel to the Elements to Expose

There are three stereotyped dependencies that may be used to expose model elements:

· <<panelAttributes>>

· <<panelStates>>

· <<panelEvents>>

All three types of dependency may be pointed at individual elements (for example a single attribute to expose just that attribute), classifiers (for example a class/block to expose all attributes) or packages (to expose all attributes of all classifiers in that package).

Note that the <<panelEvents>> dependency should point at event receptions, not package-level events.

The profile contains a new-term table Web Panel Elements Table to view these elements. (If you are using a profile that hijacks the Add New Menu like SysML then use the Power Pack Add New Model Element helper to add one.

This is simply a convenient way to view the Web Panels and the exposing dependencies:

Web Panel Tags

Web Panels have the following tags:

HTTPPort

Controls the port number for the embedded HTTP server that serves the panel UI.

1. Browser access – This is the port you open in a browser to view the panel (e.g. http://localhost:8080/[page])

2. Static file serving - Serves the HTML/CSS/JS panel files

3. SSE stream (/events) - Pushes animation state updates to the web browser in real-time

4. Command endpoint (/command) - Receives button presses / event injections from the panel back to the receiver

5. Layout endpoint (/layout) - Gets/saves panel layout config

The default is 8080. You'd change it if that port is already in use on the machine, or to run multiple Web Panel instances simultaneously.

TCPPort

The port used for the TCP connection between the running executable and the Web Panel Receiver.

· The executable connects outbound to localhost:TCPPort

· The Web Panel Receiver listens on that same port, receives state change messages from the executable, translates them into SSE events, and pushes them to the browser

The default port is 6424. You'd change it if that port is already in use, or to run multiple receivers simultaneously (in which case both TCPPort and HTTPPort would need to differ between instances).

OpenWebPanel

Automatically opens the Web Panel in Rhapsody or an External Web browser. If set to None no Web Panel is opened.

OpenWebPanelOnPage

Defines the page to display when the web panel is opened (Runtime, Designer or Debug)

EnableDebugLogging

If enabled, the Web Panel Receiver logs all its activity to a log file (in the same folder as the Receiver) for debugging purposes, for example:

- Which port the HTTP server started on

- Template files being copied

- SSE connections opening/closing

- Commands received from the panel

- File requests being served

ExportDir

Used by Export Web Panel Bundle. It specifies the output directory where the standalone bundle is assembled.

Default is "../ExportedPanel" (relative to the model's unit directory) – but can be an absolute path / contain environment variables.

The bundle that gets placed there contains:

1. A panel/ subdirectory with all your panel web files (HTML/CSS/JS + user assets like images, layout.json, etc.)

2. WebPanelReceiver.jar at the root

3. The compiled C++ executable (copied from the active configuration's output directory)

4. A generated run-receiver.bat script that wires it all together with the configured TCPPort and HTTPPort

CustomStartPage

Used by Export Web Panel Bundle. It overrides the default start page (run.html). Useful if you have designed your own web pages instead of / in addition to the ones supplied by Web Panels. The property should contain a relative path to your custom web page, for example CustomPanels/cartoon-panel.html

PanelDir

PanelDir is the working directory where the live panel files are served from during a Receiver session.

Default is "../Panel" (relative to the model's unit directory) but can be an absolute path / contain environment variables.

On Start Receiver it does two things:

1. Template copy — copies the latest HTML/CSS/JS files from the profile's "Web Panel Templates" folder into PanelDir, so the panel is always up to date with the plugin version

2. File serving — the HTTP server serves all static files from this directory (your layout.json, images, custom assets, etc.)

It's also used by Export Web Panel Bundle as the source of your user assets — the bundle copies the PanelDir contents into the panel/ subdirectory of ExportDir, then overlays the latest templates on top.

PanelDir is where your panel lives day-to-day during model development; ExportDir is where the exported deployable bundle for non-Rhapsody users gets written.