Web Core and Bootstrap

WEB TMS WEB Core
1

Hi All,

I was hoping someone could point me in the right direction to learn about Web Core and using Bootstrap within a project.
Things such as how to add corners to a button or edit boxes, or how to colour a component etc.

I need to make my interfaces look more like web pages than desktop apps.

Thanks,
Paul

2

Happy to help get you started. First, you need to ensure you have Bootstrap enabled in your TMS WEB Core project. This can be by creating a new project using the Bootstrap template, or by using the Manage JavaScript Libraries feature of the Delphi IDE to add Bootstrap to your project (if it has been created already, for example), or by adding Bootstrap manually to your Project.html file.

Once that has been done, quite a lot can be done by adding Bootstrap classes to the ElementClassName property of your components. Like TWebButtons, for example. Setting the ElementClassName property to "btn btn-primary" will get you a Boostrap-themed button.

Here's a link to a blog post about getting started with Bootstrap.

Here's another blog post that is a bit more advanced.

Most of my blog posts use Bootstrap, so you might run across other examples, depending on what else you might be trying to do. But by all means, post any questions you have. Bootstrap is a powerful addition to the TMS WEB Core toolbox.

If you're interested in what is involved in replacing the entire UI with something more custom, check out this mini-series on a project called HexaGongs - pretty much everything is presented as a hexagon of some form or other.

3

If you set your form's CSSLibrary property to cssBootstrap, most controls will already be preset to the default Bootstrap style when you add them to the form. (ElementClassName property)

There are several other resources:
TMS WEB Core developers guide p82

Blog posts:

Videos:

https://www.tmssoftware.com/site/videos.asp?v=148

TMS WEB Core book:
image

https://www.amazon.com/TMS-WEB-Core-Application-Development/dp/B0C2RX8NXK?&_encoding=UTF8&tag=tmssoftware-20&linkCode=ur2&linkId=a1e92cce33071f82b35f959f09a24e4d&camp=1789&creative=9325.asp

4

Thanks guys, just what I was looking for. Could you send me some links to blog posts or videos on how to use templates within a Web Core project. That's something I don't really understand at the moment.

Thanks,
Paul

5

Templates are an interesting topic, depending on what you're trying to do and what kinds of templates you're working with. The TMS WEB Core manual has a good introduction to templates - Page 79 on the link above.

The general idea is that you can add an HTML template (a page) to your project by editing, for example, Unit1.html that was created at the same time that Unit1.pas and Unit1.dfm were created when the project was first created.

Elements in that page (if you've replaced it with a template) are linked to components in the form using the ElementID property of the components. To make this a little easier, you can right-click on the form and select "control binding" and then have an interface where you can map these things back and forth. So if your template has a username and password on it, you can add a pair of TWebEdit components on your form and then link them together.

If you want to dive in head-first with a much more involved example, there is a bit of a mini-series about using the AdminLTE template, that also covers creating an XData project and other aspects of how such a template can be used in a larger project. Part 2 might be the most relevant but they come as a set :grin:

6

There is also a webinar where this was covered:

1 Like
7

Again, thanks so much for the info guys.

Cheers,
Paul