Tag: JavaScript

Categories
GWT Java Javascript Maven

GWT-Hidden-Feature: code coverage

In July 2012 a until now rarely documented feature was added to GWT (related Git-Commit). It’s code coverage on the client side.

How it works

You can activate it via the System-Property “gwt.coverage”. The property-value must contain either all named Java source files separated by comma, or it must point to a text file containing all Java source files; one per line. Now the GWT compiler will instrument the corresponding JavaScript which is based on the named Java source files. Additionally the compiler registers an onUnLoad-Event, which stores the code coverage into LocalStorage of the browser.

Maven-Example

I have a simple GWT-Project which is build via Maven. In the main source (src/main/java/org/jajax/gwt/test/client/MyEntryPoint.java) I have the following file:

?View Code JAVA
1
2
3
4
5
6
7
8
9
10
11
12

package org.jajax.gwt.test.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
 
public class MyEntryPoint implements EntryPoint {
 
   @Override
   public void onModuleLoad() {
       Window.alert("Hello world");
   }
}

Additionally I created a Textfile (target/gwt-coverage-sources.txt) with the following content:

?View Code PLAIN
1

org/jajax/gwt/test/client/MyEntryPoint.java

Now only the configuration of GWT is missing. You have to add the Parameter gwt.coverage=target/gwt-coverage-sources.txt.

?View Code XML
1
2
3
4
5
6
7
8

<plugin>
    <groupid>org.codehaus.mojo</groupid>
    <artifactid>gwt-maven-plugin</artifactid>
    <version>2.7.0</version>
    <configuration>
        <extrajvmargs>-Dgwt.coverage=target/gwt-coverage-sources.txt</extrajvmargs>
    </configuration>
</plugin>

Now if you run you application, you can access the code coverage via JavaScript

?View Code JAVASCRIPT
1

localStorge.getItem("gwt_coverage");

You will get a JSON with the following content:

?View Code JSON
1

{"org/jajax/gwt/test/client/MyEntryPoint.java":{"6":1,"10":1}}

The inner object has for every line as key a value of 0 for a missing coverage or 1 for covered code.

Conclusion

This feature is very interesting, because the alternatives are very rare. The old option to use Emma / Jacoco is not functional anymore with the current versions of Java (1.8), GWT (2.7.0 / 2.8.0-SNAPSHOT), etc. So this feature seems to be a good alternative. Unfortunately there is no tool to extract the code coverage of Unit-Tests or Integration-Tests, but I will release a Tool, which connects the GWT code coverage with Jacoco Reports. So stay tuned!

Categories
Javascript JQuery

Preloading Images with JavaScript

Sometimes in a complex javascript-application you want to display an image when it is fully loaded. Until then you want to show for example a common loading-imageAjax Loading Image. In this case the best solution is to load the image in background, and then show it to the use. For that you can use the Image-Class provided by the browsers.

This class is the used Class at img-Tags. So you have all known properties, like “src”. With the onload-Event you can then check, if the image was fully loaded or not. An example would be:

?View Code JAVASCRIPT
1
2
3

var image = new Image();
$(image).load(function () { alert("picture is fully loaded."); });
image.src="http://www.javahelp.info/wp-content/uploads/2009/11/Bild-80-300x64.png";

In the example I use JQuery for event-handling, because this is more comfortable as the normal event-method of JavaScript.

Categories
Javascript

Calculating with dates in JavaScript

JavaScript provides a class “Date” to work with dates. In this short article I want to give some tips with date calculation.

1. Working with seconds

The easiest way, if you need to calculate with seconds, minutes or hours, is to use the provided methods getTime() or setTime(). Here you will get or you can set the microseconds since 1.1.1970. So if you want to add one hour, just add 3.600.000 microseconds:

?View Code JAVASCRIPT
1
2

var date = new Date();
date.setTime(date.getTime()+3600000);

2. Working with days

If you work with days, the way with getTime()/setTime() is not preferred, because you have to honour the summer / winter time. So calculating with days, months or years should be done using the provided methods getDate() / setDate(), getMonth() / setMonth() or getFullYear() / setFullYear(). These methods are fault tolerant, so you can set the 35. day of a month and the date is correctly converted to the given day in the next month.

?View Code JAVASCRIPT
1
2

var date = new Date(2009,1,25); //date is 2009-02-25
date.setDate(date.getDate()+5); //would change date to 2009-03-02
Categories
Javascript SEAM XHTML

The XHTML and document.write / innerHTML story

If you use XHTML as HTML-Standard, which is recommended, to build your sites and you use JavaScript, you could have problems with document.write. Especially third-party JavaScript extensions like GoogleMaps or CKEditor use document.write to easily inject own JavaScript code.

But this is denied by specification for XHTML-Documents delivered with content-type application/xhtml+xml instead of text/html. You will receive the DOM Exception #7 by calling document.write or while using innerHTML (Example in Safari: “Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7”; in Firefox: uncaught exception: [Exception… “Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLElement.innerHTML]”  nsresult: “0x80004003 (NS_ERROR_INVALID_POINTER)”  location: … ]). The solution is to deliver the Website with content-type “text/html” instead of “application/xhtml+xml”.
Errormessage Safari
In SEAM using Facelets (with JSF) as View, you can set the content-type in the f:view-Tag. This would look like:

?View Code XML
1
2
3
4
5

...
<f :view contentType="text/html">
....
</f>
...
Categories
JQuery

test if html element is visible with JQuery

If you use JQuery you can use the effects for dynamically hide and show html-elements, like boxes and so. But how to test if such a element is currently visible or not? JQuery offers here some selectors, named :hidden and :visible, which can be used. If you combine it with the “is” method, you can easily check the state.

?View Code JAVASCRIPT
1
2
3

alert($("p").is(":visible"));
$("p").hide();
alert($("p").is(":visible"));

This code would output “true”, “false” for a normal p-tag.

Categories
Javascript

CKEditor – events like onComplete

Currently I develop a CMS in Java using Seam and JSF. Target of the CMS is a simple CMS-Structure which can easily be added to a existing Seam-Application and then provide the editable content via simple JSF-Components. Maybe I will later write some more informations about this CMS.

To easily edit text-content I include the Javascript RTE-Texteditor CKEditor. This editor transform a simple Textarea into a full featured RTE-Editor. The simple include-code looks like:

?View Code JAVASCRIPT
1

CKEditor.replace('idoftextarea');

But you can also define some configuration properties. Especially the events are not fully documented yet for version 3.0. A really interesting event is the onComplete-event or other called the instanceReady-event. This event is called if the editor is fully loaded.

A sample definition could be:

?View Code JAVASCRIPT
1
2
3
4
5
6
7

CKEditor.replace('idoftextarea', {
    on: {
        instanceReady: function(ev) { 
            window.alert('I am ready loaded'); 
        }
    }
});

A use case for such an event could be automatic resize of the editor, for example maximize.
You can also define a global event for every CKEDITOR-instance in this way:

?View Code JAVASCRIPT
1
2
3

CKEDITOR.on( 'idoftextarea', function( ev ) {
    window.alert('Im a ready loaded');
});