Is there a Layout in Vaadin 8 (Vaadin Framework) or Vaadin 10 (Vaadin Flow) that uses the newer CSS flex-box (a.k.a. flexbox) feature?
This excellent tutorial makes it look like flex-box could be used to implement Vaadin’s GridLayout, VerticalLayout, and HorizontalLayout.
Vaadin 8
If you want to use flex-box in Vaadin 8, there are following options
If you prefer server side java API, there is add-on in directory https://vaadin.com/directory/component/flexlayout-add-on that has that.
You can always use CssLayout, and define CSS flex-box rules in your theme
The Board (https://vaadin.com/directory/component/vaadin-board) component is implemented using flex-box
Vaadin 10 (Flow)
All Layouts in Flow are implemented using Flex-box, making them function better together. There is also a FlexLayout in Flow, that gives Java API of flex-box in similar fashion than the add-on mentioned above. HorizontalLayout and VerticalLayout are special cases flex-box, so there is less side effects when combining these (see: https://vaadin.com/docs/v10/flow/components/tutorial-flow-components-setup.html).
Related
I have used Bootstrap while development of Web Application. Now I have started learning of BootsFaces. While learning very first question pop up in my mind is
What is Exactly difference between Bootstrap and BootsFaces? and
what are their pros and cons over each other?
I searched for these answers but there wasn't any answer which make my doubt clear. Please help me for these questions.
BootsFaces is a JSF component library which generates HTML that uses Bootstrap. BootsFaces allows you to easily work with Bootstrap in a JSF application. Comparing them would be more or less the same as comparing red paint to a red painted board.
Some info from the BootsFaces showcase on this subject, specifically on layouting:
Why BootsFaces? Why not using Bootstrap natively?
BootsFaces takes full advantage of Bootstrap's Grid system while maintaining the benefits of being a JSF framework. Actually, we believe it's more concise and more expressive than programming Bootstrap natively. Convince yourself: inspect the source code of the demo in your browser's source code view. After reformatting, the form is 81 lines. The JSF source is is 45 lines.
BootsFaces being a JSF framework means that you can leverage Bootstrap's layout feature using - for example - the JSF templating system and JSF's conditional rendering to achieve and maintain very complex layouts without much effort.
This website is an example itself: it uses a page template with ui:insert and ui:include and the pages are ui:compositions.
See also:
What is the need of JSF, when UI can be achieved with JavaScript libraries such as jQuery and AngularJS
Templates created using p:layout and p:layoutunit does not support responsive. How to make it responsive? Or Do I need to create a different template using Grid CSS as given in primefaces show case?
I am developing a web application with a menu to display on the left, header information like company name, date and other details on top, and the actual content on the center. All pages in the web application will follow the same pattern hence I used a layout and created it using p:layout and p:layoutunit.
But, the pages are looking very small when viewed on mobile (all are getting resized including the menu's on the left). Hence I thought of using responsive grid so that the pages can be viewed in desktops as well as in mobiles.
How I can change the exisitng application developed using the primefaces layout and layoutunits, to become responsive, as layout and layout units are not responsive. The primefaces showcase has given example using DIV only.
Hence, this question. Hope I made my question clear. Thank you.
One big piece missing on richfaces is a chart support. In my case what I need is a simple bar chart, with no interactivity to put into a jsf (richfaces 3) page, into a javaEE 6 web-application that must run only with opensource libraries
Anyone can give me some options?
thanks in advance!
note: I'm thinking on jfreechart, obviously, but what I need is something skinnable fast, with no pain
you could have a look on JSFlot .People say it works well with richfaces.
The JSFlot JSF chart library builds on top of the JavaScript Open
Source Project Flotr (a javascript plotting library based on the
Prototype Javascript Framework) to create stunning interactive charts
purely using JavaScript. The JSFlot charting library is simple to
install, easy to configure and easy to use in your custom application.
All of the applications dependencies (purely JavaScript related) are
included in the Jar file.
The goal of the JSFlot project is to support all the main features of
Flotr (Flotr has its own project page set up at
http://code.google.com/p/flotr/), while remaining easy and simple to
install and use.
We used JQPlot for charting in our project. Pluggable, Interactive and look good. Check them out:
JQPlot Bar Charts
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..
For last two years I have been programming extensively with jQuery and ExtJs. I think now it's time for me to invest some time in learning the impressive YUI library.
In terms of learning from scratch what is advisable?
I dont plan to use YUI 2 at all in any of my future projects I will use only YUI 3. Is there any paradigm shift in riting code for YUI 2 and YUI 3? or is it only about some cosmetic changes ?
YUI2 and YUI3 are really very different. As different as plain javascript vs jQuery.
Here's an example of setting the background color of all elements of a given class to red to illustrate the difference.
First in YUI2:
<script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/dom/dom-min.js"></script>
<script>
var YDom = YAHOO.util.Dom;
YDom.setStyle(YDom.getElementsByClassName('test'),'background-color','red');
</script>
Now in YUI3:
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node',function(Y){
Y.all('.test').setStyle('background-color','red');
});
</script>
Notice the main differences:
In YUI2 you include the needed modules yourself using the <script> tag. In YUI3 you only include one script file with the <script> tag and load all the rest using YUI().use. In the example above we use the node module in YUI3. YUI2 does have a module that can do the auto loading but it is a separate module itself and not built-in to the YAHOO global object.
YUI2 is traditional imperative programming: foo(bar()) while YUI3 uses chaining.
YUI3 forces you to write all YUI related code inside a function therefore running in its own scope and exposes only the YUI object to the global scope. This is basically ninja mode in other libraries.
Learn YUI 3, it is the future of the library. It's also a huge leap forward in terms of usability and flexibility from YUI 2. At this point learning YUI 2 unless you really have to is going to be wasted time.
Yes, definitely YUI3... It has great performance enhancements compared to YUI2.
Since you mentioned you have been extensively using jQuery already, this link might help you pick up YUI3 faster----listing the most frequently used YUI3-equivalents of jQuery modules
http://www.jsrosettastone.com/
Hope that helps..
For other people who flock to this page in search of answers, here are a bunch of videos from the YUI blog to get started on YUI3.
Eric Miraglia’s Welcome to YUI 3
and more videos here - http://www.yuiblog.com/blog/2010/10/27/jquery-and-yui-3-a-tale-of-two-javascript-libraries/
You can find more documentation on YUI3 library here http://yuilibrary.com/
YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.
YUI is a library of JavaScript utilities and controls for building richly interactive web applications using techniques such as DOM Scripting, DHTML, and Ajax.
Fast
Modular Architecture / Dependency Management
Component Infrastructure
Event System
DOM Interaction,Ajax,Many Widgets
Great Documentation
YUI App Framework
Is Open Sourced
Is Developed by Yahoo and the YUI community
Is based on YUI3
Is inspired by Backbone.js
Gives you a basic structure for front end heavy web applications
More About YUI