Difference between revisions of "EZUI"

Latest revision as of 17:24, 26 August 2011

Redirect to:

Flatland

@@ Line 1: / Line 1: @@
-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]].
+#REDIRECT [[Flatland]]
-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 <code>system.require('std/graphics/ezui.em')</code> to ensure that the required files are included.
-* The Emerson function <code>ezui.script()</code> takes a string containing JavaScript to be executed when the GUI loads.  The code passed to <code>ezui.script()</code> is executed every time a user opens the GUI.  In between invocations of the GUI, its contents are cleared.
-* The <code>write()</code> 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====
-<div style="font-size:120%">
-<source lang="javascript">
-system.require('std/graphics/ezui.em');
-ezui.script(@
-	write('Hello, World!');
-@);
-</source>
-</div>
-===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 <code>button()</code> 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 <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>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 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====
-<div style="font-size:120%">
-<source lang="javascript">
-system.require('std/graphics/ezui.em');
-ezui.script(@
-	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 />');
-	}
-@);
-</source>
-</div>

Difference between revisions of "EZUI"

Latest revision as of 17:24, 26 August 2011

Navigation menu

Search