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
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
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
Is it possible to make the PrimeFaces's Editor component, right to left?
It seems not to support dir and style attributes... :(
in my experience controls in jsf framework like prime/open/etc.. don't support RTL using html #dir,
usually the interfaces of these controls are built using Javascript, so probably you should work at that level.
Can I suggest you to consider two other alternatives to jsf controls in this case?:
Using a javascript html editor (like elrte, maybe is easier to customize and it has also Arabic translation). http://elrte.org/
Using the Flex html editor (is Flash, if you can, and Flex support RTL for all controls)
F.
Just bumped into this thread by accident,
anyway I remember that i did the RTL with jquery like this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$("j_idt33:inputtextlist").contents().find('html').attr('dir', 'rtl');
});
had to find the id with firebug , inputtextlist was the id i gave to the editor , and ypu can always use a smarter jquery selector (with suffix match)
I am a designer whose main marketing strategy is multi browser compatibility. I assure my clients that the site will work even in IE6 (!).
Of late i have been pondering over the question of moving to HTML 5. The reason behind my apprehension is that IE6 is still a major player in terms of market share and i don't want to lose it.
Is there any way of moving to HTML 5 and still promise multi browser compatibility?
Thank you.
Yes, by taking baby steps.
To start with, you can switch to the HTML5 doctype: <!DOCTYPE html>. This switches just about every browser out there into "standards" mode, the same as an HTML 4 strict doctype.
Then there's the new elements. Internet Explorer can't natively style them, but a handy little bit of javascript fixes that up: http://code.google.com/p/html5shiv/
If you or your tools aren't ready for that (e.g. some CMSs strip out HTML tags they don't understand), then in the interim you could use classes, e.g. instead of <article>, use <div class="article">.
As for the new form controls, they're backwards compatible too. So <input type="email"> will work exactly the same way as <input type="text"> in browsers that don't support it. If necessary you can use javascript to fill in the gaps. See http://diveintohtml5.ep.io/forms.html for more on that.
As for <video> and <audio>, you can fall back to <object> for older browsers - e.g. http://camendesign.com/code/video_for_everybody. Meanwhile <canvas> can be emulated in javascript, e.g. http://code.google.com/p/explorercanvas/.
"To HTML5" is a fairly broad statement. Even if you have the new HTML5 doctype set (the simple <!DOCTYPE html>) you don't have to go all out and use every aspect of HTML5, only what is appropriate to your project.
If you are keen to get on board with HTML5, I recommend reading "How to use HTML5 in your client work right now" for examples of how you can use certain aspects of HTML5 with few (if any) drawbacks.
Disclaimer: I am one of the curators of HTML5 Doctor.
From there it boils down to whether or not your project will benefit from the features of HTML5 and if you can afford to implement these features. For example, if all of your IE users also have JavaScript enabled you can use html5shiv to get IE to recognise the new elements, enabling you to use them and style them.
As for the new JS APIs and CSS properties that people often group with the term "HTML5", unless your site absolutely requires that you use the technology (perhaps something like geolocation), then it could simply be a matter of progressive enhancement. If webkit/firefox users get rounded corners from CSS3 and IE users don't, is that really such a big deal?
As a rule of thumb I would not develop a site purely in HTML 5 but would consider using it for certain, richer, parts of the site. Remember that it is still not recommended by W3C and IE barely supports it at all.
This blog has a good discussion on it: http://blogs.forrester.com/ronald_rogowski/10-05-10-what_should_customer_experience_professionals_do_about_html5
yes there are several ways.
but if you DONT need html5 elements like video tags, or html5 api's like browser databases, stay at XHTML,because it is still not recommended by W3C. There you can use simple fallbacks for ie6.
do you need html5 elements and apis?
As a last resort you could use Chrome Frame: http://code.google.com/chrome/chromeframe/
As for "a major player in terms of market share", that really depends on your audience. Even Microsoft is marketing its new IE versions rather aggressively. And I don't think there's shame in charging your IE 6 users an extra plugin installation fee. After all, their browser is 10 years old, which is about 100 Internet years, isn't it?
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.