[JAVA] Schieberegler mit GWT und Smart GWT anzeigen
1. Zweck
Erstellt, weil der Schieberegler in GWT angezeigt werden musste. Wenn Sie es ausführen, sieht es so aus:
Wenn Sie auf diesen Artikel verweisen, geschieht dies bitte auf eigenes Risiko.
2. Was ist GWT?
Das Google Web Toolkit (im Folgenden: GWT) ist ein Framework für Webanwendungen. Durch das Kompilieren eines in Java geschriebenen Programms wird die in JavaScript konvertierte Datei ausgespuckt. Weitere Informationen finden Sie unter Einführung in das Google Web Toolkit [1]. Die aktuelle Version ist "Version 2.8.2" (18.10.2017) [2]. "Google Plugin für Eclipse" und ["GWT Eclipse Plugin"](http: /) als Plugins zur Unterstützung der Entwicklung von GWT-Anwendungen auf Eclipse /gwt-plugins.github.io/documentation/gwt-eclipse-plugin/GettingStarted.html). "Google Plugin for Eclipse" wird im Januar 2018 mit Unterstützung bis Eclipse 4.6 eingestellt. Die endgültige Version ist auf dem Eclipse Marketplace oder auf der Website "Google Plugin for Eclipse" (https://developers.google.com/eclipse/docs/getting_started) verfügbar. "GWT Eclipse Plugin" unterstützt Eclipse 4.6 oder höher und die aktuelle Version ist "V3". Die neueste Version ist verfügbar unter Download des GWT Eclipse Plugins (V3).
3. Was ist SmartGWT?
Bibliothek für GWT [3]. Es scheint eine andere Ext GWT (derzeit Sencha GXT) zu geben, und für den Unterschied siehe Vergleich von Ext GWT und Smart GWT. [Vier]. Dieses Mal habe ich mich für ** Smart GWT ** entschieden, das kostenlos ist. Sie können andere als Schieberegler erstellen.
3.1 Was ist Haut? [Fünf]
Der Rahmen für das Erscheinungsbild der Anwendung. Die Standard-Skin ist "Enterprise", und es gibt andere "Enterprise Blue" und so weiter.
4. Entwicklungsumgebung
- OS X El Capitan(ver. 10.11.6)
- Eclipse(Pleiades All in One ver. 4.5.2)[6]
- SmartGWT(ver. 4.0，ver. 5.0 ※1)[7]
- GWT SDK(ver. 2.7.0 ※2)[2]
or
- Windows 10
- Eclipse(Pleiades All in One ver. 4.6.x)[6] --SmartGWT (gleiche Version)
- GWT SDK (gleiche Version)
- 1 In der Umgebung des Autors -In Version 4.0 ist das Debuggen abgeschlossen, es fehlen jedoch zum Kompilierungszeitpunkt erforderliche Bilder. -In Version 5.0 ist das Debuggen nicht abgeschlossen, aber die Kompilierung ist abgeschlossen. Daher werden die beiden Versionen zusammen verwendet. Da der Autor das Memo der URL verloren hat, von der das Plug-In heruntergeladen wurde, wird stattdessen die URL des Entwicklers angegeben.
- 2 Google möchte, dass Sie zu V3 wechseln. Es gibt keine älteren Versionen als V3. Daher scheint es, dass V3 beim Erstellen einer neuen Umgebung in der Zukunft ausgewählt wird.
5. Arbeitsinhalt
Dieses Mal werden wir es gemäß dem folgenden Verfahren implementieren. SmartGWT verwendet Version 4.0 zum Debuggen.
- Erstellen Sie ein neues Webanwendungsprojekt
- Debuggen im "GWT Super Dev Mode"
- "smartgwt-4.0 / smartgwt.jar" und "smartgwt-4.0 / smartgwt-skins.jar" wurden zu slidersample / war / WEB-INF / lib hinzugefügt 4.3 Importieren Sie die in 3 hinzugefügte JAR-Datei
- Erstellen Sie einen "isomorphen" Ordner in slidersample / war / Kopieren Sie den Inhalt von "smartgwt-4.0 / samples / Schaufenster / Krieg / Schaufenster / Schar / Skins" in den in 6.5 erstellten Ordner
- Kopieren Sie den Inhalt von "smartgwt-4.0 / samples / Schaufenster / Krieg / Schaufenster / sc /" nach slidersample / war / slidersample /
- Ändern Sie slidersample / src / com / slidersample / myproject / SliderSample.gwt.xml
- Ändern Sie slidersample / war / SliderSample.html
- Ändern Sie slidersample / src / com / slidersample / myproject / client / SliderSample.java
- Wenn die JAR-Datei oder die kopierte Datei nicht angezeigt wird, aktualisieren oder bereinigen Sie sie, um sie anzuzeigen.
5.1. Erstellen Sie ein neues Webanwendungsprojekt
Diesmal lautet der Projektname "SliderSample" und der Paketname "com.slidersample.myproject".
5.2. Debuggen im "GWT Super Dev Mode"
Beim Debuggen wird ein Ordner "slidersample" in slidersamle / war / erstellt
Importieren Sie die in 5.4.3 hinzugefügte JAR-Datei
Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle im Projekt, wählen Sie Erstellungspfad, Erstellungspfad konfigurieren
Wählen Sie "JAR hinzufügen" und wählen Sie die in 3 hinzugefügte JAR-Datei aus.
Wählen Sie "Übernehmen, OK"
5.6. Kopieren Sie den Inhalt der Skins (hinzugefügt am 19.10.)
Kopieren Sie den Inhalt von "smartgwt-4.0 / samples / Schaufenster / Krieg / Schaufenster / Sc / Skins" in den in Schritt 5 erstellten isomorphen Ordner.
5.7. Kopieren Sie den Inhalt von sc (Hinzugefügt am 19.10.)
Kopieren Sie den Inhalt von "smartgwt-4.0 / samples / Schaufenster / Krieg / Schaufenster / sc /" nach slidersample / war / slidersample /
5.8 Ändern Sie SliderSample.gwt.xml
Fügen Sie den folgenden Code in Zeile 21 ein.
<inherits name="com.smartgwt.SmartGwtNoScript"/>
5.9 SliderSample.html geändert
Fügen Sie den folgenden Code aus der 27. Zeile hinzu (das Schieberegler-Beispiel wird entsprechend dem Projektnamen geändert).
<script src='slidersample/sc/modules/ISC_Foundation.js'></script>
<script src='slidersample/sc/modules/ISC_Containers.js'></script>
<script src='slidersample/sc/modules/ISC_Grids.js'></script>
<script src='slidersample/sc/modules/ISC_Forms.js'></script>
<script src='slidersample/sc/modules/ISC_RichTextEditor.js'></script>
<script src='slidersample/sc/modules/ISC_Calendar.js'></script>
<script src='slidersample/sc/modules/ISC_DataBinding.js'></script>
<script src='slidersample/sc/modules/ISC_Drawing.js'></script>
<! - Bitte schreiben Sie entsprechend der verwendeten Haut neu ...->
<! - Prozess zum Laden der Haut ...->
5.10 SliderSample.java geändert
Auf folgenden Code behoben
SliderSample.java
package com.slidersample.myproject.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.Slider;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
import com.smartgwt.client.widgets.events.ValueChangedEvent;
import com.smartgwt.client.widgets.events.ValueChangedHandler;
public class SliderSample implements EntryPoint {
private final Slider slider = new Slider("Sie können einen Kommentar zum Schieberegler eingeben");
public void onModuleLoad() {
//Die folgenden Ereignisse
//Wenn sich der Wert des Schiebereglers ändert
slider.addDrawHandler(new DrawHandler() {
public void onDraw(DrawEvent event) {
slider.addValueChangedHandler(new ValueChangedHandler() {
public void onValueChanged(ValueChangedEvent event) {
int value = event.getValue(); //Hinzugefügt am 19. Oktober
if(value == 5) Window.alert("value is 5");
else if(value == 10) Window.alert("value is 10");
else ;
if (slider.getValue() != value){ //Kommentar am 19. Oktober gelöscht
slider.setValue(value);
}else ;
}
});
}
});
RootPanel.get().add(drawSlider());
}
private HorizontalPanel drawSlider(){
final HorizontalPanel hPanel = new HorizontalPanel();
hPanel.add(createSlider());
return hPanel;
}
private Slider createSlider(){
final int width = 700;
final int minValue = 1, maxValue = 10, numValue = 10;
//Erstellen eines Schiebereglers
slider.setVertical(false); //true:Porträt, falsch:Seitwärts
slider.setWidth(width);
slider.setMinValue(minValue);
slider.setMaxValue(maxValue);
slider.setNumValues(numValue);
return slider;
}
}
Bei Ausführung 1. Der für diesen Zweck bereitgestellte Schieberegler wird angezeigt. Wenn der Wert 5 oder 10 ist, wird er als Warnung angezeigt.
Vielen Dank
Am 26. Oktober 2017 gab uns Herr Shirafu detaillierte Informationen zum Inhalt von "2. Was ist GWT?" Und "3. Was ist Smart GWT?". Vielen Dank.
Zitat
[1] Einführung in das Google Web Toolkit [2] Google Web Toolkit [3] SmartGWT Showcase [4] Vergleich zwischen Ext GWT und Smart GWT [5] Ich und SmartGWT - Beginn von SmartGWT- [6] MergeDoc Project [7] SmartGWT