[JAVA] Afficher le curseur avec GWT et Smart GWT
1. Objet
Créé parce qu'il est devenu nécessaire d'afficher le curseur dans GWT. Quand vous l'exécutez, cela ressemble à ceci,
Si vous vous référez à cet article, veuillez le faire à vos propres risques.
2. Qu'est-ce que GWT?
Google Web Toolkit (ci-après, GWT) est un cadre pour les applications Web. En compilant un programme écrit en Java, le fichier converti en JavaScript est craché. Pour plus de détails, reportez-vous à Introduction à Google Web Toolkit [1]. La version actuelle est la "Version 2.8.2" (2017/10/18) [2]. "Google Plugin for Eclipse" et ["GWT Eclipse Plugin"](http: /) en tant que plugins pour prendre en charge le développement d'applications GWT sur Eclipse /gwt-plugins.github.io/documentation/gwt-eclipse-plugin/GettingStarted.html). "Google Plugin for Eclipse" sera interrompu en janvier 2018 avec une prise en charge jusqu'à Eclipse 4.6. La version finale est disponible sur Eclipse Marketplace ou site "Google Plugin for Eclipse". "GWT Eclipse Plugin" prend en charge Eclipse 4.6 ou version ultérieure, et la version actuelle est "V3". La dernière version est disponible depuis Télécharger le plugin GWT Eclipse (V3).
3. Qu'est-ce que SmartGWT?
Bibliothèque pour GWT [3]. Il semble y avoir un autre Ext GWT (actuellement Sencha GXT), et pour la différence, reportez-vous à Comparaison de Ext GWT et Smart GWT. [Quatre]. Cette fois, j'ai choisi ** Smart GWT **, qui est gratuit. Vous pouvez créer d'autres que des curseurs.
3.1 Qu'est-ce que la peau? [Cinq]
Le cadre de l'apparence de l'application. Le skin standard est "Enterprise", et il existe d'autres "Enterprise Blue" et ainsi de suite.
4. Environnement de développement
- 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 (même version) --GWT SDK (même version)
- 1 Dans l'environnement de l'auteur -Dans la version 4.0, le débogage est terminé, mais les images requises au moment de la compilation manquent. -Dans la version 5.0, le débogage n'est pas terminé, mais la compilation est terminée. Par conséquent, les deux versions sont utilisées ensemble. De plus, puisque l'auteur a perdu le mémo de l'URL où le plug-in a été téléchargé, l'URL du développeur est citée à la place.
- 2 Google souhaite que vous passiez à la V3, et il n'y a pas de versions plus anciennes que la V3. Par conséquent, il semble que V3 sera sélectionné lors de la construction d'un nouvel environnement à l'avenir.
5. Contenu du travail
Cette fois, nous allons l'implémenter selon la procédure suivante. SmartGWT utilise la version 4.0 à des fins de débogage.
- Créez un nouveau projet d'application Web
- Déboguer en "GWT Super Dev Mode"
- Ajout de "smartgwt-4.0 / smartgwt.jar" et "smartgwt-4.0 / smartgwt-skins.jar" à slidersample / war / WEB-INF / lib 4.3 Importer le fichier jar ajouté dans 3
- Créez un dossier "isomorphe" dans slidersample / war / Copiez le contenu de "smartgwt-4.0 / samples / showcase / war / showcase / sc / skins" dans le dossier créé en 6.5
- Copiez le contenu de "smartgwt-4.0 / samples / showcase / war / showcase / sc /" dans slidersample / war / slidersample /
- Modifiez slidersample / src / com / slidersample / myproject / SliderSample.gwt.xml
- Changez slidersample / war / SliderSample.html
- Modifiez slidersample / src / com / slidersample / myproject / client / SliderSample.java
- Si le fichier jar ou le fichier copié ne s'affiche pas, actualisez-le ou nettoyez-le pour l'afficher.
5.1. Créer un nouveau projet d'application Web
Cette fois, le nom du projet est "SliderSample" et le nom du package est "com.slidersample.myproject".
5.2. Débogage en "GWT Super Dev Mode"
Le débogage crée un dossier "slidersample" dans slidersamle / war /
Importez le fichier jar ajouté en 5.4.3
Cliquez avec le bouton droit n'importe où sur le projet, sélectionnez Build Path, Configure Build Path
Sélectionnez "Ajouter JAR" et sélectionnez le fichier jar ajouté dans 3.
Sélectionnez "Appliquer, OK"
5.6. Copier le contenu des skins (ajouté le 19/10)
Copiez le contenu de "smartgwt-4.0 / samples / showcase / war / showcase / sc / skins" dans le dossier isomorphe créé à l'étape 5.
5.7. Copier le contenu de sc (ajouté le 19/10)
Copiez le contenu de "smartgwt-4.0 / samples / showcase / war / showcase / sc /" dans slidersample / war / slidersample /
5.8. Modifier SliderSample.gwt.xml
Ajoutez le code suivant à la ligne 21.
<inherits name="com.smartgwt.SmartGwtNoScript"/>
5.9. SliderSample.html modifié
Ajoutez le code suivant à partir de la 27e ligne (l'exemple de curseur est modifié en fonction du nom du projet).
<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>
<! - Veuillez réécrire le cas échéant en fonction du skin que vous utilisez ...->
<! - Processus de chargement du skin ...->
5.10. SliderSample.java modifié
Fixé au code suivant
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("Vous pouvez entrer un commentaire sur le curseur");
public void onModuleLoad() {
//Les événements suivants
//Lorsque la valeur du curseur change
slider.addDrawHandler(new DrawHandler() {
public void onDraw(DrawEvent event) {
slider.addValueChangedHandler(new ValueChangedHandler() {
public void onValueChanged(ValueChangedEvent event) {
int value = event.getValue(); //Ajouté le 19 octobre
if(value == 5) Window.alert("value is 5");
else if(value == 10) Window.alert("value is 10");
else ;
if (slider.getValue() != value){ //Commentaire supprimé le 19 octobre
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;
//Créer un curseur
slider.setVertical(false); //true:Portrait, faux:De côté
slider.setWidth(width);
slider.setMinValue(minValue);
slider.setMaxValue(maxValue);
slider.setNumValues(numValue);
return slider;
}
}
Une fois exécuté, 1. Le curseur affiché à cet effet s'affiche. Lorsque la valeur est 5 ou 10, elle est affichée comme alerte.
Merci
Le 26 octobre 2017, M. shirafu nous a donné des informations détaillées sur le contenu de «2. Qu'est-ce que GWT?» Et «3. Qu'est-ce que Smart GWT?». Je vous remercie.
Citation
[1] Introduction à Google Web Toolkit [2] Google Web Toolkit [3] SmartGWT Showcase [4] Comparaison entre Ext GWT et Smart GWT [5] Moi et SmartGWT-Début de SmartGWT- [6] MergeDoc Project [7] SmartGWT