Tag Archives: javascript

Live from TSSJS – Ajax and JSF with Max

Posted on by
Reply

Live blogging from TheServerSide Symposium on the final day, attending “Ajax Applications with JSF 2 and New RichFaces 4” presented by Max Katz.  Max is presenting a talk on Ajax, which has been added to JSF2, as well as integratin with RichFaces 4.  Max will be part of a client-side panel in the next set of talks with myself, Cameron McKenzie, and Bear Bibeault in the main ballroom.

Attendance has been significantly reduced today as many people, CodeRanch staff included, have started flying back home.

1.  JSF2 New Features
Max lists some of the new features in JSF2:

  • Facelets
  • Compsitie components
  • Implicit Navigation
  • Bean validation
  • Basic Ajax – Focus of the talk

2.  Ajax Support
Ajax support in JSF2 has been added via f:ajax tag.  Max presents some code examples that include event handling for the Ajax tags.

3.  Where are the rich JSF2 components?
Max focusses on JSF2 as a framework for developing extensive widgets and rich UI, but does not provide them.  In other words, to use JSF2 in practice, you will need to also include a rich framework, built on top of JSF2, as part of your application.  The rest of his talk is focussed on RichFaces 4, a rich JSF2 framework with customizable/skinnable widgets.

4.  RichFaces 4
RichFaces 4 has basic support for JSF2, so it is the first cross-over transition.  The CR1 is available and the main release is slated for the end of March or early April, so as soon as 1-2 weeks.  The RichFaces 4 tag is available via a4j:ajax.

5.  What’s new in RichFaces 4?
New version relies entirely on jQuery in JavaScript.  Redesign for semantic HTML principles.  Also includes server-side and client-side performance optimizations.  Finally, a lot of code clean-up and review was completed by the RichFaces team.

From a deployment perspective, it supports publishing to Google App Engine as well as Amazon EC2 Cloud.

Conclusion
Max spent the rest of his talk presenting individual facets of the RichFaces 4 API.  It was a little dry if you don’t have a strong foundation in RichFaces, but still educational.  The client side valdation, based on bean validation, looked particularly useful.

Live from TSS-JS – jQuery with Bear

Posted on by
1

Below is a hightlight of a presentation by Bear Bibeault, who gave a break out talk at TheServerSide Symposium entitled “How jQuery Made Bob a Happy Man”.  Bear is well-known author of many jQuery books as well as a moderator on the CodeRanch.

1.  Overview of jQuery
The invention of Ajax has blurred the line between server and client development by providing users a more rich user experience.  jQuery is one of those emerging direct Ajax frameworks.  Bear claims you don’t need to be a JavaScript expert to use jQuery, although you to have some background in jQuery.  Also, there are many plugins that provides a large range of overall functionality.

2.  Do More With Less
jQuery simplifies JavaScript by providing the browser-dependent wrapped in very simple calls.  One line of jQuery often represents dozens of hundreds of lines of JavaScript.  Unlike Prototype, it only uses one namespace $() to simplify coding.  Excellent for finding elements using selectors, whereas in pure JavaScript this would syntactically difficult.

  • Basic Selectors.  The most commons selector can match by ID or component CSS type such as $(‘div’) and $(‘myApplication’)
  • Positional Selectors.  Filtered selection based upon DOM relationships such as $(‘div:first-child’) as defined by CSS3.
  • Custom Selectors.  jQuery-defined filters that inputs things CSS missed.  Example:  $(‘:text:disabled’) [selects all text input elements that are disabled].

jQuery also has a very diverse library for event, click, and click handlers.  Hard to imagine how we ever lived without them.

3.  Plays well with others
jQuery has supported means to give up $() namespace for other tools to use that namespace.  In this manner, jQuery and Prototype can be intermixed.

4.  DOM Manipulation
Variety of DOM manipulation elements such as move/copy, add/remove, style manipulation, position manipulation (helpful for animations), etc.  Variety of integration tools such as GET/POST/PUT/DELETE, etc for server Ajax-based calls.  Includes tools to automatically parse JSON, XML, HTML and can even execute retrieved JavaScript code.

5.  Chaining jQuery
Common jQuery interactions allow you to chain elements such as $(‘myClass’).css(‘color’,’red’).show().appentTo(‘…’).  A little strange to get used but very powerful.  There are some functions that do return values and cannot be chained as this.

6.  document-ready handler
jQuery offers a document-ready handler that fires immediately after the page has downloaded but before the page has fully displayed.  Allows you manipulate items before they have been drawn.

7.  jQuery with JavaScript turned off
One of the design goals of jQuery is to create pages that ‘degrade gracefully’ if the user has turned JavaScript has been turned off.  For example, updating the form action to match a form submit click handler in the event the form is submitted without the Ajax handler being invoked.  Some government groups require pages to work with JavaScript disabled.

8.  More with Plugins
Large variety of plugins available for jQuery that follow similar patterns/structure as the core jQuery API.  Most popular ones are jQuery UI for complex UI widgets, and jQuery Forms for advanced form handling.  There’s also validation plugin to help simplify creating complex form validation logic.  jQuery Templates can be used to create versatile client-side templating.  Finally, there’s LiveQuery for notifications and updates about elements being created and destroyed.

Conclusion
Bear reiterates the point “Do more with less and in less time” and in that jQuery is successful.

how to view source code generated by dojo

Posted on by
2

Dojo abstracts alot from you when creating widgets.  So how do you see the real source?  The source is important when testing certain types of requirements.  Accessibility is one of those requirements.

Normal code

As an example, I wrote a simple line of code to display a Dojo widget for currency.

<input type="text" id="amount" name="amt" dojoType="dijit.form.CurrencyTextBox" constraints="{fractional:true}" currency="USD" invalidMessage="Invalid amount format." />

When I do a simple “view source”, I see exactly what I have here.  However, I’m interested in the source code the browser is rendering.  I installed the Firefox Web Developer extension to find out.  It was a simple as going to my web page and clicking view source –> view generated source.  The result is at the bottom of this post as it’s a bit long.  [I’m curious what other/better ways there are of seeing the source.  Feel free to add a comment if you have one.]

This is really interesting.  A few things jump out at me:

  1. Dojo takes care of quite a bit a code for us!
  2. Dojo creates a Dojo input element that does all the work and wraps a hidden input element representing what I actually wrote.  This lets me use the name I specified in my own code while letting Dojo add everything it needs.
  3. IBM did a good job adding accessibility support to Dojo.

Error messages

I was also interested in what was generated when validation pops up that you did something wrong.  I was able to use the same steps – enter an invalid amount, tab out and then view source –> view generated source.  Dojo generated a single exra div for that.  It also generated the ARIA/WAI alert roles so a screenreader knows the validation has popped up.

<div role="alert" class="dijitTooltipContainer dijitTooltipContents"
dojoattachpoint="containerNode" wairole="alert">Invalid amount format.</div>

The following is what gets generated for the one line input tag:

<div widgetid="amount" value="NaN" role="presentation" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox" id="widget_amount" dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse" wairole="presentation">
<div style="overflow: hidden;">
<div class="dijitReset dijitValidationIcon"><br></div>
<div class="dijitReset dijitValidationIconText">?</div>
<div class="dijitReset dijitInputField">
<input aria-invalid="false" aria-valuenow="NaN" value="" tabindex="0" id="amount" class="dijitReset"       dojoattachpoint="textbox,focusNode"
dojoattachevent="onfocus:_update,onkeyup:_onkeyup,onblur:_onMouse,onkeypress:_onKeyPress"
autocomplete="off" type="text">
<input name="amt" style="display: none;" value="" type="text">
</div>
</div>
</div>
</div>