WaBis

walter.bislins.ch

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.

CpSliderField : CpField = {
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
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
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
SliderFieldDef = {
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.
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).
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
ValueSliderFieldDef = {
: 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 = '&hArr;' ⇔ 

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: 82 = 6.

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.

Weitere Infos zur Seite
Erzeugt Montag, 15. August 2016
von wabis
Zum Seitenanfang
Geändert Sonntag, 17. Dezember 2017
von wabis