I am new to APEX, but have been a Oracle Forms developer for 30 years (yes, since Forms 2.3!).
My experience with page layouts were much simpler in Forms as we controlled the screen size and everything was pixel-perfect. I have played a little with HTML, so understand some of the concepts of responsive web design, but I am no expert.
Anyway, getting start with APEX (24.1), I want to create a master-detail page, where the Master is a Form and the Detail an Interactive Grid (e.g. order header with order lines). My Form (order header) I want to set a maximum width and have it centered on a typical desktop page, but I still want it to be responsive, so if it is run in portrait on a tablet or phone (less than the specified max width), fields shuffle so they are still displayed nicely.
e.g. (simplified)
variable | Max width of 800 pixels | variable
width | | width
field1 XXXXXXX field2 XXXXXXXXXXXXXXXXX
field3 XXXXXXX field4 XX field 5 XXXXX
field6 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX Interactive Grid XXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<------------------------- full width -------------------------->
We are using the Universal Theme with its 12-column grid, but this does not suit my varible-maxWidth-variable style above. I assume I'll have a 12-column give inside my max-width section, but I want the optional margins on the left and right to support the centering. Do I need sub-regions inside regions? Any ideas on how to achieve this?
Also, can anyone recommend good videos / doco etc on creating good responsive UX design in APEX? Best practices etc? We have around 600 Forms to re-write in APEX, so responsive page layout is an area we need to become experts in. I suspect we'll need to learn some more HTML and CSS as well.
Cheers,
Tim.