7 Replies Latest reply on Jan 8, 2008 4:39 PM by dgolovin

    How to configure visual editor

    tynor

      I am having trouble understanding the documentation with respect to how to configure the Visual Facelet editor to properly display CSS and taglibs. (chapter 8, figure 8.50 " Page Design Options").

      My project is generated from seam-gen which I imported as a normal Java project. I've added the Seam nature to the project.

      I've set the CSS file path as Project scoped and to the absolute path of my CSS file -- that seems to work (background color and some text attributes are rendered according to the CSS).

      However, even so "visual" editor shows lots of tag markup that is anything but "WYSIWYG" -- e.g., each s:decorate is displayed as

      s:decorate /path/to/some/template.xhtml
      ui:define label
      some text which is the label
      



      Do I need to do something to get the Seam and Facelet tags to be rendered "visually"?

      Also, I have some project specific taglibs. It's not clear to me what I am to set in the "URI" section for my project taglib to be properly rendered.
      etc. If a facelet page defines my taglib via:

       <ui:composition xmlns:mytags="http://domain.com/jsf/mytags"
      


      I've tried setting the "prefix" to "mytags" and the URI to "http://domain.com/jsf/mytags" but I see no change in the visual rendering.

      Thanks!



        • 1. Re: How to configure visual editor
          maxandersen

          It seems you are asking about multiple things here.

          1) You ask about how to setup css rendering, but also says it just works for you so i'm unsure what is your problem in this context ?

          2) WYSIWYG rendering of seam tags should just work (at least if you are using the correct xmlns for them. Please report in jira with sample page source and screenshot of the rendering.

          3) WYSIWYG rendering of your own tags. JSF components does not have a "preview" mode builtin so for each component we have to define such a mode and that is done via .vpe template files. We haven't exposed a public api for that yet but if you want to digg into it search for .vpe in our plugins and you can find examples on how to do it.

          • 2. Re: How to configure visual editor
            tynor

             


            It seems you are asking about multiple things here.

            1) You ask about how to setup css rendering, but also says it just works for you so i'm unsure what is your problem in this context ?


            Yes - probably true. I included the CSS config in my description because it was the only element of the Page Design Options that I configured in a way that actually made any change in the visual rendering of the page.

            I would note that none of the RichFaces components used on the screen are rendered with proper styles (e.g. a "panel header" is rendered with the default grey background while our app configures a custom "skin" which should cause the header to render with a green background). I did not mention this in the original since I assume that this is just not possible/practical in eclipse since these styles are computed at run time by the rich faces runtime (yes?).


            2) WYSIWYG rendering of seam tags should just work (at least if you are using the correct xmlns for them. Please report in jira with sample page source and screenshot of the rendering.


            Done: http://jira.jboss.com/jira/browse/JBIDE-1575


            3) WYSIWYG rendering of your own tags. JSF components does not have a "preview" mode builtin so for each component we have to define such a mode and that is done via .vpe template files. We haven't exposed a public api for that yet but if you want to digg into it search for .vpe in our plugins and you can find examples on how to do it.


            My tags are not custom JSF components - they are simple Facelet compositions -- e.g. here's the implementation of our "outputCurrency" tag. If custom taglibs such as these are not supported by the VPE, what exactly does the URI/Prefix section of the Page Design Options page configure?

            Taglib definition:
            <!DOCTYPE facelet-taglib PUBLIC
             "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
             "http://java.sun.com/dtd/faces-taglib_1_0.dtd">
            
            <facelet-taglib>
             <namespace>http://mydomain.com/jsf/myproject</namespace>
            ...
             <tag>
             <tag-name>inputCurrency</tag-name>
             <source>facelets/tags/inputCurrency.xhtml</source>
             </tag>
            


            Tag source:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            
            <html xmlns="http://www.w3.org/1999/xhtml"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:c="http://java.sun.com/jstl/core"
             xmlns:s="http://jboss.com/products/seam/taglib">
            
            <ui:composition>
             <h:outputText value="$" />
             <h:outputText value="#{value}">
             <f:convertNumber pattern="#,##0.00" />
             </h:outputText>
            </ui:composition>
            </html>
            
            



            • 3. Re: How to configure visual editor
              maxandersen

               

              "tynor" wrote:

              I would note that none of the RichFaces components used on the screen are rendered with proper styles (e.g. a "panel header" is rendered with the default grey background while our app configures a custom "skin" which should cause the header to render with a green background). I did not mention this in the original since I assume that this is just not possible/practical in eclipse since these styles are computed at run time by the rich faces runtime (yes?).


              Currently we just use the default skin.
              We have plans about honoring the skin setting since it is "just" about generating/picking up the right CSS.

              About the ui:composition I'll ping Sergey to try and get you an answer.


              • 4. Re: How to configure visual editor

                I've answered the question about s:decorate. http://jira.jboss.com/jira/browse/JBIDE-1575#action_12393965

                • 5. Re: How to configure visual editor
                  tynor

                  Thanks Sergey and Max.

                  All: please vote on the following Jira issue to raise the priority of getting the VPE to handle "absolute" paths. http://jira.jboss.org/jira/browse/JBIDE-924

                  This is critical for our project since our pages use nested directories to organize the page facelets. Templates use 'absolute' paths so that they are the same (and hence cut/pastable) no matter what source facelet they are called from.

                  • 6. Re: How to configure visual editor
                    dgolovin

                     

                    "tynor" wrote:
                    what exactly does the URI/Prefix section of the Page Design Options page configure?


                    It was done to support a visual editing for page fragments that is included in main page. Usually it has no taglib declarations, so you can configure VPE with mapping prefix to URI.

                    Here is an example scenario that shows how it would works:
                    1. Open any main xhtml/jsp page that is shown good in VPE.
                    2. Copy URI form any taglib declaration and then remove it.
                    3. VPE will use default template to show tags that has the same prefix as removed taglib declaration.
                    4. Open 'Page Design Options' dialog and add prefix and URI (Ctrl-V) from removed taglib declaration in last table.
                    5. VPE should show the page the same way as it was before taglib declaration was deleted.

                    • 7. Re: How to configure visual editor
                      dgolovin

                       

                      "tynor" wrote:

                      My tags are not custom JSF components - they are simple Facelet compositions -- e.g. here's the implementation of our "outputCurrency" tag. If custom taglibs such as these are not supported by the VPE, what exactly does the URI/Prefix section of the Page Design Options page configure?
                      Facelets *.taglib.xml files is not used at all now even if they contain definitions. That means they doesn't appear in content proposal s and not rendered in VPE. I've added couple issues in our JIRA:
                      http://jira.jboss.com/jira/browse/JBIDE-1592
                      http://jira.jboss.com/jira/browse/JBIDE-1593