Blog @ SIB Visions » Development

Category: Development

Responsive Web Design

Hurray, we have a new buzzword: Responsive.

It's not brand new, but nowadays it's important because we use applications on different devices and the same application should work on different screen sizes/resolutions.

What does responsive mean?

Wikipedia:

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

My opinion:

Don't waste space for unnecessary information.

If you have big menus and toolbars in your application, you should reduce the used space dependent of the available space.

We did some experiments with our vaadin UI and have some impressions for you:

App full space

App with limited space

The application on the right has a small menu without additional text and with small padding. All gaps are smaller than in the orginal application on the left.

We used custom css and source code to change the UI because not everything was possible with CSS e.g. set tooltips instead of button text. A set of instructions was posted from Matti Tahvonen.

We made some smaller changes in our Vaadin UI to support technology independent handling of resize changes.

It will be possible to do following:

launcher.eventComponentResized().addListener(this, "doLauncherResized");
...
public void doLauncherResized(UIComponentEvent pEvent)

{

    IDimension dim = ((ILauncher)pEvent.getSource()).getSize();

    if (dim != null)

    {

        int iWidth = dim.getWidth();

        if (iWidth < 800)

        {

            layoutMode = LayoutMode.Small;

        }

        else

        {

            layoutMode = LayoutMode.Full;

        }
        resizeMenu();

    }

}

Development | rjahn | 16/10/2014 | Comments (0)

JVx, Vaadin

One application, different styles

Impressions

The first image shows the legacy mode of our standard application style (check last image). It turns a SDI application to MDI - without coding or re-deployment. Simply awesome

The second image doesn't use a toolbar and the third one is without a menubar. Not all applications need multiple navigation elements, known from desktop applications.

The fourth image shows, what we prefer.

Legacy mode (MDI)		Legacy mode (no toolbar)
Legacy mode (no menubar)		Modern mode (SDI with popups)

One more

Modern style (menu right)

[Update]

The same application with Swing UI

Swing UI

Development | rjahn | 17/09/2014 | Comments (0)

JVx, Vaadin

Add IDs to your Vaadin Menu items

It's a shame but Vaadin doesn't have built-in support for setting an ID on menu items. There are several tickets about this problem: http://dev.vaadin.com/ticket/3873, http://dev.vaadin.com/ticket/11307, http://dev.vaadin.com/ticket/14294

BTW, the whole menu solution is a little bit tricky and wrapped.

There are no excuses - a web technology should fully support web concepts. We tried to touch menu items, by ID, during our UI test automation efforts. It wasn't a problem to find an xpath for accessing menu items, but... it's a principle thing.

It was a nice task to implement ID support for menu items. We found a "general" solution - it's still a workaround, but as long as vaadin doesn't support it, it might help you.

Summarized

Extend server-side MenuBar and add a map for menuitem ids. Send the map to the client and add the id to the matching menu item. The client-side needs an extended VMenuBar and an extended MenuBarConnector.

We've used MenuBar for caching ids because it wasn't possible to extend menu item handling and MenuBar already has a connector.

An example

Menuitem IDs

Details

The implementation is available in our Vaadin UI implementation. Simply use following classes:

MenuBar
VMenuBar
MenuBarConnector

And don't forget the replacement mappings for your widgetset before you start the compiler:

Widgetset replacements

The solution was built with vaadin 7.1 but we checked the implementation in 7.3.0 and it didn't change. So our workaround should work without problems.

We didn't need a lot LoC to solve the problem and it should be easy for you to understand what we did. If you want to know more details - simply ask.

Usage

A short code snippet:

MenuBar bar =newMenuBar();
MenuItem miInsert = bar.addItem("Insert");

MenuItem miUpdate = bar.addItem("Update");
bar.setId(miInsert, "mi_insert");

bar.setId(miUpdate, "mi_update");

As written before, it's not possible to set the ID on the item because of original implementation in vaadin. Don't use getId of menu item because this will return the "internal" id.

Keep coding

Development | rjahn | 15/09/2014 | Comments (0)

Vaadin

Next big feature - Automate your GUI Tests

It's not a problem to automate GUI tests, nowadays. There are different approaches and tools. A nice tool overview is available on wikipedia.

The tools have different techniques to perform tests. On technique is sending/simulating mouse clicks to components. The problem is that the GUI shouldn't be changed between tests and you should use a special test environment/system. Another technique is tricky but there's a nice implementation from MIT. It works with image recognition. And finally there's a solution based on unique component identifiers.

We like the last technique, based on unique component identifiers because it allows changing the UI without changing test cases - we love flexibility. The only problem with JVx was that we didn't have unique identifiers and a developer won't set an identifier for every component. We didn't have a mechanism to create unique identifiers... BUT now... we have.

With upcoming JVx releases, it will be possible to test GUIs automatically based on unique identifiers. This identifiers will be available also for VaadinUI. Another advantage for VaadinUIs will be that the id could be used for styling via CSS.

There are still some todos for us but we're happy to be able to show you some examples.

We made some test-cases with different test tools. To test our VaadinUI, we use Selenium together with PhantomJS.

The source code might look like this one:

publicclass TestCaseB
{
privatestaticfinalint TIMEOUT_IN_SECONDS =10;

privatestaticfinalString TIMEOUT_IN_MILLISECONDS_AS_STRING =
Integer.toString(TIMEOUT_IN_SECONDS * 1000);
    private WebDriver driver;

    private Selenium selenium;

    @Before

    public void setUp()

    {

        driver = configureDriver(createPhantomJsDriver());

        String baseUrl = "http://localhost:8080/";

        selenium = new WebDriverBackedSelenium(driver, baseUrl);

        selenium.setTimeout(TIMEOUT_IN_MILLISECONDS_AS_STRING);

    }

    @Test

    public void testDemoerptest()

    {

        selenium.open("/VisionX.Server/app/web/ui/DemoERP/");

        waitForPage();

        selenium.type("id=UserName", "admin");

        selenium.type("id=Password", "admin");

        selenium.click("id=OK");

        waitForPage();

        selenium.click("id=DemoERP_P1_P1_P2_B1");

        waitForPage();

        selenium.click(

          "//div[@id='NavigationTable']/div[2]/div/table/tbody/tr[2]/td[2]/div");

        selenium.click(

          "//div[@id='NavigationTable']/div[2]/div/table/tbody/tr[3]/td[2]/div");

        selenium.click(

          "//div[@id='NavigationTable']/div[2]/div/table/tbody/tr[2]/td[2]/div");

        selenium.click(

          "//div[@id='NavigationTable']/div[2]/div/table/tbody/tr/td[2]/div");

        selenium.click("id=DemoERP_P1_P1_P2_B2");

        waitForPage();

        selenium.click(

          "//div[@id='NavigationTable']/div[2]/div/table/tbody/tr[2]/td/div");

        selenium.click(

          "//div[@id='NavigationTable']/div[2]/div/table/tbody/tr[3]/td/div");

        selenium.click(

          "//div[@id='NavigationTable']/div[2]/div/table/tbody/tr[4]/td/div");

        selenium.click("id=DemoERP_P1_P1_P2_B3");

        waitForPage();

        selenium.click("xpath=(//button[@type='button'])[7]");

        waitForPage();

    }

    @After

    public void tearDown()

    {

        driver.quit();

        selenium.stop();

    }

    private WebDriver configureDriver(WebDriver pWebDriver)

    {

        pWebDriver.manage().timeouts().implicitlyWait(TIMEOUT_IN_SECONDS, 

                                                      TimeUnit.SECONDS);

        pWebDriver.manage().timeouts().pageLoadTimeout(TIMEOUT_IN_SECONDS, 

                                                       TimeUnit.SECONDS);

        pWebDriver.manage().timeouts().setScriptTimeout(TIMEOUT_IN_SECONDS, 

                                                        TimeUnit.SECONDS);

        pWebDriver.manage().window().setSize(new Dimension(1920, 1080));

        return pWebDriver;

    }

    @SuppressWarnings("unused")

    private WebDriver createChromeDriver()

    {

        ChromeOptions options = new ChromeOptions();

        options.addArguments("-incognito");

        return new ChromeDriver(options);

    }

    private WebDriver createPhantomJsDriver()

    {

        DesiredCapabilities capabilities = new DesiredCapabilities();

        capabilities.setCapability(

                 PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, 

                 "D:\\opt\\phantomjs\\phantomjs.exe");

        return new PhantomJSDriver(capabilities);

    }

    private void waitForPage()

    {

        selenium.waitForPageToLoad(TIMEOUT_IN_MILLISECONDS_AS_STRING);

    }

}

We use FEST (doc) for Swing UIs. The library is old (like Swing) but still works!

A very simple example with FEST:

public class TestUI extends FestSwingTestCaseTemplate

{

    private FrameFixture window;

    @After

    public void cleanItUp()

    {

        super.cleanUp();

    }

    @Before

    public void setUp()

    {

        super.setUpRobot();

        UIFactoryManager.getFactoryInstance(SwingFactory.class);

        WorkScreenCreatingGuiQuery query = new WorkScreenCreatingGuiQuery();

        Frame frame = GuiActionRunner.execute(query);

        window = new FrameFixture(robot(), frame);

        window.show();

        query.afterShow();

    }

    @Test

    public void testTheUIStuff()

    {

        // Check if the editor does have the correct value.

        // The WorkScreen does select the first line for us.

        Assert.assertEquals("John Smith", 

                            window.textBox("UITWS_E_TESTDATABOOK_NAME").text());

        // Select the next line in the table.

        window.table("UITWS_T_TESTDATABOOK").selectRows(1);

        Assert.assertEquals("Ian McIrish", 

                            window.textBox("UITWS_E_TESTDATABOOK_NAME").text());

        // Select the tab that has that TextField-Button-Label combo on it.

        window.tabbedPane("UITWS_TP1").selectTab(1);

        window.tabbedPane("UITWS_TP1_P2_TP1").selectTab(2);

        // Enter something into the textfield, press the button and the label

        // should now have the same text.

        window.textBox("UITWS_TP1_P2_TP1_P3_P1_TF1").setText("This is an automated test.");

        window.button("UITWS_TP1_P2_TP1_P3_P1_B1").click();

        Assert.assertEquals("This is an automated test.", 

                            window.label("UITWS_TP1_P2_TP1_P3_P1_L2").text());

    }

    private static final class WorkScreenCreatingGuiQuery extends GuiQuery<Frame>

    {

        private UIFrame frame;

        private WorkScreen workscreen;

        void afterShow()

        {

            // Important so that everything gets a name.

            // There is a window constructed, but outside of the JVx scope.

            frame.addNotify();

            workscreen.notifyRepaint();

        }

        @Override

        protected Frame executeInEDT() throws Throwable

        {

            frame = new UIFrame();

            workscreen = new UITestingWorkScreen();

            frame.add(workscreen);

            return (Frame) frame.getResource();

        }

        private String dumpStructure()

        {

            return dumpStructure(frame, 1);

        }

    }

}

Development | rjahn | 12/09/2014 | Comments (0)

JVx, Test

Eclipse Plugin - EPlug

Our first Eclipse Plugin for JVx and VisionX will be available in a few weeks. We're feature complete and are in the internal test phase. We're extremely surprised about the productivity boost. With VisionX it's currently possible to create and deploy professional database applications in few minutes. The development process is super fast because of VisionX and some really useful features like Action wizard and GUI designer. The missing piece was the IDE integration. It was possible to use Eclipse as IDE to modify VisionX applications, live and bidirectional. The only problem was that it was not easy to find the right line of code or member to do modifications. It wasn't a big problem but it was a waste of time.

Our Plugin helps to save development time, again. The combination of VisionX with EPlug is awesome.

The name of the Plugin is EPlug (not very creative but simple). It will be available in different editions: Lite, Pro and VisionX.

The Lite edition will be free and doesn't offer full power but will be useful.
The Pro edition won't have any limits but won't interact with VisionX.
The VisionX edition adds interaction to Pro edition. It will be possible to use VisionX to jump to Source Code in Eclipse and to show changes directly in VisionX (means live live).

I've an amazing feature for you as screenshot:

Preview image (hover)

Preview image (completion)

Really useful

Development, News | rjahn | 27/08/2014 | Comments (0)

EPlug

New application frame feature - No menu

All our applications have a menu and a toolbar. This is great for backend applications but not always good for web frontends. Our web UIs have a different menubar, styled for web, but it's always visible. If you have simple web forms, you won't use a menu. We did some changes and have new options for applications without menu and toolbar

Some impressions with standard (backend) Desktop application and as (frontend) web application:

Backend application

Frontend application

It's very simple to hide the menu. Simply set an application property via application.xml or directly via launcher - that's it. We changed our web menu and allow access to internal panels and components. It will be possible to hide buttons, change layouts, etc.

It's still possible to create your own, custom, application frame or extend our pre-defined frame. The new feature will be available in the next VisionX update.

Development | mhandsteiner | 06/08/2014 | Comments (0)

JVx, Vaadin, VisionX

Popup menu feature

We have another useful VisionX feature for you in the queue. It's the support for popup menus. It'll be possible to create and use popup menus for UI components. We had to change JVx to support this feature. It's now easily possible to work with popups because UIComponent got a new method: setPopupMenu(IPopupMenu).

The feature will be easy to use for end-users because it's not rocket science and we re-used existing VisionX concepts. Here's a first screenshot:

Popup menu integration

Development | rjahn | 05/08/2014 | Comments (0)

VisionX

Vaadin UI application frame and windows

Our custom Vaadin application frame isn't a MDI. It's "web SDI" . We didn't show popup windows aka internal frames with work-screen content. We did embedd the content directly into the web page. But we changed the default implementation a little bit because it makes sense to show popup windows for modal work-screens. Modal frames are important for database applications. Such frames could be used for showing record details, for creating new records, ...

So it makes sense that our application frame supports such specific work-screens. And the good news is that we've support for this.

It could look like following screenshot:

Modal frame

It's a screenshot from one of our test applications. The feature isn't generally available yet, but it will be part of the next VisionX release.

Development | rjahn | 04/08/2014 | Comments (0)

JVx, Vaadin

VisionX Update 2.0.121

Great news for all VisionX users!

The current update release 2.0.121 is available for download. Please check your download area.

The release is more than just an update release. It contains all currently available features. We wrote about some of them:

Repeating frames
IDE integration
QR Codes
Features for developers
Ready made solutions

It contains current JVx, ProjX libraries and source code.

If you miss some features after upgrading, please contact our product support because previous versions provided features without valid license. If the features are already licensed, no worries.

We have a product and feature overview for you.

News, Release notes | rjahn | 29/07/2014 | Comments (0)

VisionX