I need to be able to change the following styles in gwt only through the use of the css file and no java at all.
Font Size of the top tab of decorated panel
Then, the Header of the Stack Panel
The header of the caption panel
This page might be useful for you:
http://code.google.com/intl/sv-SE/webtoolkit/doc/latest/DevGuideUiCss.html
Basically, most of the GWT widgets have a class called gwt-(Classname) (e.g. gwt-StackPanel). Some have multiple ones. This should be described in the API as well, e.g.:
http://asquare.net/gwt/javadoc/1.0.21/com/google/gwt/user/client/ui/StackPanel.html
Related
Both Eclipse an Netbeans provide a vertical points of interest highlighter next to document scroll bars, which appears to be a part of an extended JScrollPane or is simply a standalone custom component.
I've marked it on the picture below (Netbeans and Eclipse version, in that order).
It highlights lots of different things and represents a flat view of the entire document.
What is this area/component called in general?
I've been looking around on pointers on how to implement such a thing in swing or abuse an existing implementation to my liking but I don't even know what to search for. Both implementations of this thing appear to be quite similar, so I'm hoping they are based on the same piece of code.
It's an extend JScrollPane which has implemted some kind of column footer.
The default JScrollPane provides row and column headers by default, check out How to use scroll panes for more details
Try taking a look at JideScrollPane from jidesoft
Eclipse just calls these vertical rulers (they are implemented with SWT in Eclipse).
I just started working with GWT Widgets. I am familiar with jQuery and GWT Query is similar and hence I'm comfortable with it.
I need to make a custom widget in GWT which encompasses the functionality I made in GQuery.
I know that GWT widgets need to be contained in a panel, but I have an existing element in GQuery. So I guess I need to convert that element to a widget first. How should I go about it ?
Using last code in GQuery (1.2.1-SNAPSHOT), you should be able to convert any element into a gwt panel using the panel() method.
GQuery myGQueryWidget = $("<div><h1>Hello</h1>World</div>");
Panel myGwtWidget = myGQueryWidget.as(Widgets.Widgets).panel();
Of course you can use this panel as any widget which you can add to any other gwt panel, or even you could add other gwt widgets to it.
You have to be aware about events because if you add gwt events to the panel it will remove events added with gquery
you can use GWTQuerys WidgetsHtmlPanel(http://gwtquery.googlecode.com/svn/trunk/gwtquery-core/javadoc/com/google/gwt/query/client/plugins/widgets/WidgetsHtmlPanel.html ) to convert HTML content to Panel.
This should do the trick.
What is the best way to implement a horizontal navbar in GWT? Using a MenuBar, a TabLayoutPanel, or coding something by hand, that is take a bunch of divs an float them within another div? If played around using TabLayoutPanel but wasn't able to style it to fit my needs.
EDIT
Here's what I intend to do: I have a MasterPage, laid out using a DockLayoutPanel. I have a header, footer, and a content area. After login, the content are should be filled with some sort of navigation and an area showing some panel with some widgets.
The problem with MenuBar (and MenuItems) is its rendering. GWT is rendering everything regarding menus as table and bunch of s and s. This usually messes up the layout of the rest of the page since GWT 2.0+ uses s for most of the widgets.
So, until GWT comes up with the "Layout" version for the MenuBar custom solution is probably the best solution.
A horizontal MenuBar works great for us. Give each MenuItem a Command that triggers your navigation system, or just swap controls in and out of your content area directly.
A MenuBar will be more flexible than using a TabLayoutPanel, but less flexible than a bunch of custom-coded divs.
I am displaying HTML content inside a Swing JEditorPane. To change the default look of the HTML i am using a CSS style sheet. This works great. My problem is only that the JEditorPane does not support the full CSS specification. Is there a list of CSS features the JEditorPane supports?
Looking at the CSS.java sourcecode freom the OpenJava JDK, I found this:
Defines a set of CSS attributes as a typesafe enumeration. The HTML View implementations use CSS attributes to determine how they will render. This also defines methods to map between CSS/HTML/StyleConstants. Any shorthand properties, such as font, are mapped to the intrinsic properties.
The following describes the CSS properties that are suppored by the rendering engine:
font-family
font-style
font-size (supports relative units)
font-weight
font
color
background-color (with the exception of transparent)
background-image
background-repeat
background-position
background
background-repeat
text-decoration (with the exception of blink and overline)
vertical-align (only sup and super)
text-align (justify is treated as center)
margin-top
margin-right
margin-bottom
margin-left
margin
padding-top
padding-right
padding-bottom
padding-left
border-style (only supports inset, outset and none)
list-style-type
list-style-position
The following are modeled, but currently not rendered.
font-variant
background-attachment (background always treated as scroll)
word-spacing
letter-spacing
text-indent
text-transform
line-height
border-top-width (this is used to indicate if a border should be used)
border-right-width
border-bottom-width
border-left-width
border-width
border-top
border-right
border-bottom
border-left
border
width
height
float
clear
display
white-space
list-style
Java has had a relatively poor record with regard to HTML/CSS support. The comment in the docs highlighted by trashgod have been promising improvements for years. Around about the time when JavaFX was being released there was talk of an official JWebPane which would allow Java developers access to the webkit engine, as used in Safari and Chrome. However, it never materialised.
The only advice I can offer is to look at alternative HTML/CSS renders for Java. One I'm often recommending is the xhtmlrenderer project. Development has slowed down as it generally maintains the existing version with the occasional bugfix. It targets CSS2.1, which is often more than adequate; although perhaps it'll move into CSS when the standard is actually finalised.
JEditorPane is very limited. You are better off integrating a native web browser if you want proper HTML display.
Check projects like DJ Native Swing project: http://djproject.sourceforge.net/ns
I'm trying to get a simple layout working under GWT 2.0 using UiBinder. The layout I'm trying to get is one that mimic Java's BorderLayout in where you can specify different panels in the north, south, east, west and center directions; for that I'm using DockLayoutPanel. I would like to get a header and footer, both with fixed width. The remaining viewport space would be occupied by the widget assigned to the DockLayoutPanel center slot.
The current .ui.xml file I've got is:
<g:DockLayoutPanel unit='EM'>
<g:north size='2'>
<g:HTML>HEADER</g:HTML>
</g:north>
<g:south size='2'>
<g:HTML>FOOTER</g:HTML>
</g:south>
<g:center>
<g:HTML>
<div id='loginform'>Hello!</div>
</g:HTML>
</g:center>
</g:DockLayoutPanel>
The browser only renders HEADER at the top left corner. How can I achieve the layout I'm looking for? It seems that there's more CSS you've got to know before you can use GWT layout panels, but that kind of defeats the purpose of creating the UI with it.
This works for me with none of the hacks suggested by RaphaelO.
The Javadoc example on the DockLayoutPanel uses 192 as the width for West. This is wrong - the author probably thought he was using PX, but he was using EM. So if you zoom out, you'll see that Center is far to the right.
Have you checked your using Standards Mode? This is required for the DockLayoutPanel.
Also, forgot to mention that you should use RootLayoutPanel when you add the DockLayout in your entrypoint class - don't use RootPanel.
The use of the newly introduced Layout Panels is indeed quite confusing. There is a way to make the layout occupies the whole client area. It requires a little bit of Java code in addition to the ui.xml file.
In your EntryPoint class, add a UiBinder definition with a annotation to the ui.xml file which declares the layout:
#UiTemplate("LayoutDeclarationFile.ui.xml")
interface DockLayoutUiBinder extends
UiBinder<DockLayoutPanel, TheEntryPointChildClass> {
}
private static DockLayoutUiBinder uiBinder = GWT
.create(DockLayoutUiBinder.class);
in the onModuleLoad function, instantiate the UiBinder, retrieves its root and directly add it to the DOM:
public void onModuleLoad() {
DockLayoutPanel layout = uiBinder.createAndBindUi(this);
// Make sure we use the whole client area
Window.setMargin("0px");
// Add the panel to the DOM
RootLayoutPanel.get().add(layout);
}
I tried your code block as well as the the sample block on the javadoc page for DockLayoutPanel and I am getting similar results. Only the data in the North section of the DockLayoutPanel seems to be displayed. However when i search the page (using firefox and safari on Mac) the other elements are found but they are not showing anywhere. Seems like there might be a bug with this panel and the UiBinder.