I'm playing around with GWT using Netbeans and Java. I have several labels and buttons with css styling which are working, however, I have added another label which I cant seem to get the css to work!
final Label numbersLabel = new Label();
numbersLabel.setStyleName("numberLabel");
drawButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
int numberTest;
String number;
numberTest = testRandom.testNumbers();
number = Integer.toString(numberTest);
numbersLabel.setText(number);
RootPanel.get().add(numbersLabel);
}
});
Here is the CSS
.numberLabel {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bold;
text-align: center; }
On the button click, the label is displayed however, none of the css is implemented. Any help would be appreciated.
You could just go with:
numbersLabel.getElement().getStyle().setProperty("color", "white");
And so on...
But remember to always write the Style Atrribute Name in CamelCase e.g. font-family = fontFamily
I am using wicket components here. My view is as below.
I need to regenerate the report and reload the report frame with the button click (GO). But this div is not reloading even I replaced old element with a new report element. Can anyone help me with this?
form.add(new AjaxLink<Void>("goLink") {
#Override
public void onClick(final AjaxRequestTarget target) {
System.out.println(reportType+"go button clicked");
final IResourceStream stream = renderItems();
//generate report and create a new component using that.
Component component = new AIAIframe("reportFrame", stream);
component.setOutputMarkupId(true);
this.addOrReplace(component);
System.out.println("new framwe added reportframe");
}
});
add(form);
Please find the markup.html below
<wicket:extend>
<div style="margin-left:3%;">
<form wicket:id="form">
<span>
<h4>Report Erscheinung Auswahl</h4>
<select wicket:id="chooseType" style="margin-left:5%;">
<option>Kostenvoranschlag</option>
<option>Aufträge</option>
<option>Rechnungen</option>
</select>
</span>
<span>
GO
</span>
</form>
</div>
<br>
<style>
a.downloadLink {
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 6px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
.aia-center {
margin:0 auto;
padding: 6px;
}
</style>
<div class="aia-center">
<span>Download as: </span>
<select wicket:id="formatSelect">
</select>
Download
</div>
<span style="height: 100%; width: 100%" wicket:id="reportFrame"></span>
You need to call target.add(component) if you want this component to be re-rendered with the Ajax response.
Since you re-create the component with wicket:id="reportFrame" you need to make sure that the initially rendered one (before the Ajax request) also had .setOutputMarkupId(true) so that the Ajax logic can find it in the browser DOM and replace it with the new one.
I am using MultiUploader and sometimes "uploader" button is cropped. It happens only if at the time of page loading uploader button is invisible. When I further make it visible, button becomes visible, but cropped. If page is loading with param=true everything is okay.
//mvp4g is used
public void onEventBusEventName(boolean param) {
...
view.uploader.setVisible(param);
...
this.view.logoUploader.setI18Constants(UiConstants.INSTANCE);
this.view.logoUploader.setStyleName("logo-uploader");
view.logoUploader.addOnFinishUploadHandler(new IUploader.OnFinishUploaderHandler() {
#Override
public void onFinish(IUploader uploader) {
if (uploader.getStatus() == IUploadStatus.Status.SUCCESS) {
String fileId = uploader.getFileInput().getName();
updateLogo(fileId);
} else {
Window.alert(uploader.getStatus().toString());
}
}
});
...
eventBus.setCenterContent(view); //setting root widget to specified view currently showing
}
How it looks:
http://imgur.com/i0rxerJ.jpg
ClassView:
#UiField
MultiUploader logoUploader;
ClassViewUi:
<gwtupload:MultiUploader type="BUTTON" ui:field="logoUploader" title="Upload new logo"
avoidRepeatFiles="true" maximumFiles="1"
validExtensions="jpg,png,jpeg,bmp"/>
Css:
.logo-uploader {
margin-bottom: 10px;
float: left;
}
.logo-uploader .gwt-Button {
display: inline-block;
width: 171px;
height: 26px;
background: url(../i/sprite.png) -1px -335px no-repeat;
text-align: center;
text-decoration: none;
line-height: 1;
border: none;
color: #195c84;
cursor: pointer;
}
.logo-uploader .gwt-Button:hover {
background: url(../i/sprite.png) -1px -362px no-repeat;
}
I have an
IFrameElement fie;
for which I need to apply the css style:
p{
font-family: arial,sans-serif;
color: #666666;
font-size: 9px;
text-align: left;
line-height: 1px;
font-weight: bolder;
}
But I just find a way to GET the style and not SET it
Style s = fie.getContentDocument().getBody().getStyle();
How can I apply the css for this IFrameElement?
Try this:
fie.getContentDocument().getBody().setId("myframe");
and in the css file:
p, .myframe p {
font-family: arial,sans-serif;
color: #666666;
font-size: 9px;
text-align: left;
line-height: 1px;
font-weight: bolder;
}
I've created an AbstractCell<String> to create the header that says "welcome to your mobile..." and I would like to add two buttons in this AbstractCell: the first to return to the previous page, and the second to return to the welcome page.
I've used to create the header element a class that extends AbstractCell<String> using this code:
public class HeaderCell extends AbstractCell<String> {
interface Templates extends SafeHtmlTemplates {
String style = "HeaderPanel";
#SafeHtmlTemplates.Template("<div class=\""+style+"\">{0}</div>")
SafeHtml cell(SafeHtml value);
}
private Templates templates = GWT.create(Templates.class);
interface templateWithButton extends SafeHtmlTemplates {
}
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String value, SafeHtmlBuilder sb) {
SafeHtml safeValue = SafeHtmlUtils.fromString(value);
SafeHtml rendered = templates.cell(safeValue);
sb.append(rendered);
}
}
Is there any way to add these two buttons?
Please notice the header cell wich is colored in black.
PS: To set the header element looking like the image below, I use this CSS:
.HeaderPanel {
-moz-box-shadow: inset -1px -1px 15px 1px #ffffff;
-webkit-box-shadow: inset -1px -1px 15px 1px #ffffff;
box-shadow: inset -1px -1px 15px 1px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #242524
), color-stop(1, #242524) );
background: -moz-linear-gradient(center top, #242524 5%, #242524 100%);
background-color: #242524;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 1px solid #dcdcdc;
color: #ffffff;
font-family: arial;
font-size: 17px;
font-weight: bold;
padding: 8px 36px;
text-decoration: none;
text-shadow: 1px 1px 29px #ffffff;
text-align: center;
}
I'm not really sure if this is the best implementation, but it works for me.
-- First, add this to your constructor:
public HeaderCell() {
super("click", "keydown");
}
-- Then, override the onBrowserEvent:
#Override
public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) {
// Let AbstractCell handle the keydown event.
super.onBrowserEvent(context, parent, value, event, valueUpdater);
// Handle the click event.
if ("click".equals(event.getType())) {
EventTarget eventTarget = event.getEventTarget();
// in here we check whether the cell that was being clicked is an image, not the entire cell
if(eventTarget.toString().contains("img src") && !eventTarget.toString().contains("<div class")){
// do something if it's indeed the image that was clicked
}
}
}
Cheers, Lin
What about using CompositeCell with ActionCells for your buttons?
http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/cell/client/CompositeCell.html
new CompositeCell<C>(Arrays.<HasCell<C, ?>>asList(
new IdentityColumn<C>(new ActionCell<C>("<", new Delegate<C>() { ... })),
new Column<C, String>(new HeaderCell()) { ... },
new IdentityColumn<C>(new ActionCell<C>(">", new Delegate<C>() { ... }))
));
// create the button element
Element button = DOM.createButton();
// here you can alter the html based on your needs
button.setInnerHTML(<"button type="button">Click Me! <"/button>");
// add it to the safehtmlbuilder
sb.appendHtmlConstant(button.getInnerHTML());