BEML ListItem with border

[aw]

Hi,

i use your standard scrolling Tumbnail module, TileList with ListItem.

Is it possible to change the bordersize or ist it a standard value? I can't find

a paramater in the BEML Reference. I can only set the thumnailsize and an inset to expand the "border", but thats

not the same if i like a different background color and different bordercolor.

Thanx for your help.

[digi-alex]

So, you essentially want to create two borders around the ThumbnailButton? That is, a border and a background?

Maybe you could use the ThumbnailButton imageInset as the border, and then wrap the ThumbnailButton element inside of another container like a VBox and give it a background color and padding.

For instance, this should create a 3 pixel red border around the ThumbnailButton, and then the ThumbnailButton uses as 3 pixel imageInset to create a second border around the actual image.

<VBox backgroundColor='0xFF0000' height='66' width='74' padding='3'>
<ThumbnailButton height='60' data='{currentItem}' source='{currentItem.thumbnailURL}' imageInset='3' />
</VBox>

 

[BC-JHuebner · Accepted solution]

You can create a border effect by putting one box inside another. For example this BEML would make a 10 pixel black border around each ListItem:

<List id='videoList' rowHeight='98' automaticAdvance='true'
    data='{playlistTabs.selectedItem.videoDTOs}' selectOnClick='true'
    itemInsetV='4' itemLeading='2'>
    <ListItem boxType="vbox" backgroundColor="0x000000" padding="10">
        <HBox backgroundColor="0xffffff">
            <Spacer width='8'/>
            <VBox width='80' height='74' vAlign='middle'>
                <ThumbnailButton height='60' data='{currentItem}'
                    source='{currentItem.thumbnailURL}'/>
            </VBox>
            <Spacer width='7'/>
            <VBox>
                <Spacer height='3'/>
                <TitleLabel height='18'
                    text='{currentItem.displayName}'
                    truncate='true'/>
                <Label height='52' multiline='true'
                    text='{currentItem.shortDescription}'
                    truncate='true'/>
            </VBox>
            <Spacer width='3'/>
        </HBox>
    </ListItem>
</List>

Note that the height of the list had to increase by twice the value of the padding attribute to make room for the border.

Does that help?

Message Edited by BC-JHuebner on 07-02-2009 04:32 PM

Message Edited by BC-JHuebner on 07-02-2009 04:35 PM

Message Edited by BC-JHuebner on 07-02-2009 04:36 PM