When we create a new portlet in Liferay, the folder structure is created as below:

/PORTLET-NAME/
    build.xml
    /docroot/
        /css/
        /js/
        /WEB-INF/
            /src/ (not created by default)
            liferay-display.xml
            liferay-plugin-package.properties
            liferay-portlet.xml
            portlet.xml
            web.xml
        icon.png
        view.jsp

So what is the use and need of the Configuration Files that are stored in the docroot/WEB-INF folder? I'm explaining here the features and use of these files:

1- docroot/WEB-INF/portlet.xml - The default content of portlet.xml is as below:

<portlet>
    <portlet-name>NewPortlet</portlet-name>
    <display-name>NewPortlet</display-name>
    <portlet-class>com.idsureity.NewPortlet</portlet-class>
    <init-param>
        <name>view-jsp</name>
        <value>/view.jsp</value>
    </init-param>
    <expiration-cache>0</expiration-cache>
    <supports>
        <mime-type>text/html</mime-type>
    </supports>
    <portlet-info>
        <title>NewPortlet</title>
        <short-title>NewPortlet</short-title>
        <keywords>NewPortlet</keywords>
    </portlet-info>
    <security-role-ref>
        <role-name>administrator</role-name>
    </security-role-ref>
    <security-role-ref>
        <role-name>guest</role-name>
    </security-role-ref>
    <security-role-ref>
        <role-name>power-user</role-name>
    </security-role-ref>
    <security-role-ref>
        <role-name>user</role-name>
    </security-role-ref>
</portlet>

portlet-name

The portlet-name element defines the name of the portlet. Each portlet name should be unique within the portlet application (that is, within the portlet plugin). This is also referred within Liferay Portal as the portlet id.

display-name

The display-name type defines a short name that is displayed by tools. This is used by display-name elements. The display name need not be unique.

portlet-class

The portlet-class element defines the Fully Qualified Name (FQN) of the portlet class. .

init-param

The init-param element specifies a name/value pair as an initialization parameter of the portlet.

expiration-cache

Expiration-cache defines expiration-based caching for this portlet. The parameter indicates the time in seconds after which the portlet output expires. -1 indicates that the output never expires.

supports

The supports element contains the supported mime-type. Supports also indicates the portlet modes a portlet supports for a specific content type. All portlets must support the view mode.

portlet-info

Portlet-info defines portlet information.

security-role-ref

The security-role-ref element defines the declaration of a security role reference in the code of the web application. In Liferay, the role-name defines which roles can access the portlet.

2- docroot/WEB-INF/liferay-portlet.xml - In this file we can define css, js files required for the portlet. We can also define whether a portlet is instanceable or not. Set the instanceable value to true if the portlet can appear multiple times on a page. If set to false, the portlet can only appear once on a page. The default value is false.

The default content of liferay-portlet.xml is as below:

<liferay-portlet-app>
    <portlet>
        <portlet-name>NewPortlet</portlet-name>
    <icon>/icon.png</icon>
    <instanceable>false</instanceable>
    <header-portlet-css>/css/main.css</header-portlet-css>
    <footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
    <css-class-wrapper>NewPortlet-portlet</css-class-wrapper>
    </portlet>
    <role-mapper>
        <role-name>administrator</role-name>
        <role-link>Administrator</role-link>
    </role-mapper>
    <role-mapper>
        <role-name>guest</role-name>
        <role-link>Guest</role-link>
    </role-mapper>
    <role-mapper>
        <role-name>power-user</role-name>
        <role-link>Power User</role-link>
    </role-mapper>
    <role-mapper>
        <role-name>user</role-name>
        <role-link>User</role-link>
    </role-mapper>
</liferay-portlet-app>

portlet-name

The portlet-name element defines the canonical name of the portlet. This needs to be the same as the portlet-name given in portlet.xml

icon

Path to icon image for this portlet

instanceable

Indicates if multiple instances of this portlet can appear on the same page or not.

header-portlet-css

The path to the .css file for this portlet to be included in the of the page

footer-portlet-javascript

The path to the .js file for this portlet, to be included at the end of the page before

3- docroot/WEB-INF/liferay-display.xml - This file describes what category the portlet should appear under in the Add menu in the dockbar.

For example

<display>
    <category name="category.sample">
        <portlet id="NewPortlet" />
    </category>
</display>

Here the NewPortlet portlet will be listed in Liferay under Sample category.

We can create our own category as needed.

<display>
    <category name="My Portlet">
        <portlet id="NewPortlet" />
    </category>
</display>

Here the NewPortlet portlet will be listed in Liferay under My Portlet category.

Hope this will help you :)