1 2 Previous Next 20 Replies Latest reply on Feb 25, 2009 1:50 PM by maxandersen

    WIP: XForms editor based on VPE

    kukeltje

      Hi,

      The docbook example made me think that an XForms editor could be created using the VPE. It basically is xhtml, so I thought it would not be that difficult.

      And... it turned out indeed not to be, at least not the basics. Almost the full set of xforms elements can be rendered in one way or another. Only the range and datepicker still need to be done, but that is just work.

      Now I want to extend it in two directions:
      - ctrl-click on an attribute value and be moved to the corresponding node (lots of in-document references are used)
      - validation. e.g. if a referenced node does not exist put a red ~~~ under the attribute.

      And later on even with code completion in attributes (referenced nodes e.g.)

      I'd appreciate if someone could point me to locations in e.g. the existing jsf editor where these things are done so I can use it as an example. Up to now I was able to find my way around, but I seem to be lost now.

      btw, I want this project to be opensource so if anyone is interested either in helping out or in giving it a try and provide feedback, let me know.

        • 1. Re: WIP: XForms editor based on VPE
          mareshkau

          openOn start point is org.jboss.tools.common.text.ext.hyperlink.xpl.AbstractBaseHyperlink.open()

          • 2. Re: WIP: XForms editor based on VPE
            maxandersen

            Great to hear you did your xforms editor - got any screenshots ? :)

            The features of openon, validation and completion is done by completely different parts of Eclipse/JBoss Tools than the visual editor but they are at least pretty easy to get into.

            Ctrl-click or F3 or OpenOn as we tend to call it Mareshkau got a pointer too. Basically you just implement a HyperlinkRecognizer to figure out what is under the cursor. Figuring out where to navigate is the hard part but here you should be able to reach in and get the DOM model of the editor - but that requires some WTP structured editor knowledge/google search.

            Validation, look for WTP validators.

            Completion, look for ContentAssistProcessor

            About opensourcing it then we can probably find a place for you at jboss tools, initially in the sandbox ?

            • 3. Re: WIP: XForms editor based on VPE
              kukeltje

               

              Great to hear you did your xforms editor - got any screenshots ? :)


              Sure, I'll put some up on Flickr later tomorrow and post the link here. Heck... I'll write a blog entry about it like the docbook one on planetjbpm (will show up on the aggregated JBoss feeds then.)

              Nice thing is that I '(ab)used' the richfaces panel to create the 'switch/case' construct in xforms. what I thought to be the most difficult part eventually was almost the easiest.

              Figuring out where to navigate is the hard part but here you should be able to reach in and get the DOM

              I've already done some of these since e.g. the look (text, date, boolean) is declared on a different element than the input itself. Unfortunately, I could not get XPath to work in my classes (some strange 'not supported errors' from org.w3c classes), So I traverse the tree myself. This has the advantage though that I can use the localName on elements and thus are deprived of xpath/namespace issues.... Love namespaces, hate the way you have to (ab)use it in java xpath

              but that requires some WTP structured editor knowledge/google search.

              Contrary to many posters in forums (fora?) I know how to use google and examples as documentation. Otherwise I would not have come to where I am now :-)

              Thanks for the other pointers. I'll see where I can get. I know where to find you guys if I have questions... :-)

              • 4. Re: WIP: XForms editor based on VPE
                kukeltje

                I forgot, Since you guys probably already have the correct environment, it is easy to give it a go... keep in mind, it is still a wip

                http://rapidshare.com/files/201969941/xformseditor.tar.gz.html
                MD5: D2B3DBF36FBC0CAA29FA94C67192A2CE

                The jar file needs to go into either your plugins dir or in e.g. a <eclipse-home>/dropins/xformseditor/plugins dir

                The widgets.xhtml is an example where almost every 'control' is used. Not all are implemented yet, but that is just some more work, not rocket science (e.g. a date input is now displayed as a radio, so I know it is detected that is should be something different than text/boolean)

                When opening the widgets file, make sure it is opened with the jboss tools html editor (check in 'open with')

                I have some issues with drag/drop and alignment the six boxes/line for scaling elements, but I'm not sure I cause them or it is a more generic issue.

                Also there does not seem to be a scrollbar in the visual part.

                • 5. Re: WIP: XForms editor based on VPE

                  It is quite good.

                  But where is source code ? :)

                  Scrollbar is hided because you use "overflow: hidden" style.

                  I have noted some problems with selection ( I think you should pay attention to correct adding of children during building ... but without source code I can't say exactly ).

                  • 6. Re: WIP: XForms editor based on VPE
                    kukeltje

                     

                    It is quite good.


                    Thanks, but most credit should go to the VPE designers...There is very little that I did. From Learning VPE basics to this 'only' took about 25 hours.

                    But where is source code ? :)


                    Sourcecode is not in a project (yet), just locally. Maybe I should put that up real soon and send a mail to Max Andersen to get a sandbox somewhere. Or with the chiba project. I don't like running my own svn or use sf or googlecode

                    I'm sure I've done lots of things wrong since it started as a small experiment but I got results so soon. I noticed the selection to and already thought it might have something to do with order of adding. otoh, if you refresh, the selection is ok, so I'm not sure

                    Thanks so for the tip on the overflow... I was so into my things that I forgot to see if the problem also was in the widgets page in the original editor and it was... and it was the overflow... thanks

                    There also seem to be problems related to drag/drop, but that might have the same cause as the selection.



                    • 7. Re: WIP: XForms editor based on VPE

                      It is necessary to use a pair <vpe:drag start-enable="yes" /> and <vpe:drop container="yes" />

                      The first allows to drag specified element.
                      The second allows to drop in specified element.

                      • 8. Re: WIP: XForms editor based on VPE
                        mareshkau

                        It's allso compiled with jdk 1.6, we now support jdk 1.5 and to run this plugin it's required 1.6, so i think it's be good to recompile this plugin on java 1.5.

                        • 9. Re: WIP: XForms editor based on VPE
                          kukeltje

                           

                          "sdzmitrovich" wrote:
                          It is necessary to use a pair <vpe:drag start-enable="yes" /> and <vpe:drop container="yes" />

                          The first allows to drag specified element.
                          The second allows to drop in specified element.


                          Yes, I have that and it sometimes works... I get the impression that it does not work if my cursor is over a child element. This should be ok since you are not allowed to drop on that element, still it is not always clear what area is the child and what not. E.g. a not really rendered item like a div (xforms:group -> xhtml:div) leaves no space to drop something. Reordering elements becomes almost impossible then. But using divs with padding and margins works nicer than desiging your form with tables although the latter makes it easier to drag/drop....



                          • 10. Re: WIP: XForms editor based on VPE
                            kukeltje

                             

                            "mareshkau" wrote:
                            It's allso compiled with jdk 1.6, we now support jdk 1.5 and to run this plugin it's required 1.6, so i think it's be good to recompile this plugin on java 1.5.


                            I will compile with jdk 1.5 from now on (would compiling with 1.6 but using a 1.5 target be ok to?)

                            • 11. Re: WIP: XForms editor based on VPE
                              mareshkau

                              Yes, it's should works then on java 5.

                              • 12. Re: WIP: XForms editor based on VPE
                                maxandersen

                                Sorry but i'm a xforms noob - what do you guys use XForm at the moment ?

                                And I really would love the screenshots since I wouldn't even know what to start trying to do with the plugin ;)

                                • 13. Re: WIP: XForms editor based on VPE

                                  Just so you know ... There are some common problems with selection ( drag/drop ). Some html elements ( checkbox, radio button, select ) can not be selected correctly. It is xulrunner's bug ( https://jira.jboss.org/jira/browse/JBIDE-2571 )

                                  • 14. Re: WIP: XForms editor based on VPE

                                     

                                    "max.andersen@jboss.com" wrote:
                                    Sorry but i'm a xforms noob - what do you guys use XForm at the moment ?

                                    And I really would love the screenshots since I wouldn't even know what to start trying to do with the plugin ;)


                                    I have never used XForm :)

                                    1 2 Previous Next