Class # WebContainer

forsearch

Popover --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ## Description A WebContainer is a way to create a group of controls that are treated as a single control. A WebContainer is a great way to simplify complex web page layouts. In addition, with a WebContainer, you can create reusable controls to include on multiple web pages or on other web containers. ## Properties

table-centered_columns_3_and_4

| Name | Type | Read-Only | Shared | |-------------------------------------------------|------------------------------------------------------|-----------|--------| | `ContextualMenu` | `WebMenuItem` | | | | `ControlCount` | `Integer` | ✓ | | | `ControlID` | `String` | ✓ | | | `Enabled` | `Boolean` | | | | `Height` | `Integer` | | | | `Indicator` | `Indicators` | | | | `LayoutDirection` | `WebView.LayoutDirections` | | | | `LayoutType` | `WebView.LayoutTypes` | | | | `Left` | `Integer` | | | | `LockBottom` | `Boolean` | | | | `LockHorizontal` | `Boolean` | | | | `LockLeft` | `Boolean` | | | | `LockRight` | `Boolean` | | | | `LockTop` | `Boolean` | | | | `LockVertical` | `Boolean` | | | | `Name` | `String` | ✓ | | | `Page` | `WebPage` | ✓ | | | `PanelIndex` | `Integer` | | | | `Parent` | `WebView` | ✓ | | | `ScrollDirection` | `ScrollDirections` | ✓ | | | `ScrollPosition` | `Point` | | | | `TabIndex` | `Integer` | | | | `Tooltip` | `WebToolTip` | | | | `Top` | `Integer` | | | | `Visible` | `Boolean` | | | | `Width` | `Integer` | | | ## Methods

table-centered_column_4

| Name | Parameters | Returns | Shared | |-----------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------|--------| | `AcceptPictureDrop` | dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All` | | | | `AcceptRawDataDrop` | dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All` | | | | `AcceptTextDrop` | dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All` | | | | `AddControl` | Child As `WebControl` | | | | `AllowPictureDrag` | dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All` | | | | `AllowRawDataDrag` | dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All` | | | | `AllowTextDrag` | dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All` | | | | `Close` | | | | | `ControlAt` | index As `Integer` | `WebControl` | | | `Controls` | | `Iterable` | | | `EmbedWithin` | View As `WebView`, Width As `Integer`, Height As `Integer` | | | | | View As `WebView`, X As `Integer`, Y As `Integer`, Width As `Integer`, Height As `Integer` | | | | `ExecuteJavaScript` | script As `String` | | | | `GotoURL` | url As `String`, inNewWindow As `Boolean` = `False` | | | | `LastControlIndex` | | `Integer` | | | `Objects` | | `Iterable` | | | `RemoveControl` | control As `WebUIControl` | | | | `SetFocus` | | | | | `ShowPopover` | parentControl As `WebUIControl`, displaySide As `WebContainer.DisplaySides` = `WebContainer.DisplaySides`.Bottom, x As `Integer` = -1, y As `Integer` = -1 | | | | `Style` | | `WebStyle` | | | | `Assigns` value As `WebStyle` | | | | `UpdateBrowser` | | | | ## Events

table-centered_column_4

| Name | Parameters | Returns | |---------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------| | `Closed` | | | | `ContextualMenuSelected` | hitItem As `WebMenuItem` | | | `DropObject` | obj As `WebDragItem`, action As `WebDragItem.DragActionTypes`, x As `Integer`, y As `Integer` | | | `Hidden` | | | | `Opening` | | | | `Overflowed` | width As `Integer`, height As `Integer` | | | `Pressed` | x As `Integer`, y As `Integer` | | | `Resized` | | | | `Scrolled` | | | | `Shown` | | | ## Enumerations

forsearch

WebContainer.DisplaySides ### DisplaySides > Specifies where the popover will display relative to the control its popping over. > > | Enum | Description | > |--------|-------------------------------------| > | Bottom | Below the parent control. | > | Left | To the left of the parent control. | > | Top | Above the parent control. | > | Right | To the right of the parent control. |

forsearch

WebContainer.ScrollDirections ### ScrollDirections > The various directions that can be assigned for scrolling. > > | Enum | Description | > |------------|---------------------------------------------------------------------------------------------------| > | None | The WebContainer cannot be scrolled. | > | Horizontal | The WebContainer can only be scrolled horizontally. | > | Vertical | The WebContainer can only be scrolled vertically. | > | Both | The WebContainer can be scrolled both horizontally and vertically. | ## Property descriptions

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

forsearch

WebContainer.ContextualMenu **ContextualMenu** As `WebMenuItem` > If you assign a `WebMenuItem` to the control, it will be displayed when the user right-clicks the control. > > On a `WebPage`, you can disable/remove the default contextual menu by an empty `WebMenuItem` class object to this property. > > This code populates a contextual menu in the Shown event of the control. > > ``` xojo > Var menu As New WebMenuItem > > menu.AddMenuItem("One") > menu.AddMenuItem("Two") > menu.AddMenuItem("Three") > Me.ContextualMenu = menu > ``` > > The menu selection is then handled by the ContextualMenuSelected event when the user right-clicks on the control. For example, it can be of the form: > > ``` xojo > Select Case hitItem.Text > Case "One" > MessageBox("One") > Case "Two" > MessageBox("Two") > Case "Three" > MessageBox("Three") > End Select > ```

forsearch

WebContainer.ControlCount **ControlCount** As `Integer` > The number of controls on the WebContainer. > > This property is read-only.

forsearch

WebContainer.ControlID **ControlID** As `String` > Identifies the control on a per session basis. > > This property is read-only.

forsearch

WebContainer.Enabled **Enabled** As `Boolean` > When `True` the **WebControl** is drawn enabled and responds to user action. When `False`, the control appears as disabled and does not respond to user actions. > > In the case of `WebTimer`, when set to `False` this disables and stops the WebTimer. When set to `True`, it starts the WebTimer. > > Disable a button when a check box value changes: > > ``` xojo > If AllowSaveCheckBox.Value Then > SaveButton.Enabled = True > Else > AllowSaveButton.Enabled = False > End If > ```

forsearch

WebContainer.Height **Height** As `Integer` > The height (in pixels) of the control.

forsearch

WebContainer.Indicator **Indicator** As `Indicators` > The color scheme for the control.

forsearch

WebContainer.LayoutDirection **LayoutDirection** As `WebView.LayoutDirections` > The direction in which WebContainer will flow when added at runtime to a layout whose `LayoutType` is set to Flex.

forsearch

WebContainer.LayoutType **LayoutType** As `WebView.LayoutTypes` > The type of layout dictates whether controls are positioned at fixed locations or can move to accommodate changes to the bounds of the WebView, in the latter case, only for WebContainer that are added at runtime to a layout whose type is set to Flex.

forsearch

WebContainer.Left **Left** As `Integer` > The position of the left side of the **WebUIControl** in pixels, relative to the web page.

forsearch

WebContainer.LockBottom **LockBottom** As `Boolean` > Determines whether the bottom edge of the control should stay at a set distance from the bottom edge of the parent control, if there is one, or the owning web page.

forsearch

WebContainer.LockHorizontal **LockHorizontal** As `Boolean` > LockHorizontal overrides LockLeft and LockRight. It allows you to proportionally lock a control's position to the center of its parent control (or web page). > > For example, if you place a control in the center of the page and sets both LockHorizontal and LockVertical, the control will stay in the center of the page.

forsearch

WebContainer.LockLeft **LockLeft** As `Boolean` > Determines whether the left edge of the control should stay at a set distance from the left edge of the parent control, if there is one, or the owning web page.

forsearch

WebContainer.LockRight **LockRight** As `Boolean` > Determines whether the right edge of the control should stay at a set distance from the right edge of the parent control, if there is one, or the owning web page.

forsearch

WebContainer.LockTop **LockTop** As `Boolean` > Determines whether the top edge of the control should stay at a set distance from the top edge of the parent control, if there is one, or the owning web page.

forsearch

WebContainer.LockVertical **LockVertical** As `Boolean` > LockVertical overrides LockTop and LockBottom. It allows you to proportionally lock a control's position to keep it centered within the parent control or web page. > > For example, if you place a control in the center of the page, and sets both LockHorizontal and LockVertical, the control will stay in the center of the page.

forsearch

WebContainer.Name **Name** As `String` > The name of the control. > > This property is read-only.

forsearch

WebContainer.Page **Page** As `WebPage` > Identifies the web page that contains the control. > > This property is read-only.

forsearch

WebContainer.PanelIndex **PanelIndex** As `Integer` > If the control has been placed on a WebTabPanel or `WebPagePanel` control, this is the panel (page/tab) that the control is on. If the control is not on a panel, it returns -1. > > The first panel is numbered zero. If the control has been placed on a panel of a WebTabPanel or `WebPagePanel` control, it returns the panel number. If the control is not on a `WebPagePanel` or WebTabPanel, it returns -1. If you change the PanelIndex to a nonexistent panel, the control will disappear until you give it a PanelIndex value that corresponds to a panel that exists. > > If you are looking to change the currently selected panel (page/tab), use `SelectedPanelIndex`. > > This code displays the panel index of the control that is on the page. > > ``` xojo > MessageBox(Me.SelectedPanelIndex.ToString) > ```

forsearch

WebContainer.Parent **Parent** As `WebView` > Used to get the control's parent control or page. If the parent control is a WebContainer, then it returns the WebContainer. If it is on a `WebPage`, it returns the `WebPage`. > > This property is read-only.

forsearch

WebContainer.ScrollDirection **ScrollDirection** As `ScrollDirections` > The direction or directions in which the user can scroll the WebContainer assuming that the bounds of the instance are smaller than bounds of the WebContainer itself. > > This property is read-only.

forsearch

WebContainer.ScrollPosition **ScrollPosition** As `Point` > Returns the current scroll position of the WebContainer as a `Point` object, representing the coordinates (X, Y) of the top-left corner of the visible content area. The X value indicates horizontal scrolling, and the Y value indicates vertical scrolling. This property is only meaningful when scrolling is enabled and available within the WebContainer (e.g., when content exceeds the container's visible bounds). If scrolling is not possible, the returned value reflects the default position (typically (0, 0)).

forsearch

WebContainer.TabIndex **TabIndex** As `Integer` > The **WebContainer's** control's position in the Tab Order. The control with a TabIndex of 0 is the first **WebUIControl** to get the focus when the page opens in the browser. > > This example sets the control's TabIndex. > > ``` xojo > Me.TabIndex = 2 > ```

forsearch

WebContainer.Tooltip **Tooltip** As `WebToolTip` > Text of a message displayed as a tooltip. > > The tip is displayed when the user places the mouse on the control and leaves it there. > > This code in the Shown event of a Button sets the tooltip: > > ``` xojo > Me.Tooltip = "Save changes" > ```

forsearch

WebContainer.Top **Top** As `Integer` > The top of the control in local coordinates relative to the web page.

forsearch

WebContainer.Visible **Visible** As `Boolean` > If `True`, the control is drawn. If `False`, it's not. > > Hide a control based on a checkbox setting: > > ``` xojo > If ShowEmailCheckbox.Value Then > EmailField.Visible = True > Else > EmailField.Visible = False > End If > ```

forsearch

WebContainer.Width **Width** As `Integer` > The width (in pixels) of the web control. > > This code in the Shown event handler increases the size of the control: > > ``` xojo > Me.Width = Me.Width + 50 > ``` ## Method descriptions

forsearch

WebContainer.AcceptPictureDrop **AcceptPictureDrop**(dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All`) > Allows the control to accept a picture drop of a `WebDragItem`.

forsearch

WebContainer.AcceptRawDataDrop **AcceptRawDataDrop**(dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All`) > Allows the control to accept a raw data drop of a `WebDragItem`.

forsearch

WebContainer.AcceptTextDrop **AcceptTextDrop**(dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All`) > Allows the control to accept a picture drop of a `WebDragItem`.

forsearch

WebContainer.AddControl **AddControl**(Child As `WebControl`) > Adds the passed `Control` to the `WebView`. > > This code adds a `WebTextField` to the page: > > ``` xojo > Var tf As New WebTextField > tf.Left = 100 > tf.Top = 50 > tf.Enabled = True > Self.AddControl(tf) > ```

forsearch

WebContainer.AllowPictureDrag **AllowPictureDrag**(dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All`) > Allows the control to be dragged as a picture.

forsearch

WebContainer.AllowRawDataDrag **AllowRawDataDrag**(dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All`) > Allows the control to be dragged as raw data.

forsearch

WebContainer.AllowTextDrag **AllowTextDrag**(dragActionType As `WebDragItem.DragActionTypes` = `WebDragItem.DragActionTypes.All`) > Allows the control to be dragged as text.

forsearch

WebContainer.Close **Close** > This removes the control from the page, but only if the control is part of a Control Set or is a WebContainer. Otherwise it does not do anything. > > In general, if you want to add or remove controls from pages, use a WebContainer.

forsearch

WebContainer.ControlAt **ControlAt**(index As `Integer`) As `WebControl` > Returns the `WebControl` at the *index* passed.

forsearch

WebContainer.Controls **Controls** As `Iterable` > Allows you to iterate through the controls on the layout. > >

> >

> > Note > >

> > This does not include non-control object instances. For that, use the `Objects` method. > >

forsearch

WebContainer.EmbedWithin **EmbedWithin**(webView As `WebView`, Width As `Integer`, Height As `Integer`) > Embeds the WebView in the current page without drawing the window frame, title bar, title bar widgets, grow handle, and so forth. Use this set of parameters with webpages whose `LayoutType` is Flex. **EmbedWithin**(webView As `WebView`, X As `Integer`, Y As `Integer`, Width As `Integer`, Height As `Integer`) > Embeds the WebView in the current page without drawing the window frame, title bar, title bar widgets, grow handle, and so forth. Use this set of parameters with webpages whose `LayoutType` is Fixed. > > The *X* and *Y* parameters determine the location of the top-left corner, relative to the containing page. The parameters *Width* and *Height* determine the size of the embedded view. > > You can use EmbedWithin in to dynamically add controls to a page. Add the control (or controls) you want to add to a WebContainer and then use EmbedWithin to add the container to the page at runtime. > > The locking properties of the WebContainer are not carried over when you use EmbedWithin. Instead, set these values accordingly before calling EmbedWithin. For example: > > ``` xojo > Var c As New MyContainer > c.LockLeft = True > c.LockTop = True > c.LockRight = True > c.EmbedWithin(Self, 0, 0, c.Width, c.Height) > ``` > > This code adds a WebContainer, called *LoginContainer*, to a web page at runtime: > > ``` xojo > Var login As New LoginContainer > login.LockLeft = True > login.LockTop = True > login.EmbedWithin(Self, 0, 0, login.Width, login.Height) > ```

forsearch

WebContainer.ExecuteJavaScript **ExecuteJavaScript**(script As `String`) > Executes the JavaScript passed. The JavaScript passed can call a JavaScript function in a WebPageSource control. > > The Xojo web framework uses EcmaScript 6 which is more strict than previous versions of JavaScript. For more details, see the [EcmaScript 6 documentation](https://www.ecma-international.org/ecma-262/6.0/). > > This code in the Pressed event of a Button displays an alert using JavaScript: > > ``` xojo > Me.ExecuteJavaScript("alert('Hello!');") > ``` > > This code will select the text in a WebTextField (or WebTextArea): > > ``` xojo > WebTextField1.ExecuteJavascript("document.getElementById('" + _ > WebTextField1.ControlID + "_inner').select();") > ```

forsearch

WebContainer.GotoURL **GotoURL**(url As `String`, inNewWindow As `Boolean` = `False`) > Opens the passed *url* in place of the current web page or downloads a file. If *inNewWindow* is `True`, the browser is asked to open the *url* in a new window. > > If the browser has popup windows disabled and *inNewWindow* is `True`, the method silently fails and the page is not shown. > > If *inNewWindow* is `False`, the running web app is replaced with the specified *url*. If you want to display an external web site within your web app, use the `WebHTMLViewer` control. > > Display a web site in a new popup window: > > ``` xojo > Me.GotoURL("http://www.wikipedia.org", True) > ```

forsearch

WebContainer.LastControlIndex **LastControlIndex** As `Integer` > The index of the last `WebControl` on the `WebView`.

forsearch

WebContainer.Objects **Objects** As `Iterable` > Allows you to iterate through all the non-control object instances on the container. > >

> >

> > Note > >

> > This does not include controls. For that, use the `Controls` method. > >

forsearch

WebContainer.RemoveControl **RemoveControl**(control As `WebUIControl`) > Removes the *control* from the WebContainer.

forsearch

WebContainer.SetFocus **SetFocus** > Sets the focus to the `Control`. > > This code checks for a required value when a button is pressed: > > ``` xojo > If UserNameField.Text.IsEmpty Then > MessageBox("Please enter your UserName.") > UserNameField.SetFocus > Return > End If > ```

forsearch

WebContainer.ShowPopover **ShowPopover**(parentControl As `WebUIControl`, displaySide As `WebContainer.DisplaySides` = `WebContainer.DisplaySides`.Bottom, x As `Integer` = -1, y As `Integer` = -1) > Displays the container as a popover next to the *parentControl* based upon the parameters passed. When provided, the optional *x* and *y* values passed display the popover at that offset relative to the upper-left corner of the parent control. > > This example from a `button's Pressed` event displays the container named *MyPopover* below (the default) the button: > > ``` xojo > Var c As New MyPopover > c.ShowPopover(Me) > ```

forsearch

WebContainer.Style **Style** As `WebStyle` **Style**(`Assigns` value As `WebStyle`) > The `WebStyle` for the control. > > In the `Pressed` event of a `WebButton`, set the text to bold: > > ``` xojo > Var style As New WebStyle > style.Bold = True > Me.Style = style > ```

forsearch

WebContainer.UpdateBrowser **UpdateBrowser** > Forces the current values of the control to be sent to the browser. > > This method is useful when you are computing values in a loop and wish to update the browser immediately rather than wait until the current method ends. > > This code iterates through a `RowSet` of `database rows`, updates a `ProgressBar` and then forces the updated `ProgressBar` to be sent to the browser via UpdateBrowser. > > ``` xojo > ProgressBar1.MaximumValue = SalesData.RowCount > For Each row As DatabaseRow in SalesData > AnalyzeSales(row) > ProgressBar1.Value = ProgressBar1.Value + 1 > ProgressBar1.UpdateBrowser > Next > ``` ## Event descriptions

forsearch

WebContainer.Closed **Closed** > The control has been removed from the browser either because the page has closed or the control's Close method was called.

forsearch

WebContainer.ContextualMenuSelected **ContextualMenuSelected**(hitItem As `WebMenuItem`) > Called when a contextual menu item is selected. This selected item is contained in *hitItem*. > > This code populates a contextual menu in the Opening event of a `WebToolbar`: > > ``` xojo > Var menu As New WebMenuItem > > menu.AddMenuItem("One") > menu.AddMenuItem("Two") > menu.AddMenuItem("Three") > Me.ContextualMenu = menu > ``` > > The menu selection is then handled by the ContextualMenuSelected event when the user right-clicks on the control. For example, it can be of the form: > > ``` xojo > Select Case hitItem.Text > Case "One" > MessageBox("One") > Case "Two" > MessageBox("Two") > Case "Three" > MessageBox("Three") > End Select > ```

forsearch

WebContainer.DropObject **DropObject**(obj As `WebDragItem`, action As `WebDragItem.DragActionTypes`, x As `Integer`, y As `Integer`) > Called when a dragged item is over a control that can accept it. The dragged item is contained in *obj* and the type of drag is identified by *action*.

forsearch

WebContainer.Hidden **Hidden** > The control is about to become no longer visible. This could be because the page is being closed, is being replaced as the foreground page by another page or because the control or a parent control's Visible property has been set to `False`. > > The event is similar to the `Window.Deactivate` event in a desktop app.

forsearch

WebContainer.Opening **Opening** > The control has been created and the page is opening but has not been sent to the browser yet. > > The Opening event handler can be used to initialize non-visual properties and settings for controls. > > In most cases, you should use the `Shown` event to initialize controls.

forsearch

WebContainer.Overflowed **Overflowed**(width As `Integer`, height As `Integer`) > The area (in pixels) by which WebContainer have overflowed the bounds of a WebView whose `LayoutType` is set to `WebView.LayoutTypes`.

forsearch

WebContainer.Pressed **Pressed**(x As `Integer`, y As `Integer`) > The user pressed on the container at the coordinates passed.

forsearch

WebContainer.Resized **Resized** > The `WebView` has been resized either because the user resized the browser window or the `WebView` was resized at runtime via code.

forsearch

WebContainer.Scrolled **Scrolled** > The WebContainer has been scrolled.

forsearch

WebContainer.Shown **Shown** > The control has appeared on the currently displayed page. This could be because its parent page just finished loading, its parent page has come to the foreground or the control is now visible having been previously invisible because it or its parent control's Visible property has been set to `True`. > > Use the Shown event for initializing your controls or doing anything that would interact with other controls or user interface elements on the web page instead of the `Opening` event. > >

> >

> > Note > >

> > This event is the web equivalent to the `DesktopWindow.Activated` event. > >

> > This code in the Shown event of a `WebListBox` adds 2 rows with 3 columns: > > ``` xojo > Me.RemoveAllRows > Me.AddRow("Row 1", "Bob", "Roberts") > Me.AddRow("Row 2", "Barb", "Reynolds") > ``` > > This example sets the text of a label: > > ``` xojo > If Session.LoggedIn Then > Me.Text = "Welcome!" > Else > Me.Text = "Welcome, " + Session.UserName > End If > ``` ## Notes This class is useful for creating reusable sets of controls. Itʼs also useful for creating scrollable views. You can create a scrollable view by creating a WebContainer and then after placing it on a webpage or other WebContainer, make the WebContainer on the page smaller than it would normally appear. The `ScrollDirection` property controls which directions the user can scroll the WebContainer if any. You can also use a WebContainer to center your page contents in the browser window. To do so, put all your controls on a WebContainer and then add the WebContainer to a WebPage. For the properties of the WebContainer, select LockVertical and LockHorizontal to ensure that the WebContainer always stays centered in the page displayed in the browser. WebContainers can only contain controls that are subclasses of `WebUIControl`. ## Sample code This code adds a WebContainer, called *LoginContainer*, to a web page at runtime: ``` xojo Var login As New LoginContainer login.EmbedWithin(Self, 100, 100, login.Width, login.Height) ``` ## Compatibility | | | |-----------------------|-----| | **Project Types** | Web | | **Operating Systems** | All |

`WebView` parent class; `WebUIControl`, `WebPage` classes.