I would like to create a JSF web application to display a graphic structure (composed of hierarchical elements organised in a database) where, if possible, the user could eventually zoom in/out, add new elements...
But I haven't been able to identify a single JSF component (or compatible component) to help me do that.
This is what I would like : http://www.yworks.com/products/yfileshtml/demos/Complete/demo.yfiles.graph.orgchart/index.html
But it's not free and not in JSF.
I thought of the PrimeFaces mindmap component, but it is not compatible with IE8 and this is a requirement for my projet...
My second thought was to use RichFaces' Paint2D to manually draw info in rectangles and links between rectangles with calculated coordinates, but this seems a bit complex...
http://livedemo.exadel.com/richfaces-demo/richfaces/paint2D.jsf?c=paint2d
A final thought was to use CSS to display rectangles, but I can't display links and interact with the structure...
Any better idea ?
Thank you for your help !
OmniFaces has a component for creating a hierarchical tree.
Maybe you could use that to display a custom markup, and work out a way to manipulate it with Javascript, in order to get the behavior you want.
If that is not feasible, I'd suggest you to study a little bit of HTML5 Canvas, see what you can do with that. You can get inspired here checking out this is open source (GPL) HTML5 mind map app, the code is at GitHub.
Related
I'm using React.js to build an app, which includes quite a few svg charts. I'm using d3 functions that help in chart creation, such as scales, but then using React to generate the svg elements. Here's a great writeup on the approach: http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/
Part of why I'm going down this road was for performance - the first version of the app was too slow. It has a lot of elements and a lot of user-interactivity, all client-side. I'm trying to basically recreate the dc.js library in React.
It's a really fun approach and intuitive (more so than d3 alone IMO). Building axes is tedious though, and d3 does it so nicely. I would love d3 to just be able to output a string of svg elements that represent the axis (and maybe other elements) , and I feed it to React to include in the DOM.
I did see this SO question (How to make d3.js generate an svg without drawing it?) and the answer was to append it in the DOM and remove it, or create a DOM fragment. Those approaches go against the React approach and likely negate the performance benefits of React. I also saw jsdom and phantomjs solutions, which will not work in my case.
Can d3 generate svg without appending it to the DOM?
#Lars is correct if you are using traditional means. However, this is definitely possible with 'jsdom'. This library can simulate the DOM and also allows for string input. Which means you could inject the root element into the fake DOM and get a new window element to manipulate. You could then use D3 without changing it's source and using is like normal.
This would allow for the generation of an SVG.
No. D3 by design operates directly on the DOM through its selections. To have it generate string representations instead without modifying the DOM, you would need to modify its source code (and it would be quite a significant modification).
When designing and previewing a report in BIDS everything looks fine, but once rendered in a web browser the text boxes resize. I've tried a few things to stop this including using rectangles as place holders. Does anyone know of a workaround for this?
Here are some screenshots. First design view:
Render view:
In my experience, SSRS is not a very good tool for precise rendering. I've had the issue describe in various forms before, and can only offer a few options:
Don't care. Design your report in a way that it doesn't matter how it's exactly rendered.
Focus on one renderer. Don't optimize for both the BIDS Preview and the HTML rendering, but only on the final one (probably HTML). Note that with HTML you do have to deal with cross-browswer issues.
Use tables for layout. I know, this is frowned upon in CSS land, and I personally don't like it either. But a matrix may be your best bet at approaching pixel-perfectness, and from your screenshot it even looks like you have tabular data so it's even possible to rationalize the choice.
Choose another renderer. Deliver your report in Excel instead of HTML. With Excel it should be easier to get to a nicely layouted table.
maybe my google-fu is just letting me down today, but i have not been able to find a way to resolve arbitrary properties of nodes in order to obtain a style attribute. For instance, I'd like to be able to ask a node 'What is your value (if any) for -fx-fill?'.
A simple application example: I'd like to build a custom legend for a chart. To do so, I'd have to ask a rendered node for their fill property. I could, of course, use my knowledge of the default-colorN classes and simply look up the fill, but it feels like this would be a very bad approach as is violates the whole idea of CSS.
Thanks in advance.
BTW: JavaFX version is 2.1
I'd like to be able to ask a node 'What is your value (if any) for -fx-fill?'
There is no public API for that yet. It is planned to add such an API in a future release.
See RT-17293 CSS Style Object Model in Java.
For the 2.0 and 2.1 release, you could probably find the information using undocumented, deprecated impl_ methods, but I wouldn't advise that.
For now, I'd advise just using css chart styling where-ever you can and supplementing it with a sprinkling of dynamic node.lookup() code where it is impossible to achieve the styling using css.
My objective is to generate a graphic layout (made of Richfaces components) based on some input configuration (like an XML file) and display it in my web app. The layout is composed of graphic symbols representing various entities in the system: each symbol should be mapped to an entity in the system, in order to display its state. The XML configuration file is used to define the symbol connections and positions within the layout, and their mapping rules to an entity. How can I achieve this?
I was thinking to create a symbol library in a technology such as SVG, where you can define both the aspect and the behaviour, and then simply "wrap" each SVG symbol in a dynamically created richfaces component, which would allow me to handle both the user interactions and the mapping rules defined in the symbol. Unfortunately JSF/Richfaces don't support SVG images, therefore I would have to use plain HTML without Richfaces features.
Another way to achieve that would be to simply define generic symbols in the XML file, each one of them with an attribute specifying the related image, the mapping rule, etc., and then generate the corresponding richfaces component from within the web-app. By doing so, would I be able to then display all the symbols in the right position and therefore generate the complete dynamic layout?
Could you suggest a better approach? Thank you very much.
I believe that HTML5 has direct support for SVG images, however it is still an embedded object in regular HTML after all. This too is something I have been waiting for however I don't believe any of the current JSF2 component libraries have an offerring for this yet.
Here is a good explanation of a possible workaround:
Getting started with SVG graphics objects in JSF 2.0 pages
Potentially you could build a custom facelet component utilizing this workaround?
My thought though is that when your only tool is a hammer, everything looks like a nail. I would try to utilize an RIA (Rich Internet Application) technology better suited for display and manipulation of vector graphics like HTML5, Flash+Flex, Silverlight, etc..
I'm looking to implement an XForms Color Picker/Selector/Control (you know where it shows boxes or shades of colors in a dropdown type control).
Is it possible to do this in XForms (without using Orbeon; I am using XSLTForms)? Is so, how is it implemented, or can anyone point me to (simple) code examples that do?
The best approach will depend on what XForms implementation you are using. If Orbeon Forms, I would create an XBL component that encapsulate the YUI color picker:
http://developer.yahoo.com/yui/colorpicker/
If you're using the Firefox plugin exclusively, then you can create new xform extension components by wrapping any combination of HTML, JavaScript, XForms and XUL widgets in XBL.
This is probably the best resource I've found for Mozilla XBL xforms extensions:
https://developer.mozilla.org/en/XForms/Custom_Controls
In your case, probably the most efficient way to get this working would be to wrap the XUL colour picker component in XBL, ( https://developer.mozilla.org/en/XUL/colorpicker ) then write a little bit of JavaScript to link the picker's "onchange" event back to your model.