Take care of responsive mode in workscreen of VisionX application

I use VisionX for creating an ERP system and have a workscreen (edit page) with a table and many editors (80). The application is a html5 application. If browser window is big enough (full HD), everything is displayed perfect. If I resize the browser window and have a small window (e.g. < 1024px), the workscreen doesn't look nice because I have too many editors in the workscreen.

I try to take care of browser window size, to change the layout and visible components of the workscreen, e.g. hide some columns or show editors under each other instead of beside.

I know that this is possible and supported but don't know how to use it directly in VisionX. I also didn't find information in the documentation.

I guess it's possible without the tool directly in the IDE (Eclipse) but I don't know how to take care of browser size changes. An example would help me because I tried to register events, like

launcher.eventComponentResized.addListener(new IRunnable() 
{
    @Override
    public void run() throws Throwable 
    {
        //change UI
    }
});

but it didn't work as expected for me.

It's supported but not visual. You need some lines of Java code.

Simply open the code of your work-screen (folder: rad/apps/appname/src.client/.../screens/...)

Every screen has the method onResponsiveModeChanged which can be used to take care of responsive mode. Simply override the method and configure your screen.

An example:

@Override
public void onResponsiveModeChanged(LayoutMode pOld, LayoutMode pNew) throws Throwable
{
    super.onResponsiveModeChanged(pOld, pNew);

    ColumnView colview = rdbUsers.getRowDefinition().getColumnView(ITableControl.class);

    if (pNew != null)
    {
        switch (pNew)
        {
            case Mini:
                colview.setColumnNames(new String[] {"USERNAME", "ACTIVE"});
                break;
            case Small:
                colview.setColumnNames(new String[] {"USERNAME", "ACTIVE", "EMAIL"});
                break;
            default:
                colview.setColumnNames(new String[] {"USERNAME"});
        }
    }
}

Above code shows the column USERNAME in default mode. The default mode is for big windows (>= 950px). In case of small windows (>= 520px) USERNAME, ACTIVE, EMAIL columns will be shown. In mini mode (< 520px) USERNAME, ACTIVE columns will be shown.