Dynamically altering WebContainer

Getting Started
1

I’ve been reading about WebContainers as a way to get my WebApp’s WebPages to appear centered in a browser instead of TopLeft. I created a WebContainer and then moved all the controls from a particular WebPage (call it WebPage1 here) to that new WebContainer. I then dragged an instance of that new WebContainer (call the instance WebContainer1 here) onto WebPage1 and adjusted all WebPage1’s methods and handlers to so that they access WebContainer1’s fields with dot notation that prefixes references to them with WebContainer1’s name (WebContainer1.TextField1 instead of TextField1, for instance). It all works fine. Removing the Left and Top anchors on this new WebContainer now centers WebPage1

Now I’d like to place a Button (call it MobileButton here) on the new WebContainer that will anchor the WebContainer Left and Top, which makes it easier for mobile users to use WebPage1. I can’t seem to make that button do anything. I placed the following in its Action handler:

Self.LockLeft = True Self.LockTop = True

Clicking that button fails to push WebContainer1 to Left and Top. Do I really need to have yet a second WebContainer to accomplish this?

2

while the lock parameters for things embedded in webContainers do seem to be broken to me, that only applies when the container is resized.

Are you sure you don’t just want to set the self.left and self.top properties to 0? or some value near the left of the screen? locking it won’t move it.

3

James. That works. Thank you.

So now I have another question related to this. Suppose I don’t even place an instance of WebContainer in WebPage1 using the IDE. Rather, I create it dynamically. How do I create it to be centered on WebPage1? I have a problem with the EmbedWithin line here:

Dim c As New WebContainer c.LockLeft = False c.LockRight = False c.LockHorizontal = True c.LockVertical = True c.EmbedWithin(Self, 0, 0, c.Width, c.Height)

I don’t know what to put in the Left and Top values to replace the 0’s that you see there that will survive resizing the browser window. That code places the container on the Top Left, the way I wanted the Mobile button to do. But how do get it centered with EmbedWithin?

4

I just experienced a case where relocating controls within a webcontainer breaks the locking. This seems to be a Xojo bug.

I created some kind of listbox replacement by using webcontainers and I wanted the header labels to adjust as soon as the vertical scrollbar appears. The problem was that after setting a new x-position programatically, the .LockRight property no longer worked.

My current workaround is that I created 2 header containers which contain the same header labels at different positions. Then I keep one visible and hide the other, and vice versa, as soon as required…

https://www.seminar.pro/cgi-bin/t/webshop.cgi

5

Well, I finally got this working. To do it, I created a Session Property called MyContainer1State (As Integer). In Session.Open that value is set to 1. This later tells WebPage1.Show to use a centered MyContainer1. If I wanted the default to be Top/Left 0, I would have set that value to 0. See the code that follows to see how this works.

WebPage1 no longer has MyContainer1 in it (in the IDE). However, now it has a Property called MyContainer1 instead. WebPage1 is essentially a naked in the IDE.

The parent MyContainer of concern here has a button that sends MyContainer to Top/Left 0, and another button that centers it.

WebPage1.Show does this:

[code] Dim c As New MyContainer
If Session.MyContainer1State = 1 Then
// This centers the container to be embedded.
Dim l As Integer = (Self.Width - c.Width)/2
Dim t As Integer = (Self.Height - c.Height)/2
c.LockHorizontal = True
c.LockVertical = True
c.EmbedWithin( Self, l, t, c.Width, c.Height )
Else
// This moves the container to be embedded to Top/Left 0.
c.LockHorizontal = False
c.LockVertical = False
c.EmbedWithin( Self, 0, 0, c.Width, c.Height )
End If

// Set the Property MyContainer1 to the selected container.
// This Property will be used in Methods and Handlers instead of a control reference
// It has the same name as the no-longer-exsiting container object, so Methods and
// Handlers don’t need updating.
MyContainer1 = c[/code]

The MyContainer1 button that centers MyContainer1 does this:

Session.MyContainer1State = 1 WebPage1.SaveWebPage1Data WebPage1.Close WebPage1.Show

The MyContainer1 button that sends MyContainer1 to Top/Left 0 does this:

Session.MyContainer1State = 0 WebPage1.SaveWebPage1Data WebPage1.Close WebPage1.Show

The only way I could reliably go back and forth between those 2 buttons was to restart WebPage1 each time.