2015-06-02 3 views
7

Ich stehe derzeit vor der Herausforderung, einen Slider in SAPUI5 zu realisieren, genau wie der Threshold-Slider von Webdynpro, der so aussieht.SAPUI5 So realisieren Sie einen Threshold-Slider (wie in WebDynpro)

Wie würden Sie das tun? Es ist sehr dynamisch, die Skala (kann 5 Werte sein, kann 3 Werte usw. sein), die Beschreibungen sind abhängig von der Skala Wert ...

Derzeit finde ich nur Slider in API, aber ich bezweifle, dass dies realisierbar ist mit es ... irgendwelche Ideen?


18.06.2015: Zur Zeit arbeite ich die sap.ui.commons.Slider auf die Erweiterung, was ich jetzt habe schon von weitem ist das, was ich versuche zu erreichen zu:

  • Beim Anklicken Schieber, über Renderer Hintergrundfarbe ändern (jeder Wert eine andere Farbe
  • Textfeld auf der rechten Seite und einen Link auf der linken Seite (optional Teile, Färbung ist wichtiger)

haben sollte Was ich bekam ...

sap.ui.commons.Slider.extend("my.Slider", { 
    renderer : { 
     renderInnerAttributes : function(oRm, oControl) { 
      console.log(oRm); // try to find out, what I re-style 
      console.log(oControl); // try to find out, what I re-style 
      oRm.addStyle('background-color', '#ffff00'); // no effect 

     }, 
    } 
}); 

var oSlider6 = new my.Slider({ 
    id : 'Slider6', 
    tooltip : 'Slider6', 
    width : '500px', 
    min : 1, 
    max : 4, 
    value : 0, 
    totalUnits : 4, 
    smallStepWidth : 1, 
    stepLabels : true, 
    labels : [ 
     "Bad", "Medium", "Good", "Very Good" 
    ] 
}); 

return oSlider6; 

Antwort

1

Ich denke, der einfachste Weg, dies zu erreichen, ist entweder die sap.m.Slider zu kopieren und modifizieren oder von sap.m.Slider mit dem UI5 erben erweitern Mechanismus und overstyle es. Oder Sie könnten den sap.m.ProgressIndicator erweitern und interaktiv machen, aber das wäre ein bisschen mehr Arbeit.

Alle grundlegenden Funktionen sind bereits im Schieberegler (Maßstab, Anzahl der Werte, ...) vorhanden und Sie können die Hintergrundfarbe und das Styling des Griffs leicht ändern. Ein Link kann ein Textwert mit einem Label-Steuerelement daneben hinzugefügt werden.

prüft diese YouTube-Video-Steuerelemente, um weitere Informationen darüber, wie den Erweiterungsmechanismus von UI5 zu verwenden: https://www.youtube.com/watch?v=4KPS2-LHoO0

Hoffnung, dass

Michael

+0

Die Idee ist gut, versuchen herauszufinden, wie das funktioniert, aber es gibt einen Unterschied zwischen dem Hinzufügen einer Hintergrundfarbe zu einem Textfeld ... aber woher weiß ich, wie Sie den Schieberegler stylen? etwas kompliziert jetzt, hat irgendwelche Hinweise? – zyrex

0

Sie auch d3js control wählen könnten hilft. In jedem Fall würden einige Änderungen erforderlich sein. Sie können einen Stil in der XML-Ansicht hinzufügen. Indem Sie CSS in Ihre CSS-Datei einfügen, können Sie sie visuell Ihren Wünschen entsprechend anpassen. Der Schieberegler verfügt standardmäßig über Min, Max und Step. Im Änderungsereignis können Sie Stilklassen hinzufügen oder entfernen (addStyleClass/removeStyleClass), um verschiedene Farben anzuzeigen. Der Text, den Sie separat anzeigen und mit Formatierern verarbeiten können. Wenn Sie alles in einem Steuerelement möchten, sollten Sie this page überprüfen.