Hobione's Weblog

Living & Breathing in Web 2.0 Era

jQuery-ThickBox (Launch thickbox onload instead of onclick)

I wanted to add a light box/light window/thick box in one of my servlet application, started looking on the web and found few ajax libraries and they are as follows.

Kevin Miller: Light Window = http://stickmanlabs.com/lightwindow/#demos
I made this one work but had problem with positioning.

Lokesh Dhakar: Light Box = http://www.lokeshdhakar.com/projects/lightbox2/
His entire demos were for images, I need to open up an html file in the light box.
Lightbox is for images only. Try an alternative solution such as: Litbox, Litwindow, or Thickbox.
- Lokesh

Cody Lindley: Thick Box 3.1= http://jquery.com/demo/thickbox/
Thick box is written on JQuery library. It worked like a champ at the first time and I was able to pass an html file, width and height perfectly. It worked when I clicked a link like this.

<a href=”body/blank.html?height=120&width=400″ class=”thickbox” title=”CD ROM Order Support”>Thick Box</a>

Problem: I could not figure it out how to make a thick box open with page on load,
Launch thickbox onload instead of onclick

Tried these, did not work.
<body onload=”thickBoxPopup();”>

<script>

function thickBoxPopup(){
tb_show(“Test”,”body/blank.html”,”images/cart.gif”);
}

</script>

OR,

function thickBoxPopup(){
window.open(“body/blank.html?height=120&width=400 class=thickbox title=CD ROM Order Support”);
}

Solution:
At the top of the page I have added this, and it worked great. $ (dollar) sign is necessary; this ain’t PHP or Perl. $() -> Dollar sign and brackets construct a new jQuery object.

<script>
$(document).ready(function(){
tb_show(“CD ROM Order”,”body/blank.html?height=120&width=400″,”images/cart.jpg”);
});
</script>

Details: http://codylindley.com/Javascript/257/thickbox-one-box-to-rule-them-all

Q: $(“div > p”).css(“border”, “1px solid gray”); What does it mean?
A: Finds all p elements that are children of a div element.
E: <head>
<script src=”http://code.jquery.com/jquery-latest.js” />

<script>

$(document).ready(function(){
$(“div > p”).css(“border”, “1px solid gray”);
});

</script>

</head>
<body>
<p>one</p> <div><p>two</p></div> <p>three</p>
</body>

Quote: “Knowledge is its own reward” … Cody Lindley

December 28, 2007 Posted by HobiOne | Ajax Libraries, jQuery | | 34 Comments

JSF – Richfaces (java.lang.NoClassDefFoundError)

I was getting an error like this even though I had my commons-collections.jar in the class path

java.lang.NoClassDefFoundError: org/apache/commons/collections/map/AbstractHashedMap

Solution: I had to download the new version of the jar file to make it work commons-collections-3.2.jar from apache commons.

December 18, 2007 Posted by HobiOne | Java Server Faces, Jboss RichFaces (Ajax4JSF) | | No Comments Yet

Ajax keywords defination

Asynchronous: The request is taking place in the background, out of sight of the user interface.

XHR: XMLHttpRequest

RPC: Remote Procedure Calling is a mechanism to allow local code to call methods on objects that exist on a remote server as if that remote object were also local.

Stub: RPC works by creating a local proxy interface that mimics the remote method signature. Example, creator = new in dwr.xml creates client-side stub.

* DWR is only useful for java web applications hosted by a servlet engine.

December 16, 2007 Posted by HobiOne | DWR | | No Comments Yet

Another day with DWR 2.0 – error to Execute

Since demo application worked, I wanted to leverage my DWR knowledge in my existing servlet application. I have a shopping cart application that I wanted to add ajax callback for a field and I am having some serious issues.

Marshalling issue Since ‘has-a’ relationship exist in ItemOrder.java, so I had to do marshalling on ItemOrder and CDTypeVO in dwr.xml. Here is the code for marshalling both beans.

<allow>
<convert converter=”bean” match=”cdorder.domain.ItemOrder” />
<create creator=”new” javascript=”ItemOrder”>
<param name=”class” value=”cdorder.domain.ItemOrder”/>
 </create>

<convert converter=”bean” match=”cdorder.domain.CDTypeVO” />
<create creator=”new” javascript=”CDTypeVO” >
<param name=”class” value=”cdorder.domain.CDTypeVO”/>
</create>
</allow>

This resolved all red error, but IteamOrder bean still not functioning properly. Every time I click those Execute button, I am getting a nasty pop up Error message. Not sure, what am I missing.

DWR Pop up Error Here is the architecture description: I have a form which has ‘Add’ buttons. When an Add button get clicked, it submits a form and request goes to OrderPageServlet.java and here what it does as follows:

  1. Get a shopping cart from session variable
  2. If shopping cart is null, instantiate a empty shopping cart and put it in the session

i. cart = (ShoppingCart)session.getAttribute(“shoppingCart”);

ii. // New visitors get a fresh shopping cart.

iii. // Previous visitors keep using their existing cart.

iv. if (cart == null) {

v. cart = new ShoppingCart();

vi. session.setAttribute(“shoppingCart”, cart);

vii. }

  1. Now, based on CD Id that has been passed, add item to the cart in Servlet

i. cart.addItem(cdID,type);

  1. ShoppingCart has an ArrayList that keep tracks all order
  2. Add item to the list in the ShopptingCart.java

i. private ArrayList itemsOrdered = new ArrayList();

ii. ItemOrder newOrder = new ItemOrder(cdTypeDAO.getSingleCdType(cdID,false));

iii. itemsOrdered.add(newOrder);

  1. Here is the code snippet of ItemOrder.java

public class ItemOrder {

private CDTypeVO item;

private int numItems;

private String processedDate;

private String processedBy;

public ItemOrder(CDTypeVO item) {

setItem(item);

setNumItems(1);

}

public CDTypeVO getItem() {

return (item);

}

//@Override

// public String toString(){

// return item.toString() + ” ” + getNumItems() + ” cdID ” + getCdId() + ” cdType ” + getCDType() + ” description: ” + getDescription() + “\n”;

// }

public void setItem(CDTypeVO item) {

this.item = item;

}

public int getCdId() {

return (getItem().getCdId());

}

public String getCDType() {

return (getItem().getCdType());

}

public String getDescription() {

return (getItem().getDescription());

}

//quantity

public int getNumItems() {

return numItems;

}

public void setNumItems(int n) {

this.numItems = n;

}

public void incrementNumItems() {

setNumItems(getNumItems() + 1);

}

public void cancelOrder() {

setNumItems(0);

}

public String getProcessedDate() {

return processedDate;

}

public void setProcessedDate(String processedDate) {

this.processedDate = processedDate;

}

public String getProcessedBy() {

return processedBy;

}

public void setProcessedBy(String processedBy) {

this.processedBy = processedBy;

}

public String sayHello(String name) {

return “Hello, ” + name;

}

}

  1. Here is the code snippet for CDTypeVO.java Bean\
  2. /*
  3. * CDType.java
  4. *
  5. * Created on December 6, 2004, 10:02 AM
  6. */
  8. package cdorder.domain;
  10. /**
  11. *
  12. * @author hhaque
  13. * VO = Value Object
  14. */
  15. public class CDTypeVO implements java.io.Serializable{
  17. private int cdId;
  18. private String cdType;
  19. private String description;
  20. private String date;
  22. /** Creates a new instance of CDType */
  23. public CDTypeVO() {
  24. }
  26. // public String toString(){
  27. //
  28. // return “cdID = ” + getCdId() +
  29. // ” cdType = ” + getCdType() +
  30. // ” description = ” +getDescription() +” date = “+getDate() + “\n”;
  31. // }
  33. public int getCdId() {
  34. return cdId;
  35. }
  36. public void setCdId(int cdId) {
  37. this.cdId = cdId;
  38. }
  39. public String getCdType(){
  40. return cdType;
  41. }
  42. public void setCdType(String cdType){
  43. this.cdType = cdType;
  44. }
  45. public String getDescription(){
  46. return description;
  47. }
  48. public void setDescription(String description){
  49. this.description = description;
  50. }
  51. public String getDate(){
  52. return date;
  53. }
  54. public void setDate(String date){
  55. this.date = date;
  56. }
  58. }

When I do this

<script>

var numItemValue = dwr.util.getValue(‘numItems’);

ItemOrder.sayHello(numItemsValue, loadDataCallback); It does not do anything.

Here is my call back function:

function loadDataCallback(returnValue) {

dwr.util.setValue(‘demoReply’, returnValue);

} </script>

December 14, 2007 Posted by HobiOne | Ajax Libraries, DWR | | No Comments Yet

Debug DWR (How to)

Here is the great trick that I have learned today. How to debug DWR? All I had to do to add debug = true in my web.xml file (http://getahead.org/dwr/server/servlet)

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>

Redeploy the application and in the URL I typed in http://localhost:8084/cdOrder/dwr

DWR debugger

Keep in mind that ‘dwr’ is a keyword, it is very cool features and I love it. It helped me to speed up my development time.

December 14, 2007 Posted by HobiOne | Ajax Libraries, DWR | | 1 Comment

DWR and Java Bean Configuration

Jason: DWR dynamically creates a JS file that has a stub that matches the class and methods you’re exposing. so, if you have a Demo class with the method doFoo(), it creates a stub JS class called Demo with the method doFoo() that wraps the Ajax call to the DWR servlet

End of messages received while you were offline at 9:23 AM on Wednesday
Jason: you call Demo.doFoo(<callback>) (iirc) from your page, and it uses the stub plus the plumbing from engine.js to make the XHR call, get the results, and cal your callback function

HobiOne: nice, so question is, if I have 10 beans, I have to create 10 js

Jason: well, you have to configure DWR to expose those beans, then include each JS file in your page
if I were you, i’d use annotations. much easier :)

HobiOne: I see, okay back to your answer, “configure DWR”, do you mean in dwr.xml file

Jason: yes though if you use annotations, I think you set up a different DWR servlet, then just annotate the class and methods you want to expose
it would be nice if DWR offered a KitchenSink.js that included everything else, but I don’t think it does

Sent at 9:27 AM on Wednesday
HobiOne: how about DAO stuff, do I only register beans to dwr.xml or any java classes I make in back end

Jason: well, i’d be REALLY careful what you expose to the outside world

Sent at 9:31 AM on Wednesday
Jason: i.e., i would NOT expose DAOs

HobiOne: got it, only beans, b/c from html, I dont need to talk to DAO, bean should be responsible to communicate with DAOs

A DWR Data Store for Dojo (Putting two powerful AJAX libraries to work for you):

December 14, 2007 Posted by HobiOne | Ajax Libraries, DWR | | No Comments Yet

‘dwr’ is undefined

I was trying to run DWR’s demo example and here what I missed.

I forgot to add these following pieces of code in my index.jsp page

<script type=”text/javascript” src=”dwr/engine.js”></script>
<script type=”text/javascript” src=”dwr/util.js”></script>
<script type=”text/javascript” src=”dwr/engine.js”></script>

Second, I forgot to add commons-logging-1.0.4.jar in my class path

And very last I forgot to add

<script type=”text/javascript” src=”dwr/interface/Demo.js”> </script>

Since I had a Demo.java bean

So, summary is, DWR’s http://getahead.org/dwr/getstarted has good documentation but needed little more polishing for people like novice who never used DWR. Now everything works like a champ and I can have a good night sleep.

 

December 12, 2007 Posted by HobiOne | Ajax Libraries, DWR | | 2 Comments