Category: Liferay 7

February 14, 2023

Step by step guide to create a theme in liferay with Angular Material UI

Liferay theme is a collection of files that define the look and feel of a Liferay portal instance. It includes files such as CSS, JavaScript, images, and templates that control the presentation and layout of the portal’s pages, as well as its overall styling and behavior.

Themes in Liferay can be customized and created from scratch to meet specific design requirements, or they can be based on pre-built templates that are available from the Liferay community or commercial sources. They can also be applied to individual sites or globally to affect the appearance of the entire portal.

In addition to providing a consistent and visually appealing user interface, Liferay themes can also improve the accessibility and usability of a portal, enhance its branding and identity, and help to create a seamless and engaging user experience for visitors and users.

What is Angular Material UI and how it can help building a better UI (User Interface) ?

Material UI is a popular user interface (UI) library for building web applications using Angular, a JavaScript library for building user interfaces. Material UI provides a set of pre-built UI components that follow Google’s Material Design guidelines, which is a design language for creating intuitive and engaging user experiences across platforms and devices.

The library includes components for common UI elements such as buttons, forms, dialogs, navigation, and more. It also provides support for responsive design, accessibility, and internationalization.

Material UI can help to speed up the development process by providing a consistent and visually appealing set of UI components that can be easily customized to fit specific design requirements. It is also widely used and supported by a large community, with regular updates and improvements being made to the library.

Here’s an example of creating Liferay theme with Angular Material UI

1. Create an Angular application using the Angular CLI:

ng new my-app

2. Add Angular Material and the Liferay theme dependencies to the Angular project:

ng add @angular/material
npm install --save-dev liferay-theme-deps liferay-theme-tasks

3. Use the Liferay Theme Generator to generate a base Liferay theme for Angular, and select Angular Material as the UI framework:

yo liferay-theme:import --includeAngular --includeJSP --includeSass --framework=material

4. Customize the theme as needed by modifying the Angular code and using the Liferay theme configuration files. For example, you can modify the styles in the _custom.scss file:

@import "node_modules/@angular/material/theming";
@import "node_modules/liferay-font-awesome-web/css/font-awesome.min.css";

@include mat-core();

// Define your custom theme
$liferay-theme-primary: mat-palette($mat-deep-purple);
$liferay-theme-accent: mat-palette($mat-amber, 600, 800, A200);
$liferay-theme-warn: mat-palette($mat-red);

$liferay-theme-theme: mat-light-theme($liferay-theme-primary, $liferay-theme-accent, $liferay-theme-warn);

// Include Material Design icons from the icon font
$md-icon-font-path: "~@angular/material/prebuilt-themes/indigo-pink/"; // adjust path to match your setup
@import "~@angular/material/prebuilt-themes/indigo-pink/prebuilt-themes.css";

5. Use Angular Material’s theming capabilities to customize the look and feel of the UI components. For example, you can change the color scheme of a button:

<button mat-raised-button color="primary">My Button</button>

6. Build the theme using the Liferay theme tasks and deploy it to your Liferay instance:

gulp build
gulp deploy

Note that this is just a basic example and there are many other customization options available for both Liferay and Angular Material. Also, make sure to check the official documentation and best practices for each technology to ensure proper usage.

February 9, 2023

What’s new in liferay 7?

Liferay 7 was a major release that introduces several new features and improvements over previous versions of Liferay.

Here are some of the notable new features in Liferay 7:
  1. Modular architecture: It will allows developers to build and deploy individual components as separate modules with modular architecture. This makes it easier to develop, test, and deploy Liferay components.
  2. React-based UI: Liferay 7 introduces a new UI framework built with React, a popular JavaScript library for building user interfaces. The new UI framework provides a modern, responsive, and intuitive user experience.
  3. Content Management System (CMS): Liferay 7 includes a new CMS that provides an intuitive and easy-to-use interface for managing content, pages, and sites. The CMS allows users to create and manage content without the need for technical skills.
  4. Personalized experiences: Liferay 7 introduces features for creating personalized experiences for users based on their preferences, behaviors, and interests. This includes features for segmenting and targeting audiences, and for personalizing the content and layout of pages.
  5. Improved performance: Liferay 7 includes faster page loading times, improved scalability, and reduced resource utilization.
  6. Improved security: Liferay 7 includes several security improvements, including support for OAuth2 and OpenID Connect, improved password policies, and enhanced access control.
  7. Microservices support: Liferay 7 includes support for building and deploying microservices, which are small, independent, and modular components that can be deployed and managed separately. This allows developers to build and deploy Liferay components as microservices, making it easier to manage and scale their applications.

These are just some of the new features and improvements in Liferay 7. If you are considering upgrading to Liferay 7, it is important to carefully evaluate your specific needs and requirements, and to consult with an expert in Liferay development.

September 3, 2017

Angular 4 integration with Liferay DXP and Firebase

Angular and Firebase seed

A simple starter project demonstrating the basic concepts of Angular and Firebase integration.

Firebase

Firebase helps to build better Realtime Web Application and mobile apps for all the platforms to grow your business.

It provides the functionality like Realtime databases, Analytic, Cloud Messaging and Crash Reporting so we can move quickly and focus on our users. We can also test and deploy our application on Firebase Hosting With Free SSL Certificate. We can use Firebase on client-side app developers (both web & mobile)

Before installing the Firebase, First of all, we need to make sure that below mention software installed properly with appropriate version as mentioned below.

Getting Started

  • Make sure you have node.js installed version 6+
  • Make sure you have NPM installed version 3.9+
  • Deploy using gradle or Eclipse Liferay tools

Install

Run this command in same project directory

npm install

Setting up the Project

  • Create a project in the Console.
  • Click to Create New Project.
  • If you already have a project, click Add App from the project overview page.
  • Click to “Add Firebase” to your web app.
  • Note the initialization code snippet, which you will need to replace in environment.ts file.

src\main\resources\META-INF\resources\enviroments – sample code

  // Initialize
  // TODO: Replace with your project's customized code snippet
  production: false,
  firebase : {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);

Angular and Liferay DXP Github Code

February 24, 2017

Liferay 7 DXP Tops Google Trends

Liferay 7 DXP Scale is based on the average worldwide traffic in one year. Awesome!

Recently released Liferay 7 DXP (Liferay Digital Experience Platform) saves the scale of graph in google trends.

Benefits

  • Single, consolidated platform
  • Securely handle private data
  • Easy-to-use interfaces
  • Microservices architecture
  • Easy to integrate and customize
  • Front-end developers can use any popular framework they like (Angular,React)

Liferay trend on google before releasing Liferay 7

February 19, 2017

How to create a theme in Liferay 7 DXP

Here is the list of software that required to create liferay 7 DXP theme

  1. NodeJS – for yomen,gulp and generator-liferay-theme
  2. Ruby Installed – Ruby is to create SaSS and Compass CSS elements
  3. Yo – Node JS plugin
  4. Gulp – Node JS Plugin

Installing Node and NPM

First we need to download and install the node if you have already installed and configured Node, feel free to skip this section. We can download Node.js from http://nodejs.org and follow the instructions mentioned here:

Download the installer for your operating system from http://nodejs.org/. Nodejs provides different installer as per your platform. It also include the npm package manager

  •  If the installation asks for the system restart, then restart your computer.
  • Once the system is restarted, we can check whether Node.js was set up properly or not.
  •  Open the command prompt and run the following command to make sure you are installing latest version:
    • node –version // to verify the version

Configure the NPM Path and environment

After NodeJS installation we need to configure the NPM path. we will create .npmrc config file and set manually npm-packages path to keep these plugins at one directory.

Create .npmrc file at user Home directory C:/User/{user-name} with below parameters:

prefix=C:/Users/harmeet.singh/.npm-packages
NPM_PACKAGES=C:/Users/harmeet.singh/.npm-packages
NODE_PATH=%NODE_PATH%:%NPM_PACKAGES%/lib/node_modules

Now we need to install yomen and gulp plugin by giving below command:

  • npm install -g yo
  • npm install -g gulp

Ruby Installation

Now we need to install ruby sass and compass.

Then run the below command with gem keyword such as (gem sources -r https://rubygems.org):

  • sources -r https://rubygems.org
  • sources -a http://rubygems.org
  • install sass compass

Steps for creating a theme in Liferay 7 DXP

  • Create one folder in your local drive where you want to create your theme.
  • Now open the cmd in same folder
  • Next run this command —yo liferay-theme

  • Enter your Theme name “My First Liferay 7 Theme (no need to give “-” between spaces) press enter
  • Next —-enter (it will ask you..would you like to use as ID)
  • Then select liferay theme version 7.0 or 6.2
  • Next — enter the path of app server directory
  • then enter the URL of your site – http://localhost:8080

Now we need to update the theme package.json to use Ruby SaSS and Compass by default it use Node SaSS:

  • Edit package.json in you theme directory folder and set rubySass to true
  • templateLanguage to vm (by default it set to “ftl”)

We have change vm in liferay-look-and-feel.xml file because you will get below error: SERVLET_CONTEXT_/templates/portal_normal.ftl does not exist

Run gulp build to build the theme

Note: if you get the below error while build your theme:

Starting ‘build:compile-ruby-sass’…
error build/_css/aui/lexicon/lexicon-base/mixins/_nameplates.scss (Line 14: Invalid CSS after “(max-width: “: expected expression (e.g. 1px, bold), was “$screen-xs-max)”)

To solve this error do this:

edit the file “\theme-folder\node_modules\liferay-frontend-theme-unstyled\css\aui\lexicon\lexicon-base\_nameplates.scss” and comment below code:

//.nameplate-label-autofit-xs-max {
// @include nameplate-label-autofit('max-width: $screen-xs-max');
//}

Run gulp build deploy again to deploy your theme and start your development

Note:  Make sure your are connected with internet while creating theme.