7 Replies Latest reply on May 14, 2010 2:23 PM by Developer Uy

    how to add a new tow columns layout, such as left 200px

    Sully Zhang Newbie

      add a new tow columns layout, such as left 200px

       

      if i want to add a new layout, which files i need to modify.

        • 1. Re: how to add a new tow columns layout, such as left 200px
          Matt Wringe Master

          you should be able to specify the width for a container in the page editor.

           

          I am unsure about how to add a new layout, does anyone know how to add a custom layout?

          • 2. Re: how to add a new tow columns layout, such as left 200px
            Sully Zhang Newbie

            ok, i research it and successful.

             

            share for your guys.

             

            --add your column container file here:   GateIn-3.0.0-GA\web\portal\src\main\webapp\groovy\portal\webui\container\ 

             

            --create your container and page configation file here GateIn-3.0.0-GA\web\portal\src\main\webapp\WEB-INF\conf\portal\template

               include folder containers and pages, add you own folder.

             

            --modify containerConfigOption.groovy here GateIn-3.0.0-GA\web\portal\src\main\webapp\WEB-INF\conf\uiconf\portal\webui\container

              such as line 70, add code:

             

              column.addSelectItemOption(new SelectItemOption("left200TwoColumns",""+
                      "<container template=\"system:/groovy/portal/webui/container/UILeft200ColumnContainer.gtmpl\">" +
                    "  <container template=\"system:/groovy/portal/webui/container/UIContainer.gtmpl\"></container>" +
                    "  <container template=\"system:/groovy/portal/webui/container/UIContainer.gtmpl\"></container>" +
                      "</container>",
                      "Left200TwoColumnContainerLayout"));       

             

             

            start you gatein, and you can see the new layout.
            Good Luck.

            • 3. Re: how to add a new tow columns layout, such as left 200px
              Developer Uy Newbie

              Hi, I've read your post and I'm having problems following your steps for the  solution.

               

              Is there a template for the column  container file? and for the page.xml and container.xml?

               

              Can  you tell me what these files should look like? Or publish the files?

               

              thx

              • 4. Re: how to add a new tow columns layout, such as left 200px
                Sully Zhang Newbie

                --add your column container file here:   GateIn-3.0.0-GA\web\portal\src\main\webapp\groovy\portal\webui\container\

                 

                create file : UILeft200ColumnContainer.gtmpl

                 

                --create your container and page configation file here GateIn-3.0.0-GA\web\portal\src\main\webapp\WEB-INF\conf\portal\template\containers

                   include folder containers and pages, add you own folder.

                 

                create folder and file: left200-two-columns\container.xml:

                 

                <container template="classpath:groovy/dashboard/webui/component/UILeft200ColumnContainer.gtmpl">
                      <container template="classpath:groovy/dashboard/webui/component/UIContainer.gtmpl">
                            <application>
                          <instance-id>/eXoGadgets/Calendar</instance-id>
                          <application-type>eXoGadget</application-type>
                        </application>     
                      </container>
                         <container template="classpath:groovy/dashboard/webui/component/UIContainer.gtmpl">
                            <application>
                          <instance-id>/eXoGadgets/Calculator</instance-id>
                          <application-type>eXoGadget</application-type>
                        </application>        
                         </container>
                </container>

                --modify containerConfigOption.groovy here GateIn-3.0.0-GA\web\portal\src\main\webapp\WEB-INF\conf\uiconf\portal\webui\container

                  such as line 70, add code:

                 

                add lines:

                 

                column.addSelectItemOption(new SelectItemOption("left200TwoColumns",""+
                          "<container template=\"system:/groovy/portal/webui/container/UILeft200ColumnContainer.gtmpl\">" +
                        "  <container template=\"system:/groovy/portal/webui/container/UIContainer.gtmpl\"></container>" +
                        "  <container template=\"system:/groovy/portal/webui/container/UIContainer.gtmpl\"></container>" +
                          "</container>",
                          "Left200TwoColumnContainerLayout")); 

                 

                good luck.

                • 5. Re: how to add a new tow columns layout, such as left 200px
                  Developer Uy Newbie

                  still don't know what sould the UILeft200ColumnContainer.gtmpl contain?

                  can I copy the UITableColumnContainer.gtmpl and change it? what should I change?

                  thx

                  • 6. Re: how to add a new tow columns layout, such as left 200px
                    Sully Zhang Newbie

                    yes, copy exist one and modify it when view mode.......

                    • 7. Re: how to add a new tow columns layout, such as left 200px
                      Developer Uy Newbie

                      Thanks!

                       

                      I finally copied another template.

                       

                      The steps I followed are:

                       

                      Copy the file UITableAutofitColumnContainer.gtmpl in portal\groovy\portal\webui\container\ you can find this file here (http://anonsvn.jboss.org/repos/gatein/portal/trunk/web/portal/src/main/webapp/groovy/portal/webui/container/UITableAutofitColumnContainer.gtmpl)

                       

                      Add the following text to the ContainerConfigOption.groovy file that can be found in portal\WEB-INF\conf\uiconf\portal\webui\container
                        SelectItemCategory autofitColumn = new SelectItemCategory("autofitColumn") ;
                          autofitColumn.addSelectItemOption(new SelectItemOption("autofitOneColumns","" +
                              "<container template=\"system:/groovy/portal/webui/container/UITableAutofitColumnContainer.gtmpl\">" +
                              "  <container template=\"system:/groovy/portal/webui/container/UIContainer.gtmpl\"></container>" +
                              "</container>",
                              "OneRowContainerLayout")) ;
                          autofitColumn.addSelectItemOption(new SelectItemOption("autofitTwoColumns",
                              "<container template=\"system:/groovy/portal/webui/container/UITableAutofitColumnContainer.gtmpl\">" +
                              "  <container template=\"system:/groovy/portal/webui/container/UIContainer.gtmpl\"></container>" +
                              "  <container template=\"system:/groovy/portal/webui/container/UIContainer.gtmpl\"></container>" +
                              "</container>",
                              "TwoColumnContainerLayout")) ;
                          autofitColumn.addSelectItemOption(new SelectItemOption("autofitThreeColumns",
                              "<container template=\"system:/groovy/portal/webui/container/UITableAutofitColumnContainer.gtmpl\">" +
                              "  <container template=\"system:/groovy/portal/webui/container/UIContainer.gtmpl\"></container>" +
                              "  <container template=\"system:/groovy/portal/webui/container/UIContainer.gtmpl\"></container>" +
                              "  <container template=\"system:/groovy/portal/webui/container/UIContainer.gtmpl\"></container>" +
                              "</container>",
                              "ThreeColumnContainerLayout")) ;
                        templates.add(autofitColumn); 

                       

                      Add the following lines to the internationalization files you use in portal\WEB-INF\classes\locale\portal\webui_**.properties

                       

                      line 131
                      ContainerOptions.Category.autofitColumn=Autofit Columns Layout

                       

                      line 142
                      ContainerOptions.Item.autofitOneColumns=Autofit One Column
                      ContainerOptions.Item.autofitTwoColumns=Autofit Two Columns
                      ContainerOptions.Item.autofitThreeColumns=Autofit Three Columns

                       

                      Notes: I saw this changes in the SVN repository so they will be released in the following versions, the line numbers are not important, I posted them in order to leave the files as they are in the repository

                       

                      Hope this can help.