Skip to Content

Wiki source code of Click to Open

Version 31.1 by chuckhill on 2008/03/12 14:49
Hide last authors
Pascal Robert 18.1 1 == What It Is ==
2
chuckhill 30.1 3 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
chuckhill 30.1 5 Check out the [[screencast at the mDimension build site>>http://webobjects.mdimension.com/wolips/preview/WOLipsFramework.m4v]]!
Pascal Robert 18.1 6
chuckhill 30.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 this.
Pascal Robert 18.1 8
chuckhill 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.**
Pascal Robert 18.1 10
11 == What You Need ==
12
chuckhill 30.1 13 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>>http://webobjects.mdimension.com/wonder/]]. If not using Wonder, untar the frameworks and copy WOLips.framework to where you have the rest of your frameworks (usually /Library or ,,/Library).,,
Pascal Robert 18.1 14
15 == Getting Set Up ==
16
17 === Add the WOLips.framework ===
18
chuckhill 22.1 19 Follow the [[tutorial>>Add a Framework Dependency]] on adding a framework to add WOLips.framework to your application.
Pascal Robert 18.1 20
21 === Add Support to Component Base Class ===
22
23 If your components extend Wonder's ERXComponent, you can skip this step. Once again, using Wonder makes your life easier.
24
chuckhill 30.1 25 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.
Pascal Robert 18.1 26
chuckhill 30.1 27 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.
Pascal Robert 18.1 28
chuckhill 30.1 29 To include it into your component base class, you can use this sample implementation:
Pascal Robert 18.1 30
31 {{code value="java"}}
32
33 package net.com.foo.bar;
34
35 import com.webobjects.appserver.*;
chuckhill 30.1 36 import er.extensions.*;
Pascal Robert 18.1 37
38 /**
39 * Support for "Click to Open" navigation from the browser to the template in Eclipse. To enable this,
40 * launch with:
41 * <pre>
42 * -Der.component.clickToOpen=true
43 * </pre>
44 */
45 public class ClickToOpenComponent extends com.webobjects.appserver.WOComponent {
46
chuckhill 30.1 47 public static final boolean isClickToOpenEnabled = ERXProperties.booleanForKeyWithDefault("er.component.clickToOpen", false);
Pascal Robert 18.1 48
49 public ClickToOpenComponent(WOContext context) {
50 super(context);
51 }
52
53 public void appendToResponse(WOResponse response, WOContext context) {
54 ERXClickToOpenSupport.preProcessResponse(response, context, isClickToOpenEnabled);
55 super.appendToResponse(response, context);
56 ERXClickToOpenSupport.postProcessResponse(getClass(), response, context, isClickToOpenEnabled);
57 }
58 }
59
60 {{/code}}
61
chuckhill 26.1 62 For components that can't sub-class ClickToOpenComponent (directly or indirectly), you can enable Click to Open by adding this method to your component:
Pascal Robert 18.1 63
chuckhill 26.1 64 {{code value="java"}}
65
66 public void appendToResponse(WOResponse response, WOContext context)
67 {
68 ERXClickToOpenSupport.preProcessResponse(response, context, ClickToOpenComponent.isClickToOpenEnabled);
69 super.appendToResponse(response, context);
70 ERXClickToOpenSupport.postProcessResponse(getClass(), response, context, ClickToOpenComponent.isClickToOpenEnabled);
71 }
72
73 {{/code}}
74
75 **Note that when isClickToOpenEnabled is false, the ERXClickToOpenSupport methods are no-ops.**
76
Pascal Robert 18.1 77 === Add Support to Application ===
78
79 If your Application.java class extends Wonder's ERXApplication, you can skip this step too. Otherwise, add a developmentMode() method like this:
80
81 {{code value="java"}}
82
83 private Boolean isDevelopmentMode;
84 public boolean developmentMode() {
85 if (isDevelopmentMode == null) {
chuckhill 30.1 86 isDevelopmentMode = new Boolean(ERXProperties.booleanForKey("er.extensions.ERXApplication.developmentMode", false));
Pascal Robert 18.1 87 }
88 return isDevelopmentMode.booleanValue();
89 }
90
91 {{/code}}
92
93 === Set Application Properties ===
94
chuckhill 26.1 95 In your application's Properties file, add this line:
Pascal Robert 18.1 96
chuckhill 26.1 97 {{code}}
Pascal Robert 18.1 98
chuckhill 26.1 99 wolips.password=yourpassword
Pascal Robert 18.1 100
chuckhill 26.1 101 {{/code}}
102
103 If you need to, you can also change these default values:
104
105 {{code}}
106
107 wolips.host=localhost
108 wolips.port=9485
109
110 {{/code}}
111
Pascal Robert 18.1 112 === Provide prototype.js ===
113
chuckhill 26.1 114 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):
Pascal Robert 18.1 115
chuckhill 26.1 116 {{code}}
Pascal Robert 18.1 117
chuckhill 26.1 118 wolips.prototype.framework=app
119 wolips.prototype.fileName=prototype.js
120
121 {{/code}}
122
Pascal Robert 18.1 123 === Add WOLToolBar to Your Pages ===
124
chuckhill 26.1 125 In your page wrapper's HTML template, add
Pascal Robert 18.1 126
chuckhill 26.1 127 {{code value="html"}}
128
129 <wo:WOLToolBar/>
130
131 {{/code}}
132
133 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.
134
135 If you are using the old WO template syntax, add this to the .html file:
136
137 {{code value="html"}}
138
139 <webobject name="WOLToolBar" />
140
141 {{/code}}
142
143 And add this to the .wod file:
144
145 {{code value="html"}}
146
147 WOLToolBar: WOLToolBar{
148 }
149
150 {{/code}}
151
Pascal Robert 18.1 152 === Configure WOLips Server ===
153
chuckhill 30.1 154 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
155 password.
Pascal Robert 18.1 156
chuckhill 26.1 157 **Turning on the WOLips Server requires Eclipse to be restarted.**
158
159 [[image:WOLipsServerPreferences.png]]
160
161 You can optionally change the port number. If you do change the port number, see ##wolips.port## in the **Set Application Properties** section above.
162
163 === Enable Click to Open ===
164
165 And add **-Der.component.clickToOpen=true** and **-Der.extensions.ERXApplication.developmentMode=true** to the launch arguments:
166
167 [[image:EnableClickToOpen.png]]
168
Pascal Robert 18.1 169 == Using Click to Open ==
chuckhill 26.1 170
171 [[image:ClickToOpenLink.png]]
172
173 [[image:ClickToOpenExpanded.png]]
174
175 [[image:ClickToOpenInAction.png]]
176
chuckhill 30.1 177 you can hold cmd
178 and it will highlight the component
179 and if you cmd-click
180 it will popup the stack
181 and you can pick from the stack
182 also esc is a shortcut for getting out of click-to-open mode