Working SmartClient into an existing webpage

[shmax]

There doesn't really seem to be much in the documentation--everything in the docs seems to assume that you're working in an environment that is 100% SmartClient-generated, and refers to any existing web content as "legacy". *shrug*

Maybe I should just get into my specific situation. I have pages listing Transformer toys, and each toy listed as a little "I own it" checkbox that you can check, which sends a request to the server where some database operations happens, AJAX-this, PHP-that, etc. Here's a sample:

http://www.shmax.com/Database/393

Works fine, but I'm planning on upgrading the collection system, such that the "I own it" checkbox is replaced with an "Add to Collection" button. When you click the "Add to Collection" button, my new idea is that one of your fancy dynamic forms appears, perhaps using "sections" to hide the form until it is expanded. Then, for each instance of a collected toy, the user can enter more specific info, such as the toy's condition, how much he paid for it, and so on.

Here's a mockup I did a while back--this is an older concept, in which the entire form fits on one line, but you should still get the idea (just imagine that each horizontal blue bar is a section header, and that when you click on it a form appears below it with more room for extra widgets):

http://www.shmax.com/img/misc/mockup.jpg

I had hoped that I could whip this all up in SmartClient fairly easily, but I'm having layout issues. What I want is for the containing DIV that I already have to expand as rows are added to their container (I've tried using VLayout and HTMLLayout), but I can't even get as far as convincing the VLayout or HTMLLayout container to resize as the sections are expanded/minimized. All of your examples show a static container.

And assuming I get that working, I'm also having trouble getting the container to play nice with the parent DIV (which is generated by my "legacy" code). When I set the container's width to be 100%, I want that to be relative to the containing DIV, not the page. I tried setting the "position:relative" attribute on the container, but all that does is help with positioning, not width or height.

I've barely even started and I can tell I'm already hopelessly on the wrong track. Do I have to start over and rewrite the whole thing such that pretty much everything is done with SmartClient? Any suggestions?

[davidj6]

I'm doing more pure smartclient work so I don't have a specific answer. However, have you looked at the inline HTML sample?

[shmax]

Thanks for the suggestion, but that example uses container elements with explicit heights and widths. In other words, they don't scale naturally as the page is resized. If I have to, I guess I can live with that restriction if I have to, but I'd much rather have the SmartClient components scale naturally as their containing DIV elements are scaled...

I'm doing more pure smartclient work so I don't have a specific answer. However, have you looked at the inline HTML sample?

[Isomorphic]

If you have something fixed width or height outside of a SmartClient interface, you can always have a 100% width/height Layout that has large margins to expose fixed-size "framing" (like a header). Or you can take that same HTML and put it inside an HTMLFlow instead, so that it can participate in SmartClient layout.

[shmax]

Not sure I follow you, but my whole point is that I don't want to have to rely on fixed height and width on my DIV elements. I spent a lot of time working with my layout to get it "fluid", meaning that a user with a lot of desktop space can expand his browser window and have the content grow to match it.

And if I convert everything to using pure SmartClient, what will that do to search engine results?

I'm starting to feel like my best bet will be to just write all of this from scratch using JQuery, which seems odd; I know I can accomplish the kind of thing I'm talking about using traditional methods--seems strange to me that the same can't be done with SmartClient.

If you have something fixed width or height outside of a SmartClient interface, you can always have a 100% width/height Layout that has large margins to expose fixed-size "framing" (like a header). Or you can take that same HTML and put it inside an HTMLFlow instead, so that it can participate in SmartClient layout.

[Isomorphic]

Again, two ways to make it fluid, which can be used in combination:

- make the whole screen SmartClient, and put your HTML into HTMLFlow components that are inside SmartClient layouts
- leave out certain areas of the screen which remain straight HTML, but have those particular areas be fixed size (eg a header) and fill the rest of the screen with a SmartClient layout.

The fundamental problem you're running into is that when a DIV has a DOM size of "100%", there is no way to find out how large that will be until the entire page has loaded. Similarly there is no way to be reliably notified when the browser reflows and that 100% setting has been re-evaluated to a different pixel size.

The only way to flow into the available space inside an HTML element is to restrict SmartClient component to only use layout approaches that be implemented with CSS settings, and this is a huge and unacceptable back-step from current functionality. In any system that implements layout that goes beyond CSS, you will find the same dilemma.

[shmax]

Well, making the whole screen SmartClient isn't feasible for two reasons; first, that means I would have to throw out a lot of sophisticated CSS work, second, it puts the site's SEO into question. Will google bots still be able to parse my site's content when it is being laid out by javascript on the client side? I don't trust it to.

And there's still the issue of your container classes not resizing on the fly as sections are expanded and minimized.

So, two major strikes. I'm going to go ahead and see if I can code this up from scratch. Best case scenario is that I'll have a fancy new javascript codebase of my own that I understand completely and have full control over, worst case scenario is that it won't work, but I'll have had some practice.

Thanks for your input.

Again, two ways to make it fluid, which can be used in combination:

- make the whole screen SmartClient, and put your HTML into HTMLFlow components that are inside SmartClient layouts
- leave out certain areas of the screen which remain straight HTML, but have those particular areas be fixed size (eg a header) and fill the rest of the screen with a SmartClient layout.

The fundamental problem you're running into is that when a DIV has a DOM size of "100%", there is no way to find out how large that will be until the entire page has loaded. Similarly there is no way to be reliably notified when the browser reflows and that 100% setting has been re-evaluated to a different pixel size.

The only way to flow into the available space inside an HTML element is to restrict SmartClient component to only use layout approaches that be implemented with CSS settings, and this is a huge and unacceptable back-step from current functionality. In any system that implements layout that goes beyond CSS, you will find the same dilemma.

[Isomorphic]

From an SEO perspective you want indexable content to appear in plain HTML first - it can then be picked up from there by JavaScript. This can be done in a way that a normal user never sees the plain HTML content before it's been rendered how you want it, eg for SEO, offscreen DIVs are fine, the search engine doesn't care. There are lots of books and sites on these techniques.

Not sure what you mean about the sections - obviously this works with a SmartClient SectionStack.

You may also be interested in this post from the SmartGWT forums, which explains what kind of APIs are necessarily for two widget systems to coordinate on pixel-perfect dynamic layout - the same concepts apply for widgets embedded in HTML/CSS layouts.

[shmax]

Not sure what you mean about the sections - obviously this works with a SmartClient SectionStack.

How can you be sure that it works yet not know what I mean? If it were obvious, the behavior I'm interested in would be demonstrated in one of the samples. To be clear, what I mean is that the displayed container object's height should visibly increase as sections are expanded, and contract again when they are minimized. All of your samples have a container object with a fixed height, which sort of defeats the purpose of sections as a space-saver in an html layout.

You may also be interested in this post from the SmartGWT forums, which explains what kind of APIs are necessarily for two widget systems to coordinate on pixel-perfect dynamic layout - the same concepts apply for widgets embedded in HTML/CSS layouts.

Thanks, I'll have to reconsider all this if my scratch-built code winds up not working (which at this point still seems like less work than arguing with SmartClient over this stuff).

[Isomorphic]

If you want a SectionStack (or any widget) to expand to fit content, set overflow:"visible". It's not demonstrated specifically for sectionStack because it's a pervasive feature.