Nov 25

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

  1. Click on Create from the Prefab tab of the Project Dashboard
  2. Enter a name and description for the Prefab
  3. 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
  4. 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:

    The final Java service should look like this:
  5. Create a Variable to invoke the Java Service (string_compare) and method (confirm) within that service
  6. Pass the inbound parameters of the Prefab to the Java Service, by binding them to the input fields accessible from the Data tab

  7. 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
  8. 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.
  9. Save and Preview the Prefab. Give the In-bound values:
    and see the result in the Out-bound properties tab:
  10. Publish the Prefab.
  11. You can set the version for the Prefab and Publish it. Know more about publishing Prefabs from here.
  12. 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

  1. Let us now use the above-created Prefab in an application. Create or Open an application.
  2. From the Artifact Listing, import the above published Prefab.
  3. 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.
    demo_prefab_toolbox
  4. 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)
    demo_prefab_design
  5. Bind the properties (inbound) of the Prefab to the two text box.
  6. Bind the label on the canvas to the result (outbound) from Prefab.
    demo_prefab_design_result
  7. Click event of the button invokes the Prefab method.
    demo_prefab_design_event
  8. 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
 
We use cookies to provide you with a better experience. By using our website you agree to the use of cookies as described in our Privacy Policy.