How to Work with Screens > Adding Display Controls to a Screen

Control Purpose

This control is used to display HTML content such as a website within the MCL application. The operator will be able to access and interact with a website and/or view the HTML content of a local file stored in the device. This control can be very useful for providing informative pages with instructions and/or diagrams, etc. For instance, it can provide a web page with a form to be filled in by the operator.

Check the examples at the end of the topic.

Currently, the Web View control can ONLY be applied to Android target devices with an installed MCL-Client v 4.10.60 or higher.

For security reasons, the Web View control does NOT allow default access to the device's storage.

When selecting a URL or HTML file, consider the amount of data that will be uploaded into the device/MCL application. It could affect the application's running efficiency.

Keep in mind the size of the control and the screen it will be included in. Having a web page with a lot of information displayed in a very small area can be difficult for the operator to view/navigate through.

Drag the Web View control from the top section of the "Control" tab onto the screen.

At this stage, there is still no HTML content/URL associated to this control.

Step-by-step

1. Drag the control onto the screen.

2. Now, double-click the selected control on the screen OR the representation in the tree view to open the properties window.

The "General" tab is open by default.

3. In the "Source" section, define the source for the HTML data to be viewed within this control:

•If you want the control to access a website, enter its URL directly OR click to access the "URL Assistant" and define the intended URL. See Detail of URL Assistant.

•If the control is meant to display the HTML content of a locally sourced file (file placed in a device's folder), enter the path to the file.

The file can be placed in MCL's "Resources" folder. If so, you can use the <RES> alias in the file's path. See Working with Aliases.

If using a file as the data source in a development environment, you can also use one of the following methods:

•After importing the intended HTML file onto the "Resources" module ("Others" section), you can drag the file and drop it onto the Web View control you have added to the screen OR onto the "Web URL or File" option of its properties window.

•Drag the compatible file from an OS browse window and drop it on the Web View control OR onto the "Web URL or File" option.

This method implies an automatic import onto the project - once you drop the intended file onto the control, it becomes part of the "Resources" module.

•As an alternative, you can use a variable with the intended URL or folder path - right-click this box, click the "Variable Select" option and select the variable with that value.

4. In the "Options" section, check the features/options you want the control to have:

Allow Geolocation

Check this option to allow the accessed website to retrieve the device's geolocation information.

Control Panel

When checked, this option enables certain page display/navigation controls such as "Go Back", "Zoom In" "Zoom Out" or "Refresh". This means the operator will be able to have some control over the HTML content he is viewing.

We recommend you keep this option checked so the operator can have an easier page navigation experience.

Page Refresh

Check this option to ensure an automatic refresh with a refresh cycle you defined.

Once you check this option, the related drop-down becomes active. Select the required time period from the drop-down.

5. Go to the "Layout" tab.

6. Define the control's style:

X Position	Maintain the given values or specify the control's position within the screen, by providing the "X" and "Y" coordinates. Use the attached arrows OR fill in the values manually.
Y Position
Width	Define the control's width and height. Use the attached arrows OR fill in the values manually.
Height

Detail of Position/Size values

7. In the "Border" section, define the control's borders:

Thickness

Define the thickness of the control's border line. Use the attached arrows OR enter the value manually.

If the option is kept empty, there will be no visible borders to the control.

Line Color

This option ONLY becomes active after you have defined a value for the border's thickness.

Define the border line's color. Maintain the default "black" OR click and customize a color in the resulting window.

8. In the "Control Settings" section, attribute a name to the control. This name is displayed in the tree view.

9. Check the "Enable" option to activate the feature(s) you selected in the "General" tab.

10. Check the "Visible" option to ensure the control is displayed on the device's screen.

11. If required, use the icon (located on the upper right corner of the properties window) to attach any relevant notes to this control. Enter your text in the resulting window. This information is displayed in the "Developer report". See Report.

Use the right-click in MCL-Designer's input boxes to access some related options as well as the general "Cut"; "Copy"; "Paste"; "Search"actions (active/inactive according to the current context).

Ex: If you right-click the "Text Data" input box (included in a "Display Text" properties window), you are provided with the general editing/search actions and other specific options such as "Variable Select" (see "Variable Select") ;"Variable Insert" (see "Variable Insert"), "Insert Special Character" (see To Insert Special Characters into a Control's Text Input Field) and "Localization Select" (see Localization List).

If you right-click any other input box, it may provide other possibilities.

12. Click to apply the editing choices.

The Web View control has been successfully added to the screen.

If any subsequent edition of the control's properties is required, double-click the Web View in the tree view OR right-click it and select "Edit" to open the properties window.