Kexi/Handbook/Building Simple Databases/Designing Forms/Widget layouts: Difference between revisions

From KDE Wiki Sandbox
(add translation tags)
(minor correction)
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<languages/>
<languages/>
<translate>
<translate>
====Widget layouts====
<!--FIXME not implemented in kexi 2.4
====Widget layouts==== <!--T:1-->


<!--T:2-->
In most cases form widgets should be conveniently arranged and aligned. Positioning, aligning and resizing widgets by hand is not easy and these parameters are not adjusted when the user resizes the form. In fact the situation is even worse because you cannot assume a given form requires a given space because users have different font sizes and display resolutions.  
In most cases form widgets should be conveniently arranged and aligned. Positioning, aligning and resizing widgets by hand is not easy and these parameters are not adjusted when the user resizes the form. In fact the situation is even worse because you cannot assume a given form requires a given space because users have different font sizes and display resolutions.  


<!--T:3-->
Using special tool called widget layouts can help to automatically lay out the form widgets. Widget layout is an action of grouping two or more widgets so these are well positioned and have appropriate sizes.  
Using special tool called widget layouts can help to automatically lay out the form widgets. Widget layout is an action of grouping two or more widgets so these are well positioned and have appropriate sizes.  


Using layout in a form improves alignment. Moreover, its space is better used. Text fields are closer to each other, spacing is constant.  
<!--T:4-->
Using layout in a form improves alignment. Moreover, its space is better used. Text fields are closer to each other, spacing is constant. -->


<!--T:5-->
<!--FIXME not implemented in kexi 2.4
There are two methods to create widget layout.
There are two methods to create widget layout.


<!--T:6-->
* Select two or more widgets that should be placed in a common layout, and select one of the layout types from the context menu item <menuchoice>Layout Widgets</menuchoice>.  
* Select two or more widgets that should be placed in a common layout, and select one of the layout types from the context menu item <menuchoice>Layout Widgets</menuchoice>.  


<!--T:7-->
* Click a container widget (or a form surface itself), where widgets are inserted and select one of the layout types from the context menu item <menuchoice>Layout Widgets</menuchoice>. All widgets existing within the container or within the form, being on the same level will be put into a single common layout.  
* Click a container widget (or a form surface itself), where widgets are inserted and select one of the layout types from the context menu item <menuchoice>Layout Widgets</menuchoice>. All widgets existing within the container or within the form, being on the same level will be put into a single common layout.  


<!--T:8-->
In each of these cases you can also use <menuchoice>Format->Layout Widgets</menuchoice> menu.  
In each of these cases you can also use <menuchoice>Format->Layout Widgets</menuchoice> menu.  


<!--T:9-->
Widget layout is presented in the design view using a blue, green or red box drawn with a broken line. This line is displayed only in the form's design view.  
Widget layout is presented in the design view using a blue, green or red box drawn with a broken line. This line is displayed only in the form's design view.  


<!--T:10-->
Besides the grid type, there are other widget layout types.
Besides the grid type, there are other widget layout types.


<!--T:11-->
;vertical
;vertical
:Vertical widget layout
:Vertical widget layout</translate>
<translate>
<!--T:36-->
;horizontal
;horizontal
:Horizontal widget layout
:Horizontal widget layout


===== Springs in widget layouts =====
===== Springs in widget layouts ===== <!--T:12-->


<!--T:13-->
A spring in widget layouts is a special, invisible element allowing to adjust widget's position and size within layouts. Such a spring stretches or squeezes a widget on the right, top, bottom or left hand, so it can have desired size and position.  
A spring in widget layouts is a special, invisible element allowing to adjust widget's position and size within layouts. Such a spring stretches or squeezes a widget on the right, top, bottom or left hand, so it can have desired size and position.  


<!--T:14-->
To use a spring:
To use a spring:


# Select spring icon on the '''Widgets''' toolbar.  
<!--T:15-->
# Select spring icon on the '''Widgets''' toolbar. </translate>
<translate>
<!--T:37-->
# Click on a selected point of the form to insert the spring.
# Click on a selected point of the form to insert the spring.


<!--T:16-->
To make springs work you need to create a global widget layout, i.e. a layout for the form itself. Then, springs can use edges of the form as a boundary for expanding.  
To make springs work you need to create a global widget layout, i.e. a layout for the form itself. Then, springs can use edges of the form as a boundary for expanding.  


===== Removing widget layouts =====
===== Removing widget layouts ===== <!--T:17-->


<!--T:18-->
To remove widget layout without removing widgets, perform one of these actions:  
To remove widget layout without removing widgets, perform one of these actions:  


<!--T:19-->
* Click with the right mouse button on the layout's border and select <menuchoice>Break Layout</menuchoice> command from the context menu.  
* Click with the right mouse button on the layout's border and select <menuchoice>Break Layout</menuchoice> command from the context menu.  
<!--T:38-->
* Click with the left mouse button on the layout's border and select <menuchoice>Format->Break Layout</menuchoice> menu command.  
* Click with the left mouse button on the layout's border and select <menuchoice>Format->Break Layout</menuchoice> menu command.  


<!--T:20-->
{{Note|Removing widget layout using the Break Layout command will not remove widgets contained in the layout. If you want to remove the widgets as well, just select the layout by clicking on its border and press <keycap>Delete</keycap> key or use <menuchoice>Edit->Delete</menuchoice> menu command or context menu command.}}
{{Note|Removing widget layout using the Break Layout command will not remove widgets contained in the layout. If you want to remove the widgets as well, just select the layout by clicking on its border and press <keycap>Delete</keycap> key or use <menuchoice>Edit->Delete</menuchoice> menu command or context menu command.}}
-->


=====Size policies for widgets within a layout=====
====Size policies for widgets <!--FIXME: within a layout-->==== <!--T:21-->


<!--T:22-->
Instead of setting a fixed size for your widgets, in '''Kexi''' you can choose between various widget's size policies. A size policy is a flexible strategy for controlling how a widget is stretched (or shrunk) depending on other neighbouring widgets and space available within the form.  
Instead of setting a fixed size for your widgets, in '''Kexi''' you can choose between various widget's size policies. A size policy is a flexible strategy for controlling how a widget is stretched (or shrunk) depending on other neighbouring widgets and space available within the form.  


After putting widgets into a layout, typically each widget gets a proportional (<menuchoice>Preferred</menuchoice>) size policy. These widgets will be automatically resized with preferred settings, depending on their type and size of the entire layout itself. For example, three buttons put into the horizontal layout will be resized to fit their visible text.  
<!--T:23-->
After putting widgets into <!--FIXME: a layout-->the form, typically each widget gets a proportional (<menuchoice>Preferred</menuchoice>) size policy. These widgets will be automatically resized with preferred settings, depending on their type and size of the entire layout itself. For example, three buttons <!--FIXME: put into the horizontal layout-->on a line will be resized to fit their visible text.  


For each widget inserted into the form, there are settings for size policy available in the '''Property Editor'''. The settings are presented as a group of properties called '''Size Policy'''.  
<!--T:24-->
For each widget inserted into the form, there are settings for size policy available in the '''Property Editor'''. The settings are presented as a group of properties called <menuchoice>Size Policy</menuchoice>.  


<!--T:25-->
This group of properties contains:
This group of properties contains:


<!--T:26-->
;Horizontal Size Policy
;Horizontal Size Policy
:defining horizontal size of the widget,
:defining horizontal size of the widget,</translate>
<translate>
<!--T:39-->
;Vertical Size Policy
;Vertical Size Policy
:defining vertical size of the widget,
:defining vertical size of the widget,</translate>
<translate>
<!--T:40-->
;Horizontal Stretch
;Horizontal Stretch
:defining strength of activity of the Horizontal Size Policy,  
:defining strength of activity of the Horizontal Size Policy, </translate>
<translate>
<!--T:41-->
;Vertical Stretch
;Vertical Stretch
:defining strength of activity of the Vertical Size Policy  
:defining strength of activity of the Vertical Size Policy  


===== Values of size policies =====
===== Values of size policies ===== <!--T:27-->


The following values are available in the drop down list for '''Horizontal Size Policy''' and '''Vertical Size Policy''' properties visible in the '''Property Editor''':  
<!--T:28-->
The following values are available in the drop down list for <menuchoice>Hor. Policy</menuchoice> and <menuchoice>Vert. Policy</menuchoice> visible in the '''Property Editor''':  


<!--T:29-->
;Fixed
;Fixed
:this value means that the widget cannot be automatically resized; it should maintain the constant size defined at design time (width or height),  
:this value means that the widget cannot be automatically resized; it should maintain the constant size defined at design time (width or height), </translate>
<translate>
<!--T:42-->
;Minimum
;Minimum
:this value means that the original size of the widget is set as minimal allowed, it is sufficient and there is no need for expanding the widget, but the widget will be expanded if needed. This type of policy can be used to force the widget to be expanded to the whole width or height, especially if you set a stretch value greater than 0.  
:this value means that the original size of the widget is set as minimal allowed, it is sufficient and there is no need for expanding the widget, but the widget will be expanded if needed. This type of policy can be used to force the widget to be expanded to the whole width or height, especially if you set a stretch value greater than 0. </translate>
<translate>
<!--T:43-->
;Maximum
;Maximum
:this value means that the original size of the widget is set as maximum allowed and can be decreased without breaking the widget's usability and readability if other widgets need more space,  
:this value means that the original size of the widget is set as maximum allowed and can be decreased without breaking the widget's usability and readability if other widgets need more space, </translate>
<translate>
<!--T:44-->
;Preferred
;Preferred
:this value means that the original size of the widget is the best and preferred; the widget can be shrunk or expanded however and it will stay readable,  
:this value means that the original size of the widget is the best and preferred; the widget can be shrunk or expanded however and it will stay readable, </translate>
<translate>
<!--T:45-->
;Expanding
;Expanding
:this value means that the original size of the widget is reasonable but the widget can be also shrunk; it can be expanded as well to take as much space as possible,  
:this value means that the original size of the widget is reasonable but the widget can be also shrunk; it can be expanded as well to take as much space as possible, </translate>
<translate>
<!--T:46-->
;Minimum Expanding
;Minimum Expanding
:this value means that the original size of the widget is allowed; it can be expanded to take as much space as possible,  
:this value means that the original size of the widget is allowed; it can be expanded to take as much space as possible, </translate>
<translate>
<!--T:47-->
;Ignored
;Ignored
:this value means that the original size of the widget is ignored; the widget can be expanded to take as much space as possible but other widgets usually will not allow for that  
:this value means that the original size of the widget is ignored; the widget can be expanded to take as much space as possible but other widgets usually will not allow for that  


<!--T:30-->
Different widget types have various default size policies; for example, button widgets have default size policy set to <menuchoice>Minimum</menuchoice> (in both directions), while text field widgets have vertical size policy set to <menuchoice>Fixed</menuchoice>.  
Different widget types have various default size policies; for example, button widgets have default size policy set to <menuchoice>Minimum</menuchoice> (in both directions), while text field widgets have vertical size policy set to <menuchoice>Fixed</menuchoice>.  


<!--T:31-->
The most frequently used size policies are <menuchoice>Preferred</menuchoice>, <menuchoice>Minimum</menuchoice> and <menuchoice>Maximum</menuchoice>.  
The most frequently used size policies are <menuchoice>Preferred</menuchoice>, <menuchoice>Minimum</menuchoice> and <menuchoice>Maximum</menuchoice>.  


===== Vertical and horizontal stretch =====
===== Vertical and horizontal stretch ===== <!--T:32-->


The '''Vertical Stretch''' and '''Horizontal Stretch''' properties accept integer values greater than or equal to 0. These properties allow to fine-tune the behavior of size policies. The default value for the properties is 0. A higher value of the stretch means that the widget will be expanded more than widgets for which a lower stretch value is set.
<!--T:33-->
The <menuchoice>Vert. Stretch</menuchoice> and <menuchoice>Hor. Stretch</menuchoice> properties accept integer values greater than or equal to 0. These properties allow to fine-tune the behavior of size policies. The default value for the properties is 0. A higher value of the stretch means that the widget will be expanded more than widgets for which a lower stretch value is set.


<!--T:34-->
{{Prevnext2
{{Prevnext2
|prevpage=Special:MyLanguage/Kexi/Handbook/Building_Simple_Databases/Designing_Forms/Actions
|prevpage=Special:MyLanguage/Kexi/Handbook/Building_Simple_Databases/Designing_Forms/Actions
Line 100: Line 155:
}}
}}


<!--T:35-->
[[Category:Kexi]]
[[Category:Kexi]]
[[Category:Tutorials]]
[[Category:Tutorials]]
</translate>
</translate>

Latest revision as of 07:14, 21 April 2012

Other languages:


Size policies for widgets

Instead of setting a fixed size for your widgets, in Kexi you can choose between various widget's size policies. A size policy is a flexible strategy for controlling how a widget is stretched (or shrunk) depending on other neighbouring widgets and space available within the form.

After putting widgets into the form, typically each widget gets a proportional (Preferred) size policy. These widgets will be automatically resized with preferred settings, depending on their type and size of the entire layout itself. For example, three buttons on a line will be resized to fit their visible text.

For each widget inserted into the form, there are settings for size policy available in the Property Editor. The settings are presented as a group of properties called Size Policy.

This group of properties contains:

Horizontal Size Policy
defining horizontal size of the widget,
Vertical Size Policy
defining vertical size of the widget,
Horizontal Stretch
defining strength of activity of the Horizontal Size Policy,
Vertical Stretch
defining strength of activity of the Vertical Size Policy
Values of size policies

The following values are available in the drop down list for Hor. Policy and Vert. Policy visible in the Property Editor:

Fixed
this value means that the widget cannot be automatically resized; it should maintain the constant size defined at design time (width or height),
Minimum
this value means that the original size of the widget is set as minimal allowed, it is sufficient and there is no need for expanding the widget, but the widget will be expanded if needed. This type of policy can be used to force the widget to be expanded to the whole width or height, especially if you set a stretch value greater than 0.
Maximum
this value means that the original size of the widget is set as maximum allowed and can be decreased without breaking the widget's usability and readability if other widgets need more space,
Preferred
this value means that the original size of the widget is the best and preferred; the widget can be shrunk or expanded however and it will stay readable,
Expanding
this value means that the original size of the widget is reasonable but the widget can be also shrunk; it can be expanded as well to take as much space as possible,
Minimum Expanding
this value means that the original size of the widget is allowed; it can be expanded to take as much space as possible,
Ignored
this value means that the original size of the widget is ignored; the widget can be expanded to take as much space as possible but other widgets usually will not allow for that

Different widget types have various default size policies; for example, button widgets have default size policy set to Minimum (in both directions), while text field widgets have vertical size policy set to Fixed.

The most frequently used size policies are Preferred, Minimum and Maximum.

Vertical and horizontal stretch

The Vert. Stretch and Hor. Stretch properties accept integer values greater than or equal to 0. These properties allow to fine-tune the behavior of size policies. The default value for the properties is 0. A higher value of the stretch means that the widget will be expanded more than widgets for which a lower stretch value is set.

Retrieved from "https://wikisandbox.kde.org/index.php?title=Kexi/Handbook/Building_Simple_Databases/Designing_Forms/Widget_layouts&oldid=242060"