Responsive Applications

The use of reusable parts to construct the UI is also an enormous benefit when considering the requirements of responsive applications. Figure 17 is an appropriate layout for the desktop, but a smaller screen would necessitate a redesign, with the list and editor being interchangeable. This is far easier to achieve if reusable parts are being moved around, rather than having to move all the individual controls.

In addition to creating reusable parts, it is both possible and highly desirable to create multiple layouts with a page, and then to swap them at runtime.

Figure 18 – Multiple layouts

Figure 18 shows the result of creating a second layout to handle a different orientation or screen size. Both layouts are listed in the list of layouts and you can toggle between the two in the designer.

Similarly, you can programmatically switch between the two.  This is something typically done when using the Design features of web pages with simple IF/ELSE code to assign the Layout to the page.

Evtroutine Handling(#Com_owner.DesignChanged) Design(#Design)

   If (#Design *isequalTo #Mobile)

      #Com_owner.LayoutManager <= #Layout1

   Else

      #Com_owner.LayoutManager <= #Layout2

   Endif

Endroutine