CP: SliderField
Die CpSliderField Klasse ist von der CpField Klasse abgeleitet. Sie implementiert Schieberegler, welche direkt Modell-Properties verändern oder anzeigen.
CpSliderField Klasse
Ein Objekt der Klasse CpSliderField wird mit der Funktion AddSliderField() oder AddValueSliderField() erzeugt und einem ControlPanel zugewiesen.
- Panel: ControlPanel; Inherited; ReadOnly; Init = Parent ControlPanel
- Name: String; Inherited; ReadOnly; Init = 'Field' + FieldCounter
- Label: String; Inherited; ReadOnly; Init = Name
- Caption: String; ReadOnly; Init = '⇔'
- Color: String; ReadOnly; Init = ''
- ValueRef: CpObjectRef; Inherited; Private; Init = [ModelRef + '.' +] Name
- Min: Number; ReadOnly; Init = 0
- Max: Number; ReadOnly; Init = 1
- Steps: Integer(>=0); ReadOnly; Init = 0
- SnapTo: Number or Array of Number; ReadOnly; Init = undefined
- SnapRange: Number; ReadOnly; Init = 100
- LogScale: Boolean; ReadOnly; Init = false
- Slide: Boolean; ReadOnly; Init = false
- ReadOnly: Boolean; Inherited; ReadOnly; Init = false
- Enabled: Boolean; Inherited; Private; Init = true
- EnabledRef: CpObjectRef; Inherited; Private; Init = ''
- Description: String; Inherited; ReadOnly; Init = ''
- ColSpan: Integer(>0); Inherited; ReadOnly; Init = 1
- Attr: String; Inherited; ReadOnly; Init = ''
- BorderWidth: Integer(>=0); ReadOnly; Init = 1
}
Ein CpSliderField stellt ein Ein-/Ausgabefeld in Form eines Schiebereglers dar, welches mit einer globalen Variablen oder einem Modell-Property verknüpft ist. Der Wert dieser Variablen oder dieses Properties wird als Position des Reglers angezeigt. Den Wert des Modell-Properties kann der User mit dem Schieberegler direkt verändern.
Einige der Properties des Schiebereglers werden von seiner Basis-Klasse, dem CpField, geerbt.
CpSliderField Properties
| Panel | Verweis auf das übergeordnete ControlPanel Objekt. Das CpField Objekt wird in der Liste ControlPanel.Fields verlinkt. |
| Name | Standardwert für Label und ValueRef |
| Label | Label für das ControlPanel-Feld. Label dürfen HTML-Tags enthalten. |
| ValueRef | Referenz auf eine globale Variable oder ein Objekt-Property. |
| ReadOnly | true → Feld kann nicht verändert werden |
| Enabled | false → Feld ist deaktiviert. Dieses Property kann nur mit der Funktion IsEnabled() abgefragt werden |
| EnabledRef | Referenz auf ein Modell-Property, welches den Enabled-Zustand fernsteuert oder eine function, welche den enabled Zusatand berechnet. |
| Description | wird eingeblendet, wenn die Maus über dem Label oder dem HelpImage steht |
| Link | HTML- oder Wiki-Link zu einer Help-Seite mit der Beschreibung des Ein-/Ausgabefeldes. |
| ColSpan | Anzahl Tabellen-Spalten, welche das Werte-Feld überspannen soll |
| Attr | Zusätzliche HTML-Attribute für das Werte-Feld |
| Caption | Beschriftung des Slider-Handle. Caption dürfen HTML-Tags enthalten. Default = '⇔' = ⇔ |
| Color | Hintergrundfarbe des Slider-Handle. Bei '' wird die Farbe über CSS festgelegt. |
| Min, Max | Wertebereich, den der Slider abdeckt |
| SnapTo, SnapRange | Definiert einen Bereich in dem der Slider einrasten soll |
| LogScale | wenn true wird der Sliderbereich logarythmisch auf den Modellwert abgebildet |
| Steps | Schrittweite des Wertebereichs. 0 → kontinuierlich |
| Slide | Stop-Verhalten des Sliders. true → Slider rutscht beim Loslassen weiter |
| BorderWidth | Dicke des Slider-Rahmens zur Korrektur der Weglänge des Sliders |
CpSliderField Funktionen
| AddSliderField() | Erzeugt ein CpSliderField und fügt es einem ControlPanel hinzu |
| AddValueSliderField() | Erzeugt ein CpTextField und ein zugehöriges CpSliderField und fügt es einem ControlPanel hinzu |
| GetType() | Fragt den Typ des Feldes ab |
| GetValueRef() | Gibt den String-Wert des ValueRef Properties zurück. Auf ValueRef darf nicht direkt zugegriffen werden. |
| IsEnabled() | Gibt den Enabled-Zustand des Feldes zurück. Auf Enabled darf nicht direkt zugegriffen werden. |
| SetEnabled() | Setzt den Enabled-Zustand des Feldes. |
| GetHtmlID() | Gibt die HTML-ID eines ControlPanel-Feldes oder Items zurück |
| GetDomObj() | Gibt eine Referenz auf das DOM-Element eines ControlPanel-Feldes oder Items zurück |
ControlPanel.AddSliderField()
ControlPanel.AddSliderField( Parameter )
- Parameter: SliderFieldDef; Optional; Default = { }
- Return this: ControlPanel
- Name: String; Optional; Default = 'Field' + FieldCounter
- Standardwert für Label und ValueRef. Teil des id und name Attributes des Input-Elementes.
- Label: String; Optional; Default = Name
- Label dürfen HTML-Tags enthalten. Verwende '-', wenn kein Label angezeigt werden soll.
- Caption: String; Optional; Default = '⇔'
⇔ - Beschriftung auf dem Schieber des Schiebereglers
- Color: String; Optional; Default = ''
- Farbe des Schiebers des Schiebereglers. Bei einem Leerstring wird die Standardfarbe verwendet (rot)
- ValueRef: String; Optional; Default = [ModelRef + '.' +] Name
- Referenz auf eine globale Variable oder ein Objekt-Property.
- LogScale: Boolean; Optional; Default = false
- true → die Abbildung vom Regler auf den Modellwert ist logarythmisch
- Min: Number(<Max); Optional; Default = 0
- Nummer, die der Slider im Modell speichert, wenn er am linken Anschlag steht.
- Max: Number(>Min); Optional; Default = 1
- Nummer, die der Slider im Modell speichert, wenn er am rechten Anschlag steht.
- Steps: Integer(>=0); Optional; Default = 0
- Anzahl Schritte zwischen Min und Max. Wenn 0 liefert der Slider so viele Schritte wie möglich (kontinuierlicher Modus).
- SnapTo: Number or Array of Number; Optional; Default = none
- Der Regler rastet im Bereich SnapRange auf die Zahl SnapTo oder eine der Zahlen im Array ein
- SnapRange: Number; Optional; Default = 100
- Snap Bereich als Bruchteil des Reglerbereiches
- Slide: Boolean; Optional; Default = false
- true → Slider bewegt sich auch nach dem Loslassen noch ein Stück weiter
- ReadOnly: Boolean; Optional; Default = false
- true → Schieberegler kann nicht verschoben werden, er zeigt jedoch den Modellwert als Position an. Im Gegensatz zu den anderen Feldern wird ReadOnly hier nicht vom ControlPanel.ReadOnly übernommen!
- Enabled: Boolean; Optional; Default = true
- false → Element ist deaktiviert und wird ausgegraut angezeigt
- EnabledRef: String; Optional; Default = ''
- Falls definiert, wird Enabled von dieser Modell-Referenz gesteuert
- ColSpan: Integer(>0); Optional; Default = 1
- Anzahl Tabellen-Spalten, welche der Slider überspannen soll.
- Attr: String; Optional; Default = ''
- Zusätzliche Attribute für die Werte-Zelle
- BorderWidth: Integer(>=0); Optional; Default = 1
- Dicke des Slider-Rahmens zur Korrektur der Weglänge des Schiebers
}
Erzeugt ein CpSliderField und fügt es am Ende der Fields Liste des ControlPanel an.
ControlPanel.AddValueSliderField()
ControlPanel.AddValueSliderField( Parameter )
- Parameter: ValueSliderFieldDef; Optional; Default = { }
- Return this: ControlPanel
- : → AddSliderField(); Parameter des Sliders
- : → AddTextField(); Parameter des Textfeldes
- SliderValueRef: String; Optional; Default = [ModelRef + '.' +] Name
- Wie ValueRef eine Referenz auf eine globale Variable oder ein Objekt-Property. Wird dieser Parameter angegeben, zeigt das Textfeld den Modellwert ValueRef an, während der Slider den Wert SliderValueRef anzeigt.
- SliderReadOnly: Boolean; Optional; Default = false
- Wenn mit der Funktion AddValueSliderField() ein Text- und gleichzeitig ein Slider-Feld erzeugt werden, wird mit ReadOnly der enstprechende Zustand des Textfeldes definiert. Mit SliderReadOnly kann davon unabhängig der ReadOnly Zustand des Sliders festgelegt werden.
}
Erzeugt ein CpTextField und ein CpSliderField und fügt diese Objekte an die Fields Liste des ControlPanels an.
In Parameter können Parameter für den Slider und das Textfeld gemeinsam festgelegt werden! Properties, welche in beiden Klassen vorkommen, werden mit dem gleichnamigen Parameter für beide Klassen gleichzeitig festgelegt. Wenn dies nicht der Fall sein soll, müssen Slider und Textfeld separat mit AddTextField() bzw. AddSliderField() erzeugt werden.
Das ControlPanel-Property ValuePos legt fest, ob das Werte-Feld links (Standard) oder rechts des Sliders platziert wird. ValuePos wird bei der Funktion NewSliderPanel() spezifiziert. ControlPanels, welche ausschliesslich Slider mit Werte-Feldern enthalten, können somit mit der Funktion NewSliderPanel() erzeugt werden, statt mit NewPanel().
Hinweis: Wird ein CpSliderField mit dieser Funktion erzeugt, überspannt er immer zwei Tabellen-Zellen. Das CpTextField braucht eine Zelle für den Label und eine Zelle für das Ein-/Ausgabefeld. Insgesamt benötigen also mit AddValueSliderField() erzeugte Felder 4 Tabellen-Zellen in einer Reihe, was die Funktion NewSliderPanel() standardmässig sicherstellt.
Wenn der Slider eine andere Variable anzeigen soll als das Textfeld, kann mit dem Parameter SliderValueRef diese separat gewählt werden. Dies ist z.B. sinnvoll, wenn der Slider einen anderen Wertebereich kontrolliert, als das zugehörige Werte-Feld anzeigt. Das Synchronisieren der beiden Werte muss dann im Modell erfolgen.
CpSliderField.Caption
CpSliderField.Caption: String; ReadOnly; Init = '⇔' ⇔
Legt die Beschriftung des Schiebers (Slider-Handle) fest. Wenn beim Schieberegler das Property ReadOnly gesetzt ist, wird die Standardbeschriftung durch eine | ersetzt, um dem Benutzer optisch anzuzeigen, dass der Regler nicht interaktiv bewegt werden kann. Eine mit Caption festgelegte Beschriftung wird jedoch nicht abgeändert.
CpSliderField.Color
CpSliderField.Color: String; ReadOnly; Init = ''
Legt die Hintergrundfarbe des Schiebers (Slider-Handle) fest. Wird die Farbe nicht definiert, wird sie über eine CSS-Deklaration vorgegeben (standardmässig rot).
Da ein Slider-Handle eine eindeutige ID hat, kann die Handle-Farbe auch über CSS verändert werden. Die ID setzt sich wiefolgt zusammen:
- ID = <ControlPanel.Name>-<CpField.Name>-Slider-Handle
Ein entsprechendes CSS um die Farbe rot zu setzen wäre, wenn ControlPanel.Name = ControlPanel1 und CpField.Name = mySliderValue sind:
ControlPanel1-mySliderValue-Slider-Handle { background-color: red; }
CpSliderField.Min, Max, Steps
CpSliderField.Min: Number; ReadOnly; Init = 0
CpSliderField.Max: Number > Min; ReadOnly; Init = 1
CpSliderField.Steps: Integer(>=0); ReadOnly; Init = 0
Der Slider liefert Werte zwischen Min und Max mit einer Schrittweite von (Max-Min)/Steps. Wenn Steps > 0 ist, springt der Slider von Schritt zu Schritt. Mit Steps = 0 kann er kontinuierlich bewegt werden und liefert alle möglichen Werte, abhängig von der anzahl Pixel, die der Slider abfahren kann. Mit Steps = 1 hat der Slider genau 2 Stellungen.
Wenn der Slider alle geraden Zahlen von 2 bis 8 (inklusive) einstellen soll, wird Steps zu: 8 − 2 = 6.
Wenn der Slider mit einem Textfeld gekoppelt ist, kann für das Textfeld mit LowerLimit und UpperLimit ein erweiterter Bereich angegeben werden, der die Eingabe eines Wertes aber trotzdem entsprechend beschränkt.
CpSliderField.SnapTo, SnapRange
Wenn SnapTo definiert ist, wird der Slider auf diesen Wert oder einen der Werte in diesem Array einrasten. Die Werte beziehen sich auf die Sliderposition, gegeben durch Min und Max, nicht auf den Modellwert. Wenn LogScale = false ist (default), sind Sliderposition und Modellwert identisch und SnapTo bezieht sich auf den Modellwert.
SnapRange gibt die Breite des Bereiches an, von dem auf den SnapTo Wert eingerastet werden soll. Diese Breite wird in Bruchteilen des Sliderbereiches angegeben. Der Standardwert von 100 bedeutet, dass im Bereich von +/- 1/100 des Sliderbereiches auf den SnapTo Wert eingerastet wird.
CpSliderField.LogScale
CpSliderField.LogScale: Boolean; ReadOnly; Init = false
Wenn LogScale = true ist, wird die Slider Position logarythmisch auf den Modellwert abgebildet.
Wenn zum Beispiel Min = -1 und Max = 2 ist, wird im Modellwert 10^SliderWert = 0.1...100 abgespeichert. Umgekehrt wird der Modellwert über die Log10 function auf die Sliderposition abgebildet.
Beachte, dass der Modellwert > 0 sein muss, da sonst der Log10 nicht definiert ist.
CpSliderField.Slide
CpSliderField.Slide: Boolean; ReadOnly; Init = false
Wenn Slide = true ist, rutscht der Slider beim Loslassen noch ein Stück weiter. Für präzise Bewegungen mit dem Finger ist dies nicht empfohlen.
CpSliderField.BorderWidth
CpSliderField.BorderWidth: Integer(>=0); ReadOnly; Init = 1
Wird die Dicke des Slider-Rahmens per Style Sheet geändert, muss dies dem Slider mit BorderWidth bekannt gegeben werden, damit der Weg des Sliders entsprechend verkürzt wird.