Merge branch 'master' of https://git.xdrm.io/MTI/javafx-p1

Classes/Category.java

@@ -22,4 +22,5 @@ public enum Category {
 
 	public String getLabel(){ return this.label; }
 	public String getColor(){ return this.color; }
+
 }

Classes/Toast.java

@@ -0,0 +1,63 @@
+package Classes;
+
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
+import javafx.scene.Scene;
+import javafx.scene.layout.StackPane;
+import javafx.scene.paint.Color;
+import javafx.scene.text.Font;
+import javafx.scene.text.Text;
+import javafx.stage.Stage;
+import javafx.stage.StageStyle;
+import javafx.util.Duration;
+
+public final class Toast
+{
+    public static void makeText(Stage ownerStage, String toastMsg, int toastDelay, int fadeInDelay, int fadeOutDelay)
+    {
+        Stage toastStage=new Stage();
+        toastStage.setY(ownerStage.getHeight());
+        toastStage.initOwner(ownerStage);
+        toastStage.setResizable(false);
+        toastStage.initStyle(StageStyle.TRANSPARENT);
+
+        Text text = new Text(toastMsg);
+        text.setFont(Font.font("Verdana", 15));
+        text.setFill(Color.gray(0.1));
+
+        StackPane root = new StackPane(text);
+        root.setStyle("-fx-background-radius: 5; -fx-background-color: rgba(200, 200, 200, 0.5); -fx-padding: 20px;");
+        root.setOpacity(0);
+        
+
+        Scene scene = new Scene(root);
+        scene.setFill(Color.TRANSPARENT);
+        toastStage.setScene(scene);
+        toastStage.show();
+
+        Timeline fadeInTimeline = new Timeline();
+        KeyFrame fadeInKey1 = new KeyFrame(Duration.millis(fadeInDelay), new KeyValue (toastStage.getScene().getRoot().opacityProperty(), 1)); 
+        fadeInTimeline.getKeyFrames().add(fadeInKey1);   
+        fadeInTimeline.setOnFinished((ae) -> 
+        {
+            new Thread(() -> {
+                try
+                {
+                    Thread.sleep(toastDelay);
+                }
+                catch (InterruptedException e)
+                {
+                    // TODO Auto-generated catch block
+                    e.printStackTrace();
+                }
+                   Timeline fadeOutTimeline = new Timeline();
+                    KeyFrame fadeOutKey1 = new KeyFrame(Duration.millis(fadeOutDelay), new KeyValue (toastStage.getScene().getRoot().opacityProperty(), 0)); 
+                    fadeOutTimeline.getKeyFrames().add(fadeOutKey1);   
+                    fadeOutTimeline.setOnFinished((aeb) -> toastStage.close()); 
+                    fadeOutTimeline.play();
+            }).start();
+        }); 
+        fadeInTimeline.play();
+    }
+}

Classes/css/user/ArticleStylesheet.java

@@ -27,10 +27,10 @@ public class ArticleStylesheet{
 			.add("max-width", Context.getInt("article-width"))
 
 			.add("min-height", Context.getInt("article-height"))
-			.add("max-height", Context.getInt("article-height"))
+//			.add("max-height", Context.getInt("article-height"))
 			
 			.add("pref-width", Context.getString("article-width"))
-			.add("pref-height", Context.getString("article-height"))
+//			.add("pref-height", Context.getString("article-height"))
 			
 			// border
 			.add("border-insets", "10")
@@ -38,7 +38,6 @@ public class ArticleStylesheet{
 			.add("border-color", "#ddd")
 			
 			// bg
-			.add("background-insets", "10")
 			.add("background-radius", "3")
 			.add("background-color", "#fff")
 			.apply();

Classes/css/user/ContainerScrollStyleSheet.java

@@ -0,0 +1,41 @@
+package Classes.css.user;
+
+import Classes.css.core.Context;
+import Classes.css.core.Ruleset;
+import javafx.beans.value.ChangeListener;
+import javafx.beans.value.ObservableValue;
+import javafx.geometry.Bounds;
+import javafx.scene.Node;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.layout.FlowPane;
+
+public class ContainerScrollStyleSheet{
+	
+	/* Builds all necessary CSS/layout rules */
+	public ContainerScrollStyleSheet(Node target) throws Exception{
+		
+		/* (1) Set rules */
+		Ruleset.load(target)
+			.add("top", Context.getInt("header-height") )
+			.add("left", Context.getInt("submenu-width") + Context.getInt("menu-width") - 3)
+			.add("right", 0)
+//			.add("pref-height", )
+			.apply();
+		
+		/* (2) Manage dynamic 1st children bounds to it */
+		ScrollPane spane = (ScrollPane) target;
+		
+		spane.layoutBoundsProperty().addListener(new ChangeListener(){
+			
+			@Override
+			public void changed(ObservableValue observable, Object oldValue, Object newValue) {
+				FlowPane child = (FlowPane) spane.getContent();
+				child.setPrefWidth(  spane.getLayoutBounds().getWidth() );
+				child.setPrefHeight( spane.getLayoutBounds().getHeight() );
+				
+			}
+		});
+		
+	}
+
+}

Classes/css/user/ContextBuilder.java

@@ -20,7 +20,7 @@ public class ContextBuilder{
 		/* (3) Colors */
 		Context.bind("main-color", 63, 81, 181);
 		Context.bind("menu-bg", 255, 255, 253);
-		Context.bind("submenu-bg", 255, 0, 0);
+		Context.bind("submenu-bg", 244, 244, 244);
 		
 	}
 

Classes/css/user/SubMenuStyleSheet.java

@@ -18,11 +18,11 @@ public class SubMenuStyleSheet{
 			.add("min-width", Context.getInt("submenu-width"))
 			.add("max-width", Context.getInt("submenu-width"))
 
-			.add("min-height", Context.getInt("screen-height") - Context.getInt("header-height"))
+//			.add("min-height", Context.getInt("screen-height") - Context.getInt("header-height"))
-			.add("max-height", Context.getInt("screen-height") - Context.getInt("header-height"))
+//			.add("max-height", Context.getInt("screen-height") - Context.getInt("header-height"))
 			
 			.add("pref-width", Context.getInt("submenu-width"))
-			.add("pref-height", Context.getInt("screen-height") - Context.getInt("header-height"))
+//			.add("pref-height", Context.getInt("screen-height") - Context.getInt("header-height"))
 
 			.add("background-color", Context.getString("submenu-bg"))
 			.apply();

Interfaces/Observable.java

@@ -3,12 +3,15 @@
  */
 package Interfaces;
 
+import Classes.Event;
+
 /**
  * @author lucas
  *
  */
 public interface Observable {
 
+	public void notifyObservers(Event e);
 	public void addObserver(String key , EventObserver o);
 	public void removeObserver(String key);
 	

controller/Article.java

@@ -1,19 +1,29 @@
 package controller;
 
+import java.awt.Toolkit;
+import java.awt.datatransfer.Clipboard;
+import java.awt.datatransfer.StringSelection;
 import java.io.IOException;
+import java.text.SimpleDateFormat;
 import java.util.ArrayList;
 import java.util.Date;
-
+import java.util.Iterator;
 import Classes.Category;
+import Classes.Toast;
 import Interfaces.EventObserver;
 import javafx.application.Platform;
+import javafx.event.EventHandler;
 import javafx.fxml.FXMLLoader;
+import javafx.scene.Node;
+import javafx.scene.control.TextField;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
+import javafx.scene.input.MouseEvent;
 import javafx.scene.layout.AnchorPane;
 import javafx.scene.layout.FlowPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.text.Text;
+import javafx.stage.Stage;
 import model.NewsModel;
 
 public class Article{
@@ -22,16 +32,46 @@ public class Article{
 	private ArrayList<AnchorPane> items;
 	private FlowPane parent;
 	private EventObserver observer;
+	private AnchorPane root;
+	public Boolean activated = false;
+	private Stage stage;
 	
 	
 	/* Constructor */
-	public Article(FlowPane p_parent, EventObserver observer){
+	public Article(FlowPane p_parent, EventObserver observer, AnchorPane root_layout, Stage stage){
 		this.parent = p_parent;
 		this.items = new ArrayList<AnchorPane>();
 		this.observer = observer;
+		this.root = root_layout;
+		this.stage = stage;
 	}
 	
-	public void addItem(NewsModel model) throws IOException {
+	public synchronized void addAllItem(ArrayList<NewsModel> models) throws IOException {
+		/* (9) Add to the controller local */
+		TextField tx = (TextField) this.root.lookup("#mag_searchbar");
+		
+		int i = 0;
+		for(NewsModel news : models) {
+			
+			tx.textProperty().set("Chargement... "+i+"/"+models.size());
+			
+			this.items.add(this.buildItem(news));
+			
+			i++;
+		}
+		
+		/* (11) Add to parent (graphics) */
+		Platform.runLater(new Runnable(){
+			public void run(){
+				if(Article.this.activated) {
+					Article.this.parent.getChildren().addAll(Article.this.items);
+					tx.textProperty().set("");
+				}
+			}
+		});
+	}
+
+	public AnchorPane buildItem(NewsModel model) throws IOException {
 		
 		/* (1) Load the article_disp.fxml */
 		FXMLLoader loader = new FXMLLoader();
@@ -57,24 +97,36 @@ public class Article{
 		this.gsetImage( model.getImageURL(), item );
 		
 		/* (8) Bind event */
-//		item.setOnMousePressed(new EventHandler<MouseEvent>() {
+		item.setOnMouseClicked(new EventHandler<MouseEvent>() {
-//			@Override
+			@Override
-//            public void handle(MouseEvent event) {
+            public void handle(MouseEvent event) {
-//				Article.this.observer.handleEvent(new Classes.Event(item.getId(),"changeMainLayout"));
+				StringSelection selection = new StringSelection(model.getNewsURL());
-//            }
+			    Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard();
-//		});
+			    clipboard.setContents(selection, selection);
 			    
-		/* (9) Add to the controller local */
+			    Toast.makeText(Article.this.stage, "Adresse de l'article copié", 2000, 200, 200);
-		this.items.add(item);
+			    
+            }
+		});
 		
 		/* (10) On bind au width du parent */
 		item.prefWidthProperty().bind(this.parent.widthProperty());
 		item.maxWidthProperty().bind(this.parent.widthProperty());
 		
-		/* (11) Add to parent (graphics) */
+		return item;
+	}
+	
+	public synchronized void clearContent() {
+		this.items.clear();
 		Platform.runLater(new Runnable(){
 			public void run(){
-				Article.this.parent.getChildren().add(item);
+				Iterator<Node> it = Article.this.parent.getChildren().iterator();
+				while(it.hasNext()) {
+					Node n = it.next();
+					if(n.getId() != "mag_searchbar") {
+						it.remove();
+					}
+				}
 			}
 		});
 	}
@@ -95,7 +147,7 @@ public class Article{
 		Text g_date = (Text) p_parent.getChildren().get(2);
 		
 		/* (2) Update content */
-		g_date.setText(p_date.toString());
+		g_date.setText(new SimpleDateFormat("dd-MM-yyyy HH:mm").format(p_date));
 		
 	}
 
@@ -114,7 +166,11 @@ public class Article{
 		ImageView g_image = (ImageView) p_parent.getChildren().get(0);
 		
 		/* (2) Update title */
+		try {
 			g_image.setImage(new Image(p_uri));
+		}catch(Exception e) {
+			g_image.setImage(new Image("http://lorempicsum.com/futurama/255/200/2"));
+		}
 	}
 	
 	

controller/MainMenu.java

@@ -0,0 +1,47 @@
+package controller;
+
+import java.util.ArrayList;
+
+import Interfaces.EventObserver;
+import javafx.event.EventHandler;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.FlowPane;
+
+public class MainMenu{
+	
+	/* Data */
+	private ArrayList<ImageView> items;
+	private FlowPane parent;
+	private EventObserver observer;
+	
+	
+	/* Constructor */
+	public MainMenu(FlowPane p_parent, EventObserver observer){
+		this.parent   = p_parent;
+		this.items    = new ArrayList<ImageView>();
+		this.observer = observer;
+	}
+
+	public void addItem(String p_name, String p_image_uri) {
+		
+		ImageView menuItem = new ImageView();
+		
+		menuItem.setImage(new Image(p_image_uri));
+		menuItem.setId("header_menu_item_"+p_name);
+		menuItem.getStyleClass().add("header_menu_item");
+		
+		menuItem.setOnMousePressed(new EventHandler<MouseEvent>() {
+			@Override
+            public void handle(MouseEvent event) {
+				MainMenu.this.observer.handleEvent(new Classes.Event(menuItem.getId(), "changeMainLayout"));
+            }
+		});
+		
+		this.items.add(menuItem);
+		// Add to parent
+		parent.getChildren().add(menuItem);
+	}
+
+}

controller/RootLayout.java

@@ -1,10 +1,10 @@
 package controller;
 
 import java.io.IOException;
-import java.util.ArrayList;
 
 import Classes.Category;
 import Classes.SortTypes;
+import Classes.css.user.ContainerScrollStyleSheet;
 import Classes.css.user.ContextBuilder;
 import Classes.css.user.HeaderIconStyleSheet;
 import Classes.css.user.HeaderStyleSheet;
@@ -13,13 +13,25 @@ import Classes.css.user.SubMenuStyleSheet;
 import Interfaces.Event;
 import Interfaces.EventObserver;
 import javafx.application.Application;
+import javafx.application.Platform;
+import javafx.event.EventHandler;
 import javafx.fxml.FXMLLoader;
+import javafx.scene.Node;
 import javafx.scene.Scene;
+import javafx.scene.control.TextField;
+import javafx.scene.input.KeyCode;
+import javafx.scene.input.KeyEvent;
+import javafx.scene.input.MouseEvent;
 import javafx.scene.layout.AnchorPane;
 import javafx.scene.layout.FlowPane;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
 import javafx.stage.Stage;
+import javafx.util.Pair;
+import model.TraductionModel;
 import model.NewsListModel;
 import model.NewsModel;
+import model.WordTraductionModel;
 
 public class RootLayout extends Application implements EventObserver {
 
@@ -27,7 +39,9 @@ public class RootLayout extends Application implements EventObserver {
 	private Scene      root_scene;
 	private AnchorPane root_layout;
 	private FlowPane   main_container;
+	private VBox       main_menu;
 	private Article    articles;
+	private Traduction dico;
 
 
 	@Override
@@ -35,7 +49,9 @@ public class RootLayout extends Application implements EventObserver {
 
 		/* (1) store primary stage + title it */
 		this.root_stage = primary_stage;
-		this.root_stage.setTitle("Inifiny Mail Client");
+		this.root_stage.setTitle("Language learner pro plus 2000");
+		
+		 setUserAgentStylesheet(STYLESHEET_CASPIAN);
 
 		/* (2) Load the root layout*/
 		this.loadRootLayout();
@@ -60,7 +76,8 @@ public class RootLayout extends Application implements EventObserver {
 
 
 		/* (2) Create container */
-		this.articles = new Article(this.main_container, this);
+		this.articles = new Article(this.main_container, this, this.root_layout,this.root_stage);
+		this.dico     = new Traduction(this.main_container, this, this.root_layout);
 
 
 		/* (2) CSS
@@ -78,6 +95,46 @@ public class RootLayout extends Application implements EventObserver {
 		/* (4) #header_icon*/
 		new HeaderIconStyleSheet( this.root_scene.lookup("#header_icon") );
 
+		/* (4) #scroll_container*/
+		new ContainerScrollStyleSheet( this.root_scene.lookup("#scroll_container") );
+
+		VBox subMenuContainer = (VBox) this.root_layout.lookup("#submenu");
+
+		for(Node n : subMenuContainer.getChildren()) {
+			FlowPane p = (FlowPane) n;
+			if(p.getChildren().get(0).getId().toLowerCase().equals("all") ) {
+				p.getStyleClass().add("active");
+			}
+
+			p.setOnMousePressed(new EventHandler<MouseEvent>() {
+				@Override
+	            public void handle(MouseEvent event) {
+
+					// De-active all items before activating current one
+					for( Node n2 : subMenuContainer.getChildren() )
+						n2.getStyleClass().clear();
+
+					// Change category
+					NewsListModel.getInstance().setCategory(Category.valueOf(p.getChildren().get(0).getId().toLowerCase()));
+
+					// Active gui category
+					p.getStyleClass().add("active");
+
+					// Re-launch request
+					NewsListModel.getInstance().query(NewsListModel.getInstance().getQuery());
+	            }
+			});
+		}
+
+
+		this.handleMainLayoutChange("magazines");
+		
+		NewsListModel.getInstance().addObserver("MainClass", this);
+		NewsListModel.getInstance().setCategory(Category.all);
+		NewsListModel.getInstance().setSortType(SortTypes.relevancy);
+
+		TraductionModel.getInstance().addObserver("MainClass", this);
+
 	}
 
 	public void loadRootLayout(){
@@ -96,6 +153,17 @@ public class RootLayout extends Application implements EventObserver {
 			/* (3) Add the scene to the stage */
 			this.root_stage.setScene(this.root_scene);
 
+			//bind events on click fot the menu
+			this.main_menu = (VBox) this.root_layout.lookup("#menu");
+			for (Node c : this.main_menu.getChildren()) {
+				c.setOnMousePressed(new EventHandler<MouseEvent>() {
+					@Override
+		            public void handle(MouseEvent event) {
+						RootLayout.this.handleEvent(new Classes.Event(c.getId(), "changeMainLayout"));
+		            }
+				});
+			}
+
 			/* (4) Show the stage */
 			this.root_stage.show();
 
@@ -112,27 +180,6 @@ public class RootLayout extends Application implements EventObserver {
 
 	@Override
 	public void handleEvent(Event e) {
-		/*
-		HashMap<String,String> headers = new HashMap<String,String>();
-		headers.put("Referer", "http://www.wordreference.com");
-		
-		ApiCall call = new ApiCall("http://api.wordreference.com/1/json/enfr/grin","GET",new Callback() {
-
-			@Override
-			public void onSuccess(JSONObject response) {
-				System.out.println(response.toString());
-				
-			}
-
-			@Override
-			public void onError() {
-				System.out.println("APICall error");
-				
-			}
-			
-		});
-		call.addHeaders(headers);
-		call.send();*/
 
 		switch(e.getEventType()){
 
@@ -143,12 +190,16 @@ public class RootLayout extends Application implements EventObserver {
 			case "NewsQuerySuccess":
 				System.out.println(NewsListModel.getInstance().getNews().size()+" News ont été trouvé");
 
-				// For each news
+				this.articles.clearContent();
-				for( NewsModel news : NewsListModel.getInstance().getNews() ){
+
+				TextField tx = (TextField) this.root_layout.lookup("#mag_searchbar");
+				tx.setDisable(true);
+				
+				if(NewsListModel.getInstance().getNews().size() != 0) {
 
 					try{
 
-						this.articles.addItem( news );
+						this.articles.addAllItem( NewsListModel.getInstance().getNews() );
 
 					}catch(Exception e1){
 
@@ -156,25 +207,144 @@ public class RootLayout extends Application implements EventObserver {
 						e1.printStackTrace();
 
 					}
-					
+					tx.setDisable(false);
 				}
-				if( NewsListModel.getInstance().getNews().size() != 0 )
+
-					System.out.println("La description du premier article est: "+NewsListModel.getInstance().getNews().get(0).getDescription());
+				tx.setDisable(false);
 
 				break;
 
 			case "NewsQueryFailed":
 				System.out.println("une erreur est survenue");
 				break;
+
+			case "WordQueryFailed":
+				System.out.println("une erreur est survenue");
+				break;
+
+			case "WordQuerySuccess":
+
+				System.out.println(TraductionModel.getInstance().getTranslations().size()+" Traductions ont été trouvés");
+				System.out.println(TraductionModel.getInstance().getUsages().size()+" Exemples ont été trouvés");
+
+				this.dico.clearContent();
+
+				TextField tx1 = (TextField) this.root_layout.lookup("#mag_searchbar");
+				tx1.setDisable(true);
+
+				if(TraductionModel.getInstance().getTranslations().size() != 0) {
+
+					try{
+
+						this.dico.addAll( TraductionModel.getInstance().getTranslations() );
+
+					}catch(Exception e1){
+
+						System.out.println("Cannot fetch dico data");
+						e1.printStackTrace();
+
+					}
+			}
+
+				tx1.setDisable(false);
+				break;
+
+			case "changeMagCategory":
+				NewsListModel.getInstance().setCategory(Category.valueOf(e.getObjectId().toLowerCase()));
+				break;
 		}
 
 	}
 
 	public void handleMainLayoutChange(String layout) {
-		NewsListModel.getInstance().addObserver("MainClass", this);
+		this.main_container.getChildren().clear();
-		NewsListModel.getInstance().setCategory(Category.business);
+		FXMLLoader loader;
-		NewsListModel.getInstance().setSortType(SortTypes.publishedAt);
+		
-		NewsListModel.getInstance().query("bitcoin");
+		/* Un-select all menu items but re-select the chosen one */
+		for( Node n : this.main_menu.getChildren() ){
+			n.getStyleClass().clear();
+			n.getStyleClass().add("menu_item");
+			
+			if( n.getId() == layout )
+				n.getStyleClass().add("active");
+		}
+
+		switch(layout) {
+			case "dictionary" :
+				/* (1) Load the root_disp.fxml */
+				loader = new FXMLLoader();
+
+				loader.setLocation(getClass().getResource("/fxml/vocabulary_disp.fxml"));
+
+				/* (2) Load the layout into the scene */
+				try {
+					this.main_container.getChildren().add((AnchorPane) loader.load());
+				} catch (IOException e) {
+					// TODO Auto-generated catch block
+					e.printStackTrace();
+				}
+				break;
+			case "exercises" :
+				/* (1) Load the root_disp.fxml */
+				loader = new FXMLLoader();
+
+				loader.setLocation(getClass().getResource("/fxml/exercise_disp.fxml"));
+
+				/* (2) Load the layout into the scene */
+				try {
+					this.main_container.getChildren().add((AnchorPane) loader.load());
+				} catch (IOException e) {
+					// TODO Auto-generated catch block
+					e.printStackTrace();
+				}
+				break;
+			case "translator" :
+				this.root_layout.lookup("#submenu").setVisible(false);
+
+				this.articles.activated = false;
+				this.dico.activated = true;
+				TextField tx1 = new TextField();
+				tx1.setPromptText("search...");
+				tx1.setId("mag_searchbar");
+				tx1.setOnKeyPressed(new EventHandler<KeyEvent>() {
+
+					@Override
+					public void handle(KeyEvent arg0) {
+						if(arg0.getCode() == KeyCode.ENTER) {
+							TraductionModel.getInstance().query(tx1.textProperty().get());
+						}
+
+					}
+
+				});
+
+				RootLayout.this.main_container.getChildren().add(tx1);
+				
+				break;
+			case "magazines" :
+				this.root_layout.lookup("#submenu").setVisible(true);
+				this.articles.activated = true;
+				this.dico.activated = false;
+				TextField tx = new TextField();
+				tx.setPromptText("search...");
+				tx.setId("mag_searchbar");
+				tx.setOnKeyPressed(new EventHandler<KeyEvent>() {
+
+					@Override
+					public void handle(KeyEvent arg0) {
+						if(arg0.getCode() == KeyCode.ENTER) {
+							NewsListModel.getInstance().query(tx.textProperty().get());
+						}
+
+					}
+
+				});
+
+				this.main_container.getChildren().add(tx);
+				
+				break;
+
+		}
 
 	}
 }

controller/Traduction.java

@@ -0,0 +1,184 @@
+package controller;
+
+import java.io.IOException;
+import java.text.SimpleDateFormat;
+import java.util.ArrayList;
+import java.util.Date;
+import java.util.Iterator;
+
+import Classes.Category;
+import Interfaces.EventObserver;
+import javafx.application.Platform;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Node;
+import javafx.scene.control.TextField;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.FlowPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.text.Text;
+import javafx.util.Pair;
+import model.NewsModel;
+import model.WordTraductionModel;
+
+public class Traduction{
+	
+	/* Data */
+	private ArrayList<AnchorPane> items;
+	private FlowPane parent;
+	private EventObserver observer;
+	private AnchorPane root;
+	public Boolean activated = false;
+	
+	
+	/* Constructor */
+	public Traduction(FlowPane p_parent, EventObserver observer, AnchorPane root_layout){
+		this.parent = p_parent;
+		this.items = new ArrayList<AnchorPane>();
+		this.observer = observer;
+		this.root = root_layout;
+	}
+	
+	public synchronized void addAll(ArrayList<Pair<WordTraductionModel, WordTraductionModel>> models) throws IOException {
+		/* (9) Add to the controller local */
+		TextField tx = (TextField) this.root.lookup("#mag_searchbar");
+		
+		int i = 0;
+		for(Pair<WordTraductionModel, WordTraductionModel> news : models) {
+			
+			tx.textProperty().set("Chargement... "+i+"/"+models.size());
+			
+			this.items.add(this.buildItem(news.getKey()));
+			
+			i++;
+		}
+		
+		/* (11) Add to parent (graphics) */
+		Platform.runLater(new Runnable(){
+			public void run(){
+				if(Traduction.this.activated) {
+					Traduction.this.parent.getChildren().addAll(Traduction.this.items);
+					tx.textProperty().set("");
+				}
+			}
+		});
+	}
+
+	public AnchorPane buildItem(WordTraductionModel model) throws IOException {
+		
+		/* (1) Load the article_disp.fxml */
+		FXMLLoader loader = new FXMLLoader();
+		loader.setLocation(getClass().getResource("/fxml/article_disp.fxml"));
+		
+		/* (2) Get the loaded item*/
+		AnchorPane item = (AnchorPane) loader.load();
+		
+		/* (3) Set content */
+		this.gsetContent( model.getSense(), item );
+		
+		/* (4) Set date */
+		//this.gsetDate( model.getDate(), item );
+		
+		/* (5) Set title */
+		HBox headerContainer = (HBox) item.getChildren().get(3);
+		this.gsetTitle( model.getUsage(), headerContainer );
+		
+		/* (6) Set tags */
+		this.gsetTags( model.getPOS(), headerContainer );
+		
+		/* (7) Set image */
+		//this.gsetImage( model.getImageURL(), item );
+		
+		/* (8) Bind event */
+//		item.setOnMousePressed(new EventHandler<MouseEvent>() {
+//			@Override
+//            public void handle(MouseEvent event) {
+//				Article.this.observer.handleEvent(new Classes.Event(item.getId(),"changeMainLayout"));
+//            }
+//		});
+		
+		/* (10) On bind au width du parent */
+		item.prefWidthProperty().bind(this.parent.widthProperty());
+		item.maxWidthProperty().bind(this.parent.widthProperty());
+		
+		return item;
+	}
+	
+	public void clearContent() {
+		this.items.clear();
+		Platform.runLater(new Runnable(){
+			public void run(){
+				Iterator<Node> it = Traduction.this.parent.getChildren().iterator();
+				while(it.hasNext()) {
+					Node n = it.next();
+					if(n.getId() != "mag_searchbar") {
+						it.remove();
+					}
+				}
+			}
+		});
+	}
+	
+	
+	
+	public void gsetContent(String p_content, AnchorPane p_parent){
+		/* (1) Get node */
+		Text g_content = (Text) p_parent.getChildren().get(1);
+		
+		/* (2) Update content */
+		g_content.setText(p_content);		
+	}
+	
+	
+	public void gsetDate(Date p_date, AnchorPane p_parent){
+		/* (1) Get node */
+		Text g_date = (Text) p_parent.getChildren().get(2);
+		
+		/* (2) Update content */
+		g_date.setText(new SimpleDateFormat("dd-MM-yyyy HH:mm").format(p_date));
+		
+	}
+
+	
+	public void gsetTitle(String p_title, HBox p_parent){
+		/* (1) Get node */
+		Text g_title = (Text) p_parent.getChildren().get(0);
+		
+		/* (2) Update title */
+		g_title.setText(p_title);
+	}
+
+	
+	public void gsetImage(String p_uri, AnchorPane p_parent){
+		/* (1) Get node */
+		ImageView g_image = (ImageView) p_parent.getChildren().get(0);
+		
+		/* (2) Update title */
+		try {
+			g_image.setImage(new Image(p_uri));
+		}catch(Exception e) {
+			g_image.setImage(new Image("http://lorempicsum.com/futurama/255/200/2"));
+		}
+	}
+	
+	
+	public void gsetTags(String p_tags, HBox p_parent) throws IOException{
+		
+		/* (1.1) Create the container */
+		FXMLLoader loader = new FXMLLoader();
+		loader.setLocation(getClass().getResource("/fxml/article_tag_disp.fxml"));
+		
+		/* (1.2) Load the tag elements */
+		FlowPane g_tag = (FlowPane) loader.load();
+		Text g_tagText = (Text)     g_tag.getChildren().get(0);
+		
+		/* (1.3) Update the tag name */
+		g_tagText.setText(p_tags);
+		
+		/* (1.5) Ajout au parent*/
+		p_parent.getChildren().add(g_tag);
+			
+	}
+	
+}

css/container.css

@@ -0,0 +1,26 @@
+@import "./constants.css";
+
+
+
+#mag_searchbar{
+	-fx-border-radius: 0 0 1 0;
+	-fx-background-color: #ffffff;
+	-fx-border-color: #eeeeee;
+	
+	-fx-background-radius: 0;
+	-fx-border-radius: 0;
+	
+	-fx-pref-height: 26;
+	-fx-pref-width: 759;
+	-fx-margin: 20 0 20 0;
+}
+
+#vocab > * > *{
+	-fx-background-color: #ffffff;
+	-fx-border-width: 0 0 1 0;
+	-fx-border-color: #dddddd;
+}
+
+#vocab{
+	-fx-cursor: normal;
+}

css/menu.css

@@ -27,6 +27,22 @@
 	-fx-min-height: -vn-header-height;
 	-fx-max-height: -vn-header-height;
 	
-	-fx-background-color: #fffffd;
+	-fx-background-color: #ffffff;
 
 }
+
+.menu_item{
+	-fx-border-width:  0 0 1 0;
+	-fx-border-color: #eeeeee;
+}
+
+.menu_item.active{
+	-fx-background-color: #eeeeee;
+}
+
+#menu{
+	-fx-background-color: #ffffff;
+	
+	-fx-border-width: 0 1 0 0;
+	-fx-border-color: #eeeeee;
+}

css/submenu.css

@@ -0,0 +1,11 @@
+@import "./constants.css";
+
+
+#submenu{
+	-fx-background-color: #ff0000;
+}
+
+#submenu .active{
+	-fx-fill: #000000;
+	-fx-font-weight: bold;
+}

fxml/exercise_disp.fxml

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.Cursor?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.RadioButton?>
+<?import javafx.scene.control.ToggleGroup?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.text.Text?>
+
+<AnchorPane id="exerc" fx:id="exerc" prefHeight="228.0" prefWidth="620.0" style="-fx-border-insets: 10; -fx-background-insets: 10; -fx-background-color: #ffffff; -fx-background-radius: 3; -fx-border-radius: 3; -fx-border-color: #ddd;" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
+	   <opaqueInsets>
+	      <Insets />
+	   </opaqueInsets>
+	   <children>
+                <Text layoutX="251.0" layoutY="39.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 20;" text="Exercise #1" />
+                <Button layoutX="536.0" layoutY="194.0" mnemonicParsing="false" style="-fx-background-color: #ffffff; -fx-border-width: 1; -fx-border-color: #aaaaaa; -fx-text-fill: #000000; -fx-border-radius: 3; -fx-background-radius: 3;" text="Check" />
+                <Text layoutX="47.0" layoutY="96.0" strokeType="OUTSIDE" strokeWidth="0.0" text="&quot;I am doing my homework&quot; is affirmative" />
+                <Text layoutX="47.0" layoutY="118.0" strokeType="OUTSIDE" strokeWidth="0.0" />
+                <Text layoutX="105.0" layoutY="129.0" strokeType="OUTSIDE" strokeWidth="0.0" text="&quot;Where do you live ?&quot; is passive" />
+                <Text layoutX="33.0" layoutY="161.0" strokeType="OUTSIDE" strokeWidth="0.0" text="&quot;She had a nightmare&quot; happens in the past" />
+                <Text layoutX="59.0" layoutY="191.0" strokeType="OUTSIDE" strokeWidth="0.0" text="&quot;She had a dream ?&quot; is a valid question" />
+                <Text layoutX="317.0" layoutY="67.0" strokeType="OUTSIDE" strokeWidth="0.0" text="True" />
+                <Text layoutX="352.0" layoutY="68.0" strokeType="OUTSIDE" strokeWidth="0.0" text="False" />
+      <RadioButton layoutX="327.0" layoutY="83.0" mnemonicParsing="false" selected="true">
+         <toggleGroup>
+            <ToggleGroup fx:id="g1" />
+         </toggleGroup>
+      </RadioButton>
+      <RadioButton layoutX="353.0" layoutY="83.0" mnemonicParsing="false" toggleGroup="$g1" />
+      <RadioButton layoutX="327.0" layoutY="117.0" mnemonicParsing="false" selected="true">
+         <toggleGroup>
+            <ToggleGroup fx:id="g2" />
+         </toggleGroup>
+      </RadioButton>
+      <RadioButton layoutX="353.0" layoutY="117.0" mnemonicParsing="false" toggleGroup="$g2" />
+      <RadioButton layoutX="327.0" layoutY="148.0" mnemonicParsing="false" selected="true">
+         <toggleGroup>
+            <ToggleGroup fx:id="g3" />
+         </toggleGroup>
+      </RadioButton>
+      <RadioButton layoutX="353.0" layoutY="148.0" mnemonicParsing="false" toggleGroup="$g3" />
+      <RadioButton layoutX="327.0" layoutY="178.0" mnemonicParsing="false" selected="true">
+         <toggleGroup>
+            <ToggleGroup fx:id="g4" />
+         </toggleGroup>
+      </RadioButton>
+      <RadioButton layoutX="353.0" layoutY="178.0" mnemonicParsing="false" toggleGroup="$g4" />
+	   </children>
+             <cursor>
+                <Cursor fx:constant="HAND" />
+             </cursor>
+</AnchorPane>

fxml/model.fxml

@@ -2,17 +2,19 @@
 
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.Cursor?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.ScrollPane?>
+<?import javafx.scene.control.TextField?>
 <?import javafx.scene.image.Image?>
 <?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.FlowPane?>
-<?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.Pane?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 <?import javafx.scene.text.Text?>
 
-<AnchorPane fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700.0" prefWidth="1280.0" style="-fx-background-color: #edf0f5;" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
+<AnchorPane fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700.0" prefWidth="1450.0" style="-fx-background-color: f4f4f4" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
    <children>
       <AnchorPane id="header" fx:id="header" layoutX="200.0" maxHeight="40.0" maxWidth="1280.0" prefHeight="40.0" prefWidth="1080.0" stylesheets="@../css/header.css" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
          <children>
@@ -21,10 +23,18 @@
       </AnchorPane>
       <AnchorPane id="menu_wrapper" fx:id="menu_wrapper" maxHeight="700.0" maxWidth="251.0" minHeight="680.0" minWidth="40.0" prefHeight="700.0" prefWidth="234.0" stylesheets="@../css/menu.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
          <children>
-            <Pane id="header_icon" fx:id="header_icon" maxHeight="40.0" minHeight="40.0" minWidth="40.0" prefHeight="40.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
+            <Pane id="header_icon" fx:id="header_icon" maxHeight="40.0" minHeight="40.0" minWidth="40.0" prefHeight="40.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+               <children>
+                  <ImageView fitHeight="35.0" fitWidth="32.0" layoutX="10.0" layoutY="9.0" pickOnBounds="true" preserveRatio="true">
+                     <image>
+                        <Image url="@../src/icon.png" />
+                     </image>
+                  </ImageView>
+                  <Text fill="WHITE" layoutX="57.0" layoutY="34.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 25; -fx-font-family: Lato;" text="Lingo Pro" />
+               </children></Pane>
             <VBox id="menu" fx:id="menu" layoutX="50.0" layoutY="40.0" prefHeight="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="50.0">
                <children>
-                  <FlowPane alignment="CENTER_LEFT" prefHeight="114.0" prefWidth="234.0" style="-fx-border-width: 0 0 1 0; -fx-border-color: #fafafa;">
+                  <FlowPane id="profile" alignment="CENTER_LEFT" prefHeight="114.0" prefWidth="234.0" style="-fx-border-width: 0 0 1 0; -fx-border-color: #eeeeee;">
                      <children>
                         <ImageView fitHeight="57.0" fitWidth="56.0" pickOnBounds="true" preserveRatio="true">
                            <image>
@@ -36,11 +46,11 @@
                         </ImageView>
                         <Pane prefHeight="56.0" prefWidth="125.0">
                            <children>
-                              <Text fill="#838383" layoutX="4.0" layoutY="40.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Designer of App">
+                              <Text fill="#838383" layoutX="4.0" layoutY="40.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Niveau B2">
                                  <font>
                                     <Font name="Lato Regular" size="11.0" />
                                  </font></Text>
-                              <Text fill="#545454" layoutX="4.0" layoutY="23.0" strokeType="OUTSIDE" strokeWidth="0.0" text="ADRIEN MARQUES" wrappingWidth="120.7770004272461">
+                              <Text fill="#545454" layoutX="4.0" layoutY="23.0" strokeType="OUTSIDE" strokeWidth="0.0" text="nom utilisateur" wrappingWidth="120.7770004272461">
                                  <font>
                                     <Font name="Lato Regular" size="13.0" />
                                  </font>
@@ -49,60 +59,300 @@
                         </Pane>
                      </children>
                   </FlowPane>
+                  <FlowPane id="dictionary" alignment="CENTER" columnHalignment="CENTER" layoutX="10.0" layoutY="124.0" prefHeight="58.0" prefWidth="234.0" styleClass="menu_item">
+                     <children>
+                        <ImageView fitHeight="20.0" fitWidth="20.0" pickOnBounds="true" preserveRatio="true">
+                           <FlowPane.margin>
+                              <Insets right="20.0" />
+                           </FlowPane.margin>
+                           <image>
+                              <Image url="@../src/menu/dictionary.png" />
+                           </image>
+                        </ImageView>
+                        <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Vocabulaire" />
+                     </children>
+                  </FlowPane>
+                  <FlowPane id="exercises" alignment="CENTER" columnHalignment="CENTER" layoutX="10.0" layoutY="182.0" prefHeight="58.0" prefWidth="234.0" styleClass="menu_item">
+                     <children>
+                        <ImageView fitHeight="20.0" fitWidth="20.0" pickOnBounds="true" preserveRatio="true">
+                           <FlowPane.margin>
+                              <Insets right="20.0" />
+                           </FlowPane.margin>
+                           <image>
+                              <Image url="@../src/menu/exercises.png" />
+                           </image>
+                        </ImageView>
+                        <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Excercices" />
+                     </children>
+                  </FlowPane>
+                  <FlowPane id="translator" alignment="CENTER" columnHalignment="CENTER" layoutX="10.0" layoutY="240.0" prefHeight="58.0" prefWidth="234.0" styleClass="menu_item">
+                     <children>
+                        <ImageView fitHeight="20.0" fitWidth="20.0" pickOnBounds="true" preserveRatio="true">
+                           <FlowPane.margin>
+                              <Insets right="20.0" />
+                           </FlowPane.margin>
+                           <image>
+                              <Image url="@../src/menu/translator.png" />
+                           </image>
+                        </ImageView>
+                        <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Traducteur" />
+                     </children>
+                  </FlowPane>
+                  <FlowPane id="magazines" alignment="CENTER" columnHalignment="CENTER" layoutX="10.0" layoutY="240.0" prefHeight="58.0" prefWidth="234.0" styleClass="menu_item">
+                     <children>
+                        <ImageView fitHeight="20.0" fitWidth="20.0" pickOnBounds="true" preserveRatio="true">
+                           <FlowPane.margin>
+                              <Insets right="20.0" />
+                           </FlowPane.margin>
+                           <image>
+                              <Image url="@../src/menu/magazines.png" />
+                           </image>
+                        </ImageView>
+                        <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Magazines" />
+                     </children>
+                  </FlowPane>
                </children>
             </VBox>
          </children>
       </AnchorPane>
-      <VBox id="submenu" fx:id="submenu" layoutX="234.0" layoutY="50.0" prefHeight="650.0" prefWidth="194.0" style="-fx-background-color: white;" AnchorPane.bottomAnchor="0.0" AnchorPane.topAnchor="50.0" />
+      <VBox id="submenu" fx:id="submenu" layoutX="234.0" layoutY="50.0" prefWidth="200.0" stylesheets="@../css/submenu.css" AnchorPane.bottomAnchor="0.0" AnchorPane.topAnchor="50.0">
-      <FlowPane id="container" fx:id="container" alignment="TOP_CENTER" columnHalignment="CENTER" layoutX="421.0" layoutY="50.0" prefWrapLength="1000.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="429.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="50.0">
          <children>
-            <AnchorPane fx:id="card1" prefHeight="118.0" style="-fx-border-insets: 10; -fx-background-insets: 10; -fx-background-color: #fff; -fx-background-radius: 3; -fx-border-radius: 3; -fx-border-color: #ddd;">
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" prefHeight="35.0" prefWidth="234.0">
+               <children>
+                  <Text fx:id="all" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Show all" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/all.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" top="25.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="30.0" layoutY="60.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="science" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Science" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/science.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="30.0" layoutY="95.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="business" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Business" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/business.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="30.0" layoutY="130.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="entertainment" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Entertainment" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/entertainment.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="165.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="gaming" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Gaming" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/gaming.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="200.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="health" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Health" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/health.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="30.0" layoutY="235.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="music" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Music" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/music.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="270.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="sport" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Sport" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/sport.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="305.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="nature" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Nature" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/nature.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="340.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="economics" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Economics" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/economics.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="375.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="politics" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Politics" />
+                  <ImageView fx:id="politics" fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/politics.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+            <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="410.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+               <children>
+                  <Text fx:id="technology" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Technology" />
+                  <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+                     <FlowPane.margin>
+                        <Insets left="15.0" />
+                     </FlowPane.margin>
+                     <image>
+                        <Image url="@../src/submenu/technology.png" />
+                     </image>
+                  </ImageView>
+               </children>
+               <VBox.margin>
+                  <Insets left="20.0" right="20.0" />
+               </VBox.margin>
+            </FlowPane>
+         </children></VBox>
+      <ScrollPane id="scroll_container" fx:id="scroll_container" hbarPolicy="NEVER" pickOnBounds="false" prefHeight="651.0" prefWidth="1015.0" style="-fx-background-color: transparent;" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="49.0">
+         <content>
+            <FlowPane id="container" fx:id="container" alignment="TOP_CENTER" columnHalignment="CENTER" prefHeight="650.0" prefWrapLength="1000.0" stylesheets="@../css/container.css">
+               <children>
+                  <AnchorPane id="vocab" fx:id="card1" prefHeight="228.0" prefWidth="620.0" style="-fx-border-insets: 10; -fx-background-insets: 10; -fx-background-color: #ffffff; -fx-background-radius: 3; -fx-border-radius: 3; -fx-border-color: #ddd;">
       			   <opaqueInsets>
       			      <Insets />
       			   </opaqueInsets>
       			   <children>
-			      <ImageView fitHeight="56.0" fitWidth="56.0" layoutX="-28.0" layoutY="38.0" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="20.0">
+                        <FlowPane columnHalignment="CENTER" layoutX="51.0" layoutY="54.0" prefHeight="149.0" prefWidth="160.0" vgap="10.0">
-			         <image>
-			            <Image url="@../src/menu_profile_1.png" />
-			         </image>
-			      </ImageView>
-			      <Text fill="#808080" fontSmoothingType="LCD" layoutX="118.0" layoutY="78.8439998626709" strokeType="OUTSIDE" strokeWidth="0.0" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere odio ut sem vestibulum, at tempus neque luctus. Curabitur quis tortor bibendum" wrappingWidth="653.0" AnchorPane.leftAnchor="96.0" AnchorPane.topAnchor="50.0">
-			         <font>
-			            <Font name="Lato Regular" size="12.0" />
-			         </font>
-			      </Text>
-			      <Text fill="#757575" layoutX="611.0" layoutY="37.0" strokeType="OUTSIDE" strokeWidth="0.0" text="10 days ago" textAlignment="RIGHT" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="20.0">
-			         <font>
-			            <Font name="Lato Bold" size="12.0" />
-			         </font>
-			      </Text>
-			      <HBox layoutX="118.0" layoutY="39.0" prefHeight="21.0" prefWidth="200.0" AnchorPane.leftAnchor="96.0" AnchorPane.topAnchor="20.0">
                            <children>
-			            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Some Article Title">
+                              <TextField promptText="manger" />
-			               <font>
+                              <TextField layoutX="10.0" layoutY="10.0" promptText="voyager" />
-			                  <Font name="Lato Bold" size="17.0" />
+                              <TextField layoutX="10.0" layoutY="36.0" promptText="dormir" />
-			               </font>
+                              <TextField layoutX="10.0" layoutY="62.0" promptText="apprendre" />
-			            </Text>
-                        <FlowPane alignment="CENTER" columnHalignment="CENTER" prefHeight="20.0" style="-fx-background-color: red; -fx-background-radius: 3;">
-                           <children>
-                              <Text fill="WHITE" fontSmoothingType="LCD" strokeType="OUTSIDE" strokeWidth="0.0" text="nature">
-                                 <font>
-                                    <Font name="Lato Regular" size="14.0" />
-                                 </font>
-                                 <FlowPane.margin>
-                                    <Insets />
-                                 </FlowPane.margin>
-                              </Text>
                            </children>
-                           <HBox.margin>
-                              <Insets left="10.0" />
-                           </HBox.margin>
-                           <padding>
-                              <Insets left="5.0" right="5.0" />
-                           </padding>
                         </FlowPane>
+                        <FlowPane columnHalignment="CENTER" layoutX="251.0" layoutY="56.0" prefHeight="151.0" prefWidth="160.0" vgap="10.0">
+                           <children>
+                              <TextField promptText="pain (du)" />
+                              <TextField promptText="nourriture (la)" />
+                              <TextField promptText="animaux (des)" />
                            </children>
-			      </HBox>
+                        </FlowPane>
+                        <FlowPane columnHalignment="CENTER" layoutX="438.0" layoutY="53.0" prefHeight="139.0" prefWidth="160.0" vgap="10.0">
+                           <children>
+                              <TextField promptText="journal (un)" />
+                              <TextField promptText="pays (un)" />
+                              <TextField promptText="chambre (une)" />
+                           </children>
+                        </FlowPane>
+                        <Text layoutX="249.0" layoutY="48.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 20;" text="Vocabulary #1" />
+                        <Text layoutX="37.0" layoutY="74.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="1" />
+                        <Text layoutX="35.0" layoutY="109.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="4" />
+                        <Text layoutX="35.0" layoutY="145.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="7" />
+                        <Text layoutX="26.0" layoutY="181.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="10" />
+                        <Text layoutX="238.0" layoutY="74.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="2" />
+                        <Text layoutX="236.0" layoutY="111.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="5" />
+                        <Text layoutX="236.0" layoutY="147.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="8" />
+                        <Text layoutX="427.0" layoutY="72.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="3" />
+                        <Text layoutX="425.0" layoutY="109.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="6" />
+                        <Text layoutX="425.0" layoutY="144.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="9" />
+                        <Button layoutX="536.0" layoutY="194.0" mnemonicParsing="false" style="-fx-background-color: #ffffff; -fx-border-width: 1; -fx-border-color: #aaaaaa; -fx-text-fill: #000000; -fx-border-radius: 3; -fx-background-radius: 3;" text="Check" />
       			   </children>
                      <cursor>
                         <Cursor fx:constant="HAND" />
@@ -111,6 +361,12 @@
                </children>
                <opaqueInsets>
                   <Insets />
-         </opaqueInsets></FlowPane>
+               </opaqueInsets>
+               <padding>
+                  <Insets top="20.0" />
+               </padding>
+            </FlowPane>
+         </content>
+      </ScrollPane>
    </children>
 </AnchorPane>

fxml/submenu_mag.fxml

@@ -0,0 +1,212 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.Cursor?>
+<?import javafx.scene.control.ScrollPane?>
+<?import javafx.scene.control.TextField?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.FlowPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.Pane?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>
+<?import javafx.scene.text.Text?>
+
+
+<VBox id="submenu" fx:id="submenu" layoutX="234.0" layoutY="50.0" prefWidth="200.0" stylesheets="@../css/submenu.css" AnchorPane.bottomAnchor="0.0" AnchorPane.topAnchor="50.0">
+   <children>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" prefHeight="35.0" prefWidth="234.0">
+         <children>
+            <Text fx:id="all" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Tout afficher" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/all.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" top="25.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="30.0" layoutY="60.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="science" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Science" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/science.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="30.0" layoutY="95.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="business" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Business" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/business.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="30.0" layoutY="130.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="entertainment" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Entertainment" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/entertainment.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="165.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="gaming" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Gaming" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/gaming.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="200.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="health" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Health" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/health.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="30.0" layoutY="235.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="music" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Music" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/music.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="270.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="sport" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Sport" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/sport.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="305.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="nature" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Nature" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/nature.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="340.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="economics" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Economics" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/economics.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="375.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="politics" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Politics" />
+            <ImageView fx:id="politics" fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/politics.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+      <FlowPane alignment="CENTER_RIGHT" columnHalignment="CENTER" layoutX="10.0" layoutY="410.0" prefHeight="35.0" prefWidth="234.0" styleClass="menu_item">
+         <children>
+            <Text fx:id="technology" fill="#656565" strokeType="OUTSIDE" strokeWidth="0.0" text="Technology" />
+            <ImageView fitHeight="15.0" fitWidth="15.0" pickOnBounds="true" preserveRatio="true">
+               <FlowPane.margin>
+                  <Insets left="15.0" />
+               </FlowPane.margin>
+               <image>
+                  <Image url="@../src/submenu/technology.png" />
+               </image>
+            </ImageView>
+         </children>
+         <VBox.margin>
+            <Insets left="20.0" right="20.0" />
+         </VBox.margin>
+      </FlowPane>
+   </children></VBox>

fxml/vocabulary_disp.fxml

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.Cursor?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.TextField?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.FlowPane?>
+<?import javafx.scene.text.Text?>
+
+<AnchorPane id="vocab" fx:id="vocab" prefHeight="228.0" prefWidth="620.0" style="-fx-border-color: #ddd;" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
+   <opaqueInsets>
+      			      <Insets />
+      			   </opaqueInsets>
+      			   <children>
+                        <FlowPane columnHalignment="CENTER" layoutX="51.0" layoutY="54.0" prefHeight="149.0" prefWidth="160.0" vgap="10.0">
+                           <children>
+                              <TextField promptText="manger" />
+                              <TextField layoutX="10.0" layoutY="10.0" promptText="voyager" />
+                              <TextField layoutX="10.0" layoutY="36.0" promptText="dormir" />
+                              <TextField layoutX="10.0" layoutY="62.0" promptText="apprendre" />
+                           </children>
+                        </FlowPane>
+                        <FlowPane columnHalignment="CENTER" layoutX="251.0" layoutY="56.0" prefHeight="151.0" prefWidth="160.0" vgap="10.0">
+                           <children>
+                              <TextField promptText="pain (du)" />
+                              <TextField promptText="nourriture (la)" />
+                              <TextField promptText="animaux (des)" />
+                           </children>
+                        </FlowPane>
+                        <FlowPane columnHalignment="CENTER" layoutX="438.0" layoutY="53.0" prefHeight="139.0" prefWidth="160.0" vgap="10.0">
+                           <children>
+                              <TextField promptText="journal (un)" />
+                              <TextField promptText="pays (un)" />
+                              <TextField promptText="chambre (une)" />
+                           </children>
+                        </FlowPane>
+                        <Text layoutX="249.0" layoutY="34.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 20;" text="Vocabulary #1" />
+                        <Text layoutX="37.0" layoutY="74.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="1" />
+                        <Text layoutX="35.0" layoutY="109.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="4" />
+                        <Text layoutX="35.0" layoutY="145.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="7" />
+                        <Text layoutX="26.0" layoutY="181.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="10" />
+                        <Text layoutX="238.0" layoutY="74.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="2" />
+                        <Text layoutX="236.0" layoutY="111.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="5" />
+                        <Text layoutX="236.0" layoutY="147.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="8" />
+                        <Text layoutX="427.0" layoutY="72.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="3" />
+                        <Text layoutX="425.0" layoutY="109.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="6" />
+                        <Text layoutX="425.0" layoutY="144.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 16;" text="9" />
+                        <Button layoutX="536.0" layoutY="194.0" mnemonicParsing="false" style="-fx-background-color: #ffffff; -fx-border-width: 1; -fx-border-color: #aaaaaa; -fx-text-fill: #000000; -fx-border-radius: 3; -fx-background-radius: 3;" text="Check" />
+      			   </children>
+                     <cursor>
+                        <Cursor fx:constant="HAND" />
+                     </cursor>
+</AnchorPane>

model/NewsListModel.java

@@ -1,5 +1,6 @@
 package model;
 
+import java.io.UnsupportedEncodingException;
 import java.text.ParseException;
 import java.util.ArrayList;
 import java.util.Date;
@@ -118,15 +119,32 @@ public class NewsListModel implements Observable{
 	}
 
 	public void query(String q) {
+		//si recherche vide
+		if(q.isEmpty()) {
+			this.news = new ArrayList<NewsModel>();
+			NewsListModel.this.notifyObservers(new Event("NewsModel","NewsQuerySuccess"));
+			return;
+		}
+		
 		//si la recherche de source s'est fini avec une erreur, pas la peine de chercher des articles
 		if(this.apiError) {
 			NewsListModel.this.notifyObservers(new Event("NewsModel","NewsQueryFailed"));
 			this.apiError = false;
 			return;
 		}
+		
+		this.query = q;
+		
+		final String encodedQuery;
+		try {
+			encodedQuery = java.net.URLEncoder.encode(q,"UTF-8");
+		} catch (UnsupportedEncodingException e1) {
+			this.notifyObservers(new Event("NewsModel","NewsQueryFailed"));
+			return;
+		}
 		//on créer l'URL de l'appel
 		String lang = LangModel.getInstance().getToLang().name();
-		String URL = "http://beta.newsapi.org/v2/everything?apiKey="+this.APIKey+"&language="+lang+"&q="+q+"&sortBy="+this.sortType.name();
+		String URL = "http://beta.newsapi.org/v2/everything?apiKey="+this.APIKey+"&language="+lang+"&q="+encodedQuery+"&sortBy="+this.sortType.name();
 		
 		//on ajoute la liste des sources a l'URL de la requete
 		if(NewsListModel.this.sources != null && NewsListModel.this.sources.size() != 0) {
@@ -164,13 +182,20 @@ public class NewsListModel implements Observable{
 						news.setDate(new Date());
 					}
 					
+					if(NewsListModel.this.query == q) {
 						NewsListModel.this.news.add(news);
+					}else {
+						return;
+					}
 				}
 				
-				NewsListModel.this.query = q;
+				if(NewsListModel.this.query == q) {
 					//ne pas oublier d'enlever l'api des observer, sinon il y a des risques de récurrence
 					NewsListModel.this.removeObserver("newsApiCall");
 					NewsListModel.this.notifyObservers(new Event("NewsModel","NewsQuerySuccess"));
+				}else {
+					return;
+				}
 
 			}
 
@@ -199,7 +224,7 @@ public class NewsListModel implements Observable{
 
 					String lang = LangModel.getInstance().getToLang().name();
 					String URL = "http://beta.newsapi.org/v2/everything?apiKey="+NewsListModel.this.APIKey+"&language="+lang
-							+"&q="+q+"&sortBy="+NewsListModel.this.sortType.name();
+							+"&q="+encodedQuery+"&sortBy="+NewsListModel.this.sortType.name();
 
 					//on ajoute la liste des sources a l'URL de la requete
 					if(NewsListModel.this.sources != null && NewsListModel.this.sources.size() != 0) {
@@ -234,6 +259,11 @@ public class NewsListModel implements Observable{
 		}
 	}
 	
+	
+	public String getQuery() {
+		return this.query;
+	}
+	
 	public ArrayList<NewsModel> getNews(){
 		return this.news;
 	}

model/NewsModel.java

@@ -69,7 +69,7 @@ public class NewsModel {
 		return description;
 	}
 	public NewsModel setDescription(String description) {
-		this.description = description;
+		this.description = description+"\n\n";
 		return this;
 	}
 	public Date getDate() {

model/TraductionModel.java

@@ -0,0 +1,170 @@
+package model;
+
+import java.io.UnsupportedEncodingException;
+import java.util.ArrayList;
+import java.util.HashMap;
+
+import org.json.JSONObject;
+
+import Classes.ApiCall;
+import Classes.Event;
+import Interfaces.Callback;
+import Interfaces.EventObserver;
+import Interfaces.Observable;
+import javafx.util.Pair;
+
+public class TraductionModel implements Observable {
+	
+	private HashMap<String,EventObserver> observers;
+	private static TraductionModel instance;
+	private ArrayList<Pair<WordTraductionModel,WordTraductionModel>> translations;
+	private ArrayList<Pair<WordTraductionModel,WordTraductionModel>> usages;
+	
+	private TraductionModel() {
+		this.observers = new HashMap<String,EventObserver>();
+	}
+
+	public static TraductionModel getInstance() {
+		if(TraductionModel.instance == null) {
+			TraductionModel.instance = new TraductionModel();
+		}
+
+		return TraductionModel.instance;
+	}
+	
+	public void query(String search) {
+		
+		//si recherche vide
+			if(search.isEmpty()) {
+				this.translations = new ArrayList<Pair<WordTraductionModel,WordTraductionModel>>();
+				this.usages = new ArrayList<Pair<WordTraductionModel,WordTraductionModel>>();
+				this.notifyObservers(new Event("DictionaryModel","WordQuerySuccess"));
+				return;
+			}
+		
+		final String encodedQuery;
+		try {
+			encodedQuery = java.net.URLEncoder.encode(search,"UTF-8");
+		} catch (UnsupportedEncodingException e1) {
+			this.notifyObservers(new Event("DictionaryModel","WordQueryFailed"));
+			return;
+		}
+		
+		HashMap<String,String> headers = new HashMap<String,String>();
+		//si on ne met pas ce header l'API refuse de répondre
+		headers.put("Referer", "http://www.wordreference.com");
+		
+		String dic = LangModel.getInstance().getFromLang().name()+LangModel.getInstance().getToLang().name();
+		
+		ApiCall call = new ApiCall("http://api.wordreference.com/1/json/"+dic+"/"+encodedQuery,"GET",new Callback() {
+
+			@Override
+			public void onSuccess(JSONObject response) {
+				
+				try {
+					
+					//on reset le contenu du modele
+					TraductionModel.this.translations = new ArrayList<Pair<WordTraductionModel,WordTraductionModel>>();
+					TraductionModel.this.usages = new ArrayList<Pair<WordTraductionModel,WordTraductionModel>>();
+					
+					if(response.has("Error")) {
+						//pas de résultat
+						TraductionModel.this.notifyObservers(new Event("DictionaryModel","WordQueryFailed"));
+					}else{
+						//Traitement des traductions principales
+						TraductionModel.this.translations.addAll(
+								TraductionModel.this.computeJSON(
+										response.getJSONObject("term0").getJSONObject("PrincipalTranslations")
+										)
+								);
+						//Traitement des traductions secondaires
+						if(response.getJSONObject("term0").has("AdditionalTranslations")) {
+							TraductionModel.this.translations.addAll(
+									TraductionModel.this.computeJSON(
+											response.getJSONObject("term0").getJSONObject("AdditionalTranslations")
+											)
+									);
+						}
+						
+						//traitement des usages
+						TraductionModel.this.usages.addAll(
+								TraductionModel.this.computeJSON(
+										response.getJSONObject("original").getJSONObject("Compounds")
+										)
+								);
+						
+						TraductionModel.this.notifyObservers(new Event("DictionaryModel","WordQuerySuccess"));
+						
+					}
+					
+				}catch(Exception e) {
+					e.printStackTrace();
+				}
+
+			}
+
+			@Override
+			public void onError() {
+				TraductionModel.this.notifyObservers(new Event("DictionaryModel","WordQueryFailed"));
+			}
+			
+		});
+		call.addHeaders(headers);
+		call.send();
+	}
+	
+	private ArrayList<Pair<WordTraductionModel,WordTraductionModel>> computeJSON(JSONObject container){
+		ArrayList<Pair<WordTraductionModel,WordTraductionModel>> returned = new ArrayList<Pair<WordTraductionModel,WordTraductionModel>>();
+		for (Object key : container.keySet()) {
+			//get original term
+			WordTraductionModel term = new WordTraductionModel();
+			JSONObject jterm = container.getJSONObject((String)key).getJSONObject("OriginalTerm");
+			term.setWord(jterm.getString("term"))
+			.setPOS(jterm.getString("POS"))
+			.setSense(jterm.getString("sense"))
+			.setUsage(jterm.getString("term"));
+			
+			//get traduction
+			WordTraductionModel trad = new WordTraductionModel();
+			jterm = container.getJSONObject((String)key).getJSONObject("FirstTranslation");
+			term.setWord(jterm.getString("term"))
+			.setPOS(jterm.getString("POS"))
+			.setSense(jterm.getString("sense"))
+			.setUsage(jterm.getString("term"));
+			
+			returned.add(new Pair<WordTraductionModel,WordTraductionModel>(term,trad));
+		}
+		
+		return returned;
+	}
+	
+	public ArrayList<Pair<WordTraductionModel,WordTraductionModel>> getTranslations(){
+		return this.translations;
+	}
+	
+	public ArrayList<Pair<WordTraductionModel,WordTraductionModel>> getUsages(){
+		return this.usages;
+	}
+
+
+	@Override
+	public void addObserver(String key, EventObserver o) {
+		this.observers.put(key, o);
+
+	}
+
+	@Override
+	public void removeObserver(String key) {
+		this.observers.remove(key);
+		
+	}
+
+	@Override
+	public void notifyObservers(Event e) {
+		for(Object key : this.observers.keySet().toArray()) {
+			this.observers.get(key).handleEvent(e);
+		}
+	}
+
+	
+}

model/WordTraductionModel.java

@@ -0,0 +1,40 @@
+package model;
+
+public class WordTraductionModel {
+	
+	private String word;
+	private String POS;
+	private String sense;
+	private String usage;
+	
+	
+	public String getWord() {
+		return word;
+	}
+	public WordTraductionModel setWord(String word) {
+		this.word = word;
+		return this;
+	}
+	public String getPOS() {
+		return POS;
+	}
+	public WordTraductionModel setPOS(String pOS) {
+		POS = pOS;
+		return this;
+	}
+	public String getSense() {
+		return sense;
+	}
+	public WordTraductionModel setSense(String sense) {
+		this.sense = sense;
+		return this;
+	}
+	public String getUsage() {
+		return usage;
+	}
+	public WordTraductionModel setUsage(String usage) {
+		this.usage = usage;
+		return this;
+	}
+
+}