Place screen instances outside of default workArea

Support
#1

Hi,

I am wondering how can I include in the main page other regions where I can open screens other than browser or editors.

I would like to create plain Screen instances where I manually display other types of non editable information such as accessory tables, charts or other type of knfo that I load directly after “showing” the screen.

After analyzing the extmainscreen file in the default project template I see all the screens created in Cuba are displayed in the workArea tag. My question is, is it possible to create other areas where I can place other screens and if so… where do I specify the workArea the given screen should be placed into.

Hope the question is clear.

Thanks for your insights.

Carlos Conti

#3

Hello @carloscz25

First of all, you have to extend main screen. Assume that we’re using SideMenu layout. Screen layout will be something like this:

<hbox id="horizontalWrap">
    <vbox id="sideMenuPanel">
        <!-- SideMenu panel content -->
    </vbox>
    <workArea id="workArea"
              height="100%"
              width="100%">
        <initialLayout spacing="true" margin="true">
        </initialLayout>
    </workArea>
</hbox>

We can use SplitPanel component to divide working area and VerticalLayout to show screens inside of it:

<hbox id="horizontalWrap">
    <vbox id="sideMenuPanel">
    </vbox>
    <split id="workAreaSplit"
           pos="70"
           height="100%">
        <workArea id="workArea"
                  height="100%"
                  width="100%">
            <initialLayout spacing="true" margin="true">
            </initialLayout>
        </workArea>
        <vbox id="customPanel">
        </vbox>
    </split>
</hbox>

Inject customPanel vertical layout into screen controller and add getter:

@UiController("extMainScreen")
@UiDescriptor("ext-main-screen.xml")
public class ExtMainScreen extends MainScreen {

    @Inject
    protected VBoxLayout customPanel;

    public VBoxLayout getCustomPanel() {
        return customPanel;
    }
}

Let’s create helper bean in the web module that will accept a screen to show:

@Component("app_ScreenPlacementHelper")
public class ScreenPlacementHelper {

    public void showScreen(Screen screen) {
        // Get a reference to extended main screen
        ExtMainScreen extMainScreen = (ExtMainScreen) UiControllerUtils
                .getScreen(AppUI.getCurrent().getTopLevelWindowNN().getFrameOwner());

        VBoxLayout customPanel = extMainScreen.getCustomPanel();
        
        // Remove old content
        customPanel.removeAll();
        // Add new content
        customPanel.add(screen.getWindow());
    }
}

Now we can use it in the following way:

@Subscribe("showHelp")
public void onShowHelpClick(Button.ClickEvent event) {
    HelpScreen helpScreen = screens.create(HelpScreen.class);

    screenPlacementHelper.showScreen(helpScreen);
}

Result:

image

Please check attached project for more details:

custom-screen-placement.zip (72.2 KB)

Regards,
Daniil

#5

Hi,

many thanks for your quick response. Looks fairly easy. Will give it a go and come back to you if there arise any difficulties.

Regards,

Carlos Conti.

#6

Thanks it works great!
Carlos.