How to style StringContent with the ro.sync.ecss.css.Styles class

[SSC]

Hello,

We use the Eclipse Version 13.2 of Oxygen.

I am using the ro.sync.ecss.css.Styles extension to add styles to AuthorNodes dynamically.

Code: Select all

String piTextContent = piNode.getTextContent();

styles.setProperty(Styles.KEY_MIXED_CONTENT,

                   new StaticContent[] { new StringContent(

                                            piTextContent) });

Unfortunately the StringContent has the same look as the actual text content of the node.
Is there a possibility to change the look of the StringContent?
I guess that you internally use the "before" pseudo-element for adding the StringContent.

Code: Select all

selector:before{

content:"The StringContent";

}

I´d like to achieve something like this:

Code: Select all

selector:before{

content:"The StringContent";

color: #C0C0C0;

}

Is it possible to do something similar with the ro.sync.ecss.css.Styles class?

Best regards,

Simon

[Radu]

Hi Simon,

Sure, you can use code like this:

Code: Select all

styles.setProperty(Styles.KEY_FOREGROUND_COLOR, new ro.sync.exml.view.graphics.Color(192, 192, 192));

Regards,
Radu

[SSC]

Hello Radu,

I already tried this method, but what I want is to ONLY style the ro.sync.ecss.css.StringContent.StringContent and not the text, which is actually inside the AuthorNode.

Code: Select all

styles.setProperty(Styles.KEY_FOREGROUND_COLOR, new ro.sync.exml.view.graphics.Color(192, 192, 192));

This changes the Foreground of both the ro.sync.ecss.css.StringContent.StringContent and the actual node content.

Code: Select all

"currentAuthorNode:before{

content:"ro.sync.ecss.css.StringContent.StringContent";

color: "ro.sync.exml.view.graphics.Color";

}

Best regards,

Simon

[Radu]

Hi Simon,

The styles filter also gets called for ":before" and ":after" selectors if they are initially present in the CSS.

If in your CSS after the imports you add the namespace declaration:

Code: Select all

@namespace oxy url('http://www.oxygenxml.com/extensions/author');

and the following selector:

Code: Select all

oxy|processing-instruction:before {

content:"";

}

you will start receiving in the styles filter events for ":before" selectors for any processing instruction.

Then the filter would work something like this:

Code: Select all

      public Styles filter(Styles styles, AuthorNode authorNode) {

        if(authorNode.getType() == AuthorNode.NODE_TYPE_PSEUDO_ELEMENT) {

          //We want to style a ":before" selector for a PI

          if("before".equals(authorNode.getName())) {

            AuthorNode node = authorNode.getParent();

            if(node instanceof ArtificialNode) {

              //Actually in order to match the CSS selectors Oxygen pretends there is an element which is called "processing-instruction"

              AuthorNode realNode = ((ArtificialNode)node).getWrappedNode(); 

              if(realNode.getType() == AuthorNode.NODE_TYPE_PI) {

                //Found the real PI

                try {

                  String piTextContent = realNode.getTextContent();

                  styles.setProperty(Styles.KEY_MIXED_CONTENT,

                      new StaticContent[] { new StringContent(

                          piTextContent) });

                  styles.setProperty(Styles.KEY_FOREGROUND_COLOR, new ro.sync.exml.view.graphics.Color(192, 192, 192));

                } catch (BadLocationException e) {

                  e.printStackTrace();

                }

              }

            }

          }

        }

        return styles;

      }

The styling is quite complicated because a CSS was not constructed to match other nodes than elements so in order to allow CSS styling for processing instructions Oxygen "fakes" artificial elements for them, it considers a PI to be equivalent with an XML element called processing-instruction and having the namespace http://www.oxygenxml.com/extensions/author.

In this way CSS selectors can be constructed to match PIs from the XML document and the styles filter receives events for those artificial elements.

What we plan to implement for a future version (maybe even v14.1) would be that if a PI in the XML contains also pseudo-attributes like:

Code: Select all

<?target name='value'?>

then you could match it specifically from the CSS like:

Code: Select all

oxy|processing-instruction[target]:before {

content:"";

}

or even like:

Code: Select all

oxy|processing-instruction[target][name='value']:before {

content:"";

}

It would be as if the PI's pseudo attributes would be considered attributes for that artificial element and maybe it would mean removing the styles filter workarounds in some cases.

Regards,
Radu

[SSC]

Hi,

thanks for your detailed help.
But actually nothing happens when I follow your steps.

So in order to see something I tried this:

Code: Select all

@namespace oxy url('http://www.oxygenxml.com/extensions/author');



oxy|processing-instruction:before {

    content:"OXY PI";

	color: #FF9900;

}

I putted this code into the dita.css in your frameworks/dita/css_classed/dita.css
Unfortunately I cannot see any orange "OXY PI" text in the Author view of the editor, so there must be something wrong.


In the StylesFilter the "before"-PSEUDO_ELEMENT is found, but not with an ro.sync.ecss.extensions.api.node.ArtificialNode as parent, like it is supposed to be in your example snippet.
Is there still something to consider for activating the "before"-PSEUDO_ELEMENT for a PI?

Regards,

Simon

[Radu]

Hi Simon,

I putted this code into the dita.css in your frameworks/dita/css_classed/dita.css
Unfortunately I cannot see any orange "OXY PI" text in the Author view of the editor, so there must be something wrong.

In the Oxygen Preferences->Editor / Edit modes / Author page did you select the checkbox Show processing instructions? It is unchecked by default.

In the StylesFilter the "before"-PSEUDO_ELEMENT is found, but not with an ro.sync.ecss.extensions.api.node.ArtificialNode as parent, like it is supposed to be in your example snippet.

Then it probably was the ":before" for an XML element.

Regards,
Radu

[SSC]

Hello Radu,

In the Oxygen Preferences->Editor / Edit modes / Author page did you select the checkbox Show processing instructions? It is unchecked by default.

This was the right hint.
Now it works, but we´d like only to see the before pseudo elements and not the processing instructions itself.
I guess this is not possible.

What we want to achieve is to add PIs dynamically, during runtime, to xml elements. The added PI itself shall not be visible, but we want to show textual information before the xml elements, that there is an attached PI for a certain xml element.

My first try before I even startet this forum thread, was to alter the background of the AuthorNode, which is the nextSibling of our custom PI, which is similar to your "comment functionality". But our project leader also wants textual hints for the user.

Can you image a different approach to attach textual hints for the nextSibling of our custom PI?

Regards,

Simon

[SSC]

Addition to my previous post.
Now I also tried this:

Code: Select all

@namespace oxy url('http://www.oxygenxml.com/extensions/author');



oxy|processing-instruction {

	display:none;

	visibility:hidden;

}



oxy|processing-instruction:before {

	content:"";

}

But that only causes that the oxy|processing-instruction:before is also hidden.

display:none; has no effect at all.

Best regards,

Simon

[Radu]

Hi Simon,

Thanks for telling me the bigger picture.
The ":before" pseudo-element is in the internal nodes hierarchy a child of the real processing instruction node.
Do this is why making the parent invisible also makes the child invisible.

About this remark:

Can you image a different approach to attach textual hints for the nextSibling of our custom PI?

We have API ro.sync.ecss.extensions.api.highlights.AuthorPersistentHighlighter which would allow you to add persistent highlights between certain offsets.
These highlights are saved in the XML content as processing instructions having the targets oxy_custom_start and oxy_custom_end.
On these highlights you can add any key=>value pair of properties that you want, properties which will be saved as pseudo-attributes of the processing instructions.

In Oxygen 14 you will have the API to show callouts for those custom comments, something like:

http://www.oxygenxml.com/userFiles/callouts.png

Regards,
Radu

[SSC]

Hello Radu,

is it possible to have show individual tooltips for a certain node like you do with your comment functionality?

Currently I color the AuthorNode, which has our special PI as previous sibling, in a certain color, like you also do with the comment feature.

But how can I attach a certain tooltip like it´s done in the comment feature?

Best regards,

Simon

[SSC]

Hello Radu,

it seems that we were writing a post for this thread simultaneously.
I will try out the ro.sync.ecss.extensions.api.highlights.AuthorPersistentHighlighter?

Your Screenshot callouts.png looks great.
Does the current beta of Oxygen 14 already contain this feature?
If so, please explain it to me and I´ll include your beta version of Oxygen 14.

Again I wish you a nice weekend

Best regards,

Simon

[Radu]

Hi Simon,

Yes, the Oxygen 14 beta kits we advertised on the Oxygen users list should have this feature.
But the final Oxygen 14 should be available soon so maybe you should wait for the stable release.

The Author SDK for oXygen version 14 beta is right now available at:

http://mirror.oxygenxml.com/InstData_v1 ... horSDK.zip

You should take a look at our SimpleDocumentationFramework sample Java project, starting with the SDFAuthorExtensionStateListener class which shows how you can decide how to highlight in the Author page such commented randes and then what information to show for them in the callouts bar.

An entire video demonstration of this functionality can be see here:
http://www.oxygenxml.com/demo/CalloutsS ... pport.html

Regards,
Radu

[SSC]

Hello,

currently we use the ro.sync.ecss.extensions.api.highlights.AuthorPersistentHighlighter to store additional information for certain tag nodes.

I also set a ro.sync.ecss.extensions.api.highlights.PersistentHighlightRenderer to the AuthorPersistentHighlighter in order to have custom rendering for the persisted data.

Is it maybe possible to set different ro.sync.ecss.extensions.api.highlights.PersistentHighlightRenderer for different locations/areas in the XML document?

What I want to achieve is having different colors for different information, which is stored in the <?oxy_custom_start ...> and <?oxy_custom_end?> PIs.

For instance:

<?oxy_custom_start attribute="value1"><tt>some content</tt><?oxy_custom_end?>

<?oxy_custom_start attribute="value2"><tt>some content</tt><?oxy_custom_end?>

Tags inside the oxy custom PI with the attribute="value1" should be orange and attribute="value2" should be blue.

Or can you offer me a diffrent approach to do that?

Best regards,

Simon

[Radu]

Hi Simon,

The method:

Code: Select all

ro.sync.ecss.extensions.api.highlights.PersistentHighlightRenderer.getHighlightPainter(AuthorPersistentHighlight)

is called for every highlight, and a highlight has access to the attributes set to it in the XML:

Code: Select all

ro.sync.ecss.extensions.api.highlights.AuthorPersistentHighlight.getClonedProperties()

So depending on the attributes set on the PI you could return different painters (with different colors).

Regards,
Radu

[SSC]

Thanks Radu,

I just realized it myself.
Sorry for disturbing you.

Best regards,

Simon

[SSC]

Hi,

concerning this feature request http://www.oxygenxml.com/forum/topic7103.html

I modified our ro.sync.ecss.extensions.api.StylesFilter so that a border is drawn around an XML element, which has a PI as previous sibling.
This works with an own PI:

Code: Select all

        AuthorNode taggingPI = getTaggingPI(authorNode);

        if (taggingPI != null && taggingPI.getType() == AuthorNode.NODE_TYPE_PI) {

            try {

                String piTextContent = taggingPI.getTextContent();

                if (piTextContent != null && piTextContent.startsWith("tag")) {



                    styles.setProperty(Styles.KEY_BORDER_TOP_COLOR,

                            new ro.sync.exml.view.graphics.Color(255, 15, 0));

                    styles.setProperty(Styles.KEY_BORDER_TOP_STYLE, "dashed");

                    styles.setProperty(Styles.KEY_BORDER_TOP_WIDTH, 2);



                    styles.setProperty(Styles.KEY_BORDER_LEFT_COLOR,

                            new ro.sync.exml.view.graphics.Color(255, 15, 0));

                    styles.setProperty(Styles.KEY_BORDER_LEFT_STYLE, "dashed");

                    styles.setProperty(Styles.KEY_BORDER_LEFT_WIDTH, 2);



                    styles.setProperty(Styles.KEY_BORDER_RIGHT_COLOR,

                            new ro.sync.exml.view.graphics.Color(255, 15, 0));

                    styles.setProperty(Styles.KEY_BORDER_RIGHT_STYLE, "dashed");

                    styles.setProperty(Styles.KEY_BORDER_RIGHT_WIDTH, 2);



                    styles.setProperty(Styles.KEY_BORDER_BOTTOM_COLOR,

                            new ro.sync.exml.view.graphics.Color(255, 15, 0));

                    styles.setProperty(Styles.KEY_BORDER_BOTTOM_STYLE, "dashed");

                    styles.setProperty(Styles.KEY_BORDER_BOTTOM_WIDTH, 2);

                }

            } catch (BadLocationException e) {

                LOG.error(e.getLocalizedMessage(), e);

            }

        }

But unfortunately it seems that the oxy_custom_start PI, which you use for persistent highlights is not passed to the StylesFilter.
Is it somehow possible get the oxy_custom_start PI into the StylesFilter, to have a workaround for the feature request, I mentioned above?

Best regards,

Simon

[mihaela]

Hi Simon,

Since your last message is related to http://www.oxygenxml.com/forum/topic7103.html, please see our answers (and questions) on that topic.

Best regards,
Mihaela