\u22ee\u22ee\u22ee Template Checklist<\/span><\/h3>\nOnce opened, the file welcomes us with a rather short to-do-list. These points are to ensure a customized experience once your UI dApp , based on this template, gets installed and then launched. It takes you by hand through things\u00a0 like defining your app\u2019s Package ID, icon, title , contents of the main\u00a0Window<\/span>\u00a0and so on. It all takes two or three minutes if you have got all the values already in your head.<\/p>\n![\"\"](\"https:\/\/gridnet.org\/wpp\/wp-content\/uploads\/2022\/07\/checklist.png\")
There’s always some sort of a to-do-list is there not..<\/p><\/div>\n
\u22ee\u22ee\u22ee Imports Section<\/span><\/h3>\nScrolling further, right after the checklist we see a code section related to ‘imports’. \u22ee\u22ee\u22eeGRIDNET<\/span>\u00a0OS<\/span><\/strong> provides a variety of objects and APIs. First though, one needs to import the components that are about to be used. Just remember to use relative paths, starting from the root of the\u00a0\u22ee\u22ee\u22eeFile-System. <\/span>Make sure that the file paths begin with \u201c\/\u201c . That is important, since\u00a0 the\u00a0\u22ee\u22ee\u22eePackage Manager,<\/strong><\/span>\u00a0under the hood, it does some crazy cool stuff allowing for ECMA6 classes to be loaded from byte arrays, even before the files are committed onto the decentralized network. This in turn gives us the possibility to test how everything works in sandbox-mode, before proceeding to deployment.\u00a0Let us Flow!<\/em><\/span><\/p>\n![\"\"](\"https:\/\/gridnet.org\/wpp\/wp-content\/uploads\/2022\/07\/imports-1.png\")
The components one is about to use, these need to be imported first..<\/p><\/div>\n
Let us now go real quick over things that are being imported:<\/p>\n
\n- \u22ee\u22ee\u22ee CWindow –<\/span>\u00a0<\/strong>a class representing.. you’ve got it right! A Window! There are other classes covering \u00a0\u22ee\u22ee\u22eeThreads\u00a0<\/span>and\u00a0\u22ee\u22ee\u22eeProcesses<\/span>\u00a0as well, while\u00a0CWindow<\/span>\u00a0wraps these under the hood so you do not need to worry about any of the details while creating an simplistic app. Through\u00a0CWindow<\/span>\u00a0one may get and set a variety of properties and interact with your UI. Force the window to get resized, check its current size, disable min\/max icons apparent on the window\u2019s title-bar and so on. CWindow would take care of the default events\u2019 processing queue and spawn a single thread for you the very moment it is initialized. It would also make sure, by default, that the app appears at the\u00a0\u22ee\u22ee\u22eeTaskbar<\/span>\u00a0and that the previews of its contents are made available as its icon on the\u00a0\u22ee\u22ee\u22eeTaskbar<\/span>\u00a0hovered etc. Everything taken care of by the system.\u00a0<\/em><\/li>\n
- \u22ee\u22ee\u22eeCTools –<\/strong><\/span>\u00a0now you are to come to like this class. Data encoding, compression, type conversions, animations, instantiation of images from byte arrays etc. It is all right over there. A real Swiss Army Knife, waiting to be used, proper handling of exceptions assured.<\/li>\n
- CDataConcatenator –<\/span>\u00a0<\/strong>now that is a very low level utility. Basically, it allows for any object to be serialized into a decentralized-state-machine-compatible byte vector.<\/li>\n
- \u22ee\u22ee\u22eeCSettingsManager –<\/span><\/strong>\u00a0your app might want to offer persistent settings. This\u00a0\u22ee\u22ee\u22eeAPI<\/span>\u00a0would ensure that these settings are loaded with each and every launch of your application across user sessions. Everything events-driven. Just keep updating the ‘settings object’ within your app with new data and the system would be taking care of the rest. Ensuring the data is always up to date. easy peasy!<\/li>\n
- \u22ee\u22ee\u22eeCContentHandler –<\/span>\u00a0<\/strong>Are you creating an image editor? Your app might want to register, with the operating system,\u00a0 file-type handlers for say ‘.png’ and ‘.jpg’ file extensions. Then, once the user attempts to open\u00a0either\u00a0file-type, she would get to choose among the registered UI dApps.<\/li>\n
- \u22ee\u22ee\u22eeCNetMsg –<\/span> \u22ee\u22ee\u22eeGRIDNET<\/span>\u00a0OS<\/span><\/strong>\u00a0UI dApps support crypto-incentivized data exchange. Data might be taking a variety of paths. From one web-browser to another, data may be onion routed across peers, be\u00a0flowing<\/span>\u00a0<\/em>through multiple full-nodes comprising the GRIDNET network or be on its way straight to the user\u2019s mobile app. End-to-End encrypted at all times. At least by default. Because in the end, you are the developer. You get to choose. Anyhow,\u00a0 CNetMsg\u00a0is\u00a0an\u00a0envelope containing the payload.<\/li>\n
- \u22ee\u22ee\u22eeMetaData –<\/strong><\/span> \u22ee\u22ee\u22eeGRIDNET<\/span>\u00a0OS<\/span><\/strong> boards its own data-exchange meta-language, which is based on\u00a0BER (Basic Encoding Rules)<\/span>\u00a0binary encoding. Thanks to it, we get a\u00a0very efficient meta-language which is\u00a0 binary encoded. This stays\u00a0 in contrast with say XML or JSON; The language, it is well understood across all of the platforms involved: Web-browsers, full-nodes and mobile apps. It is also very storage efficient.\u00a0\u00a0There will be a separate article tackling this very topic.<\/em><\/li>\n<\/ul>\n
\u22ee\u22ee\u22ee Window Contents<\/span><\/h3>\nAs we scroll down, we get to define contents of a\u00a0\u22ee\u22ee\u22ee<\/strong>Window.<\/span>\u00a0The template supports loading data from another file or through the inline ‘appTemplateBody’ variable.<\/p>\nFor defining window contents feel free to use use technologies that you already well acquainted with meaning HTML and CSS;\u00a0 worry not about data-presentation boundaries or whether your CSS would affect another UI dApps, or the systems itself,\u00a0 as the\u00a0latter\u00a0assures proper compartmentation through the Shadow DOM technology now available in Chromium. You may choose to use additional files and import these for code-clarity. For the purposes of this tutorial, we would not be adding any additional UI components and leave the default style sheets as they are.<\/p>\n
![\"\"](\"https:\/\/gridnet.org\/wpp\/wp-content\/uploads\/2022\/07\/windowBody.png\")
<\/p>\n
\u22ee\u22ee\u22ee UI dApp’s Constructor<\/span><\/h3>\nAs has been already covered, your decentralized, graphical application inherits from CWindow. The constructor o the derived class. it is\u00a0its\u00a0main initialization point. Anything that needs to be set before the main window of your app is shown? Put it right over here. Otherwise, plug your logic into an appropriate event handler, fired once the window gets opened.<\/p>\n
Now, let us change the derived class’ name \u2018CUIAppTemplate\u2019 to something else. Simply replace\u00a0all\u00a0occurrences of \u2018CUIAppTemplate\u2019 with something more personal. Here, we will simply go with \u2018CMyHelloWorld\u2019.<\/p>\n
![\"\"](\"https:\/\/gridnet.org\/wpp\/wp-content\/uploads\/2022\/07\/constructor.png\")
Let us customize the application just a little bit..<\/p><\/div>\n
Notice how the app registers Callback Functions with some \u22ee\u22ee\u22eeGRIDNET<\/span>\u00a0OS<\/span><\/strong> APIs. First, it registers a Callback Function with the already mentioned\u00a0\u22ee\u22ee\u22eeMetaData<\/span>\u00a0sub-protocol. The sub-protocol is used for signaling. Thanks to it, we are able to\u00a0react\u00a0whenever anything of significance happens in the local environment, but also at another web-browser, at a full-node or at the user\u2019s mobile app.<\/p>\nGoing further, our app registers yet another Callback Function with the\u00a0\u22ee\u22ee\u22eeDecentralized File System API<\/span>. Also, another callback function goes to the\u00a0\u22ee\u22ee\u22eeGridScript<\/span>\u00a0processing API – so that our application is notified and thus, yet again, able react to results of\u00a0\u22ee\u22ee\u22eeGridScript<\/span>\u00a0code processing happening at full-nodes. Within the event handler, the app would then be able to check whether the event originated as a result of\u00a0\u22ee\u22ee\u22eeGridScript<\/span>\u00a0code-processing\u00a0\u00a0issued on on behalf of our application, or maybe the\u00a0code processing was requested by another\u00a0\u22ee\u22ee\u22eeUI dApp\u00a0<\/span>running within the system. This indeed gives as the ability of plugging right into logic of\u00a0external\u00a0applications.<\/p>\nHold your horses! We are to\u00a0be taking a closer look at implementations\u00a0of sample callback functions later on.<\/p>\n
Let us go back to personalizing our application further. Here in Atom, we simply hit CTRL+H and replaced\u00a0‘CUIAppTemplate’ with \u2018CMyHelloWorld\u2019. There were 17 occurrences. That was rather quick, was it not?<\/p>\n
![\"\"](\"https:\/\/gridnet.org\/wpp\/wp-content\/uploads\/2022\/07\/customized1.png\")
Looking better..more personal that is..<\/p><\/div>\n
As the former checklist commands,<\/strong><\/em> we shall now change the title of the application, which is shown within the title bar, once the UI dApp gets launched,- just as one would expect. Right?<\/em> <\/span>Let us proceed in accordance to its rulings.<\/strong><\/em><\/p>\n![\"\"](\"https:\/\/gridnet.org\/wpp\/wp-content\/uploads\/2022\/07\/constructor-1.png\")
The title may contain arbitry data and can be changed dynamically.<\/p><\/div>\n
We just changed the title to “My Hello World App”. Yet again –\u00a0easy.<\/p>\n
Note: you would be able to change title of your window during runtime, dynamically through the Window API.<\/p>\n
\u22ee\u22ee\u22ee File Handlers<\/span><\/h3>\nAs we scroll further, we\u00a0cross over a code section in which\u00a0File Handlers are being defined. The uncommented part of the section,- it establishes two file handlers. One\u00a0goes for\u00a0files containing arbitrary binary data (eDataType.bytes) and the other for unsigned integers (eDataType.unsignedInteger). These are called implicit file-type handlers, since they do not specify explicit file-type extensions.<\/p>\n
![\"\"](\"https:\/\/gridnet.org\/wpp\/wp-content\/uploads\/2022\/07\/filehandlers-2.png\")
Your application may register itself for particular file-types!<\/p><\/div>\n
Indeed, under the hood, each file on the\u00a0\u22ee\u22ee\u22eeDecentralized File System <\/span>is of a certain type, even if it does not come with an ‘extension’ after a dot in its name. Same as on MacOS X. One could also find similarities with the\u00a0Microsoft Windows\u2019 alternative data streams. By default, any user-created file\u00a0has a data type equal to\u00a0eDataType.bytes, meaning an arbitrary byte vector. The system does its best to toggle between the underlying file-type as needed. At the bottom of everything these represent types of nodes in a Merkle Patricia Trie. If the system detects a byte array to comprise a valid Big Integer it would change the file type to a more relevant etc.<\/p>\nHere, going back to our file, the commented-out section depicts how explicit file handlers could be defined, in this example, for *.jpg, *.png and *.webp file types respectively.<\/p>\n
Let us keep scrolling through the template file.<\/span><\/p>\n
![\"\"](\"https:\/\/gridnet.org\/wpp\/wp-content\/uploads\/2021\/05\/gridUser1.gif\")
<\/p>\n