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.

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: DockPanel - Select this type to position Displays relative to the layout and other Displays. Canvas - Select to position Displays in an absolute position by entering the position in WPF units (independent pixels of the monitor).
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: Left (left), Top, Right, Bottom
HorizontalAlign	Select the horizontal alignment of this Display in layout: Left, Center, Right
VerticalAlign	Select the vertical alignment of this Display in layout: Top, Center, Bottom

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.

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.

@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: None - Layout should not be resized: The exact size that was configured for the layout should be shown. In this case it is recommended to select the option to include the scroll bar. Fill - The layout will be resized to completely fill the space available on the client monitor, without taking into account the proportion of the original layout. Uniform - The layout will be resized proportionally to the size of the client monitor, maintaining the proportion of the layout. original. UniformToFill - The resized layout both to maintain the aspect ratio and also to completely fill the space available on the client monitor. This can result in cutting some parts of the layout.
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 File Tools Security
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 Change cursor - Select the cursor type.
Verify Tag Quality on Client Displays	On undefined quality show - (When the quality is undefined) Select the option and the character that should be shown when the quality of the data coming from the field is undefined. On OPC Bad quality show - Select the option and character that should be shown when the OPC server indicates that the data quality is poor.
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.

On this page:

Using Layouts