Tutorials

 

To get started watch a short video
and see the tutorial below

Steps explained in this tutorial:


Create a project

Once you open GenericFrame it opens a new project for you. You can navigate to File->Save and save the project under a name you like. A New Project is created via File->New.

menu save

Create one (or more) views [Top]

A new project has by default one new view.

views

You can add new views with the "Add View" button. You can choose the basic container type of the view.

add view

Canvas is absolut positioning container.
VBox is vertical box. All childs are automatically ordered under each other.
HBox is horizontal container. All childs are automtaically ordered next to each other.
PopUp is a window with vertical layout.
You can nest containers. For example you can add an VBox, in the VBox add a few HBoxes and in every HBox you can add a few buttons. In this case the HBoxes are ordered under each other, and the buttons are ordered next to each other.

3 boxes

More about how to use containers you can lear in the article "How to use containers to build my layout?". Once added you will see all your views on the right side of the screen. You can rename every view by clicking on the name.

rename view

On every view you have two options "Home" and "Delete". The "Home" will set this view as the first (starting) screen of the application and move it to first position.

home view

Add components of the view [Top]


By clicking on a specific view it is selected and you can add components to it.

selected view

You can drag & drop components to add them to the current selected view

drag and drop component

Components are grouped. Simply drag a component from the group to add it.

grouped components

If you add a container and dragg a component into this container the component is added to the container. You can group components in containers this way. You can nest containers into each other. As the example above a VBox holding 3 HBoxes. And each HBox holding 3 Buttons.

drop component

Change properties for a component [Top]

Every component has different properties like Text-Size or Backround-Color. You can select a component from the view by clicking on it. The properties are display in the bottom part of the screen in the tab "PROPERTIES".
Depending on the selected component you will see different properties.

properties

Click on any of the property groups to change properties.
Example: change width of a button.

size properties

Example: change color of the text.

text properties

Define navigation between the views [Top]

After creating multiple views you probably want to define navigation so the user can click around and experience the application. Once started your application will show the "Home" (first positioned) view. On this view you can define a "Click" action which connects to any other view in the application. Every component in GenericFrame supports the "Click" action. Some components support other actions like "Change" and "ItemClick". To define a "Click" action to any component select the component and go to "NAVIGATION" tab, next to the "PROPERTIES" tab.

navigation

The "Target" can be skipped or it can be prefiled with a target-container. This will force the new view to be loaded into this container instead of replacing the whole screen.
To find out what id a container has, just select it. The "PROPERTIES" tab will display the id.

id property

If you want that the view is loaded into this container enter the id in the "Target" input box.

navigation target

If "Target" is left blank next view (Canvas2) will be loaded (like a new page) on the whole screen removing all previous components.
The WorkArea consists of left panel (Components), right side (Views), at the bottom the Properties Panel and in the bottom-left panel the Custom components.


To add a component to the View simply drag&drop it.

When you click on acomponent on the Canvas, it is selected. Resizing and moving arrows are shown around the object


The properties of the selected object are displayed at the bottom.

On the right side you can switch between different views. By clicking on a view, it is selected and its layout is displayed. You can also add new views.

You can also search for components and views, which can be a very useful functions if you have more views.

If you want more space to actually work with your view you can use the full-screen mode.

The full-screen mode allows you to view the application in its full size, and at the same time to have the same functionality as in a normal mode.

You can switch any time to normal view with the icon in the upper right corner.

When you are creating your layout, it is best to use containers to better layout components and better create resizable layouts. For example, you can set the width of a container to 100% and define how its content (the child elements) should behave. In this article you will find out how to use containers and how they basically work.

To add a few buttons into an HBox and center them.
Steps: Add Hbox, add 3 Buttons into the HBox.
The layout looks like this:

If you want to center the content of the container use the Align properties:

You can also center vertically the content of a container: