5 Replies Latest reply on Jan 11, 2012 12:00 PM by D. Marantis

    Portlet development JQuery and CSS

    Bosko Savic Newbie

      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

        • 1. Re: Portlet development JQuery and CSS
          Michal Vanco Newbie

          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

          • 2. Re: Portlet development JQuery and CSS
            Bosko Savic Newbie

            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

            • 3. Re: Portlet development JQuery and CSS
              Bosko Savic Newbie

              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?

              • 4. Re: Portlet development JQuery and CSS
                kien nguyen Newbie

                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.