GUI Composer 5.5 and up has a feature “GUI Vars”. You can see it at the left side of the GUI Composer window below “pallet” and “outline”. It lets you listen to target variable changes and perform any action you want – in your case – update a widget. Using it will save you the trouble from adding 20 hidden widgets.
You can see in the JSON file instead of binding target variables to widgets I am binding them to GUIVars. Any change in the target variable will be stored in the corresponding GUIVar and the property change function "onAnyCharChanged" will be called.
Here is my target code, HTML, JSON and js files. It works in CCS 5.5:
main.c
--------------------------------------------------------
#include <stdio.h>
char char00 = 'a';
char char01 = 'b';
char char02 = 'c';
char char03 = 'd';
void incChar( char* ch) {
(*ch) ++;
if( (*ch) > 'z') {
(*ch) = 'a';
}
}
void main(void) {
while( 1) {
incChar(&char00);
incChar(&char01);
incChar(&char02);
incChar(&char03);
}
}
----------------------------------
App.json
------------------------------------
{"widgetBindings": [
{
"propertyName": "char00",
"serverBindName": "char00",
"widgetId": "prop",
"options": {
"onPropertyChanged": "onAnyCharChanged",
"dataType": "String"
}
},
{
"propertyName": "char01",
"serverBindName": "char01",
"widgetId": "prop",
"options": {
"onPropertyChanged": "onAnyCharChanged",
"dataType": "String"
}
},
{
"propertyName": "char02",
"serverBindName": "char02",
"widgetId": "prop",
"options": {
"onPropertyChanged": "onAnyCharChanged",
"dataType": "String"
}
},
{
"propertyName": "char03",
"serverBindName": "char03",
"widgetId": "prop",
"options": {
"onPropertyChanged": "onAnyCharChanged",
"dataType": "String"
}
}
]}
--------------------------------
App.html
---------------------------------
<!DOCTYPE html>
<html>
<head data-gc-version="1.2.201308270800">
<meta charset="utf-8"/>
<title>Untitled</title>
<script type="text/javascript" src="lib/davinci.dojo_1_8/WebContent/dojo/dojo/dojo.js" data-dojo-config="'parseOnLoad':true,'async':true,'packages':[{'name':'gc','location':'../../../../davinci.gc_1_2/WebContent/gc'},{'name':'maqetta','location':'../../../../davinci.gc_1_2/WebContent/maqetta'}]"></script>
<script type="text/javascript">
require([
"dijit/dijit",
"dojo/parser",
"maqetta/space",
"maqetta/AppStates",
"gc/dijit/TextBox"
]);
</script>
<style>@import "lib/davinci.dojo_1_8/WebContent/maqetta/themes/claro/document.css";@import "lib/davinci.dojo_1_8/WebContent/maqetta/themes/claro/claro.css";@import "lib/davinci.dojo_1_8/WebContent/dojo/dojo/resources/dojo.css";@import "lib/davinci.gc_1_2/WebContent/gc/dijit/libs/css/widgets.css";
</style>
<script type="text/javascript" src="lib/davinci.gc_1_2/WebContent/gc/backplane/guiComposer.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="claro" data-maq-flow-layout="false" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}">
<input id="widget_text" type="text" data-dojo-type="gc.dijit.TextBox" intermediateChanges="false" trim="false" uppercase="false" lowercase="false" propercase="false" selectOnClick="false" visible="true" style="position: absolute; z-index: 900; left: 108px; top: 52px;"></input>
</body>
</html>
------------------------------
App.js
------------------------------
/*
* This file is provided for custom JavaScript logic that your HTML files might need.
* GUI Composer includes this JavaScript file by default within HTML pages authored in GUI Composer.
*/
require(["dojo/ready"], function(ready){
ready(function(){
// logic that requires that Dojo is fully initialized should go here
});
});
function toChar( i) {
return String.fromCharCode( i);
}
function onAnyCharChanged( propertyName, newValue, oldValue) {
var t = $TI.GUIVars;
var v0 = t.getValue('char00');
var v1 = t.getValue('char01');
var v2 = t.getValue('char02');
var v3 = t.getValue('char03');
dijit.byId('widget_text').set('value', toChar(v0) + toChar(v1) + toChar(v2) + toChar(v3));
}