Firemonkey style in Listbox - retrieving data - image

I'm trying to get information from a Tlistbox in Firemonkey XE5 but it has an associated style where each item in the listbox includes an image, a memo and some buttons.
When clicking on the button inside the listbox style, I can get information from that item.
I want to get information from a the memo box in the listbox separately. Previously, I would have got the text from item 1 by using the following code:
NewString:=ListBox1.items[1];
However, now each item in the listbox has more than one piece of information.
I can add a new Listbox item using the code as follows:
var Item: TListBoxItem;
begin
Item := TListBoxItem.Create(nil);
Item.Parent := ListBox1;
Item.StyleLookup := 'PlaylistItem';
Item.StylesData['Memo1']:='test text';
But, how do I read just the memo box of a particular item
Thanks
Aman
Update.
The solution is
Tempstr:=ListBox1.ItemByIndex(1).StylesData['Memo1'].AsString;
I'm now trying to work out how to get an image out as there isn't a AsImage or AsBitmap suffix.

I would advise subclassing TListBoxItem, then adding properties and methods to get/set the data from the style objects using FindStyleResource,
class TMemoListBoxItem = class(TListBoxItem)
protected
function GetMemoText: String;
procedure SetMemoText(const Text: String);
published
property MemoText: String read GetMemoText write SetMemoText;
end;
function TMemoListBoxItem.GetMemoText: String;
var O: TFMXObject;
begin
O := FindStyleResource('Memo1');
if O is TMemo then
Result := TMemo(O).Text
else
Result := '';
end;
procedure TMemoListBoxItem.SetMemoText(const Text: String);
var O: TFMXObject;
begin
O := FindStyleResource('Memo1');
if O is TMemo then
TMemo(O).Text := Text;
end;
And continue likewise for your other data.

Related

How to select a newly added ListBox entry?

I have a listbox (ListBox1) and a button (Button1). When I click on the button, a new item is added to the listbox. If I click on the newly added item, it is highlighted. If I add another item to the listbox, the previously selected item is still highlighted. I want it so that the item that I add gets highlighted (selected) automatically.
How do I do this?
Thanks in advance.
Assign the ItemIndex property of the list box. For example...
ListBox1.ItemIndex := ListBox1.Items.Count-1;
The -1 is because lists are 0 based.
Alternatively, you can obtain the index of the new item directly when you call Add(), so...
var
I: Integer;
begin
I:= ListBox1.Items.Add('Some Value');
ListBox1.ItemIndex := I;
end;
Or even more simple:
ListBox1.ItemIndex := ListBox1.Items.Add('Some Value');

Scraping images from Website in delphi with twebbrowser

im trying to make a small tool which downloads all images from the site visited. It have to be made with twebbrowser component. The test site from my customer is Click. At the moment im selecting the pictures with getelementbyid but some of the pictures dont have a id. How can i adress the missing ones? Thanks alot
After the page is loaded, query the TWebBrowser.Document property for the IHTMLDocument2 interface, and then you can enumerate the elements of the IHTMLDocument2.images collection:
var
Document: IHTMLDocument2;
Images: IHTMLElementCollection;
Image: IHTMLImgElement;
I: Integer;
begin
Document := WebBrowser1.Document as IHTMLDocument2;
Images := Document.images;
For I := 0 to Images.length - 1 do
begin
Image := Images.item(I, '') as IHTMLImgElement;
// use Image as needed...
end;
end;
Note that this will only find images in HTML <img> tags. If you need to find images in <input type="image"> tags as well, you will have to enumerate the elements of the IHTMLDocument2.all collection looking for instances of the IHTMLInputElement interface whose type property is "image", eg:
var
Document: IHTMLDocument2;
Elements: IHTMLElementCollection;
Element: IHTMLElement;
Image: IHTMLImgElement;
Input: IHTMLInputElement;
I: Integer;
begin
Document := WebBrowser1.Document as IHTMLDocument2;
Elements := Document.all;
For I := 0 to Elements.length - 1 do
begin
Element := Elements.item(I, '') as IHTMLElement;
if Element is IHTMLImgElement then begin
Image := Element as IHTMLImgElement;
// use Image as needed...
end
else if Element is IHTMLInputElement then begin
Input := Element as IHTMLInputElement;
if Input.type = 'image' then
begin
// use Input as needed...
end;
end;
end;
end;
Instead of requesting a specific element by id, you can "walk" the document and look at each element using WebDocument.all.item(itemnum,'').
var
cAllElements: IHTMLElementCollection;
eThisElement: IHTMLElement;
WebDocument: IHTMLDocument2;
=======
cAllElements:=WebDocument.All
For iThisElement:=0 to cAllElements.num-1 do
begin
eThisElement:=cAllElements.item(iThisElement,'') as IHTMLElement;
// check out eThisElement and do what you want
end;
You would then look at the element .tagName for IMG, or do whatever assessment you need in order to determine if it is a picture and handle it as you did before.
Dan

TimageList does not contain a member named GetBitmap

I want to load pictures from an ImageList to a TImage (mobile application, fmx). The TImage is part of my customstyle Listbox (LBItem.StylesData['myimage']). The standard approach would be ImageList.GetBitmap(). However the GetBitmap method gives me an error: 'TimageList does not contain a member named GetBitmap'. Any explanation or alternatives? Thanks in advance!
procedure TForm3.Button1Click(Sender: TObject);
var
i : Integer;
LBItem : TListBoxItem;
Bitmap : TBitMap;
begin
ListBox1.BeginUpdate;
ListBox1.Items.Clear;
Bitmap := TBitMap.Create;
try
for i := 0 to 3 do begin
LBItem := TListBoxItem.Create(nil);
LBItem.Parent := ListBox1;
LBItem.StyleLookup := 'mystyle';
LBItem.StylesData['mylabel'] := 'Some text...';
//Bitmap.LoadFromFile('D:\Koala.jpg');
ImageList1.GetBitmap(i, Bitmap);
LBItem.StylesData['myimage']:= Bitmap;
end;
finally
ListBox1.EndUpdate;
end;
end;
Assuming you have an TImage with name Image1, a TImageList with name ImageList1 and at least one entry in the list with image for scale 1.0 called Image1Hover, then you can use the following example to load a "hover picture" in the OnEnter event of Image1:
procedure TForm1.Image1MouseEnter(Sender: TObject);
var
Item: TCustomBitmapItem;
Size: TSize;
begin
ImageList1.BitmapItemByName('Image1Hover', Item, Size);
Image1.Bitmap := Item.MultiResBitmap.Bitmaps[1.0];
end;
This answer is translate from fire-monkey.ru
Use ImageList1.Bitmap(Size, Index);. The size is in physical pixels, i.e. we consider the scale independently (this method knows nothing about the scale of the canvas). This function selects the most appropriate size of the image that is available.
So, your code should look something like this:
LBItem.StylesData['myimage'] := ImageList1.Bitmap(
TSizeF.Create(myImageWidth * Canvas.Scale, myImageHeight * Canvas.Scale),
i);
// Not sure of the correctness of this assignment to 'myimage'
Note 1 All the bitmaps obtained in the 'ImageList1.Bitmap` are stored in the imagelist cache. So don't release them.
Note 2 ListBox has internal mechanism to interact with ImageList. Try to use icon: TImage style item and LBItem.ImageIndex property, without load bitmaps.
In FMX you don't need any additional coding for that, just use TGlyph instead of TImage if you want to display images directly form ImageList.
example :
Glyph1.ImageIndex := i;

Firemonkey use StylesData to set property of array object in style

I try to set the property of an object when filling a ListBox with ListBoxItems. The object is an ellipse added to the style used by the ListBox. The line of code below raises an exception:
ListBoxItem.StylesData['ellipsestyle.fill.Gradient.Points.Points[0].Color'] := newAlphaColor;
As a workaround, I tried to reach the property by getting the ellipsestyle object with ListBoxItem.FindStyleRessource, but the function returns nil.
Thank you !
StylesData can`t provide access to 'complex' properties.
you can do next workaround:
var
Obj: TObject;
myListBoxItem: TListBoxItem;
begin
// create new item
myListBoxItem:=TListBoxItem.Create(nil);
ListBox1.AddObject(myListBoxItem);
myListBoxItem.StyleLookup:='listboxitembottomdetail';
myListBoxItem.StylesData['ellipsestyle.fill.Kind']:=TValue.From<TBrushKind>(TBrushKind.Gradient);
// access to GradientPoints collection
Obj:=myListBoxItem.StylesData['ellipsestyle.fill.Gradient.Points'].AsObject;
if not (Obj is TGradientPoints) then
Exit;
TGradientPoints(Obj).Points[0].Color:=TAlphaColorRec.Blanchedalmond;
TGradientPoints(Obj).Points[1].Color:=TAlphaColorRec.Alpha;
About FindStyleResource:
First place, where you can get access to style object - OnApplyStyleLookup event of specified ListBoxItem. Before OnApplyStyleLookup (for example - immediatelly after creating Listboxitem) you cannot get access to style.
So, move your code to ListBoxItem.OnApplyStyleLookup and change it like this:
procedure TForm2.ListBoxItem1ApplyStyleLookup(Sender: TObject);
var
FMXObj: TFmxObject;
Ellipse: TEllipse;
begin
if not (Sender is TFmxObject) then
Exit;
FMXObj:=TFMXObject(Sender).FindStyleResource('ellipsestyle');// get object by it`s "StyleName".
if not (FMXObj is TEllipse) then
Exit;
Ellipse:=TEllipse(FMXObj);
Ellipse.Fill.Kind:=TBrushKind.Gradient;
Ellipse.Fill.Gradient.Points.Points[0].Color:=TAlphaColorRec.Blueviolet;
Ellipse.Fill.Gradient.Points.Points[1].Color:=TAlphaColorRec.Greenyellow;
end;
Also, you can force load style (this is not recommended way - by default, style for object loaded at the time of first painting):
var
FMXObj: TFmxObject;
Ellipse: TEllipse;
myListBoxItem: TListBoxItem;
begin
myListBoxItem:=TListBoxItem.Create(nil);
ListBox1.AddObject(myListBoxItem);
myListBoxItem.StyleLookup:='listboxitembottomdetail';
// force load style
myListBoxItem.NeedStyleLookup;
myListBoxItem.ApplyStyleLookup; // this method also call OnApplyStyleLookup event
FMXObj:=myListBoxItem.FindStyleResource('ellipsestyle');
if not (FMXObj is TEllipse) then
Exit;
Ellipse:=TEllipse(FMXObj);
Ellipse.Fill.Kind:=TBrushKind.Gradient;
Ellipse.Fill.Gradient.Points.Points[0].Color:=TAlphaColorRec.Blanchedalmond;
Ellipse.Fill.Gradient.Points.Points[1].Color:=TAlphaColorRec.Alpha;

Custom styled Firemonkey list box item not highlighted on click on android and iOS

I'm building multiplatform( iOS, Android, OSX, Windows APP) in Firemonkey. One of the things I'm trying to do is create a custom listbox item( with more data elements) that will work on all these platforms:
will give you ability to select item(s), display properly.
According to research I did, probably the best way for this is to create custom style for list box item and define data elements there. That's what I did.
I'm creating items from client dataset in this procedure:
procedure TMasterDetailForm.LoadAvailable;
var i: Integer;
Item: TListBoxItem;
begin
lstAvailable.Clear;
//Add Header
lstAvailable.BeginUpdate;
Item := TListBoxItem.Create( lstAvailable );
Item.Parent := lstAvailable;
Item.Height := 70;
//Item.OnApplyStyleLookup := ListItemApplyStyleLookupHandler;
Item.StyleLookup := AvailableListHeaderStyle;
//Add Details
cdsAvailable.First;
for I := 1 to cdsAvailable.RecordCount do
begin
Item := TListBoxItem.Create( lstAvailable );
Item.Parent := lstAvailable;
Item.Height := 50;
//Item.Selectable := True;
//Item.OnApplyStyleLookup := ListItemApplyStyleLookupHandler;
Item.StyleLookup := AvailableListItemStyle;
//Item.StyleLookup := 'ListboxItem1Style1';
Item.StylesData[ txtWoNum ] := cdsAvailable.FieldByName( 'work package' ).AsString;
Item.StylesData[ txtAircraft ] := cdsAvailable.FieldByName('aircraft').AsString;
Item.StylesData[ txtTaskDescription ] := cdsAvailable.FieldByName('task').AsString;
cdsAvailable.Next;
end;
lstAvailable.EndUpdate;
end;
Everything gets styled properly on all platforms, except that tapping(clicking) on ListBoxItem on Android or iOS, doesn't highlight the ListBoxItem. If I unissign style then selecting items also works.I can't figure out how to fix this.
Btw, onclick event on ListBox seems to work properly( itemindex changes).
Any input will be greatly appreciated.
Edit( 12/12/2014) : I tried simplifying the example by adding items manually in the ListBox editor and discarding this code here, and I found out that animation for selecting the listbox item changes. So, I customized the listbox item and only changed TextColor to blue. In runtime on Android when you select the listbox item it just changes the color of the text to black instead of painting the whole row. Any ideas how to have listbox behave in similar way like when there is no style attached to it?
Sorry my english is bad.
I have a solution (tested in XE7):
Open a form
Change the IDE Style to "iOS"
Select the TListBox an open a context menu and select "Edit Default
Style": the StyleBook2 is created.
Add a TRectangle component in the style "listboxstyle/background"
with the name "selection". This is the magic!
Now, Firemonkey found the 'selection' component and work fine!
If you already have StyleBook2 component before these steps, you may need to delete it, be careful!

Resources