We are trying use Orbeon Form runner with server-side embedding.
The form renders properly on form runner, however in our java web application the form is not rendered properly i.e. CSS issues.
All the /orbeon/* resources are retrieved from orbeon application, but the CSS is not applied properly. I suspect it could be because of the extra div that are added for the embedded/portlet.
In Form Runner
Full Size Image
In Java Web Application
Full Size Image
Also, if we use the wizard view, it works in form runner, but does not work in embedded java web application. The sections are shown on the same screen.
When Orbeon Forms produces the whole page, it adds an orbeon class on the body, and then pretty much all the CSS that comes with Orbeon Forms is "prefixed" with .orbeon …. This is done to minimize the risk of Orbeon Forms' CSS conflicting with your own CSS.
I can't be sure that this is the problem, but if the CSS doesn't apply when embedding, you might need to add a class="orbeon" on the element that contains the content you're embedding.
Thanks for your guidance. I was able to resolve the problem.
When embedding forms, as you said orbeon regenerates the CSS, and also appends "o0" (#o0xforms-form) to each control's id. However, the xforms.css still refers to control with (id #xforms-form), hence styles are not applied correctly.
Overwritten the xforms.css with custom app-xforms.css which uses (#o0xforms-form) which fixes the problem.
Related
Many thanks for your help and support. I am just a beginner in Vaadin 7 and I am badly need of help.
Let me explain,
We have a third party application developed in HTML and JavaScripts. On my PC, if i open the html page with the browser it works fine. Please find the application in the attachment.
https://drive.google.com/file/d/1mdxFaMJmUb2pSTdh87MC8oSaaDMGx19d/view?usp=sharing
Now the challenge is, I need to in-corporate that application (HTML + Javascript) into Vaadin 7 as follows,
In-corporate the Javascripts into Vaadin using AbstractJavaScriptComponent (This has been done somehow understanding the examples)
Now comes the challenge,
If you open the HTML in the textpad/notepad, you could notice lot of div tags from the " < body > " tag. The requirement is, each div tag is a html component and this should be converted into vaadin component with css styling and need to be displayed in the UI, so that based on the customer requirements, we can change the style css. I tried with custom layout but this is not way to be implemented as well, this does not require a widget and server side component to be implemented. Is there any other way to implemented ? I spending lot of time but all my efforts are in-vain. I just need the way forward to give me a right direction if you have any idea.
I have created a custom XBL component that includes very little markup. It primarily consists of CSS, JavaScript and a <div>. The JavaScript then writes the markup to the DOM, inside the <div>. Its CSS specifies styles for a lot of specific element IDs. This works just fine in Form Runner, but not with the Server Side Embedding API.
The Server Side Embedding API appears to be rewriting the CSS file. It prefixes all the CSS selectors for specific IDs with o0. For example #MultiMousePosition-cwm is changed to #o0MultiMousePosition-cwm. This might work fine if the markup of the elements were included in the XBL component. Then it could be rewritten. But since the markup is generated by JavaScript after the page is loaded, this doesn't happen.
Is the rewrite of CSS and element IDs done in case the API is used to include multiple forms in the same page?
Is there a way to prevent the CSS from being rewritten? Or is there some other way to deal with this problem?
I tried to use <xxbl:global> but it looks like that won't work for CSS resources.
The JavaScript is a complex library created by another developer and rewriting it to avoid this issue would take a significant amount of work, if it is possible.
The rewrite of ids is done to prevent id conflicts in the resulting HTML page. That can include supporting multiple forms, but also possible conflicts with other content on the page.
Currently there is no way to disable rewriting. It wouldn't be hard to add as a configuration property, possibly on the XBL components (though some things would need to be rewritten on some not, which might make the configuration more difficult), or globally, for users who know for sure they won't have id conflicts.
I am very familiar with web technologies (HTML, JavaScript, CSS), but not with XBL and XForms. I would like to package a "widget" inside an XBL component, so it can be exposed to Form Builder, and used by form authors creating forms with Form Builder. What would be a good place to start learning how to do this? Do you have recommendation on the tools to use to edit XBL/XForms?
Getting started
This answer provides a good overview of what needs to be added to your XBL control so it can be used in Form Builder.
For more information on how to provide Form Builder specific metadata for your XBL control, see the documentation on <fb:metadata>.
Looking at examples always helps: the source of all the build-in XBL controls is available on GitHub.
If you want Form Builder to reload the component, all you need to do is click on the green icon with 2 arrows at the top of the Form Builder left bar (no need to restart your app server, or even reload Form Builder).
Tools and debugging
When editing XML, it helps to have a decent editor that would at least make sure what you type is well-formed XML, and maybe help you indent things properly. At Orbeon, we use IntelliJ because in addition to XML it also has good support for Scala, Java, JavaScript, CSS, LESS, which we use in Orbeon Forms.
For debugging, you can enable the XForms inspector. The inspector helps you see live what the state of all the instances is, including those inside XBL components. Make sure the property is set to false when you first load Form Builder (the inspector doesn't show properly with Form Builder), then set it to true, and hit the test button on your forms: the inspector will show at the bottom of your form.
Specific questions
If you have specific questions about programming with XBL in Orbeon Forms, I would encourage you to use Stack Overflow and ask them with the tags orbeon and xbl, so they can then be found more easily.
This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.
I tried the approach of using Form-Builder-Generated-Form within Java application suggested here < Running Orbeon-Form-Builder-Generated-Form with Java Application > : downloaded Orbeon nightly build, created a sample form using Form Builder and copy & pasted it into JSP page in my app. However, when I try to access this JSP, it redirects me to: /myapp/fr/unauthorized . Can you please tell me what I maybe doing wrong? Or what is the right way of making Orbeon process Form Builder generated content in Java app?
For my deployment I followed separate deployment and configuration specified in Orbeon documentation. Thanks in advance.
You are not doing anything wrong, but Orbeon Forms doesn't support this type of form deployment.
The separate deployment mode runs the output of your JSP directly through the XForms engine.
Form Builder-generated forms OTOH expect pre-processing via the Form Runner runtime, in particular through the components.xsl XSLT transform. This is needed to support all the Form Runner features, including built-in persistence, error summary, internationalization, etc.
Currently the cleanest way to integrate such forms with your own app is to just run them side by side (Orbeon WAR + your own WAR) and navigate between each other via links and POSTs.
You could also use an iframe, although that is often a disliked solution.
You could also transform the form produced by Form Builder into plain XForms that doesn't assume Form Runner. It wouldn't be too hard to do but would be outside the scope of this StackOverflow question.