So I am adding a shopping cart to my GWT webpage, I would like to add a cart image to this shopping cart. I have set up my image as follows.
General Icon Interface
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
public interface GeneralIcons extends ClientBundle {
public static final GeneralIcons INSTANCE = GWT.create(GeneralIcons.class);
#Source("cart_red.png")
ImageResource cartRed();
}
Class Using Image
...
Image shoppingCartImage = new Image(GeneralIcons.INSTANCE.cartRed());
...
If I stop right here than everything works properly, and my image shows up. But I would like to style my image, for instance I want to put some padding around the edges of my image so I try
...
Image shoppingCartImage = new Image(GeneralIcons.INSTANCE.cartRed());
shoppingCartImage.getElement().addClassName(style.padding());
...
When I do this and recompile, nothing shows up at all on my page, just a straight white background. Any Idea what I did wrong?
Edit
So in my console I found
Uncaught TypeError: Cannot read property 'padding' of null
I am sure I have setup my style correctly (using UiBinder) as I have done this before and it is working correctly in other classes.
Try adding your style to Image, not its element:
shoppingCartImage.addStyleName(style.padding());
Ahh so remember when I was so sure I setup my style correctly? Yeah that was wrong. I had the following code in my class
interface MyStyle extends CssResource {
String padding();
}
MyStyle style;
Well it needed to be
interface MyStyle extends CssResource {
String padding();
}
#UiField
MyStyle style;
Thanks everyone!
Related
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
I think I'm doing everything right in my code but my background won't show up in my processing project, here is my code.
package finalproject;
import processing.core.PApplet;
import processing.core.PImage;
public class FinalProject extends PApplet {
PImage background;
PImage player;
public void setup() {
size(1360, 1080);
player = loadImage("player.png");
background = loadImage("rust.png");
}
public void draw() {
background(background);
image(player, 500, 500);
}
}
Processing expects files to be inside a data directory next to the code.
You're presumably running this from an IDE like Eclipse instead of the Processing editor, so where you put that data directory depends on how your code is setup. And you haven't posted a MCVE, so it's hard to help you with that.
But basically, you need to debug your sketch to figure out exactly where Processing is looking for the files. Then you need to move the files there. This is probably something simple like putting them inside a data directory.
If you still can't get it working, please post a MCVE along with a screenshot or a description of your directory structure.
If you are using the processing IDE than the data folder should be located in your sketch folder next to all the .pde files. Make sure that the image you are using has the same resolution as the sketch window. If you are still having issues I would recommend that you try moving your setup and draw methods out of your class and into the main processing sketch.
Please suggest the way to take screenshot of URL/HTMLFile in java.
I am trying with LOBO Browser and able to Open URL in jframe but not able to take screenshot of content inside jframe.
Please check code sample
import org.lobobrowser.gui.FramePanel;
public LoboTestFrame() throws Exception {
FramePanel framePanel = new FramePanel();
this.getContentPane().add(framePanel);
framePanel.navigate("http://en.wikipedia.org/wiki/Main_Page");
}
Not able to capture loaded content as image
Yes. Combine Desktop#browse(), mentioned here, with Robot#createScreenCapture(), illustrated here and here.
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.
Situation: I'm working with Wicket's IndicatingAjaxButton. I have the button set up on a page with black background. When the user pushes the button, the button's activity indicator goes off and spins until the system is ready to move on.
Problem: Because of the black background, the indicator looks bad. Since part of the indicator is animated in black, some of the details are lost using the indicator on a black background.
Question: Is it possible in Wicket to change the color of the IndicatingX [Button, Link, etc.], or do I have to design my page in a new way?
So piggybacking off what Lord Torgamus provided, you could add a class like this:
abstract class OnBlackIndicatingAjaxButton extends AjaxButton implements
IAjaxIndicatorAware {
private final AjaxIndicatorAppender indicatorAppender = new
AjaxIndicatorAppender() {
#Override
protected CharSequence getIndicatorUrl() {
return "http://blogs.msdn.com/blogfiles/gduthie/WindowsLiveWriter/Needananimatedloadingicon_B811/ajax-loader_2.gif";
}
};
public OnBlackIndicatingAjaxButton(String id) {
super(id);
add (indicatorAppender);
}
public OnBlackIndicatingAjaxButton(String id, Form<?> form)
{
super(id, form);
add (indicatorAppender);
}
/**
* #see IAjaxIndicatorAware#getAjaxIndicatorMarkupId()
* #return the markup id of the ajax indicator
*
*/
public String getAjaxIndicatorMarkupId()
{
return indicatorAppender.getMarkupId();
}
}
and use that for any of your pages.
This is not possible. Well, not programmatically.
Wicket's activity indicator/throbber/spinner is actually nothing more than an animated GIF. It's located at
[your version of Wicket here]\wicket-src\wicket\src\main\java\org\apache\wicket\ajax\indicator.gif
and referenced in AbstractDefaultAjaxBehavior.
To change the colors, you could create your own animated GIF of the same size and overwrite the one that's included in the default distribution.
EDIT:
Okay, after writing that I thought "there must be free icons available" and came up with this through Google Image Search:
http://blogs.msdn.com/blogfiles/gduthie/WindowsLiveWriter/Needananimatedloadingicon_B811/ajax-loader_2.gif
I think it's free and unrestricted to use, but I didn't check too carefully. You should check for yourself if you're using it for anything more than a personal toy/sample app.