Bootstrap Controls for Xojo Web! [2016]

Add-Ons
1

Well, some anyway.
I’ve started translating/wrapping Bootstrap controls for Xojo Web, giving them IDE properties, and usability in code.

It turns out, you can’t just include Bootstrap.min.css and work with it because Bootstrap and Xojo disagree on how form controls are sized. I’ve put some time in to extract just the stylings each control needs and created them self-contained. They each have different amounts of features available.


So far the following controls are done: Buttons, Code Blocks, Form-Fields (lots of options), Image Borders, Shortcut style.

I’ve done my best to make them as usable as possible in the IDE, so the image borders are a subclass of ImageWell allowing you to see the image, and the kbd shortcut is a WebStyle so you can apply it to any text.

Buttons come in all the Bootstrap flavors (even disabled!)

Form-Fields have lots of options. The label can be included or turned off, and the whole field can be colored per the Bootstrap .has-error .has-warning and .has-success - not that you have to worry about the CSS, it’s all properties that can be set with the IDE or code.

I’m doing this for a few reasons. I’ve seen requests around for Bootstrap in WE, and I’ve been having fun (really!) making Web controls. More controls are definitely on their way, I just wanted to start drumming up interest - it’s good inspiration. My other tools will not suffer, don’t you worry. I have a to-do list with a few things for Answers and HTML Edit. HTML Edit will be getting an update real soon actually, there’s a new version of Quill out.

So how much does this cost?
Well, the controls you see here I’ve bundled up into a little promo for free. I want to gather interest and comments. So grab the controls, and let me know what you think. Let me know if you find bugs, or if you have requests for specific controls.

I am offering a complete package of my web controls, which will include the source for all of the Bootstrap controls and my ResizeWatcher tool (specific workaround for a Xojo WebModal bug.) You get a year of updates, and the locked version of HTML Edit Web as a little gift :slight_smile:

So what’s to come?
I will be aggressively adding controls™
(lol - but really)

Bootstrap Components are next on the list. Button Groups and Pagination look like they’ll make it; Breadcrumbs, Labels, Badges, Alerts, Progress Bars (very exciting!), and Panels are on the list. I’m going to skip List Group for now, unless someone really wants it (I can’t think of a practical use)
JavaScript components will follow! (dropdowns, tabpanels, tooltips, and popvers - oh my!)

And Bootstrap is just the beginning!

So check out my collection, I call it WebStudio:
https://webstudio.ws

Get the Bootstrap Promo for free!
https://webstudio.ws/promo.php

An overview of the individual controls:
https://webstudio.ws/controls.php
(see previews there too)

Post here, or send me an email with questions, comments, and requests!

2

Looking forward to this!
Great, Tim!

3

Hi Tim, i just signup for a promo for webstudio BUT it say expired on 01/01/1970

4

Richard,
Good catch! It’s not a mistake though. The welcome email covers it a little bit, “One thing you might notice about your account is that it says your updates expired on the Unix Epoch. That’s normal, it’s how I set up the promo accounts to have access to the locked controls.”

Basically, even though I designed the whole system, I thought it’d be a clever way to allow a “demo,” instead of adding some kind of flag to the account. The locked versions of the controls for the demo have a post date of 01-01-1970 so an account created from the promo can download them.

Unlocked versions of all the controls have a post date of today (28-01-2016) so that if one was to purchase a license you would get access to the latest versions (unlocked.)

The math all works out in the end. If one purchases a license the expiration will be the date of purchase + one year, and renewals on active licenses extend the time. I tried to make it simple, but I guess I miscommunicated that part.

You can download individual controls from the list of controls at https://webstudio.ws/controls.php
Or you can download all of them in the example project on your account dashboard https://webstudio.ws/account.php from the link titled WebStudio (1970-01-01)

Again, sorry for the confusion, I was trying to be clever.
Hope this helps!

5

i put the post up before i read your email. when i read your email, i then understand why it is expired.

6

Nice work Tim!

Do you know Foundation?
Bootstrap and Foundation are alike.
I personally prefer Foundation, but you surely have your reasons why you chose Bootstrap.
Nevertheless, I’m still very interested in your WebStudio.
:thumbs up:

7

Today I downloaded the new version with the updated progress bar.
Very nice!

One thing I noticed.
It’s impossible to change the tab order of the fields, because they are not in the tab order list.

8

I found the cause for that, I missed the part of the documentation that mentioned constant IncludeInTabOrder.
I’ve added it, but any control already on the page still won’t appear in the tab order :confused:
I’m attempting to sort this out now.

9

Sorry for the double post, I’m no longer able to edit the previous post.
I have fixed the Tab Order issue. To make any existing controls appear in the tab order, one needs to change the number from -1 to anything in the Inspector after replacing the supers with the fixed ones (already online.)

And now for my previously scheduled update post :stuck_out_tongue:

Update!
Bootstrap Progress Bar has been added! Comes in colors, stripes, and can even animate. Add an overlay caption too, if you like. It requires the updated Bootstrap Base, so make sure you download that too.

Bootstrap base has been updated, internal code updates.
BSButton has been updated, bugfix with setting captions with apostrophes.
BSField has been updated. I apparently got so excited I forgot to send the field value back to Xojo. This has been fixed :stuck_out_tongue:

Demo
The locked controls promo is still available. There are no deployment limitations, the controls are simply encrypted. Try out the Bootstrap Controls by signing up for a promo account: https://webstudio.ws/promo.php

To unlock the source code and get access to the other tools purchase a license. It comes with a warm fuzzy feeling inside for supporting a fellow developer :slight_smile:

10


Added Nav Tabs
It’s only on the controls page right now, I haven’t updated the complete bundle download yet.
https://webstudio.ws/controls.php

Available for both promo and full licenses.

11

Hi Tim are you still planning on adding more controls?

12

Yes, that’s the plan.

I have an order of importance for the next controls to be added based on existing customer requests, but if you have any requests let me know and I’ll get them on the list.

For those that don’t know I have been hired full time since this project launched, I do apologize for the delays.

The plan is to have the core controls (not the responsive tools) completed before 2016 ends.

13

Im waiting for this to have a complete list of bootstrap control. I hope you will have dialogbox, treeview, toolbar, etc grids soonest.

14

@Tim Parnell

  1. looks really cool!
  2. I can neither find a download, nor a pricing button. Is WebStudio still available?
  3. how about the Weblistbox?
  4. how about all the other style information like fonts etc from bootstrap.min.css? Is there a way to just drop the style info on a web App?

Thanks
Ben

15

A date and time control would be a quick seller for me right now!! Nice work!!

16

Tim, how do I sign up and download the controls?

17

Unfortunately, I haven’t had the kind of time I would like to maintain personal projects lately.
While I’m still here and around, I no longer offer premium third party controls for Xojo.

I am still offering support to existing WebStudio customers for the duration of their licenses, but at this time the sale of new licenses is suspended. If you are still interested in the existing controls at this point, you are welcome to email me.

Ben, thanks for the compliment. Xojo’s Web framework is not compatible with bootstrap.min.css directly. Each control had the styles it needed extracted from the Bootstrap stylesheet in order to work around some of the issues with conflicts. I had extracted one style to use as a Xojo Style object, it was not a fun or easy process.

Those looking for alternate controls,
GraffitiSuite has both a Date Picker and a Web Grid
Jrmie Leroy has a date picker that is available individually.

18

@Tim Parnell

Hi Tim,

Just emailed you. Thanks!