Running a Web Page template
While writing your Web Page template, you will want quick feedback on how it actually looks like in a web browser when rendered. To do this, you can "run" your Web Page template.
A running Web Page template will be temporarily exposed by the server to a randomly generated URL. This URL is where you can view the rendered web page. It is accessible until you decide to terminate the running Web Page template. To make things even more convenient, editing a running template automatically makes the browser reload the rendered web page.
There are many ways you can run a Web Page template:
- using the context menu from the Navigator;
- using the context menu from the step editor;
- using toolbar in the step editor; and
- using the shortcut key in Martini Desktop; in Martini Online.
Setting template inputs
When you run a Web Page template, an input dialog will appear. This input dialog allows you to set the template's input properties. Inputs are typically used in order to configure how a Web Page template will behave, and be rendered as a web page.
Inputs can be set under the Main tab, using the Input Model section. To set a property's value, select it and either click on its value cell, or press . Provide the property's value when the text field appears, and press to apply your edit.
If you already have input data written in JSON, XML or YAML format, you can easily feed this data to the input dialog using the Import button. If your input data is partial, you can select a property in the tree and set its value by pasting the JSON, XML, or YAML content from your clipboard.
Martini Desktop also allows you to set where the Web Page template will be opened upon running. You can choose to open it in Martini Desktop's internal browser (default option), or an external browser (which is your machine's configured default browser).
Using CSS
In some cases, you might want to run your template with a particular CSS for testing purposes.
A common scenario would be when running a component template1 which does not have a <head> tag
containing the necessary CSS imports. To provide a CSS for testing purposes,
you can go to the input dialog's CSS tab to configure the CSS you want to use for your template when it runs.
You can set the CSS either by pasting CSS rules from your clipboard, or the CSS's source URL.
The URL can either be an absolute URL, or a relative path to to the Martini package's
web directory. For example, if your CSS file is at
todo-app/web/bootstrap.min.css (where todo-app is the name of the Martini package);
then your relative path should be /todo-app/bootstrap.min.css. The web directory is excluded in the path.
When run, the configured CSS and/or CSS imports will be injected to your Web Page template's <head> tag.
Using scripts
Similar to injecting CSS, it can be helpful to include extra scripts in your template for testing purposes. This is done through the Scripts tab of the input dialog.
Your JavaScript can be provided by pasting code from your clipboard, or the JavaScript's source URL.
The URL can either be an absolute URL, or a relative path to to the Martini package's
web directory. For example, if your JS file is at
examples/web/script.js (where examples is the name of the Martini package);
then your relative path should be examples/script.js. The web directory is excluded in the path.
Viewing the rendered web page
When you run a Web Page template, Martini will show a preview of the rendered web page (unless you unchecked the Open in Browser checkbox). This preview automatically reloads when you save the template after applying your changes.
You can open an accidentally closed template preview using the following procedure:
- Switch to the Debug perspective.
- Go the the Debug view.
- Right click the running Web Page template.
- Click either Open Web Page Template Preview, or Show Web Page Template Preview QR Code. The latter prompts a dialog with a QR code to open. This QR code can be scanned by a mobile device so you could view the rendered web page from there.