Customizing Blogger

Introduction

I want to start by blaming Markus Eisele for my misadventures. I was looking at his blog and liked the makeover he gave it. I did find the template he was using, but decided that I would write my own. Well I thought this should be an easy thing to do. I severely underestimated the challenge of making a custom template for myself. It turns out that one of the easiest things turns out to be the hardest. Alright Markus you are off the hook... it may just be my bravado, and belief I can build a better mousetrap that led me down the long lonesome road.

Google is well known for having good and sometimes great APIs for their technology. Blogger is an exception to that rule. There is not one clear cut schema for their layout that I can find ironically using Google itself. You figure with all of the templates and bloggers that this would be covered ad nauseum.  It is not though.

Technologies

I was looking for a simple and elegant framework to make my blog sites look professional, and also make them portable. I had the following requirements:

1. Mature framework
2. Can be found on a CDN
3. Easy to use
4. Simple to implement
5. Well Documented
6. Lots of examples
7. Flexible
8. Customizable
9. Response UI
10. HTML5
11. Portable
12. JSF Compatible
13. Works with NetBeans IDE for Tooling

I looked at a number of frameworks including Foundation, and Bootstrap. I ended up choosing Foundation since it seemed to be easier to use for me. Your milage my vary.

The first thing I wanted to know was what was the minimum required for a template on Blogger. I discovered that are a couple of versions of the template: an HTML 4.01 version (v.1) and an HTML 5 version (v.2) which are somewhat a hybrid mix of XML, and (X)HTML. I published the basic templates on Gist as shown below.

I have a couple of different blogs and found them to be different so I thought I would share my findings.

The next thing I needed to find out was what was the minimal template I would need for using with Foundation. The template below uses a CDN to deliver the required JS/CSS. The template below is the culmination of a lot of work to make it work with the visual tools on Blogger. Remember to backup your existing template before installing mine.

Conclusion

I finally have a working blog site using the new template, and will update all of my sites to use it. My personal non-technical blog site was the first to use the new template. It is still a work in progress, but it looks very nice. Take a peek for yourself at John Yeary Blogger site.

I have compiled a list of links that I found helpful in trying to figure out their layouts and tags in the references below.

References

Tags

• Layouts Data Tags
• Widget Tags for Layouts

Template References

• How to Make a Blogger Template : The Body and APIs - This was a comprehensive blog with lots of great explanations.
• How To Create Blogger Template From Scratch
• Blogger Template Design
• Understanding the Blogger Template - 2 - This is an older article, but useful.
• Template of Doom - Another older useful article.

Additional References

• Bootstrap vs. Foundation: Which Framework is Better?

JSF 2.2 Tip of the Day: JavaScript Popup Window with Dynamic URL Link

Introduction

There are times when you need to have a JavaScript popup window that opens to another URL based on user input.  The JavaScript is usually added to the onclick event on the JSF component. The dynamic link in JSF is more difficult to accomplish since binding the onclick using Expression Language (EL) is determined at page rendering time. As a result, this means that the JavaScript is not dynamic. As a result, the link is not dynamic either.

A Solution

I have created a project that has three examples that demonstrate the different types of JSF links including the dynamic link. The last example includes <f:param /> elements that are appended to the dynamic URL that is generated.

The dynamic example still uses the onclick event, but the JSF action performs a redirect of the newly opened window. Additionally, and of the parameters that are added to the JSF component are converted to query parameters and appended to the redirect URL.

The Apache Maven project created with NetBeans is located on BitBucket here: jsf-link-examples

The project was tested on GlassFish 4 using Mojarra  JSF 2.2, but the technique should work on other application servers and JSF 2.x versions.

Index.xhtml

---

IndexBean.java

---

Cross-Site Scripting (XSS) and Playing with JSoup

Introduction

I have used Beautiful Soup with Python in the past for screen scraping. I was immediately excited at the possibilities. JSoup is a Java API for extracting data, and manipulating the DOM in HTML.

jsoup implements the WHATWG HTML5 specification, and parses HTML to the same DOM as modern browsers do.

I did a quick proof of concept just to see what it would do with my "dirty" code.

It results in an interesting output that could be useful if used properly. If you put in garbage, you will get "less" garbage out. It is better than nothing.

I decided that this still could be really useful especially combined with Hibernate Validators and JSF.

Hibernate Validator - @SafeHtml

I was looking at the Hibernate Validators to see about cleaning up some input from users to prevent XSS issues. I noticed that there was a validator called @SafeHtml(whitelistType=, additionalTags=, additionalTagsWithAttributes=). It uses the JSoup HTML parser.

Alas, I am full of sorrow. I can not seem to get the <code>@SafeHtml</code> annotation to work. GlassFish vomits and complains it can not find it. I even tried to add it to every lib directory in GlassFish without success. Failing to succeed, I tried Tomcat 8 next. Again, nothing but bitterness and disappointment. It just will not get picked up.

I tried looking for a working example of the validator, and didn't find any that worked. I am not sure of the what is going on, but if I can't figure it out. I imagine I am not alone. I just blog about it. ;-)

Undeterred

Well I decided that I didn't need Hibernate anyway! I feel like I should be in Aesop's Fables. I mentioned my Proof of Concept (POC) earlier. I figured I would look at trying to remove some <script /> tags from my code and even encoded them too to see what it would do. The whole point here is to help prevent XSS.

Here is my Apache Maven project on BitBucket: jsoup-cleaner
 
Note: See the actual code for a more complete representation of the actual code I am trying to strip. The Syntaxhighlighter is having issues with the nested script tags. The same applies to the output.

I was surprised by the result actually. It stripped out the <script /> tags, but totally missed the encoded tags. That is a major issue.

Improvements

I was looking for some solutions for the encoded JavaScript issue when I discovered a blog post called Jersey Cross-Site Scripting XSS Filter for Java Web Apps.

This was not exactly what I needed, but it did contain a method which used JSoup and another framework called ESAPI. Enterprise Security API (ESAPI) was developed by OWASP to enhance the security of Enterprise applications. OWASP has a lot more than this framework.  ESAPI can strip out the encoded bits to help prevent XSS.
I shamelessly used the following method from the blog post.
This does effectively remove any encoded <script /> tags from the output. It does not however prevent errors in judgement on the part of the developer. For example taking the results of the output and using them directly in an HTML JavaScript attribute like onmouseover, or onclick.

I created an example project called XSS Scripter's Delight which I demonstrated at the Greenville Java Users Group. It demonstrates what happens when you don't validate inputs from users. The name is satirical, but does demonstrate in a non-malicious way what you can do if you are not careful.

The Apache Maven project developed with NetBeans can be found on Bitbucket here: xss-scripters-delight.

Arquillian Graphene 2: JavaScript Unit Testing Examples

I have been doing work with Arquillian for a while. If you need to do integration and unit testing on your JSF application. This is definitely the path to take. It makes testing so much easier to accomplish.

Recently, I have been trying to use Arquillian Graphene 2 to do JavaScript unit testing. I spent a lot of time trying to get the examples on the Graphene 2 - JavaScript Interface wiki to work. I discovered that they were slightly incorrect and the source of my grief. One of the great things about an Open Source world is that I updated the wiki with the correct information.

I have created a couple of Proof of Concept (POC) projects to demonstrate how to use Graphene to do JS testing. The first example uses Graphene in stand-alone mode. This mode allows you to test your JavaScript outside of a container, but using a browser implementation like: PhantomJS, Chrome, Firefox, or Safari.

The Apache Maven NetBeans 8.0 project can be downloaded from Bitbucket here: graphene-js-poc

You will need to execute this from the command line, or use the JS Unit Test custom goal in NetBeans.

---

---

The next project is simply a combination of the code from the Arquillian Graphene 2 wiki combined into a more complex project. This project is designed to run in a container. In my case, Glassfish is the container of choice. The slickness of this approach becomes quite apparent when you see the application server start-up, execute the tests, and shutdown gracefully.

The Apache Maven NetBeans 8.0 project can be downloaded from Bitbucket here: graphene-poc.

The project includes a JSF example along with testing JavaScript.

---

If you need to do unit testing of your JavaScript, this may be an option to consider. Please make sure you read the wiki and understand the limitations of the approach however. You can use my code as an example to help guide you along the path.

HOWTO: Adding SyntaxHighlighter to Blogger

If you want to use SyntaxHighlighter in your blog, you can simply add the code below to the <head /> element in the template for your Blogger blog.

Multiple File Upload Examples

I received an email today from a developer who was looking for examples of how to do multiple file uploads. I had written a post previously Multiple File Upload Options which detailed some of the options available. The option I recommended was Andrew Valums ajax-upload. The developer had indicated that the servlet I contributed was not working with Internet Explorer correctly. He was correct.

The code that I provided to Andrew Vallums was expecting application/octet-stream. However Internet Explorer and Opera were sending multipart/form-data. This would not work with the servlet example I posted since the handling mechanism is considerably different.

Alan O'Driscoll and I discovered the differences using Wireshark to sniff the packets and see what was being sent over the wire. As a result, I have written a new servlet to handle the differences between browsers.

The example application I wrote has a number of different examples included with minor variations on the theme. The version most folks are interested in is example #6 which uses the ajax-upload, and the new servlet. Here is the Apache Maven project which was developed on NetBeans and tested on GlassFish v 2.1.1.

Here is a link to the Mercurial project: apache-file-upload-ee5.

Here is another resource for file upload plugins: 9 Powerful jQuery File Upload Plugins. I discovered it while I was looking for something else.

MultiContentServlet.java

---

JSF 2.x: Creating a Pure AJAX Application with Apache Tomahawk

Image via Wikipedia

I was working on creating an application to make calls to a MongoDB database. I was having some difficulties getting the REST based services to work. I decided to make sure that my coding principles were sound so I wrote this application.

The application uses Expression Language (EL), and "pure" JavaScript (no JS frameworks).

Disclaimer: There were no-frameworks harmed in the making of this application.

The application makes an AJAX call to a GeoNames web service called http://api.geonames.org/weatherIcaoJSON?ICAO=KGSP which returns the weather information for Greenville-Spartanburg (Greenville, SC) Airport. There are some other examples which demonstrate some of the things you can do in Expression Language (EL), and how to inject it into JavaScript.

The application I believe demonstrates that you can JSF without managed beans, and make separate AJAX calls to populate the page with data. This is not a normal method of creating a JSF application, but does demonstrate the flexibility of the JSF framework.

The application was done using Apache Maven on NetBeans 7.0 IDE. The source can be downloaded here: jsf2-tomahawk2.zip

Requirements

• NetBeans 7.0 (You could use just Maven)
• Apache Maven 2.2+
• Internet Connection (Required if dependencies are not on system)

index.xhtml

---

project.js

---

/*
 * Copyright 2011 Blue Lotus Software, LLC.
 * Copyright 2011 John Yeary.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
var weather;
var weatherJSON;

function ajaxWeather() {
    if (!document.getElementById('panelTab1.content').hasChildNodes()) {
        return;
    }
    var url = 'http://ws.geonames.org/weatherIcaoJSON?ICAO=KGSP';
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        alert('You are using Internet Explorer. Switch to a real browser!');
    }
    xhr.onreadystatechange=function(){
        if (xhr.readyState == 4 && xhr.status == 200){
            weather = xhr.responseText;
            weatherJSON = eval('(' + weather + ')');
            document.getElementById('panelTab1:unavailable').textContent = '';
            document.getElementById('panelTab1:stationName').textContent = weatherJSON.weatherObservation.stationName;
            document.getElementById('panelTab1:ICAO').textContent = weatherJSON.weatherObservation.ICAO;
            document.getElementById('panelTab1:latitude').textContent = weatherJSON.weatherObservation.lat + "\u02da";
            document.getElementById('panelTab1:longitude').textContent = weatherJSON.weatherObservation.lng + "\u02da";
            document.getElementById('panelTab1:temperature').textContent = weatherJSON.weatherObservation.temperature + "\u02daC";
            document.getElementById('panelTab1:humidity').textContent = weatherJSON.weatherObservation.humidity +"%";
            document.getElementById('panelTab1:windSpeed').textContent = weatherJSON.weatherObservation.windSpeed + " knots";
            document.getElementById('panelTab1:windDirection').textContent = weatherJSON.weatherObservation.windDirection +"\u02da"
        }
        if (xhr.readyState == 4 && xhr.status == 503){
            document.getElementById('panelTab1:unavailable').textContent = 'Weather service is unavailable. Please reload page';
        }
    }
    xhr.open('GET', url, true);
    xhr.send();
}

function setText(){
    if (document.getElementById('panelTab6:div1') != null) {
        document.getElementById('panelTab6:div1').textContent = msg;
    }
}

Related articles

• Creating a Maven Web Application Archetype in NetBeans 7.0 (javaevangelist.blogspot.com)
• RichFaces 3.3 (Ajax4JSF) and Apache Myfaces Tomahawk AJAX Example (javaevangelist.blogspot.com)

JSONP (JSON with Padding) In Action

Image via Wikipedia

I just read a great article in Dr Dobbs about JSONP In Action. The article discusses the issue of cross-site scripting in browsers, and how sometimes we need to be able to do it. It is simply not just for hackers.

It is interesting that the src attribute in a <script> tag is side can be changed on the e fly. This opens a number of opportunities. The article demonstrates one way using jQuery to update a result based on jQuery.getJSON(url).

I will need to explore this functionality in a little more detail since I have been exploring the possibilities of MongoDB. This would allow a page to be updated from information contained on servers which are not local, and to display data from multiple sources.