View Slider with GWT and SmartGWT

1. Purpose

Created because it became necessary to display the slider in GWT. When you run it, it looks like this, If you refer to this article, please do so at your own risk.

2. What is GWT?

Google Web Toolkit (hereinafter, GWT) is a framework for Web applications. By compiling a program written in Java, a file converted to JavaScript is spit out. For details, refer to Introduction to Google Web Toolkit [1]. The current version is "Version 2.8.2" (2017/10/18) [2]. As plugins to support the development of GWT applications on Eclipse, "Google Plugin for Eclipse" and ["GWT Eclipse Plugin"](http: / /gwt-plugins.github.io/documentation/gwt-eclipse-plugin/GettingStarted.html). "Google Plugin for Eclipse" will be abolished in January 2018 with support up to Eclipse 4.6. The final version is available on the Eclipse Marketplace or "Google Plugin for Eclipse" site. "GWT Eclipse Plugin" supports Eclipse 4.6 or later, and the current version is "V3". The latest version is available from Download the GWT Eclipse Plugin (V3).

3. What is SmartGWT?

Library for GWT [3]. There seems to be another Ext GWT (currently Sencha GXT), and for the difference, refer to Comparison of Ext GWT and Smart GWT. [Four]. This time, I chose ** Smart GWT **, which is free of charge. You can create other than sliders.

3.1. What is skin? [Five]

The framework of the appearance of the application. The standard skin is "Enterprise", and there are other types such as "Enterprise Blue".

4. Development environment

• 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 (same version) --GWT SDK (same version)

• 1 In the author's environment -In ver. 4.0, debugging is completed, but images required at compile time are missing. -In ver. 5.0, debugging is not completed, but compilation is completed. Therefore, the two versions are used together. In addition, since the author lost the memo of the URL where the plug-in was downloaded, the URL of the developer is quoted instead.
• 2 Google wants you to move to V3, and there are no versions older than V3. Therefore, it seems that V3 will be selected when constructing a new environment in the future.

5. Work contents

This time, we will implement it according to the following procedure. SmartGWT uses version 4.0 for debugging purposes.

1. Create a new web application project
2. Debug in "GWT Super Dev Mode"
3. Added "smartgwt-4.0 / smartgwt.jar" and "smartgwt-4.0 / smartgwt-skins.jar" to slidersample / war / WEB-INF / lib
4. Import the jar file added in 3
5. Create an "isomorphic" folder in slidersample / war / Copy the contents of "smartgwt-4.0 / samples / showcase / war / showcase / sc / skins" to the folder created in 6.5
6. Copy the contents of "smartgwt-4.0 / samples / showcase / war / showcase / sc /" to slidersample / war / slidersample /
7. Change slidersample / src / com / slidersample / myproject / SliderSample.gwt.xml
8. Change slidersample / war / SliderSample.html
9. Change slidersample / src / com / slidersample / myproject / client / SliderSample.java

• If the jar file or copied file is not displayed, refresh or clean it to display it.

5.1. Create a new web application project

This time, the project name is "SliderSample" and the package name is "com.slidersample.myproject".

5.2. Debugging in "GWT Super Dev Mode"

Debugging creates a "slidersample" folder in slidersamle / war /

Import the jar file added in 5.4.3

Select "Right click somewhere on the project, build path, build path configuration" Select "Add JAR" and select the jar file added in 3. Select "Apply, OK"

5.6. Copy the contents of skins (added on 10/19)

Copy the contents of "smartgwt-4.0 / samples / showcase / war / showcase / sc / skins" to the isomorphic folder created in step 5.

5.7. Copy the contents of sc (Added on 10/19)

Copy the contents of "smartgwt-4.0 / samples / showcase / war / showcase / sc /" to slidersample / war / slidersample /

5.8. Modify SliderSample.gwt.xml

Add the following code to the 21st line. <inherits name="com.smartgwt.SmartGwtNoScript"/>

5.9. Changed SliderSample.html

Add the following code from the 27th line (slider sample is changed according to the project name).

<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>

<!-Please rewrite as appropriate according to the skin you use ...->

<!-Process to load skin ...->

5.10. Changed SliderSample.java

Fixed to the following code

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("You can enter comments on the slider");
	
	public void onModuleLoad() {
		//The following events
		//When the slider value changes
		slider.addDrawHandler(new DrawHandler() {
			public void onDraw(DrawEvent event) {
				slider.addValueChangedHandler(new ValueChangedHandler() {
					public void onValueChanged(ValueChangedEvent event) {						
						int value = event.getValue();	//Added on October 19th
						
						if(value == 5) Window.alert("value is 5");
						else if(value == 10) Window.alert("value is 10");
						else ;
						
						if (slider.getValue() != value){	//Deleted comment on October 19th
							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;

		//Creating a slider
		slider.setVertical(false);	//true:Portrait, false:Sideways
		slider.setWidth(width);
		slider.setMinValue(minValue);
		slider.setMaxValue(maxValue);
		slider.setNumValues(numValue);

		return slider;
	}
}

When executed, 1. The slider posted for the purpose is displayed. When the value is 5 or 10, it is displayed as alert.

Acknowledgments

On October 26, 2017, Mr. shirafu gave us detailed information about the contents of "2. What is GWT?" And "3. What is Smart GWT?". Thank you.

Quote

[1] Introduction to Google Web Toolkit [2] Google Web Toolkit [3] SmartGWT Showcase [4] Comparison between Ext GWT and Smart GWT [5] Me and SmartGWT ~ The beginning of SmartGWT ~ [6] MergeDoc Project [7] SmartGWT