nbrugger-tgm / reactj-swing

A swing implementation of reactj

React J - SWING

This libary is an extension to ReactJ that adds a swing specific implementation. Its just like Vue js for java/swing

ReactJ : Repo Wiki

Changelog : Changelog.md

Usage

Version:

Gradle

repositories {
    maven {
        url "https://niton.jfrog.io/artifactory/java-libs/"
    }
}

Adding the dependency

implementation 'com.niton.reactj:swing:0.1.1'

Maven

<repositories>
  <repository>
    <id>niton</id>
    <name>niton</name>
    <url>https://niton.jfrog.io/artifactory/java-libs/</url>
  </repository>
</repositories>

Adding the dependency

<dependency>
  <groupId>com.niton.reactj</groupId>
  <artifactId>swing</artifactId>
  <version>0.1.1</version>
</dependency>

Example

All functional examples can be found at https://github.com/nbrugger-tgm/reactj-swing/tree/master/src/test/java/com/niton/reactj/examples

Create a View

public class DataView extends JRComponent<ReactiveProxy<Data>> {
    private JPanel            panel;
    
    //The R marks reactive components
    private JRTextField        nameInput;
    private JRComboBox<Gender> genderJComboBox;
    private JRButton           selectButton ;
    
    public DataView(DataController controller) {
        super(controller);
    }
    
    @Override
    protected JPanel createView() {
        panel           = new JPanel();
        
        nameInput       = new JRTextField();
        genderJComboBox = new JRComboBox<>();
        selectButton    = new JRButton("Reset");
        genderJComboBox.setModel(new DefaultComboBoxModel<>(Gender.values()));
        
        nameInput.setColumns(10);
        
        panel.add(nameInput);
        panel.add(genderJComboBox);
        panel.add(selectButton);
        
        return panel;
    }
    
    @Override
    public void createBindings(ReactiveBinder bindings) {
        nameInput.biBindText("name", binder);
        genderJComboBox.biBindSelectedItem("gender",binder);
    }
}

Then we need a Pojo/Model to sync the View with

public class Data { 
	//change reactive name
	@Reactive("gender")
	private Gender personsGender;
	private String name;

	//This will not be reacted to
	@Unreactive
	private String address;

	public void setName(String name) {
		this.name = name;
	}

	public void setGender(Gender gender) {
		this.personsGender = gender;
	}
}

Now we need to bind the view to a Person object

ReactiveProxy<Data> proxy = ReactiveObject.create(Data.class);
Data model = proxy.object;
DataView view = new DataView();
view.setData(proxy);

//now you just need to display the view on a JFrame

Full runnable example

https://github.com/nbrugger-tgm/todo-list