How the page flow will be handled?

Hi All,

I am new to IT Mill tool kit. Recently i downloaded and tried with some samples. I was very much impressed with this tool kit.

Now i want to create one sample application with this tool kit. My question is, how to handle the page flow here?

Normally all the web application will be functioning with the page flow technique.

From one page to another page we can move using controls events.

How that can be handled here?

For example i have a login screen. Once i am successfully logged in, i need to move to success screen. How this flow will be handled here?

Could you please give me some hint on this?

This is how you can do it in this specific case:
You can render the success-page into a own layout, and when you notice a successful login you replace the main window layout with the success page.

Say,


getMainWindow().setLayout(successLayout);

Even better if you have made the following page into a CustomComponent (a template for a layout of a page).

replaceCompoent() is another alternative.

Ask for more instructions if you’re still stuck.

An example of how to handle navigation in an application can also be found in the step by step tutorial at

http://www.itmill.com/documentation/

One important thing to notice when creating applications with IT Mill Toolkit is that you shouldn’t think of it as page flow as such - but more of as creating a desktop-application.

So it is a small switch in philosophy compared to other page-oriented frameworks but exactly the same as “desktop” software. (Compare to making e.g. SWING software). So the points given above are valid and is exactly how you create page flow, but getting the best results comes from not thinking of pages as such… Hope you get my point :wink:

Hi Fredu,

I got your point. Till now i have created more web application. Long time back i worked with swing application. If it is single window page application, could you please clarify me one point here.

a. Normally one window will be shown. Based on the user interaction, how can i change the view?

Do i need to define some panel, and add that panel into the main window?

Could you please clarify me on this? because i am more interested to do something with this tool?

Thanks,
Thamizharasu S

+1 to Fredu :wink:

Thamizh, in toolkit application you do not need to think about pages and navigation between them like in traditional web applications. In toolkit this works like a desktop application.

So, basically, when application starts, create a login window and set it as a main window of your application. Once you’re logged-in successfully, create working window of your application and remove login window, that’s it.

You can also look for this example in the wiki, that covers login process and windows switch like I stated above - http://dev.itmill.com/wiki/Articles/ImplementingUserAuthentication

You’re not limited in single window. You can create multiple application-level window and access them by navigating to URI’s assigned to each window, yo can also create a sub-windows (e.g. dialogs or floating windows).

Do i need to define some panel, and add that panel into the main window?

Basically - you can add to the window any toolkit UI components, not just a panel, and change/replace them at any time.

You can look at the sampler application, available in toolkit distribution or directly from the website - it demonstrates almost all aspects of the toolkit applications and shows the source code for every section/example, so you can see how the things are made

I suppose using the “screen manager” (or view manager or whatever you call it) pattern is quite common, such as the following class:
ScreenManager.java
. This example is a bit silly, because the manager knows all the screens it manages. In a big application, you would probably have a more generic manager that stores the screens in a hash map.

Umm, the manager example uses the obsolete ExpandLayout layout for some reason. It’s a big strange choise, but anyhow.

You would normally use it as follows to switch to another screen:

[code]

logoutButton.addListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
manager.switchScreen(ScreenManager.ScreenType.LoginScreen, null);
}
});
[/code]The above manager also allows pushing and popping views to and from a stack, so if you have a Help button, for example, the Help view doesn’t need to know the Window from which the user came from. So this also implements the “bread crumbs” pattern (though it doesn’t show the stack path in the UI). In the following, we have a “Forgot my password” button on a login screen:

[code]

forgotButton = new Button(“Forgot your password?”);
forgotButton.addListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
panel.addComponent(new Label(“Forgot”));
manager.pushScreen(ScreenManager.ScreenType.ForgotScreen);
}
});
[/code]Then in the ForgetScreen:


final Button backButton  = new Button ("Back to login screen");
backButton.addListener(new Button.ClickListener() {
    public void buttonClick(ClickEvent event) {
        manager.popScreen();
    }
});
panel.addComponent(backButton);

Also, for a generic view manager exampe you can take a look at the
TPTMutiView
component, to which you can add arbitrary components as views and switch between them.