Limitation

Limitation

  1. Due to the CSS compatibility with Firefox 2, when a row element is maximized, the maximized row window will be displayed wrong. The maximized row dose not cover the other row elements as designed.
  2. Due to the iFrame problem born with IE6, when a service, which is based on iFrame implementation, is added into BTT Web2.0 Workplace Area. The row window sometimes display empty content. This problem is occasionally.
  3. A Row element can be dragged by mouse, however sometimes user might move the mouse out of the dragged head of a row element and enters into a iFrame body area. When this happened, the mouse event will not be caught by the BTT Web2.0 Workplace Area. So the mouse is moving into a iFrame, but the dragged target row element will not followed with the moving of the mouse.

Exception

Not many possible errors can be shown at BTT Web2.0 Console. And the BTTError object is not so powerful that provide enough error information for developers, so you need more help from Firebug or Companion plugin when some errors happen.

Workplace

When end user types the Chinese characters into the textbox for editing tab’ name, the size or length of textbox cannot extend automatically according the length of characters in textbox.

When dragging the widget window from one column to another column, the current structure of the layout will not be saved until end user click the save link at right-top side of page.

Style theme switch

When switch to another theme, the format of page will flicker for a glimpse of time because of loading CSS file .

Best Practice

Because not all the widgets are loaded when the page initialize later, so it is possible that the JS and CSS of widget that are loaded later will conflict with some JS objects and CSS styles that already exist.

So make sure the JS or CSS of new widget have its unique namespace or parent style identifier. For example:

You can define a widget and add a namespace for it:
var newWidget = {}//the nameapce of new widget
newWidget.init = function(){
	this.onLoad = function(){
		//...
	}
}
The widget definition xml
<iw:content mode="view">
	<![CDATA[
		<div id="new_widget" >
			<div class="item_new_widget">
</div>
			<div class="item_new_widget">
</div>					 
		</div>
		
    ]]>
    </iw:content>
And the css can be defined like below:
#new_widget{
	font-size:14px;
	height:22px;
	width:120px;
}
#new_widget .item_new_widget{
	background:#F9F9F9;
	border:1px solid;
	margin-bottom:12px;
}