Friday, April 29, 2005

Browsers and playing sound

I just finished a project that required choosen sound(.wav) files to be played when a certain event occured. This became a challenge considering I needed it to work in IE and Firefox. It seemed everytime I found a viable solution in one browser, it either wouldn't work at all, or it would destroy the look-n-feel of the application. Below are what I needed to accomplish and what code works the best across both browsers.

I needed to play a sound when an event occured. In this case, the event was the arrival of a certain alert. To accomplish this, I decided to dynically add the html sound code needed using javascript and DOM manipulation. Note: if you only need to do this for internet explorer, the best solution, in my opinion, is to use the <img dynsrc="something.wav" />. That worked flawlessly in IE.

First thing to note about Firefox, you will need to have quicktime to play the .wav file. That is fine but, it will break the above mentioned code because IE will try to use quicktime to play the .wav file as well and it just simply fails. There is probably a way around this problem but, I don't have the time nor patience to deal with windows :)

In the end, the best solution was to use the <embed > tag. Now trying to put this anywhere within a table in Firefox, causes a lot of space to be used, no matter what you set the width and height to. If it is outside a table, it will not use up a ton of space. Since my application is a portlet and dependent upon what ever the Portal(Jetspeed, in this case) does to layout the portlets(it uses tables:( ), I needed to add my <embed> tag outside of this. I decided to use the following trick (see code below). Is it the most elegant solution?, NO. but it works for now :)


var embed = document.createElement("embed");
embed.setAttribute("src", "somewavefile.wav");

embed.setAttribute("width", "1%");
embed.setAttribute("height", "1%");
document.lastChild.appendChild(embed);
setTimeout( function() { document.lastChild.removeChild(embed); } , 30000 );

Tuesday, April 26, 2005

DWR and JST

Although I haven't had a chance to try out JST I think it will complement DWR perfectly. I have spent most of my time trying to build my UI, appending strings for innerHTML junk. Using a template approach to manage this will speed up development and promote richer UI's.

Wednesday, April 20, 2005

I Hate Internet Explorer

Okay, I spent(wasted) an afternoon and about an hour of the night trying to pin down why my
appendChild() stuff wasn't working as expected. Would have helped if I would of known that was the problem sooner. Try this code out in IE and Firefox and look at the difference. Be sure to fix the script tag, blogger didn't like it :)

Not only do all of the entries work in Firefox, it accepts the css styles as well. IE accepts the tbody append but will not style the rows.


<html>
<head>
<style type="text/css">

.system { color: #FF0000; }

</style>
</head>
<body>

function drawTableInner(tbodyID)
{
var frag = document.createDocumentFragment();

var tr = document.createElement("tr");
tr.setAttribute("class", "system");

var td = document.createElement("td");
var td1 = document.createElement("td");


var span = document.createElement("span");

span.appendChild(document.createTextNode("Data Entered Again"));

span.setAttribute("style", "color: #00FF00");

td.appendChild(document.createTextNode("Data Entered") );
td1.appendChild(span);

tr.appendChild(td);
tr.appendChild(td1);

frag.appendChild(tr);

var tbody = document.getElementById(tbodyID);
tbody.appendChild(frag);
}

function drawTableIn(tbodyID)
{
var frag = document.createDocumentFragment();

var table = document.createElement("table");
var tr = document.createElement("tr");
tr.setAttribute("class", "system");

var td = document.createElement("td");
var td1 = document.createElement("td");


var span = document.createElement("span");

span.appendChild(document.createTextNode("Data Entered Again"));

span.setAttribute("style", "color: #00FF00");

td.appendChild(document.createTextNode("Data Entered") );
td1.appendChild(span);

tr.appendChild(td);
tr.appendChild(td1);

table.appendChild(tr);
frag.appendChild(table);

var tbody;

if (document.all)
{
tbodyID.innerHTML = "";
tbodyID.appendChild(frag);
}
else
{
tbody = document.getElementById(tbodyID);
}
tbody.appendChild(frag);
}

function drawHTMLTable(tbodyID)
{
document.getElementById(tbodyID).innerHTML="<table><tr class='system'><td>This is some new data</td></tr></table>";
}





<table>
<thead>
<tr>
<td>data</td>
</tr>
</thead>
<tbody id="tabledata" >
</tbody>
</table>

<div id="divdata">

</div>

<div id="div2data">

</div>

<script type='text/javascript'>
drawTableInner("tabledata");
drawHTMLTable("div2data"); <!-- put this below drawTableIn and watch it disappear in IE. IE SUCKS -->
drawTableIn("divdata");

</script>

</body>
</html>






Monday, April 18, 2005

DWR, Weblogic, and jetspeed

I am working on getting DWR setup and working for use with some portlet applications that will be running in a Jetspeed1-based portal. I have to say that I am impressed with what DWR keeps me from having to implement. I spent a little time learning what would need to be done to implement some AJAX style functionality and dwr is a time saver. It also keeps the view code a lot cleaner in my opinion.

One problem I found was a simple fix in the DWR servlet class. BEA weblogic was complaining about the ContentType being set after getWriter has already been called on the response.

After fixing that, I was on my way. Hopefully, using the portlet namespace to keep the javascript and div id's unique will allow for multiple portlets on the same page.

Thursday, April 14, 2005

Struts and the Portal Bridge

With my new job, I have been working on creating some struts portlets. Really just struts applications that can play well in the bridge environment. I just did my first Edit view and got stuck on returning to the normal view. My view was showing up just fine but, the portlet state in Jetspeed (1) was not being restored. After adding the following, everything was returned to the proper state.



ActionResponse actionResponse = (ActionResponse) httpServletRequest.getAttribute("javax.portlet.response);

actionResponse.setPortletMode(PortletMode.VIEW);

Tuesday, April 12, 2005

New House Pictures [2]


View from the left. Posted by Hello

New House Pictures [1]


New House. View from the street. Posted by Hello