Difference between revisions of "View and Panel Designer in QPR UI"
(307027) |
(307008) |
||
Line 7: | Line 7: | ||
** Aspect ratio calculation rule: If design aspect ratio is '''A''' and aspect ratio flex is '''B''', the view's aspect ratio is allowed to change between '''A/B''' and '''A*B'''. Example: If design aspect ratio is 2 and aspect ratio flex is 4, the view's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8). | ** Aspect ratio calculation rule: If design aspect ratio is '''A''' and aspect ratio flex is '''B''', the view's aspect ratio is allowed to change between '''A/B''' and '''A*B'''. Example: If design aspect ratio is 2 and aspect ratio flex is 4, the view's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8). | ||
** View contents always take all available space horizontally. If the aspect ratio's lower limit is reached (i.e. view contents are not allowed use all available space vertically), there may be empty space in the bottom of the view. If the aspect ratio's higher limit is reached (i.e. view contents don't fit vertically), the view has a vertical scrollbar. | ** View contents always take all available space horizontally. If the aspect ratio's lower limit is reached (i.e. view contents are not allowed use all available space vertically), there may be empty space in the bottom of the view. If the aspect ratio's higher limit is reached (i.e. view contents don't fit vertically), the view has a vertical scrollbar. | ||
− | ** The aspect ratio flex is useful e.g. for views which don't work properly if the aspect ratio | + | ** The aspect ratio flex is useful e.g. for views which don't work properly if the aspect ratio stretches to too extreme. |
+ | * '''Background color''': The background color of the view. | ||
+ | * '''Inner margin''': The margin, in pixels, between the panels in the view. | ||
+ | * '''Outer margin''': The margin, in pixels, between the panel(s) and the view borders. | ||
{{MDBTutorialViewPropertiesAndContext}} | {{MDBTutorialViewPropertiesAndContext}} | ||
[[Category: QPR MobileDashboard]] | [[Category: QPR MobileDashboard]] |
Revision as of 10:31, 26 April 2017
In the View Properties, you can define the Name, Description, and Context of the view. In addition, you can define how much the aspect ratio of the view is allowed to change from the initial aspect ratio in different sized screens.
Presentation tab
The View's Presentation tab contains following settings:
- Aspect ratio flex: Decimal number determining how much the view content's aspect ratio (width divided by height) is allowed to vary. Note that this setting doesn't affect the aspect ratio of the view itself, but only its contents, i.e. panels.
- The view has a design aspect ratio which is determined by how panels are arranged in the view designer. Note that the whole available design area doesn't matter - only the actual panels determine the shown area and the design aspect ratio.
- Aspect ratio calculation rule: If design aspect ratio is A and aspect ratio flex is B, the view's aspect ratio is allowed to change between A/B and A*B. Example: If design aspect ratio is 2 and aspect ratio flex is 4, the view's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8).
- View contents always take all available space horizontally. If the aspect ratio's lower limit is reached (i.e. view contents are not allowed use all available space vertically), there may be empty space in the bottom of the view. If the aspect ratio's higher limit is reached (i.e. view contents don't fit vertically), the view has a vertical scrollbar.
- The aspect ratio flex is useful e.g. for views which don't work properly if the aspect ratio stretches to too extreme.
- Background color: The background color of the view.
- Inner margin: The margin, in pixels, between the panels in the view.
- Outer margin: The margin, in pixels, between the panel(s) and the view borders.
Defining View Properties and Variables
To define context variables, type in the name of the variable to the text field and click the check mark. After that, you can click the value field and type in the value for your context variable. Context variables starting with "sys:" are system variables which have special purpose in QPR UI - use them only for their intended purpose. The Behavior selection affects the context variable used explained in Context Variable Behaviors. To see what context variable values are used in the view, panel, or presentation object, select the Show effective context check box in the Context tab of the view, panel, or presentation object properties pages.
Variables Usage Example
There is a view with one panel, in which there is one presentation object. The Session variable values are defined as follows:
Variable name | Value |
---|---|
AccountManager | John Smith |
Country | Sweden |
In the View Properties, the following variable values are defined:
Variable name | Value | Behavior |
---|---|---|
AccountManager | William Taylor | Stored variable |
CustomerGroup | Kids | Local variable |
In the Panel Properties, the following variable values are defined:
Variable name | Value | Behavior |
---|---|---|
AccountManager | Susan Chapman | Local variable |
Country | Finland | Local variable |
In the Presentation Object Properties, the following variable values are defined:
Variable name | Value | Behavior |
---|---|---|
ProductGroup | Umbrellas | Stored variable |
In the Effective View Context, these result into the values shown below. Note the Source column displaying the information where the effective context comes from:
Variable name | Value | Source | Scope |
---|---|---|---|
AccountManager | William Taylor | Scope of the view | View |
Country | Sweden | Inherited from session context | Session |
CustomerGroup | Kids | Scope of the view | View |
In the Effective Panel Context, these result into the values shown below. Note the Source column displaying the information where the effective context comes from:
Variable name | Value | Source | Scope |
---|---|---|---|
AccountManager | Susan Chapman | Initialized from the panel's context | Panel |
Country | Finland | Initialized from the panel's context | Panel |
CustomerGroup | Kids | Inherited from the effective context of the view | View |
In the Effective Presentation Object Context, these result into the values shown below. Note the Source column displaying the information where the effective context comes from:
Variable name | Value | Source | Scope |
---|---|---|---|
AccountManager | Susan Chapman | Inherited from the effective context of the panel | Panel |
Country | Finland | Inherited from the effective context of the panel | Panel |
ProductGroup | Umbrellas | Scope of the presentation object | Presentation object |
CustomerGroup | Kids | Inherited from the effective context of the view | View |
To put it more concisely, the context variable values (and their behaviors) are as follows:
Context Variable | Session | View | Panel | Presentation Object |
---|---|---|---|---|
AccountManager | John Smith | William Taylor (Stored variable) | Susan Chapman (Local variable) | |
Country | Sweden | Finland (Local variable) | ||
ProductGroup | Umbrellas (Stored variable) | |||
CustomerGroup | Kids (Local variable) |
The effective context values are:
Context Variable | Session | View | Panel | Presentation Object |
---|---|---|---|---|
AccountManager | John Smith | William Taylor | Susan Chapman | Susan Chapman |
Country | Sweden | Sweden | Finland | Finland |
ProductGroup | Umbrellas | |||
CustomerGroup | Kids | Kids | Kids |