Skip to Content

Wiki source code of Click to Open

Version 62.1 by Kieran Kelleher on 2023/11/13 11:58
Show last authors
1 == What It Is ==
2
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.
4
5 Check out the [[screencast at the mDimension build site>>url:http://webobjects.mdimension.com/wolips/support/screencasts/WOLipsFramework.m4v||shape="rect"]]
6
7 Click to Open is a browser based extension to WOLips found in [[Project Wonder>>doc:WONDER.Home]]. All of the Wonder ERD2W components support Click to Open.
8
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.**
10
11 *Also note that if you use ERExcelLook or ERPDFGeneration that you will want to disable Click to Open in development. The former you can do in a rule:
12
13 {{code}}
14 *10 : pageConfiguration like '*Excel' => clickToOpenEnabled = "false" [com.webobjects.directtoweb.BooleanAssignment]
15 {{/code}}
16
17 The latter in your component:
18
19 {{code}}
20
21 public boolean clickToOpenEnabled(WOResponse response, WOContext context) {
22 return false;
23 }
24
25 {{/code}}
26
27 == What You Need ==
28
29 You need the **WOLips** framework that is part of Project Wonder. You also need the **ERExtensions** framework that is part of Project Wonder on the class path at runtime. If you already use Project Wonder, you are almost done.
30
31 If you are not using Project Wonder, you can download it from [[mDimension's site>>url:http://webobjects.mdimension.com/wonder/||shape="rect"]], untar the frameworks, and copy just the WOLips.framework and ERExtensions.framework to where you have the rest of your frameworks (usually /Library/Frameworks or ~~/Library/Frameworks).
32
33 == Getting Set Up ==
34
35 === Add the WOLips.framework ===
36
37 Follow the [[tutorial>>doc:documentation.Home.WOLips Tutorials.Add a Framework Dependency.WebHome]] on adding a framework to add WOLips.framework and ERXExtentions.framework to your application.
38
39 === Add Support to Component Base Class ===
40
41 If your components extend Wonder's ERXComponent, you can skip this step. Once again, using Wonder makes your life easier.
42
43 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.
44
45 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.
46
47 Here is an example implementation of a component base class and of Click to Open support:
48
49 {{code 0="java"}}
50
51 package net.com.foo.bar;
52
53 import com.webobjects.appserver.*;
54
55
56 /**
57 * Support for "Click to Open" navigation from the browser to the template in Eclipse. To enable this,
58 * launch with:
59 * <pre>
60 * -Der.component.clickToOpen=true
61 * </pre>
62 */
63 public class ClickToOpenComponent extends com.webobjects.appserver.WOComponent {
64
65 public static final boolean isClickToOpenEnabled = Boolean.parseBoolean(System.getProperty("er.component.clickToOpen", "false"));
66
67 public ClickToOpenComponent(WOContext context) {
68 super(context);
69 }
70
71 public void appendToResponse(WOResponse response, WOContext context) {
72 ERXClickToOpenSupport.preProcessResponse(response, context, isClickToOpenEnabled);
73 super.appendToResponse(response, context);
74 ERXClickToOpenSupport.postProcessResponse(getClass(), response, context, isClickToOpenEnabled);
75 }
76 }
77
78 {{/code}}
79
80 For components that can't sub-class ClickToOpenComponent (directly or indirectly), you can enable Click to Open by adding this method to your component:
81
82 {{code 0="java"}}
83
84 public void appendToResponse(WOResponse response, WOContext context)
85 {
86 ERXClickToOpenSupport.preProcessResponse(response, context, ClickToOpenComponent.isClickToOpenEnabled);
87 super.appendToResponse(response, context);
88 ERXClickToOpenSupport.postProcessResponse(getClass(), response, context, ClickToOpenComponent.isClickToOpenEnabled);
89 }
90
91 {{/code}}
92
93 **Note that when isClickToOpenEnabled is false, the ERXClickToOpenSupport methods are no-ops.**
94
95 === Add Support to Application ===
96
97 If your Application.java class extends Wonder's ERXApplication, you can skip this step too. Otherwise, add a developmentMode() method like this:
98
99 {{code 0="java"}}
100
101 private Boolean isDevelopmentMode;
102 public boolean developmentMode() {
103 if (isDevelopmentMode == null) {
104 isDevelopmentMode = new Boolean(System.getProperty("er.extensions.ERXApplication.developmentMode", "false"));
105 }
106 return isDevelopmentMode.booleanValue();
107 }
108
109 {{/code}}
110
111 === Set Application Properties ===
112
113 In your application's Properties file, add this line:
114
115 {{code}}
116
117 wolips.password=yourpassword
118
119 {{/code}}
120
121 If you need to, you can also change these default values:
122
123 {{code}}
124
125 wolips.host=localhost
126 wolips.port=9485
127
128 {{/code}}
129
130 === Provide prototype.js ===
131
132 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):
133
134 {{code}}
135
136 wolips.prototype.framework=app
137 wolips.prototype.fileName=prototype.js
138
139 {{/code}}
140
141 === Add WOLToolBar to Your Pages ===
142
143 In your page wrapper's HTML template, add
144
145 {{code 0="html"}}
146
147 <wo:WOLToolBar/>
148
149 {{/code}}
150
151 and you're done. If you don't have a [[page wrapper>>doc:documentation.Home.How-tos.Development-Examples.Development-Examples-Page Layout.WebHome]], you will have to add this to every page. Hint: page wrappers make your life easier.
152
153 If you are using the old WO template syntax, add this to the .html file:
154
155 {{code 0="html"}}
156
157 <webobject name="WOLToolBar" />
158
159 {{/code}}
160
161 And add this to the .wod file:
162
163 {{code 0="html"}}
164
165 WOLToolBar: WOLToolBar{
166 }
167
168 {{/code}}
169
170 === Configure WOLips Server ===
171
172 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 {{code language="none"}}wolips.password{{/code}} in the **Set Application Properties** section above.
173
174 **Turning on the WOLips Server requires Eclipse to be restarted.**
175
176 [[image:attach:WOLipsServerPreferences.png]]
177
178 You can optionally change the port number. If you do change the port number, see {{code language="none"}}wolips.port{{/code}} in the **Set Application Properties** section above.
179
180 === Enable Click to Open ===
181
182 If you are using Wonder, add the following to your Properties file:
183
184 * **er.component.clickToOpen=true**
185 * **er.extensions.ERXApplication.developmentMode=true**
186
187 If you are not using Wonder, add the Launch parameters as follows:
188
189 * Parameter = **-Der.component.clickToOpen=true**, Argument = **true**
190 * Parameter = **-Der.extensions.ERXApplication.developmentMode=true** Argument = **true**
191
192 [[image:attach:EnableClickToOpen.png]]
193
194 == Using Click to Open ==
195
196 Run your application and look in the lower, left hand corner. You should see a link like this:
197
198 [[image:attach:ClickToOpenLink.png]]
199
200 If you don't, check that the page has the WOLToolBar on it and that the {{code language="none"}}er.component.clickToOpen{{/code}} property is set to true and the {{code language="none"}}er.extensions.ERXApplication.developmentMode{{/code}} property is set to true.
201
202 \\
203
204 Click on this component to open the Click to Open UI:
205
206 [[image:attach:WOLipsToolbar.png]]
207
208 **EditDisplayAd** is the page in the browser. Click on this link to open this page in Eclipse.
209
210 \\
211
212 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!
213
214 [[image:attach:ClickToOpenInAction.png]]
215
216 \\
217
218 === Additional Functionality ===
219
220 * Esc is a shortcut for getting out of click-to-open mode
221 * hold down the Cmd key while you move the mouse around and it will highlight the component
222 * Cmd-click it will popup the stack of components and you can pick from the stack:
223 [[image:attach:ComponentStack.png]]
224 * you can set the binding {{code language="none"}}expanded=true;{{/code}} on WOLToolBar so it's open by default, instead of closed