We are currently performing an upgrade to our software. This upgrade will bring MediaWiki from version 1.31 to 1.33. While the upgrade is being performed on your wiki it will be in read-only mode. For more information check here.

UI/Frame Types/Spinner

From SC2Mapster Wiki
Jump to: navigation, search

Spinner

A Spinner Frame using TeamResourceSpinnerTemplate as template

Spinner provides a control where an user can pick a number from a range, clicking the buttons increases or decreases that number value.

Structure

A Spinner contains an Image frame used as the background of the frame Value which is displayed through a Label frame. It also features two buttons to raise or lower the Value, called IncrementButton and DecrementButton.

Ideally a Spinner Should have set its Minimum and Maximum properties, which set the range Value can hold.

Properties

Spinner inherits from Control and shares all of its properties. Additionally it has got:


MinorStep
The increase/decrease factor on the Value of a Spinner.


MajorStep
The maximum increase/decrease factor on the Value of a Spinner.


Minimum
The minimum possible Value on a Spinner.


Maximum
The maximum number that can be used as a UI/Frame Properties/Value under a UI/Frame Types/Control


Value
A property that can store a number under some types of Control. Can be changed by the end user through a control interactable component.


Insets
The margins used to display a text within a EditBox, Spinner and Button


Image
An Image frame generally used by controls as its visual representation or itas background shape.


Label
An Label frame generally used by controls to explain what the control is for, or in some case, the text content, like in EditBox and Spinner


IncrementButton
A Button frame used to decrement the Value on a Spinner


DecrementButton
The maximum increase/decrease factor on the Value of a Spinner.


Example

    <Frame type="Spinner" name="TeamResourceSpinnerTemplate">
        <Insets top="0" left="15" bottom="0" right="15"/>
        <Width val="120"/>
        <Height val="48"/>
        <MinorStep val="2"/>
        <MajorStep val="4"/>
        <Minimum val="100"/>
        <Maximum val="0"/>
        <Value val="1"/>
        <Image val="StandardBackground"/>
        <Label val="StandardGlueSpinnerLabel"/>
        <IncrementButton val="StandardIncrementButton"/>
        <DecrementButton val="StandardDecrementButton"/>
        <CollapseLayout val="true"/>
        
        <Frame type="Image" name="StandardBackground">
            <Texture val="@UI/TeamResourceSpinnerBackground" layer="0"/>
            <TextureType val="Border" layer="0"/>
            <LayerColor val="##TeamResourcePanelBorderColor"/>
            <DescFlags val="Internal"/>
        </Frame>
        
        <Frame type="Button" name="StandardIncrementButton">
            <NormalImage val="NormalImage"/>
            <HoverImage val="HoverImage"/>
            <Width val="20"/>
            <DescFlags val="Internal"/>

            <Frame type="Image" name="NormalImage">
                <LayerCount val="3"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowNormal" layer="0"/>              
                <StateCount val="2" layer="0"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="1"/>
                <LayerVisible val="false" layer="1"/>                
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="2"/>
                <LayerVisible val="false" layer="2"/>                
                <DescFlags val="Internal"/>
            </Frame>

            <Frame type="Image" name="HoverImage">
                <LayerCount val="3"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowNormal" layer="0"/>
                <StateCount val="2" layer="0"/>                
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="1"/>
                <LayerVisible val="false" layer="1"/>                
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="2"/>
                <LayerVisible val="false" layer="2"/>                
                <DescFlags val="Internal"/>
            </Frame>
        </Frame>

        <Frame type="Button" name="StandardDecrementButton">
            <NormalImage val="NormalImage"/>
            <HoverImage val="HoverImage"/>
            <Width val="20"/>
            <DescFlags val="Internal"/>

            <Frame type="Image" name="NormalImage">
                <LayerCount val="3"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowNormal" layer="0"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="0"/>
                <StateCount val="2" layer="0"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="1"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="1"/>
                <LayerVisible val="false" layer="1"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="2"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="2"/>
                <LayerVisible val="false" layer="2"/>
                <DescFlags val="Internal"/>
            </Frame>

            <Frame type="Image" name="HoverImage">
                <LayerCount val="3"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowNormal" layer="0"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="0"/>
                <StateCount val="2" layer="0"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="1"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="1"/>
                <LayerVisible val="false" layer="1"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="2"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="2"/>
                <LayerVisible val="false" layer="2"/>
                <DescFlags val="Internal"/>
            </Frame>
        </Frame>

        <Frame type="Label" name="StandardGlueSpinnerLabel">
            <Style val="TeamResourceValue"/>
            <DescFlags val="Internal"/>
        </Frame>
    </Frame>