Tidy Tutorials: February 2009

Bogger Hot Links Widget That displays Summaries of Your Articles

Everyone wants to decorate their blogs with cool stuff. But rather than select widgets produced by blogger that are on a zillion other pages too, how about something new? Something new AND useful that will tempt users to stay on your blog by clicking more links. Described below is the Hot Links widget and how to integrate it with your blog. Have a look at the widget below. In this example it is configured to work with blog justtufun.blogspot.com . You can refresh the page a couple of time to see the widget change. Leave any questions or problems as comments and I will endeavour to answer them.

The widget will show an image if it's available. If not it will show 150 letters of text from the article.

What you need

Account	Description
Blogger account	To create and insert the widget
Free hosting account	Something like googlepages etc, to host your html file

Installing the Widget

Download the single html file here. Extract the hotlinks.html file.
Log in to blogger and at the dashboard click on new posts, settings, layout etc of your blog. Go to the address box in your browser and get your blogid. It should look something like this

http://www.blogger.com/posts.g?blogID=4928424574574982882

What you are after is the big number after 'blogID=', i.e. your blog-id.

Edit the hotlinks.html - near line 39. Replace the blogid with your blog-id you obtained in the previous step. A full listing of the code can be found at the end of this page.

37.  
38.  /************************Edit this section with your details*******************/
39.  //The number of links you want to appear.
40.  nooflinks=5;
41.  //Your blog id
42.  blogid="2004095058158627785";
43.  /******************************************************************************/
44.

Save this file. You can click on the file. It should load the articles.
Upload this page to one of your free sites - example: http://www.mysite.com/hotlinks.html.
Go to layout in your blogger dashboard. Click Add a Gadget and select HTML/JavaScript gadget. Enter the below text into the box. Replace www.mysite.com/hotlinks.html with the place where you uploaded the page. There is no need for a title. Save it.
1. <iframe scrolling="no" 2. frameborder="no" 3. width="100%" 4. src="http://righteous.ninja.googlepages.com/hotlinks.html> 5. </iframe>
The best place to place this Gadet is on top of your 'Blog Posts' in the layout.
Save your layout and now view your blog. It should be all good.

Code Listing

1.  <html>
2.  <head>
3.  <title></title>
4.  <!--****************************************************************************
5.  * Please feel free to use this code whichever way you feel fit. 
6.  * But don't forget that Ping Ching aka Righteous thought about it first!!!! 2008
7.  * ***************************************************************************-->
8.  <style  TYPE="text/css">
9.  .hotlinks_href{
10.      font-family:arial;
11.      font-size:9px;
12.      color:black;
13.      font-weight:bold}
14.  .hotlinks_summary{
15.      font-family:arial;
16.      font-size:9px;
17.      color:black;}
18.  .hotloading{
19.      font-family:arial;
20.      font-size:12px;
21.      font-weight:bold;}
22.  table{
23.    border-collapse:collapse;}    
24.  table td{
25.      vertical-align:top;}
26.  .hotlink_learn{
27.      color:#808080;
28.      font-family:arial;
29.      font-size:8px;}
30.  </style>
31.  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
32.  <script>
33.  google.load("gdata", "1.s")
34.  google.setOnLoadCallback(getMyBlogFeed);
35.  var rc=0;
36.  var hrefs = new Array();
37.  
38.  /************************Edit this section with your details*******************/
39.  //The number of links you want to appear.
40.  nooflinks=5;
41.  //Your blog id
42.  blogid="2004095058158627785";
43.  /******************************************************************************/
44.  
45.  function InitContainers(){
46.      var s="<table cellpadding=\"5\" border='0' width='100%'><tr>";
47.      for (i=0;i<nooflinks;i++)
48.          s+="<td><div id=\"t"+i+"\"><font class='hotloading'>loading...</font></div></td>";
49.      s+="</tr></table>";
50.      document.getElementById("container").innerHTML=s;
51.  }
52.  
53.  function Draw(r, r2, r3, r4){
54.      var text;
55.      if(r3==null)
56.          text="<font class=\"hotlinks_summary\">"+r4+"...</font>";
57.      else
58.          text="<center><a target=\"_top\" href=\""+hrefs[r]+"\"><img border=\"0\" height=\"90px\" src=\""+r3+"\"/></center>"
59.      document.getElementById("t"+rc).innerHTML="<center><a target=\"_top\" href=\""+hrefs[r]+"\" class=\"hotlinks_href\">"+r2+"</a><br/></center>"+text;
60.      rc+=1;
61.  }
62.  
63.  function getMyBlogFeed(){
64.      InitContainers();
65.      var bloggerService = new google.gdata.blogger.BloggerService('GoogleInc-jsguide-1.0');
66.      var feedUri = "http://www.blogger.com/feeds/"+blogid+"/posts/full";
67.      var handleBlogPostFeed = function(postsFeedRoot) {
68.          var blogTitle = postsFeedRoot.feed.getTitle().getText();
69.              for(i=0 ; i<nooflinks ; i++){
70.                  var g=Math.round(postsFeedRoot.feed.getEntries().length*Math.random());
71.                  var postEntry = postsFeedRoot.feed.getEntries()[g]; // only get first post
72.                  var entryUri = postEntry.getSelfLink().getHref();   // post's uri
73.                  hrefs[postEntry.getId().getValue()] = postEntry.getHtmlLink().getHref();
74.                  bloggerService.getBlogPostEntry(entryUri, 
75.                      function(postRoot) {
76.                          var r3,r4;
77.                        var postTitle = postRoot.entry.getTitle().getText(); 
78.                      var text=postRoot.entry.getContent().getText();
79.                          if((s = text.indexOf("src=\"http://")) != -1 &&
80.                               (e = text.substr(s).toLowerCase().indexOf(".jpg\"")) !=-1){
81.                              r3 = text.substring(s+5,s+e+4);
82.                          }
83.                          else
84.                              r3=null;
85.                          r4=text.substring(0,150); //The amount of text to appear instead of an image
86.                          Draw(postRoot.entry.getId().getValue(),postTitle, r3, r4);    
87.                      }, 
88.                      handleError
89.                  );
90.              }
91.          };
92.          var handleError = function(error) {
93.      };
94.      var query = new google.gdata.blogger.BlogPostQuery("http://www.blogger.com/feeds/"+blogid+"/posts/default");
95.      query.setMaxResults(100);
96.      bloggerService.getBlogFeed(query, handleBlogPostFeed, handleError);
97.  }
98.  </script>
99.  </head>
100.  <body topmargin="0" leftmargin="0">
101.  <div id="container"></div>
102.  </body>
103.  </html>
104.

Back to the tutorial trail | Home

Setting up Axis2 With Tomcat 6

Aim
To setup Axis2, do some tests and prepare for the axis tutorial (Web Serivces Example Using axis 2 and Tomcat). Also setup tcpmon required for SOAP debugging. Leave any questions or problems as comments and I will endeavour to answer them.

Assumptions
This article assumes that you have the JDK 1.5 or compatible already installed. Also you have a working and compatible version of tomcat installed and running. Tomcat is running on 8080 for this example.

Versions used in this example

Sofware/Component	Image
Windows XP SP2	N/A
Axis 2 (war)	Axis2-1.4-war.zip
Axis 2 (bin)	Axis2-1.4-bin.zip
tomcat 6	apache-tomcat-6.0.18.zip
JDK 1.5.0	N/A
Axis 1 (for tcpmon)	axis-bin-1_4.zip

Links to these files can be found here.

Installing Axis2

Download the Axis 2 war distribution (axis2-1.4-war.zip) and unzip it. Copy the axis2.war file to the webapps directory in your tomcat installation. After a couple of seconds you should see an axis2 directory automatically created by tomcat.
Go to http://127.0.0.1:8080/axis2. You should see a welcome message with the headings- Services, Validation and Administration.
Click on Administration, login using username 'admin' and password 'axis2.' have a play around. Your axis install is done.
Download the Axis 2 binary (axis2-1.4-bin.zip) distribution and unzip it to a directory. This is where all your tools and libs will be when we go to build a service.
You are now finished.

tcpmon (not required for axis 2, but useful for debugging)

Download Axis 1 ( axis-bin-1_4.tar.gz). I'm doing this so I can get at the axis.jar file that contains tcpmon. I cannot seem to find tcpmon in the new Axis2 jars.
Unzip it to a directory ('D:\axis2-1.4.1-bin\' in this example).
Run the command below substituting the axis.jar directory with the location of your directory/file.

.../anywhere>java -cp D:\axis2-1.4.1-bin\lib\axis.jar org.apache.axis.utils.tcpmon

You should see a window with the tcpmon application. We'll be using this in the Axis2 tutorial

Back to the tutorial trail | Home

Setting Up JWSDP 2 With Tomcat 6

Aim
To set up the Java Web Services Development Pack 2 (JWSDP2) and configure Tomcat. There are versions of tomcat that come pre-configured with JSWDP support for the container. These can be downloaded from the Sun site - but this means a fresh install. We will be using vanilla tomcat install from Apache. Leave any questions or problems as comments and I will endeavour to answer them. The JWSDP is an alternative to using Axis.

Assumption
This article assumes that you have the JDK 1.5 already installed. Also you have a working and compatible version of tomcat installed and running. Tomcat is using port 8080 for this tutorial.

Versions used in this example

Sofware/Component	Image
Windows XP SP2	N/A
JWSDP 2	jwsdp-2_0-windows-i586.exe
tomcat 6	apache-tomcat-6.0.18.zip
Java JDK 1.5.0	N/A

Links to these files can be found here.

Unzip/install JWSDP

You may wish to take a copy of your tomcat's 'bin' directory as files here will get replaced.
Download and install the jwsdp 2 (jwsdp-2_0-windows-i586.exe) make a note of the directory. 'C:\Sun\jwsdp-2.0' for this example. During the installation it will ask you whether you wish to download the tomcat conatiner - say no.
Go to jwsdp-shared\bin directory in your jwsdp install.

Edit the setenv.bat file. make sure all everything is pointing to the right places. This is what my environment looks like.

set JAVA_HOME=D:\jdk1.5.0
set ANT_HOME=C:\Sun\jwsdp-2.0\apache-ant
set ANT_OPTS=-Djava.endorsed.dirs=C:\Sun\jwsdp-2.0\jaxp\lib\endorsed;C:\Sun\jwsdp-2.0\jaxp\lib
set JWSDP_HOME=C:\Sun\jwsdp-2.0
set CATALINA_HOME=C:\apache-tomcat-6.0.18

If you are using tomcat 6 then edit the jwsdpontomcat.bat file and make the change given below. Should be around line 52. basically get rid of the 'server.'

original	<available property="CATALINA_HOME" value="${catalina.home}" file="${catalina.home}/server/lib/catalina.jar" />
modified	<available property="CATALINA_HOME" value="${catalina.home}" file="${catalina.home}/lib/catalina.jar" />

Tomcat six has a slightly altered directory structure from previous versions.

If you are using tomcat 6, edit jwsdpontomcat.xml and make the changes below. Should be round about line 43. Remove the 'server' from this line.

original	<available property="CATALINA_HOME" value="${catalina.home}" file="${catalina.home}/server/lib/catalina.jar" />
modified	<available property="CATALINA_HOME" value="${catalina.home}" file="${catalina.home}/lib/catalina.jar" />

Open a command prompt and 'cd' to the jwsdp-shared\bin directory in your jwsdp install.
Run setenv.bat.
Run jwsdpontomcat.bat. This will basically run ant on the jwsdpontomcat.xml file. It will copy everyting required over to your tomcat directory. At the end you should get the usual 'BUILD SUCCESSFUL' message.
Use a command prompt and cd into your tomcat bin directory. Your catalina.bat will now have been replaced with a new jwsdp version of if, have a look.
Run startup.bat. This should fire up your bootloader. You should see a small window open up in the right bottom hand side of your screen. The LauncheBootstrap will read the launcher.xml from your jswdb-shared\bin directory under your tomcat directory.
Go to your ./log directory under tomcat home and have a look at your 'launcher.server.log.' You may see a few ClassNotFound errors. Fix these by copying these files from your tomcat root directory to your tomcat lib directory.
Tomcat
_|_lib
_|_saaj
_|__|_lib
_|__.__|_*.jar
_|_jaxrpc
_|__|_lib
_|__.__|_*.jar
_|_jwsdp-shared
_|__|_lib
_|__.__|_activation.jar
_|_fastinfoset
_|__|_lib
_|__.__|_fastinfoset.jar
_|_sjsxp
_|__|_lib
_.__.__|_*.jar
Also note that you may need the mail.jar file for MultiPartMime related classes.
Check your launcher.server.log again. All the errors should have disappeared and you are now done.

Test installation

Go to http://127.0.0.1:8080/jaxrpc-HelloWorld/hello?WSDL. You should see an xml file.
http://127.0.0.1:8080/saaj-book/

Back to the tutorial trail | Home

C++ Home	Java/javaEE Home	Hints & Tips
Create Widgets	Javascript/Perl/ Web2 Home

Tidy Tutorials

Bogger Hot Links Widget That displays Summaries of Your Articles

Setting up Axis2 With Tomcat 6

Setting Up JWSDP 2 With Tomcat 6

MVC Example using Struts 2 and Tomcat 6

Web Services Example Using Axis 2 and Tomcat

original	Axis2TomcathelloworldStub stub = new Axis2TomcathelloworldStub();
modified	Axis2TomcathelloworldStub stub = new Axis2TomcathelloworldStub("http://127.0.0.1:8081/axis2/services/axis2tomcathelloworld.axis2tomcathelloworldHttpSoap12Endpoint/");