December 2007 - Posts
I've been asked to take a look at the dojo javascript framework today. At first, I thought it was a Java framework for handling AJAX stuff on the client-side. To my surprise, it was only for Javascript alone. It's amazing how it could make your job easier as a developer. You almost always have to deal with the front-end stuff when you're involved in web development and for many developers who could not even design or be creative enough to create fancy stuff on the front-end, dojo is a real gift from heaven.
Three things I liked about dojo
1. The first thing I like is that I don't have to deal with the lo-level part of making an XmlHttpRequest. Everything is taken care of for me by dojo. From this point onward, I can be very creative on what I want to receive from the server.
2. Second, there are available widgets(through dijit) that you could use at your disposal. My two most favorite widgets are the Accordion Container and the Tab Container. Unfortunately for me, I don't have any idea(yet) how to make the tab container have some rounded edges rather than the pointed ones.
3. Last but not the least is the query engine which allows you to select a DOM node through a simple method call. Thin of how much time you can save with this tool!
Now, I'm not so used to using firebug or the dojo way of debugging javascript. When you load the dojo framework like the following:
[code language="Javascript"]
<script type="text/javascript" src="./dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
[/code]
It's quite a good idea to try and see if the dojo object is indeed loaded before you even start coding...
[code language="Javascript"]
<script type="text/javascript">
alert(dojo);
</script>
[/code]
Just make sure it contains an object value before you start coding
I finished creating a prototype for one module of the current project I am involved in. It involved EJB and Struts and all I can say is that everything was worthwhile. Anyway, I'm trying out more examples on EJB online to further enhance my knowledge. It's been quite a pain following the examples using the commandline so I decided to use Ant. I don't memorize all the Ant tags, I still look them up on the internet. Here, I have created one for the example I am following.
[code language="XML"]
<?xml version="1.1" ?>
<project name="SimpleSessionApp" default="build">
<property name="src" location="src"/>
<property name="build" location="build"/>
<property name="dist" location="dist"/>
<property name="JBOSS.CLIENT" location="C:\jboss-4.2.2.GA\client"/>
<property name="JBOSS.LIB" location="C:\jboss-4.2.2.GA\lib"/>
<path id="compile.classpath">
<fileset dir="${JBOSS.CLIENT}">
<include name="*.jar"/>
</fileset>
<fileset dir="${JBOSS.CLIENT}">
<include name="*.jar"/>
</fileset>
</path>
<target name="clean">
<delete dir="${build}"/>
<delete dir="${dist}"/>
</target>
<target name="prepare" depends="clean">
<mkdir dir="${build}"/>
<mkdir dir="${dist}"/>
</target>
<target name="compile" depends="prepare">
<javac srcdir="${src}" destdir="${build}">
<classpath refid="compile.classpath"/>
</javac>
</target>
<target name="build" depends="compile">
</target>
<target name="deploy" depends="build">
<jar jarfile="${dist}/${ant.project.name}.jar" basedir="${build}">
</jar>
<move file="${dist}/${ant.project.name}.jar" tofile="${dist}/${ant.project.name}.ejb3"/>
</target>
</project>
[/code]
I'm a bit irritated about Session Beans because I have to implement the Serializable interface for every object that I pass to a Remote method. Of course, it totally makes sense to do that when you're making remote invocation but I'm thinking if there's any way around this problem aside from creating a wrapper class that implements Serializable.
I could pass String arguments, that's ok because the String class implements Serializable by default. But when I want to pass, say, some other Object from the standard API, I have to go through the hard process. On the other hand though, the design for the prototype I'm making is quite clean... Or atleast I think it is....
I'm still not doing much here in my new job. There's still a lot of things to be set up. I finally got to meet with our very own Nards (N.Ocampo). Aside from that, I've been reading on Java Enterprise Design Patterns for the past one week They are:
- Service Locator - Abstracts JNDI lookup
- Session Facade - Combines all business related methods into a single SessionBean. The pattern is derived from the Facade Pattern(gof). And just to let you know, it's pronounced as fuh-sahd.
- Business Delegate - Adds another layer of abstraction for the first two patterns(though I might be wrong at this, don't take my word for me and read the link!), encapsulating the instantiation of the ServiceLocator and perhaps what type of SessionBean can be get. I think I didn't really understand the phrase on the link where it says: Use a Business Delegate to reduce coupling between presentation-tier
clients and business services. Now, what is the presentation tier being talked about there? I don't see any JSP's...? Or maybe it's referring to how the EJB clients access the EJB's as some sort of interface? Not sure, I don't think I can say more for now.
It's very exciting and I can't wait to apply those newly earned knowledge on my first task.
I've also done some reading about EJB 2.1 particularly on Session Beans(One of 3 EJBs in EJB 2.1). It's only this time that I finally got the logic behind Session Beans. You could really implement your business logic with it and have different clients access it remotely without having the actual class on that client(hint: JNDI and the Class class). I've done some hands-on activity on this one, supplementary for my learning.
It was quite easy to understand Entity Beans especially the Bean Managed Persistence(BMP). Bean Managed Persistence is one of two ways you can do Persistence in EJB 2.1. In EJB 3, I think Container Managed Persistence was replaced(or maybe improved) by the Java Persistence API(JPA) which I have more knowledge of(somehow). Got to try doing some hands-on activity on this one.
I'm using a trial version of Rational Application Developer(formerly WSAD) right now and God knows how much I missed Eclipse! You might wanna know about
CTRL + SHIFT + O(as in letter "oh")
which will write all the necessary imports in bahalf of you!
There's a very exciting task waiting for me in the next weeks to come. Hopefully I could post something about it.
I'd like to share something I've made recently(though this may be so 1999). This post could either make your life easier or worse, it all depends on you whether you want to use it or not. I don't know if this kind of functionality already exists on any web framework(JMaki, .Net) but in case you haven't found one then I hope this could be of some use to you.
The functionality I tried to this is something like what you can find here, but I didn't use any code there
You migh need some basic understanding of Javascript and CSS to make this work for you. You DON'T need AJAX to do this kind of functionality.
Just so you know, I'm not a Javascript or CSS expert. This post is also not intended for the OOP purists, but your constructive comments are most welcome if you think it would help other readers. I just use those technologies occasinaly or on worse situations, have to do front-end designs. So any mistake you see, I hope that you could forgive me. Try to inform me if you see anything wrong. Now to get to the thing:
------------------------------------------------------------
First, let's create an unordered list and its lists which would function as our tabs
[code language="HTML"]
<ul id="NavBar" class="NavBar">
<li><a href="#" id="a"><span>Tab1</span></a></li>
<li><a href="#" id="b"><span>Tab2</span></a></li>
<li><a href="#" id="c"><span>Tab3</span></a></li>
</ul>
[/code]
We will need the id's for the anchor tags later. Next, let's create a div where the contents of each tabs will go.
[code language="HTML"]
<div id="ContentDiv"></div>
[/code]
If you noticed, it doesn't contain anything... Yet.
Next, we create three more divs to put the content of each tabs
[code language="HTML"]
<div id="Tab1Div" class="HiddenDiv">
Content1
</div>
<div id="Tab2Div" class="HiddenDiv">
Content2
</div>
<div id="Tab3Div" class="HiddenDiv">
Content3
</div>
[/code]
You will need a CSS class that looks like this to hide the divs
[code language="CSS"]
.HiddenDiv
{
visibility: hidden;
float: left
}
[/code]
Before anything else, I'd like us to style our lists so we could turn them into actual tabs...
[code language="CSS"]
.NavBar
{
position:relative;
float:left;
width:800px;
padding:0px 0px 0px 0px;
margin:0;
list-style:none;
line-height:1em;
}
.NavBar li
{
float: left;
margin: 0px;
}
/**
* Rounded Edges, if you have the images
*
*/
.NavBar a.Default
{
/*display:block;*/
color: #000;
background: #E1E1E1 url(./../img/left_tab.gif) left top no-repeat;
text-decoration: none;
font-family: arial;
font-size: 14px;
padding-left: 10px
}
.NavBar a.Default span
{
background: url(./../img/right_tab.gif) right top no-repeat;
text-decoration: none;
font-family: arial;
font-size: 14px;
padding-right: 10px
}
.NavBar a.Selected
{
color: #fff;
background: #f90 url(./../img/left_tab_selected.gif) left top no-repeat;
font-family: arial;
font-size:12px;
text-decoration: none;
padding-left: 14px
}
.NavBar a.Selected span
{
color: #fff;
text-decoration: none;
font-family: arial;
font-size: 14px;
background: #f90 url(./../img/right_tab_selected.gif) right top no-repeat;
padding-left: 10px
}
[/code]
I don't have any images to share... I'll leave it up to you to provide that. Alternatively, you could omit the images and just use colors for the background.
Now, we want to be able to change content when we click on a tab. We have to make a sllight modification to our list. But first, type this javascript on the head part of your HTML.
[code language="Javascript"]
<script>
function changeContent(contentToChange, contentToGet, _tabObj)
{
var content1 = document.getElementById(contentToChange);
var content2 = document.getElementById(contentToGet);
//alert(toChangeObj.innerHTML);
content1.innerHTML = content2.innerHTML;
var tabObj = document.getElementById(_tabObj);
if (tabObj != null)
{
resetTabs();
tabObj.className = "Selected";
}
}
function resetTabs()
{
var navBarObj = document.getElementById("NavBar");
var elements = navBarObj.getElementsByTagName("li");
for(var i = 0; i < elements.length; i++)
{
var anchors = elements
.getElementsByTagName("a");
for(var n = 0; n < anchors.length; n++)
{
anchors
.className = "Default";
}
//alert("element.anchor: " + anchor);
}
}
window.onload = function()
{
changeContent('ContentDiv', 'Tab1Div', 'a');
}
</script>
[/code]
and your list to this
[code language="HTML"]
<li><a href="#" onClick="BLOCKED SCRIPTchangeContent('ContentDiv', 'Tab1Div', 'a');" id="a"><span>Tab1</span></a></li>
<li><a href="#" onClick="BLOCKED SCRIPTchangeContent('ContentDiv', 'Tab2Div', 'b');" id="b"><span>Tab2</span></a></li>
<li><a href="#" onClick="BLOCKED SCRIPTchangeContent('ContentDiv', 'Tab3Div', 'c');" id="c"><span>Tab3</span></a></li>
[/code]
Now when you click on a tab, it will reset everything to its "Default" class defined in the CSS above, then it will change the image/backgroun/text(depending on your CSS entry) for the selected tab.
Ok, so I got a little bored...
I was trying to experiment with my firefox browser... I usually switch through tabs by doing ctrl + tab for left to right tab browsing. But I wanted to to it backwards... I just experimented with the keys and got ctrl + shift + tab for reverse tab browsing. You could also apply the same principle when browsing through forms(if you're feeling lazy to use the mouse) by doing tab for forward(left to right) and shift + tab for reverse.
Of course this is for Windows. It's up to you to figure that out in your Mac!
It's my first day of work again. I've done nothing so far but to read through the employee manual which was quite lengthy. It's my first time to work on a big company so some things are still foreign to me. I'm also a little intimidated by the things I read on the employee's manual and it makes me wonder if I'll be able to blog about my work at all.
I still have to clarify things to my supervisor or manager so I won't be sorry in the end hehehe. I hope they won't be too strict in implementing these policies because this is gonna be such a hinder for me to further advance my knowledge. Whew! This is going to be one heck of adjustment that I have to make.
Other than that though... The people seems very nice. I was given a formal introduction to everyone in the office and almost everyone brought back a smile. Perhaps I'll get started on something already in a few days or so...
There's definitely no way I could work on my game while here. Hmmm... Looks like subscribing for a DSL connection at home would be a viable option for next year...