We Keep Coding

How to add footer and header to other views using routerLayout in java using vaadin

I created a class named "Footer" having just a Label. I also have a few views like loginview, orderview). And I would like to add that footer to every view. This is my code until now.
#ParentLayout(OrderView.class)
public class footer extends VerticalLayout implements RouterLayout {
public footer() {
add(new Span("This text should be underneath the page in the views"));
}
}
Underneath you have my orederview where I want to see that text from the footerclass.
#Route("order")
public class OrderView extends VerticalLayout implements RouterLayout {
public OrderView (){
// What am I supposed to code here to get that text from Footerclass.
}
}
I would like to know what I am missing.
Thanks for the help.

Your usage of the annotations is wrong. Here is super simplified outline how you should create MainLayout and route that defines a component that is shown in the mainlayout when navigated to that route.
public class MainLayout extends VerticalLayout implements RouterLayout {
private Div childWrapper = new Div();
public void MainLayout() {
setSizeFull();
Span header = new Span("This text should be above the page in the views");
Span footer = new Span("This text should be underneath the page in the views");
add(header);
addAndExpand(childWrapper)
add(footer);
}
#Override
public void showRouterLayoutContent(HasElement content) {
childWrapper.getElement().appendChild(content.getElement());
}
}
#Route(value = "order", layout = MainLayout.class)
public class OrderView extends VerticalLayout {
public OrderView (){
}
}
There is video tutorial about Router concept on vaadin.com page that explains this in detail.

Instead of
new Label("This text should be underneath the page in the views");
try
add(new Span("This text should be underneath the page in the views"));
In Vaadin Flow the Label component is meant to be used coupled with another component, not for adding stand-alone text like in Vaadin 8 and older. Also, every component needs to be added to the layout before they can become visible, just creating them isn't enough.
Unfortunately LoginOverlay doesn't have API for adding extra components within it, but there is an open ticket about the feature that you can add thumbs up on to add more weight to it, and there's also a workaround presented in the comments: https://github.com/vaadin/web-components/issues/626

Styling in Vaadin with css

I am trying to edit the Text of the textfield in Vaadin. I created a file (\WebContent\VAADIN\themes\loginthemes\style.css) with ONLY the following information:
textstyle {
font-family: HelveticaRounded;
font-size: 40px;
font-style: bold;
}
And inside my java file I have the following:
TextField username = new TextField("Username: ");
username.setStyleName("style");
// I also tried username.setStyleName("loginthemes");
The text for the textfield stays the same.

As Jan Galinski said, you should define a proper theme.
For one named "logintheme" you should create VAADIN/theme/logintheme/style.scss as :
#import "../reindeer/reindeer.scss";
.logintheme {
#include reindeer;
.textstyle {
font-family: HelveticaRounded;
font-size: 40px;
font-style: bold;
}
}
Tell the UI to use it:
#Theme("logintheme")
public class MyUI extends UI {
}
Also, your usage of setStyleName() is incorrect: the parameter is the name of your CSS class, not the name of the theme.
So in your case, it should be:
TextField username = new TextField("Username: ");
username.setStyleName("textstyle");

You must specify the theme on your UI class.
#Theme("logintheme")
public class MyUI extends UI {
}
also, you should reference an existing theme via #import, else your theme will look very "reduced".

java gwt flowpanel always new line

I'm trying to use a flowpanel in java gwt but when I add different widgets, the panel adds every widget in a new line, here is how I set the flowPanel
public class Test extends Composite {
public abstract class SomeWidget<T> extends Composite {
...
}
public class SomeStringWidget extends SomeWidget<String> {
...
}
public void setWidget() {
FlowPanel fp = new FlowPanel();
fp.setWidth("100%");
fp.add(new SomeStringWidget());
fp.add(new SomeStringWidget());
...
}
}
Why is every Widget set in a new line and not, as the flowpanel should, add the widgets in a line till there is no more space and then add them in a new line??

Flow Panel generates a DIV-Element with the Style GWT-FlowPanel. If you want that you inner Widgets are inline make the CSS of the inner Widgets with the following CSS:
.SomeStringWidget {
display: inline;
}
or
.SomeStringWidget {
display: inline-block;
}
or
.SomeStringWidget {
float: left;
}
And in your widget set the CSS Class .SomeStringWidget in the constuctor.
public SomeStringWidget {
this.setStyleName("SomeStringWidget");
}

I was facing same issue and assigned style to FlowPanel widget to align widgets in a line. This will solve your problem.
FlowPanel fp = new FlowPanel();
fp.setStyleName("flowPanel_inline");
style.css
.flowPanel_inline
{
display:inline;
}
Also you have to set this same style in added elements also.

If your SomeStringWidget is a Label, then it will always be a new line. If you don't want the newline, use InlineLabel.

setting CSS style Uibinder Gwt

I want to change the color of a g:label using java code on a onBlur event.
I am using eclipse, UIBinder.
This is what I have in mind although it doesn't work.
In my StandardDocumentDownload.ui.xml file
<ui:style>
.testStyle {
}
.styleRequiredData
{
color:red;
}
</ui:style>
this is the event in my standardDocumentDownload.java file
#UiHandler("comboTitle")
void onComboTitleBlur(BlurEvent event) {
int title = comboTitle.getSelectedIndex();
if(title == 0)
{
labTitleReq.setText("Please enter a value");
labTitle.addStyleName("styleRequiredData");
}
else
{
labTitleReq.setText("");
}
}
How could I add the color red to the existing style of the label upon the firing of the event.
Kind regards

See here under Programmatic access to inline Styles
for you, it shoulbe be something like :
<ui:style type="com.yourapp.YourClass.MyStyle">
.testStyle {
}
.styleRequiredData
{
color:red;
}
</ui:style>
public class YourClass extends Widget {
interface MyStyle extends CssResource {
String testStyle();
String styleRequiredData();
}
#UiField MyStyle style;
/* ... */
#UiHandler("comboTitle")
void onComboTitleBlur(BlurEvent event) {
int title = comboTitle.getSelectedIndex();
if(title == 0){
labTitleReq.setText("Please enter a value");
labTitle.getElement().addClassName(style.styleRequiredData);
} else {
labTitleReq.setText("");
}
}
}

Took me a while to find it but the Documentation; "Declarative Layout with UiBinder: Programmatic access to inline Styles" tells you how. Here the code snippets
UiBinder:
<ui:style type='com.my.app.MyFoo.MyStyle'>
.redBox { background-color:pink; border: 1px solid red; }
.enabled { color:black; }
.disabled { color:gray; }
</ui:style>
<div class='{style.redBox} {style.enabled}'>I'm a red box widget.</div>
</ui:UiBinder>
Code behind:
public class MyFoo extends Widget {
interface MyStyle extends CssResource {
String enabled();
String disabled();
}
#UiField MyStyle style;
/* ... */
void setEnabled(boolean enabled) {
getElement().addClassName(enabled ? style.enabled() : style.disabled());
getElement().removeClassName(enabled ? style.disabled() : style.enabled());
}
}
Description:
The element has a new attribute,
type='com.my.app.MyFoo.MyStyle'. That means that it needs to implement
that interface (defined in the Java source for the MyFoo widget above)
and provide the two CSS classes it calls for, enabled and disabled.
Now look at the #UiField MyStyle style; field in MyFoo.java. That
gives the code access to the CssResource generated for the
block. The setEnabled method uses that field to apply the enabled and
disabled styles as the widget is turned on and off.
You're free to define as many other classes as you like in a style
block with a specified type, but your code will have access only to
those required by the interface.

How to disable / change style of wicket button link in onClick()

In a Wicket app, I have a bunch of <button> elements to which I'm attacking a Link component. Now in the onClick() method of the component I want to disable or change the style of the button. How can I do that? Calling setEnabled(false) has no effect.

Repeated uses of onClick() are operating on the same object in memory. If you're not using Ajax, you can still maintain some state in an anonymous subclass of Link. Then, you can use onBeforeRender() and onComponentTag() to change how it is displayed each time.
Link<Void> link = new Link<Void>("myLink") {
private String customCSS = null;
private boolean customEnabled = true;
public void onClick() {
if (/* test to determine disabled */) {
customCSS = "disabled";
customEnabled = false;
} else {
customCSS = null;
customEnabled = true;
}
}
#Override
protected void onComponentTag(ComponentTag tag) {
super.onComponentTag(tag);
if (customCSS != null)
tag.put("class", customCSS);
}
#Override
public boolean isEnabled() {
return super.isEnabled() && customEnabled;
}
};
AttributeModifiers (or other behaviors) aren't good for this case because, if you add them in the onClick() method, they will begin stacking on the same link for each click - since they are maintained as part of the Link's state.
Your Link can keep track of all manner of state, allowing your onClick() method to enable/disable/change/etc with repeated clicks.
You can also override onBeforeRender(), isVisible(), and other methods that are run each time the link is displayed on the page. The constructor, onConfigure(), and others are run just once, regardless of how many times you click the button.

I don't think this is an entirely good idea in Wicket. Of course it could be done by trickery, but it's far simpler to either:
Override the isEnabled() method to return a value derived from the model of the form/component.
Attach an AttributeModifier when you create the component, and use a model for it which returns a value derived as above.
Whichever you choose, the principle is to let Wicket "pull" rendering information in rather than pushing it explicitly.

The answer provided by Michael Borgwardt is nearly correct.
The problem is that you use Link. Disabled Links use <span> instead of
<a>/<button> and are surrounded with <em> by default. Using Button
component will set 'disabled' attribute in the element.
I would like to add, that you need to use HTML button element instead of <a> (link). Original answer can be counfusing, because Link and Button also exist in Wicket.

I think AjaxCallDecorator should be the class you need to use to disable/change style of the button.

The problem is that you use Link. Disabled Links use <span> instead of <a>/<button> and are surrounded with <em> by default.
Using Button component will set 'disabled' attribute in the element.

Take a look at SimpleAttributeModifier and AttributeAppender. Depending on your actual requirements one of those should do the trick. SimpleAttributeModifier adds or replaces an attribute of any HTML-Tag that has a prepresentation in wicket (replaces the css class), while AttributeAppender appends to the attributes (adds another css class). This should work for enabling/disabling buttons as well but I haven't tried that.
Example:
Label label = new Label("id", "Some silly text.")
add(label);
label.add(new SimpleAttributeModifier("class", "my-css-class");
For Ajax you'll have to add the component to the target as well.
More detailed example:
Java code:
import org.apache.wicket.behavior.AttributeAppender;
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Button;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.model.Model;
public class DemoPage extends WebPage {
public DemoPage() {
Form form = new Form("form");
add(form);
final WebMarkupContainer wmc = new WebMarkupContainer("greenText");
form.add(wmc);
form.add(new Link("redLink"){
#Override
public void onClick() {
wmc.add(new SimpleAttributeModifier("class", "redText"));
}});
final Button boldButton = new Button("boldButton"){
#Override
public void onSubmit() {
wmc.add(new AttributeAppender("class", true, new Model<String>("boldText"), " "));
}};
form.add(boldButton);
Link disabler = new Link("buttonDisabler") {
#Override
public void onClick() {
boldButton.add(new AttributeAppender("disabled", true, new Model<String>("disabled"), " "));
}
};
form.add(disabler);
}
}
corresponding HTML:
<html>
<head>
<style>
.redText {
color: red;
}
.greenText {
color: green;
}
.boldText {
font-weight: bold;
}
</style>
</head>
<body>
<form wicket:id="form">
<div class="greenText" wicket:id="greenText">This is Green.</div><br />
Make it red<br />
<input type="submit" wicket:id="boldButton" value="Make it bold" /><br />
Disable the button
</form>
</body>
</html>