Added Support for WebStyle States

Working on Desktop projects is all fun and jokes. You can just change how the whole application looks every time your application users move their mouse one pixel to the left. Latency? Who cares!

In order to achieve the same results, WebStyle has been improved to support states. Hover, Pressed and Visited.

• WebStyle.Hover
  This is the style that will be applied when the mouse is over the element
• WebStyle.Pressed
  This is the style that will be applied when the user is pressing a mouse button in the element
• WebStyle.Visited
  This style can be used with WebLink instances. Used to let the user know the browser has visited that link in the past

Consider the following WebContainer:

In this case, it’s just a container with a WebLabel inside.

The Opening event contains the following code:

Please note I’m using named colors. You can read more about named colors in Introducing Named Color and CSS Classes in Xojo Web. If you try using another Bootstrap theme, the same code will use the new color palette without modifications.

Here is the result:

Combined with WebStyle.AddTransition, it opens the gates for more interesting GUIs. Let’s add some transitions to our code:

Let’s try the project again:

Neat! Let’s go crazy for a second with more complex effects:

The result:

You should definitely avoid going that crazy, this is just to show the possibilities. As Dr. Ian Malcolm said … “Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.”

WebContainer.Pressed

Speaking about pressing on things, WebContainer.Pressed event is now available, so you don’t need to place a WebLabel or a WebContainer on top just to capture that event anymore. The event comes with some coordinates, just in case you need them.

The result:

Other changes

WebToolbar.Resized

Trying to tweak your design for different screen sizes? If WebToolbar’s automated behavior is not enough, you can implement the new WebToolbar.Resized event and adapt the contents. This is useful when you are reusing the same WebToolbar subclass in multiple WebPages. You will be able to place this code in just one place.

Exporting maps with WebMapViewer

Same as with MobileMapViewer. You can now use WebMapViewer.ToPicture method to export the current map. Like WebChart.ToPicture, due to the asynchronous nature of Web projects, the picture will be available in the new WebMapViewer.RequestedPicture event.

Updated DataTables

Last, but not least, DataTables has been upgraded from v1.13.4 to v2.2.2.

That’s (not) all!

As always, please make sure to check the release notes for a detailed list of new features and bug fixes. The Web framework is built on top of Xojo, new global features or bug fixes also applies to Web, including improvements to Console projects. Xojo Web is “just” a big Console project.

Thank you everyone for reporting, testing beta builds and giving us feedback.

Happy coding!

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

First, add a new Module to a web project. For this tutorial we’ll name it WebTools. Next, add the following method to it with a Global scope:

• Method Name: ModalBackgroundColor
• Parameters: Extends v As WebDialog, assigns c As String
• Scope: Global

And type the following snippet of code in the associated Code Editor:

v.ExecuteJavascript("document.getElementById('" + v.ControlID + "_body').style.backgroundColor='"+c+"';")

With that done, we only need to call it from the Opening Event Handler of a WebDialog instance to set the desired background color:

Me.ModalBackgroundColor = "#f00" // Sets the background color to Red.

This leads to some interesting side effects. For example, the header on the WebListbox control and the loupe icon on the WebSearchField are transparent. That means that they look good when the background color on the WebDialog is the default white color, but not so good when we set a different background color on the WebDialog instance.

Avoid this issue by accessing the Style property on the proper div class on these objects. The tricky part here is to access the instance number whose inner header class we need to change. For that, the approach taken here may be a bit of overkill, but it works.

Such an approach is based on subclassing those WebControls we need to reference. In this case we are going to create subclasses for the WebListBox and the WebSearchField.

Add a new class to the project and name it MyWebListBox, setting its Super to WebListBox. Next, add a new shared property with the following values:

• Shared Property Name: globalInstance
• Data Type: Dictionary
• Scope: Private

And a second regular property with these values:

• Property Name: instanceNumber
• Data Type: Integer
• Scope: Public

Next, add the Constructor method to the new class. The IDE will automatically include the code calling its Super class. Then, add a couple lines of code to set the instanceNumber property to the last index of the globalInstance shared property array. The final code for the method will look like this:

Super.Constructor
If globalInstance = Nil Then globalInstance = New Dictionary
Var instances() As MyWebListBox
If Session <> Nil Then
  If globalInstance.HasKey(Session) Then
    instances = globalInstance.Value(Session)
  End If
  instances.add Me
  instanceNumber = instances.lastindex
  globalInstance.Value(Session) = instances
End If

Add next the Closed Event handler to the subclass, typing the following snippet of code in the associated Code Editor:

If Session <> Nil Then
  If globalInstance.HasKey(Session) Then
    Var instances() As MyWebListBox = globalInstance.Value(Session)
    instances.Remove(Me.instanceNumber)
    For n As Integer = Me.instanceNumber To instances.LastIndex
      instances(n).instanceNumber = instances(n).instanceNumber-1
    Next
    globalInstance.Value(Session) = instances
  End If
End If

Because we are using the Closed event handler in the subclass, we need to add it again using the Event Definition option (keeping the same name, number of parameters and returned type). This way the instances based on this subclass will be able to add that event too.

Repeat the same steps to add a new MyWebSearchField class whose Super is set to WebSearchField.

The code associated with the Constructor method for the MyWebSearchField is as follows:

Super.Constructor
If globalInstance = Nil Then globalInstance = New Dictionary
If Session <> Nil Then
  Var instances() As MyWebSearchField
  If globalInstance.HasKey(Session) Then
    instances = globalInstance.Value(Session)
  End If
  instances.add Me
  instanceNumber = instances.lastindex  
  globalInstance.Value(Session) = instances
End If

And the code associated with the Closed Event Handler should be this one:

If Session <> Nil Then
  If globalInstance.HasKey(Session) Then
    Var instances() As MyWebSearchField = globalInstance.Value(Session)
    instances.Remove(Me.instanceNumber)
    For n As Integer = Me.instanceNumber To instances.LastIndex
      instances(n).instanceNumber = instances(n).instanceNumber-1
    Next
    globalInstance.Value(Session) = instances
  End If
End If

With both both classes created, add them to a WebDialog instance (the one we named WebDialog1). Then, include the following line of code in the Shown event handler for each of these instances:

In the case of the ListBox1 instance:

Me.ExecuteJavascript("document.getElementsByClassName(""dataTables_scrollHeadInner"")["+me.instanceNumber.tostring+"].style.backgroundColor='#f00';") // This will set the listbox header background color to Red

Of course, you can improve this by accepting a variable color reference string instead of using the constant red value here (“#f00”).

And for the SearchField1 instance:

Me.ExecuteJavascript("document.getElementsByClassName(""input-group-append"")["+me.instanceNumber.toString+"].style.backgroundColor='#fff';") // This will set the "loupe" icon background color to White

Now, we need to make sure that both the WebListbox and the WebSearchField instances are reset when we are done, something we can do by calling their Close method from the Dismissed event handler added to the WebDialog1 instance in the project:

Run the example project and you’ll see how the first ListBox instance (on the WebPage1 page) keeps the header color as transparent (white, because the page background color is white), while the second one displayed by the WebDialog is set to red. Also, the SearchField control displays the loupe icon with a white background color.

Bonus Tip

Once you know the mechanics of how to access the proper ID and set the background on the WebDialog, it is easy to set an image as the background instead of a color. For example, this line of code in the Shown event of the WebDialog1 instance will load the Xojo logo as the background image:

Me.ModalBackgroundImage = "https://www.xojo.com/assets/img/logo.png"

ModalBackgroundImage is another method added to the WebTools module using the following signature:

• Method Name: ModalBackgroundImage
• Parameters: Extends v as WebDialog, Assigns url As String

Add the following associated code:

Var s As String = "document.getElementById('" + _
v.ControlID + "_body').style.backgroundImage=""url('"+url+"')"";"

v.ExecuteJavascript(s)

Now that you have the basics down, you can go even further and set other background attributes such as not repeating the image, setting the image size and more.

Questions? Ask me on Twitter @XojoES or on the Xojo Forum.

Themes

Xojo now uses Bootstrap themes, one of which is built-in and used by default. These themes control the entire appearance of all controls from sizes, to colors, to whether or not corners are rounded and more. There are a lot of publicly available Bootstrap themes so if you don’t care for the built-in one, you can find one on the Internet you like and simply drop it into your project to have it automatically replace the default theme. You can find high-quality, free and Xojo-compatible themes at bootswatch.com. Click the Preview button for any theme on that site to see what parts of the appearance of controls will change.

To use one of the the themes at Bootswatch.com, click the Download button’s menu (not the button itself) and choose the file titled bootstrap.min.css. That’s the only file you need and it must have that file name to work in Xojo. Once you have downloaded your theme, drop it into your project to use it.

Here’s just a tiny sample of the preview of the Superhero theme:

Customizing Individual Controls

This doesn’t mean you can’t customize individual controls. You still can. Some have properties available you can set in the Inspector but all have a Style property that can be changed via code. You can change background color, border color, border thickness, drawing color, opacity as well as font information such as the font itself, size, bold, italic, and strikethrough. You can even add animation through CSS transitions. If you have experience in CSS, you can set just about any property using the Value method.

Transitioning Control Appearance from Web Framework 1.0 to 2.0

Big transitions are rarely easy. However, the bigger your project is, the more time you’ve likely spent creating dozens of styles and then applying them to many of your controls. Themes solve this problem. You choose a theme, drop it in and the appearance of controls across your entire project is updated. If you are building an app for an organization that already has specific colors and appearance standards in place, using themes in Xojo makes it easy for them to provide you a theme that you can drop in to make sure the app you create for them matches those standards.