Width100(); or Width("100%") in SmartGWT for GWT Containers

width:"100%" means 100% of the available space in the widget's SmartGWT parent widget, or of the entire browser if there is no SmartGWT parent widget.

Tip # 7: GWT Containers and SmartGWT widgets

Guys, setting width:100% in native CSS wouldn't really solve this problem. Contained components need to know the actual pixel width in order to implement various layout algorithms that go beyond CSS.

The issue here is that GWT's containers do not provide an API similar to Canvas.getInnerWidth(), which children can use to find out the available space to draw themselves in, and hence recursively lay out out their own children. Nor do they fire events when they are resized, or when the available width changes for various reasons (eg scrollbar(s) introduced, or CSS style changes add borders and hence reduce space).

A lot of parent<->child coordination and signaling is required to really create an extensible pixel-perfect layout system. SmartClient has implemented all the necessary hooks to allow a third-party widget to be embedded inside a Canvas and participate in a precise layout, but GWT is not there yet.

If you absolutely must place a SmartGWT interface inside a GWT container and you want it to fill the container, the best approach is to listen for the window-level resize event and run your own layout calculations that ultimately call resizeTo() on your topmost SmartGWT widget. All SmartGWT widgets nested under that topmost widget will then handle layout normally.

Tip# 6: Checkbox in Grid' column header

1. Problem: 
2. I wanted to show checkboxes as row selection in SmartGWT so i found this solution from Showcase

  ListGrid recipientGrid = new ListGrid();

2. recipientGrid.setWidth(350);  
3. recipientGrid.setHeight(250);
4. recipientGrid.setShowAllRecords(true);
5. recipientGrid.setSelectionType(SelectionStyle.SIMPLE);  
6. recipientGrid.setSelectionAppearance(SelectionAppearance.CHECKBOX);
7. 
   
8. I used DataSource to fill the ListGrid but the checkbox in Grid's column 
   header was not allowing to check the checkbox and was showing an 
   warning message in tooltip.
   
   
   

   

   
   
   
   
   the warning message is:
   

   
   

   "Can't select that many records Please try working in smaller batches"

even I fill datasource with less than 10 records it did not work.

Solution:

     Replace the datasource with ListGridRecord[] data. Now it can work for both small and larges batches.  

Tip# 5: AutoHeight() Function of Widgets

If widget's height is disturbed then first of all check either its AutoHeight() property is set or not. Usually AutoHeight() does not work properly for some widgets in IE, then You have to use setHeight("")

SelectItem display issue in SmartGWT

Problem:
I have UI issue in SelectItem. I have just added SelectItem. I have not applied any Extra CSS. 
I have tested it on IE6, IE8 and FF. Its look is fine on IE6 and FF. But IE8 has its display issue. IE6 has another issue. When i just click the SelectItem to select any item from the list. It immediately navigates to initial page of the application. 
I have noticed same issue in showcase in Chrome browser also. To check different versions of Internet Explorers use IETester.
I was stuck with the following Code:(it is working 100% fine on FF)


Code:

HLayout middleLayout = new HLayout(5);  
final DynamicForm form1 = new DynamicForm();  
form.setWidth(500);  
form.setNumCols(4);  
SelectItem departmentItem = new SelectItem();  
departmentItem.setName("department");  
departmentItem.setTitle("Department");  
departmentItem.setAddUnknownValues(false);  
form1.setItems(departmentItem);  
form1.draw();  
middleLayout.addMember(form1);

Solution:

Although i tried
http://forums.smartclient.com/showthread.php?t=8159#aIE8

Code:
<meta http-equiv="X-UA-Compatible" content="IE=6">

If i use IE=7 or IE=8 then problem remains same.

After using the above tag, UI was OK but the behavior was disturbing. As I click the dropdown icon of SelectedItem. It naviagtes the website to first page of the website. Why is it so? If I click the middle of the SelectItem then it works fine.

Use GWT's widget ListBox instead of SmartGWT's SelectItem because it has issues.

         ListBox departmentItem = new ListBox();   
       departmentItem.setName("department");   
       departmentItem.setTitle("Department");
       departmentItem.setSize("100px", "25px");
       departmentItem.addItem("Pakistan");
       departmentItem.addItem("India");
       departmentItem.addItem("Iran");
       departmentItem.addItem("China")


Although it is answered on the smartclient forum
http://forums.smartclient.com/showthread.php?t=14456
and
http://forums.smartclient.com/showthread.php?p=55908#post55908

but not a proper answer or solution is provided there. Suggest any Solution if u have.

SmartGWT Tips

I am new to SmartGWT and using LGPL version. I will share my tips and tricks and if you have any question, do post me. I will try to answer your questions.

Tip#1: Try to use setAutoHeight() and setAutoWidth() functions of any widget as far as possible, the reason is that these functions set the height and width of the widget according to widget's text and font size.

Tip#2: Use the above functions as the DynamicForm's size is set according to its items and if you use it HLayout, it will be automatically go to left aligned. Dont't set its width to 100%. If you set it 100%, DynamicForm will appear in the middle of the HLayout.


Tip#3: Don't mix GWT and SmartGWT widgets but we can do the following things:

- Never use GWT's containers like HorizontalPanel, VerticalPanel or HorizontalSplitPanel etc for containing SmartGWT widgets as SmartGWT widgets' appearance start disturbing and usually widget.setWidth("100%"); does not work. Instead use HLayout or VLayout.


Tip#4: If you want that application should be consistent in all browsers then first of all always test you application in Firefox, Internet Explorer and other browsers. Usually application works fine in all browsers except Internet Explorer because IE does not have backward compatibility that is why you will notice that application is working in IE6 but not in IE7 or IE8.
If i get height, width, margin or padding issues then i use to follow the following technique.


- public class CommonUtil {

public static native String getUserAgent() /*-{
return navigator.userAgent.toLowerCase();
}-*/;
}

if(CommonUtil.getUserAgent().contains("msie"))
  {
     widget.setHeight((Window.getClientHeight() - 96 ) + "px");
  } else {
     widget.setHeight((Window.getClientHeight() - 94 ) + "px");
  }


- DOM.setStyleAttribute(widget.getElement(), "margin", "2px 0px 0px 0px");