Hello World Panel

Let's make a panel with Hello World in it! Got any questions, contact us!

The Blueprint

Start here to create your very first Blueprint! A blueprint is an easy way to organize and access your Rual code. Your program can be made in one or more blueprints. The program will just follow the flow, regardless of the blueprint file that contains the code.

Right you can see what a blueprint looks like in the Rual Studio Editor

Overview

After you logged in to Rual Studio, click on "Blueprints" in the sidebar. This will lead you to an overview of all your blueprints. That will look like the image to the right.

Here you will find all blueprints ever created within your Rual Cluster. You can make as many blueprints as you like. We don't limit your creativity in any way!

Click create blueprint to open and create an empty blueprint.

Selector

First you see a menu with all kinds of actions you can start with. For this tutorial we need a page. Select the ui: page action. If for some reason the menu disappears before you select an action, or if you want to add another action in the same blueprint, you can open this menu anytime with a click of the right mouse button somewhere in the blueprint and then choose "selector".

Title

You need to give the blueprint a title so you can find it back easily. You can give it a title by typing in the top bar where you see the dots. Give your blueprint the title Hello World Panel

URL

Next add a URL to the ui: page block by clicking on the pencil icon. A modal opens where you can type the URL. If you choose an URL that is already in use, you will get an error message here. Type tutorial-helloworld. The full URL will be: {{ YOUR HOSTNAME }}/tutorial-helloworld.

Activate / Deactivate blueprint

You will see "blueprint is not active" on the UI: page. That means your code will not work now. You can activate the blueprint by clicking "Activate" at the top right of the blueprint. You can deactivate the blueprint anytime.

Content

Now you are all set, you can start building the user interface! When you selected the ui: page another action was created with it, the ui: render page, and it is connected with a white line The Flow. For this tutorial we are going to build a simple panel with Hello World.

By dragging out the ui component pin from the ui: render page, a menu with all compatible ui component blocks will open. Copy all blocks as you see them in the image to the left. Click on the circle next to the ui component pin with the left mouse button, hold and drag out a line. Release the mouse button and the menu appears. Type card in the menu bar and select the cards: basic card. Try using your right mouse button when you pull out the title pin. Drag out a line and release. Instead of opening a menu, you get the "most used" block if you use the right mouse button. Of course, this is different for each pin that you pull out.

View Page

Use the view button in the ui: page block to see the result. It will open this page in staging mode, this means that the URL is followed by ?staging. The staging mode shows the changes you made before you save the blueprint. This way you can test your code and styling without saving all the time. Now that you finished the first steps, click save your changes in the right bottom corner to save the changes.

Congratulations! This is your first code in Rual Studio. Now continue building your page in the next tutorial: Button with modal.