Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Standard Widget Toolkit (SWT) » [SOLVED] Setting images of different widths to TableItem(Images inside a TableItem are scaled to equal dimensions)
icon5.gif  [SOLVED] Setting images of different widths to TableItem [message #634782] Sat, 23 October 2010 14:02 Go to next message
Albert Pikus is currently offline Albert PikusFriend
Messages: 70
Registered: October 2009
Member
Hi,

I wonder if it is possible to set images of different widths to a TableItem.

I have a Table that has two columns; TableItems of the first column should host images 50 pixels wide, while the items of the second one should host images 16 pixels wide. But once the first image is set, all the other images are scaled to have the same width as the first one and thus appear malformed.

Javadoc on TableItem doesn't mention this problem, but I have found an article ( http://book.javanb.com/swt-the-standard-widget-toolkit/ch09l ev1sec2.html) stating "The First Image Defines the Size of All Images in the Control".

Is there any workaround for this limitation to be bypassed, or is setting images of different widths to TableItem entirely impossible?


Thank you for your answers, best regards,

Albert

[Updated on: Thu, 04 November 2010 08:37]

Report message to a moderator

Re: Setting images of different widths to TableItem [message #634783 is a reply to message #634782] Sat, 23 October 2010 14:38 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6501
Registered: July 2009
Senior Member
you need to use owner draw.

tom

Am 23.10.10 16:02, schrieb Albert:
> Hi,
>
> I wonder if it is possible to set images of different widths to a
> TableItem.
>
> I have a Table that has two columns; TableItems of the first column
> should host images 50 pixels wide, while the items of the second one
> should host images 16 pixels wide. But once the first image is set, all
> the other images are scaled to have the same width as the first one and
> thus appear malformed.
>
> Javadoc on TableItem doesn't mention this problem, but I have found an
> article
> ( http://book.javanb.com/swt-the-standard-widget-toolkit/ch09l ev1sec2.html)
> stating "The First Image Defines the Size of All Images in the Control".
>
> Is there any workaround for this limitation to be bypassed, or is
> setting images of different widths to TableItem entirely impossible?
>
>
> Thank you for your answers, best regards,
>
> Albert
>
Re: Setting images of different widths to TableItem [message #635041 is a reply to message #634783] Mon, 25 October 2010 13:58 Go to previous messageGo to next message
Grant Gayed is currently offline Grant GayedFriend
Messages: 2151
Registered: July 2009
Senior Member
For info on owner draw see
http://www.eclipse.org/articles/article.php?file=Article-Cus tomDrawingTableAndTreeItems/index.html .
In the absence of using owner draw, "The First Image Defines the Size of All
Images in the Control" is correct, due to native platform behaviour.

Grant


"Tom Schindl" <tom.schindl@bestsolution.at> wrote in message
news:i9urqv$727$1@news.eclipse.org...
> you need to use owner draw.
>
> tom
>
> Am 23.10.10 16:02, schrieb Albert:
>> Hi,
>>
>> I wonder if it is possible to set images of different widths to a
>> TableItem.
>>
>> I have a Table that has two columns; TableItems of the first column
>> should host images 50 pixels wide, while the items of the second one
>> should host images 16 pixels wide. But once the first image is set, all
>> the other images are scaled to have the same width as the first one and
>> thus appear malformed.
>>
>> Javadoc on TableItem doesn't mention this problem, but I have found an
>> article
>> ( http://book.javanb.com/swt-the-standard-widget-toolkit/ch09l ev1sec2.html)
>> stating "The First Image Defines the Size of All Images in the Control".
>>
>> Is there any workaround for this limitation to be bypassed, or is
>> setting images of different widths to TableItem entirely impossible?
>>
>>
>> Thank you for your answers, best regards,
>>
>> Albert
>>
>
Re: Setting images of different widths to TableItem [message #636166 is a reply to message #635041] Fri, 29 October 2010 14:05 Go to previous messageGo to next message
Albert Pikus is currently offline Albert PikusFriend
Messages: 70
Registered: October 2009
Member
Thank you both for your answers, I'll take a look at owner draw.


Best regards,

Albert

Grant Gayed wrote on Mon, 25 October 2010 09:58
For info on owner draw see
http://www.eclipse.org/articles/article.php?file=Article-Cus tomDrawingTableAndTreeItems/index.html .
In the absence of using owner draw, "The First Image Defines the Size of All
Images in the Control" is correct, due to native platform behaviour.

Grant


"Tom Schindl" <tom.schindl@bestsolution.at> wrote in message
news:i9urqv$727$1@news.eclipse.org...
> you need to use owner draw.
>
> tom
>
> Am 23.10.10 16:02, schrieb Albert:
>> Hi,
>>
>> I wonder if it is possible to set images of different widths to a
>> TableItem.
>>
>> I have a Table that has two columns; TableItems of the first column
>> should host images 50 pixels wide, while the items of the second one
>> should host images 16 pixels wide. But once the first image is set, all
>> the other images are scaled to have the same width as the first one and
>> thus appear malformed.
>>
>> Javadoc on TableItem doesn't mention this problem, but I have found an
>> article
>> ( http://book.javanb.com/swt-the-standard-widget-toolkit/ch09l ev1sec2.html)
>> stating "The First Image Defines the Size of All Images in the Control".
>>
>> Is there any workaround for this limitation to be bypassed, or is
>> setting images of different widths to TableItem entirely impossible?
>>
>>
>> Thank you for your answers, best regards,
>>
>> Albert
>>
>

Re: Setting images of different widths to TableItem [message #636718 is a reply to message #634782] Tue, 02 November 2010 14:37 Go to previous messageGo to next message
Albert Pikus is currently offline Albert PikusFriend
Messages: 70
Registered: October 2009
Member
Hi,

I managed to retain proper image widths using PaintItem event, but this results in strange behavior inside a listener listening for SWT.MouseDown events.

Namely, I would like to achieve the following:

I have a table with four columns and I want the first column to have images 48 px wide. Second column doesn't have images and the third and fourth column have images of size 10 x 10 px that should change when a cell in third or fourth column is clicked (I want to simulate checkbox with an image, because of a poor performance of TableEditor).

But now, when a cell in the third or fourth column is clicked, I get the second image next to the old one. Inside my MouseListener, before the cell is clicked, TableItem.getImage(atColumnIndex) returns null, although the image is there, set by using PaintItem.

Besides, I'm getting data into the table from an external source and I don't know how to use PaintItem in order to set correct image inside the third and fourth column depending on a boolean value.


Any help would be appreciated,

Albert

[Updated on: Tue, 02 November 2010 15:07]

Report message to a moderator

Re: Setting images of different widths to TableItem [message #636741 is a reply to message #636718] Tue, 02 November 2010 15:59 Go to previous messageGo to next message
Grant Gayed is currently offline Grant GayedFriend
Messages: 2151
Registered: July 2009
Senior Member
If you're painting the item contents then you shouldn't need to
get/setImage() on any items since you're drawing them. Is it possible that
you're initially doing this properly, but then when a third/fourth-column
cell is clicked you're setting the image into the item and then drawing a
second one beside it? It's difficult to make a better guess than this
without seeing any of your code, or ideally a runnable snippet with template
http://www.eclipse.org/swt/faq.php#whatisasnippet .

Grant


"Albert" <albert.pikus@gmail.com> wrote in message
news:iap7hb$8he$1@news.eclipse.org...
> Hi,
>
> I managed to retain proper image widths using PaintItem event, but this
> results in strange behavior inside a listener listening for SWT.MouseDown
> events.
>
> Namely, I would like to achieve the following:
>
> I have a table with four columns and I wish that first column has 48 px
> wide images. Second column doesn't have images and the third and fourth
> column have images of size 10 x 10 px that should change when a cell in
> third or fourth column is clicked (I want to simulate checkbox with an
> image, because of a poor performance of TableEditor).
>
> But now, when cells in the third or fourth columns are clicked, I get the
> second image next to the old one. Inside my MouseListener, before the cell
> is clicked, TableItem.getImage(i) returns null, although the image is
> there, set by using PaintItem.
>
> Besides, I'm getting data into the table from an external source and I
> don't know how to use PaintItem in order to set correct image inside the
> third and fourth column depending on what boolean value data has.
>
>
> Any help would be appreciated,
>
> Albert
>
Re: Setting images of different widths to TableItem [message #636875 is a reply to message #636741] Wed, 03 November 2010 08:26 Go to previous messageGo to next message
Albert Pikus is currently offline Albert PikusFriend
Messages: 70
Registered: October 2009
Member
Hi,

to simplify things, suppose I have a Table with two columns, the first one with images 48 px wide and the second one with images 10 px wide, representing boolean state. Images inside the second column change when cells from a second column are clicked, while the images from the first column don't change.

The first problem with using PaintEvent is filling the Table: how can I fill the second column with correct images (according to some boolean value that each object (represented as TableItem) has) when painting them? If I don't paint them, this is simple to achieve, since I'm using TableItem.setImage(atColumnIndex) when creating TableItems.

The second problem is changing images inside second column on MouseDown event (simulating check box behavior). How can I set appropriate image when a cell inside the second column is clicked if images were painted and I can't use TableItem.setImage(atColumnIndex)?

Here is the snippet that demonstrates what I want to achieve, without using PaintEvent. But this of course results in the second column images to be stretched to 48 px, which is the whole problem:

import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Image;
import org.eclipse.swt.graphics.ImageData;
import org.eclipse.swt.graphics.PaletteData;
import org.eclipse.swt.graphics.Point;
import org.eclipse.swt.graphics.Rectangle;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Event;
import org.eclipse.swt.widgets.Listener;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Table;
import org.eclipse.swt.widgets.TableColumn;
import org.eclipse.swt.widgets.TableItem;

public class DetectClickedCell
{
    public static void main(String[] args)
    {
        final Display display = new Display();
        Shell shell = new Shell(display);
        final Table table = new Table(shell, SWT.BORDER | SWT.V_SCROLL | SWT.FULL_SELECTION| SWT.MULTI);
        table.setHeaderVisible(true);
        table.setLinesVisible(true);
        final int rowCount = 64, columnCount = 2;
        
        final int FIRST_IMAGE_WIDTH = 48;
        final int CHECK_WIDTH = 10;
        
        // Default image for first table column, dimensions 48 x 10 px
        final Image firstImage = getImage(display, 0xFF0000, FIRST_IMAGE_WIDTH);
        
        // Image representing checked item state, dimensions 10 x 10 px, second column
        final Image checked = getImage(display, 0xFF, CHECK_WIDTH);
        
        // Image representing unchecked item state, dimensions 10 x 10 px, second column
        final Image unChecked = getImage(display, 0xFF00, CHECK_WIDTH);
        
        Image images[] = {checked, unChecked};
        
        for (int i = 0; i < columnCount; i++)
        {
            TableColumn column = new TableColumn(table, SWT.NONE);
            column.setText("Column " + i);
        }
        
        for (int i = 0; i < rowCount; i++)
        {
            TableItem item = new TableItem(table, SWT.NONE);
            for (int j = 0; j < columnCount; j++)
            {   
                if (j == 0)
                {
                    item.setText(j, "Item " + i + "-" + j);
                    
                    // Comment the following line in order to display
                    // second column images with correct width
                    item.setImage(j, firstImage);
                }                
                else
                {
                    int state = (int)Math.round(Math.random());
                    
                    item.setImage(j, images[state]);
                    
                    int[] data = {state};                    
                    item.setData(data);
                }
            }
        }

        for (int i = 0; i < columnCount; i++)
        {
            table.getColumn(i).pack();
        }

        Point size = table.computeSize(SWT.DEFAULT, 200);
        table.setSize(size);
        shell.pack();
        table.addListener(SWT.MouseDown, new Listener()
        {
            public void handleEvent(Event event)
            {
                Rectangle clientArea = table.getClientArea();
                Point pt = new Point(event.x, event.y);
                int index = table.getTopIndex();
                while (index < table.getItemCount())
                {
                    boolean visible = false;
                    TableItem item = table.getItem(index);
                    for (int i = 0; i < columnCount; i++)
                    {   
                        Rectangle itemRectangle = item.getBounds(i);
                        
                        if (itemRectangle != null && itemRectangle.contains(pt))
                        {   
                            int[] oldData = (int[]) item.getData();                            
                            int[] newData = new int[1];
                            
                            if (i == columnCount - 1)
                            {   
                                // If a cell inside the last column is clicked,
                                // change image on click
                                if (oldData[0] == 1)
                                {   
                                    item.setImage(i, checked);
                                    newData[0] = 0;
                                }
                                else
                                {
                                    item.setImage(i, unChecked);
                                    newData[0] = 1;
                                }   
                            }
                            item.setData(newData);
                        }
                        
                        if (!visible && itemRectangle.intersects(clientArea))
                        {
                            visible = true;
                        }
                    }
                    if (!visible)
                    {
                        return;
                    }
                    index++;
                }
            }
        });
        shell.open();
        while (!shell.isDisposed())
        {
            if (!display.readAndDispatch())
            {
                display.sleep();
            }   
        }
        display.dispose();
    }
    
    public static Image getImage(Display display, int color, int width)
    {
        PaletteData palette = new PaletteData(0xFF , 0xFF00 , 0xFF0000);
        ImageData imageData = new ImageData(width, 10, 24, palette);    

        for (int x = 0; x < width; x++)
        {
            for (int y = 0; y < 10; y++)
            {
                imageData.setPixel(x, y, color);
            }
        }
        
        return new Image(display,imageData);
    }
}



Best regards,

Albert

[Updated on: Wed, 03 November 2010 08:49]

Report message to a moderator

Re: Setting images of different widths to TableItem [message #636885 is a reply to message #636875] Wed, 03 November 2010 08:43 Go to previous messageGo to next message
Albert Pikus is currently offline Albert PikusFriend
Messages: 70
Registered: October 2009
Member
Hi,

there is another solution I can think of: second column images could be PNG images with added transparency on the left and on the right side of an image, so that would be equally wide as first column images (48 px). So the images wouldn't appear malformed (stretched). In this case I don't need to paint images anymore and everything could be achieved by using TableItem.setImage(atColumnIndex).


Best regards,

Albert
Re: Setting images of different widths to TableItem [message #636984 is a reply to message #636885] Wed, 03 November 2010 16:04 Go to previous messageGo to next message
Grant Gayed is currently offline Grant GayedFriend
Messages: 2151
Registered: July 2009
Senior Member
Yes that approach should work as well.

The question about showing images with various sizes comes up somewhat
frequently, so I've created a snippet that demonstrates how this is done
with custom draw, see
http://dev.eclipse.org/viewcvs/index.cgi/%7Echeckout%7E/org. eclipse.swt.snippets/src/org/eclipse/swt/snippets/Snippet349 .java .

Grant


"Albert" <albert.pikus@gmail.com> wrote in message
news:iar758$c7s$1@news.eclipse.org...
> Hi,
>
> there is another solution I can think of: second column images could be
> PNG images with added transparency on the left and on the right side of an
> image, so that would be equally wide as first column images (48 px). So
> the images wouldn't appear malformed (stretched). In this case I don't
> need to paint images anymore and everything could be achieved by using
> TableItem.setImage(atColumnIndex).
>
>
> Best regards,
>
> Albert
>
Re: Setting images of different widths to TableItem [message #637100 is a reply to message #636984] Thu, 04 November 2010 08:37 Go to previous message
Albert Pikus is currently offline Albert PikusFriend
Messages: 70
Registered: October 2009
Member
Hi,

Grant, thank you for your help and for the comprehensive snippet you provided. I decided though to use images with added transparency for my particular problem, since I think this is the easiest solution if I want to change images on MouseDown event when a Table cell is clicked.


Thanks again, greetings from Slovenia,

Albert
Previous Topic:How to Group text color
Next Topic:Radio button in a table
Goto Forum:
  


Current Time: Sun Aug 25 06:35:45 GMT 2019

Powered by FUDForum. Page generated in 0.03217 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top