Difference between revisions of "WebCustomUI"
m (1 revision) |
m (38 revisions imported) |
||
| (8 intermediate revisions by 2 users not shown) | |||
| Line 33: | Line 33: | ||
| + | ==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.<br/> | ||
| + | Simply Drag and Drop ''WebCustomUI Folder'' into your project. | ||
| + | ===New Xojo Web Project=== | ||
| + | [[File:UI_Controls Library.png|thumb|right|x200px|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 [[CustomUI#Using_a_Custom_Style|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. | |
==Limitations== | ==Limitations== | ||
| Line 56: | Line 72: | ||
===To do list=== | ===To do list=== | ||
| − | + | Custom Tooltips | |
==History== | ==History== | ||
| Line 105: | Line 121: | ||
==See also== | ==See also== | ||
| − | [[CustomUI]], [[UI_GroupBox]] | + | [[CustomUI]], [[UI_Control]], [[UI_GroupBox]] |
Latest revision as of 16:25, 7 August 2015
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.
Contents
Available Controls
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
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.
Limitations
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
History
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
Information
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.
Requirements
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).
