Problems embedding a SmartClient widget..

[mgdev]

Please Help!

Environments:

We are currently developing with SmartClient rc02 client-side components.
Browser environments: IE7 & IE8.

Background:

We have really hit a road block while creating widgets with the SmartClient framework. Our current web-based application utilizes 'legacy' html, our own javascript framework, css etc... The intentions were to start small and replace or enhance pieces of our current application with SmartClient widgets. We really wanted to avoid rewriting our entire application from ground up... In our efforts, we have run into an issue with trying to embed the SmartClient widgets inside our 'legacy' html application.

Details of our issue:

snip-it of our javascript loader function... ( container == parent <div>)

    function createLayout(container){
        isc.VLayout.create({
        	ID:MAINCANVAS,
        	width:'100%',
        	matchElement: true,
        	htmlElement: container,
        	htmlPosition: 'afterBegin',
        	position: 'relative',
        	top: 75,
        	minWidth: 840,
        	height:'90%',
        	initWidget: function() {
        		this.Super('initWidget', arguments);

        		this.addMember(this.loadMain());

        		this.draw();
        		
        	},
        	logonHandler: function() {
        		var fnc = 'loadMain';
        		window[MAINCANVAS][fnc]();
        	},
        	removeChildren: function() {
        		if (window[MAINLAYOUT]) {
        			this.removeMember(window[MAINLAYOUT], MAINLAYOUT);
        			window[MAINLAYOUT].markForDestroy();
        		}
    			this.markForRedraw();
        	},
        	loadMain: function() {
        		this.removeChildren(); 
        		
    			if(window[CLIENTRS].localData === null || window[CLIENTRS].localData === undefined){
    				isc.DataSource.get(CLIENTDS).fetchData(null, function(dsResponse, data, dsRequest){
    					window[CLIENTRS].localData = data;
    					window[CLIENTRS].allRows = data;
    					window[CLIENTRS].dataChanged();
    				}, null);
    			}	
        		
        		var tabset = isc.TabSet.create({
    				ID:HRGRIDTABSET,
    				width:'100%',
    				tabBarThickness:30,
    				tabBarPosition: 'top',
    				i18nHandler: function(){
                        this.tabs.uxEach(function(thisTabSet){
                            return function(tab){
    							var defTitle = tab.name.replace('Tab','');
                                thisTabSet.setTabTitle(tab, thisTabSet.i18n.get({
                                    key: tab.name,
    								defaultValue: defTitle
                                }));
                            }
                        }(this));
    				},
    				initWidget: function() {
    					this.setI18n({context: 'maintabs'});
    					this.Super('initWidget', arguments);
    					this.tabBar.layoutLeftMargin = 35;
    					this.tabBar.setLayoutMargin();
    					this.paneContainer.setBackgroundColor('transparent');
    				},
				
				...

    			});

    		    var x = isc.VLayout.create({
    		    	ID:MAINLAYOUT,
    		        width:'100%',
    		        height:'98%',
    		    	top:60,
    		        membersMargin:5,
    		    	layoutRightMargin: 5,
    		    	layoutLeftMargin: 5,
    		        members:[tabset]
    	        });

    		    return x;
        	}
        });
    };

We want to embed the above VLayout into our current application. We have set the following properties to accomplish this...
matchElement: true,
htmlElement: container,
htmlPosition: 'afterBegin',
position: 'relative'

The widget seems to create and initialize correctly, but we receive the following error when clicking on any part of the widget...

11:45:47.228:FCS1:WARN:Log:Error:
'Object required'
in http://10.193.246.13/35.04292010/awd/processor.html?u=DSTSETUP&p=Password1!&XDEVX=y
at line 1624
Element.getOffsetLeft(_1=>[DIVElement]{ID:isc_A})
Canvas.getOffsetLeft()
Canvas.scrollIntoView(_1=>116, _2=>0, _3=>83, _4=>0, _5=>"right", _6=>"top", _7=>true, _8=>undef)
TabBar.scrollTabIntoView(_1=>[ImgTab ID:isc_ImgTab_3], _2=>false, _3=>true, _4=>undef)
TabSet.$8c(_1=>[ImgTab ID:isc_ImgTab_3])
[o]TabBar.buttonSelected(_8=>[ImgTab ID:isc_ImgTab_3])
[o]ImgTab.setSelected(true)
StatefulCanvas.select()
"this.setSelected(true)"
Toolbar.selectButton(_1=>[ImgTab ID:isc_ImgTab_3])
TabBar.selectTab(_1=>[ImgTab ID:isc_ImgTab_3])
"this.selectedTab=_1;this.selectButton(_1)"
TabBar.$6b(_1=>[ImgTab ID:isc_ImgTab_3])
[a]ImgTab.focusChanged(_1=>true)
Canvas.$lf(_1=>true, undef, undef, undef, undef, undef, undef, undef)
Class.invokeSuper(_1=>[Class StatefulCanvas], _2=>"$lf", _3=>true, _4=>undef, _5=>undef, _6=>undef, _7=>undef, _8=>undef, _9=>undef, _10=>undef)
StatefulCanvas.$lf(_1=>true, _2=>undef, _3=>undef, _4=>undef)
EventHandler._focusInCanvas(_1=>[ImgTab ID:isc_ImgTab_3], _2=>true)
EventHandler.focusInCanvas(_1=>[ImgTab ID:isc_ImgTab_3], _2=>true)
anonymous()
"isc.EH.focusInCanvas(isc_ImgTab_3,true);"

Now from reading other discussions it appears that the problem is due to the fact our current application is running with the xhtml DOCTYPE...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
<html>

So - we removed the xhtml doctype, as was suggested in other discussions. The widget loads and seems to 'function' correctly, with a few styling issues. However, our current application fails to style and function as originally designed.

1. Does SmartClient have any future plans on supporting xhtml doctype?
2. If so, when...?

Also - we discovered while trying to find a viable work around that if...

- We utilize the xhtml doctype definition. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Remove the properties from the widget that were set above... (Resulting in the widget being attached to the document body)
matchElement: true,
htmlElement: container,
htmlPosition: 'afterBegin',
position: 'relative'

The widget loads and seems to 'function' correctly, but has a significant amount of styling issues.

3. What's the difference when nesting under the document body?

Thanks...

[Diether]

We had a similar issue.
We're using Struts & Tiles for our application.
In the end we just used another "header tile" without the doctype for pages that caused problems.
Still have to do some css tweaks on those pages though.