Skip to Content

Changes for page Click to Open

Last modified by Kieran Kelleher on 2012/07/21 20:41
From version 37.1
edited by chuckhill
on 2008/03/12 14:32
Change comment: More edits
To version 41.1
edited by David Avendasora
on 2008/03/21 08:38
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.chuckhill
1 +XWiki.avendasora
Content
... ... @@ -1,32 +1,34 @@
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.
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 4  
5 -Check out the [[screencast at the mDimension build site>>http://webobjects.mdimension.com/wolips/preview/WOLipsFramework.m4v]]!
5 +Check out the [[screencast at the mDimension build site>>http://webobjects.mdimension.com/wolips/preview/WOLipsFramework.m4v]]
6 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 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 Click to Open.
8 8  
9 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 10  
11 11  == What You Need ==
12 12  
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).,,
13 +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, are you almost done.
14 14  
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 and ERExtensions.framework to where you have the rest of your frameworks (usually /Library/Frameworks or ,,/Library/Frameworks).,,
16 +
15 15  == Getting Set Up ==
16 16  
17 17  === Add the WOLips.framework ===
18 18  
19 -Follow the [[tutorial>>Add a Framework Dependency]] on adding a framework to add WOLips.framework to your application.
21 +Follow the [[tutorial>>Add a Framework Dependency]] on adding a framework to add WOLips.framework and ERXExtentions.framework to your application.
20 20  
21 21  === Add Support to Component Base Class ===
22 22  
23 23  If your components extend Wonder's ERXComponent, you can skip this step. Once again, using Wonder makes your life easier.
24 24  
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.
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.
26 26  
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.
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.
28 28  
29 -To include it into your component base class, you can use this sample implementation:
31 +Here is an example implementation of a component base class and of Click to Open support:
30 30  
31 31  {{code value="java"}}
32 32  
... ... @@ -33,8 +33,8 @@
33 33  package net.com.foo.bar;
34 34  
35 35  import com.webobjects.appserver.*;
36 -import er.extensions.*;
37 37  
39 +
38 38  /**
39 39   * Support for "Click to Open" navigation from the browser to the template in Eclipse. To enable this,
40 40   * launch with:
... ... @@ -44,7 +44,7 @@
44 44   */
45 45  public class ClickToOpenComponent extends com.webobjects.appserver.WOComponent {
46 46  
47 - public static final boolean isClickToOpenEnabled = ERXProperties.booleanForKeyWithDefault("er.component.clickToOpen", false);
49 + public static final boolean isClickToOpenEnabled = Boolean.getBoolean(System.getProperty("er.component.clickToOpen", "false"));
48 48  
49 49   public ClickToOpenComponent(WOContext context) {
50 50   super(context);
... ... @@ -83,7 +83,7 @@
83 83  private Boolean isDevelopmentMode;
84 84  public boolean developmentMode() {
85 85   if (isDevelopmentMode == null) {
86 - isDevelopmentMode = new Boolean(ERXProperties.booleanForKey("developmentMode", false));
88 + isDevelopmentMode = new Boolean(System.getProperty("er.extensions.ERXApplication.developmentMode", "false"));
87 87   }
88 88   return isDevelopmentMode.booleanValue();
89 89  }
... ... @@ -122,35 +122,77 @@
122 122  
123 123  === Add WOLToolBar to Your Pages ===
124 124  
125 -5) In your page wrapper, add a <wo:WOLToolBar/> component, and you're good to go. Look in the lower
126 -left hand corner of the browser window for the link.
127 +In your page wrapper's HTML template, add
127 127  
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 +
128 128  === Configure WOLips Server ===
129 129  
130 -You must be using a recent version of WOLips that supports the WOLips Server. In
131 -your WOLips preferences, you must enable the WOLips Server, set the port number and the communication
132 -password. Turning on the WOLips Server requires a restart of WOLips.
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.
133 133  
158 +**Turning on the WOLips Server requires Eclipse to be restarted.**
159 +
134 134  [[image:WOLipsServerPreferences.png]]
135 135  
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 +
136 136  === Enable Click to Open ===
137 137  
138 -And add this to the launch arguments:
139 ---DdevelopmentMode=true--
166 +And add **-Der.component.clickToOpen=true** and **-Der.extensions.ERXApplication.developmentMode=true** to the launch arguments:
140 140  
141 141  [[image:EnableClickToOpen.png]]
142 142  
143 143  == Using Click to Open ==
144 144  
172 +Run your application and look in the lower, left hand corner. You should see a link like this:
173 +
145 145  [[image:ClickToOpenLink.png]]
146 146  
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 +
147 147  [[image:ClickToOpenExpanded.png]]
148 148  
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 +
149 149  [[image:ClickToOpenInAction.png]]
150 150  
151 -you can hold cmd
152 -and it will highlight the component
153 -and if you cmd-click
154 -it will popup the stack
155 -and you can pick from the stack
156 -also esc is a shortcut for getting out of click-to-open mode
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]]
200 +* you can the binding ##expanded=true;## on WOLToolBar so it's open by default, instead of closed