Portlet development JQuery and CSS

[jebedo]

Hi,

I am starter in developing portlets for GateIn. I managed to upload JSP portlet to GateIn and everything works fine,

but there is problem with calling external css and JS. I searched gatein community, google and documentation but with no help.

I tried with this line in JSP:

<link rel="stylesheet" href= "/web/skin/MySkin/css/thema/jquery-ui-1.8.12.custom.css" type="text/css" media="all" />
<link href="/portletname/WebContent/css/style.css" type="css">

First is pointing to gatein folder in exoResources and it works but it isnt good solution (also it calls all other default css). Second line doesnt work.

Then I tried this:

in gatein-resources.xml, in my portlet I put this:

<?xml version="1.0" encoding="UTF-8"?>
<gatein-resources>
<portlet-skin>
  <application-name>PORKL</application-name>
  <portlet-name>PORKL</portlet-name>
  <skin-name>OtherSkin</skin-name>
  <css-path>/css/style.css</css-path>
</portlet-skin> 
  <javascript>
        <param>
            <js-module>Jquery</js-module>
            <js-path>/js/jquery-1.5.1.min.js</js-path>
            <js-priority>10</js-priority>
        </param>
    </javascript>

Now I can select OtherSkin but this does nothing. Javascript works, it is called but for all pages in GateIn portal, and I want to only for my portlet.

Can someone plz explane how it is done? How to create portlet with unique style and JS?

Thanks and regards

[mvanco]

Hi Bosko,

I can't see your example codes in question, can you post it again please? Then we can help you with that.

It's possible to define unique style for portlet by defining portlet-skin in gatein-resources.xml.

If you'll define JS files in gatein-resources.xml, then it's added in head (separate files or merged file based on development parameter).

Let us know what is your goal, we can point you to some docs or examples.

Best regards,

Michal Vančo, JBoss QA

[jebedo]

Ok, my goal is to make single unique style which will be used only by one portlet. I did define it all in gatein-resources.xml (JS and CSS) in my project, but it didnt work.

So my structure looks like this:

PORKL (NameOfPortlet)

| .settings

| build

|src

| WebContent

     -|css

          -|OtherStyle.css

          -|images

     -|js

     -|jsp

          -|SomeJSP.jsp

     -|META-INF

     -|WEB-INF

          -|lib

          -|gatein-resources.xml

          -|portlet.xml

          -|web.xml

My JSP link hrefs are:

<link rel="stylesheet" href= "/web/skin/MySkin/css/thema/jquery-ui-1.8.12.custom.css" type="text/css" media="all" />

<link href="/PORKLAdmin/WebContent/css/OtherStyle.css" type="css">

In gatein-resources i have:

<gatein-resources>

<portlet-skin>

  <application-name>PORKL</application-name>

  <portlet-name>PORKL</portlet-name>

  <skin-name>OtherSkin</skin-name>

  <css-path>/css/OtherStyle.css</css-path>

</portlet-skin>

  <javascript>

        <param>

            <js-module>Jquery</js-module>

            <js-path>/js/jquery-1.5.1.min.js</js-path>

            <js-priority>10</js-priority>

        </param>

    </javascript>

            <javascript>

        <param>

            <js-module>JqueryUI</js-module>

            <js-path>/js/jquery-ui-1.8.12.custom.min.js</js-path>

            <js-priority>10</js-priority>

        </param>

    </javascript>

</gatein-resources>

So my Javascripts are loaded but, in all pages on portal. How can I have them loaded only in my page/portlet?

Again thank you on your reply,

Best regards,

Bosko

[jebedo]

Update:

This (<link rel="stylesheet" href= "/web/css/thema/jquery-ui-1.8.12.custom.css" type="text/css" media="all" />) seems to work, but first I have to put CSS in portal directory then deploy portlet. Is there better solution than this?

[kien_nguyen]

I see your configuration in gatein-resource.xml:

<portlet-skin>

  <application-name>PORKL</application-name>

  <portlet-name>PORKL</portlet-name>

  <skin-name>OtherSkin</skin-name>

  <css-path>/css/OtherStyle.css</css-path>

</portlet-skin>

Why is OtherSkin, do you have OtherSkin in GateIn?

GateIn only have two skins: Default and SimpleSkin.

Alternative solution by programming, you can use feature MARKUP_HEAD_ELEMENT header of JSR-286, it's supported by GateIn.

[marantis]

Portlet development JQuery and CSS

The answer for your Problem can be found here

=> https://community.jboss.org/wiki/JQueryPortlet