diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index 07b293ee..341c92ba 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -10,7 +10,8 @@ noTitleIndex: true # Customize the UI -The official UI uses the `.xml` extension to prevent build tools or hot-reload mechanisms (such as Live Server, Five Server, or bundlers) from processing or overwriting these files. **Despite the extension, the content is HTML**, not XML. +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. You can choose from [legacy UI definition format](#legacy-ui-definition-format) or [new UI definition format](#new-ui-definition-format). @@ -136,7 +137,7 @@ Please take a look at the ` ``` -The first line, `const camera = document.currentScript.currentDMCamera;`, allows you to access the `camera` object (an instance of `CameraEnhancer`). If you wish to access other objects—such as an instance of `CaptureVisionRouter`—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.exportToUI.cvRouter` within your business logic, then get it back in UI definition. ```diff // in business logic @@ -348,10 +349,13 @@ elTakePhoto.addEventListener('pointerdown', async()=>{ ### Using TypeScript in UI Definition +When writing large amounts of code, you'll likely want the capabilities of TypeScript to provide intelligent code suggestions and catch errors promptly at compile time. The UI definition accepts external scripts and styles, so you can easily write code in TypeScript and reference the generated JavaScript after running `tsc`. +> Since the following steps require extensive rewriting of JavaScript to TypeScript, we provide [a sample](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition) for your reference. You can copy the pre-modified [dce.ui.ts](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition/dce.ui.ts); we've also [automated](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition/build-dce-ui.mjs) the `manually add the code` step. + ```ts -// in myui.ts +// in dce.ui.ts // You must use `import type`; otherwise, // the entire 'dynamsoft-barcode-reader-bundle' package @@ -363,7 +367,7 @@ The UI definition accepts external scripts and styles, so you can easily write c // // Some types have been renamed to versions with underscores // to avoid conflicts with variables imported from `exportToUI`. -// You can also change the names of the variables imported from `exportToUI`. +// You can also choose to change the names of the variables imported from `exportToUI` instead. import type { CameraEnhancer, CaptureVisionRouter, @@ -384,45 +388,49 @@ const { cvRouter, beep, vibrate, handleBarcodeText } = (camera as any).exportToU ``` ```cmd -.\node_modules\.bin\tsc myui.ts --outDir myui --module umd --moduleResolution node --skipLibCheck +npx tsc dce.ui.ts --outDir some/where --module umd --moduleResolution node --skipLibCheck +``` + +You need to manually add the code to `some/where/dce.ui.js`: + +```diff + function (factory) { + if (typeof module === "object" && typeof module.exports === "object") { + var v = factory(require, exports); + if (v !== undefined) module.exports = v; + } + else if (typeof define === "function" && define.amd) { + define(["require", "exports"], factory); + } ++ else { ++ factory(null, {}); ++ } + } ``` +> When TypeScript compiles to UMD format, the default wrapper only handles CommonJS and AMD module environments. If your script needs to be loaded directly in the browser via a ` + ``` Relative URLs are resolved using the base URI of the document, not the location of the UI definition file. Therefore, if you want to use this UI definition file in multiple locations, you can import the JS and CSS using absolute paths, or simply inline them. ```html +
- - -``` - -Manually add: - -```diff -function (factory) { - if (typeof module === "object" && typeof module.exports === "object") { - var v = factory(require, exports); - if (v !== undefined) module.exports = v; - } - else if (typeof define === "function" && define.amd) { - define(["require", "exports"], factory); -+ }else{ -+ factory(null, {}); -+ } -} + + + + ``` - > When TypeScript compiles to UMD format, the default wrapper only handles CommonJS and AMD module environments. If your script needs to be loaded directly in the browser via a ` + ``` diff --git a/release-notes/dbr-rn-11.md b/release-notes/dbr-rn-11.md index 63a51096..689d0819 100644 --- a/release-notes/dbr-rn-11.md +++ b/release-notes/dbr-rn-11.md @@ -37,6 +37,9 @@ noTitleIndex: true | Versions | Available Editions | | -------- | ------------------ | +| 11.6.3000 | [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"} | | 11.6.1000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1161000-07232026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1161000-07232026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1161000-07232026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1161000-07232026){:target="_blank"} | ## 11.4 (02/05/2026) @@ -69,9 +72,9 @@ noTitleIndex: true | Versions | Available Editions | | -------- | ------------------ | -| 11.4.3000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1143000-06302026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1143000-06302026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1143000-06302026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1143000-06302026){:target="_blank"} | -| 11.4.2001 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1142001-04172026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1142001-04172026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1142001-04172026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1142001-04172026){:target="_blank"} | -| 11.4.2000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1142000-03182026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1142000-03182026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1142000-03182026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1142000-03182026){:target="_blank"} | +| 11.4.3000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1143000-06302026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1143000-06302026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1143000-06302026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1143000-06302026){:target="_blank"} / [Android]({{ site.android_release_notes}}android-11.html#1143000-07072026){:target="_blank"} / [iOS]({{ site.oc_release_notes }}ios-11.html#1143000-07072026){:target="_blank"} / [JavaScript]({{ site.js_release_notes}}js-11.html#1143000-07022026){:target="_blank"}| +| 11.4.2001 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1142001-04172026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1142001-04172026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1142001-04172026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1142001-04172026){:target="_blank"} / [JavaScript]({{ site.js_release_notes}}js-11.html#1142001-04242026){:target="_blank"} | +| 11.4.2000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1142000-03182026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1142000-03182026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1142000-03182026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1142000-03182026){:target="_blank"} / [JavaScript]({{ site.js_release_notes}}js-11.html#1142000-04212026){:target="_blank"} | | 11.4.1000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1141000-02052026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1141000-02052026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1141000-02052026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1141000-02052026){:target="_blank"} / [Android]({{ site.android_release_notes}}android-11.html#1141000-02052026){:target="_blank"} / [iOS]({{ site.oc_release_notes }}ios-11.html#1141000-02052026){:target="_blank"} | ## 11.2 (10/14/2025)