Design & Layout: sharing best practices

Dear All,

I am starting this topic as I believe that the existing layout for the web app can be taken to the next level, in terms of responsiveness, modern look and feel, like Bootstrap.

In my previous topic (here: https://forum.xojo.com/31401-bootstrap-design/10#p257711) I have expressed my disappointment about the lack of this feature within Xojo.

In addition to the aforementioned it would be valuable if we can share our techniques, knowledge and workarounds within this topic.

Let’s start with something small, like the login screen. I have found a good looking one here: http://bootsnipp.com/snippets/featured/clean-modal-login-form
and I would like to implement this within the LoginExample of Xojo.

Which steps do I have to take to get a similar layout within the web app ?

Thank you in advance.

Kind regards,
Eric

  • Drag a modal dialog to the project, make it the appropriate size (320 x 295)
  • add two TextFields
  • Make their size 258 x 38
  • Put the cue Text username and password in the IDE
  • Add a Button
  • Make its size 258 x 38
  • Insert a Webstyle
  • Add Background as a color gradient between 0, 130, 255, 255 and the same (so the color renders in Android)
  • Add Text color Hex FFFFFFFF (255, 255, 255, 255)
  • Set the button style to Style1 (or whatever you rename the style to)
  • Use labels for Login to your account and Register-Forgot password
  • For each label, use a Webstyle to set font size and Text color

To display the dialog :

Dim d as new Modal1 Modal1.Show

You can get the logic from LoginContainer.

Well, I make extensive use of handleURL.
I do this for several reasons.
• It is super quick and requires hardly any server resources compared to giving the user a session.
• I have complete freedom of design with my own css.

When it comes to the login screen, first of all I do not want to give a costly session to every visitor that hits the page, only to the visitors who actually have made a valid login. This can save huge amounts of server resources.
Here is one way I have done it for a standalone web app https://bifrost.fohlin.net/

[quote=257753:@Erik Fohlin]Well, I make extensive use of handleURL.
I do this for several reasons.
• It is super quick and requires hardly any server resources compared to giving the user a session.
• I have complete freedom of design with my own css.[/quote]

I mentioned that in https://forum.xojo.com/31401-bootstrap-design/10#p257711

For someone who is comfortable with HTML/CSS that is indeed a nice possibility. However, for someone who is not familiar with the inner workings of web sites, I believe Xojo Web is a very nice solution.

For myself, I had HTML sites since 1996 so I added Xojo apps to the mix, for instance for web forms, software delivery, license number processing. It is for me kind of the best of both worlds. Especially since search engines tend to favor static HTML, and Xojo Web apps being JavaScript needed quite a bit of work to be indexed by Google.

@Michel Bujardet Thank you Michel, this works exactly as it should be. Very nice and very well put (easy to understand & apply).

One small thing, the button has been round rather than square, where can I adjust this ?

That seems nice, thank you for your suggestion. I will look into it to it. I am not familiar with handleURL yet.

Christoph has mentioned in the other topic about Blocs, when I check their website http://blocsapp.com I am very excited about this, especially when it will soon ready (version 2.0) to implement in other apps (maybe Xojo as well).

[quote=257771:@Eric Fernee]@Michel Bujardet Thank you Michel, this works exactly as it should be. Very nice and very well put (easy to understand & apply).

One small thing, the button has been round rather than square, where can I adjust this ? [/quote]

You can set the Corner Radii in the WebStyle for the button. That is where you make square buttons, but you could as well make round buttons. The same style feature would make round pictures such as often used by Bootstrap.

Eric,
I think another forum member may have given you the wrong impression.

The way the Xojo framework CSS defines things, you can’t implement Bootstrap within Xojo easily. There are many conflicts; and because we can’t change the Xojo CSS, sorting them out isn’t worth your time. It is far easier to make separate controls that are not Xojo elements.

I have implemented the login form you linked as a control: LoginForm.zip

It imports the bootstrap css and javascript (as well as jquery) which is overkill for just one little login modal, but it’s to show my point about the conflicts.

When you run the project you’ll notice the Xojo button looks incredibly wrong. This is one of the many CSS conflicts between the Xojo framework and Bootstrap. If you try to implement Bootstrap, the Xojo controls get messed up. You’ll also notice (if you cause an error) that the error text is all white for the same reason.

The best you can get is to re-implement some of the CSS properties using WebStyles like Michel suggested, but Xojo doesn’t allow enough flexibility with that alone to get proper results. This is why I set out to re-implement Bootstrap controls using their own namespaces in Xojo with WebStudio

(And it’s partially their fault for not following their own namespace rules <https://xojo.com/issue/42677> but we won’t get into that)

To be fair, a lot of things do not necessitate high level CSS, and implementation of Bootstrap controls, such as this login dialog example.

As for missing CSS properties, it is rather easy to add them in the HTMLHeader, or in a PageSource, with the same name as the webstyle, and they will automatically apply. But we are entering the wonderful world of HTML Code nitty gritty.

Thanks to Tim, though, Bootstrap controls can be made available without the pain and suffering of programming in non-Xojo language.

At the risk of repeating myself, I feel that Bootstrap deal is a misunderstanding : Xojo creates Web apps for people who seldom or never coded in HTML/CSS/JS, while Bootstrap is mainly meant for web sites, and is mainly destined to people on the know about page coding.

It seems to me Xojo users are entitled to benefit from the utter simplicity of Xojo Web, without having to deal with too much non-xojo intricacies. I don’t mind sharing simple workarounds, but IMHO it is the job of third party control providers to deal with the intricacies of the underlying HTML/CSS/JS code.

In that vein, there is such thing as Responsive Design that has become a very popular word in the web site designer jargon. I made sure to provide a very simple to use class so any Xojo programmer can apply these principles without getting a huge headache.

It is a quasi philosophical question : do I program in Xojo, or should I code as most web designers do, in markup language, CSS, JavaScript ? I believe users should be made aware of the very real outstanding qualities of Xojo in terms of app design.

In the https://forum.xojo.com/8939-deployed-web-app-examples thread, there are some stunning examples.

@Michel Bujardet [quote]You can set the Corner Radii in the WebStyle for the button. That is where you make square buttons, but you could as well make round buttons. The same style feature would make round pictures such as often used by Bootstrap. [/quote]

Thank you, this is working great. The login screen pops up, in that specific layout. Very nice & doable. The actual Xojo login screen is at the background, is it possible to remove this and put the new login screen in place?

Sure, Bootstrap is a wonderful thing. Even though when the design can be made that it will be more modern it should be a great achievement. In the end (next to the layout) it goes about the user-friendlyness of the app and added value it will bring.

I agree. From this perspective I would like to work within Xojo without deviating too much into another languages.
Very nice class for the mobile responsiveness, thank you for this suggestion.

Yes, I agree and that is exactly the reason why I started this topic. Even when my first message was too Bootstrap minded. When I implemented your workaround I am more reassured about the possibilities for the design with Xojo.

I hope that the users who created these stunning apps, as you mentioned, would like to share their best practices.

@Tim Parnell [quote]It imports the bootstrap css and javascript (as well as jquery) which is overkill for just one little login modal, but it’s to show my point about the conflicts.[/quote]

Thank you Tim for the example, I get your point. What Michel suggested and explained above is definitely a good alternative, bearing in mind its limitations. What I saw about the blocsapp was probably a thing ‘too good to be true’ :wink: Are you planning to expand WebStudio with more features, like the login screen, user interface etc. ? I just took the login screen as an example to start with something small rather than building a ‘big house’ ;). Even when it is not that important.

Of course, it should be taken into consideration: is it really necessary to allow users to view the web app on a smartphone? Well, to be honest, in my specific case it won’t.

I’m working on a non-conflicting version of the login window right now to add to the collection.

My plan is to have most Bootstrap controls ready by the end of 2016. I intend to continue to grow the collection even after the Bootstrap controls are ready. Any time I make a useful workaround for something here in the forum I add it, you’ll see there’s two workarounds in there already. I’m also happy to take requests.

I kind of want it to become the MBS of the Web framework :wink:

That’s nice Tim ! I can hardly wait for it.

A good looking menu bar would be a killer ;).

That is gonna happen Tim, the MBS of the WE framework. I think there is a huge demand for these kind of tools, especially when they are thoroughly tested.

Eric, between Tim and I you are in good hands :slight_smile:

Look at the way the WebContainer LoginContainer is made.
If you make your textfields the same names, as well a the button, and copy all event handlers content from LoginButton and Shown, then the login dialog will have the same logic.

  • Remove loginsection from the page
  • Add to the page a property loginsection as Modal1 (or whatever name you gave your login dialog)
  • In the webpage shown, put

loginSection = new Modal1 loginSection.show

I’m happy to announce that I’ve converted the login form over, and a non-conflicting version is available with a WebStudio license. WebStudio Controls - Grab a free Promo account

To avoid further derailing of this thread, I’m happy to answer questions and take requests by Private Message or email.
Sorry to hijack the thread >_<

Thank you both. I have no doubt about that :wink:

@Michel Bujardet Great, thank you for your explanation I will work on that, I have to play with it a bit as I am not that experienced as you are. So, this is good for my learning curve :wink:

@Tim Parnell no problem at all, your contribution is valuable, even when you show the features of WebStudio. In addition to that, I am just gonna ask: I have downloaded the promo, even though I could not find the Login screen, did I overlooked something? On the example page on your website and it looks really stunning.

I didn’t include the Login Form in the promo :confused:
However, the prototype I posted above does have the same Events and Methods if you want to play with the control.

These are the differences:

            Prototype        WebStudio
CSS Source  Bootstrap CDN    Internal
JavaScript  jQuery           Xojo
Font Fam    Roboto           Default
Animation   jQuery           CSS 3
Conflicts   Yes              No

I took out the Roboto font to keep the entire control self-contained so it won’t load external resources. I handle my controls this way so that they can be used in secure environments. I think I might add a setting to use it optionally, though.