-
Notifications
You must be signed in to change notification settings - Fork 4
Home
content is up-to-date for ccmjs v27.5.0
Click here for the German version.
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 webpage, the ccm.start function is available.
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 );