From 170469c67de79b477f7016e2b3af8a5d8d577181 Mon Sep 17 00:00:00 2001 From: Wirachot Date: Tue, 10 Feb 2026 17:31:11 +0700 Subject: [PATCH 1/2] Migrate Image View --- AppBuilder/platform/plugins/included/index.js | 3 +- .../included/view_image/FNAbviewimage.js | 124 ++++++++++++++++++ .../view_image/FNAbviewimageComponent.js | 59 +++++++++ 3 files changed, 185 insertions(+), 1 deletion(-) create mode 100644 AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js create mode 100644 AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js diff --git a/AppBuilder/platform/plugins/included/index.js b/AppBuilder/platform/plugins/included/index.js index 1d707c93..9c1c7100 100644 --- a/AppBuilder/platform/plugins/included/index.js +++ b/AppBuilder/platform/plugins/included/index.js @@ -1,7 +1,8 @@ +import viewImage from "./view_image/FNAbviewimage.js"; import viewList from "./view_list/FNAbviewlist.js"; import viewTab from "./view_tab/FNAbviewtab.js"; -const AllPlugins = [viewTab, viewList]; +const AllPlugins = [viewTab, viewList, viewImage]; export default { load: (AB) => { diff --git a/AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js b/AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js new file mode 100644 index 00000000..58189171 --- /dev/null +++ b/AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js @@ -0,0 +1,124 @@ +import FNAbviewimageComponent from "./FNAbviewimageComponent.js"; + + +// FNAbviewimage Web +// A web side import for an ABView. +// +export default function FNAbviewimage({ + /*AB,*/ + ABViewWidgetPlugin, + ABViewComponentPlugin, + ABViewContainer +}) { + const ABAbviewimageComponent = FNAbviewimageComponent({ ABViewComponentPlugin }); + +const ABViewImagePropertyComponentDefaults = { + filename: "", + width: 200, + height: 100, +}; + +const ABViewDefaults = { + key: "image", // {string} unique key for this view + icon: "picture-o", // {string} fa-[icon] reference for this view + labelKey: "Image", // {string} the multilingual label key for the class label +}; + +class ABViewImageCore extends ABViewWidgetPlugin { + constructor(values, application, parent, defaultValues) { + super(values, application, parent, defaultValues || ABViewDefaults); + } + + static common() { + return ABViewDefaults; + } + + static defaultValues() { + return ABViewImagePropertyComponentDefaults; + } + + /// + /// Instance Methods + /// + + /** + * @method componentList + * return the list of components available on this view to display in the editor. + */ + componentList() { + return []; + } + + /** + * @property datacollection + * return data source + * NOTE: this view doesn't track a DataCollection. + * @return {ABDataCollection} + */ + get datacollection() { + return null; + } + + /** + * @method fromValues() + * + * initialze this object with the given set of values. + * @param {obj} values + */ + fromValues(values) { + super.fromValues(values); + + // convert from "0" => 0 + this.settings.width = parseInt( + this.settings.width || ABViewImagePropertyComponentDefaults.width + ); + this.settings.height = parseInt( + this.settings.height || ABViewImagePropertyComponentDefaults.height + ); + } +}; + + + +return class ABViewImage extends ABViewImageCore { + +/** + * @method getPluginKey + * return the plugin key for this view. + * @return {string} plugin key + */ + static getPluginKey() { + return this.common().key; + } + +/** + * @method component() + * return a UI component based upon this view. + * @return {obj} UI component + */ + component(parentId) { + return new ABAbviewimageComponent(this, parentId); + } + + + // constructor(values, application, parent, defaultValues) { + // super(values, application, parent, defaultValues); + // } + + // + // Editor Related + // + + + + warningsEval() { + super.warningsEval(); + + if (!this.settings.filename) { + this.warningsMessage(`has no image set`); + } + } +}; + +} + diff --git a/AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js b/AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js new file mode 100644 index 00000000..a66b2824 --- /dev/null +++ b/AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js @@ -0,0 +1,59 @@ +export default function FNAbviewimageComponent({ + /*AB,*/ + ABViewComponentPlugin, +}) { + return class ABAbviewimageComponent extends ABViewComponentPlugin { + + + constructor(baseView, idBase, ids) { + super( + baseView, + idBase || `ABViewImage_${baseView.id}`, + Object.assign({ image: "" }, ids) + ); + } + + ui() { + const settings = this.settings; + const _ui = super.ui([ + { + cols: [ + { + id: this.ids.image, + view: "template", + template: "", + height: settings.height, + width: settings.width, + }, + {}, + ], + }, + ]); + + delete _ui.type; + + return _ui; + } + + async init(AB) { + await super.init(AB); + + const $image = $$(this.ids.image); + if (!$image) return; + + const settings = this.settings; + + if (settings.filename) + $image.define( + "template", + `` + ); + else $image.define("template", ""); + + $image.refresh(); + } + + + }; + +} From 0110cade0fadb494a865b4beb11a3dcacd8eda88 Mon Sep 17 00:00:00 2001 From: Wirachot Date: Tue, 17 Feb 2026 19:48:16 +0700 Subject: [PATCH 2/2] clean code --- .../included/view_image/FNAbviewimage.js | 163 +++++++++--------- .../view_image/FNAbviewimageComponent.js | 97 +++++------ 2 files changed, 124 insertions(+), 136 deletions(-) diff --git a/AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js b/AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js index 58189171..49f5357d 100644 --- a/AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js +++ b/AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js @@ -1,6 +1,5 @@ import FNAbviewimageComponent from "./FNAbviewimageComponent.js"; - // FNAbviewimage Web // A web side import for an ABView. // @@ -8,81 +7,80 @@ export default function FNAbviewimage({ /*AB,*/ ABViewWidgetPlugin, ABViewComponentPlugin, - ABViewContainer + ABViewContainer, }) { - const ABAbviewimageComponent = FNAbviewimageComponent({ ABViewComponentPlugin }); - -const ABViewImagePropertyComponentDefaults = { - filename: "", - width: 200, - height: 100, -}; - -const ABViewDefaults = { - key: "image", // {string} unique key for this view - icon: "picture-o", // {string} fa-[icon] reference for this view - labelKey: "Image", // {string} the multilingual label key for the class label -}; - -class ABViewImageCore extends ABViewWidgetPlugin { - constructor(values, application, parent, defaultValues) { - super(values, application, parent, defaultValues || ABViewDefaults); - } + const ABAbviewimageComponent = FNAbviewimageComponent({ + ABViewComponentPlugin, + }); + + const ABViewImagePropertyComponentDefaults = { + filename: "", + width: 200, + height: 100, + }; + + const ABViewDefaults = { + key: "image", // {string} unique key for this view + icon: "picture-o", // {string} fa-[icon] reference for this view + labelKey: "Image", // {string} the multilingual label key for the class label + }; + + class ABViewImageCore extends ABViewWidgetPlugin { + constructor(values, application, parent, defaultValues) { + super(values, application, parent, defaultValues || ABViewDefaults); + } - static common() { - return ABViewDefaults; - } + static common() { + return ABViewDefaults; + } - static defaultValues() { - return ABViewImagePropertyComponentDefaults; - } + static defaultValues() { + return ABViewImagePropertyComponentDefaults; + } - /// - /// Instance Methods - /// + /// + /// Instance Methods + /// - /** - * @method componentList - * return the list of components available on this view to display in the editor. - */ - componentList() { - return []; - } + /** + * @method componentList + * return the list of components available on this view to display in the editor. + */ + componentList() { + return []; + } - /** - * @property datacollection - * return data source - * NOTE: this view doesn't track a DataCollection. - * @return {ABDataCollection} - */ - get datacollection() { - return null; - } + /** + * @property datacollection + * return data source + * NOTE: this view doesn't track a DataCollection. + * @return {ABDataCollection} + */ + get datacollection() { + return null; + } - /** - * @method fromValues() - * - * initialze this object with the given set of values. - * @param {obj} values - */ - fromValues(values) { - super.fromValues(values); - - // convert from "0" => 0 - this.settings.width = parseInt( - this.settings.width || ABViewImagePropertyComponentDefaults.width - ); - this.settings.height = parseInt( - this.settings.height || ABViewImagePropertyComponentDefaults.height - ); + /** + * @method fromValues() + * + * initialze this object with the given set of values. + * @param {obj} values + */ + fromValues(values) { + super.fromValues(values); + + // convert from "0" => 0 + this.settings.width = parseInt( + this.settings.width || ABViewImagePropertyComponentDefaults.width + ); + this.settings.height = parseInt( + this.settings.height || ABViewImagePropertyComponentDefaults.height + ); + } } -}; - - - -return class ABViewImage extends ABViewImageCore { -/** + return class ABViewImage extends ABViewImageCore { + /** * @method getPluginKey * return the plugin key for this view. * @return {string} plugin key @@ -91,7 +89,7 @@ return class ABViewImage extends ABViewImageCore { return this.common().key; } -/** + /** * @method component() * return a UI component based upon this view. * @return {obj} UI component @@ -100,25 +98,20 @@ return class ABViewImage extends ABViewImageCore { return new ABAbviewimageComponent(this, parentId); } + // constructor(values, application, parent, defaultValues) { + // super(values, application, parent, defaultValues); + // } - // constructor(values, application, parent, defaultValues) { - // super(values, application, parent, defaultValues); - // } + // + // Editor Related + // - // - // Editor Related - // + warningsEval() { + super.warningsEval(); - - - warningsEval() { - super.warningsEval(); - - if (!this.settings.filename) { - this.warningsMessage(`has no image set`); + if (!this.settings.filename) { + this.warningsMessage(`has no image set`); + } } - } -}; - + }; } - diff --git a/AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js b/AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js index a66b2824..2cd41643 100644 --- a/AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js +++ b/AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js @@ -3,57 +3,52 @@ export default function FNAbviewimageComponent({ ABViewComponentPlugin, }) { return class ABAbviewimageComponent extends ABViewComponentPlugin { - - - constructor(baseView, idBase, ids) { - super( - baseView, - idBase || `ABViewImage_${baseView.id}`, - Object.assign({ image: "" }, ids) - ); - } - - ui() { - const settings = this.settings; - const _ui = super.ui([ - { - cols: [ - { - id: this.ids.image, - view: "template", - template: "", - height: settings.height, - width: settings.width, - }, - {}, - ], - }, - ]); - - delete _ui.type; - - return _ui; - } - - async init(AB) { - await super.init(AB); - - const $image = $$(this.ids.image); - if (!$image) return; - - const settings = this.settings; - - if (settings.filename) - $image.define( - "template", - `` + constructor(baseView, idBase, ids) { + super( + baseView, + idBase || `ABViewImage_${baseView.id}`, + Object.assign({ image: "" }, ids) ); - else $image.define("template", ""); - - $image.refresh(); - } - - + } + + ui() { + const settings = this.settings; + const _ui = super.ui([ + { + cols: [ + { + id: this.ids.image, + view: "template", + template: "", + height: settings.height, + width: settings.width, + }, + {}, + ], + }, + ]); + + delete _ui.type; + + return _ui; + } + + async init(AB) { + await super.init(AB); + + const $image = $$(this.ids.image); + if (!$image) return; + + const settings = this.settings; + + if (settings.filename) + $image.define( + "template", + `` + ); + else $image.define("template", ""); + + $image.refresh(); + } }; - }