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 independent and more portable. framework 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 project, you can just referee to the JSON or XML and regenerate the UI without any trouble or problems. future 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.
