Responsive web design with Google Web Toolkit

Patterns for building mobile-enabled web applications

By Edward Salatovka, Yurgis Baykshtis and Maksim Likharev

Previous 1 2 Page 2

Page 2 of 2

Responsive layout in GWT

At this point we have managed to implement our toggle functionality for the Menu and Content pages, but we now have a new problem: How can we utilize all the screen space for the best content view on any given mobile platform?

For this we use the Complex presenter menu in our gwt-responsive project. The content of the displayed page has two parts: text and image. The display in a web browser would be a tabular layout, with text on the left and images on the right. On a mobile platform we do not have enough horizontal space on the screen for the tabular layout. Instead, we switch to a fluid layout where the image is displayed under the text. Media queries work for this. The UI binder file ComplexPageView.ui.xml describes our Record view page layout:

Listing 4. ComplexPageView.ui.xml


<div class="{res.css.mobiRvPan} {style.bodyArea}">
  <div class="{res.css.mobiRvLeftPan}">
    <div>
      <table cellSpacing="0" cellPadding="0" class="{res.css.rvTable}">
        <tr>
          <td>
            <ui:safehtml from="{msg.internet}"/>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div class="{res.css.mobiRvRightPan} {style.imageAlign}">
    <g:Image resource="{res.internetMap}" addStyleNames="{res.css.rvImage}"/>
  </div>
</div>

Large screens will display the Record view in a tabular layout. Located in main.css, the style sheets mobiRvPan, mobiRvLeftPan, and mobiRvRightPan define the display property, respectively, as table and table-cell:


@external .mobi-rvPan;
.mobi-rvPan {
	display: table;...

@external .mobi-rv-leftPan;
.mobi-rv-leftPan {
	display: table-cell;...

@external .mobi-rv-rightPan;
.mobi-rv-rightPan {
	display: table-cell;

For screen sizes up to 1000 pixels the Mobile.css media query will be activated, switching display properties to the value block:


@media all and (max-width: 1000px) {
.mobi-rvPan, .mobi-rv-leftPan, .mobi-rv-rightPan {
	display: block;
}

Scaling images for different screen sizes

We also need to scale images for different screen sizes. We can use the style sheet res.css.rvImage for scaling. The following code snip sets the scale for screens up to 640 pixels:


@media all and (max-width: 640px) {
…
.rvImage {
		width:      100%;
		height:     100%;
		max-width:  480px;
		max-height: 480px;
}

Header scrolling

The north panel (header) is another UI element that requires our attention. This panel located at the top of the screen display contains the Menu toggle button. In a desktop browser view the header's position is fixed, so it is always visible, even when the user scrolls down the page:


@external .mainNorthPanel;
.mainNorthPanel {
  position: fixed;
  top: 0px;

On a mobile screen, where real estate is precious, the user should be able to scroll past the header, making room for other features to display. A media query defined in mobile.css puts the north panel in an absolute position:


@media all and (max-width: 640px) {
…
.mainNorthPanel {
	position: absolute;
	top: -3em;
}

To see how this mobile layout looks, we navigate to CuppaFame's Collage folder and switch to Firefox's Responsive Design View. Click on the link The Great Gatsby/ and view the record as it would appear on a desktop browser versus a mobile screen:

As another example, this screenshot shows a user's profile. You can see in the three panels how the layout changes depending on the device screen size:

Responsive dialogs in GWT

Our final challenge is to make our dialogs as responsive as our layouts. The gwt-responsive project provides examples and implementation details for satisfying mobile requirements for responsive dialogs. The application's north panel has a link to the Login popup, which is defined by *.client.application.login.java. This dialog is based on a generic solution (*.client.common.ResponsiveDialog.java) that can be reused for any other popup.

By default, the size of the dialog depends on its content. This is not good for mobile platforms, where the dialog's width cannot exceed the device's narrow screen boundaries. We want mobile users to use only vertical scroll operations to view dialog content. Fortunately the solution is simple, we just set the width property of the default gwt-dialogBox style sheet. The code fragment below ensures that a mobile dialog stays inside of the mobile screen's parameters:


@media all and (max-width: 800px) {
...  
.gwt-DialogBox {
    width: 90%;
}

Limiting users to vertical scrolling presents some significant inconveniences. The action buttons like OK and Cancel may not be displayed in the visible part of the dialog, and the user is expected to scroll down to reach them. The ResponsiveDialog implementation takes care of this by introducing action buttons in the caption area.

HasManyHandlers.java, HasManyVisibility.java, and HasManyEnabled.java classes make sure that the same action handlers and states can be assigned to the multiple buttons. For example, the OK caption button on the top and the OK button on the bottom of the dialog have shared the same handlers and states. The example below combines multiple ClickHandlers of the same kind into one event to intercept.

Listing 5. LoginPopupView.java


@Override
public HasClickHandlers getLoginClick() {
  return new HasManyClickHandlers(loginButton, dialog.getOKHandler());
}

LoginPopupPresenter.java
	
  getView().getLoginClick().addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
      getView().hide();
      getEventBus().fireEvent(new LoginEvent(getView().getUser().getText()));
    }
  });

Once again we can check the results in the live application. The screenshots in the two panels below demonstrate how the first wizard dialog will look on a desktop browser versus a mobile device:

Conclusion

In this article, we have discussed the challenges of building mobile-responsive web applications and introduced some basic concepts and programming techniques used in responsive web design. The gwt-responsive open source project was created as a foundation for building mobile responsive applications in GWT. We walked through several sample implementations from the project code, demonstrating simple but effective ways to design your web applications so that they display and perform well in any mobile environment.