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 viewport, and how to use the Viewport meta tag to manipulate the layout viewport on different devices.
Chapter 5 concentrates on Cascading Style Sheets, or CSS. You will learn about inline, internal, and external style sheets, and how to use selectors to identify specific elements in an HTML document.
Chapter 6 discusses how to separate a page into modules that can be manipulated separately as devices and display sizes change. You will create a sample application that responds to device size using three different techniques to apply responsive behavior.
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 9 Chapter 7 expands on the responsive application of Chapter 6 to learn about breakpoints, and how to recognize when a new breakpoint is needed.
Chapter 8 provides advice on making design decisions, and things to consider when designing responsive applications.
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 10
In this chapter, you will learn the changes to Application Designer that are used to build fluid components and pages. You will understand the role of Group Boxes in fluid page design, and understand the relationship between page definition controls and HTML elements. You will be introduced to default styles, and how they are used to style a page through HTML and CSS.
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 11 The first thing you notice when you open Application Designer in 8.54 is there are very few differences from previous 8.x versions. The App Designer canvas is the same, with the project workspace, definition workspace, and output workspace (Figure 01):
Figure 01: Application Designer
The differences begin to show themselves when you create a new page. Instead of a single Page definition, there are two: Page, and Page (Fluid) (Figure 02). Selecting Page when creating a new page definition has the same behavior as before, but selecting Page (Fluid) brings up a separate dialog asking to select a layout (Figure 03):
Figure 02: Page (Fluid) Figure 03: Fluid Page Layouts
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 12
Choosing a layout initializes a new page with group boxes placed in areas of the page canvas. Different layouts initialize with different group box positions. For example, selecting layout PSL_2BY2 initializes the page definition with group boxes arranged for a 2x2 layout (Figure 04):
Figure 04: PSL_2BY2 Layout
The page properties include a Fluid tab (Figure 05) that allows developers to manipulate different aspects of the page.
Figure 05: Page Properties Fluid Tab
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 13 The fluid tab is only applicable when the page is in fluid mode, and that is controlled by a checkbox on the Use tab of the Page properties (Figure 06):
Figure 06: Page Properties Use Tab
In fact, Selecting Page (Fluid) when creating a new page definition does just two things: 1. pre-populates the page with group boxes as defined in the selected Layout Page 2. sets the Fluid Mode checkbox to True
You can do the same thing by creating a traditional page definition, adding and configuring your own group boxes, and checking the Fluid Mode yourself. Selecting Page (Fluid) with a Layout Page is just a shortcut to creating a page based on a pre-designed layout.
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 14 d the mode (Figure 07):
Figure 07: Component Properties Use Tab
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 15 The fluid tab is also available at the page/field level, and the layout you choose when creating a page may initialize values in this tab. In Figure 08 Default Style Name of . This property was set as part of the initial page understand that the page layout initializes a page with both group boxes and default style names.
Figure 08: Group Box Properties Fluid Tab
Group boxes are fundamental in designing how a fluid page will look to the user. In classic page design, controls are placed on the page with the assumption that they will appear to the user generally in the same positions, or at least the same positions relative to other controls. In fluid, group boxes are used to create
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 16
uid page definition, and its corresponding HTML page. You see several group boxes on the page definition, some with sub-pages within the group box (Figure 09):
'
Figure 09: Application Designer Page Definition
The page, as displayed in a browser, bears little resemblance to the Application Designer view (Figure 10):
Figure 10: Same Page Displayed in Browser
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 17
But looking at the HTML you can tie the Application Designer page definition to the HTML structure (Figure 11):
Figure 11: Group Box and Button - App Designer and HTML
The group box surrounding the Create Documents button is rendered as a
Also notice the
Figure 12: Group Box - HTML and Fluid Properties
In classic PeopleTools, you seldom have to worry about the HTML that is generated from your page. In Fluid, each of the elements that are generated are able to be manipulated with configuration or code, using style names.
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 18 CSS styles are defined in PeopleTools Stylesheet definitions. Fluid uses a default style sheet called PSSTYLEDEF_FMODE. Class is defined with the CSS display property of inline-block:
Back on Figure 12, the group box uses as one of the default style class selectors, and that selector has the CSS property of . The result is the
This is a significant change in the way PeopleSoft pages are styled. It provides a much closer close connection gives more control to the developer, but also requires more skills in creating you proceed through this book.
Responsive Design: Using PeopleTools Fluid Technology to Build Responsive Web Apps 19 This Free Chapter was taken from “Responsive Design” ebook by Dan Sticka and provided to you by PeopleSoftTutorial.com
https://peoplesofttutorial.com/fluidbooks/