Hackernoon logoLife Long Software System Maintainability — Part 2 — UI by@amrswalha

Life Long Software System Maintainability — Part 2 — UI

In the previous article, we looked at how we can export current data entities from the database and transform them into JSON or XML representation. This article will examine how to export our UI as JSON and XML so we can regenerate them later on if needed. In the next article we will discuss how we will export the UI as XML or JsonGenerator and how to use the new NuGet package so you can download and use the generator and download the new UI generator for the latest version of our software.
Amr Swalha Hacker Noon profile picture

Amr Swalha

Senior Developer

Part 1: https://medium.com/@amrswalha/lifelong-software-system-maintainability-part-1-7e0af04a179e
NuGet: https://www.nuget.org/packages/LifeLongSoftware/
GitHub: https://github.com/amr-swalha/llsoftware

In the previous article, we looked at how we can export current data entities from the database and transform them into JSON or XML representation so our software become framework independent and more portable.

In this article, we will examine how we can export our UI as JSON and XML so we can regenerate them later on if needed.

First, in the database you need to define the following tables:

_Page and _PageControls Tables

These tables are not included in the generation process and will not get an output. These table will have the definitions of the pages and the controls that included in them so we can export them as JSON and XML.

So starting in the _Page table and we define the page and it’s name. Next, we define the controls found inside the page in _PageControls. Remember that there is no specific type for the controls inside the page, you can set any type of controls (AngularJS Components, HTML, ASP.NET web forms controls, even desktop controls). You can define the control Name (Id) and the default value if any. Then, you can generate the needed JSON and XML for the pages as follow:

In C#, call in the following methods:

XmlGenerator xml = new XmlGenerator(connection);
JsonGenerator json = new JsonGenerator(connection);
json.GenerateUi(@“D:\UI.json”);
xml.GenerateUi(@”D:\UI.xml”);

XML

<pages>
 <page Name=”Home Page”>
 <control ControlName=”header” ControlType=”h1" />
 <control ControlName=”second” ControlType=”h2" />
 </page>
 <page Name=”SignUp”>
 <control ControlName=”header” ControlType=”h1" />
 <control ControlName=”username” ControlType=”input” />
 <control ControlName=”password” ControlType=”input” />
 </page>
</pages>

JSON

[{
 “Id”: 1,
 “PageName”: “Home Page”,
 “Controles”: [{
 “Id”: 1,
 “PageId”: 1,
 “ControlName”: “header”,
 “ControlType”: “h1”,
 “ControlValue”: “Main Page”
 }, {
 “Id”: 2,
 “PageId”: 1,
 “ControlName”: “second”,
 “ControlType”: “h2”,
 “ControlValue”: “Second Header”
 }]
}, {
 “Id”: 2,
 “PageName”: “SignUp”,
 “Controles”: [{
 “Id”: 3,
 “PageId”: 2,
 “ControlName”: “header”,
 “ControlType”: “h1”,
 “ControlValue”: “Signup”
 }, {
 “Id”: 4,
 “PageId”: 2,
 “ControlName”: “username”,
 “ControlType”: “input”,
 “ControlValue”: “username”
 }, {
 “Id”: 5,
 “PageId”: 2,
 “ControlName”: “password”,
 “ControlType”: “input”,
 “ControlValue”: “password”
 }]
}]

In your future project, you can just referee to the JSON or XML and regenerate the UI without any trouble or problems.

I’ve updated the source and the NuGet package so you can download and use the new UI generator.

In the next article, we will discuss how we can export business logic to JSON and XML.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.