Menu

PushMode Tutorial

Demos on this page showcase core concepts of PushMode. For high-level conceptual overview of PushMode, see PushMode homepage.

Hello World

Hello World app doesn't do much, but we have to start somewhere. It shows the minimal setup you need to get PushMode running. It also shows what HTML templates look like in PushMode.

HelloPage.java

package hellopushmode;

import pushmode.*;
import pushmode.dom.*;

// Every distinct page on the site usually gets its own class.
public class HelloPage extends PushPage {
    // This is where we put our HTML "template".
    @Override public DomElement document() {
        // We can create new HTML elements through Html factory class.
        return Html.html()
            // Notice how elements are nested by calling add() on parent element.
            .add(Html.head()
                // Insert link to pushmode.js, which makes all the PushMode magic happen.
                .setupPushMode()
                .add(Html.link()
                    // Attributes are set through a chain of fluent setters.
                    .rel("stylesheet")
                    .type("text/css")
                    .href("http://localhost:8082/styles/style.css"))
                .add(Html.title()
                    // Method text() will append inline text to the element.
                    .text("Hello World")))
            .add(Html.body()
                .add(Html.div()
                    .add(Html.p()
                        .text("Hello World!"))));
    }
}

View complete project on GitHub. Install Eclipse and lombok to run it.

Interesting points:

Reactive Programming

So far we have demonstrated only static page that a lot of other tools can generate. We will now do something unique to PushMode. We will create a page that automatically updates to reflect changes in data, i.e. it is reactive.

View complete project on BitBucket.

Interesting points:

User Input

Streaming real-time data to the client is awesome and many sites can be built around this feature alone. But we can also stream data in the opposite direction: from the user to the server.

This is how PushMode handles user input. It streams input fields and events back to the server where application's event handlers and data bindings update reactive data sources.

View complete project on BitBucket.

Interesting points: