If you are using the tableNagator you can extends and override the XData Contents with icons, in the place of default buttons. Class to extends %ZEN.Component.tableNavigator
If you are using the tableNagatorBar you can extends and override the javascript method renderButtons with icons, in the place of default buttons. Class to extends %ZEN.Component.tableNavigatorBar
/// br.cjs.zen.TableNavigatorClass br.cjs.zen.TableNavigator Extends%ZEN.Component.tableNavigator
{
/// Este é o namespace XML para este componente.Parameter NAMESPACE = "br.cjs.zen";/// Contents of this composite component:/// This is a set of paging buttons as well as text controls/// to show the current page number.
XData Contents
{
<composite xmlns="http://www.intersystems.com/zen">
<hgroup labelPosition="left" cellAlign="left">
<!-- originally was a series of buttons -->
<image id="btnFirst" onclick="zenThis.composite.gotoPage('first');" src="navigation/First.png"/>
<image id="btnPrev" onclick="zenThis.composite.gotoPage('prev');" src="navigation/Previus.png"/>
<image id="btnNext" onclick="zenThis.composite.gotoPage('next');" src="navigation/Next.png"/>
<image id="btnLast" onclick="zenThis.composite.gotoPage('last');" src="navigation/Last.png"/>
<!-- End -->
<spacer width="20"/>
<text id="pageNo" size="2" labelClass="tn-pageLabel" onchange="zenThis.composite.gotoPage(zenThis.getValue());" />
<text id="pageCount" size="4" labelClass="tn-pageLabel" readOnly="true" />
<spacer width="*"/>
</hgroup>
</composite>
}
}
Hi Andy,
If you are using the tableNagator you can extends and override the XData Contents with icons, in the place of default buttons. Class to extends %ZEN.Component.tableNavigator
If you are using the tableNagatorBar you can extends and override the javascript method renderButtons with icons, in the place of default buttons. Class to extends %ZEN.Component.tableNavigatorBar
Hi Christiano
Thanks for your reply - I'm not sure how to go about doing that. So, if I had a .PNG how would I display it on a zen page?
Andy
Hi Andy.
Follows a very simple example:
Navigation Customized:
/// br.cjs.zen.TableNavigator Class br.cjs.zen.TableNavigator Extends %ZEN.Component.tableNavigator { /// Este é o namespace XML para este componente. Parameter NAMESPACE = "br.cjs.zen"; /// Contents of this composite component: /// This is a set of paging buttons as well as text controls /// to show the current page number. XData Contents { <composite xmlns="http://www.intersystems.com/zen"> <hgroup labelPosition="left" cellAlign="left"> <!-- originally was a series of buttons --> <image id="btnFirst" onclick="zenThis.composite.gotoPage('first');" src="navigation/First.png"/> <image id="btnPrev" onclick="zenThis.composite.gotoPage('prev');" src="navigation/Previus.png"/> <image id="btnNext" onclick="zenThis.composite.gotoPage('next');" src="navigation/Next.png"/> <image id="btnLast" onclick="zenThis.composite.gotoPage('last');" src="navigation/Last.png"/> <!-- End --> <spacer width="20"/> <text id="pageNo" size="2" labelClass="tn-pageLabel" onchange="zenThis.composite.gotoPage(zenThis.getValue());" /> <text id="pageCount" size="4" labelClass="tn-pageLabel" readOnly="true" /> <spacer width="*"/> </hgroup> </composite> } }
Sample usage: