Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Sunday, July 10, 2011

Choosing a text scroller plugin for the side bar

So a few quick notes: We are slightly behind on our feature complete milestone because we decided to add a new feature. But we should be good within a week or so.

In the meantime, I've been working on implementing a "recent changes" text scroller on the left side of our website. This will show the most recent comment posts, recording/song additions, and any additions we make as well. I'm personally not doing the data side of this (although I might if we get time constrained) so my job is just the front-end.

Naturally I'm very lazy, so I prefer a pre-existing solution to making blocks of text scroll vertically. I like javascript and jQuery, but I don't want to spend too much time writing something like that. So I went looking for such a plugin.

And after looking at a good dozen or so different plugins, which for one reason or another I couldn't get to work with our text blocks, I finally settled on one called SerialScroll. Here's a list of features relevant to us:
Recent Changes Side-bar
  1. Vertical scrolling
  2. Support for arbitrary scrollable items specified with CSS selectors
  3. Auto scrolling
  4. ~4 kb  total size

Starting from the "News Ticker" demo at the demo page, I was able to customize it for our page and retrieve its content via AJAX.

I realize it's not too exciting since you can't see it scrolling, but just trust me that it does, in fact, scroll. Although we might change the look, this looks like the plugin we'll stick with.

Oh and for reference, here's our javascript:

 $('#changelist').load('recentchanges .changeitem',function()
 {  
  $('#changelist').serialScroll({
 
   force: true,
   axis: 'y',
   items:'.changeitem',
   interval: 2000,
   easing:'linear',
   lazy: true,
   step:1,
   start:0,
   cycle:true,
   jump: true,
   event: 'click'
  }); 
 }); 

Saturday, March 12, 2011

Implementing interaction between jQplot and java servlets

Today I'm going to share my experiences developing a way to let users plot graphs of certain interesting data.


Way back when, we originally were going with the Google chart API to accomplish this. It's simple and it looks good. However, we decided instead to take a jQuery approach (for learning and to avoid making a call to a second server) with jqPlot. jqPlot is a free graphing library which generates the graph on the client side and accepts data in a convenient format.

After playing around with it, we were able to develop a nice implementation:

Now aside from a few things that need to be worked out (such as fractional years), it looks good and was very simple to implement. Our approach to this using java servlets was:
  • Client sends an AJAX graph query to the GraphsController class with a parameter ("getgraph") set to true to signify a graph request
  • Servlet gets request, builds a GraphRequestBean and validates it. If validation fails the server sends back an error object using the JSON library for Java called google-gson
  • Servlet sends request to a GraphsManager, which generates the Graph by interacting with the data layer. 
  • Graph is sent as a JSON object and is read by the javascript, where a call to the plotting library is made. 
  • User gets nice looking graph
 We also added some error handling and the ability for users to regenerate the graph through a link. I'm pretty excited about this implementation (and jQuery in general...) because it worked very well. And also I have even more respect for unit tests because they saved a lot of time debugging, since I was constantly changing code around while developing.