Extend your application Lifecycle by adding new web functionalities

In this quick article, we will explain to you how to add new features and functionalities by applying Webcomponents to your existing Thinfinity VirtualUI web application. 

Web components are a set of web frameworks that allow you to create new custom, reusable and encapsulated HTML tags to use in web pages or, in this case, inside your Thinfinity VirtualUI web application. This web component can be used with any JavaScript library or framework that works with HTML such as Angular, React and many others, this is only possible since modern browsers understand and interact with them seamlessly.

With this being said, now is clear why one of the great things about Web components is that they can easily be used in existing applications without requiring you to re-architect the application. It also gives you many more options when it comes to high-quality UI components at your disposal.

Also, web components can be used and reused in order to interact with an existing framework or application, and this will be one of the use cases we’ll cover today.

Basically, a component of your existing framework is able to interact with the web component through its properties, attributes and public methods.

In the example we are about to see, the data flow is coming from the parent (component of the apps framework) to its child (Web component) and then the same thing happens vice versa, where the Data flow is now coming from the child (Webcomponent) to its parent (Application Framework)

As a result, a web component contained inside an application framework, is able to interact and communicate with it through standard events, meaning the web component will communicate with the application framework upwards using DOM.

To showcase this particular interaction, we created a small VB6 application where we are interacting between the Application Framework to the Webcomponent and vice versa:

This type of interaction is called event-driven architecture, also called EDA and is the key to how current web applications work. In our github repository you can find this particular example: https://github.com/cybelesoft/virtualui/tree/master/WebComponents/demos/WebComponents-VB6/Vb6Wc1 

Another good example, can be implementing jQuery libraries using our jSRO (Javascript Remote Objects) integration.

You can find more information about this, on this article:

https://blog.cybelesoft.com/windows-and-web-integration-through-thinfinity-jsro-javascript-remote-objects-introduction/ ).

In this quick VB6 demo, we are using jQuery and jsRO to deliver the web component. Here we are simply exposing a textbox from the native web app and sending it back to the browser in HTML. Eventually, you could expose the content of a website or another web application like Google Maps or any other.

You can find this demo in our github repository here :

https://github.com/cybelesoft/virtualui/tree/master/C%23/HTMLDOC-Jquery

Now, in the following example, we’ll discover one of the methods to display a web browser inside your VirtualUI application.

Here we created a simple form and placed a browser inside of it.

As you can see, we are now able to browse any webpage inside your Thinfinity VirtualUI web based application without leaving Thinfinity’s tab and your application.

As you can imagine, this use-case it’s quite useful when you are trying to get access not only to external webs outside the Thinfinity VirtualUI network, but now, you can access internal web resources on a private network, and you can browse your resources in a secure way. You can find this demo in our GitHub repository here: https://github.com/cybelesoft/virtualui/tree/master/WebComponents/demos/vui-webbrowser

In an upcoming tutorial, we’ll show you how to integrate the well-known Dojo Toolkit with Thinfinity VirtualUI applications.

We hope you enjoyed this tutorial and if you have any questions feel free to contact us at [email protected]

If you have any questions, please email us at [email protected].

Regards!