diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index 341c92ba..117167b4 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -13,6 +13,8 @@ noTitleIndex: true The official UI uses the `.xml` extension to prevent build tools or hot-reload mechanisms (such as Live Server, Five Server, or Hot Module Replacement) from processing or overwriting these files. **Despite the extension, the content is HTML**, not XML. In reality, you can use any file extension, provided the browser can correctly retrieve the file's text content. +> In the bottom right corner of the VSCode graphical interface, you can click "Select Language Mode" to switch any file to HTML mode. + You can choose from [legacy UI definition format](#legacy-ui-definition-format) or [new UI definition format](#new-ui-definition-format). ## Legacy UI Definition Format @@ -137,7 +139,7 @@ Please take a look at the ` ``` -The first line, `const camera = document.currentScript.currentDMCamera;`, allows you to access the `camera` object. When the camera is bound to the UI definition file, it will automatically assign the value `script.currentDMCamera = camera` to all script tags in the UI definition. If you wish to access other objects—such as `cvRouter`—you can assign `camera.exportToUI.cvRouter` within your business logic, then get it back in UI definition. +The first line, `const camera = document.currentScript.currentDMCamera;`, allows you to access the `camera` object. When the camera is bound to the UI definition file, it will automatically assign the value `script.currentDMCamera = camera` to all script tags in the UI definition. If you wish to access other objects—such as `cvRouter`—you can assign `camera.uiContext.cvRouter` within your business logic, then get it back in UI definition. ```diff // in business logic @@ -146,7 +148,7 @@ The first line, `const camera = document.currentScript.currentDMCamera;`, allows /* other logic */ const cvRouter = await CaptureVisionRouter.createInstance(); const camera = await CameraEnhancer.createInstance('url/to/my/dce.ui.v5.xml'); -+ camera.exportToUI = { cvRouter }; ++ camera.uiContext = { cvRouter }; cameraContainer.append(camera.getUIElement()); cvRouter.setInput(camera); ``` @@ -156,7 +158,7 @@ The first line, `const camera = document.currentScript.currentDMCamera;`, allows (()=>{ const camera = document.currentScript.currentDMCamera; -+ const cvRouter = camera.exportToUI.cvRouter; ++ const cvRouter = camera.uiContext.cvRouter; /* other logic */ })(); ``` @@ -228,13 +230,13 @@ Import `beep` and `vibrate` from the business logic, listen for barcode results import { CaptureVisionRouter, CameraEnhancer, beep, vibrate } from 'dynamsoft-barcode-reader-bundle'; /* other logic */ -camera.exportToUI = { cvRouter, beep, vibrate }; +camera.uiContext = { cvRouter, beep, vibrate }; ``` ```js // in ui.xml -const { cvRouter, beep, vibrate } = camera.exportToUI; +const { cvRouter, beep, vibrate } = camera.uiContext; /* other logic */ cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (result.barcodeResultItems?.length) { @@ -303,7 +305,7 @@ Listen for the `pointerdown` event on the "take photo" button. ```js // in ui.xml -const { cvRouter, beep, vibrate, handleBarcodeText } = camera.exportToUI; +const { cvRouter, beep, vibrate, handleBarcodeText } = camera.uiContext; elTakePhoto.addEventListener('pointerdown', async()=>{ let captureResult = await cvRouter.capture(camera.getFrame()); @@ -322,7 +324,7 @@ elTakePhoto.addEventListener('pointerdown', async()=>{ /* other logic */ const cvRouter = await CaptureVisionRouter.createInstance(); const camera = await CameraEnhancer.createInstance('url/to/my/dce.ui.v5.xml'); - camera.exportToUI = { + camera.uiContext = { cvRouter, beep, vibrate, + handleBarcodeText: handleBarcodeText.bind(this) }; @@ -364,23 +366,15 @@ The UI definition accepts external scripts and styles, so you can easily write c // Since the 'dynamsoft-barcode-reader-bundle' package // has already been imported in the business logic, // importing it again in the UI definition is unnecessary. -// -// Some types have been renamed to versions with underscores -// to avoid conflicts with variables imported from `exportToUI`. -// You can also choose to change the names of the variables imported from `exportToUI` instead. -import type { - CameraEnhancer, - CaptureVisionRouter, - beep as _beep, - vibrate as _vibrate, -} from 'dynamsoft-barcode-reader-bundle'; +import type * as Types from 'dynamsoft-barcode-reader-bundle'; +type CaptureVisionRouter = Types.CaptureVisionRouter; +type CameraEnhancer = Types.CameraEnhancer; const camera = (document.currentScript as any).currentDMCamera as CameraEnhancer; -const { cvRouter, beep, vibrate, handleBarcodeText } = (camera as any).exportToUI as { +const { beep, vibrate } = (camera as any).uiContext as (typeof Types); +const { cvRouter, handleBarcodeText } = (camera as any).uiContext as { cvRouter: CaptureVisionRouter; - beep: typeof _beep; - vibrate: typeof _vibrate; handleBarcodeText: (text: string) => void; }; @@ -468,7 +462,7 @@ const currentScript = getCurrentModuleScript(); const camera = (currentScript as any).currentDMCamera as CameraEnhancer; -const { cvRouter, beep, vibrate, handleBarcodeText } = (camera as any).exportToUI as { +const { cvRouter, beep, vibrate, handleBarcodeText } = (camera as any).uiContext as { cvRouter: CaptureVisionRouter; beep: typeof _beep; vibrate: typeof _vibrate; diff --git a/release-notes/dbr-rn-11.md b/release-notes/dbr-rn-11.md index 2c97672d..7938b6eb 100644 --- a/release-notes/dbr-rn-11.md +++ b/release-notes/dbr-rn-11.md @@ -37,6 +37,7 @@ noTitleIndex: true | Versions | Available Editions | | -------- | ------------------ | +| 11.6.3200 | [JavaScript]({{ site.js_release_notes}}js-11.html#1163200-09072026){:target="_blank"} | | 11.6.3000 | [JavaScript]({{ site.js_release_notes}}js-11.html#1163000-08252026){:target="_blank"} / [C++]({{ site.cpp_release_notes}}cpp-11.html#1163000-08202026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1163000-08202026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1163000-08202026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1163000-08202026){:target="_blank"} | | 11.6.2100 | [JavaScript]({{ site.js_release_notes}}js-11.html#1162100-08182026){:target="_blank"} | | 11.6.2000 | [JavaScript]({{ site.js_release_notes}}js-11.html#1162000-08132026){:target="_blank"} / [Android]({{ site.android_release_notes}}android-11.html#1162000-08142026){:target="_blank"} / [iOS]({{ site.oc_release_notes }}ios-11.html#1162000-08142026){:target="_blank"} / [React Native]({{ site.react_native_release_notes }}react-native-11.html#1162000-08252026){:target="_blank"} |