We Keep Coding

How to set width in CSS class programatically with GWT?

I am working on GWT app and I have a bug: my button browse(which is FileUploadField class) has bigger width than normal, take a look:
When I do inspect element and set width to element to 20 px everything is ok. But I don't know how to set programmatically in GWT(name of that class in CSS is "x-form-file"), I tried with some solutions from internet like:
fileUploadField = new FileUploadField();
fileUploadField.setAllowBlank(false);
fileUploadField.setName("uploadedFile");
fileUploadField.setFieldLabel("File");
fileUploadField.getElement().getStyle().setProperty("width", "20px");
but without success. Could someone helps me how to get that class in css programatically in my gwt code?

You need to create a CSS Client bundle (an interface), something like this :
interface MyCss extends CssResource {
String className();
}
After that you need to have this bundle inside your class as an instance variable:
#UiField
MyCss style;
then in your code you can add the style using:
fileUploadField.addStyleName(style.className())
Working with css in the code is somehow boilerplate, for detailed example check GWT website: LINK

you can add .x-form-file { width :20px;} to your project's style.css this will override the style.
you can try: fileUploadField.getElement().getStyle().setWidth(20, Unit.PX);
Raz

Vaadin how to print dynamic raw html using PrintUI class?

I'm following the example code which puts the html string into a Label. The html is perfect in the browser, is multiple pages and so on. However when I do a Print Preview (or Print) the printout is limited to only one page and there is vertical scrollbar on the printout.
How do I print multiple pages and remove the scrollbar?
My code in the PrintUI class is only:
setContent(new Label(template, ContentMode.HTML));

The answer can be found at: https://vaadin.com/forum/#!/thread/3869543/3869542
You basically need to resort to pure html. The following code does this and fixes the issue:
private void setSizeUndefined2Print()
{
com.vaadin.ui.JavaScript.getCurrent().execute("document.body.style.overflow = \"auto\";" +
"document.body.style.height = \"auto\"");
UI.getCurrent().setSizeUndefined();
this.setSizeUndefined();
}
You can find more details in the above link.

Identify classes at run-time

I'm working in a project for Android using libGDX framework in which I show some examples of the use of three graphic libraries. Once started, the app must show a menu with a link for each sample, its title and a little description. For the time being, I'm creating all manually, declaring a new link for each sample, but as I will have a lot of samples and I'll add new ones in each app version, I would like to identify them and generate a new entry automatically.
The samples part is composed of an abstract class called Sample and a class for each sample that extends from Sample. How could I accomplish this? The requisites will be to have the possibility to identify all samples at run-time and get information about them (name, description, etc.) without the need of create an instance previously.
My actual options are use Annotations (don't know if it is possible or if I need an external library to search for this annotations at run-time) or use something like a JSON file. What do you think is the best way (I'm open to other solutions of course) to solve this problem?

I would recomend using XML and take the class you want to create as Tag so something like this:
<root>
<sampleimplement1 name ="sampleimplement1" descript="sample1 description" ..... more attributes here... />
<sampleimplement2 name ="sampleimplement2" descript="sample2 description" ..... more attributes here... />
<sampleimplement3 name ="sampleimplement3" descript="sample3 description" ..... more attributes here... />
</root>
This can now be parsed with the XmlReader of libgdx to a Element. So the element is not the root.
Last but not least you can iterate over the childs of the root and check what the name of the Tag is. Depending on the name you create a different implementation of your Sample.
XmlReader r = new XmlReader();
Element e = r.parse(xml);//<--- the XML as string also possible as file
for (int i = 0; i < e.getChildCount(); i++)
{
Element child = e.getChild(i);
switch(child.getName()){
case "sampleimplement1":
//create sample1
break;
....
....
}

How to wire up GWT hyperlink click handler?

I am brand new to GWT and am trying to achieve the following:
Here's the code that I've cooked up:
public class MyWebApp implements EntryPoint {
// The main container for everything the user sees (the "view")
private LayoutPanel mainPanel;
// Simple HTML for the header ("MyWebApp") and subsequent <hr/>
private SafeHtml header;
// The three links "Dashboard", "Monitors" and "Help Desk"
private HorizontalPanel navMenu;
// The empty content that gets populated when user clicks one of
// the 3 links.
private Panel menuContent;
#Override
public void onModuleLoad() {
// The initial fragment contains the header, nav menu and empty "content" div.
// Each menu/screen then fills out content div.
initMainPanel();
RootPanel.get().add(mainPanel);
}
private void initMainPanel() {
SafeHtmlBuilder headerBuilder = new SafeHtmlBuilder();
navMenu = new HorizontalPanel();
// Leaving null until user clicks on one of the 3 menus.
// Then the menu will decide what panel gets injected for
// this panel.
menuContent = null;
// Create the simple HTML for the header.
headerBuilder.append("<h1>MyWebApp</h1><hr/>");
// Create the navMenu items.
Hyperlink dashboardLink, monitorsLink, helpDeskLink;
// Homepage is http://www.mywebapp.com
// I want the dashboardLink to inject menuContent and "redirect" user to
// http://www.mywebapp.com/dashboard
dashboardLink = new Hyperlink("???", "???");
// http://www.mywebapp.com/monitors
monitorsLink = new Hyperlink("???", "???");
// http://www.mywebapp.com/help-desk
helpDeskLink = new Hyperlink("???", "???");
navMenu.add(dashboardLink);
navMenu.add(monitorsLink);
navMenu.add(helpDeskLink);
// Add all widgets to the mainPanel.
mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));
mainPanel.add(navMenu);
mainPanel.add(menuContent);
// Position and size the widgets (omitted for brevity).
// mainPanel.setWidgetHorizontalPosition(...);
}
private HTML getDashboardMenuContent() {
return new HTML("This is the dashboard.");
}
private HTML getMonitorsMenuContent() {
return new HTML("These are the monitors.");
}
private HTML getHelpDeskMenuContent() {
return new HTML("This is the help desk.");
}
}
Most importantly:
How do I "wire up" the Hyperlinks so that when the user clicks them, I can call the appropriate getXXXMenuContent() method, and then add that to menuContent?
But also:
I feel like I'm doing something wrong here: mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString())); - if so what is it?!? How should I be adding a simple <h1> and <hr/> in a way that's secure (hence the use of the Safe* objects), efficient, and conforming to recommended practices?
Should I be implementing UiBinder here? If so, would I make UiBinders for each menu's content or for the entire mainPanel, or both?
Thanks in advance!

Hyperlink widgets trigger navigation. You don't want to handle clicks on them, you want to handle navigation (that could be triggered by clicking a Hyperlink or using the browser's back/forward buttons, a bookmark or link from elsewhere –including Ctrl+clicking a Hyperlink to open it in a new window/tab–, etc.)
To react to those navigation events, use History.addValueChangeHandler; and to handle the initial navigation on application start, call History.fireCurrentHistoryState() (after you add your handler of course).
More details in: https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsHistory
Would be better to split other questions to... other questions, but here are the answers anyway:
I feel like I'm doing something wrong here: mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString())); - if so what is it?!? How should I be adding a simple <h1> and <hr/> in a way that's secure (hence the use of the Safe* objects), efficient, and conforming to recommended practices?
The HTML widget has a constructor taking a SafeHtml so you don't need to call toString().
If you're only using a constant, you don't need a SafeHtmlBuilder; use SafeHtmlUtils instead. But constants are no more or less secure with or without SafeHtml, SafeHtml just makes it easier to find all occurrences of HTML in your code, to help in doing a security review of your app (BTW, we're doing HTML, so <hr>, not <hr/>; if you really want it to look like XML/XHTML, then use <hr /> but you're only cheating yourself here)
Should I be implementing UiBinder here? If so, would I make UiBinders for each menu's content or for the entire mainPanel, or both?
If you don't feel the need for UiBinder, you don't have to use it. But in this case it won't change anything: you're not handling widget events, but history events.

Something like
dashboardLink.addClickHandler(
new ClickHandler()
{
public void onClick( ClickEvent event )
{
mainPanel.setWidget( getDashboardMenuContent() );
}
} );
You should note that Hyperlink.addClickHandler(...) is deprecated and it is recommended to use Anchor.addClickHandler(...) instead.
As for the other questions: It is a lot more elegant and easier to build UI's with UIBinder, so definitely look into that, but do try to make "it" work first to avoid the added complexity of the .ui.xml setup :-)
Cheers,

I have one simple piece of advice to give you. Use what the framework has to offer.
The HTML widget should be your last escape. There are so many widgets that there is no need for you to write html almost anywhere in your code.
So instead of headerBuilder, you can user the following piece of code
Label header = new Label("MyWebApp");
header.setStyleName("headerStyle",true);
You can set the style properties in an external Css file and add the reference inside the base html file or the gwt.xml file. So that answers your question about mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));
In respect to the Hyperlink. If you choose to use hyperlinks, remember that the most effective usage is with the MVP pattern better known as Places and Activities (Lots of information on the web)
If you want something simpler instead the MenuBar and MenuItem classes should do the trick.
Look here for an example on how to use the MenuBar to control your application. There are many other ways but why not use the tools provided?
Also the UIBinder Vs the Designer/Classes methods is extensively discussed on stackoverflow resulting to a matter of choice and programming familiarity/preference.

JSF2.0: How to write h:form in MyComponent in Java?

I'm writing a JSF2.0-component as a Java class and Renderer class and so on. I can't write parts of the output in the xhtml like
<h:outputText ... />
because the elements are generated dynamically.
So I get the message "The button/link/text component needs to have a Form in its ancestry. Please add .".
Below you can see how I currently render a form. Is this correct too? Or should change something to make the warning dissappear?
private void encodeForm(Element elem) throws IOException {
//ResponsWriter writer
writer.startElement("form", form);
encodeChildren(elem);
writer.endElement("form");
}
Is it possible to connect an input-field to a variable that is created during runtime (i.e. an Object in a List)? If yes how? If no: I have to implement the decode()-method right?
How should I render a button that submits such a form? It should for example call a method
in my component that then somehow (how? like the decode-method?) can process the user-input.
Thanks for any help!

Is this correct too? Or should change something to make the warning dissappear?
Your best bet would be to just remove the code you've shown and ask the users of said component to place it inside a form.
At any length, what you're doing is writing markup for a form. This is something else than actually putting a form component in the tree.