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.
Create one (or more) views [Top]
A new project has by default one new view.
You can add new views with the "Add View" button. You can choose the basic container type of the 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.
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.
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.
Add components of the view [Top]
By clicking on a specific view it is selected and you can add components to it.
You can drag & drop components to add them to the current selected view
Components are grouped. Simply drag a component from the group to add it.
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.
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.
Click on any of the property groups to change properties.
Example: change width of a button.
Example: change color of the text.
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.
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.
If you want that the view is loaded into this container enter the id in the "Target" input box.
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.
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:
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: