Jump to content

TW3Listbox questions


Recommended Posts

I am new to Mobile Studio and tries to evaluate it by making some small projects.

 

I have created a page with TW3Listbox and tries to add some data.

 

ActionList.Add('item 1');

ActionList.Add('item 2');

 

The items are added, but the text is not visible. Am I doing something wrong?

 

Second question on Listbox:

Is it possible to format each "item", like having a header with larger text and a body with smaller text and a checkbox?

How can this be accomplished?

 

Kind Regards

Jan Blomqvist

Link to post
Share on other sites
  • Administrators

1) This happens if you add items to the list box from InitializeObject. DOM objects are not yet completely created at that point and that breaks the process (don't yet know why). A solution is to add items from (for example) Resize method.

 

Add a FInitialized: boolean field to the form and change the Resize method.

 

 
procedure TForm1.Resize; 
begin 
  inherited; 
  if not FInitialized then begin 
    ActionList.Add('Item 1'); 
    ActionList.Add('Item 2'); 
    FInitialized := true; 
  end; 
end; 

 

2) This requires a bit more work.

 

a) Create a new form which will serve as a template for each listbox item. I named it LBItem and put two components on it - W3Header: TW3Label and W3Checkbox: TW3Checkbox.

 

B) Expose those component so that the main form will be able to access them. The easiest way to do it is to add properties to the TLBItem form.

 

 
  public 
    property Header: string read (W3Header.Caption) write (W3Header.Caption); 
    property Checkbox: TW3Checkbox read W3Checkbox; 

 

c) Initialize components in the InitializeObject.

 

 
procedure TLBItem.InitializeObject; 
begin 
  inherited; 
  {$I 'LBItem:impl'} 
  W3Header.Font.Size := 16; 
end; 

 

d) Resize components according to the container (list item). Simplest way to do this is to add W3Layout to the uses list and use Layout manager to resize them.

 

 
procedure TLBItem.Resize; 
begin 
  inherited; 
  Layout.Top(Layout.Padding(3), [W3Header, W3Checkbox]).Resize(Self); 
end; 

 

e) Add LBItem to the uses list of the main form. Create items in the Resize method.

 

 
procedure TForm1.Resize; 
begin 
  inherited; 
  if not FInitialized then begin 
    AddItem('Header 1', 'Checkbox 1', true); 
    AddItem('Header 2', 'Checkbox 2', false); 
    FInitialized := true; 
  end; 
end; 

 

f) When initializing main form, set ItemClass property of the listbox to TLBItem.

 

 
procedure TFormMain.InitializeObject; 
begin 
  inherited; 
  {$I 'Main:impl'} 
  ActionList.ItemClass := TLBItem; 
  ActionList.ItemHeight := 96; 
  ActionList.Styles.SelectedColor := clSilver; 
end; 

 

g) To create a listbox item from a template, first call TW3ListBox.Add (without a parameter) and then create an instance of the TLBItem form owned by the item object that was just created inside the Add call.

 

 
procedure TForm1.AddItem(header: String; checkbox: String; checked: Boolean); 
begin 
  var lbItem := ActionList.Items[ActionList.Add] as TLBItem; 
  lbItem.Header := header; 
  lbItem.Checkbox.Caption := checkbox; 
  lbItem.Checkbox.Checked := checked; 
end; 

Link to post
Share on other sites

Well I did try that too (but only in LBItem) and then I got compiler errors.

This time I tried to add in both Main and LBItem forms and then it compiled ok.

 

I have three properties: Header, Text and Checkbox

 

However I only see the Text property in the new item in the listbox.

 

 
procedure TActionForm.AddItem(header,text: String; checkbox: String; checked: Boolean); begin 
  var item := ActionList.Add; 
  var lbItem := TLBItem.Create(ActionList.Items[item]); 
  lbItem.Header := header; 
  lbItem.Text   := text; 
  lbItem.Checkbox.Caption := checkbox; 
  lbItem.Checkbox.Checked := checked; 
end; 

Link to post
Share on other sites

Ok, I understand this part.

 

a) If I want to have the checkbox aligned to the right side, how do I do that?

B) When I click the Item (not just the checkbox area) I want to toggle the checkbox.

c) if the checkbox is initially checked, the whole item should be disabled, how?

 

d) And in the main form above the Listbox I want to have a Label.

 

Hopefully this helps me learn parts of the layout system as well.

Link to post
Share on other sites

Jan,

 

You can use the layout to move your checkbox to the right. You can also place a label or a TW3HeaderControl on your form and use the layout to align to the top.

 

You can add a OnClick event handler in your LBItem unit

 

 
 TLBItem=class(TW3form) 
  private 
    {$I 'LBItem:intf'} 
    procedure HandleCheckBoxClick(Sender: TObject); 
  protected 

  public 

  end; 

procedure TLBItem.HandleCheckBoxClick(Sender: TObject); 
begin 
 if TW3CheckBox(Sender).Checked then 
 ShowMessage('Checked') 
 else 
 ShowMessage('Not Checked') 
end; 

procedure TLBItem.InitializeObject; 
begin 
  inherited; 
  {$I 'LBItem:impl'} 
  W3Header.Font.Size := 18; 
  CheckBox.OnClick:= HandleCheckBoxClick; 
end; 

Link to post
Share on other sites
  • Administrators

a) You would need a more complicated layout for that.

 

 
procedure TLBItem.Resize; 
begin 
  inherited; 
  Layout.Client( 
    Layout.Padding(3), 
    [ 
      Layout.Top(W3Header), 
      Layout.Top(W3Text), 
      Layout.Client(Layout.Right(W3Checkbox)) 
    ]) 
  .Resize(Self); 
end; 

 

B) Write an OnSelected handler for the ActionList and toggle the checkmark there.

 

 
procedure TFormMain.InitializeObject; 
begin 
  inherited; 
  {$I 'Main:impl'} 
  ActionList.ItemClass := TLBItem; 
  ActionList.ItemHeight := 96; 
  ActionList.Styles.SelectedColor := clSilver; 
  ActionList.OnSelected := ToggleCheckbox; 
end; 

procedure TFormMain.ToggleCheckbox(Sender: TObject; itemIndex: Integer); 
begin 
  var item := ActionList.Items[itemIndex] as TLBItem; 
  item.Checkbox.Checked := not item.Checkbox.Checked; 
end; 

 

c) You can not disable a listbox item.

 

I have updated the sample program.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...