Announcement

**Isomorphic** · 16 Jan 2015, 02:09

See canvas.htmlElement - you can easily embed a SmartClient widget into an existing page, but the widget will generally either be fixed size or will have to manually adjusted by your own code if the overall page size changes.

Usually the best approach is to replace entire pages with SmartClient at a time. Any kind of static content can be moved into a SmartClient HTMLFlow.

**aram123** · 16 Jan 2015, 12:37

Thanks for the quick response, I got it working in no time, hopefully this will be enough to start for me and anyone who has to mantain legacy code.

If anyone new stumble with this problem, this would be your legacy html:

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>My legacy app</title>
    </head>
    
    <body>
        <nav>
            <ul>
                <li>Menu item 1</li>
                <li>Menu item 2</li>
                <li>Menu item 3</li>
            </ul>
        </nav>
        <div id="container">
            <div id="crumble-nav">Location</div>
            <div id="app-container">
                <!-- App goes here -->
            </div>
        </div>
        <footer>
            Company name 2015
        </footer>
        
    </body>
</html>

And you add a layout with all the elements you want into the app-container div:

Code:

var appContainerWidth = document.getElementById('app-container').offsetWidth;

isc.VLayout.create({
    ID: 'layoutContainer',
    width:appContainerWidth,
    membersMargin:5,
    htmlElement : document.getElementById('app-container'),
    members:[
        isc.RichTextEditor.create({
            autoDraw:false,
            ID:"contentEditor",
            height:155,
            overflow:"hidden",
            canDragResize:true,
            controlGroups:["fontControls", "formatControls", "styleControls", "colorControls", "bulletControls"],
            value:'Edit text here'
        }),

        isc.IButton.create({
            autoDraw:false,
            title:"Set Canvas HTML", width:150, 
            click:"htmlCanvas.setContents(contentEditor.getValue())"
        }),

        isc.LayoutSpacer.create({height:10}),

        isc.HTMLFlow.create({
            autoDraw:false,
            ID:"htmlCanvas",
            height:130, padding:2, overflow:"auto",
            canDragResize:true, showEdges:true,
            contents:"Click <b>Set Canvas HTML</b> to display edited content."
        })
    ]
});

window.onresize = function(evt) {
    // Resize layout to match parent div width
    layoutContainer.setWidth(document.getElementById('app-container').offsetWidth);
};

**idsocho** · 11 Mar 2015, 23:31

Start by examining the hello-world sample that is part of the Smart GWT distribution. It has an ant build file with a "war" target that produces a war file that you can drop in tomcat and have it deployed. Once you understand how the war is structures you can apply it to your project.
Pass4sure a+ certification

Announcement

Embedding SmartClient into existing app

Comment

Comment

Comment