Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Embedding SmartClient into existing app

    Hello SmartClient community,

    I've been evaluating your product for the last 3 days and I have to say that I'm very impressed with the work you have done, I'm feeling confident of the possibility of building powerful apps in no time thanks to your architecture.

    I'm using the SmartClient 10 and after messing around for a while I couldn't found a way to append a widget for example a layout, to organize all my widgets in, to an existing DOM ID (a styled div container) that wasn't a SmartClientObject on my current app.

    On the SmartClient FAQ I found this relevant question: How do I make a SmartClient widget fill a basic HTML container or GWT container? ( http://forums.smartclient.com/showthread.php?t=8159#aContainer )

    So if I understand correctly, what I'm trying to do may not be possible or at least is not the right, am I wrong?

    Thanks in advance

    #2
    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.

    Comment


      #3
      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);
      };

      Comment


        #4
        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

        Comment

        Working...
        X