Besides backend part there is also an opportunity to build single page web application. For this purpose there are some utilities prepared at the js side which come out of the box, like routing, web socket communication and some helpers.
Usually access of javascript part of framework happens on the top of dom structure (like index.html) after js libraries have been loaded by creating an App object of MSM2 library:
<script src="https://cdn.jsdelivr.net/npm/text-encoding@0.6.4/lib/encoding.min.js"></script>
<script src="/build.js"></script>
<script>
let app = new MSM2.App();
</script>
HTML websocket client offers a number of utility functions for communication to websocket controller at back end side. Result message coming from back end (response on the function call) will be a MsmHtmlResponse object:
export class MsmHtmlResponse {
constructor(
public elements: MsmHtmlElement[],
public actionId?: string
) {}
}where MsmHtmlElement is:
export class MsmHtmlElement {
constructor(
public selector: string,
public srcSelector: string,
public html: string
) {}
}Front end listens on socket messages with MsmHtmlResponse and performs substitution of DOM element by html property of the response.
There are two versions of functions: that wait and that do not wait for response message. Functions that wait for response message have "$"-sign at the end of its name and return RxJS Observable: Observable<MsmHtmlResponse>. For Observables visit RxJS page. Subscription will be resolved after elements (see MsmHtmlResponse.elements) have been rendered. Functions that do not wait for response messages are straight "void" functions without result returning: rendering occurs asynchronous.
HTML websocket client offers a number of utility functions for communication to websocket controller at back end side. Difference to HTML Websocket Client is that the call does not affect rendering. Similar to HTML Websocket Client it has two types of function: with and without return values. However the observable version of functions end with ...AndGetJson$ and return Observable<MsmJsonResponse>
export class MsmJsonResponse {
constructor(
public result: any,
public actionId: string
) {}
} Single page routing of the framework always begins with "#" in this example: http://localhost:5000/user/index.html#certificate/page/1 it is "certificate/page/1" part.
To set routing configuration you should use app.setRouting() function.
elements: RequestElement[] | Function,
url: string,
beforeNavigate?: string | Function,
afterNavigate?: string | Function
Elements is an array of RequestElement objects, which describe what elements will be affected by navigation to the specified URL.
public elementId: string, // id of element which will be changed
public path: string, // path of new template which will replace the element
public payload: any, // data which can be used on backend when template preparing occurs
It is a pattern of the URL which defines the match. Empty URL describes empty hash value or its absence: http://localhost:5000/user/index.html, it can contain definition of variables (as shown in the general usage bellow): certificate/page/${pageValue}. From multiple matching patterns the most specified will be used, for example: certificate/page/${pageValue} and certificate by visiting http://localhost:5000/user/index.html#certificate/page/1 will use certificate/page/${pageValue} pattern.
These hooks are functions, which will be called before call has been sent to the backend and after rendering on frontend finished. The functions can be wrapped in observables or promises.
app.setRouting([
{
url: "",
beforeNavigate: function() {
showLoading(true);
},
elements: [{
elementId: "userAccountMain",
path: "user/index.html",
payload: {
path: "user/fragments/menu-user-account.html"
}
}],
afterNavigate: function() {
showLoading(false);
}
},
{
url: "products",
beforeNavigate: function() {
showLoading(true);
},
elements: [{
elementId: "userAccountMain",
path: "user/index.html",
payload: {
path: "user/sections/products.html"
}
}],
afterNavigate: function() {
showLoading(false);
}
},
{
url: "product/choose-type",
elements: function (page) {
var sectionUrl = "user/sections/choose-type-products.html";
var payloadSection = { path : sectionUrl };
var elements = [
{ elementId : "userAccountMain", path: "user/index.html", payload: payloadSection },
];
return elements;
},
},
{
url: "certificate/page/${pageValue}", // last placeholder will allow you to use its value as pageValue variable
beforeNavigate: function(pageValue) { // example of usage of this variable
if(pageValue == 1){
showLoading(true);
}
},
elements: function(pageValue) {
...
return elements;
}
}
]);
Simply evaluates javascript code as string.
Attributes:script :
string - javascript as string
Example:
MSM2.App.ScriptHelper.evaluates("console.log('example')");Evaluates javascript code from file/url. This function returns an observable.
Attributes:url :
string - script relative url
MSM2.App.ScriptHelper.getScriptAndEvaluate("/js/example.js").subscribe(
function() {
console.log("example.js code evaluated");
}
); Collects data from form inputs (input/textarea/select) and returns an object according name attributes and values of the inputs. Nested objects have syntax of array in name attributes. For example: <input name="firstLevel[secondLevel][thirdLevel]" type="text" value="hello"> will cause following nested object:
firstLevel: {
secondLevel: {
thirdLevel: "hello"
}
}formOrElementInForm :
HTMLElement - is an element around which the inputs will be collected
formSelector :
string - is the selector of element inside of which the inputs will be collected, 'form' by default
MSM2.App.HtmlHelper.getPayloadOfForm(saveBtn.get(0), '#hello')
This function can fill the form inputs according to payload. Nested objects have syntax of array in name attributes. For example payload of form:
firstLevel: {
secondLevel: {
thirdLevel: "hello"
}
} will update forms input: <input name="firstLevel[secondLevel][thirdLevel]" type="text"> and set value hello
formOrElementInForm :
HTMLElement - is an element around which the inputs will be collected
payload :
string - is an object with data to be set into form inputs
formSelector :
string - is the selector of element inside of which the inputs will be collected, 'form' by default
Requests to render the whole page.
Requests to render the whole page.
Requests rendering of specified elements.
Attributes:elements :
Array<RequestElement> - requested elements for rendering
payload :
any - is an object with instructions for rendering an elements
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
Requests rendering of specified elements.
Attributes:elements :
Array<RequestElement> - requested elements for rendering
payload :
any - is an object with instructions for rendering an elements
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does invocation of method and requests rendering of specified elements afterwards.
Attributes:beanId :
string - bean unique name which contains in Spring web context
scope :
BeanScopeType - the scope of existing bean in the web context
REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
functionName :
string - the method name in the bean which will be executed
args :
any - arguments which have in the called method like input parameters
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does invocation of method and requests rendering of specified elements afterwards.
Attributes:beanId :
string - bean unique name which contains in Spring web context
scope :
BeanScopeType - the scope of existing bean in the web context
REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
functionName :
string - the method name in the bean which will be executed
args :
any - arguments which have in the called method like input parameters
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does update of bean and requests rendering of specified elements afterwards.
Attributes:beanId :
string - bean unique name which contains in Spring web context
scope :
BeanScopeType - the scope of existing bean in the web context
REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does update of bean and requests rendering of specified elements afterwards.
Attributes:beanId :
string - bean unique name which contains in Spring web context
scope :
BeanScopeType - the scope of existing bean in the web context
REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to MongoDB to add new document and requests rendering of specified elements afterwards.
Attributes:db :
string - database name
col :
string - collection name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to MongoDB to add new document and requests rendering of specified elements afterwards.
Attributes:db :
string - database name
col :
string - collection name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to MongoDB to remove a document and requests rendering of specified elements afterwards.
Attributes:db :
string - database name
col :
string - collection name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to MongoDB to remove a document and requests rendering of specified elements afterwards.
Attributes:db :
string - database name
col :
string - collection name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to add new object and requests rendering of specified elements afterwards.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to add new object and requests rendering of specified elements afterwards.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to save an object and requests rendering of specified elements afterwards.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to save an object and requests rendering of specified elements afterwards.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to remove an object and requests rendering of specified elements afterwards.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to remove an object and requests rendering of specified elements afterwards.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does invocation of method.
Attributes:beanId :
string - bean unique name which contains in Spring web context
scope :
BeanScopeType - the scope of existing bean in the web context
REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
functionName :
string - the method name in the bean which will be executed
args :
any - arguments which have in the called method like input parameters
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does invocation of method and return a response as JSON-object afterwards.
Attributes:beanId :
string - bean unique name which contains in Spring web context
scope :
BeanScopeType - the scope of existing bean in the web context
REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
functionName :
string - the method name in the bean which will be executed
args :
any - arguments which have in the called method like input parameters
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does update of bean.
Attributes:beanId :
string - bean unique name which contains in Spring web context
scope :
BeanScopeType - the scope of existing bean in the web context
REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does update of bean and return a response as JSON-object afterwards.
Attributes:beanId :
string - bean unique name which contains in Spring web context
scope :
BeanScopeType - the scope of existing bean in the web context
REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to add new object.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to add new object and return a response as JSON-object afterwards.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to save an object.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to save an object and return a response as JSON-object afterwards.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to remove an object.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
It does direct call to Spring Data Repository to remove an object and return a response as JSON-object afterwards.
Attributes:repositoryId :
string - repository name
elementInForm :
HTMLElement - the HTML element, which is included in the form element and this is action element
elements :
Array<RequestElement> - requested elements for rendering
eventType :
EventType - type of scope a websocket events subscriptions
GLOBAL,SHARED,USER
endpoint :
string - the websocket url
This tag designed to use common fragments of HTML for including these fragments as part of the pages.
id - unique identification for the tag.
path - the path to the fragment of HTML file.
param - the name of parameter in the URL, which is value of that will be pass into a fragment.
data-lazy-render - this argument use to activate lazy rendering true/false.
data-template-path - the path for the template which use with lazy rendering,
data-lazy-render must be true.
data-lazy-load-js - the path for the javascript which will be executed after lazy rendering.
data-lazy-load-css - the path for the stylesheet which will be executed after lazy rendering.
data-payload-json - the payload object as JSON string which will be executed for rendering.
<msm:fragment id="msm-fragment-1" path="path/to/fragment.html"/>
<msm:fragment id="msm-fragment-1" path="path/to/fragment.html" param="${@url|id}"/>
The param attribute allows to define a name for a parameter in the URL, for example we see the placeholder for a name of parameter is ${@url|id}. That means if we make an address like a yourwebsite.com/site/id/page1.html, so this page1 value will be pass into a fragment path/to/fragment.html and after inside we can use ${fragment|@param} to retrieve this value page1.
<msm:fragment id="msm-fragment-1" bean="sessionBean" scope="SESSION" path="${@bean|path}"/>
This example shows us, how we can get a property value path from a bean with a name sessionBean. The scope attribute helps to make it clear for framework which scope the bean has.
This tag designed to use as REST client directly from a template.
<msm:template> - this tag used to keep HTML-representation for template of element. If the result will return a list of items, it will render template as repeated HTML-element.
<msm:empty> - this tag used to keep HTML-representation for template of element. If the result will return an empty item or list of items, it will render template as HTML-element.
<msm:header> - this tag used to keep HTML-representation for header element.
<msm:footer> - this tag used to keep HTML-representation for footer element.
id - unique identification for the tag.
endpoint - the endpoint of REST API.
method - the HTTP-method definition. It supports GET/POST.
item-name - the item definition name for the placeholders inside
msm:template tag.
request - the request body as JSON object for HTTP POST requests.
header - this contains input JSON object for the header rendering.
footer - this contains input JSON object for the footer rendering.
<div id="wrapperTag">
<msm:rest id="restElementTag"
endpoint="https://restapi.com/api/v1"
request="{ 'searchTerms' : '${fragment|@param}' }"
header="{ 'header-item-name' : 'h', 'city' : 'Foo' }"
footer="{ 'footer-item-name' : 'f', 'name' : 'Bar' }"
method="POST" item-name="item">
<msm:empty><p>No results</p></msm:empty>
<msm:header><h1>${h|city}</h1></msm:header>
<msm:template><p>${item|value}</p></msm:template>
<msm:footer><p>${f|name}</p></msm:footer>
</msm:rest>
</div>
This tag allows to request easily a REST endpoint without any coding a new REST-client for any solution. In this snippet you can see an example for a POST call. The body with request arguments for a POST call specified in request attribute as JSON object.
<div id="wrapperTag">
<msm:rest id="restElementTag"
endpoint="https://restapi.com/api/v1?arg1=Foo&arg2=Bar"
header="{ 'header-item-name' : 'h', 'city' : 'Foo' }"
footer="{ 'footer-item-name' : 'f', 'name' : 'Bar' }"
method="GET" item-name="item">
<msm:empty><p>No results</p></msm:empty>
<msm:header><h1>${h|city}</h1></msm:header>
<msm:template><p>${item|value}</p></msm:template>
<msm:footer><p>${f|name}</p></msm:footer>
</msm:rest>
</div>
This tag allows to request easily a REST-endpoint without any coding a new REST-client for any solution. In this snippet you can see an example for a GET call. The request arguments for a GET call can be specified as URL arguments, as usually.
This tag allows to make an iteration through the items and render them as repeated HTML-element, which is defined in <msm:template> nested tag.
<msm:template> - this tag used to keep HTML-representation for template of item which will be returned as item in the list.
<msm:empty> - this tag used to keep HTML-representation for template of element. If the result will return an empty item or list of items, it will render template as HTML-element.
<msm:header> - this tag used to keep HTML-representation for header element.
<msm:footer> - this tag used to keep HTML-representation for footer element.
id - unique identification for the tag.
database - the name of database in the MongoDB.
collection - the name of collection in the MongoDB.
filter - a query as JSON-Object in the MongoDB. The value can be empty or
{}.
mode - a definition type of working mode for this tag.
item-name - the item definition name for the placeholders inside
msm:template tag.
header - this contains input JSON object for the header rendering.
footer - this contains input JSON object for the footer rendering.
stats - this attribute allows to enable/disable statistics with total items, limit, offset. This attribute accept
true/false as values.
<ul id="wrapperTag">
<msm:foreach id="foreachElementTag"
database="companyDb"
collection="users"
filter="{ 'address.city' : 'San Jose' }"
header="{ 'header-item-name' : 'headItem', 'title' : 'Foo' }"
footer="{ 'footer-item-name' : 'bottomItem', 'page' : 'Bar' }"
mode="DATABASE" item-name="user">
<msm:empty><p>No results</p></msm:empty>
<msm:header><h1>${headItem|title}</h1></msm:header>
<msm:template><li>${user|name} - ${user|login} : ${user|address.street}</li></msm:template>
<msm:footer><p>${bottomItem|page}</p></msm:footer>
</msm:foreach>
</ul>
id - unique identification for the tag.
bean - the name of bean in the application context.
items - method or property definition from the bean.
mode - a definition type of working mode for this tag.
scope - a scope of the bean. It supports
PROTOTYPE and
SESSION.
item-name - the item definition name for the placeholders inside
msm:template tag.
header - this contains input JSON object for the header rendering.
footer - this contains input JSON object for the footer rendering.
stats - this attribute allows to enable/disable statistics with total items, limit, offset. This attribute accept
true/false as values.
<ul id="wrapperTag">
<msm:foreach id="foreachElementTag"
bean="employeeManagerService"
items="employees"
scope="PROTOTYPE"
header="{ 'header-item-name' : 'headItem', 'title' : 'Foo' }"
footer="{ 'footer-item-name' : 'bottomItem', 'page' : 'Bar' }"
mode="BEAN" item-name="emp">
<msm:empty><p>No results</p></msm:empty>
<msm:header><h1>${headItem|title}</h1></msm:header>
<msm:template><li>${emp|name} - ${emp|login} : ${emp|address.street}</li></msm:template>
<msm:footer><p>${bottomItem|page}</p></msm:footer>
</msm:foreach>
</ul>
<ul id="wrapperTag">
<msm:foreach id="foreachElementTag"
bean="employeeManagerService"
items="getEmployeesFromBranch(Foo;Bar)"
scope="PROTOTYPE"
header="{ 'header-item-name' : 'headItem', 'title' : 'Foo' }"
footer="{ 'footer-item-name' : 'bottomItem', 'page' : 'Bar' }"
mode="BEAN" item-name="emp">
<msm:empty><p>No results</p></msm:empty>
<msm:header><h1>${headItem|title}</h1></msm:header>
<msm:template><li>${emp|name} - ${emp|login} : ${emp|address.street}</li></msm:template>
<msm:footer><p>${bottomItem|page}</p></msm:footer>
</msm:foreach>
</ul>
id - unique identification for the tag.
repository - the name of repository in the application context.
query - a query as JSON-Object in the MongoDB. The value can be empty or
{}.
sort - a JSON-Object, which describes a sorting instructions and it has structure
{ 'name' : 'fieldName', 'direction' : 'ASC' }, or direction can be
DESC.
offset - an offset value.
limit - a limit value.
item-name - the item definition name for the placeholders inside
msm:template tag.
header - this contains input JSON object for the header rendering.
footer - this contains input JSON object for the footer rendering.
stats - this attribute allows to enable/disable statistics with total items, limit, offset. This attribute accept
true/false as values.
<ul id="wrapperTag">
<msm:foreach id="foreachElementTag"
repository="translationsRepository"
query="{ lang : 'en' }"
sort="{ 'name' : 'createdDate', 'direction' : 'DESC' }"
offset="0"
limit="10"
header="{ 'header-item-name' : 'headItem', 'title' : 'Foo' }"
footer="{ 'footer-item-name' : 'bottomItem', 'page' : 'Bar' }"
mode="REPOSITORY" item-name="tr">
<msm:empty><p>No results</p></msm:empty>
<msm:header><h1>${headItem|title}</h1></msm:header>
<msm:template><li>${tr|text} - ${tr|lang} : ${tr|createdDate}</li></msm:template>
<msm:footer><p>${bottomItem|page}</p></msm:footer>
</msm:foreach>
</ul>
This tag allows to render object based on defined HTML-element inside <msm:template> nested tag.
<msm:template> - this tag used to keep HTML-representation for template of element.
id - unique identification for the tag.
bean - the name of bean in the application context.
scope - a scope of the bean. It supports
PROTOTYPE and
SESSION.
function - method definition from the bean.
item-name - the item definition name for the placeholders inside
msm:template tag.
value - this can be contain a JSON object to render the properties from it as inner object.
<div id="wrapperTagFirst">
<msm:block id="blockElementTagFirst"
bean="employeeManagerService"
function="getCEO(Foo;Bar)"
scope="PROTOTYPE"
mode="BEAN" item-name="emp">
<msm:template><p>${emp|name} - ${emp|login} : ${emp|address.street}</p></msm:template>
</msm:block>
</div>
<div id="wrapperTagSecond">
<msm:block id="blockElementTagSecond"
bean="factoryHolder"
scope="SESSION"
mode="BEAN" item-name="f">
<msm:template><p>${f|name} - ${f|type} : ${f|address.city}</p></msm:template>
</msm:block>
</div>
<div id="wrapperTagThird">
<msm:block id="blockElementTagThird"
value="{ 'name' : 'Foo Bar Factory' , 'type' : 'Automotive' , 'address' : { 'city' : 'New York' } }"
scope="SESSION"
item-name="f">
<msm:template><p>${f|name} - ${f|type} : ${f|address.city}</p></msm:template>
</msm:block>
</div>
This tag allows to render object based on condition which will be checked in test attribute.
id - unique identification for the tag.
bean - the name of bean in the application context.
scope - a scope of the bean. It supports
PROTOTYPE and
SESSION.
test - method or property definition from the bean, which could return true or false values.
<div id="wrapperTagFirst">
<msm:if id="viewAccess"
bean="userManager"
test="isPermissionToView(Foo;Bar)"
scope="PROTOTYPE" >
<div>Restricted Access Granted</div>
</msm:if>
</div>
<div id="wrapperTagSecond">
<msm:if id="editorAccess"
bean="userManager"
test="isEditor"
scope="SESSION" >
<div>Restricted Access Granted</div>
</msm:if>
</div>
This tag allows to make an iteration through the items as map and render them as tree HTML structure. Each nested item, which has sub-items must contain a children property to render as nested sub-tree element. The item for the iteration element is defined in <msm:template> nested tag.
<msm:template> - this tag used to keep HTML-representation for template of item which will be returned as item in the map.
id - unique identification for the tag.
database - the name of database in the MongoDB.
collection - the name of collection in the MongoDB.
filter - a query as JSON-Object in the MongoDB. The value can be empty or
{}.
mode - a definition type of working mode for this tag.
item-name - the item definition name for the placeholders inside
msm:template tag.
children - object property key for nested child elements.
<div id="wrapperTag" class="root">
<msm:tree id="treeElementTag"
database="file-storage"
collection="media"
filter="{ 'extension' : 'mp4' }"
mode="DATABASE" item-name="file">
<msm:template><ul class="list-item"><li>${file|name}.${file|extension}</li></ul></msm:template>
</msm:foreach>
</div>
id - unique identification for the tag.
bean - the name of bean in the application context.
items - method or property definition from the bean.
mode - a definition type of working mode for this tag.
scope - a scope of the bean. It supports
PROTOTYPE and
SESSION.
item-name - the item definition name for the placeholders inside
msm:template tag.
children - object property key for nested child elements.
<div id="wrapperTag" class="root">
<msm:tree id="treeElementTag"
bean="mediaStorageService"
items="getMovies(2020)"
scope="PROTOTYPE"
mode="BEAN" item-name="i">
<msm:template><ul class="list-item"><li>${i|listItemName}</li></ul></msm:template>
</msm:tree>
</div>
id - unique identification for the tag.
repository - the name of repository in the application context.
query - a query as JSON-Object in the MongoDB. The value can be empty or
{}.
sort - a JSON-Object, which describes a sorting instructions and it has structure
{ 'name' : 'fieldName', 'direction' : 'ASC' }, or direction can be
DESC.
item-name - the item definition name for the placeholders inside
msm:template tag.
children - object property key for nested child elements.
<div id="wrapperTag" class="root">
<msm:tree id="treeElementTag"
repository="filesRepository"
query="{ extension : 'pdf' }"
sort="{ 'name' : 'createdDate', 'direction' : 'DESC' }"
mode="REPOSITORY" item-name="doc">
<msm:template><ul class="list-item"><li>${doc|name}</li></ul></msm:template>
</msm:tree>
</div>
This tag does rendering for <select/> based on HTML-template definition in <msm:template> nested tag as child element.
<msm:template> - this tag used to keep HTML-representation for template of item which will be returned as item in the list.
id - unique identification for the tag.
database - the name of database in the MongoDB.
collection - the name of collection in the MongoDB.
filter - a query as JSON-Object in the MongoDB. The value can be empty or
{}.
mode - a definition type of working mode for this tag.
selectedValue - a definition of selected item in the list of options. It will compare this with property which has been used as value for the option.
item-name - the item definition name for the placeholders inside
msm:template tag.
* - all available attributes for the
<select/> HTML-tag.
<div id="wrapperTag" class="root">
<msm:select id="selectElementTag"
database="file-types"
collection="media"
filter="{}"
mode="DATABASE" item-name="option" class="select-file-types">
<msm:template><option class="item" value="${option|id}" ${option|selected}>${option|name}</option></msm:template>
</msm:select>
</div>
id - unique identification for the tag.
bean - the name of bean in the application context.
items - method or property definition from the bean.
mode - a definition type of working mode for this tag.
scope - a scope of the bean. It supports
PROTOTYPE and
SESSION.
selectedValue - a definition of selected item in the list of options. It will compare this with property which has been used as value for the option.
item-name - the item definition name for the placeholders inside
msm:template tag.
* - all available attributes for the
<select/> HTML-tag.
<div id="wrapperTag" class="root">
<msm:select id="selectElementTag"
bean="ecomSearchEngineServiceImpl"
items="getCountries"
scope="PROTOTYPE"
name="countryOfOrigin.code"
mode="BEAN" class="countries" item-name="cor">
<msm:template><option class="option-item" value="${cor|code}" ${cor|selected}>${cor|name}</option>/msm:template>
</msm:select>
</div>
id - unique identification for the tag.
repository - the name of repository in the application context.
query - a query as JSON-Object in the MongoDB. The value can be empty or
{}.
sort - a JSON-Object, which describes a sorting instructions and it has structure
{ 'name' : 'fieldName', 'direction' : 'ASC' }, or direction can be
DESC.
selectedValue - a definition of selected item in the list of options. It will compare this with property which has been used as value for the option.
item-name - the item definition name for the placeholders inside
msm:template tag.
* - all available attributes for the
<select/> HTML-tag.
<div id="wrapperTag" class="root">
<msm:select id="selectElementTag"
repository="filesRepository"
query="{ extension : 'pdf' }"
sort="{ 'name' : 'createdDate', 'direction' : 'DESC' }"
mode="REPOSITORY" item-name="doc">
<msm:template><option>${doc|name}</option></msm:template>
</msm:select>
</div>
id - unique identification for the tag.
items - this can be contain a JSON array to render the properties from it as inner array.
selectedValue - a definition of selected item in the list of options. It will compare this with property which has been used as value for the option.
item-name - the item definition name for the placeholders inside
msm:template tag.
* - all available attributes for the
<select/> HTML-tag.
<div id="wrapperTag" class="root">
<msm:select id="selectElementTag"
value="[{ 'name' : 'Foo', 'description' : 'Bar' }]"
selectedValue="Foo"
mode="DIRECT" item-name="doc">
<msm:template><option value="${doc|name}" ${doc|selected}>${doc|name} - ${doc|description}</option></msm:template>
</msm:select>
</div>
This tag allows to render properties from object as text which is defined as placeholders.
id - unique identification for the tag.
bean - the name of bean in the application context.
scope - a scope of the bean. It supports
PROTOTYPE and
SESSION.
function - method definition from the bean.
item-name - the item definition name for the placeholders inside
msm:template tag.
value - this can be contain a JSON object to render the properties from it as inner object.
<div id="wrapperTagFirst">
<msm:text id="blockElementTagFirst"
bean="employeeManagerService"
function="getCEO(Foo;Bar)"
scope="PROTOTYPE"
mode="BEAN" item-name="emp">
${emp|name} - ${emp|login} : ${emp|address.street}
</msm:text>
</div>
<div id="wrapperTagSecond">
<msm:text id="blockElementTagSecond"
bean="factoryHolder"
scope="SESSION"
mode="BEAN" item-name="f">
${f|name} - ${f|type} : ${f|address.city}
</msm:text>
</div>
<div id="wrapperTagThird">
<msm:text id="blockElementTagThird"
value="{ 'name' : 'Foo Bar Factory' , 'type' : 'Automotive' , 'address' : { 'city' : 'New York' } }"
item-name="f">
${f|name} - ${f|type} : ${f|address.city}
</msm:text>
</div>
This tag allows to get encoded urls for img and a HTML tags. It also can be used as a wrapper tag.
id - unique identification for the tag.
src - the url which will be encoded.
mode - the parsing mode
IMG/LINK/WRAP.
prefix - the prefix in url which won't be encoded.
item-name - the item definition name for the placeholders inside
msm:template tag.
<div id="wrapperImageFirst">
<msm:resource id="imageFirst"
mode="IMG"
loading="lazy" prefix="/api/v1/downloadData?" src="pathName=/10% of darkness.png" alt="avatar"/>
</div>
<div id="wrapperLinkFirst">
<msm:resource id="linkFirst" mode="LINK" prefix="/api/v1/downloadData?" src="pathName=path/to/10% of darkness.pdf"><p class="document-name">10% of darkness.pdf</p><msm:resource/>
</div>
<div id="wrapperLinkFirst">
<msm:resource id="linkFirst" mode="WRAP" prefix="/api/v1/downloadData?" src="pathName=path/to/10% of darkness.png" item-name="bg"><div class="bg-center bg-cover" style="padding-bottom:100%;background-image: url('${bg|src}')"> </div><msm:resource/>
</div>