Vue GWT

# Extending Components

In Vue.JS it's possible to extend existing components. In Vue GWT we can use Java inheritance to extend a base Component.

This allows you to reuse some behavior across Components.

WARNING

Inheritance is a powerful tool, but don't use it too much. Try to limit to a single level of inheritence, and use it only when necessary.

# Extending an existing Java Component

# The Parent Component

Let's say we have the following Component:

@Component
public abstract class ParentComponent implements IsVueComponent {
    @Data String parentMessage = "This is a message from the parent";

    @JsMethod
    public int parentMultiplyBy2(int value) {
        return value * 2;
    }

    @Computed
    public String getParentComputed() {
        return "Computed Message | " + this.parentMessage;
    }
}

It's just a regular Vue GWT component. Only remarkable thing is it is abstract, which tells Vue GWT that it doesn't have a template.

# The Child Component

Let's extend our ParentComponent. For this we just have to use classic Java inheritance.

@Component
public class ChildJavaComponent extends ParentComponent, HasCreated {
    @Data int childValue;

    public void created() {
        this.childValue = 10;
    }

    public int childMultiplyBy10(int value) {
        return value * 10;
    }

    public int childMultiplyBy4(int value) {
        return this.parentMultiplyBy2(this.parentMultiplyBy2(value));
    }

    @Computed
    public String getChildComputed() {
        return "Child Computed | " + this.childValue;
    }
}

We can then use our parent methods and properties in the Child template:

<div>
    <div>Parent Message: {{ parentMessage }}</div>
    <div>Parent Method (value*2): {{ parentMultiplyBy2(childValue) }}</div>
    <div>Parent Computed Property: {{ parentComputed }}</div>

    <div>Child Value: {{ childValue }}</div>
    <div>Child Method (value*10): {{ childMultiplyBy10(childValue) }}</div>
    <div>Child Method using Parent Method (value*4): {{ childMultiplyBy4(childValue) }}</div>
    <div>Child Computed Property: {{ childComputed }}</div>
</div>

And here is the traditional live example for proof 😉 :

# Extending an existing JS Component

As you saw in integrating with JS Components, we can use JS Components in Vue GWT.

Well, we can also extends them!

If we have this Component:

window.ParentJsComponent = Vue.extend({
    data: function () {
        return {
            parentMessage: "This is a message from the Parent"
        };
    },
    methods: {
        parentMultiplyBy2: function (value) {
            return value * 2;
        }
    },
    computed: {
        parentComputed: function () {
            return "Computed Message | " + this.parentMessage;
        }
    }
});

We declare this Java interface:

@JsComponent("ParentJsComponent")
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Function")
public class ParentJsComponent implements IsVueComponent {
    public String parentMessage;

    public native int parentMultiplyBy2(int value);

    @Computed
    public native String getParentComputed();
}

We can then just inherit from it the same way we did for our Java Component:

@Component
public class ChildJavaComponent extends ParentJsComponent {
    @Data int childValue;

    public ChildJavaComponent() {
        this.childValue = 10;
    }

    public int childMultiplyBy10(int value) {
        return value * 10;
    }

    public int childMultiplyBy4(int value) {
        return this.parentMultiplyBy2(this.parentMultiplyBy2(value));
    }

    @Computed
    public String getChildComputed() {
        return "Child Computed | " + this.childValue;
    }
}

<div>
    <div>JS Parent Message: {{ parentMessage }}</div>
    <div>JS Parent Method (value*2): {{ parentMultiplyBy2(childValue) }}</div>
    <div>JS Parent Computed Property: {{ parentComputed }}</div>

    <div>Child Value: {{ childValue }}</div>
    <div>Child Method (value*10): {{ childMultiplyBy10(childValue) }}</div>
    <div>Child Method using JS Parent Method (value*4): {{ childMultiplyBy4(childValue) }}</div>
    <div>Child Computed Property: {{ childComputed }}</div>
</div>

Once instantiated:

← Custom Directives →