11 Replies Latest reply on Aug 29, 2013 10:40 PM by vstorm83

    Custom JS and CSS for portlet

    abdulbasitmughal

      I want to change the display of content in portlet through custom CSS and JQuery in portlet pages using GateIn 3.6. I have tried two ways to achive this

       

      1st: I have tried the help avaiable at https://community.jboss.org/wiki/JQueryPortlet/diff but getting this message in eclipse

      css.png

      It ask to configure build path but here i dont know what it should be?

       

      2nd: I have tried the help available at https://docs.jboss.org/author/display/GTNPORTAL36/Custom+Skin+for+a+Portlet and changed my gatein-resources file and placed js and css files in specific folders

       

      <gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

           xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"

           xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">

       

           <!-- GateIn will load this CSS for HomePagePortlet instead of the default one. -->

           <portlet-skin>

               <!--

                   The name of the web application containing the portlet.xml file in which

                   BannerPortlet is definded. The application name is usually the same as

                   the name of the WAR through which the application was deployed.

               -->

               <application-name>simplest-hello-world-portlet</application-name>

               <!-- <portlet-name> value from the portlet.xml referenced above -->

               <portlet-name>SimplestHelloWorldPortlet</portlet-name>

               <skin-name>Default</skin-name>

               <css-path>WEB-INF/css/style.default.css</css-path>

           </portlet-skin>

       

           <portlet>

              <name>simplest-hello-world-portlet</name>

              <scripts>

                  <script>

                      <path>/jquery.js</path>

                  </script>

              </scripts>

           </portlet>

       

      </gatein-resources>

       

      But found exceptions

       

      12:50:14,095 INFO  [org.gatein.integration.jboss.as7.deployment.PortletBridgeDependencyProcessor] (MSC service thread 1-6) Adding JBoss Portlet Bridge 3.2.1.Final to "simplest-hello-world-portlet.war"

      12:50:14,114 ERROR [org.exoplatform.web.application.javascript.JavascriptConfigDeployer] (MSC service thread 1-1) An error occurs while registering 'Javascript in gatein-resources.xml' from the context 'null': java.lang.IllegalArgumentException: The context name cannot be null

              at org.exoplatform.container.definition.PortalContainerConfig.getPortalContainerNames(PortalContainerConfig.java:502) [exo.kernel.container-2.4.3-GA.jar:2.4.3-GA]

              at org.exoplatform.container.PortalContainer.addInitTask(PortalContainer.java:474) [exo.kernel.container-2.4.3-GA.jar:2.4.3-GA]

              ...

       

      12:50:14,123 ERROR [org.exoplatform.portal.resource.GateInSkinConfigDeployer] (MSC service thread 1-1) An error occurs while registering '/WEB-INF/gatein-resources.xml' from the context 'null': java.lang.IllegalArgumentException: The context name cannot be null

              at org.exoplatform.container.definition.PortalContainerConfig.getPortalContainerNames(PortalContainerConfig.java:502) [exo.kernel.container-2.4.3-GA.jar:2.4.3-GA]

              at org.exoplatform.container.PortalContainer.addInitTask(PortalContainer.java:474) [exo.kernel.container-2.4.3-GA.jar:2.4.3-GA]

              at org.exoplatform.portal.resource.GateInSkinConfigDeployer.onEvent(GateInSkinConfigDeployer.java:83) [exo.portal.component.web.resources-3.6.0.Final.jar:3.6.0.Final]

              ...

       

      Please guide me what it should be, is it a correct way or is there any other way to achive this functionality?

       

      Thanks in advance for your cooperation in this regard.

        • 1. Re: Custom JS and CSS for portlet
          mwringe

          Usually the "The context name cannot be null" exception occurs because there isn't a <display-name> set in the web.xml. I don't know why the optional display-name has to be added for this to work, but it usually fixes this error.

          • 2. Re: Custom JS and CSS for portlet
            abdulbasitmughal

            Thanks Matt.. After setting <display-name> in the web.xml, i am able to resolve the exceptions but found another issue "css file not found". I did the following steps

             

            Step 1: Added following code into web.xml

            <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

                    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

                    version="2.5">

             

               <display-name>SimplestHelloWorldPortlet</display-name>

             

               <filter>

                    <filter-name>ResourceRequestFilter</filter-name>

                    <filter-class>

                        org.exoplatform.portal.application.ResourceRequestFilter

                    </filter-class>

                </filter>

                <filter-mapping>

                    <filter-name>ResourceRequestFilter</filter-name>

                    <url-pattern>/*</url-pattern>

                </filter-mapping>

             

            </web-app>

            Step 2: Added the following code into gatein-resources.xml

            <gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

                 xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"

                 xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">

             

                 <!-- GateIn will load this CSS for HomePagePortlet instead of the default one. -->

                 <portlet-skin>

             

                     <application-name>simplest-hello-world-portlet</application-name>

                     <!-- <portlet-name> value from the portlet.xml referenced above -->

                     <portlet-name>SimplestHelloWorldPortlet</portlet-name>

                     <skin-name>DefaultSkin</skin-name>

                     <css-path>/css/style.default.css</css-path>

                 </portlet-skin>

                 <!--

                 <portlet>

                    <name>simplest-hello-world-portlet</name>

                    <scripts>

                        <script>

                            <path>/jquery.js</path>

                        </script>

                    </scripts>

                 </portlet>

                  -->

            </gatein-resources>

             

            Step 3: Change the skin to DefaultSkin from gatein interface and loaded the portlet page

             

            Found the errors on cmd

            10:06:26,249 WARN  [org.exoplatform.portal.resource.MainResourceResolver] (http--127.0.0.1-8080-18) Could not resolve /simplest-hello-world-portlet resource for path /simplest-hello-world-portlet/css/style.default.css

            10:06:26,250 ERROR [portal.SkinService] (http--127.0.0.1-8080-18) Not found <CSS FILE>, the path /simplest-hello-world-portlet/css/style.default.css is invalid, SkinService could not load the skin /simplest-hello-world-portlet/css/style.default.css

            10:06:26,251 WARN  [org.exoplatform.portal.resource.SkinResourceRequestHandler] (http--127.0.0.1-8080-18) CSS /simplest-hello-world-portlet/css/style.default.css not found

            In Firebug (Mozilla Firefox) found these errors

            404 Not Found http://localhost:8080/portal/skins/3.6.0.Final/simplest-hello-world-portlet/css/style.default-lt.css

            While the CSS files are placed in webapp/css. Same scene with JS files. Please guide me, where these files should be? or is there any missing configurations?

            • 3. Re: Custom JS and CSS for portlet
              mwringe

              its probably because your display-name and application-name are not matching. Can you change you display name to simplest-hello-world-portlet instead of SimplestHelloWorldPortlet (or change the application-name reference to SimplestHelloWorldPortlet)?

               

              There is a really simple example portlet here which has its own css using gatein-resources.xml if you want to take a look at a working example: https://github.com/gatein/gatein-portal/tree/master/mobile-integration/portlets/banner

              • 4. Re: Custom JS and CSS for portlet
                abdulbasitmughal

                Many thanks Matt ... I did changes as per your suggestions and css related issues have been resolved.

                 

                One last question: Can we remove the default css and javascript files from page header?

                 

                Thanks again

                • 5. Re: Custom JS and CSS for portlet
                  mwringe

                  One last question: Can we remove the default css and javascript files from page header?

                   

                   

                  What css and js files are you trying to removed, and why do you need them removed?

                  • 6. Re: Custom JS and CSS for portlet
                    abdulbasitmughal

                    I have attached the screen short for your refference. Actually i want to design my own interface completely and want to avoid any type of javascript conflicts. I have noticed that JQuery and bootstrap is already loaded.

                     

                    customInterface.jpg

                    • 7. Re: Custom JS and CSS for portlet
                      mwringe

                      Please see the documentation on how to load js modules in Gatein. Your own portlets can have a different version of jquery or other javascript libraries than what Gatein uses internally. Modifying the javascript libraries globally may break things in the main GateIn parts.

                      1 of 1 people found this helpful
                      • 8. Re: Custom JS and CSS for portlet
                        abdulbasitmughal

                        Hi Matt,

                         

                        I am trying to add JQuery jquery-1.9.0.min.js and jquery.jqGrid.min.js with the help of documentation available at https://docs.jboss.org/author/display/GTNPORTAL36/JavaScript+Cookbook 

                        Here jquery.jqGrid.min.js depends on jquery. I have added code into gatein-resources.xml in this way..

                        <gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

                             xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"

                             xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">

                               

                          <scripts>

                            <name>jquery-1.9.0</name>

                            <script>

                              <adapter>

                                        (function() {

                                          <include>/js/jquery-1.9.0.min.js</include>

                                          return jQuery.noConflict(true);

                                        })();

                                    </adapter>

                            </script>

                          </scripts>

                         

                          <portlet>

                            <name>ListBoxesPortlet</name>

                            <scripts>

                              <script>

                                <path>/js/jquery.jqGrid.min.js</path>

                              </script>

                              <depends>

                                <scripts>jquery-1.9.0</scripts>

                              </depends>

                             

                            </scripts>

                          </portlet>

                           

                        </gatein-resources>

                        and web.xml is

                        <?xml version="1.0"?>

                        <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

                                xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

                                version="2.5">

                           

                           <display-name>box-portlets</display-name>

                          

                           <filter>

                                <filter-name>ResourceRequestFilter</filter-name>

                                <filter-class>

                                    org.exoplatform.portal.application.ResourceRequestFilter

                                </filter-class>

                            </filter>

                            <filter-mapping>

                                <filter-name>ResourceRequestFilter</filter-name>

                                <url-pattern>/*</url-pattern>

                            </filter-mapping>

                          

                        </web-app>

                        and found these errors

                        19:47:28,364 INFO  [org.gatein.integration.jboss.as7.deployment.PortletBridgeDependencyProcessor] (MSC service thread 1-8) Adding JBoss Portlet Bridge 3.2.1.Final to "box-portlets.war"

                        19:47:28,386 ERROR [org.exoplatform.web.application.javascript.JavascriptConfigDeployer] (MSC service thread 1-5) An error occurs while processing 'Javascript in gatein-resources.xml' from the context 'box-portlets': java.lang.IllegalStateException: Duplicate ResourceId : SHARED/jquery-1.9.0,ter resource definition will be ignored

                                at org.gatein.portal.controller.resource.script.ScriptGraph.addResource(ScriptGraph.java:223) [exo.portal.component.web.resources-3.6.0.Final.jar:3.6.0.Final]

                                at org.exoplatform.web.application.javascript.JavascriptTask.execute(JavascriptTask.java:49) [exo.portal.component.web.resources-3.6.0.Final.jar:3.6.0.Final]

                                ...

                        19:47:28,426 INFO  [org.exoplatform.portal.application.ResourceRequestFilter] (MSC service thread 1-5) Cache eXo Resource at client: true

                        19:47:28,427 INFO  [org.jboss.web] (MSC service thread 1-5) JBAS018210: Registering web context: /box-portlets

                        19:47:28,439 INFO  [org.jboss.as.server] (DeploymentScanner-threads - 1) JBAS018559: Deployed "box-portlets.war"

                        Please suggest ... Thanks in advance for your cooperation in this regard.

                        • 9. Re: Custom JS and CSS for portlet
                          mwringe

                          Its a duplicate resourceId error, so you are defining this version in more than one place which is not allowed. It should only be defined in _one_ gatein-resources.xml, if you define it in more than one you have to give it a unique name in each.

                          • 10. Re: Custom JS and CSS for portlet
                            abdulbasitmughal

                            Thanks for your quick reply. I have tried to find the help on _one_ gatein-resources.xml but there in nothing realated in documentation. Can you please share some links or material that can help?

                             

                            One thing more that i have noticed that in gatein-resources.xml i have pasted the below mentioned code then created a new war file and deploy. war file deployed successfully.

                            <gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

                                 xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"

                                 xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">

                                   

                              <scripts>

                                <name>jquery-1.9.0</name>

                                <script>

                                  <adapter>

                                            (function() {

                                              <include>/js/jquery-1.9.0.min.js</include>

                                              return jQuery.noConflict(true);

                                            })();

                                        </adapter>

                                </script>

                              </scripts>

                             

                              <portlet>

                                <name>ListBoxesPortlet</name>

                                <scripts>

                                  <script>

                                    <path>/js/jquery.jqGrid.min.js</path>

                                  </script>

                                  <depends>

                                    <scripts>jquery-1.9.0</scripts>

                                  </depends>

                                 

                                </scripts>

                              </portlet>

                               

                            </gatein-resources>

                            I did no change then again deployed war file then it through same errors. I changed the portlet name and script tag name and then deployed again. Again it worked fine. I think it cached info like these portlet name and script tag name, those are already exist and through errors of duplicate resourceid. If it so then how i can clear this cache.

                            • 11. Re: Custom JS and CSS for portlet
                              vstorm83

                              If you re-deploy the portlet war (hot-deploy) with-out re-start server, it's throw an exception because the resource declared in gatein-resources.xml can't be re-installed.

                              If you don't modify js or gatein-resources.xml, you can ignore that exception, your re-deployed portlet still works (with the cached data). But if you've modified the gatein-resources.xml (keep the same resourceID), you'll need to restart server

                               

                              We have a jira issue to fix that [#GTNPORTAL-3248] Portlet archive containing gatein-resources.xml fails to redeploy - JBoss Issue Tracker