WordApp Example - Part 5

• Create a new module named "Visual" as a standalone module with code name base "at.ssw.visual" and add a window component with prefix "Visual" in package "at.ssw.visual". Add a dependency to the module "Visual Library API".


• Set the layout of the window to "Border Layout".
  
• Create a scene object and add its view to the top component. Then add a label to the scene. Now you can start and test the application. An example screenshot is shown below.

  private VisualTopComponent() {
      ...
  
      Scene scene = new Scene();
      add(scene.createView(), BorderLayout.CENTER);
      scene.addChild(new LabelWidget(scene, "Sample application"));
  }
  

  
  


• Add a second label to the scene that can be moved around. An example screenshot is shown below, the label can be dragged around using the left mouse button.
  

  private VisualTopComponent() {
      ...
  
      LabelWidget node1 = new LabelWidget(scene, "Node 1");
      node1.setBackground(Color.GREEN);
      node1.setOpaque(true);
      node1.setPreferredLocation(new Point(100, 100));
      node1.getActions().addAction(ActionFactory.createMoveAction());
      scene.addChild(node1);
  }
  

  
  


• Now we add a connection widgets that represents a line between the two node widgets. For this purpose we need to create two layer widgets. To the first we add the node widgets, to the second one the connection widget. Then we can anchor the ends of the connection widget. Code and screen shot given below.
  

  private VisualTopComponent() {
      ...
  
      LayerWidget mainLayer = new LayerWidget(scene);
      scene.addChild(mainLayer);
  
      LabelWidget node1 = new LabelWidget(scene, "Node 1");
      node1.setBackground(Color.GREEN);
      node1.setOpaque(true);
      node1.setPreferredLocation(new Point(100, 100));
      node1.getActions().addAction(ActionFactory.createMoveAction());
      mainLayer.addChild(node1);
  
      LabelWidget node2 = new LabelWidget(scene, "Node 2");
      node2.setBackground(Color.GREEN);
      node2.setOpaque(true);
      node2.setPreferredLocation(new Point(200, 100));
      node2.getActions().addAction(ActionFactory.createMoveAction());
      mainLayer.addChild(node2);
  
      LayerWidget connectionLayer = new LayerWidget(scene);
      scene.addChild(connectionLayer);
  
      ConnectionWidget connection = new ConnectionWidget(scene);
      connectionLayer.addChild(connection);
      connection.setSourceAnchor(AnchorFactory.createRectangularAnchor(node1));
      connection.setTargetAnchor(AnchorFactory.createRectangularAnchor(node2));
  }
  

  
  


• The next step is to make the widgets animated such that on rollover the color is changed slowly. For this purpose we define a new hover action and assign it to the nodes and the scene.

  private VisualTopComponent() {
      ...
  
  
      WidgetAction hoverAction = ActionFactory.createHoverAction(new TwoStateHoverProvider(){
  
          public void unsetHovering(Widget w) {
              w.getScene().getSceneAnimator().animateBackgroundColor(w, Color.GREEN);
              w.getScene().getSceneAnimator().animateForegroundColor(w, Color.BLACK);
          }
  
          public void setHovering(Widget w) {
              w.getScene().getSceneAnimator().animateBackgroundColor(w, Color.BLUE);
              w.getScene().getSceneAnimator().animateForegroundColor(w, Color.WHITE);
          }
      });
  
      node1.getActions().addAction(hoverAction);
      node2.getActions().addAction(hoverAction);
      scene.getActions().addAction(hoverAction);
  }