svg devzone

"I'll let you figure out
which one has been slow in supporting SVG." Tim Berners-Lee

Ouvrir un fichier SVG avec Batik

Sun, 21 Jun

Votre première application Batik

le Java Graphics 2D

Les librairies java Batik s'appuie directement sur Java 2D.
Pour ceux qui connaissent déjà cette A.P.I, la programmation avec les classes de Batik ne poseront aucun problème.

Pour faire simple, nous allons pouvoir utiliser des objets Svg aux travers des classes Java 2D de 2 façons : en utilisant SVG Generator, ou bien en utlisant la structure hiérarchique DOM et plus précisemment SVG DOM API.

Je ne vais pas entrer dans les détails maintenant, mais vous pouvez d'ores et déjà parcourir les exemples donnés sur le site dédié de Batik.

Pour notre première application, nous allons créer un simple (très simple) viewer de fichier Svg

La fenêtre d'affichage

Pour notre premier exemple nous désirons afficher un fichier SVG présent localement.
Pour cela nous nous appuyons sur l'interface java Swing et des objets JFrame et JPanel.

La JFrame définit l'objet global dans lequel "tout" va se passer.
JPanel est le conteneur générique.

The JPanel class provides general-purpose containers for lightweight components.

La zone d'affichage : Canvas

A notre conteneur principal jPanel , nous devons définir une zone d'affichage dans laquelle notre fichier Svg sera chargé.
Cette zone est la partie graphique SVG de notre application et elle s'appuie directement sur le Java 2D Swing JComponent et utilise la classe JSVGCanvas.

The goal of the Batik Swing component module is to provide a Swing component that can used to display SVG documents. With the JSVGCanvas class, you can easily display an SVG document (from a URI or a DOM tree) and allow the user to manipulate it

Un bouton pour ouvrir le fichier

Pour pouvoir parcourir et rechercher notre fichier SVG à charger dans notre zone d'affichage Canvas, nous devons ajouter un bouton à notre fenêtre.
En fait ce bouton est ajouté à notre conteneur principal : le panel.

Ce bouton est associé à un évènement ; on code celui-ci en Java en utilisant la méthode addActionListener.
Il faut pour cela implémenter une interface qui oblige ma présence de certaines méthode dans notre application : implements ActionListener.

La méthode implémentée est : actionPerformed et prend comme argument un objet ActionEvent.
Cet objet-évènement est ensuite analysé :

  • Qui a déclenché l'action (la source)?
  • La source existe t-elle ? (associé à notre bouton) ?
  • Le fichier à ouvrir est-il valide (APPROVE_OPTION) ?

Si tout ces points sont vérifié alors on associe à notre zone d'affichage (canvas), le résultat (fichier SVG).
Tout ceci tiens en quelque ligne de code ...

Le code de notre application

Utliser un IDE ?

Dans l'absolu, le mieux au début est de n'utiliser qu'une simple éditeur de texte tel Notepad++(Windows) ou bien Kwrite ou VIm (Linux).
Cela permet un meilleur apprentissage mais il vous faut aussi savoir modifier votre classpath pour ajouter les lib Batik.

Par contre un IDE tel Eclipse ou Netbeans (les meilleurs selon moi pour la programmation Java), vous apporte un confort de 'debug', d'ajout des librairies (build-path), de complétion de code, de messages d'aide (javadoc) ... etc.

Bref l'un n'empêche pas l'autre, mais je vous conseille l'utilisation d'un IDE lorsque vous aurez les bases dans la gestion de votre système.

Pour notre exemple , nous allons nous aider d'Eclipse.

Création de notre classe

Dans votre éditeur créer un nouveau projet Java.
Notre classe définissant une fenêtre d'application, nous allons en faire une classe hétité de la classe JFrame.

New java project

fenetre de dialogue eclipse : new java project

Extension de classe

fenetre de dialogue eclipse : superclass selection

Ajout d'une interface

fenetre de dialogue eclpise : selection paramètres de la classe java

Nous laissons ici le package par défaut ; nous ne risquons pas de collision de nom avec d'autre classes et méthodes.
De plus , nous pouvons spécifier une méthode static main, puisque notre classe est ici "indépendante".(un seul fichier dans notre projet).

Le code généré

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JFrame;


public class loadFile extends JFrame implements ActionListener {

	@Override
	public void actionPerformed(ActionEvent arg0) {
		// TODO Auto-generated method stub

	}

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// TODO Auto-generated method stub

	}

}

Configurer le "build-path"

Pour pouvoir être interpréter les chemins vers chaque bibliothèque (ici des fichiers .jar) doivent être connu.
Pour cela nous allons rajouter les librairies de Batik et se trouvant sous Batik-version/lib/.
Avec l'IDE Eclipse vous pouvez les ajouter lors de la création de votre projet ou en éditant votre-projet -> build-path -> add External Archives :

Ajouter des archives (jar) externes

fenetre de dialogue eclipse : JAR selection

Codage de notre application

Les objets utilisés

Comme nous l'avons plus haut, nous avons besoin de différentes objets pour créer notre application.
Comme nous avons étendu notre classe avec la classe JFrame, nous ajoutons dans notre constructeur un appel au constructeur parent.
Nous avons besoin également , du conteneur générique (panel) , d'un bouton de contrôle (JButton), d'une zone d'affichage (JSVGCanvas) et d'un objet particulier : JFileChooser.

JFileChooser provides a simple mechanism for the user to choose a file

Code

public class loadFile extends JFrame implements ActionListener {
// ajout des varaibles 
private JButton bt = null;
private JFileChooser file = null;
private JSVGCanvas canvas = null;
private JPanel panel = null;

// constructeur
public loadFile() {
	// appel constructeur parent
	super("mon viewer");
	
	// autres instructions
	}/**end constructeur */
	
}/**end loadFile class */

Remarquez que sous Eclipse l'ajout des "import" se fait automatiquement ... si il sait où les trouver.

import javax.swing.JButton;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JPanel;

Initialisation des variables

Nous initialisons nos variables dans le constructeur, et nous rajoutons quelques informations d'affichage et de comportement à notre fenêtre (this).
Petite remarque : n'hésitez pas à compiler et exécuter votre application (run -> java application) à chaque étape et voir comment réagit celle-ci .

// default on close
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// visible : oui
this.setVisible(true);
// dimension
this.setSize(new Dimension(400,400));
// initialisation des objets
canvas = new JSVGCanvas();
bt = new JButton("ouverture du ficher ...");
file = new JFileChooser();
panel = new JPanel();
panel.setLayout(new BorderLayout());

A noter l'utilisation de BorderLayout qui arrange notre panel en différentes régions distinctes.

A border layout lays out a container, arranging and resizing its components to fit in five regions: north, south, east, west, and center. Each region may contain no more than one component, and is identified by a corresponding constant: NORTH, SOUTH, EAST, WEST, and CENTER. When adding a component to a container with a border layout, use one of these five constants

Autre remarque : la dimension peut-être assignée au canvas.

canvas.setMySize(new Dimension(400,400));

A nouveau voyez les différences de comportement.

Attribuer un comportement au bouton

Nous avons dans notre code actuel un bouton et une méthode actionPerformed.
Nous devons les associer pour qu'il se passent quelquechose lorsque nous agirons sur notre bouton.

En premier lieu, nous utilisons la méthode addActionListener() avec notre JFrame en paramètre

bt.addActionListener(this);

Ajouter un comportement au gestionnaire

Dans notre méthode public actionPerformed nous allons coder ce que nous avons détailler précédemment.

On retrouve la source

Object source = e.getSource(); // param ActionEvent e

On compare avec notre bouton

if(source == bt) {
	...
}

On valide notre recherche

if(file.showOpenDialog(this)==JFileChooser.APPROVE_OPTION){
	....
}

Association du fichier et de notre canvas

File f = file.getSelectedFile();
canvas.setURI(f.toURI().toString());

Et c'est tout

Intégralité du code

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.Dimension2D;
import java.io.File;
import java.io.IOException;
import java.net.MalformedURLException;

import javax.swing.JButton;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JPanel;
import org.w3c.dom.DOMImplementation;
import org.w3c.dom.Document;


import org.apache.batik.swing.JSVGCanvas;


public class ImportSVGFile extends JFrame implements ActionListener {
	// variable
	private JButton bt;
	private JFileChooser file;
	private JSVGCanvas canvas = null;
	private JPanel panel;
	// constructeur
	public ImportSVGFile(){
		super("viewer local files");
		// default on close
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setVisible(true);
		//this.setSize(new Dimension(400,400));
		canvas = new JSVGCanvas();
		bt = new JButton("ouverture du ficher ...");
		file = new JFileChooser();
		panel = new JPanel();
		
		//ajout gestionnaire evenement
		bt.addActionListener(this);
		
		panel.setLayout(new BorderLayout());
		
		// on ajoute les elements au 'panel'
		panel.add("Center",canvas);
		panel.add("North",bt);
		
		// on attache le tout a la frame (enetre)
		this.setContentPane(panel);
		
		canvas.setMySize(new Dimension(400,400));
		
		this.pack();
	}
	
	
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		ImportSVGFile svg = new ImportSVGFile();
	}
	@SuppressWarnings("deprecation")
	@Override
	public void actionPerformed(ActionEvent e) {
		// TODO Auto-generated method stub
		Object source = e.getSource();
		if(source == bt){
			if(file.showOpenDialog(this)==JFileChooser.APPROVE_OPTION) // pop-u dialog
			{
				File f = file.getSelectedFile();
				canvas.setURI(f.toURI().toString());
			}
		}
	}
	
	

}

Maintenant il suffit d'exécuter votre application (run), et pouquoi pas de pointer celle-ci vers un des index.svg des tutoriaux de Pilat.
(@voir introduction à Batik)

ouverture index.svg

fenetre de dialogue eclipse : ouvrir un fichier

affichage du fichier Svg via notre application

fenetre de dialogue eclipse : viewer local files

Et voilà c'est terminé pour notre premiè application java + svg

Articles

svg-developers at yahoo group svg

Re: SVG in html5

Yes I want to understand how much is expected from an editing tool which does the validation and highlightling of all the tags and attributes and provides...

... lire la suite