Javascript Development:
Developing a smart tool and a good user interface is really crucial. As a core DBA or Apps DBA we never think of any core programming exercise. But during the journey through database, we may come at a stage where you are required or expected to develop some really cool tools using JSP and Javascript combo.
Off course the language to be used is totally upto the developer to decide, unless there are some constraints enforced by the environment. Here I am describing a simple javascript funda, I used, while I was developing a tool to be used internally by our division.
Requirement:
The tool was basically to see the list of bugs logged by users, to update them and close them. This involves getting the data from database and showing it in UI. User will be entering the information and same has to be updated in database.
Now when a bug information is supposed to be viewed, it will be chunk of information shown to the DBA, which will contain all the details neccessary for DBA to work on. In my tool I used a link which can hide or show this information when a DBA queries the bug. I thought, its not always a good idea to show big information as soon as the bug is opened in the tool.
Below screen shot you can see what exactly I meant.
Here if you see the second label, which is “Bug Description”, it gives a long description of the contents of the bug. Also as and when the users and DBAs are updating the bugs the content get appended to this and it grows big. So better way is to hide the same and show when user wants to see. Below is the screen, when a user click on show/hide link and content is visible.
Now if you see, full content is visible. This simple, but amazing functionality can be implemented using javascript. Also javascript works at client side so no overhead on the application. No additional resource or network traffic utilization. Totaly works on client browser.
How it works?
The code for fetching the details of the bug content and displaying the same is been written in JSP and javascript is added to make this particular functionality work. The code in javascript, which fetches the information and displays the same is as given below.
==============================================================
<tr>
<td width=20%><P ALIGN=Right>Bug Description</P></td>
<td width=80%><P ALIGN=left><a href="#" <font color="#008000"><strong>onClick="showHide('prevUpdates');</strong></font>">Show/Hide</a></P></td>
</TR>
<tr>
<td width=20%><P ALIGN=left></P></td>
<strong><td id="prevUpdates" style="display:none"></strong>
<font color="#0000ff"><table BGCOLOR=#f2f2f5 align=left >
<% while(results.next()) { %>
<tr>
<td id="lineno" width=80%><P ALIGN=left><font face='Tahoma' size=2 ><%= results.getString("comments")%></font></P></td>
</tr>
<%}%>
</table></font>
<strong></td></strong>
</tr>
==============================================================
The line in the bold is the line which gives the name to the region and the lines in the blue color is the one which fetches the information and shows on JSP page.
As you can see in the green color that on clicking the link “Show/Hide”, it calls for showHide javascript and passes prevUpdates, which is the ID of the region we want to show or hide. Below is the javascript, which can hide or show the content when user clicks in “Hide/show” link.
==============================================================
function showHide(elem){
var el = eval(elem +'.style');
if (el.display == "none"){
el.display = "block";
} else {
el.display = "none";
}
}
==============================================================
Here elem will take the ID prevUpdates, which we supplied while calling the script. So what the script is doing is, when style=”display:none” is set and user clicks “Show/Hide” link its making display property as block, meaning that content will be shown. And when the content is being shown (display property is block), and user clicks the link, our javascript is making display property as none, that means the content will not be shown (hidden).
Such a functionality can be easily implemented using javascript, with not performance hit. In the next post, I will be covering “How to populate drop downs using XML file”.
Persistent Storage Solutions 