Java Behind Obvious: June 2012

Saturday, June 23, 2012

Accesing files outside a JAR

First, get out of current JAR in JAR’s parent folder:

private String outJarPath = new File(getClass().getProtectionDomain()

.getCodeSource().getLocation().getPath()).getParent();

Then, create the path to you’re file:

outJarPath = outJarPath.replace("%20", " ");

String filePath = outJarPath + File.separator + "files" + File.separator + "file01.txt";

// Do something with the file

Sunday, June 17, 2012

Introducing the HTML5 progress element

One of the great features of HTML5 is the <progress> element. The <progress> element represents the progress of a task, you can use it to display an upload progress per example. To create a dinamic progress bar, we need to combine HTML5 with some JavaScript:

<!DOCTYPE html>

<html>

<head>

function startProgress() {

var progressBar = document.getElementById("progressBar"),

loaded = 0;

function load() {

loaded += 5;

progressBar.value = loaded;

document.getElementById("progress").innerHTML = "Progress: " + loaded + " %";

if(loaded == 100) {

clearInterval(interval);

document.getElementById("progress").innerHTML = "Complete !";

}

};

var interval = setInterval(function(){load();}, 1000);

}

</script>

</head>

<body>

The progress element is currently supported in Firefox, Opera, and Chrome.

</progress>

<button type="button" onclick="startProgress()">Start progress</button>

</body>

</html>

And the output will be:

The < progress > tag is currently supported in Firefox, Opera and Chrome.

value="0" – specifies how much of the task has been completed

max="100" – specifies how much work the task requires in total

For more informations, please visit http://www.w3.org/TR/html5/the-progress-element.html#the-progress-element.

Thursday, June 14, 2012

Introducing the HTML5 datalist element

The HTML5 <datalist> element specifies a list of pre-defined options for an <input> element and it works like an “autocomplete” feature for users:

<!DOCTYPE html>

<html>

<body>

User:

</datalist>

Password:

</form>

</body>

</html>

And the output will be:

The <datalist> tag is currently supported in Firefox and Opera. We can just hope that other browsers will soon support this great feature.

For more informations, please visit http://www.w3.org/TR/html5/the-datalist-element.html#the-datalist-element.

Tuesday, June 12, 2012

Introducing the HTML5 canvas element

The HTML5 <canvas> element is the container for graphics, the place where you can draw graphics using a script. Since JavaScript seems to be the most used scripting language, in this example, we used JavaScript to draw some text inside a gradient rectangle.

<!DOCTYPE html>

<html>

<body>

<canvas width="800" height="600" id="canvas">Your browser does not support the canvas tag.</canvas>

var canvas = document.getElementById('canvas');

var c = canvas.getContext('2d');

var gradient = c.createLinearGradient(0,0,200,200);

gradient.addColorStop(0, "#F0E68C");

gradient.addColorStop(1, "crimson");

c.fillStyle = gradient;

c.fillRect(0,0,550,300);

c.fillStyle = "#fff";

c.font = "italic 30pt Arial";

c.shadowColor = "#000";

c.shadowOffsetX = 0;

c.shadowOffsetY = 0;

c.shadowBlur = 20;

c.fillText("This is a canvas example !", 50,150);

</script>

</body>

</html>

And the output will be:

The <canvas> tag is supported in Internet Explorer 9 (earlier versions does not support the <canvas> element), Firefox, Opera, Chrome and Safari.

For more informations, please visit http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element.

Introducing the HTML5 embed element

In HTML5, the <embed> element defines a container for an external application or interactive content (a plug-in). In this example, we will use it to display a Flash movie:

<!DOCTYPE html>

<html>

<body>

</body>

</html>

And the output will be:

The <embed> tag is supported in Internet Explorer, Firefox, Opera, Chrome and Safari.

type="application/x-shockwave-flash" – specifies the MIME type of the embedded content

For more informations, please visit http://www.w3.org/TR/html5/the-embed-element.html#the-embed-element.

Monday, June 11, 2012

Introducing the HTML5 video element

Forget using the <iframe> element for sharing videos to your friends. There is an easier way to do this. Now, with HTML5 you can use the <video> element:

<!DOCTYPE html>

<html>

<body>

Your browser does not support the video tag.

</video>

</body>

</html>

And the output will be:

The <video> tag is supported in Internet Explorer 9 (earlier versions does not support the <video> element), Firefox, Opera, Chrome and Safari.

poster="poster.jpg" – specifies an image to be shown while the video is downloading, or until the user hits the play button

For more informations, please visit http://www.w3.org/TR/html5/the-video-element.html#the-video-element .

Introducing the HTML5 audio element

We all know that adding music to a website has always been a challenge. Till now, developers had to create or add to their websites an audio player but since HTML5 appears, things gone easier by using the <audio> element:

<!DOCTYPE html>

<html>

<body>

Your browser does not support the audio element.

</audio>

</body>

</html>

And the output will be:

The <audio> tag is supported in Internet Explorer 9 (earlier versions does not support the <audio> element), Firefox, Opera, Chrome and Safari.

autoplay="autoplay" – specifies if the audio will start playing as soon as it is ready

loop="loop" – specifies if the audio will start all over again every time it is finished

For more informations, please visit http://www.w3.org/TR/html5/the-audio-element.html#the-audio-element .