Child pages
  • Click to Open
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

What It Is

Check out the screencast at the mDimension build site!

Click to Open is a browser based extension to WOLips found in Project Wonder. It provides some very slick debugging tools, like the ability to click on arbitrary components in your web browser and have the corresponding component open in WOLips. All of the Wonder ERD2W components support this.

Click to Open appears in the lover left corner of browser as part of the pages of your running application. Clicking on this component, and then on an object in the browser window opens the relevant WOComponent in Eclipse. This makes life easier for UI designers and for developers getting familiar with new projects.

*Note that click-to-open support is expensive, because it has to dig around
your component HTML quite a bit, so you will take a performance hit in development to have it enabled.*

What You Need

You either need to be using Project Wonder or you need to get the WOLips framework that is part of Project Wonder. You can download it from mDimension's site. If not using Wonder, untar the frameworks and copy WOLips.framework to where you have the rest of your frameworks (usually /Library or ~/Library).

Getting Set Up

Add the WOLips.framework

Follow the tutorial on adding a framework to add WOLips.framework to your application.

Add Support to Component Base Class

If your components extend Wonder's ERXComponent, you can skip this step. Once again, using Wonder makes your life easier.

If you don't have a custom component base class, you really should. Using com.webobjects.appserver.WOComponent as the super-class for your pages and components is just going to leave you doing the same things over and over.

You will need to add the appendToResponse(WOResponse, WOContext) method to your component base class, or add to it if you already have that method. You should ONLY have clickToOpen execute in your component if you are in development mode.

To include it into your component base class, you can use this sample implementation:

package net.com.foo.bar;

import com.webobjects.appserver.*;
import er.extensions.*;

/**
 * Support for "Click to Open" navigation from the browser to the template in Eclipse.  To enable this,
 * launch with:
 * <pre>
 * -Der.component.clickToOpen=true
 * </pre>
 */
public class ClickToOpenComponent extends com.webobjects.appserver.WOComponent {

    public static final boolean isClickToOpenEnabled = ERXProperties.booleanForKeyWithDefault("er.component.clickToOpen", false);

    public ClickToOpenComponent(WOContext context) {
        super(context);
    }

    public void appendToResponse(WOResponse response, WOContext context) {
        ERXClickToOpenSupport.preProcessResponse(response, context, isClickToOpenEnabled);
        super.appendToResponse(response, context);
        ERXClickToOpenSupport.postProcessResponse(getClass(), response, context, isClickToOpenEnabled);
    }
}

For components that can't sub-class ClickToOpenComponent (directly or indirectly), you can enable Click to Open by adding this method to your component:

public void appendToResponse(WOResponse response, WOContext context)
{
    ERXClickToOpenSupport.preProcessResponse(response, context, ClickToOpenComponent.isClickToOpenEnabled);
    super.appendToResponse(response, context);
    ERXClickToOpenSupport.postProcessResponse(getClass(), response, context, ClickToOpenComponent.isClickToOpenEnabled);
}

Note that when isClickToOpenEnabled is false, the ERXClickToOpenSupport methods are no-ops.

Add Support to Application

If your Application.java class extends Wonder's ERXApplication, you can skip this step too. Otherwise, add a developmentMode() method like this:

private Boolean isDevelopmentMode;
public boolean developmentMode() {
    if (isDevelopmentMode == null) {
    	isDevelopmentMode = new Boolean(ERXProperties.booleanForKey("developmentMode", false));
    }
    return isDevelopmentMode.booleanValue();
}

And add this to the launch arguments:
-DdevelopmentMode=true

Set Application Properties

In your application preferences, you can then set:

wolips.host=localhost
wolips.port=9485
wolips.password=yourpassword
er.component.clickToOpen=true

Only 'wolips.password' is strictly required as long as you use the default port of 9485.

Provide prototype.js

WOLips.framework needs a prototype.js. If you are using Ajax framework, you don't need to do
anything, because it will default to use Ajax.framework's prototype.js. However, if you are not,
you must set (as an example):

wolips.prototype.framework=app
wolips.prototype.fileName=prototype.js

Add WOLToolBar to Your Pages

5) In your page wrapper, add a <wo:WOLToolBar/> component, and you're good to go. Look in the lower
left hand corner of the browser window for the link.

Configure WOLips Server

You must be using a recent version of WOLips that supports the WOLips Server. In
your WOLips preferences, you must enable the WOLips Server, set the port number and the communication
password. Turning on the WOLips Server requires a restart of WOLips.

Using Click to Open

  • No labels