GUI Label Markup

From HEWIKI
Revision as of 15:11, 4 November 2011 by Alex (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

GUI Label Markup

GUI Label markup

Basics

Label markup allows you to customize the appearance and functionality of your text in GUI Controls. Markup is done via tags in matched pairs, much like HTML. Tags are enclosed in curly braces {}. Again like HTML, tags may be nested, but are always closed in the order in which they are opened; there is no designation in a closing tag {/} to indicate which opening tag it would belong to, in any case.

You can use any combination of tags within a given label; the control in the example image contains a single label, with at least one use of each type of markup. In the case of conflicting/overlapping tags, the innermost tag will take precedence.

To include actual curly braces in your text, pair them as doubles, like {{ and }}, and the engine will not try to treat them as markup. Only one of each pair will be displayed in the label.

Foreground color

{f:#r,g,b,a}text to be affected{/}

The r,g,b,a is comprised of four floats, 0-1, much like the statePresentations of GUI Controls.
The a (alpha) should just be left at 1, and in fact setting it to something else will probably have no effect.

For example, bright red text would be done with {f:#1,0,0,1}hey, bright red text!{/}

As mentioned above, if two foreground (or two background) tags are nested, the innermost takes precedence.
For example, {f:#1,0,0,1}this text would be red, {f:#0,1,0,1}this would be green{/}, and this would revert to red{/}.

Background color

{b:#r,g,b,a}text to be affected{/}

Again, the r,g,b,a is comprised of four floats, 0-1, much like the statePresentations of GUI Controls.

Underlining

{u}text to be underlined{/}

Links

{a:name}text to be linked{/}

Links in text have no inherent functionality outside of a few automatic script callbacks. When a link is moused over or out of, or clicked on, a munged function is called in that label's script, based on the prototype's name (for example, "label"). If it has no script, nothing happens, and the link is pointless.

 function label_OnMouseEnterLink(args references GUIMouseEvent)
   guiutils:fadingalert("You just entered the link: {f:#1,0,0,1}" + args.lnktag + "{/}", 0:00:03)
   args.handled = true
 .
 function label_OnMouseLeaveLink(args references GUIMouseEvent)
   guiutils:fadingalert("You just exited the link: {f:#1,0,0,1}" + args.lnktag + "{/}", 0:00:03)
   args.handled = true
 .
 function label_OnMouseClickLink(args references GUIMouseEvent)
   guiutils:fadingalert("You just clicked the link: {f:#1,0,0,1}" + args.lnktag + "{/}", 0:00:03)
   args.handled = true
 .

Alternately, your munged function name can be the name of the label in question. So for a label named 'characterName', the example functions would be as follows:

 function characterName_OnMouseEnterLink(args references GUIMouseEvent)
   guiutils:fadingalert("You just entered the link: {f:#1,0,0,1}" + args.lnktag + "{/}", 0:00:03)
   args.handled = true
 .
 function characterName_OnMouseLeaveLink(args references GUIMouseEvent)
   guiutils:fadingalert("You just exited the link: {f:#1,0,0,1}" + args.lnktag + "{/}", 0:00:03)
   args.handled = true
 .
 function characterName_OnMouseClickLink(args references GUIMouseEvent)
   guiutils:fadingalert("You just clicked the link: {f:#1,0,0,1}" + args.lnktag + "{/}", 0:00:03)
   args.handled = true
 .

Note that while there are functions for entering and leaving a link, there is no predefined method for changing the appearance, such as a hover state specifically for that link. This will be remedied at some point.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox