PDA

View Full Version : HOWTO: Display a Button as Link



Arno.Nyhm
12 Nov 2009, 12:50 AM
if you have a button but need to display it as a normal link:


17155

usage:



Button button1 = new Button("Search 1", new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
// do something
}
});
Button button2 = new Button("Search 2", new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
// do something
}
});

// style the second button as a link:
button2.addStyleName("button-link");

you need to add this css:



.button-link .x-btn-text {
cursor: pointer !important;
cursor: hand !important;
border: none !important;
/* Disable the button-style */
background-color: transparent !important;
background:none !important;
background-image:none !important;
padding: 0px !important;
color: #4784C3 !important;
text-decoration: underline !important;

}

/* remove images */

.button-link .x-btn-tl,
.button-link .x-btn-tr,
.button-link .x-btn-tc,
.button-link .x-btn-ml,
.button-link .x-btn-mr,
.button-link .x-btn-mc,
.button-link .x-btn-bl,
.button-link .x-btn-br,
.button-link .x-btn-bc {
background-image: none !important;
}

/* remove little dots in FF */

.button-link .x-btn-tl i,
.button-link .x-btn-tr i,
.button-link .x-btn-tc i,
.button-link .x-btn-ml i,
.button-link .x-btn-mr i,
.button-link .x-btn-mc i,
.button-link .x-btn-bl i,
.button-link .x-btn-br i,
.button-link .x-btn-bc i {
font-size: 0px;
}
PS: if you have a better css then can you post this here?










Ref: this is a copy from this posting: http://www.extjs.com/forum/showthread.php?p=378038#post378038

campersau1
12 Nov 2009, 1:16 AM
Why use a button as a hyperlink if you can use a Hyperlink (http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/Hyperlink.html) as a Hyperlink?

sven
12 Nov 2009, 3:44 AM
Yes, it is the wrong approach. It is not performant and the domlayout is just too big. You can simple use a Html component with an markup of an a tag. I really suggest to not use this approach and use the orginal a tags.

Just assign an onclick listener, stop the event and do the default action.

Arno.Nyhm
12 Nov 2009, 4:23 AM
if someone like to display fast and easy a button like a link and dont like to care how to do the html component stuff etc. then this is a easy way to switch the style.

and you can use it also like a normal button and place it in forms like



myFormPanel.addButton(button1);
myFormPanel.addButton(button2);
and there is no more footprint compared with a normal button. its just an other layout with css.

if someone need a html link and/or the history stuff etc. then other solutions maybe better.
and this is not a "howto: make a html link" ;-)

Arno.Nyhm
17 Nov 2009, 5:15 AM
pls open a new thread with this question in help section. then you have the best chances for an answer :-)

Algiano
19 Apr 2010, 3:52 PM
This is highliy inefficient but it does present an advantage when using ContentPanels and their in-built ButtonBar.

Sven - is there any way of building a hyperlink type button that can be added to a ContentPanel using the addButton() method?

simbasong
13 Jun 2010, 11:19 PM
Yeah, I am always trying to find a GXT component as similar to GWT's HyperLink or Anchor classes, but not found. I think if these component is added to GXT library, so we can easily use ContentPanel.getButtonBar.add() to add it to the Content Panel.

simbasong
15 Jun 2010, 8:07 PM
I just find another way to do it, by using ContentFormPanel.getButtonBar().add(new WidgetComponent(new Anchor("this is a GWT link!")));

babyblue
20 Jul 2010, 2:22 PM
I'm trying to remove the border on a button, this code doesn't seem to work for me. I copied the style into a CSS file that I'm already using, and set the style name like you did, but I don't see any changes.