Tersus: Demo Stage 2 – Mobile: Launch the application from your iPhone/Android [3 minutes]

Demo Stage 2 – Mobile: Launch the application from your iPhone/Android [3 minutes]Date: Mar 15, 2020

Zoom into '<Mobile View>' and rename 'Page 1' to 'Shopping List'.

Zoom into 'Shopping List/Header' and delete 'Button'.

Copy

'Items' from '<Desktop View>' to '<Mobile View>/Shopping List/Content' (use 'Copy' and 'Paste (Reuse)', to make both views share the same model 'Items').

Save the model.

We can already access the application from a smartphone, but we'd better take care first of its look and feel. As an interim workaround, until these styles can be selected when creating the project, we'll have to copy iPhone styles from another project:

Download theme.css.
Copy it to the 'web' folder in your project (override the existing empty file).

Restart the application. You can now access the application from your iPhone or Android device.If you don't have an iPhone or an Android phone, you can see a preview of how the application will look on iPhone. Simply add "/mobile.html" at the end of the application's URL in your browser (e.g. go to http://localhost:8080/ShoppingList/mobile.html instead of http://localhost:8080/ShoppingList):

Another improvement we may want to do is to hide the table's caption ("Items") - the "Shopping List" title is enough:

Zoom into '<Mobile View>/Shopping List/Content/Items/Items' (the table).
Add the style class no-table-caption (i.e. change the 'html.styleClass' property from 'normal' to 'normal no-table-caption').
The theme.css file already contains a rule for no-table-caption (in mobile view only), so all you need to do it save the model and restart the application:

Download Project: Stage 2 (version 2.1.9) Next: Deploy the application on a server accessible through the Internet See Also:

To use the full functionality of this web site, JavaScript needs to be turned on.

For best results, use the Firefox browser..

Loading ...