Forum OpenACS Development: Re: css style classes for the documentation project

Collapse
Posted by Gustaf Neumann on
Goto openacs.org/xowiki and edit an arbitrary page. You will see on the right-hand-side of the xinha editor a panel named "styles". This is rendered by the stylist...

Hope this helps
-gustaf neumann

Collapse
Posted by tony lima on
Well, it helped me see that I am missing something!
Beside this code above, do I need to add anything else?

Thanks

Collapse
Posted by Gustaf Neumann on
What kind of content do you want to edit?
Do you get xinha at all?
What browser are you using?
Collapse
Posted by tony lima on
The xinha editor is up and running. The Stylist plugin appears in the source code when I search for it.
I just can't get the "Styles" window on the right to appear.

Here is what my .tcl file looks like currently:

template::head::add_script -type text/javascript -script "
xinha_editors = null;
xinha_init = null;
xinha_config = null;
xinha_plugins = null;
xinha_init = xinha_init ? xinha_init : function() {
xinha_plugins = xinha_plugins ? xinha_plugins :
\[$xinha_plugins\];

// THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING
if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;

xinha_editors = xinha_editors ? xinha_editors :\[ $htmlarea_ids \];
xinha_config = xinha_config ? xinha_config() : new Xinha.Config();
$xinha_params
$xinha_options
xinha_editors =
Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
Xinha.startEditors(xinha_editors);
xinha_config.stylistLoadStylesheet('/home/openacs/openacs/packages/xowiki/www/resources/xowiki.css');

// We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
// otherwise it won't work!
//xinha_config.stylistLoadStylesheet('/mystyles.css');

// Or we can load styles directly
//xinha_config.stylistLoadStyles('p.red_text { color:red }');

// If you want to provide friendly names you can do so like this
xinha_config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});

// or like this
//xinha_config.stylistLoadStylesheet('/mystyles.css', {'p.pink_text' : 'Pretty Pink'});
}
window.onload = xinha_init;

"

Any thoughts.
I really appreciate you walking me through this.
Thanks Again.

Collapse
Posted by Gustaf Neumann on
Are you edit xowiki pages? if yes, there is no need to mess around with template::head::add_script at all.

if you are editing with plain ad_form, then it is not required either:
See example in http://openacs.org/api-doc/proc-view?proc=template%3a%3awidget%3a%3arichtext

Why have you started with template::head::add_script?

Collapse
Posted by tony lima on
Gustaf,

I am editing xowiki pages.
I was guided into the blank-template by people much smarter than myself on this subject. I guess I should have come to you first.

I went to the link you suggested and am now in that .tcl file.
I am using this code:

#Tony is playing in here...
set rich_text_spec {richtext(richtext),nospell,optional {
label Content} {html {style {width: 100%}}} {
options {editor xinha plugins {Stylist OacsFs} height 350px javascript {
xinha_config.stylistLoadStylesheet('/home/openacs/openacs/packages/xowiki/www/resources/xowiki.css',
{'div.code' : 'Code Block'});
}}}}

set widget_specs [list *,text $rich_text_spec]

I have been placing it different areas with no changes.
Is there a particular place I should be putting this?
I apologize for not getting this right.
Thanks again.

Collapse
Posted by Gustaf Neumann on
The easiest approach is to add the code-snippet into the folder object. Checkout section 7.3 and 7.4 at http://media.wu-wien.ac.at/download/xowiki-doc/#folder-object
Collapse
Posted by Dennis Lima on
Hi Gustaf,

I'm kinda "wading in" on Tony's postings here.....

In the XoWiki manual you mention the "directory object".

See:
"The described configuration can be performed by editing the directory object and setting the variable rich_text_spec to the rich text widget specification as follows."

We do not know what/where the "directory object" is. Can you direct us to this file/object/page/instance?

Thanks for your help.

D.

Collapse
Posted by Gustaf Neumann on
The term "directory object" referes to the same thing as the term "folder object". See http://alice.wu-wien.ac.at:8000/xowiki-doc/#folder-object

I have replaced all occurances of "directory object" by "folder object" in the documentation above. The concept of the "folder object" comes from the very first versions of xowiki. Currently, the primary use-case is actually the javascrupt configuration. It is planned that future versions of xowiki will not require the folder object anymore.

Collapse
Posted by Dennis Lima on
Thanks Gustaf. That clarifies things.

Our problem specifically is this. We know the Stylist plugin is loaded (we see it in the Xinha "Plugins" tab when we click the "i" button (About this editor button) in a given Xinha instance).

However, the Xinha Stylist toolbar is not appearing.

How/where do we source in the Javascript code you provide in your documentation?

Do we create a new object/file/page/pageinstance and source in (maybe 'include') the code you provided?

Thanks for your patience.

Collapse
Posted by Gustaf Neumann on
What is the stylist toolbar? The rich_text_spec contains attribute/value pairs; one can include arbitrary javascript code there (see below for an example). There is no need to source javascript code. Put every javascript for the configuration of xinha there.

The definitions contained in the folder object are used for every page contained in this folder (i.e. for this xowiki instance). The definitions used for the folder object for the wiki on openacs.org are:

set rich_text_spec {richtext(richtext),nospell,optional {
label Content} {htmlarea_p 1} {html {style {width: 100%}}} {
options {editor xinha plugins {Stylist OacsFs} height 350px javascript {
xinha_config.stylistLoadStylesheet('/xowiki/resources/xowiki.css',
{'div.code' : 'Code Block'});
xinha_config.stylistLoadStylesheet('/doc/openacs.css');
}}}}

set widget_specs [list *,text $rich_text_spec]

These definitions are passed via acs-templating to the HTML generated for the page. So, if you have added the information to the folder object, and you edit some ::xowiki::Page (a new one or an existing one), you will see the included javascript when you look at the source-code of the currently displayed HTML page.

What is the definition you are using? What do you see in the HTML page? Maybe, the answer to your "problem" is trivial: stylist shows in the panel only the applicable styles. Depending on the provided styles, the panel might be empty.

Collapse
Posted by Dennis Lima on
My reference to the 'Stylist toolbar' was incorrect. I should have said the 'Stylist panel'.

We will make sure the applicable styles and the provided styles are in sync.

Will the Stylist panel display even if there are no 'applicable styles'?

I am still struggling with the 'folder object' concept. I have created an ::xowiki::Object and inserted the rich_text_spec definition referenced above into the 'Content' box.

Now, does that mean by simply saving this ::xowiki::Object I have 'enabled' the Stylist panel for this and other pages/objecs? How do other pages/objects reference this content?

Thanks.

Collapse
Posted by Gustaf Neumann on
Will the Stylist panel display even if there are no 'applicable styles'?
yes

I am still struggling with the 'folder object' concept. I have created an ::xowiki::Object and inserted the rich_text_spec definition referenced above into the 'Content' box.
xowiki creates the folder object automatically for you. Look into your admin pages, you will find an ::xowiki::Object with the name "::SOMENUMBER" in your instance. SOMENUMBER stands here for the folder_id in the content repository. If you create an arbitrary ::xowiki::Object as you indicated in your last posting, it won't do anything.

Now, does that mean by simply saving this ::xowiki::Object I have 'enabled' the Stylist panel for this and other pages/objecs?
yes, if you update the folder object, the definition will be valid for editing all pages of this xowiki instance using xhinha. Note that ::xowiki::Object and ::xowiki::PlainPage don't use xinha, so there will be no stylist.
How do other pages/objects reference this content?
Every page of xowiki is saved in the content repository under a folder (which is as automatically created for every xowiki instance). Wery ::xowiki::Page knows its folder (normally the parent_id) and checks for its configuration the folder object.

Hope, this helps
-gustaf neumann