3

I want to use a primefaces tool called Notification bar to display a message that says welcome, when the user logs in. The problem is that i don't know how to trigger it, only if the login is successful(if wrong password should not be displayed) and also to be displayed even if i am redirected to another page.

This is how my loggin page looks like:

<ui:composition template="WEB-INF/templates/BasicTemplate.xhtml">
    <!-- THE REGISTRATION FORM -->
    <ui:define name="loginForm">
       <h2>Login page</h2>
       <h:form>
       <p:panel>                
                    <h:outputText value="*Em@il:" />
                    <h:inputText id="email" value="#{securityController.email}" binding="#{emailComponent}"/>                   
                    <br/>
                    <h:outputText value="*Lozinka: " />
                    <h:inputSecret id="password" value="#{securityController.password}" validator="#{securityController.validate}">                     
                        <f:attribute name="emailComponent" value="#{emailComponent}" />
                    </h:inputSecret>            

                    <br/>
                    <span style="color: red;"><h:message for="password"
                    showDetail="true" /></span> 
                    <br/>
                    <h:commandButton value="Login" action="#{securityController.logIn()}" onclick="topBar.show()"/>                 

                </p:panel>
            </h:form>   

    </ui:define>

</ui:composition>

This is the method of the managed bean that does the redirection:

@ManagedBean
@RequestScoped
public class SecurityController {

    @EJB
    private IAuthentificationEJB authentificationEJB;       

    public String logIn() {     
        if (authentificationEJB.saveUserState(email, password)) {               
            return "main.xhtml";
        } else {
            return null;
        }
    }

The notification bar is located in a Template that all the pages use(BasicTemplate.xhtml):

<f:view contentType="text/html">
    <h:head>
        ...
    </h:head>

    <h:body>
        ...     
        <p:notificationBar position="top" widgetVar="topBar" styleClass="top">
            <h:outputText value="Welcome, you are now logged in!"
                style="color:#FFCC00;font-size:36px;" />
        </p:notificationBar>
    </h:body>
</f:view>

I want it to appear only once when the user gets logged in correctly(If the else block is executed, it should not appear).

How can i achieve this?

Update

changed the logIn() method:

public String logIn() {
        if (authentificationEJB.saveUserState(email, password)) {
            // Pass a parameter in ussing the URL.(The notification bar will
            // read this parameter)
            return "main.xhtml?faces-redirect=true&login=1";
        } else {
            return null;
        }
    }

Added this at main.xhtml

 <ui:composition template="WEB-INF/templates/BasicTemplate.xhtml">
    <ui:define name="mainForm">      
        <h2>The main page</h2>
        <script type="text/javascript">
          jQuery(function() {
          topBar.show()
           });
         </script>          
        <p:notificationBar id="notbar" position="top" widgetVar="topBar" styleClass="top" rendered="#{param.login == 1}">
            <h:outputText value="Welcome, you are now logged in!"
                style="color:#FFCC00;font-size:36px;" />
        </p:notificationBar>

    </ui:define>

</ui:composition>
javing
  • 12,307
  • 35
  • 138
  • 211
  • 2
    I am confused @sfrj if you want the notification bar show in the main.xhtml why is in the login page? – Bastardo Apr 20 '11 at 12:24
  • Yes you are right. I just changed that(see updated question). The Notification bar is currently located in a template that is being used by all the pages. How can i trigger it from the login button if the login is correct? – javing Apr 20 '11 at 12:32
  • 2
    I think the problem is to trigger the bar when main.xhtml is loaded. Since OP uses jsf templates there is no `h:body` on the page to add an `onLoad="topBar.show()"` – Matt Handy Apr 20 '11 at 12:32
  • Should i add onLoad to my BasicTemplate.xhtml. If so how can i control it to be displayed when the login button was clicked? – javing Apr 20 '11 at 12:36
  • Isn't it ok to trigger the bar when main.xhtml is loaded? Or is it loaded after failed login too? [< 5 minutes later]: Ok, I see from your code that you return an empty string after failed login. (Maybe not related, but you should return null in order to reload) – Matt Handy Apr 20 '11 at 12:37
  • I have 2 problems: (1)The code `onclick="topBar.show()"` gets executed when the credentials are correct and when not correct. It should only appear `if`, but not when `else` (2)The other problem is that it should last a couple of seconds and then disappear, but it happens so fast, only a second just before get redirected. – javing Apr 20 '11 at 12:49

1 Answers1

3

Include the p:notificationBar in your main.xhtml (remove it from the template) and add the following javascript to your main.xhtml:

<script type="text/javascript">
     jQuery(function() { topBar.show() });
</script>

This will show the bar when the page loads. If I read your code right, main.xhtml is only shown after successful login.

Matt Handy
  • 29,855
  • 2
  • 89
  • 112
  • Main.xhtml is not shown only when successfull login, it is shown also if there was no login(Not logged users can navigate to it using a navigation bar and see it too). I need to make sure the bar will appear only when the user was logged in and only once. Could we tune that script a bit more to work as desired? – javing Apr 20 '11 at 13:40
  • You could use the `rendered` attribute of the notification bar and let rendering depend on if the user is logged in. Just an idea. (This is a bit dirty since it would lead to an js error if component is not rendered). – Matt Handy Apr 20 '11 at 15:27
  • I think i will try a similar idea. I think i will save some variable in the session and then i will render only if that variable is not null. After that i will removed the variable from the session. I think that could work and i think that would display it only once. I dont know is that possible but i will try. – javing Apr 20 '11 at 16:58
  • 1
    Another option would be to let your login method return main.xhtml with an url parameter, e.g. `return "main.xhtml?faces-redirect=true&login=1` and then grab this parameter. – Matt Handy Apr 20 '11 at 17:04
  • See [this answer](http://stackoverflow.com/questions/550448/get-request-and-session-parameters-and-attributes-from-jsf-pages/550718#550718) if you want to know how to get request parameters in a jsf page – Matt Handy Apr 20 '11 at 17:06
  • This URL parameter idea sounds great. In the link you gave me there a very similar answer, i will try that – javing Apr 20 '11 at 18:03
  • I cant understand why i cant see the notification bar. Am i reading the parameter correctly from the URL?(Updated question) – javing Apr 21 '11 at 09:33
  • @sfrj: `p:notificationBar` has no attribute `onLoad` (at least in primefaces 2.1). You have to keep the jQuery method from my answer. The `rendered` condition in notification bar seems ok. – Matt Handy Apr 21 '11 at 12:30
  • You can add it in body section of your main.xthml. – Matt Handy Apr 21 '11 at 12:37
  • I just removed `onload` and added your script, i dont see the notification when i get redirected to main.xhtml after login(i only see in the url the `main.xhtml?login=1`). I tried with the script in the head tag of the template and also with the script in the body tag of main.xhtml but none of them worked. – javing Apr 21 '11 at 12:43
  • Is your notification bar rendered in html source? (easy way to test this is to give the notificationBar an id and search for this id in html source in browser) – Matt Handy Apr 21 '11 at 12:51
  • I just checked. I go to view source and i see it. This is how it looks like: `
    Welcome, you are now logged in!
    ` But why i cant see it?     – javing Apr 21 '11 at 12:55