Twitter Bootstrap for GWT is not working - gwt

I am trying to use Twitter Bootstrap for GWT and get the same nice and pretty view like the showcase here and here is what I did:
1- downloaded the module from git
2- run package task in the pom.xml
3- included the created jar in my projects classpath.
4- inherited the module in my project.gwt.xml file with
<inherits name="com.github.nyao.bootstrap4gwt.Bootstrap"/>
5- included the module in my root xml
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:m='urn:import:com.clouway.exreport.client.accountcreation.view'
xmlns:t='urn:import:com.github.nyao.bootstrap4gwt.client.ui'
>
<ui:style src="newRegistrationStyle.css"/>
<g:HTMLPanel addStyleDependentNames="{style.mainPanel}">
<div class="{style.headdistance}"/>
<div class="{style.container}">
<g:DecoratorPanel addStyleDependentNames="{style.decoratorPanel}">
<g:VerticalPanel addStyleDependentNames="{style.verticalPanel}}">
<m:AccountEditor ui:field="accountEditor"/>
<!--<g:Button ui:field="create" text="create"/>-->
<t:Button type="Success" text="sing in"/>
<g:Label ui:field="errorsLabel"/>
...
</ui:UiBinder>
But nothing happened. I got normal text box and normal button.
I took a look at this tutorial which is very good and the guy got the things right, his application has very nice look. I took a look at his code but didn't find any reason why my look i still normal and he got the nice view. thanks for help in advance

Instead of using bootstrap4gwt try using gwtbootstrap which is far better and has much more components compared to the former. The forum is also very active in gwtbootstrap.

Related

Eclipse Does Not Recognize GWT UiBinder RadioButton

Eclipse/UiBinder won't recognize RadioButton, and I feel like I have tried everything to get it to work.
I have added the import at the top, that isn't recognized(even though RadioButton should be in the client UI bundle, that is imported by default as far as I can tell, and I have tried writing the tag in every conceivable way, but Eclipse still says:
Attribute RadioButton has no value.
The thing that really gets me is that I added the UiField in the Java parent file, and it imported just fine. I'm about to de-evolve into an ancestor made of pure anger as the project hinges on me figuring this out.
I appreciate any help that may be given. Here is my 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"
xmlns:gwt="urn:import:com.google.gwt.user.client.ui.RadioButton"
<g:HTMLPanel>
<g:Label ui:field="label">Starting Text</g:Label>
<g:VerticalPanel>
<gwt: RadioButton ui:field="radio2" ui:name="radio">Option2</gwt:RadioButton>
<g: RadioButton ui:field="radio3" value="value1" name="radio">Option3</g:>
<gwt: RadioButton ui:field="radio4" name="radio"/>
<ui: RadioButton ui:field="radio5" name="radio">Option5</ui:>
</g:VerticalPanel>
</g:HTMLPanel>
The correct way to use RadioButton is this:
<g:RadioButton ui:field="radio" name="radio">Option 1</g:RadioButton>
The reason for the error, by the way, is the space before RadioButton. It makes it an attribute instead of a part of a tag.

Use of icons inside a JAR in GWT UiBinder template

In my GWT application I also use SmartGWT library for some user interface elements.
Recently I had the idea of replacing the text for some GWT Buttons (like "refresh" or "save") with an icon from SmartGWT's icon set, for example the refresh icon in /com/smartclient/theme/graphite/public/sc/skins/Graphite/images/actions/refresh.png
I tried to make the icon available in my UiBinder template with the qualified name:
<ui:image field="refreshIcon" resource="/com/smartclient/theme/graphite/public/sc/skins/Graphite/images/actions/refresh.png" />
and use it for a PushButton:
<g:PushButton ui:field="refreshButton" styleName="{style.Buttons}">
<g:upFace image="{refreshIcon}" />
</g:PushButton>
Unfortunately that does not work, eclipse has nothing to complain but when running the application I get this error:
[ERROR] [MonitoringTool] - No com.google.gwt.resources.client.ClientBundle$Source annotation and no resources found with default extensions
How can I use the bundled icons in referenced smartgwt.jar library for my PushButtons?
The attribute is named src, not resource:
<ui:image field="refreshIcon" src="/com/smartclienttheme/graphite/public/sc/skins/Graphite/images/actions/refresh.png" />
As a side note, it doesn't matter where the image comes from provided it's on the classpath: GWT loads everything from the classpath, whether it's in a JAR or folder doesn't matter at all.

JSF2.0 PrimeFaces Navigation Problem

I have a problem with navigation too right now. I have 2 dataTables, one is located within a regular facelets-page, the other one is located in a dialog.
Both have the same code:
<p:commandButton
value="Show car"
ajax="false"
action="showCar?faces-redirect=true">
<f:setPropertyActionListener value="#{car}" target="#{carBean.car}" />
</p:commandButton>
I also tried adding process="#this" without success.
The problem is, while the navigation works for the commandButton inside the facelets-page, it doesnt work for the button inside the dialog. It seems that the current page is reloaded after the click.
Replacing it with a doesn't help either.
Has anybody experienced something like this before? Could this be an issue with the dialog?
Thanks and best regards,
Robert
Forget my previous answer, I didn't read your question carefully. What might be happening is a failure in your <f:setPropertyActionListener> call. If it is (silently) failing then the error will cause JSF to automatically navigate back to the same page.
Add this to your page somewhere so you can see any helpful error FacesMessages that may be provided by the framework:
<p:messages
id="messagesForDebugging"
showDetail="true"
autoUpdate="true" />
The autoUpdate will cause it flash up messages generated by global Ajax requests.
You may also want to put a logging statement in your carBean.setCar() method to make sure that it is successfully setting the value. If it is failing then maybe you need to provide a custom converter for Car values?

How to Create a Zend_Navigation Dummy Node - Zend Framework 1.11.4

i'm trying to create a node in the Zend_Navigation tree that is just used for organizing the links within it. therefore it would NOT require an anchor tag when rendered and not show up in the breadcrumb. anyone know how to make this happen?
Not really sure what your're after. I assume that you use navigation.xml in application/config folder to organize your navigation. Then you could provide a dummy navigation element and disable it using css:
<all>
<label>Home</label>
<resource>default:Home</resource>
<module>default</module>
<class>dummy</class>
</all>

How to prevent GWT onload flicker in the Web Application Starter Project?

I'm new to GWT, and I'm sure this is answered in SO somewhere but I've yet to find
I downloaded the GWT 2.0 eclipse plugin, and was pleased to see it comes with a starter project.
However, I was surprised that when running it, there is an unpleasent flickering...
The text loads without the CSS first
It takes a while untill the select box apears
(If you don't see the flicker, try and press F5 to refresh)
All mature GWT apps seem to have a loader before that but I didn't find an easy, standard way to add it.
It seems this app loads in this order: (correct me please if I mixed it up, its only my guess)
Basic layout HTML,
All JavaScript, and CSS
Runs the logic on the "onload" event (soonest time your compiled javaScript can start - ?)
So I can't programmatically add a loading spinner before GWT was loaded, a bit of a catch 22 for me
Am I missing something basic? is there a best practice way to add that initial spinner?
I was thinking simply adding a div with an animated gif, and in the onload event - hide it.
But I'm sure there is something better.
Let me know if this is a duplicate question
Update: found this related question, not answering mine though...
I've handled this problem before by not using the GWT module to load CSS, but loading it directly in the tag itself. If you do this, the browser will always load the CSS first, even before the GWT JS is loaded.
This means you'll lose a bit of flexibility and speed, but its the only workaround I've used so far.
EDIT: Extra info cause I want the bounty :D
If you do not remove the
<inherits name='com.google.gwt.user.theme.standard.Standard'/> from your module.gwt.xml file, then the GWT standard theme is loaded in the JS file that GWT creates. This JS file loads after the HTML page renders, and injects the CSS after load. Hence the flicker.
To avoid the flicker, you can comment out that line and insert your own stylesheet into the <head> of your HTML file. This ensures your CSS loads before the HTML renders, avoiding any flicker. If you really want the GWT theme, you get it out of the source code.
To use a spinner with GWT is quite easy. One simple way would be to keep it in a div with an id in the HTML file itself. Then, in the onModuleLoad(), simply hide that div by calling RootPanel.get("spinner").setVisible(false);
That should show the spinner till GWT loads itself.
Here's what we do to implement a spinner.
You put something like the following HTML just below the script line that loads your application (ie. the one with nocache.js). e.g.:
<div id="loading">
<div id="loading-msg">
<img src="icons/loading-page.gif" lt="loading">
<span>Loading the application, please wait...</span>
</div>
</div>
Then in your application EntryPoint you reach into the page using the DOM and remove that div. e.g.
final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
DOM.removeChild(RootPanel.getBodyElement(),
loading.getElement());
}
Ehrann: I'm afraid the practice mentioned in the above answers is the only way for now. GWT doesn't provide similar features to show/hide a "loading" frame "on the fly". I guess one of the reason is that this requirement is not so "common" for all GWT users, one person might want a very different style of the "loading" than others. So you have to do that by yourself.
You can have a look at the GXT showcase page (based on GWT too): http://www.extjs.com/explorer/ for how they do that. For the source of it, download Ext GWT 2.1.0 SDK here: http://www.extjs.com/products/gxt/download.php and check the samples/explorer folder after extracting it. For details see the edit below:
EDIT
Check the source code for http://www.extjs.com/examples/explorer.html and you can see a div with id "loading". For each samples (extending Viewport), GXT.hideLoadingPanel(loadingPanelId) is called in onAttach() (the initialization), which hides the loading frame.
Check source code of Viewport here
Check source code of GXT.hideLoadingPanel here
You can do it in a similar way.
You could put an HTML loading message in the host page (use style attributes or embed the style tag in the header to make sure that it's styled), and remove the message once your modules has loaded, e. g. Document.get().getBody() with .setInnerHTML("") or .removeChild(), and then present your application programmatically however you want.