I am using the gwt visualization API. I use the Table widget and would like to specify the height using the setHeight() method.
When I put enough records, the vertical scroll bar shown up. The width of the table no longer fit the data after the scroll bar show up. The column labels are long records are forced to split to two lines:
How can I avoid it ?
(I don't want to fix the width of the table as the data is dynamic and I will add arbitrary columns also).
Ok, I'm not particularly familiar with the "gwt visualization API" but the the first solution which comes to mind, is that you always show the scroll bars and make the field a little bit bigger.
Her a little code example:
ScrollPanel sp = new ScrollPanel();
sp.setAlwaysShowScrollBars(true);
or if you are using UiBinder:
<g:ScrollPanel ui:field="scrollPanel" alwaysShowScrollBars="true">
You can also let a scroll panel appear in the bottom so your lines still appear in the bottom, but I don't thin that's what you want...
Regards,
Stefan
Related
We have many screens where different types of GWT panels are used.
One common problem across many screens is that, content size is derived at runtime. So, if I define a height for a panel(Vertical/Horizontal/DockPanel) and when any new components are getting added within panel or content is more, panel height remains the same. So we are not able to see the contents. UI look and feel becomes worst.
How do we handle the height problems? Do we have to manually code to adjust every panel/widget height when something gets changed in screen. Is it not a very bad way of coding?
Also, now we have datagrids at some places, if no of records are very less, we see a huge space left out below datagrid, not sure how do we handle these cases?
Updated below with few examples as per the comment:
Do you mean to say that whenever we know that content grows vertically, we can always choose FlowPanel. Because, some of the screens we have used Vertical panel/Horizontal Panel and inside that when user clicks something a new fields getting added and shown. So Vertical Panel/Horizontal Panel height automatically not getting adjusted. One more example is that we have main Vertical Panel within a Dock Layout Panel content area and inside that there are some widgets whose content may vary. So now if I use a FlowPanel to the content which varies in size, what about outer panels? Will get it adjusted? Again to say the kind of panels we have used - Dock Layout Panel is used with fixed header, footer, left menu and Content area. A scroll panel is used within Content area. All our different widgets go inside this which is mix and match of horizontal/vertical/datagrids..etc.
In GWT (and HTML) you can either set the height of a panel or let it expand naturally. In general, once you set the height of something, you lose the ability to let it expand naturally.
Some Panels in GWT implicitly set their own height (or require that you set their height) and so are never good choices for dynamically sized content. LayoutPanels and ScrollPanels, for example, can never adjust dynamically, and expect you to provide size information programmatically. FlowPanels and HTMLPanels, on the other hand, are great for dynamic heights and would rather you not set their height explicitly.
If you want a scrolling panel, of course you have to define how high it should be - how else could it know when to scroll and when to just get bigger? But, you can put a FlowPanel (which expands automatically) inside a ScrollPanel (which you have set at 800px or whatever). Then, as you add content to the FlowPanel, it will expand inside the ScrollPanel. Users can then scroll to see different parts of the FlowPanel.
Trouble-shooting tips:
Make sure you aren't setting the height on panels that you want to expand naturally
Make sure you ARE setting the height on panels that should always be the same size
Try using FlowPanels instead of Horizontal/VerticalPanels
*LayoutPanels and AbsolutePanels always need explicit sizes and can never grow dynamically as you add more content. Anything you want to grow with content should probably be a FlowPanel or HTMLPanel.
I want to create a custom panel/layout and it's seeming pretty impossible at this point. I need the components to start in the upper left corner and stack downward until they fill the panel vertically, then wrap to the top of the next column and so on until they eventually fill the screen and create a horizontal scrollbar. After an entire day of trying I've decided it's only possible by abusing GWT (and I assume the whole web browser) adding crippling complexity and terrible performance. Please let me know if I'm missing something and layout like this is possible. Thank you!
Lame solution: Have a small (almost invisible) AbsolutePanel where every string is displayed within a div and measured (getClientWidth/height()). Then each panel can calculate it's size based on the strinsg, borders, padding, etc. it contains. Once each panel knows it's size, they can be layed out relative to the sizes of the other panels in the contianer.
Check out FlexTable, which allows you to specify the row,column for the widget to be added
Folks,
coming from the Java/Swing world, I am sometimes puzzled by the UI programming on the iPhone. I've spent the last hours with Googling for information but it seems that I asked the wrong questions by thinking too much in Java. Could you please point me to resources to get more familiar with the GUI concepts to be able to achive the following functionality:
Basically, I want to create a vertically scrollable view that represents structured text (for example, a recipe). Each step consists of a title and a textual description. As I want to fold and unfold such steps, the title would be somehow interactive and by clicking it the description would be displayed or hidden.
In Java, I would create a component that renders one such section. The layout manager would compute the components preferred height (with or without description being displayed).
Then, in Java, I would create a panel with a vertical layout manager and sequentially add my components. This panel would be placed in a scroll pane; the scroll pane would ask the panel to layout itself and then show a viewport on it, if for example the height is bigger than the scroll pane's height.
What Java provides me is:
layouting of elements (computing their preferred height and width), thus no need to deal with coordinates and dimensions
dynamic creation of UIs by creating and adding components during runtime
What I understood on the iPhone:
I can dynamically add views as subview to a view, e.g. a scrollview by calling addSubview
I can even remove that stuff using removeFromSubview (as explained here Clear content of UIScrollView)
What I don't understand on the iPhone:
does one view always correspond to a visible screen (I did use tab and navbar navigation so far and there whenever I set a new view, it fills the current visible screen minus the space needed for the two bars)?
or is it possible to define a view that contains a label on top ("north") and a text in center; if so, could such a view automatically determine its height?
can I realize my example in a similar way like in Java or would I need to calculate all dimensions and coordinates of the individual components on my own? (This example seems to touch on that topic: iPhone scrollView add elements dynamically with id)
Alternatively, could I use a WebView and render my stuff as local HTML using JavaScript to show or hide nodes?
Thanks for any hint or link!
There are no layout managers in Cocoa, views are being reposition according to their struts and springs settings. For information on that read the documentation: http://developer.apple.com/library/ios/#documentation/DeveloperTools/Conceptual/IB_UserGuide/Layout/Layout.html
To create a "view that contains a label on top and a text in center" you create a view with subviews - one being a label at the top, second the textview in center. If you configure struts/springs for all of subviews properly, they will autoresize when the container view is resized.
You should also get accustomed to Interface Builder, creating views in code is real pain in the ass.
I want to have a panel, with two columns.
The first column will contain a list of beans, and the right one a form panel for editing those beans. What I want to do, is that list height is the same as height of the form panel on the right. My list of beans will be larger and larger over time, so it's height will probably exceed form height. When that happens, there should be a scrollbar showed for the list. I also don't want to set explicit size for list and my form panel (it should be flexible because some time I will add or remove some form fields).
I'm basically new to GXT. I'm looking forward for some proposals.
Cheers,
jjczopek
Try setting the CSS style overflow-y: auto; with max-hight on the Panel (div?) on which you need a scroll bar. That should solve your problem.
Try to set Fill or Fit Layout.
I am using GWT 1.6.4 and GWT-Ext 2.0.6. I am trying to use EditorGridPanel and facing rendering problems.
When the module loads I create a Panel (TopPanel) with BorderLayout and add that to the ViewPort. I then create another Panel (CenterPanel) and add EditorGridPanel, three buttons to the center of the BorderLayout Panel (TopPanel). I tried many layouts for CenterPanel but still not able to get what I want.
I want the table to showup with the required data and scrollbars. All the three buttons comes below the table. The data for the table come via Async call when the module loads, so when the screen is rendered to the user, the data is populated in the table. But looks like the table gets rendered with no data and when the async process finishes the table gets populated but don’t get resized to fit the screen so only show me one row.
The problem is with the Grid, I am not getting any scrollbars. Secondly I don’t want to define the height and width of the Grid. I want it to take as much as possible and show scrollbars, just like we do in html table by setting width and height as 100%.
Thanks
I have found the solution. I had to add the Grid on a panel. I had to set the layout of that panel to FitLayout(). Secondly had to call doLayout() on that panel after loading the Store with the data. I now get the scrollbars for the table as well as it fits the whole available space.