Hey guys! Ever wanted to dive into creating a full-fledged CRUD (Create, Read, Update, Delete) application within Liferay using the MVC portlet framework? Well, you're in the right spot! This article will walk you through building a practical example, ensuring you grasp the fundamental concepts and can apply them to your own Liferay projects. Let's get started and make some magic happen!

    Understanding Liferay MVC Portlets

    Before we jump into the code, let's get a clear understanding of what Liferay MVC portlets are all about. MVC, which stands for Model-View-Controller, is a design pattern that separates an application into three interconnected parts. This separation makes your code more organized, maintainable, and easier to test. In Liferay, MVC portlets leverage this pattern to build modular and reusable components.

    • Model: This represents the data of your application. Think of it as the information you're working with – like user details, product information, or blog posts. The model is responsible for managing and storing this data. It doesn't care about how the data is displayed; it just focuses on the data itself.
    • View: This is what the user sees! It's the presentation layer, responsible for displaying the data from the model. In Liferay, the view is typically a JSP (JavaServer Pages) file. The view receives data from the controller and renders it in a user-friendly format.
    • Controller: This acts as the intermediary between the model and the view. It receives user input, processes it, interacts with the model to fetch or update data, and then passes the data to the view for display. In Liferay MVC portlets, the controller is a Java class that extends MVCPortlet.

    When a user interacts with a portlet, the request goes to the controller. The controller then decides what to do. If the user is trying to view some data, the controller might fetch that data from a database (via the model) and then send it to the view to be displayed. If the user is submitting a form, the controller will validate the data, update the model, and then perhaps redirect the user to a different view.

    Liferay's MVC framework provides a structured way to handle these interactions, making it easier to build complex portlets. By separating concerns, you can modify one part of the application without affecting the others. For example, you could change the way data is displayed (the view) without having to touch the code that handles the data itself (the model or controller).

    Furthermore, Liferay MVC portlets seamlessly integrate with Liferay's features like permissions, user management, and themes. This means you can easily control who can access your portlet and how it looks. This is a huge advantage, as you don't have to reinvent the wheel for common tasks. You can focus on building the specific functionality of your portlet, knowing that Liferay provides the underlying infrastructure.

    Setting Up Your Liferay Development Environment

    Alright, before we write a single line of code, let's make sure your development environment is ready to rock! Here’s what you’ll need:

    1. Liferay Installation: You need a running instance of Liferay. Download the latest version from the Liferay website and follow the installation instructions. Make sure it’s up and running. It's the foundation of our project.
    2. JDK (Java Development Kit): Ensure you have a compatible JDK installed. Liferay usually specifies a minimum JDK version, so check the documentation for your Liferay version. Without a JDK, you can't compile and run Java code!.
    3. IDE (Integrated Development Environment): Choose your favorite IDE. Eclipse and IntelliJ IDEA are popular choices. I personally love IntelliJ, but Eclipse with the Liferay IDE plugin works great too. Configure your IDE to work with your Liferay installation. This usually involves setting up the Liferay server in your IDE.
    4. Liferay Workspace: Create a Liferay Workspace. This is where your portlet projects will live. You can create one using the Liferay command-line tool (blade) or through your IDE. Think of it as a dedicated folder for all your Liferay-related projects.

    Once you have these components set up, you’re ready to create your first Liferay MVC portlet. Make sure everything is correctly configured before moving on, as this will save you a lot of headaches later. A well-configured environment is half the battle!

    Creating the MVC Portlet Project

    Now for the fun part – creating the actual portlet project! We'll use Liferay's Blade CLI to make this process super smooth. Open your terminal or command prompt, navigate to your Liferay Workspace, and run the following command:

    blade create -t mvc-portlet -n my-crud-portlet -p com.example.crud

    Let's break down this command:

    • blade create: This tells Blade to create a new project.
    • -t mvc-portlet: This specifies that we want to create an MVC portlet.
    • -n my-crud-portlet: This sets the name of our portlet to "my-crud-portlet". Feel free to change this to something more descriptive.
    • -p com.example.crud: This sets the package name for our portlet. Make sure to use a unique package name for your projects.

    After running this command, Blade will generate a new folder named my-crud-portlet in your Liferay Workspace. This folder contains all the necessary files for your portlet, including the Java controller, JSP views, and configuration files.

    Import this project into your IDE. If you’re using Eclipse with the Liferay IDE plugin, you can simply import it as an existing Liferay project. If you’re using IntelliJ IDEA, you can import it as a Gradle project. Your IDE will recognize it as a Liferay module and handle the dependencies automatically.

    Once the project is imported, you'll see a structure like this:

    my-crud-portlet/
├── src/
│   ├── main/
│   │   ├── java/
│   │   │   └── com/
│   │   │       └── example/
│   │   │           └── crud/
│   │   │               └── MyCrudPortlet.java
│   │   └── resources/
│   │       └── content/
│   │           └── language.properties
│   └── webapp/
│       └── view.jsp
├── bnd.bnd
├── build.gradle
└── gradle.properties

    The MyCrudPortlet.java file is your main controller, view.jsp is the default view, and language.properties is used for localization. The bnd.bnd and build.gradle files are used for building and deploying the portlet. This structure is standard for Liferay MVC portlets and provides a clear separation of concerns.

    Now that you have your project set up, let's start implementing the CRUD operations.

    Implementing the CRUD Operations

    Okay, let's get our hands dirty with some code! We'll start by defining our data model, then implement the CRUD operations in the controller, and finally create the views to display and interact with the data.

    Defining the Data Model

    First, let's create a simple Java class to represent our data model. For this example, we'll use a Product class with the following attributes: id, name, description, and price. Create a new class named Product.java in the com.example.crud.model package (you might need to create the model package first):

    package com.example.crud.model;

public class Product {
    private long id;
    private String name;
    private String description;
    private double price;

    public Product() {
    }

    public Product(long id, String name, String description, double price) {
        this.id = id;
        this.name = name;
        this.description = description;
        this.price = price;
    }

    // Getters and setters for all attributes
    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }
}

    This class represents a simple product with basic information. You can add more attributes as needed for your specific use case. Make sure to include getters and setters for all attributes, as they will be used to access and modify the data. Also, the Product object is used as the data transfer object.

    Implementing the Controller Logic

    Now, let's modify the MyCrudPortlet.java file to handle the CRUD operations. We'll need to add methods to create, read, update, and delete products. We'll also need a way to store the products, so let's use a simple ArrayList for now. In a real-world application, you would typically use a database to store the data.

    Here's the updated MyCrudPortlet.java file:

    package com.example.crud;

import com.example.crud.model.Product;
import com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet;
import com.liferay.portal.kernel.util.ParamUtil;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.portlet.ActionRequest;
import javax.portlet.ActionResponse;
import javax.portlet.Portlet;
import javax.portlet.PortletException;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import javax.servlet.http.HttpServletRequest;

import org.osgi.service.component.annotations.Component;

/**
 * @author you
 */
@Component(
        immediate = true,
        property = {
                "com.liferay.portlet.display-category=category.sample",
                "com.liferay.portlet.header-portlet-css=/css/main.css",
                "com.liferay.portlet.instanceable=true",
                "javax.portlet.display-name=MyCrudPortlet",
                "javax.portlet.init-param.template-path=/",
                "javax.portlet.init-param.view-template=/view.jsp",
                "javax.portlet.name=com_example_crud",
                "javax.portlet.resource-bundle=content.Language",
                "javax.portlet.security-role-ref=power-user,user"
        },
        service = Portlet.class
)
public class MyCrudPortlet extends MVCPortlet {

    private List<Product> products = new ArrayList<>();

    @Override
    public void render(RenderRequest renderRequest, RenderResponse renderResponse) throws IOException, PortletException {
        renderRequest.setAttribute("products", products);
        super.render(renderRequest, renderResponse);
    }

    public void addProduct(ActionRequest actionRequest, ActionResponse actionResponse) throws IOException {
        String name = ParamUtil.getString(actionRequest, "name");
        String description = ParamUtil.getString(actionRequest, "description");
        double price = ParamUtil.getDouble(actionRequest, "price");

        long id = products.size() + 1; // Simple ID generation
        Product product = new Product(id, name, description, price);
        products.add(product);

        actionResponse.sendRedirect(actionRequest.getContextPath());
    }

    public void deleteProduct(ActionRequest actionRequest, ActionResponse actionResponse) throws IOException {
        long productId = ParamUtil.getLong(actionRequest, "productId");

        products.removeIf(product -> product.getId() == productId);

        actionResponse.sendRedirect(actionRequest.getContextPath());
    }

    public void editProduct(ActionRequest actionRequest, ActionResponse actionResponse) throws IOException, PortletException {
        long productId = ParamUtil.getLong(actionRequest, "productId");
        Product product = null;

        for(Product prod : products) {
            if(prod.getId() == productId) {
                product = prod;
                break;
            }
        }

        actionRequest.setAttribute("product", product);
        actionResponse.setRenderParameter("mvcPath", "/edit.jsp");
    }

    public void updateProduct(ActionRequest actionRequest, ActionResponse actionResponse) throws IOException {
        long id = ParamUtil.getLong(actionRequest, "id");
        String name = ParamUtil.getString(actionRequest, "name");
        String description = ParamUtil.getString(actionRequest, "description");
        double price = ParamUtil.getDouble(actionRequest, "price");

        for(Product product : products) {
            if(product.getId() == id) {
                product.setName(name);
                product.setDescription(description);
                product.setPrice(price);
                break;
            }
        }

        actionResponse.sendRedirect(actionRequest.getContextPath());
    }


}

    Creating the Views (JSP Files)

    Finally, let's create the JSP files to display the products and handle user input. We'll need a view.jsp to display the list of products and a form to add new products. We'll also create edit.jsp to handle the product editing.

    Create the edit.jsp file to edit product.

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />

<portlet:actionURL name="updateProduct" var="updateProductURL" />

<c:set var="product" scope="request" value="${requestScope.product}" />

<form action="${updateProductURL}" method="POST">
    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}">
    <input type="hidden" name="id" value="${product.id}">

    Name: <input type="text" name="name" value="${product.name}"><br>
    Description: <input type="text" name="description" value="${product.description}"><br>
    Price: <input type="text" name="price" value="${product.price}"><br>

    <button type="submit">Update</button>
</form>

<portlet:renderURL var="viewURL">
    <portlet:param name="mvcPath" value="/view.jsp" />
</portlet:renderURL>

<a href="${viewURL}">Back to list</a>

    Deploying and Testing the Portlet

    With all the code in place, it's time to deploy and test our portlet! In your IDE, right-click on the project and select "Gradle -> build" to build the portlet. Then, select "Gradle -> deploy" to deploy it to your Liferay instance. This will package your portlet into a .war file and copy it to Liferay's deploy folder.

    Once the portlet is deployed, you should see it in the Liferay admin panel under "Apps -> Apps Manager". You can then add it to a page to test it out. Make sure to refresh the page after deploying the portlet.

    Test the CRUD operations by adding, editing, and deleting products. Verify that the data is displayed correctly and that the changes are persisted. If you encounter any issues, check the Liferay logs for error messages and debug your code accordingly. Debugging is a crucial part of the development process, so don't be afraid to use breakpoints and step through your code.

    Conclusion

    Congratulations! You've successfully built a Liferay MVC portlet with CRUD operations. This is a basic example, but it demonstrates the fundamental concepts and provides a foundation for building more complex portlets. Remember to use a database for persistent storage and implement proper error handling and validation in your production applications. Keep practicing and experimenting, and you'll become a Liferay portlet development pro in no time! Remember that a robust and well-designed portlet can greatly enhance the functionality and user experience of your Liferay platform. Keep exploring Liferay's capabilities and building awesome portlets!

Lastest News