topic "Layout Designer";
[l288;i1120;a17;O9;~~~.1408;2 $$1,0#10431211400427159095818037425705:param]
[a83;*R6 $$2,5#31310162474203024125188417583966:caption]
[H4;b83;*4 $$3,5#07864147445237544204411237157677:title]
[i288;O9;C2 $$4,6#40027414424643823182269349404212:item]
[b42;a42;ph2 $$5,5#45413000475342174754091244180557:text]
[l288;b17;a17;2 $$6,6#27521748481378242620020725143825:desc]
[l321;C@5+75 $$7,7#20902679421464641399138805415013:code]
[b2503;2 $$8,0#65142375456100023862071332075487:separator]
[*@(0.0.255)2 $$9,0#83433469410354161042741608181528:base]
[C2 $$10,0#37138531426314131251341829483380:class]
[l288;a17;*1 $$11,11#70004532496200323422659154056402:requirement]
[i417;b42;a42;O9;~~~.416;2 $$12,12#10566046415157235020018451313112:tparam]
[b167;C2 $$13,13#92430459443460461911108080531343:item1]
[i288;a42;O9;C2 $$14,14#77422149456609303542238260500223:item2]
[*@2$(0.128.128)2 $$15,15#34511555403152284025741354420178:NewsDate]
[l321;*C$7;2 $$16,16#03451589433145915344929335295360:result]
[l321;b83;a83;*C$7;2 $$17,17#07531550463529505371228428965313:result`-line]
[l160;*C+117 $$18,5#88603949442205825958800053222425:package`-title]
[2 $$19,0#53580023442335529039900623488521:gap]
[C2 $$20,20#70211524482531209251820423858195:class`-nested]
[b50;2 $$21,21#03324558446220344731010354752573:Par]
[b83;*+117 $$22,22#2AC2FD302E8CD436942CC99374D81489:SubTitle]
[2 $$0,0#00000000000000000000000000000000:Default]
[{_}%EN-US 
[s2; Layout Designer&]
[s3; Table of contents&]
[s0; &]
[s0; [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#1^ 1. Overview]&]
[s0; [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#2^ 2. Layouts management]&]
[s0;     [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#2`_1^ 2.1 Creating 
new layout]&]
[s0; [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#3^ 3. Adding widget 
to layout]&]
[s0; [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#4^ 4. Toolbar commands]&]
[s0;     [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#4`_1^ 4.1 Widget 
size scaling behavior]&]
[s0;     [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#4`_2^ 4.2 Order 
of widgets]&]
[s0;     [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#4`_3^ 4.3 Layout 
behavior settings]&]
[s0;     [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#4`_4^ 4.4 Assistance]&]
[s0;         [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#4`_4`_1^ 4.4.1 
Automatic code generation for layout]&]
[s0;         [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#4`_4`_2^ 4.4.2 
Jumping to class that implements layout]&]
[s0; [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#5^ 5. Adding support 
for custom widgets]&]
[s0; [^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#6^ 6. Under the hood]&]
[s0; &]
[s3;:1: 1. Overview&]
[s5; Layout Designer is a tool that allows to create predefined views 
that can be directly used in application source code. It significantly 
reduces the amount of time needed to create the program. It separates 
logic from user interface. This allows to use some modern software 
architectures like MVC (Model View Controller). Despite the fact 
that user interface code with U`+`+ can be written without Layout 
Designer its usage significantly speed up the application creation 
process.&]
[s0; &]
[s0;= 
@@rawimage:3349&2962
([encoded data, 159200 characters])
&]
[s0; &]
[s5; The layout designer consists of the following key elements:&]
[s5;l128;i150;O0; [* A] `- list of layouts. One .lay file can contain 
multiple layouts.&]
[s5;l128;i150;O0; [* B] `- widgets list associated with selected layout.&]
[s5;l128;i150;O0; [* C] `- widget properties. They can be modified 
directly from layout designer..&]
[s5;l288;i150;O0; [* C1] `- widget type.&]
[s5;l288;i150;O0; [* C2] `- widget name.&]
[s5;l128;i150;O0; [* D] `- layout view.&]
[s5;l128;i150;O0; [* E] `- layout designer toolbar.&]
[s5; More information about using layouts in the source code can 
be found in the [^topic`:`/`/CtrlLib`/srcdoc`/Tutorial`_en`-us`#16^ GUI 
tutorial].&]
[s3;:2: 2. Layouts management&]
[s22;:2`_1: 2.1. Creating new layout&]
[s5; After creating a new layout file, it doesn`'t posse any layouts. 
To create layout right click on layout list and select `"Add 
new layout..`" or `"Insert new layout..`". The difference between 
these two options are the first one always insert at the end 
of the list. On the other hand the second will insert new layout 
before currently selected layout. Example below:&]
[s0; &]
[s0;= 
@@rawimage:2000&1656
([encoded data, 36976 characters])
&]
[s0; &]
[s5; After selecting one of these two options, the dialog will appear. 
In the dialog in order to create a new layout the name must be 
provided.&]
[s3;:3: 3. Adding widget to layout&]
[s5; Adding new widget to the layout is simple. To do it right click 
on the layout view area and select concrete widget from the list. 
Example below:&]
[s0; &]
[s0;= 
@@rawimage:2744&3183
([encoded data, 106500 characters])
&]
[s0; &]
[s5; After that the widget will be placed on the layout view area. 
The initial position depends on the mouse position in which the 
menu has been invoked. The widget selection can be canceled by 
pressing Escape keyboard key or by left click on area that is 
not the widget selection menu. The whole system is intuitive 
and after few usage all problems disappear.&]
[s5; Standard U`+`+ distribution bundles a dozen of widgets. They 
are mainly located in CtrlLib (Controls Library). All widgets 
definitions for Layout Designed are located in .usc files. The 
main one is located under the following path [*^https`:`/`/github`.com`/ultimatepp`/ultimatepp`/blob`/master`/uppsrc`/CtrlLib`/CtrlLib`.usc^ C
trlLib/CtrlLib.usc]. If you plan to write .usc file by yourself 
the file is a treasury of knowledge.&]
[s5; To each widget category can be assigned. It is used to distinguish 
the widget within layout editor.&]
[s5;l128;i150;O0; [* Complex] `-&]
[s5;l128;i150;O0; [* Editors] `-&]
[s5;l128;i150;O0; [* Input fields] `-&]
[s5;l128;i150;O0; [* Progress] `- &]
[s5;l128;i150;O0; [* Push] `-&]
[s5;l128;i150;O0; [* Special] `-&]
[s5;l128;i150;O0; [* Static] `- static widgets that do not offer any 
input.&]
[s5;l128;i150;O0; [* All] `- all available widgets.&]
[s5;l128;i150;O0; [* User class ]`-[*  ]this allows you to specify any 
widget that is within layout file include hierarchy. Very useful 
for all controls that do not have it`'s representation in .usc 
[^topic`:`/`/ide`/app`/LayoutDes`_en`-us`#4^ file].&]
[s5; The widgets available in the layout designer can be extended 
by using other packages not only CtrlLib. One of the package 
that extends the list is GridCtrl.&]
[s3;:4: 4. Toolbar commands&]
[s22;:4`_1: 4.1 Widget size scaling behavior&]
[s5; Layout designer allows to specify how widget will behave upon 
layout size change. This will happen for example when user change 
window size on which given layout is placed. Upon selecting a 
particular widget by left`-clicking on it, in the layout view 
the user should have access to the scaling options. This is show 
on the image below:&]
[s0; &]
[s0;= 
@@rawimage:2974&616
([encoded data, 36912 characters])
&]
[s0; &]
[s5; Let`'s analyze each option available in scaling commands:&]
[s5;l128;i150;O0;~~~32; Horizontal scaling:&]
[s5;l288;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAQUlEQVQ4jWNgGAUUA0YGhv//GRgYGaH8//jVYgIWdIH//zHNYESYD7UMQbMgJHBaghewwOyAWUGqARSHwSgYDAAAewwSDTNxCxUAAAAASUVORK5CYII=)
 `- widget size will do not change and it will stay on the [* left] 
part of the layout.&]
[s5;l288;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAQklEQVQ4je2QMQoAIAwDL+L/vxynDiIoVsfe0kJoEgrFM9poPt/ZHWyQ1gn26iHNmf22ciTH1nIGUrR8/kGuQPGXAfqdEQuPsKYCAAAAAElFTkSuQmCC)
 `- widget size will do not change and it will stay on the [* right] 
part of the layout.&]
[s5;l288;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAARklEQVQ4je2PQQrAIAwEZyH///L2oKkoVAVPBecWws4mcDlGYINUZ+/nAOwYN/bcoberEBnrxEtaS6Q3N3sCfb8wnnj5Aw8elQ8RJ47SWQAAAABJRU5ErkJggg==)
 `- widget size will [* adapt] to the layout size from [* left to 
right]. This is typical [* vertical auto resizing] behavior.&]
[s5;l288;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAANklEQVQ4jWNgGAUUA0Yc4v+JVc/EwPAfqhiV/v//PwrGpoaB4f9/JjJcje4CygDFYTAKBgMAAB/sGfG7i4zcAAAAAElFTkSuQmCC)
 `- widget size will do not change, however the widget will be 
placed by the [* horizontal center] of the layout.&]
[s5;l128;i150;O0;~~~32; Vertical scaling:&]
[s5;l288;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAARUlEQVQ4jWNkwAr+/8cUY2TErhYvwGYQKmAiw1QUgMtZ2GzGqpYFl8n/kVzPiMf7FHthGBhAcSxQDPCYipwKyUrGI8YFACbpDxMdo89wAAAAAElFTkSuQmCC)
 `- widget size will do not change and it will stay on the [* top] 
part of the layout.&]
[s5;l288;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAARElEQVQ4jWNkwAn+/0ewGRlxq6MQ4DF5xLvgPxYxrGpZcJn8H8kHjHh8wIRThkgwDAygOBYIgP/YDEIBtPICNpuxJwYAXcIPEywclUkAAAAASUVORK5CYII=)
 `- widget size will do not change and it will stay on the [* bottom 
]part of the layout.&]
[s5;l288;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAQ0lEQVQ4jWNkwAr+/8cUY2TErhYvwGYQKmAiw1QUgMtZ2GzGqpYFl8n/kVzPiMf7FHth1IDBYADFCYkAGLi8QHx2BgAW8g0X5zHG9QAAAABJRU5ErkJggg==)
 `- widget size will [* adapt] to the layout size from [* top to 
bottom]. This is typical [* vertical auto resizing] behavior.&]
[s5;l288;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAPElEQVQ4jWNkwAn+/0ewGRlxq6MQ4DF5qLgAl8R/LGJY1bLgth9hBiOeIGDCKUMkGHgDKA7EYZCQBt4FADnsERMwzTLlAAAAAElFTkSuQmCC)
 `-widget size will do not change, however the widget will be 
placed by the [* vertical center] of the layout.&]
[s5;l128;i150;O0;~~~32; Predefined scaling:&]
[s5;l288;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAbElEQVQ4ja1TQQrAIAwz4v+/nB3cuhWzTusCIgRJ0mBRHMgyABi5TyghjZpQd0B3s5jKORxhSEDSzpN9u5sn1vs6BcIRQmx3MJM5ECVrVJApyGI72kQCFcqUkh8JuHrb7mDBVT/+YxcyzveKH4KMOvULOvvBAAAAAElFTkSuQmCC)
 `- the decision how to scale widget will be deduced by algorithm 
basing on widget type and it`'s current position.&]
[s5;l288;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAXUlEQVQ4jWNkwAD//2OKMTJiihEE2AzCBExkmIwC0J2Gz1as3mCBOBXhx/9YXM6IJwhI9ALMdATNgipAemBDDYC7kaiQRwYkegFmEYKmOBYoBjhMRY5LspLxiHIBAEE4Ghcxc75qAAAAAElFTkSuQmCC)
 `- the command resets to default scaling options for the widget. 
It will be set as left for horizontal and top for vertical.&]
[s22;:4`_2: 4.2 Order of widgets&]
[s5; The order of the widgets in the layout matters. The widgets 
of the bottom of the list will be drawn first. It is very important 
when widgets overlap. Let`'s assume, non real world example. 
We have two buttons OK and Cancel and they are on the same position 
on the layout. The OK button is in the bottom of the list. The 
picture below presents the whole situation:&]
[s0; &]
[s0;= 
@@rawimage:2000&1709
([encoded data, 21500 characters])
&]
[s0; &]
[s5; As we may see in this case only the OK button is displayed to 
the user. The bottom rule can be used to combine widgets and 
to create layers. For example on the top of the list you could 
place StaticRect with the color:&]
[s0; &]
[s0;= 
@@rawimage:2000&1517
([encoded data, 23388 characters])
&]
[s0; &]
[s5; You could manipulate the order of the widget, by drag and drop 
or you could use ordering commands:&]
[s0; &]
[s0;= 
@@rawimage:2681&485
([encoded data, 29960 characters])
&]
[s0; &]
[s5; Let`'s discuss all of available options included in this group:&]
[s5;l128;i150;O0; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAoUlEQVQ4jcWS0Q3DIAxEn6MMwEZlhIzAKB6NbMQG1w9ECuSnKJVqyTI6cYftA5ZCL5DWODeyVM/rAppyVWTuoI6yA7j7MFeMkZzzQHc3A0Ugg51QKftaF3YC1iPbmsBPo+5gA0gpCVCr7q4Zm8g3B9olhRDk7gohqMc/r442XjtIKQFwHAcApZQLaxXMujyfraBJwrf/wAf7Wjy28Z//oMYb3sRZogA7UuQAAAAASUVORK5CYII=)
 `- move widget one position into the top.&]
[s5;l128;i150;O0; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAi0lEQVQ4jdWS4QlDIQyEP0sHyEbPERwho2Q0R3KD9MczRWmh9KV/enAEzniciZBEATAzX8VaK733rdHMyjuDWzZB2uBncFX1qHMmm/bRICgibmYuIr7qs80XHjBnoKpEHWMA0FpjPTtRykkq0DNPnmngDv/1D/yI6BcQl2MDXxttK3yuMZHgEl6jPwAKpFfUBFucuwAAAABJRU5ErkJggg==)
 `- move widget one position into the bottom.&]
[s5;l128;i150;O0; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAa0lEQVQ4jd2S2w2AIBAE54yFXWlrZ1jZ+SMKvhMSY5wvDpiE3QCN2LqMADMASZF33Z2UUiVJWryu9QUFEfd39vRnB09jNEf4cAdQ95DJffyoAzsSpQGo80qK8j+UHfjG386XdGBjIfk8v8cEd9wul30S7g4AAAAASUVORK5CYII=)
 `- deduce the desirable widgets position on the widget list. 
More than one widget must be selected. When one widget is select, 
the option is disabled.&]
[s22;:4`_3: 4.3 Layout behavior settings&]
[s5; There are three operations that defines how the work with the 
layout looks like.They are shown below:&]
[s0; &]
[s0;= 
@@rawimage:2685&608
([encoded data, 30684 characters])
&]
[s0; &]
[s5; Let`'s discuss each of them:&]
[s5;l128;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAGklEQVQ4jWNgoAL4TwF7kIBRLwwGMOqFgQYANdUY6L3qqhIAAAAASUVORK5CYII=)
 `-use grid while moving widgets. When enable the widget will 
be placed on the grid and while moving it could be only placed 
on the grid dots. The space between dots is set to 4 layout units. 
When disabled, the user have full control where to place widget 
with an accuracy of up to one layout unit.&]
[s5;l288; By default, the option is [* enabled].&]
[s5;l128;i150;O0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAx0lEQVQ4jcWSsQ6CMBCGPw3RrWFQJsIr4MoL+UgMTr4NIzD4AoaNBZiISx1KsaUlMTpwySV3//X/r/lb2Dp2Ri1/4e5N5B5DKZSSL0uhzphhCaQDFCFUwl1XCTVLBxsPzOZyPEPXUoRTP9jkrPtgXgGiiMujBRQhHplrH9kV6Pt5czzCLVHw9Qmnl0uGhQc0jf/UlyHllKVA5gmyPajME4XpOcaTB0sV0zB97azDMdYrsOa2rrUIxswSqMW62xqrhS3w91fePt4mYFI6EGPJ5gAAAABJRU5ErkJggg==)
 `-ignore minimal size of the widget. In the .usc file there 
is an option to specify widget minimal size by overriding GetMinSize() 
method of ctrl:&]
[s0;l576; [C@4;1 // CtrlLib/CtrlLib.usc]&]
[s0;l576; [C@5;1 ctrl ImageCtrl `{]&]
[s7;l576;     group `"Static`";&]
[s7;l576; &]
[s7;l576;     GetMinSize() `{ return Size(32, 32); `}&]
[s5;l288; When the option is enabled, above values will not be taken 
into account. So, the ImageCtrl could be smaller than 32x32 layout 
units. Where the first value represent height and the second 
width.&]
[s5;l288; By default, the option is [* disabled].&]
[s0;l128;i150;b42;a42;phO0;~~~32; 
@@rawimage:100&100
(iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAAAAAAAAAHqZRakAAAAbElEQVQ4ja1TQQrAIAwz4v+/nB3cuhWzTusCIgRJ0mBRHMgyABi5TyghjZpQd0B3s5jKORxhSEDSzpN9u5sn1vs6BcIRQmx3MJM5ECVrVJApyGI72kQCFcqUkh8JuHrb7mDBVT/+YxcyzveKH4KMOvULOvvBAAAAAElFTkSuQmCC)
 `- automatically change size of the widget when layout size 
changed in the editor. This will respect the scaling behavior 
settings. When disabled the widgets will stay in their current 
positions.&]
[s5;l288; By default, the option is [* enabled].&]
[s22;:4`_4: 4.4 Assistance&]
[s22;:4`_4`_1: 4.4.1 Automatic code generation for layout&]
[s5;~~~2976; You could automatically generate code for your layout 
by executing `"Generate code..`" command. This will take into 
account only currently selected layout. The command is located 
in the following place:&]
[s0; &]
[s0;= 
@@rawimage:2602&235
([encoded data, 19356 characters])
&]
[s0; &]
[s5; This will open the window in which you could specify generation 
options and upon accepting copy the code to the clipboard. The 
dialog image below:&]
[s0; &]
[s0;= 
@@rawimage:3277&2639
([encoded data, 99580 characters])
&]
[s0; &]
[s22;:4`_4`_2: 4.4.2 Jumping to class that implements layout&]
[s5; In order to jump to a certain class that implements layout in 
the code the following command should be used:&]
[s0; &]
[s0;= 
@@rawimage:2602&235
([encoded data, 19572 characters])
&]
[s0; &]
[s5; Let`'s assume that the layout is named SelectPackageLayout then 
after executing command the implementation file (.cpp) in the 
separate tab should be opened. The cursor will be placed in layout 
usage declaration. This command is very useful for big projects 
with multiple layouts. The place to which the command jumps is 
present below:&]
[s0; &]
[s0;= 
@@rawimage:2617&266
([encoded data, 16428 characters])
&]
[s0; &]
[s0; &]
[s3;:5: 5. Adding support for custom widgets&]
[s5; For any widget Layout Designer support can be added. To do so 
[* .usc] file should be created in the package where the widget 
source code is located. After that, in .usc file the code that 
describes widget should be added. There is lesson [*^topic`:`/`/CtrlLib`/srcdoc`/Tutorial`_en`-us`#21^ C
reating and using custom widgets] in GUI tutorial where the whole 
process is explained.&]
[s5; More information about the scripting language that is used by 
.usc file interpreter can be found [^topic`:`/`/Esc`/srcdoc`/Esc`_en`-us^ here].&]
[s3;:6: 6. Under the hood&]
[s5; Under the hood the Layout designer operates on [* .lay] file. 
It is text file that stores the collection of layouts. The exemplary 
layout store in that file looks as follow:&]
[s0; &]
[s0;l321; [C@5;1 LAYOUT(ConfigLayout, 724, 214)]&]
[s7; -|ITEM(Upp`::ArrayCtrl, list, AutoHideSb(true).HSizePosZ(4, 4).VSizePosZ(6, 
32))&]
[s7; -|ITEM(Upp`::Button, ok, SetLabel(t`_(`"OK`")).RightPosZ(88, 80).BottomPosZ(4, 
22))&]
[s7; -|ITEM(Upp`::Button, cancel, SetLabel(t`_(`"Cancel`")).RightPosZ(4, 
80).BottomPosZ(4, 22))&]
[s7; END`_LAYOUT&]
[s5; ]]