{"id":3206,"date":"2022-10-12T11:50:45","date_gmt":"2022-10-12T11:50:45","guid":{"rendered":"https:\/\/www.bohort.nl\/?p=3206"},"modified":"2023-05-05T12:39:21","modified_gmt":"2023-05-05T12:39:21","slug":"vcomp-intro","status":"publish","type":"post","link":"https:\/\/www.bohort.nl\/en\/2022\/10\/12\/vcomp-intro\/","title":{"rendered":"Creating a simple Oracle JET VComponent"},"content":{"rendered":"

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

Oracle JavaScript Extension Toolkit (Oracle JET) simplifies the process of building modern web applications through its comprehensive set of open-source JavaScript libraries. A major feature of Oracle JET is the use of VComponents, which enable developers to create modular, maintainable, and high-performance applications using the Virtual DOM (VDOM) architecture. In this blog post, I will walk you through the process of creating a VComponent in Oracle JET step by step.<\/p>\n\n\n\n

Prerequisites<\/h4>\n\n\n\n

Before you start creating a VComponent in Oracle JET, ensure that you have the following tools and resources:<\/p>\n\n\n\n

    \n
  1. Node.js and npm (Node Package Manager) installed on your development machine.<\/li>\n\n\n\n
  2. Oracle JET CLI (Command Line Interface) installed globally using the command: npm install -g @oracle\/ojet-cli<\/code><\/li>\n\n\n\n
  3. An Oracle JET application created using the command: npx @oracle\/ojet-cli create componentDemo --template=basic --vdom<\/code><\/li>\n<\/ol>\n\n\n\n

    Step 1: Create a new VComponent<\/h4>\n\n\n\n

    npx @oracle\/ojet-cli create component demo-component <\/code><\/p>\n\n\n\n

    This command will generate a new VComponent named ‘demo-component<\/code>‘ with the necessary files, including a TypeScript file (demo-component.tsx<\/code>) and a CSS file (demo-component-styles.css<\/code>).<\/p>\n\n\n\n

    Step 2: Define the VComponent’s structure and appearance<\/h4>\n\n\n\n

    Open the demo-component.tsx<\/code> file, and you’ll find a basic structure for your VComponent. You can now define the component’s structure and appearance using JSX syntax. For example, you can create a simple counter component.<\/p>\n\n\n\n

    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> { <\/span>customElement<\/span>, <\/span>ExtendGlobalProps<\/span> } <\/span>from<\/span> <\/span>"ojs\/ojvcomponent"<\/span>;<\/span><\/span>\nimport<\/span> { <\/span>h<\/span>, <\/span>Component<\/span>, <\/span>ComponentChild<\/span> } <\/span>from<\/span> <\/span>"preact"<\/span>;<\/span><\/span>\nimport<\/span> <\/span>componentStrings<\/span> = <\/span>require<\/span>(<\/span>"ojL10n!.\/resources\/nls\/demo-component-strings"<\/span>);<\/span><\/span>\nimport<\/span> <\/span>"css!.\/demo-component-styles.css"<\/span>;<\/span><\/span>\n<\/span>\ntype<\/span> <\/span>Props<\/span> = {<\/span><\/span>\n  <\/span>initialValue<\/span>?: <\/span>number<\/span>;<\/span><\/span>\n  <\/span>value<\/span>?: <\/span>number<\/span>;<\/span><\/span>\n  <\/span>incrementBy<\/span>: <\/span>number<\/span>;<\/span><\/span>\n};<\/span><\/span>\n<\/span>\ntype<\/span> <\/span>State<\/span> = {<\/span><\/span>\n  <\/span>counter<\/span>: <\/span>number<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n\/**<\/span><\/span>\n * <\/span><\/span>\n * <\/span>@ojmetadata<\/span> version "1.0.0"<\/span><\/span>\n * <\/span>@ojmetadata<\/span> displayName "A user friendly, translatable name of the component"<\/span><\/span>\n * <\/span>@ojmetadata<\/span> description "A translatable high-level description for the component"<\/span><\/span>\n*\/<\/span><\/span>\n<\/span>\n@<\/span>customElement<\/span>(<\/span>"demo-component"<\/span>)<\/span><\/span>\nexport<\/span> <\/span>class<\/span> <\/span>DemoComponent<\/span> <\/span>extends<\/span> <\/span>Component<\/span> < <\/span>ExtendGlobalProps<\/span> < <\/span>Props<\/span> >, <\/span>State<\/span>> {<\/span><\/span>\n <\/span><\/span>\n  <\/span>static<\/span> <\/span>defaultProps<\/span>: <\/span>Partial<\/span> < <\/span>Props<\/span> > = {<\/span><\/span>\n    <\/span>initialValue:<\/span>0<\/span>,<\/span><\/span>\n    <\/span>value:<\/span>null<\/span>,<\/span><\/span>\n    <\/span>incrementBy:<\/span> <\/span>1<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nprivate<\/span> <\/span>_increment<\/span> = () <\/span>=><\/span> {<\/span><\/span>\n  <\/span>this<\/span>.<\/span>setState<\/span>({<\/span><\/span>\n    <\/span>counter:<\/span> <\/span>this<\/span>.<\/span>state<\/span>.<\/span>counter<\/span> + <\/span>this<\/span>.<\/span>props<\/span>.<\/span>incrementBy<\/span><\/span>\n  });<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nprivate<\/span> <\/span>_decrement<\/span> = () <\/span>=><\/span> {<\/span><\/span>\n  <\/span>this<\/span>.<\/span>setState<\/span>({<\/span><\/span>\n    <\/span>counter:<\/span> <\/span>this<\/span>.<\/span>state<\/span>.<\/span>counter<\/span> - <\/span>this<\/span>.<\/span>props<\/span>.<\/span>incrementBy<\/span><\/span>\n  });<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nprivate<\/span> <\/span>_reset<\/span> = () <\/span>=><\/span> {<\/span><\/span>\n  <\/span>this<\/span>.<\/span>setState<\/span>({<\/span><\/span>\n    <\/span>counter:<\/span> <\/span>this<\/span>.<\/span>props<\/span>.<\/span>initialValue<\/span><\/span>\n  });<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nprivate<\/span> <\/span>getValue<\/span>(){<\/span><\/span>\n<\/span>\n  <\/span>let<\/span> <\/span>currentValue<\/span>;<\/span><\/span>\n  <\/span>if<\/span>(<\/span>this<\/span>.<\/span>state<\/span>.<\/span>counter<\/span>===<\/span>undefined<\/span>){<\/span><\/span>\n    <\/span>this<\/span>.<\/span>setState<\/span>({<\/span><\/span>\n    <\/span>counter:<\/span> <\/span>this<\/span>.<\/span>props<\/span>.<\/span>initialValue<\/span><\/span>\n  })}<\/span><\/span>\n  <\/span>currentValue<\/span> = <\/span>this<\/span>.<\/span>state<\/span>.<\/span>counter<\/span>;<\/span><\/span>\n  <\/span>return<\/span> <\/span>currentValue<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nrender<\/span>(<\/span>props<\/span>: <\/span>Props<\/span>, <\/span>state<\/span>: <\/span>State<\/span>): <\/span>ComponentChild<\/span> {<\/span><\/span>\n  <\/span>const<\/span> <\/span>current<\/span> = <\/span>this<\/span>.<\/span>getValue<\/span>();<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <<\/span>div<\/span>><\/span><\/span>\n      <<\/span>button<\/span> <\/span>class<\/span>=<\/span>"red"<\/span> <\/span>onClick<\/span>={this.<\/span>_decrement<\/span>}>-<\/<\/span>button<\/span>><\/span><\/span>\n      <>{<\/span>current<\/span>}<\/><\/span><\/span>\n      <<\/span>button<\/span> <\/span>class<\/span>=<\/span>"green"<\/span> <\/span>onClick<\/span>={this.<\/span>_increment<\/span>}>+<\/<\/span>button<\/span>><\/span><\/span>\n      <<\/span>button<\/span> <\/span>onClick<\/span>={this.<\/span>_reset<\/span>}><\/span>reset<\/span><\/<\/span>button<\/span>><\/span><\/span>\n<\/span>\n    <\/<\/span>div<\/span>><\/span><\/span>\n  );  }<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
    In this example, we define a simple counter VComponent with two buttons for incrementing and decrementing the count. We also define a Props<\/code> interface to define the initial count value and a State<\/code> interface to manage the component’s state.<\/p>\n\n\n\n
    Step 3: Style the VComponent<\/h4>\n\n\n\n
    Open the demo-component-styles.css<\/code> file to apply custom styling to your VComponent. For instance, you can add the following CSS rules to style the counter component:<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    button<\/span> {<\/span><\/span>\n  <\/span>background-color<\/span>: <\/span>#007bff<\/span>;<\/span><\/span>\n  <\/span>color<\/span>: <\/span>white<\/span>;<\/span><\/span>\n  <\/span>border<\/span>: <\/span>none<\/span>;<\/span><\/span>\n  <\/span>padding<\/span>: <\/span>8px<\/span> <\/span>16px<\/span>;<\/span><\/span>\n  <\/span>margin<\/span>: <\/span>0<\/span> <\/span>8px<\/span>;<\/span><\/span>\n  <\/span>cursor<\/span>: <\/span>pointer<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nbutton.red<\/span> {<\/span><\/span>\n  <\/span>background-color<\/span>: <\/span>red<\/span>;<\/span><\/span>\n  <\/span><\/span>\n}<\/span><\/span>\nbutton.green<\/span> {<\/span><\/span>\n  <\/span>background-color<\/span>: <\/span>green<\/span>;<\/span><\/span>\n  <\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Step 4: Use the VComponent in your application<\/h4>\n\n\n\n
    To use your newly created VComponent, open the TypeScript file of the view where you want to include it, such as src\/ts\/views\/dashboard.tsx<\/code>. First, import the VComponent:<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> { <\/span>DemoComponent<\/span> } <\/span>from<\/span> <\/span>'demo-component\/loader'<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Next, include the VComponent within the render method of the view by adding the custom JSX element. Remember to pass the required properties. In our example, we need to pass the initialValue, and the incrementBy<\/code> prop to the demo-component<\/code>:<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> { <\/span>h<\/span>, <\/span>Component<\/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>DemoComponent<\/span> } <\/span>from<\/span> <\/span>'demo-component\/loader'<\/span><\/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>DemoComponent<\/span> <\/span>initialValue<\/span>=<\/span>{<\/span>11<\/span>}<\/span> <\/span>incrementBy<\/span>=<\/span>{<\/span>1<\/span>}<\/span>\/><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  );<\/span><\/span>\n};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Step 5: Run and test the application<\/h4>\n\n\n\n
    Now that you have created and included the VComponent in your application, it’s time to run and test it. In your terminal, navigate to your Oracle JET application’s root folder and execute the following command: ojet serve<\/code><\/p>\n\n\n\n
    The application will open in your default web browser. Navigate to the view where you included the demo-component<\/code>, and you should see the counter VComponent with its buttons functioning as expected.<\/p>\n\n\n\n