I want richfaces site, viewsource link and Hide link functionality look and feel? - jsf

I want the below look and feel functionality in jsf?
http://livedemo.exadel.com/richfaces-demo/richfaces/componentControl.jsf#
If you go to the above url code,
When you click on View Source link , how it shows?
and in the same way, when you click on hide link, it hides the code.
I want that same look and feel in my project...
How is it be done? How to achieve it in jsf?

If you are using RichFaces, you can use the <rich:effect> tag component which uses Scriptaculous. This is a js framework who enables to add effects in pages. In the example above, the effects used are Effect.SlideDown and Effect.SlideUp (sorry for not placing the link here, but as a new user I can just post a max of two hyperlinks). If you are not using RichFaces, you can still add the js libraries to your web project and use them to add these great effects.

Related

crafter-cms: how to create the form using crafter

I am new to crafter, I have use the empty blueprint .and then I have created a page .but i want to design the form .How we can use the element of form like input, radio button, dropdown list, also how to provide the action of the form ,also how to style the page , and how to use the JavaScript. Please
Crafter CMS doesn't restrict your HTML/JS. You can use any framework/tool/markup you like.
You can edit entry.ftl in the templates folder and put whatever markup you want if you're in a hurry.
You should also read the modeling article in the docs to understand how to give power to your content authors: https://docs.craftercms.org/current/developers/content-modeling.html
If you'd like to learn how to best use Crafter CMS, consider taking a class here: https://crafteracademy.teachable.com

How to display "Loading.." while switching tabs

I'm interested is it possible to create tabs with Primefaces using this example?
The idea is to create dynamically loaded tabs and when I switch between pages to display "Loading" at the top right of the page. What are the usual ways is this case?
The example you reference in your question carries the answer to the question. Generally, you have two options
Primefaces ajaxStatus component is designed specifically for your use case and is also the same component used in the dynamic tab sample you linked (albeit the PF team neglected to reference/declare it in the sample markup for that example). It's the same component that is used to generate the "loading" pinwheel you see in that example
A more powerful/exotic option is the blockUi component that will achieve the same effect, albeit with a little more in terms of options and visual effect.

In XPages Mobile App / Mobile Control, how to make picklist

I have two pages, one page for input, another page for the options, how to send value form page to another page on xPages Mobile Controls, or is there another way to make like this.
See my sample page:
1. Page 1:User Input
http://i1248.photobucket.com/albums/hh490/dannysumarnach/page_1_form_user_input.jpg
Page 2:Picklist
http://i1248.photobucket.com/albums/hh490/dannysumarnach/page_2_user_choice_PickList.jpg
note: the built-in typeahead not posible
Regards,
Danny
The in built type ahead is missing the dojo tundra.css file when using the single page app control. This file comes with Dojo its just not being included. Import this file to get the type ahead to work.
I'm unsure as to what you mean about passing value from one page to another, you can submit data to a document and open it in another page, add it to a scoped variable, add a parameter to the URL. All of these options will work.
Have a look at my blog post on this topic. There are a couple of gotchas to get around, most notably, ensuring the the page with your document datasource gets recalculated at the correct time. I'm working on a NotesIn9 on it.
Part 3 covers a couple of amendments to get it working with existing documents and includes a sample page that will work in the Extension Library Demo db. Note the extra view that needs to be created and other details in Part Two.
http://www.intec.co.uk/xpages-mobile-controls-and-value-pickers-part-three-client-side-approach-extended/

Desktop-like jsf-web-application

I want to create a desktop-like application with JSF 2.0 and Primefaces 2.2.1
I created a main Layout with two divs, the upper div containing a menubar with several submenus. When the user chooses a menuitem, I want to show the spezifyed xhtml page in the bottom div of my main layout, without loading the full page. So I am thinking of Ajax to do it. But I don't know how to realize it.
And by the way, is there a chance to change a p:menubar or a p:submenu by javascript?
Can someone help me?
At the risk of being down-voted, may I suggest that since it sounds like you're at the beginning of your project, you should consider a framework other than JSF 2.0 because it sounds like you're shoe-horning. GWT is the most obvious candidate. If you're used to desktop app development (especially in Java), Vaadin is another great candidate.

How to change the pictures related to links in JSF?

I have links and pictures related to these links on my page. I want to change the pictures everytime when onmouseover event occurred in the links. I want to do this in JSF.
A lot of Thanks to everyone.
You are looking specifically for JSF to do it, or you are open to other Javascript frameworks that provide a slick and easy solution on this? For example Jquery and Dojo etc may be easy to incorporate in your application and will give Rich UI effects.
On the other hand if you are looking at JSF specifically for these UI effects than probably I can try to think of some ways and let you know.
JSF isn't designed directly to do this; It's designed to give you the tools to do this yourself. In order to do this you would need to create a custom JSF component to do this and you would use Java script to do it.
You could possibly find a JSF framework that does this already (a4j, IceFaces, etc.) but this is such a simple and well documented JavaScript thing that just tossing a little Java script among your JSF is perfectly acceptable. However, if you don't want to reinvent the wheel, take a look at those other options.
Javascript solution:
Define onmouseover event on the commandLink tag calling some kind of javascript you may give link address from like onmouseover="doSomething('addressOfImage')" then in doSomething javascript method, first find the image, then set src attribute of a default image to given address.
JSF Solution:
You might want to use a4j for this.
Add a4j:support to link for onmouseover event then just rerender graphicImage component ofcourse you need to give value of graphicImage dynamically. There is an example of using a4j support below. You can add this a4j:support between your link tags for mouseonover event. Then manage everything on backing bean to handle which image to be displayed.
example
<h:graphicImage id="imageToBeRendered" value="#{myBean.imageAddress}"/>
Just google a4j if you have no idea.

Resources