Using theme for focused list item

[MegumiSawada]

Hi

I would like to use theme to make the border of list item red when the item is focused.
I have tried to use ListItem FocusedStyle but it seems not working.
How can I acheive my requirement with theme?

Theme: named #SWD

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_THM)
Define_Com Class(#Prim_vs.Style) Name(#LightStyle) Borderbrush(#Brush1)
Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(Red)
Define_Com Class(#Prim_thm.DrawStyle) Name(#ListItem) Focusedstyle(#LightStyle) Mouseoverstyle(#LightStyle)
End_Com

Web Page:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SWD)

Define_Com Class(#PRIM_LIST) Name(#List1) Displayposition(1) Left(8) Parent(#COM_OWNER) Tabposition(1) Top(40) Height(209) Width(657) Itemthemedrawstyle('#ListItem')
Define_Com Class(#PRIM_LIST.String) Name(#ColumnSTD_TEXT1) Columnwidth(341) Displayposition(1) Parent(#List1) Source(#STD_TEXT) Columnreadonly(False)
Define_Com Class(#STD_TEXT.Visual) Name(#STD_TEXT) Componentversion(1) Displayposition(2) Height(21) Left(8) Parent(#COM_OWNER) Tabposition(2) Top(8) Usepicklist(False) Width(569) Displayalignment(Right) Marginright(10) Editalignment(Right)

Evtroutine Handling(#Com_owner.Initialize)
Inz_List Named(#List1) Num_Entrys(5)
Endroutine

End_Com

Result

webpage.png (24.42 KiB) Viewed 10203 times

I appreciate your kind advice for this basic question...

Best Regards,
Megumi Sawada

[jyoung]

Hi Megumi,

A couple questions first, are you using a completely custom theme? Typically a theme will have a lot more components defined in it. Secondly, did you associate the theme with the page?

You can create a new theme that has all the styles already defined. Then you can modify the styles you need.

Theme.png (207.34 KiB) Viewed 10186 times

That should give you the following code in the theme

Code: Select all

* List Item
define_com class(#PRIM_THM.DrawStyle) name(#ListItem) focusedinactivestyle(#ListItemFocusedInactiveStyle) selectedinactivestyle(#ListItemSelectedInactiveStyle) focusedstyle(#ListItemFocusStyle) mouseoverstyle(#ListItemMouseOverStyle) selectedstyle(#ListItemSelectedStyle)

define_com class(#PRIM_VS.Style) name(#ListItemFocusedInactiveStyle) borderbrush(#ListItemFocusedInactiveBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemFocusedInactiveBorder) color(ThemeInactive)

define_com class(#PRIM_VS.Style) name(#ListItemSelectedInactiveStyle) backgroundbrush(#ListItemSelectedInactiveBackground) borderbrush(#ListItemSelectedInactiveBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemSelectedInactiveBorder) color(ThemeInactive)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemSelectedInactiveBackground) color(ThemeInactive)

define_com class(#PRIM_VS.Style) name(#ListItemFocusStyle) backgroundbrush(#ListItemFocusBackground) borderbrush(#ListItemFocusBorder) borderbottom(2) borderleft(2) borderright(2) bordertop(2)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemFocusBorder) color(222:10:64)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemFocusBackground) color(Theme100)

define_com class(#PRIM_VS.Style) name(#ListItemSelectedStyle) backgroundbrush(#ListItemSelectedBackground) borderbrush(#ListItemSelectedBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemSelectedBorder) color(Theme200)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemSelectedBackground) color(Theme200)

define_com class(#PRIM_VS.Style) name(#ListItemMouseOverStyle) backgroundbrush(#ListItemMouseOverBackground) borderbrush(#ListItemMouseOverBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemMouseOverBorder) color(Theme50)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemMouseOverBackground) color(Theme50)

To asscociate the theme with your page, add the theme's name to the component defintiton

Code: Select all

begin_com role(*EXTENDS #PRIM_WEB) height(488) width(769) theme(#JRYTestTheme)

Or just set the "Theme" property in the style section of the details Window.

properties.png (10.71 KiB) Viewed 10186 times

Then you should get your list item focus style.

focusitem.png (3.19 KiB) Viewed 10186 times

Hope this helps,
Joe

[MegumiSawada]

Hi Joe,

Thank you for your advice.
I've followed your instructions, but I was not able to get the expected result...
BackColor will be changed, but Border color doesn't change.

I'll keep trying. Thank you again!

Best Regards,
Megumi Sawada

[Stewart Marshall]

Hi Megumi

Border on a Prim_list list item is not currently available, so I'm surprised that Joe was been able to get something to work.

To make borders work effectively would require a significant increase in the complexity of the HTML generated for each cell and item and this would significantly impact performance.

There are a couple of alternatives.

If you're only using a single column you could use a reusable part with appropriate styling or you could use Prim_tree instead.

Regards

[MegumiSawada]

Hi Stewart,

Thank you for your advice.

I've just found out that before applying EPC141010(i.e. at EPC141006 level) list item could have red border. Maybe accidentally...

I'll use reusable parts with appropriate styling instead.

Best Regards,
Megumi Sawada

[jyoung]

Hi Stewart.

Hmm, I did not know this was not supposed to be possible. Perhaps I misunderstood Megmui's question.

I am on V14SP1 EPC 141006.

Maybe I did something wrong? I have a test page and test theme that I use. Here is the complete code of both.

Web Page (note it has my history testing in it)

Code: Select all

begin_com role(*EXTENDS #PRIM_WEB) height(488) width(769) theme(#JRYTestTheme)
define_com class(#prim_labl) name(#Label1) caption('Panel1') displayposition(3) left(32) parent(#COM_OWNER) tabposition(3) top(64) tabstop(False) themedrawstyle('LightTitle') height(34) width(209) alignment(Center) verticalalignment(Center)
define_com class(#prim_labl) name(#Label2) caption('Panel2') displayposition(2) left(32) parent(#COM_OWNER) tabposition(2) top(104) tabstop(False) themedrawstyle('LightTitle') height(34) width(209) alignment(Center) verticalalignment(Center)
define_com class(#prim_labl) name(#Label3) caption('Panel3') displayposition(1) left(32) parent(#COM_OWNER) tabposition(1) top(144) tabstop(False) themedrawstyle('LightTitle') height(34) width(209) alignment(Center) verticalalignment(Center)
define_com class(#PRIM_LIST) name(#List1) displayposition(4) left(417) parent(#COM_OWNER) tabposition(4) top(177)
define_com class(#PRIM_LIST.String) name(#ColumnSTD_STRNG1) displayposition(1) parent(#List1) source(#STD_STRNG)

define_com class(#prim_kcol<#prim_labl #xDemoCaption>) name(#Labels) style(Collection)

evtroutine handling(#Com_owner.CreateInstance)

for each(#Member) in(#Com_owner.ComponentMembers) operation(*Instance_of #prim_labl)

#Labels<#Member.Caption.UpperCase> <= #Member

endfor

#STD_INT := 1
dountil cond(#STD_INT > 5)
#STD_STRNG := "Hello " + #STD_INT.AsString
add_entry to_list(#List1)
* #List1.CurrentItem.ThemeDrawStyle := DrawStyle1
#STD_INT += 1
enduntil

endroutine

evtroutine handling(#Labels<>.Click) com_sender(#Sender)

#Com_owner.AddHistory( #Sender.Caption )

endroutine

mthroutine name(AddHistory)
define_map for(*Input) class(#Prim_Alph) name(#Panel)

define_com class(#Prim_alph) name(#QueryString)

for each(#Parameter) in(#sys_web.URLParameters)
continue if(#Parameter.Name.UpperCase = Panel)

if (#QueryString <> "")
#QueryString += "&"
endif

#QueryString += #Parameter.Name + "=" + #Parameter.Value

endfor

#QueryString += "&Panel" + "=" + #Panel

#sys_web.History.Add( #QueryString )

endroutine

evtroutine handling(#sys_web.URLChanged)

#Labels<>.ThemeDrawStyle := LightTitle

if (#sys_web.URLParameters<Panel> *IsNot *null)

#Labels<#sys_web.URLParameters<Panel>.Value.UpperCase>.ThemeDrawStyle := DarkTitle

endif

endroutine

end_com

Theme

Code: Select all

begin_com role(*EXTENDS #PRIM_THM) style(#ThemeStyle)

define_com class(#PRIM_VS.Style) name(#ThemeStyle) facename('Verdana') fontsize(12) fontunits(Pixel) textcolor(48:48:48)

* C O N T R O L   D R A W S T Y L E S

* MenuBar
define_com class(#PRIM_THM.DrawStyle) name(#MenuBar) style(#MenuBarStyle)

define_com class(#PRIM_VS.Style) name(#MenuBarStyle) backgroundbrush(#MenubarBackgroundBrush)
define_com class(#PRIM_VS.SolidBrush) name(#MenubarBackgroundBrush) color(Theme300)


* PopupMenu
define_com class(#PRIM_THM.DrawStyle) name(#PopupMenu)

define_com class(#PRIM_VS.Style) name(#PopupMenuStyle) backgroundbrush(#PopupMenuBackground) borderbottom(1) borderright(1) borderleft(1) bordertop(1) cornerbottomleft(0) cornerbottomright(0) cornertopleft(0) cornertopright(0) borderbrush(#PopupMenuBorder) effect(#PopupMenuDropShadow)
define_com class(#PRIM_VS.SolidBrush) name(#PopupMenuBorder) color(ThemeBorder)
define_com class(#PRIM_VS.SolidBrush) name(#PopupMenuBackground) color(White)
define_com class(#PRIM_VS.DropShadow) name(#PopupMenuDropShadow)


* Popup
define_com class(#PRIM_THM.DrawStyle) name(#Popup) style(#PopupStyle)

define_com class(#PRIM_VS.Style) name(#PopupStyle) backgroundbrush(#PopupBackground) borderbottom(1) borderright(1) borderleft(1) bordertop(1) cornerbottomleft(0) cornerbottomright(0) cornertopleft(0) cornertopright(0) borderbrush(#PopupBorder) effect(#PopupDropShadow)
define_com class(#PRIM_VS.SolidBrush) name(#PopupBorder) color(ThemeBorder)
define_com class(#PRIM_VS.SolidBrush) name(#PopupBackground) color(White)
define_com class(#PRIM_VS.DropShadow) name(#PopupDropShadow)


* DropDown
define_com class(#PRIM_THM.DrawStyle) name(#DropDown) style(#DropDownStyle)

define_com class(#PRIM_VS.Style) name(#DropDownStyle) backgroundbrush(#DropDownBackground) borderbottom(1) borderright(1) borderleft(1) bordertop(1) cornerbottomleft(0) cornerbottomright(0) cornertopleft(0) cornertopright(0) borderbrush(#DropDownBorder) effect(#DropDownDropShadow)
define_com class(#PRIM_VS.SolidBrush) name(#DropDownBorder) color(ThemeBorder)
define_com class(#PRIM_VS.SolidBrush) name(#DropDownBackground) color(White)
define_com class(#PRIM_VS.DropShadow) name(#DropDownDropShadow)


* Edit
define_com class(#PRIM_THM.DrawStyle) name(#Edit)


* List
define_com class(#PRIM_THM.DrawStyle) name(#List)


* ListColumn
define_com class(#PRIM_THM.DrawStyle) name(#ListColumn) style(#ListColumnStyle)

define_com class(#PRIM_VS.Style) name(#ListColumnStyle) backgroundbrush(#ListColumnBackground) borderbottom(1) borderright(1) borderbrush(#ListColumnBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ListColumnBorder) color(ThemeBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ListColumnBackground) color(White)


* List Item
define_com class(#PRIM_THM.DrawStyle) name(#ListItem) focusedinactivestyle(#ListItemFocusedInactiveStyle) selectedinactivestyle(#ListItemSelectedInactiveStyle) focusedstyle(#ListItemFocusStyle) mouseoverstyle(#ListItemMouseOverStyle) selectedstyle(#ListItemSelectedStyle)

define_com class(#PRIM_VS.Style) name(#ListItemFocusedInactiveStyle) borderbrush(#ListItemFocusedInactiveBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemFocusedInactiveBorder) color(ThemeInactive)

define_com class(#PRIM_VS.Style) name(#ListItemSelectedInactiveStyle) backgroundbrush(#ListItemSelectedInactiveBackground) borderbrush(#ListItemSelectedInactiveBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemSelectedInactiveBorder) color(ThemeInactive)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemSelectedInactiveBackground) color(ThemeInactive)

define_com class(#PRIM_VS.Style) name(#ListItemFocusStyle) backgroundbrush(#ListItemFocusBackground) borderbrush(#ListItemFocusBorder) borderbottom(2) borderleft(2) borderright(2) bordertop(2)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemFocusBorder) color(222:10:64)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemFocusBackground) color(Theme100)

define_com class(#PRIM_VS.Style) name(#ListItemSelectedStyle) backgroundbrush(#ListItemSelectedBackground) borderbrush(#ListItemSelectedBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemSelectedBorder) color(Theme200)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemSelectedBackground) color(Theme200)

define_com class(#PRIM_VS.Style) name(#ListItemMouseOverStyle) backgroundbrush(#ListItemMouseOverBackground) borderbrush(#ListItemMouseOverBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemMouseOverBorder) color(Theme50)
define_com class(#PRIM_VS.SolidBrush) name(#ListItemMouseOverBackground) color(Theme50)


* Push Button
define_com class(#PRIM_THM.DrawStyle) name(#PushButton) style(#PushButtonStyle) mouseoverstyle(#PushButtonMouseover) focusedstyle(#PushButtonFocused) pressedstyle(#PushButtonPressed)

define_com class(#PRIM_VS.Style) name(#PushButtonStyle) backgroundbrush(#PushButtonBackground) borderbottom(1) borderleft(1) borderright(1) bordertop(1) borderbrush(#PushButtonBorder) cornerbottomleft(0) cornerbottomright(0) cornertopleft(0) cornertopright(0)
define_com class(#PRIM_VS.SolidBrush) name(#PushButtonBackground) color(234:234:234)
define_com class(#PRIM_VS.SolidBrush) name(#PushButtonBorder) color(Silver)

define_com class(#PRIM_VS.Style) name(#PushButtonMouseover) backgroundbrush(#PushButtonMouseoverBackground)
define_com class(#PRIM_VS.SolidBrush) name(#PushButtonMouseoverBackground) color(Theme200)

define_com class(#PRIM_VS.Style) name(#PushButtonFocused) backgroundbrush(#PushButtonFocusBackground) borderbrush(#PushButtonFocusBorder)
define_com class(#PRIM_VS.SolidBrush) name(#PushButtonFocusBackground) color(Theme200)
define_com class(#PRIM_VS.SolidBrush) name(#PushButtonFocusBorder) color(Theme300)

define_com class(#PRIM_VS.Style) name(#PushButtonPressed) backgroundbrush(#PushButtonPressedBackground)
define_com class(#PRIM_VS.SolidBrush) name(#PushButtonPressedBackground) color(Theme300)


* ToolbarButton
define_com class(#PRIM_THM.DrawStyle) name(#ToolbarButton) mouseoverstyle(#ToolbarButtonMouseover) focusedstyle(#ToolbarButtonFocused) pressedstyle(#ToolbarButtonPressed)

define_com class(#PRIM_VS.Style) name(#ToolbarButtonMouseover) backgroundbrush(#ToolbarButtonMouseoverBackground)
define_com class(#PRIM_VS.SolidBrush) name(#ToolbarButtonMouseoverBackground) color(Theme200)

define_com class(#PRIM_VS.Style) name(#ToolbarButtonFocused) backgroundbrush(#ToolbarButtonFocusBackground) borderbrush(#ToolbarButtonFocusBorder)
define_com class(#PRIM_VS.SolidBrush) name(#ToolbarButtonFocusBackground) color(Theme200)
define_com class(#PRIM_VS.SolidBrush) name(#ToolbarButtonFocusBorder) color(Theme300)

define_com class(#PRIM_VS.Style) name(#ToolbarButtonPressed) backgroundbrush(#ToolbarButtonPressedBackground)
define_com class(#PRIM_VS.SolidBrush) name(#ToolbarButtonPressedBackground) color(Theme300)


* Menu Item
define_com class(#PRIM_THM.DrawStyle) name(#MenuItem) mouseoverstyle(#MenuItemMouseOver)

define_com class(#PRIM_VS.Style) name(#MenuItemMouseOver) backgroundbrush(#MenuItemMouseBackground)
define_com class(#PRIM_VS.SolidBrush) name(#MenuItemMouseBackground) color(Theme200)


* D R A W   S T Y L E S

* Title
define_com class(#PRIM_THM.DrawStyle) name(#Title) style(#TitleStyle)

define_com class(#PRIM_VS.Style) name(#TitleStyle) foregroundbrush(#TitleStyleForeground) fontsize(250) fontunits(Percent)
define_com class(#PRIM_VS.SolidBrush) name(#TitleStyleForeground) color(Theme900)


* Heading1
define_com class(#PRIM_THM.DrawStyle) name(#Heading1) style(#Heading1Style)

define_com class(#PRIM_VS.Style) name(#Heading1Style) foregroundbrush(#Heading1Foreground) fontsize(160) fontunits(Percent)
define_com class(#PRIM_VS.SolidBrush) name(#Heading1Foreground) color(Theme900)


* Heading2
define_com class(#PRIM_THM.DrawStyle) name(#Heading2) style(#Heading2Style)

define_com class(#PRIM_VS.Style) name(#Heading2Style) foregroundbrush(#Heading2Foreground) fontsize(140) fontunits(Percent)
define_com class(#PRIM_VS.SolidBrush) name(#Heading2Foreground) color(Theme900)


* Heading3
define_com class(#PRIM_THM.DrawStyle) name(#Heading3) style(#Heading3Style)

define_com class(#PRIM_VS.Style) name(#Heading3Style) foregroundbrush(#Heading3Foreground) fontsize(120) fontunits(Percent)
define_com class(#PRIM_VS.SolidBrush) name(#Heading3Foreground) color(Theme900)


* Strong
define_com class(#PRIM_THM.DrawStyle) name(#Strong) style(#StrongStyle)

define_com class(#PRIM_VS.Style) name(#StrongStyle) bold(True)


* Emphasis
define_com class(#PRIM_THM.DrawStyle) name(#Emphasis) style(#EmphasisStyle)

define_com class(#PRIM_VS.Style) name(#EmphasisStyle) italic(True)


* Light Title
define_com class(#PRIM_THM.DrawStyle) name(#LightTitle) style(#LightTitleStyle)

define_com class(#PRIM_VS.Style) name(#LightTitleStyle) backgroundbrush(#LightTitleBackground) foregroundbrush(#LightTitleForeground)
define_com class(#PRIM_VS.SolidBrush) name(#LightTitleBackground) color(Theme300)
define_com class(#PRIM_VS.SolidBrush) name(#LightTitleForeground) color(Theme700)


* Medium Title
define_com class(#PRIM_THM.DrawStyle) name(#MediumTitle) style(#MediumTitleStyle)

define_com class(#PRIM_VS.Style) name(#MediumTitleStyle) foregroundbrush(#MediumTitleForeground) backgroundbrush(#MediumTitleBackground)
define_com class(#PRIM_VS.SolidBrush) name(#MediumTitleBackground) color(Theme500)
define_com class(#PRIM_VS.SolidBrush) name(#MediumTitleForeground) color(White)


* Dark Title
define_com class(#PRIM_THM.DrawStyle) name(#DarkTitle) style(#DarkTitleStyle)

define_com class(#PRIM_VS.Style) name(#DarkTitleStyle) backgroundbrush(#DarkTitleBackground) foregroundbrush(#DarkTitleForeground)
define_com class(#PRIM_VS.SolidBrush) name(#DarkTitleForeground) color(White)
define_com class(#PRIM_VS.SolidBrush) name(#DarkTitleBackground) color(Theme700)

define_com class(#PRIM_THM.DrawStyle) name(#DrawStyle1) style(#Style1)
define_com class(#PRIM_VS.Style) name(#Style1) backgroundbrush(#Brush1) borderbottom(2) borderbrush(#Brush2) borderleft(2) borderright(2) bordertop(2)
define_com class(#PRIM_VS.SolidBrush) name(#Brush2) color(222:10:64)
define_com class(#PRIM_VS.SolidBrush) name(#Brush1) color(21:221:255)

end_com

I was able to get a red border on a list item without any problems.