{"id":3243,"date":"2022-12-19T10:26:46","date_gmt":"2022-12-19T10:26:46","guid":{"rendered":"https:\/\/www.bohort.nl\/?p=3243"},"modified":"2023-05-11T12:04:07","modified_gmt":"2023-05-11T12:04:07","slug":"reusing-oracle-jet-vcomponents","status":"publish","type":"post","link":"https:\/\/www.bohort.nl\/en\/2022\/12\/19\/reusing-oracle-jet-vcomponents\/","title":{"rendered":"Reusing Oracle JET VComponents"},"content":{"rendered":"

In my previous posts I explained a bit about Oracle JET VComponents. By now you should know the basics of how they work, and how they can be used in the application where they were created. But what if you want to use a VComponent in a separate application, and eventually even in an Oracle Visual Builder application? How can you distribute your VComponent for re-use? In this post we will have a look into reusing in a separate application. It is actually rather simple. In a later post I will explain how to do the same in an Oracle Visual Builder application.<\/p>\n\n\n\n

Introduction<\/h4>\n\n\n\n

For this post we will assume that you have access to the drawingpad component that was created in the previous blogpost<\/a>. From there on it is pretty straightforward to create an actual re-usable component. This is the component that we are going to package and re-use.<\/p>\n\n\n\n

Step 1: Preparing the component<\/h4>\n\n\n\n

To package the web component for distribution, you first need to build it. The following command will do the trick:<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npx<\/span> <\/span>ojet<\/span> <\/span>build<\/span> <\/span>component<\/span> <\/span>drawingpad<\/span>-<\/span>component<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
This will create a separate folder under the web\/components folder, dedicated to the drawingpad-component, as you can see in the image below:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Next step is to run the package command:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npx<\/span> <\/span>ojet<\/span> <\/span>package<\/span> <\/span>component<\/span> <\/span>drawingpad<\/span>-<\/span>component<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
This will create a dist folder (if not yet available) which contains a ZIP file. the name of the file is drawingpad-component_1.0.0.zip<\/em> which is obviously derived from the name of the component and the version number.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Step 2: Re-using the component<\/h4>\n\n\n\n
As mentioned in the introduction, there are several ways to re-use the component. In this post I will only discuss the simplest way: Creating a copy of the component in the stand-alone application.<\/p>\n\n\n\n
Lets first create a simple stand-alone application that will consume the component:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npx<\/span> @<\/span>oracle<\/span>\/<\/span>ojet<\/span>-<\/span>cli<\/span> <\/span>create<\/span> <\/span>Consume<\/span>-<\/span>DrawingPadDemo<\/span> --<\/span>template<\/span>=<\/span>basic<\/span> --<\/span>vdom<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In your new application you will find a folder named “components”.  Within this folder, you should now create a new folder named “drawingpad-component” as can be seen from the image below.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
You can now unzip the content of the drawingpad-component_1.0.0.zip<\/em> file into this new folder. <\/p>\n\n\n\n
With that, you have access to the component in this new application, and it can be easily added to any page, for instance like below:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> { <\/span>h<\/span> } <\/span>from<\/span> <\/span>"preact"<\/span>;<\/span><\/span>\nimport<\/span> { <\/span>customElement<\/span>, <\/span>GlobalProps<\/span> } <\/span>from<\/span> <\/span>'ojs\/ojvcomponent'<\/span>;<\/span><\/span>\nimport<\/span> { <\/span>DrawingpadComponent<\/span> } <\/span>from<\/span> <\/span>'drawingpad-component\/loader'<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>function<\/span> <\/span>Content<\/span>() {<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"oj-web-applayout-max-width oj-web-applayout-content"<\/span>><\/span><\/span>\n      <\/span><<\/span>DrawingpadComponent<\/span>\/><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  );<\/span><\/span>\n};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Other solutions:<\/h4>\n\n\n\n
In a next post I will explain how to re-use the component via the Oracle Component Exchange and via a Content Delivery Network (CDN).<\/p>","protected":false},"excerpt":{"rendered":"
In my previous posts I explained a bit about Oracle JET VComponents. By now you should know the basics of how they work, and how they can be used in…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[69],"tags":[4,5,70,81,72,71],"class_list":["post-3243","post","type-post","status-publish","format-standard","hentry","category-oracle-jet","tag-bohort","tag-luc-bors","tag-oracle-jet","tag-reuse","tag-vcomponent","tag-vdom"],"_links":{"self":[{"href":"https:\/\/www.bohort.nl\/en\/wp-json\/wp\/v2\/posts\/3243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bohort.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bohort.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bohort.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bohort.nl\/en\/wp-json\/wp\/v2\/comments?post=3243"}],"version-history":[{"count":4,"href":"https:\/\/www.bohort.nl\/en\/wp-json\/wp\/v2\/posts\/3243\/revisions"}],"predecessor-version":[{"id":3250,"href":"https:\/\/www.bohort.nl\/en\/wp-json\/wp\/v2\/posts\/3243\/revisions\/3250"}],"wp:attachment":[{"href":"https:\/\/www.bohort.nl\/en\/wp-json\/wp\/v2\/media?parent=3243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bohort.nl\/en\/wp-json\/wp\/v2\/categories?post=3243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bohort.nl\/en\/wp-json\/wp\/v2\/tags?post=3243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}