Position WebContainer

Victor_Peters · April 30, 2014, 1:36pm

I’m new at the Web-version of Xojo, so strugling with ordinairy things…

Such as: how can i center a WebContainer in a WebPage at startup (.show) and at resize of the browser window? Locking the dimensions in the Inspector (to top, left and right side) does not do the trick.

Thanks

Guy_Rabiller · April 30, 2014, 2:34pm

Do the opposite: unlock all, and center your container in the IDE.

Andre_Kuiper · April 30, 2014, 3:33pm

In the shown event of the containercontrol put this code:

  me.left = self.width/2 - me.width/2
  me.top = self.Height/2 - me.height/2

Guy_Rabiller · April 30, 2014, 3:59pm

[quote=83898:@Andre Kuiper]In the shown event of the containercontrol put this code:

me.left = self.width/2 - me.width/2 me.top = self.Height/2 - me.height/2[/quote]
This is a bad idea, because it will center the container once, and won’t center it anymore if the WebPage is resized, while simply unlocking the container position will center it through CSS, so it will stay centered even if the WebPage is resized yet without any intervention on the server side.

Victor_Peters · May 1, 2014, 7:34am

My containers are added dynamically, so unlocking in the IDE is not an option. Apart from that, unlocking is simply not possible: if i unlocl right, left gets locked instantly. Same for top and bottom.

Will try though, but dynamically.

Andre’s method ( nice name by the way - Andre Kuiper are you the Dutch space traveller? ) works, but you also have to add his code to the Resized event. Still it does not do the job smoothly.

Such properties and behaviour should be added to a Style sheet.

Victor_Peters · May 1, 2014, 7:56am

Actually trouble starts at EmbedWithin, where positioning is absolute and not relative. Strange limitations for building web.

Maybe i’m too much thinking as web developer while i should be thinking as an app developer.

Guy_Rabiller · May 1, 2014, 8:11am

Good to know.

Then once embedded, center your container and set LockHorizontal & LockVertical to True.

You then don’t have to put any code in the Resize event.

Victor_Peters · May 1, 2014, 9:12am

Thanks for all the input. The proper way is:

Dim d As new webcontainer
d.LockLeft = False
d.LockRight = False
d.LockHorizontal = True
//d.LockVertical = True
 d.EmbedWithin( self, leftdistance, topdistance, d.Width, d.Height )

If you embed before setting the locks, it does not work.

Guy_Rabiller · May 1, 2014, 9:20am

What also works is:

d.EmbedWithin( self, 0, 0, d.Width, d.Height ) d.Left = leftdistance d.Top = topdistance d.LockHorizontal = True d.LockVertical = True
You can embed before setting the locks but then you have to use Left/Top. Then it works.

Victor_Peters · May 1, 2014, 9:23am

OK. Thanks

Andre_Kuiper · May 1, 2014, 7:14pm

No, he’s not even a relative, his name ends with an ‘s’ (Kuipers).
Glad you solved your problem and i learned something new from your and Guy’s answers. Thanks a lot !

Jon_Ogden · May 2, 2014, 5:02am

Actually, if you set the coordinates of the container control in the resize event, it should center just fine.

Guy_Rabiller · May 2, 2014, 7:14am

Yes Jon, but in this case there is a roundtrip with the server to center your control. This will lag behind the resizing of the window. It is not efficient.

If you just unlock your control then the centering is automatic, no communication needed with the server, the centering is handled on the client side only.

Jon_Ogden · May 2, 2014, 5:07pm

[quote=84609:@Guy Rabiller]Yes Jon, but in this case there is a roundtrip with the server to center your control. This will lag behind the resizing of the window. It is not efficient.

If you just unlock your control then the centering is automatic, no communication needed with the server, the centering is handled on the client side only.[/quote]

I would think that putting code such as:

me.left = self.width/2 - me.width/2
me.top = self.Height/2 - me.height/2

Would cause communication with the server. I would think that all that code would simply operate and execute on the page.

I am not trying to argue with you here, just trying to understand why the above code would require a roundtrip to/from the server.

Jon

Guy_Rabiller · May 2, 2014, 6:42pm

That code will execute on the page but before it has to be sent to the page.

So whenever the page is resized, the Xojo javascript framework send an event from the browser to the server. Then you receive your Resize event. You then send back your code above from the server to the browser. The javascript framework then execute it and your page is moved.

It works. But see the waste of time.

Why not let the browser handles this by itself ?

(granted we are still talking about automatic centering, not moving the container on purpose)

olivierV · May 3, 2014, 6:23am

[quote=84818:@Jon Ogden]I would think that putting code such as:

me.left = self.width/2 - me.width/2
me.top = self.Height/2 - me.height/2
Would cause communication with the server. I would think that all that code would simply operate and execute on the page.

I am not trying to argue with you here, just trying to understand why the above code would require a roundtrip to/from the server.[/quote]

because Xojo WE works like this …

All that is in the client browser is a copy of server variables.

Each action on the client’s browser is sent to the server, the calculations are done on the server, the variables are updated (including variables framework) on the server, then the answer is returned to the browser: variables framework are updated in the browser and javascript methods modify the appearance of the page according to the orders sent by the server.

I guess sometimes there are exceptions, but this is rare.

so Xojo is simple, but it is also a great weakness.

For complex projects or with many users, the use of Web SDK is required.