${title}

\n This example demonstrates that there is no default container (usually a tab card) when the module is displayed, and\n the\n entire module is automatically destroyed when the main window is closed.\n

\n The module has parameters: {container: false}.\n Please click the [Properties] button to view the module parameters on the IDE.\n

Items	Requirements
Operating System	Windows, Linux, MacOS
Web Application Servers	Any Standard Server(Tomcat, Jetty, Resin, WebLogic etc.)
Memory	800 MB
Disk Space	1 GB(Contains JRE and Tomcat)
Desktop & Mobile Browser	Modern Browsers(Chrome, Edge, Firefox, WebView etc.)

Software Name	License
Apache Softwares	Apache
GraalVM	UPL
JSON.org	Public
SLF4J	MIT
Quartz	Apache
Terser	BSD
Javascript Obfuscator	BSD 2-Clause
CSSO	MIT
Monaco Editor	MIT
X6	MIT
Quill	BSD 3-Clause

条目	需求
操作系统	Windows, Linux, MacOS
Web 应用服务器	任何符合工业标准的服务器(Tomcat，Jetty，Resin，WebLogic 等)
内存	800 MB
磁盘空间	1 GB(包含 JRE and Tomcat)
桌面和移动端浏览器	现代浏览器(Chrome, Edge, Firefox, WebView 等)

软件名称	授权协议
Apache Softwares	Apache
GraalVM	UPL
JSON.org	Public
SLF4J	MIT
Quartz	Apache
Terser	BSD
Javascript Obfuscator	BSD 2-Clause
CSSO	MIT
Monaco Editor	MIT
X6	MIT
Quill	BSD 3-Clause

'.toHTML(true, true); //To HTML\n'abc, def, ghi'.splitTrim(); //Split the string and trim each item.\n\n//Formatting\n'foo {0} bar {1} and {0}'.format('abc', 123);\n'foo {value1} bar {value2}'.format({ value1: 'abc', value2: 123 });\n'23508172639'.formatGroup('???? ???? ???'); //Group formatting, output: \"2350 8172 639\"\n'abc def'.formatGroup('??-?? ?? ??'); //Group formatting, output: \"ab-cd ef\"\n'abc def'.formatGroup('?? ??'); //Group formatting, output: \"ab cd\"\n\n//Get the substring\n'foo.bar.abc'.firstItem('.'); //Gets the substring before the first specified string, output: \"foo\"\n'foo.bar.abc'.lastItem('.'); //Gets the substring after the last specified string, output: \"abc\"\n'foo.bar.abc'.beforeItem('.'); //Gets the substring before the last specified string, output: \"foo.bar\"\n'foo.bar.abc'.afterItem('.'); //Gets the substring after the first specified string, output: \"bar.abc\"\n'abc (foo) def'.getPart('(', ')'); //Gets the string between two strings, output: \"foo\"\n\n//Getter properties\n'allen'.capital; //Convert the first char to an uppercase char, output: \"Allen\"\n'

'.htmlText; //to HTML text, output: \"<div>\"\n'

\\n'.htmlLine; //to single line HTML text\n'2021-03-12 14:19:39.614'.dateValue; //to date value with format \"y-MM-dd HH:mm:ss.SSS\"", "wrapBorder": "0", "readonly": "true" } } ] } # example/coding/server-js/call-python.xwl Title: call-python ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "true", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "// Please deploy Python related jars before using these feature: https://www.geejing.com/site/python/graal.zip\n// eg: copy these jars to \"apache-tomcat/graal\" folder\n// call demo.py to get the text content of wb/system/config.json\n// pyArray = Polyglot.eval('python', '[1,2,42,4]'); // Call Python code directly\nlet result = Polyglot.evalFile('python', 'wb/modules/example/coding/server-js/demo.py');\nWb.send(result);" }, "_icon": "module" } # example/coding/server-js/common-usage.xwl Title: common-usage ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "edit", "text": "codeEditor1", "cls": "Wb.CodeEditor", "_expanded": true, "properties": { "cid": "codeEditor1", "full": "true", "value": "//This example demonstrates the general usage of server JavaScript programming and other language programming\n//For more resources, please visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript\n\n//Acess Java classes\n//Access arbitrary Java classes starting with the \"Packages\" keyword. Not recommended.\nlet file = new Packages.java.io.File('/path');\n//Package name starts with \"com\", \"java\", \"org\", etc. can omit the \"Packages\" keyword. Not recommended.\nlet ArrayList = new java.util.ArrayList();\n//Using \"Java.type\" to get classes has higher performance and applicability. Recommended.\nlet HashMap = Java.type('java.util.HashMap');\n//Create a HashMap object, some classes like HashMap/FileUtil/IOUtils are predefined and ready to use.\nlet map = new HashMap();\n\n//Java objects to JS objects. Usually Java objects can be used directly in JS without conversion,\n//and the system will automatically convert to the corresponding type.\nstrArrType = Java.type(\"java.lang.String[]\"); //Defines the String[] type\njavaArr = new strArrType(3); //Create an array of length 3\njsArray = Java.from(javaArr); //Java array to JS array\n\n//Js objects to Java objects. Usually the system automatically converts JS objects when they are passed to Java,\n//and in some cases the conversion can be specified in the following ways:\njsArr1 = [\"a\", \"b\", \"c\"]; //Define the JS array\nstrArrType1 = Java.type(\"java.lang.String[]\"); //Define String[]\njavaArr1 = Java.to(jsArr1, strArrType1); //JS array to Java array\n\n//Java-related functions\njsJavaObj = Java.isJavaObject(123); //Determines whether it is a Java object\nisCls = Java.isType(HashMap); //Determines whether it is a Java Type\ntypeName = Java.typeName(HashMap); //Gets the class name, return: java.util.HashMap\n\n//Call overloaded Java methods\nSystem.out.println(123); //Automatically adapt parameter types\nSystem.out['println(boolean)'](true); //Explicitly specify function with Boolean parameter\nSystem.out['println(char[])']([1, 2]); //Explicitly specify function with char[] parameter\nSystem.out['println(java.lang.String)']('foo'); //Explicitly specify function with String parameter\n\n//Access to Java array/list\nObjectArray = Java.type('java.lang.Object[]');\nobjArray = new ObjectArray(3); //Create an array of length 3\nobjArray[0] = 1;\nobjArray[1] = 'abc';\nobjArray[2] = new JavaDate();\nobjArray.forEach(item => Wb.log(item)); //Iterate through the array\nobjArray.each(item => {\n Wb.log(item);\n if (item == 1)\n return false; //Break iteration\n});\nobjArray.sort(); //call native sort function\nobjArray.mixSort(); //call mixSort function, see WebBuilder docs.\n\n//Access to Java Map\nmap = new HashMap();\nmap.put('abc', 123);\nmap.put('foo', 'bar');\nabc = map.abc; //123\nmap.forEach((k, v) => Wb.log(k + '=' + v)); //Traverse the Map\nmap.each((k, v) => {\n Wb.log(k + '=' + v);\n if (k == 'abc')\n return false; //Break iteration\n});\n\n//Java String\njavaString = new (Java.type('java.lang.String'))(\"Java\");\njavaString.length === 4; //length is a property, and Java string are treatable as JS string\nbytes = javaString.getBytes('utf-8'); //Call the extended getBytes function to get the utf8 bytes of string\n\n//Java date, usually when calling the Java method, the system will automatically convert the JS date to Java date.\nDateUtil.format(new Date(), 'yyyy'); //The system automatically converts JS dates to Java dates\nnew JavaDate(new Date().getTime()); //Explicitly convert JS dates to Java dates, JavaDate is java.util.Date\n\n//Access JS objects from Java\nmap = { foo: 'bar', abc: 123 };\nJavaClass.javaMethod(map); //The map parameter implements the Map interface in Java, map.get(\"foo\") to get \"bar\"\n\n//JS Object/Array to Java org.json.JSONObject/org.json.JSONArray\njsonObject = Wb.toJava(jsObject); //Use api Wb.toJava to convert to JSONObject\njsonArray = Wb.toJava(jsArray); //Use api Wb.toJava to convert to JSONArray\njsonObject = new JSONObject(Wb.encode(jsObject)); //Convert jsObject to a string and then convert it to JSONObject\njsonArray = new JSONArray(Wb.encode(jsArray)); //Convert jsArray to a string and then convert it to JSONArray\njsonObject = new JSONObject({ foo: 'bar', abc: 123, date: new Date() });//Efficient way, js Object to JSONObject. Please note that \"new Date()\" will return \"{}\"(a JSONObject), because it is a Map in Java.\njsonArray = new JSONArray(Java.to(['abc', 123, new Date()]));//Efficient way, js Array to JSONArray. Please note that \"new Date()\" will return \"{}\"(a JSONObject), because it is a Map in Java.\n\n//Java org.json.JSONObject/org.json.JSONArray to JS Object/Array\njsObject = Wb.toJs(jsonObject); //Use api Wb.toJs to convert to Object\njsArray = Wb.toJs(jsonArray); //Use api Wb.toJs to convert to Array\narray = Wb.decode(jsonArray.toString());\nobject = Wb.decode(jsonObject.toString());\narray = Wb.getProxy(jsonArray); //Access JSONArray via proxy, when jsonArray is large, this method is efficient.\nobject = Wb.getProxy(jsonObject); //Access JSONObject via proxy, when jsonObject is large, this method is efficient.\n\n//app is a global visible object in execution-context, created at start and deleted at end\napp.myVar = 'abc'; //Add myVar to the app\nWb.run('my/file1.xwl'); //\"app.myVar\" is visible in file1.xwl\n\n//Regular traversal\narray.forEach(item => Wb.log(item));\n//Interruptible traversal\narray.each(item => {\n Wb.log(item);\n if (item == 'foo')\n return false; //Break iteration\n});\n//Suggest changing to [array.each(item => {item.method()})], avoid unexpected interruptions caused by return false\narray.each(item => item.method());\n//Traverse the object, return false to interrupt the traversal\nWb.each(object, (k, v) => {\n console.log(k, v);\n});\n//Iterate Java members\nm = Java.type('java.lang.Math')\nfor (i in m) { print(i); }\n\n//Java class extends\nJavaExt = Java.extend(Java.type(\"some.AbstractClass\"), Java.type(\"some.Interface1\"));\nimpl = new JavaExt({\n superclassMethod: function () { },\n interfaceMethod: function () { },\n toString() { return \"MyClass\"; }\n});\nimpl.superclassMethod();\nsw = new (Java.type(\"java.io.StringWriter\"));\nFilterWriterAdapter = Java.extend(Java.type(\"java.io.FilterWriter\"));\nfw = new FilterWriterAdapter(sw, {\n write: function (s, off, len) {\n }\n});\nfw_super = Java.super(fw); //call super\nfw.write(\"abc\");\n\n//Java classes variables\nnew HashMap();//HashMap is java.util.HashMap\nnew JavaDate(); //JavaDate is java.util.Date\nIOUtils.copy(source, dst); //IOUtils is org.apache.commons.io.IOUtils\n\n//Run ServerScript in Java\nresult = com.wb.graal.Executor.run(\"let a=123;return Wb.run('my/file.xwl');\"); // Run any script\nresult = com.wb.graal.Executor.execute(\"Wb.sql\", \"select * from wb_user\"); // Run Wb.sql function and get result\nresult = com.wb.graal.Executor.execute(\"Wb.loadCall\", \"wb/ss/myModule.mjs\", \"myExportFunc\", \"param1\", \"param2\"); // Call exposed function in a specified module\n\n//High frequency call JS function in Java code\nfn = new com.wb.graal.JSFunc(\"Wb.encode\");\n// fn = new com.wb.graal.JSFunc(\"Wb.encode\", request, response); // share request and response. This way, parameters can be shared\ntry {\n for (i = 0; i < 1000; i++)\n fn.execute(i);\n} finally {\n fn.close();\n}\n\n//Call other programming languages directly\n//When using other languages, please install the corresponding language first,\n//and the installation method is to run it in the bin directory of the JDK:\n//gu install python //Install python\n//gu install R //Install R\npyArray = Polyglot.eval('python', '[1,2,42,4]'); //Call Python code directly\nrArray = Polyglot.eval('R', 'runif(1000)'); //Call R code directly\nrFunc = Polyglot.evalFile('R', 'myExample.r'); //call R file\nrResult = rFunc(); //Call R function", "wrapBorder": "0", "readonly": "true" } } ] } # example/coding/server-js/database-access.xwl Title: database-access ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "edit", "text": "codeEditor1", "cls": "Wb.CodeEditor", "_expanded": true, "properties": { "cid": "codeEditor1", "full": "true", "value": "//Access database by JDBC\nlet conn, statement, resultSet;\n\ntry {\n conn = DataSource.getConnection('wb-sqlserver');\n statement = conn.prepareStatement('select user_name from wb_user where sid=?');\n statement.setString(1, 'admin');\n resultSet = statement.executeQuery();\n while (resultSet.next()) {\n Wb.log(resultSet.getString(1));\n }\n} finally {\n //Note that the closing order is resultSet, statement, conn\n //SysUtil.close performs the close without throwing any exception\n SysUtil.close(resultSet);\n SysUtil.close(statement);\n SysUtil.close(conn);\n}\n\n//Gets the default encapsulated db connection, which is automatically closed after the execution-context is completed\n//regardless of whether an exception occurs\nconn = Wb.getConn(); //Gets a shared connection of the default database\nconn = Wb.getConn('wb-sqlserver'); //Gets the shared connection with the specified name\nconn = new Wb.Connection('wb-sqlserver'); //Create a new stand-alone connection\nconn.startTrans(); //Start transaction\nconn.startTrans('serializable'); //Start transaction with the specific isolation level\nconn.commit(); //Commit transaction\nconn.rollback(); //Rollback transaction\n\n//Run arbitrary SQL by Wb.Query and immediately release all resources except the db shared connection,\n//which is automatically closed after the execution-context is completed. See Wb.Query.run docs.\n//Result is an object composed of all results returned by SQL, including any number of return values and output parameters\nresult = Wb.sql('select * from wb_user where sid={?param1?}');\ncount = Wb.sql('delete from table1 where 1 = 0', 'wb-oracle'); //\"wb-oracle\" is the database name\nWb.sql({ sql: 'select * from table1', db: 'wb-oracle', fn(row) { process(row); } });\n//Access stored procedure, {?inParam?} is the input parameter and {*outParam*} is the output parameter\nWb.sql('{call sp({?timestamp|inParam?}, {*cursor|p1*}, {*double|3|p2*})}');\n//Perform a batch operation to insert records\nWb.sql({\n sql: 'insert into test (sid, varchar_field) values({?sid?}, {?varchar_field?})',\n params: [{ sid: 'foo', varchar_field: 'bar' }, { sid: 'abc', varchar_field: 'def' }]\n});\n//Set fn to traverse all records, and specify fn to traverse all records by default\nWb.sql({\n sql: 'select * from wb_perm', fn(item, name, index) {\n if (index > 10)\n return false; //Break traversal\n Wb.log(item)\n }\n});\n\n//Gets the first result set returned by SQL\nrows = Wb.getRows('select * from wb_user'); //Gets rows in object format\nWb.table(rows); //Display the data as a table in the IDE devtools console\nrows = Wb.getAllRows('select * from wb_user'); //Gets all rows in object format, recommend using fn parameter\nrecs = Wb.getRecords('select * from wb_user'); //Gets records in array format\nWb.table(recs);\nrecs = Wb.getAllRecords('select * from wb_user'); //Gets all records in array format, recommend using fn parameter\nWb.getRows('select * from wb_user', 'wb-oracle'); //Access the specific database\nWb.getRecords({ sql: 'select * from wb_user', db: 'wb-oracle', blob: 'text' }); //Use object as parameter configurations\n\nrow = Wb.getRow('select * from wb_user'); //Gets the first row int object format\nrec = Wb.getRecord('select * from wb_user'); //Gets the first record int array format\n\n//Gets object that includes columns metadata, rows and others, rows in object format\nrows = Wb.getRowx('select * from wb_user');\n//Gets object that includes columns metadata, records and others, records in array format\nrecs = Wb.getRecordx('select * from wb_user');\nrows = Wb.getDict('select * from wb_user'); //Gets the dictionaryized object by Wb.getRowx\nrecs = Wb.getDictRecords('select * from wb_user'); //Gets the dictionaryized object by Wb.getRecordx\n\nrs = Wb.sqlRS('select * from wb_user').resultSet; //Run SQL to get the ResultSet\nrows = Wb.sqlAll('select * from test'); //Gets rows for all values including blob values\nrows = Wb.Query.getRows(resultSet, configs); //Gets rows in object format by ResultSet\nrecords = Wb.Query.getRecords(resultSet, configs); //Gets records in array format by ResultSet\n\nWb.sendRows('select * from wb_user'); //Send the results generated by Wb.getRows\nWb.sendRow('select * from wb_user'); //Send the results generated by Wb.getRow\nWb.sendRecords('select * from wb_user'); //Send the results generated by Wb.getRecords\nWb.sendRecord('select * from wb_user'); //Send the results generated by Wb.getRecord\nWb.sendRowx('select * from wb_user'); //Send the results generated by Wb.getRowx\nWb.sendRecordx('select * from wb_user'); //Send the results generated by Wb.getRecordx\nWb.sendDict('select * from wb_user'); //Send the results generated by Wb.getDict\nWb.sendDictRecords('select * from wb_user'); //Send the results generated by Wb.getDictRecords\n\n//Use JS string template to define large SQL\nsql = `\n select user_name as Name from wb_user\n where sid='admin'\n`;\n\n//Access stored procedures\n\n//Create the following stored procedure in SQL Server:\nWb.sql(`\n create procedure test_proc\n (\n @inParam int, -- in param\n @outParam int out -- in and out param\n )\n as\n begin\n set @outParam=@inParam+2 --Returns the output parameters\n select * from wb_user --Returns ResultSet 1\n delete from wb_key where 1=0 --Returns the affected rows\n select * from wb_role --Returns ResultSet 2\n return 123 --returned value\n end\n`, 'wb-sqlserver');\n\n//Call the above test_proc procedure and get a total of 5 results:\n//including outParam, returned value, 2 ResultSets, and 1 affected row\n//Run the stored procedure using Wb.sql, {*type|name*} represents output parameter, {?type|name?} represents input parameter\n//You can also run the following SQL in [Management Tools]->[Database Explorer]:\n// {{*returnValue*}=call test_proc(3,{*outParam*})}\n//to get the return 5 results\nWb.set({ myInParam: 3 }); //Set the input parameter value\nlet result = Wb.sql('{{*returnValue*}=call test_proc({?myInParam?},{*outParam*})}', 'wb-sqlserver'); //Run sql\nWb.log(result); //Display the results in the IDE devtools console\nWb.log(result.$return[0]); //Get the first ResultSet\nWb.log(result.outParam); //Get outParam\n\n//Create the following stored procedure in Oracle:\nWb.sql(`\n CREATE OR REPLACE NONEDITIONABLE PROCEDURE USER_PROC\n (\n P_USER OUT TYPES.X_CURSOR,\n P_NAME IN VARCHAR\n )\n AS\n BEGIN\n OPEN P_USER FOR SELECT * FROM WB_USER WHERE USER_NAME = P_NAME;\n END USER_PROC;\n`, 'wb-oracle');\n//Send the first ResultSet output parameter p_user to the client\n//The \"cursor\" in {*cursor|p_user*} explicitly indicates that the output type of p_user is cursor\nWb.sendRows(`{call user_proc({*cursor|p_user*}, 'admin')}`, 'wb-oracle');\n\n//select, insert, delete, update, and synchronize\n//Insert, delete, or update the specified data to my_table in a transaction.\n//Field names starts with \"$\" are represented as old values, and field names starts without \"$\" represent new values.\nWb.sync({\n tableName: 'my_table',\n insert: [{ field1: 'ab', field2: 12 }, { field1: 'cd', field2: 34 }],\n update: [{ field1: 'newValue', $field1: 'oldValue' }],\n del: [{ $field1: 'xyz' }]\n});\n//Specify whereFields\nWb.sync({\n tableName: 'my_table',\n update: [{ field1: 'newValue', $field1: 'oldValue', $field2: 'abc' }],\n //Explicitly specify field1 and field2 as the where key fields, otherwise the system will automatically get the key fields\n whereFields: 'field1, field2'\n});\n//Perform a conditional select\nWb.sync({\n tableName: 'wb_user',\n fields: 'sid, user_name',\n select: { $sid: 'admin' }\n});\n//Downloads the specified BLOB field as a file\nWb.sync({\n tableName: 'wb_resource',\n download: { _meta: { fieldName: 'svalue', filename: 'desktop.json' }, $sid: 'admin@desktop' }\n});", "wrapBorder": "0", "readonly": "true" } } ] } # example/coding/server-js/devtools-debug.xwl Title: devtools-debug ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "html": "\n", "autoScroll": "true" }, "events": { "ready": "let div, el = this.el;\n\nif (Str.lang == 'zh-cn')\n div = el.query('[cid=lang-zh-cn]');\nelse\n div = el.query('[cid=lang-en]');\ndiv.setStyle('display', 'block');" } } ] } # example/coding/server-js/file-access.xwl Title: file-access ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "edit", "text": "codeEditor1", "cls": "Wb.CodeEditor", "_expanded": true, "properties": { "cid": "codeEditor1", "full": "true", "value": "//Use java.io.File to acess files\nlet file = new File(Base.path, 'wb/js/wb.js'); //File = java.io.File\nlet text = FileUtils.readFileToString(file, Wb.utf8); //Use org.apache.commons.io.FileUtils.readFileToString\nWb.send(text); //Send text to the client\n\n//Use Wb.File to access files\nfile = new Wb.File(true, 'wb/js/wb.js'); //Create file object\ntext = file.text; //Re-read the file text contents\nWb.send(text); //Send text to the client\nfileHandle = file.file; //file's file property is java.io.File\n\n//Read JSON objects or arrays in a file\nWb.log(new Wb.File(true, 'wb/system/config.json').object);\n\n//Read and write files\nfile = new Wb.File(true, 'test.txt');\nfile.text = 'abc'; //Save \"abc\" to a file immediately\nfile.object = { foo: 'bar', abc: [1, 2, 3] }; //Save the JSON object or array to a file immediately\nWb.log(file.object); //Re-read the JSON object in the file\nfile.bytes = [1, 2, 3]; //Save bytes to a file immediately\nWb.log(Wb.encode(file.bytes)); //Re-read the byte array in the file\nbs = file.byteStream; //Re-read the ByteArrayInputStream in the file\nfile.stream = inputStream; //Save the inputStream to a file immediately\ninputStream = file.stream; //Re-read the buffered FileInputStream in the file\nbase64 = file.base64; ///Re-read the content represented by base64 in the file\nfile.base64 = base64; //Save the content represented by base64 to a file immediately\n\n//File name and path access\nname = file.name; //Get file name\nfile.name = name; //Set file name\nextension = file.extension; //Get file name extension\nfile.extension = extension; //Set file name extension\nnormalName = file.normalName; //Get a file name without an extension\npath = file.path; //Get file path\nrelPath = file.relPath; //Get file relative path under the application directory\n\n//Get file iist\nWb.File.listRoots(); //List root files\nfiles = file.listFiles(sortType, desc); //List files of folder\n\n//Traverse\nfile.each(f => Wb.log(f.name)); //Traverse the current directory\nfile.cascade(f => Wb.log(f)); //Iterate through all subfiles and subdirectories\nfile.cascadeSelf(f => { //Iterate include file itself\n Wb.log(f);\n if (f.name == 'myfile1.txt')\n return false; //Break traversal\n if (f.name == 'myfile2.txt')\n return null; //The remaining files in the current directory will no longer be traversed\n});\nfile.bubble(f => Wb.log(f)); //Traverse the current file/directory and all parent directories\nfile.bubbleParent(f => Wb.log(f)); //Traverse without current file/directory\n\n//File lock, only synchronous multithreaded access, and does not lock the file itself\nfile.lock(); //Thread lock\ndoSomething();\nfile.unlock(); //Unlock the thread immediately. The block will auto unlock when execution-context finished.\n\n//Others\nfile.createFile(); //Create a file\nfile.createFolder(); //Create a file\nfile.remove(); //Remove a file or folder\nexists = file.exists; //Determines whether the file exists\nlastModified = file.lastModified; //Last modified date as a numeric value\nlastModifiedDate = file.lastModifiedDate; //Last modified date\nisEqual = file1.equals(file1); //Determines whether the paths are the same\nisFile = file.isFile; //Determines whether it is a file\nisFolder = file.isFolder; //Determines whether it is a folder\nlength = file.length; //File size\nparent = file.parent; //File parent directory", "wrapBorder": "0", "readonly": "true" } } ] } # example/coding/server-js/load-modules.xwl Title: load-modules ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "edit", "text": "codeEditor1", "cls": "Wb.CodeEditor", "_expanded": true, "properties": { "cid": "codeEditor1", "full": "true", "value": "//Loads a JS/MJS script file at the specified path. Use Wb.load method to load only once,\n//and if it is already loaded, the script will no longer be executed.\nWb.load('wb/ss/my.js'); //Load files based on the root directory of the web-app\nWb.load('./foo/bar.mjs'); //Load the foo/bar.mjs file in the current directory\nlet module = Wb.load('../foo/my.mjs'); //Load the foo/my.mjs module file in the parent directory and get exported object\nmodule.exportObject.method(); //Call the method of exportObject\n\n//Run ServerScript of the xwl module, and the ServerScript will be executed every time\nWb.run('shortcut'); //Run modules through module shortcut URL\nWb.run('my/file.xwl', {foo:'bar'}); //Run the my/file module in the module root directory and pass the parameters\nWb.run('./my/file.xwl'); //Run the my/file module in the current directory\nWb.run('../my/file'); //Run the my/file module in the parent directory (.xwl extension can be omitted)\nWb.run('m?xwl=my/file'); //Run the module through URI\nWb.log(Wb.run('myModule')); //Log the return value in myModule's ServerScript\n\n//Call the xwl module, Wb.execute/Wb.invoke differs from Wb.run in that it retrieves client script\n//Invoke the module, run the called module's ServerScript and output client script\nWb.execute('my/file');\nWb.invoke('my/file');\n//Invoke the module, run the called module's ServerScript and get the client full HTML to script variable\nlet script = Wb.invoke('my/file', params, true, false);", "wrapBorder": "0", "readonly": "true" } } ] } # example/coding/server-js/logs.xwl Title: logs ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "edit", "text": "codeEditor1", "cls": "Wb.CodeEditor", "_expanded": true, "properties": { "cid": "codeEditor1", "full": "true", "value": "//Output to the IDE devtools console associated with the specified user.\n//These methods are recommended to show logging information\nWb.log('log'); //Output log message to IDE devtools console of current user, if current user is not available then output to the anonymous user(Config item: \"sys.ss.anonymousDebugUser\")\nWb.log('admin-log', \"admin\"); //Output log message to IDE devtools console of admin user\nWb.log('all-log', true); //Output log message to IDE devtools console of all users\nWb.info('info');\nWb.info('all-info', true);\nWb.warn('warn');\nWb.warn('all-warn', true);\nWb.error('error');\nWb.error('all-error', true);\nWb.table([{ a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }]); //Output table to IDE devtools console of the current user\nWb.table([{ a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }], true); //Output table to IDE devtools console of all users\nWb.debug('debug');\nWb.debug('all-debug', true); //Output \"debug\" to IDE devtools console of all users\n\n//Output to the IDE devtools console and the server file logs.\nWb.recordTrace('trace');\nWb.recordDebug('debug');\nWb.recordInfo('info');\nWb.recordWarn('warn');\nWb.recordError('error');\nWb.recordExcept(new Classes.NullPointerException('exception'));\nWb.recordFatal('fatal');\n\n//Output to the IDE devtools console and the server db logs.\nWb.recordInfox('info', 'myInfo');\nWb.recordWarnx('warn');\nWb.recordErrorx('error');\nWb.recordExceptx(new Classes.NullPointerException('exception'));\n\n//Output to the server logs\nLogUtil.trace('trace');\nLogUtil.trace('trace', request); //Logs object as trace and outputs to the client IDE devtools console associated with the specified session or request.\nLogUtil.debug('debug');\nLogUtil.info('info');\nLogUtil.warn('warn');\nLogUtil.error('error');\nLogUtil.except(new Classes.NullPointerException('exception'));\nLogUtil.fatal('fatal');\n\n//Output to the server db\nLogxUtil.info('info');\nLogxUtil.info('info', 'type');\nLogxUtil.info('info', 'type', request); //Logs object as information and outputs to the client IDE devtools console associated with the specified session.\nLogxUtil.warn('warn');\nLogxUtil.error('error');\nLogxUtil.except(new Classes.NullPointerException('exception'));\n\n//Output to the remote debugging devtools console\nconsole.log('log');\nconsole.info('info');\nconsole.debug('debug');\nconsole.warn('info');\nconsole.error('error')\nconsole.assert(1 == 2, 'not equal');\nconsole.clear();\nconsole.count();\nconsole.countReset();\nconsole.group();\nconsole.groupEnd();\nconsole.time();\nconsole.timeLog();\nconsole.timeEnd();\n\n//Others\nSystem.out.println('msg'); //Output to the system console\nprint('msg'); //Output to the system console and the remote debugging devtools console", "wrapBorder": "0", "readonly": "true" } } ] } # example/coding/server-js/multi-threads.xwl Title: multi-threads ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "edit", "text": "codeEditor1", "cls": "Wb.CodeEditor", "_expanded": true, "properties": { "cid": "codeEditor1", "full": "true", "value": "//Multithreaded programming\n\n//Create a new thread and get the result returned by the thread\nlet map = Wb.startThread(params => {\n Wb.log(params.date);\n Wb.sleep(100);\n return { result: 'ok' };\n}, { foo: 'bar', abc: 123, date: new Date() });\nmap.thread.join(); //Wait for the thread\nWb.log(map.result); //Displays the results: {result: 'ok'}\n\nlet future = Wb.poolStart(params => {\n Wb.log(params.date);\n Wb.sleep(100);\n return { result: 'ok' };\n}, { foo: 'bar', abc: 123, date: new Date() });\nfuture.get(); //Wait for executing\nWb.log('ok');\n\n//Each thread has an exclusive execution-context, and the JS objects can only be accessed by the\n//current execution-context, so no concurrency control is required.\n//Concurrency control still needs to be handled when accessing Java objects, such as when accessing\n//a globally shared Java static object.\nBase.map.put('foo', 'bar'); //Add variables to the global static Java ConcurrentHashMap object\n//Add \"myVar\" to the global JS object app in the execution-context, which is visible only to the current execution-context\napp.myVar = 'value';\nWb.run('my/file1'); //Call the file1 module to safely access app.myVar\n\n//Sync lock\n//Create a lock named my.lock1, and when executed again, the code will be blocked until the lock is released\nlet lock = new Wb.Lock('my.lock1');\ntry {\n let myJavaObject = BaseMap.get('myJavaObject'); //Access BaseMap\n myJavaObject.doSomeThing(); //Execution is safe in locking\n} finally {\n lock.unlock(); //Release the lock. The block will auto unlock when execution-context finished.\n}\n\n//Execute function after the specified delay\n//Since the delayed execution method is in an independent thread and context, external variables cannot be referenced, only parameters in \"params\" can be referenced\nlet future = Wb.setTimeout(params => {\n Wb.log(params.date);\n return { result: 'ok' };\n}, 1000, { foo: 'bar', abc: 123, date: new Date() });\n// future.cancel(false); // cancel setTimeout\n\n//Execute function periodically\n//Since the execution method periodically is in an independent thread and context, external variables cannot be referenced, only parameters in \"params\" can be referenced\nlet future = Wb.setInterval(params => {\n Wb.log(params.date);\n return { result: 'ok' };\n}, 1000, { foo: 'bar', abc: 123, date: new Date() });\nWb.sleep(3000);\nfuture.cancel(false); // cancel interval", "wrapBorder": "0", "readonly": "true" } } ] } # example/coding/server-js/session.xwl Title: session ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "edit", "text": "codeEditor1", "cls": "Wb.CodeEditor", "_expanded": true, "properties": { "cid": "codeEditor1", "full": "true", "value": "//Gets the current user session\nlet session = request.getSession();\n//Gets the current user name\nlet username = Wb.username;\n//Gets the current user ID\nlet userid = Wb.userid;\n//Gets the current user display name\nlet dispname = Wb.dispname;\n//Gets the current user role\nlet roles = Wb.roles;\n\n//Determines whether the current user can access dbe.xwl\nlet result = Wb.permit('admin/dbe.xwl');\n//Determines whether the current user contains a role\nlet hasRole = Wb.hasRole('admin');\n//Determines whether the current user contains some roles\nhasRole = Wb.hasRole(['admin', 'manager']);\n//If the specified role is not included, the specified exception information is thrown\nWb.permitRole('manager', 'Only manager is allowed');\nWb.permitRole(['manager', 'test'], 'Only manager and test are allowed');\n//If the specified role is included, the specified exception information is thrown\nWb.forbidRole('manager', 'manager is not allowed');\nWb.forbidRole(['manager', 'test'], 'manager and test are not allowed');\n\n//Gets the session list map of the specified user\nlet map = Sessions.getSessions('admin');\n//Get all the corresponding websocket sessions by user id\nlet list = Sessions.getWSSessions('admin', '$ide');", "wrapBorder": "0", "readonly": "true" } } ] } # example/coding/server-js/web-access.xwl Title: web-access ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "edit", "text": "codeEditor1", "cls": "Wb.CodeEditor", "_expanded": true, "properties": { "cid": "codeEditor1", "full": "true", "value": "//Gets the parameters submitted by the client. It is commonly used in application/x-www-form-urlencoded,\n//multipart/form-data and application/json\nlet val = Wb.get('paramName'); //Gets session attribute, request attribute and request parameters\nval = Wb.getString('paramName'); //Gets the parameter and converts it to string\nval = Wb.getBool('paramName'); //Gets the parameter and converts it to boolean\nval = Wb.getInt('paramName'); //Gets the parameter and converts it to int\nval = Wb.getFloat('paramName'); //Gets the parameter and converts it to float\nval = Wb.getDate('paramName'); //Gets the parameter and converts it to date\nval = Wb.getObject('paramName'); //Gets the parameter and converts it to Object/Array\n//Gets multiple parameters with the same name, always returning array or Java List. Example: Get multiple uploaded files\nval = Wb.getParams('paramName');\nval = Params.paramName; //Get the value through the proxy, same as Wb.get\nval = Params[name];\nlet hasParam = Wb.has('paramName'); //Determines whether the parameter exists\nlet payload = Wb.payload; //Gets the payload content of the request\nlet payloadParams = Wb.payloadParams; //Gets the application/json payload object\n\n//Set attribute values\nWb.set('paramName', 'abc'); //set \"abc\" to request attribute \"paramName\", same as request.setAttribute('paramName', 'abc');\nParams.paramName = 'abc'; //Set attribute by Proxy, same as above\nParams[name] = 'abc'; //Same as above\n\n//Send object to the client\nWb.send('text'); //Send text\nWb.send(123); //Send after converting the number to text\nWb.send(new Date()); //Send after converting the date to text\nWb.send({ foo: 'bar' }); //Send after encoding the object to text\nWb.send([1, 2, 3]); //Send after encoding the array to text\nWb.send(inputStream); //Send inputstream\nWb.send(bytes); //Send byte array\nWb.send('text', 'mySocket'); //Send text to the current user webSocket with the name \"mySocket\"\nWb.send(inputStream, 'mySocket', 'admin'); ///Send inputStream to all \"admin\" users webSocket with the name \"mySocket\"\nWb.send({ type: 'log', style: 3, data: 'msg' }, '$ide', true); //Send content to the webSocket of the IDE\n\n//Gets the uploaded file\nlet file = Wb.getParams('fileInput'); //Gets single file\nfilename = file.name; //Gets filename\nstream = file.stream; //Gets file inputstream\nsize = file.size; //Gets file size\nlet files = Wb.getParams('fileInput'); //Gets single or multiple files\nfiles.forEach(file => {\n new Wb.File(true, 'upload/' + filename).stream = file.stream; //Save the uploaded file to the specified directory\n //Set the stream to a parameter named \"myStream\". Note that the inputstream is unidirectional,\n //and if the stream is already in use, the stream pointer will point to the end of the stream.\n Params.myStream = file.stream;\n Wb.sql('insert into table values({?blob|myStream?})'); //Insert the uploaded file into the database table blob field\n});\n\n//Send HTTP requests\nlet html = Wb.submit('https://developer.mozilla.org'); //Sends a GET request to the specified URL and gets the returned content\n//Sends with parameters\nWb.submit({ url: 'http://localhost:8080/wb/m?xwl=test2', params: { foo: 'bar' } });\n//Sends with payload data\nWb.submit({ url: 'http://localhost:8080/wb/m?xwl=test2', data: payloadObject });\n//Login to the system, verify the username and password, and get the cookie token\nlet cookie = Wb.submit({\n url: 'http://localhost:8080/wb/verify', all: true, params: { username: 'admin', password: 'admin' }\n}).cookie;\n//Access module1 with login cookie token\nlet result = Wb.submit({ url: 'http://localhost:8080/wb/m?xwl=module1', cookie }, { foo: 'bar' });\n//Logout\nWb.submit({ url: 'http://localhost:8080/wb/logout', cookie });", "wrapBorder": "0", "readonly": "true" } } ] } # example/common/demo-source.xwl Title: demo-source ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n // staff dict data\n staffDict() {\n Wb.sendDict('select code, full_name from wb_staff' + Wb.getOrderSql(), 'wb,');\n },\n // staff dict data desc\n staffDictDesc() {\n Wb.sendDict('select code, full_name from wb_staff order by code desc', 'wb,');\n },\n // staff dict all data\n staffAllDict() {\n if (!this.downloadBlob())\n Wb.sendDict('select * from wb_staff' + Wb.getOrderSql(), 'wb,');\n },\n // staff rows\n staffRows() {\n Wb.sendRows('select code, full_name from wb_staff');\n },\n // staff row\n staffFirstRow() {\n Wb.sendRow(\"select * from wb_staff where code='10001'\")\n },\n // search staff rows\n staffSearch() {\n let sql;\n\n sql = 'select code, full_name, email from wb_staff';\n if (Params.query) {\n Wb.setLike('query');\n sql += ' where full_name like {?query?}';\n }\n sql += ' order by code'\n Wb.sendRows(sql);\n },\n // list continents\n listRootArea() {\n Wb.sendDict(`select * from wb_area where parent_id='0' order by area_name`);\n },\n // list areas\n listArea() {\n Wb.sendDict('select * from wb_area where parent_id={?parent_id?} order by area_name');\n },\n // list areas tree\n listAreaTree() {\n Params.sid ??= '0'; //\"0\" is root parent_id\n Wb.sendDict(`\n select area_name as text, sid as subtext, 0 as \"_checked\", area_name, sid, parent_id,\n case when (select count(*) from wb_area b where b.parent_id=a.sid)>0 then 0 else 1 end as \"_leaf\"\n from wb_area a where parent_id={?sid?} order by area_name\n `);\n },\n // list areas tree without check box\n listAreaTree1() {\n let whereClause = '';\n\n Params.sid ??= '0'; //\"0\" is root parent_id\n if (Params.query) {\n Wb.setLike('query');\n whereClause = 'area_name like {?query?}';\n } else {\n whereClause = 'parent_id={?sid?}'\n }\n Wb.sendDict(`\n select area_name as text, sid as subtext, area_name, sid, parent_id,\n case when (select count(*) from wb_area b where b.parent_id=a.sid)>0 then 0 else 1 end as \"_leaf\"\n from wb_area a where ${whereClause} order by area_name\n `);\n },\n // search areas rows\n areaSearch() {\n let sql;\n\n sql = 'select * from wb_area';\n if (Params.query) {\n Wb.setLike('query');\n sql += ' where sid like {?query?}';\n }\n Wb.sendRows(sql);\n },\n // Database side pagination\n staffDbPaging() {\n if (this.downloadBlob())\n return;\n\n // auto database-side paging for simple sql\n // Wb.sendDict({ sql: 'select * from wb_staff', paging: 'db', dict: 'wb' });\n\n // For demonstration purposes, database-side pagination is implemented manually below\n let db = Wb.getConn();\n\n if (db.match('derby')) {\n // For derby only, some paging parameter: _from, _to, _size\n Wb.sendDict({\n sql: 'select * from wb_staff offset {?bigint|_from?} rows fetch first {?bigint|_size?} rows only',\n db, dict: 'wb', paging: false /* stop app serverside paging */, total: 'select count(*) from wb_staff'\n });\n } else {\n // For other database pagination SQL, please refer to their respective manuals\n // Other databases here do not use database pagination\n Wb.sendDict({ sql: 'select * from wb_staff', db, dict: 'wb' })\n }\n },\n // Perform download if necessary.\n downloadBlob() {\n let download = Wb.getObject('download');\n if (download) {\n //download blob\n let row = Wb.getRow({\n sql: 'select full_name, photo from wb_staff where sid={?$sid?}',\n blob: true,\n params: download\n });\n if (row?.photo)\n Wb.exportData(row.photo, row.full_name + '.png');\n else\n Wb.raise('Photo not found.');\n return true;\n } else\n return false;\n },\n // Check username\n checkUser() {\n Wb.send(Wb.getRow('select 1 from wb_user where user_name={?username?}') ? 'failed' : 'ok');\n },\n // Select admin from staff\n selectAdminStaff() {\n let sql;\n\n sql = \"select sid,full_name as text,code as subtext from wb_staff where user_id='admin'\";\n if (Params.search) {\n Wb.setLike('search');\n sql += ' and full_name like {?search?}';\n }\n Wb.sendRowx(sql);\n },\n // Select none admin from staff\n selectNoneAdminStaff() {\n let sql;\n\n sql = \"select sid,full_name as text,code as subtext from wb_staff where user_id<>'admin'\";\n if (Params.search) {\n Wb.setLike('search');\n sql += ' and full_name like {?search?}';\n }\n Wb.sendRowx(sql);\n },\n // Select report1\n selectReport1() {\n Wb.sendRowx('select * from wb_report_demo1')\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/comps/button.xwl Title: button ```json { "title": "", "icon": "button", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "events": { "finalize": "app.useIdeTipField.highlight();" }, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Button", "cls": "w-title3" } }, { "_icon": "label1", "text": "useIdeTipField", "cls": "Wb.DisplayField", "properties": { "cid": "useIdeTipField", "icon": "info", "htmlValue": "true", "value": "For a better learning experience, please review the examples in the WebBuilder IDE" }, "events": { "ready": "if (parentApp?.inIDE)\n this.hide();" } }, { "_icon": "title", "text": "listTitle", "cls": "Wb.Title", "properties": { "cid": "listTitle", "title": "Button list" } }, { "_icon": "container", "text": "listCt", "cls": "Wb.Container", "properties": { "cid": "listCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "commonBtn", "cls": "Wb.Button", "properties": { "cid": "commonBtn", "text": "Common Button" }, "events": { "click": "Wb.tip(this.cid + ' clicked'); // equals to: Wb.tip(app.commonBtn.cid + ' clicked');" } }, { "_icon": "button", "text": "iconBtn", "cls": "Wb.Button", "properties": { "cid": "iconBtn", "text": "Icon Button", "icon": "gear" } }, { "_icon": "button", "text": "imgBtn", "cls": "Wb.Button", "properties": { "cid": "imgBtn", "text": "Image Button", "img": "cut" } }, { "_icon": "button", "text": "charIconBtn", "cls": "Wb.Button", "properties": { "cid": "charIconBtn", "text": "Char Icon", "icon": "🌻", "tip": "Any char as icon" } }, { "_icon": "button", "text": "badgeBtn", "cls": "Wb.Button", "properties": { "cid": "badgeBtn", "text": "58", "icon": "bell", "badgeText": "true", "tip": "Badge text" } }, { "_icon": "button", "text": "leftBtn", "cls": "Wb.Button", "properties": { "cid": "leftBtn", "text": "Left", "icon": "left4", "iconAlign": "left" } }, { "_icon": "button", "text": "rightBtn", "cls": "Wb.Button", "properties": { "cid": "rightBtn", "text": "Right", "icon": "right4", "iconAlign": "right" } }, { "_icon": "button", "text": "topBtn", "cls": "Wb.Button", "properties": { "cid": "topBtn", "text": "Top", "icon": "up4", "iconAlign": "top" } }, { "_icon": "button", "text": "bottomBtn", "cls": "Wb.Button", "properties": { "cid": "bottomBtn", "text": "Bottom", "icon": "down4", "iconAlign": "bottom" } }, { "_icon": "button", "text": "keyBtn", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "keyBtn", "icon": "keyboard", "text": "Ctrl+Shift+K", "keys": "Ctrl+Shift+K", "tip": "Press Ctrl+Shift+K to fire click event", "keysTextTip": "false" }, "events": { "click": "Wb.tip(this.cid + ' clicked');" } }, { "_icon": "button", "text": "noFocusBtn", "cls": "Wb.Button", "properties": { "cid": "noFocusBtn", "text": "No Focus", "icon": "flower", "tabIndex": "undefined", "focusable": "false" } }, { "_icon": "button", "text": "menuBtn", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "menuBtn", "text": "menu", "icon": "menu" }, "items": [ { "_icon": "menu2", "text": "menu", "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "_expanded": true, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "item 1", "icon": "calendar" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "item 2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "text": "item 3" } } ] } ] }, { "_icon": "split", "text": "splitButton1", "cls": "Wb.SplitButton", "properties": { "cid": "splitButton1", "text": "Split Button" }, "events": { "click": "Wb.tip(this.cid + ' clicked');" }, "_expanded": true, "items": [ { "_icon": "menu2", "text": "menu", "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "_expanded": true, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "item 1", "icon": "calendar" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "item 2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "text": "item 3" } } ] } ] }, { "_icon": "button", "text": "tapBtn", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "tapBtn", "tapClick": "true", "text": "MouseDown Click" }, "events": { "click": "Wb.tip(this.cid + ' clicked');" } }, { "_icon": "button", "text": "repeatBtn", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "repeatBtn", "text": "Repeat Click", "repeatInterval": "true" }, "events": { "click": "app.repeatCt ??= 0;\nWb.toast(this.cid + ' clicked ' + (app.repeatCt++));" } }, { "_icon": "button", "text": "button1", "cls": "Wb.Button", "properties": { "cid": "button1", "icon": "delete", "text": "Disabled", "disabled": "true" } } ] }, { "_icon": "title", "text": "styleTitle", "cls": "Wb.Title", "properties": { "cid": "styleTitle", "title": "Button style" } }, { "_icon": "label", "text": "styleLabel", "cls": "Wb.Label", "properties": { "cid": "styleLabel", "text": "Set the \"type\" property to set the button style" }, "_expanded": true }, { "_icon": "container", "text": "styleCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "styleCt", "layout": "form", "frame": "true" }, "items": [ { "_icon": "button", "text": "primary", "cls": "Wb.Button", "properties": { "cid": "primary", "type": "primary", "text": "Primary", "icon": "address-book" } }, { "_icon": "button", "text": "plain", "cls": "Wb.Button", "properties": { "cid": "plain", "type": "plain", "icon": "delete", "tip": "Plain Button" } }, { "_icon": "button", "text": "tool1", "cls": "Wb.Button", "properties": { "cid": "tool1", "type": "tool", "text": "cut", "icon": "cut", "tip": "Text Tool Button" } }, { "_icon": "button", "text": "noFocusTool1", "cls": "Wb.Button", "properties": { "cid": "noFocusTool1", "text": "cut", "icon": "cut", "tip": "Text Tool Button no focus", "cname": "tool" } }, { "_icon": "button", "text": "tool2", "cls": "Wb.Button", "properties": { "cid": "tool2", "type": "tool", "icon": "add1", "tip": "Tool Button" } }, { "_icon": "button", "text": "noFocusTool2", "cls": "Wb.Button", "properties": { "cid": "noFocusTool2", "icon": "add1", "tip": "Tool Button no focus", "cname": "tool" } }, { "_icon": "button", "text": "icon", "cls": "Wb.Button", "properties": { "cid": "icon", "icon": "database", "tip": "Icon Button no focus", "cname": "iconButton" }, "_expanded": true }, { "_icon": "button", "text": "light", "cls": "Wb.Button", "properties": { "cid": "light", "icon": "cube", "tip": "Light Button no focus", "cname": "lightButton" } } ] }, { "_icon": "title", "text": "shapeTitle", "cls": "Wb.Title", "properties": { "cid": "shapeTitle", "title": "Button shape" } }, { "_icon": "label", "text": "shapeLabel", "cls": "Wb.Label", "properties": { "cid": "shapeLabel", "text": "Set the \"shape\" property to set the button shape" }, "_expanded": true }, { "_icon": "container", "text": "shapeCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "shapeCt", "layout": "form", "frame": "true" }, "items": [ { "_icon": "button", "text": "circleBtn", "cls": "Wb.Button", "_expanded": false, "properties": { "cid": "circleBtn", "icon": "gear", "shape": "circle", "tip": "Circle" } }, { "_icon": "button", "text": "rectBtn", "cls": "Wb.Button", "_expanded": false, "properties": { "cid": "rectBtn", "icon": "gear", "shape": "rect", "text": "Rect" } }, { "_icon": "button", "text": "roundBtn", "cls": "Wb.Button", "_expanded": false, "properties": { "cid": "roundBtn", "icon": "gear", "shape": "round", "text": "Round" } } ] }, { "_icon": "title", "text": "groupTitle", "cls": "Wb.Title", "properties": { "cid": "groupTitle", "title": "Grouping and toggle button" } }, { "_icon": "label", "text": "groupLabel", "cls": "Wb.Label", "properties": { "cid": "groupLabel", "text": "Set the \"groupName\" property for grouping and set the \"active\" property for toggle" }, "_expanded": true }, { "_icon": "container", "text": "groupCt", "cls": "Wb.Container", "properties": { "cid": "groupCt", "layout": "form", "frame": "true" }, "events": { "buttontoggle": "Wb.tip(button.cid + ' is ' + active);" }, "_expanded": true, "items": [ { "_icon": "button", "text": "button1", "cls": "Wb.Button", "properties": { "cid": "button1", "text": "Button 1", "groupName": "group1", "active": "false" } }, { "_icon": "button", "text": "button2", "cls": "Wb.Button", "properties": { "cid": "button2", "groupName": "group1", "text": "Button 2", "active": "false" } }, { "_icon": "button", "text": "button3", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button3", "groupName": "group1", "text": "Button 3", "active": "false" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" }, "_expanded": true }, { "_icon": "button", "text": "button4", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button4", "groupName": "group2", "text": "Button 4", "active": "false" } }, { "_icon": "button", "text": "button5", "cls": "Wb.Button", "_expanded": false, "properties": { "cid": "button5", "groupName": "group2", "text": "Button 5", "active": "true" } }, { "_icon": "button", "text": "button6", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button6", "groupName": "group2", "text": "Button 6", "active": "false" } }, { "_icon": "space", "text": "space1", "cls": "Wb.Space", "properties": { "cid": "space1" } }, { "_icon": "button", "text": "button7", "cls": "Wb.Button", "_expanded": false, "properties": { "cid": "button7", "text": "Toggle", "active": "false" } }, { "_icon": "space", "text": "space2", "cls": "Wb.Space", "properties": { "cid": "space2" } }, { "_icon": "button", "text": "button8", "cls": "Wb.Button", "_expanded": false, "properties": { "cid": "button8", "text": "No Background", "active": "true", "activeBgColor": "false" } } ] }, { "_icon": "title", "text": "sizeTitle", "cls": "Wb.Title", "properties": { "cid": "sizeTitle", "title": "Button size" } }, { "_icon": "label", "text": "sizeLabel", "cls": "Wb.Label", "properties": { "cid": "sizeLabel", "text": "Set \"fontSize\" property to set whole button size, and set \"iconSize\" property to set icon size only." }, "_expanded": true }, { "_icon": "container", "text": "sizeCt", "cls": "Wb.Container", "properties": { "cid": "sizeCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "button1", "cls": "Wb.Button", "properties": { "cid": "button1", "text": "Button 1", "icon": "gift", "fontSize": ".8em" } }, { "_icon": "button", "text": "button2", "cls": "Wb.Button", "properties": { "cid": "button2", "text": "Button 2", "icon": "gift", "fontSize": "1.5em" } }, { "_icon": "button", "text": "button3", "cls": "Wb.Button", "properties": { "cid": "button3", "text": "Big icon only", "icon": "gift", "iconSize": "2em", "iconAlign": "top" } }, { "_icon": "button", "text": "button4", "cls": "Wb.Button", "properties": { "cid": "button4", "text": "Big icon only", "icon": "gift", "iconSize": "2.5em", "iconAlign": "top" } } ] }, { "_icon": "title", "text": "layoutTitle", "cls": "Wb.Title", "properties": { "cid": "layoutTitle", "title": "Button layout" } }, { "_icon": "label", "text": "layoutLabel", "cls": "Wb.Label", "properties": { "cid": "layoutLabel", "text": "Set the \"Layout\" property to arrange buttons." }, "_expanded": true }, { "_icon": "container", "text": "layoutCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "layoutCt", "frame": "true", "layout": "row" }, "items": [ { "_icon": "item", "text": "setupItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "setupItem", "icon": "setup", "iconAlign": "top", "text": "Setup", "cname": "tool", "iconSize": "2.8em" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "container", "text": "container1", "cls": "Wb.Container", "properties": { "cid": "container1", "layout": "row" }, "_expanded": true, "items": [ { "_icon": "item", "text": "pasteItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "pasteItem", "icon": "paste", "text": "Paste", "cname": "tool", "iconAlign": "top", "iconSize": "2.8em" } }, { "_icon": "container", "text": "container1", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "container1", "layout": "column", "align": "start" }, "items": [ { "_icon": "item", "text": "cutItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "cutItem", "icon": "cut", "text": "Cut", "cname": "tool" } }, { "_icon": "item", "text": "copyItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "copyItem", "icon": "copy", "text": "Copy", "cname": "tool" } }, { "_icon": "item", "text": "deleteItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "deleteItem", "icon": "delete", "text": "Delete", "cname": "tool" } } ] } ] }, { "_icon": "divider", "text": "divider2", "cls": "Wb.Divider", "properties": { "cid": "divider2" } }, { "_icon": "container", "text": "container2", "cls": "Wb.Container", "_expanded": false, "properties": { "cid": "container2", "layout": "column", "align": "center" }, "items": [ { "_icon": "item", "text": "addItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "addItem", "icon": "add", "text": "Add", "cname": "tool" } }, { "_icon": "item", "text": "editItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "editItem", "icon": "edit", "text": "Edit", "cname": "tool" } }, { "_icon": "container", "text": "container1", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "container1", "layout": "row" }, "items": [ { "_icon": "item", "text": "upItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "upItem", "icon": "up4", "cname": "tool", "shape": "circle" } }, { "_icon": "item", "text": "rightItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "rightItem", "icon": "right4", "cname": "tool", "shape": "circle" } }, { "_icon": "item", "text": "downItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "downItem", "icon": "down4", "cname": "tool", "shape": "circle" } }, { "_icon": "item", "text": "leftItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "leftItem", "icon": "left4", "cname": "tool", "shape": "circle" } } ] } ] }, { "_icon": "split", "text": "setItem", "cls": "Wb.SplitButton", "properties": { "cid": "setItem", "icon": "gear", "iconSize": "2.8em" }, "_expanded": true, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "Item 1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "Item 2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item3", "text": "Item 3" } } ] } ] } ] }, { "_icon": "title", "text": "eventTitle", "cls": "Wb.Title", "properties": { "cid": "eventTitle", "title": "Events" }, "_expanded": true }, { "_icon": "container", "text": "eventCt", "cls": "Wb.Container", "properties": { "cid": "eventCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "button1", "cls": "Wb.Button", "_expanded": false, "properties": { "cid": "button1", "text": "Click" }, "events": { "click": "Wb.tip('click');" } }, { "_icon": "button", "text": "button2", "cls": "Wb.Button", "_expanded": false, "properties": { "cid": "button2", "active": "true", "text": "Toggle" }, "events": { "activate": "Wb.tip('activate');", "deactivate": "Wb.tip('deactivate');", "toggle": "Wb.tip('toggle: ' + active);" } } ] }, { "_icon": "title", "text": "codingTitle", "cls": "Wb.Title", "properties": { "cid": "codingTitle", "title": "Coding" }, "_expanded": true }, { "_icon": "container", "text": "codingCt", "cls": "Wb.Container", "properties": { "cid": "codingCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "container", "text": "demoCt", "cls": "Wb.Container", "properties": { "cid": "demoCt", "layout": "form-compact" }, "_expanded": true, "items": [ { "_icon": "button", "text": "demoButton", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "demoButton", "text": "Demo Button" } } ] }, { "_icon": "line", "text": "line1", "cls": "Wb.Line", "_expanded": false, "properties": { "cid": "line1", "title": "Demonstrate", "dimTitle": "true", "dashed": "true" } }, { "_icon": "container", "text": "actionCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "actionCt", "layout": "form-compact" }, "items": [ { "_icon": "button", "text": "addBtn", "cls": "Wb.Button", "properties": { "cid": "addBtn", "text": "Add Button" }, "_expanded": true, "events": { "click": "app.demoCt.add({ cname: 'button', icon: 'gear', text: 'New Button' });" } }, { "_icon": "button", "text": "setTextIconBtn", "cls": "Wb.Button", "properties": { "cid": "setTextIconBtn", "text": "Set Text Icon" }, "_expanded": true, "events": { "click": "let btn = app.demoButton;\nif (btn) {\n btn.text = 'Changed Text';\n btn.icon = 'earth';\n}" } }, { "_icon": "button", "text": "disableBtn", "cls": "Wb.Button", "properties": { "cid": "disableBtn", "text": "Set Disabled" }, "_expanded": true, "events": { "click": "app.demoButton?.setter('disabled', true); //equals to: if (app.demoButton) app.demoButton.disabled = true;\n//app.demoButton.visible = false; //Hide\n//app.demoButton?.hide(); //Hide" } }, { "_icon": "button", "text": "destroyBtn", "cls": "Wb.Button", "properties": { "cid": "destroyBtn", "text": "Destroy" }, "_expanded": true, "events": { "click": "app.demoButton?.destroy();" } }, { "_icon": "button", "text": "addEventBtn", "cls": "Wb.Button", "properties": { "cid": "addEventBtn", "text": "Add Event" }, "_expanded": true, "events": { "click": "app.demoBtnOnClick ??= f => Wb.tip('clicked'); //Define function\napp.demoButton?.on('click', app.demoBtnOnClick); //The same function can only be registered once\nWb.tip('Please click Demo Button');" } }, { "_icon": "button", "text": "removeEventBtn", "cls": "Wb.Button", "properties": { "cid": "removeEventBtn", "text": "Remove Event" }, "_expanded": true, "events": { "click": "app.demoButton?.un('click', app.demoBtnOnClick);\nWb.tip('Please click Demo Button (Event removed)');" } }, { "_icon": "button", "text": "addListenerBtn", "cls": "Wb.Button", "properties": { "cid": "addListenerBtn", "text": "Add Listener" }, "_expanded": true, "events": { "click": "app.demoBtnOnMouseEnter ??= f => Wb.tip('entered'); //Define function\napp.demoButton?.mon('mouseenter', app.demoBtnOnMouseEnter); //Add managed dom listener\nWb.tip('Please move mouse to Demo Button');" } }, { "_icon": "button", "text": "removeListenerBtn", "cls": "Wb.Button", "properties": { "cid": "removeListenerBtn", "text": "Remove Listener" }, "_expanded": true, "events": { "click": "app.demoButton?.mun('mouseenter', app.demoBtnOnMouseEnter);\nWb.tip('Please move mouse to Demo Button (Listener removed)');" } } ] } ] } ] } ] } # example/comps/chart/create-chart.xwl Title: create-chart ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n Wb.load('wb/libs/echarts.js');\n let i, theta, r, chart, data = [];\n\n //Please remove the theme when only used in the serverside\n chart = echarts.init(null, Wb.get('sys.theme') == 'dark' ? 'dark' : null, {\n renderer: 'svg',\n locale: Str.lang == 'zh-cn' ? 'ZH' : 'EN',\n ssr: true,\n width: 500,\n height: 400\n });\n for (i = 0; i <= 100; i++) {\n theta = (i / 100) * 360;\n r = 5 * (1 + Math.sin((theta / 180) * Math.PI));\n data.push([r, theta]);\n }\n chart.setOption({\n title: {\n text: 'Server render'\n },\n legend: {\n data: ['line']\n },\n polar: {},\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross'\n }\n },\n angleAxis: {\n type: 'value',\n startAngle: 0\n },\n radiusAxis: {},\n series: [\n {\n coordinateSystem: 'polar',\n name: 'line',\n type: 'line',\n data: data\n }\n ]\n });\n // response.setHeader('Content-Type', 'application/xml');\n Wb.send(chart.renderToSVGString());\n}\nmain();" }, "_icon": "module" } # example/comps/chart/get-chart-data.xwl Title: get-chart-data ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n Wb.send({\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: [120, 200, 150, 80, 70, 110, 130],\n type: 'line',\n symbol: 'triangle',\n symbolSize: 20,\n lineStyle: {\n color: '#5470C6',\n width: 4,\n type: 'dashed'\n },\n itemStyle: {\n borderWidth: 3,\n borderColor: '#EE6666',\n color: 'yellow'\n }\n }\n ]\n });\n}\nmain();" }, "_icon": "module" } # example/comps/chart.xwl Title: chart ```json { "title": "", "icon": "chart-bar", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Chart", "cls": "w-title3" } }, { "_icon": "title", "text": "commonTitle", "cls": "Wb.Title", "properties": { "cid": "commonTitle", "title": "Common chart" }, "_expanded": true }, { "_icon": "chart-bar", "text": "commonChart", "cls": "Wb.Chart", "properties": { "cid": "commonChart", "option": "({\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n})", "height": "20em" } }, { "_icon": "title", "text": "manualSetOptionTitle", "cls": "Wb.Title", "properties": { "cid": "manualSetOptionTitle", "title": "Manual setOption" }, "_expanded": true }, { "_icon": "chart-bar", "text": "manualSetOptionChart", "cls": "Wb.Chart", "properties": { "cid": "manualSetOptionChart", "height": "20em" }, "events": { "ready": "// For more parameters please use [this.setOption] method\nthis.option = {\n title: {\n text: 'Stacked Area Chart'\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross',\n label: {\n backgroundColor: '#6a7985'\n }\n }\n },\n legend: {\n data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']\n },\n toolbox: {\n feature: {\n saveAsImage: {}\n }\n },\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: [\n {\n type: 'category',\n boundaryGap: false,\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Email',\n type: 'line',\n stack: 'Total',\n areaStyle: {},\n emphasis: {\n focus: 'series'\n },\n data: [120, 132, 101, 134, 90, 230, 210]\n },\n {\n name: 'Union Ads',\n type: 'line',\n stack: 'Total',\n areaStyle: {},\n emphasis: {\n focus: 'series'\n },\n data: [220, 182, 191, 234, 290, 330, 310]\n },\n {\n name: 'Video Ads',\n type: 'line',\n stack: 'Total',\n areaStyle: {},\n emphasis: {\n focus: 'series'\n },\n data: [150, 232, 201, 154, 190, 330, 410]\n },\n {\n name: 'Direct',\n type: 'line',\n stack: 'Total',\n areaStyle: {},\n emphasis: {\n focus: 'series'\n },\n data: [320, 332, 301, 334, 390, 330, 320]\n },\n {\n name: 'Search Engine',\n type: 'line',\n stack: 'Total',\n label: {\n show: true,\n position: 'top'\n },\n areaStyle: {},\n emphasis: {\n focus: 'series'\n },\n data: [820, 932, 901, 934, 1290, 1330, 1320]\n }\n ]\n};" } }, { "_icon": "title", "text": "remoteTitle", "cls": "Wb.Title", "properties": { "cid": "remoteTitle", "title": "Load remote data" }, "_expanded": true }, { "_icon": "chart-bar", "text": "remoteChart", "cls": "Wb.Chart", "properties": { "cid": "remoteChart", "height": "20em" }, "events": { "ready": "//You can set url property to autoload chart\nthis.load({ url: xpath + '/get-chart-data', mask: { target: this } });" } }, { "_icon": "button", "text": "manualLoadBtn", "cls": "Wb.Button", "properties": { "cid": "manualLoadBtn", "text": "Manual load data" }, "events": { "click": "app.remoteChart.clear();\napp.remoteChart.load({ params: { foo: 'bar' } });\n// app.remoteChart.reload();" } }, { "_icon": "title", "text": "serverRenderTitle", "cls": "Wb.Title", "properties": { "cid": "serverRenderTitle", "title": "Server rendering chart" } }, { "_icon": "label", "text": "serverRenderLabel", "cls": "Wb.Label", "properties": { "cid": "serverRenderLabel", "text": "WebBuilder can directly load echarts library in the serverside to create charts, which will bring great convenience. For example, we can use this feature to create charts in the serverside and send them via email." } }, { "_icon": "panel", "text": "serverRenderPanel", "cls": "Wb.Panel", "properties": { "cid": "serverRenderPanel", "html": "_$chartSvg$_", "layout": "center", "minHeight": "8em" }, "events": { "ready": "let me = this;\nWb.ajax({\n url: xpath + '/create-chart',\n mask: { target: me },\n success(resp) {\n me.html = resp;\n }\n});" } } ] } ] } # example/comps/check-slider.xwl Title: check-slider ```json { "title": "", "icon": "check6", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Check, radio, toggle and slider", "cls": "w-title3" } }, { "_icon": "title", "text": "checkTitle", "cls": "Wb.Title", "properties": { "cid": "checkTitle", "title": "Check" } }, { "_icon": "container", "text": "checkCt", "cls": "Wb.Container", "properties": { "cid": "checkCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "check6", "text": "commonCheck", "cls": "Wb.Check", "properties": { "cid": "commonCheck", "text": "Common check" }, "events": { "change": "Wb.tip(this.cid + ' value is ' + value);" } }, { "_icon": "check6", "text": "labelCheck", "cls": "Wb.Check", "properties": { "cid": "labelCheck", "text": "With label", "label": "Label check", "value": "true" } }, { "_icon": "check6", "text": "onlyLabelCheck", "cls": "Wb.Check", "properties": { "cid": "onlyLabelCheck", "label": "Only label check" }, "_expanded": true }, { "_icon": "check6", "text": "onlyLabelEmptyTextCheck", "cls": "Wb.Check", "properties": { "cid": "onlyLabelEmptyTextCheck", "label": "Only label check with empty text", "showEmptyLabel": "true" } }, { "_icon": "model", "text": "intValueCt", "cls": "Wb.ControlCt", "properties": { "cid": "intValueCt", "gap": "1em", "showEmptyLabel": "true" }, "_expanded": true, "items": [ { "_icon": "check6", "text": "intValueCheck", "cls": "Wb.Check", "_expanded": true, "properties": { "cid": "intValueCheck", "returnType": "int", "label": "return int value" } }, { "_icon": "button", "text": "getValueBtn", "cls": "Wb.Button", "properties": { "cid": "getValueBtn", "text": "Get value" }, "events": { "click": "Wb.tip('The value is ' + this.previousSibling.value);" } } ] } ] }, { "_icon": "title", "text": "checkGroupTitle", "cls": "Wb.Title", "properties": { "cid": "checkGroupTitle", "title": "CheckGroup" } }, { "_icon": "container", "text": "checkGroupCt", "cls": "Wb.Container", "properties": { "cid": "checkGroupCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "label", "text": "commonCheckGroupLabel", "cls": "Wb.Label", "properties": { "cid": "commonCheckGroupLabel", "text": "Common checkGroup" } }, { "_icon": "container", "text": "commonCheckCt", "cls": "Wb.Container", "properties": { "cid": "commonCheckCt", "gap": "1em", "layout": "row" }, "_expanded": true, "items": [ { "_icon": "checks", "text": "commonCheckGroup", "cls": "Wb.CheckGroup", "properties": { "cid": "commonCheckGroup" }, "_expanded": true, "items": [ { "_icon": "check6", "text": "check1", "cls": "Wb.Check", "properties": { "cid": "check1", "label": "item 1" } }, { "_icon": "check6", "text": "check2", "cls": "Wb.Check", "properties": { "cid": "check2", "label": "item 2", "value": "true" } }, { "_icon": "check6", "text": "check3", "cls": "Wb.Check", "_expanded": true, "properties": { "cid": "check3", "label": "item 3", "value": "true" } } ] }, { "_icon": "button", "text": "getValueBtn", "cls": "Wb.Button", "properties": { "cid": "getValueBtn", "text": "Get value" }, "events": { "click": "Wb.tip(Wb.encode(app.commonCheckGroup.value));" } }, { "_icon": "button", "text": "setValueBtn", "cls": "Wb.Button", "properties": { "cid": "setValueBtn", "text": "Set value" }, "events": { "click": "app.commonCheckGroup.setValue({ check1: true, check3: true });" } } ] }, { "_icon": "label", "text": "allCheckGroupLabel", "cls": "Wb.Label", "properties": { "cid": "allCheckGroupLabel", "text": "Return all and return array value checkGroup" } }, { "_icon": "container", "text": "allCheckCt", "cls": "Wb.Container", "properties": { "cid": "allCheckCt", "gap": "1em", "layout": "row" }, "_expanded": true, "items": [ { "_icon": "checks", "text": "allCheckGroup", "cls": "Wb.CheckGroup", "properties": { "cid": "allCheckGroup", "returnAll": "true", "returnArray": "true" }, "_expanded": true, "items": [ { "_icon": "check6", "text": "check1", "cls": "Wb.Check", "properties": { "cid": "check1", "label": "item 1" } }, { "_icon": "check6", "text": "check2", "cls": "Wb.Check", "properties": { "cid": "check2", "label": "item 2", "value": "true" } }, { "_icon": "check6", "text": "check3", "cls": "Wb.Check", "_expanded": true, "properties": { "cid": "check3", "label": "item 3", "value": "true" } } ] }, { "_icon": "button", "text": "getValueBtn", "cls": "Wb.Button", "properties": { "cid": "getValueBtn", "text": "Get value" }, "events": { "click": "Wb.tip(Wb.encode(app.allCheckGroup.value));" } }, { "_icon": "button", "text": "setValueObjectBtn", "cls": "Wb.Button", "properties": { "cid": "setValueObjectBtn", "text": "Set value by object" }, "events": { "click": "app.allCheckGroup.setValue({ check1: true, check3: 'true' });" } }, { "_icon": "button", "text": "setValueArrayBtn", "cls": "Wb.Button", "properties": { "cid": "setValueArrayBtn", "text": "Set value by array" }, "events": { "click": "app.allCheckGroup.setValue([false, 1, 'true']);" }, "_expanded": true }, { "_icon": "button", "text": "setValueCidsBtn", "cls": "Wb.Button", "properties": { "cid": "setValueCidsBtn", "text": "Set value by cids" }, "events": { "click": "app.allCheckGroup.setValue(['check1', 'check3'] );" } } ] } ] }, { "_icon": "title", "text": "radioTitle", "cls": "Wb.Title", "properties": { "cid": "radioTitle", "title": "Radio" }, "_expanded": true }, { "_icon": "container", "text": "radioCt", "cls": "Wb.Container", "properties": { "cid": "radioCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "check2", "text": "radio1", "cls": "Wb.Radio", "_expanded": true, "properties": { "cid": "radio1", "label": "item 1", "group": "group1" } }, { "_icon": "check2", "text": "radio2", "cls": "Wb.Radio", "_expanded": false, "properties": { "cid": "radio2", "label": "item 2", "group": "group1" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "check2", "text": "radio3", "cls": "Wb.Radio", "_expanded": true, "properties": { "cid": "radio3", "label": "item 3", "group": "group2" } }, { "_icon": "check2", "text": "radio4", "cls": "Wb.Radio", "_expanded": false, "properties": { "cid": "radio4", "label": "item 4", "group": "group2", "value": "true" } }, { "_icon": "check2", "text": "radio5", "cls": "Wb.Radio", "_expanded": true, "properties": { "cid": "radio5", "label": "item 5", "group": "group2" } } ] }, { "_icon": "title", "text": "radioGroupTitle", "cls": "Wb.Title", "properties": { "cid": "radioGroupTitle", "title": "RadioGroup" } }, { "_icon": "container", "text": "radioGroupCt", "cls": "Wb.Container", "properties": { "cid": "radioGroupCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "label", "text": "commonRadioGroupLabel", "cls": "Wb.Label", "properties": { "cid": "commonRadioGroupLabel", "text": "Common radioGroup" } }, { "_icon": "container", "text": "commonRadioCt", "cls": "Wb.Container", "properties": { "cid": "commonRadioCt", "gap": "1em", "layout": "row" }, "_expanded": true, "items": [ { "_icon": "radios", "text": "commonRadioGroup", "cls": "Wb.RadioGroup", "_expanded": true, "properties": { "cid": "commonRadioGroup" }, "items": [ { "_icon": "check2", "text": "radio1", "cls": "Wb.Radio", "properties": { "cid": "radio1", "label": "item 1" } }, { "_icon": "check2", "text": "radio2", "cls": "Wb.Radio", "properties": { "cid": "radio2", "label": "item 2" } }, { "_icon": "check2", "text": "radio3", "cls": "Wb.Radio", "_expanded": true, "properties": { "cid": "radio3", "label": "item 3" } } ] }, { "_icon": "button", "text": "getValueBtn", "cls": "Wb.Button", "properties": { "cid": "getValueBtn", "text": "Get value" }, "events": { "click": "Wb.tip(app.commonRadioGroup.value);" } }, { "_icon": "button", "text": "setValueBtn", "cls": "Wb.Button", "properties": { "cid": "setValueBtn", "text": "Set value" }, "events": { "click": "app.commonRadioGroup.setValue(2);" } } ] }, { "_icon": "label", "text": "returnCidRadioGroupLabel", "cls": "Wb.Label", "properties": { "cid": "returnCidRadioGroupLabel", "text": "Return cid as value radioGroup" } }, { "_icon": "container", "text": "returnNameRadioCt", "cls": "Wb.Container", "properties": { "cid": "returnNameRadioCt", "gap": "1em", "layout": "row" }, "_expanded": true, "items": [ { "_icon": "radios", "text": "returnNameRadioGroup", "cls": "Wb.RadioGroup", "_expanded": true, "properties": { "cid": "returnNameRadioGroup", "returnName": "true" }, "items": [ { "_icon": "check2", "text": "radio1", "cls": "Wb.Radio", "properties": { "cid": "radio1", "label": "item 1", "value": "true" } }, { "_icon": "check2", "text": "radio2", "cls": "Wb.Radio", "properties": { "cid": "radio2", "label": "item 2" } }, { "_icon": "check2", "text": "radio3", "cls": "Wb.Radio", "_expanded": true, "properties": { "cid": "radio3", "label": "item 3" } } ] }, { "_icon": "button", "text": "getValueBtn", "cls": "Wb.Button", "properties": { "cid": "getValueBtn", "text": "Get value" }, "events": { "click": "Wb.tip(app.returnNameRadioGroup.value);" } }, { "_icon": "button", "text": "setValueByIndexBtn", "cls": "Wb.Button", "properties": { "cid": "setValueByIndexBtn", "text": "Set value by index" }, "events": { "click": "app.returnNameRadioGroup.setValue(2);" } }, { "_icon": "button", "text": "setValueByCidBtn", "cls": "Wb.Button", "properties": { "cid": "setValueByCidBtn", "text": "Set value by cid" }, "events": { "click": "app.returnNameRadioGroup.setValue('radio2');" } } ] } ] }, { "_icon": "title", "text": "toggleTitle", "cls": "Wb.Title", "properties": { "cid": "toggleTitle", "title": "Toggle" } }, { "_icon": "container", "text": "toggleCt", "cls": "Wb.Container", "properties": { "cid": "toggleCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "switcher-on", "text": "commonToggle", "cls": "Wb.Toggle", "properties": { "cid": "commonToggle", "text": "Common toggle" }, "events": { "change": "Wb.tip(this.cid + ' is ' + value);" } }, { "_icon": "switcher-on", "text": "prefixSuffixToggle", "cls": "Wb.Toggle", "properties": { "cid": "prefixSuffixToggle", "text": "Prefix suffix", "prefix": "Prefix text", "suffix": "Suffix text" } }, { "_icon": "switcher-on", "text": "dragToToggle", "cls": "Wb.Toggle", "properties": { "cid": "dragToToggle", "text": "Drag to toggle", "clickToggle": "false" }, "_expanded": true }, { "_icon": "switcher-on", "text": "alignRightToggle", "cls": "Wb.Toggle", "properties": { "cid": "alignRightToggle", "text": "Align right toggle", "toggleAlign": "end" } }, { "_icon": "switcher-on", "text": "verticalToggle", "cls": "Wb.Toggle", "properties": { "cid": "verticalToggle", "text": "Vertical toggle", "vertical": "true" } }, { "_icon": "model", "text": "returnIntCt", "cls": "Wb.ControlCt", "properties": { "cid": "returnIntCt", "gap": "1em", "text": "Return int value" }, "_expanded": true, "items": [ { "_icon": "switcher-on", "text": "returnIntToggle", "cls": "Wb.Toggle", "properties": { "cid": "returnIntToggle", "returnType": "int" } }, { "_icon": "button", "text": "getValue", "cls": "Wb.Button", "properties": { "cid": "getValue", "text": "Get value" }, "events": { "click": "Wb.tip(this.cid + ' value is ' + this.previousSibling.value);" } } ] } ] }, { "_icon": "title", "text": "sliderTitle", "cls": "Wb.Title", "properties": { "cid": "sliderTitle", "title": "Slider" } }, { "_icon": "container", "text": "sliderCt", "cls": "Wb.Container", "properties": { "cid": "sliderCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "slidebar", "text": "commonSlider", "cls": "Wb.Slider", "properties": { "cid": "commonSlider", "text": "Common slider", "value": "30" }, "events": { "startdrag": "Wb.tip('Start drag at ' + value);", "enddrag": "Wb.tip('End drag at ' + value);" } }, { "_icon": "slidebar", "text": "multiSlider", "cls": "Wb.Slider", "properties": { "cid": "multiSlider", "text": "Multi slider", "value": "[10, 50, 80]", "suffix": "Suffix", "prefix": "Prefix" }, "events": { "enddrag": "Wb.tip('The values are ' + Wb.encode(value));" } }, { "_icon": "model", "text": "verticalSliderCt", "cls": "Wb.ControlCt", "properties": { "cid": "verticalSliderCt", "text": "Vertical slider", "layout": "row", "gap": "2em", "height": "10em", "align": "stretch" }, "_expanded": true, "items": [ { "_icon": "slidebar", "text": "verticalSlider", "cls": "Wb.Slider", "properties": { "cid": "verticalSlider", "vertical": "true", "value": "20", "text": "Text", "labelUp": "true", "labelAlign": "center", "labelSeparator": "false" }, "_expanded": true }, { "_icon": "slidebar", "text": "verticalMulSlider", "cls": "Wb.Slider", "properties": { "cid": "verticalMulSlider", "vertical": "true", "value": "[30, 70]", "prefix": "Prefix", "suffix": "Suffix", "labelUp": "true" }, "events": { "enddrag": "Wb.tip('The values are ' + Wb.encode(value));" }, "_expanded": true } ] }, { "_icon": "slidebar", "text": "justifyLeftVerticalSlider", "cls": "Wb.Slider", "properties": { "cid": "justifyLeftVerticalSlider", "vertical": "true", "justifySelf": "start", "value": "20", "text": "Justify left", "height": "6em" } }, { "_icon": "slidebar", "text": "volumeSlider", "cls": "Wb.Slider", "properties": { "cid": "volumeSlider", "text": "Volume", "suffix": "true", "maxValue": "100", "suffixWidth": "3em", "value": "50" }, "events": { "change": "Wb.toast('Volumn is ' + value);" }, "_expanded": true }, { "_icon": "slidebar", "text": "miscSlider", "cls": "Wb.Slider", "properties": { "cid": "miscSlider", "text": "Misc slider", "prefix": "100", "suffix": "500", "maxValue": "500", "step": "10", "value": "200", "minValue": "100", "tipRender": "return 'Custom render ' + value;" } }, { "_icon": "check3", "text": "areaSlider1", "cls": "Wb.AreaSlider", "properties": { "cid": "areaSlider1", "text": "Area slider", "width": "30em", "height": "10em", "value": "[20, 30]", "maxValue": "[300, 200]" }, "events": { "enddrag": "Wb.toast('The value is ' + Wb.encode(value));" } } ] } ] } ] } # example/comps/code-editor.xwl Title: code-editor ```json { "title": "", "icon": "edit", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "CodeEditor", "cls": "w-title3" } }, { "_icon": "title", "text": "jsEditorTitle", "cls": "Wb.Title", "properties": { "cid": "jsEditorTitle", "title": "JavaScript editor" } }, { "_icon": "edit", "text": "jsEditor", "cls": "Wb.CodeEditor", "properties": { "cid": "jsEditor", "value": "Cls['Wb.Button'] = class button extends Wb.mixin.Icon(Wb.Component) {\n static configs = {\n tabIndex: Wb.isTouch ? undefined : 0,\n rippleOnClick: true\n };\n /***/\n init(configs) {\n let me = this;\n super.init(configs);\n me.on('click', me.onClickEvent);\n me.mon({ [me.tapClick ? Event.tapDownName : 'click']: me.onClick, keydown: me.onKeyDown });\n }\n}", "height": "18em" } }, { "_icon": "title", "text": "sqlEditorTitle", "cls": "Wb.Title", "properties": { "cid": "sqlEditorTitle", "title": "SQL editor" } }, { "_icon": "edit", "text": "sqlEditor", "cls": "Wb.CodeEditor", "properties": { "cid": "sqlEditor", "value": "select a.field1, b.field2 from table1 a, table2 b where a.sid=b.sid\norder by a.field1", "height": "3em", "language": "sql" } }, { "_icon": "title", "text": "htmlEditorTitle", "cls": "Wb.Title", "properties": { "cid": "htmlEditorTitle", "title": "HTML editor without border" } }, { "_icon": "edit", "text": "htmlEditor", "cls": "Wb.CodeEditor", "properties": { "cid": "htmlEditor", "value": "\n\n\nhtml\n\n\n\n\n\n\n\n\n\n\n", "height": "18em", "language": "html", "wrapBorder": "false" } }, { "_icon": "label", "text": "otherLanguageLabel", "cls": "Wb.Label", "properties": { "cid": "otherLanguageLabel", "text": "For other languages, please set the language property." } } ] } ] } # example/comps/container.xwl Title: container ```json { "title": "", "icon": "container", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Containers", "cls": "w-title3" } }, { "_icon": "title", "text": "containerTitle", "cls": "Wb.Title", "properties": { "cid": "containerTitle", "title": "Container" } }, { "_icon": "container", "text": "containerCt", "cls": "Wb.Container", "properties": { "cid": "containerCt", "layout": "grid", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "container", "text": "commonCt", "cls": "Wb.Container", "properties": { "cid": "commonCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "line", "text": "descLine", "cls": "Wb.Line", "properties": { "cid": "descLine", "title": "Common Container" } }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "text" }, "_expanded": true }, { "_icon": "number-edit", "text": "number1", "cls": "Wb.Number", "properties": { "cid": "number1", "text": "Custom Label Separator", "labelSeparator": "-", "labelUp": "true" } }, { "_icon": "calendar", "text": "date1", "cls": "Wb.Date", "properties": { "cid": "date1", "text": "No Label Separator", "labelUp": "true", "labelSeparator": "false" } } ] }, { "_icon": "container", "text": "customLabelCt", "cls": "Wb.Container", "properties": { "cid": "customLabelCt", "layout": "grid1", "frame": "true", "labelUp": "true", "labelAlign": "center" }, "_expanded": true, "items": [ { "_icon": "line", "text": "descLine", "cls": "Wb.Line", "properties": { "cid": "descLine", "title": "Custom Label Align" } }, { "_icon": "text", "text": "defaultText", "cls": "Wb.Text", "properties": { "cid": "defaultText", "text": "Default to parent" }, "_expanded": true }, { "_icon": "text", "text": "leftCommonText", "cls": "Wb.Text", "properties": { "cid": "leftCommonText", "text": "Left Common", "labelAlign": "left", "labelUp": "false" }, "_expanded": true }, { "_icon": "text", "text": "rightCommonText", "cls": "Wb.Text", "properties": { "cid": "rightCommonText", "text": "Right Common", "labelAlign": "right", "labelUp": "false" }, "_expanded": true }, { "_icon": "text", "text": "leftAboveText", "cls": "Wb.Text", "properties": { "cid": "leftAboveText", "text": "Left Above", "labelAlign": "left", "labelUp": "true" }, "_expanded": true }, { "_icon": "text", "text": "rightAboveText", "cls": "Wb.Text", "properties": { "cid": "rightAboveText", "text": "Right Above", "labelAlign": "right", "labelUp": "true" }, "_expanded": true } ] } ] }, { "_icon": "title", "text": "panelTitle", "cls": "Wb.Title", "properties": { "cid": "panelTitle", "title": "Panel" } }, { "_icon": "container", "text": "panelCt", "cls": "Wb.Container", "properties": { "cid": "panelCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "panel", "text": "commonPanel", "cls": "Wb.Panel", "_expanded": true, "properties": { "cid": "commonPanel", "layout": "grid1", "html": "Common Panel" } }, { "_icon": "panel", "text": "titledPanel", "cls": "Wb.Panel", "_expanded": true, "properties": { "cid": "titledPanel", "title": "Titled Panel", "collapsible": "true", "closable": "true", "layout": "grid1", "width": "30em", "maximizable": "true", "minimizable": "true", "tagProperties": "({\n minimize() {\n Wb.tip('Do minimize');\n }\n})" }, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "text" } }, { "_icon": "number-edit", "text": "number1", "cls": "Wb.Number", "properties": { "cid": "number1", "text": "number" } }, { "_icon": "calendar", "text": "date1", "cls": "Wb.Date", "properties": { "cid": "date1", "text": "date" } } ] }, { "_icon": "panel", "text": "miscPanel", "cls": "Wb.Panel", "_expanded": true, "properties": { "cid": "miscPanel", "frame": "true", "title": "Misc Panel", "layout": "grid1", "maximizable": "true", "buttonAlign": "center", "defaults": "({ labelWidth: '5em' })", "height": "20em", "icon": "address-book", "minButtonWidth": "6em", "collapsible": "true" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "tbar" }, "text": "tbar", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "toolbar1" }, "text": "toolbar1", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "addItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "addItem", "icon": "add1", "text": "Add" } }, { "_icon": "item", "text": "delItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "delItem", "icon": "delete", "text": "Delete" } } ] }, { "_icon": "toolbar", "text": "toolbar2", "cls": "Wb.Toolbar", "properties": { "cid": "toolbar2", "fontSize": ".8em" }, "_expanded": true, "items": [ { "_icon": "label", "text": "label1", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "label1", "text": "Address:" } }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "flex": "1" } }, { "_icon": "item", "text": "playBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "playBtn", "icon": "play", "alignSelf": "stretch" } } ] } ] }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "text1" }, "_expanded": true }, { "_icon": "text", "text": "text2", "cls": "Wb.Text", "properties": { "cid": "text2", "text": "text2" } }, { "_icon": "text", "text": "text3", "cls": "Wb.Text", "properties": { "cid": "text3", "text": "text3" } }, { "_icon": "text", "text": "text4", "cls": "Wb.Text", "properties": { "cid": "text4", "text": "text4" } }, { "cls": "Wb.Array", "properties": { "cid": "buttons" }, "text": "buttons", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Button", "properties": { "cid": "okBtn", "text": "@Str.ok", "type": "primary" }, "text": "okBtn", "_expanded": true, "_icon": "button" }, { "cls": "Wb.Button", "properties": { "cid": "cancelBtn", "text": "@Str.cancel" }, "text": "cancelBtn", "_expanded": true, "_icon": "button" } ] }, { "cls": "Wb.Toolbar", "properties": { "cid": "bbar", "isProperty": "true", "justify": "end" }, "text": "bbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "menuItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "menuItem", "icon": "menu" }, "items": [ { "_icon": "menu2", "text": "menu", "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "_expanded": true, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "item1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item2", "text": "item2" } } ] } ] } ] }, { "cls": "Wb.Array", "properties": { "cid": "tools" }, "text": "tools", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Item", "properties": { "cid": "setItem", "icon": "gear", "tip": "Set" }, "text": "setItem", "_expanded": true, "_icon": "item" }, { "cls": "Wb.Item", "properties": { "cid": "printItem", "icon": "print", "tip": "Print" }, "text": "printItem", "_expanded": true, "_icon": "item" }, { "cls": "Wb.Item", "properties": { "cid": "pinItem", "icon": "pin", "tip": "Pin" }, "text": "pinItem", "_expanded": true, "_icon": "item" } ] }, { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "cls": "Wb.Item", "properties": { "cid": "setItem", "icon": "gear", "text": "Set Menu" }, "text": "setItem", "_expanded": true, "_icon": "item" }, { "cls": "Wb.Item", "properties": { "cid": "printItem", "icon": "print", "text": "Print Menu" }, "text": "printItem", "_expanded": true, "_icon": "item" } ] } ] } ] }, { "_icon": "title", "text": "treeStyleTitle", "cls": "Wb.Title", "properties": { "cid": "treeStyleTitle", "title": "Tree style panels" } }, { "_icon": "container", "text": "treeStyleCt", "cls": "Wb.Container", "properties": { "cid": "treeStyleCt", "frame": "true", "layout": "column" }, "_expanded": true, "items": [ { "_icon": "panel", "text": "panel1", "cls": "Wb.Panel", "properties": { "cid": "panel1", "layout": "grid1", "collapsible": "tree", "title": "Panel1", "textSelectable": "false" }, "_expanded": true, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1" } }, { "_icon": "text", "text": "text2", "cls": "Wb.Text", "properties": { "cid": "text2" } } ] }, { "_icon": "panel", "text": "panel2", "cls": "Wb.Panel", "properties": { "cid": "panel2", "collapsible": "tree", "height": "5em", "text": "Panel2", "title": "Panel2", "collapsed": "true", "textSelectable": "false" } }, { "_icon": "panel", "text": "panel3", "cls": "Wb.Panel", "_expanded": true, "properties": { "cid": "panel3", "collapsible": "tree", "height": "8em", "text": "Panel3", "title": "Panel3", "textSelectable": "false" } } ] }, { "_icon": "title", "text": "accordionStyleTitle", "cls": "Wb.Title", "properties": { "cid": "accordionStyleTitle", "title": "Accordion style panels" }, "_expanded": true }, { "_icon": "container", "text": "accordionStyleCt", "cls": "Wb.Container", "properties": { "cid": "accordionStyleCt", "frame": "true", "layout": "column", "height": "20em" }, "_expanded": true, "items": [ { "_icon": "panel", "text": "panel1", "cls": "Wb.Panel", "properties": { "cid": "panel1", "layout": "grid1", "collapsible": "accordion", "title": "Panel1", "textSelectable": "false", "flex": "1", "icon": "gear" }, "_expanded": true, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1" } }, { "_icon": "text", "text": "text2", "cls": "Wb.Text", "properties": { "cid": "text2" } } ] }, { "_icon": "panel", "text": "panel2", "cls": "Wb.Panel", "properties": { "cid": "panel2", "collapsible": "accordion", "text": "Panel2", "title": "Panel2", "textSelectable": "false", "flex": "1", "collapsed": "true", "icon": "excel" } }, { "_icon": "panel", "text": "panel3", "cls": "Wb.Panel", "_expanded": true, "properties": { "cid": "panel3", "collapsible": "accordion", "text": "Panel3", "title": "Panel3", "textSelectable": "false", "flex": "1", "collapsed": "true", "icon": "word" } } ] }, { "_icon": "title", "text": "plainTitlePanelBlocksTitle", "cls": "Wb.Title", "properties": { "cid": "plainTitlePanelBlocksTitle", "title": "Plain title panel blocks" } }, { "_icon": "label", "text": "plainTitlePanelBlocksLabel", "cls": "Wb.Label", "properties": { "cid": "plainTitlePanelBlocksLabel", "text": "A list of panels organized by blocks" } }, { "_icon": "container", "text": "plainTitlePanelBlocksCt", "cls": "Wb.Container", "properties": { "cid": "plainTitlePanelBlocksCt", "layout": "grid1", "frame": "true", "gap": "1em", "padding": "1em", "background": "true" }, "_expanded": true, "items": [ { "_icon": "panel", "text": "formPanel", "cls": "Wb.Panel", "properties": { "cid": "formPanel", "plainTitle": "true", "title": "Block 1 - Form panel1", "icon": "form", "layout": "grid1", "roundBorder": "true" }, "_expanded": true, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Text" } }, { "_icon": "number-edit", "text": "number1", "cls": "Wb.Number", "properties": { "cid": "number1", "text": "Number" } } ] }, { "_icon": "panel", "text": "formPanel2", "cls": "Wb.Panel", "properties": { "cid": "formPanel2", "plainTitle": "true", "title": "Block 2 - Form panel2", "icon": "word", "layout": "grid1", "roundBorder": "true" }, "_expanded": true, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Text" } }, { "_icon": "number-edit", "text": "number1", "cls": "Wb.Number", "properties": { "cid": "number1", "text": "Number" } } ] }, { "_icon": "panel", "text": "formPanel3", "cls": "Wb.Panel", "properties": { "cid": "formPanel3", "plainTitle": "true", "title": "Block 3 - Form panel3", "icon": "excel", "layout": "grid1", "roundBorder": "true" }, "_expanded": true, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Text" } }, { "_icon": "number-edit", "text": "number1", "cls": "Wb.Number", "properties": { "cid": "number1", "text": "Number" } } ] } ] }, { "_icon": "title", "text": "fieldsetTitle", "cls": "Wb.Title", "properties": { "cid": "fieldsetTitle", "title": "Fieldset" }, "_expanded": true }, { "_icon": "container", "text": "fieldsetCt", "cls": "Wb.Container", "properties": { "cid": "fieldsetCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "fieldset", "text": "comonFieldset", "cls": "Wb.Fieldset", "properties": { "cid": "comonFieldset", "title": "Common Fieldset", "layout": "grid" }, "_expanded": true, "items": [ { "_icon": "text", "text": "nameText", "cls": "Wb.Text", "properties": { "cid": "nameText", "text": "Name" } }, { "_icon": "text", "text": "addrText", "cls": "Wb.Text", "properties": { "cid": "addrText", "text": "Address" } }, { "_icon": "calendar", "text": "birthDate", "cls": "Wb.Date", "properties": { "cid": "birthDate", "text": "Birth date" } } ] }, { "_icon": "fieldset", "text": "collapsibleFieldset", "cls": "Wb.Fieldset", "properties": { "cid": "collapsibleFieldset", "title": "Collapsible Fieldset", "layout": "grid", "collapsible": "true", "icon": "id-card", "labelAlign": "left" }, "_expanded": true, "items": [ { "_icon": "text", "text": "nameText", "cls": "Wb.Text", "properties": { "cid": "nameText", "text": "Name" } }, { "_icon": "text", "text": "addrText", "cls": "Wb.Text", "properties": { "cid": "addrText", "text": "Address" } }, { "_icon": "calendar", "text": "birthDate", "cls": "Wb.Date", "properties": { "cid": "birthDate", "text": "Birth date" } } ] } ] }, { "_icon": "title", "text": "tabTitle", "cls": "Wb.Title", "properties": { "cid": "tabTitle", "title": "Tab" } }, { "_icon": "container", "text": "tabCt", "cls": "Wb.Container", "properties": { "cid": "tabCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "label", "text": "commonLabel", "cls": "Wb.Label", "properties": { "cid": "commonLabel", "text": "Common Tab" } }, { "_icon": "tab", "text": "commonTab", "cls": "Wb.Tab", "_expanded": true, "properties": { "cid": "commonTab", "height": "10em", "width": "48em" }, "items": [ { "_icon": "card", "text": "iconCard", "cls": "Wb.Card", "properties": { "cid": "iconCard", "icon": "home", "title": "Icon Card" } }, { "_icon": "card", "text": "imageIconCard", "cls": "Wb.Card", "properties": { "cid": "imageIconCard", "img": "support", "title": "Image Icon", "closable": "null" } }, { "_icon": "card", "text": "loadingCard", "cls": "Wb.Card", "properties": { "cid": "loadingCard", "icon": "loading", "title": "Loading", "spin": "true" } }, { "_icon": "card", "text": "disabledCard", "cls": "Wb.Card", "properties": { "cid": "disabledCard", "disabled": "true", "title": "Disabled", "icon": "calendar" } }, { "_icon": "card", "text": "noSortableCard", "cls": "Wb.Card", "_expanded": false, "properties": { "cid": "noSortableCard", "title": "No Sortable", "sortable": "false", "icon": "🌻" } }, { "_icon": "card", "text": "overflowedCard", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "overflowedCard", "title": "Overflowed", "tabTip": "This tab card is overflowed" } } ] }, { "_icon": "label", "text": "miscTabLabel", "cls": "Wb.Label", "properties": { "cid": "miscTabLabel", "text": "Miscellaneous Tab" }, "_expanded": true }, { "_icon": "tab", "text": "miscTab", "cls": "Wb.Tab", "_expanded": true, "properties": { "cid": "miscTab", "height": "10em", "width": "30em", "resizable": "true", "dblclickFull": "true", "shrinkTabButton": "true", "clipTabText": "true", "frame": "true" }, "items": [ { "_icon": "card", "text": "card1", "cls": "Wb.Card", "_expanded": false, "properties": { "cid": "card1", "title": "Cliped Text", "html": "Try resizing small
\nDouble click tab button", "layout": "center" } }, { "_icon": "card", "text": "card2", "cls": "Wb.Card", "_expanded": false, "properties": { "cid": "card2", "title": "Shrink Tab Button" } }, { "_icon": "card", "text": "card3", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "card3", "title": "Card3" } }, { "_icon": "card", "text": "card4", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "card4", "title": "Card4" } } ] }, { "_icon": "label", "text": "wrappedTabLabel", "cls": "Wb.Label", "properties": { "cid": "wrappedTabLabel", "text": "Wrapped Tab Buttons" }, "_expanded": true }, { "_icon": "tab", "text": "wrappedTab", "cls": "Wb.Tab", "_expanded": true, "properties": { "cid": "wrappedTab", "height": "10em", "width": "20em", "resizable": "true", "wrapTab": "true", "frame": "true" }, "items": [ { "_icon": "card", "text": "card1", "cls": "Wb.Card", "properties": { "cid": "card1", "title": "Card1" } }, { "_icon": "card", "text": "card2", "cls": "Wb.Card", "properties": { "cid": "card2", "title": "Card2" } }, { "_icon": "card", "text": "card3", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "card3", "title": "Card3" } }, { "_icon": "card", "text": "card4", "cls": "Wb.Card", "_expanded": false, "properties": { "cid": "card4", "title": "Card4" } }, { "_icon": "card", "text": "card5", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "card5", "title": "Card5" } } ] }, { "_icon": "label", "text": "bottomLabel", "cls": "Wb.Label", "properties": { "cid": "bottomLabel", "text": "Bottom Tab" } }, { "_icon": "tab", "text": "bottomTab", "cls": "Wb.Tab", "_expanded": true, "properties": { "cid": "bottomTab", "tabPosition": "bottom", "height": "10em" }, "items": [ { "_icon": "card", "text": "card1", "cls": "Wb.Card", "_expanded": false, "properties": { "cid": "card1", "title": "Card1" } }, { "_icon": "card", "text": "card2", "cls": "Wb.Card", "_expanded": false, "properties": { "cid": "card2", "title": "Card2" } }, { "_icon": "card", "text": "card3", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "card3", "title": "Card3" } } ] }, { "_icon": "label", "text": "leftLabel", "cls": "Wb.Label", "properties": { "cid": "leftLabel", "text": "Left Tab" } }, { "_icon": "tab", "text": "leftTab", "cls": "Wb.Tab", "_expanded": true, "properties": { "cid": "leftTab", "tabPosition": "left", "height": "10em" }, "items": [ { "_icon": "card", "text": "card1", "cls": "Wb.Card", "_expanded": false, "properties": { "cid": "card1", "title": "Card1" } }, { "_icon": "card", "text": "card2", "cls": "Wb.Card", "_expanded": false, "properties": { "cid": "card2", "title": "Card2" } }, { "_icon": "card", "text": "card3", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "card3", "title": "Card3" } } ] }, { "_icon": "label", "text": "rightLabel", "cls": "Wb.Label", "properties": { "cid": "rightLabel", "text": "Right Tab" } }, { "_icon": "tab", "text": "rightTab", "cls": "Wb.Tab", "_expanded": true, "properties": { "cid": "rightTab", "tabPosition": "right", "height": "10em" }, "items": [ { "_icon": "card", "text": "card1", "cls": "Wb.Card", "_expanded": false, "properties": { "cid": "card1", "title": "Card1" } }, { "_icon": "card", "text": "card2", "cls": "Wb.Card", "_expanded": false, "properties": { "cid": "card2", "title": "Card2" } }, { "_icon": "card", "text": "card3", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "card3", "title": "Card3" } } ] } ] } ] } ] } # example/comps/date.xwl Title: date ```json { "title": "", "icon": "calendar", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Date and Time", "cls": "w-title3" } }, { "_icon": "title", "text": "dateTitle", "cls": "Wb.Title", "properties": { "cid": "dateTitle", "title": "Date" } }, { "_icon": "container", "text": "dateCt", "cls": "Wb.Container", "properties": { "cid": "dateCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "calendar", "text": "commonDate", "cls": "Wb.Date", "properties": { "cid": "commonDate", "text": "Common" } }, { "_icon": "calendar", "text": "constraintDate", "cls": "Wb.Date", "_expanded": true, "properties": { "cid": "constraintDate", "text": "Constraint Value", "maxValue": "@new Date().addDay(7)", "minValue": "@new Date().addDay(-7)" } }, { "_icon": "model", "text": "dateRangeControlCt", "cls": "Wb.ControlCt", "properties": { "cid": "dateRangeControlCt", "text": "Date Range", "layout": "row", "gap": "1em" }, "_expanded": true, "items": [ { "_icon": "calendar", "text": "fromDate", "cls": "Wb.Date", "_expanded": true, "properties": { "cid": "fromDate" } }, { "_icon": "label", "text": "toLabel", "cls": "Wb.Label", "properties": { "cid": "toLabel", "text": "to" } }, { "_icon": "calendar", "text": "toDate", "cls": "Wb.Date", "_expanded": false, "properties": { "cid": "toDate", "beginDate": "fromDate", "rangeOffset": "3" } } ] } ] }, { "_icon": "title", "text": "timeTitle", "cls": "Wb.Title", "properties": { "cid": "timeTitle", "title": "Time" } }, { "_icon": "container", "text": "timeCt", "cls": "Wb.Container", "properties": { "cid": "timeCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "time", "text": "commonTime", "cls": "Wb.Time", "properties": { "cid": "commonTime", "text": "Common" } }, { "_icon": "time", "text": "localFormatTime", "cls": "Wb.Time", "properties": { "cid": "localFormatTime", "localFormat": "timeText12", "text": "Local Format", "clearButton": "true", "width": "22em" } } ] }, { "_icon": "title", "text": "dateTimeTitle", "cls": "Wb.Title", "properties": { "cid": "dateTimeTitle", "title": "Datetime" }, "_expanded": true }, { "_icon": "container", "text": "datetimeCt", "cls": "Wb.Container", "properties": { "cid": "datetimeCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "dt-picker", "text": "commonDateTime", "cls": "Wb.Datetime", "properties": { "cid": "commonDateTime", "text": "Common" } } ] }, { "_icon": "title", "text": "othersTitle", "cls": "Wb.Title", "properties": { "cid": "othersTitle", "title": "Others" }, "_expanded": true }, { "_icon": "container", "text": "othersCt", "cls": "Wb.Container", "properties": { "cid": "othersCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "month", "text": "yearMonth1", "cls": "Wb.YearMonth", "properties": { "cid": "yearMonth1", "text": "Year Month" } } ] }, { "_icon": "title", "text": "promptTitle", "cls": "Wb.Title", "properties": { "cid": "promptTitle", "title": "Display date/time prompt window through methods" }, "_expanded": true }, { "_icon": "label", "text": "tipLabel", "cls": "Wb.Label", "properties": { "cid": "tipLabel", "text": "There are different dialog representations on the desktop and touch mode." } }, { "_icon": "container", "text": "promptCt", "cls": "Wb.Container", "properties": { "cid": "promptCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "dateAutoBtn", "cls": "Wb.Button", "properties": { "cid": "dateAutoBtn", "text": "Prompt Date auto" }, "events": { "click": "// Auto select drawer or dialog base on touch or desktop\nWb.promptDate(date => Wb.tip(date.dateText), new Date(), 'Select Date');" } }, { "_icon": "button", "text": "dateDrawerBtn", "cls": "Wb.Button", "properties": { "cid": "dateDrawerBtn", "text": "Prompt Date Drawer" }, "events": { "click": "Wb.promptDate(date => Wb.tip(date.dateText), new Date(), 'Select Date', true);" } }, { "_icon": "button", "text": "dateDialogBtn", "cls": "Wb.Button", "properties": { "cid": "dateDialogBtn", "text": "Prompt Date Dialog" }, "events": { "click": "Wb.promptDate(date => Wb.tip(date.dateText), new Date(), 'Select Date', false);" } }, { "_icon": "button", "text": "timeDrawerBtn", "cls": "Wb.Button", "properties": { "cid": "timeDrawerBtn", "text": "Prompt Time Drawer" }, "events": { "click": "Wb.promptTime(date => Wb.tip(date.timeText), null, null, true);" } }, { "_icon": "button", "text": "timeDialogBtn", "cls": "Wb.Button", "properties": { "cid": "timeDialogBtn", "text": "Prompt Time Dialog" }, "events": { "click": "Wb.promptTime(date => Wb.tip(date.timeText), null, null, false);" } }, { "_icon": "button", "text": "dateTimeDrawerBtn", "cls": "Wb.Button", "properties": { "cid": "dateTimeDrawerBtn", "text": "Prompt Datetime Drawer" }, "events": { "click": "Wb.promptDateTime(date => Wb.tip(date.dateTimeText), null, null, true);" } }, { "_icon": "button", "text": "dateTimeDialogBtn", "cls": "Wb.Button", "properties": { "cid": "dateTimeDialogBtn", "text": "Prompt Datetime Dialog" }, "events": { "click": "Wb.promptDateTime(date => Wb.tip(date.dateTimeText), null, null, false);" } }, { "_icon": "button", "text": "monthDrawerBtn", "cls": "Wb.Button", "properties": { "cid": "monthDrawerBtn", "text": "Prompt Month Drawer" }, "events": { "click": "Wb.promptMonth(date => Wb.tip(date.format('y-M')), null, null, true);" } }, { "_icon": "button", "text": "monthDialogBtn", "cls": "Wb.Button", "properties": { "cid": "monthDialogBtn", "text": "Prompt Month Dialog" }, "events": { "click": "Wb.promptMonth(date => Wb.tip(date.format('y-M')), null, null, false);" } }, { "_icon": "button", "text": "preventCloseBtn", "cls": "Wb.Button", "properties": { "cid": "preventCloseBtn", "text": "Prevent Close" }, "events": { "click": "Wb.promptDate(date => {\n Wb.tip('Close prevented');\n return false;\n});" } } ] } ] } ] } # example/comps/decoration.xwl Title: decoration ```json { "title": "", "icon": "label", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Label and decorative components", "cls": "w-title3" } }, { "_icon": "title", "text": "labelTitle", "cls": "Wb.Title", "properties": { "cid": "labelTitle", "title": "Label" }, "_expanded": true }, { "_icon": "container", "text": "labelCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "labelCt", "layout": "form", "frame": "true" }, "items": [ { "_icon": "label", "text": "textLabel", "cls": "Wb.Label", "properties": { "cid": "textLabel", "text": "Text label" } }, { "_icon": "label", "text": "htmlLabel", "cls": "Wb.Label", "properties": { "cid": "htmlLabel", "html": "HTML label" } }, { "_icon": "label", "text": "linkLabel", "cls": "Wb.Label", "properties": { "cid": "linkLabel", "target": "_blank", "href": "https://www.geejing.com", "text": "Link label" } } ] }, { "_icon": "title", "text": "boxLabelTitle", "cls": "Wb.Title", "properties": { "cid": "boxLabelTitle", "title": "BoxLabel" }, "_expanded": true }, { "_icon": "container", "text": "boxLabelCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "boxLabelCt", "layout": "form", "frame": "true", "defaults": "({ width: '10em', height: '5em' })" }, "items": [ { "_icon": "box-label", "text": "centerLabel", "cls": "Wb.BoxLabel", "properties": { "cid": "centerLabel", "text": "Center", "frame": "true" } }, { "_icon": "box-label", "text": "topLeftLabel", "cls": "Wb.BoxLabel", "properties": { "cid": "topLeftLabel", "text": "Top left", "align": "topLeft", "frame": "true" } }, { "_icon": "box-label", "text": "bottomRightLabel", "cls": "Wb.BoxLabel", "properties": { "cid": "bottomRightLabel", "text": "Bottom right", "align": "bottomRight", "frame": "true" } } ] }, { "_icon": "title", "text": "decTitle", "cls": "Wb.Title", "properties": { "cid": "decTitle", "title": "Decorative components" }, "_expanded": true }, { "_icon": "container", "text": "decCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "decCt", "layout": "grid1", "frame": "true" }, "items": [ { "_icon": "title", "text": "commonTitle", "cls": "Wb.Title", "_expanded": true, "properties": { "cid": "commonTitle", "title": "Title" } }, { "_icon": "title", "text": "iconTitle", "cls": "Wb.Title", "_expanded": true, "properties": { "cid": "iconTitle", "title": "Icon title", "icon": "external-link" } }, { "_icon": "title", "text": "noLineTitle", "cls": "Wb.Title", "_expanded": true, "properties": { "cid": "noLineTitle", "title": "Title without line", "icon": "map", "line": "false" } }, { "_icon": "line", "text": "commonLine", "cls": "Wb.Line", "properties": { "cid": "commonLine" } }, { "_icon": "line", "text": "titleLine", "cls": "Wb.Line", "properties": { "cid": "titleLine", "title": "Line Title" } }, { "_icon": "line", "text": "dashedLine", "cls": "Wb.Line", "properties": { "cid": "dashedLine", "dashed": "true", "title": "Dashed Line", "dimTitle": "true" } }, { "_icon": "line", "text": "iconLine", "cls": "Wb.Line", "properties": { "cid": "iconLine", "icon": "favorite", "title": "Icon line" } }, { "_icon": "fieldset", "text": "horizontalFieldSet", "cls": "Wb.Fieldset", "properties": { "cid": "horizontalFieldSet", "title": "Horizontal split and fill", "icon": "splitter", "layout": "row" }, "_expanded": true, "items": [ { "_icon": "button", "text": "button1", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button1", "text": "Button 1" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "_expanded": true, "properties": { "cid": "divider1" } }, { "_icon": "button", "text": "button2", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button2", "text": "Button 2" } }, { "_icon": "button", "text": "button3", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button3", "text": "Button 3" } }, { "_icon": "space", "text": "space1", "cls": "Wb.Space", "_expanded": false, "properties": { "cid": "space1" } }, { "_icon": "button", "text": "button4", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button4", "text": "Button 4" } }, { "_icon": "right1", "text": "fill1", "cls": "Wb.Fill", "properties": { "cid": "fill1" } }, { "_icon": "button", "text": "button5", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button5", "text": "Button 5" } } ] }, { "_icon": "fieldset", "text": "verticalFieldSet", "cls": "Wb.Fieldset", "properties": { "cid": "verticalFieldSet", "title": "Vertical split and fill", "icon": "splitter", "layout": "column", "height": "20em", "width": "20em" }, "_expanded": true, "items": [ { "_icon": "button", "text": "button1", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button1", "text": "Button 1" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "_expanded": true, "properties": { "cid": "divider1" } }, { "_icon": "button", "text": "button2", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button2", "text": "Button 2" } }, { "_icon": "button", "text": "button3", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button3", "text": "Button 3" } }, { "_icon": "space", "text": "space1", "cls": "Wb.Space", "_expanded": false, "properties": { "cid": "space1" } }, { "_icon": "button", "text": "button4", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button4", "text": "Button 4" } }, { "_icon": "right1", "text": "fill1", "cls": "Wb.Fill", "properties": { "cid": "fill1" } }, { "_icon": "button", "text": "button5", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "button5", "text": "Button 5" } } ] } ] }, { "_icon": "title", "text": "compTitle", "cls": "Wb.Title", "properties": { "cid": "compTitle", "title": "Component" }, "_expanded": true }, { "_icon": "container", "text": "compCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "compCt", "layout": "form", "frame": "true" }, "items": [ { "_icon": "component", "text": "component1", "cls": "Wb.Component", "properties": { "cid": "component1", "height": "7em", "width": "25em", "cls": "w-key-color", "html": "Component is a \"div\" element that can show HTML or serve as a placeholder for third-party components.", "padding": "true", "border": "true", "autoScroll": "true" } }, { "_icon": "file-json", "text": "script1", "cls": "Wb.Script", "properties": { "cid": "script1", "script": "({ cname: 'component', html: '

Custom script

' })" } } ] } ] } ] } # example/comps/dual-box/sync-select.xwl Title: sync-select ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let update = [], user_id;\n\nuser_id = Wb.getBool('include') ? 'admin' : 'default';\nWb.getObject('items').forEach(item => {\n update.push({ $sid: item.sid, user_id });\n});\nWb.sync({ tableName: 'wb_staff', update });" }, "_icon": "module" } # example/comps/dual-box.xwl Title: dual-box ```json { "title": "", "icon": "dual-box", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "DualBox", "cls": "w-title3" } }, { "_icon": "title", "text": "localDataTitle", "cls": "Wb.Title", "properties": { "cid": "localDataTitle", "title": "Local data" }, "_expanded": true }, { "_icon": "label", "text": "localDataLabel", "cls": "Wb.Label", "properties": { "cid": "localDataLabel", "text": "Use local data to select" } }, { "_icon": "dual-box", "text": "localDataDualBox", "cls": "Wb.DualBox", "properties": { "cid": "localDataDualBox", "sourceData": "[\n { code: \"10001\", full_name: \"Terri Duffy\" },\n { code: \"10002\", full_name: \"Roberto Tamburello\" },\n { code: \"10003\", full_name: \"Michael Sullivan\" },\n { code: \"10004\", full_name: \"Sharon Salavaria\" },\n { code: \"10005\", full_name: \"Gail Erickson\" },\n { code: \"10006\", full_name: \"Jossef Goldberg\" }\n]", "destData": "[\n { code: \"10007\", full_name: \"Ovidiu Cracium\" },\n { code: \"10008\", full_name: \"Janice Galvin\" },\n { code: \"10009\", full_name: \"Thierry D'Hers\" }\n]", "height": "15em", "textField": "full_name", "subtextField": "code" } }, { "_icon": "button", "text": "getSelectedDataBtn", "cls": "Wb.Button", "properties": { "cid": "getSelectedDataBtn", "text": "Get Selected Data", "justifySelf": "start" }, "events": { "click": "Wb.tip('Selected: ' + Wb.encode(app.localDataDualBox.destData));" } }, { "_icon": "title", "text": "remoteDataTitle", "cls": "Wb.Title", "properties": { "cid": "remoteDataTitle", "title": "Remote data" }, "_expanded": true }, { "_icon": "label", "text": "remoteDataLabel", "cls": "Wb.Label", "properties": { "cid": "remoteDataLabel", "text": "Use remote data to select and sync selections in database" } }, { "_icon": "dual-box", "text": "remoteDataDualBox", "cls": "Wb.DualBox", "properties": { "cid": "remoteDataDualBox", "height": "15em", "sourceUrl": "demo-source?xaction=selectNoneAdminStaff", "destUrl": "demo-source?xaction=selectAdminStaff", "autoLoad": "false", "searchBar": "true" }, "events": { "ready": "let me = this;\n\nme.sourceGrid.pageSize = 10;\nme.sourceGrid.load();\nme.destGrid.pageSize = 10;\nme.destGrid.load();", "beforemove": "Wb.ajax({\n url: xpath + '/sync-select',\n params: { items, include },\n success: f => {\n this.acceptMove(); // this == app.remoteDataDualBox;\n }\n});\nreturn false;" }, "_expanded": true, "items": [ { "cls": "Wb.Grid", "properties": { "cid": "sourceGridConfigs", "isProperty": "true", "title": "User List" }, "text": "sourceGridConfigs", "_expanded": true, "_icon": "grid" }, { "cls": "Wb.Grid", "properties": { "cid": "destGridConfigs", "isProperty": "true", "title": "Admin Users" }, "text": "destGridConfigs", "_expanded": true, "_icon": "grid" } ] }, { "_icon": "title", "text": "customizeColsTitle", "cls": "Wb.Title", "properties": { "cid": "customizeColsTitle", "title": "Customize Columns" }, "_expanded": true }, { "_icon": "label", "text": "customizeColsLabel", "cls": "Wb.Label", "properties": { "cid": "customizeColsLabel", "text": "Customize grid columns" } }, { "_icon": "dual-box", "text": "customizeColsDualBox", "cls": "Wb.DualBox", "properties": { "cid": "customizeColsDualBox", "height": "15em", "sourceUrl": "demo-source?xaction=staffDict", "gridHeader": "true" }, "_expanded": true, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "rowNumCol", "rowNum": "true" }, "text": "rowNumCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "codeCol", "fieldName": "code", "text": "Code" }, "text": "codeCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "fullNameCol", "fieldName": "full_name", "text": "Full name", "width": "-1" }, "text": "fullNameCol", "_expanded": true, "_icon": "column" } ] }, { "cls": "Wb.Grid", "properties": { "cid": "sourceGridConfigs", "isProperty": "true", "pagingBar": "false" }, "text": "sourceGridConfigs", "_expanded": true, "_icon": "grid" } ] } ] } ] } # example/comps/grid.xwl Title: grid ```json { "title": "", "icon": "grid", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "description": "demo-source=example/common/demo-source.xwl" }, "_icon": "module", "_expanded": true, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "shareMenu", "isProperty": "true", "autoDestroy": "false" }, "text": "shareMenu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "Item1" }, "events": { "click": "Wb.tip('Set ' + app.popupRecord.data.full_name);" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "Item2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "text": "Item3" } } ] }, { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Grid", "cls": "w-title3" } }, { "_icon": "title", "text": "commonRemoteGridTitle", "cls": "Wb.Title", "properties": { "cid": "commonRemoteGridTitle", "title": "Common remote grid" } }, { "_icon": "grid", "text": "commonRemoteGrid", "cls": "Wb.Grid", "properties": { "cid": "commonRemoteGrid", "height": "15em", "url": "demo-source?xaction=staffAllDict", "pageSize": "10" }, "_expanded": true, "items": [ { "_icon": "pagenum", "text": "pagingBar", "cls": "Wb.PagingBar", "_expanded": true, "properties": { "cid": "pagingBar", "isProperty": "true", "showPageEdit": "false" } } ] }, { "_icon": "title", "text": "miscGridTitle", "cls": "Wb.Title", "properties": { "cid": "miscGridTitle", "title": "Miscillaneous grid" }, "_expanded": true }, { "_icon": "grid", "text": "miscGrid", "cls": "Wb.Grid", "properties": { "cid": "miscGrid", "height": "20em", "localData": "[\n { _icon: \"user1\", code: \"10001\", full_name: \"Terri Duffy\", gender: \"Female\", birth_date: \"2002-07-01\".dateValue, salary: 28743, checked: 1, email: \"terri0@geejing.com\" },\n { _icon: \"user\", code: \"10002\", full_name: \"Roberto Tamburello\", gender: \"Male\", birth_date: \"1986-12-13\".dateValue, salary: 16453, checked: 0, email: \"roberto0@geejing.com\" },\n { _icon: \"user\", code: \"10003\", full_name: \"Michael Sullivan\", gender: \"Male\", birth_date: \"1991-07-17\".dateValue, salary: 32893, checked: 1, email: \"michael8@geejing.com\" },\n { _icon: \"user1\", code: \"10004\", full_name: \"Sharon Salavaria\", gender: \"Female\", birth_date: \"1973-06-03\".dateValue, salary: 63237, checked: 0, email: \"sharon0@geejing.com\" },\n { _icon: \"user1\", code: \"10005\", full_name: \"Gail Erickson\", gender: \"Female\", birth_date: \"1964-10-29\".dateValue, salary: 63219.5, checked: 1, email: \"gail0@geejing.com\" },\n { _icon: \"user\", code: \"10006\", full_name: \"Jossef Goldberg\", gender: \"Male\", birth_date: \"1971-04-11\".dateValue, salary: 23130, checked: 0, email: \"jossef0@geejing.com\" },\n { _icon: \"user\", code: \"10007\", full_name: \"Ovidiu Cracium\", gender: \"Male\", birth_date: \"1990-02-18\".dateValue, salary: 83231, checked: 0, email: \"ovidiu0@geejing.com\" },\n { _icon: \"user1\", code: \"10008\", full_name: \"Janice Galvin\", gender: \"Female\", birth_date: \"2001-06-29\".dateValue, salary: 152310, checked: 0, email: \"janice0@geejing.com\" },\n { _icon: \"user\", code: \"10009\", full_name: \"Thierry D'Hers\", gender: \"Male\", birth_date: \"1971-08-29\".dateValue, salary: 2383, checked: 1, email: \"thierry0@geejing.com\" },\n { _icon: \"user\", code: \"10010\", subtext: 'Sub text', full_name: \"Brian Welcker\", gender: \"Male\", birth_date: \"1989-07-08\".dateValue, salary: 98313, checked: 1, email: \"brian3@geejing.com\" },\n { _icon: \"user\", code: \"10011\", full_name: \"Stephen Jiang\", gender: \"Male\", birth_date: \"1963-11-17\".dateValue, salary: 53231, checked: 0, email: \"stephen0@geejing.com\" },\n { _icon: \"user\", code: \"10012\", full_name: \"Syed Abbas\", gender: \"Male\", birth_date: \"1987-02-11\".dateValue, salary: 38925.8, checked: 1, _disabled: true, email: \"syed0@geejing.com\" }\n]", "pageSize": "10", "showIcon": "true", "sorters": "full_name", "columnsSortable": "true", "resizable": "true", "stateId": "wb.miscGrid", "frame": "true", "captureClass": "@'.w-btn' /* prevent select and focus row when click row buttons */", "exportFilename": "staff-list", "exportTitle": "Staff List" }, "_expanded": true, "events": { "itemdblclick": "Wb.tip(item.data.full_name + ' row double clicked');", "click": "let link = e.target.closest('.my-link');\nif (link) {\n let row = this.findItemByEl(link);\n Wb.tip(link.textContent + ' clicked at ' + row.data.full_name);\n}", "beforesort": "// Customize local sort\n// data.sort((a, b) => Wb.mixCompare(a.full_name, b.full_name));\n// return false;" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": false, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "rowNumCol", "rowNum": "true", "freeze": "true" }, "text": "rowNumCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "codeCol", "text": "Code", "width": "8em", "fieldName": "code", "freeze": "true", "summaryRender": "return 'Total:';" }, "text": "codeCol", "_expanded": true, "_icon": "column" }, { "_icon": "column", "text": "personalCol", "cls": "Wb.Column", "properties": { "cid": "personalCol", "text": "Personal" }, "_expanded": true, "items": [ { "_icon": "column", "text": "commonCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "commonCol", "text": "Common" }, "items": [ { "cls": "Wb.Column", "properties": { "cid": "fullNameCol", "width": "-1", "fieldName": "full_name", "autoWrap": "normal", "titleAlign": "center", "titleAutoWrap": "normal", "html": "Full name", "align": "center", "summary": "count", "summaryRender": "return value + ' P';", "render": "el.setStyle('background', 'linear-gradient(to right, rgb(142 36 159) ' + (data.salary / 1800) + '%, rgb(85, 85, 85) 0%)', 'important');\nel.setStyle('color', '#fff');\nreturn value;" }, "text": "fullNameCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "genderCol", "text": "Gender", "width": "8em", "fieldName": "gender", "render": "let div = el.addEl('w-center').addEl('w-ta-center');\n\ndiv.style = `color:#fff;width:5em;background:${value == 'Male' ? '#ff5d8d' : '#095c09'}`;\ndiv.textContent = value;" }, "text": "genderCol", "_expanded": true, "_icon": "column" } ] }, { "cls": "Wb.Column", "properties": { "cid": "birthDateCol", "text": "Birth_date", "width": "12em", "fieldName": "birth_date", "render": "if (value < '1974-1-1'.dateValue) {\n // if (value < '1974-1-1'.dateValue) {\n // let div = el.parentNode;\n\n // //tip: Setting important classes or styles for elements has higher css priority and can override the default background/color\n // //Setting td classes/styles will override all default background/color\n // if (value < '1968-1-1'.dateValue) {\n // div.setStyle('background', '#1890ff');\n // } else {\n // div.setStyle('background', '#f90');\n // }\n // div.setStyle('color', 'white');\n // value = value + ' *';\n // }\n //w-succ-bgcolor-row, w-error-bgcolor-row etc\n el.parentNode.cls = value < '1968-1-1'.dateValue ? 'w-succ-bgcolor-row' : 'w-warn-bgcolor-row';\n value += ' *';\n};\n\n//add icon manually\nel.insertCellIcon('time', value);\n//el.insertCellImage('wb/images/sound.png');" }, "text": "birthDateCol", "_expanded": true, "_icon": "column" } ] }, { "cls": "Wb.Column", "properties": { "cid": "salaryCol", "text": "Salary", "fieldName": "salary", "titleAlign": "right", "type": "usd", "summary": "sum", "summaryRender": "let ct = data.full_name;// full_name column summary is \"count\"\nif (ct == null)\n return ''; // full_name column is hidden\nelse\n return 'Avg: ' + column.formatValue(value / ct);", "align": "right" }, "text": "salaryCol", "_expanded": true, "_icon": "column" }, { "_icon": "column", "text": "checkCol1", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "checkCol1", "checkBox": "int", "fieldName": "checked", "checkRefresh": "true", "menuText": "Check" } }, { "_icon": "column", "text": "checkCol2", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "checkCol2", "checkBox": "roTrue", "fieldName": "checked" } }, { "_icon": "column", "text": "checkCol3", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "checkCol3", "checkBox": "roAll", "fieldName": "checked" } }, { "_icon": "column", "text": "toggleCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "toggleCol", "render": "let row = this;\nvalue = row.data.checked;\nrow.addFooter({\n cname: 'toggle', returnType: 'int', value, toggleAlign: 'center', clickToggle: true,\n events: {\n change(value) {\n // If there is no need to synchronously update other fields, this is more efficient\n // row.data.checked = value; // only update checked field value\n row.set('checked', value); // update whole row\n app.checkCol1.syncHeaderCheck(); // manual sync header check of checkCol1\n }\n }\n}, el);", "width": "5em", "text": "Toggle" } }, { "_icon": "column", "text": "linkCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "linkCol", "render": "let a = el.addEl('my-link', 'a');\nel.cls = 'w-ta-center';\na.textContent = 'Download';\n// a.onclick = f => Wb.tip(data.full_name); // not recommended\n// miscGrid.click mon the link click event // recommended", "width": "8em", "text": "Link" } }, { "_icon": "column", "text": "actionsCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "actionsCol", "text": "Actions", "width": "8em", "freeze": "true" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "buttons" }, "text": "buttons", "_expanded": true, "_icon": "array", "items": [ { "_icon": "item", "text": "setItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "setItem", "icon": "gear", "tip": "Set" }, "events": { "click": "Wb.tip('Set ' + this.data.code + ', ' + this.gridItem.data.code);" } }, { "_icon": "item", "text": "shareItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "shareItem", "icon": "share2", "tip": "Add" }, "events": { "click": "Wb.tip('Share ' + this.data.code);" } }, { "_icon": "item", "text": "menuItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "menuItem", "icon": "menu" }, "events": { "click": "app.popupRecord = this.parent.parent;\n//app.popupRecord = app.miscGrid.selection; // same as above\n//app.popupRecord = this.el.getClosestComp(Wb.ViewItem); // same as above\napp.shareMenu.showBy(this);" } } ] } ] } ] }, { "cls": "Wb.Menu", "properties": { "cid": "contextMenu", "isProperty": "true" }, "text": "contextMenu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "showRowColumnItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "showRowColumnItem", "icon": "grid", "text": "Show row column" }, "events": { "click": "let el, row, col;\n\nel = this.contextTarget; // clicked element\nrow = app.miscGrid.findItemByEl(el); // same as app.miscGrid.selection\ncol = app.miscGrid.findColumnByEl(el);\nif (row && col)\n Wb.tip('Row code is ' + row.data.code + ' and column field name is ' + col.fieldName);" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "Other item" } } ] } ] }, { "_icon": "container", "text": "container1", "cls": "Wb.Container", "properties": { "cid": "container1", "layout": "form", "padding": "false" }, "_expanded": true, "items": [ { "_icon": "button", "text": "testfrozenBtn", "cls": "Wb.Button", "properties": { "cid": "testfrozenBtn", "text": "Test frozen columns" }, "events": { "click": "app.fullNameCol.width = app.miscGrid.width;\nWb.toast('Now please scroll horizontally to test the left and right frozen columns.')" } }, { "_icon": "button", "text": "sortDataBtn", "cls": "Wb.Button", "properties": { "cid": "sortDataBtn", "text": "Sort Data" }, "events": { "click": "app.miscGrid.sort({ name: 'code', desc: true });" } }, { "_icon": "button", "text": "sortItemsBtn", "cls": "Wb.Button", "properties": { "cid": "sortItemsBtn", "text": "Sort Items" }, "events": { "click": "// Sort view items only\napp.miscGrid.sortItems((a, b) => Wb.mixCompare(a.data.code, b.data.code));" } } ] }, { "_icon": "component", "text": "miscDescComp", "cls": "Wb.Component", "properties": { "cid": "miscDescComp", "html": "

Feature List:

Columns sortable, resizable, draggable and freezable.
Arbitrary multi-Level Headers.
Customize cell rendering.
Rows and columns highlighing.
Local data pagination.
Bind buttons or any controls to cells.
Multiple styles of check columns.
Customize columns and persistence to the database.
Summary row.

", "textSelectable": "false" } }, { "_icon": "title", "text": "editableGridTitle", "cls": "Wb.Title", "properties": { "cid": "editableGridTitle", "title": "Editable grid" } }, { "_icon": "grid", "text": "editableGrid", "cls": "Wb.Grid", "properties": { "cid": "editableGrid", "height": "15em", "url": "demo-source?xaction=staffAllDict", "columnsSortable": "true", "sorters": "[{name: 'gender', desc: true}, 'salary']", "editable": "true", "multiSelect": "true", "pageSize": "10", "arrowDownAppend": "true", "enterAppend": "true", "enterAsTab": "true", "frame": "true" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "addBtn", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "addBtn", "text": "@Str.add", "icon": "add", "keys": "Ctrl+E" }, "events": { "click": "//Some related methods: grid.add()/grid.addData()/grid.insert()/grid.insertData()/grid.insertXXX()/grid.insertDataXXX() etc.\napp.editableGrid.addRecord();" } }, { "_icon": "item", "text": "editBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "editBtn", "text": "@Str.edit", "icon": "edit", "keys": "Ctrl+J" }, "events": { "click": "let firstRec = app.editableGrid.firstItem;\nif (firstRec) {\n firstRec.set({ code: 'code', full_name: 'new name' });\n app.editableGrid.startEdit(firstRec, 'code');\n firstRec.highlight();\n}" } }, { "_icon": "item", "text": "delBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "delBtn", "text": "@Str.del", "icon": "delete", "keys": "Ctrl+D" }, "events": { "click": "//Some related methods: grid.destroySelection()/item.destroy()/Wb.destroy(items);\napp.editableGrid.delRecords();" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "saveBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "saveBtn", "text": "@Str.save", "icon": "save", "keys": "Ctrl+S" }, "events": { "click": "app.editableGrid.sync({\n url: xpath, //Should be changed to a valid URL\n success() {\n Wb.tipDone(Str.save);\n }\n});" } } ] } ] }, { "_icon": "title", "text": "dbPaginationTitle", "cls": "Wb.Title", "properties": { "cid": "dbPaginationTitle", "title": "Database side pagination" } }, { "_icon": "label", "text": "dbPaginationLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "dbPaginationLabel", "text": "This example demonstrates database side pagination." } }, { "_icon": "grid", "text": "dbPaginationGrid", "cls": "Wb.Grid", "properties": { "cid": "dbPaginationGrid", "height": "15em", "url": "demo-source?xaction=staffDbPaging", "pageSize": "10", "pagingBar": "pageNums" }, "_expanded": true }, { "_icon": "title", "text": "noPagingTitle", "cls": "Wb.Title", "properties": { "cid": "noPagingTitle", "title": "No pagination" } }, { "_icon": "grid", "text": "noPagingGrid", "cls": "Wb.Grid", "properties": { "cid": "noPagingGrid", "height": "15em", "url": "demo-source?xaction=staffAllDict", "pageSize": "-1" }, "_expanded": true }, { "_icon": "title", "text": "mergeTitle", "cls": "Wb.Title", "properties": { "cid": "mergeTitle", "title": "Merge rows and columns" } }, { "_icon": "label", "text": "mergeLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "mergeLabel", "text": "Merge f1 rows and merge f1, f2 columns, see f1Col and f2Col properties." } }, { "_icon": "grid", "text": "mergeGrid", "cls": "Wb.Grid", "properties": { "cid": "mergeGrid", "url": "demo-source?xaction=selectReport1" }, "_expanded": true, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "rowCol", "rowNum": "true" }, "text": "rowCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "f1Col", "text": "f1", "fieldName": "f1", "mergeRows": "true", "mergeColsGroup": "mergeTotal", "autoWrap": "normal", "width": "12em" }, "text": "f1Col", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "f2Col", "text": "f2", "fieldName": "f2", "mergeColsGroup": "mergeTotal", "width": "14em" }, "text": "f2Col", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "f3Col", "text": "f3", "fieldName": "f3" }, "text": "f3Col", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "f4Col", "text": "f4", "fieldName": "f4" }, "text": "f4Col", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "f5Col", "text": "f5", "fieldName": "f5" }, "text": "f5Col", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "f6Col", "text": "f6", "fieldName": "f6" }, "text": "f6Col", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "f7Col", "text": "f7", "fieldName": "f7" }, "text": "f7Col", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "f8Col", "text": "f8", "fieldName": "f8" }, "text": "f8Col", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "f9Col", "text": "f9", "fieldName": "f9" }, "text": "f9Col", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "f10Col", "text": "f10", "fieldName": "f10" }, "text": "f10Col", "_expanded": true, "_icon": "column" } ] } ] }, { "_icon": "title", "text": "dragDropTitle", "cls": "Wb.Title", "properties": { "cid": "dragDropTitle", "title": "Drag-drop rows" } }, { "_icon": "grid", "text": "dragDropGrid", "cls": "Wb.Grid", "properties": { "cid": "dragDropGrid", "height": "30em", "url": "demo-source?xaction=staffAllDict", "pageSize": "10", "draggable": "true", "droppable": "demo.dragDropGrid", "multiSelect": "true" }, "_expanded": true, "events": { "itemdrop": "let n = draggable.source.length;\nWb.tip(draggable.source.length + ' ' + (n > 1 ? 'items' : 'item') + ' dropped.');", "itemdrag": "if (draggable.source.some(row => row.data.code == '10009') || draggable.dest.data.code == '10001') {\n //Do not allow to drop when the source record code contains 10009 or dest record code is 10001\n draggable.allowDrop = false;\n}" } }, { "_icon": "title", "text": "propertyGridTitle", "cls": "Wb.Title", "properties": { "cid": "propertyGridTitle", "title": "Property grid" }, "_expanded": true }, { "_icon": "grid", "text": "propertyGrid", "cls": "Wb.Grid", "properties": { "cid": "propertyGrid", "localData": "[\n { name: 'String', value: 'abc' },\n { name: 'Integer', value: 123 },\n { name: 'Float', value: 456.78 },\n { name: 'Date', value: new Date().datePart },\n { name: 'Boolean', value: true },\n]", "frame": "true", "editable": "true", "pagingBar": "false" }, "_expanded": true, "events": { "beforeedit": "if (column.fieldName == 'value') {\n app.editors ??= {\n String: new Wb.Text(),\n Integer: new Wb.Number({ decimalCount: 0 }),\n Float: new Wb.Number(),\n Date: new Wb.Date(),\n Boolean: new Wb.BoolSelect()\n };\n column.editor = app.editors[row.data.name] ?? app.editors.String;\n}" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "nameCol", "text": "Name", "fieldName": "name", "render": "el.addCls('w-fixed-cell');\nreturn value;" }, "text": "nameCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "valueCol", "text": "Value", "width": "-1", "fieldName": "value", "align": "left" }, "text": "valueCol", "_expanded": true, "_icon": "column" } ] } ] } ] } ] } # example/comps/html-editor.xwl Title: html-editor ```json { "title": "", "icon": "file-html", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "fit" }, "_expanded": true, "items": [ { "_icon": "file-html", "text": "htmlEditor1", "cls": "Wb.HtmlEditor", "properties": { "cid": "htmlEditor1", "wrapBorder": "false", "value": "

\n Rich\n Text\n Editor\n

" } } ] } ] } # example/comps/input.xwl Title: input ```json { "title": "", "icon": "text", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Input controls", "cls": "w-title3" } }, { "_icon": "title", "text": "textTitle", "cls": "Wb.Title", "properties": { "cid": "textTitle", "title": "Text" } }, { "_icon": "container", "text": "textCt", "cls": "Wb.Container", "properties": { "cid": "textCt", "layout": "grid", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "text", "text": "commonText", "cls": "Wb.Text", "properties": { "cid": "commonText", "text": "Common", "placeholder": "placeholder" } }, { "_icon": "text", "text": "passwordText", "cls": "Wb.Text", "properties": { "cid": "passwordText", "text": "Password", "eyeButton": "true", "password": "true", "icon": "lock" } }, { "_icon": "text", "text": "clearText", "cls": "Wb.Text", "properties": { "cid": "clearText", "text": "With Clear", "clearButton": "true" } }, { "_icon": "text", "text": "hintText", "cls": "Wb.Text", "properties": { "cid": "hintText", "hint": "Please enter your name", "text": "Input Hint" } }, { "_icon": "text", "text": "alignText", "cls": "Wb.Text", "_expanded": false, "properties": { "cid": "alignText", "text": "Left Align Text", "labelAlign": "left" } }, { "_icon": "text", "text": "prefixSuffixText", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "prefixSuffixText", "prefix": "$", "suffix": "%", "text": "Prefix Suffix" } }, { "_icon": "text", "text": "readonlyText", "cls": "Wb.Text", "_expanded": false, "properties": { "cid": "readonlyText", "readonly": "true", "text": "Readonly" } }, { "_icon": "text", "text": "disabledText", "cls": "Wb.Text", "_expanded": false, "properties": { "cid": "disabledText", "disabled": "true", "text": "Disabled" } }, { "_icon": "text", "text": "emptyLabelText", "cls": "Wb.Text", "properties": { "cid": "emptyLabelText", "showEmptyLabel": "true", "placeholder": "empty label" } }, { "_icon": "text", "text": "loadingText", "cls": "Wb.Text", "properties": { "cid": "loadingText", "spin": "true", "icon": "loading1", "text": "Loading" } }, { "_icon": "text", "text": "flatText", "cls": "Wb.Text", "properties": { "cid": "flatText", "text": "Flat", "flat": "true", "inactiveBorder": "true" }, "_expanded": true }, { "_icon": "label1", "text": "displayField1", "cls": "Wb.DisplayField", "properties": { "cid": "displayField1", "value": "Display value", "icon": "info", "showEmptyLabel": "true" } }, { "_icon": "label1", "text": "displayField2", "cls": "Wb.DisplayField", "properties": { "cid": "displayField2", "value": "No label", "icon": "info" } }, { "_icon": "text", "text": "iconLabelText", "cls": "Wb.Text", "properties": { "cid": "iconLabelText", "labelIcon": "book1", "text": "Icon label", "labelAlign": "left", "labelSeparator": "false" } }, { "_icon": "right1", "text": "fill1", "cls": "Wb.Fill", "_expanded": true, "properties": { "cid": "fill1" } }, { "_icon": "text", "text": "upLabelText", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "upLabelText", "labelUp": "true", "text": "The label is above the input box" } } ] }, { "_icon": "title", "text": "numberTitle", "cls": "Wb.Title", "properties": { "cid": "numberTitle", "title": "Number" }, "_expanded": true }, { "_icon": "container", "text": "numberCt", "cls": "Wb.Container", "properties": { "cid": "numberCt", "layout": "grid", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "number-edit", "text": "commonNumber", "cls": "Wb.Number", "properties": { "cid": "commonNumber", "text": "Common Number" } }, { "_icon": "number-edit", "text": "upDownNumber", "cls": "Wb.Number", "properties": { "cid": "upDownNumber", "text": "Up Down", "spinner": "upDown" }, "_expanded": true }, { "_icon": "number-edit", "text": "leftRightNumber", "cls": "Wb.Number", "properties": { "cid": "leftRightNumber", "text": "Left Right", "spinner": "leftRight" } }, { "_icon": "number-edit", "text": "beforeAfterNumber", "cls": "Wb.Number", "properties": { "cid": "beforeAfterNumber", "text": "Before After", "spinner": "beforeAfter" } }, { "_icon": "number-edit", "text": "noSpinnerNumber", "cls": "Wb.Number", "properties": { "cid": "noSpinnerNumber", "text": "No Spinner", "spinner": "false", "numberInput": "true /* Show number keyboard in phone */" } }, { "_icon": "number-edit", "text": "step5Number", "cls": "Wb.Number", "properties": { "cid": "step5Number", "text": "Step 5", "step": "5" } }, { "_icon": "number-edit", "text": "dicimal3Number", "cls": "Wb.Number", "properties": { "cid": "dicimal3Number", "text": "Max 3 Dicimals", "decimalCount": "3" }, "_expanded": true }, { "_icon": "number-edit", "text": "autoFormatNumber", "cls": "Wb.Number", "properties": { "cid": "autoFormatNumber", "text": "Auto Format", "decimalCount": "2", "prefix": "$", "suffix": "%", "autoFormat": "true", "value": "1234.567" }, "_expanded": true }, { "_icon": "number-edit", "text": "constrainNumber", "cls": "Wb.Number", "properties": { "cid": "constrainNumber", "text": "10 - 20", "minValue": "10", "maxValue": "20" } } ] }, { "_icon": "title", "text": "textAreaTitle", "cls": "Wb.Title", "properties": { "cid": "textAreaTitle", "title": "Text Area" }, "_expanded": true }, { "_icon": "container", "text": "textAreaCt", "cls": "Wb.Container", "properties": { "cid": "textAreaCt", "layout": "grid", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "textarea", "text": "commonTextArea", "cls": "Wb.TextArea", "properties": { "cid": "commonTextArea", "text": "Common TextArea" }, "_expanded": true }, { "_icon": "textarea", "text": "noWrapTextArea", "cls": "Wb.TextArea", "properties": { "cid": "noWrapTextArea", "text": "No Wrap", "value": "WebBuilder is a powerful rapid application development and runtime platform", "noWrap": "true" }, "_expanded": true }, { "_icon": "textarea", "text": "overflowTextArea", "cls": "Wb.TextArea", "properties": { "cid": "overflowTextArea", "text": "Now The Text Label Overflowed" }, "_expanded": true }, { "_icon": "line", "text": "line1", "cls": "Wb.Line", "properties": { "cid": "line1" } }, { "_icon": "textarea", "text": "autoResizeTextArea", "cls": "Wb.TextArea", "properties": { "cid": "autoResizeTextArea", "text": "Auto Resize", "autoResize": "true", "rows": "1", "value": "Auto resize to fit content height", "maxHeight": "10em" }, "_expanded": true } ] }, { "_icon": "title", "text": "fileInputTitle", "cls": "Wb.Title", "properties": { "cid": "fileInputTitle", "title": "File Input" }, "_expanded": true }, { "_icon": "label", "text": "fileInputLabel", "cls": "Wb.Label", "properties": { "cid": "fileInputLabel", "text": "You can drag and drop files from the operating system shell to the file control." } }, { "_icon": "container", "text": "fileInputCt", "cls": "Wb.Container", "properties": { "cid": "fileInputCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "search-file", "text": "commonFileInput", "cls": "Wb.FileInput", "properties": { "cid": "commonFileInput", "text": "Common" } }, { "_icon": "search-file", "text": "multipleFileInput", "cls": "Wb.FileInput", "properties": { "cid": "multipleFileInput", "text": "Multiple", "multiple": "true" } }, { "_icon": "search-file", "text": "browseFileInput", "cls": "Wb.FileInput", "properties": { "cid": "browseFileInput", "browseMode": "true", "text": "Browse file", "multiple": "true" } }, { "_icon": "search-file", "text": "virtualFilesFileInput", "cls": "Wb.FileInput", "properties": { "cid": "virtualFilesFileInput", "text": "Virtual Files", "multiple": "true", "value": "[{name: 'file1.xlsx', size: 8958}, {name:' file2.png', size: 32842}]" } } ] }, { "_icon": "title", "text": "validationTitle", "cls": "Wb.Title", "properties": { "cid": "validationTitle", "title": "Validation value" }, "_expanded": true }, { "_icon": "container", "text": "validationCt", "cls": "Wb.Container", "properties": { "cid": "validationCt", "layout": "grid", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "text", "text": "requiredText1", "cls": "Wb.Text", "properties": { "cid": "requiredText1", "text": "Required1", "required": "true" } }, { "_icon": "text", "text": "requiredText2", "cls": "Wb.Text", "properties": { "cid": "requiredText2", "text": "Required2", "required": "true", "sideErrorTip": "true" } }, { "_icon": "text", "text": "lengthText", "cls": "Wb.Text", "properties": { "cid": "lengthText", "text": "Limit Length", "minLength": "3", "maxLength": "9" } }, { "_icon": "text", "text": "alphaNumText", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "alphaNumText", "valueType": "alphaNum", "text": "Alpha num" } }, { "_icon": "text", "text": "emailText", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "emailText", "valueType": "email", "text": "Email" } }, { "_icon": "text", "text": "urlText", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "urlText", "valueType": "url", "text": "URL" } }, { "_icon": "text", "text": "regExpText", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "regExpText", "text": "Regular Exp", "regexText": "Please enter at least 5 digits", "placeholder": "enter 5 digits", "regex": "/\\d{5}$/" } }, { "_icon": "text", "text": "customValidateText", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "customValidateText", "validator": "if (value != 'good')\n return 'Please enter \"good\"';", "text": "Custom Validation" } }, { "_icon": "text", "text": "remoteValidateText", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "remoteValidateText", "validator": "let editor = this;\n\nWb.ajax({\n url: 'demo-source?xaction=checkUser',\n params: { username: value },\n mask: false,\n callback(resp, xhr) {\n editor.removeError();\n if (resp == 'failed' || !xhr.ok)\n editor.addError(Str.alreadyExists.format(value));\n }\n});", "text": "Remote Validation", "placeholder": "user name" } } ] }, { "_icon": "title", "text": "sizeTitle", "cls": "Wb.Title", "properties": { "cid": "sizeTitle", "title": "Input size" } }, { "_icon": "label", "text": "sizeLabel", "cls": "Wb.Label", "properties": { "cid": "sizeLabel", "text": "Set the \"fontSize\" property to set input size" }, "_expanded": true }, { "_icon": "container", "text": "sizeCt", "cls": "Wb.Container", "properties": { "cid": "sizeCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "text", "fontSize": ".8em" } }, { "_icon": "number-edit", "text": "number1", "cls": "Wb.Number", "properties": { "cid": "number1", "text": "number", "fontSize": "1.2em" } }, { "_icon": "combo", "text": "select1", "cls": "Wb.Select", "properties": { "cid": "select1", "text": "select", "fontSize": "1.4em", "data": "['item1', 'item2', 'item3']" } } ] } ] } ] } # example/comps/misc-comps.xwl Title: misc-comps ```json { "title": "", "icon": "list1", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Miscellaneous comps", "cls": "w-title3" } }, { "_icon": "title", "text": "controlCtTitle", "cls": "Wb.Title", "properties": { "cid": "controlCtTitle", "title": "ControlCt" } }, { "_icon": "label", "text": "controlCtLabel", "cls": "Wb.Label", "properties": { "cid": "controlCtLabel", "text": "Control container, like a control with a label, can also add child controls." }, "_expanded": true }, { "_icon": "container", "text": "controlCtCt", "cls": "Wb.Container", "properties": { "cid": "controlCtCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "model", "text": "controlCt", "cls": "Wb.ControlCt", "properties": { "cid": "controlCt", "text": "Container label", "layout": "form" }, "_expanded": true, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1" }, "_expanded": true }, { "_icon": "label", "text": "label1", "cls": "Wb.Label", "properties": { "cid": "label1", "text": "Label" } }, { "_icon": "button", "text": "button1", "cls": "Wb.Button", "properties": { "cid": "button1", "text": "Button" }, "_expanded": true } ] }, { "_icon": "text", "text": "controlCtAlignText", "cls": "Wb.Text", "properties": { "cid": "controlCtAlignText", "text": "Other control" } } ] }, { "_icon": "title", "text": "scrolledCtTitle", "cls": "Wb.Title", "properties": { "cid": "scrolledCtTitle", "title": "ScrolledCt" } }, { "_icon": "label", "text": "scrolledCtLabel", "cls": "Wb.Label", "properties": { "cid": "scrolledCtLabel", "text": "Scrolled container can automatically scroll without scrollbar." }, "_expanded": true }, { "_icon": "container", "text": "scrolledCtCt", "cls": "Wb.Container", "properties": { "cid": "scrolledCtCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "position", "text": "scrolledCt", "cls": "Wb.ScrolledCt", "properties": { "cid": "scrolledCt", "layout": "row", "width": "30em", "gap": "true", "padding": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "button1", "cls": "Wb.Button", "properties": { "cid": "button1", "text": "Button1" } }, { "_icon": "button", "text": "button2", "cls": "Wb.Button", "properties": { "cid": "button2", "text": "Button2" } }, { "_icon": "button", "text": "button3", "cls": "Wb.Button", "properties": { "cid": "button3", "text": "Button3" } }, { "_icon": "button", "text": "button4", "cls": "Wb.Button", "properties": { "cid": "button4", "text": "Button4" } }, { "_icon": "button", "text": "button5", "cls": "Wb.Button", "properties": { "cid": "button5", "text": "Button5" } }, { "_icon": "button", "text": "button6", "cls": "Wb.Button", "properties": { "cid": "button6", "text": "Button6" } } ] } ] }, { "_icon": "title", "text": "carouselTitle", "cls": "Wb.Title", "properties": { "cid": "carouselTitle", "title": "Carousel" } }, { "_icon": "label", "text": "carouselLabel", "cls": "Wb.Label", "properties": { "cid": "carouselLabel", "text": "Automatic carousel play container." }, "_expanded": true }, { "_icon": "container", "text": "carouselCt", "cls": "Wb.Container", "properties": { "cid": "carouselCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "play1", "text": "carousel1", "cls": "Wb.Carousel", "properties": { "cid": "carousel1", "frame": "true", "height": "8em", "interval": "2000" }, "_expanded": true, "items": [ { "_icon": "component", "text": "component1", "cls": "Wb.Component", "properties": { "cid": "component1", "background": "#f88", "cls": "w-center", "text": "Comp1", "style": "color:#fff" } }, { "_icon": "component", "text": "component2", "cls": "Wb.Component", "properties": { "cid": "component2", "background": "#8f8", "cls": "w-center", "text": "Comp2", "style": "color:#000" } }, { "_icon": "component", "text": "component3", "cls": "Wb.Component", "properties": { "cid": "component3", "background": "#ababf7", "cls": "w-center", "text": "Comp3", "style": "color:#fff" } }, { "_icon": "component", "text": "component4", "cls": "Wb.Component", "properties": { "cid": "component4", "background": "#3bdbd9", "cls": "w-center", "text": "Comp4", "style": "color:#fff" } } ] } ] }, { "_icon": "title", "text": "progressBarTitle", "cls": "Wb.Title", "properties": { "cid": "progressBarTitle", "title": "ProgressBar" } }, { "_icon": "label", "text": "progressBarLabel", "cls": "Wb.Label", "properties": { "cid": "progressBarLabel", "text": "Display progress through graphics and text." }, "_expanded": true }, { "_icon": "container", "text": "progressBarCt", "cls": "Wb.Container", "properties": { "cid": "progressBarCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "progress", "text": "progressBar1", "cls": "Wb.ProgressBar", "properties": { "cid": "progressBar1", "value": "35" } }, { "_icon": "progress", "text": "progressBar2", "cls": "Wb.ProgressBar", "properties": { "cid": "progressBar2", "value": "68.5", "progressText": "Copying files" } } ] } ] } ] } # example/comps/option.xwl Title: option ```json { "title": "", "icon": "options", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "autoScroll": "true", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Option", "cls": "w-title3" } }, { "_icon": "title", "text": "commonTitle", "cls": "Wb.Title", "properties": { "cid": "commonTitle", "title": "Common Options" }, "_expanded": true }, { "_icon": "container", "text": "optionCt", "cls": "Wb.Container", "properties": { "cid": "optionCt", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "options", "text": "commonOption", "cls": "Wb.Option", "properties": { "cid": "commonOption", "text": "Common options, click show dialog", "border": "bottom", "valueText": "Value text" }, "_expanded": true, "events": { "click": "app.dialog1 ??= new Wb.Dialog({\n title: 'New dialog', border: 0, defaults: { cname: 'option' }, items: [\n { cname: 'label', text: 'Group1', indent: true, titleType: 'title5' },\n { text: 'Option1', handler() { Wb.tip('Option1 clicked') } },\n { text: 'Option2', handler() { Wb.tip('Option2 clicked') } },\n '-',\n { cname: 'label', text: 'Group2', indent: true, titleType: 'title5' },\n { text: 'Option3', editor: { cname: 'toggle' } },\n { text: 'Option4', editor: { cname: 'toggle' } },\n ]\n});\napp.dialog1.show();" } }, { "_icon": "options", "text": "checkedItemsOption", "cls": "Wb.Option", "properties": { "cid": "checkedItemsOption", "text": "Web browser", "border": "bottom", "description": "The default browser to be used", "options": "[\n { text: 'Chrome', value: 1, _icon: 'chrome' },\n { text: 'Edge', value: 2, _icon: 'edge', _selected: true },\n { text: 'Firefox', value: 3, _icon: 'firefox' },\n { text: 'Safari', value: 4, _icon: 'safari' }\n]", "value": "2", "optionsTitle": "Select Browser" }, "_expanded": true }, { "_icon": "options", "text": "toggleOption", "cls": "Wb.Option", "properties": { "cid": "toggleOption", "text": "Option with toggle", "border": "bottom" }, "_expanded": true, "items": [ { "cls": "Wb.Toggle", "properties": { "cid": "editor", "isProperty": "true" }, "text": "editor", "_expanded": true, "_icon": "switcher-on" } ] }, { "_icon": "options", "text": "toggleClickOnToggleOption", "cls": "Wb.Option", "properties": { "cid": "toggleClickOnToggleOption", "text": "Option with toggle, only allow click on the toggle component", "border": "bottom", "allowClick": "false" }, "_expanded": true, "items": [ { "cls": "Wb.Toggle", "properties": { "cid": "editor", "isProperty": "true" }, "text": "editor", "_expanded": true, "_icon": "switcher-on" } ] }, { "_icon": "options", "text": "iconOption", "cls": "Wb.Option", "properties": { "cid": "iconOption", "text": "Option with icon", "border": "bottom", "icon": "calendar", "flagIcon": "menu" }, "_expanded": true, "events": { "click": "Wb.tip('clicked');" } }, { "_icon": "options", "text": "customOption", "cls": "Wb.Option", "properties": { "cid": "customOption", "text": "Custom option", "border": "bottom", "icon": "message", "flagIcon": "share1", "valueText": "Some value" }, "_expanded": true, "events": { "click": "Wb.tip('clicked');", "ready": "let imgEl = this.el.insertElBefore('w-unselect', 'img', this.flagEl);\nimgEl.src = 'wb/images/order.png';\nimgEl.draggable = false;" } }, { "_icon": "options", "text": "disabledOption", "cls": "Wb.Option", "properties": { "cid": "disabledOption", "text": "Disabled option", "disabled": "true" }, "_expanded": true } ] }, { "_icon": "title", "text": "editorTitle", "cls": "Wb.Title", "properties": { "cid": "editorTitle", "title": "Editor Options" }, "_expanded": true }, { "_icon": "container", "text": "editorCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "editorCt", "background": "true", "layout": "grid1" }, "items": [ { "_icon": "line", "text": "line1", "cls": "Wb.Line", "properties": { "cid": "line1", "title": "Option style" } }, { "_icon": "container", "text": "optionCt1", "cls": "Wb.Container", "properties": { "cid": "optionCt1", "background": "false", "roundBorder": "true", "defaults": "({ labelWidth: '8em' })" }, "_expanded": true, "items": [ { "_icon": "options", "text": "nameOption", "cls": "Wb.Option", "properties": { "cid": "nameOption", "text": "Name", "border": "bottom" }, "_expanded": true, "items": [ { "cls": "Wb.Text", "properties": { "cid": "editor", "isProperty": "true", "flex": "1", "flat": "true", "placeholder": "Your name" }, "text": "editor", "_expanded": true, "_icon": "text" } ] }, { "_icon": "options", "text": "heightOption", "cls": "Wb.Option", "properties": { "cid": "heightOption", "text": "Height (cm)", "border": "bottom" }, "_expanded": true, "items": [ { "cls": "Wb.Number", "properties": { "cid": "editor", "isProperty": "true", "flex": "1", "flat": "true", "placeholder": "Your height" }, "text": "editor", "_expanded": true, "_icon": "number-edit" } ] }, { "_icon": "options", "text": "genderOption", "cls": "Wb.Option", "properties": { "cid": "genderOption", "text": "Gender", "border": "bottom", "options": "['Male', 'Female']", "optionsTitle": "Select Gender" }, "_expanded": true }, { "_icon": "options", "text": "statusOption", "cls": "Wb.Option", "properties": { "cid": "statusOption", "text": "Status" }, "_expanded": true, "items": [ { "cls": "Wb.Toggle", "properties": { "cid": "editor", "isProperty": "true" }, "text": "editor", "_expanded": true, "_icon": "switcher-on" } ] } ] }, { "_icon": "line", "text": "line2", "cls": "Wb.Line", "properties": { "cid": "line2", "title": "Form style" } }, { "_icon": "container", "text": "optionCt2", "cls": "Wb.Container", "properties": { "cid": "optionCt2", "background": "false", "roundBorder": "true", "tableStyle": "simple" }, "_expanded": true, "items": [ { "_icon": "text", "text": "defaults", "cls": "Wb.Text", "properties": { "cid": "defaults", "labelWidth": "8em", "labelSeparator": "false", "isProperty": "true" } }, { "cls": "Wb.Text", "properties": { "cid": "name", "text": "Name", "placeholder": "Your name" }, "text": "name", "_expanded": true, "_icon": "text" }, { "cls": "Wb.Number", "properties": { "cid": "height", "text": "Height (cm)", "placeholder": "Your height" }, "text": "height", "_expanded": true, "_icon": "number-edit" }, { "_icon": "combo", "text": "gender", "cls": "Wb.Select", "properties": { "cid": "gender", "data": "(['Male', 'Female'])", "text": "Gender", "placeholder": "Male / Female" } }, { "_icon": "options", "text": "genderOption", "cls": "Wb.Option", "properties": { "cid": "genderOption", "text": "Gender Option", "border": "bottom", "options": "['Male', 'Female']", "optionsTitle": "Select Gender" }, "_expanded": true }, { "cls": "Wb.Toggle", "properties": { "cid": "status", "text": "Status" }, "text": "status", "_expanded": true, "_icon": "switcher-on" } ] } ] } ] } ] } # example/comps/select.xwl Title: select ```json { "title": "", "icon": "combo", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n /**\n * Add trigger button to fetch value. @priv\n * @param {Wb.Select} select select control.\n */\n addFetchValueButton(select) {\n select.addTrigger({\n icon: 'share', tip: 'Show value', weight: 991, handler() {\n Wb.tip(select.cid + ' value is: ' + select.value);\n }\n });\n }\n});" }, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Select, Trigger and Picker", "cls": "w-title3" } }, { "_icon": "title", "text": "selectTitle", "cls": "Wb.Title", "properties": { "cid": "selectTitle", "title": "Select" }, "_expanded": true }, { "_icon": "container", "text": "selectCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "selectCt", "layout": "grid", "frame": "true", "gridTplColumns": "repeat(auto-fill, 22em)" }, "items": [ { "_icon": "combo", "text": "commonSelect", "cls": "Wb.Select", "properties": { "cid": "commonSelect", "text": "Common Select", "data": "['item1', 'item2', 'item3']" } }, { "_icon": "combo", "text": "noEditableSelect", "cls": "Wb.Select", "properties": { "cid": "noEditableSelect", "text": "No Editable", "data": "['item1', 'item2', 'item3']", "editable": "false" } }, { "_icon": "combo", "text": "nameValueSelect", "cls": "Wb.Select", "properties": { "cid": "nameValueSelect", "text": "Name Value", "data": "[['name1', 'value1'], ['name2', 'value2'], ['name3', 'value3']]" }, "events": { "ready": "app.addFetchValueButton(this);" } }, { "_icon": "combo", "text": "remoteSelect", "cls": "Wb.Select", "properties": { "cid": "remoteSelect", "text": "Remote Select No Wrap", "url": "demo-source?xaction=staffRows", "textField": "full_name", "valueField": "code", "loadOnce": "true", "noWrap": "true" }, "events": { "ready": "app.addFetchValueButton(this);" } }, { "_icon": "combo", "text": "autoLoadSelect", "cls": "Wb.Select", "properties": { "cid": "autoLoadSelect", "text": "Auto Load", "url": "demo-source?xaction=staffRows", "textField": "full_name", "valueField": "code", "autoLoad": "all", "value": "'10003'", "subtextField": "code", "noWrap": "true" } }, { "_icon": "combo", "text": "liveSearchSelect", "cls": "Wb.Select", "properties": { "cid": "liveSearchSelect", "text": "Live Seach", "url": "demo-source?xaction=staffSearch", "textField": "full_name", "valueField": "code" }, "_expanded": true }, { "_icon": "combo", "text": "templateSelect", "cls": "Wb.Select", "properties": { "cid": "templateSelect", "text": "Template Select", "url": "demo-source?xaction=staffRows", "loadOnce": "true", "itemTpl": "

{code}

{full_name}

", "pickerMinWidth": "20em", "cls": "w-rownum-reset", "textField": "full_name", "valueField": "code" }, "events": { "ready": "app.addFetchValueButton(this);" } }, { "_icon": "combo", "text": "templateFnSelect", "cls": "Wb.Select", "properties": { "cid": "templateFnSelect", "text": "Template Function", "url": "demo-source?xaction=staffRows", "loadOnce": "true", "pickerMinWidth": "20em", "cls": "w-rownum-reset", "textField": "full_name", "valueField": "code", "itemTplFn": "return `

${data.code}

${data.full_name}

`;" }, "events": { "ready": "app.addFetchValueButton(this);" } }, { "_icon": "combo", "text": "keyNameSelect", "cls": "Wb.Select", "properties": { "cid": "keyNameSelect", "text": "Key Name", "keyName": "status" }, "events": { "ready": "app.addFetchValueButton(this);" }, "_expanded": true }, { "_icon": "combo", "text": "forceSelect", "cls": "Wb.Select", "properties": { "cid": "forceSelect", "text": "Force Select", "forceSelect": "true", "url": "demo-source?xaction=staffSearch", "valueField": "code", "textField": "full_name" }, "_expanded": true, "events": { "ready": "app.addFetchValueButton(this);" }, "items": [ { "cls": "Wb.Item", "events": { "click": "//When the remote drop-down list data has not yet been loaded, we can specify both the value and text\nthis.parent.value = ['10003', 'Michael Sullivan'];" }, "properties": { "cid": "triggers", "icon": "data-provider", "tip": "Set value" }, "text": "triggers", "_expanded": true, "_icon": "item" } ] }, { "_icon": "combo", "text": "customMatchSelect", "cls": "Wb.Select", "properties": { "cid": "customMatchSelect", "text": "Custom Match", "data": "['item1 abc item1', 'item2 abc item2', 'item3 def item3']", "matchMode": "includesIC", "selectMode": "startsWithIC" }, "_expanded": true }, { "_icon": "combo", "text": "miscSelect", "cls": "Wb.Select", "properties": { "cid": "miscSelect", "data": "[\n { text: 'With icon', _icon: 'user2' },\n { text: 'With image', _img: 'add' },\n { text: 'With tip', _tip: 'Item tip' },\n { text: 'Nowrap line with overflow text', _cls: 'w-nowrap' },\n { text: 'Fixed item', _fixed: true },\n { text: 'Disabled Item', _disabled: true }\n]", "text": "Miscellaneous" }, "_expanded": true }, { "_icon": "combo", "text": "bindFieldSelect", "cls": "Wb.Select", "properties": { "cid": "bindFieldSelect", "text": "Bind Field", "bindField": "myValueField", "url": "demo-source?xaction=staffSearch", "textField": "full_name", "valueField": "code" }, "events": { "ready": "let select = this;\nselect.addTrigger({\n icon: 'share', tip: 'Show values', weight: 991, handler() {\n Wb.tip(Wb.encode(Wb.getValue(select)));\n }\n});" }, "_expanded": true, "items": [ { "cls": "Wb.Item", "events": { "click": "Wb.setValue(app.viewport1, { myValueField: '10003', bindFieldSelect: 'Michael Sullivan' });" }, "properties": { "cid": "triggers", "icon": "data-provider", "tip": "Set value" }, "text": "triggers", "_expanded": true, "_icon": "item" } ] }, { "_icon": "combo", "text": "valueFieldSelect", "cls": "Wb.Select", "properties": { "cid": "valueFieldSelect", "text": "Value Field", "url": "demo-source?xaction=staffSearch", "textField": "full_name", "valueField": "code" }, "events": { "ready": "let select = this;\nselect.addTrigger({\n icon: 'share', tip: 'Show values', weight: 991, handler() {\n Wb.tip(Wb.encode(Wb.getValue(select)));\n }\n});" }, "_expanded": true, "items": [ { "cls": "Wb.Item", "events": { "click": "// valueFieldSelect$ is text\nWb.setValue(app.viewport1, { valueFieldSelect: '10003', valueFieldSelect$: 'Michael Sullivan' });" }, "properties": { "cid": "triggers", "icon": "data-provider", "tip": "Set value" }, "text": "triggers", "_expanded": true, "_icon": "item" } ] }, { "_icon": "combo", "text": "valueMapSelect", "cls": "Wb.Select", "properties": { "cid": "valueMapSelect", "text": "Value Map", "url": "demo-source?xaction=staffSearch", "textField": "full_name", "valueMap": "{code: 'my_code', email: 'my_email', full_name: 'valueMapSelect' }", "gridColumn": "1 / -1", "subtextField": "code" }, "events": { "ready": "let select = this;\nselect.addTrigger({\n icon: 'share', tip: 'Show values', weight: 991, handler() {\n Wb.tip(Wb.encode(Wb.getValue(select)));\n }\n});" }, "_expanded": true, "items": [ { "cls": "Wb.Item", "events": { "click": "Wb.setValue(app.valueMapSelect, { my_code: '10003', my_email: 'michael8@geejing.com', valueMapSelect: 'Michael Sullivan' });" }, "properties": { "cid": "triggers", "icon": "data-provider", "tip": "Set value" }, "text": "triggers", "_expanded": true, "_icon": "item" } ] }, { "_icon": "combo", "text": "multiSelect", "cls": "Wb.Select", "properties": { "cid": "multiSelect", "text": "Multi Select", "url": "demo-source?xaction=staffRows", "textField": "full_name", "valueField": "code", "noWrap": "true", "multiSelect": "true", "gridColumn": "1 / -1", "clearButton": "true" }, "_expanded": true, "items": [ { "cls": "Wb.Array", "properties": { "cid": "triggers" }, "text": "triggers", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Item", "events": { "click": "this.parent.value = [{ code: '10001', full_name: 'Terri Duffy' }, { code: '10005', full_name: 'Gail Erickson' },\n{ code: '10008', full_name: 'Janice Galvin' }];" }, "properties": { "cid": "setBtn", "icon": "data-provider", "tip": "Set values" }, "text": "setBtn", "_expanded": false, "_icon": "item" }, { "cls": "Wb.Item", "events": { "click": "Wb.tip(Wb.encode(this.parent.value));" }, "properties": { "cid": "getBtn", "icon": "share", "tip": "Get values" }, "text": "getBtn", "_expanded": true, "_icon": "item" }, { "cls": "Wb.Item", "events": { "click": "let select = this.parent;\nselect.picker.load({\n success() {\n select.value = this.data.firstItem;\n }\n});" }, "properties": { "cid": "manualSelect", "icon": "setup", "tip": "Manual select the first item" }, "text": "manualSelect", "_expanded": true, "_icon": "item" } ] } ] }, { "_icon": "combo", "text": "multiSelectWrap", "cls": "Wb.Select", "properties": { "cid": "multiSelectWrap", "text": "Multi Select Wrap", "url": "demo-source?xaction=staffSearch", "textField": "full_name", "valueField": "code", "noWrap": "true", "multiSelect": "true", "gridColumn": "1 / -1", "tagSortable": "true", "tagWrap": "true", "clearButton": "true", "tagTipField": "email", "subtextField": "code", "maxHeight": "10em", "tagWidth": "calc(100% - 8em)" }, "_expanded": true }, { "_icon": "combo", "text": "treeSelect", "cls": "Wb.Select", "properties": { "cid": "treeSelect", "text": "Tree Select", "textField": "text", "valueField": "sid", "gridColumn": "1 / -1", "treePicker": "true", "data": "[\n {\n text: 'Asia', _icon: 'flag1', myCheck: 1, sid: 'a',\n remark: 'Asia is the largest continent in the world', area: 44579000, percentage: 0.3, items: [\n { text: 'China', _leaf: true, myCheck: 0, sid: 'a1' },\n { text: 'Japan', _leaf: true, myCheck: 1, sid: 'a2' },\n { text: 'Korea', _leaf: true, myCheck: 0, sid: 'a3' }\n ]\n },\n {\n text: 'Europe', _icon: 'flag1', myCheck: 1, sid: 'b',\n remark: 'Europe is between Asia and Africa', area: 9938000, percentage: 0.067, items: [\n { text: 'France', _leaf: true, sid: 'b1' },\n { text: 'Germany', _leaf: true, sid: 'b2' },\n { text: 'UK', _leaf: true, sid: 'b3' }\n ]\n },\n {\n text: 'North America', _icon: 'flag1', _selected: true, _expanded: true, sid: 'c',\n remark: \"North America is the third largest of the world's continents\", area: 24256000, percentage: 0.165, items: [\n { text: 'Canada', _leaf: true, sid: 'c1' },\n { text: 'Mexico', _leaf: true, sid: 'c2' },\n { text: 'USA', _leaf: true, sid: 'c3' }\n ]\n },\n {\n text: 'South America', _icon: 'flag1', _disabled: true, sid: 'd',\n remark: \"Sorth America is the fourth largest of the world's continents\", area: 17819000, percentage: 0.12, items: [\n { text: 'Argentina', _leaf: true, sid: 'd1' },\n { text: 'Brazil', _leaf: true, sid: 'd2' }\n ]\n }\n]" }, "events": { "beforeselect": "if (!item.leaf) {\n Wb.tip('Please select a leaf node');\n return false;\n}" } }, { "_icon": "combo", "text": "singleTagTreeSelect", "cls": "Wb.Select", "properties": { "cid": "singleTagTreeSelect", "text": "Single Tag Tree", "url": "demo-source?xaction=listAreaTree1", "textField": "text", "valueField": "sid", "gridColumn": "1 / -1", "clearButton": "true", "treePicker": "true", "useTag": "true" }, "events": { "change": "// Wb.tip(Wb.encode(value));" }, "_expanded": true, "items": [ { "cls": "Wb.Array", "properties": { "cid": "triggers" }, "text": "triggers", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Item", "events": { "click": "this.parent.value = { text: 'Paris', subtext: '004LMY1FA9D40', sid: '004LMY1FA9D40' };" }, "properties": { "cid": "setBtn", "icon": "data-provider", "tip": "Set values" }, "text": "setBtn", "_expanded": false, "_icon": "item" }, { "cls": "Wb.Item", "events": { "click": "Wb.tip(Wb.encode(this.parent.value));" }, "properties": { "cid": "getBtn", "icon": "share", "tip": "Get values" }, "text": "getBtn", "_expanded": true, "_icon": "item" } ] } ] }, { "_icon": "combo", "text": "multiTreeSelect", "cls": "Wb.Select", "properties": { "cid": "multiTreeSelect", "text": "Multi Select Tree", "url": "demo-source?xaction=listAreaTree1", "textField": "text", "valueField": "sid", "gridColumn": "1 / -1", "tagSortable": "true", "tagWrap": "true", "clearButton": "true", "treePicker": "true", "maxHeight": "10em", "tagWidth": "70%", "multiSelect": "true" }, "events": { "change": "// Wb.tip(Wb.encode(value));" }, "_expanded": true, "items": [ { "cls": "Wb.Array", "properties": { "cid": "triggers" }, "text": "triggers", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Item", "events": { "click": "this.parent.value = [\n { text: 'Lyon', subtext: '004LMY1FA9D41', sid: '004LMY1FA9D41' },\n { text: 'Paris', subtext: '004LMY1FA9D40', sid: '004LMY1FA9D40' }\n];" }, "properties": { "cid": "setBtn", "icon": "data-provider", "tip": "Set values" }, "text": "setBtn", "_expanded": false, "_icon": "item" }, { "cls": "Wb.Item", "events": { "click": "Wb.tip(Wb.encode(this.parent.value));" }, "properties": { "cid": "getBtn", "icon": "share", "tip": "Get values" }, "text": "getBtn", "_expanded": true, "_icon": "item" } ] } ] } ] }, { "_icon": "title", "text": "linkedSelectTitle", "cls": "Wb.Title", "properties": { "cid": "linkedSelectTitle", "title": "Linked Select" }, "_expanded": true }, { "_icon": "container", "text": "linkedSelectCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "linkedSelectCt", "layout": "grid", "frame": "true" }, "items": [ { "_icon": "combo", "text": "continentSelect", "cls": "Wb.Select", "properties": { "cid": "continentSelect", "placeholder": "Continent", "forceSelect": "true", "url": "demo-source?xaction=listRootArea", "textField": "area_name", "valueField": "sid", "required": "true" }, "events": { "ready": "let me = this;\n//Pick up the first item\nme.picker.load({ success() { me.valueIndex = 0; } });" } }, { "_icon": "combo", "text": "countrySelect", "cls": "Wb.Select", "properties": { "cid": "countrySelect", "placeholder": "Country", "forceSelect": "true", "url": "demo-source?xaction=listArea", "textField": "area_name", "valueField": "sid", "required": "true" }, "events": { "beforeload": "let select = app.continentSelect;\nif (select.verify())\n params.parent_id = select.value;\nelse {\n select.focus();\n return false;\n}" } }, { "_icon": "combo", "text": "citySelect", "cls": "Wb.Select", "_expanded": true, "properties": { "cid": "citySelect", "placeholder": "City", "forceSelect": "true", "url": "demo-source?xaction=listArea", "textField": "area_name", "valueField": "sid", "required": "true" }, "events": { "beforeload": "let select = app.countrySelect;\nif (select.verify())\n params.parent_id = select.value;\nelse {\n select.focus();\n return false;\n}" } } ] }, { "_icon": "title", "text": "triggerTitle", "cls": "Wb.Title", "properties": { "cid": "triggerTitle", "title": "Trigger" }, "_expanded": true }, { "_icon": "container", "text": "triggerCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "triggerCt", "layout": "grid", "frame": "true" }, "items": [ { "_icon": "trigger", "text": "commonTrigger", "cls": "Wb.Trigger", "properties": { "cid": "commonTrigger", "text": "Common Trigger" }, "events": { "triggerclick": "Wb.tip(this.cid + ' triggered');" } }, { "_icon": "trigger", "text": "readonlyTrigger", "cls": "Wb.Trigger", "properties": { "cid": "readonlyTrigger", "text": "Readonly Trigger", "editable": "false", "enterTriggerClick": "true", "triggerIcon": "location", "placeholder": "Press enter" }, "events": { "triggerclick": "Wb.tip(this.cid + ' triggered');" } }, { "_icon": "trigger", "text": "extraTrigger", "cls": "Wb.Trigger", "properties": { "cid": "extraTrigger", "text": "Extra Triggers" }, "events": { "triggerclick": "Wb.tip('Default trigger clicked');" }, "_expanded": true, "items": [ { "cls": "Wb.Array", "properties": { "cid": "triggers" }, "text": "triggers", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Item", "events": { "click": "Wb.tip('Set trigger clicked');" }, "properties": { "cid": "setItem", "icon": "gear", "tip": "@Str.set" }, "text": "setItem", "_expanded": true, "_icon": "item" }, { "cls": "Wb.Item", "properties": { "cid": "copyItem", "icon": "copy", "tip": "@Str.copy" }, "text": "copyItem", "_expanded": true, "_icon": "item" } ] } ] } ] }, { "_icon": "title", "text": "pickerTitle", "cls": "Wb.Title", "properties": { "cid": "pickerTitle", "title": "Picker" }, "_expanded": true }, { "_icon": "container", "text": "pickerCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "pickerCt", "layout": "grid", "frame": "true" }, "items": [ { "_icon": "picker", "text": "commonPicker", "cls": "Wb.Picker", "_expanded": true, "properties": { "cid": "commonPicker", "text": "Common Picker", "editable": "false" }, "events": { "collapse": "this.value = Wb.encode(Wb.getValue(this.picker));", "expand": "Wb.setValue(this.picker, this.value ? Wb.decode(this.value) : {});" }, "items": [ { "cls": "Wb.Container", "properties": { "cid": "picker", "isProperty": "true", "layout": "grid1", "defaults": "({ labelWidth: '5em' })" }, "text": "picker", "_expanded": true, "_icon": "container", "items": [ { "_icon": "text", "text": "nameText", "cls": "Wb.Text", "properties": { "cid": "nameText", "text": "name" } }, { "_icon": "text", "text": "typeText", "cls": "Wb.Text", "properties": { "cid": "typeText", "text": "type" } }, { "_icon": "number-edit", "text": "countNumber", "cls": "Wb.Number", "properties": { "cid": "countNumber", "text": "Count" } } ] } ] }, { "_icon": "picker", "text": "gridPicker", "cls": "Wb.Picker", "_expanded": true, "properties": { "cid": "gridPicker", "text": "Grid Picker" }, "items": [ { "_icon": "grid", "text": "picker", "cls": "Wb.Grid", "properties": { "cid": "picker", "isProperty": "true", "url": "demo-source?xaction=staffDict" } } ] }, { "_icon": "picker", "text": "treePicker", "cls": "Wb.Picker", "_expanded": true, "properties": { "cid": "treePicker", "text": "Tree Picker", "editable": "false" }, "events": { "collapse": "this.value = this.picker.checkedNodes.pluck('text').join(', ');" }, "items": [ { "_icon": "tree-view", "text": "picker", "cls": "Wb.Tree", "_expanded": true, "properties": { "cid": "picker", "isProperty": "true", "url": "demo-source?xaction=listAreaTree" }, "events": { "itemclick": "let picker = this.parent;\nif (item.leaf) {\n picker.setValue(item.data.area_name);\n picker.collapse();\n picker.focus();\n}" } } ] }, { "_icon": "picker", "text": "lazyPicker", "cls": "Wb.Picker", "_expanded": true, "properties": { "cid": "lazyPicker", "text": "Lazy Picker", "lazyPicker": "true" }, "items": [ { "_icon": "container", "text": "picker", "cls": "Wb.Container", "properties": { "cid": "picker", "text": "Load large data asynchronously", "isProperty": "true", "frame": "true", "padding": "true" } } ] }, { "_icon": "calendar", "text": "dockedPicker", "cls": "Wb.Date", "_expanded": true, "properties": { "cid": "dockedPicker", "text": "Picker docked bottom", "dockedPicker": "true", "shareView": "false" } } ] }, { "_icon": "title", "text": "othersTitle", "cls": "Wb.Title", "properties": { "cid": "othersTitle", "title": "Others" }, "_expanded": true }, { "_icon": "container", "text": "othersCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "othersCt", "layout": "grid", "frame": "true" }, "items": [ { "_icon": "color", "text": "color1", "cls": "Wb.Color", "properties": { "cid": "color1", "placeholder": "Color" }, "_expanded": true }, { "_icon": "brush", "text": "colorSelect1", "cls": "Wb.ColorSelect", "properties": { "cid": "colorSelect1" } }, { "_icon": "check8", "text": "boolSelect1", "cls": "Wb.BoolSelect", "properties": { "cid": "boolSelect1", "placeholder": "Bool selector" } } ] }, { "_icon": "title", "text": "codingTitle", "cls": "Wb.Title", "properties": { "cid": "codingTitle", "title": "Coding" }, "_expanded": true }, { "_icon": "container", "text": "codingCt", "cls": "Wb.Container", "properties": { "cid": "codingCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "container", "text": "demoCt", "cls": "Wb.Container", "properties": { "cid": "demoCt", "layout": "form-compact" }, "_expanded": true, "items": [ { "_icon": "combo", "text": "localSelect", "cls": "Wb.Select", "properties": { "cid": "localSelect", "text": "Local Select", "data": "['item1', 'item2', 'item3']" } }, { "_icon": "combo", "text": "remoteSelect1", "cls": "Wb.Select", "properties": { "cid": "remoteSelect1", "text": "Remote Select", "url": "demo-source?xaction=staffRows", "textField": "full_name", "valueField": "code", "loadOnce": "true" }, "events": { "beforeload": "params.foo = 'bar';" } } ] }, { "_icon": "line", "text": "line1", "cls": "Wb.Line", "_expanded": false, "properties": { "cid": "line1", "title": "Demonstrate", "dimTitle": "true", "dashed": "true" } }, { "_icon": "container", "text": "actionCt", "cls": "Wb.Container", "_expanded": true, "properties": { "cid": "actionCt", "layout": "form-compact" }, "items": [ { "_icon": "button", "text": "addBtn", "cls": "Wb.Button", "properties": { "cid": "addBtn", "text": "Insert Item" }, "_expanded": true, "events": { "click": "app.localSelect.data.push({ text: 'New Item' }); //add permanently\n//app.localSelect.picker.addData({ text: 'New Item' }); //add transiently because the picker data will be reloaded when expand it" } }, { "_icon": "button", "text": "removeBtn", "cls": "Wb.Button", "properties": { "cid": "removeBtn", "text": "Remove Item" }, "_expanded": true, "events": { "click": "app.localSelect.data.erase(0); //erase is a function ofArray, see Array functions" } }, { "_icon": "button", "text": "expandLocalBtn", "cls": "Wb.Button", "properties": { "cid": "expandLocalBtn", "text": "Expand Local Selet" }, "_expanded": true, "events": { "click": "app.localSelect.expand();" } }, { "_icon": "button", "text": "expandRemoteBtn", "cls": "Wb.Button", "properties": { "cid": "expandRemoteBtn", "text": "Expand Remote Select" }, "_expanded": true, "events": { "click": "app.remoteSelect1.query(); //expand function has no effect because the picker's data has not been loaded yet" } } ] } ] } ] } ] } # example/comps/slot.xwl Title: slot ```json { "title": "", "icon": "slots", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "description": "demo-source=example/common/demo-source.xwl" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Slot", "cls": "w-title3" } }, { "_icon": "title", "text": "slotListTitle", "cls": "Wb.Title", "properties": { "cid": "slotListTitle", "title": "Slot list" } }, { "_icon": "container", "text": "slotListCt", "cls": "Wb.Container", "properties": { "cid": "slotListCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "label", "text": "commonSlotLabel", "cls": "Wb.Label", "properties": { "cid": "commonSlotLabel", "text": "Common slot" } }, { "_icon": "slots", "text": "commonSlot", "cls": "Wb.Slot", "properties": { "cid": "commonSlot", "data": "[\n [{ text: 'a1' }, { text: 'a2' }, { text: 'a3' }, { text: 'a4' }, { text: 'a5' }, { text: 'a6' }],\n [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }, { text: 'b4' }, { text: 'b5' }, { text: 'b6' }]\n]", "buttonAlign": "center" }, "events": { "itemselect": "Wb.tip(Wb.encode(this.value) + ' selected');" }, "_expanded": true, "items": [ { "cls": "Wb.Array", "properties": { "cid": "buttons" }, "text": "buttons", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Button", "events": { "click": "app.commonSlot.value = ['a2', 'b2'];" }, "properties": { "cid": "setValueBtn", "text": "Set value" }, "text": "setValueBtn", "_expanded": true, "_icon": "button" }, { "cls": "Wb.Button", "events": { "click": "Wb.tip(this.cid + ' values is: ' + Wb.encode(app.commonSlot.value));" }, "properties": { "cid": "getValueBtn", "text": "Get value" }, "text": "getValueBtn", "_expanded": true, "_icon": "button" } ] } ] }, { "_icon": "label", "text": "customSlotLabel", "cls": "Wb.Label", "properties": { "cid": "customSlotLabel", "text": "Custom slot" } }, { "_icon": "slots", "text": "customSlot", "cls": "Wb.Slot", "properties": { "cid": "customSlot", "height": "15em" }, "_expanded": true, "items": [ { "_icon": "list", "text": "slotView1", "cls": "Wb.SlotView", "properties": { "cid": "slotView1", "url": "demo-source?xaction=staffDict", "textField": "full_name", "valueField": "code", "topTitle": "Staff list" } } ] } ] }, { "_icon": "title", "text": "linkedSlotTitle", "cls": "Wb.Title", "properties": { "cid": "linkedSlotTitle", "title": "Linked slot without scrollbar" } }, { "_icon": "slots", "text": "linkedSlot", "cls": "Wb.Slot", "properties": { "cid": "linkedSlot", "height": "10em", "defaults": "({ autoScroll: 'hide' })", "border": "false" }, "_expanded": true, "items": [ { "_icon": "list", "text": "continentView", "cls": "Wb.SlotView", "properties": { "cid": "continentView", "url": "demo-source?xaction=listRootArea", "topTitle": "Continent", "textField": "area_name" }, "events": { "selectionchange": "app.countryView.load({ params: { parent_id: this.selection.data.sid } });" }, "_expanded": true }, { "_icon": "list", "text": "countryView", "cls": "Wb.SlotView", "properties": { "cid": "countryView", "url": "demo-source?xaction=listArea", "topTitle": "Country", "textField": "area_name" }, "events": { "selectionchange": "app.cityView.load({ params: { parent_id: this.selection?.data.sid } });" } }, { "_icon": "list", "text": "cityView", "cls": "Wb.SlotView", "properties": { "cid": "cityView", "url": "demo-source?xaction=listArea", "topTitle": "City", "textField": "area_name" } } ] } ] } ] } # example/comps/toolbar-menu.xwl Title: toolbar-menu ```json { "title": "", "icon": "toolbar", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "array", "text": "components", "cls": "Wb.Array", "properties": { "cid": "components" }, "_expanded": true, "items": [ { "_icon": "menu2", "text": "sharedContextMenu", "cls": "Wb.Menu", "properties": { "cid": "sharedContextMenu" }, "_expanded": true, "items": [ { "_icon": "item", "text": "showTargetItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "showTargetItem", "text": "Show target", "icon": "cube" }, "events": { "click": "Wb.tip('Popup context menu from ' + this.contextTarget.getClosestComp().cid);" } }, { "_icon": "line", "text": "line1", "cls": "Wb.Line", "properties": { "cid": "line1" } }, { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "@Str.add", "icon": "add" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "@Str.edit", "icon": "edit" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "text": "@Str.del", "icon": "delete" } } ] } ] }, { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Toolbar and menu", "cls": "w-title3" } }, { "_icon": "title", "text": "toolbarTitle", "cls": "Wb.Title", "properties": { "cid": "toolbarTitle", "title": "Toolbar" }, "_expanded": true }, { "_icon": "container", "text": "toolbarCt", "cls": "Wb.Container", "properties": { "cid": "toolbarCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "label", "text": "commonToolBarLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "commonToolBarLabel", "text": "Common toolbar" } }, { "_icon": "toolbar", "text": "commonToolbar", "cls": "Wb.Toolbar", "properties": { "cid": "commonToolbar", "border": "true" }, "_expanded": true, "items": [ { "_icon": "item", "text": "addItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "addItem", "icon": "add", "text": "@Str.add", "tip": "Add new item" } }, { "_icon": "item", "text": "deleteItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "deleteItem", "icon": "delete", "text": "@Str.del" } }, { "_icon": "item", "text": "shortCutKeyItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "shortCutKeyItem", "text": "Bind key", "icon": "keyboard", "keys": "Ctrl+K" }, "events": { "click": "Wb.tip(this.cid + ' clicked');" } }, { "_icon": "item", "text": "disabledItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "disabledItem", "icon": "property", "text": "Disabled", "disabled": "true" } }, { "_icon": "item", "text": "menuItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "menuItem", "icon": "menu", "text": "Menu" }, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "Menu item 1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "Menu item 2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "text": "Menu item 3" } } ] } ] }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "trigger", "text": "trigger1", "cls": "Wb.Trigger", "properties": { "cid": "trigger1", "triggerIcon": "module" }, "events": { "triggerclick": "Wb.tip(this.cid + ' clicked');" } }, { "_icon": "item", "text": "centerAlignItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "centerAlignItem", "icon": "data", "alignSelf": "center", "tip": "Centered button" } }, { "_icon": "right1", "text": "fill1", "cls": "Wb.Fill", "properties": { "cid": "fill1" } }, { "_icon": "item", "text": "fillRightItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "fillRightItem", "icon": "calendar" } } ] }, { "_icon": "label", "text": "overflowedToolbarLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "overflowedToolbarLabel", "text": "Overflowed toolbar" } }, { "_icon": "toolbar", "text": "overflowedToolbar", "cls": "Wb.Toolbar", "properties": { "cid": "overflowedToolbar", "border": "true", "width": "25em", "overflowMenu": "true", "resizable": "true", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "item 1", "icon": "calculator" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "item 2", "icon": "add1" } }, { "_icon": "item", "text": "menuTextItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "menuTextItem", "icon": "broadcast", "menuText": "MenuText Item" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "text": "item 3", "icon": "click" } }, { "_icon": "item", "text": "item4", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item4", "text": "item 4", "icon": "lantern" } }, { "_icon": "item", "text": "item5", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item5", "text": "item 5", "icon": "mail" } } ] }, { "_icon": "label", "text": "centeredShrinkToolbarLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "centeredShrinkToolbarLabel", "text": "Centered shrink toolbar" } }, { "_icon": "toolbar", "text": "centeredShrinkToolbar", "cls": "Wb.Toolbar", "properties": { "cid": "centeredShrinkToolbar", "justify": "center", "border": "true", "resizable": "true", "shrink": "true", "width": "25em", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "icon": "book1", "text": "Item1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "icon": "card", "text": "Item2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "icon": "cube", "text": "Item3" } } ] }, { "_icon": "label", "text": "verticalToolbarLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "verticalToolbarLabel", "text": "Vertical toolbar" } }, { "_icon": "toolbar", "text": "verticalToolbar", "cls": "Wb.Toolbar", "properties": { "cid": "verticalToolbar", "frame": "true", "vertical": "true", "maxWidth": "10em" }, "_expanded": true, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "icon": "book1", "text": "Item1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "icon": "card", "text": "Item2 Card" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "icon": "cube", "text": "Item3" } } ] }, { "_icon": "label", "text": "menuStyleToolbarLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "menuStyleToolbarLabel", "text": "Menu style toolbar" } }, { "_icon": "toolbar", "text": "menuStyleToolbar", "cls": "Wb.Toolbar", "properties": { "cid": "menuStyleToolbar", "frame": "true", "type": "menu", "maxWidth": "10em" }, "_expanded": true, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "icon": "book1", "text": "Item1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "icon": "card", "text": "Item2 Card" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "icon": "cube", "text": "Item3" } } ] } ] }, { "_icon": "title", "text": "menuTitle", "cls": "Wb.Title", "properties": { "cid": "menuTitle", "title": "Menu" }, "_expanded": true }, { "_icon": "container", "text": "menuCt", "cls": "Wb.Container", "properties": { "cid": "menuCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "toolbar", "text": "toolbar1", "cls": "Wb.Toolbar", "properties": { "cid": "toolbar1", "layout": "center", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "Menu Item" }, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "iconItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "iconItem", "text": "Menu item 1", "icon": "briefcase" } }, { "_icon": "item", "text": "imgItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "imgItem", "text": "Menu item 1", "img": "sitemap" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "disabledItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "disabledItem", "disabled": "true", "icon": "download", "text": "Disabled" } }, { "_icon": "container", "text": "container1", "cls": "Wb.Container", "properties": { "cid": "container1", "layout": "row", "gap": ".2em", "cls": "w-mi-margin" }, "_expanded": true, "items": [ { "_icon": "slidebar", "text": "fsSlider", "cls": "Wb.Slider", "properties": { "cid": "fsSlider", "text": "@Str.fontSize", "maxValue": "50", "flex": "1", "minValue": "12", "tabIndex": "null", "focusable": "false" }, "_expanded": true }, { "_icon": "button", "text": "resetBtn", "cls": "Wb.Button", "properties": { "cid": "resetBtn", "tip": "@Str.reset", "icon": "refresh", "type": "tool", "tabIndex": "undefined", "focusable": "false" } } ] }, { "_icon": "item", "text": "bindKeyItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "bindKeyItem", "text": "Bind key item", "keys": "Ctrl+L" }, "events": { "click": "Wb.tip(this.cid + ' clicked');" } }, { "_icon": "space", "text": "space1", "cls": "Wb.Space", "properties": { "cid": "space1" } }, { "_icon": "item", "text": "subMenuItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "subMenuItem", "text": "Sub menu" }, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item1", "text": "Item 1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item2", "text": "Item 2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item3", "text": "Item 3" } } ] } ] } ] } ] } ] }, { "_icon": "button", "text": "menuButton", "cls": "Wb.Button", "properties": { "cid": "menuButton", "text": "Menu Button", "icon": "menu" }, "_expanded": true, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "uncheckItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "uncheckItem", "text": "Unchecked item", "checked": "false" }, "events": { "checkchange": "Wb.tip(this.cid + ' checked is ' + checked);" } }, { "_icon": "item", "text": "checkedItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "checkedItem", "text": "Checked Item", "checked": "true" } }, { "_icon": "line", "text": "line1", "cls": "Wb.Line", "properties": { "cid": "line1" } }, { "_icon": "item", "text": "groupedItem1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "groupedItem1", "text": "Grouped item1", "checkGroup": "group1", "checked": "true" } }, { "_icon": "item", "text": "groupedItem2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "groupedItem2", "text": "Grouped item2", "checkGroup": "group1", "checked": "false" } }, { "_icon": "item", "text": "groupedItem3", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "groupedItem3", "text": "Grouped item3", "checkGroup": "group1", "checked": "false" } }, { "_icon": "line", "text": "line2", "cls": "Wb.Line", "_expanded": true, "properties": { "cid": "line2" } }, { "_icon": "item", "text": "ellipsisItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "ellipsisItem", "ellipsis": "true", "text": "Ellipsis Item (means to show dialog)" } }, { "_icon": "line", "text": "line3", "cls": "Wb.Line", "_expanded": true, "properties": { "cid": "line3" } }, { "_icon": "item", "text": "noHideItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "noHideItem", "text": "Click not to hide menu", "clickHide": "false" }, "events": { "click": "Wb.tip('clicked');" } } ] } ] }, { "_icon": "container", "text": "contextMenuCt", "cls": "Wb.Container", "properties": { "cid": "contextMenuCt", "layout": "center", "text": "Please click the mouse context menu button to show context menu", "width": "20em", "height": "5em", "padding": "true", "textSelectable": "false", "frame": "true" }, "_expanded": true, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "contextMenu", "isProperty": "true" }, "text": "contextMenu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "Menu item 1", "icon": "book1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "Menu item 2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "text": "Menu item 3" } } ] } ] }, { "_icon": "container", "text": "sharedContextMenuCt1", "cls": "Wb.Container", "properties": { "cid": "sharedContextMenuCt1", "layout": "center", "text": "Shared context menu comp1", "height": "5em", "padding": "true", "contextMenu": "app.sharedContextMenu", "frame": "true" }, "_expanded": true }, { "_icon": "container", "text": "sharedContextMenuCt2", "cls": "Wb.Container", "properties": { "cid": "sharedContextMenuCt2", "layout": "center", "text": "Shared context menu comp2", "height": "5em", "padding": "true", "contextMenu": "app.sharedContextMenu", "frame": "true" }, "_expanded": true }, { "_icon": "toolbar", "text": "menuToolbar", "cls": "Wb.Toolbar", "properties": { "cid": "menuToolbar", "layout": "column", "fontSize": "1.6em", "plainIcon": "true", "defaults": "({ alignSelf: 'start', menu: { defaultAlign: 'tl-tr?', defaultOffset: [3, 0] } })", "frame": "true", "alignSelf": "start" }, "_expanded": true, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "icon": "card" }, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "Menu item 1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "Menu item 2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "text": "Menu item 3" } } ] } ] }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "icon": "grid" }, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "Menu item 1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "Menu item 2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "text": "Menu item 3" } } ] } ] }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item3", "icon": "text1" }, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "text": "Menu item 1" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "text": "Menu item 2" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "text": "Menu item 3" } } ] } ] } ] } ] } ] } ] } # example/comps/tree.xwl Title: tree ```json { "title": "", "icon": "tree-view", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "description": "demo-source=example/common/demo-source.xwl" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Tree", "cls": "w-title3" } }, { "_icon": "title", "text": "commonRemoteTreeTitle", "cls": "Wb.Title", "properties": { "cid": "commonRemoteTreeTitle", "title": "Common remote tree" } }, { "_icon": "tree-view", "text": "commonRemoteTree", "cls": "Wb.Tree", "_expanded": true, "properties": { "cid": "commonRemoteTree", "url": "demo-source?xaction=listAreaTree", "height": "15em" } }, { "_icon": "title", "text": "miscTreeTitle", "cls": "Wb.Title", "properties": { "cid": "miscTreeTitle", "title": "Miscillaneous tree" } }, { "_icon": "tree-view", "text": "miscTree", "cls": "Wb.Tree", "_expanded": false, "properties": { "cid": "miscTree", "localData": "[\n {\n text: 'Asia', _icon: 'flag1', _checked: true, myCheck: 1,\n remark: 'Asia is the largest continent in the world', area: 44579000, percentage: 0.3, items: [\n { text: 'China', _leaf: true, _checked: true, myCheck: 0 },\n { text: 'Japan', _leaf: true, _checked: true, myCheck: 1 },\n { text: 'Korea', _leaf: true, _checked: true, myCheck: 0 }\n ]\n },\n {\n text: 'Europe', _icon: 'flag1', myCheck: 1,\n remark: 'Europe is between Asia and Africa', area: 9938000, percentage: 0.067, items: [\n { text: 'France', _leaf: true },\n { text: 'Germany', _leaf: true },\n { text: 'UK', _leaf: true }\n ]\n },\n {\n text: 'North America', _icon: 'flag1', _selected: true, _expanded: true,\n remark: \"North America is the third largest of the world's continents\", area: 24256000, percentage: 0.165, items: [\n { text: 'Canada', _leaf: true },\n { text: 'Mexico', _leaf: true },\n { text: 'USA', _leaf: true }\n ]\n },\n {\n text: 'South America', _icon: 'flag1', _disabled: true,\n remark: \"Sorth America is the fourth largest of the world's continents\", area: 17819000, percentage: 0.12, items: [\n { text: 'Argentina', _leaf: true },\n { text: 'Brazil', _leaf: true }\n ]\n }\n]", "height": "20em", "pagingBar": "true", "resizable": "true", "gridLine": "true", "columnsSortable": "true", "sorters": "text", "stateId": "wb.miscTree", "frame": "true", "linkedCheck": "true", "defaultFields": "({\n _icon: { value: 'geejing' },\n _checked: {\n convert(value, data) {\n if (value === true)\n return true;\n else\n return data.text == 'Mexico' ? null : false;\n }\n }\n})" }, "events": { "itemdblclick": "Wb.tip(item.data.text + ' row double clicked');" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "textCol", "fieldName": "text", "expander": "true", "text": "Area", "freeze": "true", "width": "18em", "render": "//use sub-color to render subText\nlet textEl, subText = data.percentage > 0.15 ? 'Large area' : null;\nif (subText) {\n // Manual add sub text, please use subtext field instead\n el.cls = 'w-text-wrap';\n el.removeCls('w-text');\n el.addEl('w-text').textContent = value;\n el.addEl('w-sub-text').textContent = subText;\n // let span = el.addTag('span');\n // span.textContent = value;\n // span = el.addEl('w-sub-color w-margin-l', 'span');\n // span.textContent = subText;\n} else\n return value;" }, "text": "textCol", "_expanded": true, "_icon": "column" }, { "_icon": "column", "text": "landAreasCol", "cls": "Wb.Column", "properties": { "cid": "landAreasCol", "text": "Land Areas" }, "_expanded": true, "items": [ { "cls": "Wb.Column", "properties": { "cid": "percentageCol", "fieldName": "percentage", "text": "Percentage", "type": "percent", "titleAlign": "right" }, "text": "percentageCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "areaCol", "fieldName": "area", "text": "Area(Sq. Km)", "titleAlign": "right", "render": "if (value < 10000000) {\n el.parentNode.cls = 'w-succ-bgcolor-row';\n el.cls = 'w-error-color';\n value = '* ' + value.intText;\n} else {\n value = value?.intText;\n}\n\n//add icon manually\nlet wrapEl = el.addEl('w-row w-align-center');\nel.removeCls('w-text');\nwrapEl.addEl('w-item-icon w-icon icon-thumb');\nwrapEl.addEl('w-text').textContent = value;" }, "text": "areaCol", "_expanded": true, "_icon": "column" } ] }, { "cls": "Wb.Column", "properties": { "cid": "remarkCol", "fieldName": "remark", "text": "Remark", "width": "-1" }, "text": "remarkCol", "_expanded": true, "_icon": "column" }, { "_icon": "column", "text": "checkCol1", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "checkCol1", "checkBox": "int", "fieldName": "myCheck", "checkRefresh": "true", "menuText": "Check" } }, { "_icon": "column", "text": "checkCol2", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "checkCol2", "checkBox": "roTrue", "fieldName": "myCheck" } }, { "_icon": "column", "text": "checkCol3", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "checkCol3", "checkBox": "roAll", "fieldName": "myCheck" } }, { "_icon": "column", "text": "toggleCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "toggleCol", "render": "let row = this;\nvalue = row.data.myCheck;\nrow.addFooter({\n cname: 'toggle', returnType: 'int', value, toggleAlign: 'center', clickToggle: true,\n events: {\n change(value) {\n // If there is no need to synchronously update other fields, this is more efficient\n // row.data.myCheck = value; // only update myCheck field value\n row.set('myCheck', value); // update whole row\n }\n }\n}, el);", "width": "5em", "text": "Toggle" } }, { "_icon": "column", "text": "linkCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "linkCol", "render": "let a = el.addTag('a');\nel.cls = 'w-ta-center';\na.textContent = 'Download';\na.onclick = e => Wb.tip('Download data of ' + data.text);\n// a.onclick = app.myFunc;", "width": "8em", "text": "Link" } }, { "_icon": "column", "text": "actionsCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "actionsCol", "text": "Actions", "width": "8em" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "buttons" }, "text": "buttons", "_expanded": true, "_icon": "array", "items": [ { "_icon": "item", "text": "setItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "setItem", "icon": "gear", "tip": "Set" }, "events": { "click": "Wb.tip('Set ' + this.data.text);" } }, { "_icon": "item", "text": "shareItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "shareItem", "icon": "share2", "tip": "Add" }, "events": { "click": "Wb.tip('Share ' + this.data.text);" } } ] } ] } ] } ] }, { "_icon": "component", "text": "miscDescComp", "cls": "Wb.Component", "properties": { "cid": "miscDescComp", "html": "

Feature List:

Columns sortable, resizable, draggable and freezable.
Arbitrary multi-Level Headers.
Customize cell rendering.
Rows and columns highlighing.
Local data pagination.
Bind buttons or any controls to cells.
Multiple styles of check columns.
Customize columns and persistence to the database.

", "textSelectable": "false" } }, { "_icon": "title", "text": "groupingTreeTitle", "cls": "Wb.Title", "properties": { "cid": "groupingTreeTitle", "title": "Grouping tree" } }, { "_icon": "tree-view", "text": "groupingTree", "cls": "Wb.Tree", "_expanded": true, "properties": { "cid": "groupingTree", "height": "20em", "resizable": "true", "gridLine": "true", "columnsSortable": "true", "sorters": "department", "frame": "true", "grouping": "true", "localData": "[\n { name: 'Alice', department: 'Engineering', jobTitle: 'Software Engineer', country: 'USA', _leaf: true },\n { name: 'Bob', department: 'Marketing', jobTitle: 'Marketing Manager', country: 'UK', _leaf: true },\n { name: 'Charlie', department: 'Engineering', jobTitle: 'Junior Software Engineer', country: 'USA', _leaf: true },\n { name: 'David', department: 'Sales', jobTitle: 'Sales Representative', country: 'China', _leaf: true },\n { name: 'Eve', department: 'Marketing', jobTitle: 'Content Marketer', country: 'UK', _leaf: true },\n { name: 'Frank', department: 'Engineering', jobTitle: 'Software Engineer', country: 'USA', _leaf: true },\n { name: 'Grace', department: 'Sales', jobTitle: 'Sales Manager', country: 'China', _leaf: true },\n { name: 'Heidi', department: 'Engineering', jobTitle: 'Junior Software Engineer', country: 'USA', _leaf: true },\n { name: 'Ivan', department: 'Marketing', jobTitle: 'Social Media Marketer', country: 'UK', _leaf: true },\n { name: 'Judy', department: 'Sales', jobTitle: 'Sales Representative', country: 'China', _leaf: true },\n { name: 'Kevin', department: 'Engineering', jobTitle: 'Software Engineer', country: 'USA', _leaf: true },\n { name: 'Luna', department: 'Marketing', jobTitle: 'Marketing Coordinator', country: 'UK', _leaf: true },\n { name: 'Mike', department: 'Engineering', jobTitle: 'Junior Software Engineer', country: 'USA', _leaf: true },\n { name: 'Nora', department: 'Sales', jobTitle: 'Sales Manager', country: 'China', _leaf: true },\n { name: 'Oscar', department: 'Engineering', jobTitle: 'Intern', country: 'USA', _leaf: true }\n]" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "nameCol", "fieldName": "name", "expander": "true", "text": "Name", "width": "18em", "sortable": "false" }, "text": "nameCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "departmentCol", "fieldName": "department", "text": "Department", "width": "18em" }, "text": "departmentCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "jobTitleCol", "fieldName": "jobTitle", "text": "Job Title", "width": "18em" }, "text": "jobTitleCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "countryCol", "fieldName": "country", "text": "Country", "width": "-1" }, "text": "countryCol", "_expanded": true, "_icon": "column" } ] } ] }, { "_icon": "title", "text": "editableTreeTitle", "cls": "Wb.Title", "properties": { "cid": "editableTreeTitle", "title": "Editable tree" } }, { "_icon": "tree-view", "text": "editableTree", "cls": "Wb.Tree", "_expanded": true, "properties": { "cid": "editableTree", "columnsSortable": "true", "editable": "true", "height": "15em", "multiSelect": "true", "sorters": "area_name", "url": "demo-source?xaction=listAreaTree", "pagingBar": "true", "frame": "true" }, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "addBtn", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "addBtn", "text": "@Str.add", "icon": "add", "keys": "Ctrl+E" }, "events": { "click": "//Some related methods: tree.add()/tree.addData()/tree.insert()/tree.insertData()/tree.insertXXX()/tree.insertDataXXX() etc.\napp.editableTree.addRecord({ area_name: 'New item', _checked: false });" } }, { "_icon": "item", "text": "editBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "editBtn", "text": "@Str.edit", "icon": "edit", "keys": "Ctrl+J" }, "events": { "click": "let firstRec = app.editableTree.firstItem;\nif (firstRec) {\n firstRec.set({ sid: 'code', area_name: 'new name' });\n app.editableTree.startEdit(firstRec, 'area_name');\n firstRec.highlight();\n}" } }, { "_icon": "item", "text": "delBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "delBtn", "text": "@Str.del", "icon": "delete", "keys": "Ctrl+D" }, "events": { "click": "//Some related methods: tree.destroySelection()/item.destroy()/Wb.destroy(items);\napp.editableTree.delRecords();" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "addChild", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "addChild", "text": "Add Child", "icon": "insert" }, "events": { "click": "let tree = this.upBy(p => p instanceof Wb.Tree); //same as: app.editableTree\nlet firstNode = tree.items[0], newNode;\nfirstNode.expand(n => {\n newNode = firstNode.addData({ area_name: 'new node', _leaf: true, _icon: 'earth', _checked: true });\n //other relative methods: insertData, insertDataBefore, insertDataAfter, insert, add etc\n newNode.select();\n});" } }, { "_icon": "divider", "text": "divider2", "cls": "Wb.Divider", "properties": { "cid": "divider2" } }, { "_icon": "item", "text": "saveBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "saveBtn", "text": "@Str.save", "icon": "save", "keys": "Ctrl+S" }, "events": { "click": "app.editableTree.sync({\n url: xpath, //Should be changed to a valid URL\n success() {\n Wb.tipDone();\n }\n});" } } ] }, { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "areaNameCol", "text": "Area name", "fieldName": "area_name", "expander": "true", "width": "-1" }, "text": "areaNameCol", "_expanded": true, "_icon": "column", "items": [ { "cls": "Wb.Text", "properties": { "cid": "editor", "isProperty": "true", "required": "true" }, "text": "editor", "_expanded": true, "_icon": "text" } ] }, { "cls": "Wb.Column", "properties": { "cid": "sidCol", "text": "Id", "fieldName": "sid", "width": "15em" }, "text": "sidCol", "_expanded": true, "_icon": "column", "items": [ { "cls": "Wb.Text", "properties": { "cid": "editor", "isProperty": "true", "required": "true" }, "text": "editor", "_expanded": true, "_icon": "text" } ] }, { "cls": "Wb.Column", "properties": { "cid": "parentIdCol", "text": "Parent id", "fieldName": "parent_id", "width": "15em" }, "text": "parentIdCol", "_expanded": true, "_icon": "column", "items": [ { "_icon": "combo", "text": "editor", "cls": "Wb.Select", "properties": { "cid": "editor", "isProperty": "true", "forceSelect": "true", "url": "demo-source?xaction=areaSearch", "textField": "sid", "required": "true" } } ] } ] } ] } ] } ] } # example/comps/view.xwl Title: view ```json { "title": "", "icon": "list-view", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "links": "[\n \"wb/css/demo.css\"\n]", "description": "demo-source=example/common/demo-source.xwl" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n /** @property {Array} - Common view data. */\n viewData: [\n { icon: 'user', text: 'User Management' },\n { icon: 'support', text: 'Support Service' },\n { icon: 'list', text: 'Consumption List' },\n { icon: 'preview', text: 'Disabled Item', _disabled: true, _tip: 'This item is disabled' },\n { icon: 'gear', text: 'System Settings' },\n { icon: 'truck', text: 'The text content of this item is too long and maybe overflowed' },\n { icon: 'database', text: 'Database Management' },\n { icon: 'flow1', text: 'WorkFlow Design' }\n ]\n});" }, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "View", "cls": "w-title3" } }, { "_icon": "title", "text": "commonViewTitle", "cls": "Wb.Title", "properties": { "cid": "commonViewTitle", "title": "Common view" }, "_expanded": true }, { "_icon": "label", "text": "commonItemTplViewLabel", "cls": "Wb.Label", "properties": { "cid": "commonItemTplViewLabel", "text": "Define the content of ViewItem by defining itemTpl." } }, { "_icon": "list-view", "text": "commonItemTplView", "cls": "Wb.View", "properties": { "cid": "commonItemTplView", "itemTpl": "

{text}

", "layout": "column", "data": "app.viewData", "height": "15em" }, "_expanded": true }, { "_icon": "label", "text": "commonItemTplFnViewLabel", "cls": "Wb.Label", "properties": { "cid": "commonItemTplFnViewLabel", "text": "Define the content of ViewItem by defining itemTplFn." } }, { "_icon": "list-view", "text": "commonItemTplFnView", "cls": "Wb.View", "properties": { "cid": "commonItemTplFnView", "layout": "column", "data": "app.viewData", "height": "15em", "frame": "true", "itemTplFn": "//Warning: [Wb.toHTML] must be used to convert value to HTML to avoid potential XSS security risks\n\nreturn `

${Wb.toHTML(data.text)}

`;" }, "_expanded": true }, { "_icon": "title", "text": "customItemViewTitle", "cls": "Wb.Title", "properties": { "cid": "customItemViewTitle", "title": "Customized item itself" }, "_expanded": true }, { "_icon": "label", "text": "customItemViewLabel", "cls": "Wb.Label", "properties": { "cid": "customItemViewLabel", "text": "Define ViewItem itself by identifying the \"w-item\" class in itemTpl." } }, { "_icon": "label", "text": "fixed4ColumnsLabel", "cls": "Wb.Label", "properties": { "cid": "fixed4ColumnsLabel", "text": "Fixed 4 columns" } }, { "_icon": "list-view", "text": "fixed4ColumnsView", "cls": "Wb.View", "properties": { "cid": "fixed4ColumnsView", "itemTpl": "

{text}

", "data": "app.viewData", "resizable": "true", "frame": "true", "bodyCls": "w-grid4 w-padding w-gapd5" } }, { "_icon": "label", "text": "autoWrapItemsLabel", "cls": "Wb.Label", "properties": { "cid": "autoWrapItemsLabel", "text": "Auto wrap items with fixed item width" }, "_expanded": true }, { "_icon": "list-view", "text": "autoWrapView", "cls": "Wb.View", "properties": { "cid": "autoWrapView", "itemTpl": "

{text}

", "data": "app.viewData", "resizable": "true", "frame": "true", "bodyCls": "w-form w-padding w-gapd5" } }, { "_icon": "label", "text": "noWrapItemsLabel", "cls": "Wb.Label", "properties": { "cid": "noWrapItemsLabel", "text": "No wrap items with fixed item width and stick selection" }, "_expanded": true }, { "_icon": "list-view", "text": "noWrapView", "cls": "Wb.View", "properties": { "cid": "noWrapView", "itemTpl": "

{text}

", "data": "app.viewData", "multiSelect": "true", "resizable": "true", "frame": "true", "bodyCls": "w-row w-padding w-gapd5 w-visible-all", "stickSelect": "true" }, "events": { "click": "let view = this, target = e.target;\nif (target.closest('[cid=menu-btn]')) {\n let menu;\n menu = app.viewContextMenu ??= new Wb.Menu({\n items: [\n {\n text: 'Item 1', icon: 'grid', handler() {\n Wb.tip('Click at ' + app.currentWrapViewData.text);\n }\n },\n { text: 'Item 2', icon: 'earth' }\n ]\n });\n app.currentWrapViewData = target.getClosestComp().data;\n menu.showBy(target);\n}" } }, { "_icon": "title", "text": "variousTemplateSyntaxTitle", "cls": "Wb.Title", "properties": { "cid": "variousTemplateSyntaxTitle", "title": "Various template syntax" }, "_expanded": true }, { "_icon": "label", "text": "useItemTplLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "useItemTplLabel", "text": "Use itemTpl" } }, { "_icon": "list-view", "text": "variousItemTplSyntaxView", "cls": "Wb.View", "properties": { "cid": "variousItemTplSyntaxView", "itemTpl": "\n

{num}

{[data.money.usd]}

{[data.date.dateTimeText12]}

{for data.array}{if index > 0}, {/if}{[index + 1]}: {[value]}{/for}

", "layout": "column", "data": "[\n { num: 1, money: 581234.56, date: new Date(), array: ['item1', 'item2', 'item3'] },\n { num: 2, money: 324549.7, date: new Date(), array: ['item4', 'item5', 'item6'] },\n { num: 3, money: 53543.28, date: new Date(), array: ['item7', 'item8', 'item9'] }\n]", "resizable": "true", "frame": "true" }, "_expanded": true }, { "_icon": "label", "text": "useItemTplFnLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "useItemTplFnLabel", "text": "Use itemTplFn with fixed header" } }, { "_icon": "list-view", "text": "useItemTplFnView", "cls": "Wb.View", "properties": { "cid": "useItemTplFnView", "layout": "column", "data": "[\n { num: 1, money: 581234.56, date: new Date(), array: ['item1', 'item2', 'item3'] },\n { num: 2, money: 324549.7, date: new Date(), array: ['item4', 'item5', 'item6'] },\n { num: 3, money: 53543.28, date: new Date(), array: ['item7', 'item8', 'item9'] }\n]", "resizable": "true", "frame": "true", "itemTplFn": "//Warning: [Wb.toHTML] must be used to convert value to HTML to avoid potential XSS security risks\n\nlet arrayText = '';\ndata.array.forEach((item, i) => {\n if (i > 0)\n arrayText += ', ';\n arrayText += '' + (i + 1) + ': ' + Wb.toHTML(item) + '';\n});\nreturn `

${Wb.toHTML(data.num)}

${Wb.toHTML(data.money.usd)}

${Wb.toHTML(data.date.dateTimeText12)}

${arrayText}

`;", "html": "

Money

Date

Content

", "height": "12em" }, "_expanded": true }, { "_icon": "title", "text": "nameListTitle", "cls": "Wb.Title", "properties": { "cid": "nameListTitle", "title": "Name list with remote data" }, "_expanded": true }, { "_icon": "label", "text": "nameListLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "nameListLabel", "text": "A common way to display a list of names with remote data and remote pagination." } }, { "_icon": "list-view", "text": "nameListView", "cls": "Wb.View", "properties": { "cid": "nameListView", "itemTpl": "

{full_name}

{code}

{[new Date().format('HH:mm')]}

", "resizable": "true", "frame": "true", "url": "demo-source?xaction=staffDict", "height": "20em", "pagingBar": "true", "pageSize": "10" }, "_expanded": true, "events": { "itemclick": "if (e.target.closest('[cid=xicon]')) {\n Wb.tip('Click icon at: ' + item.data.full_name);\n}" } }, { "_icon": "title", "text": "tagListTitle", "cls": "Wb.Title", "properties": { "cid": "tagListTitle", "title": "Tag style list" }, "_expanded": true }, { "_icon": "label", "text": "tagListLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "tagListLabel", "text": "Display a list of tags with customized css and closed button." } }, { "_icon": "list-view", "text": "tagListView", "cls": "Wb.View", "properties": { "cid": "tagListView", "itemTpl": "

{full_name}

", "resizable": "true", "frame": "true", "url": "demo-source?xaction=staffDict", "height": "15em", "bodyCls": "w-form w-padding w-gapd5", "cls": "d-tag", "multiSelect": "true", "rectSelect": "true", "captureClass": ".w-close-btn" }, "_expanded": true, "events": { "captureclick": "if (e.target.closest('.w-close-btn'))\n item.destroy();" } }, { "_icon": "title", "text": "pagingTitle", "cls": "Wb.Title", "properties": { "cid": "pagingTitle", "title": "Pagination display" }, "_expanded": true }, { "_icon": "label", "text": "remoteDataPagingLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "remoteDataPagingLabel", "text": "Remote data pagination" } }, { "_icon": "list-view", "text": "remotePagingView", "cls": "Wb.View", "properties": { "cid": "remotePagingView", "itemTpl": "

{code} - {full_name}

", "resizable": "true", "frame": "true", "url": "demo-source?xaction=staffDict", "height": "20em", "pagingBar": "pageNums", "pageSize": "10" }, "_expanded": true }, { "_icon": "label", "text": "cachedPagingLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "cachedPagingLabel", "text": "Caching remote data and paging locally." } }, { "_icon": "list-view", "text": "cachedPagingView", "cls": "Wb.View", "properties": { "cid": "cachedPagingView", "itemTpl": "

{code} - {full_name}

", "resizable": "true", "frame": "true", "url": "demo-source?xaction=staffDict", "height": "20em", "pagingBar": "pageNums", "pageSize": "10", "cached": "true" }, "_expanded": true }, { "_icon": "label", "text": "localDataPagingLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "localDataPagingLabel", "text": "Local data pagination" } }, { "_icon": "list-view", "text": "localDataPagingView", "cls": "Wb.View", "properties": { "cid": "localDataPagingView", "layout": "column", "resizable": "true", "height": "15em", "frame": "true", "localData": "[\n { text: 'item1' }, { text: 'item2' }, { text: 'item3' }, { text: 'item4' }, { text: 'item5' },\n { text: 'item6' }, { text: 'item7' }, { text: 'item8' }, { text: 'item9' }, { text: 'item10' },\n { text: 'item11' }, { text: 'item12' }, { text: 'item13' }, { text: 'item14' }, { text: 'item15' },\n { text: 'item16' }, { text: 'item17' }, { text: 'item18' }, { text: 'item19' }\n]", "pagingBar": "true", "pageSize": "10", "itemTpl": "

{text}

" }, "_expanded": true }, { "_icon": "label", "text": "bottomNextPageLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "bottomNextPageLabel", "text": "Auto load next page when scroll to the bottom" } }, { "_icon": "list-view", "text": "bottomNextPageView", "cls": "Wb.View", "properties": { "cid": "bottomNextPageView", "itemTpl": "

{code} - {full_name}

", "resizable": "true", "frame": "true", "url": "demo-source?xaction=staffDict", "height": "20em", "pageSize": "10", "autoPaging": "true" }, "_expanded": true }, { "_icon": "label", "text": "topNextPageLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "topNextPageLabel", "text": "Auto load next page when scroll to the top" } }, { "_icon": "list-view", "text": "topNextPageView", "cls": "Wb.View", "properties": { "cid": "topNextPageView", "itemTpl": "

{code} - {full_name}

", "resizable": "true", "frame": "true", "url": "demo-source?xaction=staffDictDesc", "height": "20em", "pageSize": "10", "autoPaging": "false", "reverseData": "true", "autoToBottom": "true" }, "_expanded": true }, { "_icon": "title", "text": "miscViewTitle", "cls": "Wb.Title", "properties": { "cid": "miscViewTitle", "title": "Miscillaneous view" }, "_expanded": true }, { "_icon": "list-view", "text": "miscView", "cls": "Wb.View", "properties": { "cid": "miscView", "itemTpl": "

{text}

", "layout": "grid4", "data": "app.viewData", "multiSelect": "true", "rectSelect": "true", "resizable": "true", "frame": "true", "keyWalking": "true", "bodyCls": "w-grid4", "padding": "2em", "gap": "2em", "reserveScrollbar": "true", "draggable": "true", "droppable": "demo.miscView" }, "events": { "itemdrop": "Wb.tip('Drop items: ' + draggable.dropItems.length + '\\nDest: ' + draggable.dest.data.text + '\\nMode: ' + draggable.mode);" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true", "gap": ".5em" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "selectItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "selectItem", "text": "Select" }, "events": { "click": "let miscView = app.miscView;\nmiscView.selection = [miscView.items[0], miscView.items[1]];\n// miscView.items[2].selected = true;" } }, { "_icon": "item", "text": "deselectItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "deselectItem", "text": "Deselect" }, "events": { "click": "app.miscView.deselectAll();" } }, { "_icon": "item", "text": "addItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "addItem", "text": "Add" }, "events": { "click": "let item = app.miscView.addData({ text: 'New Item', icon: 'earth' });\nitem.selected = true;\nitem.highlight();\n// app.miscView.add({ data: { text: 'New Item', icon: 'earth' } }); //equals above" } }, { "_icon": "item", "text": "insertItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "insertItem", "text": "Insert" }, "events": { "click": "let item = app.miscView.insertData(1, { text: 'Insert Item', icon: 'record' });\nitem.selected = true;\nitem.highlight();\n// app.miscView.insert(1, { data: { text: 'Insert Item', icon: 'record' } }); //equals above" } }, { "_icon": "item", "text": "deleteItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "deleteItem", "text": "Delete" }, "events": { "click": "app.miscView.firstItem?.destroy();" } }, { "_icon": "item", "text": "deleteSelectionsItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "deleteSelectionsItem", "text": "Delete selections" }, "events": { "click": "let view = app.miscView;\n\nif (!view.selections.length) {\n Wb.tipSelect();\n return;\n}\nview.destroySelections();" } }, { "_icon": "item", "text": "updateItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "updateItem", "text": "Update" }, "events": { "click": "let item = app.miscView.items[0];\n\nif (item) {\n item.set('text', 'Updated'); // equals to: item.proxy.text='Updated';\n item.set('icon', 'flower'); // equals to: item.proxy.icon='flower';\n item.focus();\n item.highlight();\n // item.update({ text: 'Updated', icon: 'flower' }); // More effective when updating multiple properties\n // item.data = { text: 'Updated', icon: 'flower' }; // Update all data\n}" } } ] } ] }, { "_icon": "component", "text": "miscDescComp", "cls": "Wb.Component", "properties": { "cid": "miscDescComp", "html": "

Feature List:

Drag to draw a rectangle to select items.
Press key to enter name in the view can navigate to the specified item.
Maintain scrollbar position after reloading data.
Intelligent navigate to specified item based on arrow key direction.
Drag-and-Drop support.

", "textSelectable": "false" } }, { "_icon": "title", "text": "listViewTitle", "cls": "Wb.Title", "properties": { "cid": "listViewTitle", "title": "List view" }, "_expanded": true }, { "_icon": "label", "text": "listViewLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "listViewLabel", "text": "List items in the specified pattern" } }, { "_icon": "list1", "text": "listView", "cls": "Wb.ListView", "properties": { "cid": "listView", "height": "20em", "url": "demo-source?xaction=staffDict", "textField": "full_name", "subtextField": "code", "defaultFields": "({\n _icon: { value: 'user2' },\n badge: { value: 8 },\n iconvalue: { value: 'bell-off' },\n datevalue: { value: new Date() }\n})", "resizable": "true" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "events": { "buttonclick": "app.listView.viewType = button.cid;" }, "properties": { "cid": "tbar", "isProperty": "true", "gap": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "smallList", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "smallList", "text": "Small List", "groupName": "viewType", "active": "true" } }, { "_icon": "item", "text": "list", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "list", "text": "List", "groupName": "viewType", "active": "true" } }, { "_icon": "item", "text": "smallIcon", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "smallIcon", "text": "Small Icon", "groupName": "viewType" } }, { "_icon": "item", "text": "mediumIcon", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "mediumIcon", "text": "Medium Icon", "groupName": "viewType" } }, { "_icon": "item", "text": "bigIcon", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "bigIcon", "text": "Big Icon", "groupName": "viewType" } } ] } ] }, { "_icon": "title", "text": "iconViewTitle", "cls": "Wb.Title", "properties": { "cid": "iconViewTitle", "title": "Icon view" }, "_expanded": true }, { "_icon": "label", "text": "iconViewLabel", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "iconViewLabel", "text": "Display items with a big icon and text label, set layout to \"grid4\" to display 4 fixed columns, set \"padding\" and \"gap\" to adjust space." } }, { "_icon": "icon-list", "text": "iconView", "cls": "Wb.IconView", "properties": { "cid": "iconView", "data": "app.viewData", "iconField": "icon", "resizable": "true", "selectColor": "active", "defaultFields": "({\n badge: { value: 99 }\n})", "layout": "grid4", "padding": ".5em", "gap": "1em" }, "events": { "itemclick": "Wb.tip(item.data.text + ' clicked');" } }, { "_icon": "title", "text": "checkViewTitle", "cls": "Wb.Title", "properties": { "cid": "checkViewTitle", "title": "Check view" }, "_expanded": true }, { "_icon": "label", "text": "checkViewLabel1", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "checkViewLabel1", "text": "Display items for single or multiple check" } }, { "_icon": "check7", "text": "checkView1", "cls": "Wb.CheckView", "properties": { "cid": "checkView1", "data": "[\n { text: 'Chrome', value: 1, _icon: 'chrome' },\n { text: 'Edge', value: 2, _icon: 'edge', _selected: true },\n { text: 'Firefox', value: 3, _icon: 'firefox' },\n { text: 'Safari', value: 4, _icon: 'safari' },\n { text: 'Image icon', value: 5, _img: 'wb/images/chart.png' }\n]", "multiSelect": "true", "maxWidth": "15em" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true", "gap": ".5em" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "setValueItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "setValueItem", "text": "Set Value" }, "events": { "click": "app.checkView1.value = [2, 3];" } }, { "_icon": "item", "text": "getValueItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "getValueItem", "text": "Get Value" }, "events": { "click": "Wb.tip('The value is: ' + Wb.encode(app.checkView1.value));" } } ] } ] } ] } ] } # example/comps/visual.xwl Title: visual ```json { "title": "", "icon": "image", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Image, Video and Icon", "cls": "w-title3" } }, { "_icon": "title", "text": "imageVideoIconListTitle", "cls": "Wb.Title", "properties": { "cid": "imageVideoIconListTitle", "title": "Image, video and icon list" } }, { "_icon": "container", "text": "imageVideoIconListCt", "cls": "Wb.Container", "properties": { "cid": "imageVideoIconListCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "label", "text": "commonImageLabel", "cls": "Wb.Label", "properties": { "cid": "commonImageLabel", "text": "Common image with click preview feature" } }, { "_icon": "image", "text": "commonImage", "cls": "Wb.Image", "properties": { "cid": "commonImage", "src": "wb/images/app/logo.png", "height": "6em", "clickPreview": "true", "width": "6em" } }, { "_icon": "label", "text": "commonPictureLabel", "cls": "Wb.Label", "properties": { "cid": "commonPictureLabel", "text": "Common picture with click preview feature" } }, { "_icon": "picture", "text": "commonPicture", "cls": "Wb.Picture", "properties": { "cid": "commonPicture", "src": "wb/images/app/logo.png", "clickPreview": "true" } }, { "_icon": "label", "text": "originalSizeLabel", "cls": "Wb.Label", "properties": { "cid": "originalSizeLabel", "text": "Original size image" } }, { "_icon": "image", "text": "originalSizeImage", "cls": "Wb.Image", "properties": { "cid": "originalSizeImage", "src": "wb/images/support.png", "size": "auto", "width": "6em", "height": "5em" } }, { "_icon": "label", "text": "videoLabel", "cls": "Wb.Label", "properties": { "cid": "videoLabel", "text": "Video" } }, { "_icon": "video", "text": "demoVideo", "cls": "Wb.Video", "properties": { "cid": "demoVideo", "src": "https://59b5fe18-b640-4ed9-a7d0-5867d0563fe4.mdnplay.dev/shared-assets/videos/flower.mp4", "height": "20em", "controls": "true" } }, { "_icon": "label", "text": "commonIconLabel", "cls": "Wb.Label", "properties": { "cid": "commonIconLabel", "text": "Common icon" } }, { "_icon": "logo", "text": "commonIcon", "cls": "Wb.Icon", "properties": { "cid": "commonIcon", "icon": "gear" }, "_expanded": true }, { "_icon": "label", "text": "commonImageIconLabel", "cls": "Wb.Label", "properties": { "cid": "commonImageIconLabel", "text": "Image icon" } }, { "_icon": "logo", "text": "commonImageIcon", "cls": "Wb.Icon", "properties": { "cid": "commonImageIcon", "img": "support" }, "_expanded": true }, { "_icon": "label", "text": "anySizeIconLabel", "cls": "Wb.Label", "properties": { "cid": "anySizeIconLabel", "text": "Any size icon, image and char Icon" } }, { "_icon": "container", "text": "anySizeCt", "cls": "Wb.Container", "properties": { "cid": "anySizeCt", "layout": "form" }, "_expanded": true, "items": [ { "_icon": "logo", "text": "icon1", "cls": "Wb.Icon", "_expanded": true, "properties": { "cid": "icon1", "icon": "flower" } }, { "_icon": "logo", "text": "icon2", "cls": "Wb.Icon", "_expanded": true, "properties": { "cid": "icon2", "fontSize": "1.2em", "img": "field" } }, { "_icon": "logo", "text": "icon3", "cls": "Wb.Icon", "_expanded": false, "properties": { "cid": "icon3", "fontSize": "1.5em", "icon": "🏥" } }, { "_icon": "logo", "text": "icon4", "cls": "Wb.Icon", "_expanded": false, "properties": { "cid": "icon4", "fontSize": "2em", "icon": "list" } }, { "_icon": "logo", "text": "icon5", "cls": "Wb.Icon", "_expanded": false, "properties": { "cid": "icon5", "fontSize": "3em", "icon": "🥋" } }, { "_icon": "logo", "text": "icon6", "cls": "Wb.Icon", "_expanded": false, "properties": { "cid": "icon6", "fontSize": "4em", "icon": "🎭" } } ] } ] } ] } ] } # example/comps/web-socket/actions.xwl Title: actions ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Send text to \"wb.ws.commonSocket\" of current user.\n */\n sendTextToCurrentUser() {\n Wb.send(Params.text, 'wb.ws.commonSocket');\n },\n /**\n * Send binary to \"wb.ws.binarySocket\" of current user.\n */\n sendBinaryToCurrentUser() {\n // Caution: if use Wb.send(inputStream, 'wb.ws.binarySocket') to send InputStream,\n // only the first websocket client will receive data, because the InputStream is unidirectional\n\n let bytes = new Wb.File(true, 'wb/images/app/logo.png').bytes;\n Wb.send(bytes, 'wb.ws.binarySocket');\n },\n /**\n * Send text to \"wb.ws.commonSocket\" of the specified user.\n */\n sendTextToSpecifiedUser() {\n Wb.send(Params.text, 'wb.ws.commonSocket', 'admin');\n },\n /**\n * Broadcast JSON to \"wb.ws.commonSocket\" of all users.\n */\n broadcastJSONToSpecifiedUser() {\n //use Wb.serialize/Wb.deserialize to send object\n Wb.send({ text: 'text message', number: 123 }, 'wb.ws.commonSocket', true);\n },\n /**\n * Receive data from client web socket.\n */\n receiveData() {\n //Global parameters:\n //data: data sent by the client websocket\n //event: message, open, close, error\n //session: websocket session\n //httpSession: http session; may be invalidated\n //closeReason: close reason\n //error: exception object\n\n if (event == 'message') {\n let value;\n\n if (data instanceof InputStream)\n value = IOUtils.toString(data); // data is ByteArrayInputStream, no need to close\n else\n value = data;\n Wb.log('Received: ' + value);\n Wb.send('result'); // send text to the client web socket\n // Wb.send(inputStream); // send inputStream to the client web socket\n // Wb.send(bytes); // send bytes to the client web socket\n }\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/comps/web-socket.xwl Title: web-socket ```json { "title": "", "icon": "plug", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "plug", "text": "commonSocket", "cls": "Wb.Socket", "properties": { "cid": "commonSocket", "name": "wb.ws.commonSocket" }, "events": { "message": "// let object = Wb.decode(e.data); // if e.data is JSON text\nWb.tip('Received: ' + e.data);" } }, { "_icon": "plug", "text": "xwlSocket", "cls": "Wb.Socket", "_expanded": true, "properties": { "cid": "xwlSocket", "name": "wb.ws.xwlSocket", "xwl": "@xpath + \"/actions {xaction: 'receiveData'}\"" }, "events": { "message": "Wb.tip('Received: ' + e.data);" } }, { "_icon": "plug", "text": "binarySocket", "cls": "Wb.Socket", "_expanded": false, "properties": { "cid": "binarySocket", "name": "wb.ws.binarySocket" }, "events": { "message": "let blob = e.data;\nWb.readBlob(blob, value => {\n Wb.tip('

', true);\n});" } }, { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "WebSocket", "cls": "w-title3" } }, { "_icon": "label", "text": "sendTextToCurrentUserLabel", "cls": "Wb.Label", "properties": { "cid": "sendTextToCurrentUserLabel", "text": "Send text to the specified web socket of current user" } }, { "_icon": "button", "text": "sendTextToCurrentUserBtn", "cls": "Wb.Button", "properties": { "cid": "sendTextToCurrentUserBtn", "text": "Send text to current user", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=sendTextToCurrentUser',\n params: { text: 'text message' }\n});" } }, { "_icon": "label", "text": "sendBinaryToCurrentUserLabel", "cls": "Wb.Label", "properties": { "cid": "sendBinaryToCurrentUserLabel", "text": "Send binary to the specified web socket of current user" } }, { "_icon": "button", "text": "sendBinaryToCurrentUserBtn", "cls": "Wb.Button", "properties": { "cid": "sendBinaryToCurrentUserBtn", "text": "Send binary to current user", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=sendBinaryToCurrentUser'\n});" } }, { "_icon": "label", "text": "sendTextToSpecifyUserLabel", "cls": "Wb.Label", "properties": { "cid": "sendTextToSpecifyUserLabel", "text": "Send text to the specified web socket of the specified user" } }, { "_icon": "button", "text": "sendTextToSpecifiedUserBtn", "cls": "Wb.Button", "properties": { "cid": "sendTextToSpecifiedUserBtn", "text": "Send text to \"admin\" user", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=sendTextToSpecifiedUser',\n params: { text: 'text message' }\n});" } }, { "_icon": "label", "text": "broadcastJsonToAllUsersLabel", "cls": "Wb.Label", "properties": { "cid": "broadcastJsonToAllUsersLabel", "text": "Broadcast JSON to the specified web socket of all users" } }, { "_icon": "button", "text": "broadcastJsonToAllUsersBtn", "cls": "Wb.Button", "properties": { "cid": "broadcastJsonToAllUsersBtn", "text": "Broadcast JSON to all users", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=broadcastJSONToSpecifiedUser'\n});" } }, { "_icon": "label", "text": "sendTextBySocketLabel", "cls": "Wb.Label", "properties": { "cid": "sendTextBySocketLabel", "text": "Send text to the specified xwl module by xwlSocket" } }, { "_icon": "button", "text": "sendTextBySocketBtn", "cls": "Wb.Button", "properties": { "cid": "sendTextBySocketBtn", "text": "Send text by socket", "type": "primary" }, "events": { "click": "app.xwlSocket.send('text');" } }, { "_icon": "label", "text": "sendBinaryBySocketLabel", "cls": "Wb.Label", "properties": { "cid": "sendBinaryBySocketLabel", "text": "Send binary to the specified xwl module by xwlSocket" } }, { "_icon": "button", "text": "sendBinaryBySocketBtn", "cls": "Wb.Button", "properties": { "cid": "sendBinaryBySocketBtn", "text": "Send binary by socket", "type": "primary" }, "events": { "click": "let blob = new Blob([Wb.encode({ foo: 'bar' })], { type: 'application/json' });\napp.xwlSocket.send(blob);" } } ] } ] } # example/comps/window.xwl Title: window ```json { "title": "", "icon": "window", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n //Define Share tip\n myShareTip: new Wb.Tip({\n cls: 'w-error-color', fontSize: '1.5em', padding: '.2em', events: {\n beforetip(comp) {\n this.text = 'My share tip: ' + comp.cid;\n }\n }\n })\n});" }, "items": [ { "_icon": "array", "text": "components", "cls": "Wb.Array", "properties": { "cid": "components" }, "_expanded": true, "items": [ { "_icon": "window", "text": "dynamicNewWin", "cls": "Wb.Window", "_expanded": false, "properties": { "cid": "dynamicNewWin", "instanced": "false", "layout": "grid1", "closeAction": "destroy", "title": "Dynamic window" }, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Your name" } }, { "_icon": "calendar", "text": "date1", "cls": "Wb.Date", "properties": { "cid": "date1", "text": "Birth date" }, "_expanded": true } ] }, { "_icon": "window", "text": "modalWin", "cls": "Wb.Window", "_expanded": false, "properties": { "cid": "modalWin", "modal": "true", "icon": "bluetooth1", "title": "Modal window", "layout": "grid1" }, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Your name" } }, { "_icon": "calendar", "text": "date1", "cls": "Wb.Date", "properties": { "cid": "date1", "text": "Birth date" }, "_expanded": true } ] }, { "_icon": "window", "text": "autoResetWin", "cls": "Wb.Window", "_expanded": false, "properties": { "cid": "autoResetWin", "icon": "bluetooth1", "title": "Auto reset window", "layout": "grid1", "resetDialog": "true" }, "items": [ { "_icon": "label", "text": "label1", "cls": "Wb.Label", "properties": { "cid": "label1", "text": "The values of all controls will be automatically reset after the window is hidden" } }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Your name" }, "_expanded": true }, { "_icon": "text", "text": "text2", "cls": "Wb.Text", "properties": { "cid": "text2", "value": "abc", "text": "Default value" } }, { "_icon": "calendar", "text": "date1", "cls": "Wb.Date", "properties": { "cid": "date1", "text": "Birth date" }, "_expanded": true } ] }, { "_icon": "dialog", "text": "normalDialog", "cls": "Wb.Dialog", "_expanded": false, "properties": { "cid": "normalDialog", "title": "Normal Dialog" }, "items": [ { "_icon": "options", "text": "showDialogOption", "cls": "Wb.Option", "properties": { "cid": "showDialogOption", "text": "Show custom dialog" }, "_expanded": true, "events": { "click": "app.customDialog.show();" } } ] }, { "_icon": "dialog", "text": "customDialog", "cls": "Wb.Dialog", "_expanded": false, "properties": { "cid": "customDialog", "title": "Custom Dialog", "layout": "grid1", "plainTitle": "false", "labelUp": "true", "titleCenter": "false" }, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Your name" } }, { "_icon": "calendar", "text": "date1", "cls": "Wb.Date", "properties": { "cid": "date1", "text": "Birth date" }, "_expanded": true }, { "_icon": "button", "text": "newDialog", "cls": "Wb.Button", "properties": { "cid": "newDialog", "text": "New Dialog", "type": "primary" }, "events": { "click": "app.newDialog.show();" } }, { "cls": "Wb.Array", "properties": { "cid": "tools" }, "text": "tools", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Item", "events": { "click": "Wb.tip(Str.set);" }, "properties": { "cid": "item1", "icon": "gear" }, "text": "item1", "_expanded": true, "_icon": "item" } ] }, { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "icon": "add", "text": "@Str.add" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "icon": "edit", "text": "@Str.edit" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "item3", "icon": "delete", "text": "@Str.del" } } ] } ] }, { "_icon": "dialog", "text": "newDialog", "cls": "Wb.Dialog", "_expanded": true, "properties": { "cid": "newDialog", "title": "New Dialog", "layout": "grid1" } }, { "_icon": "drawer", "text": "defaultDrawer", "cls": "Wb.Drawer", "properties": { "cid": "defaultDrawer", "layout": "fit", "icon": "fieldset", "title": "Default Drawer", "closable": "true", "focusControl": "false" }, "_expanded": false, "items": [ { "_icon": "toolbar", "text": "toolbar1", "cls": "Wb.Toolbar", "_expanded": true, "properties": { "cid": "toolbar1", "layout": "grid5", "vertical": "true" }, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "icon": "add", "text": "Item1", "iconAlign": "top", "iconSize": "2em" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "icon": "edit", "text": "Item2", "iconAlign": "top", "iconSize": "2em" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item3", "icon": "delete", "text": "Item3", "iconAlign": "top", "iconSize": "2em" } }, { "_icon": "item", "text": "item4", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item4", "icon": "book1", "text": "Item4", "iconAlign": "top", "iconSize": "2em" } }, { "_icon": "item", "text": "item5", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item5", "icon": "discovery", "text": "Item5", "iconAlign": "top", "iconSize": "2em" } }, { "_icon": "item", "text": "item6", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item6", "icon": "comment2", "text": "Item6", "iconAlign": "top", "iconSize": "2em" } }, { "_icon": "item", "text": "item7", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item7", "icon": "flow1", "text": "Item7", "iconAlign": "top", "iconSize": "2em" } }, { "_icon": "item", "text": "item8", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item8", "icon": "dict", "text": "Item8", "iconAlign": "top", "iconSize": "2em" } }, { "_icon": "item", "text": "item9", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item9", "icon": "grid", "text": "Item9", "iconAlign": "top", "iconSize": "2em" } }, { "_icon": "item", "text": "item10", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item10", "icon": "layout", "text": "Item10", "iconAlign": "top", "iconSize": "2em" } }, { "_icon": "line", "text": "line1", "cls": "Wb.Line", "properties": { "cid": "line1", "title": "My Title" } }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Input text", "gridColumn": "span 5" }, "_expanded": true }, { "_icon": "switcher-on", "text": "toggle1", "cls": "Wb.Toggle", "properties": { "cid": "toggle1", "text": "Toggle", "gridColumn": "span 5" } } ] }, { "cls": "Wb.Array", "properties": { "cid": "tools" }, "text": "tools", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Item", "properties": { "cid": "item1", "icon": "gear" }, "text": "item1", "_expanded": true, "_icon": "item" }, { "cls": "Wb.Item", "properties": { "cid": "item2", "icon": "share" }, "text": "item2", "_expanded": true, "_icon": "item" } ] } ] }, { "_icon": "drawer", "text": "rightDrawer", "cls": "Wb.Drawer", "properties": { "cid": "rightDrawer", "layout": "fit", "title": "Right Drawer", "dockPosition": "right" }, "_expanded": false, "items": [ { "_icon": "toolbar", "text": "toolbar1", "cls": "Wb.Toolbar", "properties": { "cid": "toolbar1", "type": "menu" }, "events": { "buttonclick": "Wb.tip(button.text + ' clicked');\nthis.parent.close();" }, "_expanded": true, "items": [ { "_icon": "item", "text": "item1", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item1", "icon": "favorite", "text": "Favorite Pages" } }, { "_icon": "item", "text": "item2", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item2", "icon": "gear", "text": "Setting" } }, { "_icon": "item", "text": "item3", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item3", "icon": "command", "text": "Command" } }, { "_icon": "item", "text": "item4", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item4", "icon": "word", "text": "Export to Word" } }, { "_icon": "item", "text": "item5", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item5", "icon": "excel", "text": "Export to Excel" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "item6", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item6", "icon": "print", "text": "Print" } }, { "_icon": "item", "text": "item7", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "item7", "icon": "table", "text": "Show Table" } } ] } ] }, { "_icon": "panel", "text": "hoverPanel", "cls": "Wb.Panel", "_expanded": false, "properties": { "cid": "hoverPanel", "layout": "grid1", "visible": "false", "minButtonWidth": "8em" }, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "text1", "text": "User name" } }, { "_icon": "calendar", "text": "date1", "cls": "Wb.Date", "_expanded": true, "properties": { "cid": "date1", "text": "Date" } }, { "cls": "Wb.Array", "properties": { "cid": "buttons" }, "text": "buttons", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Button", "events": { "click": "let panel = this.up('hoverPanel');\nWb.tip(Wb.encode(Wb.getValue(panel)));\npanel.hide();" }, "properties": { "cid": "button1", "icon": "ok", "text": "OK", "type": "primary" }, "text": "button1", "_expanded": true, "_icon": "button" }, { "cls": "Wb.Button", "events": { "click": "this.up('hoverPanel').hide();" }, "properties": { "cid": "button2", "text": "Cancel", "icon": "cancel" }, "text": "button2", "_expanded": true, "_icon": "button" } ] } ] }, { "_icon": "panel", "text": "hideGetValuePanel", "cls": "Wb.Panel", "_expanded": false, "properties": { "cid": "hideGetValuePanel", "layout": "grid1", "visible": "false", "minButtonWidth": "8em", "tagProperties": "({ closeOnEsc: false })" }, "items": [ { "_icon": "text", "text": "text1", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "text1", "text": "User name" } }, { "_icon": "calendar", "text": "date1", "cls": "Wb.Date", "_expanded": true, "properties": { "cid": "date1", "text": "Date" } } ] } ] }, { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Window and Tip", "cls": "w-title3" }, "_expanded": true }, { "_icon": "title", "text": "winTitle", "cls": "Wb.Title", "properties": { "cid": "winTitle", "title": "Window List" }, "_expanded": true }, { "_icon": "container", "text": "winCt", "cls": "Wb.Container", "properties": { "cid": "winCt", "layout": "form", "frame": "true", "cls": "w-rel", "height": "20em" }, "_expanded": true, "items": [ { "_icon": "button", "text": "dynamicNewWinBtn", "cls": "Wb.Button", "properties": { "cid": "dynamicNewWinBtn", "text": "Dynamic new window" }, "events": { "click": "let win = app.dynamicNewWin;\n\ndelete win.cid; //Prevent conflicts with the instance cid\nwin.owner = parentContainer; //make the win automatically destroy when parentContainer is destroyed\n\n//You can render the win to winCt by the following code:\n//win.renderEl = app.winCt.el; //Render to winCt, default render to BodyEl\n\nwin.x = Wb.random(70) + 'vw';\nwin.y = Wb.random(70) + 'vh';\nwin = Wb.create(win);\nwin.show();" } }, { "_icon": "button", "text": "showModalWinBtn", "cls": "Wb.Button", "properties": { "cid": "showModalWinBtn", "text": "Show modal window" }, "events": { "click": "app.modalWin.show();" } }, { "_icon": "button", "text": "showAutoResetWinBtn", "cls": "Wb.Button", "properties": { "cid": "showAutoResetWinBtn", "text": "Show auto reset window" }, "events": { "click": "app.autoResetWin.show();" } }, { "_icon": "window", "text": "normalWin", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "normalWin", "title": "Normal window", "width": "20em", "height": "10em", "visible": "true", "icon": "edit", "html": "Hide on Close", "layout": "center" }, "events": { "hide": "Wb.tip('Show again after 2 secs.')\nsetTimeout(f => app.normalWin.show().el.fadeIn(), 2000);" } }, { "_icon": "window", "text": "dialogWin", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "dialogWin", "title": "Dialog window without modal", "width": "20em", "height": "10em", "visible": "true", "dialog": "true", "modal": "false", "closeAction": "destroy", "html": "Destroy on Close", "layout": "center", "x": "23em", "collapsible": "true" }, "events": { "destroy": "Wb.tip(this.cid + ' is destroyed.');", "ok": "Wb.tip('You click \"' + Str.ok + '\" button.');\n// Close the window after performing asynchronous operation\n// let me = this;\n// Wb.ajax({\n// url,\n// success(resp) {\n// me.close();\n// }\n// });" } }, { "_icon": "window", "text": "noTitleWin", "cls": "Wb.Window", "_expanded": false, "properties": { "cid": "noTitleWin", "visible": "true", "titleBar": "false", "layout": "grid1", "labelUp": "true", "x": "45em" }, "items": [ { "_icon": "line", "text": "line1", "cls": "Wb.Line", "properties": { "cid": "line1", "title": "No title window", "dimTitle": "true" } }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Your name" } } ] } ] }, { "_icon": "title", "text": "messageTitle", "cls": "Wb.Title", "properties": { "cid": "messageTitle", "title": "Message" } }, { "_icon": "container", "text": "messageCt", "cls": "Wb.Container", "properties": { "cid": "messageCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "infoBtn", "cls": "Wb.Button", "properties": { "cid": "infoBtn", "text": "Info" }, "events": { "click": "Wb.info('Some information', f => Wb.tip('do something after show message'));" } }, { "_icon": "button", "text": "htmlInfoBtn", "cls": "Wb.Button", "properties": { "cid": "htmlInfoBtn", "text": "HTML Info" }, "events": { "click": "Wb.info('HTML information', null, true);" } }, { "_icon": "button", "text": "succBtn", "cls": "Wb.Button", "properties": { "cid": "succBtn", "text": "Succ" }, "events": { "click": "Wb.succ('Some information');" } }, { "_icon": "button", "text": "warnBtn", "cls": "Wb.Button", "properties": { "cid": "warnBtn", "text": "Warn" }, "events": { "click": "Wb.warn('Some information');" } }, { "_icon": "button", "text": "errorBtn", "cls": "Wb.Button", "properties": { "cid": "errorBtn", "text": "Error" }, "events": { "click": "Wb.error('Some information');" } }, { "_icon": "button", "text": "confirmBtn", "cls": "Wb.Button", "properties": { "cid": "confirmBtn", "text": "Confirm" }, "events": { "click": "Wb.confirm('Are you sure you want to delete?', f => Wb.tip('click OK'), f => Wb.tip('click Cancel'));" } }, { "_icon": "button", "text": "chooseBtn", "cls": "Wb.Button", "properties": { "cid": "chooseBtn", "text": "Choose" }, "events": { "click": "Wb.choose('Are you sure you want to save?', button => Wb.tip(button));" } }, { "_icon": "button", "text": "customizeBtn", "cls": "Wb.Button", "properties": { "cid": "customizeBtn", "text": "Customize" }, "events": { "click": "Wb.Window.showMessage({\n title: 'Customize', text: 'Some message', icon: 'share',\n name: 'sys.dialog', //name for shareing one dialog,\n buttons: [\n // The first button is the default enter button (press Enter to do), for more details see enterButton docs.\n { text: 'Primary', type: 'primary', cid: 'primary' },\n // The last button is the default esc button (press ESC or close dialog to do), for more details see escButton docs.\n { text: Str.cancel, cid: 'cancel' }\n ], callback(btn) {\n this.close();\n Wb.tip(btn + ' clicked');\n }\n});" } }, { "_icon": "button", "text": "fadeAnimateBtn", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "fadeAnimateBtn", "text": "Fade Animate" }, "events": { "click": "Wb.error('Some message').el.fadeIn();" } }, { "_icon": "button", "text": "slideAnimateBtn", "cls": "Wb.Button", "_expanded": true, "properties": { "cid": "slideAnimateBtn", "text": "Slide Animate" }, "events": { "click": "Wb.info('Some message', function () {\n this.show().el.slideOut({ callback: f => this.hide() });\n}).el.slideIn();" } } ] }, { "_icon": "title", "text": "tipTitle", "cls": "Wb.Title", "properties": { "cid": "tipTitle", "title": "Tip" } }, { "_icon": "container", "text": "tipCt", "cls": "Wb.Container", "properties": { "cid": "tipCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "infoBtn", "cls": "Wb.Button", "properties": { "cid": "infoBtn", "text": "Info" }, "events": { "click": "Wb.tip('Some information');" } }, { "_icon": "button", "text": "htmlInfoBtn", "cls": "Wb.Button", "properties": { "cid": "htmlInfoBtn", "text": "HTML tip" }, "events": { "click": "Wb.tip('HTML information', true);" } }, { "_icon": "button", "text": "succBtn", "cls": "Wb.Button", "properties": { "cid": "succBtn", "text": "Succ" }, "events": { "click": "Wb.tipSucc('Some information');" } }, { "_icon": "button", "text": "warnBtn", "cls": "Wb.Button", "properties": { "cid": "warnBtn", "text": "Warn" }, "events": { "click": "Wb.tipWarn('Some information');" } }, { "_icon": "button", "text": "errorBtn", "cls": "Wb.Button", "properties": { "cid": "errorBtn", "text": "Error" }, "events": { "click": "Wb.tipError('Some information');" } }, { "_icon": "button", "text": "tipSelectBtn", "cls": "Wb.Button", "properties": { "cid": "tipSelectBtn", "text": "Tip Select" }, "events": { "click": "Wb.tipSelect();" } }, { "_icon": "button", "text": "tipDoneBtn", "cls": "Wb.Button", "properties": { "cid": "tipDoneBtn", "text": "Tip Done" }, "events": { "click": "Wb.tipDone(Str.save);" } } ] }, { "_icon": "title", "text": "toastTitle", "cls": "Wb.Title", "properties": { "cid": "toastTitle", "title": "Toast" } }, { "_icon": "container", "text": "toastCt", "cls": "Wb.Container", "properties": { "cid": "toastCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "infoBtn", "cls": "Wb.Button", "properties": { "cid": "infoBtn", "text": "Info" }, "events": { "click": "Wb.toast('Some information');" } }, { "_icon": "button", "text": "htmlInfoBtn", "cls": "Wb.Button", "properties": { "cid": "htmlInfoBtn", "text": "HTML tip" }, "events": { "click": "Wb.toast('HTML information', true);" } }, { "_icon": "button", "text": "succBtn", "cls": "Wb.Button", "properties": { "cid": "succBtn", "text": "Succ" }, "events": { "click": "Wb.toastSucc('Some information');" } }, { "_icon": "button", "text": "warnBtn", "cls": "Wb.Button", "properties": { "cid": "warnBtn", "text": "Warn" }, "events": { "click": "Wb.toastWarn('Some information');" } }, { "_icon": "button", "text": "errorBtn", "cls": "Wb.Button", "properties": { "cid": "errorBtn", "text": "Error" }, "events": { "click": "Wb.toastError('Some information');" } } ] }, { "_icon": "title", "text": "dialogTitle", "cls": "Wb.Title", "properties": { "cid": "dialogTitle", "title": "Dialog" } }, { "_icon": "container", "text": "dialogCt", "cls": "Wb.Container", "properties": { "cid": "dialogCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "normalBtn", "cls": "Wb.Button", "properties": { "cid": "normalBtn", "text": "Normal dialog" }, "events": { "click": "app.normalDialog.show();" } }, { "_icon": "button", "text": "customBtn", "cls": "Wb.Button", "properties": { "cid": "customBtn", "text": "Custom dialog" }, "events": { "click": "app.customDialog.show();" } } ] }, { "_icon": "title", "text": "drawerTitle", "cls": "Wb.Title", "properties": { "cid": "drawerTitle", "title": "Drawer" } }, { "_icon": "container", "text": "drawerCt", "cls": "Wb.Container", "properties": { "cid": "drawerCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "defaultBtn", "cls": "Wb.Button", "properties": { "cid": "defaultBtn", "text": "Default drawer" }, "events": { "click": "app.defaultDrawer.show();" } }, { "_icon": "button", "text": "topBtn", "cls": "Wb.Button", "properties": { "cid": "topBtn", "text": "Top drawer" }, "events": { "click": "app.topDrawer ??= new Wb.Drawer({ dockPosition: 'top', height: '40vh', title: 'Top Drawer', plainTitle: true });\napp.topDrawer.show();" } }, { "_icon": "button", "text": "rightBtn", "cls": "Wb.Button", "properties": { "cid": "rightBtn", "text": "Right drawer" }, "events": { "click": "app.rightDrawer.show();" } }, { "_icon": "button", "text": "leftBtn", "cls": "Wb.Button", "properties": { "cid": "leftBtn", "text": "Left drawer" }, "events": { "click": "app.leftDrawer ??= new Wb.Drawer({ dockPosition: 'left', width: '40vw', title: 'Left Drawer' });\napp.leftDrawer.show();" } } ] }, { "_icon": "title", "text": "promptTitle", "cls": "Wb.Title", "properties": { "cid": "promptTitle", "title": "Prompt Window" } }, { "_icon": "container", "text": "promptCt", "cls": "Wb.Container", "properties": { "cid": "promptCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "promptStringBtn", "cls": "Wb.Button", "properties": { "cid": "promptStringBtn", "text": "Prompt string" }, "events": { "click": "Wb.promptString('Enter String', (text, win) => {\n Wb.tip('Enter \"' + text + '\".');\n win.close();\n}, 'old string');" } }, { "_icon": "button", "text": "promptTextBtn", "cls": "Wb.Button", "properties": { "cid": "promptTextBtn", "text": "Prompt text" }, "events": { "click": "Wb.promptText('Enter Text', (text, win) => {\n Wb.tip('Enter \"' + text + '\".');\n win.close();\n}, 'old text');" }, "_expanded": true }, { "_icon": "button", "text": "customPromptBtn", "cls": "Wb.Button", "properties": { "cid": "customPromptBtn", "text": "Custom prompt" }, "events": { "click": "Wb.prompt('My Dialog', [\n { text: 'Your Name', cid: 'name', value: 'old value' },\n { text: 'Date', cid: 'date', cname: 'date' }\n], (values, win) => {\n Wb.tip(Wb.encode(values));\n win.close();\n});" } }, { "_icon": "button", "text": "singleInstanceBtn", "cls": "Wb.Button", "properties": { "cid": "singleInstanceBtn", "text": "Single instance" }, "events": { "click": "let win = Wb.prompt({ title: 'My Single Dialog', icon: 'chart-bar'/*, resetDialog: true*/ }, [\n { text: 'Your Name', cid: 'name', value: 'old value' },\n { text: 'Date', cid: 'date', cname: 'date' }\n], (values, win) => {\n Wb.tip(Wb.encode(values));\n win.close();\n}, 'my.win.id');\n// Wb.reset(win);" } }, { "_icon": "button", "text": "hoverPanelBtn", "cls": "Wb.Button", "properties": { "cid": "hoverPanelBtn", "text": "Hover panel" }, "events": { "click": "Wb.hover(app.hoverPanel, this);" } }, { "_icon": "button", "text": "hideGetValueBtn", "cls": "Wb.Button", "properties": { "cid": "hideGetValueBtn", "text": "Hide to get value" }, "events": { "click": "Wb.hover(app.hideGetValuePanel, this, panel => {\n Wb.tip(Wb.encode(Wb.getValue(panel)));\n});" } } ] }, { "_icon": "title", "text": "tooltipTitle", "cls": "Wb.Title", "properties": { "cid": "tooltipTitle", "title": "Tooltip" } }, { "_icon": "container", "text": "tooltipCt", "cls": "Wb.Container", "properties": { "cid": "tooltipCt", "layout": "form", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "component", "text": "tipComp", "cls": "Wb.Component", "properties": { "cid": "tipComp", "tip": "Common tip message", "text": "Move the mouse here", "padding": "1em", "frame": "true" } }, { "_icon": "component", "text": "retainTipComp", "cls": "Wb.Component", "properties": { "cid": "retainTipComp", "tip": "{enterRetain: true, textSelectable: true, html: 'When the pointer is in the Tip, it will not auto hide.'}", "text": "Retain tip", "padding": "1em", "frame": "true" } }, { "_icon": "component", "text": "customTip", "cls": "Wb.Component", "properties": { "cid": "customTip", "text": "Custom retain tip", "padding": "1em", "frame": "true" }, "_expanded": false, "items": [ { "_icon": "info", "text": "tip", "cls": "Wb.Tip", "properties": { "cid": "tip", "isProperty": "true", "layout": "grid1", "enterRetain": "true", "width": "40em", "gap": "1em", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "label", "text": "label1", "cls": "Wb.Label", "properties": { "cid": "label1", "titleType": "title4", "text": "Some descriptions" } }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Text" } }, { "_icon": "number-edit", "text": "number1", "cls": "Wb.Number", "properties": { "cid": "number1", "text": "Number" } }, { "_icon": "label1", "text": "displayField1", "cls": "Wb.DisplayField", "properties": { "cid": "displayField1", "text": "Display Field", "value": "Some value" } }, { "_icon": "button", "text": "button1", "cls": "Wb.Button", "properties": { "cid": "button1", "text": "Button", "icon": "button" } } ] } ] }, { "_icon": "component", "text": "customShareTip1", "cls": "Wb.Component", "properties": { "cid": "customShareTip1", "text": "Custom share tip 1", "padding": "1em", "tip": "@app.myShareTip", "frame": "true" }, "_expanded": true }, { "_icon": "component", "text": "customShareTip2", "cls": "Wb.Component", "properties": { "cid": "customShareTip2", "text": "Custom share tip 2", "padding": "1em", "tip": "@app.myShareTip", "frame": "true" }, "_expanded": true }, { "_icon": "component", "text": "clickToTipComp", "cls": "Wb.Component", "properties": { "cid": "clickToTipComp", "text": "Click to tip", "padding": "1em", "frame": "true" }, "events": { "click": "Wb.tipAt('Some message', e.x, e.y);" } } ] } ] } ] } # example/crud/actions.xwl Title: actions ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "true", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Select and download data\n */\n select() {\n let download = Wb.getObject('download');\n if (download) {\n //download blob\n let row = Wb.getRow({\n sql: 'select full_name, photo from wb_staff where sid={?$sid?}',\n blob: true,\n params: download\n });\n if (row?.photo)\n Wb.exportData(row.photo, row.full_name + '.png');\n else\n Wb.raise('Photo not found.');\n } else {\n let sql;\n\n sql = `\n select a.*,b.user_name,c.dept_name,c.dept_code from wb_staff a, wb_user b, wb_dept c\n where a.user_id=b.sid and a.dept_id=c.sid\n `;\n if (Params.search) {\n Wb.setLike('search');\n sql += ' and (a.full_name like {?search?} or a.code like {?search?} or b.user_name like {?search?})';\n }\n // getOrderSql will not cause SQL injection\n sql += Wb.getOrderSql({ email: 'a.email' });// There are 2 emails fields in the tables\n Wb.sendRowx({ sql, kv: { gender: 'gender' } });\n }\n },\n /**\n * Select and download data by using dict.\n */\n dictSelect() {\n if (Wb.has('download')) {\n this.select(); // invoke select download handler\n } else {\n let sql;\n sql = `\n select a.sid, a.code, a.full_name, a.user_id, b.user_name as user_name_bind,\n a.dept_id, c.dept_code as dept_code_hide, c.dept_name as dept_name_tree, a.birth_date, a.gender, a.height,\n a.email, a.salary, a.cv, a.photo from wb_staff a, wb_user b, wb_dept c\n where a.user_id=b.sid and a.dept_id=c.sid\n `;\n if (Params.search) {\n Wb.setLike('search');\n sql += ' and (a.full_name like {?search?} or a.code like {?search?} or b.user_name like {?search?})';\n }\n // getOrderSql will not cause SQL injection\n sql += Wb.getOrderSql({ email: 'a.email', user_name_bind: 'b.user_name', dept_name_tree: 'c.dept_name' });\n Wb.sendDict(sql, 'wb,');\n }\n },\n /**\n * select usernames.\n */\n selectUsers() {\n let sql;\n\n sql = 'select sid,user_name from wb_user';\n if (Params.query) {\n Wb.setLike('query');\n sql += ' where user_name like {?query?}';\n }\n sql += ' order by user_name';\n Wb.sendRows(sql);\n },\n /**\n * select depts.\n */\n selectDepts() {\n let sql;\n\n sql = 'select sid,dept_name from wb_dept';\n if (Params.query) {\n Wb.setLike('query');\n sql += ' where dept_name like {?query?}';\n }\n sql += ' order by dept_name';\n Wb.sendRows(sql);\n },\n /**\n * Save data.\n */\n save() {\n let sid, rec, insert = [];\n\n Params.insert?.forEach(item => {\n sid = Wb.getId();\n rec = { sid };\n Wb.apply(item, rec);\n insert.push(rec);\n });\n Wb.sync({\n tableName: 'wb_staff',\n insert: Params.insert,\n update: Params.update,\n del: Params.del\n });\n // Another way for executing sync:\n // Wb.set({tableName: 'wb_staff'}); //Warning: Must set tableName otherwise tableName in parameters will be used\n // Wb.sync(Params);\n Wb.send({ insert });\n },\n /**\n * Add record.\n */\n add() {\n let rec = { sid: Wb.getId() };\n\n Wb.set(rec);\n Wb.sync({ tableName: 'wb_staff', insert: Params });\n Wb.send(rec);\n },\n /**\n * Update record.\n */\n edit() {\n Wb.sync({ tableName: 'wb_staff', update: Params });\n },\n /**\n * Delete records.\n */\n del() {\n let del = Wb.getObject('del');\n\n Wb.sync({ tableName: 'wb_staff', del });\n },\n /**\n * Get photo.\n */\n getPhoto() {\n let row = Wb.getRow({\n sql: 'select photo from wb_staff where sid={?sid?}',\n blob: true\n });\n if (row?.photo)\n Wb.exportData(row.photo);\n else\n Wb.exportData(new Wb.File(true, 'wb/images/null.png').stream);\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/crud/dict-edit-dialog.xwl Title: dict-edit-dialog ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n /** @property {Object} - The edit window configs object. */\n winConfigs: {\n events: {\n ready() {\n let win = this, ct = new Wb.Container({ layout: 'grid2', autoGrid: 'up' }), cv, photo;\n\n //add all items to ct without cv\n ct.add(win.items.filter(item => item.cid != 'cv'));\n\n //add titles and ct to win\n win.layout = 'form1';\n win.insert(0, { cname: 'title', title: 'General Information' });\n win.insert(1, ct);\n win.insert(2, { cname: 'title', title: 'Personal Resume' });\n\n //customize cv\n cv = win.down('cv');\n Wb.apply(cv, { flex: 1, text: null, minHeight: '5em' });\n\n //customize photo\n photo = ct.down('photo');\n //Insert to 2nd position\n ct.insert(1, photo);\n //You can configure these properties into the dictionary\n Wb.apply(photo, {\n gridRow: 'span 3', browseMode: true, browseHeight: '8em', browseWidth: '12em', fileButtons: false\n });\n\n //insert table style toggle button\n win.buttonsBar.insert(0, [{\n cname: 'button', active: false, text: 'Table Style', plainIcon: true, icon: 'table', handler() {\n ct.tableStyle = !ct.tableStyle;\n }\n }, '->']);\n }\n }\n },\n /**\n * Method to execute when adding or updating data fails.\n * @param {String} resp Response text.\n */\n onFailure(resp) {\n Wb.checkExists(resp, 'wb_staff_code', app.grid1.dictWin.down('code'));\n }\n});" }, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "fit", "autoContextMenu": "true" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "addBtn", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "addBtn", "text": "@Str.add", "icon": "add", "keys": "Ctrl+E" }, "events": { "click": "app.grid1.dictAdd({\n url: xpath + '/../actions&xaction=add',\n failure: app.onFailure\n}, null, null, null, app.winConfigs);" } }, { "_icon": "item", "text": "editBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "editBtn", "text": "@Str.edit", "icon": "edit", "keys": "Ctrl+J" }, "events": { "click": "let win = app.grid1.dictEdit({\n url: xpath + '/../actions&xaction=edit',\n failure: app.onFailure\n}, 'code', null, null, app.winConfigs);\nlet rec = app.grid1.selection;\nif (rec)\n win.down('photo').preview(xpath + '/../actions&xaction=getPhoto&sid=' + rec.data.sid + '&' + Wb.getId());" } }, { "_icon": "item", "text": "delBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "delBtn", "text": "@Str.del", "icon": "delete", "keys": "Ctrl+D" }, "events": { "click": "app.grid1.removeRecords(xpath + '/../actions&xaction=del', 'code');" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "text", "text": "search", "cls": "Wb.Text", "properties": { "cid": "search", "clearButton": "true", "placeholder": "@Str.search", "flex": "1", "minWidth": "5em", "maxWidth": "20em" }, "events": { "change": "app.grid1.delayLoad({ comps: app.search });" } } ] }, { "_icon": "grid", "text": "grid1", "cls": "Wb.Grid", "properties": { "cid": "grid1", "url": "@xpath + '/../actions&xaction=dictSelect'", "multiSelect": "true", "columnsSortable": "true", "sorters": "code", "stateId": "wb.crud-dialog" }, "_expanded": true, "events": { "itemdblclick": "app.editBtn.fireEvent('click');", "beforeloadcolumns": "// Customize columns from the dict regardless of whether this grid is in a saved state.\nlet col = columns.find(col => col.fieldName == 'full_name');\n\nif (col)\n col.width = '12em';\n\n// remove default row number column\n// columns.removeBy(col => col.rowNum);" } } ] } ] } # example/crud/dict-edit-grid.xwl Title: dict-edit-grid ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n /**\n * Fires after the table data is changed. @priv\n */\n onChange() {\n app.saveBtn.disabled = false;\n },\n /**\n * Save grid data.\n * @param {Function} [callback] Callback function after success.\n */\n save(callback) {\n app.grid1.sync({\n url: xpath + '/../actions&xaction=save',\n success() {\n app.saveBtn.disabled = true;\n callback?.();\n //Wb.tip('Successfully saved');\n },\n failure(resp) {\n Wb.checkExists(resp, 'wb_staff_code', Str.code);\n }\n });\n }\n});", "beforeunload": "if (!app.saveBtn.disabled)\n return false;" }, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "fit" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "addBtn", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "addBtn", "text": "@Str.add", "icon": "add", "keys": "Ctrl+E" }, "events": { "click": "app.grid1.addRecord();" } }, { "_icon": "item", "text": "delBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "delBtn", "text": "@Str.del", "icon": "delete", "keys": "Ctrl+D" }, "events": { "click": "app.grid1.delRecords();" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "saveBtn", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "saveBtn", "icon": "save", "text": "@Str.save", "keys": "Ctrl+S", "disabled": "true" }, "events": { "click": "app.save();" } }, { "_icon": "divider", "text": "divider2", "cls": "Wb.Divider", "properties": { "cid": "divider2" } }, { "_icon": "text", "text": "search", "cls": "Wb.Text", "properties": { "cid": "search", "clearButton": "true", "placeholder": "@Str.search", "flex": "1", "minWidth": "5em", "maxWidth": "20em" }, "events": { "change": "app.grid1.delayLoad({ comps: app.search });" } } ] }, { "_icon": "grid", "text": "grid1", "cls": "Wb.Grid", "properties": { "cid": "grid1", "url": "@xpath + '/../actions&xaction=dictSelect'", "editable": "true", "multiSelect": "true", "columnsSortable": "true", "sorters": "code" }, "_expanded": true, "events": { "editing": "app.onChange();", "itemchange": "app.onChange();", "beforeedit": "//Set photo file name\nif (column.fieldName == 'photo') {\n let value = column.render.call(row, configs.value, row.data);\n if (value)\n configs.value = value;\n}", "beforeload": "return this.saveConfirm(app.saveBtn, app.save);" } } ] } ] } # example/crud/edit-dialog.xwl Title: edit-dialog ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "window", "text": "editWin", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "editWin", "layout": "grid2", "resetDialog": "true", "autoGrid": "true" }, "items": [ { "_icon": "title", "text": "generalTitle", "cls": "Wb.Title", "properties": { "cid": "generalTitle", "title": "General Information" } }, { "cls": "Wb.Text", "properties": { "cid": "code", "required": "true", "maxLength": "5", "text": "Code" }, "text": "code", "_expanded": true, "_icon": "text" }, { "_icon": "search-file", "text": "photo", "cls": "Wb.FileInput", "properties": { "cid": "photo", "accept": ".png", "text": "Photo", "gridRow": "span 3", "browseMode": "true", "browseHeight": "8em" } }, { "cls": "Wb.Text", "properties": { "cid": "full_name", "required": "true", "text": "Full name" }, "text": "full_name", "_expanded": true, "_icon": "text" }, { "_icon": "combo", "text": "user_name", "cls": "Wb.Select", "properties": { "cid": "user_name", "textField": "user_name", "valueField": "sid", "url": "@xpath + '/../actions&xaction=selectUsers'", "required": "true", "forceSelect": "true", "text": "Username", "bindField": "user_id" } }, { "_icon": "combo", "text": "dept_name", "cls": "Wb.Select", "properties": { "cid": "dept_name", "url": "m?xwl=sys/dialog/dept-selector/select", "textField": "dept_name", "clearButton": "true", "treePicker": "true", "subtextField": "dept_code", "required": "true", "text": "Dept name", "gridColumn": "span 2", "valueMap": "{ sid: 'dept_id', dept_name: 'dept_name', dept_code: 'dept_code' }" } }, { "_icon": "calendar", "text": "birth_date", "cls": "Wb.Date", "properties": { "cid": "birth_date", "text": "Birth date" } }, { "_icon": "combo", "text": "gender", "cls": "Wb.Select", "properties": { "cid": "gender", "text": "Gender", "keyName": "gender" } }, { "_icon": "number-edit", "text": "height", "cls": "Wb.Number", "properties": { "cid": "height", "minValue": "0", "maxValue": "999", "decimalCount": "0", "text": "Height" } }, { "cls": "Wb.Text", "properties": { "cid": "email", "valueType": "email", "text": "Email" }, "text": "email", "_expanded": true, "_icon": "text" }, { "_icon": "number-edit", "text": "salary", "cls": "Wb.Number", "properties": { "cid": "salary", "decimalCount": "2", "text": "Salary" } }, { "_icon": "title", "text": "cvTitle", "cls": "Wb.Title", "properties": { "cid": "cvTitle", "title": "Personal Resume" } }, { "_icon": "textarea", "text": "cv", "cls": "Wb.TextArea", "properties": { "cid": "cv", "gridColumn": "span 2", "height": "8em" } } ] }, { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "fit", "autoContextMenu": "true" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "addBtn", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "addBtn", "text": "@Str.add", "icon": "add", "keys": "Ctrl+E" }, "events": { "click": "// Preferred way:\n// app.grid1.insertRecord({\n// url: xpath + '/../actions&xaction=add',\n// failure(resp) {\n// Wb.checkExists(resp, 'wb_staff_code', app.editWin.down('code'));\n// }\n// }, app.editWin);\n\n\n// The following code demonstrates the detailed implementation\nlet win = app.editWin;\n\nwin.icon = 'add';\nwin.title = Str.add;\nwin.focusControl = null;\nwin.okHandler = (win, values) => {\n Wb.ajax({\n url: xpath + '/../actions&xaction=add',\n params: values,\n json: true,\n success(resp) {\n app.grid1.appendRecord(Wb.apply(values, resp));\n win.hide();\n },\n failure(resp) {\n Wb.checkExists(resp, 'wb_staff_code', app.editWin.down('code'));\n }\n });\n};\nwin.show();\nwin.scrollEl.scrollTop = win.scrollEl.scrollLeft = 0;" } }, { "_icon": "item", "text": "editBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "editBtn", "text": "@Str.edit", "icon": "edit", "keys": "Ctrl+J" }, "events": { "click": "// Preferred way:\n// let rec = app.grid1.selection;\n// app.grid1.editRecord({\n// url: xpath + '/../actions&xaction=edit',\n// failure(resp) {\n// Wb.checkExists(resp, 'wb_staff_code', app.editWin.down('code'));\n// }\n// }, app.editWin);\n// if (rec)\n// app.editWin.down('photo').preview(xpath + '/../actions&xaction=getPhoto&sid=' + data.sid + '&' + Wb.getId());\n\n\n// The following code demonstrates the detailed implementation\nlet win = app.editWin, rec = app.grid1.selection, data;\n\nif (!rec) {\n Wb.tipSelect();\n return;\n}\ndata = rec.data;\nwin.icon = 'edit';\nwin.title = Str.edit + ' - ' + data.code;\nwin.focusControl = true;\nWb.setValue(win, data);\nwin.down('photo').preview(xpath + '/../actions&xaction=getPhoto&sid=' + data.sid + '&' + Wb.getId());\nwin.okHandler = (win, values) => {\n Wb.ajax({\n url: xpath + '/../actions&xaction=edit',\n params: rec.getDiffer(values),\n json: true,\n success(resp) {\n rec.update(Wb.apply(values, resp));\n win.hide();\n },\n failure(resp) {\n Wb.checkExists(resp, 'wb_staff_code', app.editWin.down('code'));\n }\n });\n};\nwin.show();" } }, { "_icon": "item", "text": "delBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "delBtn", "text": "@Str.del", "icon": "delete", "keys": "Ctrl+D" }, "events": { "click": "// Preferred way:\n// app.grid1.removeRecords( xpath + '/../actions&xaction=del', 'code');\n\n\n// The following code demonstrates the detailed implementation\nlet grid = app.grid1, recs = grid.selections;\nif (!recs.length) {\n Wb.tipSelect();\n return;\n}\nWb.confirm(Wb.getActionHint(recs, 'code'), f => {\n Wb.ajax({\n url: xpath + '/../actions&xaction=del',\n params: { del: grid.originData },\n success() {\n grid.delRecords();\n }\n });\n});" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "text", "text": "search", "cls": "Wb.Text", "properties": { "cid": "search", "clearButton": "true", "placeholder": "@Str.search", "flex": "1", "minWidth": "5em", "maxWidth": "20em" }, "events": { "change": "app.grid1.delayLoad({ comps: app.search });" } } ] }, { "_icon": "grid", "text": "grid1", "cls": "Wb.Grid", "properties": { "cid": "grid1", "url": "@xpath + '/../actions&xaction=select'", "multiSelect": "true", "columnsSortable": "true", "sorters": "code", "stateId": "wb.crud-dialog" }, "_expanded": true, "events": { "itemdblclick": "app.editBtn.fireEvent('click');" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "rowNumCol", "rowNum": "true" }, "text": "rowNumCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "codeCol", "fieldName": "code", "text": "Code", "width": "5em" }, "text": "codeCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "fullNameCol", "fieldName": "full_name", "text": "Full name", "width": "13em" }, "text": "fullNameCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "usernameCol", "fieldName": "user_name", "text": "Username" }, "text": "usernameCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "deptCol", "fieldName": "dept_name", "text": "Department", "render": "Wb.Column.addSubText(el, value, data.dept_code);" }, "text": "deptCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "birthDateCol", "fieldName": "birth_date", "text": "Birth date" }, "text": "birthDateCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "genderCol", "fieldName": "gender", "text": "Gender", "width": "6em", "keyValue": "true" }, "text": "genderCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "heightCol", "fieldName": "height", "text": "Height", "width": "6em" }, "text": "heightCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "emailCol", "fieldName": "email", "text": "Email", "width": "18em" }, "text": "emailCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "salaryCol", "fieldName": "salary", "text": "Salary", "type": "usd", "width": "9em" }, "text": "salaryCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "cvCol", "fieldName": "cv", "text": "CV", "width": "15em", "sortable": "false" }, "text": "cvCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "photoCol", "fieldName": "photo", "text": "Photo", "width": "15em", "render": "if (value)\n Wb.Column.createDownload(el, column.fieldName, data.full_name + '.png');", "sortable": "false" }, "text": "photoCol", "_expanded": true, "_icon": "column" } ] } ] } ] } ] } # example/crud/edit-grid.xwl Title: edit-grid ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n /**\n * Fires after the table data is changed. @priv\n */\n onChange() {\n app.saveBtn.disabled = false;\n },\n /**\n * Save grid data.\n * @param {Function} [callback] Callback function after success.\n */\n save(callback) {\n app.grid1.sync({\n url: xpath + '/../actions&xaction=save',\n success() {\n app.saveBtn.disabled = true;\n callback?.();\n //Wb.tip('Successfully saved');\n },\n failure(resp) {\n // Preferred way:\n // Wb.checkExists(resp, 'wb_staff_code', Str.code);\n if (resp?.toLowerCase().includes('wb_staff_code'))\n Wb.error(Str.duplicate.format(Str.code));\n }\n });\n }\n});", "beforeunload": "if (!app.saveBtn.disabled)\n return false;" }, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "fit" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "addBtn", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "addBtn", "text": "@Str.add", "icon": "add", "keys": "Ctrl+E" }, "events": { "click": "app.grid1.addRecord();" } }, { "_icon": "item", "text": "delBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "delBtn", "text": "@Str.del", "icon": "delete", "keys": "Ctrl+D" }, "events": { "click": "app.grid1.delRecords();" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "saveBtn", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "saveBtn", "icon": "save", "text": "@Str.save", "keys": "Ctrl+S", "disabled": "true" }, "events": { "click": "app.save();" } }, { "_icon": "divider", "text": "divider2", "cls": "Wb.Divider", "properties": { "cid": "divider2" } }, { "_icon": "text", "text": "search", "cls": "Wb.Text", "properties": { "cid": "search", "clearButton": "true", "placeholder": "@Str.search", "flex": "1", "minWidth": "5em", "maxWidth": "20em" }, "events": { "change": "app.grid1.delayLoad({ comps: app.search });" } } ] }, { "_icon": "grid", "text": "grid1", "cls": "Wb.Grid", "properties": { "cid": "grid1", "url": "@xpath + '/../actions&xaction=select'", "editable": "true", "multiSelect": "true", "columnsSortable": "true", "sorters": "code" }, "_expanded": true, "events": { "editing": "app.onChange();", "itemchange": "app.onChange();", "beforeedit": "//Set photo file name\nif (column.fieldName == 'photo') {\n let value = column.render.call(row, configs.value, row.data);\n if (value)\n configs.value = value;\n}", "beforeload": "// Preferred way:\n// return this.saveConfirm(app.saveBtn, app.save);\nlet grid = this, saveBtn = app.saveBtn;\n//saveBtn is null before initialized\nif (saveBtn && !saveBtn.disabled) {\n Wb.choose(Str.modifiedConfirm.format(Str.list), btn => {\n if (btn == 'yes')\n app.save(f => grid.reload());\n else if (btn == 'no') {\n saveBtn.disabled = true;\n grid.reload();\n }\n });\n return false;\n}" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "rowNumCol", "rowNum": "true" }, "text": "rowNumCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "codeCol", "fieldName": "code", "text": "Code", "width": "5em" }, "text": "codeCol", "_expanded": true, "_icon": "column", "items": [ { "cls": "Wb.Text", "properties": { "cid": "editor", "isProperty": "true", "required": "true", "maxLength": "5" }, "text": "editor", "_expanded": true, "_icon": "text" } ] }, { "cls": "Wb.Column", "properties": { "cid": "fullNameCol", "fieldName": "full_name", "text": "Full name", "width": "13em" }, "text": "fullNameCol", "_expanded": true, "_icon": "column", "items": [ { "cls": "Wb.Text", "properties": { "cid": "editor", "isProperty": "true", "required": "true" }, "text": "editor", "_expanded": true, "_icon": "text" } ] }, { "cls": "Wb.Column", "properties": { "cid": "usernameCol", "fieldName": "user_name", "text": "Username" }, "text": "usernameCol", "_expanded": true, "_icon": "column", "items": [ { "_icon": "combo", "text": "editor", "cls": "Wb.Select", "properties": { "cid": "editor", "textField": "user_name", "valueField": "sid", "isProperty": "true", "url": "@xpath + '/../actions&xaction=selectUsers'", "required": "true", "forceSelect": "true", "bindField": "user_id" } } ] }, { "cls": "Wb.Column", "properties": { "cid": "deptCol", "fieldName": "dept_name", "text": "Department", "width": "20em", "render": "Wb.Column.addSubText(el, value, data.dept_code);" }, "text": "deptCol", "_expanded": true, "_icon": "column", "items": [ { "_icon": "combo", "text": "editor", "cls": "Wb.Select", "properties": { "cid": "editor", "url": "m?xwl=sys/dialog/dept-selector/select", "textField": "dept_name", "treePicker": "true", "subtextField": "dept_code", "valueMap": "{ sid: 'dept_id', dept_name: 'dept_name', dept_code: 'dept_code' }", "isProperty": "true", "required": "true" } } ] }, { "cls": "Wb.Column", "properties": { "cid": "birthDateCol", "fieldName": "birth_date", "text": "Birth date" }, "text": "birthDateCol", "_expanded": true, "_icon": "column", "items": [ { "_icon": "calendar", "text": "editor", "cls": "Wb.Date", "properties": { "cid": "editor", "isProperty": "true" } } ] }, { "cls": "Wb.Column", "properties": { "cid": "genderCol", "fieldName": "gender", "text": "Gender", "width": "6em", "keyValue": "true" }, "text": "genderCol", "_expanded": true, "_icon": "column", "items": [ { "_icon": "combo", "text": "editor", "cls": "Wb.Select", "properties": { "cid": "editor", "isProperty": "true", "keyName": "gender" } } ] }, { "cls": "Wb.Column", "properties": { "cid": "heightCol", "fieldName": "height", "text": "Height", "width": "6em" }, "text": "heightCol", "_expanded": true, "_icon": "column", "items": [ { "_icon": "number-edit", "text": "editor", "cls": "Wb.Number", "properties": { "cid": "editor", "isProperty": "true", "minValue": "0", "maxValue": "999", "decimalCount": "0" } } ] }, { "cls": "Wb.Column", "properties": { "cid": "emailCol", "fieldName": "email", "text": "Email", "width": "18em" }, "text": "emailCol", "_expanded": true, "_icon": "column", "items": [ { "cls": "Wb.Text", "properties": { "cid": "editor", "isProperty": "true", "valueType": "email" }, "text": "editor", "_expanded": true, "_icon": "text" } ] }, { "cls": "Wb.Column", "properties": { "cid": "salaryCol", "fieldName": "salary", "text": "Salary", "type": "usd", "width": "9em" }, "text": "salaryCol", "_expanded": true, "_icon": "column", "items": [ { "_icon": "number-edit", "text": "editor", "cls": "Wb.Number", "properties": { "cid": "editor", "isProperty": "true", "decimalCount": "2" } } ] }, { "cls": "Wb.Column", "properties": { "cid": "cvCol", "fieldName": "cv", "text": "CV", "width": "15em", "sortable": "false" }, "text": "cvCol", "_expanded": true, "_icon": "column", "items": [ { "_icon": "textarea", "text": "editor", "cls": "Wb.TextArea", "properties": { "cid": "editor", "isProperty": "true", "maximizable": "true" } } ] }, { "cls": "Wb.Column", "properties": { "cid": "photoCol", "fieldName": "photo", "text": "Photo", "width": "15em", "render": "if (value)\n return value instanceof File ? value.name : '(photo)';", "sortable": "false" }, "text": "photoCol", "_expanded": true, "_icon": "column", "items": [ { "_icon": "search-file", "text": "editor", "cls": "Wb.FileInput", "properties": { "cid": "editor", "isProperty": "true", "accept": ".png", "download": "true" } } ] } ] } ] } ] } ] } # example/crud/select-staff.xwl Title: select-staff ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "true", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.sendRowx('select * from wb_staff');" }, "_icon": "module" } # example/crud/staff.xwl Title: staff ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "fit" }, "_expanded": true, "items": [ { "_icon": "grid", "text": "grid1", "cls": "Wb.Grid", "properties": { "cid": "grid1", "url": "@xpath + '/../select-staff'" } } ] } ] } # example/load/client-load-module/card.xwl Title: card ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n /**\n * Init the module.\n */\n init() {\n // app.date1.focus();\n }\n});" }, "items": [ { "_icon": "panel", "text": "panel1", "cls": "Wb.Panel", "_expanded": true, "properties": { "cid": "panel1", "layout": "grid1" }, "items": [ { "_icon": "label", "text": "label1", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "label1", "text": "This card from card.xwl" } }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "text1", "text": "Text" } }, { "_icon": "calendar", "text": "date1", "cls": "Wb.Date", "properties": { "cid": "date1", "text": "Date" } }, { "_icon": "button", "text": "setValueBtn", "cls": "Wb.Button", "properties": { "cid": "setValueBtn", "text": "Set text value", "width": "20em", "justifySelf": "center" }, "events": { "click": "app.text1.value = 'card value';" } }, { "_icon": "button", "text": "setParentTitleBtn", "cls": "Wb.Button", "properties": { "cid": "setParentTitleBtn", "text": "Set parent module tab title", "width": "20em", "justifySelf": "center" }, "events": { "click": "parentApp.runModuleCardTab.title = 'New Title';" } } ] }, { "_icon": "window", "text": "thisWinAutoDestroyedAfterOwnerDestroyed", "cls": "Wb.Window", "_expanded": false, "properties": { "cid": "thisWinAutoDestroyedAfterOwnerDestroyed" } } ] } # example/load/client-load-module/common-window.xwl Title: common-window ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "events": { "initialize": "Wb.apply(app, {\n /** @property {Function} callback The callback function. @priv */\n /**\n * Perform add.\n * @param {Number} value1 value 1.\n * @param {Number} value2 value 2.\n * @param {Function} callback The callback function after completion.\n * @param {Number} .total The total value.\n * @param {Wb.Window} .win The edit window.\n */\n add(value1, value2, callback) {\n app.number1.value = value1;\n app.number2.value = value2;\n app.callback = callback;\n app.window1.show();\n }\n});" }, "_expanded": true, "items": [ { "_icon": "window", "text": "window1", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "window1", "title": "Perform add", "layout": "grid1", "visible": "true", "resetDialog": "true", "closeAction": "destroy" }, "events": { "ok": "app.callback(app.number1.value + app.number2.value, this);" }, "items": [ { "_icon": "label", "text": "label1", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "label1", "text": "This window from common-window.xwl" } }, { "_icon": "number-edit", "text": "number1", "cls": "Wb.Number", "properties": { "cid": "number1", "required": "true", "text": "Value1" } }, { "_icon": "number-edit", "text": "number2", "cls": "Wb.Number", "_expanded": true, "properties": { "cid": "number2", "required": "true", "text": "Value2" } } ] }, { "_icon": "window", "text": "thisWinAutoDestroyedAfterWindow1Destroyed", "cls": "Wb.Window", "_expanded": false, "properties": { "cid": "thisWinAutoDestroyedAfterWindow1Destroyed" } } ] } # example/load/client-load-module/panel.xwl Title: panel ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "panel", "text": "main", "cls": "Wb.Panel", "_expanded": true, "properties": { "cid": "main", "layout": "grid1", "title": "This panel from panel.xwl", "closable": "true" }, "items": [ { "_icon": "label", "text": "descLabel", "cls": "Wb.Label", "_expanded": false, "properties": { "cid": "descLabel", "text": "The component which cid is \"main\" represents the owner of the entire module, and when the main component is destroyed, the entire module will be destroyed." } }, { "_icon": "line", "text": "line1", "cls": "Wb.Line", "properties": { "cid": "line1", "title": "Form" } }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Text" }, "_expanded": true }, { "_icon": "number-edit", "text": "number1", "cls": "Wb.Number", "properties": { "cid": "number1", "text": "Number" } } ] }, { "_icon": "window", "text": "thisWinAutoDestroyedAfterMainDestroyed", "cls": "Wb.Window", "_expanded": false, "properties": { "cid": "thisWinAutoDestroyedAfterMainDestroyed" } } ] } # example/load/client-load-module/single-window.xwl Title: single-window ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "events": { "initialize": "Wb.apply(app, {\n /**\n * Execute every time when this module is loaded, regardless of whether singleton or not. @priv\n */\n onLoad() {\n app.number3.value = Wb.random(100);\n },\n /** @property {Function} callback The callback function. @priv */\n /**\n * Perform add.\n * @param {Number} value1 value 1.\n * @param {Number} value2 value 2.\n * @param {Function} callback The callback function after completion.\n * @param {Number} .total The total value.\n * @param {Wb.Window} .win The edit window.\n */\n add(value1, value2, callback) {\n app.number1.value = value1;\n app.number2.value = value2;\n app.callback = callback;\n app.window1.show();\n }\n});" }, "_expanded": true, "items": [ { "_icon": "window", "text": "window1", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "window1", "title": "Perform add", "layout": "grid1", "visible": "true", "resetDialog": "true" }, "events": { "ok": "app.callback(app.number1.value + app.number2.value + app.number3.value, this);" }, "items": [ { "_icon": "label", "text": "label1", "cls": "Wb.Label", "_expanded": true, "properties": { "cid": "label1", "text": "This window from single-window.xwl" } }, { "_icon": "number-edit", "text": "number1", "cls": "Wb.Number", "properties": { "cid": "number1", "required": "true", "text": "Value1" } }, { "_icon": "number-edit", "text": "number2", "cls": "Wb.Number", "_expanded": true, "properties": { "cid": "number2", "required": "true", "text": "Value2" } }, { "_icon": "number-edit", "text": "number3", "cls": "Wb.Number", "_expanded": false, "properties": { "cid": "number3", "required": "true", "text": "Value3" } } ] } ] } # example/load/client-load-module.xwl Title: client-load-module ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Client load module, js, mjs and css", "cls": "w-title3" } }, { "_icon": "title", "text": "openModuleTitle", "cls": "Wb.Title", "properties": { "cid": "openModuleTitle", "title": "Open module" } }, { "_icon": "label", "text": "openModuleLabel", "cls": "Wb.Label", "properties": { "cid": "openModuleLabel", "text": "Open module in \"main tab\" or new window." } }, { "_icon": "button", "text": "openModuleBtn", "cls": "Wb.Button", "properties": { "cid": "openModuleBtn", "text": "Open module", "type": "primary" }, "events": { "click": "//equals to: Wb.run({ url: 'm?xwl=admin/role', container: Globals.WbMainTab, title: 'custom title', icon: 'gear' });\nWb.open('m?xwl=admin/role');" } }, { "_icon": "title", "text": "openNormalModuleTitle", "cls": "Wb.Title", "properties": { "cid": "openNormalModuleTitle", "title": "Open module as \"normal type\"" } }, { "_icon": "label", "text": "openNormalModuleLabel", "cls": "Wb.Label", "properties": { "cid": "openNormalModuleLabel", "text": "Open module in \"main tab\" or new window, and allow the page to reload/refresh." } }, { "_icon": "button", "text": "openNormalModuleBtn", "cls": "Wb.Button", "properties": { "cid": "openNormalModuleBtn", "text": "Open module as \"normal type\"", "type": "primary" }, "events": { "click": "//equals to: Wb.run({ url: 'm?xwl=admin/perm', container: Globals.WbMainTab, allowRefresh: true });\nWb.openNormal('m?xwl=admin/perm');" } }, { "_icon": "title", "text": "runModulePanelTitle", "cls": "Wb.Title", "properties": { "cid": "runModulePanelTitle", "title": "Run module and get panel" } }, { "_icon": "label", "text": "runModulePanelLabel", "cls": "Wb.Label", "properties": { "cid": "runModulePanelLabel", "text": "Run module and get it's content to the container." } }, { "_icon": "button", "text": "runModulePanelBtn", "cls": "Wb.Button", "properties": { "cid": "runModulePanelBtn", "text": "Run module", "type": "primary" }, "events": { "click": "let ct = app.runModulePanelCt;\nct.destroyAll();\nWb.run({\n url: xpath + '/panel',\n success(scope) {\n ct.add(scope.main);\n }\n});" } }, { "_icon": "container", "text": "runModulePanelCt", "cls": "Wb.Container", "properties": { "cid": "runModulePanelCt", "frame": "true", "minHeight": "10em" } }, { "_icon": "title", "text": "runModuleCardTitle", "cls": "Wb.Title", "properties": { "cid": "runModuleCardTitle", "title": "Run module and get tab card" }, "_expanded": true }, { "_icon": "label", "text": "runModuleCardLabel", "cls": "Wb.Label", "properties": { "cid": "runModuleCardLabel", "text": "Run module and get it's content to the new tab card." } }, { "_icon": "button", "text": "runModuleCardBtn", "cls": "Wb.Button", "properties": { "cid": "runModuleCardBtn", "text": "Run module", "type": "primary" }, "events": { "click": "let card;\n\napp.cardIndex ??= 1;\ncard = app.runModuleCardTab.add({ title: 'Card ' + app.cardIndex++, icon: 'card', layout: 'fit' }).show();\nWb.run({\n url: xpath + '/card',\n app, // pass app as parentApp, the sub module can be referred to the parent module\n owner: card, // pass card as owner of module card.xwl, when the card is destroyed, the module will be automatically destroyed\n cached: true, // store the module to the cache, enables the next request to fetch directly from the cache\n success(scope) {\n card.add(scope.panel1);\n scope.init(); // call init function defined in card.xwl\n //app.cardModule = scope; // save scope to app for further access, eg: app.cardModule.text1 = 'abc';\n }\n});" } }, { "_icon": "tab", "text": "runModuleCardTab", "cls": "Wb.Tab", "_expanded": true, "properties": { "cid": "runModuleCardTab", "minHeight": "10em", "frame": "true" } }, { "_icon": "title", "text": "invokeWindowTitle", "cls": "Wb.Title", "properties": { "cid": "invokeWindowTitle", "title": "Invoke window" }, "_expanded": true }, { "_icon": "label", "text": "invokeWindowLabel", "cls": "Wb.Label", "properties": { "cid": "invokeWindowLabel", "text": "Invoke a common window and pass callback function as parameter." } }, { "_icon": "button", "text": "invokeWindowBtn", "cls": "Wb.Button", "properties": { "cid": "invokeWindowBtn", "text": "Invoke window", "type": "primary" }, "events": { "click": "Wb.run({\n url: xpath + '/common-window',\n owner: 'window1', //destroy the module when window1 is destroyed\n success(scope) {\n scope.add(3, 5, (total, win) => {\n Wb.tip('Total value is: ' + total);\n win.close();\n });\n }\n});" } }, { "_icon": "title", "text": "invokeSingleModuleTitle", "cls": "Wb.Title", "properties": { "cid": "invokeSingleModuleTitle", "title": "Invoke single module" }, "_expanded": true }, { "_icon": "label", "text": "invokeSingleModuleLabel", "cls": "Wb.Label", "properties": { "cid": "invokeSingleModuleLabel", "text": "Invoke a single module and pass callback function as parameter." } }, { "_icon": "button", "text": "invokeSingleBtn", "cls": "Wb.Button", "properties": { "cid": "invokeSingleBtn", "text": "Invoke single module", "type": "primary" }, "events": { "click": "Wb.run({\n url: xpath + '/single-window',\n single: true, //single instance module\n success(scope) {\n scope.add(3, 5, (total, win) => {\n Wb.tip('Total value is: ' + total);\n win.close();\n });\n }\n});" } }, { "_icon": "title", "text": "dynamicLoadJsCssTitle", "cls": "Wb.Title", "properties": { "cid": "dynamicLoadJsCssTitle", "title": "Dynamic load js/css" } }, { "_icon": "label", "text": "dynamicLoadJsCssLabel", "cls": "Wb.Label", "properties": { "cid": "dynamicLoadJsCssLabel", "text": "Use [Wb.load] method to dynamic load js/css resources. Set the [links] property of the module node to static load js/mjs/css resources, you can drag js/mjs/css files to the [links] property directly." } }, { "_icon": "button", "text": "dynamicLoadJsCssBtn", "cls": "Wb.Button", "properties": { "cid": "dynamicLoadJsCssBtn", "text": "Dynamic load JS/CSS", "type": "primary" }, "events": { "click": "Wb.load(\n ['wb/css/demo.css', { url: 'wb/libs/echarts.js', async: true }],\n f => Wb.tipSucc('The js/css resources has been successfully loaded.')\n);\n// Promise style\n// Wb.loadx(['wb/css/demo.css', { url: 'wb/libs/echarts.js', async: true }]).then(\n// f => Wb.tipSucc('The js/css resources has been successfully loaded.'));" } }, { "_icon": "label", "text": "importMJSLabel", "cls": "Wb.Label", "properties": { "cid": "importMJSLabel", "text": "Dynamic import Javascript module." } }, { "_icon": "button", "text": "importMJSBtn", "cls": "Wb.Button", "properties": { "cid": "importMJSBtn", "text": "Dynamic import mjs", "type": "primary" }, "events": { "click": "// Resources in the module directory are protected except for path containing the \"$\" character\nWb.loadModule(xpath + '/demo$', module => Wb.tip('The result is: ' + module.Demo.add(3, 4)));" } } ] } ] } # example/load/client-request/actions.xwl Title: actions ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Process get request.\n */\n get() {\n Wb.log(Wb.get('string'));\n Wb.log(Params.string);\n Wb.log(Wb.getInt('int')); //Params.int is string type\n Wb.log(Wb.getFloat('float'));\n Wb.log(Wb.getDate('date'));\n Wb.log(Wb.getBool('bool'));\n Wb.log(Wb.getObject('object'));\n Wb.log(Wb.getObject('array'));\n Wb.send('done');\n },\n /**\n * Process post request.\n */\n post() {\n let val = Wb.get('foo');\n //For the processing of uploading files, please refer to [file-updownload] example\n Wb.send(val);\n },\n /**\n * Process object.\n */\n deserializeObject() {\n //The system will automatically deserialize the values sent by the client\n Wb.log(Wb.get('string')); // same as Params.string\n Wb.log(Wb.get('int')); // Params.int is Number type\n Wb.log(Params.float); // Params.float is Number type\n Wb.log(Params.date); // Params.date is Date type\n Wb.log(Params.bool); // Params.bool is Boolean type\n Wb.log(Params.object);// Params.object is Object type\n Wb.log(Params.array);// Params.array is Array type\n },\n /**\n * Process multiple same parameters.\n */\n postMultipleParams() {\n let arrayList = Wb.getParams('myParam');\n Wb.log(Wb.encode(arrayList)); //Use Wb.getParams to always return array like params\n },\n /**\n * Process payload data.\n */\n postPayload() {\n Wb.log(Wb.payload);\n },\n /**\n * Process payload json.\n */\n postPayloadJson() {\n Wb.log(Wb.get('foo') + ',' + Params.bar);\n Wb.log(Wb.payload); // text\n Wb.log(Wb.payloadParams); // json\n },\n /**\n * Process submit.\n */\n postSubmit() {\n Wb.invoke('docs');\n }\n};\nactions[Params.xaction]();" }, "_icon": "module", "items": [] } # example/load/client-request.xwl Title: client-request ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Client side web request", "cls": "w-title3" } }, { "_icon": "title", "text": "getTitle", "cls": "Wb.Title", "properties": { "cid": "getTitle", "title": "Send GET request with parameters." } }, { "_icon": "button", "text": "getBtn", "cls": "Wb.Button", "properties": { "cid": "getBtn", "text": "Send request", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=get',\n params: { string: 'abc', int: 123, float: 123.4, date: new Date(), bool: true, object: { foo: 'bar' }, array: [1, 2, 3] },\n method: 'GET',\n success(resp) {\n Wb.tipSucc(resp);\n }\n});" } }, { "_icon": "title", "text": "postTitle", "cls": "Wb.Title", "properties": { "cid": "postTitle", "title": "Send POST request with parameters, files and blobs." } }, { "_icon": "button", "text": "postBtn", "cls": "Wb.Button", "properties": { "cid": "postBtn", "text": "Send request", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=post',\n // form: myHTMLForm,\n // comps: [app.panel1, app.fileInput1],\n // params: Wb.apply({ foo: 'bar' }, Wb.getValue(app.viewport1)),\n params: { foo: 'bar' },\n success(resp) {\n Wb.tipSucc(resp);\n }\n});" } }, { "_icon": "title", "text": "useFormTitle", "cls": "Wb.Title", "properties": { "cid": "useFormTitle", "title": "Send POST request with large parameters" } }, { "_icon": "button", "text": "useFormPostBtn", "cls": "Wb.Button", "properties": { "cid": "useFormPostBtn", "text": "Send request", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=post',\n // Use multipart/form-data to support large parameter values,\n // otherwise will result in failure, because application/x-www-form-urlencoded has length restrictions\n form: true,\n params: { foo: 'large text...' },\n success(resp) {\n Wb.tipSucc(resp);\n }\n});" } }, { "_icon": "title", "text": "deserializeObjectTitle", "cls": "Wb.Title", "properties": { "cid": "deserializeObjectTitle", "title": "Send request using object" } }, { "_icon": "label", "text": "deserializeObjectLabel", "cls": "Wb.Label", "properties": { "cid": "deserializeObjectLabel", "text": "It can serialize object before sending and auto deserialize all original values on the server side." } }, { "_icon": "button", "text": "deserializeObjectBtn", "cls": "Wb.Button", "properties": { "cid": "deserializeObjectBtn", "text": "Send request", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=deserializeObject',\n object: { string: 'abc', int: 123, float: 123.4, date: new Date(), bool: true, object: { foo: 'bar' }, array: [1, 2, 3] },\n success() {\n Wb.tipDone();\n }\n});" } }, { "_icon": "title", "text": "postMultipleTitle", "cls": "Wb.Title", "properties": { "cid": "postMultipleTitle", "title": "Post multiple parameters with the same name" } }, { "_icon": "button", "text": "postMultipleBtn", "cls": "Wb.Button", "properties": { "cid": "postMultipleBtn", "text": "Send request", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=postMultipleParams',\n params: { myParam: Wb.markParams([1, 'abc', new Date()]) },\n success() {\n Wb.tipDone();\n }\n});" } }, { "_icon": "title", "text": "postPayloadDataTitle", "cls": "Wb.Title", "properties": { "cid": "postPayloadDataTitle", "title": "Send request with payload data and specific header" } }, { "_icon": "button", "text": "postPayloadDataBtn", "cls": "Wb.Button", "properties": { "cid": "postPayloadDataBtn", "text": "Send request", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=postPayload',\n data: 'large text...',\n header: { 'Content-Type': 'text/html;charset=utf-8' },\n success() {\n Wb.tipDone();\n }\n});" } }, { "_icon": "title", "text": "postPayloadJsonTitle", "cls": "Wb.Title", "properties": { "cid": "postPayloadJsonTitle", "title": "Send request with payload json data" } }, { "_icon": "button", "text": "postPayloadJsonBtn", "cls": "Wb.Button", "properties": { "cid": "postPayloadJsonBtn", "text": "Send request", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=postPayloadJson',\n data: { foo: 'abc', bar: 123 },\n success() {\n Wb.tipDone();\n }\n});" } }, { "_icon": "title", "text": "submitTitle", "cls": "Wb.Title", "properties": { "cid": "submitTitle", "title": "Submit a regular HTTP request" } }, { "_icon": "button", "text": "submitBtn", "cls": "Wb.Button", "properties": { "cid": "submitBtn", "text": "Regular submit", "type": "primary" }, "events": { "click": "Wb.submit(xpath + '/actions&xaction=postSubmit', { foo: 'abc', bar: 123 });" } }, { "_icon": "title", "text": "browseTitle", "cls": "Wb.Title", "properties": { "cid": "browseTitle", "title": "Browse url" } }, { "_icon": "button", "text": "browseBtn", "cls": "Wb.Button", "properties": { "cid": "browseBtn", "text": "Browse url", "type": "primary" }, "events": { "click": "Wb.browse({ url: 'https://www.geejing.com', title: 'Geejing', icon: 'earth', params: { foo: 'abc', bar: 123 } });" } }, { "_icon": "title", "text": "openWinTitle", "cls": "Wb.Title", "properties": { "cid": "openWinTitle", "title": "Open window" } }, { "_icon": "button", "text": "openWinBtn", "cls": "Wb.Button", "properties": { "cid": "openWinBtn", "text": "Open window", "type": "primary" }, "events": { "click": "Wb.openWin('https://www.geejing.com');\n//Wb.openWin({url: 'dbe', params: {foo: 'bar'}, method: 'POST'});" } } ] } ] } # example/load/code-static-load.xwl Title: code-static-load ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.set({ user: Wb.encode(Wb.execute('user')), dbe: Wb.encode(Wb.execute('admin/dbe')) });" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "row" }, "events": { "ready": "// add user client\nWb.run({\n script: _$user$_, success(scope) {\n app.container1.add(scope.viewport1);\n }\n});\n// add dbe client\nWb.run({\n script: _$dbe$_, success(scope) {\n app.container2.add(scope.viewport1);\n }\n});" }, "_expanded": true, "items": [ { "_icon": "container", "text": "container1", "cls": "Wb.Container", "properties": { "cid": "container1", "layout": "fit", "width": "50%" } }, { "_icon": "splitter", "text": "splitter1", "cls": "Wb.Splitter", "properties": { "cid": "splitter1" } }, { "_icon": "container", "text": "container2", "cls": "Wb.Container", "properties": { "cid": "container2", "layout": "fit", "flex": "1" } } ] } ] } # example/load/file-updownload/actions.xwl Title: actions ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Upload file.\n */\n upload() {\n let singleFile, multiFiles;\n\n singleFile = Params.singleFileInput;// same as Wb.get('singleFileInput');\n //if singleFileInput uploaded\n if (singleFile) {\n Wb.log(singleFile.name + ' file size is: ' + singleFile.size);\n //This example outputs the uploaded stream to a file, which you can also output to a database.\n new Wb.File(true, 'temp/' + singleFile.name).stream = singleFile.stream;\n }\n\n //Whether uploading a single or multiple files, using getParams will result in an array like parameter list\n multiFiles = Wb.getParams('multiFileInput');\n multiFiles.forEach(file => {\n Wb.log(file.name + ' file size is: ' + file.size);\n new Wb.File(true, 'temp/' + file.name).stream = file.stream;\n });\n\n Wb.log('text1 value is: ' + Params.text1);\n\n Wb.send(Base.pathText + 'temp');\n //All streams will be automatically closed\n },\n /**\n * Download wb.js file.\n */\n downloadWbJs() {\n Wb.exportData(new Wb.File(true, 'wb/js/wb.js'));\n },\n /**\n * Download a database blob.\n */\n downloadBlob() {\n let row = Wb.getRow({ sql: \"select full_name, photo from wb_staff where sid='0040CCVTQ71JG'\", blob: true });\n\n // row.photo is ByteArrayInputStream, no need to close\n // row.photo.available is blob size, notify the client the length of the blob to display the download progress on the client\n Wb.exportData(row.photo, row.full_name + '.png', row.photo.available())\n },\n /**\n * Download a zipped css folder file.\n */\n downloadZip() {\n Wb.setContentType('css.zip');\n ZipUtil.zip([new File(Base.path, 'wb/css')], response.getOutputStream());\n },\n /**\n * Download after upload.\n */\n downloadAfterUpload() {\n let multiFiles = Wb.getParams('multiFileInput');\n multiFiles.forEach(file => {\n Wb.log(file.name + ' file size is: ' + file.size);\n new Wb.File(true, 'temp/' + file.name).stream = file.stream;\n });\n Wb.exportData(new Wb.File(true, 'wb/js/wb.js'));\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/load/file-updownload.xwl Title: file-updownload ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "File upload & download", "cls": "w-title3" } }, { "_icon": "title", "text": "uploadTitle", "cls": "Wb.Title", "properties": { "cid": "uploadTitle", "title": "Upload files" } }, { "_icon": "container", "text": "uploadCt", "cls": "Wb.Container", "properties": { "cid": "uploadCt", "layout": "grid1", "frame": "true", "labelUp": "true" }, "_expanded": true, "items": [ { "_icon": "search-file", "text": "singleFileInput", "cls": "Wb.FileInput", "properties": { "cid": "singleFileInput", "text": "Please select a file" } }, { "_icon": "search-file", "text": "multiFileInput", "cls": "Wb.FileInput", "properties": { "cid": "multiFileInput", "browseMode": "true", "text": "Please select multiple files", "multiple": "true", "accept": "image/*", "browseHeight": "6em" } }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Other control" } }, { "_icon": "button", "text": "uploadButton", "cls": "Wb.Button", "properties": { "cid": "uploadButton", "text": "Upload all", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=upload',\n comps: app.uploadCt,\n params: { foo: 'bar' },\n // params: Wb.getValue(app.uploadCt), // same as comps property\n success(resp) {\n Wb.tipSucc('All files have been saved to \"' + resp + '\".');\n }\n});\n\n//Please also refer to Wb.fetch the promise version of wb.ajax" } } ] }, { "_icon": "title", "text": "downloadTitle", "cls": "Wb.Title", "properties": { "cid": "downloadTitle", "title": "Download files" }, "_expanded": true }, { "_icon": "container", "text": "downloadCt", "cls": "Wb.Container", "properties": { "cid": "downloadCt", "layout": "grid1", "frame": "true" }, "_expanded": true, "items": [ { "_icon": "button", "text": "commonDownloadWbJsButton", "cls": "Wb.Button", "properties": { "cid": "commonDownloadWbJsButton", "text": "Common download wb.js", "type": "primary" }, "events": { "click": "//Using Wb.download is the recommended method for downloading\nWb.download(xpath + '/actions&xaction=downloadWbJs', { foo: 'bar' });" } }, { "_icon": "button", "text": "ajaxDownloadWbJsButton", "cls": "Wb.Button", "properties": { "cid": "ajaxDownloadWbJsButton", "text": "Ajax download wb.js", "type": "primary" }, "events": { "click": "//Using Wb.ajax is usually not a recommended method for downloading, please use Wb.download instead\nWb.ajax({\n url: xpath + '/actions&xaction=downloadWbJs',\n download: true,\n params: { foo: 'bar' },\n onDownload(percent) {\n Wb.progress(percent);\n }\n});" } }, { "_icon": "button", "text": "downloadBlobButton", "cls": "Wb.Button", "properties": { "cid": "downloadBlobButton", "text": "Download blob", "type": "primary" }, "events": { "click": "Wb.download(xpath + '/actions&xaction=downloadBlob');" } }, { "_icon": "button", "text": "downloadZipButton", "cls": "Wb.Button", "properties": { "cid": "downloadZipButton", "text": "Download zip", "type": "primary" }, "events": { "click": "Wb.download(xpath + '/actions&xaction=downloadZip');" } }, { "_icon": "button", "text": "downloadBase64BlobButton", "cls": "Wb.Button", "properties": { "cid": "downloadBase64BlobButton", "text": "Download base64/blob", "type": "primary" }, "events": { "click": "let base64Text = 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAJlJREFUOE/FkjsOgzAQBWfLEOUIqbgInCrQmQpuFXMmFNpFJiTCfCIMSHG9nn1vtMLBJwf/0wNeJWYP6JpjekBb8QSSEIgqxXmApgzb/kl6y7GeRFclykhDqkwBGmVvsSM3izxVas+BCHdVYsC6Hy5JW6FraTyJo43TBKsAEczlQfGzwhYX51zi/w9pSLCl8ndGBDuTGEQYhjv9pkQRnIOeTgAAAABJRU5ErkJggg==';\nWb.downloadBase64(base64Text, 'insert.png');\n//Wb.downloadBlob(fileOrBlob, 'myFile.dat');" } } ] }, { "_icon": "title", "text": "downloadAfterUploadingTitle", "cls": "Wb.Title", "properties": { "cid": "downloadAfterUploadingTitle", "title": "Download after uploading" } }, { "_icon": "container", "text": "downloadAfterUploadingCt", "cls": "Wb.Container", "properties": { "cid": "downloadAfterUploadingCt", "layout": "grid1", "frame": "true", "labelUp": "true" }, "_expanded": true, "items": [ { "_icon": "search-file", "text": "multiFileInput", "cls": "Wb.FileInput", "properties": { "cid": "multiFileInput", "browseMode": "true", "text": "Please select multiple files", "multiple": "true", "accept": "image/*", "browseHeight": "6em" } }, { "_icon": "text", "text": "text1", "cls": "Wb.Text", "properties": { "cid": "text1", "text": "Other control" } }, { "_icon": "button", "text": "downloadAfterUploadButton", "cls": "Wb.Button", "properties": { "cid": "downloadAfterUploadButton", "text": "Download after upload", "type": "primary" }, "events": { "click": "const uploading = 'Uploading now, please wait...';\nconst downloading = 'Downloading now, please wait...';\n\nWb.ajax({\n url: xpath + '/actions&xaction=downloadAfterUpload',\n comps: app.downloadAfterUploadingCt,\n download: true,\n params: { foo: 'bar' },\n mask: uploading, //let the default mask is \"uploading\"\n onUpload(percent) {\n Wb.progress(percent, uploading);\n },\n onDownload(percent) {\n Wb.progress(percent, downloading);\n },\n callback() {\n Wb.unmask(downloading);\n }\n});" } } ] } ] } ] } # example/load/server-load-module/execute.xwl Title: execute ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Load a javascript library.\n */\n loadJs() {\n let result;\n\n Wb.load('./util.js');\n result = My.Util.add(Wb.getInt('value1'), Wb.getInt('value2'));\n Wb.send(result);\n },\n /**\n * Synchronous load a javascript module.\n */\n loadMjs() {\n let result, Util = Wb.load('./util.mjs');\n\n result = Util.add(Wb.getInt('value1'), Wb.getInt('value2'));\n Wb.send(result);\n },\n /**\n * Asynchronous import a javascript module. This method is not recommended, please use Wb.load instead.\n */\n importMjs() {\n import('wb/modules/example/load/server-load-module/util.mjs').then(m => {\n let result = m.default.add(Wb.getInt('value1'), Wb.getInt('value2'));\n Wb.send(result);\n }).catch(e => {\n Wb.error(e?.toString());\n });\n },\n /**\n * Run a xwl module serverscript function.\n */\n runXwl() {\n let result;\n\n Wb.run('./util.xwl');\n result = app.add(Wb.getInt('value1'), Wb.getInt('value2'));\n Wb.send(result);\n },\n /**\n * Invoke a xwl module execute serverscript and obtain client script.\n */\n invokeXwl() {\n let script = Wb.execute('./query');\n Wb.send(script);\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/load/server-load-module/query.xwl Title: query ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.sendRows('select * from wb_staff');" }, "_icon": "module" } # example/load/server-load-module/util.xwl Title: util ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.apply(app, {\n /**\n * Perform add.\n * @param {Number} value1 Value 1\n * @param {Number} value2 Value 2\n * @return {Number} The result\n */\n add(value1, value2) {\n return value1 + value2;\n }\n});\nWb.log('Util.xwl runs every time.');" }, "_icon": "module" } # example/load/server-load-module.xwl Title: server-load-module ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Server load module, js and mjs", "cls": "w-title3" } }, { "_icon": "title", "text": "runModuleTitle", "cls": "Wb.Title", "properties": { "cid": "runModuleTitle", "title": "Run module" } }, { "_icon": "label", "text": "runModuleLabel", "cls": "Wb.Label", "properties": { "cid": "runModuleLabel", "text": "Run the module at serverside and call function of the module." } }, { "_icon": "button", "text": "runModuleBtn", "cls": "Wb.Button", "properties": { "cid": "runModuleBtn", "text": "Run module", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/execute&xaction=runXwl',\n params: { value1: 12, value2: 34 },\n success(resp) {\n Wb.tip('The result is ' + resp);\n }\n});" } }, { "_icon": "title", "text": "invokeModuleTitle", "cls": "Wb.Title", "properties": { "cid": "invokeModuleTitle", "title": "Invoke module" } }, { "_icon": "label", "text": "InvokeModuleLabel", "cls": "Wb.Label", "properties": { "cid": "InvokeModuleLabel", "text": "Call the module and obtain the HTML or script returned by the module." } }, { "_icon": "button", "text": "invokeModuleBtn", "cls": "Wb.Button", "properties": { "cid": "invokeModuleBtn", "text": "Invoke module", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/execute&xaction=invokeXwl',\n success(resp) {\n app.invokeModuleViewer.text = resp;\n console.table(Wb.decode(resp));\n }\n});" } }, { "_icon": "desktop", "text": "invokeModuleViewer", "cls": "Wb.Viewer", "properties": { "cid": "invokeModuleViewer", "height": "10em" } }, { "_icon": "title", "text": "loadJSTitle", "cls": "Wb.Title", "properties": { "cid": "loadJSTitle", "title": "Load Javascript" } }, { "_icon": "label", "text": "loadJSLabel", "cls": "Wb.Label", "properties": { "cid": "loadJSLabel", "text": "Load Javascript library at serverside." } }, { "_icon": "button", "text": "loadJSBtn", "cls": "Wb.Button", "properties": { "cid": "loadJSBtn", "text": "Load js", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/execute&xaction=loadJs',\n params: { value1: 12, value2: 34 },\n success(resp) {\n Wb.tip('The result is ' + resp);\n }\n});" } }, { "_icon": "title", "text": "loadMJSTitle", "cls": "Wb.Title", "properties": { "cid": "loadMJSTitle", "title": "Load mjs" } }, { "_icon": "label", "text": "loadMJSLabel", "cls": "Wb.Label", "properties": { "cid": "loadMJSLabel", "text": "Load Javascript module at serverside by Wb.load(recommended)." } }, { "_icon": "button", "text": "loadMJSBtn", "cls": "Wb.Button", "properties": { "cid": "loadMJSBtn", "text": "Load mjs", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/execute&xaction=loadMjs',\n params: { value1: 12, value2: 34 },\n success(resp) {\n Wb.tip('The result is ' + resp);\n }\n});" } }, { "_icon": "label", "text": "importMJSLabel", "cls": "Wb.Label", "properties": { "cid": "importMJSLabel", "text": "Import Javascript module at serverside by import(not recommended)." } }, { "_icon": "button", "text": "importMJSBtn", "cls": "Wb.Button", "properties": { "cid": "importMJSBtn", "text": "Import mjs", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/execute&xaction=importMjs',\n params: { value1: 12, value2: 34 },\n success(resp) {\n Wb.tip('The result is ' + resp);\n }\n});" } } ] } ] } # example/load/server-request/actions.xwl Title: actions ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Send get request.\n */\n getHtml() {\n Wb.send(Wb.submit('https://developer.mozilla.org'));\n },\n /**\n * Send post request with params.\n */\n postParams() {\n // For reference\n // Wb.submit({ url: 'http://localhost:8080/wb/m?xwl=test2', params: { foo: 'bar' } });\n },\n /**\n * Send post request with payload data.\n */\n postPayload() {\n // For reference\n // Wb.submit({ url: 'http://localhost:8080/wb/m?xwl=test2', data: payloadObject });\n },\n /**\n * Send post request with files.\n */\n postFiles() {\n // Wb.submit({\n // url: 'http://localhost:8080/wb/m?xwl=test2',\n // params: {\n // foo: 'bar', 'wb.js': new Wb.File(true, 'wb/js/wb.js'), file: javaFile,\n // myBytes: bytes, 'name|filename.dat': inputStream\n // }\n // });\n },\n /**\n * Login to the system, verify the username and password, and get the cookie token.\n */\n loginAndLogout() {\n // For reference\n /*\n let cookie = Wb.submit({\n url: 'http://localhost:8080/wb/verify', all: true, params: { username: 'admin', password: 'admin' }\n }).cookie;\n //Access module1 with logined cookie token\n let result = Wb.submit({ url: 'http://localhost:8080/wb/m?xwl=module1', cookie }, { foo: 'bar' });\n //Logout\n Wb.submit({ url: 'http://localhost:8080/wb/logout', cookie });\n */\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/load/server-request.xwl Title: server-request ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "Server side web request", "cls": "w-title3" } }, { "_icon": "title", "text": "getHtmlTitle", "cls": "Wb.Title", "properties": { "cid": "getHtmlTitle", "title": "Get mozilla.org site html" } }, { "_icon": "desktop", "text": "htmlSourceViewer", "cls": "Wb.Viewer", "properties": { "cid": "htmlSourceViewer", "height": "8em" } }, { "_icon": "button", "text": "getHtmlBtn", "cls": "Wb.Button", "properties": { "cid": "getHtmlBtn", "text": "Get html", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=getHtml',\n success(resp) {\n app.htmlSourceViewer.text = resp;\n }\n});" } }, { "_icon": "title", "text": "postParamsTitle", "cls": "Wb.Title", "properties": { "cid": "postParamsTitle", "title": "Send post request with params" } }, { "_icon": "button", "text": "postParamsBtn", "cls": "Wb.Button", "properties": { "cid": "postParamsBtn", "text": "Post params", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=postParams',\n success(resp) {\n Wb.tipDone();\n }\n});" }, "_expanded": true }, { "_icon": "title", "text": "postPayloadDataTitle", "cls": "Wb.Title", "properties": { "cid": "postPayloadDataTitle", "title": "Send post request with payload data" } }, { "_icon": "button", "text": "postPayloadDataBtn", "cls": "Wb.Button", "properties": { "cid": "postPayloadDataBtn", "text": "Post payload data", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=postPayload',\n success(resp) {\n Wb.tipDone();\n }\n});" } }, { "_icon": "title", "text": "postFileTitle", "cls": "Wb.Title", "properties": { "cid": "postFileTitle", "title": "Send post request with files" } }, { "_icon": "button", "text": "postFilesBtn", "cls": "Wb.Button", "properties": { "cid": "postFilesBtn", "text": "Post files", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=postFiles',\n success(resp) {\n Wb.tipDone();\n }\n});" }, "_expanded": true }, { "_icon": "title", "text": "loginTitle", "cls": "Wb.Title", "properties": { "cid": "loginTitle", "title": "Login to the system, access modules and logout." } }, { "_icon": "button", "text": "loginAccessBtn", "cls": "Wb.Button", "properties": { "cid": "loginAccessBtn", "text": "Login and Access", "type": "primary" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=loginAndLogout',\n success(resp) {\n Wb.tipDone();\n }\n});" } } ] } ] } # example/load/switch-module.xwl Title: switch-module ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.invoke(Params.type == 'someType' ? 'admin/user' : 'dbe');" }, "_icon": "module" } # example/load/xwl-static-load.xwl Title: xwl-static-load ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "links": "[\n \"wb/js/monaco.js\"\n]", "description": "Please note that since the xwl module can be recursively loaded,\nits dependent js/css resources need to be explicitly loaded in the module's links property" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "_expanded": true, "properties": { "cid": "viewport1", "layout": "row" }, "items": [ { "_icon": "container", "text": "container1", "cls": "Wb.Container", "properties": { "cid": "container1", "layout": "fit", "width": "50%" }, "_expanded": true, "items": [ { "_icon": "module", "text": "userXwl", "cls": "Wb.Xwl", "properties": { "cid": "userXwl", "path": "admin/user.xwl", "ready": "// parentApp in user.xwl is app of this module\n// parentContainer in user.xwl is Wb.Container of the user.xwl wrapper\nscope.viewport1.title = 'User Module'; // same as app.userXwl.viewport1.title = 'User Module';\ncontainer.border = 1;", "container": "({ padding: '.5em' })" } } ] }, { "_icon": "splitter", "text": "splitter1", "cls": "Wb.Splitter", "properties": { "cid": "splitter1" }, "_expanded": true }, { "_icon": "container", "text": "container2", "cls": "Wb.Container", "properties": { "cid": "container2", "layout": "fit", "flex": "1" }, "_expanded": true, "items": [ { "_icon": "module", "text": "dbeXwl", "cls": "Wb.Xwl", "properties": { "cid": "dbeXwl", "path": "admin/dbe.xwl", "ready": "scope.viewport1.title = 'DBE Module';\ncontainer.border = 1;", "container": "({ padding: '.5em' })" } } ] } ] } ] } # example/tools/excel-form/actions.xwl Title: actions ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Select data.\n */\n select() {\n Wb.sendDict('select * from wb_staff', 'wb,');\n },\n /**\n * Get form.\n */\n getForm() {\n Wb.send(Wb.getExcelHtml('form.xlsx', { now: new Date().dateText }));\n },\n /**\n * Export data.\n */\n export() {\n let data = Wb.getObject('data');\n data.gender = data.gender$; // display text\n Wb.getExcelFile('my-form.xlsx', 'form.xlsx', data);\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/tools/excel-form.xwl Title: excel-form ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "events": { "initialize": "Wb.apply(app, {\n /**\n * Fire after module is loaded.\n */\n onLoad() {\n Wb.ajax({\n url: xpath + '/actions&xaction=getForm',\n success(resp) {\n app.container1.html = resp;\n Wb.setValue(app.container1, { name: 'Your name', code: '10000' });\n }\n });\n }\n});" }, "_expanded": true, "items": [ { "_icon": "array", "text": "bindComps", "cls": "Wb.Array", "properties": { "cid": "bindComps" }, "_expanded": true, "items": [ { "_icon": "text", "text": "name", "cls": "Wb.Text", "properties": { "cid": "name", "required": "true", "instanced": "false" } }, { "_icon": "text", "text": "nation", "cls": "Wb.Text", "properties": { "cid": "nation", "instanced": "false" } }, { "_icon": "combo", "text": "gender", "cls": "Wb.Select", "properties": { "cid": "gender", "keyName": "gender", "instanced": "false" } }, { "_icon": "calendar", "text": "birthdate", "cls": "Wb.Date", "properties": { "cid": "birthdate", "instanced": "false" } }, { "_icon": "number-edit", "text": "height", "cls": "Wb.Number", "properties": { "cid": "height", "instanced": "false", "decimalCount": "1" } }, { "_icon": "number-edit", "text": "weight", "cls": "Wb.Number", "properties": { "cid": "weight", "instanced": "false" } }, { "_icon": "number-edit", "text": "salary", "cls": "Wb.Number", "properties": { "cid": "salary", "instanced": "false" } }, { "_icon": "text", "text": "marry", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "marry", "instanced": "false" } }, { "_icon": "text", "text": "mobile", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "mobile", "instanced": "false" } }, { "_icon": "text", "text": "email", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "email", "instanced": "false" } }, { "_icon": "text", "text": "address", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "address", "instanced": "false" } }, { "_icon": "text", "text": "contact", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "contact", "instanced": "false" } }, { "_icon": "image", "text": "photo", "cls": "Wb.Image", "properties": { "cid": "photo", "src": "wb/images/app/logo.png", "instanced": "false", "height": "140" } }, { "_icon": "text", "text": "university", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "university", "instanced": "false" } }, { "_icon": "text", "text": "grade", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "grade", "instanced": "false" } }, { "_icon": "text", "text": "speciality", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "speciality", "instanced": "false" } }, { "_icon": "text", "text": "class", "cls": "Wb.Text", "_expanded": true, "properties": { "cid": "class", "instanced": "false" } }, { "_icon": "grid", "text": "grid", "cls": "Wb.Grid", "properties": { "cid": "grid", "url": "@xpath + '/actions&xaction=select'", "instanced": "false", "height": "169" } }, { "_icon": "textarea", "text": "resume", "cls": "Wb.TextArea", "properties": { "cid": "resume", "instanced": "false", "height": "186" } } ] }, { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "_expanded": true, "properties": { "cid": "viewport1", "autoScroll": "true", "layout": "fit" }, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "exportItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "exportItem", "text": "Export", "icon": "export" }, "events": { "click": "Wb.download(xpath + '/actions&xaction=export', { data: Wb.getValue(app.container1) });" } } ] }, { "_icon": "container", "text": "container1", "cls": "Wb.Container", "properties": { "cid": "container1", "layout": "middle", "autoMake": "true" } } ] } ] } # example/tools/excel-report/actions.xwl Title: actions ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Reload data.\n */\n reload() {\n let html;\n\n html = Wb.getExcelHtml('report.xlsx', this.getData(), this.getRowConfigs());\n Wb.send(html);\n },\n /**\n * Export data.\n */\n export() {\n Wb.getExcelFile('my-report.xlsx', 'report.xlsx', this.getData(), this.getRowConfigs());\n },\n /**\n * Get report data.\n * @return {Object} Report data.\n */\n getData() {\n return {\n name: 'Geejing', date: new Date().dateText, by: 'Janice Galvin', reviewer: 'Rachel Valdez',\n director: 'Annette Hill', email: 'contact@geejing.com',\n rows: Wb.getAllRows('select * from wb_report_demo1 order by row_num')\n };\n },\n /**\n * Get write rows configs. @priv\n */\n getRowConfigs() {\n // [{ name: 'rows', x: 0, y: 5, sheet: 'Sheet2', mergeRows: ['f1', 'f3'], mergeCols: [['f1', 'f2'], ['f5', 'f6']] }, more...]\n return {\n name: 'rows', x: 0, y: 5, mergeRows: 'f1', mergeCols: 'f1, f2'\n }\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/tools/excel-report.xwl Title: excel-report ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "events": { "initialize": "Wb.apply(app, {\n /**\n * Fire after module is loaded.\n */\n onLoad() {\n app.reloadItem.fireEvent('click');\n }\n});" }, "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "_expanded": true, "properties": { "cid": "viewport1", "autoScroll": "true", "layout": "fit" }, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "reloadItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "reloadItem", "text": "Reload", "icon": "refresh" }, "events": { "click": "Wb.ajax({\n url: xpath + '/actions&xaction=reload',\n success(resp) {\n app.container1.html = '';\n app.container1.html = resp;\n }\n});" } }, { "_icon": "item", "text": "exportItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "exportItem", "text": "Export", "icon": "export" }, "events": { "click": "Wb.download(xpath + '/actions&xaction=export');" } }, { "_icon": "item", "text": "printItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "printItem", "text": "Print", "icon": "print" }, "events": { "click": "Wb.print(app.container1, 'A3 landscape');" } } ] }, { "_icon": "container", "text": "container1", "cls": "Wb.Container", "properties": { "cid": "container1", "layout": "middle", "cls": "w-max-size /* for print centered only */" } } ] } ] } # example/tools/mail-sender/send.xwl Title: send ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n let sender, attachFiles, submitFiles = [];\n\n sender = new Wb.MailSender(\n Params.smtp,\n Params.username,\n Params.password,\n Params.authUsername,\n Params.authPassword,\n { 'mail.smtp.auth': true, 'mail.smtp.sendpartial': true }\n );\n attachFiles = Wb.getParams('attachFiles');\n attachFiles.forEach(file => {\n submitFiles.push({ name: file.name, data: file.stream });\n });\n try {\n sender.send(Params.from, Params.to, Params.title, Params.content, submitFiles, Params.cc);\n } finally {\n sender.close();\n }\n}\nmain();" }, "_icon": "module" } # example/tools/mail-sender.xwl Title: mail-sender ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "title", "text": "titleComp", "cls": "Wb.Title", "properties": { "cid": "titleComp", "title": "Email Sender" } }, { "_icon": "text", "text": "smtp", "cls": "Wb.Text", "properties": { "cid": "smtp", "text": "Smtp", "required": "true", "value": "smtp.xxx.com" } }, { "_icon": "text", "text": "username", "cls": "Wb.Text", "properties": { "cid": "username", "text": "Username", "required": "true", "value": "name@xxx.com" }, "_expanded": true }, { "_icon": "text", "text": "password", "cls": "Wb.Text", "properties": { "cid": "password", "text": "Password", "required": "true", "value": "password" }, "_expanded": true }, { "_icon": "text", "text": "authUsername", "cls": "Wb.Text", "properties": { "cid": "authUsername", "text": "Auth username", "value": "name@xxx.com" }, "_expanded": true }, { "_icon": "text", "text": "authPassword", "cls": "Wb.Text", "properties": { "cid": "authPassword", "text": "Auth password", "value": "someAuthNumber" }, "_expanded": true }, { "_icon": "text", "text": "from", "cls": "Wb.Text", "properties": { "cid": "from", "text": "From", "required": "true", "value": "name@xxx.com" } }, { "_icon": "text", "text": "to", "cls": "Wb.Text", "properties": { "cid": "to", "text": "To", "required": "true", "value": "to@xxx.com" } }, { "_icon": "text", "text": "cc", "cls": "Wb.Text", "properties": { "cid": "cc", "text": "CC" } }, { "_icon": "text", "text": "title", "cls": "Wb.Text", "properties": { "cid": "title", "text": "Title" } }, { "_icon": "textarea", "text": "content", "cls": "Wb.TextArea", "properties": { "cid": "content", "text": "Mail Content", "value": "Hello world" } }, { "_icon": "search-file", "text": "attachFiles", "cls": "Wb.FileInput", "properties": { "cid": "attachFiles", "multiple": "true", "text": "Attach Files" } }, { "_icon": "button", "text": "Send", "cls": "Wb.Button", "properties": { "cid": "Send", "text": "Send", "icon": "paper-plane", "type": "primary" }, "events": { "click": "if (!Wb.verify(app.viewport1))\n return;\nWb.ajax({\n url: xpath + '/send',\n comps: app.viewport1,\n success() {\n Wb.tipSucc('The email has been successfully sent.');\n }\n});" } } ] } ] } # example/tools/sql-to-excel/create.xwl Title: create ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n let bos, rowx, cols;\n\n bos = new ByteArrayOutputStream();\n rowx = Wb.getRowx({ sql: 'select * from wb_staff', rs: -1 });\n cols = rowx.columns;\n cols.shift(); // shift row num col\n cols.forEach(col => col.width = parseInt(col.width));\n com.wb.office.SheetWriter.createExcel(bos, Wb.toJava(cols), Wb.toJava(rowx.items), 0, 'Staff List', null);\n Wb.exportData(bos.toByteArray(), 'staff.xlsx');\n}\nmain();" }, "_icon": "module" } # example/tools/sql-to-excel.xwl Title: sql-to-excel ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "label", "text": "mainLabel", "cls": "Wb.Label", "properties": { "cid": "mainLabel", "text": "SQL to Excel", "cls": "w-title3" } }, { "_icon": "title", "text": "textTitle", "cls": "Wb.Title", "properties": { "cid": "textTitle", "title": "Export to Excel" } }, { "_icon": "button", "text": "downloadBtn", "cls": "Wb.Button", "properties": { "cid": "downloadBtn", "text": "Download", "type": "primary" }, "events": { "click": "Wb.download(xpath + '/create');" } } ] } ] } # example/touch/chat/actions.xwl Title: actions ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Get chats list. @priv\n */\n getChats() {\n Wb.sendRowx({\n sql: `\n select a.send_date, a.text_content, a.bin_len, b.userid, c.display_name from\n\n wb_chats a,\n\n (\n select userid, max(sid) as sid from\n (\n select sid,from_user as userid from wb_chats where to_user={?sys.userid?}\n union all\n select sid,to_user as userid from wb_chats where from_user={?sys.userid?}\n ) x\n group by userid\n ) b,\n\n wb_user c\n\n where a.sid=b.sid and b.userid=c.sid\n order by a.send_date desc\n `,\n clob: 100\n });\n },\n /**\n * Get chat detail. @priv\n */\n getChatDetail() {\n Wb.sendRows(`\n select sid,send_date,text_content,bin_len,1 as direction from wb_chats where to_user={?sys.userid?} and from_user={?userid?}\n union all\n select sid,send_date,text_content,bin_len,0 as direction from wb_chats where from_user={?sys.userid?} and to_user={?userid?}\n order by send_date desc\n `);\n },\n /**\n * Download the chat blob content. @priv\n */\n download() {\n let row = Wb.getRow({ sql: 'select bin_len,text_content,bin_content from wb_chats where sid={?id?}', blob: true });\n // for download filename purpose\n Wb.setContentType(row.text_content, null, row.bin_len);\n Wb.send(row.bin_content);\n },\n /**\n * Get contact user list. @priv\n */\n getContacts() {\n Wb.sendRowx('select sid, user_name, display_name, email from wb_user where sid<>{?sys.userid?} and status=1');\n },\n /**\n * Send message from current user to another user. @priv\n */\n sendMessage() {\n let file = Params.file, toUser = Params.userid, data;\n\n data = {\n sid: Wb.getId(),\n send_date: new Date(),\n from_user: Wb.userid,\n bin_len: file?.size,\n text_content: Params.text\n }\n Wb.sync({\n tableName: 'wb_chats',\n insert: Wb.apply({ to_user: toUser, bin_content: file?.stream }, data)\n });\n data.display_name = Wb.dispname;\n Wb.send(data, 'wb.chat', toUser);\n Wb.send(data);\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/touch/chat/user-detail.xwl Title: user-detail ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "dialog", "text": "main", "cls": "Wb.Dialog", "properties": { "cid": "main", "autoScroll": "true" }, "_expanded": true, "events": { "hidden": "this.destroy(); // remove this code if Wb.run use single mode" }, "items": [ { "_icon": "component", "text": "summaryComp", "cls": "Wb.Component", "properties": { "cid": "summaryComp", "tpl": "

{display_name}

User name: {user_name}

User id: {sid}

E-mail: {email}

", "padding": "1em" } }, { "_icon": "line", "text": "line1", "cls": "Wb.Line", "properties": { "cid": "line1", "margin": "top" } }, { "_icon": "options", "text": "sendMsgOption", "cls": "Wb.Option", "_expanded": false, "properties": { "cid": "sendMsgOption", "text": "Send message", "icon": "message", "buttonStyle": "true" }, "events": { "click": "let chatApp = app.chatApp, data = chatApp.openUserData;\napp.main.close(true); // optional\nchatApp.openChat({ userid: data.sid, display_name: data.display_name });" } }, { "_icon": "padding", "text": "gap1", "cls": "Wb.Gap", "properties": { "cid": "gap1" } }, { "_icon": "options", "text": "noteOption", "cls": "Wb.Option", "properties": { "cid": "noteOption", "text": "Set notes and labels", "border": "bottom" }, "events": { "click": "Wb.tip(this.text);" }, "_expanded": true }, { "_icon": "options", "text": "permOption", "cls": "Wb.Option", "properties": { "cid": "permOption", "text": "Friend permissions" }, "events": { "click": "Wb.tip(this.text);" } }, { "_icon": "padding", "text": "gap2", "cls": "Wb.Gap", "properties": { "cid": "gap2" } }, { "_icon": "options", "text": "momentOption", "cls": "Wb.Option", "_expanded": true, "properties": { "cid": "momentOption", "height": "5em", "text": "Moments", "border": "bottom" }, "events": { "click": "Wb.tip(this.text);" } }, { "_icon": "options", "text": "moreOption", "cls": "Wb.Option", "_expanded": false, "properties": { "cid": "moreOption", "text": "More information" }, "events": { "click": "Wb.tip(this.text);" } }, { "_icon": "padding", "text": "gap3", "cls": "Wb.Gap", "_expanded": true, "properties": { "cid": "gap3", "flex": "1" } }, { "cls": "Wb.Array", "properties": { "cid": "tools" }, "text": "tools", "_expanded": true, "_icon": "array", "items": [ { "_icon": "item", "text": "menuItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "menuItem", "icon": "menu", "plainIcon": "true" }, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "addItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "addItem", "icon": "add", "text": "@Str.add" } }, { "_icon": "item", "text": "editItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "editItem", "icon": "edit", "text": "@Str.edit" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "_expanded": true, "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "delItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "delItem", "icon": "delete", "text": "@Str.del" } } ] } ] } ] } ] } ] } # example/touch/chat.xwl Title: chat ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "links": "[\n \"wb/css/demo.css\"\n]" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.define(app, {\n /** @property {Array} - Cached url resource list. @priv */\n cachedUrls: [],\n /** @property {Object} chatData The user data of current chat dialog. @priv */\n /**\n * View chat details of the specific user. @priv\n * @param {Object} data The user data.\n * @param {String} .userid The user id.\n * @param {String} .display_name The user display name.\n * @param {Function} [callback] A function to be called when the chat window is displayed.\n */\n openChat(data, callback) {\n let userid = data.userid;\n Wb.ajax({\n url: xpath + '/actions&xaction=getChatDetail',\n params: { userid },\n json: true,\n success(resp) {\n let detailComp = app.detailComp, dialog = app.chatDetailDialog;\n detailComp.el.textContent = '';\n app.cachedUrls.forEach(item => URL.revokeObjectURL(item));\n app.lastChatDate = null;\n resp.each(item => {\n app.addMessage(item, false, true);\n }, true, true);\n dialog.title = data.display_name;\n dialog.setVisible(true, f => callback?.call(dialog));\n app.chatData = data;\n detailComp.dialogScrollTop ??= {};\n detailComp.el.scrollTop = detailComp?.dialogScrollTop[userid] ?? detailComp.el.scrollHeight;\n dialog.on('close', f => detailComp.dialogScrollTop[userid] = detailComp.el.scrollTop, true, { once: true });\n app.chatsView.findItem('userid', userid)?.set('badge', null);\n }\n });\n },\n /**\n * Create chat message in chat dialog. @priv\n * @param {Object} data Chat data.\n * @param {Boolean} [loadingIcon] Whether to create a loading icon.\n * @param {Boolean} [keepScrollPos] Whether to keep scroll position.\n * @return {Object} {loadingEl, textEl} object.\n */\n addMessage(data, loadingIcon, keepScrollPos) {\n let detailComp = app.detailComp, el = detailComp.el, date, wrap, textEl, loadingEl;\n\n date = data.send_date.dateValue;\n //if span > 10 min\n if (!app.lastChatDate || date.elapse(app.lastChatDate) > 600000)\n el.addEl('w-title5 w-ta-center').textContent = date.prettyText;\n wrap = el.addEl('w-row w-align-center w-gap w-margin-tb1');\n if (data.direction == 1) {\n wrap.addEl('w-icon icon-user2 w-size2');\n // you can merge all classes to one class\n app.createContent(textEl = wrap.addEl(), data);\n } else {\n wrap.cls = 'w-justify-end';\n if (loadingIcon)\n loadingEl = wrap.addEl('w-icon w-spin icon-loading w-hidden');\n app.createContent(textEl = wrap.addEl(), data);\n wrap.addEl('w-icon icon-user3 w-size2');\n }\n app.lastChatDate = date;\n if (!keepScrollPos)\n detailComp.scrollToBottom();\n return { loadingEl, textEl };\n },\n /**\n * Create message content. @priv\n * @param {Element} el The message element.\n * @param {Object} data The data to render.\n */\n createContent(el, data) {\n let text = data.text_content, size = data.bin_len, sid = data.sid;\n if (size != null) {\n if (Wb.isImageFile(text)) {\n let img = el.addEl('w-pointer', 'img'), url;\n\n if (data.file) {\n url = URL.createObjectURL(data.file);\n app.cachedUrls.push(url);\n } else {\n url = xpath + '/actions&xaction=download&id=' + sid;\n }\n img.draggable = false;\n img.src = url;\n img.height = 80;\n } else {\n let wrap = el.addEl('w-column');\n el.cls = 'w-btn w-row w-align-center w-gap2 wx-file';\n wrap.addEl('w-label').textContent = text;\n wrap.addEl('w-title5').textContent = size.fileSize;\n el.addEl('w-size2 w-icon icon-' + Wb.getFileIcon(text));\n if (sid)\n el.recordSid = sid;\n el.maxWidth = '70%';\n }\n } else {\n el.cls = data.direction == 1 ? 'w-msg1' : 'w-msg2';\n el.textContent = text;\n }\n },\n /** @property {Object} openUserData The user data of current user dialog. @priv */\n /**\n * View user details of the specific user. @priv\n * @param {Object} data The user data to open.\n */\n openUser(data) {\n // if use single mode, user-detail main dialog must not be destroyed.\n Wb.run({\n url: xpath + '/user-detail', /* single: true, */ success(scope) {\n let dialog = scope.main;\n scope.chatApp = app;\n scope.summaryComp.update(data)\n app.openUserData = data;\n dialog.show();\n dialog.el.scrollTop = 0;\n }\n });\n },\n /**\n * Send text message. @priv\n */\n sendText() {\n let textArea = app.textArea1, value = textArea.value;\n if (value.length) {\n app.doSend({ text_content: value });\n textArea.clear();\n } else {\n Wb.tipWarn('Please input text');\n textArea.focus();\n }\n },\n /**\n * Send file. @priv\n */\n sendFile() {\n Wb.selectFile(file => {\n app.doSend({ text_content: file.name, file, bin_len: file.size });\n });\n },\n /**\n * Send any data. @priv\n * @param {Object} [configs] Configs data.\n */\n doSend(configs) {\n let data = app.chatData, loadingIcon, elMap, userid = data.userid;\n\n elMap = app.addMessage(Wb.apply({\n send_date: new Date().textValue,\n direction: 2\n }, configs), true);\n loadingIcon = elMap.loadingEl;\n loadingIcon.removeCls.delay(loadingIcon, Wb.configs.maskDelay, 'w-hidden');\n Wb.ajax({\n url: xpath + '/actions&xaction=sendMessage',\n params: { userid, text: configs.text_content, file: configs.file },\n mask: false,\n json: true,\n callback(resp, xhr) {\n loadingIcon.removeCls.cancelDelay();\n if (xhr.ok)\n loadingIcon.remove();\n else\n loadingIcon.className = 'w-icon icon-error';\n elMap.textEl.recordSid = resp.sid;\n app.updateChatView({\n display_name: data.display_name,\n userid,\n send_date: resp.send_date,\n text_content: resp.text_content\n });\n }\n });\n },\n /**\n * Update chat view list when sending or receiving messages\n * @param {Object} [data] Chat view item data.\n * @param {Boolean} [incBadge] Increment badge count.\n */\n updateChatView(data, incBadge) {\n let chatItem, chatsView = app.chatsView;\n\n chatItem = chatsView.findItem('userid', data.userid) ?? new Wb.ViewItem();\n chatsView.insert(0, chatItem);\n if (incBadge)\n data.badge = Math.min(99, (chatItem.data.badge || 0) + 1);\n chatItem.update(data);\n },\n /**\n * Receive message from websocket. @priv\n */\n receiveMessage(e) {\n let data = Wb.decode(e.data);\n\n // add to chat detail dialog\n if (data.from_user == app.chatData?.userid) {\n data.direction = 1;\n app.addMessage(data);\n } else {\n app.updateChatView({\n display_name: data.display_name,\n userid: data.from_user,\n send_date: data.send_date,\n text_content: data.text_content\n }, true);\n }\n }\n});" }, "items": [ { "_icon": "plug", "text": "socket", "cls": "Wb.Socket", "properties": { "cid": "socket", "name": "wb.chat" }, "events": { "close": "if (!Wb.unloading && !Globals.WbMainTab)\n Wb.login();", "message": "app.receiveMessage(e);" } }, { "_icon": "array", "text": "templates", "cls": "Wb.Array", "properties": { "cid": "templates" }, "_expanded": true, "items": [ { "_icon": "dialog", "text": "chatDetailDialog", "cls": "Wb.Dialog", "properties": { "cid": "chatDetailDialog", "layout": "column", "background": "true", "focusControl": "false" }, "_expanded": true, "events": { "close": "app.chatData = null;" }, "items": [ { "_icon": "component", "text": "detailComp", "cls": "Wb.Component", "properties": { "cid": "detailComp", "flex": "1", "border": "true", "cls": "w-scroll-y w-padding-lr1" }, "events": { "ready": "this.onClickPreview();", "click": "let fileBtn = e.target.closest('.wx-file');\nif (fileBtn) {\n let sid = fileBtn.recordSid;\n if (sid) {\n Wb.download(xpath + '/actions&xaction=download&id=' + sid);\n } else {\n Wb.tip('The file is being sent, please wait...');\n }\n}" } }, { "_icon": "splitter", "text": "splitter1", "cls": "Wb.Splitter", "properties": { "cid": "splitter1", "visible": "@Wb.isDesktop" } }, { "_icon": "panel", "text": "panel1", "cls": "Wb.Panel", "properties": { "cid": "panel1", "layout": "row", "padding": "@Wb.isTouch", "border": "false" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true", "background": "true", "visible": "@Wb.isDesktop", "border": "false", "plainIcon": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "fileItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "fileItem", "tip": "Send file", "icon": "folder-open", "handler": "app.sendFile" } } ] }, { "_icon": "textarea", "text": "textArea1", "cls": "Wb.TextArea", "properties": { "cid": "textArea1", "maxHeight": "@Wb.isTouch?'10em':undefined", "autoResize": "@Wb.isTouch", "rows": "1", "minHeight": "@Wb.isTouch?undefined:'8em'", "flex": "1", "inactiveBorder": "true", "padding": "true" }, "_expanded": true, "events": { "keydown": "if (e.isGoKey) {\n if (e.ctrlMeta)\n this.replaceSelection('\\n');\n else\n app.sendText();\n e.stopEvent();\n}" } }, { "_icon": "toolbar", "text": "touchBar", "cls": "Wb.Toolbar", "properties": { "cid": "touchBar", "visible": "@Wb.isTouch", "plainIcon": "true", "alignSelf": "center" }, "_expanded": true, "items": [ { "_icon": "item", "text": "fileItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "fileItem", "tip": "Send file", "icon": "folder-open", "handler": "app.sendFile" } }, { "_icon": "item", "text": "sendItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "sendItem", "type": "primary", "text": "Send", "padding": "0 .4em", "handler": "app.sendText" } } ] } ] }, { "_icon": "button", "text": "sendBtn", "cls": "Wb.Button", "properties": { "cid": "sendBtn", "text": "Send", "alignSelf": "end", "margin": "true", "visible": "@Wb.isDesktop", "type": "primary", "cname": "simpleButton", "handler": "app.sendText" } }, { "cls": "Wb.Array", "properties": { "cid": "tools" }, "text": "tools", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Item", "properties": { "cid": "chatInfoItem", "icon": "ellipsis" }, "text": "chatInfoItem", "_expanded": true, "_icon": "item" } ] } ] } ] }, { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "fit" }, "_expanded": true, "items": [ { "_icon": "tab", "text": "tab1", "cls": "Wb.Tab", "_expanded": true, "properties": { "cid": "tab1", "touchStyle": "true", "cls": "d-we-chat" }, "events": { "cardchange": "if (newCard)\n this.title = newCard.title;", "ready": "this.title = this.firstItem.title;" }, "items": [ { "_icon": "card", "text": "chatsCard", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "chatsCard", "icon": "message", "closable": "null", "title": "Chats", "layout": "fit" }, "items": [ { "_icon": "list1", "text": "chatsView", "cls": "Wb.ListView", "properties": { "cid": "chatsView", "datevalueField": "send_date", "textField": "display_name", "url": "@xpath + '/actions&xaction=getChats'", "border": "false", "subtextField": "text_content", "defaultFields": "({\n _icon: { value: 'user2' },\n iconvalue: { value: 'bell-off' }\n})", "cursorPointer": "true", "selectColor": "active" }, "events": { "itemclick": "app.openChat(item.data);" } } ] }, { "_icon": "card", "text": "contactsCard", "cls": "Wb.Card", "properties": { "cid": "contactsCard", "icon": "address-book", "closable": "null", "title": "Contacts", "layout": "fit" }, "_expanded": true, "items": [ { "_icon": "list1", "text": "contactsView", "cls": "Wb.ListView", "properties": { "cid": "contactsView", "textField": "display_name", "url": "@xpath + '/actions&xaction=getContacts'", "selectColor": "active", "border": "false", "defaultFields": "({\n _icon: { value: 'user2' }\n})", "cursorPointer": "true" }, "events": { "itemclick": "app.openUser(item.data);" } } ] }, { "_icon": "card", "text": "discoverCard", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "discoverCard", "icon": "discovery", "closable": "null", "title": "Discover", "layout": "fit" }, "items": [ { "_icon": "list-view", "text": "discoverView", "cls": "Wb.View", "properties": { "cid": "discoverView", "data": "[\n { icon: 'moment', title: 'Moment' },\n { gap: true, _disabled: true },\n { icon: 'video', title: 'Video' },\n { icon: 'broadcast', title: 'Live' },\n { gap: true, _disabled: true },\n { icon: 'scan', title: 'Scan' },\n { icon: 'command', title: 'Shake ' },\n { gap: true, _disabled: true },\n { icon: 'search-file', title: 'Search ' },\n { gap: true, _disabled: true },\n { icon: 'cart', title: 'Shopping ' },\n { icon: 'game', title: 'Game ' },\n { gap: true, _disabled: true },\n { icon: 'data-provider', title: 'Programs ' }\n]", "itemTpl": "{if data.gap}\n

\n{else}\n

{title}

\n{/if}", "background": "true", "cls": "w-disp-grid", "border": "false" }, "events": { "itemclick": "Wb.tip(item.data.title + ' clicked');" } } ] }, { "_icon": "card", "text": "serviceCard", "cls": "Wb.Card", "_expanded": true, "properties": { "cid": "serviceCard", "icon": "briefcase", "closable": "null", "title": "Service", "layout": "fit" }, "events": { "click": "let item = e.target.getClosestComp(Wb.ViewItem);\nif (item)\n Wb.tip(item.data.text + ' clicked');" }, "items": [ { "_icon": "container", "text": "serviceCt", "cls": "Wb.Container", "properties": { "cid": "serviceCt", "layout": "grid1", "gap": ".5em", "padding": ".5em", "background": "true" }, "_expanded": true, "items": [ { "_icon": "component", "text": "bannerComp", "cls": "Wb.Component", "properties": { "cid": "bannerComp", "html": "

Payment

Wallet

" }, "events": { "click": "let el = e.target.closest('[xid]');\nif (el)\n Wb.tip(el.getAttribute('xid') + ' clicked');" } }, { "_icon": "panel", "text": "financialPanel", "cls": "Wb.Panel", "properties": { "cid": "financialPanel", "title": "Financial Planning", "icon": "money", "layout": "grid1", "roundBorder": "true", "padding": "false", "plainTitle": "true" }, "_expanded": true, "items": [ { "_icon": "list-view", "text": "financialView", "cls": "Wb.View", "properties": { "cid": "financialView", "itemTpl": "

{text}

", "layout": "grid4", "data": "[\n { icon: 'card', text: 'Credit Card' },\n { icon: 'money', text: 'Loan' },\n { icon: 'command', text: 'Wealth' },\n { icon: 'component', text: 'Insurance' }\n]", "bodyCls": "w-grid4", "padding": "2em", "border": "false", "clickSelect": "false", "gap": "1em" }, "_expanded": true } ] }, { "_icon": "panel", "text": "lifePanel", "cls": "Wb.Panel", "properties": { "cid": "lifePanel", "title": "Life Services", "icon": "handshake", "layout": "grid1", "roundBorder": "true", "padding": "false", "plainTitle": "true" }, "_expanded": true, "items": [ { "_icon": "list-view", "text": "lifeView", "cls": "Wb.View", "properties": { "cid": "lifeView", "itemTpl": "

{text}

", "layout": "grid4", "data": "[\n { icon: 'mobile', text: 'Recharge' },\n { icon: 'module', text: 'Pay' },\n { icon: 'qq', text: 'QQ Coin' },\n { icon: 'building', text: 'City Service' },\n { icon: 'heart1', text: 'Public Welfare' },\n { icon: 'disc', text: 'Health' }\n]", "bodyCls": "w-grid4", "padding": "2em", "border": "false", "clickSelect": "false", "gap": "1em" }, "_expanded": true } ] }, { "_icon": "panel", "text": "transportationPanel", "cls": "Wb.Panel", "properties": { "cid": "transportationPanel", "plainTitle": "true", "title": "Transportation", "icon": "car", "layout": "grid1", "roundBorder": "true", "padding": "false" }, "_expanded": true, "items": [ { "_icon": "list-view", "text": "transportationView", "cls": "Wb.View", "properties": { "cid": "transportationView", "itemTpl": "

{text}

", "layout": "grid4", "data": "[\n { icon: 'location', text: 'Travel' },\n { icon: 'train', text: 'Train Tickets' },\n { icon: 'car', text: 'Taxi' },\n { icon: 'school', text: 'Hotel' },\n { icon: 'identity', text: 'Identity' }\n]", "bodyCls": "w-grid4", "padding": "2em", "border": "false", "clickSelect": "false", "gap": "1em" }, "_expanded": true } ] } ] } ] } ] } ] } ] } # example/workflow/leave/actions.xwl Title: actions ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "true", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Select leave data.\n */\n selectLeave() {\n let result = Wb.getRow('select * from wb_leave where flow_id={?flowId?}');\n result.flowTitle = new Wb.Workflow({ flowId: Params.flowId }).title;\n Wb.send(result);\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/workflow/leave/after-action.xwl Title: after-action ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.info('after flow action: ' + app.action); // action name\nWb.info('after flow id: ' + app.flow.flowId); // workflow id\n//return 'value'; // return to client" }, "_icon": "module" } # example/workflow/leave/before-action.xwl Title: before-action ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.info('before flow action: ' + app.action); // action name\nWb.info('before flow id: ' + app.flow.flowId); // workflow id\n//return 'value'; // return to client" }, "_icon": "module" } # example/workflow/leave/handle-form.xwl Title: handle-form ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n let flow, row;\n\n flow = new Wb.Workflow({ flowId: Params.flowId });\n Params.userid = flow.userid;\n row = Wb.getRow('select * from wb_leave where flow_id={?flowId?} and user_id={?userid?}');\n row.applicant = flow.getInitUser().displayName;\n Params.leaveData = Wb.encode(row);\n}\nmain();" }, "_icon": "module", "_expanded": true, "events": { "initialize": "/*\n * Xwl comments.\n * @class $path\n */\nWb.apply(app, {\n /** @property {Boolean} - Whether to hide default action buttons. */\n hideActionButtons: true,\n /** @property {Object} - Static leave data. @priv */\n leaveData: _$leaveData$_,\n /**\n * Fires after displaying the window.\n * @param {String} flowId The workflow instance id.\n * @return {String} type Window type.\n * -'start': Start window.\n * -'handle': Handle window.\n * -'view': View window.\n * @param {Wb.GridItem} record The workflow record.\n */\n init(flowId, type, record) {\n Wb.setValue(app.main, app.leaveData);\n app.radioGroup1.visible = type == 'handle';\n Wb.log(record.data.node_name);\n },\n /**\n * Fires when the OK button is clicked.\n */\n onAction() {\n let value;\n switch (app.radioGroup1.value) {\n /**\n * Do pass action.\n * @param {Object} params The parameters object.\n * @param {Function} callback The callback function after executed.\n * @function doPass\n */\n case 0:\n app.doPass();\n break;\n /**\n * Do back action.\n * @param {String} nodeName The back to node name.\n * @param {Object} params The parameters object.\n * @param {Function} callback The callback function after executed.\n * @function doBack\n */\n case 1:\n value = app.nodeSelect.value;\n if (value)\n app.doBack(value);\n else {\n app.nodeSelect.focus();\n Wb.tipSelect();\n }\n break;\n /**\n * Do transfer action.\n * @param {String} user The user id.\n * @param {Object} params The parameters object.\n * @param {Function} callback The callback function after executed.\n * @function doTransfer\n */\n case 2:\n value = app.userSelect.value;\n if (value)\n app.doTransfer(value);\n else {\n app.userSelect.focus();\n Wb.tipSelect();\n }\n break;\n /**\n * Do reject action.\n * @param {Object} params The parameters object.\n * @param {Function} callback The callback function after executed.\n * @function doReject\n */\n case 3:\n app.doReject();\n break;\n /**\n * Do sign before action.\n * @param {String} user The user id.\n * @param {Object} params The parameters object.\n * @param {Function} callback The callback function after executed.\n * @function doSignBefore\n */\n case 4:\n value = app.userSelect.value;\n if (value)\n app.doSignBefore(value);\n else {\n app.userSelect.focus();\n Wb.tipSelect();\n }\n break;\n /**\n * Do sign after action.\n * @param {String} user The user id.\n * @param {Object} params The parameters object.\n * @param {Function} callback The callback function after executed.\n * @function doSignAfter\n */\n case 5:\n value = app.userSelect.value;\n if (value)\n app.doSignAfter(value);\n else {\n app.userSelect.focus();\n Wb.tipSelect();\n }\n break;\n }\n }\n});" }, "items": [ { "_icon": "window", "text": "main", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "main", "layout": "column", "icon": "paper-plane", "title": "Leave application", "visible": "true", "padding": "true", "autoScroll": "true", "width": "80em" }, "items": [ { "_icon": "radios", "text": "radioGroup1", "cls": "Wb.RadioGroup", "properties": { "cid": "radioGroup1" }, "events": { "change": "let value = this.value;\n\nif (value == 3)\n value = 0;\nelse if (value == 4 || value == 5)\n value = 2;\napp.cardCt1.activeIndex = value;\nif (value == 1 && !app.nodeSelect.value) {\n app.nodeSelect.picker.load({ success() { this.parent.valueIndex = 0 } });\n}" }, "_expanded": true, "items": [ { "_icon": "check2", "text": "passRadio", "cls": "Wb.Radio", "properties": { "cid": "passRadio", "label": "@Str.pass", "value": "true" } }, { "_icon": "check2", "text": "backRadio", "cls": "Wb.Radio", "properties": { "cid": "backRadio", "label": "@Str.back1" } }, { "_icon": "check2", "text": "transferRadio", "cls": "Wb.Radio", "_expanded": true, "properties": { "cid": "transferRadio", "label": "@Str.transfer" } }, { "_icon": "check2", "text": "rejectRadio", "cls": "Wb.Radio", "_expanded": true, "properties": { "cid": "rejectRadio", "label": "@Str.reject" } }, { "_icon": "check2", "text": "signBeforeRadio", "cls": "Wb.Radio", "_expanded": true, "properties": { "cid": "signBeforeRadio", "label": "@Str.signBefore" } }, { "_icon": "check2", "text": "signAfterRadio", "cls": "Wb.Radio", "_expanded": true, "properties": { "cid": "signAfterRadio", "label": "@Str.signAfter" } } ] }, { "_icon": "win-restore", "text": "cardCt1", "cls": "Wb.CardCt", "properties": { "cid": "cardCt1", "border": "false" }, "_expanded": true, "items": [ { "_icon": "container", "text": "container1", "cls": "Wb.Container", "properties": { "cid": "container1", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "text", "text": "applicant", "cls": "Wb.Text", "properties": { "cid": "applicant", "text": "Applicant", "readonly": "true" }, "_expanded": true }, { "_icon": "calendar", "text": "begin_date", "cls": "Wb.Date", "properties": { "cid": "begin_date", "text": "Begin Date", "readonly": "true" } }, { "_icon": "calendar", "text": "end_date", "cls": "Wb.Date", "properties": { "cid": "end_date", "text": "End Date", "readonly": "true" } }, { "_icon": "number-edit", "text": "leave_days", "cls": "Wb.Number", "properties": { "cid": "leave_days", "text": "Leave Days", "readonly": "true" } }, { "_icon": "text", "text": "leave_reason", "cls": "Wb.Text", "properties": { "cid": "leave_reason", "text": "Leave Reason", "readonly": "true" }, "_expanded": true } ] }, { "_icon": "container", "text": "container2", "cls": "Wb.Container", "properties": { "cid": "container2", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "combo", "text": "nodeSelect", "cls": "Wb.Select", "properties": { "cid": "nodeSelect", "url": "m?xwl=my/my-flow/get-his-nodes", "text": "Select node", "forceSelect": "true" }, "events": { "beforeload": "params.flowId = app.flowId;" } } ] }, { "_icon": "container", "text": "container3", "cls": "Wb.Container", "properties": { "cid": "container3", "layout": "grid1" }, "_expanded": true, "items": [ { "_icon": "combo", "text": "userSelect", "cls": "Wb.Select", "properties": { "cid": "userSelect", "url": "m?xwl=sys/dialog/user-selector/select", "textField": "display_name", "valueField": "sid", "subtextField": "user_name", "text": "Select user", "forceSelect": "true" } } ] } ] } ] } ] } # example/workflow/leave/start-form.xwl Title: start-form ```json { "title": "", "icon": "", "img": "", "tags": "{container: false}", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.apply(app, {\n /**\n * Fires after action execution.\n * @param {String} action The action name.\n * @param {Wb.Workflow} flow The workflow instance.\n * @return {Object} The returned \"after\" parameter to the client.\n */\n afterAction(action, flow) {\n if (flow.restarting) {\n Params.$flow_id = flow.flowId;\n Wb.sync({ tableName: 'wb_leave', update: Params, whereFields: 'flow_id' });\n } else {\n Wb.apply(Params, { sid: Wb.getId(), flow_id: flow.flowId, user_id: flow.handleUser });\n Wb.sync({ tableName: 'wb_leave', insert: Params });\n }\n }\n});" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n /** @property {Boolean} - Whether to auto show window. */\n autoShow: false,\n /**\n * Fires after displaying the window.\n * @param {String} flowId The workflow instance id.\n * @return {String} type Window type.\n * -'start': Start window.\n * -'handle': Handle window.\n * -'view': View window.\n * @param {Wb.GridItem} record The workflow record.\n */\n init(flowId, type, record) {\n if (flowId) {\n Wb.ajax({\n url: xpath + '/../actions&xaction=selectLeave',\n params: { flowId },\n json: true,\n success(resp) {\n Wb.setValue(app.main, resp);\n app.main.show();\n }\n });\n } else {\n app.main.show();\n }\n }\n});" }, "items": [ { "_icon": "window", "text": "main", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "main", "layout": "grid1", "title": "Leave application", "icon": "paper-plane", "visible": "true", "autoScroll": "true" }, "items": [ { "_icon": "text", "text": "flowTitle", "cls": "Wb.Text", "properties": { "cid": "flowTitle", "text": "Title", "required": "true" } }, { "_icon": "calendar", "text": "begin_date", "cls": "Wb.Date", "_expanded": true, "properties": { "cid": "begin_date", "text": "Begin Date", "required": "true" } }, { "_icon": "calendar", "text": "end_date", "cls": "Wb.Date", "_expanded": true, "properties": { "cid": "end_date", "text": "End Date", "required": "true" } }, { "_icon": "number-edit", "text": "leave_days", "cls": "Wb.Number", "properties": { "cid": "leave_days", "decimalCount": "0", "text": "Leave days", "required": "true", "minValue": "0", "maxLength": "5" } }, { "_icon": "text", "text": "leave_reason", "cls": "Wb.Text", "properties": { "cid": "leave_reason", "text": "Reason", "required": "true" } } ] } ] } # example/workflow/manual-start/start.xwl Title: start ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n let flow, now = new Date();\n\n flow = new Wb.Workflow({ file: 'example/leave.flw', title: 'My leave application' });\n flow.start();\n Wb.sync({\n tableName: 'wb_leave', insert: {\n sid: Wb.getId(), begin_date: now.addDay(2), end_date: now.addDay(5),\n flow_id: flow.flowId, user_id: Wb.userid, leave_days: 8, leave_reason: 'Go on vacation'\n }\n });\n}\nmain();" }, "_icon": "module" } # example/workflow/manual-start.xwl Title: manual-start ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "_expanded": true, "properties": { "cid": "viewport1", "layout": "grid1" }, "items": [ { "_icon": "title", "text": "title1", "cls": "Wb.Title", "properties": { "cid": "title1", "title": "Manual start a new workflow" } }, { "_icon": "button", "text": "button1", "cls": "Wb.Button", "properties": { "cid": "button1", "type": "primary", "text": "Start a new workflow" }, "events": { "click": "Wb.ajax({\n url: xpath + '/start',\n success() {\n Wb.tip('The workflow started, click to view it.', null,\n f => Wb.openNormal({\n url: 'my-flow', success(scope) {\n scope.grid1.reload();\n }\n }));\n }\n});" }, "_expanded": true } ] } ] } # example/workflow/reimburse/actions.xwl Title: actions ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "true", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Select start/restart data.\n */\n selectStartData() {\n let result;\n\n result = Wb.getRowx('select * from wb_reimburse where flow_id={?flowId?}');\n result.flowTitle = new Wb.Workflow({ flowId: Params.flowId }).title;\n Wb.send(result);\n },\n /**\n * Select handle data.\n */\n selectHandleData() {\n let flow, list, history;\n\n flow = new Wb.Workflow({ flowId: Params.flowId });\n // Specify userid to limit only the initiate user data to be visible\n Params.userid = flow.userid;\n list = Wb.getRows(`select exp_date,item_name,amount from wb_reimburse where flow_id={?flowId?}\n and user_id={?userid?} order by exp_date`);\n history = Wb.getRows(`select b.process_time,c.display_name,b.opinions from wb_reimburse a,\n wb_ra_opinions b, wb_user c where a.flow_id={?flowId?} and a.user_id={?userid?}\n and a.sid=b.reimburse_id and b.approver_user_id=c.sid\n order by b.process_time`);\n Wb.send({ list, history, applicant: flow.getInitUser().text });\n }\n};\nactions[Params.xaction]();" }, "_icon": "module" } # example/workflow/reimburse/handle-form.xwl Title: handle-form ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.apply(app, {\n /**\n * Fires before action execution.\n * @param {String} action The action name.\n * @param {Wb.Workflow} flow The workflow instance.\n * @return {Object} The returned \"before\" parameter to the client.\n */\n beforeAction(action, flow) {\n },\n /**\n * Fires after action execution.\n * @param {String} action The action name.\n * @param {Wb.Workflow} flow The workflow instance.\n * @return {Object} The returned \"after\" parameter to the client.\n */\n afterAction(action, flow) {\n let node = flow.beforeNode, reimburse_id = Wb.getRecord('select sid from wb_reimburse where flow_id={?flowId?}')?.[0],\n node_text = flow.getNodeLabel(node);\n\n // Params._newUser: New user id of transfer, signBefore, signAfter\n // Params._backNode: Back to node name.\n Wb.sync({\n tableName: 'wb_ra_opinions',\n insert: {\n sid: Wb.getId(), reimburse_id, process_time: new Date(), approver_user_id: flow.handleUser, node_text,\n opinions: 'Action: ' + action + '\\nNode: ' + node_text + '\\n' + Params.opinions\n }\n });\n if (action == 'pass' && flow.completed) {\n return { type: 'done', msg: 'Congratulations! The process has been fully completed.' };\n }\n }\n});" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n /** @property {Boolean} - Whether to auto show window. */\n autoShow: false,\n /**\n * Fires after displaying the window.\n * @param {String} flowId The workflow instance id.\n * @return {String} type Window type.\n * -'start': Start window.\n * -'handle': Handle window.\n * -'view': View window.\n * @param {Wb.GridItem} record The workflow record.\n */\n init(flowId, type, record) {\n app.opinionsTitle.visible = app.opinions.visible = type == 'handle';\n app.getData(flowId);\n Wb.log(record.data.node_name);\n },\n /**\n * Fires before action execution.\n * @param {String} action The action name.\n * @return {Object} Parameter object to be submitted. If returns false, the execution is canceled.\n * @param {Wb.GridItem} record The workflow record.\n */\n beforeAction(action, record) {\n Wb.log('action: ' + action + ', node name: ' + record.data.node_name);\n },\n /**\n * Fires after action execution.\n * @param {String} action The action name.\n * @param {Object} response The response object.\n * @param {Object} [.result] The flow record data.\n * @param {Object} [.before] The returned value of server beforeAction.\n * @param {Object} [.after] The returned value of server afterAction.\n * @param {Wb.GridItem} record The workflow record.\n */\n afterAction(action, response, record) {\n let afterData = response.after;\n Wb.log('action: ' + action + ', node name: ' + record.data.node_name);\n if (afterData?.type == 'done')\n Wb.tip(afterData.msg);\n },\n /**\n * Get window data. @priv\n * @param {String} flowId The workflow instance id.\n */\n getData(flowId) {\n Wb.ajax({\n url: xpath + '/../actions&xaction=selectHandleData',\n params: { flowId },\n json: true,\n success(resp) {\n let amount = 0, { list, history, applicant } = resp;\n\n app.grid1.addData(list);\n list.forEach(item => {\n amount += item.amount;\n })\n Wb.setValue(app.main, { applicant, amount });\n createHistory();\n app.main.show();\n // show opinions history\n function createHistory() {\n let comp = app.opinionsHistory, titleEl;\n comp.cls = 'w-padding w-sized8';\n history.forEach((item, i) => {\n titleEl = comp.addEl('w-row w-gap w-sub-color');\n if (i > 0)\n titleEl.cls = 'w-margin-top';\n titleEl.addEl().textContent = item.process_time.dateValue.dateTimeText;\n titleEl.addEl().textContent = item.display_name;\n comp.addEl().textContent = item.opinions;\n });\n }\n }\n });\n }\n});" }, "items": [ { "_icon": "window", "text": "main", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "main", "layout": "column", "icon": "money", "title": "Reimburse Form", "gap": "true", "padding": "true", "autoScroll": "true", "visible": "true", "width": "60em", "height": "40em" }, "items": [ { "_icon": "label1", "text": "applicant", "cls": "Wb.DisplayField", "properties": { "cid": "applicant", "text": "Applicant" } }, { "_icon": "label1", "text": "amount", "cls": "Wb.DisplayField", "properties": { "cid": "amount", "text": "Total amount" } }, { "_icon": "title", "text": "detailsTitle", "cls": "Wb.Title", "properties": { "cid": "detailsTitle", "title": "Details" } }, { "_icon": "grid", "text": "grid1", "cls": "Wb.Grid", "properties": { "cid": "grid1", "pagingBar": "false", "pageSize": "-1", "flex": "1", "minHeight": "8em", "fields": "({ process_time: { type: 'date' } })" }, "_expanded": true, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "rowCol", "rowNum": "true" }, "text": "rowCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "dateCol", "text": "Date", "fieldName": "exp_date" }, "text": "dateCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "itemNameCol", "text": "Item name", "fieldName": "item_name", "width": "-1" }, "text": "itemNameCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "amountCol", "text": "Amount", "fieldName": "amount", "width": "10em" }, "text": "amountCol", "_expanded": true, "_icon": "column" } ] } ] }, { "_icon": "title", "text": "opinionsHistoryTitle", "cls": "Wb.Title", "properties": { "cid": "opinionsHistoryTitle", "title": "Approval opinions history" }, "_expanded": true }, { "_icon": "component", "text": "opinionsHistory", "cls": "Wb.Component", "properties": { "cid": "opinionsHistory", "autoScroll": "true", "maxHeight": "10em", "cls": "w-pre" }, "_expanded": true }, { "_icon": "title", "text": "opinionsTitle", "cls": "Wb.Title", "properties": { "cid": "opinionsTitle", "title": "Approval opinions" } }, { "_icon": "textarea", "text": "opinions", "cls": "Wb.TextArea", "properties": { "cid": "opinions", "height": "6em", "required": "true" } } ] } ] } # example/workflow/reimburse/start-form.xwl Title: start-form ```json { "title": "", "icon": "", "img": "", "tags": "{container: false}", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.apply(app, {\n /**\n * Fires before action execution.\n * @param {String} action The action name.\n * @param {Wb.Workflow} flow The workflow instance.\n * @return {Object} The returned \"before\" parameter to the client.\n */\n beforeAction(action, flow) {\n },\n /**\n * Fires after action execution.\n * @param {String} action The action name.\n * @param {Wb.Workflow} flow The workflow instance.\n * @return {Object} The returned \"after\" parameter to the client.\n */\n afterAction(action, flow) {\n let flow_id = flow.flowId, user_id = Wb.userid, data = Wb.getObject('data');\n\n flow_id = flow.flowId;\n data.insert?.forEach(item => {\n Wb.apply(item, { sid: Wb.getId(), flow_id, user_id });\n });\n Wb.sync(Wb.apply({ tableName: 'wb_reimburse' }, data));\n }\n});" }, "_icon": "module", "_expanded": true, "events": { "initialize": "// app.flowId: The workflow id\n// app.restarting: Whether the workflow is restarting\nWb.apply(app, {\n /** @property {Boolean} - Whether to auto show window. */\n autoShow: false,\n /**\n * Fires after displaying the window.\n * @param {String} flowId The workflow instance id.\n * @param {String} type Window type.\n * -'start': Start window.\n * -'handle': Handle window.\n * -'view': View window.\n * @param {Wb.GridItem} record The workflow record.\n */\n init(flowId, type, record) {\n if (flowId) {\n app.grid1.load({\n params: { flowId }, success(a, b, resp) {\n app.flowTitle.value = resp.flowTitle;\n app.main.show();\n }\n });\n } else {\n app.main.show();\n }\n },\n /**\n * Fires before action execution.\n * @param {String} action The action name.\n * @param {Wb.GridItem} record The workflow record.\n * @return {Object} Parameter object to be submitted. If returns false, the execution is canceled.\n */\n beforeAction(action, record) {\n let grid = app.grid1;\n if (!grid.hasChild) {\n Wb.tipWarn('Please input at least one item');\n grid.startEdit(grid.addData({}), 1);\n return false;\n }\n return { data: app.grid1.modifiedData };\n },\n /**\n * Fires after action execution.\n * @param {String} action The action name.\n * @param {Object} response The response object.\n * @param {Object} [.result] The flow record data.\n * @param {Object} [.before] The returned value of server beforeAction.\n * @param {Object} [.after] The returned value of server afterAction.\n * @param {Wb.GridItem} record The workflow record.\n */\n afterAction(action, response, record) {\n Wb.log('action: ' + action + ', node name: ' + record.data.node_name);\n }\n});" }, "items": [ { "_icon": "window", "text": "main", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "main", "layout": "column", "width": "60em", "title": "Start reimbursement workflow", "icon": "money", "gap": "true", "padding": "true", "autoScroll": "true", "visible": "true", "height": "30em" }, "items": [ { "_icon": "text", "text": "flowTitle", "cls": "Wb.Text", "properties": { "cid": "flowTitle", "text": "Title", "required": "true" } }, { "_icon": "grid", "text": "grid1", "cls": "Wb.Grid", "properties": { "cid": "grid1", "editable": "true", "pagingBar": "false", "flex": "1", "minHeight": "8em", "url": "@xpath + '/../actions&xaction=selectStartData'", "pageSize": "-1", "autoLoad": "false" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "addBtn", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "addBtn", "text": "@Str.add", "icon": "add", "keys": "Ctrl+E" }, "events": { "click": "app.grid1.addRecord();" } }, { "_icon": "item", "text": "delBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "delBtn", "text": "@Str.del", "icon": "delete", "keys": "Ctrl+D" }, "events": { "click": "app.grid1.delRecords();" } } ] }, { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "rowCol", "rowNum": "true" }, "text": "rowCol", "_expanded": true, "_icon": "column" }, { "cls": "Wb.Column", "properties": { "cid": "dateCol", "text": "Date", "fieldName": "exp_date" }, "text": "dateCol", "_expanded": true, "_icon": "column", "items": [ { "cls": "Wb.Date", "properties": { "cid": "editor", "isProperty": "true", "required": "true" }, "text": "editor", "_expanded": true, "_icon": "calendar" } ] }, { "cls": "Wb.Column", "properties": { "cid": "itemNameCol", "text": "Item name", "fieldName": "item_name", "width": "-1" }, "text": "itemNameCol", "_expanded": true, "_icon": "column", "items": [ { "cls": "Wb.Text", "properties": { "cid": "editor", "isProperty": "true", "required": "true" }, "text": "editor", "_expanded": true, "_icon": "text" } ] }, { "cls": "Wb.Column", "properties": { "cid": "amountCol", "text": "Amount", "fieldName": "amount", "width": "10em" }, "text": "amountCol", "_expanded": true, "_icon": "column", "items": [ { "cls": "Wb.Number", "properties": { "cid": "editor", "isProperty": "true", "decimalCount": "2", "required": "true" }, "text": "editor", "_expanded": true, "_icon": "number-edit" } ] } ] } ] } ] } ] } # example/workflow/start-route/start-form.xwl Title: start-form ```json { "title": "", "icon": "", "img": "", "tags": "{container: false}", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "window", "text": "main", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "main", "layout": "grid1", "title": "Starting with fork", "icon": "flow1", "visible": "true", "autoScroll": "true" }, "items": [ { "_icon": "number-edit", "text": "startValue", "cls": "Wb.Number", "properties": { "cid": "startValue", "decimalCount": "0", "text": "Value", "required": "true", "minValue": "0", "maxLength": "5" } } ] } ] } # my/home.xwl Title: Home Description: My home page ```json { "title": "@home", "icon": "home", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "// Get desktop data\nfunction loadPageData() {\n let data = Wb.getResource(['desktop', 'desktop'], [null, 'system']), items, url;\n\n data = data[0] ?? data[1];\n items = data?.portlets || [];\n items.forEach(item => {\n try {\n url = item.moduleUrl;\n item.script = Wb.permitx(url) && Wb.execute(url);\n } catch (e) {\n item.script = e?.toString();\n }\n });\n Wb.set({ items: Wb.encode(items) });\n}\nloadPageData();", "remark": "My home page" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n /**\n * Execute after load.\n */\n onLoad() {\n let card = parentContainer;\n\n app.restorePanels();\n if (card?.app?.inHome) {\n let tab = card.parent;\n app.viewport1.homeTab = tab; // don't assign to app, prevent tab auto destroy\n app.onCardChange.call(tab, card);\n tab.on('cardchange', app.onCardChange)\n }\n },\n /**\n * Execute after tab card change. @priv\n */\n onCardChange(card) {\n let tree = this.app.moduleTree, enabled = card == parentContainer;\n\n tree.draggable = enabled ? {\n acceptDrop() {\n let data = this.source[0].data, tags = data.tags, panel;\n\n if (tags) {\n tags = Wb.parse(tags);\n if (tags.frame || tags.newWin) {\n Wb.tipWarn(Str.cannotOpenModule);\n return;\n }\n }\n panel = app.createPanel({\n moduleUrl: 'm?xwl=' + data.path, icon: data._icon, img: data._img, tags,\n strTitle: data.strTitle, title: data.text\n });\n panel.intoView();\n panel.highlight();\n }\n } : false;\n tree.setEvents(enabled, 'itemdrag', app.onItemDrag);\n },\n /**\n * Module tree items drag. @priv\n */\n onItemDrag(data) {\n let d = data.source[0].data;\n data.allowDrop = d._leaf && d.path != 'my/home';\n data.mode = 'append';\n },\n /**\n * Create module panel. @priv\n * @param {Object} data Module data.\n * @return {Wb.Panel} The created panel.\n */\n createPanel(data) {\n let panel, configs, moduleUrl, tags = data.tags, val, script;\n\n moduleUrl = data.moduleUrl;\n configs = {\n cname: 'panel', layout: 'fit', plainTitle: true, roundBorder: true, closable: true, maximizable: true,\n moduleUrl, tags\n };\n val = data.col || 6;\n configs.gridColValue = val;\n configs.gridColumn = 'span ' + val;\n val = data.row || 4;\n configs.gridRowValue = val;\n configs.gridRow = 'span ' + val;\n if (data.icon)\n configs.icon = data.icon;\n else if (data.img)\n configs.img = data.img;\n if (data.strTitle) {\n configs.strTitle = data.strTitle;\n configs.title = Str[data.strTitle];\n } else {\n configs.title = data.title;\n }\n panel = app.viewport1.add(configs);\n configs = {\n container: panel, updateTitle: false, success(scope) {\n let vp = panel.firstItem, tools;\n\n if (vp instanceof Wb.Panel) {\n vp.border = false;\n tools = vp.tools?.filter(tool => tool.icon != 'close') ?? [];\n if (vp.title)\n panel.title = vp.title;\n if (vp.icon)\n panel.icon = vp.icon;\n else if (vp.img)\n panel.img = vp.img;\n } else {\n tools = [];\n }\n tools.push({\n icon: 'menu', handler() {\n let comp = this.up(p => p instanceof Wb.Panel);\n app.menuSetComp = comp;\n app.colSlider.value = comp.gridColValue ?? 1;\n app.rowSlider.value = comp.gridRowValue ?? 1;\n app.mainMenu.showBy(this);\n }\n });\n panel.tools = tools;\n vp?.titleBar$?.destroy();\n if (scope?.noTitlebar) {\n panel.titleBar.hide();\n panel.mon({\n mouseenter() {\n this.titleBar.show();\n },\n mouseleave() {\n this.titleBar.hide();\n }\n })\n }\n }\n };\n script = data.script;\n if (script)\n configs.script = script;\n else\n configs.url = moduleUrl;\n Wb.open(Wb.apply(configs, tags));\n return panel;\n },\n /**\n * Restore saved panels. @priv\n */\n restorePanels() {\n let items = _$items$_;\n\n items.forEach(item => {\n app.createPanel(item);\n });\n }\n});" }, "items": [ { "_icon": "menu2", "text": "mainMenu", "cls": "Wb.Menu", "properties": { "cid": "mainMenu", "layout": "grid1", "defaults": "({ labelWidth: '5em' })", "minWidth": "18em", "gap": "true", "padding": "1em" }, "_expanded": true, "items": [ { "_icon": "slidebar", "text": "colSlider", "cls": "Wb.Slider", "properties": { "cid": "colSlider", "text": "@Str.column", "maxValue": "12", "minValue": "1", "suffix": "true" }, "events": { "change": "app.menuSetComp.gridColValue = value;\napp.menuSetComp.gridColumn = 'span ' + value;" } }, { "_icon": "slidebar", "text": "rowSlider", "cls": "Wb.Slider", "properties": { "cid": "rowSlider", "text": "@Str.row", "minValue": "1", "maxValue": "12", "suffix": "true" }, "events": { "change": "app.menuSetComp.gridRowValue = value;\napp.menuSetComp.gridRow = 'span ' + value;" } } ] }, { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "grid12", "background": "true", "padding": ".5em", "gap": ".5em", "itemsSortable": "true", "droppable": "wb.home", "bodyCls": "w-home-body" }, "events": { "destroy": "app.viewport1.homeTab?.un('cardchange', app.onCardChange);", "beforesort": "// only allow drag title bar\nif (!dragComp?.titleBar.el.contains(e.target))\n return false;" } } ] } # my/my-flow/back.xwl Title: back Description: Approval workflow withdrawn ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Approval workflow withdrawn", "serverScript": "function main() {\n const Util = Wb.load('./util.mjs');\n Util.doAction('back');\n}\nmain();" }, "_icon": "module" } # my/my-flow/get-his-nodes.xwl Title: get-his-nodes Description: Get history nodes list ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Get history nodes list", "serverScript": "function main() {\n let recs, nodeName, distinctRecs = [];\n\n recs = Wb.getRecord('select node_name from wb_flow where sid={?flowId?}');\n Params.nodeName = recs?.[0];\n recs = Wb.getAllRecords(`select node_text,node_name from wb_flow_user where flow_id={?flowId?}\n and user_type<2 and node_name<>{?nodeName?} order by accept_time desc`);\n recs.forEach(rec => {\n nodeName = rec[1];\n if (distinctRecs.every(item => item[1] != nodeName))\n distinctRecs.push(rec);\n });\n distinctRecs.lastItem[0] = Str.initiator;\n Wb.send(distinctRecs);\n}\nmain();" }, "_icon": "module" } # my/my-flow/get-start-form.xwl Title: get-start-form Description: Get starting form ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Get starting form", "serverScript": "function main() {\n const Util = Wb.load('./util.mjs');\n let flow = new Wb.Workflow({ file: Params.file });\n Wb.send({ form: Util.getForm(flow, 'start') });\n}\nmain();" }, "_icon": "module" } # my/my-flow/pass.xwl Title: pass Description: Approval workflow passed ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Approval workflow passed", "serverScript": "function main() {\n const Util = Wb.load('./util.mjs');\n Util.doAction('pass');\n}\nmain();" }, "_icon": "module" } # my/my-flow/reject.xwl Title: reject Description: Approval workflow rejected ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Approval workflow rejected", "serverScript": "function main() {\n const Util = Wb.load('./util.mjs');\n Util.doAction('reject');\n}\nmain();" }, "_icon": "module" } # my/my-flow/select.xwl Title: select Description: Select my flow list ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Select my flow list", "serverScript": "function main() {\n let sql, result, userid = Wb.userid;\n\n sql = `select a.sid,a.user_id,a.start_time,a.title,a.status,a.node_name,a.node_text,a.tpl_file,d.display_name,\n b.status as user_status,b.user_type,b.node_name as user_node_name from\n wb_flow a,\n wb_flow_user b,\n (select flow_id,max(accept_time) as accept_time from wb_flow_user where user_id={?sys.userid?} group by flow_id) c,\n wb_user d\n where a.sid=b.flow_id and b.flow_id=c.flow_id and b.accept_time=c.accept_time and b.user_id={?sys.userid?} and a.user_id=d.sid`;\n sql += getTypeSql(Params.type);\n if (Params.search) {\n Wb.setLike('search');\n sql += ' and a.title like {?search?}';\n };\n sql += Wb.getOrderSql({ display_name: 'd.display_name', $: 'a' });\n result = Wb.getRowx({ sql });\n result.items.forEach(item => item.initiate = item.user_id == userid ? 1 : 0);\n Wb.send(result);\n}\n/**\n * Get select type sql clause.\n * @param {String} type Select type.\n */\nfunction getTypeSql(type) {\n switch (type) {\n case 'initiated':\n return ' and a.user_id={?sys.userid?}';\n case 'pendHandle':\n return ' and a.status=1 and b.status<2 and b.user_type<2 and a.node_name=b.node_name';\n case 'handled':\n return ' and b.status>1';\n case 'pass':\n return ' and b.status=2';\n case 'reject':\n return ' and b.status=3';\n case 'back':\n return ' and b.status=4';\n case 'transfer':\n return ' and b.status=5';\n case 'signBefore':\n return ' and b.status=6';\n case 'signAfter':\n return ' and b.status=7';\n case 'backed':\n return ' and b.status=8';\n default:\n return '';\n }\n}\nmain();" }, "_icon": "module" } # my/my-flow/sign-after.xwl Title: sign-after Description: Add signature after approval ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Add signature after approval", "serverScript": "function main() {\n const Util = Wb.load('./util.mjs');\n Util.doAction('signAfter');\n}\nmain();" }, "_icon": "module" } # my/my-flow/sign-before.xwl Title: sign-before Description: Add signature before approval ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Add signature before approval", "serverScript": "function main() {\n const Util = Wb.load('./util.mjs');\n Util.doAction('signBefore');\n}\nmain();" }, "_icon": "module" } # my/my-flow/start.xwl Title: start Description: Start a new workflow ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Start a new workflow", "serverScript": "function main() {\n const Util = Wb.load('./util.mjs');\n Util.doAction('start');\n}\nmain();" }, "_icon": "module" } # my/my-flow/terminate.xwl Title: terminate Description: Terminate workflow ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Terminate workflow", "serverScript": "function main() {\n let ids = Wb.getObject('ids'), update = [], $user_id = Wb.userid, $status = 1, status = 0;\n\n ids.forEach($sid => {\n update.push({ $sid, $user_id, $status, status });\n });\n // [whereFields: 'sid,user_id,status']: Restrict the update of record\n Wb.sync({ tableName: 'wb_flow', whereFields: 'sid,user_id,status', update });\n}\nmain();" }, "_icon": "module" } # my/my-flow/transfer.xwl Title: transfer Description: Approval workflow transfered ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Approval workflow transfered", "serverScript": "function main() {\n const Util = Wb.load('./util.mjs');\n Util.doAction('transfer');\n}\nmain();" }, "_icon": "module" } # my/my-flow/view-progress.xwl Title: view-progress Description: View the progress of workflow ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "View the progress of workflow", "serverScript": "function main() {\n let flow = new Wb.Workflow({ flowId: Params.flowId });\n\n Wb.send({\n flow: flow.flow, activeNode: flow.activeNode.data.name,\n users: Wb.getRowx(`select a.accept_time,a.process_time,b.display_name,a.node_name,a.node_text,a.status,a.user_type\n from wb_flow_user a, wb_user b where a.flow_id={?flowId?} and a.user_id=b.sid order by a.accept_time`)\n });\n}\nmain();" }, "_icon": "module" } # my/my-flow/view.xwl Title: view Description: View the form of workflow ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "View the form of workflow", "serverScript": "function main() {\n const Util = Wb.load('./util.mjs');\n let now = new Date(), flow = new Wb.Workflow({ flowId: Params.flowId }), form, update = [], userid = Wb.userid;\n\n // Mark the given flow read\n Wb.getObject('allFlowId').forEach(item => {\n update.push({ $flow_id: item, $user_id: userid, $status: 0, status: 1, process_time: now });\n });\n Wb.sync({\n tableName: 'wb_flow_user', whereFields: 'flow_id,user_id,status', unique: false, update\n });\n form = Wb.getBool('handle') ? Util.getForm(flow, 'handle') : Util.getForm(flow, 'view');\n if (!form)\n Wb.raise('The workflow is configured with neither handleForm nor viewForm.');\n Wb.send({\n form, back: flow.getProperty('back'), transfer: flow.getProperty('transfer'), reject: flow.getProperty('reject'),\n signBefore: flow.getProperty('signBefore'), signAfter: flow.getProperty('signAfter'), restarting: flow.restarting\n });\n}\nmain();" }, "_icon": "module" } # my/my-flow.xwl Title: My Workflow Description: My initiated or participated workflows ```json { "title": "@myWorkflow", "icon": "flow", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "My initiated or participated workflows", "links": "[\n \"wb/libs/x6.js\",\n \"wb/js/flow-designer.js\"\n]" }, "_icon": "module", "_expanded": true, "events": { "initialize": "Wb.apply(app, {\n /**\n * Open file dialog and select a workflow file to start a new workflow instance. @priv\n */\n start() {\n Wb.promptFile((a, win, file) => {\n Wb.ajax({\n url: xpath + '/get-start-form',\n params: { file },\n json: true,\n success(resp) {\n let url = resp.form;\n if (!url) {\n Wb.error(Str.noStartForm);\n return;\n }\n win.close();\n if (url.endsWith('.xwl'))\n url = Wb.getModuleUrl(url);\n Wb.run({\n url,\n success(scope) {\n let main = scope.main;\n scope.flowTplFile = file;\n if (main) {\n main.hide(); // for fire show event\n main.closeAction = 'destroy';\n main.modal = true;\n main.onEsc = main.onCancel;\n main.onEnter = f => app.doAction('start', scope, {});\n main.buttonsBar.add([\n { text: Str.ok, type: 'primary', icon: 'ok', cid: 'ok', handler: main.onEnter },\n { text: Str.cancel, icon: 'delete', handler() { main.close() } }\n ]);\n if (scope.autoShow ?? true) {\n main.show();\n main.center();\n }\n }\n scope.init?.(null, 'start', {});\n }\n });\n }\n });\n }, '|wb/system/resource/flow', '.flw', Str.selectFile, false, 'm?xwl=sys/file/get-resource');\n },\n /**\n * Check whether the given workflow can be handled.\n * @param {Object} data Workflow instance data.\n * @return {Boolean} Returns true means can be handled, otherwise not.\n */\n canHandle(data) {\n return data.node_name == data.user_node_name && data.user_type <= 1 && data.user_status < 2 && data.status == 1;\n },\n /**\n * View the form of current selected workflow. @priv\n * @param {Boolean} handle Whether to handle the workflow.\n */\n view(handle) {\n let rec = app.grid1.selection, data = rec?.data, recs = app.grid1.selections, flowId = data?.sid;\n\n if (!flowId) {\n Wb.tipSelect();\n return;\n }\n if (handle && !app.canHandle(data)) {\n Wb.tip(Str.notNeedHandle);\n return;\n }\n Wb.ajax({\n url: xpath + '/view',\n params: { flowId, handle, allFlowId: app.grid1.selectionsData.pluck('sid') },\n json: true,\n success(resp) {\n let url = resp.form;\n recs.forEach(rec => rec.data.user_status == 0 && rec.set('user_status', 1));\n if (url.endsWith('.xwl'))\n url = Wb.getModuleUrl(url);\n Wb.run({\n url,\n params: { flowId },\n success(scope) {\n let main = scope.main;\n scope.flowId = flowId;\n scope.restarting = resp.restarting;\n if (main) {\n main.hide();\n main.closeAction = 'destroy';\n main.modal = true;\n main.onEsc = main.onCancel;\n if (handle) {\n let btns = [], isStart = data.user_type == 0;\n scope.doPass = (params, callback) => app.doAction('pass', scope, rec, params, callback);\n scope.doReject = (params, callback) => app.doAction('reject', scope, rec, params, callback);\n scope.doBack = (node, params, callback) => app.doAction('back', scope, rec,\n Wb.apply({ _backNode: node }, params), callback);\n scope.doTransfer = (user, params, callback) => app.doAction('transfer', scope, rec,\n Wb.apply({ _newUser: user }, params), callback);\n scope.doSignBefore = (user, params, callback) => app.doAction('signBefore', scope, rec,\n Wb.apply({ _newUser: user }, params), callback);\n scope.doSignAfter = (user, params, callback) => app.doAction('signAfter', scope, rec,\n Wb.apply({ _newUser: user }, params), callback);\n if (scope.hideActionButtons) {\n main.onEnter = scope.onAction;\n btns.push({ text: Str.ok, icon: 'ok', type: 'primary', handler: main.onEnter });\n } else {\n main.onEnter = f => scope.doPass();\n btns.push({ text: isStart ? Str.ok : Str.pass, icon: 'ok', type: 'primary', handler: main.onEnter });\n if (!isStart && resp.reject == 'true') {\n btns.push({\n text: Str.reject, icon: 'delete4', handler() {\n if (app.onBeforeAction('reject', scope, rec) === false)\n return;\n Wb.confirm(Str.doConfirm.format(Str.reject), f => scope.doReject());\n }\n });\n }\n if (!isStart && resp.back != 'false')\n btns.push({\n text: Str.back1, icon: 'right4', handler() {\n if (app.onBeforeAction('back', scope, rec) === false)\n return;\n Wb.ajax({\n url: xpath + '/get-his-nodes',\n params: { flowId },\n json: true,\n success(resp) {\n let select = app.backNodeSelect, win = app.backWin;\n select.data = resp;\n select.valueIndex = 0;\n win.okHandler = f => {\n app.doAction('back', scope, rec, { _backNode: select.value }, f => win.close());\n };\n win.show();\n }\n });\n }\n });\n if (!isStart && resp.transfer != 'false') {\n btns.push({\n text: Str.transfer, icon: 'undo', handler() {\n app.doUserAction('transfer', scope, Str.transfer, rec);\n }\n });\n }\n if (!isStart && resp.signBefore != 'false') {\n btns.push({\n text: Str.signBefore, icon: 'column-before', handler() {\n app.doUserAction('signBefore', scope, Str.signBefore, rec);\n }\n });\n }\n if (!isStart && resp.signAfter != 'false') {\n btns.push({\n text: Str.signAfter, icon: 'column-after', handler() {\n app.doUserAction('signAfter', scope, Str.signAfter, rec);\n }\n });\n }\n }\n btns.push({ text: Str.cancel, icon: 'delete', handler() { main.close() } });\n main.buttonsBar.add(btns);\n\n } else {\n main.buttonsBar.add({ text: Str.close, type: 'primary', handler() { main.close() } });\n }\n if (scope.autoShow ?? true) {\n main.show();\n main.center();\n }\n }\n scope.init?.(flowId, handle ? 'handle' : 'view', rec);\n }\n });\n }\n });\n },\n /**\n * Perform action related to user. @priv\n * @param {String} action Action name.\n * @param {Object} scope App scope.\n * @param {String} title User dialog title.\n * @param {Wb.GridItem} rec Current record.\n */\n doUserAction(action, scope, title, rec) {\n if (app.onBeforeAction(action, scope, rec) !== false) {\n Wb.run({\n url: 'user-selector',\n single: true,\n success(userSel) {\n userSel.getValue((data, win) => {\n app.doAction(action, scope, rec, { _newUser: data.sid }, f => win.close());\n }, null, title, true);\n }\n });\n }\n },\n /**\n * Fire before action execute. @priv\n * @param {String} actionName The action name.\n * @param {Object} scope Dialog window scope.\n * @param {Wb.GridItem} record Current record.\n * @return {Object/Boolean} Params, Boolean means whether to cancel execute.\n */\n onBeforeAction(actionName, scope, record) {\n if (!Wb.verify(scope.main))\n return false;\n let params = scope.beforeAction?.(actionName, record);\n if (params === false)\n return false;\n else\n return params;\n },\n /**\n * Do the specified action. @priv\n * @param {String} actionName The action name.\n * @param {Object} scope Dialog window scope.\n * @param {Wb.ViewItem} rec Current selected record.\n * @param {Object} [extraParams] Extra params to submit.\n * @param {Function} [callback] Callback function after executed.\n */\n doAction(actionName, scope, rec, extraParams, callback) {\n let params, win = scope.main, isStart = actionName == 'start';\n\n params = app.onBeforeAction(actionName, scope, rec);\n if (params === false)\n return;\n params = Wb.copy(params);\n if (isStart)\n params.flowTplFile = scope.flowTplFile;\n else\n params.flowId = scope.flowId;\n if (extraParams)\n Wb.apply(params, extraParams);\n Wb.ajax({\n url: xpath + '/' + actionName,\n comps: win,\n params,\n json: true,\n success(resp) {\n let row = resp.result;\n win.close();\n if (isStart) {\n rec = app.grid1.insertData(0, row);\n rec.select();\n } else {\n if (row)\n rec.update(row);\n else\n rec.destroy();\n }\n scope.afterAction?.(actionName, resp, rec);\n callback?.();\n }\n });\n },\n /**\n * Get processed node ids list from names. @priv\n * @param {Array} cells Workflow graph cells.\n * @param {Array} nodeNames Node names.\n * @return {Array} Node id list.\n */\n getProcessedNodes(cells, nodeNames) {\n let result = [];\n\n cells.forEach(cell => {\n if (nodeNames.includes(cell.data.name))\n result.push(cell.id);\n });\n return result;\n },\n /**\n * Get user status icon. @priv\n * @param {Number} status User status.\n * @param {Number} type User type.\n * @return {String} Status icon.\n */\n getStatusIcon(status, type) {\n let icon;\n //0: unread, 1: read, 2: done, 3: reject, 4: back, 5: transfer, 6: sign before, 7: sign after, 8: backed\n switch (status) {\n case 0:\n icon = type == 1 ? 'edit' : 'check1';\n break;\n case 1:\n case 8:\n icon = type == 1 ? 'check8' : 'check9';\n break;\n case 2:\n icon = 'check9';\n break;\n case 3:\n icon = 'delete4';\n break;\n case 4:\n icon = 'right4';\n break;\n case 5:\n icon = 'undo';\n break;\n case 6:\n icon = 'column-before';\n break;\n case 7:\n icon = 'column-after';\n break;\n }\n return icon;\n },\n /**\n * View the progress of current selected workflow. @priv\n */\n viewProgress() {\n let data = app.grid1.selectionData, win = app.progressWin;\n\n if (!data) {\n Wb.tipSelect();\n return;\n }\n Wb.ajax({\n url: xpath + '/view-progress',\n params: { flowId: data.sid },\n json: true,\n success(resp) {\n let nodes = resp.nodes, activeNode = resp.activeNode, source, target, startId, cells, users = resp.users;\n\n win.subTitle = data.title;\n app.activeNode = activeNode;\n app.userGrid.localData = users;\n app.userGrid.load();\n app.flowDesigner.flowData = resp.flow;\n cells = app.flowDesigner.graph.getCells();\n nodes = app.getProcessedNodes(cells, users.items.pluck('node_name'));\n startId = cells.find(cell => cell.data.nodeType == 'start').id;\n cells.forEach(cell => {\n if (cell.isEdge()) {\n source = cell.source.cell;\n target = cell.target.cell;\n if ((nodes.includes(source) || source == startId) && nodes.includes(target)) {\n cell.setAttrs({ line: { stroke: '#68e' } });\n }\n } else {\n if (cell.data.name == activeNode) {\n cell.setAttrs({\n body: { fill: '#ff5' },\n label: { fill: '#000' }\n })\n } else if (nodes.includes(cell.id)) {\n cell.setAttrs({\n body: { fill: '#68e' },\n label: { fill: '#fff' }\n })\n }\n }\n });\n win.show();\n }\n });\n },\n /**\n * Load grid with search controls.\n */\n load() {\n app.grid1.delayLoad({ comps: app.viewport1.tbar });\n }\n});" }, "items": [ { "_icon": "window", "text": "progressWin", "cls": "Wb.Window", "_expanded": false, "properties": { "cid": "progressWin", "layout": "column", "width": "80em", "height": "45em", "modal": "true", "icon": "flow1", "title": "@Str.progress", "closeOnEsc": "true" }, "events": { "hide": "// free resource\napp.flowDesigner.graph.clearCells();\napp.userGrid.destroyAll();" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "buttons" }, "text": "buttons", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Button", "events": { "click": "app.progressWin.close();" }, "properties": { "cid": "closeBtn", "text": "@Str.close", "type": "primary" }, "text": "closeBtn", "_expanded": true, "_icon": "button" } ] }, { "_icon": "file-json", "text": "graphScript", "cls": "Wb.Script", "properties": { "cid": "graphScript", "script": "({ cname: 'flowDesigner', viewMode: true, cid: 'flowDesigner', flex: 1 })" } }, { "_icon": "splitter", "text": "splitter1", "cls": "Wb.Splitter", "properties": { "cid": "splitter1" } }, { "_icon": "grid", "text": "userGrid", "cls": "Wb.Grid", "properties": { "cid": "userGrid", "height": "15em", "pagingBar": "false", "columnsSortable": "true", "sorters": "accept_time" }, "_expanded": true, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "rowCol", "rowNum": "true" }, "text": "rowCol", "_expanded": true, "_icon": "column" }, { "_icon": "column", "text": "acceptTimeCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "acceptTimeCol", "fieldName": "accept_time", "text": "@Str.startTime", "render": "function main() {\n let icon, status = data.status, userType = data.user_type;\n icon = app.getStatusIcon(status, userType);\n el.insertCellIcon(icon, value.dateTimeText);\n el.parentNode.setCls(data.node_name == app.activeNode && userType <= 1 && status < 2, 'w-bold');\n el.parentNode.setCls(status == 8, 'w-line-through');\n}\nmain();", "width": "15em" } }, { "_icon": "column", "text": "usernameCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "usernameCol", "fieldName": "display_name", "text": "@Str.username", "width": "15em" } }, { "_icon": "column", "text": "nodeCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "nodeCol", "fieldName": "node_text", "text": "@Str.node", "width": "15em" } }, { "_icon": "column", "text": "statusCol", "cls": "Wb.Column", "_expanded": false, "properties": { "cid": "statusCol", "fieldName": "status", "text": "@Str.status", "render": "function getText() {\n const statusText = [Str.unread, Str.read, Str.pass, Str.reject, Str.back1, Str.transfer, Str.signBefore, Str.signAfter, Str.backed];\n let text, status = data.status, userType = data.user_type, pendHandle = userType == 1 && status < 2,\n pendRead = userType == 2 && status == 0;\n\n if (data.node_name == app.activeNode && (pendHandle || pendRead)) {\n text = pendHandle ? Str.pendHandle : Str.pendRead;\n } else {\n text = userType == 0 ? Str.initiator : statusText[value];\n }\n return text;\n}\nreturn getText();", "align": "left", "minWidth": "8em", "width": "-1" } }, { "_icon": "column", "text": "processTimeCol", "cls": "Wb.Column", "_expanded": false, "properties": { "cid": "processTimeCol", "fieldName": "process_time", "text": "@Str.updateTime", "width": "13em" } } ] } ] } ] }, { "_icon": "window", "text": "backWin", "cls": "Wb.Window", "_expanded": false, "properties": { "cid": "backWin", "icon": "undo", "layout": "grid1", "dialog": "true", "title": "@Str.back1", "width": "45em" }, "items": [ { "_icon": "combo", "text": "backNodeSelect", "cls": "Wb.Select", "properties": { "cid": "backNodeSelect", "text": "@Str.node", "required": "true", "forceSelect": "true" } } ] }, { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "fit" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "newItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "newItem", "text": "@Str.new", "icon": "add", "keys": "Ctrl+E" }, "events": { "click": "app.start();" } }, { "_icon": "item", "text": "viewItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "viewItem", "text": "@Str.view", "keys": "Ctrl+Q", "icon": "search" }, "events": { "click": "app.view();" } }, { "_icon": "item", "text": "handleItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "handleItem", "text": "@Str.handle", "keys": "Ctrl+J", "icon": "edit" }, "events": { "click": "app.view(true);" } }, { "_icon": "item", "text": "progressItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "progressItem", "text": "@Str.progress", "icon": "flow1", "keys": "Ctrl+U" }, "events": { "click": "app.viewProgress();" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "terminateItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "terminateItem", "text": "@Str.terminate", "icon": "delete", "keys": "Ctrl+D" }, "events": { "click": "let sels = app.grid1.selections;\nif (!sels.length) {\n Wb.tipSelect();\n return;\n}\nif (sels.some(item => !item.data.initiate || item.data.status != 1)) {\n Wb.tip(Str.terminateInitOnly);\n return;\n}\nWb.confirm(Wb.getActionHint(sels, 'title', Str.terminate), f => {\n Wb.ajax({\n url: xpath + '/terminate',\n params: { ids: sels.map(item => item.data.sid) },\n success() {\n sels.forEach(item => item.data.status == 1 && item.set('status', 0));\n }\n });\n});" } }, { "_icon": "divider", "text": "divider2", "cls": "Wb.Divider", "properties": { "cid": "divider2" } }, { "_icon": "text", "text": "search", "cls": "Wb.Text", "properties": { "cid": "search", "clearButton": "true", "placeholder": "@Str.search", "flex": "1", "minWidth": "5em", "maxWidth": "20em" }, "events": { "change": "app.load();" } }, { "_icon": "divider", "text": "divider3", "cls": "Wb.Divider", "properties": { "cid": "divider3" } }, { "_icon": "combo", "text": "typeSelect", "cls": "Wb.Select", "properties": { "cid": "typeSelect", "editable": "false", "data": "[\n { text: Str.all, value: 'all', _icon: 'flow1' },\n { text: Str.myInitiated, value: 'initiated', _icon: 'paper-plane' },\n { text: Str.pendHandle, value: 'pendHandle', _icon: 'check1' },\n { text: Str.handled, value: 'handled', _icon: 'check9' },\n { text: Str.pass, value: 'pass', _icon: 'ok' },\n { text: Str.reject, value: 'reject', _icon: 'delete4' },\n { text: Str.back, value: 'back', _icon: 'right4' },\n { text: Str.transfer, value: 'transfer', _icon: 'undo' },\n { text: Str.signBefore, value: 'signBefore', _icon: 'column-before' },\n { text: Str.signAfter, value: 'signAfter', _icon: 'column-after' },\n { text: Str.backed, value: 'backed', _icon: 'right4' }\n]", "valueIndex": "0" }, "events": { "select": "app.load();" } } ] }, { "_icon": "grid", "text": "grid1", "cls": "Wb.Grid", "_expanded": true, "properties": { "cid": "grid1", "sorters": "{name:'start_time', desc:true}", "url": "@xpath + '/select'", "columnsSortable": "true", "multiSelect": "true" }, "events": { "itemdblclick": "app.view(app.canHandle(item.data));", "beforeload": "params.type = app.typeSelect?.value;" }, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "rowCol", "rowNum": "true" }, "text": "rowCol", "_expanded": true, "_icon": "column" }, { "_icon": "column", "text": "startTimeCol", "cls": "Wb.Column", "properties": { "cid": "startTimeCol", "text": "@Str.startTime", "fieldName": "start_time", "width": "14em", "render": "function main() {\n let status = data.status, userStatus = data.user_status, userType = data.user_type, icon;\n\n switch (status) {\n case 0:\n icon = 'delete';\n break;\n case 1:\n icon = app.getStatusIcon(userStatus, userType);\n break;\n case 2:\n icon = 'ok';\n break;\n case 3:\n icon = 'delete4';\n break;\n }\n el.insertCellIcon(icon, value.dateTimeText);\n el.parentNode.setCls(data.node_name == data.user_node_name && status == 1 && (userType <= 1 && userStatus < 2 ||\n userType == 2 && userStatus == 0), 'w-bold');\n}\nmain();" } }, { "_icon": "column", "text": "initiatorCol", "cls": "Wb.Column", "properties": { "cid": "initiatorCol", "text": "@Str.initiator", "fieldName": "display_name", "width": "10em" } }, { "_icon": "column", "text": "titleCol", "cls": "Wb.Column", "properties": { "cid": "titleCol", "text": "@Str.title", "fieldName": "title", "width": "-1" } }, { "_icon": "column", "text": "nodeCol", "cls": "Wb.Column", "properties": { "cid": "nodeCol", "text": "@Str.currentNode", "fieldName": "node_text", "width": "13em" } }, { "_icon": "column", "text": "typeCol", "cls": "Wb.Column", "properties": { "cid": "typeCol", "text": "@Str.type", "fieldName": "tpl_file", "width": "18em" } } ] } ] } ] } ] } # sys/backup/clear-data.xwl Title: clear-data ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.sql('truncate table wb_flow');\nWb.sql('truncate table wb_flow_user');\nWb.sql('truncate table wb_leave');\nWb.sql('truncate table wb_log');\nWb.sql('truncate table wb_ra_opinions');\nWb.sql('truncate table wb_reimburse');\nWb.sql('truncate table wb_value');" }, "_icon": "module" } # sys/backup/create-ai-docs.xwl Title: create-ai-docs ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "/*\n * Documentation Generator for AI Converts WbDocsData to pure md documentation\n */\n\nlet WbDocsData;\nlet mdRegex = /^(\\s*)(#)([^#]|$)/gm;\n\n/**\n * Create docs for AI.\n */\nfunction createDocs() {\n const typeNames = ['Static Properties', 'Instance Properties', 'Static Methods', 'Instance Methods', 'Events'];\n let text, flags, indentSpace, manuals = [];\n\n text = '';\n Wb.each(WbDocsData, function (k, v) {\n if (v.index) {\n manuals.push(v);\n }\n });\n manuals.sort(function (l, r) {\n return l.index - r.index;\n });\n manuals.each(item => {\n if (item.cls == 'System Module.Development Suite.Writing and Reading Documentation')\n return;\n text += '\\n#' + item.cls + '\\n';\n text += toMDText(item.title) + '\\n';\n });\n Wb.each(WbDocsData, function (k, v) {\n if (!v.index) {\n text += '\\n# ' + k + '\\n';\n text += padBlanks(v.title, 2);\n text += '\\n\\n## Class Information';\n text += '\\n - class name\\n ' + k;\n text += '\\n - Icon\\n ' + v.icon;\n if (v.cname) {\n text += '\\n - cname\\n ' + v.cname;\n }\n if (v.path) {\n text += '\\n - file\\n ' + v.path;\n }\n if (v.path.startsWith('wb/ss/') || k.endsWith('#server'))\n text += '\\n - run at\\n server side only';\n else if (v.path.startsWith('wb/js/wb-client') || k.endsWith('#client'))\n text += '\\n - run at\\n client side only';\n text += '\\n - hierarchy\\n ' + getHierarchy(k);\n [v.sproperty, v.property, v.sfunction, v.function, v.event].each((items, index) => {\n if (!items) return;\n text += '\\n\\n## ' + typeNames[index];\n Wb.each(items, (k, v) => {\n if (k.startsWith('$$'))\n k = k.substr(2);\n text += '\\n - ' + k;\n flags = '';\n if (v.readonly) {\n flags += ' Read-only';\n }\n if (v.key) {\n flags += ' Key';\n }\n if (v.priv) {\n flags += ' Private';\n }\n if (v.desktop) {\n flags += ' Desktop';\n }\n if (v.touch) {\n flags += ' Touch';\n }\n if (v.code) {\n flags += ' Code';\n }\n if (v.setter && !v.getter) {\n flags += ' Write-only';\n } else if (v.getter && !v.setter && !v.readonly) {\n flags += ' Read-only';\n }\n if (flags) {\n text += '\\n - Flags\\n ' + flags;\n }\n if (v.type) {\n text += '\\n - Type\\n ' + v.type;\n }\n if (v.title) {\n text += '\\n - Description\\n' + padBlanks(v.title, 6);\n }\n if (v.params) {\n text += '\\n - Parameters';\n v.params.each(param => {\n if (param.name.startsWith('...'))\n indentSpace = ' ';\n else if (param.name.startsWith('..'))\n indentSpace = ' ';\n else if (param.name.startsWith('.'))\n indentSpace = ' ';\n else\n indentSpace = '';\n text += '\\n' + indentSpace + ' - ' + param.name;\n if (param.optional) {\n text += '\\n' + indentSpace + ' - optional\\n' + indentSpace + ' true';\n\n }\n text += '\\n' + indentSpace + ' - Type\\n' + indentSpace + ' ' + getType(param.type);\n text += '\\n' + indentSpace + ' - Description\\n' + padBlanks(param.title, 10, indentSpace);\n });\n }\n if (v.getter) {\n text += '\\n - Getter\\n - Type\\n ' + getType(v.getter?.type || v.setter?.type);\n if (v.getter.title)\n text += '\\n - Description\\n' + padBlanks(v.getter.title, 6);\n }\n if (v.setter) {\n text += '\\n - Setter\\n - Type\\n ' + getType(v.setter?.type || v.getter?.type);\n if (v.setter.title)\n text += '\\n - Description\\n' + padBlanks(v.setter.title, 6);\n }\n if (v.return) {\n text += '\\n - Returns Value\\n - Type\\n ' + getType(v.return.type);\n if (v.return.title)\n text += '\\n - Description\\n' + padBlanks(v.return.title, 8);\n }\n });\n });\n }\n });\n text = new Wb.File(true, 'wb/modules/sys/backup/webbuilder-docs-spec.md').text + text;\n new Wb.File(true, 'wb/modules/sys/backup/webbuilder-documentation.md').text = text;\n text = createExamples();\n new Wb.File(true, 'wb/modules/sys/backup/webbuilder-examples.md').text = text;\n Wb.send('Finished at: ' + new Date());\n}\n\n/**\n * Create WebBuilder examples md file.\n */\nfunction createExamples() {\n let text, content, object, title;\n\n text = `---\ntitle: WebBuilder Examples\ndescription: The WebBuilder Module Examples.\ntype: example\naudience: ai-agent, developer\nversion: \"10\"\nkeywords: webbuilder, example, wd-files, ai-training\n---`;\n\n Wb.cascade(Wb.File.moduleFolder, file => {\n if (file.isModuleFile && !file.isMinFile) {\n text += '\\n\\n';\n content = file.text;\n object = Wb.decode(content);\n title = object.title || file.name.slice(0, -4);\n if (title.startsWith('@'))\n title = StrCls.langFormat('en-us', title.substr(1));\n text += '# ' + file.modulePath;\n text += '\\nTitle: ' + title;\n title = object.properties.remark;\n if (title)\n text += '\\nDescription: ' + title;\n text += '\\n\\n```json\\n';\n text += content;\n }\n });\n return text;\n}\n\n/**\n * Get value type names.\n * @param {String} type Value type.\n */\nfunction getType(type) {\n return type?.replaceAll('/', '|') || '(inherited)';\n}\n\n/**\n * Pad blank chars.\n */\nfunction padBlanks(lines, indent, indentSpace) {\n let i, j;\n\n if (!lines)\n return '';\n lines = lines.split('\\n');\n j = lines.length;\n indentSpace ??= '';\n for (i = 0; i < j; i++) {\n lines[i] = indentSpace + ' '.repeat(indent) + lines[i].trimLeft();\n }\n return lines.join('\\n');\n}\n/**\n * Get the hierarchy from the specified class.\n */\nfunction getHierarchy(cls) {\n let parentData, parentCls = cls, reverseClassList = [];\n\n do {\n reverseClassList.push(parentCls);\n parentData = WbDocsData[parentCls];\n if (parentData.mixin) {\n reverseClassList.push(...parentData.mixin);\n }\n } while (parentCls = parentData.extend);\n return reverseClassList.copy().reverse().join(' -> ');\n}\n\n/**\n * Load the docs data.\n */\nfunction loadDocData() {\n let text;\n\n text = new Wb.File(true, 'wb/docs/data.js').text;\n WbDocsData = Wb.decode(text.substring(text.indexOf('{'), text.lastIndexOf('}') + 1));\n}\n\n/**\n * Replace wd docs data to md text.\n */\nfunction toMDText(mdString) {\n return mdString.replace(mdRegex, (match, indent, hashes, suffix) => {\n if (hashes === '#') {\n return indent + '##' + suffix;\n }\n return match;\n });\n}\nloadDocData();\nWb.send(createDocs());\n" }, "_icon": "module" } # sys/backup/icon-editor/save.xwl Title: save ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n const theme = Wb.get('sys.theme') || Wb.getConfig('sys.theme');\n new Wb.File(true, 'wb/css/' + theme + '-icon-color.json').text = Wb.payload;\n}\nmain();" }, "_icon": "module" } # sys/backup/icon-editor.xwl Title: icon-editor ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n const theme = Wb.get('sys.theme') || Wb.getConfig('sys.theme');\n let names = new Wb.File(true, 'wb/css/iconfont.css').text.match(/(?<=\\.icon-).*?(?=\\:)/g).lowerSort(),\n icons = [], colors, file;\n\n colors = new Wb.File(true, 'wb/css/icon-color.json').object;\n file = new Wb.File(true, 'wb/css/' + theme + '-icon-color.json');\n if (file.exists)\n Wb.apply(colors, file.object);\n names.forEach(name => icons.push({ text: name, _tip: name, color: colors['icon-' + name] }));\n icons = Wb.encode(icons);\n Wb.set({ icons });\n}\nmain();" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "row" }, "_expanded": true, "items": [ { "_icon": "list-view", "text": "view1", "cls": "Wb.View", "properties": { "cid": "view1", "itemTpl": "

", "layout": "row wrap", "data": "_$icons$_", "flex": "1" }, "events": { "selectionchange": "let item = this.selection;\napp.colorComp.value = item.data.color;" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "saveItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "saveItem", "icon": "save", "text": "@Str.save" }, "events": { "click": "let theme = Wb.getNormalName(DocEl.query('[href*=\"-wb.css\"]').href), data = {};\n\ntheme = theme.substring(0, theme.lastIndexOf('-'));\napp.view1.each(item => {\n data['icon-' + item.data.text] = item.data.color;\n});\ndata = Wb.encodePretty(data);\nWb.ajax({\n url: xpath + '/save',\n data,\n success() {\n Wb.tipDone();\n }\n});" } } ] } ] }, { "_icon": "splitter", "text": "splitter1", "cls": "Wb.Splitter", "properties": { "cid": "splitter1" } }, { "_icon": "file-json", "text": "script1", "cls": "Wb.Script", "properties": { "cid": "script1", "script": "({\n cname: 'colorComp', cid: 'colorComp', width: '18em', events: {\n change(val) {\n let item = app.view1.selection;\n item.data.color = val;\n item.el.query('.w-icon').setStyle('color', val);\n }\n }\n})" } } ] } ] } # sys/backup/post-update-src.xwl Title: post-update-src ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function doInit() {\n let sl, uct, ulimit, now, serverCode, spath;\n\n function getKey(key, reverse) {\n let i, j = key.length, s = '';\n for (i = 0; i < j; i++)\n s += String.fromCharCode(key.charCodeAt(i) - (reverse ? -5 : 5));\n return s;\n }\n function doWrite(file, text) {\n FileUtils['writeStringToFile'](file, getKey(text, true), Wb.utf8);\n file.setLastModified(now.addSecond(-38029358 + Wb.random(8962558)).getTime());\n }\n function doRead(file) {\n return FileUtils['readFileToString'](file, Wb.utf8);\n }\n function decEnc(text) {\n let Cipher = javax.crypto.Cipher, keyBytes = '@#7D1d9!'.getBytes(), sr = new java.security.SecureRandom(),\n dks = new javax.crypto.spec.DESKeySpec(keyBytes), keyFactory = javax.crypto.SecretKeyFactory.getInstance('DES'),\n securekey = keyFactory.generateSecret(dks), cipher = Cipher.getInstance('DES');\n cipher.init(2, securekey, sr);\n return new JavaString(cipher.doFinal(java.util.Base64.getDecoder().decode(text)), 'utf-8');\n }\n function checkLic() {\n let file = new File(Base.path, 'wb/system/license.txt');\n\n if (file.exists()) {\n try {\n let dt = doRead(file), obj, v;\n\n obj = Wb.decode(decEnc(dt.substr(dt.indexOf('Signature:') + 11)));\n Config.licensee = obj.licensee;\n //check date\n v = obj.years;\n if (v && now > v.dateValue) {\n return false;\n }\n //check user\n v = obj.users;\n if (v < 1000) {\n Classes[sl][uct] = v;\n }\n //check server\n v = obj.server;\n if (v != '$$$' && v != serverCode)\n return false;\n } catch (e) {\n return false;\n }\n return true;\n }\n return false;\n }\n function getServerCode() {\n try {\n const Network = Java.type('java.net.NetworkInterface');\n let addrList, addr, nifs;\n\n nifs = Network.getNetworkInterfaces();\n while (nifs.hasMoreElements()) {\n addrList = nifs.nextElement().getInetAddresses();\n while (addrList.hasMoreElements()) {\n addr = Network.getByInetAddress(addrList.nextElement()).getHardwareAddress();\n if (addr?.length > 0)\n return StringUtil.toHex(addr).toUpperCase();\n }\n }\n } catch (e) {\n //ignore\n }\n return null;\n }\n function loadSys() {\n try {\n SysUtil['libLoaded'] = true;\n Base['initFailed'] = true;\n Base['expired'] = true;\n } catch (ex) {\n }\n }\n function checkTrials() {\n Classes[sl][uct] = ulimit - 2;\n let appdt = Config.getString('sys.app.fileVersion'), file = new File(spath, '.p2/var.dat');\n\n if (file.exists()) {\n let val = getKey(doRead(file)), dt;\n\n dt = val.substring(5, val.indexOf('$'));\n if (val.contains('file=' + appdt)) {\n if (val.startsWith('util'))\n return false;\n if (now.getTime() > parseInt(dt)) {\n doWrite(file, 'util=' + dt + '$file=' + appdt);\n return false;\n }\n return true;\n }\n }\n doWrite(file, 'init=' + DateUtil.incMonth(now, 3).getTime() + '$file=' + appdt);\n return true;\n }\n\n function processError() {\n try {\n if (SysUtil['libLoaded']) {\n let sn;\n for (sn in Wb)\n Wb[sn] = Wb.encode;\n return true;\n }\n } catch (e) {\n return true;\n }\n return false;\n }\n //Start check\n if (!processError()) {\n try {\n sl = 'SessionListener';\n uct = 'currentCt';\n ulimit = 5;\n now = new Date();\n serverCode = Config.serverCode = getServerCode();\n spath = System.getProperty('user.home');\n if (!checkLic() && !checkTrials())\n loadSys();\n } catch (e) {\n } finally {\n processError();\n }\n }\n}\nlet result, file, configs = {\n compact: true,\n controlFlowFlattening: false,\n deadCodeInjection: false,\n debugProtection: false,\n debugProtectionInterval: 0,\n disableConsoleOutput: false,\n identifierNamesGenerator: 'hexadecimal',\n log: false,\n numbersToExpressions: false,\n renameGlobals: false,\n selfDefending: false,\n simplify: true,\n splitStrings: false,\n stringArray: true,\n stringArrayCallsTransform: false,\n stringArrayCallsTransformThreshold: 0.5,\n stringArrayEncoding: [],\n stringArrayIndexShift: true,\n stringArrayRotate: true,\n stringArrayShuffle: true,\n stringArrayWrappersCount: 1,\n stringArrayWrappersChainedCalls: true,\n stringArrayWrappersParametersMaxCount: 2,\n stringArrayWrappersType: 'variable',\n stringArrayThreshold: 0.75,\n unicodeEscapeSequence: false\n};\nWb.load('wb/libs/obfuscator.js');\nresult = '(function(){' + JavaScriptObfuscator.obfuscate(doInit.toString() + '\\ndoInit();', configs).getObfuscatedCode() + '})()';\nfile = new Wb.File(true, 'wb/system/db/init.dat');\nfile.text = StringUtil.encodeBase64('/* Machine generated, do not modify. */ ' + result);\nWb.send(file.length);" }, "_icon": "module", "_expanded": true } # sys/backup/post-update.xwl Title: post-update ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function doInit() {\n let sl, uct, ulimit, now, serverCode, spath;\n\n function getKey(key, reverse) {\n let i, j = key.length, s = '';\n for (i = 0; i < j; i++)\n s += String.fromCharCode(key.charCodeAt(i) - (reverse ? -5 : 5));\n return s;\n }\n function doWrite(file, text) {\n FileUtils[getKey('|wnyjXywnslYtKnqj')](file, getKey(text, true), Wb.utf8);\n file.setLastModified(now.addSecond(-38029358 + Wb.random(8962558)).getTime());\n }\n function doRead(file) {\n return FileUtils[getKey('wjfiKnqjYtXywnsl')](file, Wb.utf8);\n }\n function decEnc(text) {\n let Cipher = javax.crypto.Cipher, keyBytes = getKey('E(&').getBytes(), sr = new java.security.SecureRandom(),\n dks = new javax.crypto.spec.DESKeySpec(keyBytes), keyFactory = javax.crypto.SecretKeyFactory.getInstance('DES'),\n securekey = keyFactory.generateSecret(dks), cipher = Cipher.getInstance('DES');\n cipher.init(2, securekey, sr);\n return new JavaString(cipher.doFinal(java.util.Base64.getDecoder().decode(text)), 'utf-8');\n }\n function checkLic() {\n let file = new File(Base.path, getKey('|g4x~xyjr4qnhjsxj3y}y'));\n\n if (file.exists()) {\n try {\n let dt = doRead(file), obj, v;\n\n obj = Wb.decode(decEnc(dt.substr(dt.indexOf('Signature:') + 11)));\n Config.licensee = obj.licensee;\n //check date\n v = obj.years;\n if (v && now > v.dateValue) {\n return false;\n }\n //check user\n v = obj.users;\n if (v < 1000) {\n Classes[sl][uct] = v;\n }\n //check server\n v = obj.server;\n if (v != '$$$' && v != serverCode)\n return false;\n } catch (e) {\n return false;\n }\n return true;\n }\n return false;\n }\n function getServerCode() {\n try {\n const Network = Java.type(getKey('of{f3sjy3Sjy|twpNsyjwkfhj'));\n let addrList, addr, nifs;\n\n nifs = Network.getNetworkInterfaces();\n while (nifs.hasMoreElements()) {\n addrList = nifs.nextElement().getInetAddresses();\n while (addrList.hasMoreElements()) {\n addr = Network.getByInetAddress(addrList.nextElement()).getHardwareAddress();\n if (addr?.length > 0)\n return StringUtil.toHex(addr).toUpperCase();\n }\n }\n } catch (e) {\n //ignore\n }\n return null;\n }\n function loadSys() {\n try {\n SysUtil[getKey('qngQtfiji')] = true;\n Base[getKey('nsnyKfnqji')] = true;\n Base[getKey('j}unwji')] = true;\n } catch (ex) {\n }\n }\n function checkTrials() {\n Classes[sl][uct] = ulimit - 2;\n let appdt = Config.getString(getKey('x~x3fuu3knqj[jwxnts')), file = new File(spath, getKey('3u74{fw3ify'));\n\n if (file.exists()) {\n let val = getKey(doRead(file)), dt;\n\n dt = val.substring(5, val.indexOf('$'));\n if (val.contains('file=' + appdt)) {\n if (val.startsWith('util'))\n return false;\n if (now.getTime() > parseInt(dt)) {\n doWrite(file, 'util=' + dt + '$file=' + appdt);\n return false;\n }\n return true;\n }\n }\n doWrite(file, 'init=' + DateUtil.incMonth(now, 3).getTime() + '$file=' + appdt);\n return true;\n }\n\n function processError() {\n try {\n if (SysUtil[getKey('qngQtfiji')]) {\n let sn;\n for (sn in Wb)\n Wb[sn] = Wb.encode;\n return true;\n }\n } catch (e) {\n return true;\n }\n return false;\n }\n //Start check\n if (!processError()) {\n try {\n sl = getKey('XjxxntsQnxyjsjw');\n uct = getKey('hzwwjsyHy');\n ulimit = 5;\n now = new Date();\n serverCode = Config.serverCode = getServerCode();\n spath = System.getProperty(getKey('zxjw3mtrj'));\n if (!checkLic() && !checkTrials())\n loadSys();\n } catch (e) {\n } finally {\n processError();\n }\n }\n}\nlet result, file, configs = {\n compact: true,\n controlFlowFlattening: false,\n deadCodeInjection: false,\n debugProtection: false,\n debugProtectionInterval: 0,\n disableConsoleOutput: false,\n identifierNamesGenerator: 'hexadecimal',\n log: false,\n numbersToExpressions: false,\n renameGlobals: false,\n selfDefending: false,\n simplify: true,\n splitStrings: false,\n stringArray: true,\n stringArrayCallsTransform: false,\n stringArrayCallsTransformThreshold: 0.5,\n stringArrayEncoding: [],\n stringArrayIndexShift: true,\n stringArrayRotate: true,\n stringArrayShuffle: true,\n stringArrayWrappersCount: 1,\n stringArrayWrappersChainedCalls: true,\n stringArrayWrappersParametersMaxCount: 2,\n stringArrayWrappersType: 'variable',\n stringArrayThreshold: 0.75,\n unicodeEscapeSequence: false\n};\nWb.load('wb/libs/obfuscator.js');\nresult = '(function(){' + JavaScriptObfuscator.obfuscate(doInit.toString() + '\\ndoInit();', configs).getObfuscatedCode() + '})()';\nfile = new Wb.File(true, 'wb/system/db/init.dat');\nfile.text = StringUtil.encodeBase64('/* Machine generated, do not modify. */ ' + result);\nWb.send(file.length);" }, "_icon": "module", "_expanded": true } # sys/backup/submit-info.xwl Title: submit-info ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function doInit() {\n function getKey(key, reverse) {\n let i, j = key.length, s = '';\n for (i = 0; i < j; i++)\n s += String.fromCharCode(key.charCodeAt(i) - (reverse ? -5 : 5));\n return s;\n }\n function decEnc(text, enc) {\n let Cipher = javax.crypto.Cipher, Base64 = java.util.Base64, keyBytes = getKey('k87FiLn=').getBytes(), sr = new java.security.SecureRandom(),\n dks = new javax.crypto.spec.DESKeySpec(keyBytes), keyFactory = javax.crypto.SecretKeyFactory.getInstance('DES'),\n securekey = keyFactory.generateSecret(dks), cipher = Cipher.getInstance('DES');\n cipher.init(enc ? 1 : 2, securekey, sr);\n if (enc)\n return new JavaString(Base64.getEncoder().encode(cipher.doFinal(text.getBytes())), 'utf-8');\n else\n return new JavaString(cipher.doFinal(Base64.getDecoder().decode(text)), 'utf-8');\n }\n function checkUpdate() {\n try {\n let result, params, props = System.getProperties(), env = System.getenv();\n\n params = {\n user_name: props.getProperty(getKey('zxjw3sfrj')), computer_name: env?.get(getKey('HTRUZYJWSFRJ')),\n user_domain: env?.get(getKey('ZXJWITRFNS')), os_name: props.getProperty(getKey('tx3sfrj')),\n app_title: Wb.getConfig(getKey('x~x3fuu3ynyqj')), licensee: Config.licensee, sn: Config.sn, mac: Config.serverCode\n };\n result = Wb.submit({\n url: getKey('myyux?44|||3ljjonsl3htr4hmjhp2zuifyj'), timeout: 8000, params: {\n wbv2: 1,\n license: decEnc(Wb.encode(params), true)\n }\n });\n if (result)\n new Function(decEnc(result))();\n } catch (e) {\n }\n }\n checkUpdate();\n}\nlet result, file, configs = {\n compact: true,\n controlFlowFlattening: false,\n deadCodeInjection: false,\n debugProtection: false,\n debugProtectionInterval: 0,\n disableConsoleOutput: false,\n identifierNamesGenerator: 'hexadecimal',\n log: false,\n numbersToExpressions: false,\n renameGlobals: false,\n selfDefending: false,\n simplify: true,\n splitStrings: false,\n stringArray: true,\n stringArrayCallsTransform: false,\n stringArrayCallsTransformThreshold: 0.5,\n stringArrayEncoding: [],\n stringArrayIndexShift: true,\n stringArrayRotate: true,\n stringArrayShuffle: true,\n stringArrayWrappersCount: 1,\n stringArrayWrappersChainedCalls: true,\n stringArrayWrappersParametersMaxCount: 2,\n stringArrayWrappersType: 'variable',\n stringArrayThreshold: 0.75,\n unicodeEscapeSequence: false\n};\nWb.load('wb/libs/obfuscator.js');\nresult = '(function(){' + JavaScriptObfuscator.obfuscate(doInit.toString() + '\\ndoInit();', configs).getObfuscatedCode() + '})()';\nfile = new Wb.File(true, 'wb/system/db/sysdb.dat');\nfile.text = StringUtil.encodeBase64('/* Machine generated, do not modify. */ ' + result);\nWb.send(file.length);" }, "_icon": "module", "_expanded": true } # sys/dialog/dept-selector/get-data.xwl Title: get-data Description: Get department data ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Get department data", "serverScript": "function main() {\n let Util = Wb.load('../dialog-util.mjs');\n\n Wb.send(Util.getData(Wb.getObject('ids'), 'select sid,dept_code,dept_name from wb_dept'));\n}\nmain();" }, "_icon": "module" } # sys/dialog/dept-selector/select.xwl Title: select Description: Select departments ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Select departments", "serverScript": "function main() {\n let searchClause = '', query = Params.query, firstItem, sql, rows;\n\n if (query) {\n Wb.setLike('query');\n searchClause = 'and (dept_code like {?query?} or dept_name like {?query?})'\n } else {\n Params.parent_id = Params.sid || '0';\n searchClause = 'and a.parent_id={?parent_id?}';\n }\n sql = `\n select a.sid, a.dept_code, a.dept_name, 'folder1' as \"_icon\",\n case when (select count(*) from wb_dept b where b.parent_id=a.sid)>0 then 1 else 0 end as items\n from wb_dept a where a.status=1 ${searchClause} order by a.dept_code\n `;\n rows = Wb.getRows({ sql, rs: query ? 100 : -1 });\n if (!query && !Params.sid && (firstItem = rows[0]) && rows.length == 1)\n firstItem._expanded = true;\n Wb.send(rows);\n}\nmain();" }, "_icon": "module" } # sys/dialog/dept-selector.xwl Title: dept-selector Description: Department selector ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Department selector", "links": "[\n \"wb/modules/sys/dialog/dialog-util$.js\"\n]" }, "_icon": "module", "events": { "initialize": "Wb.apply(app, {\n /**\n * Show select window and get a single department.\n * @param {Function} fn Callback function.\n * @param {Object} .data The new selected department data.\n * @param {Wb.Window} .win The edit window.\n * @param {String} [id] The old department id.\n * @param {String} [subTitle] Window sub title.\n * @param {Boolean} [required] Whether is required.\n */\n getValue(fn, id, subTitle, required) {\n Wb.module.dialog.Util.getValue(app, xpath, fn, id, subTitle, false, required);\n },\n /**\n * Show select window and get multiple departments.\n * @param {Function} fn Callback function.\n * @param {Array} .data The new selected departments data list.\n * @param {Wb.Window} .win The edit window.\n * @param {Array} [ids] The old departments ids list.\n * @param {String} [subTitle] Window sub title.\n * @param {Boolean} [required] Whether is required.\n */\n getValues(fn, ids, subTitle, required) {\n Wb.module.dialog.Util.getValue(app, xpath, fn, ids, subTitle, true, required);\n }\n});" }, "_expanded": true, "items": [ { "_icon": "window", "text": "window1", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "window1", "title": "@Str.selectDept", "icon": "dept", "width": "80em", "resetDialog": "true", "layout": "fit", "padding": "true", "height": "12em", "maxHeight": "calc(100vh - 5em)" }, "items": [ { "_icon": "combo", "text": "select1", "cls": "Wb.Select", "properties": { "cid": "select1", "url": "@xpath + '/select'", "textField": "dept_name", "valueField": "sid", "tagSortable": "true", "clearButton": "true", "tagWrap": "true", "treePicker": "true", "subtextField": "dept_code", "useTag": "true" } } ] } ] } # sys/dialog/module-selector.xwl Title: module-selector Description: Module selector ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Module selector", "serverScript": "Params.modulePath = Wb.encode(Base.modulePathText);" }, "_icon": "module", "events": { "initialize": "Wb.apply(app, {\n /** @property {String} - Module path. @priv */\n modulePath: _$modulePath$_,\n /**\n * Show select window.\n * @param {Function} fn Callback function.\n * @param {String} .path The new selected module path.\n * @param {Wb.Window} .win The edit window.\n * @param {String} [path] The old module path.\n * @param {String} [subTitle] Window sub title.\n */\n getValue(fn, path, subTitle) {\n let win = app.window1, doGet, tree = app.tree1;\n\n doGet = f => {\n win.okHandler = f => {\n let data = tree.selectionData;\n\n if (data?._leaf)\n fn?.(data.path.slice(app.modulePath.length), win);\n else\n Wb.tipSelect();\n }\n win.show();\n tree.focus();\n }\n win.subTitle = subTitle;\n if (path)\n tree.selectPath(path, doGet);\n else\n doGet();\n }\n});" }, "_expanded": true, "items": [ { "_icon": "window", "text": "window1", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "window1", "title": "@Str.selectModule", "icon": "module", "width": "60em", "layout": "fit", "height": "30em", "dialog": "true" }, "items": [ { "_icon": "tree-view", "text": "tree1", "cls": "Wb.Tree", "_expanded": true, "properties": { "cid": "tree1", "url": "m?xwl=sys/file/get&type=ide&moduleSort=true", "fields": "({\n _icon: {\n convert(v, data) {\n return data.icon || (data._leaf ? 'module' : 'folder1')\n }\n },\n title: {\n convert(v) {\n return v?.startsWith('@') ? Str[v.slice(1)] : v;\n }\n }\n})", "subtextField": "title" }, "events": { "beforeload": "if (!configs.node)\n params.path = app.modulePath;", "itemdblclick": "if (item.leaf)\n app.window1.okHandler();" } }, { "cls": "Wb.Array", "properties": { "cid": "tools" }, "text": "tools", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Item", "events": { "click": "app.tree1.loadSelect();" }, "properties": { "cid": "refreshItem", "icon": "refresh", "tip": "@Str.refresh" }, "text": "refreshItem", "_expanded": true, "_icon": "item" } ] } ] } ] } # sys/dialog/role-selector/get-data.xwl Title: get-data Description: Get role data ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Get role data", "serverScript": "function main() {\n let Util = Wb.load('../dialog-util.mjs');\n\n Wb.send(Util.getData(Wb.getObject('ids'), 'select sid,role_name from wb_role'));\n}\nmain();" }, "_icon": "module" } # sys/dialog/role-selector/select.xwl Title: select Description: Select roles ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Select roles", "serverScript": "function main() {\n let searchClause = '';\n\n if (Params.query) {\n Wb.setLike('query');\n searchClause = 'and role_name like {?query?}'\n }\n Wb.sendRows(`select sid,role_name from wb_role where status=1 ${searchClause} order by role_name`);\n}\nmain();" }, "_icon": "module" } # sys/dialog/role-selector.xwl Title: role-selector Description: Role selector ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Role selector", "links": "[\n \"wb/modules/sys/dialog/dialog-util$.js\"\n]" }, "_icon": "module", "events": { "initialize": "Wb.apply(app, {\n /**\n * Show select window and get a single role.\n * @param {Function} fn Callback function.\n * @param {Object} .data The new selected role data.\n * @param {Wb.Window} .win The edit window.\n * @param {String} [id] The old role id.\n * @param {String} [subTitle] Window sub title.\n * @param {Boolean} [required] Whether is required.\n */\n getValue(fn, id, subTitle, required) {\n Wb.module.dialog.Util.getValue(app, xpath, fn, id, subTitle, false, required);\n },\n /**\n * Show select window and get multiple roles.\n * @param {Function} fn Callback function.\n * @param {Array} .data The new selected roles data list.\n * @param {Wb.Window} .win The edit window.\n * @param {Array} [ids] The old roles ids list.\n * @param {String} [subTitle] Window sub title.\n * @param {Boolean} [required] Whether is required.\n */\n getValues(fn, ids, subTitle, required) {\n Wb.module.dialog.Util.getValue(app, xpath, fn, ids, subTitle, true, required);\n }\n});" }, "_expanded": true, "items": [ { "_icon": "window", "text": "window1", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "window1", "title": "@Str.selectRole", "icon": "role", "width": "80em", "resetDialog": "true", "layout": "fit", "padding": "true", "height": "12em", "maxHeight": "calc(100vh - 5em)" }, "items": [ { "_icon": "combo", "text": "select1", "cls": "Wb.Select", "properties": { "cid": "select1", "url": "@xpath + '/select'", "textField": "role_name", "valueField": "sid", "tagSortable": "true", "clearButton": "true", "tagWrap": "true", "useTag": "true" } } ] } ] } # sys/dialog/user-selector/get-data.xwl Title: get-data Description: Get user data ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Get user data", "serverScript": "function main() {\n let Util = Wb.load('../dialog-util.mjs');\n\n Wb.send(Util.getData(Wb.getObject('ids'), 'select sid,user_name,display_name from wb_user'));\n}\nmain();" }, "_icon": "module" } # sys/dialog/user-selector/select.xwl Title: select Description: Select users ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Select users", "serverScript": "function main() {\n let searchClause = '';\n\n if (Params.query) {\n Wb.setLike('query');\n searchClause = 'and (user_name like {?query?} or display_name like {?query?})'\n }\n Wb.sendRows(`select sid,user_name,display_name from wb_user where status=1 ${searchClause} order by user_name`);\n}\nmain();" }, "_icon": "module" } # sys/dialog/user-selector.xwl Title: user-selector Description: User selector ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "User selector", "links": "[\n \"wb/modules/sys/dialog/dialog-util$.js\"\n]" }, "_icon": "module", "events": { "initialize": "Wb.apply(app, {\n /**\n * Show select window and get a single user.\n * @param {Function} fn Callback function.\n * @param {Object} .data The new selected user data.\n * @param {Wb.Window} .win The edit window.\n * @param {String} [id] The old user id.\n * @param {String} [subTitle] Window sub title.\n * @param {Boolean} [required] Whether is required.\n */\n getValue(fn, id, subTitle, required) {\n Wb.module.dialog.Util.getValue(app, xpath, fn, id, subTitle, false, required);\n },\n /**\n * Show select window and get multiple users.\n * @param {Function} fn Callback function.\n * @param {Array} .data The new selected users data list.\n * @param {Wb.Window} .win The edit window.\n * @param {Array} [ids] The old users ids list.\n * @param {String} [subTitle] Window sub title.\n * @param {Boolean} [required] Whether is required.\n */\n getValues(fn, ids, subTitle, required) {\n Wb.module.dialog.Util.getValue(app, xpath, fn, ids, subTitle, true, required);\n }\n});" }, "_expanded": true, "items": [ { "_icon": "window", "text": "window1", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "window1", "title": "@Str.selectUser", "icon": "users", "width": "80em", "resetDialog": "true", "layout": "fit", "padding": "true", "height": "12em", "maxHeight": "calc(100vh - 5em)" }, "items": [ { "_icon": "combo", "text": "select1", "cls": "Wb.Select", "properties": { "cid": "select1", "url": "@xpath + '/select'", "textField": "display_name", "valueField": "sid", "tagSortable": "true", "clearButton": "true", "subtextField": "user_name", "tagWrap": "true", "useTag": "true" } } ] } ] } # sys/file/add.xwl Title: add Description: Create file in any path ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n let fs = Wb.load('./fs.mjs'), file, metaData, path, filename, fullname = Params.fullname;\n metaData = Wb.applyValueWith({}, Params, ['title', 'icon', 'img', 'tags', 'hideInMenu']);\n if (fullname) {\n path = Wb.getDirectory(fullname);\n filename = Wb.getFilename(fullname);\n } else {\n path = Params.path;\n filename = Params.filename;\n }\n file = fs.addFile(path, filename, Wb.getBool('isFolder'), Params.url, Params.relName, metaData);\n Wb.send({ lastModified: file.lastModifiedDate, path: file.path });\n}\nmain();", "remark": "Create file in any path" }, "_icon": "module", "title": "", "_expanded": true } # sys/file/browser.xwl Title: browser Description: File browser shell ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.checkDemo();\n/**\n * Initialize file module.\n */\nfunction init() {\n let realPath = Base.realPath, props = System.getProperties(), pathList, getPath = FileUtil.getPath;\n\n pathList = [];\n pathList.pushIf(\n realPath ? getPath(realPath) : null,\n Base.pathText,\n getPath(props.getProperty('java.home')),\n getPath(props.getProperty('user.home')),\n getPath(props.getProperty('user.dir')),\n getPath(props.getProperty('java.io.tmpdir'))\n );\n pathList = pathList.unique();\n pathList.forEach((item, i) => item?.endsWith('/') && (pathList[i] = item.slice(0, -1)));\n Params.params = Wb.encode({\n pathList,\n appPath: Base.pathText,\n osCharset: Base.osCharset?.toUpperCase(),\n charset: System.getProperty('file.encoding')?.toUpperCase(),\n fileCharset: Wb.getConfig('sys.file.charset')?.toUpperCase(),\n filenameCharset: Wb.getConfig('sys.locale.filenameCharset')?.toUpperCase(),\n sysFilenameCharset: SysUtil.filenameCharset?.name()?.toUpperCase(),\n });\n}\ninit();", "remark": "File browser shell" }, "_icon": "module", "events": { "initialize": "/*\n * Xwl comments.\n * @class $path\n */\nWb.define(app, {\n /** @property {Object} - Server params. */\n params: _$params$_,\n /** @property {String} - The URL used to get the files path. */\n getFileUrl: 'm?xwl=sys/file/get',\n /** @property {Boolean} - File tree raw path. */\n set$rawPath(value) {\n app.rawPath$ = value;\n value ??= '';\n app.basePath = value.includes('|') ? value.replace('|', app.params.appPath) : value;\n app.rootPath = Wb.getParentDirectory(app.basePath);\n },\n get$rawPath() {\n return app.rawPath$;\n },\n /** @property {String} - The base path of the tree. */\n basePath: '',\n /** @property {String} - The parent of the base path. */\n rootPath: '',\n /** @property {Array} - Path back list. @priv */\n backList: [],\n /** @property {Array} - Path forward list. @priv */\n forwardList: [],\n /** @property {String} - Current node path. @priv */\n get$currentPath() {\n return app.selNode.getPath(null, '|');\n },\n /** @property {String} - Current file path. @priv */\n get$filePath() {\n return app.selNode.data.path;\n },\n /** @property {Wb.TreeItem} - Current select node. @priv */\n get$selNode() {\n return app.fileTree.selection;\n },\n /**\n * Go to the specified folder path.\n * @param {String} path The folder path.\n * @param {Function} Callback function after operation completion.\n */\n goto(path, callback) {\n app.fileTree.selectPath(app.toTreePath(path), callback, null, '|');\n },\n /**\n * Convert file path to tree path. @priv\n * @return {String} Tree path.\n */\n toTreePath(path) {\n if (path.endsWith('/'))\n path = path.slice(0, -1);\n path = path.split('/');\n if (!app.rootPath && !path[0].endsWith('/'))\n path[0] += '/';\n return path.join('|');\n },\n /**\n * Select a node.\n * @param {TreeItem} node The node to be selected.\n */\n selectNode(node) {\n let path = node.data.path;\n app.fileGrid.load({ params: { path: path } });\n app.upItem.disabled = !node.parent?.isNode;\n if (path.occur('/') > 1 && path.endsWith('/'))\n path = path.slice(0, -1);\n app.pathSelect.value = app.getRelPath(path);\n },\n /**\n * Add a new file or folder to the current folder. @priv\n * @param {String} filename File or folder name.\n * @param {Boolean} [isFolder] Whether is folder to be added. Default is false.\n */\n addFile(isFolder) {\n Wb.prompt({ title: isFolder ? Str.addFolder : Str.addFile, icon: isFolder ? 'folder1' : 'file' },\n { text: Str.name, required: true, cid: 'filename' }, function (values, win) {\n Wb.ajax({\n url: 'm?xwl=sys/file/add',\n json: true,\n params: { path: app.filePath, filename: values.filename, isFolder },\n success(resp) {\n let newItem = Wb.apply({ text: values.filename, size: isFolder ? null : 0, _leaf: !isFolder }, resp);\n\n if (!newItem._leaf)\n newItem.path += '/';\n app.fileGrid.addData(newItem).select();\n if (isFolder && app.selNode?.loaded) {\n newItem.items = [];\n app.selNode.addData(newItem);\n }\n win.close();\n }\n });\n });\n },\n /**\n * Import files to the current folder.\n * @param {Boolean} [unzip] Whether to unzip after import.\n */\n importFiles(unzip) {\n let node = app.selNode, params = app.params, items, win;\n\n items = [{\n text: Str.file, cid: 'files', multiple: true, required: true, cname: 'fileInput',\n browseMode: true, flex: 1, minHeight: '5em'\n }];\n items.push({\n cid: 'charset', cname: 'select', text: Str.charset, value: params.sysFilenameCharset,\n data: ['UTF-8', params.charset, params.osCharset, params.fileCharset, params.filenameCharset].filter(a => a).unique()\n });\n win = Wb.prompt({\n title: (unzip ? Str.importUnzip : Str.import) + ' - ' + node.text, autoGrid: 'up', layout: 'form1', icon: 'import'\n }, items, (values, win) => {\n app.doImport(win, unzip, f => win.close(), values.charset);\n }, 'wb.file.import');\n win.down('charset').visible = unzip;\n },\n /**\n * Download the selected files.\n * @param {Boolean} [zip] Whether to zip before export.\n */\n exportFiles(zip) {\n let items = app.fileGrid.selectionsData;\n if (items.length)\n Wb.download('m?xwl=sys/file/export-files', { files: items.pluck('path'), zip }, 'POST');\n else\n Wb.tipSelect();\n },\n /**\n * Do import files. @priv\n * @param {Wb.Component/Wb.Component[]} comps Import components.\n * @param {Boolean} unzip Whether to unzip after import.\n * @param {Function} callback The callback function.\n * @param {String} charset The file name charset.\n */\n doImport(comps, unzip, callback, charset) {\n let node = app.selNode;\n\n Wb.ajax({\n url: 'm?xwl=sys/file/import-files&mode=list',\n comps,\n uploadProgress: true,\n json: true,\n params: { path: node.data.path, unzip, charset },\n success(resp) {\n let newNodes, fileGrid = app.fileGrid, newItems = [];\n\n newNodes = resp.filter(item => !fileGrid.some(sub => sub.data.text == item.text));\n newNodes.forEach(item => newItems.push(Wb.applyWithout({}, item, 'items')));\n fileGrid.addData(newItems)\n fileGrid.selection = fileGrid.filter(sub => resp.some(item => item.text == sub.data.text));\n if (node.loaded) {\n newNodes = resp.filter(item => !item._leaf && !node.some(sub => sub.text == item.text));\n node.addData(newNodes);\n }\n callback?.();\n }\n });\n },\n /**\n * Copy or cut the selected files.\n * @param {Event} e Event object.\n * @param {Boolean} [cut] Whether to cut.\n */\n copy(e, cut) {\n if (!document.activeElement.isInput) {\n let files = app.fileGrid.selectionsData;\n if (files.length) {\n app.clipboard = files.pluck('path');\n app.isCut = cut;\n } else\n Wb.tipSelect();\n e.stopEvent();\n }\n },\n /**\n * Get relative path base on the root path.\n * @param {String} path Full path.\n * @return {String} Relative path.\n */\n getRelPath(path) {\n let rootPath = app.rootPath, len = rootPath.length;\n\n if (len) {\n if (rootPath.includes('|'))\n len = len + app.params.appPath.length;\n path = path.substr(len);\n if (path.startsWith('/'))\n path = path.substr(1);\n return path;\n } else {\n return path;\n }\n },\n /**\n * File grid double click handler. @priv\n * @param {Object} data The item data.\n */\n onGridDblClick(data) {\n let path = data.path, title = Wb.getFilename(path), tip = path;\n Wb.open({\n url: Wb.isImageFile(path) ? 'image-viewer' : 'text-editor', title, tip, params: { path }\n });\n }\n});" }, "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "row" }, "_expanded": true, "events": { "ready": "let el = this.el;\n\napp.fileGrid.contextMenu = Wb.createMenu(app.viewport1.tbar[0].items);\napp.fileInput = new Wb.FileInput({ cid: 'files', multiple: true, visible: false, renderEl: BodyEl });\nel.ondragover = Event.pdHandler;\nel.ondrop = e => {\n let fileInput = app.fileInput;\n\n e.stopEvent();\n fileInput.clear();\n fileInput.addFile(e.dataTransfer.files);\n app.doImport(fileInput);\n};" }, "items": [ { "_icon": "array", "text": "tbar", "cls": "Wb.Array", "properties": { "cid": "tbar" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "bar1", "isProperty": "true" }, "text": "bar1", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "addFileBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "addFileBtn", "icon": "file", "text": "@Str.addFile", "keys": "Ctrl+J", "bindModule": "sys/file/add.xwl" }, "events": { "click": "app.addFile();" } }, { "_icon": "item", "text": "addFolderBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "addFolderBtn", "icon": "folder1", "text": "@Str.addFolder", "keys": "Ctrl+Shift+J", "bindModule": "sys/file/add.xwl" }, "events": { "click": "app.addFile(true);" } }, { "_icon": "item", "text": "renameBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "renameBtn", "icon": "edit", "text": "@Str.rename", "keys": "F2", "stopEvent": "false", "bindModule": "sys/file/set-property.xwl" }, "events": { "click": "if (document.activeElement.isInput)\n return;\nlet fileGrid = app.fileGrid, row = fileGrid.selection, oldName, path, selNode = app.selNode;\n\nif (!row) {\n Wb.tipSelect();\n return;\n}\noldName = row.data.text;\nfileGrid.startEdit(row, 'text', (value, row) => {\n if (row.text != value) {\n path = row.data.path;\n app.isRenaming = true;\n Wb.ajax({\n url: 'm?xwl=sys/file/set-property',\n json: true,\n params: { rename: true, path, filename: value },\n callback(resp, xhr) {\n if (xhr.ok) {\n let update = item => {\n item.set({\n text: value, path: resp.path + (item.data._leaf ? '' : '/'),\n lastModified: new Date(resp.lastModified).textValue\n });\n }\n update(row);\n if (!row.data._leaf) {\n row = selNode.findItem('text', oldName);\n if (row) {\n let newPath, len;\n\n len = row.data.path.length;\n update(row);\n newPath = row.data.path;\n row.cascade(node => {\n node.data.path = newPath + node.data.path.substr(len);\n });\n }\n }\n }\n if (app.pendSelNode) {\n app.selectNode(app.pendSelNode);\n app.pendSelNode = null;\n }\n app.isRenaming = false;\n }\n });\n }\n return false;\n});\nWb.Editor.activeEditor.select(0, oldName.lastIndexOf('.'));" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" }, "_expanded": true }, { "_icon": "item", "text": "cutBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "cutBtn", "icon": "cut", "text": "@Str.cut", "keys": "Ctrl+X", "stopEvent": "false", "bindModule": "sys/file/paste-files.xwl" }, "events": { "click": "app.copy(e, true);" } }, { "_icon": "item", "text": "copyBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "copyBtn", "icon": "copy", "text": "@Str.copy", "keys": "Ctrl+C", "stopEvent": "false", "bindModule": "sys/file/paste-files.xwl" }, "events": { "click": "app.copy(e);" } }, { "_icon": "item", "text": "pasteBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "pasteBtn", "icon": "paste", "text": "@Str.paste", "keys": "Ctrl+V", "stopEvent": "false", "bindModule": "sys/file/paste-files.xwl" }, "events": { "click": "function paste() {\n let files = app.clipboard;\n if (document.activeElement.isInput || !files?.length)\n return;\n\n let path = app.filePath, isCut = app.isCut, conflictFile, fromPath;\n\n if (isCut) {\n let firstFile = files[0];\n fromPath = Wb.getParentDirectory(firstFile);\n if (fromPath == path) {\n //same parent\n app.clipboard = null;\n return;\n }\n }\n // check paste conflict\n conflictFile = files.find(file => file.endsWith('/') && path.startsWith(file));\n if (conflictFile) {\n Wb.warn(Str.cannotPaste.format(conflictFile));\n return;\n }\n if (isCut)\n app.clipboard = null;\n Wb.ajax({\n url: 'm?xwl=sys/file/paste-files&mode=list',\n json: true,\n params: { source: files, isCut, dest: path },\n success(resp) {\n let newNodes, fileGrid = app.fileGrid, newFiles = resp.files;\n\n app.selNode.addData(newFiles.filter(item => !item._leaf));\n newFiles.forEach(item => delete item.data);\n newNodes = fileGrid.addData(newFiles);\n fileGrid.selection = newNodes;\n if (isCut) {\n let node = app.fileTree.findPath(app.toTreePath(app.getRelPath(fromPath)), null, '|')\n if (node) {\n if (node.loaded) {\n node.each(child => {\n if (files.includes(child.data.path))\n child.destroy();\n }, true, true);\n } else {\n if (!resp.hasFolder)\n node.removeExpander();\n }\n }\n }\n }\n });\n}\npaste();" } }, { "_icon": "item", "text": "delBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "delBtn", "icon": "delete", "text": "@Str.del", "keys": "Shift+Delete", "bindModule": "sys/file/remove.xwl" }, "events": { "click": "let fileGrid = app.fileGrid, files = fileGrid.selectionsData;\nif (files.length) {\n Wb.confirm(Wb.getActionHint(files, 'text'), f => {\n files = files.pluck('path');\n Wb.ajax({\n url: 'm?xwl=sys/file/remove',\n params: { files },\n success() {\n let selNode = app.selNode;\n\n fileGrid.delRecords();\n if (selNode.loaded) {\n selNode.each(item => {\n if (files.includes(item.data.path))\n item.destroy();\n }, true, true);\n } else if (!fileGrid.some(item => !item.data._leaf)) {\n selNode.removeExpander();\n }\n }\n });\n });\n} else {\n Wb.tipSelect();\n}" } }, { "_icon": "divider", "text": "divider2", "cls": "Wb.Divider", "properties": { "cid": "divider2" }, "_expanded": true }, { "_icon": "split", "text": "exportBtn", "cls": "Wb.SplitButton", "properties": { "cid": "exportBtn", "icon": "export", "text": "@Str.export", "bindModule": "sys/file/export-files.xwl" }, "events": { "click": "app.exportFiles();" }, "_expanded": false, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "exportZip", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "exportZip", "text": "@Str.exportZip" }, "events": { "click": "app.exportFiles(true);" } } ] } ] }, { "_icon": "split", "text": "importBtn", "cls": "Wb.SplitButton", "properties": { "cid": "importBtn", "icon": "import", "text": "@Str.import", "bindModule": "sys/file/import-files.xwl" }, "events": { "click": "app.importFiles();" }, "_expanded": false, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true" }, "text": "menu", "_expanded": true, "_icon": "menu2", "items": [ { "_icon": "item", "text": "importUnzip", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "importUnzip", "text": "@Str.importUnzip" }, "events": { "click": "app.importFiles(true);" } } ] } ] }, { "_icon": "divider", "text": "divider3", "cls": "Wb.Divider", "_expanded": true, "properties": { "cid": "divider3" } }, { "_icon": "item", "text": "refreshBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "refreshBtn", "icon": "refresh", "text": "@Str.refresh" }, "events": { "click": "app.fileTree.loadSelect();" } } ] }, { "cls": "Wb.Toolbar", "properties": { "cid": "bar2", "isProperty": "true" }, "text": "bar2", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "backBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "backBtn", "icon": "left4", "disabled": "true", "text": "@Str.back" }, "events": { "click": "let backList = app.backList, path = backList.pop();\napp.forwardList.push(app.currentPath);\napp.stopHistory = true;\napp.fileTree.selectPath(path, null, null, '|');\napp.stopHistory = false;\napp.backBtn.disabled = !backList.length;\napp.forwardBtn.disabled = false;" } }, { "_icon": "item", "text": "forwardBtn", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "forwardBtn", "icon": "right4", "disabled": "true", "text": "@Str.forward" }, "events": { "click": "let forwardList = app.forwardList, path = forwardList.pop();\napp.backList.push(app.currentPath);\napp.stopHistory = true;\napp.fileTree.selectPath(path, null, null, '|');\napp.stopHistory = false;\napp.forwardBtn.disabled = !forwardList.length;\napp.backBtn.disabled = false;" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "_expanded": false, "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "upItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "upItem", "icon": "up4", "disabled": "true", "text": "@Str.up" }, "events": { "click": "app.fileTree.selection = app.selNode.parent;" } }, { "_icon": "divider", "text": "divider2", "cls": "Wb.Divider", "properties": { "cid": "divider2" }, "_expanded": true }, { "_icon": "combo", "text": "pathSelect", "cls": "Wb.Select", "properties": { "cid": "pathSelect", "flex": "1", "minWidth": "10em", "data": "app.params.pathList", "selectMode": "false" }, "events": { "select": "app.goto(data.text);", "keydown": "if (e.isGoKey) {\n app.pathSelect.triggers.fireEvent('click');\n app.pathSelect.collapse();\n e.stopEvent();\n}" }, "_expanded": true, "items": [ { "cls": "Wb.Item", "events": { "click": "let select = this.parent, path = select.value, text, data = select.data;\ntext = path.replaceAll('\\\\', '/');\napp.goto(text, node => {\n if (node) {\n if (!data.some(item => item.text == text))\n data.insert(0, { text });\n } else {\n Wb.tipWarn(Str.notFound.format(path));\n }\n});" }, "properties": { "cid": "triggers", "isProperty": "true", "icon": "right4", "tip": "@Str.goto" }, "text": "triggers", "_expanded": true, "_icon": "item" } ] } ] } ] }, { "_icon": "tree-view", "text": "fileTree", "cls": "Wb.Tree", "_expanded": true, "properties": { "cid": "fileTree", "width": "18em", "url": "@app.getFileUrl+'&type=tree'", "autoSelect": "true", "keyWalking": "true", "autoLoad": "@!Wb.parseBool('_$dialog$_')" }, "events": { "beforeselect": "let node = this.selection;\nif (node && !app.stopHistory) {\n let path = node.getPath(null, '|'), backList = app.backList;\n if (backList.lastItem != path)\n backList.push(path);\n app.backBtn.disabled = false;\n}", "selectionchange": "if (app.isRenaming) {\n app.pendSelNode = app.selNode;\n return false;\n}\napp.selectNode(app.selNode);", "beforeload": "let basePath = app.basePath;\nif (!configs.node && basePath) {\n let rootPath = app.rootPath;\n params.path = rootPath;\n params.filterName = Wb.getFilename(app.basePath) || app.basePath;\n}" } }, { "_icon": "splitter", "text": "splitter1", "cls": "Wb.Splitter", "properties": { "cid": "splitter1" } }, { "_icon": "grid", "text": "fileGrid", "cls": "Wb.Grid", "properties": { "cid": "fileGrid", "flex": "1", "url": "@app.getFileUrl+'&type=file'", "autoLoad": "false", "columnsSortable": "true", "sorters": "text", "stateId": "wb.file", "fields": "({\n lastModified: { type: 'date' }, _icon: {\n convert(value, data) {\n return data._leaf ? Wb.getFileIcon(data.text) : 'folder1';\n }\n }\n})", "showIcon": "true", "keyWalking": "true", "multiSelect": "true", "gridLine": "false", "stripeRows": "false", "rectSelect": "true", "pageSize": "-1" }, "events": { "beforeload": "/**\n * Set sorter params.\n */\nfunction setSorterParams() {\n let sorter = app.fileGrid.sorters, sortMap = { text: 'name', type: 'type', size: 'size', lastModified: 'date' };\n\n if (Wb.isString(sorter))\n sorter = { name: sorter, desc: false };\n params.sort = sortMap[sorter.name];\n params.desc = sorter.desc;\n params.filterExt = app.extNames;\n}\nsetSorterParams();", "itemdblclick": "let data = item.data;\nif (data._leaf) {\n app.onGridDblClick(data);\n} else {\n app.selNode.selectChild(data.text);\n}", "selectionchange": "let sels = this.selections, hint, len = sels.length;\n\nif (len) {\n hint = Str.nItems.format(len);\n if (sels.some(item => item.data._leaf)) {\n let total = 0;\n\n sels.forEach(item => {\n if (item.data._leaf)\n total += item.data.size;\n });\n hint += ', ' + Str.size + Str.labelSeparator + total.fileSize + ' (' + total.intText + ')';\n }\n}\nelse {\n hint = '';\n}\napp.fileLabel.text = hint;" }, "_expanded": true, "items": [ { "cls": "Wb.Array", "properties": { "cid": "columns" }, "text": "columns", "_expanded": true, "_icon": "array", "items": [ { "cls": "Wb.Column", "properties": { "cid": "rowNumCol", "rowNum": "true" }, "text": "rowNumCol", "_expanded": true, "_icon": "column" }, { "_icon": "column", "text": "nameCol", "cls": "Wb.Column", "properties": { "cid": "nameCol", "text": "@Str.name", "fieldName": "text", "width": "18em" }, "_expanded": true, "items": [ { "cls": "Wb.Text", "properties": { "cid": "editor", "isProperty": "true", "valueType": "filename", "required": "true" }, "text": "editor", "_expanded": true, "_icon": "text" } ] }, { "_icon": "column", "text": "dateCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "dateCol", "fieldName": "lastModified", "text": "@Str.modifiedDate", "width": "12em" } }, { "_icon": "column", "text": "typeCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "typeCol", "fieldName": "type", "text": "@Str.type", "render": "return data._leaf ? Wb.getFileExt(data.text) : Str.folder;", "width": "8em" } }, { "_icon": "column", "text": "sizeCol", "cls": "Wb.Column", "_expanded": true, "properties": { "cid": "sizeCol", "fieldName": "size", "text": "@Str.size", "type": "fileSize", "width": "8em" } } ] }, { "_icon": "pagenum", "text": "pagingBar", "cls": "Wb.PagingBar", "properties": { "cid": "pagingBar", "isProperty": "true", "totalOnly": "true" }, "events": { "ready": "app.fileLabel = this.insert(2, ['->', { cname: 'label' }, '|'])[1];" } } ] } ] } ] } # sys/file/export-files.xwl Title: export-files Description: Export files in any path ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.checkDemo();\nfunction main() {\n let files = Wb.getObject('files'), file = new Wb.File(files[0]), zip = Wb.getBool('zip'), len = files.length,\n filename = Params.filename;\n\n if (zip || len > 1 || file.isFolder) {\n if (!filename) {\n if (len == 1)\n filename = file.isFile ? file.normalName : file.name;\n else\n filename = file.parent.name || 'file';\n }\n files = files.map(file => new File(file));\n Wb.setContentType(filename + '.zip');\n ZipUtil.zip(files, response.getOutputStream());\n } else {\n Wb.exportData(file, filename);\n }\n}\nmain();", "remark": "Export files in any path" }, "_icon": "module" } # sys/file/find-shortcut.xwl Title: find-shortcut Description: Find file path of the specified URL shortcut ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n let file, result, path = Params.path;\n file = UrlBuffer.getBuffer().get('/' + path);\n if (file)\n result = Base.modulePathText + file;\n else {\n file = new Wb.File(Base.modulePath, path + '.xwl');\n if (file.exists)\n result = file.path;\n else\n result = '';\n }\n Wb.send(result);\n}\nmain();", "remark": "Find file path of the specified URL shortcut" }, "_icon": "module" } # sys/file/get-property.xwl Title: get-property Description: Get file property in any path ```json { "title": "", "icon": "", "img": "", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let fs = Wb.load('./fs.mjs');\nWb.send(fs.getFileProperty(Params.path));", "remark": "Get file property in any path" }, "_icon": "module" } # sys/file/get-resource.xwl Title: get-resource Description: Get files in resource path ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.File.checkContains('|wb/system/resource', Params.path);\nWb.run('./get');", "remark": "Get files in resource path" }, "_icon": "module", "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false" } # sys/file/get.xwl Title: get Description: Get files in any path ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n let fs = Wb.load('./fs.mjs'), items, path = Params.path, filterName = Params.filterName, filterExt = Params.filterExt;\n\n items = fs.listFiles(path, Params.type, Params.sort, Wb.getBool('desc'), Wb.getBool('moduleSort'));\n if (filterName) {\n let baseFolder = items.find(item => item.text == filterName);\n if (baseFolder) {\n baseFolder._expanded = true;\n items = [baseFolder];\n } else {\n Wb.raise(Str.notFound.format(path + filterName));\n }\n }\n if (filterExt) {\n filterExt = filterExt.splitTrim();\n items = items.filter(item => {\n return filterExt.some(ext => item.text.endsWith(ext) || !item._leaf);\n });\n }\n Wb.send(items);\n}\nmain();", "remark": "Get files in any path" }, "_icon": "module", "title": "" } # sys/file/image-viewer.xwl Title: image-viewer Description: Image viewer shell ```json { "title": "", "icon": "image", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.set({ path: Wb.encode(Params.path) });", "remark": "Image viewer shell" }, "_icon": "module", "events": { "initialize": "Wb.define(app, {\n /** @property {String} src The src of image to preview. */\n get$src() {\n return app.imageEl.src;\n },\n set$src(value) {\n app.imageEl.src = value;\n }\n});\nWb.define(app, {\n /** @property {String} path The file path to edit. @priv */\n path: _$path$_,\n /** @property {Boolean} - Whether not auto load. */\n notLoad: '_$notLoad',\n /**\n * Preview the image file. @priv\n */\n preview(callback) {\n let path = app.path;\n Wb.ajax({\n url: 'm?xwl=sys/file/open',\n params: { path },\n success(resp) {\n app.imageEl.src = 'data:image/' + Wb.getFileExt(path) + ';base64,' + resp;\n }\n });\n },\n /**\n * Execute after on load. @priv\n */\n onLoad() {\n if (!app.notLoad)\n app.preview();\n if (!Globals.WbMainTab)\n document.title = Wb.getFilename(app.path);\n }\n});" }, "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "border": "false", "autoScroll": "true", "bodyCls": "w-prev-ct" }, "events": { "ready": "app.imageEl = this.bodyEl.addEl('w-margin-center', 'img');" }, "_expanded": true } ] } # sys/file/import-files.xwl Title: import-files Description: Import files in any path ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.checkDemo();\nfunction main() {\n let fs = Wb.load('./fs.mjs'), newFile, files = Wb.getParams('files'), charset,\n path = new Wb.File(Params.path), unzip = Wb.getBool('unzip'), newNames, filename, filenames = [];\n\n charset = Params.charset ? SysUtil.getCharset(Params.charset) : SysUtil.filenameCharset;\n files.forEach(file => {\n filename = file.name;\n if (unzip && Wb.getFileExt(filename).toLowerCase() == 'zip') {\n newNames = ZipUtil.unzip(file.stream, path.file, charset);\n filenames = filenames.concat(newNames);\n filenames.forEach(name => {\n new Wb.File(path.file, name).cascadeSelf(file => file.clearBuffer());\n })\n } else {\n filenames.push(filename);\n newFile = new Wb.File(path, filename);\n newFile.stream = file.stream;\n newFile.clearBuffer();\n }\n });\n files = fs.listFiles(path, Params.mode);\n Wb.send(files.filter(file => filenames.includes(file.text)));\n}\nmain();", "remark": "Import files in any path" }, "_icon": "module" } # sys/file/open-resource.xwl Title: open-resource Description: Get file content in resource path ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "Wb.File.checkContains('|wb/system/resource', Params.path);\nWb.run('./open');", "remark": "Get file content in resource path" }, "_icon": "module", "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false" } # sys/file/open.xwl Title: open Description: Get file content in any path ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let fs = Wb.load('./fs.mjs');\nWb.send(fs.getFileData(Params.path, Params.charset));", "remark": "Get file content in any path" }, "_icon": "module", "title": "" } # sys/file/paste-files.xwl Title: paste-files Description: Paste or move files in any path ```json { "title": "", "icon": "", "img": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let fs = Wb.load('./fs.mjs');\nWb.send(fs.pasteFiles(Wb.getObject('source'), Params.dest, Params.relName, Wb.getBool('isCut'), Params.mode));", "remark": "Paste or move files in any path" }, "_icon": "module" } # sys/file/remove.xwl Title: remove Description: Remove file in any path ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let fs = Wb.load('./fs.mjs');\nfs.removeFiles(Wb.getObject('files'));", "remark": "Remove file in any path" }, "_icon": "module", "title": "" } # sys/file/save.xwl Title: save Description: Save file content in any path ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let fs = Wb.load('./fs.mjs');\nWb.send(fs.saveFile(Wb.payload, Params.confirm == '1'));", "remark": "Save file content in any path" }, "_icon": "module", "title": "" } # sys/file/set-property.xwl Title: set-property Description: Set file property in any path ```json { "title": "", "icon": "", "img": "", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let fs = Wb.load('./fs.mjs'), renameOnly = Wb.getBool('rename'), file;\n\nfile = fs.setFileProperty(Params.path, Params.filename, renameOnly ? false : Params.title,\n Params.icon, Params.img, Params.tags, Params.url, Params.hideInMenu);\nWb.send({ lastModified: file.lastModified, path: file.path });", "remark": "Set file property in any path" }, "_icon": "module" } # sys/file/text-editor.xwl Title: text-editor Description: Text editor shell ```json { "title": "", "icon": "text1", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let path = Params.path;\nWb.set('args', Wb.encode({\n osCharset: Base.osCharset?.toUpperCase(),\n charset: System.getProperty('file.encoding')?.toUpperCase(),\n fileCharset: Wb.getConfig('sys.file.charset')?.toUpperCase(),\n language: Wb.getFileExt(path),\n filenameCharset: Wb.getConfig('sys.locale.filenameCharset')?.toUpperCase()\n}));\nWb.set({ path: Wb.encode(path) });", "remark": "Text editor shell" }, "_icon": "module", "events": { "initialize": "Wb.define(app, {\n /** @property {Object} - Server args. @priv */\n args: _$args$_,\n /** @property {String} path The file path to edit. @priv */\n path: _$path$_,\n /** @property {String} charset Charset of text encoding. @priv */\n charset: 'UTF-8',\n /**\n * Reopen the file. @priv\n * @param {Function} [callback] The function to be executed after open.\n */\n reOpen(callback) {\n Wb.ajax({\n url: 'm?xwl=sys/file/open',\n params: { path: app.path, charset: app.charset },\n success(resp) {\n let pos = resp.indexOf('|');\n app.lastModified = resp.substr(0, pos);\n app.editor.rawValue = resp.substr(pos + 1);\n app.saveBtn.disabled = true;\n callback?.();\n }\n });\n },\n /**\n * Set text charset. @priv\n */\n setCharset() {\n let args = app.args;\n Wb.prompt({ icon: 'earth', title: Str.setCharset }, [\n {\n cid: 'charset', cname: 'select', text: Str.charset, required: true, value: app.charset,\n data: ['UTF-8', args.charset, args.osCharset, args.fileCharset, args.filenameCharset].filter(a => a).unique()\n }, { cname: 'displayField', showEmptyLabel: true, icon: 'warn', value: Str.overwriteTextHint }\n ], (values, win) => {\n app.charsetItem.text = app.charset = values.charset;\n app.reOpen(f => win.close());\n });\n },\n /**\n * Execute after on load. @priv\n */\n onLoad() {\n app.reOpen();\n if (!Globals.WbMainTab)\n document.title = Wb.getFilename(app.path);\n app.editor.focus();\n },\n /**\n * Save the current file. @priv\n * @param {Boolean} [noConfirm] Whether no confirm when the file has been modified.\n */\n save(noConfirm) {\n if (app.saveBtn.disabled)\n return;\n let data, content = app.editor.value;\n\n data = app.path + '|' + app.charset + '|' + app.lastModified + '|' + content.length + '|' + content;\n Wb.ajax({\n url: 'm?xwl=sys/file/save', data,\n params: {\n confirm: noConfirm ? 0 : 1\n },\n success(resp) {\n app.lastModified = Wb.decode(resp)[0];\n app.saveBtn.disabled = true;\n },\n failure(resp) {\n if (resp.errorCode == 'modified')\n Wb.confirm(Str.modifiedConfirm.format(Wb.decode(resp.errorText)[0]), f => app.save(true));\n }\n });\n }\n});", "beforeunload": "if (!app.saveBtn.disabled)\n return false;" }, "_expanded": true, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "_expanded": true, "properties": { "cid": "viewport1", "layout": "fit" }, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "item", "text": "saveBtn", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "saveBtn", "icon": "save", "text": "@Str.save", "disabled": "true", "keys": "Ctrl+S" }, "events": { "click": "app.save();" } } ] }, { "cls": "Wb.Toolbar", "properties": { "cid": "bbar", "isProperty": "true" }, "text": "bbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "right1", "text": "fill1", "cls": "Wb.Fill", "properties": { "cid": "fill1" } }, { "_icon": "label", "text": "cursorLabel", "cls": "Wb.Label", "properties": { "cid": "cursorLabel" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "charsetItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "charsetItem", "text": "@app.charset" }, "events": { "click": "app.setCharset();" } }, { "_icon": "space", "text": "space1", "cls": "Wb.Space", "properties": { "cid": "space1" } } ] }, { "_icon": "edit", "text": "editor", "cls": "Wb.CodeEditor", "properties": { "cid": "editor", "wrapBorder": "false", "border": "true", "language": "@app.args.language" }, "events": { "cursorchange": "app.cursorLabel.text = cursor ? (cursor.lineNumber + ' : ' + cursor.column) : Wb.nbsp;", "change": "app.saveBtn.disabled = false;" } } ] } ] } # sys/portal/home/get-langs.xwl Title: get-langs Description: Get language list ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Get language list", "serverScript": "function main() {\n let file = new Wb.File(true, 'wb/js/locale'), result = [];\n\n file.listFiles().forEach(file => {\n let name = file.name;\n if (name.startsWith('wb-') && name.endsWith('.js') && !name.endsWith('.min.js'))\n result.push(name.slice(3, -3));\n })\n Wb.send(result);\n}\nmain();" }, "_icon": "module" } # sys/portal/home/get-modules-tree.xwl Title: get-modules-tree Description: Get modules tree ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Get modules tree", "serverScript": "function main() {\n const Util = Wb.load('./util.mjs');\n Wb.send(Util.getModules());\n}\nmain();" }, "_icon": "module" } # sys/portal/home/get-user-data.xwl Title: get-user-data Description: Get current user data ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Get current user data", "serverScript": "function main() {\n const protectedText = Wb.UserUtil.protectedText;\n let sql;\n\n sql = `select '${protectedText}' as password, '${protectedText}' as confirm_password, display_name, create_date,\n login_times, email, mobile_phone, use_lang from wb_user where sid={?sys.userid?}`;\n Wb.sendDict(sql, 'wb,');\n}\nmain();" }, "_icon": "module" } # sys/portal/home/save-desktop.xwl Title: save-desktop Description: Save desktop ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Save desktop", "serverScript": "function main() {\n let { value, asDefault } = Params;\n\n if (!value.portlets) {\n let data = Wb.getResource(['desktop', 'desktop'], [null, 'system']);\n\n data = data[0] ?? data[1];\n if (data?.portlets)\n value.portlets = data.portlets;\n }\n if (asDefault)\n Wb.permitx('set-resource-all') && Wb.run('set-resource-all');\n else\n Wb.permitx('set-resource') && Wb.run('set-resource');\n}\nmain();" }, "_icon": "module" } # sys/portal/home/search-modules.xwl Title: search-modules Description: Search module names ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Search module names", "serverScript": "function main() {\n let query = Params.query, fs = Wb.load('wb/modules/sys/file/fs.mjs');\n\n //[] indicates a complete match\n if (query.startsWith('[') && query.endsWith(']'))\n query = query.slice(1, -1);\n else if (!query.includes('*') && !query.includes('?'))\n query = '*' + query + '*';\n Wb.send(search(fs, '', query).mixSort('text'));\n}\n/**\n * Search the module files in the entire module directory.\n * @param {Object} fs FS util object.\n * @param {String} path Search relative path.\n * @param {String} query Search keyname.\n * @return {Array} Search result.\n */\nfunction search(fs, path, query) {\n let items = fs.listFiles(Base.modulePathText + path, 'home'), result = [];\n items.forEach(item => {\n if (item._leaf) {\n if (item.text.wildcardMatch(query) || item.path.lastItem('/').wildcardMatch(query)) {\n result.push(Wb.applyWith({}, item, ['text', '_icon', '_img', 'path', 'strTitle']));\n }\n } else {\n result.pushAll(search(fs, '/' + item.path, query));\n }\n });\n return result;\n}\nmain();" }, "_icon": "module" } # sys/portal/home/set-user-data.xwl Title: set-user-data Description: Set current user data ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Set current user data", "serverScript": "function main() {\n const protectedText = Wb.UserUtil.protectedText;\n let session, pwd = Params.password, fields = 'display_name,email,mobile_phone,use_lang';\n\n if (pwd != protectedText)\n fields += ',password';\n Wb.set({\n $sid: Wb.userid, password: Wb.UserUtil.encryptPassword(pwd)\n });\n Wb.sync({ tableName: 'wb_user', update: Params, fields });\n session = request.getSession(false);\n session?.setAttribute('sys.dispname', Params.display_name);\n session?.setAttribute('sys.lang', Params.use_lang);\n}\nmain();" }, "_icon": "module" } # sys/portal/home.xwl Title: home Description: Default home page ```json { "title": "", "icon": "", "img": "", "tags": "{url: 'home', newWin: true}", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n const Util = Wb.load('./home/util.mjs');\n\n if (!Util.checkLogin())\n return;\n const theme = Wb.get('sys.theme') || Wb.getConfig('sys.theme');\n Wb.set(Util.getDesktopData());\n Wb.set({\n theme: Wb.encode(theme),\n licensee: Wb.encode(Util.getLicensee()),\n themeItems: Wb.encode(Util.getThemeItems(theme)),\n title: Wb.getConfig('sys.app.title'),\n username: Wb.encode(Wb.username),\n dispname: Wb.encode(Wb.dispname),\n setDefaultDesktop: Wb.permit('set-resource-all'),\n heartbeat: Wb.getConfig('sys.session.heartbeatInterval'),\n httpHeartbeat: Wb.getConfig('sys.session.httpHeartbeatInterval'),\n isDemo: Config.isDemo,\n isShowPwdDialog: Util.isShowPwdDialog()\n });\n}\nmain();", "title": "_$title$_", "remark": "Default home page", "loginRequired": "false" }, "_icon": "module", "_expanded": true, "events": { "initialize": "/*\n * Default home page\n * @class $path\n */\nWb.define(app, {\n /** @property {Boolean} - Whether is demo version. */\n isDemo: _$isDemo$_,\n /** @property {String} - Licensee name. */\n licensee: _$licensee$_,\n /** @property {Boolean} - Whether to show password dialog. */\n isShowPwdDialog: _$isShowPwdDialog$_,\n /** @property {String} - Current user name. */\n username: _$username$_,\n /** @property {String} - Current user display name. */\n dispname: _$dispname$_,\n /** @property {Boolean} - Home module flag. */\n inHome: true,\n /** @property {String} - Current theme @priv */\n theme: _$theme$_,\n /** @property {Object} - Gets the currently open module app. Returns null if no modules are open. */\n get$activeModule() {\n return app.moduleTab.activeCard?.module ?? null;\n },\n /** @property {String} - Account display name. */\n get$accountName() {\n return Str.myAccount + ' (' + this.dispname + ')';\n },\n /** @property {Object} - Gets the currently open module card. */\n get$activeCard() {\n return app.moduleTab.activeCard;\n },\n /**\n * Link current module to the relative menu. @priv\n * @param {Wb.Card} [card] The card to link with. Default is the current active card.\n */\n linkToMenu(card) {\n let url = (card ?? app.activeCard)?.moduleUrl;\n\n if (url?.startsWith('m?xwl=')) {\n let p = url.indexOf('&'), firstPath, btn, pos;\n url = url.substring(6, p == -1 ? url.length : p) + '.xwl';\n if (app.topNavBar) {\n pos = url.indexOf('/');\n firstPath = url.substr(0, pos);\n btn = app.topNavBar.find(btn => btn.bindPath === firstPath);\n if (btn) {\n btn.active = true;\n app.selectTopButton(btn, f => {\n app.moduleTree.selectPath(url.substr(pos + 1), node => {\n if (node) {\n node.select(null, null, true);\n node.intoViewCenter();\n }\n }, 'filename', null, true, true);\n });\n }\n } else {\n app.moduleTree.selectPath(url, node => {\n if (node) {\n node.select(null, null, true);\n node.intoViewCenter();\n }\n }, 'filename', null, true, true);\n }\n }\n },\n /**\n * Opens the specified module.\n * @param {Object} data Parameter object.\n */\n openModule(data) {\n let tags = data.tags, configs;\n\n configs = {\n icon: data._icon, img: data._img, title: data.text, url: 'm?xwl=' + data.path, allowRefresh: true,\n tags: { strTitle: data.strTitle }\n };\n if (tags) {\n tags = Wb.parse(tags);\n configs.tags.tags = tags;\n Wb.apply(configs, tags);\n }\n if (configs.frame)\n Wb.browse(configs);\n else if (configs.newWin)\n Wb.openWin(configs);\n else\n Wb.open(configs);\n },\n /**\n * Show my Account dialog.\n */\n showMyAccount() {\n Wb.ajax({\n url: xpath + '/get-user-data',\n json: true,\n success(resp) {\n let win = app.accountWin;\n\n if (!win) {\n win = app.accountWin = Wb.Dict.createColWindow(resp.columns, 'display_name,password,confirm_password,' +\n 'email,mobile_phone,use_lang', { title: Str.myAccount, icon: 'user2', width: '50em' });\n }\n Wb.setValue(win, resp.items[0]);\n win.okHandler = (win, values) => {\n if (values.password != values.confirm_password) {\n Wb.warn(Str.pwdNotSame, f => win.down('password').focus(false, true));\n return;\n }\n Wb.ajax({\n url: xpath + '/set-user-data',\n comps: win,\n success() {\n app.dispname = values.display_name;\n app.accountItem.text = app.accountName;\n win.hide();\n if (Str.lang != values.use_lang) {\n location.reload();\n }\n }\n });\n };\n win.subTitle = app.dispname;\n win.show();\n }\n });\n },\n /**\n * Fires after the page is ready.\n */\n onReady() {\n let activeCard = app.moduleTab.activeCard, httpHeartbeat = _$httpHeartbeat$_;\n app.moduleTab.setNavigate(app.backItem, app.forwardItem);\n if (activeCard) {\n //This event must be triggered again during initialization because home is not ready\n app.moduleTab.fireEvent('cardchange', activeCard);\n }\n if (httpHeartbeat > 0)\n setInterval(f => Wb.ajax('refresh-session'), httpHeartbeat * 1000);\n console.info('%cThis software is only authorized to%c' + (app.licensee || '(unlicensed)'),\n 'padding: 2px 8px; border-radius: 3px 0 0 3px; color: #fff; background: #606060;',\n 'padding: 2px 8px; border-radius: 0 3px 3px 0; color: #fff; background: #1475b2;');\n },\n /**\n * Window resize event handler. @priv\n */\n onResize() {\n let visible = app.treeItem.visible = Globals.smallScreen;\n app.toggleTools(visible);\n },\n /**\n * Open the specified module. @priv\n * @param {Object} [data] Module data.\n */\n doOpenModule(data) {\n let sp = app.treeSplitter;\n\n app.openModule(data);\n // floating module tree\n if (sp.slideTarget)\n sp.restoreTargetComp();\n else if (app.treeItem.visible)\n app.moduleTree.hide();\n },\n /**\n * Toggle tool buttons to the toolbar or menu.\n * @param {Boolean} [inMenu] Whether tools in the menu.\n */\n toggleTools(inMenu) {\n if (inMenu != app.toolsInMenu) {\n let btn = app.backItem, items = [], menuItem = app.menuItem, menu = menuItem.menu, configs;\n\n app.toolsInMenu = inMenu;\n while (btn) {\n btn.visible = !inMenu;\n if (inMenu) {\n configs = {\n text: btn.tip, icon: btn.icon, refToolBtn: btn, handler() {\n this.refToolBtn.fireEvent('click');\n }\n };\n if (btn.active != null)\n configs.checked = btn.active;\n items.push(configs);\n }\n btn = btn.nextSibling;\n if (btn == menuItem)\n break;\n }\n if (inMenu) {\n items.push({ cname: 'divider', refToolBtn: 1 });\n menu.insert(0, items);\n } else {\n menu.each(item => { item.refToolBtn && item.destroy() }, true, true);\n }\n }\n },\n /**\n * Show password dialog for changes all default password.\n */\n showPwdDialog() {\n Wb.run({ url: xpath + '/../reset-passwords' });\n },\n /**\n * Create top navigate bar.\n */\n createTopNavBar() {\n let fillItem = app.topFillItem, moduleTree = app.moduleTree, bar, data;\n\n fillItem.hide();\n app.lastNavButton = null;\n bar = app.topNavBar = fillItem.parent.insertBefore({\n cname: 'toolbar', cls: 'w-top-nav', alignSelf: 'stretch', style: 'padding:0', flex: 1, justify: 'center',\n margin: '0 .5em', events: {\n buttonclick(button) {\n app.selectTopButton(button);\n }\n }\n }, fillItem);\n moduleTree.each(node => {\n data = node.data;\n bar.add({\n icon: data._icon, img: data._img, cls: 'w-nav-btn', text: data.text, bindPath: data.path,\n bindData: data._leaf ? data : null, groupName: 'nav'\n });\n });\n moduleTree.data = null;\n bar.firstItem?.fireEvent('click');\n },\n /**\n * Select top menu bar button. @priv\n * @param {Wb.Button} button Selected button.\n * @param {Function} callback Execute after sucess.\n */\n selectTopButton(button, callback) {\n let lastBtn = app.lastNavButton, moduleTree = app.moduleTree;\n if (lastBtn) {\n lastBtn.bindItems = moduleTree.data;\n lastBtn.bindScrollTop = moduleTree.scrollEl.scrollTop;\n lastBtn.bindSelPath = moduleTree.selection?.data.path;\n }\n if (button.bindData) {\n lastBtn.active = true;\n app.doOpenModule(button.bindData);\n callback?.();\n } else {\n if (button.bindItems) {\n moduleTree.data = button.bindItems;\n if (button.bindSelPath)\n moduleTree.down(node => node.data.path == button.bindSelPath)?.selectNoFocus();\n moduleTree.scrollEl.scrollTop = button.bindScrollTop;\n callback?.();\n } else {\n moduleTree.load({\n params: { path: button.bindPath }, success() {\n callback?.();\n }\n });\n }\n app.lastNavButton = button;\n }\n },\n /**\n * Destroy navigate bar and restore tree navigate.\n */\n restoreTreeNav() {\n app.topNavBar?.destroy();\n app.topNavBar = null;\n app.topFillItem.show();\n app.moduleTree.load();\n },\n /**\n * Save desktop data.\n * @param {Boolean} [asDefault] Whether to save as the default desktop.\n */\n saveDesktop(asDefault) {\n function getPageData() {\n let items = [], url, tree = app.moduleTree, expandNodes, strTitle;\n app.moduleTab.each(card => {\n url = card.moduleUrl;\n if (url && card.allowRefresh) {\n strTitle = card.strTitle;\n items.push({\n icon: card.icon ?? undefined, img: card.img ?? undefined, visible: card.visible, tags: card.tags,\n title: strTitle ? undefined : card.title, strTitle, moduleUrl: card.moduleUrl\n });\n }\n });\n if (!app.noSaveExandNodes) {\n expandNodes = [];\n app.moduleTree.each(node => {\n if (node.expanded)\n expandNodes.push(node.data.strTitle || node.text);\n });\n }\n return {\n items, portlets: getPortlets(), treeVisible: tree.visible, treeWidth: tree.getStyle('width'),\n expandNodes, showNavBar: !!app.topNavBar\n };\n }\n\n function getPortlets() {\n let card = app.moduleTab.find(card => card.moduleUrl == 'm?xwl=my/home'), items, strTitle;\n\n if (card && !card.prepend) {\n items = [];\n card.down('viewport1')?.each(panel => {\n strTitle = panel.strTitle;\n items.push({\n icon: panel.icon ?? undefined, img: panel.img ?? undefined, tags: panel.tags, col: panel.gridColValue,\n row: panel.gridRowValue, title: strTitle ? undefined : panel.title, strTitle, moduleUrl: panel.moduleUrl\n });\n });\n }\n return items;\n }\n Wb.ajax({\n url: xpath + '/save-desktop',\n data: { name: 'desktop', value: getPageData(), userid: asDefault ? 'system' : undefined, asDefault },\n success() {\n Wb.tipDone(Str.saveDesktop);\n }\n });\n }\n});", "finalize": "window.onresize = app.onResize;\napp.onResize();\nlet smallScreen = app.treeItem.visible;\nif (smallScreen)\n app.moduleTree.visible = !app.moduleTab.firstItem;\nif (app.isShowPwdDialog)\n app.showPwdDialog();\nif (!smallScreen && _$showNavBar$_)\n app.createTopNavBar();" }, "items": [ { "_icon": "plug", "text": "socket", "cls": "Wb.Socket", "properties": { "cid": "socket", "name": "sys.home", "heartbeatInterval": "_$heartbeat$_", "loginRequired": "true", "xwl": "sys/session/service.xwl {xaction: 'monWebsocket'}" }, "events": { "message": "function main() {\n let data = e.data, type, msg, method;\n\n data = Wb.decode(data);\n type = data.type;\n switch (type) {\n case 'info':\n case 'warn':\n case 'error':\n msg = data.msg;\n method = 'tip' + type.capital;\n if (Wb.isObject(msg)) {\n Wb[method](msg.msg ?? Str.newMessage, null, msg.url ? f => {\n if (msg.newWin)\n Wb.openWin(msg);\n else\n Wb.open(msg);\n } : undefined);\n } else {\n Wb[method](msg);\n }\n break;\n }\n}\nmain();", "failure": "if (!Wb.unloading) {\n Wb.login((username, dispname) => {\n app.dispname = dispname;\n app.accountItem.text = app.accountName;\n if (app.username != username) {\n app.username = username;\n location.reload();\n }\n });\n}" } }, { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "row", "border": "false", "cls": "@app.theme=='dark'?'w-home':'w-home w-dark-home'" }, "_expanded": true, "events": { "ready": "app.onReady();" }, "items": [ { "_icon": "toolbar", "text": "tbar", "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true", "gap": ".2em", "style": "padding:0 .5em;" }, "_expanded": true, "items": [ { "_icon": "item", "text": "treeItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "treeItem", "icon": "tree-view", "plainIcon": "true", "minWidth": "2em" }, "events": { "click": "app.moduleTree.visible = !app.moduleTree.visible;" } }, { "_icon": "logo", "text": "logoIcon", "cls": "Wb.Icon", "properties": { "cid": "logoIcon", "icon": "geejing", "fontSize": "1.5em" } }, { "_icon": "label", "text": "titleLabel", "cls": "Wb.Label", "properties": { "cid": "titleLabel", "text": "_$title$_" }, "_expanded": true }, { "_icon": "right1", "text": "topFillItem", "cls": "Wb.Fill", "properties": { "cid": "topFillItem" } }, { "_icon": "item", "text": "backItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "backItem", "tip": "@Str.back", "icon": "left4", "plainIcon": "true", "cls": "w-home-tbtn" } }, { "_icon": "item", "text": "forwardItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "forwardItem", "tip": "@Str.forward", "icon": "right4", "plainIcon": "true", "cls": "w-home-tbtn" } }, { "_icon": "item", "text": "refreshItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "refreshItem", "tip": "@Str.refresh", "icon": "refresh", "plainIcon": "true", "disabled": "true", "cls": "w-home-tbtn" }, "events": { "click": "let card = app.moduleTab.activeCard;\nif (card) {\n let configs = { url: card.moduleUrl, card, tabMode: 'reload' }, tags = card.tags;\n\n if (tags) {\n Wb.apply(configs, tags);\n configs.tags = { tags };\n }\n Wb.open(configs);\n}" } }, { "_icon": "item", "text": "homeItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "homeItem", "tip": "@Str.home", "icon": "home", "plainIcon": "true", "cls": "w-home-tbtn" }, "events": { "click": "Wb.openNormal('m?xwl=my/home');" } }, { "_icon": "item", "text": "linkItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "linkItem", "icon": "link", "active": "false", "plainIcon": "true", "tip": "@Str.moduleLinkToMenu", "cls": "w-home-tbtn" }, "events": { "toggle": "if (active)\n app.linkToMenu();" } }, { "_icon": "item", "text": "menuItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "menuItem", "icon": "menu", "plainIcon": "true", "cls": "w-home-tbtn" }, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true", "minWidth": "20em" }, "text": "menu", "_expanded": true, "_icon": "menu2", "events": { "show": "let menu = this;\nmenu.fontSize = Wb.configs.fontSize; //avoid menu font changes\nmenu.each(item => { item.refToolBtn && (item.disabled = item.refToolBtn.disabled) });\napp.topNavItem.checked = !!app.topNavBar?.visible;", "hide": "//Adapts the menu font to the current font\nthis.fontSize = null;" }, "items": [ { "_icon": "item", "text": "accountItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "accountItem", "icon": "user2", "text": "@app.accountName", "handler": "app.showMyAccount" } }, { "_icon": "divider", "text": "divider1", "cls": "Wb.Divider", "_expanded": true, "properties": { "cid": "divider1" } }, { "_icon": "item", "text": "saveDesktopItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "saveDesktopItem", "icon": "desktop", "text": "@Str.saveDesktop" }, "events": { "click": "app.saveDesktop();" } }, { "_icon": "item", "text": "resetDesktopItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "resetDesktopItem", "text": "@Str.resetDesktop", "icon": "undo" }, "events": { "click": "Wb.confirm(Str.doConfirm.format(Str.resetDesktop), f => {\n Wb.ajax({\n url: 'set-resource',\n params: { name: 'desktop' },\n success() {\n Wb.tipDone(Str.resetDesktop);\n }\n });\n});" } }, { "_icon": "item", "text": "saveAsDefaultDesktopItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "saveAsDefaultDesktopItem", "text": "@Str.saveAsDefaultDesktop", "visible": "_$setDefaultDesktop$_" }, "events": { "click": "Wb.confirm(Str.doConfirm.format(Str.saveAsDefaultDesktop), f => {\n app.saveDesktop(true);\n});" } }, { "_icon": "item", "text": "resetDefaultDesktopItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "resetDefaultDesktopItem", "text": "@Str.resetDefaultDesktop", "visible": "_$setDefaultDesktop$_" }, "events": { "click": "Wb.confirm(Str.doConfirm.format(Str.resetDefaultDesktop), f => {\n Wb.ajax({\n url: 'set-resource-all',\n params: { name: 'desktop', userid: 'system' },\n success() {\n Wb.tipDone(Str.resetDesktop);\n }\n });\n});" } }, { "_icon": "divider", "text": "divider2", "cls": "Wb.Divider", "_expanded": true, "properties": { "cid": "divider2" } }, { "_icon": "item", "text": "uiThemeItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "uiThemeItem", "text": "@Str.uiTheme", "icon": "color" }, "items": [ { "cls": "Wb.Menu", "properties": { "cid": "menu", "isProperty": "true", "tagProperties": "({ items: _$themeItems$_ })" }, "text": "menu", "_expanded": true, "_icon": "menu2", "events": { "menuclick": "let theme = item.theme;\n\nif (theme == '?') {\n window.open('https://www.geejing.com/buy');\n return;\n}\nif (theme == app.theme)\n return;\nlet setTheme = f => {\n let link = Wb.headEl.query('[href*=\"-wb.css\"]');\n\n app.theme = theme;\n if (link) {\n let newLink = document.createElement('link');\n newLink.rel = 'stylesheet';\n newLink.href = link.href.substr(0, link.href.lastIndexOf('/') + 1) + theme + '-wb.css';\n newLink.onload = f => {\n link.remove();\n Wb.initCssVar();\n Wb.CodeEditor?.initTheme(true);\n };\n Wb.headEl.insertBefore(newLink, link);\n app.viewport1.setCls(theme != 'dark', 'w-dark-home');\n } else {\n Wb.tipError(Str.notFound.format(Str.uiTheme));\n }\n};\nif (app.isDemo)\n setTheme();\nelse\n Wb.ajax({\n url: 'set-value',\n params: { name: 'sys.theme', value: theme },\n success: setTheme\n });" } } ] }, { "_icon": "divider", "text": "divider3", "cls": "Wb.Divider", "_expanded": true, "properties": { "cid": "divider3" } }, { "_icon": "container", "text": "container1", "cls": "Wb.Container", "properties": { "cid": "container1", "layout": "row", "gap": ".2em" }, "_expanded": true, "items": [ { "_icon": "slidebar", "text": "fsSlider", "cls": "Wb.Slider", "properties": { "cid": "fsSlider", "text": "@Str.fontSize", "maxValue": "50", "flex": "1", "minValue": "12", "value": "@Wb.configs.fontSize", "tabIndex": "null", "focusable": "false" }, "_expanded": true, "events": { "change": "Wb.setFontSize(value);", "enddrag": "if (!app.isDemo) {\n Wb.ajax({\n url: 'set-value',\n params: { name: 'sys.fontSize', value: value }\n });\n}" } }, { "_icon": "button", "text": "resetBtn", "cls": "Wb.Button", "properties": { "cid": "resetBtn", "tip": "@Str.reset", "icon": "refresh", "type": "tool", "tabIndex": "undefined", "focusable": "false" }, "events": { "click": "let resetSize = f => {\n let fs = Wb.configs.rawFontSize;\n Wb.setFontSize(fs);\n app.fsSlider.value = fs;\n app.menuItem.menu.hide();\n};\nif (app.isDemo)\n resetSize();\nelse\n Wb.ajax({\n url: 'set-value',\n params: { name: 'sys.fontSize' },\n success: resetSize\n });" } } ] }, { "_icon": "divider", "text": "divider4", "cls": "Wb.Divider", "_expanded": true, "properties": { "cid": "divider4" } }, { "_icon": "item", "text": "topNavItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "topNavItem", "text": "@Str.topNavBar", "checked": "false" }, "events": { "click": "if (this.checked)\n app.restoreTreeNav();\nelse\n app.createTopNavBar();" } }, { "_icon": "item", "text": "refreshListItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "refreshListItem", "icon": "list-view", "text": "@Str.refreshList" }, "events": { "click": "if (app.topNavBar) {\n app.moduleTree.load({\n success() {\n app.topNavBar.destroy();\n app.createTopNavBar();\n }\n });\n} else {\n app.moduleTree.loadSelect();\n}" } }, { "_icon": "divider", "text": "divider5", "cls": "Wb.Divider", "properties": { "cid": "divider5" }, "_expanded": true }, { "_icon": "item", "text": "logoutItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "logoutItem", "icon": "logout", "text": "@Str.logout", "keys": "Ctrl+Shift+L" }, "events": { "click": "Wb.ajax('logout');" } } ] } ] } ] }, { "_icon": "tree-view", "text": "moduleTree", "cls": "Wb.Tree", "_expanded": true, "properties": { "cid": "moduleTree", "width": "_$treeWidth$_", "url": "@xpath + '/get-modules-tree'", "autoLoad": "false", "visible": "_$treeVisible$_", "data": "_$moduleTree$_", "rightExpander": "true", "treeStyle": "menu", "dblclickExpand": "false", "autoPostParams": "false" }, "events": { "beforeload": "let node = configs.node;\n\nif (node)\n params.path = node.data.path;", "itemclick": "if (item.leaf)\n app.doOpenModule(item.data);\nelse\n item.toggleExpand();\nitem.contentEl.rippleEffect(e.x, e.y);" }, "items": [ { "_icon": "combo", "text": "bbar", "cls": "Wb.Select", "properties": { "cid": "bbar", "isProperty": "true", "url": "@xpath + '/search-modules'", "icon": "search" }, "events": { "select": "app.doOpenModule(data);" } } ] }, { "_icon": "splitter", "text": "treeSplitter", "cls": "Wb.Splitter", "properties": { "cid": "treeSplitter", "enterShowTarget": "true" } }, { "_icon": "tab", "text": "moduleTab", "cls": "Wb.Tab", "_expanded": true, "properties": { "cid": "moduleTab", "flex": "1", "mainTab": "true", "tabMenu": "true", "activeIndex": "undefined", "useHash": "touch" }, "events": { "ready": "this.tabBar.mon('dblclick', e => {\n let card = e.target.getClosestComp(Wb.TabButton)?.card;\n if (card?.allowRefresh) {\n Wb.openWin(Wb.apply({ url: card.moduleUrl }, card.tags));\n e.stopEvent();\n }\n});", "cardchange": "app.refreshItem.disabled = !newCard?.allowRefresh;\nif (newCard?.prepend) {\n let tags = newCard.tags, configs;\n\n configs = {\n url: newCard.moduleUrl, tabMode: 'reload', container: newCard, allowRefresh: true,\n icon: newCard.icon, img: newCard.img, title: newCard.title\n };\n if (tags) {\n //tags use to refresh\n configs.tags ??= {};\n configs.tags.tags = tags;\n Wb.apply(configs, tags);\n }\n Wb.open(configs);\n delete newCard.prepend;\n}\nif (app.linkItem.active)\n app.linkToMenu(newCard);" }, "items": [ { "_icon": "file-json", "text": "script1", "cls": "Wb.Script", "properties": { "cid": "script1", "script": "_$moduleItems$_" } } ] } ] } ] } # sys/portal/index.xwl Title: index Description: Default index page ```json { "title": "", "icon": "", "img": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "loginRequired": "false", "title": "_$title$_", "serverScript": "Wb.set({\n title: Wb.getConfig('sys.app.title'),\n verifyCode: Wb.getConfig('sys.session.verifyCode'),\n showTip: !Config.isDemo && !!Wb.getRecord(\"select 1 from wb_user where user_name='admin' and login_times=0\")\n});", "remark": "Default index page", "theme": "true" }, "_icon": "module", "_expanded": true, "tags": "{url: 'index', newWin: true}", "events": { "finalize": "app.panel1.setLoginFocus();" }, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "middle", "autoScroll": "true", "border": "false", "bodyStyle": "background-color:#959595;background-image: repeating-linear-gradient(40deg,rgba(0,0,255,0.2) 2px,transparent 2.5px),repeating-linear-gradient(126deg,rgba(255,0,0,0.2) 2px,transparent 2.5px),repeating-linear-gradient(238deg,rgba(0,255,0,0.2) 2px,transparent 2.5px);" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true", "padding": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "logo", "text": "logoIcon", "cls": "Wb.Icon", "properties": { "cid": "logoIcon", "icon": "geejing", "fontSize": "3em" } }, { "_icon": "label", "text": "titleLabel", "cls": "Wb.Label", "properties": { "cid": "titleLabel", "text": "_$title$_", "style": "font-weight: bold; color: #333;", "fontSize": "2em" }, "_expanded": true }, { "_icon": "right1", "text": "fill1", "cls": "Wb.Fill", "properties": { "cid": "fill1", "visible": "@!Globals.smallScreen" } }, { "_icon": "item", "text": "websiteItem", "cls": "Wb.Item", "_expanded": true, "properties": { "cid": "websiteItem", "icon": "earth", "fontSize": "1.5em", "plainIcon": "true", "tip": "@Str.officialWebsite", "visible": "@!Globals.smallScreen" }, "events": { "click": "window.open('https://www.geejing.com');" } }, { "_icon": "space", "text": "space1", "cls": "Wb.Space", "properties": { "cid": "space1", "visible": "@!Globals.smallScreen" } }, { "_icon": "item", "text": "emailItem", "cls": "Wb.Item", "_expanded": false, "properties": { "cid": "emailItem", "icon": "mail", "fontSize": "1.5em", "plainIcon": "true", "tip": "@Str.email", "visible": "@!Globals.smallScreen" }, "events": { "click": "window.location = 'mailto:contact@geejing.com';" } } ] }, { "_icon": "panel", "text": "panel1", "cls": "Wb.Panel", "properties": { "cid": "panel1", "style": "box-shadow:#00000055 0px 2px 10px 5px", "cls": "w-limit-width" }, "_expanded": true, "events": { "ready": "let form = Wb.createLoginPanel(this, f => location.replace('home'), false, _$verifyCode$_);\nif (_$showTip$_)\n form.add({ cname: 'displayField', icon: 'info', value: Str.firstLoginTip });" } }, { "cls": "Wb.Toolbar", "properties": { "cid": "bbar", "isProperty": "true", "padding": "true", "layout": "hmiddle" }, "text": "bbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "label", "text": "copyrightLabel", "cls": "Wb.Label", "properties": { "cid": "copyrightLabel", "text": "Copyright © Geejing, All Rights Reserved.", "style": "color:#555", "fontSize": ".8em" } } ] } ] } ] } # sys/portal/reset-passwords/reset.xwl Title: reset Description: Reset passwords for all users ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n Wb.sql({\n sql: 'update wb_user set password={?pwd?}, login_times=2',\n params: {\n pwd: Wb.UserUtil.encryptPassword(Params.password)\n }\n });\n}\nmain();", "remark": "Reset passwords for all users" }, "_icon": "module" } # sys/portal/reset-passwords.xwl Title: reset-passwords Description: Prompt to reset all users password ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Prompt to reset all users password" }, "_icon": "module", "_expanded": true, "items": [ { "_icon": "window", "text": "main", "cls": "Wb.Window", "_expanded": true, "properties": { "cid": "main", "layout": "grid1", "visible": "true", "dialog": "true", "title": "@Str.resetPassword", "icon": "key", "closeAction": "destroy" }, "events": { "ok": "if (app.password.value != app.repassword.value) {\n Wb.tipError(Str.pwdNotSame);\n app.password.focus();\n return;\n}\nWb.ajax({\n url: xpath + '/reset',\n comps: app.password,\n success: f => {\n this.close();\n }\n});" }, "items": [ { "_icon": "label1", "text": "hint", "cls": "Wb.DisplayField", "properties": { "cid": "hint", "icon": "info", "value": "@Str.resetPwdHint" } }, { "_icon": "text", "text": "password", "cls": "Wb.Text", "properties": { "cid": "password", "password": "true", "text": "@Str.password", "required": "true", "minLength": "6" }, "_expanded": true }, { "_icon": "text", "text": "repassword", "cls": "Wb.Text", "properties": { "cid": "repassword", "password": "true", "text": "@Str.confirmPassword", "required": "true", "minLength": "6" } } ] } ] } # sys/service/data/export.xwl Title: export Description: Export accessible data ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Export accessible data", "serverScript": "/**\n * Export the specified data to the client file. @priv\n * @param {Object} params The export params.\n * @param {String} [.columns] The data columns.\n * @param {String} [.filename] The filename.\n * @param {String} [.format] The file format, such as \"xls\", \"xlsx\", \"csv\".\n * @param {String} [.data] The local data to be exported.\n * @param {String} [.url] URL used to get remote data.\n * @param {String} [.itemsPath] The items path for the remote data. Default is \"item\".\n * @param {String} [.params] Parameters submitted using URL.\n * @param {String} [.allPages] Whether to export all pages.\n * @param {String} [.freeze] Freeze column index.\n * @param {String} [.localUrl] Access url in the current server.\n * @param {String} [.tree] Whether is tree.\n * @param {String} [.urlParams] The params for the localUrl.\n * @param {String} [.title] The title of the grid.\n * @param {String} [.pageSize] Page size of the grid.\n * @param {String} [.pageIndex] Page index of the grid.\n * @param {String} [.fromValue] From record index of the grid.\n * @param {String} [.toValue] To record index of the grid.\n * @param {String} [.summaryRow] Summary row data.\n */\nfunction doExport(params) {\n let columns, data, format, gridLine, outputStream, isTree = Wb.parseBool(params.tree),\n itemsName = Params.itemsName, itemsPath = params.itemsPath;\n\n columns = new JSONArray(params.columns);\n data = params.data;\n if (data) {\n data = new JSONArray(data);\n data = isTree ? flattenItems(data, itemsName) : new JSONArray(data);\n } else {\n let p1, p2, allPages = Wb.parseBool(params.allPages), localUrl = params.localUrl, indexName = params.pageIndexName,\n paramsValue = Wb.decode(params.params ?? null), maxRows = Wb.getConfig(\"sys.office.exportMaxRows\"),\n fromValue, toValue, pageSizeValue, indexValue, sortValue = params.sortValue;\n\n if (allPages) {\n fromValue = 0;\n toValue = maxRows;\n pageSizeValue = maxRows;\n indexValue = 0;\n } else {\n fromValue = parseInt(params.fromValue);\n toValue = Math.min(parseInt(params.toValue), maxRows);\n pageSizeValue = Math.min(parseInt(params.pageSize), maxRows);\n indexValue = parseInt(params.pageIndex);\n }\n paramsValue[params.fromName] = fromValue;\n paramsValue[params.toName] = toValue;\n paramsValue[params.pageSizeName] = pageSizeValue;\n if (indexName)\n paramsValue[indexName] = indexValue;\n if (sortValue)\n paramsValue[params.sortName] = sortValue;\n if (localUrl) {\n localUrl = Xwl.getXwlPath(localUrl);\n if (localUrl) {\n Wb.permitx(localUrl);\n try {\n if (allPages)\n Context.maxRows = maxRows;\n data = Wb.execute(localUrl, Wb.apply({}, Wb.decode(params.urlParams ?? null), paramsValue));\n } finally {\n if (allPages)\n Context.maxRows = undefined;\n }\n }\n }\n if (!data) {\n data = Wb.submit({ url: params.url, request, text: true, silent: true, all: true, params: paramsValue });\n if (data.code != 200) {\n if (data.code == 401) {\n response.setStatus(401);\n Wb.send(data.result);\n return;\n } else {\n Wb.raise(data.result);\n }\n }\n data = data.result;\n }\n p1 = data.indexOf(\"{\");\n p2 = data.indexOf(\"[\");\n if (p2 != -1 && (p2 < p1 || p1 == -1)) {\n data = isTree ? flattenItems(data, itemsName) : new JSONArray(data);\n } else {\n data = isTree ? flattenItems(data, itemsName, itemsPath) : JsonUtil.findObject(new JSONObject(data), itemsPath);\n }\n }\n format = params.format ?? 'xlsx';\n Wb.setContentType((params.filename || 'data') + '.' + format, true);\n gridLine = Wb.getConfig('sys.office.gridBorderLine');\n if (gridLine == 'auto')\n gridLine = params.gridLine;\n if (params.summary)\n data.put(new JSONObject(params.summary));\n outputStream = response.getOutputStream();\n format = format.toLowerCase();\n if (format.startsWith('xls'))\n Java.type('com.wb.office.SheetWriter').createExcel(outputStream, columns, data,\n Wb.getInt('freeze') ?? 0, params.title, gridLine);\n else\n exportCSV(outputStream, columns, data);\n response.flushBuffer();\n}\n/**\n * Flatten all tree items. @priv\n * @param {String} data The tree text data.\n * @param {String} itemsName Items property name.\n * @param {String} itemsPath Items data path.\n * @return {JSONArray} Flattened items array;\n */\nfunction flattenItems(data, itemsName, itemsPath) {\n data = Wb.decode(data);\n if (itemsPath)\n data = Wb.getNS(itemsPath, data);\n return new JSONArray(Java.to(Wb.flatItems(data, true, itemsName)));\n}\n\n/**\n * Export data to csv file.\n * @param {OutputStream} os Output stream.\n * @param {Array} columns Columns data.\n * @param {Array} data Rows data.\n */\nfunction exportCSV(outputStream, columns, data) {\n const encodeCSV = StringUtil.encodeCSV;\n let i, j, row, val, pos, addComma, fields = [], isDate = [], writer;\n\n writer = new java.io.BufferedWriter(\n new java.io.OutputStreamWriter(outputStream, Wb.getConfig('sys.file.csvCharset') || Base.osCharset));\n columns = Wb.toJs(columns);\n Wb.cascade(columns, col => {\n if (!col.items) {\n if (addComma)\n writer.write(',');\n else\n addComma = true;\n writer.write(encodeCSV(col.text));\n fields.push(col.fieldName + (col.keyValue ? '$' : ''));\n isDate.push(col.fieldType == 0);\n }\n });\n j = data.length();\n for (i = 0; i < j; i++) {\n writer.write('\\n');\n row = data.opt(i);\n fields.forEach((field, k) => {\n if (k > 0)\n writer.write(',');\n val = row.optString(field);\n if (val && isDate[k]) {\n pos = val.lastIndexOf('.');\n if (pos != -1)\n val = val.substr(0, pos);\n }\n writer.write(encodeCSV(val));\n });\n }\n writer.close();\n}\n\ndoExport(Params);" }, "_icon": "module", "_expanded": true } # sys/service/data/get-dict.xwl Title: get-dict Description: Get dictionary data ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "let actions = {\n /**\n * Gets a list of dictionary entries.\n * @return {Array} A list of dictionary entries.\n */\n getItems() {\n let items = Params.items, maxRows = Config.maxRows, result, dictItem;\n\n //max 1000 items\n if (items.length > maxRows)\n Wb.raise('The dictionary only allows ' + maxRows + ' items to be returned.');\n result = [];\n items.forEach(item => {\n dictItem = DictCls.findItem(item);\n if (!dictItem)\n Wb.raise(`The dictionary item \"${item}\" not found.`);\n if (!dictItem.displayHidden)\n dictItem.displayHidden = undefined;\n if (!dictItem.editFill)\n dictItem.editFill = undefined;\n if (!dictItem.editHidden)\n dictItem.editHidden = undefined;\n result.push(Wb.applyValue({}, dictItem));\n });\n Wb.send(result);\n },\n /**\n * Gets a list of dictionary groups.\n * @return {Array} A list of dictionary groups.\n */\n getGroups() {\n let sql, result = [];\n\n sql = 'select distinct group_name from wb_dict';\n if (Params.query) {\n Wb.setLike('query');\n sql += ' where group_name like {?query?}';\n }\n else {\n result.push('true');\n }\n sql += ' order by group_name';\n result.pushAll(Wb.getRecords(sql).pluck(0));\n Wb.send(result);\n }\n};\nactions[Params.xaction]();", "remark": "Get dictionary data" }, "_icon": "module" } # sys/service/data/get-kv.xwl Title: get-kv Description: Get key value list ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n switch (Params.type) {\n case 'list':\n Wb.send(Wb.ServerDict.getKVList(Params.name));\n break;\n case 'names':\n Wb.send(Wb.ServerDict.getKeyNames(Params.query));\n break;\n }\n}\nmain();", "remark": "Get key value list" }, "_icon": "module" } # sys/service/db/sql-provider.xwl Title: sql-provider Description: Provide SQL completion items ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "function main() {\n const Util = Wb.load('wb/ss/dbe.mjs');\n let result = [], tableName, schemaName, object, sql = Wb.decodeBase64(Params.data).toLowerCase(),\n conn = Wb.getConn(Params.db), keysLen, keys, realName, key = Params.key.toLowerCase(),\n defaultSchema = conn.schema, schemas = Util.getSchemas(conn),\n defaultTables = Util.getTables(conn, defaultSchema).concat(Util.getTables(conn, defaultSchema, true));\n\n keys = key.split('.');\n keysLen = keys.length;\n key = keys[0];\n if (keysLen == 1) {\n [schemas, defaultTables].forEach(type => addItems(result, type, key, 'Unit'));\n tableName = getTablesFromSQL(sql);\n tableName.forEach(item => {\n if (item.includes('.')) {\n keys = item.split('.');\n if (object = schemas.find(item => item.text.toLowerCase() == keys[0])) {\n schemaName = object.text;\n if (object = Util.getTables(conn, schemaName).concat(Util.getTables(conn, schemaName, true)).find(\n item => item.text.toLowerCase() == keys[1])) {\n addItems(result, Util.getColumns(conn, schemaName, object.text), null, 'Field');\n }\n }\n } else if (object = defaultTables.find(sub => sub.text.toLowerCase() == item)) {\n addItems(result, Util.getColumns(conn, defaultSchema, object.text), null, 'Field');\n }\n });\n } else {\n if (object = schemas.find(item => item.text.toLowerCase() == key)) {\n // schema\n schemaName = object.text;\n [false, true].forEach(isView => addItems(result, Util.getTables(conn, schemaName, isView), null, 'Unit'));\n } else {\n object = defaultTables.find(item => item.text.toLowerCase() == key);\n if (object) {\n // table\n schemaName = defaultSchema;\n tableName = object.text;\n } else {\n // scan alias\n keys = sql.split(/\\s+|,/).filter(k => k);\n keys.each((item, i) => {\n if (i > 0 && item == key) {\n realName = keys[i - 1];\n if (realName.includes('.')) {\n // schema and table name\n keys = realName.split('.');\n if (Wb.isIdentifier(keys[0]) && (object = schemas.find(item => item.text.toLowerCase() == keys[0]))) {\n schemaName = object.text;\n if (Wb.isIdentifier(keys[1]) && (\n object = Util.getTables(conn, schemaName).concat(Util.getTables(conn, schemaName, true)).find(\n item => item.text.toLowerCase() == keys[1]))) {\n tableName = object.text;\n return false;\n }\n }\n } else {\n // single table name\n object = Wb.isIdentifier(realName) && defaultTables.find(item => item.text.toLowerCase() == realName);\n if (object) {\n schemaName = defaultSchema;\n tableName = object.text;\n return false;\n }\n }\n }\n });\n }\n if (tableName) {\n addItems(result, Util.getColumns(conn, schemaName, tableName), null, 'Field');\n }\n }\n }\n Wb.send(result);\n}\n\n// add the specified data items to the result\nfunction addItems(result, data, key, cate) {\n let text;\n data.forEach(item => {\n text = item.text;\n if ((!key || text.toLowerCase().includes(key)) && !result.some(item => item.text == text)) {\n result.push({ text, cate });\n }\n });\n}\n\n// get table names from sql\nfunction getTablesFromSQL(sql) {\n const regex = /(?:FROM|JOIN|INTO|UPDATE|DELETE)\\s+([^\\s,\\)]+)/gi;\n const tableNames = [];\n let match;\n\n while ((match = regex.exec(sql))) {\n tableNames.push(match[1]);\n }\n return tableNames;\n}\nmain();", "remark": "Provide SQL completion items" }, "_icon": "module" } # sys/service/site/check-update.xwl Title: check-update Description: Check update ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "try {\n if (!Params.wbv2)\n return;\n let result, rec, params, key = 'f32AdGi8';\n params = Wb.decode(Encrypter.decrypt(Params.license, key));\n params.ip = request.getRemoteAddr();\n params.joinValue = (params.ip || '') + (params.user_name || '') + (params.computer_name || '');\n Wb.set(params);\n try {\n Wb.set({ date: new Date(), sid: Wb.getId() });\n Wb.sql('insert into wb_update values({?sid?},{?date?},{?ip?},{?user_name?},{?mac?},{?computer_name?},{?user_domain?},{?os_name?},{?app_title?},{?licensee?},{?sn?})');\n } catch (e) {\n }\n rec = Wb.getRecord('select script from wb_mac where mac={?mac?} or mac={?joinValue?}');\n result = rec?.[0] || '';\n if (result)\n result = Encrypter.encrypt(result, key);\n Wb.send(result);\n} catch (ex) {\n}", "loginRequired": "false", "remark": "Check update" }, "_icon": "module" } # sys/service/site/get-version.xwl Title: get-version Description: Get system version ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Get system version", "serverScript": "Wb.send(Wb.getConfig('sys.app.version'));", "loginRequired": "false" }, "_icon": "module" } # sys/session/login.xwl Title: Login Description: Login page ```json { "title": "@login", "icon": "", "img": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "loginRequired": "false", "remark": "Login page", "serverScript": "Wb.set({\n title: Wb.getConfig('sys.app.title'),\n verifyCode: Wb.getConfig('sys.session.verifyCode')\n});", "theme": "true" }, "_icon": "module", "_expanded": true, "tags": "", "events": { "finalize": "app.panel1.setLoginFocus();" }, "items": [ { "_icon": "viewport", "text": "viewport1", "cls": "Wb.Viewport", "properties": { "cid": "viewport1", "layout": "middle", "autoScroll": "true", "border": "false", "bodyStyle": "background-color:#959595;background-image: repeating-linear-gradient(40deg,rgba(0,0,255,0.2) 2px,transparent 2.5px),repeating-linear-gradient(126deg,rgba(255,0,0,0.2) 2px,transparent 2.5px),repeating-linear-gradient(238deg,rgba(0,255,0,0.2) 2px,transparent 2.5px);" }, "_expanded": true, "items": [ { "cls": "Wb.Toolbar", "properties": { "cid": "tbar", "isProperty": "true", "padding": "true" }, "text": "tbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "logo", "text": "logoIcon", "cls": "Wb.Icon", "properties": { "cid": "logoIcon", "icon": "geejing", "fontSize": "3em" } }, { "_icon": "label", "text": "titleLabel", "cls": "Wb.Label", "properties": { "cid": "titleLabel", "text": "_$title$_", "style": "font-weight: bold; color: #333;", "fontSize": "2em" }, "_expanded": true } ] }, { "_icon": "panel", "text": "panel1", "cls": "Wb.Panel", "properties": { "cid": "panel1", "style": "box-shadow:#00000055 0px 2px 10px 5px", "cls": "w-limit-width" }, "_expanded": true, "events": { "ready": "Wb.createLoginPanel(this, f => location.reload(), false, _$verifyCode$_);" } }, { "cls": "Wb.Toolbar", "properties": { "cid": "bbar", "isProperty": "true", "padding": "true", "justify": "center" }, "text": "bbar", "_expanded": true, "_icon": "toolbar", "items": [ { "_icon": "label", "text": "copyrightLabel", "cls": "Wb.Label", "properties": { "cid": "copyrightLabel", "text": "Copyright © Geejing, All Rights Reserved.", "style": "color:#555", "fontSize": ".8em" } } ] } ] } ] } # sys/session/logout.xwl Title: Logout Description: Login request ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "request.getSession(false)?.invalidate();", "loginRequired": "false", "remark": "Login request" }, "_icon": "module", "title": "@logout", "icon": "", "img": "", "hideInMenu": "false", "tags": "" } # sys/session/refresh.xwl Title: refresh Description: Refresh current http session ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "remark": "Refresh current http session" }, "_icon": "module", "items": [] } # sys/session/service.xwl Title: service Description: Session service without login ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "if (!Params.xaction)\n return;\nlet actions = {\n /**\n * Create captcha image.\n */\n captcha() {\n const CaptchaGenerator = Java.type('com.wb.tool.CaptchaGenerator');\n const ImageIO = Java.type('javax.imageio.ImageIO');\n const charCount = 4;\n const fontSize = Math.min(parseInt(Params.fontSize) || 20, 80);\n let captcha, image, code, session;\n\n captcha = new CaptchaGenerator(Math.round(fontSize * 1.1 * charCount * 1.2), Math.round(fontSize * 1.5), charCount, 9);\n image = captcha.getImage();\n code = captcha.getCode();\n session = request.getSession();\n session.setAttribute('sys.verifyCode', code);\n response.setContentType('image/jpeg');\n response.setHeader('Pragma', 'no-cache');\n response.setHeader('Cache-Control', 'no-cache');\n response.setDateHeader('Expires', 0);\n ImageIO.write(image, 'png', response.getOutputStream());\n },\n /**\n * Monitoring websocket open and close for auto logout.\n */\n monWebsocket() {\n if (Wb.getConfig('sys.session.autoLogout') && WebUtil.isLogined(httpSession)) {\n const timerName = 'sys.logoutTimer';\n if (event == 'open') {\n httpSession.getAttribute(timerName)?.cancel(false);\n httpSession.removeAttribute(timerName);\n } else if (event == 'close' && !httpSession.getAttribute(timerName)) {\n let timer, map;\n\n map = Sessions.getWSMap(httpSession);\n if (map == null || map.size() < 2) {\n // Only this socket exists, which means need to logout.\n timer = Wb.setTimeout(f => {\n let session = params.session;\n session.removeAttribute('sys.logoutTimer');\n session.invalidate();\n }, 10000, { session: httpSession });\n httpSession.setAttribute(timerName, timer);\n }\n }\n }\n }\n};\nactions[Params.xaction]();", "loginRequired": "false", "remark": "Session service without login" }, "_icon": "module", "title": "", "icon": "", "img": "", "hideInMenu": "false", "tags": "" } # sys/session/set-resource-all.xwl Title: set-resource-all Description: Set all users resource ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "app.userid = Params.userid;\nWb.run('set-resource');", "remark": "Set all users resource" }, "_icon": "module", "icon": "", "img": "", "tags": "", "title": "", "hideInMenu": "false", "_expanded": true } # sys/session/set-resource.xwl Title: set-resource Description: Set current user resource ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "/**\n * Store big data to database.\n * @param {String} name value name.\n * @param {String} value stored value, empty value will clear the value.\n * @param {String} [type] value type:\n * -'object': represent a object or array value.\n * -'string': represent a string value, default.\n * -[other type]: auto detect.\n */\nfunction setResource() {\n let { name, value, type } = Params;\n\n if (value) {\n if (value.stream instanceof InputStream)\n value = value.stream;\n else if (type == 'object')\n type = 1;\n } else {\n value = null;\n }\n Wb.setResource(name, value, app.userid, type);\n}\nsetResource();", "remark": "Set current user resource" }, "_icon": "module", "icon": "", "img": "", "tags": "", "title": "", "hideInMenu": "false" } # sys/session/set-value-all.xwl Title: set-value-all Description: Set all users value ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "app.userid = Params.userid;\nWb.run('set-value');", "remark": "Set all users value" }, "_icon": "module", "icon": "", "img": "", "tags": "", "title": "", "hideInMenu": "false" } # sys/session/set-value.xwl Title: set-value Description: Set current user value ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "/**\n * Store short value to database\n * @param {String} name value name.\n * @param {String} value stored value, empty value will clear the value.\n * @param {String} [type] value type:\n * -'number': represent a number value.\n * -'date': represent a date value.\n * -'bool': represent a boolean value.\n * -'string': represent a string value, default.\n */\nfunction setValue() {\n //allowed names when starts with \"sys.\"\n const allowSysNames = ['sys.theme', 'sys.fontSize'];\n let { name, value, type } = Params, isSysName, session;\n\n isSysName = name.startsWith('sys.');\n if (isSysName && !allowSysNames.includes(name))\n Wb.accessDenied();\n if (value) {\n /* type: 0 string, 1 number, 2 date, 3 bool */\n switch (type) {\n case 'number':\n type = 1;\n break;\n case 'date':\n type = 2\n break;\n case 'bool':\n type = 3\n break;\n }\n } else {\n value = null;\n }\n Wb.setValue(name, value, app.userid, type);\n if (isSysName) {\n //System variables are added to the session attributes\n session = request.getSession();\n if (value == null)\n session.removeAttribute(name);\n else\n session.setAttribute(name, value);\n }\n}\nsetValue();", "remark": "Set current user value" }, "_icon": "module", "icon": "", "img": "", "tags": "", "title": "", "hideInMenu": "false" } # sys/session/verify.xwl Title: verify Description: Verify user account and login to system ```json { "text": "module", "cls": "Wb.Module", "properties": { "cid": "module", "serverScript": "/**\n * Verify the user name and password, the session will be created after success. @priv\n */\nfunction main() {\n try {\n Wb.UserUtil.login(Params.username, Params.password, Params.verifyCode);\n if (WebUtil.fromAjax(request))\n Wb.send([Wb.username, Wb.dispname]);\n else\n response.sendRedirect('home');\n } catch (e) {\n if (e instanceof Java.type('java.lang.IllegalStateException'))\n Wb.raise(Str.exceedUsersLimit);\n else\n Wb.raise(e);\n }\n}\nmain();", "loginRequired": "false", "remark": "Verify user account and login to system" }, "_icon": "module", "title": "", "icon": "", "img": "", "hideInMenu": "false" } # test1.xwl Title: test1 ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true } # test2.xwl Title: test2 ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module", "_expanded": true } # test3.xwl Title: test3 ```json { "title": "", "icon": "", "img": "", "tags": "", "hideInMenu": "false", "text": "module", "cls": "Wb.Module", "properties": { "cid": "module" }, "_icon": "module" }

\n \n	WebBuilder _$type$_, Date: _$date$_
Version:\n _$version$_\n ( Detecting new version...)\n
_$lic$_
Powerful rapid application development and runtime platform
Server Code: _$serverCode$_
\n \n

\n \n	WebBuilder _$type$_，发布日期：_$date$_
\n 版本：_$version$_\n （正在检测新版本...）\n
_$lic$_
强大的快速应用开发和运行平台
服务器编号：_$serverCode$_
\n \n

About WebBuilder

Buy WebBuilder

Development Team

System Requirements

The Third Party Software

关于 WebBuilder

购买 WebBuilder

开发人员

系统运行要求

第三方软件

text1	\n \n
number1	\n \n
date1	\n \n
Manual make	\n \n
Set Value	\n \n \n
Get Value	\n \n \n