Build Liferay Theme using maven sdk

We can create theme also using Maven sdk . but the main focus should be on the folder structure, as we have seen the folder structure of the maven project and plugin sdk project is different. there is some difference in theme project structure also. if we see in plugin sdk theme we have a _diff folder where we are keeping the file which we will modify based on our requirement, but in maven sdk you will not find any _diff folder in the project structure. the project structure is straight forward and simple where we can keep our files and the files will merge with parent theme files at the time of packaging of war file. there are some goals perform this activity, that goals you can find in pom.xml build configuration.

In order to create a theme using maven sdk only you need to change the archetype selection and after project creation the folder structure will be different form other plugin project. you can find the article for creating portlet pulgin also here.

These are the steps for creating the liferay theme in maven sdk.

Step 1. Start the wizard for creating the new maven project. Click on next.

Step 2. Select the liferay-theme-archetype archetype and apropriate version. (I am using 6.2.0-RC5). Click on Next button.

Image may be NSFW.
Clik here to view.
If you are not finding this archetype in your list then update your archetype or follow this article.

Step 3. provide the project information and click on finish button.

Image may be NSFW.
Clik here to view.

Step 4. Now your project is created see the project structure below.

Image may be NSFW.
Clik here to view.

Step 5. we need to provide some properties to pom.xml. eg. liferay version, deployment dir theme parent, theme type etc. here i am using classic theme as a perent theme because it is easier to create the theme if classic theme is parent theme in liferay 6.2,  we can use some of the theme as parent theme (classic, _styled, _unstyled and control_panel). then the pom properties will look like given below.

    <properties>
        <liferay.theme.parent>classic</liferay.theme.parent>
        <liferay.theme.type>vm</liferay.theme.type>
        <liferay.version>6.2.0-RC5</liferay.version>
        <liferay.auto.deploy.dir>D:/Personal work/sandbox/liferay-portal-6.2.0-ce-ga1/deploy</liferay.auto.deploy.dir>
        <liferay.maven.plugin.version>6.2.0-RC5</liferay.maven.plugin.version>
        <liferay.app.server.lib.global.dir>D:/Personal work/sandbox/liferay-portal-6.2.0-ce-ga1/tomcat-7.0.42/lib/ext</liferay.app.server.lib.global.dir>
    </properties>

now the complete pom.xml file lookes like given below.

<?xml version="1.0"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.test</groupId>
    <artifactId>test-theme</artifactId>
    <packaging>war</packaging>
    <name>test-theme Theme</name>
    <version>0.0.1-SNAPSHOT</version>
    <build>
        <plugins>
            <plugin>
                <groupId>com.liferay.maven.plugins</groupId>
                <artifactId>liferay-maven-plugin</artifactId>
                <version>${liferay.maven.plugin.version}</version>
                <executions>
                    <execution>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>theme-merge</goal>
                            <goal>build-css</goal>
                            <goal>build-thumbnail</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <autoDeployDir>${liferay.auto.deploy.dir}</autoDeployDir>
                    <appServerDeployDir>${liferay.app.server.deploy.dir}</appServerDeployDir>
                    <appServerLibGlobalDir>${liferay.app.server.lib.global.dir}</appServerLibGlobalDir>
                    <appServerPortalDir>${liferay.app.server.portal.dir}</appServerPortalDir>
                    <liferayVersion>${liferay.version}</liferayVersion>
                    <parentTheme>${liferay.theme.parent}</parentTheme>
                    <pluginType>theme</pluginType>
                    <themeType>${liferay.theme.type}</themeType>
                </configuration>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <version>2.5</version>
                <configuration>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <dependencies>
        <dependency>
            <groupId>com.liferay.portal</groupId>
            <artifactId>portal-service</artifactId>
            <version>${liferay.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.liferay.portal</groupId>
            <artifactId>util-bridges</artifactId>
            <version>${liferay.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.liferay.portal</groupId>
            <artifactId>util-taglib</artifactId>
            <version>${liferay.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.liferay.portal</groupId>
            <artifactId>util-java</artifactId>
            <version>${liferay.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.portlet</groupId>
            <artifactId>portlet-api</artifactId>
            <version>2.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.4</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.0</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
    <properties>
        <liferay.theme.parent>classic</liferay.theme.parent>
        <liferay.theme.type>vm</liferay.theme.type>
        <liferay.version>6.2.0-RC5</liferay.version>
        <liferay.auto.deploy.dir>D:/Personal work/sandbox/liferay-portal-6.2.0-ce-ga1/deploy</liferay.auto.deploy.dir>
        <liferay.maven.plugin.version>6.2.0-RC5</liferay.maven.plugin.version>
        <liferay.app.server.lib.global.dir>D:/Personal work/sandbox/liferay-portal-6.2.0-ce-ga1/tomcat-7.0.42/lib/ext</liferay.app.server.lib.global.dir>
    </properties>
</project>

Step 6. Add the respective folders in the project to add the css, js, images and templates files see screen below.

Image may be NSFW.
Clik here to view.

 As you don’t know which file need to be added in css, images, js and templates folder. so without doing anything after Step 6 build your project. then maven will build the theme. and in the target folder you will find the complete structure and files of parent theme. which you can copy in the respective folder and modify it based on your requirement see screen below.

Image may be NSFW.
Clik here to view.

 

Step 7. I think as you are aware of liferay theme development and important files need to be modify, as per your requirement modify or add the css, js, images and template to your project and build the theme.

 

Thanks

 

The post Build Liferay Theme using maven sdk appeared first on CodingLoading.