How to add content in the meedle of the workArea in Jmix2?

Support
#1

I want to add the content in the middle of the work area like the following page that one of the demo apps has in an older version of Jmix. However, as there is no work area object in the MainView, I am wondering how this can be achieved in Jmix 2. Any suggestions?

image

Regards
Mortoza

1 Like
#2

I’m facing the same issue. can some one please help me here is my code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<mainView xmlns="http://jmix.io/schema/flowui/main-view"
          title="msg://MainView.title">
    <actions>
        <action id="logout" type="logout"/>
    </actions>
    <appLayout>

        <navigationBar>
            <header id="header" classNames="jmix-main-view-header">
                <drawerToggle id="drawerToggle"
                              classNames="jmix-main-view-drawer-toggle"
                              themeNames="contrast"
                              ariaLabel="msg://drawerToggle.ariaLabel"/>
                <h1 id="viewTitle" classNames="jmix-main-view-title"/>
            </header>
            <nav id="mainNavigationBar" classNames="jmix-main-navigation-bar navList">
                <div>

                    <image id="emplPhotoField" width="40px" height="40px" classNames="profile_image"/>
                    <userIndicator id="userIndicator"/>
                    <button id="logoutButton"
                            action="logout"
                            classNames="jmix-logout-button"/>

                </div>
            </nav>
        </navigationBar>
        <drawerLayout>
            <section id="section" classNames="jmix-main-view-section">
                <h2 id="applicationTitle"
                    text="msg://applicationTitle.text"
                    classNames="jmix-main-view-application-title"/>
                <nav id="navigation"
                     classNames="jmix-main-view-navigation"
                     ariaLabel="msg://navigation.ariaLabel">
                    <listMenu id="menu"/>
                </nav>

            </section>

        </drawerLayout>
    </appLayout>
</mainView>
#3

hi,

not sure if this is the best way of doing it, but this one worked for me:


@Route("")
@ViewController("MainView")
@ViewDescriptor("main-view.xml")
public class MainView extends StandardMainView {
    @Autowired
    private UiComponents uiComponents;

    @Subscribe
    public void onInit(final InitEvent event) {
        Image image = uiComponents.create(Image.class);
        image.setSrc("icons/login-small.png");
        image.setClassName("login-image");
        VerticalLayout verticalLayout = uiComponents.create(VerticalLayout.class);
        verticalLayout.setAlignItems(FlexComponent.Alignment.CENTER);
        verticalLayout.add(image);
        verticalLayout.setHeightFull();
        verticalLayout.setWidthFull();
        getContent().showRouterLayoutContent(verticalLayout);
    }


}
#4

Hi Mario
Thanks. I tried but I’m getting below:
image

The CSS class you used, do in have to create or it is platform built-on?

#5

Where your image login-small.png is located?
You should put it into src/main/resources/META-INF/resources/icons.

2 Likes
#6

Thank you Konstantin, it worked!

#7

Studying the BookStore example source can help.
I found many solution there.