X

Technical Articles relating to Oracle Development Tools and Frameworks

Introducing the New Component Exchange Feature in Oracle Visual Builder

Duncan Mills
Architect
  1.  

When you upgrade to, or create a new instance of Visual Builder with the March 2019 release, you'll encounter a new feature which really opens up some exciting possibilities for the future - that of the Component Exchange.

In this article I'm going to cover the basics of how to configure and use the Component Exchange as it stands today and in subsequent articles I'll dive into some of the sample components that we've included into the Exchange to get you started.  These will all be available for you to download and adapt for your own applications, but more of that later. 

Before we look at how all this  works in Visual Builder, let me give you some background. Visual Builder and the Oracle JET UI Toolkit, which it uses, have a unified component plug-in mechanism based on the W3C Web Components standard. If you have not encountered JET Custom Web Components before then you can head over to the JET documentation for an introduction and this learning path for a deep dive into the topic.
Now Visual Builder has always had the ability to import such custom components into a given project, you can do this by scrolling down to the bottom of the component palette in the page editor and clicking the (+) icon in the Custom Components section.  You've also been able to create your own custom components by expanding the resources/components node in the navigator and clicking the (+) icon there. 
In both cases, the component that you upload or create will be specific to and embedded in your current web or mobile project and so if you wanted to re-use a component in multiple projects you would have to keep importing all of the source code for the component into each and every application.

The job of the Component Exchange feature in Oracle Visual Builder is to simplify this whole process by having all your custom components available in one central catalog where they can be referenced from multiple projects and tasks such as managing upgrades can be efficiently managed. 

Getting Started with the Component Exchange

Configuration 

The first step in your journey to using the Visual Builder Component Exchange is to enable it for a given Visual Builder environment.  This is done through the Tenant Settings configuration screen for Visual Builder (You'll need to be an Administrator to see this). On that screen you'll see a section labeled Component Exchange where you can enter the exchange URL and credentials to reach it. 

The values that you enter into these fields are documented in the Administration Guide for Visual Builder and will depend on where your instance is located. 

Once you have configured the Component Exchange connection some new possibilities will open up.

Application Templates

As well as containing reusable UI components, the Component Exchange can also contain pre-built application templates that become available to you when you create a new project. 

In the Create Application dialog you'll see a Change Template link:

When you select that, you'll be presented with a list of the templates installed into the catalog. Right now there is only one extra template available as a sample to try out:

If you select the SaaS Light Theme template then the new project will be created for you, complete with a predefined web application containing three flows and with navigation between them, as well as a pre-defined JET theme for styling.

Sample Components

As well as the example template, we have also pre-seeded the Component Exchange with 20 or so new components for you to adapt for your own use.  You will first encounter these when you create a new empty project where there are two ways you can get to see what's available -  highlighted here:

Selecting either of these will take you to the component search screen which opens up in the navigator area. 

Here you can either just scroll and select an interesting component, or you can use the search field at the top to search for a component by keyword. When you select a component in the list then a details panel will open up in the main content area where you can see an overview of the component and, if you click on the API option you'll see documentation on the properties, methods, events and slots supported by that component.  For example:

If that component looks interesting then you can press the Install button and then the component is ready to use in this project. 

If you now create a new web or mobile application in the project (or switch back to the page editor of one you have already created), you will see a new icon representing the component appear in the component palette.  For example, if I install the Boolean Checkbox component then it will appear in a new "Extended Components" section of the component palette:

From here you can drag and drop it into your application and use it just like any other component. 

At this point it's useful to understand how this is different to what would happen if you imported a component in the way that you might have in earlier versions. 

  1. Your source code will not actually include the component. Instead it will be updated to reference the component from the Component Exchange and Visual Builder will take care of resolving everything when you stage or publish your application
  2. All of the applications within the VBCS project will be able to see the component, you no longer have to import it on an application by application basis
  3.  Finally, and most importantly, the components now have a lifecycle. If a new version of a given component is pushed to the Component Exchange when you open a project that uses that component in the design time, you will be notified of the update by Visual Builder and can choose to do a one-click update just like that to consume the new version!

Questions you Might be Asking

As I mentioned this is just the beginning and I'll be writing more articles on the topic over the next few weeks.  However, to wrap things up for this article I want to address some questions that I'm sure that you'll be itching to ask:

Q. How can I put my own components and templates into the Exchange? 

A. You can't yet. We intend to add this feature shortly, at which point you will be able to upload components that will be private to your company or organisation as well as being able to see the shared components that we publish.

Q. When I can publish my own components, will I be able to share them with other organisations?

A. At this stage the answer is no. Any components will remain secure and private to your organisation.

Q. Are the components and templates that I can see now fully supported?

A. No, this first set of  components and templates that Oracle has published into the Component Exchange are intended only as code samples for you to take and adapt if they suit your needs. If you choose to use the components as-is in your production applications we will not be able to support that specific functionality although we will supply you with the source code to take away and adapt to fix any problem that you encounter.

Q. How are the Components Licensed? Is it OK to Fork them?

A. Each component includes license information which can be accessed from the main component description screen, or by reading the LICENCE.txt file in the actual component distribution. The initial set of samples are all licensed under the Universal Permissive License, however, some of the components also use third party libraries which may use different licenses such as Apache v2 or MIT.  In such cases the component distribution will also contain a file called THIRD_PARTY_LICENSE.txt which provides details on any additional licenses included. You should always consult your own legal experts before deciding if it is safe to 

Q. How Can I get to the Source Code of One of the Samples to Fork it? 

A. I'll be covering this process in a later blog article so watch this space! 

   

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha