update custom controls (#591)

* Update README.md

* update new cc logic

* new custom controls

* update custom controls

* Update README.md

* Update README.md

* update cc

* update cc
This commit is contained in:
oblomov 2023-10-23 01:44:44 +02:00 committed by GitHub
parent 98691f0eeb
commit 66cc249f14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 1996 additions and 2158 deletions

View File

@ -52,6 +52,7 @@
* Add your apps to SAP Fiori On-Premise Launchpad [(ext-fiori_launchpad)](https://github.com/abap2UI5/ext-service_integration)
* Integrate your apps with the SAP Business Technology Platform [(ext-btp)](https://github.com/abap2UI5/ext-business_technology_platform)
* Explore abap2UI5-tools, a collection of tools & utility functions [(abap2UI5-tools)](https://github.com/abap2UI5/abap2ui5-tools)
* Check out Custom Controls & external Libraries for abap2UI5 [(custom controls)](https://github.com/abap2UI5/abap2UI5-documentation/blob/main/docs/custom_controls.md)
* Discover other projects using abap2UI5 [(abap2UI5/links)](https://github.com/abap2UI5/abap2UI5-documentation/blob/main/docs/links.md)
* And finally, don't forget to explore the [Samples Repository 🧭](https://github.com/abap2UI5/abap2UI5-samples)

10
src/01/package.devc.xml Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_DEVC" serializer_version="v1.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<DEVC>
<CTEXT>ext libraries &amp; custom controls</CTEXT>
</DEVC>
</asx:values>
</asx:abap>
</abapGit>

View File

@ -0,0 +1,53 @@
CLASS z2ui5_cl_fw_cc_bwipjs DEFINITION
PUBLIC
FINAL
CREATE PUBLIC .
PUBLIC SECTION.
DATA mo_view TYPE REF TO z2ui5_cl_xml_view.
TYPES:
BEGIN OF ty_s_barcode,
sym TYPE string,
desc TYPE string,
text TYPE string,
opts TYPE string,
END OF ty_s_barcode.
TYPES ty_t_barcode TYPE STANDARD TABLE OF ty_s_barcode WITH EMPTY KEY.
CONSTANTS cv_src TYPE string VALUE `https://cdnjs.cloudflare.com/ajax/libs/bwip-js/4.1.1/bwip-js-min.js`.
METHODS get_js
RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_xml_view.
METHODS get_t_barcode_types
RETURNING
VALUE(result) TYPE ty_t_barcode.
PROTECTED SECTION.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_fw_cc_bwipjs IMPLEMENTATION.
METHOD get_js.
result = mo_view->_cc_plain_xml( `<html:script>` && cv_src && `</html:script>` ).
ENDMETHOD.
METHOD get_t_barcode_types.
result = VALUE #(
( sym = 'ean5' desc = 'EAN-5' text = '90200' opts = 'includetext guardwhitespace' )
( sym = 'ean2' desc = 'EAN-2' text = '05' opts = 'includetext guardwhitespace' )
).
ENDMETHOD.
ENDCLASS.

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_FW_CC_BWIPJS</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>bwip-js - barcode writer in pure javascript</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>
<UNICODE>X</UNICODE>
</VSEOCLASS>
</asx:values>
</asx:abap>
</abapGit>

View File

@ -0,0 +1,51 @@
CLASS z2ui5_cl_fw_cc_factory DEFINITION
PUBLIC
FINAL
CREATE PUBLIC .
PUBLIC SECTION.
DATA mo_view TYPE REF TO z2ui5_cl_xml_view.
METHODS ui5_file_uploader
RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_fw_cc_file_uploader.
METHODS ui5_spreadsheet
RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_fw_cc_spreadsheet.
METHODS bwip_js
RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_fw_cc_bwipjs.
PROTECTED SECTION.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_fw_cc_factory IMPLEMENTATION.
METHOD ui5_file_uploader.
result = NEW #( ).
result->mo_view = mo_view.
ENDMETHOD.
METHOD ui5_spreadsheet.
result = NEW #( ).
result->mo_view = mo_view.
ENDMETHOD.
METHOD bwip_js.
result = NEW #( ).
result->mo_view = mo_view.
ENDMETHOD.
ENDCLASS.

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_FW_CC_FACTORY</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>abap2UI5 - custom controls</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>
<UNICODE>X</UNICODE>
</VSEOCLASS>
</asx:values>
</asx:abap>
</abapGit>

View File

@ -0,0 +1,213 @@
CLASS z2ui5_cl_fw_cc_file_uploader DEFINITION
PUBLIC
FINAL
CREATE PUBLIC .
PUBLIC SECTION.
DATA mo_view TYPE REF TO z2ui5_cl_xml_view.
METHODS control
IMPORTING
!value TYPE clike OPTIONAL
!path TYPE clike OPTIONAL
!placeholder TYPE clike OPTIONAL
!upload TYPE clike OPTIONAL
!icononly TYPE clike OPTIONAL
!buttononly TYPE clike OPTIONAL
!buttontext TYPE clike OPTIONAL
!uploadbuttontext TYPE clike OPTIONAL
!checkdirectupload TYPE clike OPTIONAL
RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_xml_view .
METHODS load_cc
RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_xml_view .
PROTECTED SECTION.
PRIVATE SECTION.
ENDCLASS.
CLASS Z2UI5_CL_FW_CC_FILE_UPLOADER IMPLEMENTATION.
METHOD control.
result = mo_view.
mo_view->_generic( name = `FileUploader`
ns = `z2ui5`
t_prop = VALUE #( ( n = `placeholder` v = placeholder )
( n = `upload` v = upload )
( n = `path` v = path )
( n = `value` v = value )
( n = `iconOnly` v = z2ui5_cl_fw_utility=>boolean_abap_2_json( icononly ) )
( n = `buttonOnly` v = z2ui5_cl_fw_utility=>boolean_abap_2_json( buttononly ) )
( n = `buttonText` v = buttontext )
( n = `uploadButtonText` v = uploadbuttontext )
( n = `checkDirectUpload` v = z2ui5_cl_fw_utility=>boolean_abap_2_json( checkdirectupload ) ) ) ).
ENDMETHOD.
METHOD load_cc.
DATA(js) = ` debugger; jQuery.sap.declare("z2ui5.FileUploader");` && |\n| &&
|\n| &&
` sap.ui.define([` && |\n| &&
` "sap/ui/core/Control",` && |\n| &&
` "sap/m/Button",` && |\n| &&
` "sap/ui/unified/FileUploader"` && |\n| &&
` ], function (Control, Button, FileUploader) {` && |\n| &&
` "use strict";` && |\n| &&
|\n| &&
` return Control.extend("z2ui5.FileUploader", {` && |\n| &&
|\n| &&
` metadata: {` && |\n| &&
` properties: {` && |\n| &&
` value: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: ""` && |\n| &&
` },` && |\n| &&
` path: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: ""` && |\n| &&
` },` && |\n| &&
` tooltip: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: ""` && |\n| &&
` },` && |\n| &&
` fileType: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: ""` && |\n| &&
` },` && |\n| &&
` placeholder: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: ""` && |\n| &&
` },` && |\n| &&
` buttonText: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: ""` && |\n| &&
` },` && |\n| &&
` uploadButtonText: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: "Upload"` && |\n| &&
` },` && |\n| &&
` enabled: {` && |\n| &&
` type: "boolean",` && |\n| &&
` defaultValue: true` && |\n| &&
` },` && |\n| &&
` iconOnly: {` && |\n| &&
` type: "boolean",` && |\n| &&
` defaultValue: false` && |\n| &&
` },` && |\n| &&
` buttonOnly: {` && |\n| &&
` type: "boolean",` && |\n| &&
` defaultValue: false` && |\n| &&
` },` && |\n| &&
` multiple: {` && |\n| &&
` type: "boolean",` && |\n| &&
` defaultValue: false` && |\n| &&
` },` && |\n| &&
` checkDirectUpload: {` && |\n| &&
` type: "boolean",` && |\n| &&
` defaultValue: false` && |\n| &&
` }` && |\n| &&
` },` && |\n| &&
|\n| &&
|\n| &&
` aggregations: {` && |\n| &&
` },` && |\n| &&
` events: {` && |\n| &&
` "upload": {` && |\n| &&
` allowPreventDefault: true,` && |\n| &&
` parameters: {}` && |\n| &&
` }` && |\n| &&
` },` && |\n| &&
` renderer: null` && |\n| &&
` },` && |\n| &&
|\n| &&
` renderer: function (oRm, oControl) {` && |\n| &&
|\n| &&
` if (!oControl.getProperty("checkDirectUpload")) {` && |\n| &&
` oControl.oUploadButton = new Button({` && |\n| &&
` text: oControl.getProperty("uploadButtonText"),` && |\n| &&
` enabled: oControl.getProperty("path") !== "",` && |\n| &&
` press: function (oEvent) { ` && |\n| &&
|\n| &&
` this.setProperty("path", this.oFileUploader.getProperty("value"));` && |\n| &&
|\n| &&
` var file = sap.z2ui5.oUpload.oFileUpload.files[0];` && |\n| &&
` var reader = new FileReader();` && |\n| &&
|\n| &&
` reader.onload = function (evt) {` && |\n| &&
` var vContent = evt.currentTarget.result;` && |\n| &&
` this.setProperty("value", vContent);` && |\n| &&
` this.fireUpload();` && |\n| &&
` //this.getView().byId('picture' ).getDomRef().src = vContent;` && |\n| &&
` }.bind(this)` && |\n| &&
|\n| &&
` reader.readAsDataURL(file);` && |\n| &&
` }.bind(oControl)` && |\n| &&
` });` && |\n| &&
` }` && |\n| &&
|\n| &&
` oControl.oFileUploader = new FileUploader({` && |\n| &&
` icon: "sap-icon://browse-folder",` && |\n| &&
` iconOnly: oControl.getProperty("iconOnly"),` && |\n| &&
` buttonOnly: oControl.getProperty("buttonOnly"),` && |\n| &&
` buttonText: oControl.getProperty("buttonText"),` && |\n| &&
` uploadOnChange: true,` && |\n| &&
` value: oControl.getProperty("path"),` && |\n| &&
` placeholder: oControl.getProperty("placeholder"),` && |\n| &&
` change: function (oEvent) {` && |\n| &&
` if (oControl.getProperty("checkDirectUpload")) {` && |\n| &&
` return; ` && |\n| &&
` }` && |\n| &&
|\n| &&
` var value = oEvent.getSource().getProperty("value");` && |\n| &&
` this.setProperty("path", value);` && |\n| &&
` if (value) {` && |\n| &&
` this.oUploadButton.setEnabled();` && |\n| &&
` } else {` && |\n| &&
` this.oUploadButton.setEnabled(false);` && |\n| &&
` }` && |\n| &&
` this.oUploadButton.rerender();` && |\n| &&
` sap.z2ui5.oUpload = oEvent.oSource;` && |\n| &&
` }.bind(oControl),` && |\n| &&
` uploadComplete: function (oEvent) {` && |\n| &&
` if (!oControl.getProperty("checkDirectUpload")) {` && |\n| &&
` return; ` && |\n| &&
` }` && |\n| &&
|\n| &&
` var value = oEvent.getSource().getProperty("value");` && |\n| &&
` this.setProperty("path", value);` && |\n| &&
|\n| &&
` var file = oEvent.oSource.oFileUpload.files[0];` && |\n| &&
` var reader = new FileReader();` && |\n| &&
|\n| &&
` reader.onload = function (evt) {` && |\n| &&
` var vContent = evt.currentTarget.result;` && |\n| &&
` this.setProperty("value", vContent);` && |\n| &&
` this.fireUpload();` && |\n| &&
` }.bind(this)` && |\n| &&
|\n| &&
` reader.readAsDataURL(file);` && |\n| &&
` }.bind(oControl)` && |\n| &&
` });` && |\n| &&
|\n| &&
` var hbox = new sap.m.HBox();` && |\n| &&
` hbox.addItem(oControl.oFileUploader);` && |\n| &&
` hbox.addItem(oControl.oUploadButton);` && |\n| &&
` oRm.renderControl(hbox);` && |\n| &&
` }` && |\n| &&
` });` && |\n| &&
` });`.
result = mo_view->_cc_plain_xml( `<html:script>` && js && `</html:script>` ).
ENDMETHOD.
ENDCLASS.

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_FW_CC_FILE_UPLOADER</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>ui5 control-file uploader</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>
<UNICODE>X</UNICODE>
</VSEOCLASS>
</asx:values>
</asx:abap>
</abapGit>

View File

@ -0,0 +1,131 @@
CLASS z2ui5_cl_fw_cc_spreadsheet DEFINITION
PUBLIC
FINAL
CREATE PUBLIC .
PUBLIC SECTION.
DATA mo_view TYPE REF TO z2ui5_cl_xml_view.
METHODS load_cc
IMPORTING
!columnconfig TYPE clike
RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_xml_view .
METHODS control
IMPORTING
!tableid TYPE clike
!type TYPE clike OPTIONAL
!text TYPE clike OPTIONAL
!icon TYPE clike OPTIONAL
RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_xml_view .
PROTECTED SECTION.
PRIVATE SECTION.
ENDCLASS.
CLASS Z2UI5_CL_FW_CC_SPREADSHEET IMPLEMENTATION.
METHOD control.
result = mo_view.
mo_view->_generic( name = `ExportSpreadsheet`
ns = `z2ui5`
t_prop = VALUE #( ( n = `tableId` v = tableid )
( n = `text` v = text )
( n = `icon` v = icon )
( n = `type` v = type )
) ).
ENDMETHOD.
METHOD load_cc.
DATA(js) = ` debugger; jQuery.sap.declare("z2ui5.ExportSpreadsheet");` && |\n| &&
|\n| &&
` sap.ui.define([` && |\n| &&
` "sap/ui/core/Control",` && |\n| &&
` "sap/m/Button",` && |\n| &&
` "sap/ui/export/Spreadsheet"` && |\n| &&
` ], function (Control, Button, Spreadsheet) {` && |\n| &&
` "use strict";` && |\n| &&
|\n| &&
` return Control.extend("z2ui5.ExportSpreadsheet", {` && |\n| &&
|\n| &&
` metadata: {` && |\n| &&
` properties: {` && |\n| &&
` tableId: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: ""` && |\n| &&
` },` && |\n| &&
` type: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: ""` && |\n| &&
` },` && |\n| &&
` icon: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: ""` && |\n| &&
` },` && |\n| &&
` text: {` && |\n| &&
` type: "string",` && |\n| &&
` defaultValue: ""` && |\n| &&
` }` && |\n| &&
` },` && |\n| &&
|\n| &&
|\n| &&
` aggregations: {` && |\n| &&
` },` && |\n| &&
` events: { },` && |\n| &&
` renderer: null` && |\n| &&
` },` && |\n| &&
|\n| &&
` renderer: function (oRm, oControl) {` && |\n| &&
|\n| &&
` oControl.oExportButton = new Button({` && |\n| &&
` text: oControl.getProperty("text"),` && |\n| &&
` icon: oControl.getProperty("icon"), ` && |\n| &&
` type: oControl.getProperty("type"), ` && |\n| &&
` press: function (oEvent) { ` && |\n| &&
|\n| &&
` var aCols =` && columnconfig && `;` && |\n| &&
|\n| &&
` var oBinding, oSettings, oSheet, oTable, vTableId, vViewPrefix,vPrefixTableId;` && |\n| &&
` vTableId = oControl.getProperty("tableId")` && |\n| &&
` // vViewPrefix = sap.z2ui5.oView.sId;` && |\n| &&
` // vPrefixTableId = vViewPrefix + "--" + vTableId;` && |\n| &&
` vPrefixTableId = sap.z2ui5.oView.createId( vTableId );` && |\n| &&
` oTable = sap.ui.getCore().byId(vPrefixTableId);` && |\n| &&
` oBinding = oTable.getBinding("rows");` && |\n| &&
` if (oBinding == null) {` && |\n| &&
` oBinding = oTable.getBinding("items");` && |\n| &&
` };` && |\n| &&
` oSettings = {` && |\n| &&
` workbook: { columns: aCols },` && |\n| &&
` dataSource: oBinding` && |\n| &&
` };` && |\n| &&
` oSheet = new Spreadsheet(oSettings);` && |\n| &&
` oSheet.build()` && |\n| &&
` .then(function() {` && |\n| &&
` }).finally(function() {` && |\n| &&
` oSheet.destroy();` && |\n| &&
` });` && |\n| &&
` }.bind(oControl)` && |\n| &&
` });` && |\n| &&
|\n| &&
` oRm.renderControl(oControl.oExportButton);` && |\n| &&
` }` && |\n| &&
` });` && |\n| &&
` });`.
result = mo_view->_cc_plain_xml( `<html:script>` && js && `</html:script>` ).
ENDMETHOD.
ENDCLASS.

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_FW_CC_SPREADSHEET</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>ui5 control - spreadsheet</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>
<UNICODE>X</UNICODE>
</VSEOCLASS>
</asx:values>
</asx:abap>
</abapGit>

File diff suppressed because it is too large Load Diff