Oracle JET – Lesson 2 – Part 8: Responsive Design Solutions


Hello and welcome to part 8 of the
second of the three weekly lessons about Oracle JET. In this part, you’ll learn
about JET features that help you create applications that reorganize themselves
to the resolution of the device in which they’re being used. Responsive design is
an approach to web design aimed at allowing web pages to be viewed in
response to the size of the device that is being used to view the application.
Some of the components and techniques you’ll learn about in this part have
been mentioned in previous parts already, though here they’re all covered within
the same part of the course, so that you’re able to get an overview of all
the features related to responsive design at the same time. One of the
application patterns outlined in detail in the JET Cookbook is the responsive
page content pattern, which combines a number of techniques relating to
responsive design. One design technique that can be used to help with responsive
layout is to use the JET panel component as a placeholder with
different “alt” colors being used for the different areas of your page layout.
This allows you to easily see how the panels will lay themselves out as the
browser size is changed or when you view the page on different device sizes.
It’s much easier to make adjustments to a simple panel until you get the basic
flow correct. After things look pretty good, you can start adding in the correct
components and the content to replace the ojPanel look and feel.
Several JET components are well-suited to help with requirements that relate to
responsive design. In addition to the layout features and components that
you’ve looked at so far, also be aware of the Behavior section of the JET Cookbook,
which provides information and responsive helper classes, responsive
JavaScript, and responsive loading. In this part, you’ve learnt about all the
features in JET that support you in creating applications catering to
responsive design requirements. For your homework for this part, choose a layout
design with different layouts on desktop, tablet, and phone screen sizes using
oj-flex and a oj-flex-item CSS classes, along with ojPanel, to create
the layout. Keep in mind the topics discussed in
this part. Think about how you could change a viewModel code, if you are on a
mobile device versus desktop. And with that, we complete part 8 of the
course and see you in part 9.

Add a Comment

Your email address will not be published. Required fields are marked *