Difference between revisions of "Adding a dialog"
Jump to navigation
Jump to search
James Linden (talk | contribs) |
James Linden (talk | contribs) |
||
Line 11: | Line 11: | ||
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. | 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. | ||
Let's make a floater that has a text label, a text line input field, and a button. | '''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: | A basic floater header looks like this: | ||
Line 20: | Line 22: | ||
{ | { | ||
public: | public: | ||
LLFloaterFoo(); | LLFloaterFoo(); | ||
virtual ~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: | |||
<pre> | |||
<?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> | |||
</pre> |
Revision as of 11:45, 3 November 2006
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>