My first Responsive Web Application

Official Content

This is a getting started guide for developing a Responsive Web Application with GeneXus. In this example, the application is based mainly on Web Transactions and Work With Pattern forms.

All that’s needed is to:

Note: Those are the default values for new KBs.
        i2016_06_02_20_26_254_png

Note: Make sure that HTML Document Type property is set to HTML 5.

  • Create a Transaction, and apply the Work With Pattern to it : Apply Pattern -> Work With for Web.

As a result of these configuration settings, web transaction default forms, Work With Pattern instances, and prompts, will use the Abstract layout.
The form of a web panel generated by the Work With Pattern will look as follows: 

i2016_06_02_20_22_062_png
Design form of a web panel generated by Work With Pattern.
  • Rebuild the application.
  • Then, run the application!

At runtime, it looks as shown below. Note that label controls automatically change their position in order to adapt to the size of the screen.

i2016_06_02_20_45_435_png
Web transaction form running on a phone
i2016_06_02_20_48_056_png
Web transaction form running on a tablet

Note that in the images below, the information shown for phone screens was reduced (the product’s price is not shown), and the insert button appears only when the menu is displayed, while in the tablet screen, the layout is distributed in a totally different way.

i2016_06_03_15_34_027_png
Work With form running on a phone
i2016_06_03_15_35_298_png
Work With form running on a tablet
i2016_06_03_15_41_249_pngWork With form running on a desktop

Follow reading: Getting started with RWD: Understanding default forms

 






Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.