betweenGo

la cuarta ventana by bachmont 

Sometimes when you click on a link in an ATG JSP/DSP page you want a property of an ATG component to be set as well.  For example:

<dsp:a href="foo.jsp">Foo
  <dsp:property bean="BarFormHandler.baz" paramvalue="index"/>
</dsp:a>

What gets tricky is if you also want a popup window to display the contents of this link.

The Wrong Way

I tried adapting the instructions from the tutorial Popup Windows | open new customised windows with JavaScript.

<dsp:a href="javascript:poptastic('foo.jsp');">Foo
  <dsp:property bean="BarFormHandler.baz" paramvalue="index"/>
</dsp:a>

This does not work, i.e. the setter for baz in BarFormHandler is never called.

The Brute Force Way

I then reverted to the original DSP and looked at the outputted HTML.  Based on that I updated the DSP like this.

<% atg.servlet.DynamoHttpServletRequest dreq = atg.servlet.ServletUtil.getCurrentRequest(); %>
<a href="javascript:poptastic('foo.jsp?_DARGS=/betweengo/test.jsp_AF&_dynSessConf=<%= dreq.getSessionConfirmationNumber() %>&_D%3A/betweengo/BarFormHandler.baz=+&/betweengo/BarFormHandler.baz=<dsp:valueof param="index" />');">Foo</a>

This works but is grotesque.

The Good Idea That Did Not Work

Then I realized I could just set a parameter in the URL and have the form handler use the value to set the property.

<a href="javascript:poptastic('foo.jsp?index=<dsp:valueof param="index" />');">Foo</a>

And in BarFormHandler

public boolean beforeSet(DynamoHttpServletRequest req,
            DynamoHttpServletResponse res) throws DropletFormException {

  String indexParam = request.getParameter("index");
  setIndex(Integer.parseInt(indexParam));

  return super.beforeSet(request, response);
}

This did not work plus I did not really like it because now I have a beforeSet method that is called for every single request.

The Winner

I then realized I did not read the tutorial Popup Windows | open new customised windows with JavaScript carefully.  There is a more elegant way to call the JavaScript which degrades gracefully for browsers that don’t support JavaScript.

<dsp:a href="foo.jsp" onclick="poptastic(this.href);return false;">Foo
  <dsp:property bean="BarFormHandler.baz" paramvalue="index"/>
</dsp:a>

This works, is elegant and requires just adding the onclick attribute to the original DSP.

Ruby on Rails

• Numeric data types and zerofill. Explains what all those int(11) columns are in your Ruby on Rails tables. http://bit.ly/9Tcf7q #
• undefined local variable or method "acts_as_list"? – Ruby Forum. Do ruby script/plugin install acts_as_list http://bit.ly/9kFWbG #
• ruby on rails : adding child records to an existing parent without visiting the parent – Stack Overflow http://bit.ly/cQiGSP #
• Multi-Table Inheritance in Rails – When two tables are one… This is not easy and I wish it was. http://bit.ly/9fbzgk #
• has_many :through – count vs length vs size. Use count if u don’t want to load the contents of association into memory. http://bit.ly/dtqXe1 #
• A gentle reminder about pluralizations. config/initializers/inflections.rb to customize pluralizations in Ruby on Rails http://bit.ly/bN9GO5 #
• Ruby on Rails – Rails Migrations Cheatsheet – Dizzy. Pretty helpful. http://bit.ly/9wNvRx #
• RailsGuides Migrations. Nice guide, especially about explaining the naming convention which I don’t like. http://bit.ly/cjZ7aB #

ATG

• Configuring ATG to Send Email via Comcast SMTP – betweenGo. Configuring your ATG app to use your ISP’s SMTP server. http://bit.ly/7M5bhx #
• Enabling non-XA Resources in JBoss 4.2 with ATG – betweenGo. http://bit.ly/aDN3Po #
• Combining XML in ATG – betweenGo. Combining XML files not as straight-forward as w/ properties files but more flexible. http://bit.ly/8kVwvA Jan 12 12:00 PM

Eclipse

• Debugging Applications in IBM Rational Application Developer. Page 12 for how to set up server for debugging. http://bit.ly/aaYUHb #

JavaScript

• How can I submit a form along with some parameters using JavaScript? (JSF forum at JavaRanch). Answer #3 was helpful. http://bit.ly/b17ymm #

JSP

• Testing Which Page Loaded your JSP Page Fragment – betweenGo. Simple enough to do w/ JSTL but I always forget how. http://bit.ly/cEh7IZ #

Miscellaneous

• Cygwin 1.7.x, mounts and /etc/fstab – betweenGo. Mounts are no longer saved from session to session in Cygwin 1.7. http://bit.ly/bmaYEu #
• Git in 5 Minutes http://bit.ly/bSt3dd and Git for the lazy – Spheriki http://bit.ly/aefD17 #
• The Thing About Git. Nice article describing how flexible Git is, especially compared to SVN. I may never use SVN again http://bit.ly/bD0tuS #
• I use DreamHost and am shamelessly plugging them both for a referral and to try to win an iPad. Honestly they’re great. http://bit.ly/ctYv3Z #

Today I noticed one of my links were not working.  This was only happening in Internet Explorer 8.  Looking down at the status bar in the lower left corner I saw the message “Error on page.”  Double-clicking on it popped up this window full of useless information.

A Google search for “internet explorer invalid argument” brought me to this page, Internet Explorer Sucks.  Fortunately the author had run into this problem and figured out the solution.

It turns out In Internet Explorer, the second argument to the JavaScript window.open method, which is the windowName argument, can’t have spaces. My original link looked like this.

<a href="javascript:void(0);" onclick="window.open('popUp.jsp','Frank Kim betweenGo','menubar=0,toolbar=0,location=0,scrollbars=yes,width=400,height=175')">What's this?</a>

When I took out the spaces from the windowName argument the link worked.  You would think Internet Explorer 8 would have fixed this issue by now, it doesn’t affect any other modern web browser.

Unobtrusive JavaScript’s goal is to move all the functionality (the Controller) out of the HTML (the Model) and the CSS (the View).  This is also called full MVC separation.

This is how typically JavaScript and HTML mix.  For example in submitting a form using a text link.

<a href="javascript:submit(document.testForm)">Submit</a>

Or for jumping to different parts of a page using a dropdown.

 <input type="image" src="/img/buttons/update.gif"
   onClick="window.location.hash=
document.jumpTo.names.options[document.jumpTo.names.selectedIndex].value">

Using the unobtrusive JavaScript technique one can separate the JavaScript from the HTML.

<div id="foo">Submit</div>

<script type="text/javascript">
 Event.observe($('foo'), 'click', function(event) {
   $(Event.element(event)).form.submit();
   return false;
 });
</script>

We use the Protoculous JavaScript file which combines the Prototype framework and Scriptaculous libraries to do unobtrusive JavaScript.

(Photo: Nouveau Variation by Syntopia)

I find the undefined keyword and identity operators (=== and !==) in JavaScript pretty useful.  For example if I am parsing a JSON input and I am not sure if something is there or not I test it like this.

if (root.Foo === undefined)

If I want to test if something is defined I do it like this.

if (root.Bar !== undefined)

saladwithsteve explains it well in his JavaScript undefined vs. null post.

Update 12-14-2009: Unfortunately the above method did not work for testing a variable directly.  I ended up following the advice of this post, Javascript IsDefined Function.  To test if a variable is defined I now do this.

if (typeof(foo) != "undefined")

It is relatively simple to dynamically create a dropdown from which you can jump to different parts of a page using JavaScript and ATG DSPEL.

First create the dropdown.

<form name="jumpTo" action=".">
  <dspel:droplet name="/atg/dynamo/droplet/ForEach">
    <dspel:param name="array" param="categories"/>
    <dspel:setvalue param="category" paramvalue="element"/>
    <dspel:oparam name="outputStart">
      <select name="names">
    </dspel:oparam>
    <dspel:oparam name="output">
      <dspel:getvalueof id="index" param="index"/>
      <c:set var="catShortName" value="cat${index}"/>
      <option value="<c:out value="${catShortName}"/>">
        <dspel:valueof param="category.name"/>
      </option>
    </dspel:oparam>
    <dspel:oparam name="outputEnd">
      </select>
    </dspel:oparam>
  </dspel:droplet>
</form>

Next create the button outside of the form for jumping to different parts of the page. I learned about the window.location.hash from this article. And I learned about how to access the selected value from the dropdown from this article.

 <input type="image" src="/img/buttons/update.gif"
   onClick="window.location.hash=
document.jumpTo.names.options[document.jumpTo.names.selectedIndex].value">

Finally you create the name anchors throughout your document.

<dspel:droplet name="/atg/dynamo/droplet/ForEach">
  <dspel:param name="array" param="categories"/>
  <dspel:setvalue param="category" paramvalue="element"/>
  <dspel:oparam name="output">

    <%-- magazine category --%>
    <dspel:getvalueof id="index" param="index"/>
    <c:set var="catShortName" value="cat${index}"/>
    <a name="<c:out value="${catShortName}"/>"
       id="<c:out value="${catShortName}"/>">
      <dspel:valueof param="category.name"/>
    </a>

  </dspel:oparam>
</dspel:droplet>

It has always bedeviled me how to submit an ATG form using a text link. I have asked many people about this but no one seems to know. Finally with the help of ATG support I figured it out.

Below is a simple example of how to do it. The trick is the hidden submit input which triggers ATG to call the handleSubmit method of the form handler.

<%@ taglib uri="/dspTaglib" prefix="dsp"%>

<dsp:page>

<script>
  function submit(form) {
    form.submit();
  }
</script>

<dsp:form action="<%=request.getRequestURI()%>" method="post" name="testForm">

  Foo: <dsp:input type="text" bean="TestFormHandler.foo"/>

  <p><a href="javascript:submit(document.testForm)">Submit</a>

  <dsp:input type="hidden" bean="TestFormHandler.submit" value="Submit"/>

</dsp:form>

</dsp:page>

You can also invoke the JavaScript like this:

  <p><a href="#" onclick="submit(document.testForm); return false;">Submit</a>

Submitting a form from a radio button is not common but it is a nice UI which is even better when done with AJAX.

A typical form with two radio buttons would look something like this.

<form action="test.html">
1 <input type="radio" name="test" value ="1"><br>
2 <input type="radio" name="test" value ="2">
<p><input type="submit" value="submit">
</form>

But with basic JavaScript you can make a simpler form like this.

<script>
function submitAction( form, absPath ) {
form.action = absPath;
form.submit();
}
</script>
<form action="test.html" id="test">
1 <input type="radio" name="test" value ="1" onchange="submitAction(document.getElementById('test'), 'test.html')"><br>
2 <input type="radio" name="test" value ="2" onchange="submitAction(document.getElementById('test'), 'test.html')">
</form>

If you are using Struts the above form’s JSP would be:

<html:form action="test.do" styleId="test">
1 <input type="radio" name="test" value ="1" onchange="submitAction(document.getElementById('test'), 'test.do')"><br>
2 <input type="radio" name="test" value ="2" onchange="submitAction(document.getElementById('test'), 'test.do')">
</html:form>