Version: v11.9.2

Create a Simple Prefab

This post walks you through the creation and usage of a simple Prefab. We will be creating a Prefab which compares two text strings and returns the result. For string comparison, we will be writing a simple Java code.

Creating the Prefab

Click on Create from the Prefab tab of the Project Dashboard
Enter a name and description for the Prefab
From Project Configurations, choose Config Prefab under Settings:
- In the Properties tab, add two inbound properties which will take in the two strings to compare and one outbound property to return the result
- In the Events tab, add an event (Comparefail) which will be triggered when the comparison of strings fails. The event will be defined in the JavaScript of the Prefab, the application using this Prefab will be defining the action for this event. Note, by default two events are already given - Load and Destroy
- You can set the display icon and mention the group for Prefab from the Packaging tab
Add a Java Service for the string comparison logic. Use the same names that you gave in the Methods of Prefab Settings, in this case, String_compare for Java Service and confirm for the method Enter the following method to compare strings:

public String confirm(String a, String b) {
    String result = null;
    if (a.equals(b))
    {
        result = "matched";
    }
    else
    { 
        result = "invalid";
    }
    return result;
}

}

The final Java service should look like this:

/*Copyright (c) 2015-2016 wavemaker-com All Rights Reserved.


This software is the confidential and proprietary information of wavemaker-com You shall not disclose such Confidential Information and shall use it only in accordance with the terms of the source code license agreement you entered into with wavemaker-com*/.

package com.prefabdemo.string_compare;

import jakarta.servlet.http.HttpServletRequest;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import org.springframework.beans.factory.annotation.Autowired;

import com.wavemaker.runtime.security.SecurityService;
import com.wavemaker.runtime.service.annotations.ExposeToClient;
import com.wavemaker.runtime.service.annotations.HideFromClient;

//import com.prefabdemo.string_compare.model.*;

/**
    * This is a singleton class with all its public methods exposed as REST APIs via generated controller class.
    * To avoid exposing an API for a particular public method, annotate it with @HideFromClient.
    *
    * Method names will play a major role in defining the Http Method for the generated APIs. For example, a method name
    * that starts with delete/remove, will make the API exposed as Http Method "DELETE".
    *
    * Method Parameters of type primitives (including java.lang.String) will be exposed as Query Parameters &
    * Complex Types/Objects will become part of the Request body in the generated API.
    */
@ExposeToClient
public class String_compare {

    private static final Logger logger = LoggerFactory.getLogger(String_compare.class);

    @Autowired
    private SecurityService securityService;

    /**
        * This is sample java operation that accepts an input from the caller and responds with "Hello".
        *
        * SecurityService that is Autowired will provide access to the security context of the caller. It has methods like isAuthenticated(),
        * getUserName() and getUserId() etc which returns the information based on the caller context.
        *
        * Methods in this class can declare HttpServletRequest, HttpServletResponse as input parameters to access the
        * caller's request/response objects respectively. These parameters will be injected when request is made (during API invocation).
        */
    public String sampleJavaOperation(String name, HttpServletRequest request) {
        logger.debug("Starting sample operation with request url " + request.getRequestURL().toString());

        String result = null;
        if (securityService.isAuthenticated()) {
            result = "Hello " + name + ", You are logged in as "+  securityService.getLoggedInUser().getUserName();
        } else {
            result = "Hello " + name + ", You are not authenticated yet!";
        }
        logger.debug("Returning {}", result);
        return result;
    }

    public String confirm(String a, String b) {
        String result = null;
        if (a.equals(b))
        {
            result = "matched";
        }
        else
        { 
            result = "invalid";
        }
        return result;
    }

}

Create a Variable to invoke the Java Service (string_compare) and method (confirm) within that service.

Pass the inbound parameters of the Prefab to the Java Service, by binding them to the input fields accessible from the Data tab.

We want the event of the Prefab to be triggered when the method returns an "invalid" message. This can be achieved by writing the appropriate JavaScript for the onSuccess event of the method accessible from the Events tab of the Variable.

You will find a message guiding you to the location of the JavaScript file. Click the link and use the following code in the JavaScript in the snippet.

Prefab.compareStringonSuccess = function(variable, data) {
    if (data === "invalid") {
        if (Prefab.onComparefail) {
            Prefab.onComparefail();
        }
    }
};

The result from the Java method needs to be bound to the outbound property declared in the above steps. From the Prefab Settings, Properties tab bind the result of the Java Service to the outbound property of the Prefab.

Save and Preview the Prefab. Give the In-bound values:

and see the result in the Out-bound properties tab:

Publish the Prefab.

You can set the version for the Prefab and Publish it. Know more about publishing Prefabs from here.
The Prefab will be available for use across the Projects. You can see the entry in the Artifacts list from the Developer Utilities on the Project Workspace and in the Widget Toolbox of any Project within your workspace.

Using the Prefab in Project

Let us now use the above-created Prefab in an application. Create or Open an application.
From the Artifact Listing, import the above published Prefab.
See the Prefab appear in the Prefab section of the Toolbox. The group name (Basic, in this example) and the icon are the values set from the Packaging tab of Prefab Settings.

Drop two texts strings for comparison input to Prefab, a label to hold the result from the Prefab, a button to trigger the Prefab and the Prefab on the canvas. Your canvas should look like this (we have used a Grid Layout for widget placement)

Bind the properties (inbound) of the Prefab to the two text box.

Bind the label on the canvas to the result (outbound) from Prefab.

Click event of the button invokes the Prefab method.

Run the application:
1. Enter the same string in both the text boxes and see the comparison result.
2. Enter different string in the text boxes and see the comparison result.

Creating the Prefab​

Using the Prefab in Project​

See Also​

Creating the Prefab

Using the Prefab in Project

See Also