Nana development: Version 0.5

In 0.5, a new layout class-class place was introduced, which provides a simpler method to implement window layout. Class place is a window bound to it divided into several areas according to the design, and then add the child control to each area. This article uses an example to explain the basic usage of class place, and then introduces the detailed rules of place.

Start example

Create a logon interface to verify the user account. This program looks like this:

First, we need to divide the window into several areas to achieve this layout effect ). Shows a division method:

Class place is a string parameter of divide-text to divide the field. Therefore, you must first determine divide-text (for detailed syntax, see section 2)

The divide-text in the red rectangle should look like this.

<> <Weight = 80% vertical
Children_fields_of_red_rectangle> <>

The child fields of the root-field are arranged horizontally by default. Therefore, the three fields are arranged horizontally. The red box is located in the middle of the window and occupies 80% of the window width. we specify its weight attribute as 80%. As you can see, the Child boxes in the red box are arranged vertically, so we need to specify the red box as vertical.

The divide-text in the orange rectangle should look like this.

<> <Weight = 70% vertical
Children_fields_of_orange_rectangle> <>

The orange box is located in the middle of the window and occupies 70% of the height of the window. It also needs to be specified as vertical.

Divide-text in green and blue rectangular boxes

<Vertical textboxs> <Weight = 25 buttons>

Controls in the green box are arranged vertically, and buttons in the blue box are arranged horizontally. Therefore, you only need to specify the vertical attribute for the green box. Here, the buttons in the blue box are arranged horizontally. In other words, the height of the blue box is the same as that of the button, so we specify the weight of the blue box to 25 pixels. These two fields will be referenced later and the control will be inserted into them. Therefore, we need to provide each of them with a name for query.

Finally, combine these divide-text.

<> <Weight = 80% vertical
<> <Weight = 70% vertical
<Vertical textboxs> <Weight = 25 buttons >>>><>

Now we start Encoding

# Include <Nana/GUI/wvl. HPP> # include <Nana/GUI/place. HPP> # include <Nana/GUI/widgets/button. HPP> # include <Nana/GUI/widgets/textbox. HPP> int main () {using namespace NANA: Gui; // defines the text box and button form FM; textbox USR (FM), pswd (FM); button login (FM ), cancel (FM); USR. tip_string (STR ("User :")). multi_lines (false); pswd. tip_string (STR ("Password :")). multi_lines (false ). mask ('*'); login. caption (STR ("login"); cancel. cap Tion (STR ("cancel"); // defines a place object for the window. Place PLC (FM); // divides the window into multiple field PLC. div ("<> <Weight = 80% vertical <> <Weight = 70% vertical <vertical textboxs> <Weight = 25 buttons >>><> "); // insert control // textboxs field is arranged vertically, which automatically adjusts the Y axis coordinates and height of the control. // The User box and Password box are both single-line text boxes, so we should specify a fixed height for them. PLC. field ("textboxs") <PLC. fixed (USR, 25) <10 <PLC. fixed (pswd, 25); PLC. field ("buttons") <login <10 <cancel; // Finally, the window needs to be arranged. // do not forget this line. Otherwise, all child controls will be laid out only after the window size changes. PLC. collocate (); FM. Show (); Exec ();}

Here is another example: creating a GUI Calculator

Divide-text syntax

Divide-text is used to divide the window into multiple fields, and each field will layout the window associated with it.

Define a field

<>

Define nested Fields

<>

Root Field

Each class place contains an implicit root field (root region). All fields defined by divide-text are sub-fields of the root field.

Specify attribute for Field

Name: specify a name for Field

<Id_you_specified>

Defines a field named id_you_specified, and then you can reference this field through place_object.field ("id_you_specified ").

Vertical: Specifies the vertical layout of the Child field of the field. If this attribute is not specified, the Child fields are arranged horizontally. For example

place plc(fm);plc.div("<abc>");plc.field("abc")<<btn0<<btn1<<btn2<<btn3;plc.collocate();

If we set the following

PLC. Div ("<ABC> ");

Replace

PLC. Div ("<vertical ABC> ");

Then we will get this layout.

Weight: The height or width of a field, which depends on the arrangement of its parent field.

Specify weight in pixels

<ABC> <Weight = 200 def>

If the window width is 1000 pixels, field ABC is 800 pixels, and Def is 200 pixels.

<ABC> <Weight = 60% def> <Ghi>

If the window width is 1000 pixels, field ABC is 200 pixels, Def is 600 pixels, and Ghi is 200 pixels.

Grid [x, y]: Specify the field to arrange its subfields in the form of a grid.

<Grid [3, 2]>

The field is divided into 3x2 grids.

place plc(fm);plc.div("<grid [3, 2] abc>");plc.field("abc")<<btn0<<btn1<<btn2<<plc.room(btn3, 3, 1);

Gap: Specify the gap pixels between each sub-field for the grid field

<Grid [3, 2] Gap = 5>