IT Mill Toolkit Forum

Hi there again,

I'm an Echo2 user trying to change to It Mill 5, I would like to make some suggestions in the UI components that could be very good. If any of these already work, please tell me how, and sorry if it's already known, I'm just trying to help.

1. I found a lot of getScreenWidth() and getScreenHeight() methods in the Application, WebBrowser classes but none had a right value.

2. Split Pane
2.1. Block the middle bar from being moved.

3. Window
3.1. Block resizing.
3.2. Hide the close button.
3.3. Block moving.

4. Other components
4.1. Setting the width and height with percentage units doesn't work.

Thanks for ideas, I'll forward them to dev-team trac so that they could be included to the product in the future.

Please write of any experiences (both good and bad) when comparing to echo2.

JoaoGalli wrote:

I found a lot of getScreenWidth() and getScreenHeight() methods in the Application, WebBrowser classes but none had a right value.

Please could you point an exact method where the bug occurs so that we can fix it.

JoaoGalli wrote:

Setting the width and height with percentage units doesn't work.

More details needed also here.

We'll try to be as quick as possible to fix any bugs found in beta, so everyone - please send us bug reports. The most easy way of doing this is by using bug-report form:
http://itmill.com/developers/feature-request-report-a-bug.htm

(Sending info on forums is also fine

Hi, thanks for the suggestions, they looked good.

JoaoGalli wrote:

1. I found a lot of getScreenWidth() and getScreenHeight() methods in the Application, WebBrowser classes but none had a right value.

It looks like they are unimplemented in the beta. In ApplicationServlet.java we have "// TODO Add screen height and width to the GWT client". Will be fixed...

2. Split Pane
2.1. Block the middle bar from being moved.

3. Window
3.1. Block resizing.
3.2. Hide the close button.
3.3. Block moving.

Yes, these would be useful.

4. Other components
4.1. Setting the width and height with percentage units doesn't work.

It should work. The problem may be that even if you set the size of a visible component to, say 100%, it will be scaled to that size inside its containing layout, and you need to use a sizeable layout. At least OrderedLayout doesn't at the moment support sizing, but ExpandLayout does. See http://www.itmill.com/documentation/itmill-toolkit-5-reference-manual/ch05s02.html#section.layout.expandlayout

Hi!

With percentage units it is often hard to realize what is the reference size. The question is 100% (or any other percentage) of what?

With Toolkit the reference element is defined by container. So if you want to have for example a 100% height Table component you most likely want to define also it's containers height. The most common mistake is to use relational units in normal OrderedLayout, that defines no height at all for its content cells.

So to use relational sizes, use them for components inside Sizeable containers like TabSheet, ExpandLayout, SplitPanel or Panel (with Panel most likely with ExpandLayout as its layout). You might want to have a look at FeatureBrowser's code to get started with a nice flexible layout.

cheers,
matti

As another echo2 -> itmill migrating user, I may add my couple of cents. In our server application we used echo2 for server administration console, so now I reproduced it in itmill. The main reasons we're trying to move from echo is as follows:

1) echo2 looks terrinbly in terms of end-user's feeling of what it see on a web page out of the box and requites creating custom styles in comparison to itmill, where default styles are pretty-enough for users and

2) echo2 does not work with native CSS, proving its own so called stylesheet format, that is harder to work with and requires intensive help from java developers, especially in a lack of documentation. In case of itmill/gwt, where native css used, our web designer was comfortable enough customizing interfaces alone, with no support from development person.

3) itmill layouts are more easier to work with for developer, even in case they're in beta state.

More friendly documentation (not counting javadoc api) is also a huge "plus" to itmill.

From programming side, both frameworks brings very fast way , especially for swing experienced developer to create web application as well similar and nice deploying mechanism, where no external html/js/image files but only a servlet is required to host application.

I would also suggest to support more (or maybe all ?

) current GWT controls in itmill as now it lacks some useful ones.

Thanks,
Dmitri

Oops, sorry, previous post my mine, I just forgor to login.

Anonymous wrote:

I would also suggest to support more (or maybe all ?) current GWT controls in itmill as now it lacks some useful ones.

One of the design goals was to make it as easy as possible to "port" GWT widgets to IT Mill Toolkit. Basically you just 1) extend a widget and implement one method, 2) create simple server-side peer for it and you are done. So if your need to include some GWT controls, in most cases you can include them yourself in couple of hours.

Also we are planning to create proper client-side API:s for the current controls. This way GWT-users could use our widgets and use them without server-side. On the other hand this would give nicely back to GWT project and on the other hand it would allow easy creation of client-side composite widgets and logic (in cases it is needed).

Yes, that's exactly what Im planning to do, when I'll have more free time from the main activities. But in general new Itmill looks likes an ideal solution for me, as I always loved GWT's style and widgets but needed exact server-side logic execution, so not those things joined together and this is really nice, and no matter there are some number of things to do until final release, I would like to thank you and congratulate with the great job being done!

Best regards,
Dmitri

dll wrote:

Yes, that's exactly what Im planning to do, when I'll have more free time from the main activities. But in general new Itmill looks likes an ideal solution for me, as I always loved GWT's style and widgets but needed exact server-side logic execution, so not those things joined together and this is really nice, and no matter there are some number of things to do until final release, I would like to thank you and congratulate with the great job being done!

This is great to hear. Thanks!

Matti Tahvonen wrote:

Hi!

With percentage units it is often hard to realize what is the reference size. The question is 100% (or any other percentage) of what?

With Toolkit the reference element is defined by container. So if you want to have for example a 100% height Table component you most likely want to define also it's containers height. The most common mistake is to use relational units in normal OrderedLayout, that defines no height at all for its content cells.

So to use relational sizes, use them for components inside Sizeable containers like TabSheet, ExpandLayout, SplitPanel or Panel (with Panel most likely with ExpandLayout as its layout). You might want to have a look at FeatureBrowser's code to get started with a nice flexible layout.

cheers,
matti

Matti,

I have tested percentage units with the TabSheet component, my idea of layout was to fill all the browser area with the TabSheet, regardless of the screen size. In this quest I also tried to use the ExpandLayout with another layout inside (FormLayout), no deal. But after I read in the manual that the ExpandLayout only works with Sizeable interface implemented components, I think that it would be great if it works with layouts (I didn't tried to implement a layout with the Sizeable Interface yet, but I will).

I also know it's hard to implement percentage, because if you have a <div width="100%"> inside another <div width="200px"> the 100% div will be the maximum of 200px width, and not the screen size.

The code below has a TabSheet that expands both horizontally and vertically to fill the main window. When I tried the tab sheet with OrderedLayout, it seemed to fill horizontally 100% just fine though.

Code:

 // Create the layout
 ExpandLayout expanding = new ExpandLayout(OrderedLayout.ORIENTATION_VERTICAL);
 
 // It is important to set the expanding layout as the root layout
 // of the containing window, in this case the main window, and not
 // use addComponent(), which would place the layout inside the
 // default root layout.
 main.setLayout(expanding);
 
 // Create a tab sheet that fills the expanding layout
 final TabSheet tabsheet = new TabSheet();
 tabsheet.addTab(new Label("Contents of the first tab"), "First Tab", null);
 tabsheet.addTab(new Label("Contents of the second tab"), "Second Tab", null);
 tabsheet.addTab(new Label("Contents of the third tab"), "Third tab", null);
 
 // Set the tabsheet to scale to full size inside its container
 tabsheet.getSize().setWidth(100, Size.UNITS_PERCENTAGE);
 tabsheet.getSize().setHeight(100, Size.UNITS_PERCENTAGE);
 
 // Add the tab sheet to the layout as usual
 expanding.addComponent(tabsheet);
 
 // Set the tab sheet to be the expanding component
 expanding.expand(tabsheet);

Looks like this:

Updating the size of the tab sheet while resizing feels a bit sluggish, but not too much.

oh, that's much better, thanks. Now I saw that it also implements Sizeable.

Another thing about the TabSheet in Echo2 is that we can put any Component in the Caption, in my case I've put a Close button component. You can put this as low priority

.

Here we go again,

what about TableModel?