DWT components and existing HTML

[Heladito]

Hi,

is it possible to make a DWT component and existing HTML cope in a nice way ?

For example, you have an existing design and only wish to replace your existring tree component with the dwtTree, without recoding the whole page.

Sounds possible ? How would you do that ? In particluar, is it possible to set a dwtShell at a defined size and position on the page ?

Thanks in advance

Heladito

[KevinH]

Try this post:

http://www.zimbra.com/forums/showthr...ight=ajax+html

[Heladito]

This example works fine but it doens't quite answer my question:

I have some html generated by a jsp page. I don't want to rewrite all the jsp, but I'd like to use some DwtWidgets through out the existing page.

I've tried adding some html in the jsp pages of the examples that are distributed and noticed that the DwtShell is allways displayed AFTER the HTML generated by the jsp. Simply define a CSS class for DwtShell and set a back-ground color. All the HTML defined in the jsp will be a the top in a white back-ground. Then you'll see your widgets displayed below with a background color defined in the .DwtShell CSS class.

I come back to my first question: Is it possible to take the existing html code generated by the jsp and add in HTML DwtWidgets ?
How can I do that ?

Thanks in advance for any help.

Example of html generated by the jsp:

<p>Button should be below this</p>
<div id="button"></div>
<p>Button should be above this</p>

Example of javascript code that displays the button in the right place but no events are catched / fired:

var shell = new DwtShell("MainShell", false, null, null, null, true);
var comp = new DwtComposite(shell, null, DwtControl.ABSOLUTE_STYLE);
comp.setBounds(0, 0, Dwt.DEFAULT, "100%");
comp.zShow(true);

var b = new DwtButton(comp);
b.setText("Button1");
b.addSelectionListener(this._buttonListener);
b.setSize(100, 25);

// Get the div generated by the jsp to display the button
document.getElementById("button").appendChild(b.getHtmlElement());

What am I doing wrong ?

[rdargahi]

Hi Heladito,

It should be possible to do what you want to do.

First off all you don't really want the shell to be visible, because all the components will be parented to you existing html. So let's get the shell out of the way (so that your jsp generated html is not pushed below it's div):

try

var shell = new DwtShell(....);
shell.setBounds(-100, -100, 1, 1);

Next, you actually should not need to create the composite object, and
should be able to create the button right away. You don't need the composite object because (the Shell is a composite, and you are going to be reparenting the button's HTML element anyway)

var b = new DwtButton(shell);
b.setText("Button1");
b.addSelectionListener(this._buttonListener);
b.setSize(100, 25);

// Get the div generated by the jsp to display the button
document.getElementById("button").appendChild(b.getHtmlElement());

Ok, so now you should have a button appearing in the right place without the shell pushing all the content down below its div. The next question is why you are not getting events. I am suspicious about

b.addSelectionListener(this._buttonListener);

My question is what object is "this" in the context of your example. Can you also post the code where you set this._buttonListener? It should look something like:

this._buttonListener = new AjxListener(obj, methodName);

if you want methodName to be executed in the context of obj, that is if you want this == obj when methodName is called. Or

this._buttonListener = new AjxListener(null, methodName);

If you have no object and just want methodName to be executed.

Note AjxListener is defined in Ajax/WebRoot/js/events/AjxListener.js

[Heladito]

Thanks for your great answer, I am trying this out now.

I run into 1 problem at the very beginning when running this code:

var shell = new DwtShell(....);
shell.setBounds(-100, -100, 1, 1);

I get the following error message:

Cannot position static widget MainShell

I couldn't find a way to set the DwtShell to ABSOLUTE Style, so I am digging into the existing code to see how it works and what could be done.

Any suggestions what to change ?

Ok, so now you should have a button appearing in the right place without the shell pushing all the content down below its div. The next question is why you are not getting events.

I am acutally not getting the events in FIREFOX and SAFARI. IE delivers them ...

[Heladito]

Finally, I managed to make it work on the 3 browsers. I had to use a composite parent for each button though or the events where not correctly handled. Don't see why...

Here is what it does in 2 words.

Takes html code and puts 2 buttons in the 2 div elements.
when the button is clicked, an ActionMenu is displayed next to the button.

Here is the full javascript code:

function MenuExample() {
}

MenuExample.prototype.run = function () {
    // Create the shell
    var shell = new DwtShell("MainShell", false, null, null, null, true);
    shell.setSize(0, 0);

    // composite for button 1 and actionMenu 1
    var composite = new DwtComposite(shell, null, Dwt.ABSOLUTE_STYLE);
    this.createButtonMenu(composite, 5, 1);
    composite.zShow(true);

    // composite for button 2 and actionMenu 2
    composite = new DwtComposite(shell, null, Dwt.ABSOLUTE_STYLE);
    this.createButtonMenu(composite, 4, 2);
    composite.zShow(true);
}

MenuExample.prototype._myListener = function(ev) {
    DBG.println("_myListener: " + ev.item.menuItemId);
    var actionMenu = ev.item.parent;
}

MenuExample.prototype._buttonListener = function(ev) {
    DBG.println("_buttonListener called");
    var bounds = ev.item.getBounds();
    ev.item._actionMenu.popup(null, bounds.x + bounds.width, bounds.y);
}

MenuExample.prototype.createButtonMenu = function (composite, menuItems, index) {
    var menu = new DvListViewActionMenu(composite);
    menu.setBounds(Dwt.LOC_NOWHERE, Dwt.LOC_NOWHERE);

    for (var i = 0; i < menuItems; i++) {
        menu.createMenuItem(i, null, "Item " + i, null, null, DwtMenuItem.SELECT_STYLE);
        menu.addSelectionListener(i, this._myListener);
    }

    var b = new DwtButton(composite);
    b.setText("Button " + index);
    b.addSelectionListener(new AjxListener(this, this._buttonListener));
    b._actionMenu = menu;
    b.setSize(100, 25);
    document.getElementById("menu"+index).appendChild(composite.getHtmlElement());
}

JSP code:

...snip...

<body>
    <noscript><p><b>Javascript must be enabled to use this.</b></p></noscript>
    
    <script type="text/javascript" language="javascript">
        function launch() {
            DBG = new AjxDebug(AjxDebug.DBG3, null, false);
            Instance = new MenuExample();
            Instance.run();
        }

        AjxCore.addOnloadListener(launch);
    </script>

    <table>
        <tr>
            <td width="200">&nbsp;</td>
            <td>
                <p>Menu should be below</p>

                <div class="actionMenuDiv" id="menu1"></div>

                <p>Menu should be above</p>

                <p>Menu should be below</p>

                <div class="actionMenuDiv" id="menu2"></div>

                <p>Menu should be above</p>
            </td>
        </tr>
    </table>
</body>

...snip...

CSS class:

 
.actionMenuDiv {
    display: block;
    height: 25px;
}

Any comment is welcome...

[kambeena]

Hi, Heladito

I am interested in running your example, could you please aslo post the code for DvListViewActionMenu. I will appreciate

Regards
Kambeena

[Heladito]

I am interested in running your example, could you please aslo post the code for DvListViewActionMenu. I will appreciate

Sure...
It is actually a modified version of the DvListViewActionMenu you find in the DataViewer Example.

function DvListViewActionMenu(parent, className, dialog) {

	if (arguments.length == 0) return;
	className = className || "ActionMenu";
	DwtMenu.call(this, parent, DwtMenu.POPUP_STYLE, className, null, dialog);

	this._menuItems = new Object();
}

DvListViewActionMenu.prototype = new DwtMenu;
DvListViewActionMenu.prototype.constructor = DvListViewActionMenu;

DvListViewActionMenu.prototype.toString = 
function() {
	return "DvListViewActionMenu";
}

DvListViewActionMenu.prototype.addSelectionListener =
function(menuItemId, listener) {
	this._menuItems[menuItemId].addSelectionListener(listener);
}

DvListViewActionMenu.prototype.removeSelectionListener =
function(menuItemId, listener) {
	this._menuItems[menuItemId].removeSelectionListener(listener);
}

DvListViewActionMenu.prototype.popup =
function(delay, x, y) {
	if (delay == null)
		delay = 0;
	if (x == null) 
		x = Dwt.DEFAULT;
	if (y == null)
		y = Dwt.DEFAULT;
	this.setLocation(x, y);
	DwtMenu.prototype.popup.call(this, delay);
}

DvListViewActionMenu.prototype.popdown =
function(delay) {
    if (delay == null)
		delay = 0;
    this.setLocation(Dwt.LOC_NOWHERE, Dwt.LOC_NOWHERE);
    DwtMenu.prototype.popdown.call(this, delay);
}

DvListViewActionMenu.prototype.getItemCount =
function() {
	return DwtMenu.prototype.getItemCount.call(this);
}

DvListViewActionMenu.prototype.createOp =
function(menuItemId, text, imageInfo, disImageInfo, enabled) {
	var mi = this.createMenuItem.call(this, menuItemId, imageInfo, text, disImageInfo, enabled);
	mi.setData(LmOperation.KEY_ID, menuItemId);
	return mi;
}

DvListViewActionMenu.prototype.createMenuItem =
function(menuItemId, imageInfo, text, disImageInfo, enabled, style, radioGroupId) {
	var mi = this._menuItems[menuItemId] = new DwtMenuItem(this, style, radioGroupId);
    mi.menuItemId = menuItemId;
    if (imageInfo)
		mi.setImage(imageInfo);
	if (text)
		mi.setText(text);
	if (disImageInfo)
		mi.setDisabledImage(disImageInfo);
	mi.setEnabled(enabled !== false);
    return mi;
}

DvListViewActionMenu.prototype.createSeparator =
function() {
	new DwtMenuItem(this, DwtMenuItem.SEPARATOR_STYLE);
}