7 Replies Latest reply on Feb 2, 2011 4:26 AM by theute

    Customizing UIContainer.gtmpl

    timmmm

      Can i customize UIContainer.gtmpl in my skin? Or i must add/edit config files in gatein.ear?

      I realy think that this part of container must be much simpler.

       

      <div class="EDITION-BLOCK EDITION-CONTAINER" style="display: none;">

           <div style="position: relative;">

                <div style="position: absolute; top: -86px;">

                          <div class="NewLayer" style="display: none; visibility: hidden;"><span></span></div>

                                  <div class="CONTROL-CONTAINER CONTROL-BLOCK" style="position: absolute; top: -6px;">

                                      <%/*Begin InfoBar*/%>

                                       <div class="UIInfoBar">

                                          <div class="BlueRoundedStyle">

                                              <div class="LeftBar">

                                                  <div class="RightBar">

                                                      <div class="MiddleBar">

                                                          <div class="FixHeight ClearFix">

        ...

       

      I trying to make something like "960 Grid System".

        • 1. Customizing UIContainer.gtmpl
          mvanco

          Hi TIm,

           

          yes, you can definitely customize UIContainer.gtmpl using the extension mechanism.

          You can inspire yourself with gatein-sample-extension.ear which is at gatein deploy folder (this one customize homePage portlet)

           

          Or you can have a look at documentation for exojcr:

          http://docs.jboss.org/exojcr/1.12.6-GA/developer/en-US/html/ch-how-to-extend-my-gatein-instance.html

           

          I can give you more details if you need.

           

          Best regards,

          Michal Vančo, JBoss QA

          • 2. Customizing UIContainer.gtmpl
            theute

            It's not clear what you mean.

             

            Obviously you are allowed to change the groovy templates. 

            I guess you've seen that the page composition is made by aggregating those containers together, you can use the UI to arrange those containers, you can also do that though XML descriptors. It has some level of flexibility but could also get more probably. Contributions are welcome if that's your domain of expertise.

             

            What aspect of 960 Grid System are you trying to mock ?

             

            Thomas.

            • 3. Customizing UIContainer.gtmpl
              timmmm

              Thanks for your reply. More details would be good.

              • 4. Re: Customizing UIContainer.gtmpl
                timmmm

                GateIn is new for me. Then i opening main page with minimum content i see 28 included divs to <div class="PortletDecoration"> (i think it's main wrapper for portlet?)  Do you think it's good approach?

                 

                As i see count of wrapped divs must be much less. I customized JbossPortal themes with 960 Grid System. Its looks good, less Kb, easy for JS frameworks. In some "ideal world" i see page somthing like this

                 

                container for 12 column grid skin

                 

                <div class="container">

                    <div class="row">

                        <div class="threecol">

                            <p>Three columns</p>

                        </div>

                        <div class="threecol">

                            <p>Three columns</p>

                        </div>

                        <div class="threecol">

                            <p>Three columns</p>

                        </div>

                        <div class="threecol last">

                            <p>Three columns</p>

                        </div>

                    </div>

                </div>

                 

                I understand that it is not all , but you can see what kind of result i trying to get. Is it possible?

                • 5. Re: Customizing UIContainer.gtmpl
                  theute

                  No this is not perfect, and we don't live in this ideal world There is some historical background that can't be sweeped in a day.

                   

                  The main difficulty is to get a smooth transition for people with older web browser and people with customized skins (If you change the template you break the skins).

                   

                  We'd like to take the HTML5 bandwagon, we can also get some help (wink , wink ). In theory it is possible to rewrite the groovy templates to some extend to do this. We are looking to improve the markup but on a low priority at the moment as there are tons of other things to do.

                   

                  In your case if you succeed in what is in theory doable, that would be great to demo or even speak at a conference, so far I haven't seen people trying to customize the templates all the way through.

                   

                  One difficulty also is to keep the page editor to work correctly (preview + aggregation).

                   

                  Also it depends how far you go, but today UIContainers are nested, and so is the HTML markup, which means that if you want to create a 3 columns layout you can take a 2 column layout and add a 2 layout layout in the first column. Obviously you could also add a ready to go 3 column layout, but the idea of page composition is also to be able to build complex UI with minimal bricks.

                   

                  PS: What Michal proposed is that when you build a Portal Container you can "externalize" the groovy templates in a seperate package, I would suggest that you start prototyping with the gatein.ear files directly though (and depending on how it goes make it a portal container)

                  • 6. Re: Customizing UIContainer.gtmpl
                    timmmm

                    No this is not perfect, and we don't live in this ideal world There is some historical background that can't be sweeped in a day.

                     

                    The main difficulty is to get a smooth transition for people with older web browser and people with customized skins (If you change the template you break the skins).

                     

                    We'd like to take the HTML5 bandwagon, we can also get some help (wink , wink ). In theory it is possible to rewrite the groovy templates to some extend to do this. We are looking to improve the markup but on a low priority at the moment as there are tons of other things to do.

                     

                    Old  borwsers it's not a problem, almost all css frameworks has fixes for old browsers. But "customized skins" can be real problem. But from the other hand, megrating to HTML5 will leed to the same problem. Entire portla markup must be changed for use new browsers features. And this "portal html5 markup" would not have many differences with "grid markup".

                     

                    In your case if you succeed in what is in theory doable, that would be great to demo or even speak at a conference, so far I haven't seen people trying to customize the templates all the way through.

                    I think its to soon to speak about demos It's strange than nobody think about this. Grids are simple and flexible, i see only advantages in this approach (with portals too).

                     

                    Also it depends how far you go, but today UIContainers are nested, and so is the HTML markup, which means that if you want to create a 3 columns layout you can take a 2 column layout and add a 2 layout layout in the first column. Obviously you could also add a ready to go 3 column layout, but the idea of page composition is also to be able to build complex UI with minimal bricks.

                    Now i need to measure time/complexity for customizing and make a decision do it or not. No, deal is not in columns count. The result markup it's not exactly what i want to get.

                     

                    Thomas, can you help me with documentation about this huge count of wrappers, why are they needed for, what commponents using them, ...

                    Thanks.

                    • 7. Re: Customizing UIContainer.gtmpl
                      theute

                      We completely agree.

                       

                      It's not that noone thought of simplifying the markup, it's that noone did it yet. This could be you. I was talking about HTML5 because that's what we are looking for, I agree that it doesn't make a difference in concept with what you are proposing.

                       

                      YUI layout composition is also very attracting. One challenge I haven't mentionned is that once the portal embeds a CSS library, usually it means that all portlets will have to follow the same version of the library.

                      The risk scenario is:

                           1 - GateIn ships with the XYZ framework version 1.0

                           2 - Gatein users happen to also like the XYZ framework, and they stick to version 1.0

                           3 - Newer version of GateIn uses XYZ version 2.0

                           4 - Backward compatibility is sometimes a dream and users need to upgrade all their applications to version 2.0, making it difficult/costly to migrate

                      This is why historically GateIn currently ships with it's own javascript library and CSS.

                       

                      I've told you about the challenges, if you are willing to take them and strat prototyping, we can help you answer specific questions/issues you may face. I don't know about the history for the wrappers, but my wild guess is that it was easier to implement this way, it's one <div> per element of the composition. (For all embedded containers + wrapper for the window + wrapper for the application + some HTML that is probably there to facilitate rendering in IE6 to Chrome 9)

                       

                      I'm not an HTML guru, I can only encourage you to take a stab if you find some time.