Hello World Panel

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.

This is what a blueprint looks like, in the Rual Studio visual editor:


example blueprint

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

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 an empty blueprint.

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".



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 four dots. Give your blueprint the title Hello World Panel



Next add a URL to the ui: page block by clicking on the pencil icon. A modal opens where you can type the URL name. 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: (cluster name).rual.dev/tutorial-helloworld.

page block
url modal

You will see "blueprint is not active" in the left corner of the block. That means your code will not work now. You can activate the blueprint by clicking "Activate" at the right top of the blueprint. You can deactivate the blueprint anytime.

activate button
deactivate button

Now you are all set, you can start building the user interface! On the left of the ui: page block you see "in pins". On the right are "out pins". The user interface components are built from the in pins, so going left from the page block. The color of user interface component blocks is yellow. For this tutorial we are going to build a simple panel with Hello World.

By dragging out the ui component pin, a menu with all ui component blocks will open. Copy all blocks as you see them in the image below. 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.

TIP if you right click on the image below and select open image in new tab it is easier to see the small print!

Use the view button in the ui: page block to see the result. It will open this page in debug mode, this means that the URL is followed by ?debug. The debug 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.