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.
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
You can find more information about this, on this article:
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 :
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].