docs.roxen.comView this page in a printer friendly mode
DocsRoxenWebServer 6.1Web Developer ManualGraphics Tags
Copyright  2018, Roxen Internet Software
Suggestions, comments & compliments
manuals@roxen.com
 DEMO  DOCS  PIKE
 COMMUNITY  DOWNLOAD
www.roxen.com



Color attributes
Internal Images
<anfang>
<atlas>
<captcha-verify>
<cimg>
<cimg-url>
<colorscope>
<configimage>
<diagram>
<gbutton>
<gbutton-url>
<gh>
<gtext>
<gtext-id>
<gtext-js>
<gtext-url>
<gxml>
<imgs>
<tablist>

<tablist></tablist>

Provided by module: Graphics: Tab list

<tablist> produces graphical navigationtabs. For example, the Administration interface for Roxen WebServer uses tablists for easier administration.

The <tablist> tag is by design a wrapper for the <gbutton> tag, i.e. it inherits all <gbutton> attributes. Also, the <tab> tag is in turn a wrapper for <tablist> meaning that all attributes which may be given to <tablist> may also be used in <tab>. Those attributes given to <tablist> has a global effect on the tablist, while the same attributes given to a <tab> only will have a local effect, thus overriding the globally given attribute.

All contents inside <tablist> except for the <tab> tags will be discarded. <taglist> is used in this way to make it possible for tabs to look different when they are for instance first or last in the tablisting.

The <define> tag can be used to globally define the tablist fgcolor (foreground color). The define, <define name="fgcolor">, declared prior to the <tablist> tag, will be sent as an extra argument to <gbutton>.

<tablist> <tab selected='selected'>Information</tab> <tab>Settings</tab> </tablist>
/Information\/Settings\

Attributes

frame-image=""(/internal-roxen-tabframe)

A layered Photoshop (PSD) or Gimp (XCF) image which portrays the tab's appearance. Descriptions of the different layers follows below. If a <define name="frame-image">Image_path</define> definition is set that image will be the default value instead of /internal-roxen-tabframe.


selcolor="color"(white)

This attribute sets the backgroundcolor for the image. The effect of this attribute is only shown when the attribute "selected" has been set. If a <define name="selcolor">colordefinition</define> definition is set that color will be the default value instead of white.


seltextcolor="color"(black)

This attribute sets the textcolor for the image. The effect of this attribute is only shown when the attribute "selected" has been set. If a <define name="seltextcolor">colordefinition</define> definition is set that color will be the default value instead of black. If this definition is not present, the attribute "textcolor", the definition "textcolor" and finally the color "black" will be tested.


dimcolor="color"(#003366)

This attribute sets the backgroundcolor for the image. The effect of this attribute is only shown when the attribute "selected" has not been set. If a <define name="dimcolor">colordefinition</define> definition is set that color will be the default value instead of #003366 .


textcolor="color"(white)

This attribute sets the textcolor for the image. The effect of this attribute is only shown when the attribute "selected" has not been set. If a <define name="textcolor">colordefinition</define> definition is set that color will be the default value instead of white .


<tab></tab>

Provided by module: Graphics: Tab list

<tab> defines the layout and function for each and one of the tabs in the tablisting. <tab> inherits all attributes available to <tablist>, hence all attributes available to <gbutton> tag may be used with the <tab> tag. For instance, the attribute href is very useful when using <tab> and a part of <gbutton>. For more information about <gbutton> attributes, see its documentation.

The contents of the <tab> is the tabs text.

Below follows a listing of the attributes unique to the <tab> tag. Also, a listing of how imagelayers may be used is presented.


Attributes

selected=""

Using this attribute the layer "selected" in the image will be shown in the generated image. If this attribute has not been given the layer "unselected" will be shown in the generated image.


alt="text"(the tags content)

This attribute sets the alt-text for the tab. By default the alt-text is fetched from the content between the <tab>...</tab>.


Image Layers

These lists shows the function of the different image layers as well as how one layer from each group may be combined.

Layer Position

Position layers are the layername prefix.

first

A layer with this prefix is only shown for the first <tab> tag inside the <tablist> tag.

last

A layer with this prefix is only shown for the last <tab> tag inside the <tablist> tag.

Layer Focus

Focus layers are the middle part of the layername.

selected

This layer is only shown when the attribute selected has been set.

unselected

This layer is only shown when the attribute selected has not been set.

Layer Type

Type layers are the layername suffix.

[nothing, i.e. ""]

This layer is inserted above all layers in the image, closest to the viewer that is, if lower layers are considered to further in inside the monitor.

mask

This layer should be transparent where the tab is supposed to be transparent. The only thing that is retrieved from this layer is the mask; any graphical content here will be thrown away.

frame

The framelayer contains the various graphical elements fromwhich the frame around the button is built. This layer will always be run in "Multiply" mode, regardless of what mode it was previously set to. "Multiply" adjusts the framelayers brightness, i.e. Value ("V" in HSV), without affecting the colorcomponents, i.e. Hue and Saturation ("HS" in HSV).

background

This layer will be put beneath the frame layer and the printed text.

left

This layer is put on the left side of the of the generated image, thus increasing the width of the images left side.

right

This layer is put on the right side of the of the generated image, thus increasing the width of the images right side.

above

This layer will be shown above the other parts of the generated image, thus increasing the height of the images top.

below

This layer will be shown below the other parts of the generated image, thus increasing the height of the images base.

Handling layers

The Position- and Focus-layers give instructions on when the layer is used while the Type-layers indicates its function.

PositionFocusType

""

""

""

first

selected

background

last

unselected

mask

frame

left

right

above

below

These three layertypes can be combined into all possible permutations. The order in the name is always Position Focus Type, each type separated by a space. If one or two of the three layertypes is left out, the layer will be shown regardless the extra criterias that might be choosen. For instance, "selected frame" will be shown for the "first" and "last" tabs as well as for the ones in between the two, given that the tab has been marked as "selected".

None of these layers are strictly necessary, as long as there exists at least one layer of the type "background" or "frame". If all "mask"-layers are left out, the mask will primary be the framelayer and secondly the backgroundlayer, if the framelayer is not available.