generated from QuickCorp/qcobjects-web-dev
-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.rst
1799 lines (1336 loc) · 53 KB
/
README.rst
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
.. figure:: qcobjects_01.png
:alt: logo
logo
# QCObjects
-----------
Welcome to `QCObjects <https://qcobjects.dev>`__ Main Reference
Documentation! Check the official page of
`QCObjects <https://qcobjects.dev>`__ at https://qcobjects.dev
## Cross Browser Javascript Framework for MVC Patterns
------------------------------------------------------
`QCObjects <https://qcobjects.dev>`__ is a javascript framework designed
to make easier everything about the MVC patterns implementation into the
pure javascript scope. You don't need to use typescript nor any
transpiler to run `QCObjects <https://qcobjects.dev>`__. It runs
directly on the browser and it uses pure javascript with no extra
dependencies of code. You can make your own components expressed in real
native javascript objects or extend a native DOM object to use in your
own way. You can also use `QCObjects <https://qcobjects.dev>`__ in
conjunction with CSS3 frameworks like [Foundation]
(https://foundation.zurb.com), [Bootstrap] (http://getbootstrap.com) and
mobile javascript frameworks like [PhoneGap] (https://phonegap.com) and
OnsenUI (https://onsen.io)
.. figure:: doc/img/components.gif
:alt: screenshot
screenshot
--------------
Table of Contents
=================
.. raw:: html
<!-- TOC depthFrom:1 depthTo:3 withLinks:1 updateOnSave:1 orderedList:0 -->
- `QCObjects <#qcobjects>`__
- `Cross Browser Javascript Framework for MVC
Patterns <#cross-browser-javascript-framework-for-mvc-patterns>`__
- `Table of Contents <#table-of-contents>`__
- `ALPHA RISE Startup <#alpha-rise-startup>`__
- `ECMA-262 Specification <#ecma-262-specification>`__
- `Copyright <#copyright>`__
- `Demo <#demo>`__
- `Demo Using Foundation <#demo-using-foundation>`__
- `Demo Using Materializecss <#demo-using-materializecss>`__
- `Demo Using Raw CSS <#demo-using-raw-css>`__
- `Another Basic Demo example: The simpliest demo
example: <#another-basic-demo-example-the-simpliest-demo-example>`__
- `Fork <#fork>`__
- `Become a Sponsor <#become-a-sponsor>`__
- `Check out the QCObjects SDK <#check-out-the-qcobjects-sdk>`__
- `Donate <#donate>`__
- `Installing <#installing>`__
- `Using QCObjects with Atom: <#using-qcobjects-with-atom>`__
- `Using QCObjects in Visual Studio
Code: <#using-qcobjects-in-visual-studio-code>`__
- `Installing with NPM: <#installing-with-npm>`__
- `Installing the docker
playground: <#installing-the-docker-playground>`__
- `Using the code in the straight way into
HTML5: <#using-the-code-in-the-straight-way-into-html5>`__
- `Reference <#reference>`__
- `Essentials <#essentials>`__
- `QC\_Object <#qc_object>`__
- `ComplexStorageCache <#complexstoragecache>`__
- `asyncLoad <#asyncload>`__
- `Class <#class>`__
- `QC\_Append, append method <#qc_append-append-method>`__
- `The \_super\_ method <#the-%5C_super%5C_-method>`__
- `New <#new>`__
- `InheritClass <#inheritclass>`__
- `\_Crypt <#%5C_crypt>`__
- `GLOBAL <#global>`__
- `CONFIG <#config>`__
- `waitUntil <#waituntil>`__
- `Package <#package>`__
- `Import <#import>`__
- `Export <#export>`__
- `Cast <#cast>`__
- `Tag <#tag>`__
- `Ready <#ready>`__
- `Component Class <#component-class>`__
- `Component HTML Tag <#component-html-tag>`__
- `Controller <#controller>`__
- `View <#view>`__
- `VO <#vo>`__
- `Service <#service>`__
- `serviceLoader <#serviceloader>`__
- `JSONService <#jsonservice>`__
- `ConfigService <#configservice>`__
- `SourceJS <#sourcejs>`__
- `SourceCSS <#sourcecss>`__
- `ArrayList <#arraylist>`__
- `ArrayCollection <#arraycollection>`__
- `Effect <#effect>`__
- `Timer <#timer>`__
- `SDK <#sdk>`__
- `Quick Start <#quick-start>`__
- `Step 1: Start creating a main import file and name it like:
cl.quickcorp.js. Put it into packages/js/ file
directory <#step-1-start-creating-a-main-import-file-and-name-it-like-clquickcorpjs-put-it-into-packagesjs-file-directory>`__
- `Step 2: Then create some services inhereting classes into the
file js/packages/cl.quickcorp.services.js
: <#step-2-then-create-some-services-inhereting-classes-into-the-file-jspackagesclquickcorpservicesjs->`__
- `Step 3: Now it's time to create the components
(cl.quickcorp.components.js) <#step-3-now-its-time-to-create-the-components-clquickcorpcomponentsjs>`__
- `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>`__
- `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>`__
.. raw:: html
<!-- /TOC -->
--------------
# ALPHA RISE Startup
--------------------
.. figure:: doc/img/ALPHA-RISE.png
:alt: alpha
alpha
`QCObjects <https://qcobjects.dev>`__ was invited to exhibit as an ALPHA
Startup in the RISE Conf Hong Kong 2019. RISE attracts the most dynamic
startups from around the world. We'll be showing how
`QCObjects <https://qcobjects.dev>`__ is making a real Global Impact to
the JavaScript developers life transforming the way for coding.
If you want to find out more about RISE event check out their website
https://riseconf.com
# ECMA-262 Specification
------------------------
See `ECMAScript® 2020 Language
Specification <https://tc39.github.io/ecma262/#sec-intro>`__ for
reference
# Copyright
-----------
Copyright (c) Jean Machuca and `QuickCorp <https://quickcorp.org>`__
# Demo
------
Demo Using Foundation
---------------------
Check out a demo using Foundation components here: `Demo Using
Foundation <https://github.com/QuickCorp/quickobjects_sample1foundation>`__
Demo Using Materializecss
-------------------------
Check out a demo using MaterializeCSS here: `Demo Using
Materializecss <https://qln.link>`__
Demo Using Raw CSS
------------------
Check out a demo using raw CSS: `Demo Using Raw
CSS <https://github.com/QuickCorp/qcobjects_profile_browser>`__
Another Basic Demo example: The simpliest demo example:
-------------------------------------------------------
.. code:: html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="https://qcobjects.dev/QCObjects.js"></script>
<script type="text/javascript">
var canvas1,canvas2,canvas3,container;
CONFIG.set('relativeImportPath','src/');
/**
* Main import sentence.
*/
Import('cl.quickcorp',function (){
/**
* Super Container MyOwnBody
*/
Class('MyOwnBody',HTMLBodyElement,{
customAttr:'custom',
body:document.body // breakes default body element and replace with them
});
/**
* Another custom class definition
*/
Class('MyContainer',HTMLElement,{
width:400,
height:400,
customAttr:'custom attr container'
});
/**
* Another custom class definition
*/
Class('canvas',HTMLCanvasElement,{
customAttr:'custom'
});
/**
* Another custom class definition
*/
Class('MyCanvas2',HTMLCanvasElement,{});
body = New(MyOwnBody); // binds to body
body.css({backgroundColor:'#ccc'});
container = document.getElementsByTagName('container')[0].Cast(MyContainer); // cast any javascript dom object to QC_Object class
container.css({backgroundColor:'red'}); // access binding in two directions to dom objects
/**
* Instance a new custom canvas
*/
canvas1 = New(canvas,{
width:100,
height:100,
});
canvas2 = New(canvas,{
width:200,
height:100,
});
canvas3 = New(canvas,{
width:300,
height:50,
});
canvas1.css({backgroundColor:'#000000'}); // like jquery and another style access
canvas1.body.style.backgroundColor='#000000'; // standard javascript style access
canvas2.body.style.backgroundColor='#0044AA'; // standard javascript style access
canvas3.body.style.backgroundColor='green'; // standard javascript style access
canvas1.append(); //append canvas1 to body
canvas2.attachIn('container'); // attach or append to specific tag containers
container.append(canvas3); // append canvas3 to custom tag binding
// canvas1.body.remove(); // remove canvas1 from dom
body.append(canvas3); // append canvas3 to body
// using components
var c1 = New(Component,{'templateURI':'templatesample.html',cached:false});
document.body.append(c1); // appends the c1 to the body
});
</script>
</head>
<body>
<container id="contentLoader" ></container>
</body>
</html>
# Fork
------
Please fork this project or make a link to this project into your
README.md file. Read the LICENSE.txt file before you use this code.
# Become a Sponsor
------------------
If you want to become a sponsor for this wonderful project you can do it
`here <https://sponsorsignup.qcobjects.dev/>`__
# Check out the QCObjects SDK
-----------------------------
You can check out the `QCObjects SDK <https://sdk.qcobjects.dev/>`__ and
follow the examples to make your own featured components
# Donate
--------
If you like this code please
`DONATE <https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UUTDBUQHCS4PU&source=url>`__!
|paypal|
# Installing
------------
Using QCObjects with Atom:
--------------------------
.. code:: shell
> apm install qcobjects-syntax
https://atom.io/packages/qcobjects-syntax
Using QCObjects in Visual Studio Code:
--------------------------------------
https://marketplace.visualstudio.com/items?itemName=Quickcorp.QCObjects-vscode
Installing with NPM:
--------------------
.. code:: shell
> npm install qcobjects-cli -g && npm install qcobjects --save
.. figure:: doc/img/QCObjects-Quick-Start.gif
:alt: screenshot2
screenshot2
Installing the docker playground:
---------------------------------
.. code:: shell
docker pull -a quickcorp/qcobjects && docker run -it --name qcobjects-playground --rm -it quickcorp/qcobjects
.. figure:: doc/img/QCObjects-Docker-Playground.gif
:alt: screenshot3
screenshot3
Using the code in the straight way into HTML5:
----------------------------------------------
.. code:: html
<script type="text/javascript" src="https://qcobjects.dev/QCObjects.js"></script>
# Reference
-----------
Essentials
----------
Here are the essentials symbols and concepts of
`QCObjects <https://qcobjects.dev>`__ Reference
QC\_Object
~~~~~~~~~~
Basic Type of all elements
ComplexStorageCache
~~~~~~~~~~~~~~~~~~~
With **CompletStorageCache** you can handle a cache for any object and
save it in the local storage.
Usage:
^^^^^^
.. code:: javascript
var cache = new CompletStorageCache({
index:object.id, // Object Index
load:(cacheController)=>{}, // A function to execute for the first time
alternate: (cacheController)=>{} // The alternate function to execute from the second time the source coude is loaded
});
Example:
^^^^^^^^
.. code:: javascript
var dataObject = {id:1,
prop1:1,
prop2:2
};
var cache = new ComplexStorageCache({
index: dataObject.id,
load: (cacheController) => {
dataObject = {
id:dataObject.id,
prop1:dataObject.prop1*2, // changing a property value
prop2:dataObject.prop2
};
return dataObject;
},
alternate: (cacheController) => {
dataObject = cacheController.cache.getCached(dataObject.id); // setting dataObject with the cached value
return;
}
});
// Next time you can get the object from the cache
var dataObjectCopyFromCache = cache.getCached(dataObject.id);
console.log(dataObjectCopyFromCache); // will show the very same object value than dataObject
asyncLoad
~~~~~~~~~
The **asyncLoad** function loads a code once in async mode. This is
useful to asure some initial process don't replicate its execution and
aren't loaded after sensitive code.
Usage:
^^^^^^
.. code:: javascript
asyncLoad(()=>{
// my code here
},args);
// Where args is an array of arguments, it can be the "arguments" special object
Example:
^^^^^^^^
.. code:: javascript
let doSomething = (arg1,arg2)=>{
asyncLoad((arg1,arg2)=>{
console.log(arg1);
console.log(arg2);
},arguments);
};
doSomething(1,2); // the code of doSomething will be executed once after the rest of asyncLoad queue of functions and before the execution of Ready event.
Class
~~~~~
This is NOT the class definition of ECMAScript 2015 (see `class
ECMAScript
2015 <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes>`__
for reference).
Class is a special function to help you to declare a class in an easier
and compatible way. It works cross-browser, and I hope ECMA could adopt
something like that in the future. To let javascript not to be confuse
about this, `QCObjects <https://qcobjects.dev>`__ uses "Class" not
"class" (note the Camel Case).
Usage:
^^^^^^
.. code:: javascript
Class('MyClassName',MyClassDefinition);
Where **MyClassDefinition** is an object with a QCObjects **prototype**
Example:
^^^^^^^^
.. code:: javascript
Class('MyClassName',InheritClass,{
propertyName1:0, // just to declare purpose
propertyName2:'',
classMethod1: function (){
// some code here
// note you can use "this" object
return this.propertyName1;
},
classMethod2: function () {
// some code here
return this.propertyName2;
}
});
var newObject = New(MyClassName,{
propertyName1:1, // this initializes the value in 1
propertyName2:"some value"
});
console.log(newObject.classMethod1()); // this will show number 1
console.log(newObject.classMethod2()); // this will show "some value"
QC\_Append, append method
~~~~~~~~~~~~~~~~~~~~~~~~~
This is a special method inserted to make your life easier when you want
to dynamically manipulate the **DOM**. You can insert even a
**Component**, a **QCObjects** Object or a **DOM** Element inside
another **HTMLElement**.
Usage:
''''''
.. code:: javascript
[element].append([object or element]);
Example:
^^^^^^^^
.. code:: javascript
// This will create a QCObjects class named "canvas" extending a HTMLCanvasElement with a customAttr property that has a "custom" value
Class('canvas',HTMLCanvasElement,{
customAttr:'custom'
});
// This will declare an instance canvas1 from the class canvas
let canvas1 = New(canvas,{
width:100,
height:100,
});
// This will append the canvas1 object to the document body
document.body.append(canvas1);
The \_super\_ method
~~~~~~~~~~~~~~~~~~~~
When you extend a QCObjects class from another one, you can use
\_super\_ method to get an instance from the main class definition.
Usage:
^^^^^^
.. code:: javascript
_super_('MySuperClass','MySuperMethod').call(this,params)
// where this is the current instance and params are method parameters
Example:
^^^^^^^^
.. code:: javascript
Class('MySuperiorClass',InheritClass,{
propertyName1:0, // just to declare purpose
propertyName2:'',
classMethod1: function (){
// some code here
// note you can use "this" object
return this.propertyName1;
},
});
Class('MyClassName',MySuperiorClass,{
propertyName1:0, // just to declare purpose
propertyName2:'',
classMethod2: function () {
// The next line will execute classMethod1 from MySuperiorClass
// but using the current instance of MyClassName1
return _super_('MySuperiorClass','classMethod1').call(this);
}
});
var newObject = New(MyClassName,{
propertyName1:1, // this initializes the value in 1
propertyName2:"some value"
});
console.log(newObject.classMethod2()); // this will show the number 1
New
~~~
Creates an object instance of a QCObjects class definition.
Usage:
^^^^^^
.. code:: javascript
let objectInstance = New(QCObjectsClassName, properties);
// where properties is a single object with the property values
NOTE: In the properties object you can use single values or getter as
well but they will be executed once.
Example:
^^^^^^^^
.. code:: javascript
Class('MyCustomClass',Object);
let objectInstance = New(MyCustomClass,{
prop1:1,
get randomNumber(){ // this getter will be executed once
return Math.random();
}
});
console.log(objectInstance.randomNumber); // it will show console.log(objectInstance.prop1); // it will show number 1
InheritClass
~~~~~~~~~~~~
A single common used QCObjects class definition.
\_Crypt
~~~~~~~
With \_Crypt you can encode serializable objects by a passphrase
Example (1):
^^^^^^^^^^^^
.. code:: javascript
var _string = New(_Crypt,{string:'hello world',key:'some encryption md5 key'});
console.log(_string._encrypt());
console.log(_string._decrypt()); // decodes encrypted string to the source
```
#### Example (2):
```javascript
_Crypt.encrypt('hola mundo','12345678866');
_Crypt.decrypt('nqCelFSiq6Wcpw==','12345678866');
GLOBAL
~~~~~~
**GLOBAL** is a special QCObjects class to reach the global scope. It
has a set and a get method to help you to manage the internal GLOBAL
properties.
Example:
^^^^^^^^
.. code:: javascript
GLOBAL.set('globalProperty1','some value in global scope');
var globalProperty1 = GLOBAL.get('globalProperty1');
CONFIG
~~~~~~
CONFIG is a smart class that manages the global settings of your
application. You can get the properties either from a config.json or
from the memory previously saved by a set() call.
Usage from memory:
^^^^^^^^^^^^^^^^^^
1.- In your initial code set the CONFIG initial values:
.. code:: javascript
CONFIG.set('someSettingProperty','some initial value');
2.- Then you can access it from anywhere in your code by using the get
method:
.. code:: javascript
var someSettingProperty = CONFIG.get('someSettingProperty');
Usage from config.json:
^^^^^^^^^^^^^^^^^^^^^^^
1.- You need to indicate first that you are using a config.json file by
setting the "useConfigService" value to true
.. code:: javascript
CONFIG.set('useConfigService',true); // using config.json for custom settings config
2.- Once you have set the value above QCObjects will know and look to
the next CONFIG settings into the file config.json in the basePath
folder of your application.
Usage from an encrypted config.json:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
There is also a way to use an encrypted config.json file in order to
protect your settings robots that can steal unprotected data from your
web application (like API keys web crawlers).
To encrypt your json file go to https://config.qcobjects.dev, put your
domain and the config.json content. The tool will encrypt your json and
you can copy the encrypted content to insert it in your config.json
file. QCObjects will know the data is encrypted and the process to
decode the data will be transparent for you.
waitUntil
~~~~~~~~~
waitUntil is a helper just in case you are in trouble trying to run a
code before a condition is true. The code inside waitUntil will be
executed once.
NOTE: This is useful in some cases but an excessive use is not
recommended.
Usage:
^^^^^^
.. code:: javascript
waitUntil(()=>{
// the code that will be executed after the condition is true
},()=>{return condition;});
// where condition is what I want to wait for
Example:
^^^^^^^^
.. code:: javascript
let someVar = 0;
waitUntil(()=>{
console.log('someVar is present');
},()=>{return typeof someVar != 'undefined';});
// where condition is what I want to wait for
Package
~~~~~~~
Defines a QCObjects package and returns it.
Usage:
^^^^^^
.. code:: javascript
Package('packageName',[packageContent]);
Where packageContent is an array of QCObjects Classes. If you only pass
the packageName param you will get the previously declared package
content.
Example (1):
^^^^^^^^^^^^
.. code:: javascript
'use strict';
Package('org.quickcorp.main',[
Class('Main',InheritClass,{
propertyName1:'propertyValue1',
}),
Class('MyCustomClass',InheritClass,{
propertyName2:'propertyValue2',
}),
]);
Example (2):
^^^^^^^^^^^^
.. code:: javascript
let mainPackage = Package('org.quickcorp.main'); // this will return the previously declared content of package 'org.quickcorp.main'
// mainPackage[0] will be the Main class definition.
// This is useful for code introspection
Import
~~~~~~
Imports a package from another JS file
Usage:
^^^^^^
.. code:: javascript
Import (packagename,[ready],[external]);
Where packagename is the name of the package, ready is a function that
will be executed after the package is loaded, and external is a boolean
value that indicates if the JS file is in the same origin or it is from
another external resource.
Example (1):
^^^^^^^^^^^^
.. code:: javascript
Import('org.quickcorp.main');
The above code will try to import a JS fila named
'org.quickcorp.main.js' from the path specified in the
**relativeImportPath** settings value present in your **CONFIG**. Inside
the JS file you have to define a package by using
Package('org.quickcorp.main',[Class1, Class2...])
Example (2):
^^^^^^^^^^^^
.. code:: javascript
Import('org.quickcorp.main',function (){
console.log('remote import is loaded');
},true);
The above code this time is trying to load the same package but using an
external path defined by the **remoteImportsPath** setting present in
your **CONFIG**
NOTE: In both examples above you have not use or specify the ".js"
extension. This it's used by default and can't be changed by security
reasons.
Export
~~~~~~
Put a symbol (var or function) in the global scope.
Usage:
^^^^^^
.. code:: javascript
Export('name of symbol');
Example:
^^^^^^^^
.. code:: javascript
(()=>{
// this is local scope
let someFunction = (someLocalParam)=>{
console.log(someLocalParam);
};
Export(someFunction); // now, someFunction is in the top level scope.
})();
// this is the top level scope
someFunction('this works');
Cast
~~~~
Use the Cast method of any DOM element to get the properties of another
type of object. This is useful to transform an object type to another
giving more flexibility in your code.
Usage:
^^^^^^
.. code:: javascript
let resultObject = [element or QCObjects type].Cast(objectToCastFrom);
Where objectToCastFrom is an object to get the properties from and put
it into the result object returned by Cast.
Example:
^^^^^^^^
.. code:: javascript
Class('MyOwnClass',{
prop1:'1',
prop2:2
});
let obj = document.createElement('div').Cast(MyOwnClass);
The above code will create a DOM object and Cast it to MyOwnClass.
Because of MyOwnClass is a QCObjects type class, obj will now have a
prop1 and prop2 properties, and will now be a QCObjects object instance
with a body property that is a div element.
Tag
~~~
Tag is a useful function to select any DOM element using selectors. Tag
will always return a list of elements, that you can map, sort, and
filter as any other list.
Usage:
^^^^^^
.. code:: javascript
var listOfElements = Tag(selector);
Where selector is a DOM query selector.
Example:
^^^^^^^^
.. code:: html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="https://qcobjects.dev/QCObjects.js"></script>
</head>
<body>
<div class="myselector">
<p>Hello world</p>
</div>
<script>
Ready(()=>{
Tag('.myselector > p').map((element)=>{
element.innerHTML = 'Hello world! How are you?';
});
});
</script>
</body>
</html>
In the above code, a paragraph element was created inside a div with a
css class named myselector by html, and then is modified dynamically
using the QCObjects Tag function. If you are familiar with query
selector frameworks like JQuery, you will love this one.
Ready
~~~~~
Assign a function to run after everything is done by QCObjects and after
the window.onload event. Use it to prevent 'undefined' DOM objects
error.
Usage:
^^^^^^
.. code:: javascript
Ready(()=>{
// My init code here!
});
Note that if you define dynamic components by using a HTML "component"
tag, the dynamic content load will not trigger Ready events. To catch
code everytime a dynamic component is loaded, use a Controller done
method instead.
You will use Ready implementation mostly when you want to implement
QCObjects in conjunction with another framework that needs it.
Component Class
~~~~~~~~~~~~~~~
A QCObjects class type for components.
Properties
^^^^^^^^^^
**[Component].domain** Returns a string with the domain of your
application. It is automatically set by QCObjects at the load time.
**[Component].basePath** Returns a string with the base path url of your
application. It is automatically set by QCObjects at the load time.
NOTE: If you want to change the components base path, you have to use
*CONFIG.set('componentsBasePath','new path relative to the domain')* in
your init code.
**[Component].templateURI** Is a string representing the component
template URI relative to the domain. When is set, the component will
load a template and append the inner content into the body childs as a
part of the DOM. To set this property, it is recommended to use the
ComponentURI helper function.
**[Component].tplsource** Is a string representing the source where the
template will be loaded. It can be "default" or "none". A value of
"default" will tell QCObjects to load the template from the templateURI
content. A value of "none" will tell QCObjects not to load a template
from anywhere.
**[Component].url** Is a string representing the entire url of the
component. It is automatically set by QCObjects when the component is
instantiated.
**[Component].name** Is a string representing the name of a component.
The name of a component can be any alphanumeric value that identifies
the component type. It will be internally used by ComponentURI to build
a normalised component template URI.
**[Component].method** Is a string representing a HTTP or HTTPS method.
By default, every component is set to use the "GET" method. In the most
of cases, you don't need to change this property.
**[Component].data** Is an object representing the data of the
component. When QCObjects loads a template, it will get every property
of data object and bind it to a template label representing the same
property inside the template content between double brakets (example:
{{prop1}} in the template content will represent data.prop1 in the
component instance). NOTE: To refresh the data bindings it is needed to
rebuild the component (see the use of [Component].rebuild() method for
more details ).