Create a loginpage and navigate between pages with GWT

One of the main features of a GWT application is, that you can write all your code in Java and do not need to care about HTML, CSS and JavaScript. All content can be loaded into the same div-element in one HTML-Standardpage. Sounds perfectly alright, but how do you navigate between different views, if for example you need a loginpage and don´t want the user to have access to your application before entering the right logindata?

Of course there is the possibility to have more than one HTML-Page in GWT as well, but if you want to do it the pure GWT-way, you can use a method to exchange the content on the page from inside your javacode.

In my latest GWT-application i used a switch-case statement in a java method to change the content on the page depending on the userstatus. I wanted to have three different views for the application. A loginview, a view to choose a database and open it and the main view of the application.

Add the HTML-Page

First of all i added a simple HTML-page with three divs in it for a header, a footer and the main content. These three divs will be filled with content from the java method „SetContent()“ that i will introduce below. The HTML-page is placed in the war-directory of the standard GWT „Web Application Project“ and looks as follows:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Including the Stylesheet -->
<link type="text/css" rel="stylesheet" href="ExampleApp.css">

<title>Example Application</title>

<!-- This script loads the compiled client-module. -->
<!-- If you add any GWT meta tags, they must   -->
<!-- be added before this line.                -->
<script type="text/javascript" language="javascript" src="exampleapp/exampleapp.nocache.js"></script>

</head>

<body>
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
        <div
            style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red;
            background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
            Your web browser must have JavaScript enabled in order for this
            application to display correctly.</div>
    </noscript>

    <center>
        <div id="header"></div>

        <div id="content"></div>

        <div id="footer"></div>
    </center>
</body>
</html>

Add three views to put into the div-elements

These three views include all gwt-elements that are needed to build the page. Therefore all java classes can be collected in three packages on the client side of the gwt-application, named for the corresponding views. In my example application they are named com.exampleapp.client.loginview, com.exampleapp.databaseview and com.exampleapp.mainview.

Define SetContent-Method to switch between views

The SetContent()-method is defined in the entry point class of the GWT-application. First we need to create objects of all three views and put them into attributes of the main class. Also three containers for these views are needed, which will be put into the div elements. On start of the application the loginview is shown. After the user entered the correct logindata and clicks the login button, the status changes and the setContent-method is called with the second status to show the second view. The same procedure is done, after the user chooses a database and clicks the open database button. The SetContent-method is called with the third status to show the main view of the application. In the main view there are two buttons for navigation back to the databaseview and the loginview. The SetContent-method is defined as follows:

/**Method to set 3 different contents to one HTML-Page, depending on the userstatus and the chosen database
     *
     * @param status Integer value with the status number, 0 for loginview, 1 for databaseview and 2 for mainview
     * */
    public void setContent(int status){
        switch(status){
        case 0:
            System.out.println("User is not logged in");
            header.clear();
            header.add(loginView.getLoginheader().gethPanel());

            content.clear();
            content.add(loginView.getMainPanel());

            footer.clear();
            footer.add(loginView.getLoginfooter().getHpanel());

            /* Associate the panels with the HTML host page.*/
            RootPanel.get("content").add(content);

            RootPanel.get("header").add(header);

            RootPanel.get("footer").add(footer);

            break;
        case 1:
            System.out.println("User is logged in but has not chosen a database");

            header.clear();
            header.add(databaseView.getDatabaseHeader().getHeaderPanel());

            content.clear();
            content.add(databaseView.gethPanel());

            footer.clear();
            footer.add(databaseView.getDatabaseFooter().getHpanel());        

        /* Associate the panels with the HTML host page.*/
        RootPanel.get("content").add(content);

        RootPanel.get("header").add(header);

        RootPanel.get("footer").add(footer);

         break;
        case 2:
            System.out.println("User is logged in and has chosen a database");
            header.clear();
            header.add(mainView.getMainheader().gethPanel());

            content.clear();
            content.add(mainView.getMainPanel());

            footer.clear();

        /* Associate the panels with the HTML host page.*/
        RootPanel.get("content").add(content);

        RootPanel.get("header").add(header);

            break;
        default:
            System.out.println("switch-case-defaulttext");
        }         
    }