JQuery-Plugin, JQuery Dialog

Hey...

In the most web applications we need a dialog to show extra information, confirm or alert something, view the detail of selected row of current table and so on. A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default. It can be a modal window or non-modal window but mostly modal mode is used. Here I'm going to present a very useful jquery base tool for dialog. JQuery Dialog is one of the useful component of JQueryUI plugin. You can find useful information of it from here.

Like other JQueryUI plugins, this plugin is also should be initiated first and withing the initiation you can set some properties or change the default of them. A very simple call of dialog is like this:

<div id="dialog" title="User View">This is my first dialog</div>
<script type="text/javascript">
    $(function() {
        $("#dialog").dialog("open");
    });
</script>

As you see, You should prepare a div then place every things you want in it. Then create a script to make it as a dialog. so you should do it on you page start up.
The table of options, methods and events are available here:

Live Demo:

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

Please click this button to display a simple dialog:

Options:

Name	Type	Default	Description
disabled	Boolean	false	Disables (true) or enables (false) the dialog. Can be set when initialising (first creating) the dialog. Code examples Initialize a dialog with the disabled option specified.     $( ".selector" ).dialog({ disabled: true }); Get or set the disabled option, after init.     //getter     var disabled = $( ".selector" ).dialog( "option", "disabled" );     //setter     $( ".selector" ).dialog( "option", "disabled", true );
autoOpen	Boolean	true	When autoOpen is true the dialog will open automatically when dialog is called. If false it will stay hidden until .dialog("open") is called on it. Code examples Initialize a dialog with the autoOpen option specified.     $( ".selector" ).dialog({ autoOpen: false }); Get or set the autoOpen option, after init.     //getter     var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );     //setter     $( ".selector" ).dialog( "option", "autoOpen", false );
buttons	Boolean	{ }	Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object. Code examples Initialize a dialog with the buttons option specified.     $( ".selector" ).dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } }); Get or set the buttons option, after init.     //getter     var buttons = $( ".selector" ).dialog( "option", "buttons" );     //setter     $( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );
buttons	Array	[ ]	Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button. Code examples Initialize a dialog with the buttons option specified.     $( ".selector" ).dialog({ buttons: [         {             text: "Ok",             click: function() { $(this).dialog("close"); }         }     ] }); Get or set the buttons option, after init.     //getter     var buttons = $( ".selector" ).dialog( "option", "buttons" );     //setter     $( ".selector" ).dialog( "option", "buttons", [         {             text: "Ok",             click: function() { $(this).dialog("close"); }         }     ] );
closeOnEscape	Boolean	true	Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key. Code examples Initialize a dialog with the closeOnEscape option specified.     $( ".selector" ).dialog({ closeOnEscape: false }); Get or set the closeOnEscape option, after init.     //getter     var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );     //setter     $( ".selector" ).dialog( "option", "closeOnEscape", false );
closeText	String	'close'	Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme. Code examples Initialize a dialog with the closeText option specified.     $( ".selector" ).dialog({ closeText: 'hide' }); Get or set the closeText option, after init.     //getter     var closeText = $( ".selector" ).dialog( "option", "closeText" );     //setter     $( ".selector" ).dialog( "option", "closeText", 'hide' );
dialogClass	String	''	The specified class name(s) will be added to the dialog, for additional theming. Code examples Initialize a dialog with the dialogClass option specified.     $( ".selector" ).dialog({ dialogClass: 'alert' }); Get or set the dialogClass option, after init.     //getter     var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );     //setter     $( ".selector" ).dialog( "option", "dialogClass", 'alert' );
draggable	Boolean	true	If set to true, the dialog will be draggable will be draggable by the titlebar. Code examples Initialize a dialog with the draggable option specified.     $( ".selector" ).dialog({ draggable: false }); Get or set the draggable option, after init.     //getter     var draggable = $( ".selector" ).dialog( "option", "draggable" );     //setter     $( ".selector" ).dialog( "option", "draggable", false );
height	Number	'auto'	The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content. Code examples Initialize a dialog with the height option specified.     $( ".selector" ).dialog({ height: 530 }); Get or set the height option, after init.     //getter     var height = $( ".selector" ).dialog( "option", "height" );     //setter     $( ".selector" ).dialog( "option", "height", 530 );
hide	String	null	The effect to be used when the dialog is closed. Code examples Initialize a dialog with the hide option specified.     $( ".selector" ).dialog({ hide: 'slide' }); Get or set the hide option, after init.     //getter     var hide = $( ".selector" ).dialog( "option", "hide" );     //setter     $( ".selector" ).dialog( "option", "hide", 'slide' );
maxHeight	Number	false	The maximum height to which the dialog can be resized, in pixels. Code examples Initialize a dialog with the maxHeight option specified.     $( ".selector" ).dialog({ maxHeight: 400 }); Get or set the maxHeight option, after init.     //getter     var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );     //setter     $( ".selector" ).dialog( "option", "maxHeight", 400 );
maxWidth	Number	false	The maximum width to which the dialog can be resized, in pixels. Code examples Initialize a dialog with the maxWidth option specified.     $( ".selector" ).dialog({ maxWidth: 600 }); Get or set the maxWidth option, after init.     //getter     var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );     //setter     $( ".selector" ).dialog( "option", "maxWidth", 600 );
minHeight	Number	150	The minimum height to which the dialog can be resized, in pixels. Code examples Initialize a dialog with the minHeight option specified.     $( ".selector" ).dialog({ minHeight: 300 }); Get or set the minHeight option, after init.     //getter     var minHeight = $( ".selector" ).dialog( "option", "minHeight" );     //setter     $( ".selector" ).dialog( "option", "minHeight", 300 );
minWidth	Number	150	The minimum width to which the dialog can be resized, in pixels. Code examples Initialize a dialog with the minWidth option specified.     $( ".selector" ).dialog({ minWidth: 400 }); Get or set the minWidth option, after init.     //getter     var minWidth = $( ".selector" ).dialog( "option", "minWidth" );     //setter     $( ".selector" ).dialog( "option", "minWidth", 400 );
modal	Boolean	false	If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements. Code examples Initialize a dialog with the modal option specified.     $( ".selector" ).dialog({ modal: true }); Get or set the modal option, after init.     //getter     var modal = $( ".selector" ).dialog( "option", "modal" );     //setter     $( ".selector" ).dialog( "option", "modal", true );
position	String, Array	'center'	Specifies where the dialog should be displayed. Possible values: 1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'. 2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]) 3) an array containing x,y position string values (e.g. ['right','top'] for top right corner). Code examples Initialize a dialog with the position option specified.     $( ".selector" ).dialog({ position: 'top' }); Get or set the position option, after init.     //getter     var position = $( ".selector" ).dialog( "option", "position" );     //setter     $( ".selector" ).dialog( "option", "position", 'top' );
resizable	Boolean	true	If set to true, the dialog will be resizeable. Code examples Initialize a dialog with the resizable option specified.     $( ".selector" ).dialog({ resizable: false }); Get or set the resizable option, after init.     //getter     var resizable = $( ".selector" ).dialog( "option", "resizable" );     //setter     $( ".selector" ).dialog( "option", "resizable", false );
show	String	null	The effect to be used when the dialog is opened. Code examples Initialize a dialog with the show option specified.     $( ".selector" ).dialog({ show: 'slide' }); Get or set the show option, after init.     //getter     var show = $( ".selector" ).dialog( "option", "show" );     //setter     $( ".selector" ).dialog( "option", "show", 'slide' );
stack	Boolean	true	Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus. Code examples Initialize a dialog with the stack option specified.     $( ".selector" ).dialog({ stack: false }); Get or set the stack option, after init.     //getter     var stack = $( ".selector" ).dialog( "option", "stack" );     //setter     $( ".selector" ).dialog( "option", "stack", false );
title	String	''	Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the title attribute on the dialog source element. Code examples Initialize a dialog with the title option specified.     $( ".selector" ).dialog({ title: 'Dialog Title' }); Get or set the title option, after init.     //getter     var title = $( ".selector" ).dialog( "option", "title" );     //setter     $( ".selector" ).dialog( "option", "title", 'Dialog Title' );
width	Number	300	The width of the dialog, in pixels. Code examples Initialize a dialog with the width option specified.     $( ".selector" ).dialog({ width: 460 }); Get or set the width option, after init.     //getter     var width = $( ".selector" ).dialog( "option", "width" );     //setter     $( ".selector" ).dialog( "option", "width", 460 );
zIndex	Integer	1000	The starting z-index for the dialog. Code examples Initialize a dialog with the zIndex option specified.     $( ".selector" ).dialog({ zIndex: 3999 }); Get or set the zIndex option, after init.     //getter     var zIndex = $( ".selector" ).dialog( "option", "zIndex" );     //setter     $( ".selector" ).dialog( "option", "zIndex", 3999 );

Events:

Name	Type	Description
create	dialogcreate	This event is triggered when dialog is created. Code examples Supply a callback function to handle the create event as an init option.     $( ".selector" ).dialog({        create: function(event, ui) { ... }     }); Bind to the create event by type: dialogcreate.     $( ".selector" ).bind( "dialogcreate", function(event, ui) {       ...     });
beforeClose	dialogbeforeclose	This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented. Code examples Supply a callback function to handle the beforeClose event as an init option.     $( ".selector" ).dialog({        beforeClose: function(event, ui) { ... }     }); Bind to the beforeClose event by type: dialogbeforeclose.     $( ".selector" ).bind( "dialogbeforeclose", function(event, ui) {       ...     });
open	dialogopen	This event is triggered when dialog is opened. Code examples Supply a callback function to handle the open event as an init option.     $( ".selector" ).dialog({        open: function(event, ui) { ... }     }); Bind to the open event by type: dialogopen.     $( ".selector" ).bind( "dialogopen", function(event, ui) {       ...     });
focus	dialogfocus	This event is triggered when the dialog gains focus. Code examples Supply a callback function to handle the focus event as an init option.     $( ".selector" ).dialog({        focus: function(event, ui) { ... }     }); Bind to the focus event by type: dialogfocus.     $( ".selector" ).bind( "dialogfocus", function(event, ui) {       ...     });
dragStart	dialogdragstart	This event is triggered at the beginning of the dialog being dragged. Code examples Supply a callback function to handle the dragStart event as an init option.     $( ".selector" ).dialog({        dragStart: function(event, ui) { ... }     }); Bind to the dragStart event by type: dialogdragstart.     $( ".selector" ).bind( "dialogdragstart", function(event, ui) {       ...     });
drag	dialogdrag	This event is triggered when the dialog is dragged. Code examples Supply a callback function to handle the drag event as an init option.     $( ".selector" ).dialog({        drag: function(event, ui) { ... }     }); Bind to the drag event by type: dialogdrag.     $( ".selector" ).bind( "dialogdrag", function(event, ui) {       ...     });
dragStop	dialogdragstop	This event is triggered after the dialog has been dragged. Code examples Supply a callback function to handle the dragStop event as an init option.     $( ".selector" ).dialog({        dragStop: function(event, ui) { ... }     }); Bind to the dragStop event by type: dialogdragstop.     $( ".selector" ).bind( "dialogdragstop", function(event, ui) {       ...     });
resizeStart	dialogresizestart	This event is triggered at the beginning of the dialog being resized. Code examples Supply a callback function to handle the resizeStart event as an init option.     $( ".selector" ).dialog({        resizeStart: function(event, ui) { ... }     }); Bind to the resizeStart event by type: dialogresizestart.     $( ".selector" ).bind( "dialogresizestart", function(event, ui) {       ...     });
resize	dialogresize	This event is triggered when the dialog is resized. demo Code examples Supply a callback function to handle the resize event as an init option.     $( ".selector" ).dialog({        resize: function(event, ui) { ... }     }); Bind to the resize event by type: dialogresize.     $( ".selector" ).bind( "dialogresize", function(event, ui) {       ...     });
resizeStop	dialogresizestop	This event is triggered after the dialog has been resized. Code examples Supply a callback function to handle the resizeStop event as an init option.     $( ".selector" ).dialog({        resizeStop: function(event, ui) { ... }     }); Bind to the resizeStop event by type: dialogresizestop.     $( ".selector" ).bind( "dialogresizestop", function(event, ui) {       ...     });
close	dialogclose	This event is triggered when the dialog is closed. Code examples Supply a callback function to handle the close event as an init option.     $( ".selector" ).dialog({        close: function(event, ui) { ... }     }); Bind to the close event by type: dialogclose.     $( ".selector" ).bind( "dialogclose", function(event, ui) {       ...     });

Methods:

Name	Usage	Description
destroy	.dialog( "destroy" )	Remove the dialog functionality completely. This will return the element back to its pre-init state.
disable	.dialog( "disable" )	Disable the dialog.
enable	.dialog( "enable" )	Enable the dialog.
option	.dialog( "option" , optionName , [value] )	Get or set any dialog option. If no value is specified, will act as a getter.
option	.dialog( "option" , options )	Set multiple dialog options at once by providing an options object.
widget	.dialog( "widget" )	Returns the .ui-dialog element.
close	.dialog( "close" )	Close the dialog.
isOpen	.dialog( "isOpen" )	Returns true if the dialog is currently open.
moveToTop	.dialog( "moveToTop" )	Move the dialog to the top of the dialogs stack.
open	.dialog( "open" )	Open the dialog.

Sample
Do you remember my post about JQGrid. I'm going to extend that sample making it popup base. I use JQuery Dialog as project popups. That project has two major parts and I'll make some changes in both of them:

• User List: I'll show the detail of user in new window(using jquery dialog)
• File List: I'll show delete confirmation using jquery dialog when user click delete button of the file list grid.

User List
Here is the user-list.jsp code:

<script type="text/javascript">
    function setFormAction(action) {
        document.getElementById("userForm").action = action;
    }
    function setUserId(id) {
        document.getElementById("userId").value = id;
    }
    function deleteAll() {
        if (confirm('Do you want to delete the selected rows?')) {
            setFormAction('<spring:url value="/user/delete.html"/>');
            return true;
        } else {
            return false;
        }
    }
    $(function() {
        $("#dialog").dialog({ autoOpen: false,
            resizable:true,
            draggable:true,
            show: "blind",
            hide: "explode",
            position: 'center',
            modal: true,
            closeOnEscape: true,
            buttons:[{text:"back", click : function() {
                $(this).dialog("close");
            }}]
        });
    });
    function showDialog(userid) {
        $("#userview").load("/user/view.html", {'user.id':userid});
        $("#dialog").dialog("open");
    }
</script>
<div id="dialog" title="User View"><div id="userview"></div></div>
<form:form id="userForm">
    <form:hidden path="user.id" id="userId"/>
    <table>
        <tr>
            <td>
                <label for="name">name</label>
            </td>
            <td>
                <form:input path="user.name" id="name"/>
            </td>
        </tr>
    </table>
    <input type="submit" value="search" onclick="setFormAction('<spring:url value="/user/list.html"/>')"/>
    <table>
        <tr>
            <th></th>
            <th>name</th>
            <th>username</th>
            <th></th>
        </tr>
        <c:forEach items="${userList}" var="user">
            <tr>
                <td>
                    <security:authorize access="hasRole('administrator')">
                        <input type="checkbox" name="ids" value="${user.id}"/>
                    </security:authorize>
                </td>
                <td>${user.name}</td>
                <td>${user.username}</td>
                <td>
                    <security:authorize access="hasRole('administrator')">
                        <input type="submit" value="edit"
                               onclick="setUserId(${user.id}); setFormAction('<spring:url value="/user/edit.html"/>');"/>
                    </security:authorize>
                    <input type="button" value="view"
                           onclick="showDialog(${user.id});"/>
                </td>
            </tr>
        </c:forEach>
    </table>
...
</form:form>

As you see, I should prepare a div to display my content(the blue line). But my content is not a fix content. I should load it dynamically whenever the view button is clicked via ajax. So firstly I create the dialog but do not display it(the red lines). Then I will call showDialog method in view button click(the green lines). In this method I load the user detail in 'userview' div then I show the dialog.

File List
Here is the file-list.jsp code:

...
<script type="text/javascript">
    function folder(cellValue, opts, rowObject) {
        if (!rowObject.file) {
            return "<div class='ui-state-default'><span class='ui-icon ui-icon-folder-collapsed'></span></div>";
        }
        return "<div></div>";
    }
    function edit(cellValue, opts, rowObject) {
        return "<input type='submit' value='edit' onclick='setFileId(" + rowObject.id + "); setFormAction(\"<spring:url value="/file/edit.html"/>\");'/>";
    }

    function setFormAction(action) {
        document.getElementById("fileForm").action = action;
    }

    function setFileId(id) {
        $("#fileId").val(id);
    }

    function setFolderId(id) {
        $("#folderId").val(id);
    }

    $(function() {
        $("#deleteConfirmDlg").dialog({ autoOpen: false,
            resizable:true,
            draggable:true,
            show: "blind",
            hide: "explode",
            position: 'center',
            modal: true,
            closeOnEscape: true,
            buttons:[{text:"cancel", click : function() {
                $(this).dialog("close");
            }}, {text:"ok", click:function() {
                var selectedRowIds = $("#fileGrid").getGridParam("selarrrow");
                var params = "";
                for (var i = 0; selectedRowIds[i]; i++) {
                    params += "ids=" + selectedRowIds[i] + "&";
                }
                $.ajax({
                    type: 'POST',
                    url: '<spring:url value="/file/delete.html"/>',
                    data: params,
                    success: function(msg) {
                        if (msg != '') {
                            alert(msg);
                        } else {
                            $("#deleteConfirmDlg").dialog("close");
                            $("#fileGrid").trigger("reloadGrid");
                        }
                    }
                });
            }}]
        });

        $("#deleteNoRowDlg").dialog({ autoOpen: false,
            dialogClass: 'alert',
            resizable:true,
            draggable:true,
            show: "blind",
            hide: "explode",
            position: 'center',
            modal: true,
            closeOnEscape: true,
            buttons:[{text:"ok", click : function() {
                $(this).dialog("close");
            }}]
        });

        $("#fileGrid").jqGrid({
            url:'${listUrl}',
            datatype:'json',
            contentType:'contentType:"application/json; charset=utf-8"',
            jsonReader:{repeatitems: false,id:"id"},
            direction:'ltr',
            width:'500',
            colNames:['','name', 'file','edit'],
            colModel:[{sortable:false, width:'20', formatter:folder},{name:'name',sortable:true},{name:'file',hidden:true},{align:'center', sortable:false, width:'50',formatter:edit}],
            rowNum:10,
            rowList:[10,20,30],
            pager:'#filePager',
            sortname:'id',
            viewrecords:true,
            multiselect:true,
            multiboxonly:true,
            sortorder:'desc',
            prmNames:{rows:'pagination.rowSizePerPage', page:'pagination.currentPage', sort:'pagination.sortIndex', order:'pagination.sortOrder'},
            caption:'File List',
            recordtext:'View {0} - {1} of {2}',
            emptyrecords:'No Records',
            loadtext:'Loading ...',
            pgtext:'Page {0} Of {1}',
            ondblClickRow: function(rowid) {
                var row = $("#fileGrid").getRowData(rowid);
                if (row.file == 'true') {
                    setFormAction('<spring:url value="/file/download.html"/>');
                    setFileId(rowid);
                    $("#fileForm").submit();
                } else {
                    setFormAction('<spring:url value="/file/list.html"/>');
                    setFolderId(rowid);
                    $("#fileForm").submit();
                }
            }
        });
        $("#fileGrid").jqGrid('navGrid', '#filePager', {search:false, edit:false, add:false, del:false}).navButtonAdd("#filePager", {
            caption:'',
            buttonicon: "ui-icon-plus",
            onClickButton:function() {
                setFormAction('<spring:url value="/file/add.html"/>');
                $("#fileForm").submit();
            },
            position:"first", title:'add'}).navButtonAdd("#filePager", {
            caption:'',
            buttonicon: "ui-icon-trash",
            onClickButton:function() {
                deleteSelectedRows();
            },
            position:"first", title:'delete selected rows'});
    });
    function deleteSelectedRows() {
        var selectedRowIds = $("#fileGrid").getGridParam("selarrrow");
        if (selectedRowIds.length > 0) {
            $("#deleteConfirmDlg").dialog("open");
        } else {
            $("#deleteNoRowDlg").dialog("open");
        }
    }
</script>
<div id="deleteConfirmDlg" title="Delete Confirmation">Are you sure to delete the selected rows?</div>
<div id="deleteNoRowDlg" title="No Rows Selected">you should select some rows</div>
<form:form id="fileForm">
...
</form:form>

Here we have 2 dialogs. One for delete confirmation other for no row selection alert. So I should prepare 2 divs for them(the green lines). Then I should initiate them(the blue lines). I should display them when the delete button is clicked(the red lines). Here I call the deleteSelectedRows method. In this method I check if any row is selected or not. If selected I should display the 'deleteConfirmDlg' dialog otherwise I should dislplay 'deleteNoRowDlg' dialog.

Source Code:
It's the time to download the source code and try it yourselves. The application needed jar files are the same as previous post example. So you can copy all of them to here: [app-root]/lib/
The application database script is available in [app-root]/db/filerepository.sql. you can restore it in your mysql server. the connection datasource properties is in [app-root]/src/database.properites. And after you deploy the project home page will be: http://localhost:8080/home/view.html
the admin user specification is:
username: administrator
password: 123456
you can use it to log in for the first time.

all rights reserved by Mostafa Rastgar and Programmer Assistant weblog

Spring AOP

Hey...

Today I’m going to discuss about Spring AOP. Aspect Oriented Programming is a concept that completes Objective Oriented Programming. In OOP we should solve our problems in Classes methods using some design patterns strategy. But in AOP the unit of modularity is the aspect. Aspects enable the modularization of concerns such as transaction management that cut across multiple types and objects. (Such concerns are often termed crosscutting concerns in AOP literature.) On the other hands, by using aspects, we will be able to assign some features to the classes and methods.

AOP Concept
Let us begin by defining some central AOP concepts and terminology. These terms are not Spring-specific... unfortunately, AOP terminology is not particularly intuitive; however, it would be even more confusing if Spring used its own terminology.

• Aspect: a modularization of a concern that cuts across multiple classes. Transaction management is a good example of a crosscutting concern in J2EE applications. In Spring AOP, aspects are implemented using regular classes (the schema-based approach) or regular classes annotated with the @Aspect annotation (the @AspectJ style).
• Join point: a point during the execution of a program, such as the execution of a method or the handling of an exception. In Spring AOP, a join point always represents a method execution.
• Advice: action taken by an aspect at a particular join point. Different types of advice include "around," "before" and "after" advice. (Advice types are discussed below.) Many AOP frameworks, including Spring, model an advice as an interceptor, maintaining a chain of interceptors around the join point.
• Pointcut: a predicate that matches join points. Advice is associated with a pointcut expression and runs at any join point matched by the pointcut (for example, the execution of a method with a certain name). The concept of join points as matched by pointcut expressions is central to AOP, and Spring uses the AspectJ pointcut expression language by default.
• Introduction: declaring additional methods or fields on behalf of a type. Spring AOP allows you to introduce new interfaces (and a corresponding implementation) to any advised object. For example, you could use an introduction to make a bean implement an IsModified interface, to simplify caching. (An introduction is known as an inter-type declaration in the AspectJ community.)
• Target object: object being advised by one or more aspects. Also referred to as the advised object. Since Spring AOP is implemented using runtime proxies, this object will always be a proxied object.
• AOP proxy: an object created by the AOP framework in order to implement the aspect contracts (advise method executions and so on). In the Spring Framework, an AOP proxy will be a JDK dynamic proxy or a CGLIB proxy.
• Weaving: linking aspects with other application types or objects to create an advised object. This can be done at compile time (using the AspectJ compiler, for example), load time, or at runtime. Spring AOP, like other pure Java AOP frameworks, performs weaving at runtime.

Types of advice:

• Before advice: Advice that executes before a join point, but which does not have the ability to prevent execution flow proceeding to the join point (unless it throws an exception).
• After returning advice: Advice to be executed after a join point completes normally: for example, if a method returns without throwing an exception.
• After throwing advice: Advice to be executed if a method exits by throwing an exception.
• After (finally) advice: Advice to be executed regardless of the means by which a join point exits (normal or exceptional return).
• Around advice: Advice that surrounds a join point such as a method invocation. This is the most powerful kind of advice. Around advice can perform custom behavior before and after the method invocation. It is also responsible for choosing whether to proceed to the join point or to shortcut the advised method execution by returning its own return value or throwing an exception.

Around advice is the most general kind of advice. Since Spring AOP, like AspectJ, provides a full range of advice types, we recommend that you use the least powerful advice type that can implement the required behavior. For example, if you need only to update a cache with the return value of a method, you are better off implementing an after returning advice than an around advice, although an around advice can accomplish the same thing. Using the most specific advice type provides a simpler programming model with less potential for errors. For example, you do not need to invoke the proceed() method on the JoinPoint used for around advice, and hence cannot fail to invoke it.

In Spring 2.0, all advice parameters are statically typed, so that you work with advice parameters of the appropriate type (the type of the return value from a method execution for example) rather than Object arrays.

The concept of join points, matched by pointcuts, is the key to AOP which distinguishes it from older technologies offering only interception. Pointcuts enable advice to be targeted independently of the Object-Oriented hierarchy. For example, an around advice providing declarative transaction management can be applied to a set of methods spanning multiple objects (such as all business operations in the service layer).

Abstract Example
Let us take an abstract example. Suppose that we should implement a bank account class. This class has two major methods: withdraw and deposit. This can be such Implementation:

public class BankAccount {
    Long account;

    public Long getAccount() {
        return account;
    }

    public Boolean withdraw(Long withdrawAmount) {
        if (withdrawAmount < account) {
            account -= withdrawAmount;
            return true;
        } else {
            return false;
        }
    }

    public void deposit(Long depositAmount) {
        account += depositAmount;
    }
}

This is the core of accounting. But we should have some feature among it. For example only the user with role of "power-user" has withdraw and deposit accessibility or during withdraw and deposit method we should log each operation. So the class will be change to this:

public class BankAccount {
    Long account;

    public Long getAccount() {
        return account;
    }

    public Boolean withdraw(Long withdrawAmount) {
        log.Log("withdraw method is started");
        if (SecurityContext.getCurrentUser().hasRole("power-user")) {
            if (withdrawAmount < account) {
                account -= withdrawAmount;
                return true;
            } else {
                return false;
            }
        } else {
            throw new Exception("You don't have this accessiblity");
        }
    }

    public void deposit(Long depositAmount) {
        log.Log("deposit method is started");
        if (SecurityContext.getCurrentUser().hasRole("power-user")) {
            account += depositAmount;
        } else {
            throw new Exception("You don't have this accessiblity");
        }
    }
}

whenever any change request or new feature arrives from customer, we should change the class or create some other classes then call them within this class. But this problem has other solution in AOP. The core of our system is BankAccount class. We can implement it regardless of other things and test it with JUnit to prevent from some unforeseen bugs. Then we should an aspect to handle security and logging strategy.

public class BankAccount {
    Long account;

    public Long getAccount() {
        return account;
    }

    public Boolean withdraw(Long withdrawAmount) {
        if (withdrawAmount < account) {
            account -= withdrawAmount;
            return true;
        } else {
            return false;
        }
    }

    public void deposit(Long depositAmount) {
        account += depositAmount;
    }
}

@Aspect
public class BankAccountSupervisor {
    @Pointcut("execution(* BankAccount.*(..))")
    public void logingPoint() {
    }

    @Pointcut("execution(* BankAccount.withdraw(..)) || execution(* BankAccount.deposit(..))")
    public void withdrawDepositPoint() {
    }

    @Around("logingPoint()")
    public Object loging(ProceedingJoinPoint pjp) throws Throwable {
        beforRunningMethodLog(pjp);
        Object returnVal = pjp.proceed();
        return returnVal;
    }

    @Around("withdrawDepositPoint()")
    public Object withdrawing(ProceedingJoinPoint pjp) throws Throwable {
        if (SecurityContext.getCurrentUser().hasRole("power-user")) {
            Object returnVal = pjp.proceed();
            return returnVal;
        } else {
            throw new Exception("You don't have this accessiblity");
        }
    }

    private void beforRunningMethodLog(ProceedingJoinPoint pjp) {
        System.out.println("just befor running '" + pjp.getSignature().getName() + "' method of '" + pjp.getTarget().getClass().getName() + "' class.");
    }
}

Enabling @AspectJ Support
To use @AspectJ aspects in a Spring configuration you need to enable Spring support for configuring Spring AOP based on @AspectJ aspects, and autoproxying beans based on whether or not they are advised by those aspects. By autoproxying we mean that if Spring determines that a bean is advised by one or more aspects, it will automatically generate a proxy for that bean to intercept method invocations and ensure that advice is executed as needed.
The @AspectJ support is enabled by including the following element inside your spring configuration:

<aop:aspectj-autoproxy/>

Declaring a pointcut
Recall that pointcuts determine join points of interest, and thus enable us to control when advice executes. Spring AOP only supports method execution join points for Spring beans, so you can think of a pointcut as matching the execution of methods on Spring beans. A pointcut declaration has two parts: a signature comprising a name and any parameters, and a pointcut expression that determines exactly which method executions we are interested in. In the @AspectJ annotation-style of AOP, a pointcut signature is provided by a regular method definition, and the pointcut expression is indicated using the @Pointcut annotation (the method serving as the pointcut signature must have a void return type).

An example will help make this distinction between a pointcut signature and a pointcut expression clear. The following example defines a pointcut named 'anyOldTransfer' that will match the execution of any method named 'transfer':

@Pointcut("execution(* transfer(..))")// the pointcut expression
private void anyOldTransfer() {}// the pointcut signature

The pointcut expression that forms the value of the @Pointcut annotation is a regular AspectJ 5 pointcut expression. For a full discussion of AspectJ's pointcut language, see the AspectJ Programming Guide (and for Java 5 based extensions, the AspectJ 5 Developers Notebook) or one of the books on AspectJ such as “Eclipse AspectJ” by Colyer et. al. or “AspectJ in Action” by Ramnivas Laddad.
Supported Pointcut Designators
Spring AOP supports the following AspectJ pointcut designators (PCD) for use in pointcut expressions:

• execution - for matching method execution join points, this is the primary pointcut designator you will use when working with Spring AOP
• within - limits matching to join points within certain types (simply the execution of a method declared within a matching type when using Spring AOP)
• this - limits matching to join points (the execution of methods when using Spring AOP) where the bean reference (Spring AOP proxy) is an instance of the given type
• target - limits matching to join points (the execution of methods when using Spring AOP) where the target object (application object being proxied) is an instance of the given type
• args - limits matching to join points (the execution of methods when using Spring AOP) where the arguments are instances of the given types
• @target - limits matching to join points (the execution of methods when using Spring AOP) where the class of the executing object has an annotation of the given type
• @args - limits matching to join points (the execution of methods when using Spring AOP) where the runtime type of the actual arguments passed have annotations of the given type(s)
• @within - limits matching to join points within types that have the given annotation (the execution of methods declared in types with the given annotation when using Spring AOP)
• @annotation - limits matching to join points where the subject of the join point (method being executed in Spring AOP) has the given annotation

Combining pointcut expressions
Pointcut expressions can be combined using '&&', '||' and '!'. It is also possible to refer to pointcut expressions by name. The following example shows three pointcut expressions: anyPublicOperation (which matches if a method execution join point represents the execution of any public method); inTrading (which matches if a method execution is in the trading module), and tradingOperation (which matches if a method execution represents any public method in the trading module).

@Pointcut("execution(public * *(..))")
private void anyPublicOperation() {}

@Pointcut("within(com.xyz.someapp.trading..*)")
private void inTrading() {}
    
@Pointcut("anyPublicOperation() && inTrading()")
private void tradingOperation() {}

It is a best practice to build more complex pointcut expressions out of smaller named components as shown above. When referring to pointcuts by name, normal Java visibility rules apply (you can see private pointcuts in the same type, protected pointcuts in the hierarchy, public pointcuts anywhere and so on). Visibility does not affect pointcut matching.
Example
I had a post about file repository. Here I'm going to extend the sample of that post example. I will log everything happens in Controller, Service and Dao layers and the time that each method spends. I also should check security for user list use case. The users with role of "power_user" or "administrator" can save or update the user and just the user with role of "administrator" can delete the user. OK. Let's start step by step:

1. Add aspectjweaver.jar
Add aspectjweaver.jar jar file to you project lib directory.
2. spring-servlet.xml
Spring AOP is implemented in pure Java. There is no need for a special compilation process. Spring AOP does not need to control the class loader hierarchy, and is thus suitable for use in a J2EE web container or application server. So in spring context we should just place "<aop:aspectj-autoproxy/>" tag. This will enable the use of the @AspectJ style of Spring AOP.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!--security config-->
    <import resource="classpath:security-config.xml"/>

    <context:component-scan base-package="com"/>

    <aop:aspectj-autoproxy/>

    <!--Tiles 2-->
    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
        <property name="definitions">
            <list>
                <value>/WEB-INF/layout/tiles-config.xml</value>
            </list>
        </property>
    </bean>

    <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView"/>
        <property name="order" value="1"/>
    </bean>

    <!--hibernate-->
    <import resource="classpath:hibernate-config.xml"/>

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="100000000"></property>
    </bean>

</beans>

3. Implementation of LoggingSupervisor class
It is an aspect. Here we are going to log every things and time spending. Take a look to the code:

package com.aspects;

import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Pointcut;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.ProceedingJoinPoint;
import org.springframework.stereotype.Component;
 
@Component
@Aspect
public class LoggingSupervisor {
    @Pointcut("execution(* com.ucs..*.*(..))")
    public void logingPoint() {
    }

    @Around("logingPoint()")
    public Object loging(ProceedingJoinPoint pjp) throws Throwable {
        beforRunningMethodLog(pjp);
        Long startTime = System.currentTimeMillis();
        Object returnVal = pjp.proceed();
        Long endTime = System.currentTimeMillis();
        timeSpendingLog(pjp, endTime - startTime);
        return returnVal;
    }

    private void beforRunningMethodLog(ProceedingJoinPoint pjp){
        System.out.println("just befor running '" + pjp.getSignature().getName() + "' method of '" + pjp.getTarget().getClass().getName() + "' class.");
    }
    private void timeSpendingLog(ProceedingJoinPoint pjp, Long spendingTime){
        System.out.println("running '" + pjp.getSignature().getName() + "' method of '" + pjp.getTarget().getClass().getName() + "' class takes " + spendingTime + "miliseconds.");
    }
}

as I mentioned i should enable this logging for any methods in controllers, service and dao layers. So I should do that in pointcut expression(the red line). In Around advice I will log the method name and class name just before running the method and then save the current time as startTime. After running the method (blue line) I will save the current time again as endTime. Then I will log the subtraction of these two time as method spending time.
4. Implementation of UserSupervisor class
Here I should check the security. I use spring security so the security and current user information are in spring security context. In last version of this project I checked the role via spring security annotation:

@Service
public class UserServiceImpl implements UserService {
...

    @PreAuthorize("hasRole('administrator') or hasRole('power_user')")
    public void saveOrUpdate(User user, List<Long> roleIds) {
        List<Role> roleList = new ArrayList();
        for (Long roleId : roleIds) {
            roleList.add(findRoleById(roleId));
        }
        user.setRoleList(roleList);

        user.setPassword(encodePassword(user.getPassword()));
        roleDao.saveOrUpdate(user);
    }
 
    @PreAuthorize("hasRole('administrator')")
    public void deleteAll(Long[] ids) {
        List<User> userList = new ArrayList();
        for (Long id : ids) {
            userList.add(roleDao.findById(id));
        }
        roleDao.deleteAll(userList);
    }
...
}

But here I commented the red line to assign the responsibly to the UserSupervisor aspect. Take a look to the class:

package com.aspects;

import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Pointcut;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.ProceedingJoinPoint;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.stereotype.Component;

import java.util.Collection;
 
@Component
@Aspect
public class UserSupervisor {
    @Pointcut("execution(* com.ucs.user.service.UserService.saveOrUpdate(..))")
    public void userSavePoint() {
    }

    @Pointcut("execution(* com.ucs.user.service.UserService.deleteAll(..))")
    public void userDeletePoint() {
    }

    @Around("userSavePoint()")
    public Object checkSecurity4Save(ProceedingJoinPoint pjp) throws Throwable {
        if (hasRole("power_user") || hasRole("administrator")) {
            return pjp.proceed();
        } else {
            throw new Exception("You Don't have save or update accessibility");
        }
    }

    @Around("userDeletePoint()")
    public Object checkSecurity4Delete(ProceedingJoinPoint pjp) throws Throwable {
        if (hasRole("administrator")) {
            return pjp.proceed();
        } else {
            throw new Exception("You Don't have delete accessibility");
        }
    }

    private UserDetails getCurrentUserDetail() {
        Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();
        UserDetails userDetails = null;
        if (principal instanceof UserDetails) {
            userDetails = (UserDetails) principal;
        }
        return userDetails;
    }

    private Boolean hasRole(String roleName) {
        Collection<GrantedAuthority> grantedAuthorityList = getCurrentUserDetail().getAuthorities();
        for (GrantedAuthority grantedAuthority : grantedAuthorityList) {
            if (grantedAuthority.getAuthority().equals(roleName)) {
                return true;
            }
        }
        return false;
    }
}

Here I should determine exactly the method of the class in pointcut expression(Blue lines). Then I should check the security just before running the method(Red lines) in advice methods. If the current user does not have specified role, an exception will be thrown.
5. Results
If you go to file repository list page, for example, You will have this results:

just befor running 'fileList' method of 'com.ucs.file.FileController' class.
just befor running 'findAllFiles' method of 'com.ucs.file.service.FileServiceImpl' class.
just befor running 'findAllFiles' method of 'com.ucs.file.dao.FileDaoImpl' class.
Hibernate: select this_.id as id7_2_, this_.is_file as is2_7_2_, this_.file as file7_2_, this_.name as name7_2_, this_.owner_id as owner6_7_2_, this_.parent_file_id as parent5_7_2_, user2_.id as id9_0_, user2_.account_non_expired as account2_9_0_, user2_.account_non_locked as account3_9_0_, user2_.credentials_non_expired as credenti4_9_0_, user2_.enabled as enabled9_0_, user2_.name as name9_0_, user2_.password as password9_0_, user2_.username as username9_0_, file3_.id as id7_1_, file3_.is_file as is2_7_1_, file3_.file as file7_1_, file3_.name as name7_1_, file3_.owner_id as owner6_7_1_, file3_.parent_file_id as parent5_7_1_ from tb_file this_ left outer join tb_user user2_ on this_.owner_id=user2_.id left outer join tb_file file3_ on this_.parent_file_id=file3_.id where this_.owner_id=? and this_.parent_file_id is null order by this_.is_file asc, this_.id desc
Hibernate: select rolelist0_.user_id as user1_1_, rolelist0_.role_id as role2_1_, role1_.id as id8_0_, role1_.authority as authority8_0_ from tb_user_role rolelist0_ left outer join tb_role role1_ on rolelist0_.role_id=role1_.id where rolelist0_.user_id=?
running 'findAllFiles' method of 'com.ucs.file.dao.FileDaoImpl' class takes 65miliseconds.
running 'findAllFiles' method of 'com.ucs.file.service.FileServiceImpl' class takes 65miliseconds.
just befor running 'findAllFilesSize' method of 'com.ucs.file.service.FileServiceImpl' class.
just befor running 'findAllFilesSize' method of 'com.ucs.file.dao.FileDaoImpl' class.
Hibernate: select count(this_.id) as y0_ from tb_file this_ where this_.owner_id=? and this_.parent_file_id is null
running 'findAllFilesSize' method of 'com.ucs.file.dao.FileDaoImpl' class takes 22miliseconds.
running 'findAllFilesSize' method of 'com.ucs.file.service.FileServiceImpl' class takes 22miliseconds.
running 'fileList' method of 'com.ucs.file.FileController' class takes 292miliseconds.

And also if you login as user with "user" role, in user save operation, you will have an exception with this title:"You Don't have save or update accessibility". To test this operation, First login as a user with "user role" then refer to user list page. Then view a record. In record view page, click edit button. Then click the save button in record edit page. Here you will find exception.
Source Code
It's the time to download the source code and try it yourselves.The application needed jar files are the same as this example. So you can copy all of them to here: [app-root]/lib/
The application database script is available in [app-root]/db/filerepository.sql. you can restore it in your mysql server. the connection datasource properties is in [app-root]/src/database.properites. And after you deploy the project in you application server (like tomcat) the home page will be: http://localhost:8080/home/view.html
the admin user specification is:
username: administrator
password: 123456
you can use it to log in for the first time.

all rights reserved by Mostafa Rastgar and Programmer Assistant weblog

Play My New Game(Stars War) - Objective javascript

Hey...

Play my new game from here and enjoy yourselves.

Stars War

Game Detail:
The game contains 6 main classes including:

• startStarswar(Main Class)
• BulletEngine
• Tank
• Jet
• Helicopter
• Plane

Take a look them in starswar.js file. It also uses JQuery framework.

startStarswar:
This is the main class. It handles Objects initiation, make game ground, handles key events, arrange enemies and finally checks if game or level ends then decide what to do. On the other hands this class manages their objects and their attitudes.

BulletEngine:
This class handles the bullets both player's bullets and enemy's bullets. I moves the bullets forward (for player's bullets) and backward (for enemy's bullets) and check if two bullets crashes, omit them. If a bullet crashes to player, it should explode it so runs explode method of player object. Also if a bullet crashes to enemy, it should explode it so runs explode method of enemy object.

Tank:
Tank is player. It can just move up and down. It can shoot on space key down or enter key down events. It has 4 lives. So in explode method it decrease the live flag and check if it gets less than 0, It raise Game Over.

Jet:
It is the first level enemy. It moves up and down. The up and down strategies are fully random. It also shoots and it is also random. It has 20 lives. So in explode method it decrease the live flag and check if it gets less than 0, it raise showNextEnemy method of startStarsWar object. This method will show next enemy(Helicopter).

Helicopter:
It is the second level enemy. This class resembles Jet class. It also can move right and left. The movements are fully random. It also have 40 lives and it can shoot 1 or 3 bullets any time. Its shooting strategy is random. It can moves left to 1/2 of the screen.

Plane:
It is the 3rd level enemy. This class resembles Jet class. It also can move right and left. The movements are fully random. It also have 60 lives and it can shoot 1 or 2 or 5 bullets any time. Its shooting strategy is random. It can moves left to 2/3 of the screen.

Again I emphasize take a look starswar.js file. It contains a good point of objective javascript.

all rights reserved by Mostafa Rastgar and Programmer Assistant weblog