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.
Each control is a subclass of the Xojo Web controls.
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
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.
- Save your Web Project in XML format.
- Open WebCustomUI Converter in Xojo and Run the application.
- Inside the Converter application, open your XML-format project
- 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
- 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
- Fixed UI_SearchField in Safari
- RadioButton and CheckBox now display correctly
- 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
- 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).