How To Customize Xojo Web 2 Objects

Following up on my article:

How To Customize Xojo Web 2

A tutorial showing how to adapt the Bootstrap template

blog.xojoDOCs.comJeannot Muller

I want to quickly show how you can customize Xojo Web 2 Objects per WebPage, WebDialog etc. without changing your whole template.

The easy way

Let’s first have look into what Xojo has to offer out-of-the-box. Let’s create a Web App Project and adding a WebButton to the Canvas. In the inspector we are seeing the available options:

Well, I agree that’s not much (yet) — I’m sure there is more to come. With the style editor (yet) missing, I understand the frustration of many when seeing that there are so few available options in the IDE.

But there is hope! You can apply some changes — per object — in your code already:

Customization via build-in parameters

In the IDE, add an “Opening” event to your object (so in our case above: to the button).

Now you can refer to your button via either “me.” (as we are in the opening event of the button itself) or the name of your button (here: “Button1”).

Type in me.style. and push the <tab>-key on your keyboard. You will now get a popup listing all the options you have for style:

As you can see we have a couple of “design options” in this list. As pictures are telling you more than words, let’s apply those to our button. This will result in a terrible looking button, but that doesn’t matter, it is all about showing you the options you have “out-of-the-box” and it really easy to do.

Plus, these options are added by Xojo, so they will stay in future and will unlikely break your code with a later release (Disclaimer: please never quote me on this in future — but it is very unlikely to break anything in future, I predict those elements will be the first to be added to the IDE, as it seems to be relatively straightforward doing so):

me.Style.BackgroundColor = &cffffff
me.Style.Bold = true
me.Style.BorderColor = &c0000ff
me.Style.BorderThickness = 4
me.Style.Cursor = Webstyle.Cursors.Progress
me.Style.FontName = "Verdana"
me.Style.FontSize = 14
me.Style.ForegroundColor = &cff0000
me.Style.Italic = true
me.Style.Opacity = 60
me.Style.Strikethrough = true
me.Style.Underline = true

This will result in an absolutely awfully looking button, but you’ll get the idea and you can see how easy it is to change many setting with just a very few lines of code:

As a careful reader, you have probably noticed that the “Strikethrough” change wasn’t applied. Not all properties can be changed for all objects (or have no effect). You have to try on your own. Add for instance a WebLabel to your project and apply the Strikehthrough code and you will get the following:

Okay, before we’ll all get eye cancer, let’s make it better looking with the following code:

// Code for a "closing"-button
me.caption = "X"
me.Style.BackgroundColor = &cffffff
me.Style.Bold = true
me.Style.BorderColor = &cff0000
me.Style.BorderThickness = 2
me.Style.Cursor = Webstyle.Cursors.Pointer
me.Style.FontSize = 50
me.Style.ForegroundColor = &cff0000

et voilà:

Obviously you would change the size of your button in the IDE to for instance 38x38 to make and adapt the FontSize, but I wanted to show you the possibilities and one caveat, if you are doing it this way (via code only):

The “new” dimensions of your button (which are only known at run-time) are not reflected in the UI. Let’s build something around this button to demonstrate this a bit better:

Let’s build something (useless) like the following in the Xojo IDE:

This will compile into the following look of the app in the Web Browser:

As you can see with this example: your code changes are not reflected in the IDE. This is “normal” and nothing you can do about it, other than reflecting the end result in your IDE design. You should be aware of this!

Customization solely via Code

A last option consists in “injecting” your own CSS statements in your Code via the style.value parameter:

Le’t start from scratch with an “out-of-the-button”:

Let’s assume you want the text in this button to be left-aligned, like this:

All you need to do is insert the following code into the “opening event” of your button:

me.style.value(“text-align”) = “left”

and you are done.

As you can see, you have many options to customize each and every element on your webpages and dialogs. But you can’t change “every bit” and your changes are not reflected 1:1 in the IDE.

As always, if you have any questions, feel free to drop me a comment.