Creating Layouts
For example, consider whether you want a menu bar, toolbar, or other elements to always display at the top of the application window.
Often you may need a single layout to frame any of the Displays with all the information in the application. You use the tab Layouts in the environment of Displays for defining layouts.
| Info |
|---|
NOTE - The last Display listed in the Layout tab is the only one that is replaced when you change the Display. For example, new projects include a default layout called Startup. See in the figure that there are two other Displays, or components, in this Layout: AN_Header (a toolbar) and AN_Footer (a footer). The Display AN_MainPage that is listed in the last line of the DataGrid is the area that, by default, will be swapped when you request the Open another Display application. |
In the figure, the buttons above the DataGrid on the left on the bar serve, respectively, to:
Add new line and describe Display position
Remove the selected line
Climb the selected line
Down the selected line
To create a new layout:
Go to Edit> Displays> Layouts .
Click the button New York, U.. The window for creating Layouts.
Enter or select the information as needed.
Column | Description |
Layout name | Enter a Name for the layout |
Layout | Select the type of Layout being created:
|
Description | Type a description of this layout. |
Click OK. The Layouts creation window will close
In the upper-right corner of the Layouts tab, type or select the information as needed:
Column | Description |
Width | Type the height, in WPF units (independent pixels of the monitor), of the layout. This is the Display height of the application at run time. |
Height | Type the width, in WPF units (independent pixels of the monitor), of the layout. This is the width of the execution request |
Background | Select a background color for this layout. |
Click Add line to add a new line to position a Display
Enter or select the information as needed. The Displays you add are the first Displays that the layout will use.
Column | Description |
Page | Select a Display that you want to include in the layout. Only Page Displays can be used for placement in Layouts. |
Docking | Select the margin of the main viewing area of the application, to be the place of fixation (docing) for this Display:
|
HorizontalAlign | Select the horizontal alignment of this Display in layout:
|
VerticalAlign | Select the vertical alignment of this Display in layout:
|
The StartUp Layout example
Or Layout Startup, shown in the DataGrid above, comes in the Default project of Action.NET. The following information about each of these areas:
This is a schema by setting a footer header Display and the main Display in the center of the monitor. In the sole of the single Display, you must define it by a Layout as shown below in the layout Startup:
AN_Header: Is the Display header adjusted at the top left. Because the layout dimension is 1024 x 768, for the header to occupy the entire top horizontal part of the layout must have width of 1024. In the case of this application, its dimension is 1024 x 60.
AN_Footer: It is the footer of the Display, adjusted at the bottom of the Display on the left. Similar to the header, it should be 1024 in length to occupy the entire bottom of the Display. In the case of this application its dimension is 1024 x 45.
AN_MainPage: it will be the core of the layout with the various process Displays that will be used. In this application, considering that the header has height (Height) of 60 points and footer 45, the core Displays should have a vertical dimension of 768 – 60 - 45 = 663. Thus, all Displays inserted in the core of this layout should have a dimension of 1024 x 663.
| Info |
|---|
NOTE - When there is more than one layout in a project, before opening a Display you must open its layout and the Display will always be placed at the last level of the layout (in the case above level 2). For example, a script opening a layout and a Display is shown below. |
| Code Block |
|---|
@Layout.AN_NoFilterReports.Open(); @Display.AN_HistoricEventsSummary.Open(); |
Preview area settings
The display area settings control how the application should display the Displays on the monitors of the client computers, that is, they use the display modules of the Action.NET.
For this setting there are buttons and controls at the top of the Display environment, shown in the figure below.
These settings are different for normal MS-Windows customers than are required for customers using apple tablets and iPhones iOS, or in HTML5 format. The next sections detail these settings.
MS-Windows Clients ("Desktop")
To set desktop client settings:
Go to Edit>Displays>Displays .
Click Clients to set up desktops that use Windows. The window for configuration appears.
Enter or select the information as needed and click OK
Column | Description |
Maximize When Open | Select to maximize the client window to fit the monitor. |
Stretch | Choose how the layout should extend on the client monitor when using the application:
|
Scrollbar | Select for scrollbar preview in the client window. |
Title | Enter a title for the client window. |
MinimizeBox | Select to display the default minimize button. |
MaximizeBox | Select to display the default maximize button. |
CloseBox | Select to display the default close button |
ResizeBox | Select to display the default resize handle (bottom right) |
Menus | Select which menus to show
|
Mouse Cursor Visible | Select for the mouse pointer to be visible. |
OnDisplay Keyboard | Select to display a numeric keypad on the Display. |
Remote Client Comments | Select to prohibit app users from sending commands to plc |
When Mouse Is Over Command areas | allow object
|
Verify Tag Quality on Client Displays |
|
Multiples users on same computer Share user Logon | Users can run multiple instances of the application on the same computer. The user may need to log in as a different user from time to time. Select this option to automatically change the logged-on user on all running instances of the application on the same computer. |
Initial Theme | Name of the theme to be used by default when starting the program |
Enter the number of monitors that the Client viewer will use.
Select the monitor and layout to show when the application starts.
iOS Client
If necessary, also make the preview settings for iOS Customers.
To set up the desktop for iOS Customers:
Press the button iOS Device. The configuration window for iOS client appears.
Enter or select the information as needed and click OK.
Column | Description |
Disable Commands | Select to prohibit app users from sending commands to the field |
iPad Initial Page | Select the Display that iPad users should see when they launch the app on iPad. |
iPhone Initial Page | Select the Display that iPhone users should see when they launch the app on the iPhone. |
Stretch Fill | Select to resize the app to fill the device Display. |
landscape iPad | Select to resize the app to appear as landscape on iPads |
landscape iPhone | Select to resize the app to appear as landscape on iPhones |
HTML5
If you are going to use Displays with format in the HTML5 standard, also make the settings, to do so.
To set up the desktop for HTML5 Displays:
Press the button HTML5. The window for HTML5 configuration appears.
Enter or select the information as needed and click OK.
Column | Description |
Disable Commands | Select to prohibit app users from sending commands to the field |
Desktop Initial Page | Select the Display that users should see when they start the application. |
Mobile Initial Page | Select the Display that Mobileusers should see when they launch the app on their mobile phone. |
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
On this page:
|