OrangeUI

随着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;





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