Results 1 to 8 of 8

Thread: DWT components and existing HTML

  1. #1
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    54
    Rep Power
    10

    Default DWT components and existing HTML

    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

  2. #2
    Join Date
    Aug 2005
    Location
    San Mateo, CA
    Posts
    4,789
    Rep Power
    19

  3. #3
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    54
    Rep Power
    10

    Default

    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:
    Code:
    <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:
    Code:
    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 ?
    Last edited by Heladito; 11-15-2005 at 05:06 AM.

  4. #4
    Join Date
    Aug 2005
    Posts
    49
    Rep Power
    10

    Default

    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

    Code:
    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)

    Code:
    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

  5. #5
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    54
    Rep Power
    10

    Default

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

    I run into 1 problem at the very beginning when running this code:
    Code:
    var shell = new DwtShell(....);
    shell.setBounds(-100, -100, 1, 1);
    I get the following error message:
    Code:
    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 ...
    Last edited by Heladito; 11-16-2005 at 03:00 AM.

  6. #6
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    54
    Rep Power
    10

    Default

    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:
    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:
    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:
    Code:
     
    .actionMenuDiv {
        display: block;
        height: 25px;
    }
    Any comment is welcome...
    Last edited by Heladito; 11-16-2005 at 08:46 AM.

  7. #7
    Join Date
    Oct 2005
    Posts
    6
    Rep Power
    10

    Default Want to run your example needs js code for DvListViewActionMenu

    Hi, Heladito

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

    Regards
    Kambeena

  8. #8
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    54
    Rep Power
    10

    Default

    Quote Originally Posted by kambeena
    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.

    Code:
    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);
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •