From Jeremie Leroy - XOJO Controls Wiki
Revision as of 16:25, 7 August 2015 by Admin (Talk | contribs) (38 revisions imported)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

WebCustomUI is an extension to the Xojo Web framework bringing customization to the highest possible level.
This set of controls will give your applications a unique and professional display.

Ten default styles are included, which can be easily edited into new styles using the CustomUI Style Builder.

Available Controls

  • UI_Button
  • UI_Checkbox
  • UI_FileUploader
  • UI_GroupBox
  • UI_Link
  • UI_Listbox
  • UI_PopupMenu
  • UI_ProgressBar
  • UI_ProgressWheel
  • UI_RadioButton
  • UI_Rectangle
  • UI_Scrollbar
  • UI_SearchField
  • UI_SegmentedControl
  • UI_Slider
  • UI_TextArea
  • UI_TextField
  • UI_Toolbar (coming soon)

Each control is a subclass of the Xojo Web controls.

Using WebCustomUI

In order to use WebCustomUI in a Xojo Web Project, the first step will be importing the WebCustomUI Folder that holds all necessary controls and modules.
Simply Drag and Drop WebCustomUI Folder into your project.

New Xojo Web Project

The UI_Controls in the Library

After importing the WebCustomUI Folder the design of the WebPages will need some special treatment.

Instead of using the native Xojo WebControls (such as Button, CheckBox, PopupMenu, ...), it is mandatory to use the UI_ replacements from the Library.

It is also crucial to add a UI_PageSource control to each WebPage of the project. UI_PageSource is responsible for setting the style of each UI_control.

The default style is Noire UI Elements. To use a different style please refer to Using a Custom Style.

Existing Xojo Web Project

WebCustomUI comes with a very handy tool: WebCustomUI Converter.

  1. Save your Web Project in XML format.
  2. Open WebCustomUI Converter in Xojo and Run the application.
  3. Inside the Converter application, open your XML-format project
  4. And Voilà ! The Web Project is almost ready to use WebCustomUI.

The final step is to verify that each WebPage has a UI_PageSource control.


Future versions of Xojo

  • The UI_Slider uses a small javascript hack to replace the picture of the Knob (a.k.a Thumb). This behavior might break in future versions of Xojo.

Known Issues

  • UI_Slider doesn't display an Enabled=False state. The Knob just won't be active.
  • UI_PopupMenu shows the regular drop-down arrow on Firefox until Firefox v35
  • UI_RadioButton and UI_Checkbox don't have custom style in Internet Explorer

To do list

Custom Tooltips


Beta 6

  • Fixed UI_SearchField in Safari
  • RadioButton and CheckBox now display correctly

Beta 5

  • Improved Text selection color
  • Improved default styles
  • Improved Selection color for UI_Listbox and UI_FileUploader
  • UI_Module.FontFamily property to set the font-family for all controls

Beta 4

  • Fixed some issues in Internet Explorer
  • Fixed some major issues in Safari
  • Improved Enabled=False for all controls


There is no UI_Label control to replace the WebLabel control.
It isn't necessary to replace the Label controls to apply the Custom UI style.

Font-Family isn't included in the Styles in order to keep a global font style.
However, editing the UI_Module.FontFamily property in the App.Open event will enable changing the font throughout the entire UI.

The "Got Wood" UI Style is a proof of concept. It is very heavy on the CSS side, with approximately 200KB of CSS. We do not recommend using this Style in your own projects.


WebCustomUI does not require any special hardware or software on your web server.
Any web server that can run Xojo WebApps is sufficient to use WebCustomUI.

On the client side, a CSS3 enabled Browser is necessary.
All web Browsers supported by Xojo are compatible, including Mobile Browsers.
As of Xojo 2015R1, Opera browser isn't supported.

Until version 35 of Firefox, a bug with "-moz-appearance:none" happens with PopupMenus.
It is highly recommmended to update Firefox to the latest version or to use a Webkit browser such as Safari or Google Chrome (Chromium).

See also

CustomUI, UI_Control, UI_GroupBox