X

Geertjan's Blog

  • April 25, 2016

Flexbox and Oracle JET (Part 1)

Geertjan Wielenga
Product Manager

CSS Flexible Box Layout Module Level 1, a.k.a. Flexbox, is a new layout mode in CSS3, and is the recommended strategy for doing CSS layouting in Oracle JET applications. Here is the Oracle JET Cookbook item on Flex Layout in Oracle JET 2.0:

http://www.oracle.com/webfolder/technetwork/jet/uiComponents-flex-basics.html

Also take a look at the right column on the page above, where you'll find a heap of options to finetune the basic scenario. 

Flex Layout is the latest version of responsive CSS layout that is available starting in Oracle JET 2.0 and above, i.e., Oracle JET 2.0.1 is the most recent release of Oracle JET. The Cookbook lists quite a lot of options that Oracle JET provides, which are helper classes on top of Flexbox. All of the Flex Layout support in Oracle JET really just follows Flexbox itself. To that end, if you want to learn more about Flexbox, understand its background and functionality and things like that, you're recommend to read this:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You'll learn about the background of Flexbox, as well as its terminology, from the above. The main two things that you need to know is that you'll be dealing with a "container" and then "items", which are inside a container. As long as you bear in mind that you're nesting items within containers, where some items may themselves be containers for other items, that's the main paradigm to get a handle on.

Let's take a look at some examples now. If you use the "Oracle JET Quick Start Basic", your user interface looks as follows:

The above three areas, i.e., Navigation, Main Content Area, and Complementary, are defined like this in the "index.html" file:

And here it is as copyable raw text:

<div class="oj-web-applayout-max-width oj-web-applayout-content">
<div class="oj-flex">
<div class="oj-xl-3 oj-lg-3 oj-sm-12 oj-flex-item oj-flex">
<div id="navigationContent" role="navigation" class="oj-panel oj-margin oj-flex-item"
data-bind="ojModule: {viewName: 'navContent'}">
</div>
</div>
<div class="oj-xl-6 oj-lg-9 oj-sm-12 oj-flex-item oj-flex">
<div id="mainContent" role="main" class="oj-panel oj-margin oj-flex-item"
data-bind="ojModule: router.moduleConfig">
</div>
</div>
<div class="oj-xl-3 oj-sm-12 oj-flex-item oj-flex">
<div id="complementaryContent" role="complementary" class="oj-panel oj-margin oj-flex-item"
data-bind="ojModule: {viewName: 'compContent'}">
</div>
</div>
</div>
</div>

Now, let's say we want to modify the layout so that the navigation is not shown, while the main content area takes up that extra space left by the absent navigation area:

To do this, comment out the navigation section and tweak the numbering of the main content area section. The changes are in bold below

<div class="oj-web-applayout-max-width oj-web-applayout-content">
<div class="oj-flex"><!--<div class="oj-xl-3 oj-lg-3 oj-sm-12 oj-flex-item oj-flex">
<div id="navigationContent" role="navigation" class="oj-panel oj-margin oj-flex-item"
data-bind="ojModule: {viewName: 'navContent'}">
</div>
</div>-->
<div class="oj-xl-9 oj-lg-12 oj-sm-12 oj-flex-item oj-flex">
<div id="mainContent" role="main" class="oj-panel oj-margin oj-flex-item"
data-bind="ojModule: router.moduleConfig">
</div>
</div>
<div class="oj-xl-3 oj-sm-12 oj-flex-item oj-flex">
<div id="complementaryContent" role="complementary" class="oj-panel oj-margin oj-flex-item"
data-bind="ojModule: {viewName: 'compContent'}">
</div>
</div>
</div>
</div>

The column classes work in conjunction with the Flex Layout. Read all about them here:

http://www.oracle.com/webfolder/technetwork/jet/stylingdoc.html

Media query device relationships roughly align with the following:

  • sm = handheld device (phone)
  • md = iPad portrait mode
  • lg = iPad landscape
  • xl = desktop (larger than 1024px width)

When a size is used, it means that size and up. That's a key concept to get an understanding of. This is how all CSS-based grid systems work, by the way. Even Twitter Bootstrap works this way.

So, this...

<div class="oj-xl-3 oj-lg-3 oj-sm-12 oj-flex-item oj-flex">

...means this:

  • for small on up make this div take up 12 columns out of 12 possible (100%, in other words).
  • for large (iPad landscape) and up, override the small and make this div take up 3 columns out of 12 possible.
  • for extra large (desktop) and up, override small and and large and make this div take up 3 columns out of 12 possible.
  • (This doesn't really need to have the xl part in here since it's exactly the same as large.)
  • This div is a flex-item in a parent flex container.
  • This div is a flex container itself, as well.

The above info should give anyone a starting point, more entries coming in this series, i.e., this is the first of a series on Flexbox and Oracle JET. Many thanks to JB Brock for all the info above.

Now continue to part 2...

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha
Oracle

Integrated Cloud Applications & Platform Services