Versions Compared
Key
- This line was added.
- This line was removed.
- Formatting was changed.
Tip |
---|
One layout defines the size of the application window and the basic arrangement of visualization components in the real-time application. You can define fixed parts as menus and indexes and parts that are replaced when moving from one screen Display to another. Be sure to plan how you want to use the screensDisplays. |
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 screens 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 Screen Display listed in the Layout tab is the only one that is replaced when you change the screenDisplay. For example, new projects include a default layout called Startup. See in the figure that there are two other screensDisplays, or components, in this Layout: AN_Header (a toolbar) and AN_Footer (a footer). The screen 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 screen Display application. |
In the figure, the buttons above the DataGrid on the left on the bar serve, respectively, to:
Add new line and describe screen 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 ScreenDisplay
Enter or select the information as needed. The Screens Displays you add are the first screens 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 screen Display and the main screen Display in the center of the monitor. In the sole of the single screenDisplay, you must define it by a Layout as shown below in the layout Startup:
AN_Header: Is the screen 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 screenDisplay, adjusted at the bottom of the screen Display on the left. Similar to the header, it should be 1024 in length to occupy the entire bottom of the screenDisplay. 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 screens Displays that will be used. In this application, considering that the header has height (Height) of 60 points and footer 45, the core screens Displays should have a vertical dimension of 768 – 60 - 45 = 663. Thus, all screens 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 screen Display you must open its layout and the screen 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 screen 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 screens 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 screens Displays with format in the HTML5 standard, also make the settings, to do so.
To set up the desktop for HTML5
screensDisplays:
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:
|