Skip to Content

Wiki source code of Click to Open

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