Wiki source code of Click to Open

Version 33.1 by chuckhill on 2008/03/12 15:17

version	line-number	content
18.1	1	== What It Is ==
	2
32.1	3	Click to Open (C2O) allows you to open components in Eclipse directly from the running application in your browser! Click to Open appears in the lower 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. It also provides some other very slick debugging tools.
18.1	4
32.1	5	Check out the [[screencast at the mDimension build site>>http://webobjects.mdimension.com/wolips/preview/WOLipsFramework.m4v]]
18.1	6
32.1	7	Click to Open is a browser based extension to WOLips found in [[Project Wonder>>WONDER:Home]]. All of the Wonder ERD2W components support Click to Open.
18.1	8
26.1	9	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.
18.1	10
	11	== What You Need ==
	12
32.1	13	You need the WOLips framework that is part of Project Wonder. Nothing else from Project Wonder is needed. If you already use Project Wonder, are you almost done.
18.1	14
32.1	15	If you are not using Project Wonder, you can download it from [[mDimension's site>>http://webobjects.mdimension.com/wonder/]], untar the frameworks, and copy just the WOLips.framework to where you have the rest of your frameworks (usually /Library or ,,/Library).,,
	16
18.1	17	== Getting Set Up ==
	18
	19	=== Add the WOLips.framework ===
	20
22.1	21	Follow the [[tutorial>>Add a Framework Dependency]] on adding a framework to add WOLips.framework to your application.
18.1	22
	23	=== Add Support to Component Base Class ===
	24
	25	If your components extend Wonder's ERXComponent, you can skip this step. Once again, using Wonder makes your life easier.
	26
32.1	27	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. If you don't have one, you might want to start using the ClickToOpenComponent below.
18.1	28
32.1	29	You will need to add the appendToResponse(WOResponse, WOContext) method below to your component base class, or add this code to your appendToResponse method if you already have one.
18.1	30
32.1	31	Here is an example implementation of a component base class and of Click to Open support:
18.1	32
	33	{{code value="java"}}
	34
	35	package net.com.foo.bar;
	36
	37	import com.webobjects.appserver.*;
30.1	38	import er.extensions.*;
18.1	39
	40	/**
	41	* Support for "Click to Open" navigation from the browser to the template in Eclipse. To enable this,
	42	* launch with:
	43	* <pre>
	44	* -Der.component.clickToOpen=true
	45	* </pre>
	46	*/
	47	public class ClickToOpenComponent extends com.webobjects.appserver.WOComponent {
	48
30.1	49	public static final boolean isClickToOpenEnabled = ERXProperties.booleanForKeyWithDefault("er.component.clickToOpen", false);
18.1	50
	51	public ClickToOpenComponent(WOContext context) {
	52	super(context);
	53	}
	54
	55	public void appendToResponse(WOResponse response, WOContext context) {
	56	ERXClickToOpenSupport.preProcessResponse(response, context, isClickToOpenEnabled);
	57	super.appendToResponse(response, context);
	58	ERXClickToOpenSupport.postProcessResponse(getClass(), response, context, isClickToOpenEnabled);
	59	}
	60	}
	61
	62	{{/code}}
	63
26.1	64	For components that can't sub-class ClickToOpenComponent (directly or indirectly), you can enable Click to Open by adding this method to your component:
18.1	65
26.1	66	{{code value="java"}}
	67
	68	public void appendToResponse(WOResponse response, WOContext context)
	69	{
	70	ERXClickToOpenSupport.preProcessResponse(response, context, ClickToOpenComponent.isClickToOpenEnabled);
	71	super.appendToResponse(response, context);
	72	ERXClickToOpenSupport.postProcessResponse(getClass(), response, context, ClickToOpenComponent.isClickToOpenEnabled);
	73	}
	74
	75	{{/code}}
	76
	77	Note that when isClickToOpenEnabled is false, the ERXClickToOpenSupport methods are no-ops.
	78
18.1	79	=== Add Support to Application ===
	80
	81	If your Application.java class extends Wonder's ERXApplication, you can skip this step too. Otherwise, add a developmentMode() method like this:
	82
	83	{{code value="java"}}
	84
	85	private Boolean isDevelopmentMode;
	86	public boolean developmentMode() {
	87	if (isDevelopmentMode == null) {
30.1	88	isDevelopmentMode = new Boolean(ERXProperties.booleanForKey("er.extensions.ERXApplication.developmentMode", false));
18.1	89	}
	90	return isDevelopmentMode.booleanValue();
	91	}
	92
	93	{{/code}}
	94
	95	=== Set Application Properties ===
	96
26.1	97	In your application's Properties file, add this line:
18.1	98
26.1	99	{{code}}
18.1	100
26.1	101	wolips.password=yourpassword
18.1	102
26.1	103	{{/code}}
	104
	105	If you need to, you can also change these default values:
	106
	107	{{code}}
	108
	109	wolips.host=localhost
	110	wolips.port=9485
	111
	112	{{/code}}
	113
18.1	114	=== Provide prototype.js ===
	115
26.1	116	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, add this to your application's Properties file (as an example, change the values as appropriate):
18.1	117
26.1	118	{{code}}
18.1	119
26.1	120	wolips.prototype.framework=app
	121	wolips.prototype.fileName=prototype.js
	122
	123	{{/code}}
	124
18.1	125	=== Add WOLToolBar to Your Pages ===
	126
26.1	127	In your page wrapper's HTML template, add
18.1	128
26.1	129	{{code value="html"}}
	130
	131	<wo:WOLToolBar/>
	132
	133	{{/code}}
	134
	135	and you're done. If you don't have a [[page wrapper>>WO:Web Applications-Development-Examples-Page Layout]], you will have to add this to every page. Hint: page wrappers make your life easier.
	136
	137	If you are using the old WO template syntax, add this to the .html file:
	138
	139	{{code value="html"}}
	140
	141	<webobject name="WOLToolBar" />
	142
	143	{{/code}}
	144
	145	And add this to the .wod file:
	146
	147	{{code value="html"}}
	148
	149	WOLToolBar: WOLToolBar{
	150	}
	151
	152	{{/code}}
	153
18.1	154	=== Configure WOLips Server ===
	155
32.1	156	You must be using a recent version of WOLips that supports the WOLips Server. In your WOLips preferences, you must enable the WOLips Server and set the communication password. This password must match the ##wolips.password## in the Set Application Properties section above.
18.1	157
26.1	158	Turning on the WOLips Server requires Eclipse to be restarted.
	159
	160	[[image:WOLipsServerPreferences.png]]
	161
	162	You can optionally change the port number. If you do change the port number, see ##wolips.port## in the Set Application Properties section above.
	163
	164	=== Enable Click to Open ===
	165
	166	And add -Der.component.clickToOpen=true and -Der.extensions.ERXApplication.developmentMode=true to the launch arguments:
	167
	168	[[image:EnableClickToOpen.png]]
	169
18.1	170	== Using Click to Open ==
26.1	171
32.1	172	Run your application and look in the lower, left hand corner. You should see a link like this:
	173
26.1	174	[[image:ClickToOpenLink.png]]
	175
32.1	176	If you don't, check that the page has the WOLToolBar on it and that the ##er.component.clickToOpen## property is set to true and the ##er.extensions.ERXApplication.developmentMode## property is set to true.
	177
	178	\\
	179
	180	Click on this component to open the Click to Open UI:
	181
26.1	182	[[image:ClickToOpenExpanded.png]]
	183
32.1	184	EditDisplayAd is the page in the browser. Click on this link to open this page in Eclipse.
	185
	186	\\
	187
	188	If you are looking for a sub-component of this page, click on the Click to Open link. As you move your mouse over the page, the bread crumb of components will change to show you where you are. Just click to open the component under the mouse in Eclipse. It is that easy!
	189
26.1	190	[[image:ClickToOpenInAction.png]]
	191
32.1	192	\\
	193
	194	=== Additional Functionality ===
	195
	196	* Esc is a shortcut for getting out of click-to-open mode
	197	* hold down the Cmd key while you move the mouse around and it will highlight the component
	198	* Cmd-click it will popup the stack of components and you can pick from the stack:
	199	[[image:ComponentStack.png]]

Wiki source code of Click to Open

Applications

Navigation

My Recent Modifications

Need help?