How to make your WordPress blog Mobile Friendly

Making your WordPress blog Mobile Friendly is an easy task.

All what you need to do is to install the wonderful Verve Mobile plugin.

You can install the plugin by:
1. Download the plugin from here.
2. Unzip and place the ‘verve-mobile-plugin’ folder in your ‘wp-content/plugins’ directory.
3. Click the ‘Activate’ link for Verve Mobile on your Plugins page (in the WordPress administration page).

After that you can configure the mobile theme, the number of posts to display per page, the social settings and more from the plugin administrative page as shown:



After doing this, the plugin detects automatically if the device accessing your blog is a mobile device to render the proper mobile interface.

I wish that this tip can be useful.

Resolution of genhtml: ERROR: cannot create directory !

When using the LCOV Visualizer tool to generate the HTML reports from the JsTestDriver lcov coverage (.dat) file (usually jsTestDriver.conf-coverage.dat) using the genhtml command:

genhtml jsTestDriver.conf-coverage.dat

You may find the following error:

mkdir: cannot create directory `': No such file or directory
genhtml: ERROR: cannot create directory !

This error happens because the paths of the JavaScript files are not correct in the (.dat) file. To fix this error, open the (.dat) file, you will find its content as follows:

SF:<<Path1>>
DA:1,1
DA:2,1
DA:5,1
...
end_of_record
SF:<<Path2>>
DA:1,1
DA:2,0
DA:5,1
...
end_of_record

Then edit the SF: values with the correct paths of the JavaScript source (and testing) files and execute the genhtml command again to generate the HTML testing report.

Five Steps to use Apache Cactus with WebSphere Application Server 7

This post illustrates setting up the Apache Cactus on WebSphere 7.0 to test some JPA managers in an existing web application.

Let’s go through the steps, so you can do them directly in maximum 5 minutes:

1. Download the Apache Cactus 1.8.0.zip from here.

2. Place ONLY the following jars in the lib folder of your web application:

    2.1. aspectjrt-1.5.3.jar
    2.2. cactus.core.framework.uberjar.javaEE.14-1.8.0.jar
    2.3. cactus.integration.ant-1.8.0.jar
    2.4. cactus.integration.shared.api-1.8.0.jar
    2.5. cargo-ant-0.9.jar
    2.6. cargo-core-uberjar-0.9.jar
    2.7. commons-codec-1.3.jar
    2.8. commons-httpclient-3.1.jar
    2.9. commons-logging-1.1.jar
    2.10. httpunit-1.6.jar
    2.11. js-14.jar (You will have to download this file manually to avoid OutOfMemory Exception on WebSphere).
    2.12. junit-3.8.2.jar
    2.13. nekohtml-1.9.6.jar
    2.14. org.mortbay.jetty-5.1.9.jar
    2.15. xbean-1.0.3.jar (You will have to download this file manually to avoid OutOfMemory Exception on WebSphere).

3. Copy the following servlets declaration to your web.xml file:

<!-- [Start] Cactus Configuration -->
	<servlet>
	  <servlet-name>ServletRedirector</servlet-name>
	  <servlet-class>org.apache.cactus.server.ServletTestRedirector</servlet-class>
	</servlet>
	<servlet>
	  <servlet-name>ServletTestRunner</servlet-name>
	  <servlet-class>org.apache.cactus.server.runner.ServletTestRunner</servlet-class>
	</servlet>
	<servlet-mapping>
	    <servlet-name>ServletRedirector</servlet-name>
	    <url-pattern>/ServletRedirector</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
	    <servlet-name>ServletTestRunner</servlet-name>
	    <url-pattern>/ServletTestRunner</url-pattern>
	</servlet-mapping>
<!-- [End] Cactus Configuration -->

4. Write your web test cases.

public class TestServlet extends ServletTestCase {
    public void testCreatePerson() {
        try {
            FacesContext  facesContext  = JSFUtil.getFacesContext(config.getServletContext(), request, response);
            PersonManager personManager = (PersonManager) JSFUtil.getManagedBean(facesContext, "personManager");            
            Person person = new Person();
            person.setPersonName("Hazem" + System.currentTimeMillis());
            person.setPersonNationalId(System.currentTimeMillis() + "");
            personManager.createPerson(person);
        } catch (Exception exception) {
            exception.printStackTrace();
            fail(exception.getMessage());
        }
    } 
    // Other test cases ...
}

As you notice, Cactus is much similiar to JUnit, Your web testcases class should just extend the (org.apache.cactus.ServletTestCase).

5. Finally, deploy the web application war to the WAS 7.0, and access your web testcases class through the (ServletTestRunner) by using the following URL:
http://localhost:9080/testWebProject/ServletTestRunner?suite=entities.controller.test.TestServlet.

As you see here, you just set the suite parameter to the fully-qualified name of your web testcases class.

Here is the sample output:

If you want a nicer output, then make sure to include the cactus-report.xsl [This file is included in the sample] directly under the (Web Content) folder of your application, and add the xsl parameter as follows:
http://localhost:9082/testWebProject/ServletTestRunner?suite=entities.controller.test.TestServlet&xsl=cactus-report.xsl.

Here is the cooler output:

I included all of the project source code including the dependency jars in the following zip file for your reference. I wish that this tip can be helpful to you.

Modern Web Architecture: The HTML5 Web Storage

Abstract

One of the most important features of HTML5 is the Web Storage feature. Using the Web Storage feature, the client state can be saved on the browser level without consuming the network bandwidth or the server memory. The Web Storage increases the scalability of the web applications on the server level and on the network level. In this article, I will show you how to work with the HTML5 Web Storage feature.

Difference between the old cookies and the HTML5 Web Storage

Unlike cookies, the HTML5 Web Storage is more scalable. The HTML5 Web Storage content is not transferred between the client and the server per every request. This means using the HTML5 Web Storage, you can store unlimited amount of information on the browser without affecting the network bandwidth. While the web cookies have a limited size, and are transferred between the server and the client per every request.

Checking if the browser is supporting the HTML5 Web Storage

HTML5 Web Storage is supported in most of the modern browsers (IE8, Firefox, Safari, Chrome, and Opera). To check if the Web Storage is supported, check if the web storage objects are defined as follows.

function isStorageSupported() {
	if (typeof(localStorage) === "undefined" || typeof(sessionStorage) === "undefined") {
		alert("Web Storage is no suppored ...");
		return false;
	}
	
	return true;
}

The HTML5 Web Storage Objects

The Web Storage is represented by two main objects the localStorage object and the sessionStorage object. The main difference between them is that the localStorage object is stored in the browser with no expiration date, however, the sessionStorage object is stored in the browser and is removed once the user session ends (i.e., its life time is the user session). It is important to know that there is another difference which is localStorage can work in local mode while the sessionStorage can work only inside a hosted page on the server.

If you try to run the sessionStorage in local mode, you will face an error. For example, the error message in Firefox is:

Operation is not supported

I created an example that illustrates how to use the HTML5 Web Storage objects. In this example, there is a text area “information” field and four buttons for (saving the “information” field value in localStorage, retrieving the stored “information” field value from localStorage, saving the “information” field value in sessionStorage, retrieving the stored “information” field value from sessionStorage).

To store any data in the localStorage object, just add the information in the (key, value) form as follows:

localStorage.key = value;

In the example to store the “information” field data in the localStorage object:

localStorage.information = document.getElementById("information").value;

To retrieve the data from the localStorage object, you can retrieve it using the key as follows:

alert(localStorage.key);

In the example to get the “information” data from the localStorage object:

alert("Data from local storage is: " + localStorage.information);
document.getElementById("information").value = localStorage.information;

Using the sessionStorage object is pretty the same as localStorage. In the example to store the “information” field data in the sessionStorage object:

sessionStorage.information = document.getElementById("information").value;

To get the “information” data from the sessionStorage object:

alert("Data from session storage is: " + sessionStorage.information);
document.getElementById("information").value = sessionStorage.information;

I attach below, the complete example code:

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE>Welcome to the WebStorage test</TITLE>
	
	<SCRIPT type="text/javascript">
	
		function isStorageSupported() {
			if (typeof(localStorage) === "undefined" || typeof(sessionStorage) === "undefined") {
				alert("Web Storage is no suppored ...");
				return false;
			}
			
			return true;
		}
	
		function storeInformationInLocalStorage() {
			if (isStorageSupported()) {
				localStorage.information = document.getElementById("information").value;
			}
		}
		
		function readInformationFromLocalStorage() {
			if (isStorageSupported()) {
				alert("Data from local storage is: " + localStorage.information);
				document.getElementById("information").value = localStorage.information;
			}			
		}		
	
		function storeInformationInSessionStorage() {
			if (isStorageSupported()) {
				sessionStorage.information = document.getElementById("information").value;
			}
		}
		
		function readInformationFromSessionStorage() {
			if (isStorageSupported()) {
				alert("Data from session storage is: " + sessionStorage.information);
				document.getElementById("information").value = sessionStorage.information;
			}				
		}	
	
	</SCRIPT>
</HEAD>
<BODY>
	<label for="information">Enter some information in the textArea: </label><br/>
	<textarea id="information" rows="2" cols="20"></textarea>	
	<br/><br/>

	<INPUT TYPE="button" value="Store in the localStorage" onclick="javascript:storeInformationInLocalStorage()"/>
	<INPUT TYPE="button" value="Read from the localStorage" onclick="javascript:readInformationFromLocalStorage()"/>

	<br/>

	<INPUT TYPE="button" value="Store in the sessionStorage" onclick="javascript:storeInformationInSessionStorage()"/>
	<INPUT TYPE="button" value="Read from the sessionStorage" onclick="javascript:readInformationFromSessionStorage()"/>	
</BODY>
</HTML>

You can delete any of the key/value pairs in the Web Storage using the sessionStorage.removeItem(key) and the localStorage.removeItem(key). If you want to delete all of the key/value pairs, you can use the sessionStorage.clear() and localStorage.clear().

I attach the example for your reference here.

Using JTA inside OpenJPA in the WebSphere 7 Environment (Without EJBs)

In some situations, you may need to manage the JTA transactions manually without using EJBs. In this post, I will show you how to do this.

Let’s see an example of a (persistence.xml) file that uses a JTA data source:

<?xml version="1.0" encoding="UTF-8"?>
<persistence version="1.0" xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">
	<persistence-unit name="SchoolTestJPA" transaction-type="JTA">
		<provider>org.apache.openjpa.persistence.PersistenceProviderImpl</provider>	
		<jta-data-source>jdbc/school</jta-data-source>			
		<class>jpa.beans.Address</class>
		<class>jpa.beans.Person</class>
		<properties>
			<property name="openjpa.TransactionMode" value="managed"/>
    		        <property name="openjpa.ConnectionFactoryMode" value="managed"/>
		</properties>		
	</persistence-unit>
</persistence>

Thanks to the joinTransaction API of the JPA EntityManager, you can make the EntityManager able to join the current active JTA transaction. Let’s see how you can do this.

EntityManagerFactory emf = PersistentManager.getInstance().getEntityManagerFactory();
EntityManager entityManager = emf.createEntityManager();
UserTransaction userTransaction = null;

try {
        
	Context context = new InitialContext();
	userTransaction = (UserTransaction) context.lookup("java:comp/UserTransaction");
	
	userTransaction.begin();

	entityManager.joinTransaction();
        
	
        // Perform the operations here ...
	entityManager.persist(someThing);
	
	userTransaction.commit();
} catch (Exception exception) {
	exception.printStackTrace();
	
	try {
		if (userTransaction != null && userTransaction.getStatus() == Status.STATUS_ACTIVE) {
			userTransaction.rollback();
		}
	} catch (Exception rollbackException) {
		rollbackException.printStackTrace();
	}
} finally {
	if (entityManager != null) {
		entityManager.close();
	}
}

As you see here, by performing the JNDI lookup on the “java:comp/UserTransaction”, you can get the WebSphere JTA UserTransaction and use it instead of the JPA EntityTransaction.

Running Jasmine on the top of the JsTestDriver test runner

In the previous post, I give you a kickstart about the Jasmine JavaScript unit testing framework. In this post, I will show you how to integrate the Jasmine framework with the JsTestDriver. You will combine the best of them, the power of Jasmine pretty syntax and the power of JSTD test runner.

The JsTestDriver is not only a JavaScript unit testing framework but it is also a test runner that can host other JavaScript unit testing frameworks through adapters. The JsTestDriver can host the following JS unit testing frameworks and more:
1. QUnit.
2. Jasmine.
3. YUI UI Test.

First of all to be able to run Jasmine on the top of the JsTestDriver runner, you need to download the Jasmine JSTD adapter from here: https://github.com/ibolmo/jasmine-jstd-adapter.

In order to run Jasmine test suites on the top of JSTD test runner, you need to load the adapter and the source files before the test files as follows in the jsTestDriver.conf file:

server: http://localhost:9876

load:
  - jasmine/lib/jasmine-1.1.0/jasmine.js
  - jasmine/lib/adapter/JasmineAdapter.js  
  - js-src/Basics.js
  - js-test/BasicsSpec.js 

After that you can start the JSTD server, and then run the test cases as usual. I attached below the screenshot of the Jasmine tests on the top of the JSTD test runner.
jstd jasmine screenshot

I attached here the project source for your reference.

Testing JavaScript code using Jasmine (Kickstart)

Jasmine is one of the JavaScript unit testing frameworks. It has a nice advantage that its syntax is readable and a very human friendly. In this post, I will give you a kickstart to help you start working with Jasmine.

First of all, Let’s create a simple JavaScript object that we need to perform some unit testing on it:

/* Basics.js file */
function Basics() {
}

Basics.prototype.add = function(x, y) {
	return x + y;
};

As shown in the Basics.js file, Basics is a simple JavaScript object that contains one method that adds the x and y parameters and finally returns the result to the caller.

To start working with the Jasmine framework, download the framework from http://pivotal.github.com/jasmine/download.html. Make sure that you have the following folder structure after extracting the downloaded zip file:
jasmine structure

You are having three folders and one html file.
1. lib folder: contains the source files of the Jasmine framework.
2. src folder: contains the source JavaScript files that will be tested.
3. spec folder: contains the testing JavaScript files.
4. SpecRunner.html file: is used for running the JavaScript test suites.

Place the Basics.js in the src folder after making sure that you remove all the old contents of the src and the spec folders.

Now, Let’s write the test suite in the BasicsSpec.js file.

describe("Basics", function() {
  var basics = new Basics();  

  it("should be able to make correct addition", function() {
    expect(basics.add(3, 2)).toEqual(5);
  });

});

As we see here, the testing syntax is very human friendly, it means “describe Basics object which should be able to make correct addition”. The describe keyword represents a test suite that can contain one or more specs. Every spec is represented by the it keyword.

Inside the spec, there is an expectation that expects the basics.add(3, 2) is equal to 5. In Jasmine, the expectation is represented by the expect keyword and the equality checking is represented by a matcher called toEquals.

In Jasmine, there are many other built-in matchers; you can find all of them here: https://github.com/pivotal/jasmine/wiki/Matchers.

Finally, do not forget to remove the old source and spec JS includes from the SpecRunner.html and to add the new includes instead:

  <!-- include source files here... -->
  <script type="text/javascript" src="src/Basics.js"></script>  
  
  <!-- include spec files here... -->
  <script type="text/javascript" src="spec/BasicsSpec.js"></script>

After running the SpecRunner.html file, you will find the following screenshot telling you that the test spec runs successfully.

screenshot

I wish this kickstart can be useful for you. For your reference, download the kickstart example from here.