1
1
![ logo] ( https://qcobjects.dev/qcobjects_01.png )
2
2
3
3
[](https://github.com/QuickCorp/QCObjects/blob/master/LICENSE.txt) [](https://app.fossa.com/projects/git%2Bgithub.com%2FQuickCorp%2FQCObjects?ref=badge_shield) [](https://www.jsdelivr.com/package/npm/qcobjects) [](https://marketplace.visualstudio.com/items?itemName=Quickcorp.QCObjects-vscode) [](https://qcobjects.readthedocs.io/?badge=latest) [](https://github.com/QuickCorp/QCObjects/releases/) [](https://github.com/QuickCorp/QCObjects) [](https://badge.fury.io/js/qcobjects)   [](CODE_OF_CONDUCT.md)
4
+ [ ![ CII Best Practices] ( https://bestpractices.coreinfrastructure.org/projects/5295/badge )] ( https://bestpractices.coreinfrastructure.org/projects/5295 )
5
+
4
6
5
7
[ ![ Become a Patreon ] ( https://c5.patreon.com/external/logo/become_a_patron_button.png )] ( https://www.patreon.com/join/qcobjects? )
6
8
@@ -43,7 +45,6 @@ _________________________
43
45
44
46
<!-- TOC depthFrom:1 depthTo:3 withLinks:1 updateOnSave:1 orderedList:0 -->
45
47
46
- - [ QCObjects] ( #qcobjects )
47
48
- [ The meaning of the name QCObjects (Do not forget the Q)] ( #the-meaning-of-the-name-qcobjects-do-not-forget-the-q )
48
49
- [ QCObjects Explainer Video] ( #qcobjects-explainer-video )
49
50
- [ Table of Contents] ( #table-of-contents )
@@ -53,23 +54,23 @@ _________________________
53
54
- [Prevent Render-blocking resources](#prevent-render-blocking-resources)
54
55
- [On-Demand Resources Load](#on-demand-resources-load)
55
56
- [Lazy-loading of images in components (use lazy-src instead of src attribute in img tag)](#lazy-loading-of-images-in-components-use-lazy-src-instead-of-src-attribute-in-img-tag)
56
- - [ Cross Browser Javascript Framework for MVC Patterns] ( #cross-browser-javascript-framework-for-mvc-patterns )
57
+ - [# Cross Browser Javascript Framework for MVC Patterns](#- cross-browser-javascript-framework-for-mvc-patterns)
57
58
- [ Install it, make a textfield or a navigate home functionality, all in just one step.] ( #install-it-make-a-textfield-or-a-navigate-home-functionality-all-in-just-one-step )
58
59
- [ Dynamic Components Architecture] ( #dynamic-components-architecture )
59
- - [ ECMA-262 Specification] ( #ecma-262-specification )
60
- - [ Copyright] ( #copyright )
61
- - [ Demo] ( #demo )
60
+ - [# ECMA-262 Specification](#- ecma-262-specification)
61
+ - [# Copyright](#- copyright)
62
+ - [# Demo](#- demo)
62
63
- [PWA Live Demo](#pwa-live-demo)
63
64
- [Demo Integrating with Foundation](#demo-integrating-with-foundation)
64
65
- [Demo Integrating with Materializecss](#demo-integrating-with-materializecss)
65
66
- [Demo Using Raw CSS](#demo-using-raw-css)
66
67
- [Example of QCObjects using and manipulating canvas objects](#example-of-qcobjects-using-and-manipulating-canvas-objects)
67
- - [ DevBlog] ( #devblog )
68
- - [ Fork] ( #fork )
69
- - [ Become a Sponsor] ( #become-a-sponsor )
70
- - [ Check out the QCObjects SDK] ( #check-out-the-qcobjects-sdk )
71
- - [ Donate] ( #donate )
72
- - [ Installing] ( #installing )
68
+ - [# DevBlog](#- devblog)
69
+ - [# Fork](#- fork)
70
+ - [# Become a Sponsor](#- become-a-sponsor)
71
+ - [# Check out the QCObjects SDK](#- check-out-the-qcobjects-sdk)
72
+ - [# Donate](#- donate)
73
+ - [# Installing](#- installing)
73
74
- [Using QCObjects with Atom:](#using-qcobjects-with-atom)
74
75
- [Using QCObjects in Visual Studio Code:](#using-qcobjects-in-visual-studio-code)
75
76
- [Installing with NPM:](#installing-with-npm)
@@ -88,41 +89,118 @@ _________________________
88
89
- [Using the latest non-minified version from jsDelivr CDN](#using-the-latest-non-minified-version-from-jsdelivr-cdn)
89
90
- [Using UNPKG CDN](#using-unpkg-cdn)
90
91
- [Using CDNJS](#using-cdnjs)
91
- - [ Reference] ( #reference )
92
+ - [# Reference](#- reference)
92
93
- [Essentials](#essentials)
93
- - [QC_Object](#qcobject )
94
+ - [QC_Object](#qc_object )
94
95
- [ComplexStorageCache](#complexstoragecache)
96
+ - [Usage:](#usage)
97
+ - [Example:](#example)
95
98
- [asyncLoad](#asyncload)
99
+ - [Usage:](#usage-1)
100
+ - [Example:](#example-1)
96
101
- [Class](#class)
97
- - [QC_Append, append method](#qcappend-append-method)
98
- - [The \_super\_ method](#the-super-method)
102
+ - [Usage:](#usage-2)
103
+ - [Example:](#example-2)
104
+ - [QC_Append, append method](#qc_append-append-method)
105
+ - [Usage:](#usage-3)
106
+ - [Example:](#example-3)
107
+ - [The \_super\_ method](#the-_super_-method)
108
+ - [Usage:](#usage-4)
109
+ - [Example:](#example-4)
99
110
- [New](#new)
111
+ - [Usage:](#usage-5)
112
+ - [Example:](#example-5)
100
113
- [InheritClass](#inheritclass)
101
114
- [ClassFactory](#classfactory)
102
- - [\_Crypt](#crypt)
115
+ - [Example:](#example-6)
116
+ - [\_Crypt](#_crypt)
117
+ - [Example (1):](#example-1)
118
+ - [Example (2):](#example-2)
103
119
- [GLOBAL](#global)
120
+ - [Example:](#example-7)
104
121
- [CONFIG](#config)
122
+ - [Usage from memory:](#usage-from-memory)
123
+ - [Usage from config.json:](#usage-from-configjson)
124
+ - [Usage from an encrypted config.json:](#usage-from-an-encrypted-configjson)
125
+ - [Dynamic CONFIG Settings](#dynamic-config-settings)
105
126
- [Processor](#processor)
127
+ - [Usage:](#usage-6)
128
+ - [Example:](#example-8)
106
129
- [waitUntil](#waituntil)
130
+ - [Usage:](#usage-7)
131
+ - [Example:](#example-9)
107
132
- [Package](#package)
133
+ - [Usage:](#usage-8)
134
+ - [Example (1):](#example-1-1)
135
+ - [Example (2):](#example-2-1)
108
136
- [Import](#import)
137
+ - [Usage:](#usage-9)
138
+ - [Example (1):](#example-1-2)
139
+ - [Example (2):](#example-2-2)
109
140
- [Export](#export)
141
+ - [Usage:](#usage-10)
142
+ - [Example:](#example-10)
110
143
- [Cast](#cast)
144
+ - [Usage:](#usage-11)
145
+ - [Example:](#example-11)
111
146
- [Tag](#tag)
147
+ - [Usage:](#usage-12)
148
+ - [Example:](#example-12)
112
149
- [Ready](#ready)
150
+ - [Usage:](#usage-13)
113
151
- [Component Class](#component-class)
152
+ - [Properties](#properties)
153
+ - [Methods](#methods)
114
154
- [Component HTML Tag](#component-html-tag)
155
+ - [Available attributes](#available-attributes)
156
+ - [The name Attribute](#the-name-attribute)
157
+ - [Usage:](#usage-14)
158
+ - [Example:](#example-13)
159
+ - [The cached Attribute](#the-cached-attribute)
160
+ - [Usage:](#usage-15)
161
+ - [The data property tag declaration](#the-data-property-tag-declaration)
162
+ - [The controllerClass Attribute](#the-controllerclass-attribute)
163
+ - [Usage:](#usage-16)
164
+ - [The viewClass Attribute](#the-viewclass-attribute)
165
+ - [Usage:](#usage-17)
166
+ - [The componentClass Attribute](#the-componentclass-attribute)
167
+ - [Usage:](#usage-18)
168
+ - [The effecClass Attribute](#the-effecclass-attribute)
169
+ - [Usage:](#usage-19)
170
+ - [The template-source Attribute](#the-template-source-attribute)
171
+ - [Usage:](#usage-20)
172
+ - [The tplextension Attribute](#the-tplextension-attribute)
173
+ - [Usage:](#usage-21)
174
+ - [ComponentURI](#componenturi)
175
+ - [Example:](#example-14)
176
+ - [componentLoader](#componentloader)
177
+ - [Usage:](#usage-22)
178
+ - [Example:](#example-15)
179
+ - [buildComponents](#buildcomponents)
180
+ - [Usage:](#usage-23)
181
+ - [Example:](#example-16)
115
182
- [Controller](#controller)
116
183
- [View](#view)
117
184
- [VO](#vo)
118
185
- [Service](#service)
186
+ - [Properties](#properties-1)
187
+ - [Methods](#methods-1)
119
188
- [serviceLoader](#serviceloader)
189
+ - [Usage:](#usage-24)
190
+ - [Example:](#example-17)
120
191
- [JSONService](#jsonservice)
192
+ - [Properties](#properties-2)
193
+ - [Methods](#methods-2)
194
+ - [Example:](#example-18)
121
195
- [ConfigService](#configservice)
196
+ - [Example:](#example-19)
122
197
- [SourceJS](#sourcejs)
198
+ - [Example:](#example-20)
123
199
- [SourceCSS](#sourcecss)
124
200
- [Effect](#effect)
201
+ - [Example:](#example-21)
125
202
- [Timer](#timer)
203
+ - [Example:](#example-22)
126
204
- [List and Math Functions](#list-and-math-functions)
127
205
- [ArrayList](#arraylist)
128
206
- [ArrayCollection](#arraycollection)
@@ -131,20 +209,117 @@ _________________________
131
209
- [[ArrayList or Array].sort](#arraylist-or-arraysort)
132
210
- [[ArrayList or Array].sortBy](#arraylist-or-arraysortby)
133
211
- [[ArrayList or Array].matrix](#arraylist-or-arraymatrix)
212
+ - [Usage](#usage-25)
134
213
- [[ArrayList or Array].matrix2d](#arraylist-or-arraymatrix2d)
135
214
- [[ArrayList or Array].matrix3d](#arraylist-or-arraymatrix3d)
136
215
- [range](#range)
216
+ - [Usage](#usage-26)
137
217
- [Array.sum](#arraysum)
138
218
- [Array.avg](#arrayavg)
139
219
- [Array.min](#arraymin)
140
220
- [Array.max](#arraymax)
141
221
- [SDK](#sdk)
142
222
- [SDK Components](#sdk-components)
223
+ - [org.quickcorp.components.ShadowedComponent](#orgquickcorpcomponentsshadowedcomponent)
224
+ - [Usage:](#usage-27)
225
+ - [org.quickcorp.components.FormField](#orgquickcorpcomponentsformfield)
226
+ - [Usage:](#usage-28)
227
+ - [FormField.executeBindings():](#formfieldexecutebindings)
228
+ - [Data Binding Event Change:](#data-binding-event-change)
229
+ - [Data Binding Event Blur:](#data-binding-event-blur)
230
+ - [Data Binding Event Focus:](#data-binding-event-focus)
231
+ - [Data Binding Event Keydown:](#data-binding-event-keydown)
232
+ - [org.quickcorp.components.ButtonField](#orgquickcorpcomponentsbuttonfield)
233
+ - [Usage:](#usage-29)
234
+ - [org.quickcorp.components.InputField](#orgquickcorpcomponentsinputfield)
235
+ - [Usage:](#usage-30)
236
+ - [org.quickcorp.components.TextField](#orgquickcorpcomponentstextfield)
237
+ - [Usage:](#usage-31)
238
+ - [org.quickcorp.components.EmailField](#orgquickcorpcomponentsemailfield)
239
+ - [Usage:](#usage-32)
240
+ - [org.quickcorp.components.GridComponent](#orgquickcorpcomponentsgridcomponent)
241
+ - [Usage:](#usage-33)
242
+ - [Example:](#example-23)
243
+ - [org.quickcorp.components.ModalEnclosureComponent](#orgquickcorpcomponentsmodalenclosurecomponent)
244
+ - [org.quickcorp.components.ModalComponent](#orgquickcorpcomponentsmodalcomponent)
245
+ - [org.quickcorp.components.SwaggerUIComponent](#orgquickcorpcomponentsswaggeruicomponent)
246
+ - [Usage:](#usage-34)
247
+ - [org.quickcorp.components.splashscreen.VideoSplashScreenComponent](#orgquickcorpcomponentssplashscreenvideosplashscreencomponent)
248
+ - [Example:](#example-24)
143
249
- [SDK Controllers](#sdk-controllers)
250
+ - [org.quickcorp.controllers.GridController](#orgquickcorpcontrollersgridcontroller)
251
+ - [org.quickcorp.controllers.DataGridController](#orgquickcorpcontrollersdatagridcontroller)
252
+ - [Usage:](#usage-35)
253
+ - [Example:](#example-25)
254
+ - [org.quickcorp.controllers.ModalController](#orgquickcorpcontrollersmodalcontroller)
255
+ - [org.quickcorp.controllers.FormValidations](#orgquickcorpcontrollersformvalidations)
256
+ - [Usage:](#usage-36)
257
+ - [org.quickcorp.controllers.FormController](#orgquickcorpcontrollersformcontroller)
258
+ - [[FormController].serviceClass](#formcontrollerserviceclass)
259
+ - [[FormController].formSettings](#formcontrollerformsettings)
260
+ - [[FormController].validations](#formcontrollervalidations)
261
+ - [Usage:](#usage-37)
262
+ - [[FormController].formSaveTouchHandler](#formcontrollerformsavetouchhandler)
263
+ - [A complete example of FormController](#a-complete-example-of-formcontroller)
264
+ - [org.quickcorp.controllers.SwaggerUIController](#orgquickcorpcontrollersswaggeruicontroller)
265
+ - [Usage:](#usage-38)
144
266
- [SDK Effects](#sdk-effects)
267
+ - [org.quickcorp.tools.effects.Move](#orgquickcorptoolseffectsmove)
268
+ - [Usage:](#usage-39)
269
+ - [Example:](#example-26)
270
+ - [org.quickcorp.tools.effects.MoveXInFromRight](#orgquickcorptoolseffectsmovexinfromright)
271
+ - [Usage:](#usage-40)
272
+ - [Example:](#example-27)
273
+ - [org.quickcorp.tools.effects.MoveXInFromLeft](#orgquickcorptoolseffectsmovexinfromleft)
274
+ - [Usage:](#usage-41)
275
+ - [Example:](#example-28)
276
+ - [org.quickcorp.tools.effects.MoveYInFromBottom](#orgquickcorptoolseffectsmoveyinfrombottom)
277
+ - [Usage:](#usage-42)
278
+ - [Example:](#example-29)
279
+ - [org.quickcorp.tools.effects.MoveYInFromTop](#orgquickcorptoolseffectsmoveyinfromtop)
280
+ - [Usage:](#usage-43)
281
+ - [Example:](#example-30)
282
+ - [org.quickcorp.tools.effects.RotateX](#orgquickcorptoolseffectsrotatex)
283
+ - [Usage:](#usage-44)
284
+ - [Example:](#example-31)
285
+ - [org.quickcorp.tools.effects.RotateY](#orgquickcorptoolseffectsrotatey)
286
+ - [Usage:](#usage-45)
287
+ - [Example:](#example-32)
288
+ - [org.quickcorp.tools.effects.RotateZ](#orgquickcorptoolseffectsrotatez)
289
+ - [Usage:](#usage-46)
290
+ - [Example:](#example-33)
291
+ - [org.quickcorp.tools.effects.Rotate](#orgquickcorptoolseffectsrotate)
292
+ - [Usage:](#usage-47)
293
+ - [Example:](#example-34)
294
+ - [org.quickcorp.tools.effects.Fade](#orgquickcorptoolseffectsfade)
295
+ - [Usage:](#usage-48)
296
+ - [org.quickcorp.tools.effects.Radius](#orgquickcorptoolseffectsradius)
297
+ - [Usage:](#usage-49)
298
+ - [Example:](#example-35)
299
+ - [org.quickcorp.tools.effects.Resize](#orgquickcorptoolseffectsresize)
300
+ - [Usage:](#usage-50)
301
+ - [Example:](#example-36)
302
+ - [org.quickcorp.tools.effects.WipeLeft](#orgquickcorptoolseffectswipeleft)
303
+ - [Usage:](#usage-51)
304
+ - [Example](#example-37)
305
+ - [org.quickcorp.tools.effects.WipeRight](#orgquickcorptoolseffectswiperight)
306
+ - [Usage:](#usage-52)
307
+ - [Example](#example-38)
308
+ - [org.quickcorp.tools.effects.WipeUp](#orgquickcorptoolseffectswipeup)
309
+ - [Usage:](#usage-53)
310
+ - [Example](#example-39)
311
+ - [org.quickcorp.tools.effects.WipeDown](#orgquickcorptoolseffectswipedown)
312
+ - [Usage:](#usage-54)
313
+ - [Example](#example-40)
145
314
- [SDK Misc Tools](#sdk-misc-tools)
315
+ - [org.quickcorp.tools.canvas.CanvasTool](#orgquickcorptoolscanvascanvastool)
316
+ - [org.quickcorp.tools.layouts.BasicLayout](#orgquickcorptoolslayoutsbasiclayout)
146
317
- [SDK Views](#sdk-views)
318
+ - [org.quickcorp.views.GridView](#orgquickcorpviewsgridview)
147
319
- [SDK i18n messages](#sdk-i18n-messages)
320
+ - [org.quickcorp.i18n_messages.i18n_messages](#orgquickcorpi18n_messagesi18n_messages)
321
+ - [Usage:](#usage-55)
322
+ - [Example](#example-41)
148
323
- [The QCObjects HTTP2 Built-In Server](#the-qcobjects-http2-built-in-server)
149
324
- [Start serving your files with QCObjects](#start-serving-your-files-with-qcobjects)
150
325
- [Principals of an N-Tier or Multitier architecture](#principals-of-an-n-tier-or-multitier-architecture)
@@ -164,7 +339,7 @@ _________________________
164
339
- [Step 4: Once you have done the above components declaration, you will now want to code your controllers (cl.quickcorp.controller.js)](#step-4-once-you-have-done-the-above-components-declaration-you-will-now-want-to-code-your-controllers-clquickcorpcontrollerjs)
165
340
- [Step 5: To use into the HTML5 code you only need to do some settings between script tags:](#step-5-to-use-into-the-html5-code-you-only-need-to-do-some-settings-between-script-tags)
166
341
- [ QCObjects CLI Tool] ( #qcobjects-cli-tool )
167
- - [Usage](#usage)
342
+ - [Usage](#usage-56 )
168
343
- [Options](#options)
169
344
- [Commands](#commands)
170
345
- [Use:](#use)
0 commit comments