Adding a dialog

From Second Life Wiki
Revision as of 11:45, 3 November 2006 by James Linden (talk | contribs)
Jump to navigation Jump to search

Windows and dialogs in Second Life are implemented as LLFloater objects. The class hierarchy is:

LLFloaterFoo - a "foo" dialog
LLFloater - generic window or dialog with close box, minimize box, etc.
LLPanel - rectangular area with dark background, has functions like childSetText(), childGetValue()
LLUICtrl - any widget that can take keyboard focus
LLView - base class, container for UI widget children

Create a new C++ header and source file to hold your new class. By convention these are called llfloaterfoo.h and .cpp. Place them in the newview directory.

You'll also need a new XML description file. These are found in the indra/newview/skins/xui/en-us directory. It's easiest to copy an existing file and modify it. Name the new file floater_foo.xml.

Important - Second Life UI uses OpenGL coordinates, so 0,0 is at the bottom left corner.

Let's make a floater that has a text label "bar", a text line input field "baz", and a button "hippo".

A basic floater header looks like this:

#include "llfloater.h"
class LLFloaterFoo : public LLFloater
{
public:
    LLFloaterFoo();
    virtual ~LLFloaterFoo();

    // by convention, this shows the floater and does instance management
    static void show(void*);

private:
    // when a line editor loses keyboard focus, it is committed.
    // commit callbacks are named onCommitWidgetName by convention.
    void onCommitBaz(LLUICtrl* ctrl, void *userdata);

    // by convention, button callbacks are named onClickButtonLabel
    void onClickHippo(void* userdata);

    // no points to widget here - they are referenced by name
};

The XML data definition should look like this:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!-- All our XML is utf-8 encoded. -->

<!-- Floaters can optionally have their titlebar drag handle on the left.
     If so, the title is not visible.
     When a floater is resizable, a min_width and min_height must be specified. -->
<floater
	name="foo_floater"
	title="Foo"
	can_resize="true"
	can_minimize="true"
	can_close="true"
	can_drag_on_left="false"
	width="275"
	height="250"
	min_width="80"
	min_height="220"
	>

<!--
 By convention text fields are suffixed with _text.
 Common fonts include SansSerif and SansSerifSmall. See LLFontGL::fontFromName for more.
 Positions may be in absolute coordinates or as deltas.
 bottom_delta = -40 indicates 40 pixels from the top edge.
 follows indicates how the widget should move when the container is resized.
-->

	<text name="bar_text"
		font="SansSerifSmall"
		left="10"
		bottom_delta="-40"
		width="260"
		height="16"
                follows="left|top"
		>
bar is a generic programming identifier
	</text>


<!--
  Buttons are suffixed with _btn by convention.
  Note there is no association with a callback function here - it must be connected
  in the C++ code.
  bottom_delta here means from the TOP of the last widget, not the bottom.
-->

	<button
		name="hippo_btn"
		label="Hippo"
		font="SansSerifSmall"
		left="10"
		bottom_delta="-25"
		width="100"
		height="20"
		follows="top|left"
		/>
</floater>