I’ve created a WebDialog that has a login dialog (as a WebContainer) as the only control on it. It’s resized in such a way that it has the same size as the WebContainer (320 x 428 pixel).
Here’s a picture of the login page I’ve built customized to reflect Google’s material design
So far, so good. Now my problem is that this WebDialog isn’t showing up at all. I use the Xojo example of “DialogsExample” to put this on the slightly modified “LoginExample” which are both from the Web folder of Xojo examples.
Though I follow exactly the example, I notice that mine doesn’t have the button for “visible” under “Appearance”. Everything else seems to be the same. Here’s first the Xojo example screenshot:
Here’s the same section from my example:
You notice quickly the absence of “visible” under “Appearance” and the boxes for “left” and “right” under “Position” are also missing. I’ve checked everything for an hour now and searched the forum for an explanation what I’m doing wrong but I’m ready to give. It’s probably something easily to be fixed but I don’t know what I’m doing wrong.
Building my first prototype with Xojo WE. Thanks in advance for your help,
A WebContainer is not a WebDialog, but both at runtime exist in or on a Web Page.
You might notice the “Super” class from where your login screen and the examples you show are subclassed from are not the same classes.
So by the look of it all you need to do is drop your Login Container (mdLogin_Register_Container) onto a Web page to see it. If you want to use a WebDialog class your login screen would appear hovering “above” the Web page as a dialog not “on” the Web page as a container. A container is a way to group controls whereas a dialog is a way to get user interaction under the control of a Web page.
That is how I conceptualize it anyway.
By the look of your second example (which is a dialog to be called not a container on the page) you would need to add an Open event handler by right clicking on the Web page and put code like this into it:
thanks for the warm welcome and taking your time to explain this in detail to me. I used Xojo and it’s predecessor REALbasic for desktop programs only in the past, on and off to try out things quickly. I think Xojo is ideal for generating a rapid prototype, with the look & behavior that one intends for the application.
I was thinking to position the login box “floating” on top of the webpage, hence using the WebDialog for it (similar to a ModularDialog for the desktop versions. I have actually coded “LoginPage.Show” for the MainPage under EventHandlers.Open, hence my question here. It should open that window and it indeed goes through this point as I could verify via breakpoint.
I have change the super of wdLogin to “Webpage” but this still doesn’t show the page. Something else must be stopping from showing this page.
Now the only way to see this page is making it a “Webpage” (though I still want to see it floating on top of a webpage to compare what looks better, the whole purpose of a rapid prototype is to test different look and feels) is by selecting this webpage under “App” and “Web Settings” and “DefaultWebPage”. This place the login smack in the middle, like I intended to.
But
it looks completely ugly and not like in the editor (despite my couple hours spent on customizing):
The “No account” has gone haywire and there is a horizontal line below which wasn’t in my editing (see above to compare what I created). In general the proportions are being blown out (stretched out it seems), the blue color for background & font is different.
I know this is probably good for a new discussion by itself but if someone has a quick answer please let me know. Otherwise will post it as a new discussion later today.
Andreas, I think I understand what you are trying to do now.
Firstly, you can if you wish drag and drop the container on the Web page and centre it using the Container’s top and left properties in the Web Page’s resize event. E.g.
cntrLogin1.Visible=false
cntrLogin1.left=me.Width/2 - cntrLogin1.Width/2
cntrLogin1.top=me.Height/2 - cntrLogin1.Height
cntrLogin1.Visible=true
//'Me' is a reference to the Web Page although 'Self' is probably better to use.
If the user changes the dimensions of the Web page this code will centre the login screen.
On the other hand, if you wish to use a container in a dialog that “hovers above” a Web page, you can by dragging and dropping the container into the dialog and calling the dialog in your code in the Web page’s open event.
By the look of it your 'Login" label up the top is slightly wider than your Container must be hence the scrollbar. I suggest you use code like this in the container’s Open event to prevent this:
lblLogin.Width = cntrLogin.Width
This would set the width of your label to be the width of your container.
Also, regarding the “No Account” label, it looks as if your browsers’ font renders slightly larger than the desktop font in Xojo’s IDE, so you will need to make the label a little longer for variations between browsers.
I’m using Google’s Roboto font that is the font in Material Design. I had to install it on my MBP but after restarting Xojo it was available. Can it be that this font needs to be available in a browser as well (like Sans Serif) or how does it work?
Sorry, sounds like a Newbie question but I have no idea how a browser handles a font that is unknown to it. Or if it would just present pixel by pixel
The scroll bar comes from the blue rectangular in my login box (the one with the label login). I reduced it massively but that’s not how the design is. So the problem is in the container itself, not in the window (so your solution to set it there didn’t work, @Eric Wilson ).
Well, one problem at a time. I’m still puzzled why what I created in the web container isn’t displayed. You might notice that the white background is gone, I assume also the font and the blue color is all replaced somehow (by Xojo or by my Chrome browser)?
This is all way more difficult than I thought. Maybe I should take back what I said about Xojo is great for rapid prototyping, doesn’t seem to be for WE, only for Desktop
Ok, steep learning curve in combination with my own stupidity. I thought by adding the Roboto font I had done everything right. But I had to delete the System font first from the “Font Family” as you can’t select one font and believe it stays selected. Looks like that WE took the first font which is System and ignored my Roboto font.
The scroll bar is also gone, had to make the top blue rectangle exactly start at 2 (instead of 0) and end 4 points shorter than before. It seems it needs those two pixel space left and right vs the webpage it sits on even though that webpage is way bigger.
The “No account?” text field had to be extended a lot bigger than in the IDE.
The missing white background was also solved. Setting it in the webcontainer itself is doing nothing. I had to set it in the “background” section of the actual login webpage.
Here is the IDE screenshot:
and here the final web app (as of right now):
It looks as close to the original idea as I could get it (without investing another couple of days into it). Thanks to everyone who helped me, you guys rock. Honestly, being to some other forums on programming lately (Talend / StackOverflow) and the responses have been zero (Talend) and one comment to explain more (StackOverflow).
