Difference between revisions of "WebCustomUI"

From Jeremie Leroy - XOJO Controls Wiki
Jump to: navigation, search
m (38 revisions imported)
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
 +
 
[[File:webcustomui-main.png|400px|thumb|right]]
 
[[File:webcustomui-main.png|400px|thumb|right]]
  
Line 4: Line 6:
 
This set of controls will give your applications a unique and professional display.
 
This set of controls will give your applications a unique and professional display.
  
−
Nine default styles are included, which can be easily edited into new styles using the CustomUI Style Builder.
+
Ten default styles are included, which can be easily edited into new styles using the CustomUI Style Builder.
  
 
===Available Controls===
 
===Available Controls===
 +
{{col-begin}}
 
*UI_Button
 
*UI_Button
 
*UI_Checkbox
 
*UI_Checkbox
 
*UI_FileUploader
 
*UI_FileUploader
−
*[[UI_GroupBox]]
+
*UI_GroupBox
 
*UI_Link
 
*UI_Link
 
*UI_Listbox
 
*UI_Listbox
Line 25: Line 28:
 
*UI_TextField
 
*UI_TextField
 
*UI_Toolbar (coming soon)
 
*UI_Toolbar (coming soon)
 +
{{col-end}}
  
−
Each control is a subclass of the Xojo Web controls. Except for UI_GroupBox which is a new control very similar to the UI_Rectangle control.
+
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.<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==
  
 +
===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===
 
===Known Issues===
 
*UI_Slider doesn't display an Enabled=False state. The Knob just won't be active.
 
*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_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===
 
===To do list===
−
Currently, RadioButtons and Checkboxes only have an applied style to their caption.<br/>
+
Custom Tooltips
−
A future update of WebCustomUI will support the same styles as the Desktop version of CustomUI.
+
 
 
==History==
 
==History==
 +
 +
===Beta 6===
 +
*Fixed UI_SearchField in Safari
 +
*RadioButton and CheckBox now display correctly
  
 
===Beta 5===
 
===Beta 5===
 
*Improved Text selection color
 
*Improved Text selection color
 
*Improved default styles
 
*Improved default styles
 +
*Improved Selection color for UI_Listbox and UI_FileUploader
 +
*UI_Module.FontFamily property to set the font-family for all controls
 +
  
  
Line 49: Line 91:
 
*Fixed some issues in Internet Explorer
 
*Fixed some issues in Internet Explorer
 
*Fixed some major issues in Safari
 
*Fixed some major issues in Safari
−
*Improved Enabled=False
+
*Improved Enabled=False for all controls
  
  
Line 57: Line 99:
 
There is no UI_Label control to replace the WebLabel control.<br>
 
There is no UI_Label control to replace the WebLabel control.<br>
 
It isn't necessary to replace the Label controls to apply the Custom UI style.
 
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.<br/>
 +
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==
 
==Requirements==
  
Line 63: Line 112:
  
 
On the client side, a CSS3 enabled Browser is necessary.<br/>
 
On the client side, a CSS3 enabled Browser is necessary.<br/>
−
All web Browsers supported by Xojo are compatible, including Mobile Browsers.
+
All web Browsers supported by Xojo are compatible, including Mobile Browsers.<br/>
 +
As of Xojo 2015R1, Opera browser isn't supported.
  
  
Line 70: Line 120:
  
 
==See also==
 
==See also==
−
[[CustomUI]], [[UI_GroupBox]]
+
 
 +
[[CustomUI]], [[UI_Control]], [[UI_GroupBox]]

Latest revision as of 16:25, 7 August 2015


File:Webcustomui-main.png
400px

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.

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).

See also

CustomUI, UI_Control, UI_GroupBox

Retrieved from "https://www.jeremieleroy.com/wiki/index.php?title=WebCustomUI&oldid=14572"