When you want to drag an OrangeUI button, you will find that it is a bare control. For example, the title font is not centered, and the background color is not. To achieve the effect you want, you have to set it step by step, face to face For the many drawing parameters, you will sigh, this cock control is really fucking difficult to use.

 

Here, I can only say to everyone: OrangeUI users, everyone has worked hard.

 

How to change this status quo, then I will introduce our protagonist today, called the public material module. It is actually an alternative form of Delphi, DataMoudule, on which UI controls cannot be placed, but Delphi components can be placed. For example, we often place database connections, datasets, etc. on it for common use by business forms. Then the material component of the OrangeUI control is also a component, so you can put the designed material on it and use it for all pages. When I develop a project, I also put the same style of material on it. It is the EasyServiceCommonMaterialDataMoudle in the control package, which is located in the OrangeProjectCommon directory of the control package. Let’s open it up and take a look:

To use it,

1. The first step, you need to add it to your project:

(1) Right-click your project in the project view and select ‘Add…’

(2)

(3) Find the OrangeProjectCommon directory,

Select ‘EasyServiceCommonMaterialDataMoudle.pas’ and click ‘Open’

(4)

(5) The public material module is added to your project

(6)

2. Use public materials in the page

(1) For example, I want to make a report query condition input page ReportFilterConditionFrame,

(2) use public material units

(3)

3. Determine the APP theme color

(1) Put a TSkinTheme component in the main form of the project, only one such component needs to be placed in the entire project

(2)

(3)NavigationBarColor, the background color of the navigation bar

(4)NavigationBarFontColor, the font color of the navigation bar

(5) SkinThemeColor, theme color

(6) SkinThemeColor1, theme color 1

(7) SkinThemeColor2, theme color 2

(8) SkinThemeColor3, theme color 3

(9) So how to use this theme color in the material? For example, for the background color in the material, we can set BackColor.FillColor.UseThemeColor to ctThemeColor.

(10)

4. Navigation bar public material

(1) Drag a Panel to ReportFilterConditionFrame, set its Align to Top, its height to 50, Properties.IsToolBar to True, its Name to pnlToolbar, and Caption to “Condition Settings”

(2) At this time, it has not yet set the material, it looks like this:

(3)

(4) Next, we set the public material for it, and click the arrow to the right of its RefMaterial property

(5)

(6) It will list all the material components belonging to the control in the public material module

(7) We choose: dmEasyServiceCommonMaterial.pnlToolBarMaterial, its appearance is set, and we do not need to set the background color, title position, etc. separately.

(8)

(9)

5. The public material of the return button

(1) We also need a return button, which is already included in the public material module

(2) We put a button on the navigation bar, set its Name to btnReturn, the width to 80, and the Align to Left

(3)

(4) Set its RefMaterial to dmEasyServiceCommonMaterial.bdmReturnButton

(5)

(6) This public material has already set a return arrow icon, so you don’t need to set the icon.

(7)

6. Public material of scroll box

(1) Put a ScrollBox, set the Name to sbScrollBox, set its Align to Client,

(2) ScrollBox also has a public material:

(3)dmEasyServiceCommonMaterial.sbDefaultColorBackgroundScrollBoxMaterial

(4) It is a light gray background

(5)

(6) Put another ScrollBoxContent in the ScrollBox, set the Name to sbcContent, and set its Align to Top

(7)

7. Edit

(1) We need to enter keywords,

(2) Let’s put a Panel in sbcContent first, use it as the background and title of the input item, name the Panel pnlKeyword, set the height to 45, set the Align to Top, and set the Caption to the keyword,

(3)

(4) Set its RefMaterial to:

(5) dmEasyServiceCommonMaterial.pnlInputBlackCaptionPanelMaterial, this material has a white background, the title is horizontally centered on the left and vertically, and the font size is 14. The effect is as shown below:

(6)

(7) Put an Edit in pnlKeyword, set its Name to edtKeyword, its left margin Margins.Left to 80, its Align to Client, and Properties.HelpText to “Please enter a keyword”,

(8)

(9) Edit also has public material, we set its RefMaterial to:

(10)dmEasyServiceCommonMaterial.edtInputEditHasHelpTextMaterial, the effect is as follows:

(11)

(12) This public material has a transparent background, and the prompt text font is gray and vertically centered.

(13)

8. ComboBox

(1) First put an input area Panel, named pnlDoorStructure, to put the door structure drop-down selection box

(2) Put a ComboBox, name it cmbDoorStructure, set its left margin Margins.Left to 80, and set Items, ItemIndex is set to 0, Properties.HelpText is set to “Please select the door structure”, the current effect is as follows:

(3)

(4) As you can see, the title position is inappropriate, and there is no drop-down arrow.

(5) Then we need to choose a public material for it:

(6)

9. Options button

(1) Sometimes, we need to select an option by clicking a button and jumping to a special page. This button needs to have a jump prompt icon and prompt text.

(2) For example, if we want to select a customer, we first put an input area Panel-pnlSelectCompany, and then put a button btnSelectCompany in it, or similar to the above operation, we set the button’s left margin Margins.Left to 80, and Align to Client, Properties.HelpText is set to “Please select a client”

(3)

(4) Then we choose a public material for it:

(5)dmEasyServiceCommonMaterial.btnSelectButtonMaterial

(6)

(7)

10. Choose a time frame

(1) We first put an input area Panel-pnlSelectDateArea, and then put a TSkinSelectDateAreaButton control in it, named btnSelectDateArea, this control has two properties, StartDate and EndDate, used to store the start date and end date, and then we put it The material settings are:

(2)dmEasyServiceCommonMaterial.btnSelectButtonMaterial

(3)

(4) Next, we need to write its click event, so that clicking the button can jump to the page SelectFilterFrame that selects the time range, which is as follows:

(5)

(6) OK, let’s start writing the click event:

procedure TFrameReportFilterCondition.btnSelectDateAreaClick(Sender: TObject);

begin

//select date range

//search

HideFrame;

ShowFrame(TFrame(GlobalSelectFilterFrame),TFrameSelectFilter,DoReturnFrameFromSelectDateArea);

//Date of completion

GlobalSelectFilterFrame.Load(

btnSelectDateArea.StartDate,

btnSelectDateArea.EndDate,

);

GlobalSelectFilterFrame.pnlToolBar.Caption:=’Select’+Self.pnlDateArea.Caption;

end;

(7) When jumping to the page, you need to pass in a method to process the returned event DoReturnFrameFromSelectDateArea, which is used to assign the selected date range to the button. The method code is as follows:

procedure TFrameReportFilterCondition.DoReturnFrameFromSelectDateArea(

AFromFrame: TFrame);

begin

btnSelectDateArea.StartDate:=TFrameSelectFilter(AFromFrame).FStartDate;

btnSelectDateArea.EndDate:=TFrameSelectFilter(AFromFrame).FEndDate;

end;

(8)

11. Checkbox

(1) If we want to check whether the document has been reviewed, we need to put a CheckBox in the input area, name it chkIsAudit, set its ComponentTypeUseKind to ctukName, and ComponentTypeName to Color,

(2)

(3) Then we also choose a public material for it:

(4)dmEasyServiceCommonMaterial.chkDefaultRectCheckBoxMaterial

(5)

(6) Let’s see what it looks like after it is checked:

(7)

(8) We can see that its background color is our theme color.

(9)

12. RadioButton

(1) I need to choose whether there is an abnormality in the production order, and I need three options: all, no abnormality, and abnormality

(2) Put three RadioButtons in the new input area, named rbExceptionNone, rbExceptionNo, rbExceptionYes,

(3)

(4) Then we set the ComponentTypeUseKind of the three RadioButtons to ctukName, the ComponentTypeName to Color, the top and bottom margins to 10, and then set a common material for it as:

(5)dmEasyServiceCommonMaterial.rbRedRadioButtonMaterial

(6)

(7)

13. Function buttons

(1) After setting the conditions, we need to click the OK button to execute the query, so we need to put a Button named btnOK, the title is set to OK, the Align is also set to Top, and the top, left and right margins are set to 20,

(2)

(3)

(4) We select a public material for this button:

(5)dmEasyServiceCommonMaterial.btnSkinThemeColorMaterial, indicating that it is a button with a theme color

(6)

(7) Let’s take a look at how the theme color is used in this control material:

(8)

(9) is to set the BackColor.FillColor.UseThemeColor of the material to ctThemeColor, indicating that the theme color is used.

(10) Or some people like to put the button in the upper right corner of the navigation bar, it is also ok.

(11)

(12) We choose a public material for it:

(13)dmEasyServiceCommonMaterial.btnTransparentWhiteCaptionButtonMaterial, which is a button with a transparent background and a white title font, the effect is as follows:

(14)

(15)

I will briefly introduce the use of public materials here. The common material module EasyServiceCommonMaterialDataMoudle also contains many other materials for other controls, which improves the efficiency of interface development. When developing projects, you can try to use public materials as much as possible. Put it in a DataModule and share it with other pages or other projects.

当你想拖一个OrangeUI的按钮时,你会发现它是一个光禿禿的控件,比如标题字体也不居中,背景色也没有,要想实现你想要的效果,得从从一步步的设置,面对众多绘制参数,你会感叹道,这屌鸡巴控件,真他妈的难用。

在这里,我只能向大家说声:OrangeUI的用户,大家辛苦了。

如何改变这个现状,接下来我就给大家介绍我们今天的主角,叫做公共素材模块。它其实就是一个Delphi的另类窗体DataMoudule,在它上面不可以放界面控件,但可以放置Delphi组件,比如我们经常将数据库连接、数据集等放在它的上面给业务窗体共同使用。那么OrangeUI控件的素材组件也是组件,因此大家可以将设计好的素材放在它上面,给所有页面共同使用。我在开发项目的时候,也会把相同样式的素材放在上面,它就是控件包中的EasyServiceCommonMaterialDataMoudle,位于控件包的OrangeProjectCommon目录中。我们来打开它看一下:

要想使用它,

  1. 第一步,你需要将它添加到你的工程
    1. 在工程视图中右键你的工程,选择‘Add…’
    2. 找到OrangeProjectCommon目录,

选择‘EasyServiceCommonMaterialDataMoudle.pas’,点击‘打开’

    1. 公共素材模块就添加到了你的项目中
  1. 在页面中使用公共素材
    1. 比如我要做一个报表查询条件输入页面ReportFilterConditionFrame,
    2. 引用公共素材单元
  2. 确定APP主题色
    1. 在工程主窗体中放一个TSkinTheme组件,整个项目只需要放一个这样的组件
    2. NavigationBarColor,导航栏背景色
    3. NavigationBarFontColor,导航栏字体颜色
    4. SkinThemeColor,主题色
    5. SkinThemeColor1,主题色1
    6. SkinThemeColor2,主题色2
    7. SkinThemeColor3,主题色3
    8. 那么如何在素材中使用这个主题色呢?比如素材中的背景色,我们可以将BackColor.FillColor.UseThemeColor设置为ctThemeColor即可。
  3. 导航栏公共素材
    1. 拖一个Panel到ReportFilterConditionFrame,将它的Align设置为Top,高度设置为50,Properties.IsToolBar设置为True,它的Name设置为pnlToolbar,Caption设置为“条件设置”
    2. 此时它还没有设置过素材,看起来是这个样子的:
    3. 接下来,我们就给它设置公共素材,点击它的RefMaterial属性右边的箭头
    4. 它会将在公共素材模块中属于该控件的素材组件都列举出来
    5. 我们选择:dmEasyServiceCommonMaterial.pnlToolBarMaterial,它的样子就设置好了,不需要我们再单独设置背景色、标题位置等。
  4. 返回按钮的公共素材
    1. 我们还需要一个返回按钮,公共素材模块也已经包含了这个素材
    2. 我们放一个按钮在导航栏上,将它的Name设置为btnReturn,宽度设置为80,Align设置为Left
    3. 将它的RefMaterial设置为dmEasyServiceCommonMaterial.bdmReturnButton
    4. 这个公共素材已经设置好一个返回的箭头图标,所以你也不需要去设置图标了。
  5. 滚动框的公共素材
    1. 放一个ScrollBox,Name设置为sbScrollBox,将它的Align设置为Client,
    2. ScrollBox也有一个公共素材:
    3. dmEasyServiceCommonMaterial.sbDefaultColorBackgroundScrollBoxMaterial
    4. 它是一个浅灰色的背景
    5. 再放一个ScrollBoxContent在ScrollBox里面,Name设置为sbcContent,将它的Align设置为Top
  6. 输入框
    1. 我们需要输入关键字,
    2. 我们先放个Panel在sbcContent中,用做输入项背景和标题,将Panel命名为pnlKeyword,高度设置为45,Align设置为Top,Caption设置为关键字,
    3. 将它的RefMaterial设置为:
    4. dmEasyServiceCommonMaterial.pnlInputBlackCaptionPanelMaterial,这个素材拥有白色背景,标题水平居左垂直居中,字体大小为14,效果如下图所示:
    5. 再放一个输入框在pnlKeyword中,将它的Name设置为edtKeyword,它的左边距Margins.Left设置为80,它的Align设置为Client,Properties.HelpText设置为“请输入关键字”,
    6. Edit也有公共素材,我们将它的RefMaterial设置为:
    7. dmEasyServiceCommonMaterial.edtInputEditHasHelpTextMaterial,效果如下:
    8. 这个公共素材是背景透明,提示文本字体灰色且垂直居中的。
  7. 下拉框
    1. 先放一个输入区Panel,取名为pnlDoorStructure,用来放门结构下拉选择框
    2. 放一个下拉选择框,取名为cmbDoorStructure,将它的左边距Margins.Left设置为80,Items设置为: 空字符串(表示不过滤)、四开、主中三开、双开、单门、豪华单门、豪华四开、中固三开、立柱四开,ItemIndex设置为0,Properties.HelpText设置为“请选择门结构”,目前效果如下:
    3. 大家可以看到,标题位置不合适,并且连下拉箭头都没有。
    4. 那么我们就需要给它选择一个公共素材:
  8. 选项按钮
    1. 有时候,我们会需要通过点击一个按钮,跳转到一个专门的页面来选择一个选项。这个按钮需要有一个跳转的提示图标以及提示文字。
    2. 比如我们要选择客户,我们先放一个输入区Panel-pnlSelectCompany,再在里面放一个按钮btnSelectCompany,还是和上面的操作类似,我们将按钮的左边距Margins.Left设置为80,Align设置为Client,Properties.HelpText设置为“请选择客户”
    3. 然后我们给它选择一个公共素材:
    4. dmEasyServiceCommonMaterial.btnSelectButtonMaterial
  9. 选择时间范围
    1. 我们先放一个输入区Panel-pnlSelectDateArea,再在里面放一个TSkinSelectDateAreaButton控件,取名为btnSelectDateArea,这个控件有两个属性,StartDate和EndDate,用于存放开始日期和结束日期,然后我们将它的素材设置为:
    2. dmEasyServiceCommonMaterial.btnSelectButtonMaterial
    3. 接下来我们需要写它的点击事件,以便点击该按钮可以跳转到选择时间范围的页面SelectFilterFrame,该页面如下:
    4. 好,我们开始写点击事件:

procedure TFrameReportFilterCondition.btnSelectDateAreaClick(Sender: TObject);

begin

//选择日期范围

//搜索

HideFrame;

ShowFrame(TFrame(GlobalSelectFilterFrame),TFrameSelectFilter,DoReturnFrameFromSelectDateArea);

//完成日期

GlobalSelectFilterFrame.Load(

btnSelectDateArea.StartDate,

btnSelectDateArea.EndDate,

);

GlobalSelectFilterFrame.pnlToolBar.Caption:=’选择’+Self.pnlDateArea.Caption;

end;

    1. 在跳转到页面去的时候,需要传入一个方法用于处理返回的事件DoReturnFrameFromSelectDateArea,用于将选择好的日期范围赋值给按钮,该方法代码如下:

procedure TFrameReportFilterCondition.DoReturnFrameFromSelectDateArea(

AFromFrame: TFrame);

begin

btnSelectDateArea.StartDate:=TFrameSelectFilter(AFromFrame).FStartDate;

btnSelectDateArea.EndDate:=TFrameSelectFilter(AFromFrame).FEndDate;

end;

  1. 10.复选框
    1. 我们要查询是否审核过的单据,就需要放一个CheckBox到输入区中,取名为chkIsAudit,将它的ComponentTypeUseKind设置为ctukName,ComponentTypeName设置为Color,
    2. 然后我们也给它选择一个公共素材:
    3. dmEasyServiceCommonMaterial.chkDefaultRectCheckBoxMaterial
    4. 来看看它勾选后的样子:
    5. 我们可以看到它的背景色就是我们的主题色。
  2. 12.单选框
    1. 我需要选择生产任务单是否有异常,需要三个选项:全部、无异常、有异常
    2. 放三个RadioButton到新建的输入区中,分别命名为rbExceptionNone,rbExceptionNo,rbExceptionYes,
    3. 然后我们给三个RadioButton的ComponentTypeUseKind设置为ctukName,ComponentTypeName设置为Color,上下边距设置为10,再给它设置一个公共素材为:
    4. dmEasyServiceCommonMaterial.rbRedRadioButtonMaterial
  3. 13.功能按钮
    1. 设置好条件之后,我们需要点击确定按钮,执行查询,因此需要放一个Button,命名为btnOK,标题设置为确定,Align也设置为Top,上,左,右边距各设置为20,
    2. 我们给这个按钮选择一个公共素材:
    3. dmEasyServiceCommonMaterial.btnSkinThemeColorMaterial,表示它是一个主题色的按钮
    4. 我们来看一下这个控件素材中是如何使用主题色的:
    5. 是将素材的BackColor.FillColor.UseThemeColor设置为ctThemeColor,表示使用主题色。
    6. 或者有些人喜欢把按钮放在导航栏的右上角,也是可以的。
    7. 我们给它选择一个公共素材:
    8. dmEasyServiceCommonMaterial.btnTransparentWhiteCaptionButtonMaterial,它是一个透明背景、标题字体是白色的按钮,效果如下:

公共素材的使用我就简单介绍到这里了,在EasyServiceCommonMaterialDataMoudle这个公共素材模块中还包含了很多其他控件的其他素材,提高了界面开发的效率,大家在开发项目的时候,也可以尽量把公共的素材放在一个DataModule里面,共享给其他页面或者其他项目使用。

With the increasing use of Json, OrangeUI’s list items support binding Json as a displayed data source.,

The old binding mode is to assign data to ListBoxItem.Caption, Detail, Detail1~6,

There are two disadvantages to this:

  1. It is troublesome to use, you must read the data returned by the interface and assign it to the properties such as Item.Caption and Detail.。For example:
    1. AListBox.Caption:=’Soap’;
    2. AListBox.Detail:=’$99.00’;
    3. AListBox.Detail1:=’White’;

2.The number of attributes is limited, and only about 10 pieces of data can be added to the Item and displayed on the interface。

3.It is troublesome to read the data, and it is difficult for you to forget whether the data originally assigned to Item.Detail is the quantity or the amount, etc.。

Next I will introduce how to bind Json:

  1. Designed a list item style
    1. In the OrangeUIStyles package, create a new list item style Frame,In this example the Frame is named TFrameListItemStyle_SaleBill,Unit is named:ListItemStyleFrame_SaleBill.pas
    2. Name each control, for example, the Label of lblClientName is used to display the customer name, and the Label of lblBillState is used to display the status of the document。
    3. Give the list item style a name
    4. Install the OrangeUIStyles package again
    5. Then assign it to ListBox.Properties.DefaultItemStyle and refer to the style in the unit。
  2. Test data ready
    1. I use the XSuperObject library that I often use as an example
    2. The following code says, I create Json of two documents and put them into a Json array。

var

ASuperObject:ISuperObject;

ASuperArray:ISuperArray;

//添加测试数据

ASuperArray:=SA();

ASuperObject:=SO();

ASuperObject.S[‘ClientName’]:=’ABC’;

ASuperObject.S[‘Date’]:=’2021-01-01 15:03′;

ASuperObject.S[‘BillState’]:=’已审核’;

ASuperObject.S[‘RealMoney’]:=’¥176′;

ASuperObject.S[‘OrderMoney’]:=’¥176′;

ASuperObject.S[‘Stock’]:=’仓库’;

ASuperObject.S[‘Count’]:=’2种2件’;

ASuperObject.S[‘Emp’]:=’业务员’;

ASuperObject.S[‘PrintCount’]:=’0次’;

ASuperArray.O[ASuperArray.Length]:=ASuperObject;

ASuperObject:=SO();

ASuperObject.S[‘ClientName’]:=’成都某某商贸有限公司’;

ASuperObject.S[‘Date’]:=’2021-01-02 15:03′;

ASuperObject.S[‘BillState’]:=’已审核’;

ASuperObject.S[‘RealMoney’]:=’¥86′;

ASuperObject.S[‘OrderMoney’]:=’¥86′;

ASuperObject.S[‘Stock’]:=’主仓库’;

ASuperObject.S[‘Count’]:=’1种2件’;

ASuperObject.S[‘Emp’]:=’向芳’;

ASuperObject.S[‘PrintCount’]:=’1次’;

ASuperArray.O[ASuperArray.Length]:=ASuperObject;

  1. Add list item
    1. To bind Json list items, you cannot directly use ListBox.Properties.Items.Add to add them, but create a TSkinJsonItem object, which needs to refer to the uSkinItemJsonHelper unit, which is in the OrangeProjectCommon directory。
    2. sample code:

var

I:Integer;

ASkinItem:TSkinJsonItem;

lstBillList.Properties.Items.BeginUpdate;

try

lstBillList.Properties.Items.Clear;

for I := 0 to ASuperArray.Length-1 do

begin

ASkinItem:=TSkinJsonItem.Create;

ASkinItem.Json:=ASuperArray.O[I];

Self.lstBillList.Prop.Items.Add(ASkinItem);

end;

finally

lstBillList.Properties.Items.EndUpdate();

end;

  1. Bind the control above the list item style – set the BindItemFieldName property to the control。
    1. For example, I need to display the ClientName in Json to the Label of lblClientName,
    2. Display the BillState data in Json to the Label of lblBillState, etc.,
    3. It needs to be handled in the OnNewListItemStyleFrameCacheInit event of the ListBox
    4. The sample code is as follows:

procedure TfmBillList.lstBillListNewListItemStyleFrameCacheInit(Sender: TObject;

AListItemTypeStyleSetting: TListItemTypeStyleSetting;

ANewListItemStyleFrameCache: TListItemStyleFrameCache);

var

ASaleBillFrame:TFrameListItemStyle_SaleBill;

begin

inherited;

//wn

if ANewListItemStyleFrameCache.FItemStyleFrame is TFrameListItemStyle_SaleBill then

begin

ASaleBillFrame:=TFrameListItemStyle_SaleBill(ANewListItemStyleFrameCache.FItemStyleFrame);

ASaleBillFrame.lblClientName.BindItemFieldName:=’ClientName’;

ASaleBillFrame.lblBillState.BindItemFieldName:=’BillState’;

ASaleBillFrame.lblOrderMoney.BindItemFieldName:=’OrderMoney’;

ASaleBillFrame.lblRealMoney.BindItemFieldName:=’RealMoney’;

ASaleBillFrame.lblPrintCount.BindItemFieldName:=’PrintCount’;

ASaleBillFrame.lblBillNO.BindItemFieldName:=’BillNO’;

ASaleBillFrame.lblCount.BindItemFieldName:=’Count’;

ASaleBillFrame.lblEmp.BindItemFieldName:=’Emp’;

end;

end;

    1. The display effect is as follows:

    1. Of course, if your list item style Frame is only used by one page, you can also set the BindItemFieldName for the control directly on the list item style Frame.

  1. Of course, if your list item style Frame is only used by one page, you can also set the BindItemFieldName for the control directly on the list item style Frame.

随着Json的使用越来越广,OrangeUI的列表项支持绑定Json,做为显示的数据源

旧的绑定模式,是将数据赋给ListBoxItem.Caption、Detail、Detail1~6,

这样的缺点有两个:

  1. 使用麻烦,你必须将接口返回的数据读取出来一一赋给Item.Caption、Detail等属性。比如:
    1. AListBox.Caption:=’Soap’;
    2. AListBox.Detail:=’$99.00’;
    3. AListBox.Detail1:=’White’;
  2. 属性个数有限,最多只能将10个左右的数据添加到Item并显示到界面上。
  3. 读取数据麻烦,你很难容易忘记当初赋给Item.Detail的数据是数量还是金额等。

接下来我将介绍如何使用绑定Json的步骤:

1.设计好列表项样式

  1. 在OrangeUIStyles包中,新建一个列表项样式Frame,在该示例中Frame名为TFrameListItemStyle_SaleBill,单元名为:ListItemStyleFrame_SaleBill.pas
  2. 给每个控件命好名字,比如lblClientName这个Label表示用于显示客户名称,lblBillState这个Label表示用于显示单据状态。
  3. 再给列表项样式命好名字
  4. 再安装一次OrangeUI
  5. 再赋给ListBox.Properties.DefaultItemStyle,并在单元中引用该样式。

 

2.准备测试数据

  1. 我以我经常使用的XSuperObject库作为示例
  2. 以下代码表示,我创建了两个单据的Json并将它们放入一个Json数组中。

var

ASuperObject:ISuperObject;

ASuperArray:ISuperArray;

//添加测试数据

ASuperArray:=SA();

ASuperObject:=SO();

ASuperObject.S[‘ClientName’]:=’ABC’;

ASuperObject.S[‘Date’]:=’2021-01-01 15:03′;

ASuperObject.S[‘BillState’]:=’已审核’;

ASuperObject.S[‘RealMoney’]:=’¥176′;

ASuperObject.S[‘OrderMoney’]:=’¥176′;

ASuperObject.S[‘Stock’]:=’仓库’;

ASuperObject.S[‘Count’]:=’2种2件’;

ASuperObject.S[‘Emp’]:=’业务员’;

ASuperObject.S[‘PrintCount’]:=’0次’;

ASuperArray.O[ASuperArray.Length]:=ASuperObject;

ASuperObject:=SO();

ASuperObject.S[‘ClientName’]:=’成都某某商贸有限公司’;

ASuperObject.S[‘Date’]:=’2021-01-02 15:03′;

ASuperObject.S[‘BillState’]:=’已审核’;

ASuperObject.S[‘RealMoney’]:=’¥86′;

ASuperObject.S[‘OrderMoney’]:=’¥86′;

ASuperObject.S[‘Stock’]:=’主仓库’;

ASuperObject.S[‘Count’]:=’1种2件’;

ASuperObject.S[‘Emp’]:=’向芳’;

ASuperObject.S[‘PrintCount’]:=’1次’;

ASuperArray.O[ASuperArray.Length]:=ASuperObject;

 

 

3.添加列表项

  1. 绑定Json的列表项,不能直接使用ListBox.Properties.Items.Add去添加,而是需要引用 uSkinItemJsonHelper单元,它在OrangeProjectCommon目录中。
  2. 示例代码:

var

I:Integer;

ASkinItem:TSkinJsonItem;

lstBillList.Properties.Items.BeginUpdate;

try

lstBillList.Properties.Items.Clear;

for I := 0 to ASuperArray.Length-1 do

begin

ASkinItem:=TSkinJsonItem.Create;

ASkinItem.Json:=ASuperArray.O[I];

Self.lstBillList.Prop.Items.Add(ASkinItem);

end;

finally

lstBillList.Properties.Items.EndUpdate();

end;

 

 

4.绑定列表项样式上面的控件-给控件设置BindItemFieldName属性。

  1. 比如我需要将Json中的ClientName显示到lblClientName这个Label中去,
  2. 将Json中的BillState数据显示到lblBillState这个Label中去等,
  3. 需要在ListBox的OnNewListItemStyleFrameCacheInit事件中进行处理
  4. 示例代码如下:

procedure TfmBillList.lstBillListNewListItemStyleFrameCacheInit(Sender: TObject;

AListItemTypeStyleSetting: TListItemTypeStyleSetting;

ANewListItemStyleFrameCache: TListItemStyleFrameCache);

var

ASaleBillFrame:TFrameListItemStyle_SaleBill;

begin

inherited;

//wn

if ANewListItemStyleFrameCache.FItemStyleFrame is TFrameListItemStyle_SaleBill then

begin

ASaleBillFrame:=TFrameListItemStyle_SaleBill(ANewListItemStyleFrameCache.FItemStyleFrame);

ASaleBillFrame.lblClientName.BindItemFieldName:=’ClientName’;

ASaleBillFrame.lblBillState.BindItemFieldName:=’BillState’;

ASaleBillFrame.lblOrderMoney.BindItemFieldName:=’OrderMoney’;

ASaleBillFrame.lblRealMoney.BindItemFieldName:=’RealMoney’;

ASaleBillFrame.lblPrintCount.BindItemFieldName:=’PrintCount’;

ASaleBillFrame.lblBillNO.BindItemFieldName:=’BillNO’;

ASaleBillFrame.lblCount.BindItemFieldName:=’Count’;

ASaleBillFrame.lblEmp.BindItemFieldName:=’Emp’;

end;

end;

    1. 显示效果如下:

    1. 当然如果你的列表项样式Frame只为一个页面所使用,你也可以直接在列表项样式Frame上给控件设置好BindItemFieldName

 

 

5.如果你想在ListBox的OnClickItem中取出列表顶的数据,比如ClientName,你可以使用:AItem.Json.S[‘ClientName’]