-
Notifications
You must be signed in to change notification settings - Fork 4
Client side Component Model
content is up-to-date for ccmjs v27.5.0
Mit dem JavaScript-Befehl ccm.start(component, config, element) kann eine Komponente (component) mit einer konkreten Konfiguration (config) in einen Webseitenbereich (element) eingebettet werden. Die von der Komponente realisierte App wird dann mit dieser Konfiguration im Webseitenbereich angezeigt.
Sobald in einer Webseite die ccm.js eingebunden ist, steht der ccm.start-Befehl zur Verfügung.
Die latest-Version findet sich hier.
Hier ein Beispiel für die Einbettung einer Quiz-App:
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="https://ccmjs.github.io/ccm/ccm.js"></script>
<script>
ccm.start( 'https://ccmjs.github.io/akless-components/quiz/ccm.quiz.js', {
feedback: true,
questions: [
{
"text": "Funktioniert dieses Beispiel?",
"input": "radio",
"answers": [
{ "text": "Ja", "correct": true },
{ "text": "Nein" }
]
}
]
}, document.body );
</script>Bei W3C-Webkomponenten liegt der Fokus auf HTML und der Erweiterung von HTML-Elementen. Bei der ccmjs-Webtechnologie liegt der Fokus auf JavaScript und der Konfigurierbarkeit mittels JSON. Anders als bei Angular, React und Vue.js können Komponenten nachträglich zur Laufzeit in Webseiten eingebettet werden. Die Einbettung funktioniert auch mehrfach in der selben Webseite konfliktfrei in unterschiedlichen Versionen und Konfigurationen.
Alle abhängigen Ressourcen wie HTML-Templates und CSS sind über die Konfiguration ohne Codeänderung austauschbar.
Hier ein Beispiel für den Austausch des HTML-Templates und des CSS:
ccm.start( 'https://ccmjs.github.io/akless-components/quiz/ccm.quiz.js', {
css: [ 'ccm.load', 'https://ccmjs.github.io/akless-components/quiz/resources/weblysleek-v2.css' ],
html: [ 'ccm.load', 'https://ccmjs.github.io/akless-components/quiz/resources/templates-v3.html' ],
// ...
}, document.body );Abhängige Ressourcen werden mit der Funktion ccm.load geladen.
Die Funktion wird hier nicht direkt aufgerufen, sondern erst zur Laufzeit beim Aufruf von ccm.start.
Abhängigkeiten werden deshalb als Array angegeben.
With the JavaScript command ccm.start(component, config, element), a component (component) with a specific configuration (config) can be embedded in a web page area (element). The app realized by the component is then displayed with this configuration in the website area.
As soon as ccm.js is integrated into a website, the ccm.start command is available.
The latest version can be found here.
Here is an example of embedding a quiz app:
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="https://ccmjs.github.io/ccm/ccm.js"></script>
<script>
ccm.start( 'https://ccmjs.github.io/akless-components/quiz/ccm.quiz.js', {
feedback: true,
questions: [
{
"text": "Does this example work?",
"input": "radio",
"answers": [
{ "text": "Yes", "correct": true },
{ "text": "No" }
]
}
]
}, document.body );
</script>W3C Web Components focuses on HTML and the extension of HTML elements. The ccmjs web technology focuses on JavaScript and configurability using JSON. Unlike Angular, React and Vue.js, components can be subsequently embedded in web pages at runtime. The embedding also works multiple times in the same website without conflict in different versions and configurations.
All dependent resources like HTML templates and CSS are interchangeable via configuration without any code change.
Here is an example of replacing the HTML template and the CSS:
ccm.start( 'https://ccmjs.github.io/akless-components/quiz/ccm.quiz.js', {
css: [ 'ccm.load', 'https://ccmjs.github.io/akless-components/quiz/resources/weblysleek-v2.css' ],
html: [ 'ccm.load', 'https://ccmjs.github.io/akless-components/quiz/resources/templates-v3.html' ],
// ...
}, document.body );Dependent resources are loaded using the function ccm.load.
The function is not called directly here, but at runtime when ccm.start is called.
Dependencies are therefore specified as an array.