[Seaside] render Seaside Component html to a workspace?

gettimothy gettimothy at zoho.com
Sun Dec 23 07:40:31 UTC 2018


Hi John, Thanks for the reply. I will use the zurb basic  tabs as an example. https://foundation.zurb.com/sites/docs/tabs.html#basics Implemented in Smalltalk here: http://menmachinesmaterials.com/zurb/Containers/Tabs/TabsBasics 1. If you look at the foundation.zurb source code, it looks like this: <ul class="tabs" data-tabs id="example-tabs">       <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>       <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li> </ul> 2. If you go to the menmachinesmaterails link, and inspect the tabs, they look like this: <ul class="tabs" data-tabs="9cs7b4-tabs" id="example-tabs" role="tablist">       <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>       <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> </ul> 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. You can view the smalltalk source code at the menmachinesmaterials link under the "Smalltalk Source Code" accordion. What I would like to do is ask any WAComponent to print out the html as in 1. The rational has to do with SCSS/CSS Saas work (i.e. theming) in the Foundation live environment as described here: https://foundation.zurb.com/sites/docs/sass.html 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. For that tabs example, the SeasideComponent is ZurbTabsBasicsExample So in smalltalk, given a subclass of WAComponent, I would like to "print it" to get the basic html of 1: (ZurbTabsBasicsExample new)  <print it>  >> "<ul class="tabs" data-tabs id="example-tabs"> <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li> <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li> </ul>" Now, "print it" is just a stand in for what I have in mind. I don't care about the mechanism, just the output.  hth, t ---- On Sat, 22 Dec 2018 15:07:14 -0500 Johan Brichau <johan at inceptive.be> wrote ---- Still not sure what you want :) You want to print the generated html of a component? WAHtmlCanvas builder render: [ :html | html unorderedList: [ html listItem: 'an item' ] ]. On 22 Dec 2018, at 18:11, gettimothy <gettimothy at zoho.com> wrote: No, that is internal to a component. I guess I am looking for a brush that renders to a workspace ---- On Sat, 22 Dec 2018 11:48:04 -0500 johan at inceptive.be wrote ---- You mean `html html: ‘<p> Here is some plain html </p>’ ` ? Johan On 22 Dec 2018, at 13:02, gettimothy <gettimothy at zoho.com> wrote: Hi Folks, I am looking for something like doing a "print it" on  MySeasideComponent. Does this exist? 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. 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. thx _______________________________________________ seaside mailing list seaside at lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list seaside at lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list seaside at lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list seaside at lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20181223/6656513f/attachment-0001.html>


More information about the seaside mailing list