Liferay Front End Certification
ON TEST: Liferay Portal's custom Bootstrap theme that is used in the Classic Theme
Atlas
4 Properties of Theme Settings
Configurable: a value of true or false decides if the element of the theme can be configured Key: a name used to retrieve user value in the theme Type: defines the type of form field that should be (text, textarea, select or checkbox) Options: a comma-separated list of options the user can choose for the select type Value: default setting value `<setting configurable="true" key="show-site-name-default" value="true">`
AlloyUI
A framework built on top of YUI3 (JavaScript) that uses Bootstrap (HTML/CSS) to provide a simple API for building high scalable applications. Provides elements like carousels, progress bars, etc.
Bourbon
A mixin library added by default to liferay themes. Allows you to add things like @include font-face or border-radius that are commonly used
Liferay AMD Module Loader
A native loader that you can use to load your AMD [Asynchronous Module Definition] modules.
5 ways to add JavaScript to the Platform
Add global js through themes Add js to templates and fragments Add single page applications with SennaJS Using js in custom application modules Create custom js modules with React/Angular
ON TEST: Disabling SPA's
Add the following line to your portal-ext.properties: javascript.single.page.application.enabled = false
Syntax & Location for Adding Custom Theme Settings
Add the theme setting into the liferay-look-and-feel.xml `<setting configurable="true" key="rick-roll" value="true">` Translate the theme setting into a variable in the init_custom.ftl file `<#assign rick_roll = getterUtil.getBoolean(themeDisplay.getThemeSetting("rick-roll") /> Add functionality in freemarker `<#if rick_roll > <a href=rickroll>New Avengers 5 Trailer</a></#if>`
ON TEST: Installing a themelet
After you've developed your themelet, follow the steps below to install it into your theme. Navigate to your theme's root directory and run the following command: gulp extend Choose Themelet as the theme asset to extend. Select Search globally installed npm modules. Highlight your themelet, press spacebar to activate it, and press Enter to install it. Run gulp deploy to build and deploy your theme with the new themelet updates.
ON TEST: AMD Module Loader
Allows an application to load dependencies easily by specifying a string that identifies the module name
4 elements you can add to _liferay-look-and-feel.xml to modify the theme
Theme Settings Application Decorators Color Scheme Bundled Layout Templates
Global JavaScript
Themes allow you to control js that gets loaded onto every page the theme is on To add custom JS, add it to the main.js file in the theme src folder
Installing a Themelet Globally
Use either the `npm link` command or `npm install -g` command to install a themelet globally
FreeMarker Templating Language
Used in all front-end templates in liferay, including templates in the theme, web content templates, ADTS, Layout templates, Workflow Email notification Templates You can add clay classes to FTL files
resources/journal/articles
Users can include Web Content articles into this folder by using XML
Portlet Decorators
Users can provide different designs for the portlets displaying content by adding new portlet decorators to `liferay-look-and-feel.xml` The portlet decorator tag accepts the following properties: Portlet-decorator-css-class: this includes the css class that can be used in the `_portlet_decorator.scss` file to add custom css Default-portlet-decorator: When set to true, this decorator will be the default for all applications where the theme is applied
ON TEST: Lexicon Experience Language
______ is a design language aimed at providing a common framework for building interfaces within the Liferay ecosystem. It's a guide to consistent and coherent design principles, components, patterns, and contexts.
portal_normal's three main sections within the body `#wrapper` div
`#banner` includes the top part of the page (logo, name, nav, sign in) `#content` includes the code needed to render applications and content `#footer` is the bottom of the page
3 taglibs to embed applications and content
`<@liferay_portlet["runtime"] ... />` `<@liferay_journal["journal-article"] ... />` `<@liferay_ui["asset-display"] ... />`
Four Configuring SPA options (and location)
`Control Panel > Configuration > System Settings > Frontend Infrastructure` Cache Expiration time (in minutes Navigation Exception Selectors (CSS that SPA should ignore) Request Timeout Time (number of milliseconds in which an SPA request times out) User Notification Time (milliseconds that a notification should pop up telling the user that their request is taking longer than expected)
Syntax for Adding Layout Templates to liferay-look-and-feel.xml
``` <layout-template id="layout-template" name="layout-template"> <template-path>/layout_template.ftl</template-path> <thumbnail-path>/layout_template.png</thumbnail-path> </layout-template> ```
Three expected Asset-Display Taglib parameters
`className`: the Java class name of the asset (content type such as blogs or docs) `classPK`: the Primary Key ID of the specific asset to display (the specific blog...) `template`: the template used to display the asset
Two expected Runtime Taglib parameters
`portletProviderAction`: requests the portlet provider to perform an action for display `portletProviderClassName`: requires the full class name of the entity on which the action is to be performed
ON TEST: The lfr-editable tag doesn't render without____
a unique id
The sitemap.json file ____
allows developers to designate pages, page layouts, and content to display in the Site or Site Template that will be generated
ON TEST: Metal.js Component Life cycle Methods (choose all that apply)
create() render() attach() detach()
The Resources Importer ____
creates a Site Template that can be used for creating new sites with a predefined look-and-feel
4 Attributes for Portlets
defaultPreferences: A string of Portlet Preferences for the application. This includes look and feel configurations. instanceId: The instance ID for the app, if the application is instanceable. persistSettings: Whether to have an application use its default settings, which will persist across layouts. The default value is true. settingsScope: Specifies which settings to use for the application. The default value is portletInstance, but it can be set to group or company.
The assets.json file _____
defines the metadata of the assets that are imported
ON TEST: JSX Button Creation
https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/creating-the-alloyeditor-buttons-jsx-file Know the files/classes you need...
Liferay UI Taglib elements
Icons (email, flags, copy, delete, etc) Icon lists (make a group of icons) Icon Menus (make a menu with icons) Icon Tabs (make tabs with icons)
Syntax for Adding Portlet Decorators to liferay-look-and-feel.xml
In `liferay-look-and-feel.xml` ``` <portlet-decorator id="custom-decorator" name="Custom"> <portlet-decorator-css-class>custom-decorator</portlet-decorator-css-class> // optional <default-portlet-decorator>true</default-portlet-decorator> </portlet-decorator> ```
ON TEST: Can you use Lexicon in Templates and Themes
No, lexicon is not an implementation language.
Liferay Theme Generator is built with
Node.js: the JS Runtime Environment that provides the platform for building and testing our modules. Node.js is accessed via NPM, the Node.js package manager Yeoman: a tool that gives us the ability to rapidly create new projects using generators. This tool lets us build from an existing template by running a simple command. Gulp Tasks: gives us a number of commands we can use to build, package and deploy our modules
Theme Contributors
OSGi modules generated from Blade CLI or 3rd party software Theme contributor is a module that contains UI resources The User menus and Navigation are packaged as Theme Contributors by default To style, structure or change the control, product, or simulation menus, devs need to use theme contributors To identify a module as a theme contributor, add `Liferay-Theme-Contributor-Type` and `Web-ContextPath` headers to the modules `bnd.bnd` file
4 ways to add Third-Party JavaScript Libraries
Owned libraries: before loading as browser globals, the library needs to be configured so that it supports UMD Browser Loaded third-party libraries: Add the script tag and add the Liferay loading along with the library URL Hosted libraries: NAme the library in the define function, remove the UMD wrapper, and configure your module's build task to run the configJSModules task over the library. Add JS libraries to the theme with the script tag and url
Bootstrap Grid
Layout can have any number of rows with columns Columns are created using Bootstrap's Grid system to determine screen and column size. There are 12 sections in the fluid grid system, which can be divided up as needed. Because the sections are part of Bootstrap's grid system, users do not need to specify percentages or pixel widths, and the layouts are responsive by default. When creating columns, users do not need to specify percentages or pixel widths, and the layouts are responsive by default.
ON TEST: Lexicon CSS is bundled with two sub-themes:
Lexicon Base and Atlas
ON TEST: What is Lexicon Design
Lexicon Design is a set of patterns, rules, and behaviors that can be used by an implementation language such as clay. It is not an implementation on its own.
Senna.js
Liferay's SPA engine It handles client-side data while AJAX loads the page's content dynamically It also includes many key enhancements over basic SPAs like SEO and Bookmarking abilities
Lexicon Design Implementation: Clay
Liferay's web implementation of the Lexicon Experience Language which is Built on a bootstrap 4 foundation, translating LESS to SASS Comprised of HTML, CSS, and JavaScript
ON TEST: Theme Contributor Priority Syntax
Liferay-Theme-Contributor-Weight: [value] -- The higher the weight the higher the priority --
Four generators in the generator-liferay-theme package
Liferay-theme (create theme) Liferay-theme: import (import pre-existing liferay themes) Liferay-theme: layout (create layout templates) Liferay-theme: themelet (create themelets)
ON TEST: AMD Module Loader Syntax -- Loading a Module
Liferay.Loader.require('my -dialog', function(myDialog) { //YOUR CODE HERE }, function(error) { console.error(error); });
ON TEST: AMD Module Loader Syntax -- Defining a Module
Liferay.Loarder.define('my-dialog', ['my-node', 'my-plugin-base'], function(myNode, myPluginBase) { return { log: function(text) { console.log('module my-dialog: ' + text); } } }
Context Contributors
Like Theme Contributors, they're OSGi modules generated from Blade CLI or 3rd party software Use Context Contributors to access specific variables referring to specific component data AfterContext Contribuor is created, devs must add a unique package name in the module's `src` folder and create a new Java class in that package. Above the class declerator add a `@Component` statement
ON TEST: Liferay Theme Generator can Extend Themes (T/F)
False -- There is a gulp task to extend themes however the Liferay Theme Generator cannot extend themes
Syntax for adding portlet to themes
<@liferay_portlet["runtime"] instanceId="INSTANCE_gg7NjvVBU4sB" portletName="com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_gg7NjvVBU4sB" />
ON TEST: Setting an AUI column for to replicate a bootstrap col-6
<aui:col cssClass="col-6"> OR <aui:col width="50">
Liferay UI Icon syntax
<liferay-ui:icon image="subscribe" />
Liferay Icon list/menu/tabs syntax
<liferay-ui:icon-list[-menu][-tabs]> <liferay-ui:icon iconCssClass="icon-lock" message="permissions" method="get" url="<%= permissionsURL %>" useDialog="<%= true %>" /> </liferay-ui:icon-list>
Using a themelet in a particular theme
A Themelet must be installed in a theme in order to be used by that theme
ON TEST: Layout Templates can only be made with the Liferay Theme Generator (T/F)
False -- they can also be created through the IDE or command line
Classes Required for Layout Templates
Bootstrap grid classes (Ex: col-md-2) determines the percentage-based width of the element and defines the media query breakpoint for when this element expands to 100% width. portlet-column class: Required for all column containers. portlet-column-first class: When a row has more than one column the first column must have this class. portlet-column-last: Last column class portlet-column-only: If a row is made up of only one column, the column should be portlet-column-only
Globally Installed Themelets
Can be used by all liferay themes
Building with NPM SDK
Devs can create applications using Blade or the Liferay SDK Once the app is built, they package and deploy it with npm The AMD loader works with the platform to receive the npm packages that were bundled and deployed in the platform when a user accessed the app from their browser
ON TEST: Adding a Nav Portle
Each portlet which is registered has an lfr-widget-[name] tag that's used to embed it. For example: the Navigation Menu tag is <lfr-widget-nav />. You could embed it in a block like this: <div class="nav-widget"> <lfr-widget-nav> </lfr-widget-nav> </div>
Embedding Widgets
Embedding applications into the portal_normal.ftl file will render them on every site page
ON TEST: Themelets can use HTML, Javascript, and CSS (T/F)
False -- Themelets can only consist of Javascript and CSS
Page Fragment
Reusable bits of content created with HTML, CSS, and javascript. ______ can be created from scratch using the ______ Editor.
Single Page Applications
SPAs can cut down on load time by loading a single HTML page that's used to navigate thru the entire Site SPAs dynamically update a single HTML page as the User interacts with a site SPA functionality is enabled automatically in Liferay
Themelet
Small, extendable reusable piece of code that can be implemented by a theme. ON TEST: Must be visible globally in order to be used by all your Liferay themes. Must be installed in a theme in order to be used by that theme.
ON TEST: Soy can be used on the client side, server side, or both?
Soy can be used on both client and server side.
Three things that make up a layout column
The ID: A unique identifier for the column that matches the ID passed to @processor.processColumn The Process Column Variable: function necessary to render layouts, takes the css column ID and the list of CSS classes as its two arguments. The Bootstrap column classes: determine the size of each column in the 12-column grid system.
ON TEST: Components Included in the NPM SDK
The liferay-npm-bundler tool. The plugins for Babel contained in liferay-npm-build-tools. The plugins for liferay-npm-bundler contained in liferay-npm-build-tools. The frontend-js-loader-modules-extender OSGi bundle of the Portal. The Javascript AMD loader.
Application Display Templates
The main job of ADTs is to display dynamic data in markup They are created with FreeMarker and take advantage of the LIferay Template Editor Use the ADT API to add functionality to custom applications.
NPM SDK
The new NPM SDK will be useful for building custom applications using your front-end tools of choice This planned CLI allows front-end devs to design and build portlets, package, deploy, and integrate them with liferay NPM SDK actually refers to a variety of liferay components that can be bundled with NPM
Importing Metal.js Dependencies
To take advantage of ECMAScript features in Metal.js, devs can add a separate `es.js` file with ECMAScript code and include it in a theme's `main.js` file. To include it, add a require statement into main.js require( 'custom-theme/js/top_search.es', function(TopSearch) { New TopSearch.default(); } );
ON TEST: Themelets can be used in various themes to cut down on boiler plate code (T/F)
True
ON TEST: You can embed portlets in layout templates (T/F)
True
Site Initializers
WIP. Java modules that allow devs to: Create a site template that can be used to generate new sites with a theme Include Page Fragment resources will create the page structure Include a site template thumbnail
Types of Templates
Web Content Templates: Display content defined by Web Content Structures and can be created and managed from the Templates tab in Site Administration. Application Display Templates: Designate how default Liferay widgets and custom applications look and feel. Page Fragments: Allow Users to create reusable page components with HTML, CSS and Javascript that can be added onto Content pages.
Soy and JSX
Web components which work with Metal.js, but now that Metal.js is agnostic, not super needed.
The `document_library/documents/` folder ____
is where all the folders and files in the Documents and Media repository will be placed
The `journal` folder _____
is where web content can be included, like articles, structures and web content templates
ON TEST: $processor.processColumn's two parameters
the css column ID and the list of CSS classes as its two arguments <div class="col-md-8 col-sm-6 portlet-column portlet-column-last" id="column-2"> ${processor.processColumn("column-2", "portlet-column-content portlet-column-content-last")} </div>
