integrate gwt-bootstrap with gwtp tab system

[Othman El Moulat]

hello,
what's the best way to integrate the UI library gwt-bootstrap with the Tab presenters example in gwtp?

[Kyle Anderson]

Don't.  I'm not sure why people have gotten in the habit of wrapping UI libraries in GWT.  Sure, its easier because you can keep doing everything in Java, but it usually just creates frustration because these libraries are buggy and don't get updated when a new version of the library comes out.

You should just inject the boostrap.css and boostrap.js files in your project, and then use JSNI in your views to manipulate the libraries.  I use this tactic with Jquery, bootstrap, google mapsv3, and soem other java script tools.  it's so much easier because you actually know what's going on if theres an error.

[regnoult axel]

Hi,

I am really interested about this debate...I am also using the GWT wrapper of gmap V3 and  twitter-bootstrap...When should it be really an advantage to use the GWT's wrappers instead of the native javascript libs ? If it is just to code the less possible in javascript, so I think I will start to learn javascript...

@Kyle Anderson : So you neither use Gwt-Querry ? But I think I have watched a You Tube  video from Ray Cromwell that says that Gwt-Querry is a little faster.

(thanks to the optimisations of the GWT compiler I think).

Regards,

[othman El Moulat]

injecting the boostrap.css and using it in uibinder xml gives me some errors. the bootsrap.css format is probably not recongnized by the gwt uibinder or smth like that. can you point what are the css and js we should use? the ones from the bootstrap.zip downloads don't work as i said (gives errors for the * used in some css selectors etc).
I don't see what disadvantage of using gwt-bootstrap . i even presume it's better to use this GWT wrapper which provide clean GWT coding and integration.

--
 
 

--

othman El Moulat
Java Developer
Linkedin: http://www.linkedin.com/in/othmanelmoulat
Skype : othmanelmoulat

[Christian Goudreau]

Othman, How do you use it? Normally if you write a simple <div class="bootstrap class">, it works. Also, Eclipse and IntelliJ can generate the Css bundle on top of Bootstrap.css really easily.

Also, as long as GWT-Bootstrap is open source, it does exactly what Kyle is doing. Personally I would rather contribute to this project than to do every wrapper around every could JS library out there.

On the other hand Kyle, you SHOULD use GWT-Query. It is NOT a wrapper, but a completely rewritten Java library that does the same thing as jQuery. That's why it's faster. There's more and more plugin going out to use with it and is actively maintained.

Cheers,

--
 
 

--
Christian Goudreau

www.arcbees.com

[othman El Moulat]

@Christan
i use it by including the css in uibinder xml file <ui:style src="bootstrap.css" />. But as i said in my eclipse IDE the css file gives error while parsed by the uibinder.

[Christian Goudreau]

Include it inside either the gwt.xml or inside your html file.

[othman El Moulat]

Hi Christian,
so you advise aginst using gwt-bootsrap? and intead using the bootstrap css and js directly? what are your arguments against using the wrapper lib gwt-bootsrap?

[Christian Goudreau]

I do not advise against using gwt-bootstrap, I just gave you alternative solutions :D

[Kyle Anderson]

No thanks on using GWTQuery.  It's always a few versions behind the latest JQuery, and it seems to trigger cryptic development mode errors from time to time.  The most frustrating part is that it's incompatible with JQuery UI Plugins which depend on a minimum version of JQuery.

While it is probably true that the compiled version of GWTQuery willl be a little faster since it's a full rewrite, it actually is much slower in development mode.

I found that when I moved from GWTQuery -> JQuery JSNI, my development mode speed DOUBLED!

Kyle

--
 
 

[Othman El Moulat]

Thank you. BTW how do you propose i cange the RoundTab view so that it uses bootstrap? I need a clean solution to integrate the tab look of BS into gwtp Tab presenters system. can you propose some code to achieve this?

[Othman El Moulat]

No one has an Idea how i can integrate BS tabs with gwtp tabs?
i tried using the bootsrap.css styles in RoundTab.ui.xml like this:

<ul class="nav nav-pills">
        <li class="active">
            <g:Hyperlink ui:field="hyperlink" />
       </li>
       </ul>

but this doesn't work . i presume i have also to change the RoundTabPanel css.
do you have a clean way to make a gwtp Tab style that uses BS tabs style?

[Othman El Moulat]

@Kyle anderson,

your post has caused me real troubles with the boss! . He saw your advice against using gwt-bootstrap project and he insists to use Plain BS css and js with  GWT app. But i have not a clear idea how i can apply BS styles to GWT components? wouldn't this require me to write ugly DOM level code with addStyleName() to GWT components? isn't theis re-inventing the wheele while a good job has already been done by gwt-bootstrap?
Well it's good you shared your point view against gwt-bootstrap but you didn't shown us how you implemented the alternative by using BS directly in your GWT. if you post some snippets how you do it that will convince people of your point against gwt-bootstrap.

[Kyle Anderson]

No, you should use UIBinder. 

You have two options here depending on whether you need to use the twitter javascript, or just the twitter css.

1.) If you don't need the twitter animation javascript, and just want to use the styled element as a GWT Widget, you can just add something in UIBinder such as
<g:Button styleName="btn btn-primary"  ui:field="myButton>myButton</

g:Button> 
You can then access it in your view by adding
 @UiField
Button myButton;

2.) If you want to use an animated element from twitter such as a modal, you can just add it as a regular element in UIBinder, example:
<div class="modal" ui:field="myModal> Modal window </div>
In your view, you can write a JSNI function such as
public native void showModal( String modalId ) /*-{
   $wnd.modal('show');
}*-/;
You can once again access the elemnt in your view using the
@UiField
Element myModal;

decorator with a generic 'Element' type, and use the DOM.CreeateUniqueId function in the view's constructor to add a unique id to it before showing it with your showModal function.


I would hardly call this "reinventing the wheel".  You are adding basically 1 line of code to directly call each of the twitter animation functions.

In my opinion- if you are doing a small project which isn't going to need updating at a later date, its fine to use libraries like gwtbootstrap.  However, if you are building a large application with a long livespan, getting in the habit of using these 3rd party libraries will create version dependencies that are impossible to resolve and will also cause conflicts if you try to integrate your code with modules written in native jQuery.  For example, I recently purchased some plugins for my software which were written in jQuery.  This particular package was not available in GWT, and it was about 10,000 lines of code.  It would have been a royal pain to rewrite it.  I was able to easily wrap this within a presenter and add a few hooks to make it listen to the EventBus.  This process was seemless, but would have been a nightmare if I was using something like GWTQuery.

--
 
 

[othman El Moulat]

@Anderson
Thank you. Now your reply makes a lot of sense and i can now understand your point.

[Othman El Moulat]

BTW Kyle, do you know how i can apply BS style to gwt-platform tabs? i'm not able to figure out how i can change the SimpleTab.ui.xml styles so that the tabs have the style of BS tabs.

[Kyle Anderson]

I don't use the gwtp tabs, I just use the bootstrap tabs by putting them in the UIBinder of my TabManagerPresenter/View.

I assume the gwtp tabs are just GWT widgets and some html.  In fear of stating the obvious you can use styleName="" to add a class to a gwt widget, or class-"" to add a class to an html element in the UIBinder.  If you want to do it programmatically from the view, you just use addClassName or addStyleName()

Sorry, maybe if you are more specific about the problem you are encountering, you'll get a better response.

--
 
 

[othman El Moulat]

in fact i'm using the tabbed example in gwtp website for my tabs. I didn't know there is other ways to build a tab system with better code than was presented in the gwtp tabbed presenters example (http://code.google.com/p/gwt-platform/source/browse/#hg%2Fgwtp-samples%2Fgwtp-sample-tab). If your TabManagerPresenter class is not complex and large , would you mind sharing it here as a sample for a better gwtp tab system?

[Kyle Anderson]

I'm not saying there's anything wrong with the gwtp examples, but if you want to use the bootstrap tabs, you can just copy the html directly from the twitter bootstrap site into your UIBinder.  Twitter provides samples for each of their widgets.

My TabManager has more stuff in it, and it would probably take you longer to go through that than to just drop in the twitter example.

--
 
 

[Othman El Moulat]

Hello kyle,
I'm trying to get the BS sticker footer as in this example http://twitter.github.com/bootstrap/examples/sticky-footer.html
I added the css and html to my gwt Uibinder xml file but it seems the wrap css selector has no effect. I’m not sure if this is b/c i need to redefine the css elements that will be included under 'wrap' div. I'm not sure why the wrap behavior doesn't work . do you have a uibinder example of a BS sticker footer?

thanks

[Kyle Anderson]

Sometimes if using GWT, you will find that the "standard.css" file for GWT will override some of the bootstrap css elements.  If you are ONLY using boostrap, and not GWT widgets, you could just modify your gwt .xml file to not include the standard theme.  This fixed my problem for sticky footers, etc, and was fine for me because I dont like the look and feel of ANY of the vanilla GWT widgets.

If you want to use both GWT widgets adn boostrap widgets, you will need to open firebug and see which css properties are conflicting.  You can compare it side by side to a plain html example of the sticky footer to see which css attributes are overriden.

Also, note that the browser will give priority to whichever css is included last, so if you put the bootstrap after the standard theme in your .xml file, the boostrap will take will any conflicts.  Another option would be define it as a source file in the uibinder for any views that require it, which would give it priority  over standard.css in the views that need it, but allow standard.css to keep priority in the views which dont' use bootstrap.

Hope this helps

--
 
 

[Othman El Moulat]

for some reason i failed to get the footer sticker to work. it seems the wrap css selector doesn't have effect. anyway couldn't have it work after many trails!
can you show some sample uibinder code how to achive the BS footer sticker?

thanks

[Kyle Anderson]

Did you compare it in firebug side by side with a working example outside your application?  that's the easiest way to see where the css is getting messed up.

Sorry, I don't really have a clean example for this, but GWT is obviously not going to change the behavior of css.

--
 
 

[othman El Moulat]

yes i tried comparing with firebug. i suspect the problem is with the 'wrap' css selector. i see in some web links that firefox has a problem with 'min-height' css property. not sure if this is the right cause of this problem because if i try example of plain html with BS footer sticker example it works in Firefox. anyway cannot have this footer sticker thing to work with gwt uibinder.

[othman El Moulat]

here is the uibinder code i use. simple but the sticker footer doesn't wor. can you detect any problem in this uibinder code?

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui">
        <ui:style >

    /* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -30px;
      }
    #footer {
        min-height: 40px;
 /* padding-left:250px;*/

  background-color: #f2f2f2;


      }
      /* Set the fixed height of the footer here */
      #push, #footer {
        height: 30px;
      }
       /* Custom page CSS
      -------------------------------------------------- */
      /* Not required for template or sticky footer method. */

      .container2 {
        width: auto;
        max-width: 680px;
      }
       .credit {
        margin-left: auto;
        margin-right: auto;
        width:580px;
      }

#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}





        </ui:style>
        <g:HTMLPanel >
    <!-- Part 1: Wrap all page content here -->

             <div class="navbar navbar-inverse navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <a class="brand" href="#">GND</a>
              <div class="nav-collapse collapse">
                <ul class="nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#browseinfo">Search</a></li>
                  <li><a href="#maintain">Maintain</a></li>
                  <li><a href="#add">Add Data</a></li>
                  <li class="dropdown">
                    <!-- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li class="nav-header">Nav header</li>
                      <li><a href="#">Separated link</a></li>
                      <li><a href="#">One more separated link</a></li>
                    </ul> -->
                  </li>
                </ul>
                <!-- <form class="navbar-form pull-right">
                  <input class="span2" type="text" placeholder="Email"></input>
                  <input class="span2" type="password" placeholder="Password"></input>
                  <button type="submit" class="btn">Sign in</button>
                </form> -->
                    <form class="navbar-search pull-right">
                    <input type="text" class="search-query" placeholder="Search"></input>
                    </form>
              </div><!--/.nav-collapse -->
            </div>
          </div>
        </div>
    <div id="wrap">
        <div id="main" class="container clear-top">

          <!-- Main hero unit for a primary marketing message or call to action -->
          <div class="row">
            <div class="span12">
            <p>&nbsp;</p>
            </div>
    </div>
          <div class="well well-small">
            <h2 align="center">Welcome To The Geospatial Network Database!</h2>
            <p align="center">This is a demo for gwt and Bootsrap library integration</p>
            <!-- <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> -->
          </div>

          <!-- Example row of columns -->
          <div class="row">
            <div class="span3">
              <h2>How It works</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" data-content="And here's some amazing content. It's very engaging. right?" rel="popover" href="#" data-original-title="A Title" >View details &raquo;</a></p>
            </div>
            <div class="span3">
              <h2>Who It Is For</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
           </div>
            <div class="span3">
              <h2>Get Support</h2>
              <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div>
            <div class="span3">
              <h2>Find Out More</h2>
              <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div>
          </div>
          <div class="row">
          <div class="span6">
          <div class="well">
              <ul class="nav nav-list" ui:field="recentDocumentList">
        <li class="nav-header">What's New</li>
         <!-- <li class="active" ui:field='moreItem'><a href="#"></a></li> -->
         <!--
        <li><a href="#">Document2</a></li>
        <li><a href="#">Document3</a></li>
        <li><a href="#">Document4</a></li>
        <li><a href="#">Document5</a></li>
        <li><a href="#">Document6</a></li> -->

        </ul>
        </div>
          </div>
          <div class="span6">
          <div class="well">
          <h2>Section</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <!-- <p>&nbsp;</p> -->
             <!--  <br></br> -->
              <p>
               <!-- <a class="btn btn-primary" id="myButton" data-content="And here's some amazing content. It's very engaging. right?" rel="popover" href="#" data-original-title="A Title">Click to toggle popover</a> </p> -->
              <g:Button  styleName="btn btn-primary"  ui:field="myButton">Click to toggle popover &raquo;</g:Button>  </p>
          </div>
          </div>


         </div>



        </div> <!-- /container -->
       <div id="push"></div> 
        </div>

         <footer>

            <p align="center" >&copy; 2012 <a href="">Ian Mayo </a> and <a href="">othman El Moulat</a>.</p>

         </footer>

        </g:HTMLPanel>
    </ui:UiBinder> 

[Kyle Anderson]

Yes, if you put CSS in the <ui:style> block, it will be obfuscated by GWT.  To reference it, you must use {style.classname} in the classname on your element instead of typing the plain name.  Don't use Ids like #wrap, just use class .wrap instead.  Again, it will be obfubfuscated, so its essentially a unique Id anyway.

Example:

<ui:style>

.wrap{

  min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -30px;

}

</ui:style>

<div class="{style.wrap}"/>

Kyle

--
 
 

[othman El Moulat]

i tried what you suggested and it is not working either. it is very strange how this sticker footer refuses to work in my gwt app!

[Kyle Anderson]

It doen't have anything to do with GWT.  GWT doesn't change the behavior of CSS, you are probably getting some kind of conflict with a default css file or you aren't referencing the obfuscated names correctly.

Sorry, there's not much more I can add here.

--
 
 

[othman El Moulat]

i think i need to add this css code somewhere

html, body {

  height: 100%;

}

but i don't know where to include it. i did in uibinder still no effect. very strange how it is hard to achieve this BS sticker footer. i followed the examples accurately but it doesn't work what ever i do. very strange.