View source for The UI Editor

The UI Editor is found in all Editions of UBot Studio. Only [[Developer Edition|Developer edition]] users will be able to access the html and css of the interface created and change it using the Generate UI HTML command button.

The Feature can be accessed in the [[The Anatomy of UBot Studio|View Menu]] of UBot Studio.


[[File:wikiuiedi.gif]]




== Anatomy of the UI Editor ==

The UI Editor is comprised of four parts: 

'''The Tool Box:''' This is where the text box, panel, large paragraph boxes, check boxes, and other UI elements are found. Each item can be dragged and dropped into the UI area.


[[File:wikitool.gif]]




'''The UI Area:''' Where the UI the design of the UI occurs. What appears in the UI area is what will appear on the UI for the compiled bot.


[[File:uieditor1.jpg]]




'''The Properties and Style Panel:''' Allows the changing of properties such as the element ID (which will also be the variable for the UI element), height, width, layers, etc, as well as style properties such as the color, font, borders color and width, and many more.


[[File:uieditor2.jpg]]




'''The Snap To Drop Down:''' Assists in moving and re-sizing element to make UI elements easier to align.


[[File:uieditor3.jpg]]

== Script Integration ==

To integrate the UI element into the rest of the script, the UI Element ID also serves as the variable for the UI element.


[[File:uieditor4.jpg]]



Type the UI Element Label into the text box as a variable.


[[File:uieditor6.jpg]]



The keyword typed into the Textbox will be inserted into the selected field in the type text command.


[[File:uieditor5.jpg]]



For the UI button, a define command will be created for the button.

[[File:mybutton.jpg]]


Once a define command is created, the defined command will be assigned to the button:

[[File:uibutton.gif]]


Click OK to exit the UI Editor.

Once the button appears on the UI editor, clicking it will run the commands within the define command assigned to the UI Button.




== The Generate UI HTML Command Button ==

The Generate UI HTML command button is found on developer licenses.

It will generate a UI HTML command complete with the css and html for the UI created in the UI editor.


[[File:uihtmp0.jpg]]


This allows advanced Developer license holders to edit the css and html for the generated UI for greater control over the compiled scripts's customization.