Advanced Web Application Topics

View Change Listeners

You can handle view changes also by implementing a ViewChangeListener and adding it to a Navigator.When a view change occurs, a listener receives a ViewChangeEvent object, which has references to the old and the activated view, the name of the activated view, as well as the fragment parameters.

11.9.2. Implementing a View

Views can be any objects that implement the View interface. When the navigateTo() is called for the navigator, or the application is opened with the URI fragment associated with the view, the navigator switches to the view and calls its enter() method.

To continue with the example, consider the following simple start view that just lets the user to navigate to the main view. It only pops up a notification when the user navigates to it and displays the navigation button.

/** A start view for navigating to the main view */

public class StartView extends VerticalLayout implements View { public StartView() {

setSizeFull();

Button button = new Button("Go to Main View", new Button.ClickListener() {

@Override

public void buttonClick(ClickEvent event) { navigator.navigateTo(MAINVIEW);

}

});

addComponent(button);

setComponentAlignment(button, Alignment.MIDDLE_CENTER);

}

@Override

public void enter(ViewChangeEvent event) { Notification.show("Welcome to the Animal Farm");

}

}

You can initialize the view content in the constructor, as was done in the example above, or in the enter() method. The advantage with the latter method is that the view is attached to the view container as well as to the UI at that time, which is not the case in the constructor.

11.9.3. Handling URI Fragment Path

URI fragment part of a URL is the part after a hash # character. Is used for within-UI URLs, because it is the only part of the URL that can be changed with JavaScript from within a page without reloading the page.The URLs with URI fragments can be used for hyperlinking and bookmarking, as well as browser history, just like any other URLs. In addition, an exclamation mark #! after the hash marks that the page is a stateful AJAX page, which can be crawled by search engines. Crawling requires that the application also responds to special URLs to get the searchable content. URI fragments are managed by Page, which provides a low-level API.

URI fragments can be used with Navigator in two ways: for navigating to a view and to a state within a view. The URI fragment accepted by navigateTo() can have the view name at the root, followed by fragment parameters after a slash ("/"). These parameters are passed to the enter() method in the View.

Implementing a View

299

Advanced Web Application Topics

In the following example, we implement within-view navigation.

/** Main view with a menu */

public class MainView extends VerticalLayout implements View { Panel panel;

// Menu navigation button listener

class ButtonListener implements Button.ClickListener {

String menuitem;

public ButtonListener(String menuitem) { this.menuitem = menuitem;

}

@Override

public void buttonClick(ClickEvent event) { // Navigate to a specific state

navigator.navigateTo(MAINVIEW + "/" + menuitem);

}

}

public MainView() { setSizeFull();

//Layout with menu on left and view area on right HorizontalLayout hLayout = new HorizontalLayout(); hLayout.setSizeFull();

//Have a menu on the left side of the screen Panel menu = new Panel("List of Equals"); menu.setHeight("100%");

menu.setWidth(null);

VerticalLayout menuContent = new VerticalLayout(); menuContent.addComponent(new Button("Pig",

new ButtonListener("pig"))); menuContent.addComponent(new Button("Cat",

new ButtonListener("cat"))); menuContent.addComponent(new Button("Dog",

new ButtonListener("dog"))); menuContent.addComponent(new Button("Reindeer",

new ButtonListener("reindeer"))); menuContent.addComponent(new Button("Penguin",

new ButtonListener("penguin"))); menuContent.addComponent(new Button("Sheep",

new ButtonListener("sheep"))); menuContent.setWidth(null); menuContent.setMargin(true); menu.setContent(menuContent); hLayout.addComponent(menu);

//A panel that contains a content area on right panel = new Panel("An Equal"); panel.setSizeFull(); hLayout.addComponent(panel); hLayout.setExpandRatio(panel, 1.0f);

addComponent(hLayout); setExpandRatio(hLayout, 1.0f);

// Allow going back to the start Button logout = new Button("Logout",

new Button.ClickListener() { @Override

public void buttonClick(ClickEvent event) { navigator.navigateTo("");

}

});

300	Handling URI Fragment Path

Advanced Web Application Topics

addComponent(logout);

}

@Override

public void enter(ViewChangeEvent event) { VerticalLayout panelContent = new VerticalLayout(); panelContent.setSizeFull(); panelContent.setMargin(true); panel.setContent(panelContent); // Also clears

if (event.getParameters() == null

|| event.getParameters().isEmpty()) { panelContent.addComponent(

new Label("Nothing to see here, " + "just pass along."));

return;

}

//Display the fragment parameters Label watching = new Label(

"You are currently watching a " + event.getParameters());

watching.setSizeUndefined();

panelContent.addComponent(watching);

panelContent.setComponentAlignment(watching, Alignment.MIDDLE_CENTER);

//Some other content

Embedded pic = new Embedded(null,

new ThemeResource("img/" + event.getParameters() + "-128px.png"));

panelContent.addComponent(pic); panelContent.setExpandRatio(pic, 1.0f); panelContent.setComponentAlignment(pic,

Alignment.MIDDLE_CENTER);

Label back = new Label("And the " + event.getParameters() + " is watching you");

back.setSizeUndefined();

panelContent.addComponent(back);

panelContent.setComponentAlignment(back, Alignment.MIDDLE_CENTER);

}

}

The main view is shown in Figure 11.5, “Navigator Main View”. At this point, the URL would be http://localhost:8080/myapp#!main/reindeer.

Handling URI Fragment Path

301