{"id":3233,"date":"2022-11-25T14:30:20","date_gmt":"2022-11-25T14:30:20","guid":{"rendered":"https:\/\/www.bohort.nl\/?p=3233"},"modified":"2023-05-10T14:40:22","modified_gmt":"2023-05-10T14:40:22","slug":"creating-a-drawingpad-oracle-jet-vcomponent","status":"publish","type":"post","link":"https:\/\/www.bohort.nl\/en\/2022\/11\/25\/creating-a-drawingpad-oracle-jet-vcomponent\/","title":{"rendered":"Creating a DrawingPad Oracle JET VComponent"},"content":{"rendered":"

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

Oracle JavaScript Extension Toolkit (Oracle JET) empowers developers to build efficient and responsive web applications. It leverages the Virtual DOM (VDOM) architecture, which allows for the creation of VComponents. In this post, I will guide you through the process of creating a VComponent in Oracle JET that includes a drawing pad.<\/p>\n\n\n\n

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

Ensure that you have Node.js and npm installed on your computer and that you have installed Oracle JET CLI globally. You should also have an Oracle JET application set up and ready for development.<\/p>\n\n\n\n

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

Navigate to your Oracle JET application’s root folder and create a new VComponent using the Oracle JET CLI command: <\/p>\n\n\n\n

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

Step 2: Define the VComponent<\/h4>\n\n\n\n

Now, let’s define the structure of our drawing pad VComponent. Open the drawingPad-component.tsx<\/code> file and define the component using JSX syntax. Here is the entire code for the drawing pad component. Obviously you can modify to suit your needs, but you can also just copy the code below and paste it :<\/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>"ojs\/ojbutton"<\/span>;<\/span><\/span>\n<\/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\/drawingpad-component-strings"<\/span>);<\/span><\/span>\nimport<\/span> <\/span>"css!.\/drawingpad-component-styles.css"<\/span>;<\/span><\/span>\n<\/span>\ntype<\/span> <\/span>Props<\/span> = {<\/span><\/span>\n  <\/span>footerText<\/span>?: <\/span>string<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n<\/span>\ntype<\/span> <\/span>State<\/span> = {<\/span><\/span>\n  <\/span>drawing<\/span>: <\/span>boolean<\/span><\/span>\n  <\/span>context<\/span>?: <\/span>CanvasRenderingContext2D<\/span>;<\/span><\/span>\n};<\/span><\/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>customElement<\/span>(<\/span>"drawingpad-component"<\/span>)<\/span><\/span>\nexport<\/span> <\/span>class<\/span> <\/span>DrawingpadComponent<\/span> <\/span>extends<\/span> <\/span>Component<\/span> < <\/span>ExtendGlobalProps<\/span> < <\/span>Props<\/span> >, <\/span>State<\/span>> {<\/span><\/span>\n  <\/span><\/span>\nprivate<\/span> <\/span>canvasRef<\/span>: <\/span>any<\/span> = <\/span>null<\/span>;<\/span><\/span>\n<\/span>\nconstructor<\/span>(<\/span>props<\/span>: <\/span>Readonly<\/span><{}>) {<\/span><\/span>\n  <\/span>super<\/span>(<\/span>props<\/span>);<\/span><\/span>\n  <\/span>this<\/span>.<\/span>state<\/span> = { <\/span>drawing:<\/span> <\/span>false<\/span> };<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n <\/span>render<\/span>(<\/span>props<\/span>: <\/span>Props<\/span>, <\/span>state<\/span>: <\/span>State<\/span>): <\/span>ComponentChild<\/span> {<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <<\/span>div<\/span>><\/span><\/span>\n    <<\/span>canvas<\/span> <\/span>width<\/span>={<\/span>500<\/span>} <\/span>height<\/span>={<\/span>500<\/span>}<\/span><\/span>\n      <\/span>ref<\/span>={(ref) => (this.<\/span>canvasRef<\/span> = <\/span>ref<\/span>)}<\/span><\/span>\n      <\/span>onMouseDown<\/span>={this.<\/span>handleMouseDown<\/span>}<\/span><\/span>\n      <\/span>onMouseUp<\/span>={this.<\/span>handleMouseUp<\/span>}<\/span><\/span>\n      <\/span>onMouseMove<\/span>={this.<\/span>handleMouseMove<\/span>}<\/span><\/span>\n    \/><\/span><\/span>\n<\/span>\n    <<\/span>oj<\/span>-<\/span>button<\/span>  <\/span>onojAction<\/span>={this.<\/span>clearCanvas<\/span>}><\/span>Clear<\/span><\/<\/span>oj<\/span>-<\/span>button<\/span>><\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span>\n  );  }<\/span><\/span>\n  <\/span><\/span>\ncomponentDidMount<\/span>() {<\/span><\/span>\n  <\/span>this<\/span>.<\/span>setState<\/span>({<\/span><\/span>\n    <\/span>context:<\/span> <\/span>this<\/span>.<\/span>canvasRef<\/span>.<\/span>getContext<\/span>(<\/span>'2d'<\/span>),<\/span><\/span>\n    <\/span>drawing:<\/span> <\/span>false<\/span><\/span>\n  });<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nprivate<\/span> <\/span>clearCanvas<\/span> = () <\/span>=><\/span> {<\/span><\/span>\n  <\/span>const<\/span> <\/span>context<\/span> = <\/span>this<\/span>.<\/span>state<\/span>.<\/span>context<\/span>;<\/span><\/span>\n  <\/span>if<\/span> (<\/span>context<\/span>) {<\/span><\/span>\n    <\/span>context<\/span>.<\/span>clearRect<\/span>(<\/span>0<\/span>, <\/span>0<\/span>, <\/span>this<\/span>.<\/span>canvasRef<\/span>.<\/span>width<\/span>, <\/span>this<\/span>.<\/span>canvasRef<\/span>.<\/span>height<\/span>);<\/span><\/span>\n  }<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nprivate<\/span> <\/span>handleMouseDown<\/span> = (<\/span>event<\/span>: <\/span>MouseEvent<\/span>) <\/span>=><\/span> {<\/span><\/span>\n  <\/span>const<\/span> <\/span>rect<\/span> = <\/span>this<\/span>.<\/span>canvasRef<\/span>.<\/span>getBoundingClientRect<\/span>();<\/span><\/span>\n  <\/span>const<\/span> <\/span>x<\/span> = <\/span>event<\/span>.<\/span>clientX<\/span> - <\/span>rect<\/span>.<\/span>left<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>y<\/span> = <\/span>event<\/span>.<\/span>clientY<\/span> - <\/span>rect<\/span>.<\/span>top<\/span>;<\/span><\/span>\n  <\/span>this<\/span>.<\/span>setState<\/span>({ <\/span>drawing:<\/span> <\/span>true<\/span> });<\/span><\/span>\n  <\/span>const<\/span> <\/span>context<\/span> = <\/span>this<\/span>.<\/span>state<\/span>.<\/span>context<\/span>;<\/span><\/span>\n  <\/span>if<\/span> (<\/span>context<\/span>) {<\/span><\/span>\n    <\/span>context<\/span>.<\/span>beginPath<\/span>();<\/span><\/span>\n    <\/span>context<\/span>.<\/span>moveTo<\/span>(<\/span>x<\/span>, <\/span>y<\/span>);<\/span><\/span>\n  }<\/span><\/span>\n};<\/span><\/span>\n<\/span>\n<\/span>\nprivate<\/span> <\/span>handleMouseUp<\/span> = (<\/span>event<\/span>: <\/span>MouseEvent<\/span>) <\/span>=><\/span> {<\/span><\/span>\n  <\/span>this<\/span>.<\/span>setState<\/span>({ <\/span>drawing:<\/span> <\/span>false<\/span> });<\/span><\/span>\n<\/span>\n};<\/span><\/span>\n<\/span>\nprivate<\/span> <\/span>handleMouseMove<\/span> = (<\/span>event<\/span>: <\/span>MouseEvent<\/span>) <\/span>=><\/span> {<\/span><\/span>\n  <\/span>if<\/span> (!<\/span>this<\/span>.<\/span>state<\/span>.<\/span>drawing<\/span>) <\/span>return<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>rect<\/span> = <\/span>this<\/span>.<\/span>canvasRef<\/span>.<\/span>getBoundingClientRect<\/span>();<\/span><\/span>\n  <\/span>this<\/span>.<\/span>draw<\/span>(<\/span>event<\/span>.<\/span>clientX<\/span> - <\/span>rect<\/span>.<\/span>left<\/span>, <\/span>event<\/span>.<\/span>clientY<\/span> - <\/span>rect<\/span>.<\/span>top<\/span>);<\/span><\/span>\n};<\/span><\/span>\n<\/span>\ndraw<\/span>(<\/span>x<\/span>: <\/span>number<\/span>, <\/span>y<\/span>: <\/span>number<\/span>) {<\/span><\/span>\n  <\/span>const<\/span> <\/span>context<\/span> = <\/span>this<\/span>.<\/span>state<\/span>.<\/span>context<\/span>;<\/span><\/span>\n  <\/span>if<\/span> (<\/span>context<\/span> && <\/span>this<\/span>.<\/span>state<\/span>.<\/span>drawing<\/span>) {<\/span><\/span>\n    <\/span>context<\/span>.<\/span>lineTo<\/span>(<\/span>x<\/span>, <\/span>y<\/span>);<\/span><\/span>\n    <\/span>context<\/span>.<\/span>stroke<\/span>();<\/span><\/span>\n  }<\/span><\/span>\n}<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
In this example, we’re creating a canvas and implementing basic drawing functionality. When the mouse button is pressed down, drawing<\/code> becomes true<\/code>, and when the button is released, drawing<\/code> becomes false<\/code>. During mouse movement, if drawing<\/code> is true<\/code>, we draw on the canvas.<\/p>\n\n\n\n
Step 3: Style the VComponent<\/h4>\n\n\n\n
You can add custom styling to your VComponent in the drawingPad.css<\/code> file. For instance, you might want to define the size and border of the drawing pad:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
canvas<\/span> {<\/span><\/span>\n  <\/span>width<\/span>: <\/span>500px<\/span>;<\/span><\/span>\n  <\/span>height<\/span>: <\/span>500px<\/span>;<\/span><\/span>\n  <\/span>border<\/span>: <\/span>1px<\/span> <\/span>solid<\/span> <\/span>black<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Step 4: Use the VComponent<\/h4>\n\n\n\n
To use your new DrawingPad VComponent, import it into the desired view, and include it in the render method:<\/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>div<\/span> <\/span>class<\/span>=<\/span>"oj-web-applayout-max-width oj-web-applayout-content"<\/span>><\/span><\/span>\n      <<\/span>DrawingpadComponent<\/span>\/><\/span><\/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, I added the DrawingpadComponent<\/code> component to the index.tsx<\/code> view. Adjust according to your application structure and the specific view where you want to include the drawing pad. <\/p>\n\n\n\n