Difference between revisions of "EZUI"
Jump to navigation
Jump to search
Ben.christel (talk | contribs) |
Ben.christel (talk | contribs) |
||
Line 33: | Line 33: | ||
** the text on the button | ** the text on the button | ||
** a callback function that is called when the user clicks the button | ** a callback function that is called when the user clicks the button | ||
− | * The <code>sections()</code> function is used to divide the UI into sections. <code>sections</code> takes any number of strings as parameters; these strings are used as section IDs. Note that the strings passed to <code>sections()</code> must be valid HTML ID attribute values (i.e. they must begin with a letter and contain only letters, numbers, and underscores). | + | * The <code>sections()</code> function is used to divide the UI into sections. <code>sections</code> takes any number of strings as parameters; these strings are used as section IDs. Note that the strings passed to <code>sections()</code> must be valid HTML ID attribute values (i.e. they must begin with a letter and contain only letters, numbers, and underscores). <code>sections()</code> returns a string that can be passed to <code>write()</code> or <code>append()</code>. |
* The <code>append()</code> function is used to append text or HTML to a specific section of the UI. The function takes the following parameters: | * The <code>append()</code> function is used to append text or HTML to a specific section of the UI. The function takes the following parameters: | ||
** The ID of the section | ** The ID of the section | ||
Line 45: | Line 45: | ||
system.require('std/graphics/ezui.em'); | system.require('std/graphics/ezui.em'); | ||
ezui.script(@ | ezui.script(@ | ||
− | sections('buttons', 'output'); | + | write(sections('buttons', 'output')); |
var b1 = button('button 1', buttonCB); | var b1 = button('button 1', buttonCB); | ||
var b2 = button('button 2', buttonCB); | var b2 = button('button 2', buttonCB); |
Revision as of 04:45, 10 August 2011
EZUI is a user interface creation tool developed by Ben Christel. It is designed to allow an application developer to add code to an entity's script that specifies the UI's appearance and logic. The UI will then appear on a user's screen when the user interacts with one of the entity's presences.
EZUI was designed with the following goals in mind:
- Facilitating rapid development of dialog-like UIs associated with a particular presence in the world
- Enabling multiple users to interact with a presence simultaneously using the UI
- Allowing application developers to easily collect and store data input by the user
- Facilitating communication between the presence controlling the UI and the avatar interacting with it
- Automating the synchronization of data between the UI and the controlling presence
Tutorial
Hello World
- You should use
system.require('std/graphics/ezui.em')
to ensure that the required files are included. - The Emerson function
ezui.script()
takes a string containing JavaScript to be executed when the GUI loads. The code passed toezui.script()
is executed every time a user opens the GUI. In between invocations of the GUI, its contents are cleared. - The
write()
function takes a string as a parameter. This string is appended to the GUI's HTML, similar to the way document.write() works in a plain HTML document.
The Code
system.require('std/graphics/ezui.em');
ezui.script(@
write('Hello, World!');
@);
Creating Buttons And Sections
- Buttons are represented as JavaScript objects. However, when you want to make a button appear on the screen, you can treat it as if it's a string of HTML code. Button objects can be passed to write() or concatenated with strings.
- The
button()
function is used to create a button. This function takes the following parameters:- the text on the button
- a callback function that is called when the user clicks the button
- The
sections()
function is used to divide the UI into sections.sections
takes any number of strings as parameters; these strings are used as section IDs. Note that the strings passed tosections()
must be valid HTML ID attribute values (i.e. they must begin with a letter and contain only letters, numbers, and underscores).sections()
returns a string that can be passed towrite()
orappend()
. - The
append()
function is used to append text or HTML to a specific section of the UI. The function takes the following parameters:- The ID of the section
- The text to append to the section
- The button callback is called with the button's text as a parameter. This allows the UI to determine which button was clicked if multiple buttons use the same callback.
The Code
system.require('std/graphics/ezui.em');
ezui.script(@
write(sections('buttons', 'output'));
var b1 = button('button 1', buttonCB);
var b2 = button('button 2', buttonCB);
append('buttons', b1+'<br />'+b2);
function buttonCB (text) {
append('output', 'You clicked '+text+'!<br />');
}
@);