Aplikacja WWW - projekt -  JSF(3) – 07.12.2009

 

1.      Wygenerować pliki ze stronami JSF (dodawania,usuwania, listowania, edycji) z tabel bazy danych z projektu zaliczeniowego.

2.      Utworzyć stronę główną projektu z dwoma panelami.  Lewy panel zapewnia nawigację po kolejnych tabelach projektu. Prawy panel wyświetla zawartość wybranej tabeli. Lewy panel dlakażdej tabeli zawiera przycisk submit wraz z odpowiednim formularzem, przekierowującym do odpowiedniej strony np: jsp_address, jsp_client, jsp_recruiter, jsp_project.  Wszystkie wymienione strony jsp dołączają poprzez include stronę left_panel, oraz niezależnie w prawym panelu kod nawigacji po danych tabeli (kod wygenrowany przez wizzard podczas tworzenia stron jsp z entities classes.

3.      Dodać obsługę zdarzenia submit z bibliotek AJAX jquery, jquery.form.

4.      Dodać obsługę walidacji poprawności danych

Biblioteki: jquery, jquery.form

 

<form id="myForm" action="comment.php" method="post">

    Name: <input type="text" name="name" />

    Comment: <textarea name="comment"></textarea>

    <input type="submit" value="Submit Comment" />

</form>

Wersja uproszczona –przetestować:

<html>

<head>

    <script type="text/javascript" src="jquery-1.3.2.js"></script>

    <script type="text/javascript" src="jquery.form.js"></script>

     <script type="text/javascript">

        // wait for the DOM to be loaded

        $(document).ready(function() {

            // bind 'myForm' and provide a simple callback function

            $('#myForm').ajaxForm(function() {

                alert("Thank you for your comment!");

            });

        });

    </script>

</head>

 

Wersja pełna:

 

// prepare the form when the DOM is ready

$(document).ready(function() {

    var options = {

        target:        '#output1',   // target element(s) to be updated with server response

        beforeSubmit:  showRequest,  // pre-submit callback

        success:       showResponse  // post-submit callback

 

        // other available options:

        //url:       url         // override for form's 'action' attribute

        //type:      type        // 'get' or 'post', override for form's 'method' attribute

        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)

        //clearForm: true        // clear all form fields after successful submit

        //resetForm: true        // reset the form after successful submit

 

        // $.ajax options can be used here too, for example:

        //timeout:   3000

    };

 

    // bind form using 'ajaxForm'

    $('#myForm1').ajaxForm(options);

});

 

// pre-submit callback

function showRequest(formData, jqForm, options) {

    // formData is an array; here we use $.param to convert it to a string to display it

    // but the form plugin does this for you automatically when it submits the data

    var queryString = $.param(formData);

 

    // jqForm is a jQuery object encapsulating the form element.  To access the

    // DOM element for the form do this:

    // var formElement = jqForm[0];

 

    alert('About to submit: \n\n' + queryString);

 

    // here we could return false to prevent the form from being submitted;

    // returning anything other than false will allow the form submit to continue

    return true;

}

 

// post-submit callback

function showResponse(responseText, statusText)  {

    // for normal html responses, the first argument to the success callback

    // is the XMLHttpRequest object's responseText property

 

    // if the ajaxForm method was passed an Options Object with the dataType

    // property set to 'xml' then the first argument to the success callback

    // is the XMLHttpRequest object's responseXML property

 

    // if the ajaxForm method was passed an Options Object with the dataType

    // property set to 'json' then the first argument to the success callback

    // is the json data object returned by the server

 

    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +

        '\n\nThe output div should have already been updated with the responseText.');

}