To execute the example, create an HTML page and perform the following operations:
1. Add links to the styles files: PP.css, PP.Metabase.css, PP.Ufe.css.
Also, add links to the scenarios files: PP.js, PP.Metabase.js, PP.Ufe.js.
2. In the <body> tag add two <div> elements with the TE (formula editor container) and get_terms_btn (button container) identifiers, the <textArea> element (text box that shows result of executing the get_terms function):
<!-- Formula editor --> <div id="TE">
<br/> <!-- Text area --> <textarea id="res" cols="30" rows="9"></textarea> <br/> <!-- Button --> <div id="get_terms_btn"></div>
3. Then add a script that creates the TermEdit component:
// Create the TermEdit component
var termEdit = new PP.Ufe.Ui.TermEdit({
ParentNode: "TE",
Width: 200,
Height: 100,
// Terms list
Terms: [{ // Term text
Content: "(",
// Term formula
Formula: "(",
}, {
Content: "Year",
Formula: "Year",
}, {
Content: "+",
Formula: "+",
}, {
Content: "Day",
Formula: "Day",
}, {
Content: ")",
Formula: ")",
}, {
Content: "*",
Formula: "*",
}, {
Content: "Dimension",
Formula: "Dimension",
}]
});
// Create a function that places terms in the text area
function get_terms() {
var terms = termEdit.getTerms(); //returns the terms list
var resArea = document.getElementById("res"); //text area
resArea.value = "";
for (var i = 0; i < terms.length; i++) {
// Text area value
resArea.value += terms[i] + "\n"; //
}
}
// Create a button clicking which performs the get_terms function
var get_terms_btn = new PP.Ui.Button({
Content: "Get terms",
ParentNode: document.getElementById("get_terms_btn"),
Click: get_terms
});
After executing the example the HTML page will contain the TermEdit component that looks as follows:
A text area located below is filled with the terms list after clicking the Get Terms button:
See also: