1.Implement a selection/de-selection component as described below:
The selected item in the first list goes into the second list and is
removed from the first list when the >> button is pressed. The
selected item in the second list goes into the first list and is
removed from the second list when the << button is pressed. The latest
selected item text is also displayed into the bottom text control with
the label "Selection".
There also exists two checkboxes allowing the user to SAVE the content
of the second list to a file or a database.
After i searched a lot over the internet i came out with this program:
This is the client side, meaning that this is what the user can see in
the Web Browser. I made the whole GUI in the 'onModuleLoad()' section,
including the action-listeners i needed for my application.
I also had to communicate with the server side so i can connect to a
database.
'CInterfaceAsync inter = GWT.create(CInterface.class);' with this line
i create a connection with the server-side trough an interface that
should be created on the client side too. using inter.function allows
me to access the methods from the server side.
package gwt.hom.client;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Iterator;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.*;
public class WebApp implements EntryPoint {
private static final long serialVersionUID = 1L;
CInterfaceAsync inter = GWT.create(CInterface.class);
public static ListBox list1;
public ListBox list2;
public Button left, right, save;
public Label label, file, db;
ArrayList<String> list1Elems, list2Elems;
public CheckBox toFile, toDB;
public TextArea selected;
public Panel panel, panel2, panel3;
@Override
public void onModuleLoad() {
list1 = new ListBox();
list1.setVisibleItemCount(4);
list1.addChangeHandler(new ChangeHandler() {
@Override
public void onChange(ChangeEvent event) {
int selectedIntdex = list1.getSelectedIndex();
String selectedString = list1.getValue(selectedIntdex);
selected.setText(selectedString);
}
});
inter.getInfo1(new AsyncCallback<ArrayList<String>>() {
@Override
public void onSuccess(ArrayList<String> result) {
Iterator<String> it = result.iterator();
while (it.hasNext())
list1.addItem(it.next().toString());
}
@Override
public void onFailure(Throwable caught) {
Window.alert("Error loading the Database! ");
}
});
list2 = new ListBox();
list2.setVisibleItemCount(4);
list2.addChangeHandler(new ChangeHandler() {
@Override
public void onChange(ChangeEvent event) {
int selectedIntdex = list2.getSelectedIndex();
String selectedString = list2.getValue(selectedIntdex);
selected.setText(selectedString);
}
});
inter.getInfo2(new AsyncCallback<ArrayList<String>>() {
@Override
public void onSuccess(ArrayList<String> result) {
Iterator<String> it = result.iterator();
while (it.hasNext())
list2.addItem(it.next().toString());
}
@Override
public void onFailure(Throwable caught) {
Window.alert("Error loading the Database! ");
}
});
left = new Button(" << ");
left.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
ArrayList<Object> buffer = new ArrayList<Object>();
int selectedEl = list2.getSelectedIndex();
String element = list2.getItemText(selectedEl);
for (int i = 0; i < list1.getItemCount(); i++) {
buffer.add(list1.getItemText(i));
}
buffer.add(element);
ArrayList<String> sortedList = new ArrayList<String>();
Iterator<Object> it = buffer.iterator();
while (it.hasNext()) {
sortedList.add(it.next().toString());
}
Collections.sort(sortedList);
list1.clear();
Iterator<String> itt = sortedList.iterator();
while (itt.hasNext()) {
list1.addItem(itt.next().toString());
}
buffer.clear();
for (int j = 0; j < list2.getItemCount(); j++) {
buffer.add(list2.getItemText(j));
}
buffer.remove(element);
list2.clear();
Iterator<Object> ittt = buffer.iterator();
while (ittt.hasNext()) {
list2.addItem(ittt.next().toString());
}
}
});
right = new Button(" >> ");
right.addStyleName("right");
right.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
ArrayList<Object> buffer = new ArrayList<Object>();
int selectedEl = list1.getSelectedIndex();
String element = list1.getItemText(selectedEl);
for (int i = 0; i < list2.getItemCount(); i++) {
buffer.add(list2.getItemText(i));
}
buffer.add(element);
ArrayList<String> sortedList = new ArrayList<String>();
Iterator<Object> it = buffer.iterator();
while (it.hasNext()) {
sortedList.add(it.next().toString());
}
Collections.sort(sortedList);
list2.clear();
Iterator<String> itt = sortedList.iterator();
while (itt.hasNext()) {
list2.addItem(itt.next().toString());
}
buffer.clear();
for (int j = 0; j < list1.getItemCount(); j++) {
buffer.add(list1.getItemText(j));
}
buffer.remove(element);
list1.clear();
Iterator<Object> ittt = buffer.iterator();
while (ittt.hasNext()) {
list1.addItem(ittt.next().toString());
}
}
});
label = new Label("Selected: ");
label.addStyleName("labels");
file = new Label("To File");
db = new Label("To DB");
selected = new TextArea();
selected.setSize("100px", "15px");
selected.setReadOnly(true);
save = new Button("save");
toFile = new CheckBox();
toDB = new CheckBox();
save.setStyleName("save");
save.addClickHandler(new ClickHandler() {
@SuppressWarnings("unchecked")
@Override
public void onClick(ClickEvent event) {
if (toDB.getValue() == true) {
ArrayList<String> buffer1 = new ArrayList<String>();
ArrayList<String> buffer2 = new ArrayList<String>();
for (int i = 0; i < list1.getItemCount(); i++) {
buffer1.add(list1.getItemText(i));
}
final ArrayList<String> fbuffer1 = buffer1;
for (int i = 0; i < list2.getItemCount(); i++) {
buffer2.add(list2.getItemText(i));
}
final ArrayList<String> fbuffer2 = buffer2;
inter.saveDB1(fbuffer1, fbuffer2, new AsyncCallback() {
@Override
public void onFailure(Throwable caught) {
Window.alert("Error saving the Database! ");
}
@Override
public void onSuccess(Object result) {
Window.confirm("Succes saving to Database! ");
}
});
}
}
});
panel = new HorizontalPanel();
panel2 = new HorizontalPanel();
panel3 = new HorizontalPanel();
panel.setSize("400", "400");
panel2.setSize("100", "100");
panel3.setSize("100", "100");
panel2.setVisible(true);
panel.setVisible(true);
panel3.setVisible(true);
panel.add(list1);
panel.add(left);
panel.add(right);
panel.add(list2);
panel2.add(label);
panel2.add(selected);
panel3.add(save);
panel3.add(db);
panel3.add(toDB);
panel3.add(file);
panel3.add(toFile);
RootPanel.get().add(panel);
RootPanel.get().add(panel2);
RootPanel.get().add(panel3);
}
}
The interface i declared the methods i needed to write on the server-
side
package gwt.hom.client;
import java.util.ArrayList;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
@RemoteServiceRelativePath("greet")
/* the 'greet' keyword it is also used in the web.xml file, so the
file should be modified too
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<!-- Servlets -->
<servlet>
<servlet-name>greetServlet</servlet-name>
<servlet-class>gwt.hom.server.CInterfaceImpl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>greetServlet</servlet-name>
<url-pattern>/webapp/greet</url-pattern>
</servlet-mapping>
<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>WebApp.html</welcome-file>
</welcome-file-list>
</web-app>
*/
public interface CInterface extends RemoteService {
public ArrayList<String> getInfo1();
public ArrayList<String> getInfo2();
public void saveDB1(ArrayList<String> lis1, ArrayList<String> lis2);
}
and it's AsyncCallback
package gwt.hom.client;
import java.util.ArrayList;
import com.google.gwt.user.client.rpc.AsyncCallback;
public interface CInterfaceAsync {
public void getInfo1(AsyncCallback<ArrayList<String>> callback);
public void getInfo2(AsyncCallback<ArrayList<String>> callback);
public void saveDB1 (ArrayList<String> lis1, ArrayList<String> lis2,
AsyncCallback callback);
}
On the Server i wrote the methods i declared on the client-side
interface. This class should have a name like: 'nameImpl':
package gwt.hom.server;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Iterator;
import gwt.hom.client.CInterface;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
@SuppressWarnings("serial")
public class CInterfaceImpl extends RemoteServiceServlet implements
CInterface {
public static ArrayList<String> list1Elem, list2Elem;
@Override
public ArrayList<String> getInfo1() {
list1Elem = new ArrayList<String>();
try {
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
try {
String url = "jdbc:odbc:localdb";
Connection conn = DriverManager
.getConnection(url, "noon", "osiris");
Statement st = conn.createStatement();
ResultSet rs = st
.executeQuery("select Nume from Tabel1 order by Nume");
while (rs.next()) {
list1Elem.add(rs.getString("Nume"));
}
conn.close();
} catch (SQLException ex) {
System.out.print(ex.getMessage());
}
return list1Elem;
}
@Override
public ArrayList<String> getInfo2() {
list2Elem = new ArrayList<String>();
try {
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
try {
String url = "jdbc:odbc:localdb";
Connection conn = DriverManager
.getConnection(url, "noon", "osiris");
Statement st = conn.createStatement();
ResultSet rs = st
.executeQuery("select Nume from Tabel2 order by Nume");
while (rs.next()) {
list2Elem.add(rs.getString("Nume"));
}
conn.close();
} catch (SQLException ex) {
System.out.print(ex.getMessage());
}
return list2Elem;
}
public void saveDB1(ArrayList<String> lis1, ArrayList<String> lis2) {
try {
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url = "jdbc:odbc:localdb";
Connection conn = DriverManager
.getConnection(url, "noon", "osiris");
conn.setAutoCommit(false);
Statement st = conn.createStatement();
st.executeUpdate("truncate Tabel1");
st.executeUpdate("truncate Tabel2");
String sql = new String();
Iterator<String> it = lis1.iterator();
while (it.hasNext()) {
sql = "insert into Tabel1 (Nume) values (\""
+ it.next().toString() + "\")";
st.executeUpdate(sql);
}
it = lis2.iterator();
while (it.hasNext()) {
sql = "insert into Tabel2 (Nume) values (\""
+ it.next().toString() + "\")";
st.executeUpdate(sql);
}
conn.close();
} catch (ClassNotFoundException e) {
System.out.println(e.getMessage());
} catch (SQLException ex) {
System.out.println(ex.getMessage());;
}
}
}
For better looks i changed some settings from the application's .css
file
.gwt-ListBox {
font-size: 14px;
color: #FFFF00;
width: 90px;
height: 100px;
margin-left: 20px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 20px;
border-left-color: blue;
border-right-color: blue;
border-top-color: blue;
border-bottom-color: blue;
border-bottom-style: double;
border-right-style: double;
}
.save {
color: blue;
padding: 3px; font-size 22px;
font-weight: bold;
color: #1e7ec8;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border: solid 1px #d3d4d6;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.gwt-Label {
color: #3B0B24;
font-weight: bold;
display: block;
width: 60px;
float: left;
}
.gwt-Button {
padding-top: 40px;
display: inline-block;
margin-top: 30px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
border-top: 3px;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}
I didn't made the save to file part because i couldn't figure it out
how, if i'll succeed doing it, i'll post that part too
--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
No comments:
Post a Comment