platform-help-home/proposals/xhtml/index.htm

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 1.1, Wed Feb 16 18:40:52 2005 UTC revision 1.2, Thu Feb 17 17:06:33 2005 UTC
# Line 1  Line 1 
1  <p>Under construction - a real document will be added here.</p>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3    <html>
4    
5    <head>
6    <title>Welcome Framework Enhancements</title>
7    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
8    <meta http-equiv="Content-Style-Type" content="text/css" />
9    <link href="../Eclipse%20Doc%20Template/Eclipse%20Projects_files/dynamic_capabilities_files/default_style.css" type="text/css" rel="stylesheet" />
10    <script type="text/javascript" language="JavaScript">
11    <!--
12    function FP_changeProp() {//v1.0
13     var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
14     d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o";
15     ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) {
16      s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
17     x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
18     if(s) eval(s+"=v"); }
19    }
20    
21    function FP_getObjectByID(id,o) {//v1.0
22     var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
23     else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
24     if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
25     for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
26     f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
27     for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
28     return null;
29    }
30    // -->
31    </script>
32    </head>
33    
34    <body bgcolor="#ffffff" style="position: relative; left: 0; top: 0">
35    
36    <table width="100%">
37            <tr>
38                    <td style="BACKGROUND: #0080c0"><span style="color: #FFFFFF"><b>Intro</b></span></td>
39            </tr>
40    </table>
41    <h1>XHTML support in the Welcome Framework.</h1>
42    <blockquote>
43            <b>Summary</b><br />
44            This document describes the new <a href="http://www.w3.org/TR/xhtml1/">XHTML
45            1.0</a> support in the Eclipse 3.1 Welcome framework. This new feature is still
46            evolving, and feedback is welcomed.<p><font size="-1">Last modified: Feb 17,
47            2005</font></p>
48            <p>&nbsp;</p>
49    </blockquote>
50    <p></p>
51    <h3>Background </h3>
52    <p>In Eclipse SDK 3.0, a new welcome framework was introduced to replace the existing
53    editor-based welcome framework. It allowed for authoring Welcome pages using custom
54    Intro XML markup. This kept content completely separate from presentation, which
55    in turn was solely controlled by CSS or .properties files. A custom markup language
56    was introduced to allow for the dynamic contribution to a given welcome page. This
57    pluggable architecture for a given welcome page was needed to follow the same dynamic
58    plugin nature of the platform itself. That is, a page can: </p>
59    <ul>
60            <li>include content from other welcome pages.</li>
61            <li>contribute content to another welcome pages. </li>
62            <li>have content
63            <a href="javascript:;" onclick="FP_changeProp(/*id*/'tooltip4',0,'style.display','inline')">
64            <span style="cursor:help; text-decoration: none;">programmatically injected
65            </span></a>into it.
66            <span id="tooltip4" style="position: relative; display:none;" onclick="FP_changeProp(/*id*/'tooltip4',0,'style.display','none')">
67            <font color="#0000FF" style="cursor: hand;">(This content is typically the result
68            of some query to the workbench through java code. An interface in the intro
69            framework allows for dynamically interacting with the generated HTML page and
70            populating the html page with more content, on the fly. For example, a welcome
71            page can dynamically create and display a list of projects in the workbench.)</font></span></li>
72    </ul>
73    <p>These features where implemented in 3.0 using a custom intro XML markup, and
74    while the design satisfied the requirement, feedback pointed to the need for easier
75    authoring. One such usability enhancement is to allow Welcome pages to be created
76    by WYSIWYG editors, eliminating the need for the visual designer to know any details
77    about the internals of the Intro framework. Once created, these pages can then be
78    contributed as Welcome pages and assembled together into one coherent &quot;out of the
79    box&quot; experience. </p>
80    <p>&nbsp;</p>
81    <h3>Proposed Solution</h3>
82    <p>Intro content will now be contributed with
83    <a href="javascript:;" onclick="FP_changeProp(/*id*/'tooltip1',0,'style.display','inline')">
84    <span style="cursor: help; text-decoration: none;">XHTML 1.0 documents</span></a>
85    <span id="tooltip1" style="position: relative; display:none;" onclick="FP_changeProp(/*id*/'tooltip1',0,'style.display','none')">
86    <font color="#0000FF" style="cursor: hand;">(A reformulation of the three HTML 4
87    document types as applications of XML 1.0. For M5, only XHTML 1.0 is supported.
88    XHTML 1.1 (module-based XHTML) can be supported, based on feedback.)</font></span>.
89    The idea is to use the fact that XHTML is well formed XML and parse each document,
90    manipulating the DOM to allow for contributions and extensions to be merged.
91    Three xml elements from the 3.0 intro markup where used to extend the XHTML 1.0
92    element list. These where <code>include</code>, <code>anchor</code>, and <code>
93    contentProvider</code>.
94    </p>
95    <ul>
96            <li>&nbsp;<code><b>include</b>: </code>this element can be added to a valid
97            XHTML document to include content from another XHTML document. The content
98            to be included must be a valid XHTML snippet.</li>
99    </ul>
100    <blockquote>
101            <dl>
102                    <dd>e.g.: <code>&lt;include path=&quot;root/foo&quot; /&gt;</code> will include an element
103            with id <code>foo</code> from a welcome page with id <code>root</code>.
104    </dd>
105            </dl>
106    </blockquote>
107    <ul>
108            <li>&nbsp;<code><b>anchor</b>: </code>this element can be added to a valid XHTML
109            document to declare that content can be contributed to this page by other
110            welcome contributions. A page declares locations that are suitable to be
111            extended by defining these anchor points.</li>
112    </ul>
113    <blockquote>
114            <dl>
115                    <dd>e.g.: <code>&lt;anchor id=&quot;anchor1&quot; /&gt;</code> will allow for
116                    contribution into this page from other plugins. </dd>
117            </dl>
118    </blockquote>
119    <ul>
120            <li><code><b>contentProvider</b>: </code>this element can be added to a valid XHTML
121            document to establish a hook into the workbench. When the intro framework
122            encounters this element, an interface is called allowing for the
123            manipulation of the DOM of the XHTML page. &nbsp;&nbsp;
124            </li>
125    </ul>
126    <dl>
127            <dd>
128            <dl>
129                    <dd>e.g.: <code>&lt;contentProvider id=&quot;contentProviderId&quot;
130                    class=&quot;org.eclipse.ui.intro.template2.IntroXHTMLContentProvider&quot;
131                    pluginId=&quot;org.eclipse.ui.intro.template2&quot;&gt; &lt;/contentProvider&gt; <br>
132                    </code>&nbsp;will allow for dynamic content to be generated from the <code>
133                    org.eclipse.ui.intro.template2.IntroXHTMLContentProvider</code> class.</dd>
134            </dl>
135            </dd>
136    </dl>
137    <p>With these three elements, XHTML pages can be used to assemble a pluggable
138    and dynamic welcome experience.</p>
139    <p></p>
140    <p></p>
141    <blockquote>
142            <address><b><span style="font-variant: small-caps">Note</span>: </b>if the only requirement is to render a tree of HTML documents
143                    (from the file system or from the net), with no need for extensibility,
144                    then this is already supported in Eclipse 3.0. A page can simply be defined
145                    as follows:<br /><code>&nbsp;&nbsp;&nbsp; &lt;introContent&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;page id=&quot;homePageId&quot; url=&quot;http://eclipse.org&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;page id=&quot;standbyPageId&quot; url=&quot;./static001/standby.html&quot;/&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/introContent&gt;</code>
146            </address>
147            <address>The html page is loaded from the specified url, and displayed in the Welcome
148                    view as is. In this scenario, the html page can make use of the custom intro
149                    url actions. The browser in the welcome &quot;knows&quot; how to interpret these urls
150                    in a special way, allowing for interaction with the workbench from a static
151                    html page.
152            </address>
153            <address>
154            </address>
155    </blockquote>
156    <h3>&nbsp;</h3>
157    <h3>Hello World Sample</h3>
158    <p>Here are the steps to create a Hello World XHTML Welcome page :&nbsp; </p>
159    <ul>
160            <li><b>contribute a product </b>:</li>
161    </ul>
162    <dl>
163            <dd>
164            <pre><code>&lt;extension id=&quot;<i>product</i>&quot;</code><a href="javascript:;" onclick="FP_changeProp(/*id*/'tooltip5',0,'style.display','inline')"><span style="cursor: help; text-decoration: none;"><sup>1</sup></span></a> <span id="tooltip5" style="position: relative; display:none;" onclick="FP_changeProp(/*id*/'tooltip5',0,'style.display','none')"><font color="#0000FF" style="cursor: hand;">(<i>italic</i> means a user specified value) </font></span><code>point=&quot;org.eclipse.core.runtime.products&quot;&gt;
165        &lt;product name=&quot;<i>%example.product.name</i>&quot;
166            application=&quot;<i>org.eclipse.ui.ide.workbench</i>&quot;&gt;
167        &lt;/product&gt;
168    &lt;/extension&gt;</code></pre>
169            </dd>
170    </dl>
171    <ul>
172            <li><b>contribute an intro part and bind it to the product you just created
173            </b>:</li>
174    </ul>
175    <blockquote>
176            <pre><code>&lt;extension point=&quot;org.eclipse.ui.intro&quot;&gt;
177        &lt;intro
178            class=&quot;org.eclipse.ui.intro.config.CustomizableIntroPart&quot;
179            id=&quot;<i>org.eclipse.ui.intro.template2.introId</i>&quot;&gt;
180        &lt;/intro&gt;
181        &lt;introProductBinding
182            introId=&quot;<i>org.eclipse.ui.intro.template2.introId</i>&quot;
183            productId=&quot;<i>org.eclipse.ui.intro.template2.product</i>&quot;&gt;
184        &lt;/introProductBinding&gt;
185    &lt;/extension&gt; </code></pre>
186    </blockquote>
187    <ul>
188            <li><b>contribute a config (configuration) to the intro part you just
189            created :</b></li>
190    </ul>
191    <blockquote>
192            <pre><code>&lt;extension point=&quot;org.eclipse.ui.intro.config&quot;&gt;
193        &lt;config id = &quot;<i>template2_configId</i>&quot;
194            introId=&quot;<i>org.eclipse.ui.intro.template2.introId</i>&quot;
195            content=&quot;<i>introContent.xml</i>&quot;&gt;
196        &lt;presentation home-page-id=&quot;<i>root</i>&quot;&gt;
197            &lt;implementation kind=&quot;html&quot;/&gt;
198        &lt;/presentation&gt;
199        &lt;/config&gt;
200    &lt;/extension&gt; </code></pre>
201    </blockquote>
202    <ul>
203            <li><b>create an intro content file, introContent.xml, that describes all
204            your pages, and that you referenced in your intro configuration :</b></li>
205    </ul>
206    <blockquote>
207            <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
208    &lt;introContent&gt;
209        &lt;page id=&quot;root&quot; content=&quot;content/root.xhtml&quot;/&gt;
210        &lt;page id=&quot;concept1&quot; content=&quot;content/concept1.xhtml&quot;/&gt;
211        &lt;page id=&quot;concept2&quot; content=&quot;content/concept2.xhtml&quot;/&gt;
212    &lt;/introContent&gt;</code></pre>
213    </blockquote>
214    <ul>
215            <li><b>create the actual XHTML pages referenced by the content file. Here is
216            root.xhtml :&nbsp; </b></li>
217    </ul>
218    <blockquote>
219            <pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
220        &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
221    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
222    &lt;head&gt;
223        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
224        &lt;title&gt;root.xhtml&lt;/title&gt;
225        &lt;link rel=&quot;stylesheet&quot; href=&quot;root.css&quot; type=&quot;text/css&quot; /&gt;
226    &lt;/head&gt;
227    &lt;body&gt;
228        &lt;h1&gt;Welcome to Product A&lt;/h1&gt;
229        &lt;h4 id=&quot;firstH4&quot;&gt;
230            &lt;img border=&quot;0&quot; src=&quot;welcome_item.gif&quot; alt=&quot;Concept1&quot; /&gt;
231            &lt;a href=&quot;http://org.eclipse.ui.intro/showPage?id=concept1&quot;&gt;Learn about Concept One...
232            &lt;/a&gt;
233         &lt;/h4&gt;
234        &lt;h4&gt;
235            &lt;img border=&quot;0&quot; src=&quot;welcome_item.gif&quot; alt=&quot;Concept2&quot; /&gt;
236            &lt;a href=&quot;http://org.eclipse.ui.intro/showPage?id=concept2&quot;&gt;Learn about Concept Two...&lt;/a&gt;
237        &lt;/h4&gt;
238        <b>&lt;anchor id=&quot;anchor1&quot; /&gt;</b>
239    &lt;/body&gt;
240    &lt;/html&gt;</code></pre>
241    </blockquote>
242    <ul>
243            <li><b>launch a runtime-workbench with the product id you just created to
244            see the simple intro :</b></li>
245    </ul>
246    <blockquote>
247            <p><code><img border="0" src="index.1.jpg"><br>
248            <br>
249    &nbsp;</code></p>
250            <p>&nbsp;</p>
251    </blockquote>
252    <h3>Extending the Hello World Sample</h3>
253    <p>Here are the steps to contribute to the above Hello World intro sample :&nbsp; </p>
254    <ul>
255            <li><b>contribute a configExtension declaring that you want to extend the
256            original configuration </b>:</li>
257    </ul>
258    <dl>
259            <dd>
260            <pre><code>&lt;extension point=&quot;org.eclipse.ui.intro.configExtension&quot;&gt;
261        &lt;configExtension configId=&quot;<i>template2_configId</i>&quot;
262            content=&quot;<i>ext.xml</i>&quot;/&gt;
263    &lt;/extension&gt; </code></pre>
264            </dd>
265    </dl>
266    <ul>
267            <li><b>create the extension content file and declare what the
268            extension content is. extensionContent element specifies the location of the
269            content file and the target path where this extension content needs to be
270            inserted. If this new content needs to reference other pages, these pages
271            can be declared in the same extension content file, as below :&nbsp; </b></li>
272    </ul>
273    <blockquote>
274            <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
275    &lt;introContent&gt;
276        &lt;extensionContent content=&quot;content/extContent.xhtml&quot; path=&quot;root/anchor1&quot; /&gt;
277        &lt;page id=&quot;concept3&quot; content=&quot;content/concept3.xhtml&quot;/&gt;
278    &lt;/introContent&gt;</code></pre>
279    </blockquote>
280    <ul>
281            <li><b>create the actual extension content, and save it as a separate file,
282            extContent.xml :</b></li>
283    </ul>
284    <blockquote>
285            <pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
286            &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
287    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
288    &lt;head&gt;
289            &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
290            &lt;title&gt;root.xhtml&lt;/title&gt;
291            &lt;link rel=&quot;stylesheet&quot; href=&quot;root.css&quot; type=&quot;text/css&quot; /&gt;
292    &lt;/head&gt;
293    &lt;body&gt;
294            &lt;h4&gt;
295              &lt;img border=&quot;0&quot; src=&quot;welcome_item.gif&quot; alt=&quot;Concept2&quot; /&gt;
296              &lt;a href=&quot;http://org.eclipse.ui.intro/showPage?id=concept3&quot;&gt;Learn about Concept Three...&lt;/a&gt;
297            &lt;/h4&gt;
298    &lt;/body&gt;
299    &lt;/html&gt;</code></pre>
300    </blockquote>
301    <ul>
302            <li><b>launch a runtime-workbench with the product id of the product you created
303            to see the extension to the Hello World intro. We simply contributed a third
304            topic to the root page that launches the contributed page, <code>
305            id=&quot;concept3&quot; </code>:</b></li>
306    </ul>
307    <blockquote>
308            <p><img border="0" src="index.2.jpg"></p>
309    </blockquote>
310    <p>&nbsp;</p>
311    <ul>
312            <li><b>the content of the third page uses the <code>include</code> and the
313            <code>contentProvider</code> elements to include the first link from the
314            root page, and to print the current time. It is as follows : </b></li>
315    </ul>
316    <blockquote>
317            <p>
318            <iframe name="I1" src="concept3XHTML.htm" width="100%" height="280" style="border: 1px solid #FFFFFF">
319            Your browser does not support inline frames or is currently configured not to display inline frames.
320            </iframe></p>
321    </blockquote>
322    <p>&nbsp;</p>
323    <ul>
324            <li><b>this is what the above page would look like after the intro elements
325            in it have been resolved. Notice the topic from the root page, and notice
326            the current time : </b></li>
327    </ul>
328    <blockquote>
329            <p><img border="0" src="index.3.jpg"></p>
330    </blockquote>
331    <p>&nbsp;</p>
332    <h3>Setup needed temporarily for M5 :</h3>
333    <p>Since all XHTML intro files are loaded with an xml parser, they have to be
334    well-formed
335    XML files. The process of loading an XML file validates the xml files for conformance
336    (even in the case of an non-validating XML parser). This mean that the DTD from
337    the XHTML 1.0 specs need to be local, for the intro parser to use them. A special EntityResolver handler had
338    to be written the point the DOCTYPE url to these local DTDs. </p>
339    <p>However, for M5, these dtds are not available yet, and they have to be
340    downloaded and unzip in a local temp folder. Here are the steps to get XHTML
341    support setup for M5: </p>
342    <ul>
343            <li>download and unzip <b>xhtml1.zip</b> from
344            <a href="http://www.w3.org/TR/xhtml1/#dtds">
345            http://www.w3.org/TR/xhtml1/#dtds</a> into any temp directory.</li>
346            <li>you need to pass -<b>DdtdBaseLocation</b>=&lt;folder where you unzipped
347            above dtd file&gt;. e.g.: -DdtdBaseLocation=D:\temp when you self host.</li>
348    </ul>
349    <p>&nbsp;</p>
350    <h3>Document Conformance and file name extensions</h3>
351    <ul>
352            <li>All documents used as intro pages must be valid XHTML 1.0 documents. XHTML
353            markup can be validated using w3.org <a href="http://validator.w3.org/">validators</a>.</li>
354            <li>For conformance with existing HTML 4.0.1 browsers and to avoid running into
355            any compatibility issues, authors are encouraged to follow the
356            <a href="http://www.w3.org/TR/xhtml1/#guidelines">compatibility guidelines</a>
357            document in the XHTML 1.0 specs. By doing so, an XHTML 1.0 page is nothing but
358            well-formed xml html.&nbsp; </li>
359            <li>For M5, all XHTML documents must be UTF-8 encoded and the
360            <a href="javascript:;" onclick="FP_changeProp(/*id*/'tooltip2',0,'style.display','inline')">
361            <span style="cursor: help; text-decoration: none">XML declaration </span>
362            </a>
363            <span id="tooltip2" style="position: relative; display:none; cursor: hand;" onclick="FP_changeProp(/*id*/'tooltip2',0,'style.display','none')">
364            <font color="#0000FF">(e.g.: &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;)</font>&nbsp;
365            </span> must be avoided. This is a design/technical issue that is still evolving.
366            <p></p>
367            <h3>&nbsp;</h3>
368            </li>
369    </ul>
370    
371    </body>
372    
373    </html>

Legend:
Removed from v.1.1  
changed lines
  Added in v.1.2