Mobile Design

You can start designing your mobile application by creating a new solution of type (NG Client) and creating a new form. You have the option to choose from either responsive or simple CSS when creating the form.

If we are looking to create a smartphone-only application then a simple (CSS-position) type of form may be sufficient.

Simple CSS Position Design

Reduce the width of the form to the smallest viewport size you want to support. For example if you have an android phone that only has 324px for display width, then use that for the form width. It is especially important to start designing for a small screen size first, as it's much easier to increase the size of the form rather than having to decrease later on knowing you must support a smaller device.

Here we add a simple header for the main page. Perhaps we are trying to create a screen that shows all the orders in our database. Select the label option from the components list and add it to our main form and use the cssPosition property to align to the top, left and right of the view.

We can also add some basic styling as well to any component using CSS. We can declare a class and have our label use it with our .less file. Below we add a .header declaration and make the it's target have a border and text aligned centered.

Let's also setup our datasource and add a grid to the form so that we can visualize the data from our orders table. Update the datasource property to match the example database orders table. Then add a data grid from the components list. Apply the cssPosition property so that it anchors to the page fully. We may want to add a bit of extra space at the bottom for additional buttons.

We may also want to enable the continousColumnAutosizing property of the grid as well. This will enable the grid to automatically resize columns to fit as the view is resized.

Finally we can preview our work in progress. As the window size of the application changes, the form's components will try to use up available space and are anchored to the edges. This can be useful if we need to target multiple phones with varying screen sizes, enabling us to have some layout responsiveness.