Results 1 to 6 of 6
  1. #1
    diolu is offline Member
    Join Date
    Jan 2017
    Posts
    26
    Rep Power
    0

    Default Making a custom shape that depends on a Property

    I am learning javafx and I try to figure out how exactly Property works. Some shapes depend on properties. Let's take Circle as an example. It depends (among other) on the radiusProperty. We can bind it to another property say myProperty and if myProperty changes, the radiusProperty change as well as the visible radius on the screen. I wonder how such things are implemented. Suppose I want to design a custom shape that behaves similarly. For exampe, let's say I want to implement a regular polygon that depends on an IntergerProperty: numberOfSidesProperty (the number of sides). I want to be able to bind this property to some other property and I want that the number of sides auto update, just like the radius of the Circle in the previous example. How could we implement such thing? Maybe by putting a SimpleIntegerProperty as an attribute and with a listener. I am a little confused. Is there an example somewhere? How the shapes present in the javafx API are implemented?
    Last edited by diolu; 02-23-2017 at 11:47 AM. Reason: typo

  2. #2
    benji2505 is offline Senior Member
    Join Date
    Sep 2014
    Location
    MA, USA
    Posts
    398
    Rep Power
    5

    Default Re: Making a custom shape that depends on a Property

    Yes, the fundamental idea is to store properties as objects rather than primitives. This has the advantage that you can work with these property-objects, e.g. you can add Listeners and you can bind them to another property.
    The Polygon example is difficult to implement in this case, because a Polygon node in JavaFX is a "line connecting points" and it does not have to be regular. Ergo, the Polygon class does not have a SimpleIntegerProperty "number of sides".
    What you could try: make a Stage,Scene, add a Textfield and a Label. Bind the StringProperties of these two nodes together. Type into the Textfield and see what happens in the Label.
    Last edited by benji2505; 02-24-2017 at 02:18 AM.

  3. #3
    diolu is offline Member
    Join Date
    Jan 2017
    Posts
    26
    Rep Power
    0

    Default Re: Making a custom shape that depends on a Property

    I know there is nothing foreseen for the number of sides of a regular polygon and I have taken this example on purpose. I know how to bind basic properties that are already implemented, but I am unsure how to make new ones, hence my question. The code to draw a polygon is easy. If list is the list of points, just add points to it with the following code:
    Java FX Code:
        
    for (int i = 0; i < numberOfSides; i++) {
      list.add(centerX + radius * Math.cos(2 * i * Math.PI / numberOfSides)); 
      list.add(centerY - radius * Math.sin(2 * i * Math.PI / numberOfSides));
    }
    Let's focus on the numberOfSides only (the radius and the center could of course be properties too). My idea would be the following.

    1) Make a new class Regular polygon that extends pane.
    2) In this class add a new SimpleIntergerProperty numberOfSidesProperty.
    3) add getter and setter method for the NumberOfsides.
    4) add a method redraw that remove the regular polygon already on the pane if there is one and redraw a new one from the value it gets from the numberOfSidesProperty.
    5) add a changeListener for the number of sides that redraw the polygon using the method above.

    But I am unsure it is the proper way to achieve what I want. I wonder how the shapes that are already present in the javafx API are implemented. Maybe using an idea similar to the one I describe above. Or maybe something completely different I have no idea of.

    Note that my regular polygon is only an example because it is simple. But I think being able to implement such things would be great. In the same idea; we could implement a clock that depends on a doubleProperty timeProperty (the number of seconds since a reference point) and draws the clock accordingly. We could then animate the clock using a timeline that updates the timeProperty. Plenty of other examples are imaginable.

  4. #4
    DarrylBurke's Avatar
    DarrylBurke is offline Forum Police
    Join Date
    Sep 2008
    Location
    Madgaon, Goa, India
    Posts
    12,059
    Rep Power
    25

    Default Re: Making a custom shape that depends on a Property

    Quote Originally Posted by diolu View Post
    I wonder how the shapes that are already present in the javafx API are implemented.
    Did you get a file javafx-src.zip with your jdk? I did (jdk 1.8.0, Win7). If you did, you can take a look for yourself.

    db
    If you're forever cleaning cobwebs, it's time to get rid of the spiders.

  5. #5
    benji2505 is offline Senior Member
    Join Date
    Sep 2014
    Location
    MA, USA
    Posts
    398
    Rep Power
    5

    Default Re: Making a custom shape that depends on a Property

    For such a solution you would probably extend the Polygon class, but it is a good idea. It might be a big effort depending on how intensely you plan to use it, though. Binding is just a different way to hook a Listener to a property and automate the functionality, so you might as well use a Listener to an available property in the first place.
    I wasn't really sure whether you are asking about the drawing of shapes or whether you are looking for a binding example now. I suggest you look at drawing shapes via imported vector files, that seems to be a nice solution for everything non-standard.
    Here is an example for the original code hooked up to a result of a Spinner node.

    Java FX Code:
    public class Main extends Application {
    	
    	HBox hBox;
    	Spinner<Integer> spinner;
    	Polygon polygon = new Polygon();
    	ObservableList<Double> list = FXCollections.observableArrayList();
    	
    	public static void main(String[] args) {
    		launch(args);
    	}
    	
    	@Override
    	public void start(Stage stage) {
    		hBox = new HBox(25);
    		
    		IntegerSpinnerValueFactory clickValueFactory = new IntegerSpinnerValueFactory(1,1000,3);
    	    spinner = new Spinner<Integer>(clickValueFactory);
    	    hBox.getChildren().add(spinner);
    	   
    	    spinner.valueProperty().addListener((obs, oldValue, newValue) ->{
    	    	hBox.getChildren().remove(polygon);
    	    	list.clear();
    	    	polygon.getPoints().clear();
    	    	drawPolygon(newValue);
    	    	hBox.getChildren().add(polygon);
    	    });
    		
    		Scene scene = new Scene(hBox,400,200);
    		stage.setOnCloseRequest(e-> System.exit(0));
    		stage.setScene(scene);
    	    stage.show();
    	}
    	
    	private void drawPolygon(int newValue){
    		Integer radius = 50;
    		for (int i = 0; i < newValue; i++) {
    			list.add(100 + radius * Math.cos(2 * i * Math.PI / newValue)); 
    			list.add(100 - radius * Math.sin(2 * i * Math.PI / newValue));
    			} 
    		polygon.getPoints().addAll(list);
    	}
    	
    }
    Last edited by benji2505; 02-24-2017 at 07:20 PM.

  6. #6
    diolu is offline Member
    Join Date
    Jan 2017
    Posts
    26
    Rep Power
    0

    Default Re: Making a custom shape that depends on a Property

    @benji2505 Yes that begin to make sense thank you.

Similar Threads

  1. making a video play with custom button?
    By gstar in forum New To Java
    Replies: 2
    Last Post: 07-04-2012, 06:47 AM
  2. Replies: 2
    Last Post: 04-15-2012, 09:54 PM
  3. Need help making custom look and feel
    By Vooda in forum AWT / Swing
    Replies: 0
    Last Post: 12-06-2011, 01:55 AM
  4. Replies: 10
    Last Post: 02-20-2010, 08:25 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •