<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta content="text/html;charset=UTF-8" http-equiv="Content-Type"></head><body ><div style='font-size:10pt;font-family:Verdana,Arial,Helvetica,sans-serif;color:#00000;'><div>Hi John,<br></div><div><br></div><div>Thanks for the reply.<br></div><div><br></div><div>I will use the zurb basic tabs as an example. <a href="https://foundation.zurb.com/sites/docs/tabs.html#basics" target="_blank">https://foundation.zurb.com/sites/docs/tabs.html#basics</a><br></div><div><br></div><div>Implemented in Smalltalk here: <a href="http://menmachinesmaterials.com/zurb/Containers/Tabs/TabsBasics" target="_blank">http://menmachinesmaterials.com/zurb/Containers/Tabs/TabsBasics</a><br></div><div><br></div><div><br></div><div><br></div><div>1. If you look at the foundation.zurb source code, it looks like this:<br></div><div><br></div><blockquote style="border: 1px solid rgb(204, 204, 204); padding: 7px; background-color: rgb(245, 245, 245);"><div><div><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"><<span class="colour" style="color:rgb(0, 128, 128)">ul</span> <span style="box-sizing: inherit;" class="hljs-attr">class</span>=<span class="colour" style="color:rgb(221, 17, 68)">"tabs"</span> <span style="box-sizing: inherit;" class="hljs-attr">data-tabs</span> <span style="box-sizing: inherit;" class="hljs-attr">id</span>=<span class="colour" style="color:rgb(221, 17, 68)">"example-tabs"</span>></span></span></span><span class="highlight" style="background-color:rgb(249, 249, 249)"><span class="colour" style="color:rgb(10, 10, 10)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"> </span></span></span></span><br></div><div><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"> <<span class="colour" style="color:rgb(0, 128, 128)">li</span> <span style="box-sizing: inherit;" class="hljs-attr">class</span>=<span class="colour" style="color:rgb(221, 17, 68)">"tabs-title is-active"</span>><<span class="colour" style="color:rgb(0, 128, 128)">a</span> <span style="box-sizing: inherit;" class="hljs-attr">href</span>=<span class="colour" style="color:rgb(221, 17, 68)">"#panel1"</span> <span style="box-sizing: inherit;" class="hljs-attr">aria-selected</span>=<span class="colour" style="color:rgb(221, 17, 68)">"true"</span>></span></span></span><span class="highlight" style="background-color:rgb(249, 249, 249)"><span class="colour" style="color:rgb(10, 10, 10)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px">Tab 1</span></span></span></span><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"></<span class="colour" style="color:rgb(0, 128, 128)">a</span>></<span class="colour" style="color:rgb(0, 128, 128)">li</span>></span></span></span><span class="highlight" style="background-color:rgb(249, 249, 249)"><span class="colour" style="color:rgb(10, 10, 10)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"> </span></span></span></span><br></div><div><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"> <<span class="colour" style="color:rgb(0, 128, 128)">li</span> <span style="box-sizing: inherit;" class="hljs-attr">class</span>=<span class="colour" style="color:rgb(221, 17, 68)">"tabs-title"</span>><<span class="colour" style="color:rgb(0, 128, 128)">a</span> <span style="box-sizing: inherit;" class="hljs-attr">data-tabs-target</span>=<span class="colour" style="color:rgb(221, 17, 68)">"panel2"</span> <span style="box-sizing: inherit;" class="hljs-attr">href</span>=<span class="colour" style="color:rgb(221, 17, 68)">"#panel2"</span>></span></span></span><span class="highlight" style="background-color:rgb(249, 249, 249)"><span class="colour" style="color:rgb(10, 10, 10)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px">Tab 2</span></span></span></span><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"></<span class="colour" style="color:rgb(0, 128, 128)">a</span>></<span class="colour" style="color:rgb(0, 128, 128)">li</span>></span></span></span><span class="highlight" style="background-color:rgb(249, 249, 249)"><span class="colour" style="color:rgb(10, 10, 10)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"> </span></span></span></span><br></div><div><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"></<span class="colour" style="color:rgb(0, 128, 128)">ul</span>></span></span></span><br></div><div><br></div></div></blockquote><div><br></div><div>2. If you go to the menmachinesmaterails link, and inspect the tabs, they look like this:<br></div><div><br></div><blockquote style="border: 1px solid rgb(204, 204, 204); padding: 7px; background-color: rgb(245, 245, 245);"><div><div><ul class="tabs" data-tabs="9cs7b4-tabs" id="example-tabs" role="tablist"><br></div><div> <li class="tabs-title is-active" role="presentation"><a aria-selected="true" href="#panel1" role="tab" aria-controls="panel1" id="panel1-label" tabindex="0">Tab 1</a></li><br></div><div> <li class="tabs-title" role="presentation"><a data-tabs-target="panel2" role="tab" aria-controls="panel2" aria-selected="false" id="panel2-label" tabindex="-1">Tab 2</a></li><br></div><div></ul><br></div></div></blockquote><div class="zmail_extra"><div id="Zm-_Id_-Sgn1"><div><br></div><div>As you can see, the zurb foundation framework has added values to the data-tabs attribute and inserted a role="tablist". Neither of these exist in the raw html generated by Seaside.<br></div><div>You can view the smalltalk source code at the menmachinesmaterials link under the "Smalltalk Source Code" accordion.<br></div><div><br></div><div>What I would like to do is ask any WAComponent to print out the html as in 1.<br></div><div><br></div><div>The rational has to do with SCSS/CSS Saas work (i.e. theming) in the Foundation live environment as described here: <a href="https://foundation.zurb.com/sites/docs/sass.html" target="_blank">https://foundation.zurb.com/sites/docs/sass.html</a><br></div><div><br></div><div>What I need to do is copy-n-paste the html of 1 into the live environment. copy-n-paste of 2. results in me pasting zurb generated attributes.<br></div><div>For that tabs example, the SeasideComponent is ZurbTabsBasicsExample<br></div><div><br></div><div>So in smalltalk, given a subclass of WAComponent, I would like to "print it" to get the basic html of 1:<br></div><div><br></div><div><br></div><div><br></div></div></div><blockquote style="border: 1px solid rgb(204, 204, 204); padding: 7px; background-color: rgb(245, 245, 245);"><div><div>(ZurbTabsBasicsExample new) <print it> >> "<span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"><<span class="colour" style="color:rgb(0, 128, 128)">ul</span> <span class="hljs-attr" style="box-sizing: inherit;">class</span>=<span class="colour" style="color:rgb(221, 17, 68)">"tabs"</span> <span class="hljs-attr" style="box-sizing: inherit;">data-tabs</span> <span class="hljs-attr" style="box-sizing: inherit;">id</span>=<span class="colour" style="color:rgb(221, 17, 68)">"example-tabs"</span>></span></span></span><span class="highlight" style="background-color:rgb(249, 249, 249)"><span class="colour" style="color:rgb(10, 10, 10)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"> </span></span></span></span><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"><<span class="colour" style="color:rgb(0, 128, 128)">li</span> <span class="hljs-attr" style="box-sizing: inherit;">class</span>=<span class="colour" style="color:rgb(221, 17, 68)">"tabs-title is-active"</span>><<span class="colour" style="color:rgb(0, 128, 128)">a</span> <span class="hljs-attr" style="box-sizing: inherit;">href</span>=<span class="colour" style="color:rgb(221, 17, 68)">"#panel1"</span> <span class="hljs-attr" style="box-sizing: inherit;">aria-selected</span>=<span class="colour" style="color:rgb(221, 17, 68)">"true"</span>></span></span></span><span class="highlight" style="background-color:rgb(249, 249, 249)"><span class="colour" style="color:rgb(10, 10, 10)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px">Tab 1</span></span></span></span><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"></<span class="colour" style="color:rgb(0, 128, 128)">a</span>></<span class="colour" style="color:rgb(0, 128, 128)">li</span>></span></span></span><span class="highlight" style="background-color:rgb(249, 249, 249)"><span class="colour" style="color:rgb(10, 10, 10)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"> </span></span></span></span><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"><<span class="colour" style="color:rgb(0, 128, 128)">li</span> <span class="hljs-attr" style="box-sizing: inherit;">class</span>=<span class="colour" style="color:rgb(221, 17, 68)">"tabs-title"</span>><<span class="colour" style="color:rgb(0, 128, 128)">a</span> <span class="hljs-attr" style="box-sizing: inherit;">data-tabs-target</span>=<span class="colour" style="color:rgb(221, 17, 68)">"panel2"</span> <span class="hljs-attr" style="box-sizing: inherit;">href</span>=<span class="colour" style="color:rgb(221, 17, 68)">"#panel2"</span>></span></span></span><span class="highlight" style="background-color:rgb(249, 249, 249)"><span class="colour" style="color:rgb(10, 10, 10)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px">Tab 2</span></span></span></span><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"></<span class="colour" style="color:rgb(0, 128, 128)">a</span>></<span class="colour" style="color:rgb(0, 128, 128)">li</span>></span></span></span><span class="highlight" style="background-color:rgb(249, 249, 249)"><span class="colour" style="color:rgb(10, 10, 10)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"> </span></span></span></span><span class="colour" style="color:rgb(0, 0, 128)"><span class="font" style="font-family:Consolas, "Liberation Mono", Courier, monospace"><span class="size" style="font-size:16px"></<span class="colour" style="color:rgb(0, 128, 128)">ul</span>>"</span></span></span><br></div><div><br></div></div></blockquote><div class="zmail_extra"><div id="Zm-_Id_-Sgn1"><div><br></div></div></div><div class="zmail_extra"><div id="Zm-_Id_-Sgn1"><div>Now, "print it" is just a stand in for what I have in mind. I don't care about the mechanism, just the output. <br></div><div><br></div><div>hth,<br></div><div><br></div><div>t</div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div>---- On Sat, 22 Dec 2018 15:07:14 -0500 <b>Johan Brichau <johan@inceptive.be></b> wrote ----<br></div></div><div><br></div><blockquote style="border-left: 1px solid #cccccc; padding-left: 6px; margin:0 0 0 5px"><div style=""><div>Still not sure what you want :)<br></div><div><br></div><div><div>You want to print the generated html of a component?<br></div><div><br></div><div><div>WAHtmlCanvas builder render: [ :html |<br></div><div><span style="white-space: pre-wrap"></span>html unorderedList: [<br></div><div><span style="white-space: pre-wrap"></span>html listItem: 'an item' ] ].<br></div><div><br></div><div><br></div><div><div><br></div><blockquote><div>On 22 Dec 2018, at 18:11, gettimothy <<a href="mailto:gettimothy@zoho.com" target="_blank">gettimothy@zoho.com</a>> wrote:<br></div><div><br></div><div><div><div style="font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif"><div>No, that is internal to a component.<br></div><div><br></div><div>I guess I am looking for a brush that renders to a workspace<br></div><div><br></div><div><br></div><div><br></div><div><div><br></div><div>---- On Sat, 22 Dec 2018 11:48:04 -0500<b> <a href="mailto:johan@inceptive.be" target="_blank">johan@inceptive.be</a> </b> wrote ----<br></div><div><br></div><blockquote style="border-left: 1px solid rgb(204, 204, 204); padding-left: 6px; margin-left: 5px"><div style=""><div>You mean `html html: ‘<p> Here is some plain html </p>’ ` ?<br></div><div><br></div><div><div>Johan<br></div><div><div><br></div><blockquote><div>On 22 Dec 2018, at 13:02, gettimothy <<a href="mailto:gettimothy@zoho.com" target="_blank">gettimothy@zoho.com</a>> wrote:<br></div><div><br></div><div><div><div style="font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif"><div>Hi Folks,<br></div><div><br></div><div><div>I am looking for something like doing a "print it" on MySeasideComponent.<br></div><div><br></div><div>Does this exist?<br></div><div><br></div><div>There are times during CSS work where having a component's html as a cut-n-paste would be handy. This is because the modern (Zurb Foundation) modifies the seaside generated html after page-load with "live" variables for things like tool-tips, off-canvas, modals, etc. Therefore, the "View Source" in the browser is different than what I have coded in my components.<br></div></div><div><br></div><div>These frameworks (Zurb Foundation) provide live coding environments based on node.js and placing clean html into them is a must so that the zurb can generate its own live variables.<br></div><div><br></div><div><br></div><div>thx<br></div></div><div><br></div></div><div>_______________________________________________<br></div><div>seaside mailing list<br></div><div><a href="mailto:seaside@lists.squeakfoundation.org" target="_blank">seaside@lists.squeakfoundation.org</a><br></div><div><a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div></div></blockquote></div><div><br></div></div><div>_______________________________________________<br></div><div>seaside mailing list<br></div><div><a href="mailto:seaside@lists.squeakfoundation.org" target="_blank">seaside@lists.squeakfoundation.org</a><br></div><div><a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div></div></blockquote></div></div><div><br></div></div><div>_______________________________________________<br></div><div>seaside mailing list<br></div><div><a href="mailto:seaside@lists.squeakfoundation.org" target="_blank">seaside@lists.squeakfoundation.org</a><br></div><div><a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div></div></blockquote></div><div><br></div></div></div><div>_______________________________________________<br></div><div>seaside mailing list<br></div><div><a href="mailto:seaside@lists.squeakfoundation.org" target="_blank">seaside@lists.squeakfoundation.org</a><br></div><div><a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div></div></blockquote></div><div><br></div></div><br></body></html>