This Free Chapter was taken from “PeopleSoft Fluid” ebook by Dan Sticka and provided to you by PeopleSoftTutorial.com This Free Chapter was taken from “PeopleSoft Fluid” ebook by Dan Sticka and provided to you by PeopleSoftTutorial.com To get the complete ebook “PeopleSoft Fluid” and also “Responsive Design” see below. Click here to get the bundle now https://peoplesofttutorial.com/fluidbooks/ This Free Chapter was taken from “Responsive Design” ebook by Dan Sticka and provided to you by PeopleSoftTutorial.com Using PeopleTools Fluid Technology to Build Responsive Web Apps Copyright @ 2015 DannyTech, LLC, All Rights Reserved Author: Dan Sticka The information contained in this document is subject to change without notice. This document is not warranted to be error-free. No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose. PeopleSoft Tutorial has rights of distribution in agreement with DannyTech LLC to distribute, sell, rent, or lease this document. No other reproduction, distribution, transmission, sale, rental, or lease of this document is permitted. Oracle and PeopleSoft are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners. Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 1 Introduction ................................................................................................................................ 3 he Book ..................................................................................................................... 9 Chapter 1: Fluid Basics .............................................................................................................11 Chapter 2: Hello Fluid ...............................................................................................................20 Chapter 3: Control your Class ...................................................................................................39 Chapter 4: Viewports and Layouts ............................................................................................54 Chapter 5: CSS .........................................................................................................................64 Chapter 6: Modular Design .......................................................................................................88 Chapter 7: Breakpoints ........................................................................................................... 118 Chapter 8: Conclusion ............................................................................................................. 139 Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 2 In 2014, PeopleTools 8.54 introduced the Fluid Interface, a significant departure from the user interface that has mostly been unchanged since the PeopleSoft Internet Architecture (PIA) replaced the client-server model in version 8. Prior to the PIA, the PeopleTools framework targeted a Windows-based user interface (UI). With Version 8, the PeopleTools definitions, Fields, Records, Pages, Components, were used to generate HTML and JavaScript, turning PeopleSoft into a completely browser-based application. At the time, this was a giant leap forward. PeopleSoft 8 looked modern. Many other enterprise software packages used browser plug-in technology to allow their apps to run natively within a browser. PeopleSoft was all browser, no plug in, and they marketed this distinction with the The design characteristics, however, were fundamentally the same. Application Designer was still used, somewhat awkwardly, to build pages (renamed from panels). Controls on the page, by Oracle. Just like in the Windows user interface, nudging a control up a pixel in App Designer resulted in the HTML control being nudged up accordingly. This meant that the full area of the page was fixed. If the page layout was wider than the browser window viewing it, the browser put horizontal scroll bars to allow for the overflow, or just cropped off part of the page. The same - just make your browser window bigger, or get a bigger monitor. Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 3 Jump to present day. Scarce are the large monitors filling up the width of a desk. Users of technology now are expecting applications to work on both large and small devices. They eing used, and the content to be adjusted to the abilities of the device. While a page with a wide grid of information might be useful on a laptop, just a subset of the most relevant information on that page may be more suitable for a smartphone. For example, Figure 01 shows the American Airlines web site as seen from a desktop computer. Figure 02 different, but much of the content on the full site is omitted from the mobile site. Figure 01: Full Desktop Site Figure 02: Mobile Site Interface aims to address. With Fluid, a PeopleTools developer has more control of the HTML5 and CSS3 that is being generated, and less reliance on the positioning of page controls in App terms of the position of the controls on the resulting HTML page. Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 4 In Classic pages, when you resize your browser window below the size of the page, the page simply gets cut off, or scroll bars appear allowing the user the ability to scroll to the truncated areas of the page. Accessing the same page from a phone, the page is presented fully, but scaled too small to be effective. Figure 03 shows a classic PIA page on a full-sized desktop with the browser maximized. In Figure 04, the browser is reduced in size. Notice how the right side and bottom of the page are cropped with the borders of the browser. Figure 05 shows the same page on a phone in its portrait orientation. Notice that the full page is displayed, but too small to be effective. Figure 03 - Classic Page Desktop Figure 04: Classic Page Figure 05: Classic Desktop with reduced browser Page displayed on size a Phone Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 5 Doing the same resizing of the browser window on a Fluid page demonstrates the fluid nature of how controls are repositioned to accommodate the smaller screen. On this page, a navigation panel is presented on the left that controls the details on the right (Figure 06). As you reduce the browser window, or access the page from a small device (Figure 07), the left navigation panel collapses, and the right details panel scales for consistent usability. Figure 08 shows the navigation control expanded, obscuring the details until an option is selected. Figure 06: Fluid Page on Desktop Figure 07: Fluid Page Figure 08: on Small Device - Navigation panel Navigation panel Expanded collapsed change the page content and style based on the device used. For example, fields that are visible when viewed from a desktop may be rendered invisible when viewed from a phone. CSS can be used to respond to different devices so the page style is suitable for all device types and sizes. Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 6 The Fluid Interface is especially good at providing self service applications. Self Service apps typically behave differently than traditional PeopleSoft apps. In traditional PeopleSoft, you navigate to a menu item and are presented with a search dialog. This corresponds to the search record defined in the component. Once you enter the search criteria, you are presented with a list of records that meet the criteria, and you select one. Finally, the record you are interested in is presented on the page. Self Service is different. A self service user is typically interested in a specific record, such as an employee record, or a defined group of records, such as a list of direct reports. Rather than a search dialog, a self service user expects to be presented with the Figure 09): Figure 09: Manager Self Service - My Team Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 7 This all leads to an approach to web application development called Responsive Design - a design that is optimized for the device being used. A responsive web application should not require resizing, scrolling, enlarging, or reducing based on the size of the device, rather the page should adjust itself to the dimensions of the device. Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 8 In this book, you will learn the techniques and develop the skills necessary to design and build Responsive Fluid Applications in PeopleSoft. You will expand the skills that you already have from developing Classic PeopleSoft applications to design responsive pages, write improved code, and test in the PeopleTools Fluid technology. Chapter 1 highlights the changes to Application Designer to accommodate building fluid user interfaces. You will learn about the the relationship between page controls and the resulting HTML in a fluid page. Chapter 2 steps you through building a simple Fluid application. You will learn how to create a new homepage and add a tile to the homepage used to launch the application. Chapter 3 presents the controller coding pattern. You will learn how to use application classes to control the interaction between the user and the application. Chapter 4 introduces the Viewport meta tag. You will learn the difference between the visual and layout