How to set width in CSS class programatically with GWT? - java

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

Related

How to force a Value change on a Vaadin RichTextArea component

I have developed a custom component consist of a layout and two labels within it. This layout is draggable. The code is similar to this :
DragAndDropWrapper boxWrap= new DragAndDropWrapper(layout);
mainLayout.addComponent(boxWrap);
After that I have a RichTextArea that allows the layout to be dropped in it. With this code.
RichTextArea richText= new RichTextArea;
DragAndDropWrapper dndWrapper = new DragAndDropWrapper(richText);
dndWrapper.setDropHandler(new DropHandler() {
public void drop(DragAndDropEvent event) {
//Do whatever you want when something is dropped
}
//Criterio de aceptacion
public AcceptCriterion getAcceptCriterion() {
return AcceptAll.get();
}
});
The code works fine. But when I drop the layout within the RichTextArea y want to get the Text written in this area and add some text but the method richText.getValue() is not updated unless I change the focus to another component or tab out. I guess there is not being communication with the server side so the value is not updated. Is there any way to force a a focus change when mousedown on the layout? I tried with JavaScript but i dont know how to add a onmousedown="function()" attribute to the layout component. I also tried extending RichTextArea and implementing the MouseListener or something or a TextChangeListener, but nothing works.
Any clue? Thank you.
PS: The component cannot be different from a RichTextArea.
Have you set richText.setImmediate(true); ?

GWT styling my image in Java makes my page not load

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!

Open an url in a new tab from a Jpanel inside a JApplet

So my Applet work like that :
The main .class is extended from JApplet, therefore it can be use as an applet.
This main class load other .class file to display new window, that are extented from JPanel.
This current set up work fine as an applet, however, in one of my JPanel class I have a button that open an URL. I use the Desktop API and it works fine on the browser, the problem is : It opens the URL in the same tab as the applet.
I would like the URL to open in a new tab from my JPanel. I know I can use something like :
AppletContext a = getAppletContext();
URL url = new URL(link);
a.showDocument(url,"_blank");
but the method getAppletContext() only work from a class that has extented JApplet, not a JPanel.
I have tried to change my Jpanel to a JApplet but that seems to create some kind of mess.
Any idea how I could achieve that ?
Thank you !
I haven't tried it, but two possibilities come to mind:
Pass the AppletContext to your JPanel as a constructor parameter.
Set the target attribute in the URL, as shown here.

want to access the css styles from my java code

i have a css in my GWTApplication which contains several classes in that,I want to access the class attributes through my program,is there any way to access them via java code or CssResource.
If there is any let me know with the sample code?
One can access CSS classes through GWT code but not its class attributes through setStyleName(String) method. For example
Button button = new Button();
button.setStyleName("Stylename");
for example css of
.StyleName {
background : #abcdef;
}
Further you can change the value of some attributes without css like
button.setWidth("100px");
button.setHeight("20px");
Take a look at SAC : http://www.w3.org/Style/CSS/SAC/Overview.en.html

JApplet fails to run in HTML page

I have created a JApplet using the JUNG library in Netbeans that compiles and runs normally. However, when I try to create an html file that runs the applet, only a grey pane appears but the components are missing.
My class is :
public class View extends JApplet {
//Here I declare the buttons etc..
public View()
{
initializeComponent();
fetchGraphs();
}
public static void main(String[] args) throws IOException{
f = new JFrame();
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
x = screenSize.width;
y = screenSize.height;
f.getContentPane().add(new View());
f.setTitle("Social Network Privacy Settings and Access Control");
f.setLocation(new Point(15, 20));
f.setSize(new Dimension(x-20,y-50));
f.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
f.setResizable(false);
f.setVisible(true);
}
}
The method initializeComponent() adds all the components to the main window. I used JFrameBuilder to build some basic components. JFrameBuilder uses a method addComponent(container, component, x, y, width, height) to add components
I use the code below for that:
contentPane = (JPanel)this.getContentPane();
//to create the japplet contentpane
addComponent(contentPane, genGraphButton, (int)(0.35*x),(int)(0.63*y),
(int)(0.2*x),28);
// to add components
Then I create an html file:
<applet code = 'MyPackage.View'
archive = 'MyProject.jar',
width = 1600,
height = 800/>
in the /dist folder but then only a grey pane appears when I try to open it with Mozilla Firefox. The strange thing is that I have created another simple applet, this time with netbeans JBuilder and it runs normally in a web page.
I really need some help!
You mention the JUNG library, it relies on the two third party libraries, Collections-Generic & Cern Colt Scientific Library 1.2.0. As mentioned by #othman they need to be added to the run-time class-path of the applet (added to the archive attribute of the applet element).
But just so we are clear, make sure the HTML contains more than just the applet element. Something like this:
<html>
<body>
<applet
code='MyPackage.View'
archive='MyProject.jar,jung.jar,collections.jar,colt-scientific.jar'
alt='Java is DISABLED in this browser!'
width='1600'
height='800'>
This browser does not recognize the applet element!
</applet>
</body>
</html>
Of course, you'll need to change the names of the last 3 Jars to their real names.
I'm no Applet expert, since I don't use them, but IIRC you need the init() method to initialize your view. main(...) is not called for an applet.
First, I am not sure that new lines you added into the html are legal. I mean write <applet and /> without any new lines and spaces.
Second, test that your jar is really available. To do this go to the same URL that you go to retrieve your HTML without HTML but with jar, i.e.
if your HTML URL is: http://somehost/my.html type in browser http://somehost/MyProject.jar and see that you can download the jar.
if this works check the code attribute. Is your package name really MyPackage? Capitalized? Do you know it is not according the naming convention?
Also check java console. Find it somewhere in menus of your browser: it depends in browser. I believe that you will see the reason there in form of exception stack trace.
you need to reference also the JUG jars in your applet tag :
<
applet code = 'MyPackage.View'
archive = 'MyProject.jar , jung_xx.jar',
width = 1600,
height = 800 /
>
in the archive attribute add all jung jars that you have currently in your netbeans project classpath.

Categories