Bootstrap templates

Added by Ansif Ibrahimkutty 5 months ago

Hi All,

Wt is awesome and we can use it for writing excellent C++ programs. But one of the biggest issue i found using Wt is, the GUI controls are difficult to customize upto the level the customer likes. Most of the Wt examples shown in the website lacks good User Interface(look and feel).

A good web application really needs a very good template, which should be attractive and easy to use. I saw the bootstrap website and it is awesome, http://getbootstrap.com/. The templates(themes) used in bootstrap website are really very good. I wish Wt could made up with nice templates(like bootstrap in the front-end) and C++/Java for coding.I think the reason why not many people are using Wt is only because of the User Interface.

I wish Wt team should consider my request over here. Thanks for your time.

Regards
Ansif


Replies (11)

RE: Bootstrap templates - Added by Roel Standaert 5 months ago

Hi,

Wt supports theming. With WApplication::setTheme you can change the theme. The default included themes are default, polished, Bootstrap 2 and 3 (WBootstrapTheme). I'm not sure what you're still missing? We're actually working on a new Wt website which uses a Bootstrap-based theme.

The default theme keeps style choices made by Wt to a minimum, mostly sticking to the standard HTML style, so you can easily add your own CSS.

Do you think we should improve the way the examples look? The examples are mostly made to demonstrate certain functionality as simply as possible, so extra theming might distract from the essence of the example.

Regards,
Roel

RE: Bootstrap templates - Added by Ansif Ibrahimkutty 5 months ago

Thanks for the info. I was looking for a way to apply bootstrap based templates for Wt applications(like http://expo.getbootstrap.com/2014/03/13/riot-design/). May be i am wrong, But what do you think if the UI looks like the template i mentioned above and C++/Java coding in the back-end. Settheme() function, CSS styles etc. are good for making cool controls, but we are spending a large amount of time for doing these. Anyway i am eager to see the new Wt website which you have mentioned here.

Thanks for your time.
Ansif

RE: Bootstrap templates - Added by Wim Dumon 5 months ago

Ansif,

For the applications we write in Wt, we separate the looks from the functionality by relying a lot on WTemplate. WTemplate allows you to store HTML fragments for a widget in a XML file (we call them message resource bundles), which you can then refer to from your code using WString::tr(). In wt/src/xml, you'll find the HTML fragments to render internal Wt widgets in bootstrap style. The widgetgallery example is also written using this style, whose xml file can be found at wt/examples/widgetgallery/approot/text.html.

By using some functions in WTemplate, and combined with html fragments, we found this was a quite powerful method to style wt applications without having to write too much style related code in C++ or Java.

I hope this answers your question.

Wim.

RE: Bootstrap templates - Added by Ansif Ibrahimkutty 5 months ago

Thanks Wim. I really agree with the usage of WTemplate with bootstrap styles. But I was thinking about applying bootstrap templates and have some drag-drop facility to manage the UI. Anyway i really appreciate your timely support and comments over here.

Regards
Ansif

RE: Bootstrap templates - Added by Ansal P.A. 5 months ago

Hi,

Can I use a bootstrap template such as 'starter template' directly using Wt::WTemplate? I've already tried it by adding required *.js and *.css( using WApplication::require() and WApplication::useStyleSheet ) and loading the 'starter template' in a Wt::WTemplate. I got almost everything but with incorrect behaviours. I also tried it by setting bootstrap theme. But it didn't work.

RE: Bootstrap templates - Added by Ansal P.A. 5 months ago

Hi,

Is it possible to get a corresponding Wt::WWidget by passing the id of corresponding HTML object?
What i meant is, if we have a template loaded with the following HTML code,

<div>
<input type="button" id="b1"/>
</div>

is it possible to get a Wt::WPushButton by calling some function in Wt::WTemplate with id as "b1"?

RE: Bootstrap templates - Added by Roel Standaert 5 months ago

Hi,

No, any HTML elements that you use in a template have no corresponding WWidget. If you want a button in a template to correspond with a WPushButton you'll have to use bindWidget to bind a button.

Regards,
Roel

RE: Bootstrap templates - Added by Ansif Ibrahimkutty 5 months ago

We have seen many issues about using Wt for UI development. We are very much concerned about our product look and feel. Bootstrap is an amazing technology, it will be wonderful if we can use it directly in Wt apps. But Wt doesnt support much at this moment. The world is moving to web and cloud technologies. So a product needs good UI and also the performance.

Switching to Qt or any other development framework is another option for us. What do you suggest?

Regards
Ansif

RE: Bootstrap templates - Added by Roel Standaert 5 months ago

Have you tried using existing bootstrap templates with Wt's bootstrap theme? That should normally be possible. We don't bundle Bootstrap's JavaScript with Wt, though, but you should be able to load in this JavaScript using require(). For our new website, we use a custom Bootstrap-based theme and we load in different CSS from the Bootstrap CSS included in Wt by overriding the styleSheets() method of WBootstrapTheme.

Regards,
Roel

RE: Bootstrap templates - Added by Koen Deforche 5 months ago

Hi,

Is it possible to get a corresponding Wt::WWidget by passing the id of corresponding HTML object?
What i meant is, if we have a template loaded with the following HTML code,

<div>
<input type="button" id="b1"/>
</div>

is it possible to get a Wt::WPushButton by calling some function in Wt::WTemplate with id as "b1"?

Kind of, using the below syntax and code:

<div>
 ${button-b1}
</div>

Inside the WTemplate:

 WPushButton *b1 = new WPushButton();
 bindWidget("button-b1", b1);
 ...

RE: Bootstrap templates - Added by Ansif Ibrahimkutty 5 months ago

Thanks for the info. But we have now switched to Qt to test whether we can implement all of the features. We have spent a large amount of time with Wt, but we UI seems to be improved a lot. Wt is an awesome technology with C++, We hope to come back once the new Wt website(bootstrap) launches.

Thanks
Ansif

(1-11/11)