• View
• Edit
• History
• Print

BoUFODesignerHowTo

How do I use BoUFODesigner ?

Short instruction to boufodesigner:

The list on the left is the list of available widgets, called "widget list". Select one that you want to insert somewhere. The center is the "preview" when you selected a widget you can click here, to insert it somewhere, however in most cases you must move it to the correct position afterwards.

On the right side you have two widgets. The top one shows the tree of all currently displayed widgets in the preview, it is called "widget overview list". "BoUfoWidget" is always the root widget. The second one is the "widget properties list". If you select a widget in the widget overview list, its properties are displayed in the bottom list, where you can especially change the name (that'll be the variable name later - important to the programmers, if the widget should be used. If its just a label, then the name doesnt matter)

The second purpose of the widget overview list is to define the correct position of a widget. Select a widget and you can move it in the tree using the buttons. You can also use "remove" to remove a widget and all its children from the tree, or "insert", if you have selected a class in the widget list. "insert" is equal to clicking in the preview, but more exact.

The Layout is done by selecting one widget and then choose an item from the layout list in the properties widget. The default is always VBoxLayout, if nothing is selected.

A quick example:

 - Open a new file and insert 2 labels in it
 - Then select the labels and fill the "text" property (you need to click 3 times usually...)
 - Then you will see the texts appear on the preview screen,
    the first one in the upper 3rd of the preview, the other one in the lower 3rd.
 - Now select the parent (root) of the two labels (the top-most entry in the tree)
 - Now select HBoxLayout as the layout in the property list.

 - Select one of the labels and move them up/down
    You'll see the labels exchange their position but are still aligned horizontally
 - Now select a BoUfoWidget in the list on the left and insert it
    The labels are slightly moved by the side (the layout now gives some space to the new widget as well)
 - Select the labels again and move them down, they become a child of the new widget
    If you move them even further down, they are child of the top-BoUfoWidget
    again and are placed below the new child
 - Now add a 3rd label and make it a child of the top-parent, i.e. the root
    i.e. move it up/down until it is not child of the container anymore
    You'll see the 2 labels are still in a vertical layout, the 3rd label is (horizontally) next to the 2 labels and thats it essentially

About the properties:

 - stretch
    If you set a number for it, then it is "stretchable".
    By defaul that number is 0, if there is one "stretchable" widget in a layout, then all widgets with
    stretch=0 get their minimal size only and the remaining size is applied to the stretch widgets.
    This way you can e.g. do the following layout
        * Root
          * Child1
          * Child2
          * ...
          * StretchWidget1
    where Child1,Child2,.. are all below each other (or next to each other horizontall)
    and "StretchWidget1" takes all remaining space.
 - constraints
    That is a hint to the layouts. It is required for border layouts, which are unsupported.
    You dont need this property.
 - horizontal/vertical alignment
    This is available for labels and specifies where text/icons are placed.
    This is a number that is defined by the Qt::AlignmentFlags enum in qnamespace.h
 - minimumWidth/Height
    Straight forward. number of pixels
 - name
    This is the variable name. "doesn't matter" for most widgets, but everything that a
    developer should touch (e.g. when text should be set) should have a usable name
 - opaque
    Either true or false. False is the default. Use true, if you use a background image,
    otherwise false is the best choice for Boson
 - preferredHeight/Width
    See minimumHeight/Width. Probably minimum is not supported by most layouts currently,
    so you may use the same values for both, preffered and minimum height/width.
 - backgroundImageFile
    See welcomewidget.boui for an example. A relative path to the image.
    Note, that in the game the path $KDEDIR/share/apps/boson/ will be prefixed automatically
    to this, so just using pics/foobar.jpg should work
    Trap: you must use opaque=true when you use a background !
 - iconFile
    Available for labels only. The image that is to be displayed next to the text.
    Empty text is fine, too.