Scribd
Upload
68 views

Responsive Web Design With Oracle JET

Creacion de Paginas Web con Oracle Jet

Uploaded by

Fabian Cabrera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
68 views

Responsive Web Design With Oracle JET

Creacion de Paginas Web con Oracle Jet

Uploaded by

Fabian Cabrera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 16
DZone Responsive Web Design With Oracle JET by Chris Muir - Jan. 09, 17 « Web Dev Zone « Opinion In the previous Oracle JET article we looked at the basics of creating a JET web page out of the available web UI components. In this ongoing article series for this article, I'd like to share what I've learned about JET's support for responsive web design. You can find a list of all articles to date in this article series at the bottom of this page. Responsive Web Design For readers familiar with the concepts of responsive web design skip down to the next section, However, I'll give a brief explanation of the concepts here as from an Oracle perspective we often meet customers and developers who only know the term but aren't really familiar with why it exists. For those of us born in the dark ages (you know, before the internet), we distinctly remember the first time we saw our first website, on our desktop computers, possibly a 14” monitor maxed out at maybe 1024x768 if we were lucky, or 800 x 600 if we weren't: Browser windows took the full screen, but we didn't mind, the future had arrived! We could surf the internet at work pursuing our personal interests and get paid for it! And our productivity has suffered ever since ;-) Time moved on, our monitors and resolutions grew bigger, but thanks to various standards put in place for screen resolutions to support smaller monitors our websites didn't get bigger, rather they developed vertical bars on each side as websites were standardized to be read on any monitor size including the smaller units we'd just come from. Eventually, our monitors became huge.. I still remember being amazed by my first 21" monitor (tube based, non-LED of course, so it was the size of a tank. Ikea office tables had to be much stronger in those days). Webpages still had the rapidy-becoming-useless grey side bars, but we could have multiple windows open on our super-sized monitors so we didn't really care. As a result, website design mainly remained the same, And then dramatically the IT world changed with the introduction of the iPhone, which like our desktops could also render web pages: ‘race Technology Network econ Posies < o oO As you can see, there was a minor problem, it's screen was so much smaller. Many of us developed arthritis as we learned the two finger pinch zoom gesture so we could move around the page and read the small text. Page navigation became painful as you zoomed in and out repetitively. At this point, web page design started to change. Adaptive web design was born, where separate websites for desktop and phone were created in parallel, This allowed content to be tailored to the different screen resolutions. However as time went on mobile devices and computer platforms proliferated, with many many different sizes, While adaptive web design was still useful for special cases and where web teams had enough resources to maintain separate web designs, a new approach was needed for the majority: saa dr Responsive web design is an approach to web design aimed at allowing webpages to be viewed in response to the size of the device one is viewing with. A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries ... Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic. Acatch cry you will often read about responsive web design is it has the right design for every device. In other words, developers don't create separate content for each page different platforms: desktop, mobile, tablets. Rather they create one code base for each page for all platforms, and the website will automatically resize & orient itself based on the device's screen real estate and orientation. In the following screenshots (which is another shameless plug for Oracle, but I need to keep my Oracle overlords happy somehow ;-) ), you can see the main Oracle website using responsive web design rendered on 3 different screen sizes. As you can see, when the screen gets smaller, the page content resizes and reorients itself to best take advantage of the screen real-estate: “=e a” Be Ee How pages do this is through the magic of CSS3 @media queries. As commonly known, CSS is typically used to define the presentation of HTML content. Colours, fonts, layouts and more, through CSS styles and classes. A CSS3 @media query allows specific styles and classes to be applied dependent on the screen size (or more specifically the browser's visible width). In addition responsive web designs typically use flexible grids to hide & rearrange content via the @media queries, where the grids are based on containers and items. The containers and items do not used fixed pixel widths, rather, they are designed to grow and shrink to fill the available space. Responsive web design doesn't just apply to screen layout, though, it can be applied to all content including images, video and more. There's no point serving a high-resolution picture if the mobile device can't fit it or the fine resolution details can't be seen. USL Hopefully, this description gives anyone new to the concepts of responsive web design an idea what it entails. Oracle JET Responsive Page Design Features In investigating Oracle JET, it provides numerous features to support responsive web design including out- of-the-box CSS3 @media queries for different screen sizes, flex, grid and form responsive layout schemes, convenience styleclasses, and JavaScript utilities to make developing with different screen sizes easier, support for responsive images and even different font sizes. In starting out though let's look at the Oracle JET CSS3 @media queries as these form the basis for all the responsive web design features. When generating a JET app via one of the provided Yeoman templates, it will make use of the Alta theme and associated alta.css, which includes the @media queries. Essentially 4 @media queries are defined as follows where among the 4 we can see a medium sized screen is between 768 to 1023 pixels in width: Size Pixels Device Example Small (sr 0-767 Phone Medium (md) 768-1023 Tablet portrait Large (Ig) 1024-1280 Tablet landscape, desktop Extra Large (xl) 1281+ Large desktop As highlighted in blue above, note the abbreviated screens size names sm, md, lg and xl for small, medium, large and extra-large screen sizes respectively, These abbreviations are meaningful to us as the web developer, because in selecting different JET styleclasses to use for different screen sizes in our responsive web design, we pick styleclasses for our screen size based on the abbreviations above, As an example, the oj-md-flex-items-1 styleclass provided is used for medium sized screens. Ifyou're curious to know how the @media queries do this, the following code exert from alta.css shows how the @media query groups styleclasses oj-md-flex-item-1 and oj-md-flex-1 and more. In this way for a medium screen size, the oj-md* styleclasses will become active. | @nedia screen and (min-width: 768px) { 5 .oj-md-flex-items-1 > .oj-flex-iten, 5 .oj-md-Flex-1 (-webkit-Flex:1; flex:15} sete. Flex Layouts ‘@media queries provide one part of the solution to responsive web design, Oracle JET's support for flex layouts is another significant part of the solution, Oracle JET’s flex layout system implemented via CSS3 styleclasses is based on the W3C CSS flexible box layout proposal Flex layouts support the concept of a container of items where items can grow to fill the unused space, or shrink to not overflow the parent, The layouts also support layout in any direction, as well as nesting (containers of containers so to speak) and wrapping of items: [ene [omen er (eonreiig rei} Ct tem Cy (emer PRS es mC ee ay Implementing flex layouts is best demonstrated by a code example: A
B
C
> > o
E
FGHEIKLANOP
As seen the oj-flex class identifies the 2 flex containers, while oj-flex-item is used to identify each individual item in the containers, Rather than trying to describe the behavior in a narrative, the following diagram attempts to visualize what happens with these 2 containers displayed in a browser, what happens when you expand and shrink the browser size beyond the @media query widths: eas Pree grow/shrink to fit POEL Celok 1as% OU atte: //ietape. A B c FGHUKLMNOP D E FGHUKLMNOP eco ae fe If space shrinks Peat ee) D E cra automatically wrap FGHIJKLMNOP Overall the Oracle JET flex layout comes with a considerable amount of styleclasses we can make use of in ‘our web applications, indeed too many to cover in this article, But let's see if we can broadly understand what is available: Container Individieal trame bs onyaign-tems feat ot fste}Moxitems [see Searosecione SRI eet tied sere isle lesien ‘bfse-onyaligntems baseline crane ~ ob(sue}onlyeeitemesntal i penpals ~ bse} ak:{ste}oxsirectin-cokimn ae ailshe}-ignsettcenter (se only Fox areetion colon ee siliee eee tthe) gn set extart ‘bie stfrconter space-between earn iste Rexwap oma [sent agnattcerter 9 [sine]-only flex-wrag i ee ‘Cid diteneest ka] -ony- sty content flexend ieee iseiestennenetser: {seater est eset cscs acid siejonpaligraaterend tsi sign items flexstart aad digsirchased ‘ob {s)-ony justify conten pace between bse order 03} ie sienitemeocine saa Firstly note the [size] annotation indicating we have a full set of styleclasses for small, medium, large and extra large screens, Which we choose is based on what screen sizes we're building for, In turn, note the styleclasses with the text "only" marked in red. If we choose one of these styleclasses, they apply only to that screen size, Alternatively, if we choose a styleclass without the word "only" marked in blue above, this applies to that screen size and above unless a larger screen size styleclass is used. Second, note that the styleclasses are broken into those you apply at the flex container level such as oj- [size]-flex-item-1, versus styleclasses we apply at the flex item level such as 0j-[size]-flex-1. As mentioned there are far too many styleclasses to cover in this article, so let's pick and choose a few to get a feel for how they work, Let's start with oj-[size]-flex-items- initial As described earlier the default behavior of the Oracle JET flex layout is to grow and shrink the container items depending on the available screen space. We can override this behavior by using 0j-[size]-flex- items-initial at the container level so the container items will shrink, but not grow to consume the available size:
Ac/div>
8
¢
Give a screen of medium size the above code would result in: Alternatively, rather than applying this at the container level, if we only wanted to apply this for the first item we could use oj-[size]-flex-initial on one of the items:
a
B
Aanin accumina a madinm coraan aia wnnld eae again aout Hg a ucMIUiN SLLeeH we WwoUIU See. Conversely to shrinking, if we want to grow all the items to the same width, we can apply oj-[size]-flex- items-1 to the container:
‘oj-Flex-item">ac/div>
8
C
€
‘oj-flex-item">F - This text will auto wrap
».Which on a medium screen would look like A B c D E F—This text will auto wrap Ican imagine wrapping of items is something we'd like to control when the screen shrinks. Exploring our carlier sample of code:
Flex items
Ac/div>
B
>e
,
Flex items -->
hote how the last item will be entirely wrapped to a new line if it doesn't fit: A B ic D E FGHIJKLMNOP FGHUKLMNOP- We might instead prefer that the text within the item wrapped instead. To do this we use oj-[size]-flex- nowrap on the container (I'll save you reading more code, you should be able to work it out now) which would have this effect depending on the screen size you select: 5 A C D FGHUKLMNOP D A B Cc | D E FGHIS KLM ‘There's plenty to explore with the flex layout provided by Oracle JET. My only bit of advice from my own experimentation is if you can't get a layout to work, and you've added 1001 styleclasses which are interacting in some weird way, strip out the styleclasses and start again based on what you've learned. Grid Layouts An alternative responsive web design system is the 12 column grid layout scheme. Essentially screens regardless of their size are divided into 12 columns which grow and shrink based on the screen size: A B a a ee A 3 @ How it works is when we define an item, we simply state how many columns should it take, from 1 toa total of 12 for different screen sizes, based on the styleclasses you pick. I spent quite a bit of time trying to work out how to visualize this, and | hope the following picture helps eae convey how it works: ‘city class="o}-flex-item of-an-12 of-nd-12 o4-1g-6 o}-n1-s!>ac/atv> a caiy clase="9}-flex-iten of-en-12 oj-ad-6 0j-1g-3 o}-x1-4°>8 ‘i-flex-ites ol-ani2 oj-ad-6 9}-1g-3">¢ 8 € Medium screen A 8 c tage screen A 8 ic fra large screen a 8 € From the code, you can see we have 1 container and 3 items, Depending on the size of the screen, different styleclasses will be applied: 1. For a small sized screen, each item with be stretched to the full 12 column width. This forces the next item to wrap onto the next line 2. For a medium sized screen, the first item stretched the full 12 column width pushing the remaining items onto the next line, As the 2 remaining items are both 6, to a total of 12, they fit onto the next line together. 3, For a large-sized screen, the 3 items of a width 6+3+3 to a total of 12 columns fit on the one line, 4, Finally, for an extra large screen, the first 2 items fit on the first line. The 3rd takes up the remaining space as it doesn't have a styleclass defined for extra large. Of special note for the last comment, however, as we haven't defined an extra large styleclass for the 3rd item, but we have defined a large styleclass, this takes effect. It's as I mentioned before about "only" vs “non-only" styleclasses: Note the styleclasses with the name “only”... If we choose one of these styleclasses, they apply only to that screen size. Alternatively if we choose a styleclass without the word "only" marked ... this applies to that screen size and above unless a larger screen size styleclass is used. This is why the 3 items on the extra large example fit onto one line: 5+4+3 = 12 Form Layouts Another layout scheme supported by Oracle JET is that of form layouts, for editable controls such as inputText components, Data entry forms typically have a layout where each editable control is left aligned down the page, with their labels either to the left or above them as seen in the following picture: Header Inside F The Oracle JET forms layout support includes support for aligning component labels to the left or above the component, the ability to group components horizontally within a vertical form (useful where some fields can't be split across lines such as state and postcode), can wrap components on small screens, supports laying components in multiple columns, or nesting forms within forms, the ability to group components within headers, expand components horizontally across a form, and also align non-editable components such as buttons in a form too. Phew, that's a large list, It seems Oracle has interest in data entry for some reason ;-) Using the Oracle JET form layout we may want to build a login panel with an email address field, a password field, each with labels, and a login button: Login Email Address * Password * Login ‘The following code demonstrates how this can be achieved:

Loging/h3>
‘usernane-input" Email Address