How to update the style of a JSF component at runtime, I must clarify that I want to change the position of the component and in some cases hide it.
<ui:define name="reverso" id="reverso" >
<!-- Logo Estado Próspero -->
<p:graphicImage value="./resources/oficiales/prospero.png" style="width: 90px; height: 50px;position: relative; left: 150px" />
<h:form id="dataRfc">
<h:outputText id="display_rfc" rendered="true" value="#{IDWizard.rfc}" binding="#{IDWizard.outRfc}" style="color: #333333;text-align:center;margin-top: 30px" />
</h:form>
</ui:define>
public void setNoPersonal(String noPersonal) {
this.noPersonal = noPersonal;
this.outNombre.setValue(this.noPersonal);
this.outNombre.setRendered(true);
this.outRfc.setStyle("text-align:left;color:red;margin-top:2px");
//component.getAttributes().put("style", "color:red");
this.outRfc.setRendered(true);
}
You can just use EL expressions in the style and styleClass attributes. You can use the conditional operator ?: in EL to print different strings based on a boolean condition.
E.g.
<h:someComponent styleClass="#{bean.show ? 'show' : 'hide'}" />
with this getter
public boolean isShow() {
return show;
}
and this CSS
.show {
display: block;
}
.hide {
display: none;
}
Note that the above still renders the component to the client side, so you would be able to toggle the visibility using plain JavaScript.
Or, if you actually want to show/hide it entirely server side, then you could use the rendered attribute for this instead. It also just accepts EL expressions:
<h:someComponent rendered="#{bean.show}" />
You only need to keep in mind that when this evaluates false, then this component is not present in the client side at all, so you won't be able to show it again using plain JavaScript or Ajax. When showing it using Ajax, you need to re-render its parent component instead.
Update based on your new code snippet, this is not the right way. You should not bind the component to the bean for this. You should also define CSS styles in its own .css file which is much easier to maintain and keeps your bean and view from specific CSS clutter.
E.g. (I randomly guess that the styles are dependent on some kind of error/success state)
<h:outputText id="display_rfc" value="#{IDWizard.rfc}" rendered="#{IDWizard.show}"
styleClass="#{IDWizard.success ? 'success' : 'error'}" />
with those getters
public boolean isShow() {
return show;
}
public boolean isSuccess() {
return success;
}
and this CSS
.success {
text-align: center;
color: #333333;
margin-top: 30px;
}
.error {
text-align: left;
color: red;
margin-top: 2px;
}
You just have to set those booleans accordingly in bean's (post)constructor or action(listener) method.
Related
Is there a way to edit a custom css class of mind to enable these css style rules
http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/MenuBar.html
I currenly created my MenuBar through code like :
MenuBar menuButton = new MenuBar();
menuButton.addStyleName(masterPanel.getmenuBar());
Using the interface to get the css class:
interface Style extends CssResource {
String menuBar();
String action();
}
I have a css class that can ONLY edit my menu bar:
.menuBar {
cursor: default;
text-align: center;
background: transparent;
border: none;
color: white;
text-shadow: none;
font-size: 16px;
}
Is there a way i can access styles like:
.gwt-MenuBar-horizontal
.gwt-MenuBar-vertical
.gwt-MenuBar .gwt-MenuItem
.gwt-MenuBar .gwt-MenuItem-selected
.gwt-MenuBar .gwt-MenuItemSeparator
.gwt-MenuBar .gwt-MenuItemSeparator .menuSeparatorInner
.gwt-MenuBarPopup .menuPopupTopLeft
First i added your css snippet to the .css of the project and added it to the menu bar with menuButton.setStyleName("menuBar"). Then i added the following to the project css class (as an example) :
.gwt-MenuItem-selected
{
color:red !important;
}
Now the first menuBar style is enabled and the additional style is set, too. Its necessary to use the !important to override the default properties.
I want to generate a Cell for a CellWidget with the UiBinder (UiRenderer). What I did to generate the cell is in MyCell.java:
public class MyCell implements AbstractCell<MyDto> {
public interface Resources extends ClientBundle {
#Source({Css.DEFAULT_CSS })
Css css();
}
public interface Css extends CssResource {
String DEFAULT_CSS = "test/MyStyle.css";
String test();
}
interface MyUiRenderer extends UiRenderer {
void render(SafeHtmlBuilder sb, String name, SafeStyles styles);
}
private static MyUiRenderer renderer = GWT.create(MyUiRenderer.class);
Resources resources = GWT.create(Resources.class);
#Override
public void render(SafeHtmlBuilder safeHtmlBuilder, MyDto model) {
SafeStyles style = SafeStylesUtils.fromTrustedString(resources.css().test().toString());
renderer.render(safeHtmlBuilder, model.getName(), style);
}
}
My MyCell.ui.xml file looks like this:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:with field="name" type="java.lang.String" />
<ui:with field='styles' type='com.google.gwt.safecss.shared.SafeStyles'/>
<div style="{styles}"><ui:text from="{name}" /></div>
</ui:UiBinder>
MyStyle.css:
.test {
background-color: red;
font-size: 20px;
display: flex;
...
}
When I run my code I get the following error:
[DEBUG] [mobile] - Rebinding test.client.app.MyCell.MyUiRenderer
[DEBUG] [mobile] - Invoking generator com.google.gwt.uibinder.rebind.UiBinderGenerator
[ERROR] [mobile] - java.lang.String required, but {styles} returns com.google.gwt.safecss.shared.SafeStyles: <div style='{styles}'> (:9)
[ERROR] [mobile] - Deferred binding failed for 'test.client.app.MyCell.MyUiRenderer'; expect subsequent failures
[ERROR] [mobile] - (GWT.java:72) 2014-06-08 17:15:05,214 [FATAL] Uncaught Exception:
Then I tried to this:
<ui:with field="styles" type="java.lang.String" />
in my UiBinder but it does not work.
How can I use css style from a CssResource in my UiRenderer?
<div style="{styles}">
Two problems here. First, in order to change the style of an element, you have two options, setting the style attribute to include specific properties, or set the class attribute to point to a class you’ve defined in CSS somewhere. So, you really want to set class here, not style.
Second, you created a css class called "test", but are assigning here just the whole interface, styles. Instead, reference styles.test:
<div class="{styles.test}" />
Edit: one final piece you may be missing (but since "This does not work" is so vague I don't know if this is your actual problem): I don't see any call to ensureInjected() in your example. Make sure you call this on your Css instance before using it.
you have to put .asString after styles in the xml:
<div style="{styles.asString}"><ui:text from="{name}" /></div>
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".
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>
saveButton.setStylePrimaryName("jtyfj");
If I do that to a button, it removes the default "gwt-button' class and replaces it with 'jtyfj'. My question is, is there a way to apply this yo all buttons by default. I'd really rather not have any default gwt-styles being referenced.
Also, is there a way to do it with a ClientBundle CSSResource?
Why don't you just use another class that extends Button and set the style in the constructor?
public class StyleButton extends Button {
public StyleButton() {
this.setStylePrimaryName("jtyfj");
}
}
Whenever you create an instance of StyleButton it will have the style you want.
I you want the style to be applied to ALL the buttons in your app. You may as well customize the GWT Standard Theme css and replace the desired style with your own:
.gwt-Button {
/* Replace the following properties with your own */
margin: 0;
padding: 3px 5px;
text-decoration: none;
font-size: small;
cursor: pointer;
cursor: hand;
background: url("images/hborder.png") repeat-x 0px -27px;
border: 1px outset #ccc;
}
It will avoid creating a new control for each widget you want to customize.