9.Download examples
All: sample.zip
// Common Module: common.module.js
exports.id = "common.module.js";
/**
* An example of publishing module function
*/
exports.getFullName = function(firstName, lastName){
return firstName + " " + lastName;
};
/**
* An example of publishing global function
* @param language {String} Language key.
*/
globals.setCurrentLanguage = function(languageKey){
cpr.I18N.INSTANCE.currentLanguage = languageKey;
};
{
"ko" : {
"TITLE" : "eXBuilder6에 어서오세요",
"TOOLTIP" : "eXBuilder6 예제"
},
"en" : {
"TITLE" : "Welcome to eXBuilder6",
"TOOLTIP" : "eXBuilder6 Example"
}
}
{
"ds_sample": [
{ "company": "Google", "firstName": "Page", "lastName": "Larry", "age": "44", "color": "blue" },
{ "company": "Facebook", "firstName": "Zuckerberg", "lastName": "Mark", "age": "34", "color": "#666600" }
]
}
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:cl="http://tomatosystem.co.kr/cleopatra" xmlns:std="http://tomatosystem.co.kr/cleopatra/studio" std:sid="html-b6aba90f" version="1.0.0.0">
<head std:sid="head-4b6ebdc0">
<title>index</title>
<screen std:sid="screen-595d22e4" id="default" active="false" height="768px" minwidth="1024px" name="default" width="1024px"/>
<screen std:sid="screen-2bad23f3" id="tablet" active="false" height="667px" maxwidth="1024px" minwidth="500px" name="tablet" width="500px"/>
<screen std:sid="screen-5228228e" id="mobile" active="true" height="525px" maxwidth="500px" name="mobile" width="350px"/>
<cl:model std:sid="model-436d5a81">
<cl:dataset std:sid="d-set-12e0a915" id="ds_sample">
<cl:datacolumnlist>
<cl:datacolumn name="firstName"/>
<cl:datacolumn name="lastName"/>
<cl:datacolumn name="age"/>
<cl:datacolumn name="company"/>
<cl:datacolumn name="color"/>
</cl:datacolumnlist>
<cl:datarowlist>
<cl:datarow>
<cl:datavalue columnname="company"><![CDATA[Apple]]></cl:datavalue>
<cl:datavalue columnname="firstName"><![CDATA[Jobs]]></cl:datavalue>
<cl:datavalue columnname="lastName"><![CDATA[Steave]]></cl:datavalue>
<cl:datavalue columnname="age"><![CDATA[62]]></cl:datavalue>
<cl:datavalue columnname="color"><![CDATA[red]]></cl:datavalue>
</cl:datarow>
<cl:datarow>
<cl:datavalue columnname="company"><![CDATA[Microsoft]]></cl:datavalue>
<cl:datavalue columnname="firstName"><![CDATA[Gates]]></cl:datavalue>
<cl:datavalue columnname="lastName"><![CDATA[Bill]]></cl:datavalue>
<cl:datavalue columnname="age"><![CDATA[62]]></cl:datavalue>
<cl:datavalue columnname="color"><![CDATA[green]]></cl:datavalue>
</cl:datarow>
</cl:datarowlist>
</cl:dataset>
<cl:submission std:sid="submission-aab539be" id="sm_sample" action="./sample.json" mediatype="application/json">
<cl:listener std:sid="listener-90fbb021" handler="onSm_sampleSubmitSuccess" name="submit-success"/>
<cl:responsedata dataid="ds_sample" isadd="true"/>
</cl:submission>
</cl:model>
<cl:appspec/>
</head>
<body std:sid="body-1c922f93" style="top:0px; left:0px; width:800px; height:600px;">
<cl:listener std:sid="listener-097256c8" handler="onBodyLoad" name="load"/>
<cl:responsivexylayout/>
<cl:img std:sid="image-e2e4a87c" src="tomato.png">
<cl:responsivexylayoutdata>
<cl:xylayoutdata height="20px" horizontalAnchor="LEFT" left="20px" top="20px" verticalAnchor="TOP" width="20px" screenid="default"/>
<cl:xylayoutdata std:sid="sxyl-data-4ded7022" height="20px" horizontalAnchor="LEFT" left="20px" top="20px" verticalAnchor="TOP" width="20px" screenid="tablet"/>
<cl:xylayoutdata std:sid="sxyl-data-4ded7022" height="20px" horizontalAnchor="LEFT" left="20px" top="20px" verticalAnchor="TOP" width="20px" screenid="mobile"/>
</cl:responsivexylayoutdata>
</cl:img>
<cl:output std:sid="output-21d78a0e" value="Output">
<cl:langbind property="value" keypath="TITLE"/>
<cl:langbind property="tooltip" keypath="TOOLTIP"/>
<cl:responsivexylayoutdata>
<cl:xylayoutdata height="20px" horizontalAnchor="LEFT" left="50px" top="20px" verticalAnchor="TOP" width="160px" screenid="default"/>
<cl:xylayoutdata std:sid="sxyl-data-22d3b67e" height="20px" horizontalAnchor="LEFT" left="50px" top="20px" verticalAnchor="TOP" width="160px" screenid="tablet"/>
<cl:xylayoutdata std:sid="sxyl-data-22d3b67e" height="20px" horizontalAnchor="LEFT" left="50px" top="20px" verticalAnchor="TOP" width="160px" screenid="mobile"/>
</cl:responsivexylayoutdata>
</cl:output>
<cl:grid std:sid="grid-9e21af11" id="grid" style="background-color:#e1f0ff;" datasetid="ds_sample">
<cl:listener std:sid="listener-6bf90613" handler="onGridSelectionChange" name="selection-change"/>
<cl:responsivexylayoutdata>
<cl:xylayoutdata height="143px" horizontalAnchor="LEFT" left="20px" top="50px" verticalAnchor="TOP" width="500px" screenid="default"/>
<cl:xylayoutdata std:sid="sxyl-data-6c8ebf8c" height="143px" horizontalAnchor="BOTH" left="20px" right="20px" top="80px" verticalAnchor="TOP" screenid="tablet"/>
<cl:xylayoutdata std:sid="sxyl-data-6c8ebf8c" bottom="173px" horizontalAnchor="BOTH" left="20px" right="20px" top="107px" verticalAnchor="BOTH" screenid="mobile"/>
</cl:responsivexylayoutdata>
<cl:gridcolumn std:sid="g-column-ecf600af"/>
<cl:gridcolumn std:sid="g-column-9a04c33d"/>
<cl:gridheader std:sid="gh-band-c8d66cad">
<cl:gridrow std:sid="g-row-b8f475cd"/>
<cl:gridcell std:sid="gh-cell-dc3ebd75" colindex="0" rowindex="0" text="company"/>
<cl:gridcell std:sid="gh-cell-3c017b5f" colindex="1" rowindex="0" text="Name"/>
</cl:gridheader>
<cl:griddetail std:sid="gd-band-53e1201b">
<cl:gridrow std:sid="g-row-7e5775a3"/>
<cl:gridcell std:sid="gd-cell-f6886e73" colindex="0" rowindex="0" columnname="company"/>
<cl:gridcell std:sid="gd-cell-becaa8a4" colindex="1" rowindex="0">
<cl:output std:sid="output-5a70f8d8" value="Output">
<cl:expbind category="PROPERTY" property="value" expression="fullName(firstName, lastName)"/>
</cl:output>
</cl:gridcell>
</cl:griddetail>
</cl:grid>
<cl:group std:sid="group-ea79cfec" id="group" style="border-right-style:solid; border-top-width:1px; border-bottom-color:lightgray; border-left-style:solid; border-right-width:1px; border-bottom-width:1px; border-left-color:lightgray; border-top-color:lightgray; border-bottom-style:solid; border-right-color:lightgray; border-left-width:1px; border-top-style:solid;">
<cl:responsivexylayoutdata>
<cl:xylayoutdata height="143px" horizontalAnchor="BOTH" left="530px" right="20px" top="50px" verticalAnchor="TOP" screenid="default"/>
<cl:xylayoutdata std:sid="sxyl-data-913997d3" height="143px" horizontalAnchor="BOTH" left="20px" right="20px" top="233px" verticalAnchor="TOP" screenid="tablet"/>
<cl:xylayoutdata std:sid="sxyl-data-913997d3" bottom="20px" height="143px" horizontalAnchor="BOTH" left="20px" right="20px" verticalAnchor="BOTTOM" screenid="mobile"/>
</cl:responsivexylayoutdata>
<cl:output std:sid="output-bdbcf795" value="Company">
<cl:formdata std:sid="f-data-3e603619" col="0" row="0"/>
</cl:output>
<cl:output std:sid="output-3fa66173" value="First Name">
<cl:formdata std:sid="f-data-75c32b18" col="0" row="1"/>
</cl:output>
<cl:output std:sid="output-7e774c7f" value="Last Name">
<cl:formdata std:sid="f-data-8eeddc3f" col="0" row="2"/>
</cl:output>
<cl:output std:sid="output-d7783812" value="Age">
<cl:formdata std:sid="f-data-0fd01f91" col="0" row="3"/>
</cl:output>
<cl:output std:sid="output-b8b762ac" style="color:white;" value="">
<cl:relativebind category="PROPERTY" property="value" columnname="company"/>
<cl:formdata std:sid="f-data-be6c7c27" col="1" row="0"/>
</cl:output>
<cl:output std:sid="output-b3234a67" style="color:white;" value="">
<cl:relativebind category="PROPERTY" property="value" columnname="firstName"/>
<cl:formdata std:sid="f-data-0d5a8a28" col="1" row="1"/>
</cl:output>
<cl:output std:sid="output-56ea2988" style="color:white;" value="">
<cl:relativebind category="PROPERTY" property="value" columnname="lastName"/>
<cl:formdata std:sid="f-data-bfcbebfd" col="1" row="2"/>
</cl:output>
<cl:output std:sid="output-325d8000" style="color:white;" value="">
<cl:relativebind category="PROPERTY" property="value" columnname="age"/>
<cl:formdata std:sid="f-data-c6fe8387" col="1" row="3"/>
</cl:output>
<cl:formlayout std:sid="f-layout-a92689c8" hmargin="5" hseparatortype="BY_CLASS" hseparatorwidth="1" hspace="10" vmargin="5" vseparatortype="BY_CLASS" vseparatorwidth="1" vspace="10">
<cl:rows length="25" unit="PIXEL"/>
<cl:rows length="25" unit="PIXEL"/>
<cl:rows length="25" unit="PIXEL"/>
<cl:rows length="25" shadecolor="transparent" shadetype="NONE" unit="PIXEL"/>
<cl:columns length="100" shadetype="BY_CLASS" unit="PIXEL"/>
<cl:columns length="1" unit="FRACTION"/>
</cl:formlayout>
</cl:group>
<cl:combobox std:sid="c-box-2d564843" id="cmb1" value="en">
<cl:listener std:sid="listener-f5e4ecf5" handler="onCmb1SelectionChange" name="selection-change"/>
<cl:responsivexylayoutdata>
<cl:xylayoutdata height="20px" horizontalAnchor="RIGHT" right="20px" top="20px" verticalAnchor="TOP" width="100px" screenid="default"/>
<cl:xylayoutdata std:sid="sxyl-data-38cf130a" height="20px" horizontalAnchor="RIGHT" right="20px" top="20px" verticalAnchor="TOP" width="100px" screenid="tablet"/>
<cl:xylayoutdata std:sid="sxyl-data-38cf130a" height="20px" horizontalAnchor="BOTH" left="20px" right="20px" top="50px" verticalAnchor="TOP" screenid="mobile"/>
</cl:responsivexylayoutdata>
<cl:item label="한국어" value="ko"/>
<cl:item label="English" value="en"/>
</cl:combobox>
<cl:udc std:sid="ud-control-49636ce1" type="udc.search">
<cl:listener std:sid="listener-7b3551c1" handler="onSearchSearch" name="search"/>
<cl:responsivexylayoutdata>
<cl:xylayoutdata height="20px" horizontalAnchor="LEFT" left="220px" top="20px" verticalAnchor="TOP" width="300px" screenid="default"/>
<cl:xylayoutdata std:sid="sxyl-data-2bb3b258" height="20px" horizontalAnchor="BOTH" left="20px" right="20px" top="50px" verticalAnchor="TOP" screenid="tablet"/>
<cl:xylayoutdata std:sid="sxyl-data-2bb3b258" height="20px" horizontalAnchor="BOTH" left="20px" right="20px" top="77px" verticalAnchor="TOP" screenid="mobile"/>
</cl:responsivexylayoutdata>
</cl:udc>
</body>
<std:studiosetting>
<std:hruler/>
<std:vruler/>
</std:studiosetting>
</html>
// Get module.
var commonModule = cpr.core.Module.require("common");
// Set default language of page to ‘en’.
// cpr.I18N.INSTANCE.currentLanguage = "en";
// The function published as global can be used without going through module.
setCurrentLanguage("en");
// Return full name.
// function getFullName(firstName, lastName) {
// return firstName + " " + lastName;
// }
// Register user-defined function which can be used in Expression.
// cpr.expression.ExpressionEngine.INSTANCE.registerFunction("fullName", getFullName);
/// Module function can be used by using module.
cpr.expression.ExpressionEngine.INSTANCE.registerFunction("fullName", commonModule.getFullName);
/*
* Call when value-change Event occurs in input box.
* Event that occurs when updated value is saved.
*/
function onIpb1ValueChange(/* cpr.events.CValueChangeEvent */ e){
app.lookup("grid").redraw();
}
/*
* Call when click Event occurs in “Add” button.
* Event that occurs when a user clicks Control.
*/
function onButtonClick(/* cpr.events.CMouseEvent */ e){
var grid = app.lookup("grid");
var rowIndex = grid.getSelectedRow()!= null?grid.getSelectedRow().getIndex():grid.rowCount-1;
grid.insertRow(rowIndex, true);
}
/*
* Call when selection-change Event occurs in Combo box.
* Event that occurs when the combo box value is selected and saved in ComboBox Item.
*/
function onCmb1SelectionChange(/* cpr.events.CSelectionEvent */ e){
/**
* @type cpr.controls.ComboBox
*/
var cmb1 = e.control;
// cpr.I18N.INSTANCE.currentLanguage = cmb1.value;
setCurrentLanguage(cmb1.value);
}
/*
* Call when load Event occurs in body.
* Event that occurs right after App is created and rendered.
*/
function onBodyLoad(/* cpr.events.CEvent */ e){
app.lookup("sm_sample").send();
}
/*
* Call when submit-success Event occurs in Submission.
* Occurs when communication is made successfully.
*/
function onSm_sampleSubmitSuccess(/* cpr.events.CSubmissionEvent */ e){
/**
* @type cpr.protocols.Submission
*/
var sm_sample = e.control;
app.lookup("grid").redraw();
}
/*
* Call when search Event occurs in User Defined Controls.
*/
function onSearchSearch(/* cpr.events.CUIEvent */ e){
/**
* @type udc.search
*/
var search = e.control; // Get udc.search Control.
var master = app.lookup("grid"); // Get Grid Control.
/*
* Get search keyword. The search keyword is input value of udc.search Control.
*/
var word = search.searchWord;
master.filter('fullName(firstName, lastName) *= "' + word + '" || company *= "' + word + '"');
}
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:cl="http://tomatosystem.co.kr/cleopatra" xmlns:std="http://tomatosystem.co.kr/cleopatra/studio" std:sid="html-16bbacf2" version="1.0.0.0">
<head std:sid="head-3f4d7407">
<title>search</title>
<screen std:sid="screen-54bebfdb" id="default" customHeight="600" height="768px" minwidth="1024px" name="default" width="1024px"/>
<screen std:sid="screen-a29079a6" id="tablet" height="667px" maxwidth="1024px" minwidth="500px" name="tablet" width="500px"/>
<screen std:sid="screen-d5705880" id="mobile" height="525px" maxwidth="500px" name="mobile" width="350px"/>
<cl:model std:sid="model-3df1bc8e"/>
<cl:appspec>
<cl:property name="searchWord" type="string"/>
<cl:event name="search" type="cpr.events.CUIEvent"/>
</cl:appspec>
</head>
<body std:sid="body-3da0bb5f" style="top:0px; left:0px; width:300px; height:20px;">
<cl:xylayout std:sid="xylayout-200c7228"/>
<cl:inputbox std:sid="i-box-946540af" id="ipb1">
<cl:apppropbind category="PROPERTY" property="value" app-property="searchWord"/>
<cl:xylayoutdata std:sid="xyl-data-e750b1ff" bottom="0px" horizontalAnchor="BOTH" left="0px" right="90px" top="0px" verticalAnchor="BOTH"/>
</cl:inputbox>
<cl:button std:sid="button-79e3b345" value="Search">
<cl:listener std:sid="listener-67bbf028" handler="onButtonClick" name="click"/>
<cl:xylayoutdata std:sid="xyl-data-2774984e" bottom="0px" horizontalAnchor="RIGHT" right="0px" top="0px" verticalAnchor="BOTH" width="80px"/>
</cl:button>
</body>
<std:studiosetting>
<std:hruler/>
<std:vruler/>
</std:studiosetting>
</html>
/*
* Call when click Event occurs in “Search” button.
* Event that occurs when a user clicks Control.
*/
function onButtonClick(/* cpr.events.CMouseEvent */ e){
var event = new cpr.events.CUIEvent("search");
app.dispatchEvent(event);
}