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
Related
We want to migrate our project from IBM WebSphere 6.1 to Tomcat 6, but in our JSP-JSF UI pages we have extensively used below IBM JSF tags.
ScriptCollector
PanelRowCaregory
PagerWeb
OutPutSelections
InputRowSelect
InputHelperDatePicker
InputHelperAssist
ConvertMask
And to replace above tags, we are trying to find the equivalent tags from Sun JSF or any other open source libraries, but we didn't find any equivalent tags.
I wanted to know whether any body has already worked on this kind of migration project, if yes can you please share the equivalent tags?
or if you solved it differently even that info also will be useful.
Thanks in Advance.
There's no standard JSF equivalent for the <hx:scriptCollector> (although the JSF 2.0 <h:head> comes close). The <hx:scriptCollector> is only required by those IBM-specific <hx:xxx> components. It's designed to collect all JavaScript files required by those <hx:xxx> components and then render the desired <script> tag(s) without potential duplicates when multiple components require the same JS files. It's not required by any standard JSF component.
In other words, just get rid of it without replacement.
As to other tags, just check the available standard components in tag documentation or Java EE tutorial. If none is available, just pick a component library like PrimeFaces or RichFaces. If you still can't figure out, ask an individual question for the particular tag.
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
I'm on the hunt for some more reading on JSF's HTML5 tag H5. I saw IBM's JSF 2 fu articles on it , but haven't really seen much else except presentations and slide shows on 'the promises of html5' and such.
Can anyone suggest some recommended technical reading ?
I'll bet that you're talking about this article. The h5 taglib just points to composite components which wraps some HTML5 specific elements. Composite components are just Facelet files which can be declared and used as a single JSF component in other pages. Even more, the full source code is posted in public in chapter "A JSF 2 HTML5 canvas component" of the article. You just have to copypaste it into your project to get it to run. It's not some component library like RichFaces/PrimeFaces or whatever which you have to download, install and configure first.
JSF doesn't care if the output is XHTML or HTML5. Both are equally valid as long as you adhere the XML syntax (i.e. the document must always be well-formed). You can perfectly inline HTML5 specific tags in JSF pages/components. Your only concern is the browser support.
If your concrete problem is more the lack in understanding of the purpose of composite components and how they work, then I'd suggest to get yourself through the appropriate sections of the Java EE 6 tutorial.
Java EE 6 tutorial - Chapter 5 - Facelets - Composite Components
Java EE 6 tutorial - Chapter 13 - Advanced Composite Components
See also:
JSF 2.0, is it possible to create my own component?
Is it possible to use HTML4/5 with JSF/Facelets?
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
This question already has answers here:
Is it possible to use JSF to build clean CSS layouts without using tables?
(2 answers)
Closed 5 years ago.
I'm using RichFaces per a client requirement, but the markup it (and the stock JSF controls) generates is an awful mess of nested tables. Are there any control libraries out there that generate nicer markup? AJAX support is a huge plus!
There is ICEFaces which provides more semantic support than RichFaces .Also you can try Nitobi suite which also provides similar kinda solution.If you are not satisfied with any of these I suggest try to write your own part extending the Sun faces
Short answer: No I have not yet found one.
Your options include using less complicated controls and know what html the standard controls emit. Thing like h:panelGrid render as a table. There is nothing stopping you writing your own rendering family which produces more standards compliment html, but this would be a big time investment.
As for using RichFaces if you stick more to the a4j: namespace of tags you will still be getting the cross browser ajax with out all the mark up you don't like.