×

Discussion Board

Results 1 to 10 of 10
  1. #1
    Registered User
    Join Date
    Sep 2008
    Location
    Vancouver, Canada
    Posts
    588

    How to create a custom listbox with graphics and double text items?

    Hi

    I want to create a simple custom listbox just like the one attached with the post. Please have a look at that.
    I want to create this listbox using symbian c++. The listbox should work on both qwerty and touch smartphones in terms of scrolling.

    The listbox should be scrollable and will contain infinite elements. I have not worked on custom listboxes yet.

    Can you please describe how to go about this type of listbox?

    Any links or suggestions would be helpful.

    Thanks
    Raj
    Attached Images Attached Images
    Last edited by raj8nokiaforum; 2013-04-27 at 18:04.

  2. #2
    Nokia Developer Champion
    Join Date
    Jun 2008
    Location
    Noida,India
    Posts
    4,089

    Re: How to create a custom listbox with graphics and double text items?

    Making such listbox involves the following steps(at-least which i did in my projects)

    1) Create an array(containing the same number of elements which needs to be shown on screen) of rectangles(TRect's) equally divided(actually it depends whether the size of listbox items is equal or it can vary from item to item), e.g. RArray<TRect> iRectArray. Fill this array with TRect values for each element, containing the extent of each element.

    E.g.

    Code:
    for (iCount = 0; iCount <iListCount; iCount++)
       {			
    	 if(iCount==0)
    		 iRectArray.Append(TRect(aRect.iTl.iX+5, aRect.iTl.iY+10, aRect.iBr.iX-20, aRect.iTl.iY + 60));	
    	 else
    		 iRectArray.Append(TRect(aRect.iTl.iX+5, iRectArray[iCount-1].iBr.iY+10, aRect.iBr.iX-20, iRectArray[iCount-1].iBr.iY + 60));
         }
    
    iListCount--- > no of listbox elements to be shown on screen
    iRectArray ----->RArray<TRect> iRectArray;
    So in brief,what does above code stands for : each listbox item will start from (5,10) position & will have a width : screensize-20 & height : 50 & this would be done in SizeChanged() method of the container, along with other things like setting image size etc. class.

    2) Drawing listbox items as per the filled up array which should be done in Draw() method of the container. Now, the listbox items may contain different elements like image, text etc as there are in the screenshot you shared. E.g:

    Code:
    		   for (TInt iCount = 1; iCount <= iListCount; iCount++)
    				{	
    		  
    			   gc.BitBltMasked(TPoint(iRectArray[iCount-1].iTl.iX + 20 , iRectArray[iCount-1].iTl.iY + 15),iSomeBitmap, iiSomeBitmapRect, iSomeBitmapMask,EFalse);draw some bitmap at the position you want inside the rectangle assigned for that listbox item
                                gc.DrawText(iTitle,TPoint(iRectArray[iCount-1].iTl.iX + 78,iRectArray[iCount-1].iTl.iY + 35)); // draw some text at the position you want inside the rectangle assigned for that listbox item
    			   if(iCount!=iListCount)
                                      gc.DrawLine(TPoint(iRectArray[iCount-1].iTl.iX+8 , iRectArray[iCount-1].iBr.iY+5),TPoint(iRectArray[iCount-1].iTl.iX+8+iRectArray[iCount-1].Size().iWidth, iRectArray[iCount-1].iBr.iY+5)); //// the partition between listbox elements
    					 }
    
    running this for loop will result into the drawing of listbox as per the array of rectangle taken in SizeChanged() & will look like a real listbox drawn.

    May be i didn't explained it quite well but it might be enough for you to at-least start & share your progress here. The scrolling part, i'll explain later when you have reached drawing the listbox.

  3. #3
    Registered User
    Join Date
    Sep 2008
    Location
    Vancouver, Canada
    Posts
    588

    Re: How to create a custom listbox with graphics and double text items?

    Thanks Vineet.

    I guess whatever you explained is good enough for me to start off. And surely I will be posting the updates here.

    Thanks once again.
    Raj

  4. #4
    Registered User
    Join Date
    Sep 2008
    Location
    Vancouver, Canada
    Posts
    588

    Re: How to create a custom listbox with graphics and double text items?

    I had another thought in my mind.

    The way we discussed so far does not involve deriving the custom listbox class from any type of native listboxes (CAknSingleStyleListbox for e.g). I was thinking it would be that way. Is it not feasible to create such a listbox that way or is it something else. Because I think if we do it that way, at least we won`t have to be bothered about scrolling the listbox. But I am not sure with that.

    Meanwhile I am using the method we discussed already to create the listbox.

  5. #5
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Oslo, Norway
    Posts
    28,751

    Re: How to create a custom listbox with graphics and double text items?

    You can find related articles in the Wiki, like http://www.developer.nokia.com/Commu...ymbian_C%2B%2B (a Google search for custom listbox site:nokia.com wiki finds it), and I tend to remember that there can be more (yeah, I am cheating, since I knew in advance that the article existed)

  6. #6
    Nokia Developer Champion
    Join Date
    Jun 2008
    Location
    Noida,India
    Posts
    4,089

    Re: How to create a custom listbox with graphics and double text items?

    Well what i suggested is not a 'listbox' in actual , but a combination of drawing text & images on screen.The same code can be used to draw any custom text/image on screen without using any native components & scroll can be implemented to it then, if controls/items are out of visible area of the screen

    With deriving listbox from native API's for converting it into a custom one, there might be some restrictions on the format you can display etc, which are completely eliminated in the implementation explained.

    I was browsing through the same link which Wizard posted & as visible its not in a proper format making it bit difficult to understand, though you may always give it a try.

  7. #7
    Registered User
    Join Date
    Sep 2008
    Location
    Vancouver, Canada
    Posts
    588

    Re: How to create a custom listbox with graphics and double text items?

    yes Vineet. I also have seen that link already but does not seem clean to me as well.

    Anyways, I could not start working because of some reasons but now i am going to try that one out.
    Although, i have few doubts about that:
    if(iCount==0)
    iRectArray.Append(TRect(aRect.iTl.iX+5, aRect.iTl.iY+10, aRect.iBr.iX-20, aRect.iTl.iY + 60));
    - in the code snippet, I was wondering what the dimensions of this TRect are. Is this just a plain TRect declared or do we have to give that some particular size?

    gc.BitBltMasked(TPoint(iRectArray[iCount-1].iTl.iX + 20 , iRectArray[iCount-1].iTl.iY + 15),iSomeBitmap, iiSomeBitmapRect, iSomeBitmapMask,EFalse);
    - similarly, i could not make out the same about iiSomeBitmapRect.

    can you please elaborate that?

    thanks
    raj

  8. #8
    Nokia Developer Champion
    Join Date
    Jun 2008
    Location
    Noida,India
    Posts
    4,089

    Re: How to create a custom listbox with graphics and double text items?

    To illustrate it more clearly, i have attached a visual example. Basically listbox items are a set of rects( the array of TRect, denoted by iRectArray here). The size of the TRect would be defined by you only depending upon the extent of content of each item (if all the listbox items are identical, then you may provide some hard-coded value of size of each rect , else you need to calculate it)

    TRect iiSomeBitmapRect(TPoint(0, 0), iSomeBitmap->SizeInPixels()); // this will be similar for all the images drawn using gc.BitBltMasked
    Attached Images Attached Images

  9. #9
    Registered User
    Join Date
    Sep 2008
    Location
    Vancouver, Canada
    Posts
    588

    Re: How to create a custom listbox with graphics and double text items?

    Ok and how about aRect in

    if(iCount==0)
    iRectArray.Append(TRect(aRect.iTl.iX+5, aRect.iTl.iY+10, aRect.iBr.iX-20, aRect.iTl.iY + 60));
    What would be the dimensions of this aRect?

  10. #10
    Nokia Developer Champion
    Join Date
    Jun 2008
    Location
    Noida,India
    Posts
    4,089

    Re: How to create a custom listbox with graphics and double text items?

    TRect aRect = Rect(); implies the whole rectangle(container size) , declared at the starting of SizeChanged();

Similar Threads

  1. How to create a horizontal separator between listbox items
    By ashraf fawzy in forum Symbian User Interface
    Replies: 1
    Last Post: 2011-07-14, 08:36
  2. How to create Listbox with items with additional text(date) to the right
    By stargate88 in forum Symbian User Interface
    Replies: 7
    Last Post: 2009-10-30, 15:01
  3. Adding Items to Custom ListBox at runtime
    By nickyc in forum Symbian User Interface
    Replies: 0
    Last Post: 2007-05-01, 14:15
  4. Hiding listBOX text/ITEMS
    By fadinux in forum Symbian User Interface
    Replies: 1
    Last Post: 2004-08-02, 08:33
  5. Getting text from items of ListBox
    By valentin_da_itiv in forum Symbian
    Replies: 10
    Last Post: 2003-10-17, 09:20

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×