做网站一般什么价格,深圳最新政策消息,如何重装wordpress,a963中华室内设计官网前情提要
本博客上一篇文章#xff0c;描述了使用 Delphi 作为后端的 Web Server#xff0c;前端使用 HTMX 框架#xff0c;把一个开源的前端图表 JS 库#xff0c;进行了组件化。
上一篇文章仅仅是描述了简单的前端代码组件化的可能性#xff0c;依然是基于前端库的 JS…前情提要
本博客上一篇文章描述了使用 Delphi 作为后端的 Web Server前端使用 HTMX 框架把一个开源的前端图表 JS 库进行了组件化。
上一篇文章仅仅是描述了简单的前端代码组件化的可能性依然是基于前端库的 JS 字符串代码。
接下来我们要把 JS 的字符串代码变成 Delphi 的面向对象编程封装为一个 Delphi 的类。
当然最终输出给前端的依然是 JS 字符串代码。
详情开始
需求描述
当前端需要一个图表组件的时候后端的 Web Server 需要发送这个图表组件的代码。这个图表组件有很多变量比如 Title是 Light 模式还是 Dark 模式显示在图表上一个是白底一个是黑底等等。另外图表的数据也需要程序根据外来的数据进行赋值。外来数据可能是一个来自数据库的 DataSet。
框架描述
因为上一篇博客里面用到的那个图表的 JS 代码保存在一个外部文件中我们把这部分代码的需要根据程序运行动态变化的部分拿出来由我们的 Delphi 的对象去生成。不变的部分依旧让它在这个外部文件里面作为一个模板。
做一个包装这个图表的对象在这个对象里面处理这个图表有关的数据。这个对象最终将这些数据输出为 JSON 字符串作为前端图表的代码的一部分。
总之就是把需要动态变化的部分作为对象的属性参数。把图表的数据也是需要随时可以修改的作为对象的方法。最终这个对象把数据打包为一个 JSON 字符串然后加载外部模板文件用这个 JSON 字符串替换掉模板文件里面的标志位最终输出完整的图表的 JS 代码给客户端。
实现代码
图表组件的代码
图表组件原本的代码如下
div idchartContainer styleheight: 370px; width: 100%;/divscript typetext/javascriptvar chart new CanvasJS.Chart(chartContainer, {theme: light1, // light2, dark1, dark2animationEnabled: false, // change to true title:{text: Basic Column Chart},data: [{// Change type to bar, area, spline, pie,etc.type: column,dataPoints: [{ label: apple, y: 10 },{ label: orange, y: 15 },{ label: banana, y: 25 },{ label: mango, y: 30 },{ label: grape, y: 28 }]}]
});
chart.render();/script上述代码中有关图表的数据是写死的。我们要把数据部分拿出来用 Delphi 的对象来动态创建。抽调数据部分留下不变的部分作为模板。
图表组件的模板代码
div idchartContainer styleheight: 370px; width: 100%;/divscript typetext/javascript
var chart new CanvasJS.Chart(chartContainer, #JSON);chart.render();/script上述模板代码中【#JSON】是替换标记也就是动态的数据部分需要用我们的 Delphi 的对象的代码来生成。
Delphi 对象的代码
unit UCanvaChart;
{----------------------------------------------------------------------封装来自 CanvasJS 的图表 javascript 代码到 Delphi 中。验证概念的实验性代码。pcplayer 2024-6-15
------------------------------------------------------------------------}interfaceusesSystem.SysUtils, System.Classes, System.IOUtils, System.Generics.Collections, System.JSON;typeTChartTheme (ctLight1, ctLight2, ctDark1, ctDatk2);TChartType (Column, Bar, Area, Spline, Pie);typeTCanvasJSChart classprivateFTheme: TChartTheme;FAnimationEnabled: Boolean;FTitle: string;FChartType: TChartType;FData: TDictionarystring, Integer;function GetJsonStr: string;function GetThemeStr: string;function GetChartTypeStr: string;function GetChartJS: string;publicconstructor Create;destructor Destroy; override;property AnimationEnabled: Boolean read FAnimationEnabled write FAnimationEnabled;property Title: string read FTitle write FTitle;property ChartType: TChartType read FChartType write FChartType;property Theme: TChartTheme read FTheme write FTheme;property JSONStr: string read GetJsonStr;property ChartJS: string read GetChartJS;procedure AddRecord(const AName: string; const AValue: Integer);end;implementation{ TCanvasJSChart }procedure TCanvasJSChart.AddRecord(const AName: string; const AValue: Integer);
beginFData.Add(AName, AValue);
end;constructor TCanvasJSChart.Create;
beginFData : TDictionarystring, Integer.Create;
end;destructor TCanvasJSChart.Destroy;
beginFData.Free;inherited;
end;function TCanvasJSChart.GetChartJS: string;
varS, JS: string;
beginS : UTF8Decode(TFile.ReadAllText(MyChart.txt));JS : Self.JSONStr;Result : S.Replace(#JSON, JS);
end;function TCanvasJSChart.GetChartTypeStr: string;
begincase Self.FChartType ofColumn: Result : column;Bar: Result : bar;Area: Result : area;Spline: Result : spline;Pie: Result : pie;end;
end;function TCanvasJSChart.GetJsonStr: string;
varjo: TJSONObject;ATheme: string;AData: TJSONArray;AName: string;AValue: Integer;
begin//按照 CanvasJS 的规则封装 JSONAData : TJSONArray.Create;for AName in Self.FData.Keys dobeginAData.Add(TJSONObject.Create.AddPair(label, AName).AddPair(y, Self.FData.Items[AName]));end;jo : TJSONObject.Create;tryjo.AddPair(theme, Self.GetThemeStr);jo.AddPair(animationEnabled, TJSONBool.Create(Self.FAnimationEnabled));jo.AddPair(title, TJSONObject.Create.AddPair(text, Self.FTitle));jo.AddPair(data, TJSONArray.Create.Add(TJSONObject.Create.AddPair(type, Self.GetChartTypeStr).AddPair(dataPoints, AData)));Result : jo.ToString;finallyjo.Free;end;
end;function TCanvasJSChart.GetThemeStr: string;
begincase Self.FTheme ofctLight1: Result : light1;ctLight2: Result : light2;ctDark1: Result : dark1;ctDatk2: Result : dark2;end;
end;end.
上述代码中加载外部文件 MyChart.txt 作为模板文件然后把生成的 JSON 数据插入模板文件里面输出为图表组件的 JavaScript 代码字符串。
TCanvasJSChart 有一个 AddRecord 方法可以多次调用这个方法给这个对象加入多条用于图表显示的数据。
Delphi WebBroker 的代码
作为 WebServer当收到来自客户端需要图表的请求时调用 TCanvasJSChart 类输入图表相关数据获得图表的 JavaScript 代码输出给客户端。
unit WebModuleUnit1;interfaceusesSystem.SysUtils, System.Classes, Web.HTTPApp, UCanvaChart;typeTWebModule1 class(TWebModule)procedure WebModule1DefaultHandlerAction(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);procedure WebModule1WebActionItem1Action(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);private{ Private declarations }function GetMyChart(const ATitle: string; const AChartType: TChartType;const Animation: Boolean; const ATheme: TChartTheme): string;public{ Public declarations }end;varWebModuleClass: TComponentClass TWebModule1;implementationuses System.IOUtils;{%CLASSGROUP Vcl.Controls.TControl}{$R *.dfm}function TWebModule1.GetMyChart(const ATitle: string;const AChartType: TChartType; const Animation: Boolean;const ATheme: TChartTheme): string;
varAChart: TCanvasJSChart;
beginAChart : TCanvasJSChart.Create;tryAChart.Title : ATitle;AChart.AnimationEnabled : Animation;AChart.Theme : ATheme;AChart.ChartType : AChartType;//作为实验性代码这里直接写死数据。//这里的数据可以是从数据库来的 DataSet然后对 DataSet 做一个循环逐条记录用 AddRecord 加入到这个图表里面。AChart.AddRecord(apple, 10);AChart.AddRecord(orange, 25);AChart.AddRecord(banana, 33);AChart.AddRecord(mango, 50);AChart.AddRecord(梨子, 45);Result : AChart.ChartJS;finallyAChart.Free;end;
end;procedure TWebModule1.WebModule1DefaultHandlerAction(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
beginResponse.Content : UTF8Decode(TFile.ReadAllText(index.html));
end;procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
beginResponse.Content : Self.GetMyChart(This is My Chart Title, TChartType.Column, True, TChartTheme.ctDark1);
end;end.
当客户端浏览器里面用户点击页面里面的按钮HTMX 根据页面代码触发对 WEB 服务器的访问访问的路径是 /MyChart这个路径也是写在页面里面的 HTMX 的代码决定的。
Web 服务器端 Delphi 的 WebBroker 框架根据上述路径触发该路径对应的 Action这里就是:
procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
beginResponse.Content : Self.GetMyChart(This is My Chart Title, TChartType.Pie, True, TChartTheme.ctDark1);
end;
这个方法里面获得了图表组件输出给客户端浏览器。浏览器页面上这个图表显示出来了。
上述代码中在 function TWebModule1.GetMyChart 这个方法里面创建了 TCanvasJSChart 这个类的对象并且给它加入了一些数据这些数据果然在图表里面显示出来了。
经过测试在调用这个图表对象的时候果然可以通过设置不同的属性改变底色改变图表的形态比如柱状图饼图等等。
当然本测试程序还需要用到一个 Index.html 文件在这个文件里面声明了对 HTMX 的引用也声明了对这个图表库的引用。这个文件的代码请看本博客上一篇文章基于 Delphi 的前后端分离之四使用 HTMX 让页面元素组件化
总结
这篇文章是上一篇文章内容的进一步改进。如果你想测试把这篇文章里面的代码直接放到 Delphi 里面去加上上一篇文章里面提到的 index.html是可以直接运行的。
结论就是完全可以把各路前端库用 Delphi 的代码封装起来结合 HTMX 可以用非常简单符合编程直觉的方式用 Delphi 写出漂亮的 WEB 应用。
至于前端漂亮的页面也可以去下载成熟的页面框架来使用。这一点可以参考本博客前面的一篇文章基于 Delphi 的前后端分离之二
