<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><meta name=Generator content="Microsoft Word 12 (filtered medium)"><base href="http://permalink.gmane.org/gmane.comp.cms.opencms.devel/38906"><title>Re: OpenCms 9 custom widgets</title><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";
color:black;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
pre
{mso-style-priority:99;
mso-style-link:"HTML Vorformatiert Zchn";
margin:0cm;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New";
color:black;}
span.HTMLVorformatiertZchn
{mso-style-name:"HTML Vorformatiert Zchn";
mso-style-priority:99;
mso-style-link:"HTML Vorformatiert";
font-family:Consolas;
color:black;}
span.E-MailFormatvorlage19
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 70.85pt 2.0cm 70.85pt;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body bgcolor=white lang=DE link=blue vlink=purple><div class=WordSection1><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'>Hi there, <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'>there is a way to create custom widgets for OpenCms 8.5 (and I guess it should work in 9 as well, but I’m not sure), but it’s not documented. <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'>With OpenCms 8.5 you get a module named org.opencms.dev.demo.customwidget that contains the source code for a Java Class (CustomWidget.java, it doesn’t do much) and a sample JavaScript widget (mywidget.js).<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'>Using this sample you can create custom widgets in Plain JavaScript, no GWT required (that’s why I chose this method).<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'>The JavaScript contains two functions: <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'> createNativeWidget: creates the widget for the form based XML editor<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'> createNativeWrapedElement: creates the widget for the inline editor<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'>Besides others there are two notable functions for each of the widgets: <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'> getElement: returns a DOM element that is or contains your widget, this might be a simple editable DIV or a complex multi-select widget. <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'> setValue: must be called whenever the value of your widget changes, (e.g. if the value of a select box changes)<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'>I got some custom widgets working that way, but it wasn’t easy.<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'>Get the module, have a look at the source code. If you think that this is a way you could go then you can contact me again, I might be able to strip down one of my widgets to provide working sample code.<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'>Cheers<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'>Kai<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0cm 0cm 0cm'><p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif";color:windowtext'>Von:</span></b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif";color:windowtext'> opencms-dev-bounces@opencms.org [mailto:opencms-dev-bounces@opencms.org] <b>Im Auftrag von </b>Tobias Karrer<br><b>Gesendet:</b> Freitag, 4. Juli 2014 11:34<br><b>An:</b> The OpenCms mailing list<br><b>Betreff:</b> Re: [opencms-dev] OpenCms 9 custom widgets<o:p></o:p></span></p></div></div><p class=MsoNormal><o:p> </o:p></p><div><p class=MsoNormal>Someone from Alkacon?<br><br>Am 12.06.2014 15:20, schrieb Tobias Karrer:<o:p></o:p></p></div><blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'><pre>Hi!<o:p></o:p></pre><pre><o:p> </o:p></pre><pre>Looking for a solution to migrate my old widgets, I went through the <o:p></o:p></pre><pre>recent topics.<o:p></o:p></pre><pre><o:p> </o:p></pre><pre>Seems that a lot of people have problems with Custom Widgets in 8.5. and 9:<o:p></o:p></pre><pre><o:p> </o:p></pre><pre><a href="http://opencms.996256.n3.nabble.com/OpenCms-9-custom-widgets-tt24244.html">http://opencms.996256.n3.nabble.com/OpenCms-9-custom-widgets-tt24244.html</a><o:p></o:p></pre><pre><a href="http://opencms.996256.n3.nabble.com/Custom-widgets-and-the-new-acacia-editor-tt18313.html">http://opencms.996256.n3.nabble.com/Custom-widgets-and-the-new-acacia-editor-tt18313.html</a><o:p></o:p></pre><pre><a href="http://opencms.996256.n3.nabble.com/Custom-Widget-opencms-9-0-1-tt24186.html">http://opencms.996256.n3.nabble.com/Custom-Widget-opencms-9-0-1-tt24186.html</a><o:p></o:p></pre><pre><a href="http://opencms.996256.n3.nabble.com/GWT-custom-widgets-and-dev-demo-customwidget-tt24113.html">http://opencms.996256.n3.nabble.com/GWT-custom-widgets-and-dev-demo-customwidget-tt24113.html</a><o:p></o:p></pre><pre><a href="http://opencms.996256.n3.nabble.com/Custom-widget-with-GWT-tt23612.html">http://opencms.996256.n3.nabble.com/Custom-widget-with-GWT-tt23612.html</a><o:p></o:p></pre><pre><a href="http://opencms.996256.n3.nabble.com/Creating-a-CustomeCategoryWidget-tt23473.html">http://opencms.996256.n3.nabble.com/Creating-a-CustomeCategoryWidget-tt23473.html</a><o:p></o:p></pre><pre><a href="http://opencms.996256.n3.nabble.com/Custom-widgets-in-latest-versions-tt23251.html">http://opencms.996256.n3.nabble.com/Custom-widgets-in-latest-versions-tt23251.html</a><o:p></o:p></pre><pre><a href="http://opencms.996256.n3.nabble.com/Custom-XmlContent-Widget-in-8-5-1-tt23181.html">http://opencms.996256.n3.nabble.com/Custom-XmlContent-Widget-in-8-5-1-tt23181.html</a><o:p></o:p></pre><pre><a href="http://opencms.996256.n3.nabble.com/I-Custom-widgets-and-the-new-acacia-editor-SOLVED-tt18800.html">http://opencms.996256.n3.nabble.com/I-Custom-widgets-and-the-new-acacia-editor-SOLVED-tt18800.html</a><o:p></o:p></pre><pre><a href="http://opencms.996256.n3.nabble.com/Opencms-8-5-Custom-Widgets-tt14097.html">http://opencms.996256.n3.nabble.com/Opencms-8-5-Custom-Widgets-tt14097.html</a><o:p></o:p></pre><pre><o:p> </o:p></pre><pre>Maybe someone knows how to do it and gives us an hint :-)<o:p></o:p></pre><pre><o:p> </o:p></pre><pre>Best,<o:p></o:p></pre><pre>Tobias<o:p></o:p></pre><pre><o:p> </o:p></pre><pre>Am 09.06.2014 20:07, schrieb Tobias Karrer:<o:p></o:p></pre><pre><o:p> </o:p></pre><pre>_______________________________________________<o:p></o:p></pre><pre>This mail is sent to you from the opencms-dev mailing list<o:p></o:p></pre><pre>To change your list options, or to unsubscribe from the list, please visit<o:p></o:p></pre><pre><a href="http://lists.opencms.org/cgi-bin/mailman/listinfo/opencms-dev">http://lists.opencms.org/cgi-bin/mailman/listinfo/opencms-dev</a><o:p></o:p></pre><pre><o:p> </o:p></pre><pre><o:p> </o:p></pre><pre><o:p> </o:p></pre></blockquote><p class=MsoNormal><o:p> </o:p></p></div></body></html>