♫ Dance the java with me ♫


Introduction

Je me lance sur ce petit article pour faciliter la tâche aux jeunes loups comme moi qui souhaiteraient maîtriser la création d’interface graphique avec Java ou tout simplement à tout ceux qui souhaitent débuter dans l’interfaçage graphique en Java. Pour cela, il est nécessaire de faire appel à la bibliothèque Swing. Petit rappel : Swing est une API graphique (ou bibliothèque graphique au choix) propre à JAVA.

Learn Java ? Easy as ABC ! (Apprendre Java ? Simple comme bonjour !)

Bon, ici je ne vous ferais pas de cours sur JAVA.

Si :

  1. Vous êtes français.
  2. Vous êtes débutant.

Je vous recommande vivement de lire le cours de cysboy, ou d’acheter le livre ou bien de télécharger le livre pour le mettre sur votre liseuse.

Indiana Jones et le cours de Java perdu

Autrement, je vous conseille vivement de vous partir à l’aventure et trouver sur Google ou Bing ce qui vous convient. Vous vous apercevrez que des cours il y en a à foison.

Vous êtes encore vieux jeu et vous préférez les livres ?

Pour cela je vous recommande d’acheter, de voler, ou d’emprunter « Programmer en Java » (dernière édition) écrit par Claude Delannoy et édité par Eyrolles dans leur collection Best-Of. Certes, c’est un pavé (citez moi un bon livre d’info qui n’est pas un pavé ? 🙄  ) mais son prix vaut largement le coup non ?

Ce livre comprend tout ce qu’on doit savoir en Java et traite aussi Swing et ses fonctionnalités.

Cela dit si vous êtes orienté jeu vidéo je vous conseille de vous procurer « Devenez un petit génie des jeux vidéo » édité par Pearson dans leur collection « Le Programmeur » écrit par Ian Cinnamon. Vous pouvez l’avoir allons disons à tout casser 20 € !

Création de ma fenêtre en Java

Vous aurez vivement besoin d’un IDE pour créer votre programme. Le plus connu pour le java est Eclipse. Je ne me pencherais pas sur le choix de l’IDE, mais je vous conseille de prendre Eclipse pour deux raisons :

  1. La grosse majorité des développeurs utilisent Eclipse.
  2. J’utilise Eclipse et les explications qui vont suivre sont surtout propre à Eclipse. :mrgreen:

Tout d’abord, vous suivez ce tutoriel où tout est bien expliqué (avec de zolies zimages d’ailleurs) afin de créer votre projet et votre classe. Ne copiez pas le code proposé, il est sympa, il marche, vous le verrez partout dans les cours sur Swing, moi je vous propose une autre méthode ici. Et notons aussi que votre package n’a pas à s’appeler obligatoirement « Ihm ». 😉


package Ihm;
//on importe tout le contenu de la bibliothèque swing
import javax.swing.*;
//je suis obligé de faire appel à AWT car j'en ai besoin pour gérer les 'layouts manager'(gestionnaires de placement)
import java.awt.*;
import java.awt.event.*;

//la classe hérite de JFrame (extends)
class mainwindow extends JFrame
//On construit maintenant la fenêtre
{
	//On met ici des variables de type private par exemple
	//constructeur
	public mainwindow()
{			//titre de la fenêtre
			setTitle("Window title");
			//taille de la fenêtre
			setSize(800,600);
			setResizable(true);
			//affiche la fenêtre au centre de l'écran
			setLocationRelativeTo(null);
			// ferme la fenêtre
			//si on ne met pas ça en réalité la fenêtre n'est pas fermée elle a juste "disparue"
			setDefaultCloseOperation(EXIT_ON_CLOSE);

}
}
//classe principale 'window'
public class window {

	/**
	 * @param args
	 */
	//classe principale dite classe main (static void)
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		JFrame window = new mainwindow();
		window.setVisible(true);

	}

}

Deux-trois p’tites remarques à propos du code. Nous avons créé là deux classes : La classe principale

public class window {
public static void main (String[] args)
...
}

La « classe secondaire » qui contient un constructeur)

class mainwindow extends JFrame {
...
public mainwindow()
{
...
}

L’intérêt de faire appel à une classe « secondaire »  ? Cela permet de garder notre classe principale où se trouvera la classe main « intacte » et de créer à coté des classes diverses qui permettront par la suite d’instancier plein d’objets. Bon, je sais, c’est peut être pas la meilleure méthode…D’autre part, je me dois de vous préciser qu’en écrivant import.javax.swing.* vous importez toute la bibliothèque swing (c’est l’étoile qui indique que vous importez tout 😛 ).

Il reste à savoir s’il ne serait pas plus sage d’appeler uniquement ceux dont on a besoin ? (Par exemple, nous utilisons l’objet JFrame qui appartient à l’API Swing, nous aurions pu écrire import.javax.swing.JFrame). Personnellement, moi je choisis la méthode dite « facile », on importe tout ! :mrgreen: Après évidemment si vous n’avez besoin que de JFrame, c’est comme quand il y a 15 personnes on ne va pas se fouler à appeler tout le monde si on a besoin uniquement de Mr Dupont, prenez la deuxième méthode !

En bref : Dans ce code source, vous noterez la création de deux classes dont une qui contient une classe main où on instancie un objet de type mainwindow qui sera en fait notre fenêtre (polymorphisme) en utilisant le constructeur de la seconde classe .

Le bonus

Exceptionnellement, il n’y en aura pas, mais cela étant dit, je vous offre en compensation une fuite d’information : Bientôt sur le lab de nerdycode, une fenêtre en java sous forme d’application 🙂

Clavier virtuel en HTML, Javascript et CSS – Ebauche du clavier

Clavier virtuel

MàJ 09/12/13 : Autre version du clavier virtuel ici.


 
 

<html>
<head>
<title>Clavier virtuel</title>
<script type="text/javascript">
<!--
function verification(entree) {
  var seulement_ceci ="0123456789[]()-+*%/.";
  for (var i = 0; i < entree.length; i++)
   if (seulement_ceci.indexOf(entree.charAt(i))<0 ) return false;
  return true;
 }

 function resultat() {
   var x = 0;
  if (verification(window.document.clavier.affiche.value))
     x = eval(window.document.clavier.affiche.value);
   window.document.clavier.affiche.value = x;
 }

 function ajouter(caracteres) {
   window.document.clavier.affiche.value =
   window.document.clavier.affiche.value + caracteres;
 }

 function fonction_speciale(fonction) {
   if (verification(window.document.clavier.affiche.value)) {
     if(fonction == "sqrt") {
       var x = 0;
     x = eval(window.document.clavier.affiche.value);
     window.document.clavier.affiche.value = Math.sqrt(x);
   }
   if(fonction == "pow") {
     var x = 0;
     x = eval(window.document.clavier.affiche.value);
     window.document.clavier.affiche.value = x * x;
   }
   if(fonction == "log") {
     var x = 0;
     x = eval(window.document.clavier.affiche.value);
     window.document.clavier.affiche.value = Math.log(x);
   }
  } else window.document.clavier.affiche.value = 0
}
//-->
</script>
<style type="text/css">
<!--
.button{
	/*style du paragraphe*/
    font-family:Ubuntu;/*police utilisée*/
    font-size:100%
    width:60px;
    height:60px;
    padding-top:5px; /*permet le centrage vertical*/
    text-align:center;
    color:#222;
    background:#58ACFA;
	background:-moz-linear-gradient(top,#CDE7F5,#58ACFA);/*dégradé du bouton*/
    background:-webkit-gradient(linear, left top, left bottom, from(#CDE7F5), to(#58ACFA));
	/*arrondis du bouton*/
	    -webkit-border-radius:8px;
        -moz-border-radius:8px;
            border-radius:8px;
}
/*over c'est quand la souris passe dessus*/
:hover.button{
    color:#555;
    background:#58D3F7;
    background:-moz-linear-gradient( top, #CEECF5, #58D3F7);
    background:-webkit-gradient( linear, left top, left bottom, from(#CEECF5), to(#58D3F7));
}
/*active c'est quand on clique sur le bouton*/
:active.button{
    color:#555;
	background:url(http://www.google.com) no-repeat;
    background:#444;
    background:-moz-linear-gradient( top, #CEECF5, #58D3F7);
    background:-webkit-gradient( linear, left top, left bottom, from(#CEECF5), to(##58D3F7));
    -webkit-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
       -moz-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
            box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
			}
.affiche { width:517px;
			height:120px;
			text-align:right;
           font-family:System,sans-serif;
           font-size:100%; }
table{
	background:-moz-linear-gradient( top, #BFC2C4, #D6C9C9);
    background:-webkit-gradient( linear, left top, left bottom, from(#CEECF5), to(##58D3F7));
}
-->
</style>
</head>
<body bgcolor="#58ACFA" text="#000000">

<form name="clavier" action="" onSubmit="resultat();return false;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#C0C0C0">
<input type="text" name="affiche" align="right" class="affiche"></td>
</tr><tr>
<td  bgcolor="#E0E0E0">
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td><input type="button" width="60" class="button" value="  A   " onClick="ajouter('A')"></td>
<td><input type="button" width="60" class="button" value="  Z   " onClick="ajouter('Z')"></td>
<td><input type="button" width="60" class="button" value="  E   " onClick="ajouter('E')"></td>
<td><input type="button" width="60" class="button" value="  R  " onClick="ajouter('R')"></td>
<td><input type="button" width="60" class="button" value="  T   " onClick="ajouter('T')"></td>
<td><input type="button" width="60" class="button" value="  Y   " onClick="ajouter('Y')"></td>
<td><input type="button" width="60" class="button" value="  U   " onClick="ajouter('U')"></td>
<td><input type="button" width="60" class="button" value="  I   " onClick="ajouter('I')"></td>
<td><input type="button" width="60" class="button" value="  O   " onClick="ajouter('O')"></td>
<td><input type="button" width="60" class="button" value="  P   " onClick="ajouter('P')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  Q   " onClick="ajouter('Q')"></td>
<td><input type="button" width="60" class="button" value="  S   " onClick="ajouter('S')"></td>
<td><input type="button" width="60" class="button" value="  D   " onClick="ajouter('D')"></td>
<td><input type="button" width="60" class="button" value="  F  " onClick="ajouter('F')"></td>
<td><input type="button" width="60" class="button" value="  G   " onClick="ajouter('G')"></td>
<td><input type="button" width="60" class="button" value="  H   " onClick="ajouter('H')"></td>
<td><input type="button" width="60" class="button" value="  J   " onClick="ajouter('J')"></td>
<td><input type="button" width="60" class="button" value="  K   " onClick="ajouter('K')"></td>
<td><input type="button" width="60" class="button" value="  L   " onClick="ajouter('L')"></td>
<td><input type="button" width="60" class="button" value="  M   " onClick="ajouter('M')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  W   " onClick="ajouter('W')"></td>
<td><input type="button" width="60" class="button" value="  X   " onClick="ajouter('X')"></td>
<td><input type="button" width="60" class="button" value="  C   " onClick="ajouter('C')"></td>
<td><input type="button" width="60" class="button" value="  V   " onClick="ajouter('V')"></td>
<td><input type="button" width="60" class="button" value="  B   " onClick="ajouter('B')"></td>
<td><input type="button" width="60" class="button" value="  N   " onClick="ajouter('N')"></td>
<td><input type="button" width="60" class="button" value="  .   " onClick="ajouter('.')"></td>
<td><input type="button" width="60" class="button" value="  ?   " onClick="ajouter('?')"></td>
<td><input type="button" width="60" class="button" value="  !   " onClick="ajouter('!')"></td>
</tr>
<tr>
<td><input type="reset"  width="60" class="button" value="  Res  "></td>
</tr>
</table>
</td></tr></table>
</form>

</body>
</html>

Dealing with the codes in Internet.


Code snippets, libraries… You could find everything ! But where could you find insteresting contents ? Thus, I ma de a non-exhaustive list of resources you could you use and re-use and re-re-use ! 🙂

According to some webdeveloppers the hi-tech in webdev is :

-HTML 5

– jQuery

-CSS3

HTML5

Introduce the HTML5

What ?? You dunno what is HTML5 ?? Unacceptable ! 😦

HTML5 is the fifth version of HTML (Wouhou ! That wasn’t obvious you know ! :mrgreen: ) and its purpose is to ally HTML4 and XHTML (according to W3C). Besides, it, by comparaison to HTML4, offers new balises as <canvas></canvas>

If YOU want to be more informed have a glance at my older articles about HTML5 (An introduction to begin : this French article easily translatable 😉 ) And you can read this website. 🙂

The big problem : COM-PA-TI-BILITY.

Actually, the big problem nowadays is compatibility of the browsers within a margin of risk to fail of displaying the page bigger than you thought ! Some of you could remark the problem when you decided to work this (WebGL example) with Firefox. I will talk about Internet Explorer because… Although I never use IE, a lot of people do this and… a lot of developers hate IE 6 (because this is not the same syntax in HTML, JS and CSS…).

Regarding IE, the new version (ie Internet Explorer 9) is better suited for HTML 5 standards. I want as a proof this game quite well known, originally for iPhone and Android phones, which was recently adapted into HTML5 (somewhere for the promotion of IE9 obviously) CUT THE ROPE available here : http:// http://www.cuttherope.ie/.

(Note the domain name : . ie 😉 )

This is not the only one to offer a game in HTML5 . Mozilla has its own: BrowserQuest, and Chrome offers « tests » made with WebGL …

All that to say that should not be too worry about compatibility. HTML5 is a prominent technology and powerful, then each browsers tend to adapt and promote HTML5. So it is obvious that browsers are / will be more or less compatible. 😉

JAVASCRIPT

jQuery and the others

Before continuing, I shall say you that jQuery is not the only library you can use… There are so many others libraries ! And…Finally… It is only javascript ! And then you may wonder : « So why have I to choose jQuery ? Why is it SO popular ? » In fact, the library(ies) you will use depends of  what you want to do. e.g : Jules wanna make a slide like fredzone.org (in the main page) because it very tendancy. He will use jQuery. On the contrary, Maurice would make only OOP (Object-oriented programming) for his game. 🙂 He should use Mootools…

Hum, don’t care about this, it is more important to know where to find the libraires and what kind of actions its allow you to do !

Animation

JSTweener

JSTweener is a library of transition management.

Video

Flowplayer

Music

SoundManager

SoundManager 2 makes it easier to play audio using JavaScript.(it explain in the website 😛 )

Keyboard

KeyboardShortcuts

Useful script for shortcuts with keyboard.

Cookies (miam :mrgreen: )

Cookies.js

Script for the cookies use.

I won’t continue there are a lot, I propose the most interessant. Afterwards, you could search on Google. 😉

To conclude, you should be more informed about jQuery, prototype.js and Mootools. 😀

CSS3

The CSS3 completes the perfect webdesigner’s toolbox. I suppose you already know http://www.free-css.com/ (when you type on Google Free CSS, this is the first result :mrgreen: ).

Otherwise, come here.

What about learning ?

You could learn with these three good website (I found them great !) :

BONUS //

THE BIG LIST

(fr) > But any importance what we want is resources 😉

Auteur : nerdyprog

If I made some mistakes, point out these !   😉

Return of the Penguin

Cet article requiert une bonne connexion. This article requires a good connection. 

FRANCAIS //  FRENCH 

Bonjour les amis, après mon premier  article à propos du Manchot (c’était une présentation générale), je me voyais dans l’obligation de vous donner quelques resources ou tutoriels. Ceci étant dit, j’ai trouvé quelques « cours »  présenté sous lka forme d’une page wiki de ensimag, une école à Bordeaux. Le contneu est vraiment intéressant. C’est uniquement en français. Vous pouvez aller ici.

ENGLISH // ANGLAIS 

Hello friends, after my first article about the Penguin (it was a general presentation), I saw me in the obligation of  giving you some resources  or tutorials.  Thus, I found some « courses » presented as a wiki page from ensimag, a school at Bordeaux. The content is really interesting. It’s only in French. You can go here to see the informations.
 BONUS COMME D’HABITUDE // BONUS AS USUAL

Pour les Français  // For the French

For the English // Pour les anglais

Double bonus car c’est un article bilingue ! 😉 (Remarque : ce n’est pas le même bonus que le « double bonus » (en anglais) suivant)

Double bonus because it is a bilingual article ! 😉

En passant

JavaScript: Passing by Value or by Reference… (en)

FUNCTIONS – PASSAGES OF ARGUMENTS.

What I try to do :

In JavaScript, we have functions and we have arguments that we pass into those functions.Here, we try to make what we call passing by reference.
This means that any changes to that variable while in the function are completely separate from anything that happens outside the function.When we’ll use, later, in the script some values, they aren’t dependent to the name of the value.

The javascript code :

 
	//Main function
	function myFunction(a,b,c,z,xpos) 
	{
		//this refers to myFunction
		 this.a = a;
	}
	//We instantiate
	var test= new myFunction ('test');
	var number= new myFunction (2);
        //Displays Contenu de la variable 'test' : test
	alert("Contenu de la variable 'test' : "+test.a);
        //Displays Contenu de la variable 'number' : 2
	alert("Contenu de la variable 'number' : "+number.a);