Skip to Content

Changes for page Click to Open

Last modified by Kieran Kelleher on 2012/07/21 20:41
From version 23.1
edited by chuckhill
on 2008/03/12 14:11
Change comment: Edits and images
To version 30.1
edited by chuckhill
on 2008/03/12 14:49
Change comment: Up to the Using... section

Summary

Details

Page properties
Content
... ... @@ -1,14 +1,13 @@
1 1  == What It Is ==
2 2  
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.
4 +
3 3  Check out the [[screencast at the mDimension build site>>http://webobjects.mdimension.com/wolips/preview/WOLipsFramework.m4v]]!
4 4  
5 -Click to Open is a browser based extension to WOLips found in [[Project Wonder>>WONDER:Home]]. 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.
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.
6 6  
7 -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.
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.**
8 8  
9 -**Note that click-to-open support is expensive, because it has to dig around
10 -your component HTML quite a bit, so you will take a performance hit in development to have it enabled.**
11 -
12 12  == What You Need ==
13 13  
14 14  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).,,
... ... @@ -84,7 +84,7 @@
84 84  private Boolean isDevelopmentMode;
85 85  public boolean developmentMode() {
86 86   if (isDevelopmentMode == null) {
87 - isDevelopmentMode = new Boolean(ERXProperties.booleanForKey("developmentMode", false));
86 + isDevelopmentMode = new Boolean(ERXProperties.booleanForKey("er.extensions.ERXApplication.developmentMode", false));
88 88   }
89 89   return isDevelopmentMode.booleanValue();
90 90  }
... ... @@ -91,42 +91,82 @@
91 91  
92 92  {{/code}}
93 93  
94 -And add this to the launch arguments:
95 ---DdevelopmentMode=true--
96 -
97 97  === Set Application Properties ===
98 98  
99 -In your application preferences, you can then set:
95 +In your application's Properties file, add this line:
100 100  
97 +{{code}}
98 +
99 +wolips.password=yourpassword
100 +
101 +{{/code}}
102 +
103 +If you need to, you can also change these default values:
104 +
105 +{{code}}
106 +
101 101  wolips.host=localhost
102 102  wolips.port=9485
103 -wolips.password=yourpassword
104 -er.component.clickToOpen=true
105 105  
106 -Only 'wolips.password' is strictly required as long as you use the default port of 9485.
110 +{{/code}}
107 107  
108 108  === Provide prototype.js ===
109 109  
110 -WOLips.framework needs a prototype.js. If you are using Ajax framework, you don't need to do
111 -anything, because it will default to use Ajax.framework's prototype.js. However, if you are not,
112 -you must set (as an example):
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):
113 113  
114 - wolips.prototype.framework=app
115 - wolips.prototype.fileName=prototype.js
116 +{{code}}
116 116  
118 +wolips.prototype.framework=app
119 +wolips.prototype.fileName=prototype.js
120 +
121 +{{/code}}
122 +
117 117  === Add WOLToolBar to Your Pages ===
118 118  
119 -5) In your page wrapper, add a <wo:WOLToolBar/> component, and you're good to go. Look in the lower
120 -left hand corner of the browser window for the link.
125 +In your page wrapper's HTML template, add
121 121  
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 +
122 122  === Configure WOLips Server ===
123 123  
124 -You must be using a recent version of WOLips that supports the WOLips Server. In
125 -your WOLips preferences, you must enable the WOLips Server, set the port number and the communication
126 -password. Turning on the WOLips Server requires a restart of WOLips.
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.
127 127  
157 +**Turning on the WOLips Server requires Eclipse to be restarted.**
158 +
128 128  [[image:WOLipsServerPreferences.png]]
129 129  
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 +
130 130  == Using Click to Open ==
131 131  
132 132  [[image:ClickToOpenLink.png]]
... ... @@ -134,3 +134,10 @@
134 134  [[image:ClickToOpenExpanded.png]]
135 135  
136 136  [[image:ClickToOpenInAction.png]]
176 +
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