Modifying Oxygen CSS in java layer.

[vms_saran]

I want to show/hide an XML element (which is displayed in Author mode using CSS) when clicking on a button.
Basically the CSS property set to the element is “display:block” and it is showing up properly in Author mode. When I click the button in menu,
I am trying to change the CSS “display:none” using java code but that didn’t work.

Code: Select all

            WSAuthorEditorPageBase  authorEditorPageBase = OxygenContextualEditor.getAuthorAccess().getEditorAccess();

            Styles style = authorEditorPageBase.getStyles(“//employee/name”);

            LOGGER.debug("style.getDisplay()--------------   " + styles.getDisplay()); // prints block

            LOGGER.debug("style.getVisibility()--------------   " + styles.getVisibility()); // prints visible





            if(styles.getDisplay().equalsIgnoreCase("block")){

                styles.setProperty(Styles.KEY_DISPLAY, String.valueOf("none"));

                styles.setProperty(Styles.KEY_VISIBITY, String.valueOf("inVisible"));

            }else{

                styles.setProperty(Styles.KEY_DISPLAY, String.valueOf("block"));

                styles.setProperty(Styles.KEY_VISIBITY, String.valueOf("visible"));

            }

            

            //getting the style after applied to //employee/name element  

            Styles afterStyle = authorEditorPageBase.getStyles(“//employee/name”);

            

            LOGGER.debug("afterStyle.getDisplay()--------------   " + afterStyle.getDisplay());// prints none

            LOGGER.debug("afterStyle.getVisibility()--------------   " + afterStyle.getVisibility());// prints inVisible

Thanks for the help !

[Radu]

Hi,

The Javadoc for the getStyles method states something like:

Code: Select all

  /**

   * Get the CSS styles which are used to render a particular Author node.

   * This method <b>MUST</b> only be used to query styles. If you want to modify styles please use the {@link StylesFilter}.

   * @param node The node for which we want to obtain the styles.

   * @return the styles associated with the node.

   * 

   * @since 12.2

   */

  Styles getStyles(AuthorNode node);

So you must not modify the styles obtained via that method. The method can only be used to query styles.

Here's how you could do what you want:

1) In the custom CSS you are using you should have a selector like:

Code: Select all

*:hidden{

  display:none;

}

so this selector states that all elements which have the pseudo-class with the name hidden should have display:none.

2) The Java code of your operation could do something like:

Code: Select all

    AuthorNode[] foundNameElements = authorEditorPageBase.getDocumentController().findNodesByXPath("//employee/name", true, true, true);

    if(foundNameElements != null){

      for (int i = 0; i < foundNameElements.length; i++) {

        if(foundNameElements[i].getType() == AuthorNode.NODE_TYPE_ELEMENT){

          AuthorElement elem = (AuthorElement) foundNameElements[i];

          authorEditorPageBase.getDocumentController().setPseudoClass("hidden", elem);

        }

      }

    }

You can also use the API:

Code: Select all

authorEditorPageBase.getDocumentController().removePseudoClass("hidden", elem);

to remove the pseudo class from the element.
Once you change the pseudo class on the element, it will start matching in the CSS various selectors related to it:
https://www.oxygenxml.com/doc/versions/ ... asses.html

Regards,
Radu

[vms_saran]

Thank you so much for the reply. Still couldn’t see the change. This is what exactly happening now.

My XML

Code: Select all

<employees>

	<employee id="2">

		<name>Sanju</name>

		<age> 27 </age>

	</employee>

</employees>

<empProfile refId ="2">

	<picture>Sanju.jpg

	</picture>

</empProfile>

My CSS

Code: Select all

empProfile > picture : after {

	content : oxy_concat(oxy_xpath("if(//employees / employee /@id = @ refId) then (('Emp Details available..........  ')))

}

When I click hide/show button, < employees> tag getting visible and invisible, but not the content inside <empprofile><picture>. I still see "Emp Details Available...... " under the picture. Since content is also from <employees> tag, i want that also to be hidden. Please help me.

[Radu]

Hi,

Looking at the sample XML you posted, the empProfile element is not a child or descendant element of the employees element, it is a sibling of it.
So if you want to hide it as well, you need to locate its AuthorNode and set the pseudo class also on it.

Regards,
Radu

[vms_saran]

Hi.

Thank you so much for your reply. Yes, here AutrhorNode is <empProfile>. i dont want to hide the image, but i want to hide the text inside the image which is coming from <employees> tag. If give AutrhorNode as <empProfile>, the entire image itself not showing up. I want to hide only the text not the image

Thanks in advance
Saravanan

[Radu]

Hi Saravanan,

What precise elements did you hide (set the pseudo class to), the <employees> element, all <employee> elements, only some of the <employee> elements?

Regards,
Radu

[vms_saran]

Hi,

I want to hide all the references of <employees> element. if i set the pseudo class to <employees> element, it is perfectly working. No issues in that.
But i have added <employee> element under <picture> element, i want that <employee> element to be hidden, but it is not getting hidden.
Thats my issue. Please let me know if it is not clear.

Thanks in advance
Saravanan

[Radu]

Hello Saravanan,

Maybe as a possible solution, when the action is invoked and it changes the pseudo classes on those employee elements, it can also set a custom pseudo class on the root element like:

Code: Select all

authorAccess.getDocumentController().setPseudoClass("hiddenEmployees", authorAccess.getDocumentController().getAuthorDocumentNode().getRootElement());

and you can add a new CSS selector like:

Code: Select all

empProfile > picture : after {

   content : oxy_concat(oxy_xpath("if(//employees / employee /@id = @ refId) then (('Emp Details available..........  ')))

}



:root:hiddenEmployees empProfile > picture : after {

   content : "";

}

so that when the employees are hidden you set an empty text after the picture instead of the employee details.

Regards,
Radu

[vms_saran]

Hi Radu,

It works now . Million, Billion,Trillion..... Zillion thanks for your help.

Regards
Saravanan

[Radu]

Hi Saravanan,

I'm glad this works for you.

Regards,
Radu

[vms_saran]

Hi, I am facing an issue to customize the css for a DITA file and i am using below snippet in .framework file.

Code: Select all

 <poPatch>

                                        <field name="fieldPath">

                                            <String>authorExtensionDescriptor/cssDescriptors</String>

                                        </field>

                                        <field name="value">

											<cssFile>

												<field name="href">

													<String>${framework}/css/DITA-TOPIC.css</String>

												</field>

												<field name="title">

													<String>CSS for DITA TOPIC</String>

												</field>

												<field name="alternate">

													<Boolean>false</Boolean>

												</field>

											</cssFile>

										</field>

										<field name="patchHandling">

                                            <String>addIndex</String>

                                        </field>

                                        <field name="anchor">

                                            <null/>

                                        </field>

                                    </poPatch>

DITA-TOPIC.css file contains only one css property to overwrite the DITA css and rest of the css properties will be from dita framework.
After this changes, when i open my file in oxygen, it says " Cannot load associated CSS files" even though i have css file in proper location.
Please help me to fix this issue

Regards
Saravanna

[Radu]

Hi Saravanan,

I'm not sure about everything that you are doing.
Have you extended the DITA framework? Is that extension stored in another framework folder.
Are you using our Preferences->"Document Type Associations" page to make the changes? Because we do not recommend manually editing a framework file, you should always use our Document Type Association edit dialog to do that.

Regards,
Radu

[vms_saran]

Hi

Thanks a lot it worked

Regards
Saravanan

[vms_saran]

Hi,

I have few more question. Could you please help me here ? Millions Thanks if you answer the below 3 questions.

1. I am trying to customize the DITA Map Manager context menu. Since I have put the logic inside editorOpened menu, I am getting the custom menu "Custom Checkout" after opening the bookmap into the editor
I wanted to put this in applicationStarted method in WorkspaceAccessPluginExtensio.java so that i can checkout the book without opening the editor. How can I do that ?

Code: Select all

			@Override

		          public void editorOpened(URL editorLocation) {

		            WSEditor ditaMap = pluginWorkspaceAccess.getEditorAccess(editorLocation, StandalonePluginWorkspace.DITA_MAPS_EDITING_AREA);

		            WSDITAMapEditorPage edPage = (WSDITAMapEditorPage) ditaMap.getCurrentPage();

		            final JTree ditaMapTree = (JTree) edPage.getDITAMapTreeComponent();

		            edPage.setPopUpMenuCustomizer(new DITAMapPopupMenuCustomizer() {

		              public void customizePopUpMenu(Object popUp, final AuthorDocumentController ditaMapDocumentController) {

		                JPopupMenu popUpMenu = (JPopupMenu) popUp;

		                popUpMenu.add(new AbstractAction("Custom Checkout") {

		                  public void actionPerformed(ActionEvent e) {

		                    TreePath selPath = ditaMapTree.getSelectionPath();

		

		                  }

		                });

		              }

2. if I click on custom menu "Custom Checkout" I am not able to get the tree path or tree node name using TreePath selPath = ditaMapTree.getSelectionPath().
Since ditamap tree in DITA map manager has topic reference, if I right click on topic node, I cannot get the name of the node.

In the below picture, if I right click on Configuring, I cannot get the tree node name “Configuring”. I want to get this name so that I can check-out the topic with that name.

3. Also please let me know how to open the document using custom menu.



Regards
Saravanan

[alex_jitianu]

Hi Saravanan,

1. Where would you like the Custom Checkout action to be present? On a toolbar? If that's the case, an Workspace Access Plugin can indeed customize toolbars. If you want it on a toolbar inside the DITA Maps manager, then there is a predefined toolbar that you can use:

Code: Select all

  public void applicationStarted(final StandalonePluginWorkspace pluginWorkspaceAccess) {

    

    pluginWorkspaceAccess.addToolbarComponentsCustomizer(new ToolbarComponentsCustomizer() {

      @Override

      public void customizeToolbar(ToolbarInfo toolbarInfo) {

        if (MainFrameComponentsConstants.TOOLBAR_DITA_MAP_CUSTOM.equals(toolbarInfo.getToolbarID())) {

          List<JComponent> comps = new ArrayList<JComponent>(); 

          Action checkInAction = ....;

          // Check In

          ToolbarButton checkInButton = new ToolbarButton(checkInAction, true);

          checkInButton.setText("Check In");



          comps.add(checkInButton);

          toolbarInfo.setComponents(comps.toArray(new JComponent[0]));

        }

      }});

You can also contribute the action on the main toolbar areas. But you'll have to define a toolbar inside plugin.xml before intercepting it based on ID as you've seen above.

2. from the selection path you can get access to out AuthorNode model and you can extract the information from it (like see if it's a topicref and inspect the @href):

Code: Select all

    TreePath selPath = ditaMapTree.getSelectionPath().

    if (selPath != null) {

      Object lastPathComponent = selPath.getLastPathComponent();

      if (lastPathComponent instanceof AuthorNode) {

        AuthorNode authorNode = (AuthorNode) lastPathComponent;

        

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

          AuthorElement authorElement = (AuthorElement) authorNode;

        }

      }

    }

3. You can open a document like this:

Code: Select all

pluginWorkspaceAccess.open(url);

If it's a DITAMAP and you would like it to go directly to the DITA Maps Manager, you can impose it like this:

Code: Select all

pluginWorkspaceAccess.open(url, null ,"application/ditamap");

Best regards,
Alex

[vms_saran]

Thank you so much. It worked.

For the question 1, I am trying to get the custom menu in context menu(Right click on ditamap).
Right now I am not able to see custom menu as it has been added in editorOpened() method in EditorChangeListener.
But I wanted to see at this point itself, so that I can edit the ditamap ot topic without opening into the editor.
I have to put the logic in applicationstarted method. How can I do that ? Could you please help me in this ?

Regards
Saravanan

[vms_saran]

Hi,

I forgot to add one more question.

How can I check a particular file is open in editor or not ?
If it is open, I want to refresh it, if not open it in editor.

Regards
Saravanan

[alex_jitianu]

Hi,

1. Here is how you can contribute an action to the DITA Maps Manager toolbar from an Workspace Access plugin:

Code: Select all

/**

   * @see ro.sync.exml.plugin.workspace.WorkspaceAccessPluginExtension#applicationStarted(ro.sync.exml.workspace.api.standalone.StandalonePluginWorkspace)

   */

  @Override

  public void applicationStarted(final StandalonePluginWorkspace pluginWorkspaceAccess) {

    pluginWorkspaceAccess.addToolbarComponentsCustomizer(new ToolbarComponentsCustomizer() {

      /**

       * @see ro.sync.exml.workspace.api.standalone.ToolbarComponentsCustomizer#customizeToolbar(ro.sync.exml.workspace.api.standalone.ToolbarInfo)

       */

      @Override

      public void customizeToolbar(ToolbarInfo toolbarInfo) {

        if (MainFrameComponentsConstants.TOOLBAR_DITA_MAP_CUSTOM.equals(toolbarInfo.getToolbarID())) {

          List<JComponent> comps = new ArrayList<JComponent>();

          JComponent[] initialComponents = toolbarInfo.getComponents();

          boolean hasInitialComponents = initialComponents != null && initialComponents.length > 0;

          if (hasInitialComponents) {

            // Add initial toolbar components

            for (JComponent toolbarItem : initialComponents) {

              comps.add(toolbarItem);

            }

          }



          Action checkOutAction = new AbstractAction() {

            @Override

            public void actionPerformed(ActionEvent e) {

             

            }

          };

          checkOutAction.putValue(Action.NAME, "Custom Checkout");

          // Check Out

          ToolbarButton checkOutButton = new ToolbarButton(checkOutAction, true);

          comps.add(checkOutButton);

         

          toolbarInfo.setComponents(comps.toArray(new JComponent[0]));

        }

      }

    });

  }

2. Here is a code that goes through all opened editors and refreshes:

Code: Select all

    URL[] openedEditors = pluginWorkspaceAccess.getAllEditorLocations(PluginWorkspace.DITA_MAPS_EDITING_AREA);

    for (int i = 0; i < openedEditors.length; i++) {

      WSEditor editorAccess = pluginWorkspaceAccess.getEditorAccess(openedEditors[i], PluginWorkspace.DITA_MAPS_EDITING_AREA);

     

      WSDITAMapEditorPage currentPage = (WSDITAMapEditorPage) editorAccess.getCurrentPage();

      // This is equivalent to an F5.

      currentPage.refreshReferences();

    }

best regards,
Alex