On my JSF website, I've got a couple elements that I'd like to use to cause navigation to our old classic ASP site (no data needs survive, just simple navigation). What's the best way to do this?
Thoughts so far:
- Using the outcome/navigation rules implies that you're staying within the same site. Can it be used to navigate outside?
You can't use navigation cases for this. Use h:outputLink with a direct URL.
<h:outputLink value="http://google.com">Click</h:outputLink>
Or just plain vanilla HTML.
Click
Update:
A <h:commandButton> is also doable, but then you have to add a bean action method which does ExternalContext#redirect() to the desired URL.
public void submit() {
FacesContext.getCurrentInstance().getExternalContext().redirect("http://google.com");
}
An alternative is indeed to style the link to make it look like a button. Here's a kickoff example:
a.button {
display: inline-block;
background: lightgray;
border: 2px outset lightgray;
cursor: default;
}
a.button:active {
border-style: inset;
}
Use it as <h:outputLink styleClass="button"> or <a class="button">.
Related
How I can add borders around specifically selected text in a text view like this?
I have recelerview in the activity and the data showing in picture is get from server using API, the API send data wrap with HTML tags like
"<div style=“border:2px solid red;padding: 5px;border-radius: 25px;”>the ground.</div>"
But the border tag is not supported by either Android nor iOS. I need to find a way to show border on both iOS and Android. If I need to communicate with a web team for a change I can do this, but any help will be appreciated.
Note: we cannot use Webview, because we need to perform some other operation on each text row.
Check the following line of code. I think this piece of code helpful for you:
<div style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">the ground.</div>
If you want get border in your text, set your html like this
<div style="border:2px; border-style:solid; border-color: red; padding: 1em ; display: inline-block; border-radius: 25px;">the ground.</div>
But, i don't think that TextView can show css, in my experience i've using web view to do that.. Furthermore, my suggest if you don't want to use webview just set bold to specific word
I have wicket code that shows an image:
<div class="someclass">
<img wicket:id="some-image"/>
</div>
This works great.
I have a requirement that sais, that this image MIGHT be wrapped in a link and that link also needs to be generated from the wicket side.
So I would like to implement this the nicest way possible WITHOUT having to add BOTH sections like this:
<a wicket:id="link-for-image">
<div class="someclass">
<img wicket:id="some-image-with-link"/>
</div>
</a>
<div class="someclass">
<img wicket:id="some-image"/>
</div>
and hiding one or the other.
What is the standard way of implementing this nicely?
Is there a way to define some kind of generic type for "link-for-image" so I can maybe create it as a web markup container instead of a link?
Thanks!!!
Use either Border
Use fragments
Output <a> always, but hide href attribute.
PS: <div> is not allowed inside <a> due to HTML standard.
If Ajax is an option you can add an onclick behaviour:
Image img = new Image("id", yourResource);
img.add(new AjaxEventBehavior("onclick") {
#Override
protected void onEvent(AjaxRequestTarget target) {
// Your click magic
}
});
add(img);
First, the "disabled link" functionality of AbstractLink might be sufficient for you. Link, BookmarkablePageLink etc. extend AbstractLink.
If not, you can use a subclass of Link (or BookmarkablePageLink, or whatever). Then override onComponentTagBody(), and if the "link" should not be a link, don't add a href and turn the into a or . This solution assumes that such a "wrapper" element won't screw up your CSS or scripts. You might be able to turn it into a wicket:container and have that stripped away, if your markup settings are set to strip such tags.
I was browsing to find a solution for a long time, but I did not find a suitable answer.
I'm developing a JSF web appication using RichFaces library. Application supports different locales, and user is able to change them by selecting from dropdown list.
I want the items in dropdown list to have a flag icons along the locale name.
Unfortunately, I could not find the way to do it with JSF.
The xthml code for the dropdown list is:
<h:panelGroup>
<h:form id="languageForm" prependId="false">
<h:outputText value="#{usermsg['locale.select.message']}" styleClass="userMessage"/>
<h:selectOneMenu id="dropdown" value="#{localeBean.selectedLocale}" onchange="submit()">
<f:selectItems value="#{localeBean.locales}" />
</h:selectOneMenu>
</h:form>
</h:panelGroup>
Flag icons are simply done with plain HTML and JQuery, like I've found here: http://www.ixtendo.com/polyglot-language-switcher-jquery-plugin/
To put the icon in the dropdown list item, I have to apply the css for each element in list, like:
#en {
background-image: url(/resources/images/flags/gb.png);
}
#fr {
background-image: url(/resources/images/flags/fr.png);
}
The problems here are:
f:selectItems (as well as f:selectItem) does not seem to support style property.
I could apply styles to tags using javascript, but I need to have IDs for tags, which f:selectItem (seems) does not allow as well.
The other thing I thougt is to use JQuery control mentioned in the link above, but here is another problem: how to set the value of the selected option to JSF bean. In other words, can I set #{localeBean.selectedLocale} through JQuery or Javascript and plain HTML?
I have found that PrimeFaces has a selectOneMenu control, which allows adding icons http://www.primefaces.org/showcase/ui/selectOneMenu.jsf (the one named 'Content with Filter')
but I'm affraid we cannot afford to switch from RichFaces to PrimeFaces at the moment.
Any help is appreciated.
I have found a solution myself. I figured that I'm able to add ids or classes to html tags with jQuery, so what I've done, I've added the following script:
<script type="text/javascript">
$(document).ready(function() {
$('option').each(function(){
$(this).addClass(this.value);
});
});
</script>
And css:
option {
background-repeat: no-repeat;
background-position: right;
}
.en {
background-image: url(/resources/images/flags/gb.png);
}
.fr {
background-image: url(/resources/images/flags/fr.png);
}
...
I used classes because I have two menus with flags in my app, but this works with ids as well.
The script adds the class to JSF-generated tags, so there is no longer an issue to send value back to managedBean.
Thanks everyone.
I tested the following jQuery on a jQueryfied page to inject custom CSS code to the page:
jQuery('head').append('<style type=\"text/css\">body { background: #000; }</style>');
After that, the background of the page immediately turns black, so far so good. But if i try that with Selenium 2 (Java), i do not see any reaction:
((JavascriptExecutor) webDriver).executeScript("jQuery('head').append('<style type=\"text/css\">body { background: #000; }</style>');");
jQuery is loaded correctly. Any ideas why that does not work?
why use an awkward style tag injection that depends on jQuery? Why not use something simple like
document.body.style.backgroundColor = '#000';
Is it possible to change the header style of a rich:simpleTogglePanel ?? The font of the header is always "bold" and I want it to be normal.
I tried with the style attribute this way: style="font-weight:normal" without result.
Any idea?
Have you tried putting the !important at the end of your style definition(i.e. style="font-weight:normal !important;")?
Also, as I'm sure you are aware, it is usually better to specify your style in a separate stylesheet. I've customized the <rich:extendedDataTable in this manner (not sure if this is a hack or not, but it works great for me). Open your page in a browser and then crack open the developer tools (press F12 in Firefox with FireBug installed, or in Chrome right click on the rich:SimpleTogglePanel and click 'Inspect Element'. This will let you see the CSS definition name used by the RichFaces framework. Just create a new .css file and define the style you want using the name you find RichFaces is using.
/*This class defines styles for a table cell.*/
/*tableBorderWidth, tableBorderColor border-bottom*/
/*tableBorderWidth, tableBorderColor border-right*/
.rf-edt-c {
border-bottom: 1px solid #021e2f;
border-right: 1px solid #021e2f;
height: auto !important;
min-height: 26px;
}
As you can see, you may need to specify the !important tag there as well, but it keeps the style outside of your page...
Hope this helps.