Simple way to implement 12 columns Bootstrap system

Is there any way to easily implement the system 12 columns Bootstrap? Has anyone done something similar?

I have problems in modifying the width of the controls from the Style class, it leaves no modification with percentages. I thought to create a style for each column type (with width percentages), and associate the style I want by each web control. Thank you.

If I not find a way, I will by code and exchanging percentages by pixels. Thanks.

Xojo Web is for Web Applications. Not meant for “websites” or “theming using bootstrap”.

You could make components using the WebSDK and WebControlWrapper. I wouldn’t recommend it.

Tim Parnell has done some work on Bootstrap : Bootstrap Controls for Xojo Web! [2016] - Add-Ons - Xojo Programming Forum

That said, I concur with Derk : Xojo is meant for Web apps and has its own logic.

A great way to mix Xojo with Bootstrap is, instead of trying to make Xojo use Bootstrap, to use Xojo as logic engine, via HandleURL. In such a setup, Xojo becomes a server side language not unlike php that takes requests and sends back result, either to your page, or directly to the user.

[quote=290819:@Michel Bujardet]Tim Parnell has done some work on Bootstrap : Bootstrap Controls for Xojo Web! [2016] - Add-Ons - Xojo Programming Forum

That said, I concur with Derk : Xojo is meant for Web apps and has its own logic.

A great way to mix Xojo with Bootstrap is, instead of trying to make Xojo use Bootstrap, to use Xojo as logic engine, via HandleURL. In such a setup, Xojo becomes a server side language not unlike php that takes requests and sends back result, either to your page, or directly to the user.[/quote]
Keep in mind that you’ll need your own system for maintaining sessions if you do this.

No more no less than in Php. Hence my comparison.

I believe there is a venue for Xojo out of the fully managed programming environment, where instead of trying to bring web design to Xojo, one would bring the terrific Xojo processing power to web sites using the full spectrum of web design tools.

In PHP, sessions are usually managed with tokens. At first glance, it does not seem terribly difficult to implement in handleURL. Xojo is far more powerful than Php.

Thanks Derk, I understand your point of view. But is important for me isolate the web layer, and make reusable code for all type of screens, Web and Desktop to.

Michel, I have Tim controls (Webstudio.ws), but I found that only works with Bootstrap styles, but not with the 12-Responsive columns. For me it would be important to replace and PHP, as I am more comfortable with Xojo, but not my idea to stay just there. I hate the MVC model because it keeps me from being productive. I appreciate more to finish a job of satisfactory maner, that follow the standards. I’d rather be a poor programmer and bad web designer who successfully completes its work, that a good web designer who is not able to finish backend projects ahead. Thanks.

Greg, I do not understand very well the extent of your recommendation, since I am a developer that I come from Visual Basic, and web development has always cost me a lot of work. However, I am aware of the extra work that could lead me, but I would save a lot of work later. I estimate and value… Thanks.

Thanks Michel for the last aclaration.

The thing is, when it comes to Bootstrap or other tools, they are decidedly aesthetic oriented, and that is difficult (even sometimes very difficult) to implement in the Xojo app design.

Since you come from web development, you are probably much more productive in designing a user interface that way, and if you analyse your app, you may find out that interaction may not require a permanent link to the app.

Another way to elegantly mary the best of the web and the power of Xojo apps is to use iFrames where you display the Xojo app, embedded in a more polished web UI.

I’m Sorry Michel, I come from desktop development. Web design itself not only costs me too much, but i cost when I link with Back-end or AJAX. Maybe it’s because I have not found an easy way for me.

As for what he says, I have in mind. I do not rule include some Xojo application in an Iframe with a Wordpress page, for example, that I do feel more comfortable.

Also I have some very good design tools for bootstrap interfaces, but do not trust to work with them from Xojo, because I do not see easy to work with controls contained within a html viewer control, for example.

I don’t understand the limitations of Xojo can not read directly, or not bring factory loading html and css files. I don’t understand why it can not be loaded one Style class directly from a CSS file. They are tasks that I personally cost much effort, and make me give up certain tasks.

I do not see is easily implemented to work on two ways between Xojo and Javascript, and viceversa. I understand my lack of experience in Xojo web development, but do not see it intuitively, as if it was intuitive coming from Visual Basic to Xojo Desktop.

If you come from Desktop, Xojo Web is ideal to keep the same design. Don’t try to get Xojo to do things it is not conceived to do, especially if you are not too comfortable. Get things done the way you would in desktop.

Then indeed if you want to beautify your site, use iFrames.

You can use CSS styles if you understand how to code them.

  • Create a style, and put nothing into it. For instance myStyle.
  • In App HTMLHeader, put your CSS code, using the name of the empty style. For instance :

<style> .myStyle { border-style: solid; } </style>

LOL

Whatever.

[quote=290863:@Michel Bujardet]You can use CSS styles if you understand how to code them.

  • Create a style, and put nothing into it. For instance myStyle.
  • In App HTMLHeader, put your CSS code, using the name of the empty style.[/quote]

Michel, I’ve been trying to insert styles in this manner. But for example the width or heigth always prevails the values of controls. At least that was what I tried and I found.

Controls css prevails since is id based in the internal css, and the id is produced at run time

Indeed width and height are controlled by the framework. You will have to code that by code. But the slew of things you can do in CSS that are unavailable in Xojo, such as dotted border, is available.

You got to understand that essentially, Xojo Web emulates Desktop. In Desktop, you never control size elsewhere.

[quote=290888:@Michel Bujardet]Indeed width and height are controlled by the framework. You will have to code that by code. But the slew of things you can do in CSS that are unavailable in Xojo, such as dotted border, is available.

You got to understand that essentially, Xojo Web emulates Desktop. In Desktop, you never control size elsewhere.[/quote]

Thanks Michel. I am testing…

I implemented a first functional version of what I needed. I share if it can be useful to someone else.
So far only implement Bootstrap styles for WebLabel (partial), WebTextField and WebButtonField.

Only works with native WebControls.

The example includes a login form and show how work with 12-column Layout similar to Bootstrap.

I think it could work with minimal change with Xojo Desktop application.

Shared with MIT license :wink:
https://github.com/msalguer/Bootstrap12columnsXojo_LoginSample_by_SoftwareSimple

Regards.

I created a demo page where the operation is shown. As the DNS replicate the new subdomain will be available:
http://demos.softwaresimple.es:8081

By the way, the CSS button for the mobile version does not show me the same colors, and also aware that I would have to implement the dynamic system of rows.

I remember the initial project is not fully tuned for small screens, but could be done with little effort from this proyect.

Especially under Android, it is sometimes difficult to obtain the colors you want.

Exactly… And I’ll check in later.