iTools® Web Server, dalla versione 3.4.3.1 in poi, supporta l’integrazione con Polymer per lo sviluppo di applicazioni web. Mediante Polymer ed IWS e’ possibile creare componenti web in grado di gestire databinding, grafica personalizzata, template, gesture ed altro.
Il codice riportato sotto mostra come creare un gruppo di tag e pubblicarli nel web attraverso i componenti iTools®:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace IToolSWebServerAndPolymerComponents { using IToolS.Components.Communication; using IToolS.Components.IOServers; using IToolS.Components.Web; class Program { static void Main(string[] args) { IToolS.Components.ComponentBase.RaiseEventsOnMainThread = false; Variable variable1 = new Variable() { VariableName = "variable1", Address = "0" }; Variable variable2 = new Variable() { VariableName = "variable2", Address = "1" }; Variable variable3 = new Variable() { VariableName = "variable3", Address = "2" }; IOServer ioserver1 = new IOServer() { Name = "Simulation" }; Group group1 = new Group() { GroupName = "group1" }; group1.Add(variable1); group1.Add(variable2); group1.Add(variable3); Client client1 = new Client() { ClientName = "client1", Group = group1, IOServer = ioserver1 }; Clients clients = new Clients() { ClientsName = "clients" }; clients.Add(client1); WebClients webClients = new WebClients() { Clients = clients }; //IToolS Web Server - IWS webClients.Prefixes = new string[] { "http://*:17005/", "https://*:17443/" }; webClients.StartPublishIOServer = false; clients.Start(); webClients.Start(); Console.WriteLine("Press ENTER to exit"); Console.ReadLine(); } } } |
Per creare una semplice pagina web in grado di mostrare il valore dei tag pubblicati da IWS e’ possibile utilizzare i componenti Polymer implementati da IToolS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <script src="webcomponentsjs/webcomponents-loader.js"></script> <link href="DevExpress/dx.spa.css" rel="stylesheet" /> <link href="DevExpress/dx.common.css" rel="stylesheet" /> <link href="DevExpress/dx.light.css" rel="stylesheet" /> <link rel="import" href="Components/Polymer/repository-element.html"> <link rel="import" href="Components/Polymer/value-element.html"> <link rel="import" href="Components/Polymer/Paper/slider-element.html"> <link rel="import" href="Components/Polymer/Paper/input-element.html"> <link rel="import" href="Components/Polymer/Paper/button-element.html"> <link rel="import" href="Components/Polymer/Paper/checkbox-element.html"> <link rel="import" href="Components/Polymer/DevExpress/dx-element.html"> <link rel="import" href="Components/Polymer/DevExpress/dx-gauge-element.html"> <link rel="import" href="Components/Polymer/DevExpress/dx-tags-element.html"> <link rel="import" href="Components/Polymer/Security/security-element.html"> </head> <body> <div style="width:80%; margin:30px auto"> <security-element></security-element> <dx-element></dx-element> <repository-element name="repo1" update-time="100" tag-names='["group1_variable1", "group1_variable2"]'></repository-element> <repository-element name="repo2" update-time="2000" tag-names='["group1_variable3"]'></repository-element> <value-element repository-name="repo1" tag-name="group1_variable1" tag-description="tag group1_variable1" tag-read-only="false" ui-action="hide" roles='["lupo"]'></value-element> <slider-element repository-name="repo1" tag-name="group1_variable1" ui-action="disable" roles='["lupo"]'></slider-element> <input-element authorize="true" repository-name="repo1" tag-name="group1_variable2" ui-action="disable" roles='["lupo1"]'></input-element> <input-element repository-name="repo1" tag-name="group1_variable2"></input-element> <button-element toggles raised repository-name="repo2" tag-name="group1_variable3" on-value="10" off-value="50" ui-action="disable" roles='["lupo"]'>group1_variable3</button-element> <checkbox-element authorize="true" repository-name="repo2" tag-name="group1_variable3" on-value="4" off-value="20" ui-action="disable" roles='["lupo1"]'>group1_variable3</checkbox-element> <dx-gauge-element repository-name="repo1" tag-name="group1_variable1" title="my gauge1" ranges='[{ "startValue": 0, "endValue": 50 },{ "startValue": 50, "endValue": 80 },{ "startValue": 80, "endValue": 100 }]'></dx-gauge-element> <dx-gauge-element repository-name="repo1" tag-name="group1_variable2" title="my gauge2" ranges='[{ "startValue": 0, "endValue": 40 },{ "startValue": 40, "endValue": 70 },{ "startValue": 70, "endValue": 100 }]'></dx-gauge-element> <dx-tags-element group="group1"></dx-tags-element> </div> </body> </html> |
IToolSWebServerAndPolymerComponents.zip