Documentation
The Philosophy
The basic idea is to make a simple framework being component based, scalable open and fast. The keyword is productivity.
Scalable
If you dont need a database for your project, the framework will not enforce you to install a database. Etc. Your code will stay at an equavalent complexity to your project complexity.
Open - The C Assembly Trick
One of the major reasons for C being the most successful programming language is the very special feature of allowing you to "step down" to assembler level. This framework adopts the same philosophy by allowing you to always "step down" and write in the underlying language, be it HTML, JavaScript, CSS, XSL, PHP, etc.
This framework is not taking possibilities from you, but adding a macro level - hopefully - making it much more fast to develop web applications. You may write the Bootstrap classes direct. Write the inline @styles. Add inline Javascript. We are making it CSP compliant... Add the attribute markup from this framework directly to HTML tags. Make the HTML conditional by making it up with @lang, @role, @publish, etc.
Full Stack - 5th Generation Language
- Machine Code - Bits and Bytes
- Assembly - Characters, Digits and Commands
- Symbolic Algebra & System Theory - Scoped Variables, Functions, Classes and Objects
- Declarative and Specialized Languages
- One Language for the Full Stack
Directory Structure
Site Root
__system__ directory
This is the system folder with all resources needed to run the system. Under normal circumstances there is no need to modify anything in this folder on a project level.
_setup directory
_pages directory
_directory defines the header and menu structure and links to all the page files. Sub folders defines the next level of the site structure; each folder must have its own _directory.xml
Generally speaking, it is not allowed to add files with the same page name but any other file extension, like .xsl, .xsd etc., as such files might have special meaning.
_manifest directory [optional]
_api directory [optional]
Other directories [optional]
__sessions directory [auto]
Temporary user data saved in folders named by session ID.
__accounts directory [auto]
Temporary user data saved in folders named by accountID.
Query Parameters
| Parameter | Purpose | Datatype | Preserved |
|---|---|---|---|
| p=0 | Show server load time | 0 | |
| p=1 | Javascript debugging | 1 | browser |
| p=2 | Logging, save temp files, etc. | 2 | browser |
| compile=true | compile | boolean | browser |
| lang | language setting | ISO lang code | cookie |
| region | regional setting | ISO country code | cookie |
| decimal | decimal separator | comma | dot | cookie |
| thousand | thousand grouping separator | comma | dot | space | apostrophe | cookie |
| datetime | datetime format | US [MM-DD-YYYY 12:00 AM] | EU [DD-MM-YYYY 24:00:00] | W3C [YYYY-MM-DDT24:00:00] | cookie |
| timezone | timezone setting | ISO [-]HH[:mm] | cookie |
| calendar | calendar system | christian | buddhist [+543] | muslim [-579] | cookie |
| currency | currency setting | ISO currency code | cookie |
| editor | show editor menus | true | session |
| editable | make application editable | true | browser |
| contenteditable | make text editable | true | browser |
| state | conditional showhide | {any} | |
| task | conditional showhide | {any} | browser |
| role | conditional showhide [lower roles only] | {any} | browser |
| profile | conditional showhide [lower profiles only] | {any} | browser |
| csp=false | Content Security Policy [role=9 only] | false | browser |
| fp=false | Feature Policy [role=9 only] | false | browser |
Basic Files
All projects will have at least 2 custom files:
- _directory.xml - shared header, footer, etc.
- {page}.xml - page definition
Most project will so have 2-3 files more:
- setup.xml - login system, etc.
- model.xml - relational database model
- {service}.xml - backend service
The _setup/setup.xml file
<?xml version="1.0" encoding="UTF-8"?>− <site><login system="db" retries="3"/></site>[1 lines]
The _directory.xml file
_pages folder being the root directory of your web site.
The _directory.xml file defines the shared header, footer, menus, etc. of each directory. Additional subdirectories addes as folders to
the _pages root folder. Each subdirectory needs a _directory.xml file. You may add subdirectories to the subdirectories
endlesly.The root tag must be <bs:document>
There is a special attribute @dir to indicate if the _directory.xml of a sub folder should inherit from the _directory.xml files from parent levels. @dir="0" means no inheritage. Omitted @dir attribute means inherit up till root _directory.xml. Other numbers indicate how many levels upwards should be inherited.
There is a special tag <bs:import> to indicate where the {page}.xml files are to be imported.
<?xml version="1.0" encoding="UTF-8"?>− <bs:document dir="0" xmlns:bs="http://www.bootstrap-cms.org"><bs:head/>− <bs:body>
Here is your content...
<bs:import/></bs:body>[1 lines]</bs:document>[3 lines]
The {page}.xml files
{page}.xml files. One file one page.The root tag must be <bs:page>. It has no visual impact.
There is a special tag <bs:include @scr="{file}.xml"> for including other files as resources.
<?xml version="1.0" encoding="UTF-8"?><bs:page xmlns:bs="http://www.bootstrap-cms.org">
Here is your content...
</bs:page>
<?xml version="1.0" encoding="UTF-8"?>− <bs:page xmlns:bs="http://www.bootstrap-cms.org">− <bs:head><bs:title>Home</bs:title>
Here is your title, keywords, custom css and scripts and other head information overwriting _directory.xml
</bs:head>[1 lines]<bs:body>
Here is your content...
</bs:body></bs:page>[3 lines]
The _setup/database/db/_uploads/model.xml file
The relational database model definition.
<?xml version="1.0" encoding="UTF-8"?>− <rd:database historyDefault="true" auditDefault="true" privilegeDefault="true" localsDefault="true" versioningDefault="true" rowlockDefault="true" locationDefault="true" surveyDefault="true" xmlns:rd="http://www.rapidweb.tools/db"><rd:include type="system" href="builtin/lang/metadata.xml"/>− <rd:table name="ACCOUNT" history="true" versioning="false" priority="10"><rd:column name="ACCOUNTNAME" type="@TEXT"/><rd:column name="ACCOUNTTYPE" datatype="INTEGER" length="1"/></rd:table>[2 lines]</rd:database>[4 lines]
The _service/{service}.xml file(s)
<?xml version="1.0" encoding="UTF-8"?><transaction xmlns:bs="http://www.bootstrap-cms.org">
Transaction flow goes here
</transaction>
Installation
Simple Install
- Download bsml.zip and setup.php
- Copy bsml.zip and setup.php to site root directory
- Type address to setup.php in your browser
- Follow the online instructions
WordPress Install
HTML
The idea is to create a semantic vocabulary.
Some tags are highly one to one as the starting point. Ex. if you write <bs:form>, then it writes an HTML <form> tag.
Other tags do not exist in HTML, fx. <bs:carousel>. Then the needed HTML is written to make a Carousel.
CSS
It is 99% Bootstrap 5 based - only with a very few extensions.
However, you do not have to add the Bootstrap CSS classes manually as the basic classes are added by the semantic tags including default margins, paddings, etc..
But you can still add classes like 'p-3' etc. either by the @class attribute or by semilary semantic markup like @padding="3". If those are set as defaults already, the default will be overwritten.
Javascript
The basic idea is to activate Javascript by HTML attribute markup the same way as it is being done in Bootstrap. Fx. @data-bs-toggle and @data-bs-target are used for navigating a tabpanel.
However, you do not have to add those attributes. Instead it is included by the semantic markup.
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel prev="true" next="true" xmlns:bs="http://www.bootstrap-cms.org">− <bs:seat><bs:h1>Fast</bs:h1></bs:seat>[1 lines]− <bs:seat><bs:h1>And Easy</bs:h1></bs:seat>[1 lines]</bs:carousel>[4 lines]
<?xml version="1.0" encoding="UTF-8"?>− <div id="D25idm781" data-bs-ride="carousel" data-bs-touch="true" class="carousel slide mx-auto" xmlns:bs="http://www.bootstrap-cms.org">− <div class="carousel-inner d-flex h-100 text-center">− <div data-bs-interval="5000" class="carousel-item">− <div><h1>Fast</h1></div>[1 lines]</div>[2 lines]− <div data-bs-interval="5000" class="carousel-item active">− <div><h1>And Easy</h1></div>[1 lines]</div>[2 lines]</div>[6 lines]− <button type="button" class="carousel-control-prev" data-bs-target="#D25idm781" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"/><span class="visually-hidden">Previous</span></button>[2 lines]− <button type="button" class="carousel-control-next" data-bs-target="#D25idm781" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"/><span class="visually-hidden">Next</span></button>[2 lines]</div>[13 lines]
Grid
| Semantic | Bootstrap | Breakpoint |
|---|---|---|
| watch | xs | from 0 |
| phone | sm | from 576 |
| tablet | md | from 768 |
| laptop | lg | from 992 |
| desktop | xl | from 1200 |
| cinema | xxl | from 1400 |
<bs:container/>
<bs:grid>
As row
<bs:col>
As column
| Semantic | Bootstrap | Description |
|---|---|---|
| @col="*" | col | Equal or remaining [default] |
| @col="auto" | col-auto | Adjust to content |
| @col="{1-12}" | col-{1-12} | Between 1 or 12 |
| Semantic | Bootstrap | Description |
|---|---|---|
| @{watch}="*" | col | Equal or remaining |
| @{watch}="auto" | col-auto | Adjust to content |
| @{watch}="{1-12}" | col-{1-12} | Between 1 and 12 |
<?xml version="1.0" encoding="UTF-8"?>− <bs:grid xmlns:bs="http://www.bootstrap-cms.org"><bs:col watch="*"/><bs:col/><bs:col/><bs:col/></bs:grid>[4 lines]
<bs:zigzag>
The ZigZag component gives you perfect responsive layout on shift of the position of text and images.
<?xml version="1.0" encoding="UTF-8"?>− <bs:zigzag layout="left-rigth" breakpoint="tablet" xmlns:bs="http://www.bootstrap-cms.org">− <bs:grid>− <bs:col><bs:image src=""/></bs:col>[1 lines]− <bs:col><bs:text/></bs:col>[1 lines]</bs:grid>[4 lines]− <bs:grid>− <bs:col><bs:text/></bs:col>[1 lines]− <bs:col><bs:image src=""/></bs:col>[1 lines]</bs:grid>[4 lines]− <bs:grid>− <bs:col><bs:image src=""/></bs:col>[1 lines]− <bs:col><bs:text/></bs:col>[1 lines]</bs:grid>[4 lines]</bs:zigzag>[15 lines]
<bs:listgroup/>
<bs:composition/>
<bs:splitter/>
<bs:breadcrumb/>
<bs:pagination/>
<bs:form/>
| Value | Description |
|---|---|
| form | Generic |
| database | Use with @data-format (*) |
| webservice | Connect to webservice from form with @data-format |
| Value | Description |
|---|---|
| db | Relational database |
| xmldb | XML file |
| jsondb | JSON file |
| Value | Description |
|---|---|
| flow | Form data |
| files | Binary files |
| xml | XML files |
| json | JSON files |
| Value | Description |
|---|---|
| login | Login form |
| signup | Sign up form |
| forgot | Forgot password form |
| user | User info form |
| activate | Active account form |
| Value | Description |
|---|---|
| javascript | Submit to javascript (*) |
| temp | Temporary data for form/dialog group |
| route | Javascript route by form |
| Value | Description |
|---|---|
| Send email from form | |
| paypal | Send PayPal from form |
@data-flow
Name of backend flow.
@data-target
Target for form response [@data-output] - IF not in form-container.
@data-root
XML root tag for the form data (server side) [xs:Name]. Defaults to root.
@data-no-root
Omit default XML root tag for the form data (server side) [true | false].
| Value | Description |
|---|---|
| HTML | HTML Submit |
| AJAX | AJAX Submit |
| QUERY | Submit as GET query |
| JS | For route |
| APP |
| Value | Description |
|---|---|
| SOAP | Simple Object Access Protocol by XML |
| GET | Select data |
| POST | Insert data |
| PUT | Full update |
| PATCH | Partial update |
| DELETE | Delete data |
@name
Form name as resolved as part of control names [xs:Name].
@omit-name (*)
Do not add name as part of name resolving [true | false]. Relevant if @name if used for reference. [NOT IMPLEMENTED YET]
@name-ns-prefix
List of ns prefixes together with @name-ns-uri's [space separated]
@name-ns-uri
Declare namespaces by list of namespace uri's together with name-ns-prefix [space separated]
@name-default-prefix
Add this prefix if names have no prefix (down the hierarchy).
@no-name-prefix
Add no prefix even no prefix is part of the names (down the hierarchy).
| Value | Description |
|---|---|
| xpath | root/name/@attribute |
| php | root[name][@attribute] (default) |
@name-resolving
Resolve name up the hierarchy [true | false] [NOT IMPLEMENTED YET]
@select
Name for @select for loading data into form [NOT IMPLEMENTED YET]
@column
Object column name [xs:Name]. Being used on top of @name when name resolving.
@return-state
&state when returning from server
@error-state
@state when returning from server with error
@autosubmit
autosubmit on form data change
@action
Submit to href [xs:anyURI]
@method
Form submit method [POST | GET]. Do not use.
@autocomplete
[on | off]
| Value | Description |
|---|---|
| load | On data load |
| enter | On control focus |
| click | On control click |
| input | On control input |
| leave | On control blur |
| submit | On submit |
| has | If has been validated then validate on input |
@validate-event
Do validation
@default-event
Add defaults
@format-event
Do formattings
@calc-event
Do calculations
@route-event
Do route (show/hide)
@inline
Form elements layout style [true | false]
| Value | Description |
|---|---|
| fixed | Always fixed |
| full | Always full |
| phone | |
| tablet | |
| laptop | |
| desktop | |
| cinema |
<bs:fieldset/>
@data-content
@data-format
<bs:form-grid/>
<bs:inline/>
<bs:input-group/>
<bs:control/>
<bs:submit/>
@data-content
@data-format
<bs:clear/>
@data-content
@data-format
<bs:reset/>
@data-content
@data-format
<bs:init/>
@data-content
@data-format
<bs:defaults/>
@data-content
@data-format
<bs:form-container/>
@data-content
@data-format
<bs:form-response/>
@data-content
@data-format
<bs:form-error/>
@data-content
@data-format
<bs:restart/>
<bs:feedback/>
@data-content
@data-format
<bs:helper/>
@data-content
@data-format
<bs:form-group/>
Is being used to make a collection of forms into a group of related form in the way that all form data will (only) be sent at the last form in the group
For the forms except the last one, the @data-content="temp".
<?xml version="1.0" encoding="UTF-8"?>− <bs:form-group xmlns:bs="http://www.bootstrap-cms.org">− <bs:form data-content="temp">− <bs:input type="text"><bs:label>Name</bs:label></bs:input>[1 lines]<bs:submit>Next</bs:submit></bs:form>[3 lines]− <bs:form data-content="temp">− <bs:input type="email"><bs:label>Email</bs:label></bs:input>[1 lines]<bs:submit>Next</bs:submit></bs:form>[3 lines]− <bs:form data-content="form">− <bs:input type="tel"><bs:label>Tel</bs:label></bs:input>[1 lines]<bs:submit>Send</bs:submit></bs:form>[3 lines]</bs:form-group>[12 lines]
Input Controls
With Data
| MarkUp | Description |
|---|---|
| @fixed | Control will get this value regardless of data. Works for both HTML and AJAX load. Not same as the @xs:fixed serving as validation markup. |
| bs:fixed | Same as @fixed but may have or other <bs:lang> sub elements. |
| @value | Control will get this value IF data has no value for the control - load default for both HTML and AJAX load. Overruled by @init or bs:init if any. |
| bs:value | Same as @value but may have <bs:lang> or other sub elements. |
| @init | Same as @value but only works or overrules @value for HTML load. |
| bs:init | Same as @init but may have <bs:lang> or other sub elements. |
| @empty | Control will get this value IF data is null (db) or absent (XML) - load default on null. |
| bs:empty | Same as @empty but may have <bs:lang> or other sub elements. |
| @name | Data is loaded from column with same name. Overruled by @select if any (serving as submit name only if present). |
| @table | Data is loaded from table with same name. |
| @select | Data is loaded from column with same name. |
| @select-table | Data is loaded from table with same name. |
| @default | Submit (or other event) default value |
| bs:default | Same as @default but may have <bs:lang> or other sub elements. |
| @default-event | The event to trigger default. |
| MarkUp | Description |
|---|---|
| @value | Value - if control is set by @checked or by data - for both load and submit. |
| @checked | Serves as load default. |
| @default | Serves as submit default if not checked. (To markup that value has not been set by the user). |
| @audodefault = false | The checkbox has no default value, i.e. no value is submitted if control is not checked. |
| MarkUp | Description |
|---|---|
| @value | Load default. |
| @default on root element or bs:option | Submit default. |
| @default-event | The event to trigger default. |
| @selected (on bs:option) | Load default. Overruled by @value if any. |
| bs:placeholder | Load default. Overruled by @value or @selected if any. |
Without Data
| MarkUp | Description |
|---|---|
| @value (or @fixed or @empty or @init) | Control set to this value. |
| @checked or @selected | Control set to this value (if bs:select or bs:radio overruled by @value etc.). |
Load and Submit
| MarkUp | Description |
|---|---|
| @noload | Control has no data loaded. (Used when @name is needed for other purposes.) |
| @nosubmit | Control values will not be submittet. (Used when @name is needed for other purposes.) |
| @readonly | Control be edited. (Data will not be validated). |
| @disabled | Control cannot be edited and will not be submittet. (Data will not be validated). |
| @novalidation | Control value will not be validated. |
<bs:input/>
<bs:password/>
<bs:display/>
<bs:integer/>
<bs:decimal/>
<bs:float/>
Time & Date
Timezone adjustments
| @timezone | Description |
|---|---|
| server | [default] The timezone is set to the server timezone GMT |
| user | The timezone is set to the user setting implicit or explicit by the regional setting |
| local | The timezone is set by the browser setting |
| (+|-)(H)H(:mm) | Any valid timezone value, ex. +7 or +5:30 |
Localization
Set by the user regional setting - or @localize
| Value | Description |
|---|---|
| EU | dd-mm-yyyy |
| US | mm-dd-yyyy |
| ISO | yyyy-mm-dd |
<bs:date/>
<bs:time/>
<bs:datetime/>
<bs:day/>
<bs:month/>
<bs:year/>
<bs:day-month/>
<bs:year/>
<bs:week/>
<bs:duration/>
<bs:email/>
<bs:tel/>
<bs:url/>
<bs:textarea/>
<bs:select/>
<bs:radio/>
<bs:chooser/>
<bs:checkbox/>
<bs:toggle/>
<bs:checklist/>
<bs:checktree/>
<bs:listbox/>
<bs:multiple/>
<bs:matrix/>
<bs:file/>
<bs:range/>
<bs:hidden/>
<bs:output/>
<bs:search/>
<bs:accordion/>
<bs:alert/>
<bs:badge/>
<bs:card/>
<bs:carousel/>
<bs:collapse/>
<bs:image/>
<bs:toast/>
<bs:table/>
<bs:tooltip/>
<bs:popover/>
Images
<bs:image-box/>
<bs:image/>
Audio & Video
<speak/>
<recognition/>
<pdf/>
<barcode/>
<qr/>
Sticky Elements
Parallax
Scroll Effects
HTML5 Validation
| Attribute | Description |
|---|---|
| @required | Mandatory |
| @pattern | Regular Expression |
| @maxLength | Max Length (blocking) |
| @minLength | Min Length |
| @min | Min Value |
| @max | Max Value |
| @step | Value Steps |
Datatype Validation
| Attribute | Description |
|---|---|
| integer | |
| decimal | |
| tel | |
| url | |
| date | |
| time | |
| datetime | |
| week | |
| day | |
| month | |
| year |
XML Schema SimpleType Validation
| Attribute | Description |
|---|---|
| xs:string | |
| xs:decimal | |
| xs:integer | |
| xs:date | |
| xs:time | |
| xs:datetime |
| Attribute | Description |
|---|---|
| xs:minExclusive | Any value greater than this |
| xs:maxExclusive | Any value less than this |
| xs:minInclusive | Any value greater or equal to this |
| xs:maxInclusive | Any value less or equal to this |
| xs:totalDigits | Max total digits including both integer and decimal parts |
| xs:fractionDigits | Max decimal fraction digits |
| xs:length | Fixed length |
| xs:minLength | Min length |
| xs:maxLength | Max length |
| xs:fixed | Must match this value |
| xs:minOccurs | Min instances |
| xs:maxOccurs | Max instances |
| Attribute | Description |
|---|---|
| xs:whiteSpace | Remove whitespaces [preserve | replace | collapse] |
| xs:default | Insert if value is empty |
Cross Field Validation
Multiple field based validation
Complex Calculation
Simple Calculation
Complex Calculation
Number Formatting
| Attribute | Description |
|---|---|
| @decimals | Fixed decimals [integer] |
| @minDecimals | Min decimal digits [integer] |
| @maxDecimals | Max decimal digits [integer] |
| @thousand | Thousand grouping [true] |
| @autocorrect | Parse Float [true] |
Date & Time Formatting
@timezone
| Timezone | Description |
|---|---|
| none | no timezone |
| server | GMT |
| user | region setting chosen by the user |
| local | The local timezone |
| {(+)HH:mm} | Timezone as specified |
Text Formatting
| Attribute | Description |
|---|---|
| @case |
<bs:formatting>
Styling
Bootstrap 5
@class
You can add any and all classes you like both Bootstrap classes or your own classes.
<?xml version="1.0" encoding="UTF-8"?>− <bs:document xmlns:bs="http://www.bootstrap-cms.org"><bs:head/></bs:document>[1 lines]
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel class="m-3" xmlns:bs="http://www.bootstrap-cms.org"><bs:seat/></bs:carousel>[1 lines]
@style
You can add any and all inline styles you like. The system takes care of CSP for you.
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel style="background-color:green;" xmlns:bs="http://www.bootstrap-cms.org"><bs:seat/></bs:carousel>[1 lines]
Attributes
Semantic Styles
Colors
Color Palette
| primary | success | info | warning | danger | secondary | dark | light | white | gray-dark | transparent |
|---|
| blue | indigo | purple | pink | red | orange | yellow | green | cyan | teal | gray | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| blue | indigo | purple | pink | red | orange | yellow | green | cyan | teal | gray | |
| 100 | |||||||||||
| 200 | |||||||||||
| 300 | |||||||||||
| 400 | |||||||||||
| 500 | |||||||||||
| 600 | |||||||||||
| 700 | |||||||||||
| 800 | |||||||||||
| 900 |
@color
Color Theme
@bg-color
Background Color
@text-color
Text Color
@outline
Outline Color
@color-hover
Color on Mouse over
@color-active
Color when Active
@color-focus
Color when Focus
@color-disabled
Color when Disabled
@bg-opacity
Background Color Opacity [0;1] #.#
@text-opacity
Text Color Opacity [0;1] #.#
Text
Borders
Spacing
Alignment
Grid
Shadow
Position
Overflow
Float
Height & Width
Size
Display
Responsive & Conditional
Use can easily add both responsive and conditional classes and styling.
Default Styling
Bootstrap User Guide
The components are having the default styling from the Bootstrap user guide.
However, it it easily overwritten.
Role and Profile
@role
Will be show on this (or list of) role(s) only.
@profile
Will be show on this (or list of) profile(s) only.
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel role="1 2 9" profile="3 6" xmlns:bs="http://www.bootstrap-cms.org"><bs:seat/></bs:carousel>[1 lines]
State and Task
@state
Show on this (or list of) state(s).
May be set as query parameter &state=1, but will not get preserved as query parameter on page navigation.
@task
Show on this (or list of) task(s).
May be set as a query parameter &task=2, and will be preserved as query parameter on page navigation.
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel state="2" tast="1" xmlns:bs="http://www.bootstrap-cms.org"><bs:seat/></bs:carousel>[1 lines]
Language & Region
@lang
Shown on this language code only.
@region
Shown on this region code only
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel lang="da" region="DK" xmlns:bs="http://www.bootstrap-cms.org"><bs:seat/></bs:carousel>[1 lines]
Data Access
@access
Show/hide/enable/disable the control based on the database privilege to the row
| Value | Description |
|---|---|
| 0 | hidden if privilege is 0 |
| 1 or 2 or 3 | shown as readonly if privilege is same or higher. |
| 4 or 5 | shown and enabled if privilege is 4 (or higher) or 5 |
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel access="1" xmlns:bs="http://www.bootstrap-cms.org"><bs:seat/></bs:carousel>[1 lines]
Version
@version
Version number (or list of version numbers) for showing the content.
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel version="2" xmlns:bs="http://www.bootstrap-cms.org"><bs:seat/></bs:carousel>[1 lines]
Publishing
@publish
DateTime for showing the content.
@deadline
Will be readOnly if dateTime for has been exceeded.
@expiry
DateTime for removing the content.
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel publish="2024-04-01" expiry="2024-05-01" xmlns:bs="http://www.bootstrap-cms.org"><bs:seat/></bs:carousel>[1 lines]
Performance
@p
Set as query parameter &p=2
| Value | Description |
|---|---|
| 0 | Show load time |
| 1 | JS debugging to browser console |
| 2 | Dump temp files |
| 3 | PHP debugging |
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel p="2" xmlns:bs="http://www.bootstrap-cms.org"><bs:seat/></bs:carousel>[1 lines]
Privacy
@privacy
Will be shown only if has this (or list of) privacy (gdpr or others) and it is still valid.
Condition
@condition
Editing
@editor
If @editor="true", then only visible in editor mode (query parameter &editor=true)
@editable
If @editable="true", then the element - and any descendant of the element - will be editable.
@contenteditable
If @contenteditable="true", then the text on this element will be editable
@noedit
If @noedit="true", then the element - and any descendant of the element - will NOT be editable even if an ancestor is set to @editable="true".
<?xml version="1.0" encoding="UTF-8"?>− <bs:carousel editor="true" editable="true" xmlns:bs="http://www.bootstrap-cms.org"><bs:seat/></bs:carousel>[1 lines]
<?xml version="1.0" encoding="UTF-8"?><bs:h1 contenteditable="true" xmlns:bs="http://www.bootstrap-cms.org">Hello</bs:h1>
The system has a comprehensive list of defining regions and languages with an expensive list of properties attached to it:
| Value | Description |
|---|---|
| @decimal | Decimal separator [dot | comma] |
| @thousand | Thousand group separator [dot | comma | space | aprostrophe] |
| @datetime | Datetime format [US | EU | RAW] |
| @timezone | Timezone (+)HH:mm |
| @timezoneCity | The city defining the timezone. |
| @calendar | Calendar system [christian | buddhist | muslim] |
| @firstdayofweek | First day of week [monday | sunday] |
The settings may be included in the _directory.xml file, in a separate settings.xml file under /setup directory or may rely on system builtin settings.
<bs:lang>
Only shown in this language.
@code
Language code.
@default
Is default language [true].
<?xml version="1.0" encoding="UTF-8"?>− <bs:lang code="en" xmlns:bs="http://www.bootstrap-cms.org"><bs:h1>Hello</bs:h1><bs:p>there...</bs:p></bs:lang>[2 lines]
<bs:lang-group>
<bs:region>
Only shown in this region.
@code
Region (country) code.
@default
Is default region [true].
<?xml version="1.0" encoding="UTF-8"?>− <bs:region code="UK" xmlns:bs="http://www.bootstrap-cms.org"><bs:h1>Hello</bs:h1><bs:p>there...</bs:p></bs:region>[2 lines]
<bs:region-group>
Localization
The location system consist of 3 parts
- The settings.xml file defining the regions and languages
- The input controls displaying data in line of regional settings.
- The <bs:text> element taking care of regional settings.
<bs:text>
@datetype
If the @datatype attributes is set, then numeric and datetime displays will be adjusted to regional settings.
Standard Text
The system has a number of builtin but configuarable standard text labels for forms, tables, etc.
Standard Messages
The system has a number builtin but configuarable standard server messages.
Database
Frontend
The frontend component of the database system consists of it's own namespace for marking up the frontend features of the databasesystem. In short, it consists of the following tags:
- ds:data
- ds:master
- ds:details
- ds:search
- ds:lookup
For tables, it has the following key features:
- ds:search
- ds:sort
Backend
The backend part of the system is almost entirely automatically enabled. The way to configure the system is by marking up in the frontend.
Relational Data
The relational data part of the system consists of a dedicated and separate markup syntax for defining data tables and views. It basically has two level:
- A simple markup for doing the basic stuff.
- SQML - a full XML markup of SQL.
XML & JSON
Database Frontend
Data Table
| Id | Name | |
|---|---|---|
| 123 | Peter Hansen | peter@hansen.com |
@name
<?xml version="1.0" encoding="UTF-8"?>− <bs:table name="user" xmlns:bs="http://www.bootstrap-cms.org">− <bs:head>− <bs:row><bs:cell>Id</bs:cell><bs:cell>Name</bs:cell><bs:cell>Email</bs:cell></bs:row>[3 lines]</bs:head>[4 lines]− <bs:body>− <bs:row><bs:cell>Id</bs:cell><bs:cell>Name</bs:cell><bs:cell>Email</bs:cell></bs:row>[3 lines]</bs:body>[4 lines]</bs:table>[10 lines]
<ds:part>
<?xml version="1.0" encoding="UTF-8"?>− <bs:table name="user" xmlns:bs="http://www.bootstrap-cms.org">− <bs:head>− <bs:row><bs:cell>Id</bs:cell><bs:cell>Name</bs:cell><bs:cell>Email</bs:cell></bs:row>[3 lines]</bs:head>[4 lines]− <ds:part>− <ds:row><bs:column name="@id"/><bs:column name="name"/><bs:column name="email"/></ds:row>[3 lines]</ds:part>[4 lines]</bs:table>[10 lines]
Data Cards
Data Accordion
Data Carousel
bs:code
Data object.
bs:image
Data object.
Master Data
Data Details
Data Search
Data History
Data Versioning
Row Privilege
Data Navigation Layout
Details Next Screen
Outline Details
Inline Details
Details Dialog
Filter & Sort
Details Button
New Row Button
- Insert at end of table
- Insert Before or After this row
Delete Button
Duplicate Button
LookUp Button
Populate and/or select Select Control option
Populate and/or select Radio option
Populate and/or select Menu item
Value-of @select
Data Storage
- Relational Data
- XML
- JSON
Relational Database
It is optional to install/use a relational database (mySQL or MariaDB).
If you choose to setup a RDBMS then it will include a standard system part and a custom part. The system tables are needed for sign in, privilege management and more.
XML
It is possible to run the sign in and privilege system entirely based on XML files.
However, XML files are also useful for business data optionaly in combination with an RDBMS.
JSON
Sign In
Sign Up
To sign up the users, you will need to make a HTML form like this:
<?xml version="1.0" encoding="UTF-8"?>− <bs:form validate="submit" data-content="signup" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bs="http://www.bootstrap-cms.org">− <bs:input required="true" name="name" type="text">− <bs:label><bs:icon name="user" margin-right="1"/>Name</bs:label>[1 lines]<bs:invalid-text asTooltip="true">Please enter your name</bs:invalid-text></bs:input>[3 lines]− <bs:input type="email" name="email" required="true" datatype="email">− <bs:label><bs:icon name="envelope" margin-right="1"/>Email</bs:label>[1 lines]<bs:invalid-text asTooltip="true">Please enter your email</bs:invalid-text></bs:input>[3 lines]− <bs:input type="password" name="password" required="true">− <bs:label><bs:icon name="key" margin-right="1"/>Password</bs:label>[1 lines]<bs:invalid-text asTooltip="true">Please enter your password</bs:invalid-text></bs:input>[3 lines]− <bs:input type="password" required="true">− <bs:label><bs:icon name="key" margin-right="1"/>Retype Password</bs:label>[1 lines]<bs:invalid-text asTooltip="true">Please retype your password</bs:invalid-text></bs:input>[3 lines]− <bs:button type="submit" color="success"><bs:icon name="sign-language" margin-right="1"/>Sign Up</bs:button>[1 lines]− <bs:close><bs:icon name="close" margin-right="1"/>Close</bs:close>[1 lines]</bs:form>[20 lines]
Log In
To log in the users, you will need to make an HTML form like this:
<?xml version="1.0" encoding="UTF-8"?>− <bs:form validate="submit" data-content="login" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bs="http://www.bootstrap-cms.org">− <bs:input type="email" name="email" required="true" addon="true" autofocus="true" datatype="email">− <bs:placeholder><bs:lang code="en">your email</bs:lang><bs:lang code="da">din email</bs:lang></bs:placeholder>[2 lines]− <bs:label><bs:lang code="en">Email</bs:lang><bs:lang code="da">Email</bs:lang></bs:label>[2 lines]− <bs:invalid-text asTooltip="true"><bs:lang code="en">Please enter your email</bs:lang><bs:lang code="da">Skriv email</bs:lang></bs:invalid-text>[2 lines]</bs:input>[9 lines]− <bs:input type="password" name="password" required="true" addon="true">− <bs:placeholder><bs:lang code="en">your password</bs:lang><bs:lang code="da">din adgangskode</bs:lang></bs:placeholder>[2 lines]− <bs:label><bs:lang code="en">Password</bs:lang><bs:lang code="da">Adgangskode</bs:lang></bs:label>[2 lines]− <bs:invalid-text asTooltip="true"><bs:lang code="en">Please enter your password</bs:lang><bs:lang code="da">Skriv din adgangskode</bs:lang></bs:invalid-text>[2 lines]</bs:input>[9 lines]− <bs:button type="submit" color="success"><bs:icon name="box-arrow-in-right" margin-right="1"/><bs:lang code="en">Log In</bs:lang><bs:lang code="da">Log På</bs:lang></bs:button>[3 lines]</bs:form>[24 lines]
Forgot Password
To create a "forgot password" dialog, you will need to make an HTML form like this:
<?xml version="1.0" encoding="UTF-8"?>− <bs:form data-content="forgot" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bs="http://www.bootstrap-cms.org">− <bs:input type="email" name="email" required="true" addon="true" autofocus="true" datatype="email">− <bs:placeholder><bs:lang code="en">your email</bs:lang><bs:lang code="da">din email</bs:lang></bs:placeholder>[2 lines]− <bs:label><bs:lang code="en">Email</bs:lang><bs:lang code="da">Email</bs:lang></bs:label>[2 lines]− <bs:invalid-text asTooltip="true"><bs:lang code="en">Please enter your email</bs:lang><bs:lang code="da">Skriv din email</bs:lang></bs:invalid-text>[2 lines]</bs:input>[9 lines]− <bs:input type="text" name="key" addon="true">− <bs:placeholder><bs:lang code="en">key code (check your mailbox)</bs:lang><bs:lang code="da">kode (check din mailbox)</bs:lang></bs:placeholder>[2 lines]− <bs:label><bs:lang code="en">Code (from email when received)</bs:lang><bs:lang code="da">Kode (fra email når du har modtaget den)</bs:lang></bs:label>[2 lines]</bs:input>[6 lines]− <bs:button type="submit" color="success"><bs:lang code="en">Send</bs:lang><bs:lang code="da">Send</bs:lang></bs:button>[2 lines]− <bs:close margin-left="1"><bs:lang code="en">Close</bs:lang><bs:lang code="da">Luk</bs:lang></bs:close>[2 lines]</bs:form>[23 lines]
Activate Account
To activate the user accounts, you will need to make an HTML form like this:
<?xml version="1.0" encoding="UTF-8"?>− <bs:form data-content="activate" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bs="http://www.bootstrap-cms.org">− <bs:input type="email" name="email" required="true" autofocus="true" datatype="email">− <bs:placeholder><bs:lang code="en">email</bs:lang><bs:lang code="da">email</bs:lang></bs:placeholder>[2 lines]− <bs:label><bs:lang code="en">Email</bs:lang><bs:lang code="da">Email</bs:lang></bs:label>[2 lines]− <bs:invalid-text asTooltip="true"><bs:lang code="en">Please enter your email</bs:lang><bs:lang code="da">Skriv din email</bs:lang></bs:invalid-text>[2 lines]</bs:input>[9 lines]− <bs:input type="text" name="key" placeholder="">− <bs:placeholder><bs:lang code="en">key code from email</bs:lang><bs:lang code="da">kode fra email</bs:lang></bs:placeholder>[2 lines]− <bs:label><bs:lang code="en">Code (from email when received)</bs:lang><bs:lang code="da">Kode (fra email når du har modtaget den)</bs:lang></bs:label>[2 lines]</bs:input>[6 lines]− <bs:button type="submit" color="success"><bs:lang code="en">Send</bs:lang><bs:lang code="da">Send</bs:lang></bs:button>[2 lines]− <bs:close margin-left="1"><bs:lang code="en">Close</bs:lang><bs:lang code="da">Luk</bs:lang></bs:close>[2 lines]</bs:form>[23 lines]
Log Out
User Profile
For the user to change name, password and more, you will need to make an HTML form like this:
<?xml version="1.0" encoding="UTF-8"?><bs:data name="S_USER" format="db" history="true" mode="HTML" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bs="http://www.bootstrap-cms.org"></bs:data>
Group
For the administrative purpose managing users and groups, you will need to make HTML forms like this:
Role & Profile
Roles and Profiles are related to the user profile and used to control access throughout the application.
<?xml version="1.0" encoding="UTF-8"?><bs:carousel role="2" profile="3" xmlns:bs="http://www.bootstrap-cms.org"/>
Role
@role is being used for giving hierarchical access rights:
| Role | Description |
|---|---|
| 0 | Standard non-signed in public user |
| 1 | Basic signed in user |
| -1 | Cookie logged in user |
| 2-7 | Custom roles |
| 8 | Admin |
| 9 | System |
Profile
@profile is used for optionally "horisontal" access control.
The standard profile is 0.
Transaction
The system has its own markup language for defining backend transactions.
Frontend
bs:code
@flow
The name of the transflow. (Not needed if included in bs:form-response to bs:form with @data-flow.)
@part
The name of the flow part (if any).
May act as database object container (also).
ts:output
@flow
Name of flow.
@part
Name of flow part.
ts:flow
Flow container.
@flow (name)
ts:part
Flow part container.
@part (name)
ts:content
Transflow content container.
May act as database object container (also).
bs:form-response
Backend
include
allowed
variable
copy
in
process
out
Send Email
The system has its own dynamic email markup language.
<?xml version="1.0" encoding="UTF-8"?>− <es:email xmlns:bs="http://www.bootstrap-cms.org" xmlns:es="http://www.emailstrap.org">− <es:to><es:email>info@data-diagrams.com</es:email><es:name>Support</es:name></es:to>[2 lines]− <es:from>− <es:email><es:value-of select="email"/></es:email>[1 lines]− <es:name><es:value-of select="name"/></es:name>[1 lines]</es:from>[4 lines]<es:subject>DigitalBlind Kontakt</es:subject>− <es:body>− <es:text><es:value-of select="name"/><es:crlf/><es:value-of select="email"/><es:crlf/><es:value-of select="telephone"/><es:crlf/><es:value-of select="nationality"/><es:crlf/><es:value-of select="message"/><es:crlf/></es:text>[10 lines]− <es:html><h1>DigitalBlind</h1><h2>Bruger Spørgsmål</h2>− <div><span>Navn: </span><es:value-of select="name"/></div>[2 lines]− <div><span>Email: </span><es:value-of select="email"/></div>[2 lines]− <div><span>Telefon: </span><es:value-of select="telephone"/></div>[2 lines]− <div>− <div style="border:solid 1px;padding:10px;margin-top:10px;">− <p><es:value-of select="message"/></p>[1 lines]</div>[2 lines]</div>[3 lines]</es:html>[15 lines]</es:body>[27 lines]</es:email>[37 lines]
Send Newsletters
The system has builtin support for publishing newsletters.
Send Notification
The system has support sending change notifications to users.
The typically notification is sent upon database updates.
Cron Jobs
Cron Jobs are made as scheduled Transaction Flows
APIs
Samples