Working version of React integration to GWT

GWTReactApp/src/com/gwt/app/GWTReactApp.gwt.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  When updating your version of GWT, you should also update this DTD reference,
+  so that your app can take advantage of the latest GWT module capabilities.
+-->
+<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.1//EN"
+  "http://gwtproject.org/doctype/2.8.1/gwt-module.dtd">
+<module rename-to='gwtreactapp'>
+  <!-- Inherit the core Web Toolkit stuff.                        -->
+  <inherits name='com.google.gwt.user.User'/>
+
+  <!-- Inherit the default GWT style sheet.  You can change       -->
+  <!-- the theme of your GWT application by uncommenting          -->
+  <!-- any one of the following lines.                            -->
+  <inherits name='com.google.gwt.user.theme.clean.Clean'/>
+  <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
+  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
+  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->
+
+  <!-- Other module inherits                                      -->
+  <inherits name="com.google.gwt.resources.Resources" />
+  <inherits name="gwt.interop.utils.InteropUtils" />
+  <inherits name="gwt.react.React" />
+  
+  <!-- Specify the app entry point class.                         -->
+  <entry-point class='com.gwt.app.client.GWTReactApp'/>
+
+  <!-- Specify the paths for translatable code                    -->
+  <source path='client'/>
+  <source path='shared'/>
+
+  <!-- allow Super Dev Mode -->
+  <add-linker name="xsiframe"/>
+  <set-configuration-property name="devModeRedirectEnabled" value="true"/>
+  <set-property name="compiler.useSourceMaps" value="true" />
+</module>

GWTReactApp/src/com/gwt/app/client/GWTReactApp.java

@@ -0,0 +1,238 @@
+package com.gwt.app.client;
+
+import com.gwt.app.client.components.EmbeddedReact;
+import com.gwt.app.shared.UserDTO;
+import java.util.Date;
+import com.google.gwt.core.client.EntryPoint;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Document;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.KeyCodes;
+import com.google.gwt.event.dom.client.KeyUpEvent;
+import com.google.gwt.event.dom.client.KeyUpHandler;
+import com.google.gwt.user.client.Cookies;
+import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.rpc.AsyncCallback;
+import com.google.gwt.user.client.ui.Button;
+import com.google.gwt.user.client.ui.Label;
+import com.google.gwt.user.client.ui.PasswordTextBox;
+import com.google.gwt.user.client.ui.RootPanel;
+import com.google.gwt.user.client.ui.TextBox;
+import com.google.gwt.user.client.ui.Widget;
+import gwt.react.client.api.React;
+import gwt.react.client.api.ReactDOM;
+import gwt.react.client.events.MouseEventHandler;
+import gwt.react.client.events.MouseEvent;
+
+/**
+ * Entry point classes define <code>onModuleLoad()</code>.
+ */
+public class GWTReactApp implements EntryPoint {
+	/**
+	 * The message displayed to the user when the server cannot be reached or
+	 * returns an error.
+	 */
+	private static final String SERVER_ERROR = "An error occurred while "
+			+ "attempting to contact the server. Please check your network " + "connection and try again.";
+
+
+	/**
+	 * Inject gwt-react library script
+	 */
+	/*public interface JsClientBundle extends ClientBundle {
+		final JsClientBundle INSTANCE = GWT.create(JsClientBundle.class);
+
+        @Source("resources/gwt-react-bundle.min.js")
+        TextResource gwtreactbundlejs();
+        @Source("resources/gwt-react-router-bundle.min.js")
+        TextResource gwtreactrouterbundlejs();
+    }
+	 */
+
+	/**
+	 * Create a remote service proxy to talk to the server-side Login service.
+	 */
+	private final LoginServiceAsync loginService = GWT.create(LoginService.class);
+
+	final TextBox userNameField = new TextBox();
+	final TextBox passwordField = new PasswordTextBox();
+	final Button loginButton = new Button("LOGIN");
+	final Button goToReactButton = new Button("GO TO REACT APP");
+	final Label loggedUserInfo = new Label();
+
+	private void setLoginFormVisibility(boolean displayLoginForm){
+		RootPanel.get("loginFormDiv").setVisible(displayLoginForm);
+		RootPanel.get("loggedInDiv").setVisible(!displayLoginForm);
+	}
+
+	private void setReactComponentVisibility(boolean displayReactComponent){
+		RootPanel.get("gwtAppDiv").setVisible(!displayReactComponent);
+		RootPanel.get("reactAppDiv").setVisible(displayReactComponent);
+	}
+
+	private void setLoggedInUserInfo(String username){
+		loggedUserInfo.setText("Current logged in user: " + username);
+	}
+
+	private void displayLoginWindow(boolean displayLogin){
+		// Hide info and React button
+		if(displayLogin)
+			loggedUserInfo.setText("");
+
+		goToReactButton.setVisible(!displayLogin);
+		RootPanel.get("userNameFieldLabel").setVisible(displayLogin);
+		RootPanel.get("passwordFieldLabel").setVisible(displayLogin);
+		userNameField.setVisible(displayLogin);
+		passwordField.setVisible(displayLogin);
+		loginButton.setVisible(displayLogin);
+	}
+
+	private void checkWithServerIfSessionIdIsStillLegal(String sessionID, boolean goToReactApp)
+	{
+		loginService.loginFromSessionServer(new AsyncCallback<UserDTO>()
+		{
+			@Override
+			public void onFailure(Throwable caught)
+			{
+				setLoginFormVisibility(true);
+				Window.alert(SERVER_ERROR);
+			}
+
+			@Override
+			public void onSuccess(UserDTO result)
+			{
+				if (result == null)
+				{
+					setLoginFormVisibility(true);
+				} else
+				{
+					if (result.getLoggedIn())
+					{
+						if(!goToReactApp){
+							setLoginFormVisibility(false);
+							setLoggedInUserInfo(result.getUserName());
+						}
+						else{
+							setReactComponentVisibility(true);
+							EmbeddedReact.ReactComponentProps componentProps = new EmbeddedReact.ReactComponentProps();
+
+							componentProps.onGoToGWTAppClicked = new MouseEventHandler() {
+
+								@Override
+								public void onMouseEvent(MouseEvent event) {
+									setReactComponentVisibility(false);
+									String sessionID = Cookies.getCookie("sid");
+									if (sessionID == null)
+										setLoginFormVisibility(true);
+									else
+										checkWithServerIfSessionIdIsStillLegal(sessionID, false);
+
+								}
+							}; 
+							componentProps.currentLoggedUser = result.getUserName();
+							ReactDOM.render(React.createElement(EmbeddedReact::loggedInComponent, componentProps), Document.get().getElementById("reactAppDiv"));
+						}
+
+					} else
+					{
+						displayLoginWindow(true);
+					}
+				}
+			}
+
+		});
+
+	}
+
+	/**
+	 * This is the entry point method.
+	 */
+	@Override
+	public void onModuleLoad() {
+		RootPanel.get("userNameFieldContainer").add(userNameField);
+		RootPanel.get("passwordFieldContainer").add(passwordField);
+		RootPanel.get("loginButtonContainer").add(loginButton);
+		RootPanel.get("loggedInUserInfoContainer").add(loggedUserInfo);
+		RootPanel.get("goToReactApplicationButtonContainer").add(goToReactButton);
+
+		// Focus the cursor on the name field when the app loads
+		userNameField.setFocus(true);
+		userNameField.selectAll();
+
+		String sessionID = Cookies.getCookie("sid");
+		if (sessionID == null)
+			setLoginFormVisibility(true);
+		else
+			checkWithServerIfSessionIdIsStillLegal(sessionID, false);
+
+		// Create a handler for the sendButton and nameField
+		class MyHandler implements ClickHandler, KeyUpHandler {
+			/**
+			 * Fired when the user clicks on the sendButton.
+			 */
+			public void onClick(ClickEvent event) {
+				Widget sender = (Widget) event.getSource();
+				if (sender == loginButton) {
+					loginUser();
+				} else if (sender == goToReactButton) {
+					String sessionID = Cookies.getCookie("sid");
+					if (sessionID == null)
+						setLoginFormVisibility(true);
+					else
+						checkWithServerIfSessionIdIsStillLegal(sessionID, true);
+				}
+
+			}
+
+			/**
+			 * Fired when the user types in the nameField.
+			 */
+			public void onKeyUp(KeyUpEvent event) {
+				if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
+					loginUser();
+				}
+			}
+
+			private void loginUser(){
+
+				loginService.loginServer(userNameField.getValue(), passwordField.getValue(), new AsyncCallback<UserDTO>()
+				{
+					@Override
+					public void onSuccess(UserDTO result)
+					{
+
+						if (result.getLoggedIn())
+						{
+							//Set session cookie for 60s
+							String sessionID = result.getSessionId();
+							final long DURATION = 1000 * 10;
+							Date expires = new Date(System.currentTimeMillis() + DURATION);
+							Cookies.setCookie("sid", sessionID, expires, null, "/", false);
+							setLoginFormVisibility(false);
+							setLoggedInUserInfo(result.getUserName());
+						} else
+						{
+							Window.alert(SERVER_ERROR);
+						}
+
+					}
+
+					@Override
+					public void onFailure(Throwable caught)
+					{
+
+						Window.alert(SERVER_ERROR);
+					}
+				});
+
+			}
+		}
+
+		// Add a handler to send the name to the server
+		MyHandler handler = new MyHandler();
+		loginButton.addClickHandler(handler);
+		passwordField.addKeyUpHandler(handler);
+		goToReactButton.addClickHandler(handler);		
+	}
+}

GWTReactApp/src/com/gwt/app/client/LoginService.java

@@ -0,0 +1,14 @@
+package com.gwt.app.client;
+import com.google.gwt.user.client.rpc.RemoteService;
+import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
+import com.gwt.app.shared.UserDTO;
+
+@RemoteServiceRelativePath("login")
+public interface LoginService extends RemoteService
+{
+    UserDTO loginServer(String name, String password);
+ 
+    UserDTO loginFromSessionServer();
+ 
+    void logout();
+}

GWTReactApp/src/com/gwt/app/client/LoginServiceAsync.java

@@ -0,0 +1,13 @@
+package com.gwt.app.client;
+
+import com.google.gwt.user.client.rpc.AsyncCallback;
+import com.gwt.app.shared.UserDTO;
+
+public interface LoginServiceAsync
+{
+	void loginServer(String name, String password, AsyncCallback<UserDTO> callback);
+
+	void loginFromSessionServer(AsyncCallback<UserDTO> callback);
+
+	void logout(AsyncCallback<Void> callback);
+}

GWTReactApp/src/com/gwt/app/client/components/EmbeddedReact.java

@@ -0,0 +1,38 @@
+package com.gwt.app.client.components;
+import static gwt.react.client.api.React.DOM.*;
+import gwt.react.client.elements.DOMElement;
+import gwt.react.client.events.MouseEventHandler;
+import gwt.react.client.proptypes.BaseProps;
+import gwt.react.client.proptypes.html.BtnProps;
+import gwt.react.client.proptypes.html.HtmlProps;
+import jsinterop.annotations.JsPackage;
+import jsinterop.annotations.JsType;
+
+public class EmbeddedReact {
+
+	@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
+	public
+	static class ReactComponentProps extends BaseProps {
+		// Add getters instead of public identifiers
+		public String currentLoggedUser;
+		public MouseEventHandler onGoToGWTAppClicked;
+	}
+
+	public static DOMElement<HtmlProps> loggedInComponent(ReactComponentProps props) {
+		return div(null, 
+				h1(null, "Test application - React"),
+				table(new HtmlProps().className("tableCenter"), 
+						tr(new HtmlProps().className("largeTextField"),
+								div(null, "Current logged in user: " + props.currentLoggedUser)),
+						tr(new HtmlProps().className("tableCenterRow"),
+								button(
+										new BtnProps()
+										.className("gwt-Button")
+										.onClick(props.onGoToGWTAppClicked),
+										"GO TO GWT APP"
+										)
+								)));
+
+	};
+}
+

GWTReactApp/src/com/gwt/app/server/LoginServiceImpl.java

@@ -0,0 +1,61 @@
+package com.gwt.app.server;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpSession;
+import com.google.gwt.user.server.rpc.RemoteServiceServlet;
+import com.gwt.app.client.LoginService;
+import com.gwt.app.shared.UserDTO;
+
+public class LoginServiceImpl extends RemoteServiceServlet implements LoginService
+{
+    private static final long serialVersionUID = 4456105400553118785L;
+ 
+    @Override
+    public UserDTO loginServer(String name, String password)
+    {
+    	UserDTO user = new UserDTO(name, password);
+    	user.setLoggedIn(true);
+        storeUserInSession(user);
+        return user;
+    }
+ 
+    @Override
+    public UserDTO loginFromSessionServer()
+    {
+        return getUserAlreadyFromSession();
+    }
+ 
+    @Override
+    public void logout()
+    {
+        deleteUserFromSession();
+    }
+ 
+    private UserDTO getUserAlreadyFromSession()
+    {
+        UserDTO user = null;
+        HttpServletRequest httpServletRequest = this.getThreadLocalRequest();
+        HttpSession session = httpServletRequest.getSession();
+        Object userObj = session.getAttribute("user");
+        if (userObj != null && userObj instanceof UserDTO)
+        {
+            user = (UserDTO) userObj;
+        }
+        return user;
+    }
+ 
+    private void storeUserInSession(UserDTO user)
+    {
+        HttpServletRequest httpServletRequest = this.getThreadLocalRequest();
+        HttpSession session = httpServletRequest.getSession(true);
+        user.setSessionId(session.getId());
+        session.setAttribute("user", user);
+    }
+ 
+    private void deleteUserFromSession()
+    {
+        HttpServletRequest httpServletRequest = this.getThreadLocalRequest();
+        HttpSession session = httpServletRequest.getSession();
+        session.removeAttribute("user");
+    }
+ 
+}

GWTReactApp/src/com/gwt/app/shared/UserDTO.java

@@ -0,0 +1,58 @@
+package com.gwt.app.shared;
+
+import java.io.Serializable;
+
+public class UserDTO implements Serializable
+{
+	private static final long serialVersionUID = 3196402615838002153L;
+	
+	private String userName;
+	
+	private String password;
+	
+	private boolean loggedIn;
+	
+	private String sessionId;
+	
+	public UserDTO()
+	{
+	}
+
+	public UserDTO(String name, String password)
+	{
+		setUserName(name);
+		setPassword(password);
+	}
+
+	public String getUserName() {
+		return userName;
+	}
+
+	public void setUserName(String userName) {
+		this.userName = userName;
+	}
+
+	public String getPassword() {
+		return password;
+	}
+
+	public void setPassword(String password) {
+		this.password = password;
+	}
+
+	public boolean getLoggedIn() {
+		return loggedIn;
+	}
+
+	public void setLoggedIn(boolean loggedIn) {
+		this.loggedIn = loggedIn;
+	}
+
+	public String getSessionId() {
+		return sessionId;
+	}
+
+	public void setSessionId(String sessionId) {
+		this.sessionId = sessionId;
+	}
+}