码迷，mamicode.com
首页 > 其他好文 > 详细

TMS X-Cloud Todolist with FNC

时间：2016-06-26 19:43:03      阅读：312      评论：0      收藏：0      [点我收藏+]

标签：

Wednesday, June 22, 2016

It‘s almost three months since we released the first version of the TMS FNC UI Pack, a set of Framework Neutral Components (FNC), and have meanwhile released 2 major updates which include the TTMSFNCTabSet/TTMSFNCPageControl (v1.1), the recently introduced TTMSFNCListBox/TTMSFNCCheckedListBox and significant improvements / new features to the TTMSFNCTreeView such as filtering, sorting, keyboard lookup, clipboard support, ... (v1.2). 

As already explained in previous blog posts (http://www.tmssoftware.com/site/blog.asp?post=335 andhttp://tmssoftware.com/site/blog.asp?post=346), the TMS FNC UI Pack is a set of UI controls that can be used from VCL Windows applications, FireMonkey (FMX) Windows, Mac OS-X, iOS, Android applications and LCL framework based Lazarus applications for Windows, Linux, Mac OS-X, ... . The TMS FNC UI Pack contains highly complex & feature-rich components such as grid, planner, rich editor, treeview, toolbars. So, with a single set of controls, you have the freedom of choice to use Delphi, C++Builder or the free Lazarus to create applications for a myriad of operating systems, you have a single learning curve to these components and as demonstrated here, you can use a single source to create apps for multiple targets. 

This blog post will cover the TTMSFNCCheckedListBox, which is one of the new components that are added in the latest release (v1.2) of the TMS FNC UI Pack, show how to use myCloudData.net to store data and demonstrate how easy it is to switch between FMX, VCL and LCL with one shared source code. myCloudData is an easy to use & flexible service to make use of structured storage in the cloud from Windows, web, mobile or IoT apps and is offered by tmssoftware.com. myCloudData is OAUTH/JSON REST based and our TMS Cloud Pack includes a component to access the service and thus your data seamlessly. 

技术分享

Click image for more screenshots. 

A single shared source

As with our TV-guide sample we have created a single shared source file that is used in a FMX, VCL and LCL project. The unit starts by defining the business logic class that will be instantiated in our application main form unit.

view plain text
  1. TTODOListLogic = class  
  2. private  
  3.   FTable: TMyCloudDataTable;  
  4.   FListBox: TTMSFNCCheckedListBox;  
  5.   FMyCloudDataAccess: TMyCloudDataAccess;  
  6.   FOnConnected: TNotifyEvent;  
  7.   FBitmapContainer: TTMSFNCBitmapContainer;  
  8. protected  
  9.   procedure DoConnected(Sender: TObject);  
  10. public  
  11.   destructor Destroy; override;  
  12.   procedure InitListBox(AListBox: TTMSFNCCheckedListBox);  
  13.   procedure InitMyCloudData;  
  14.   procedure Refresh;  
  15.   procedure InitializeTable;  
  16.   procedure AddNewItem(AText: string; ADate: TDateTime; APriority: TPriority);  
  17.   procedure DeleteItem;  
  18.   procedure Connect;  
  19.   procedure DoBeforeDrawItem(Sender: TObject; AGraphics: TTMSFNCGraphics; ARect: TRectF; AItem: TTMSFNCListBoxItem; var AAllow: Boolean; var ADefaultDraw: Boolean);  
  20.   procedure DoItemCheckChanged(Sender: TObject; AItem: TTMSFNCCheckedListBoxItem);  
  21.   procedure DoItemCompare(Sender: TObject; Item1, Item2: TTMSFNCListBoxItem; var ACompareResult: Integer);  
  22.   property OnConnected: TNotifyEvent read FOnConnected write FOnConnected;  
  23.   property BitmapContainer: TTMSFNCBitmapContainer read FBitmapContainer write FBitmapContainer;  
  24. end;  

Each framework has its own set of units in order to compile succesfully. We use the conditional defines added to our project to make the difference between each framework.

view plain text
  1. uses  
  2.   Classes, SysUtils, DB  
  3.   {$IFDEF VCL}  
  4.   ,VCL.TMSFNCListBox, VCL.TMSFNCCheckedListBox, CloudMyCloudData, CloudBase, VCL.TMSFNCUtils,  
  5.   CloudCustomMyCloudData, VCL.TMSFNCGraphics, VCL.Dialogs, VCL.TMSFNCTypes, Types, VCL.TMSFNCBitmapContainer;  
  6.   {$ENDIF}  
  7.   
  8.   {$IFDEF FMX}  
  9.   ,FMX.TMSFNCListBox, FMX.TMSFNCCheckedListBox, FMX.TMSCloudMyCloudData, FMX.TMSCloudBase,  
  10.   FMX.TMSFNCUtils, FMX.TMSCloudCustomMyCloudData, FMX.TMSFNCGraphics, FMX.TMSFNCTypes, FMX.Dialogs, Types, FMX.TMSFNCBitmapContainer;  
  11.   {$ENDIF}  
  12.   
  13.   {$IFDEF LCL}  
  14.   ,LCLTMSFNCListBox, LCLTMSFNCCheckedListBox, LCLTMSCloudMyCloudData, LCLTMSCloudBase,  
  15.   LCLTMSFNCUtils, LCLTMSCloudCustomMyCloudData, LCLTMSFNCGraphics, Dialogs, LCLTMSFNCTypes, LCLTMSFNCBitmapContainer;  
  16.   {$ENDIF}  

myCloudData

As our todolist is storing its todo items in the cloud we take advantage of our own service, that can virtually store anything we want. The initialization is done programmatically.

view plain text
  1. procedure TTODOListLogic.InitMyCloudData;  
  2. begin  
  3.   FMyCloudDataAccess := TMyCloudDataAccess.Create(nil);  
  4.   FMyCloudDataAccess.PersistTokens.Location := plIniFile;  
  5.   {$IFDEF FMX}  
  6.   FMyCloudDataAccess.PersistTokens.Key := TTMSFNCUtils.GetDocumentsPath + PthDel + ‘myclouddatafmx.ini‘;  
  7.   FMyCloudDataAccess.OnConnected := DoConnected;  
  8.   {$ENDIF}  
  9.   {$IFDEF VCL}  
  10.   FMyCloudDataAccess.PersistTokens.Key := TTMSFNCUtils.GetDocumentsPath + PthDel + ‘myclouddatavcl.ini‘;  
  11.   FMyCloudDataAccess.OnConnected := DoConnected;  
  12.   {$ENDIF}  
  13.   {$IFDEF LCL}  
  14.   FMyCloudDataAccess.PersistTokens.Key := TTMSFNCUtils.GetDocumentsPath + PthDel + ‘myclouddatalcl.ini‘;  
  15.   FMyCloudDataAccess.OnConnected := @DoConnected;  
  16.   {$ENDIF}  
  17.   FMyCloudDataAccess.PersistTokens.Section := ‘tokens‘;  
  18.   FMyCloudDataAccess.App.Key := MYCLOUDDATAKEY;  
  19.   FMyCloudDataAccess.App.Secret := MYCLOUDDATASECRET;  
  20.   FMyCloudDataAccess.App.CallBackPort := 8888;  
  21.   FMyCloudDataAccess.App.CallBackURL := ‘http://127.0.0.1:8888‘;  
  22. end;  

You might notice 3 things here. First is the TMyCloudDataAccess class which is common between FMX, VCL and LCL. This is defined earlier in our business logic as the unit names are different for FMX, VCL and LCL.

view plain text
  1. type  
  2.   {$IFDEF VCL}  
  3.   TMyCloudDataAccess = class(TAdvMyCloudData);  
  4.   {$ENDIF}  
  5.   
  6.   {$IFDEF FMX}  
  7.   TMyCloudDataAccess = class(TTMSFMXCloudMyCloudData);  
  8.   {$ENDIF}  
  9.   
  10.   {$IFDEF LCL}  
  11.   TMyCloudDataAccess = class(TTMSLCLCloudMyCloudData);  
  12.   {$ENDIF}  

Second, is the event handler assignment, that we also need to wrap with conditional defines because LCL works with an additional @. Third is the ini file that is also created with a framework suffix, as the token and token encryption are unique per application and not shareable. After defining our business logic, it‘s time to setup our GUI. The form unit is shared between FMX, VCL and LCL and there you will also notice the uses list and the form file is separated with defines. After designing our form (using the TTMSFNCCheckedListBox, some tool bar buttons (TTMSFNCToolBarButton) we are ready to connect to our business logic and create a working todo list that stores its items in the cloud.

view plain text
  1. procedure TTODOListForm.DoConnected(Sender: TObject);  
  2. begin  
  3.   Panel1.Enabled := True;  
  4.   Panel2.Enabled := True;  
  5.   TMSFNCToolBarButton2.Enabled := False;  
  6.   TMSFNCCheckedListBox1.Enabled := True;  
  7.   TMSFNCToolBarButton4.Enabled := True;  
  8.   TMSFNCToolBarButton5.Enabled := True;  
  9.   TMSFNCToolBarButton6.Enabled := True;  
  10.   TMSFNCToolBarItemPicker1.Enabled := True;  
  11.   FTODOListLogic.InitializeTable;  
  12.   FTODOListLogic.Refresh;  
  13. end;  
  14.   
  15. procedure TTODOListForm.FormCreate(Sender: TObject);  
  16. begin  
  17.   FTODOListLogic := TTODOListLogic.Create;  
  18.   FTODOListLogic.InitListBox(TMSFNCCheckedListBox1);  
  19.   FTODOListLogic.InitMyCloudData;  
  20.   {$IFDEF LCL}  
  21.   FTODOListLogic.OnConnected := @DoConnected;  
  22.   {$ELSE}  
  23.   FTODOListLogic.OnConnected := DoConnected;  
  24.   {$ENDIF}  
  25.   TMSFNCCheckedListBox1.BitmapContainer := TMSFNCBitmapContainer1;  
  26.   TMSFNCToolBarItemPicker1.BitmapContainer := TMSFNCBitmapContainer1;  
  27.   TMSFNCToolBarItemPicker1.Bitmaps.Clear;  
  28.   TMSFNCToolBarItemPicker1.Bitmaps.AddBitmapName(‘low‘);  
  29.   TMSFNCToolBarItemPicker1.DisabledBitmaps.Assign(TMSFNCToolBarItemPicker1.Bitmaps);  
  30.   TMSFNCToolBarButton2.DisabledBitmaps.Assign(TMSFNCToolBarButton2.Bitmaps);  
  31.   TMSFNCToolBarButton4.DisabledBitmaps.Assign(TMSFNCToolBarButton4.Bitmaps);  
  32.   TMSFNCToolBarButton5.DisabledBitmaps.Assign(TMSFNCToolBarButton5.Bitmaps);  
  33.   TMSFNCToolBarButton6.DisabledBitmaps.Assign(TMSFNCToolBarButton6.Bitmaps);  
  34.   
  35.   dt := TMyDateTimePicker.Create(Self);  
  36.   {$IFDEF FMX}  
  37.   dt.Position.X := 5;  
  38.   dt.Position.Y := 40;  
  39.   {$ELSE}  
  40.   dt.Left := 5;  
  41.   dt.Top := 40;  
  42.   {$ENDIF}  
  43.   dt.Date := Now;  
  44.   dt.Parent := Panel1;  
  45.   dt.Width := 105;  
  46. end;  
  47.   
  48. procedure TTODOListForm.FormDestroy(Sender: TObject);  
  49. begin  
  50.   FTODOListLogic.Free;  
  51. end;  
  52.   
  53. procedure TTODOListForm.TMSFNCCheckedListBox1ItemSelected(Sender: TObject;  
  54.   AItem: TTMSFNCListBoxItem);  
  55. begin  
  56.   TMSFNCToolBarButton6.Enabled := True;  
  57. end;  
  58.   
  59. procedure TTODOListForm.TMSFNCToolBarButton1Click(Sender: TObject);  
  60. begin  
  61.   FTODOListLogic.Refresh;  
  62. end;  
  63.   
  64. procedure TTODOListForm.TMSFNCToolBarButton2Click(Sender: TObject);  
  65. begin  
  66.   FTODOListLogic.Connect;  
  67. end;  
  68.   
  69. procedure TTODOListForm.TMSFNCToolBarButton3Click(Sender: TObject);  
  70. begin  
  71.   FTODOListLogic.DeleteItem;  
  72. end;  
  73.   
  74. procedure TTODOListForm.TMSFNCToolBarButton4Click(Sender: TObject);  
  75. begin  
  76.   FTODOListLogic.AddNewItem(Edit1.Text, dt.Date, TPriority(TMSFNCToolBarItemPicker1.SelectedItemIndex));  
  77. end;  
  78.   
  79. procedure TTODOListForm.TMSFNCToolBarItemPicker1ItemSelected(Sender: TObject;  
  80.   AItemIndex: Integer);  
  81. begin  
  82.   TMSFNCToolBarItemPicker1.Bitmaps.Clear;  
  83.   TMSFNCToolBarItemPicker1.Bitmaps.AddBitmapName(TMSFNCBitmapContainer1.Items[AItemIndex].Name);  
  84.   TMSFNCToolBarItemPicker1.DisabledBitmaps.Assign(TMSFNCToolBarItemPicker1.Bitmaps);  
  85. end;  

When starting the application, and clicking the connect button, our business logic unit will do the work. It will create a table in myCloudData, send a notification to our GUI, which will then allow to add items to our listbox, refresh or delete existing items, and this is done with one source code, available on multiple frameworks, multiple platforms. 

The full source code is available for download 

技术分享

Click image for more screenshots.

Pieter Scheldeman

http://www.tmssoftware.com/site/blog.asp?post=353

TMS X-Cloud Todolist with FNC

标签：

原文地址：http://www.cnblogs.com/findumars/p/5618384.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！