Inserting widgets into a page

Forums » General discussion
» Inserting widgets into a page

Minotaur I.T.

2008/05/16 16:45

The documentation mostly seems to assume that you are going to use a DlDialog to pop up a component, or DlDesktop.fullScreen() to take over the whole page. They don't make it clear how to insert a component into an existing HTML layout.

I'd like to use the rich text editor (plus toolbar) in place of <textarea>s. This means creating a DlLayout with the toolbar and editor widgets, and appending it to the given <div>.

first page|last page

I've made it sort of work by calling getElement() before adding children:

var desktop = new DlDesktop({ });
var layout = new DlLayout({ parent: desktop });

var element = layout.getElement();
var container = document.getElementById("...");
container.appendChild(element);

// ...add stuff...

layout.packWidget(toolbar, { pos: "top" });
layout.packWidget(rte, { pos: "top", fill: "*" });
layout.setSize({ x: 400, y: 300 });

But it's fragile and has some side effects - menus in the toolbar appear in the wrong place, etc. Surely there's a more correct way?

Sorry for the late reply.

Indeed, DynarchLIB is not too suitable to embed widgets in arbitrary HTML. Ideally you'd use a toplevel container (such as DlDesktop) for your application and have all the UI created in JavaScript, rather than have the server send HTML for each request.

Your solution looks OK, though it's not clear to me what is the “container” variable.

If the menus appear in the wrong position, it's likely because the body is scrolled. DynarchLIB is designed around the idea that the <body> element never scrolls; in order to have the page scroll, you can embed all content in a div having overflow: auto; try to use the following CSS:

html, body {
    margin: 0; padding: 0;
    overflow: hidden;
    width: 100%; height: 100%;
}

#my-div {
    position: relative;
    width: 100%; height: 100%;
    overflow: auto;
}

and embed all the page content like this:

<body><div id="my-div">
... content ...
</div></body>

Please let me know if this fixed the wrong menu position.

DynarchLIB.com
all hands person

That's a shame. I can't rewrite my entire code base to put it all inside a Dynarch container at this point. And I can't have pages that don't scroll.

Your solution looks OK, though it's not clear to me what is the “container” variable.

"container" in this case is simply the <div> into which I want to place the editor. While my solution places the editor into the page, it breaks too many things to be usable.

Maybe popping up a dialog (like this one) is a better solution.

I didn't mean to say that your pages shouldn't scroll; just that the BODY element should stay fixed. There are many advantages to it so that's why I decided to build DynarchLIB this way.

With the CSS I pasted above, your pages will look the same for the end-user, but the development simplifies greatly because we don't have to take into account the scroll position of the BODY when displaying a popup widget, computing view size, etc.

DynarchLIB.com
all hands person

I see - you have a body-like <div> within the body, and that div is the one with the scrollbars.

That does help with the positioning of the menus, thank you. (Note to anybody reading this thread: make sure the to apply the style to the html element as well as the body) There are still a few layout issues, but I can probably figure those out.

This is curious. When the scrollbar is near the top or bottom of the page (not just exactly at the top), the menus appear perfectly. When it's scrolled somewhere in the middle, the menus don't appear - and the rollover doesn't work either. Around the boundary, the rollover area - and the area which will activate the menu - gets smaller vertically, as if the active area of the button were failing to scroll with the visible button.

If the doesn't make any sense, I can provide a demo :)

Yeah, please do provide a demo. :-)

DynarchLIB.com
all hands person

Okay, here's a simplified demo:

http://www.minotaur.it/dynarchdemo/editme.html

The symptoms aren't quite the same, but close. Start at the top, and scroll down one click at a time to see the menu rollover stop responding.

I'm using Firefox - I haven't tried other browsers yet.

Oh, looks like it's the desktop widget that messes things up. You don't need it. Create the layout object like this:

var layout = new DlLayout({}); // no parent

and remove the lines related to the desktop widget. Everything else should be OK...

DynarchLIB.com
all hands person

first page|last page