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. 


3. 给每个控件命好名字,比如lblClientName这个Label表示用于显示客户名称，lblBillState这个Label表示用于显示单据状态。


4. 再给列表项样式命好名字


5. 


6. 再安装一次OrangeUI


7. 再赋给ListBox.Properties.DefaultItemStyle，并在单元中引用该样式。


8. 

 
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’]