jQuery EasyUI

Introductie

jQuery EasyUI is een rich client framework gebaseerd op JavaScript en jQuery.
Het is feitlijk een verzameling jQuery plugins.

De werking van EasyUI is in principe eenvoudig: standaard html constructies zoals een table worden verrijkt met EasyUI specifieke attributen. Met JavaScript en de EasyUI library worden deze bewerkt tot rich userinterface elementen. Zo kunnen met HTML attributen allerlei visuele properties worden ingesteld in de html constructs die runtime door EasyUI worden vormgegeven.

Een voorbeeld van een EasyUI html attribuut is “url”. Deze krijgt simpelweg de url referentie naar de servlet of REST webservice.

Voor CRUD toepassingen wordt een html table gemaakt en een apart dialog met html form voor de create / update dialog structuur. Middels JavaScript wordt dit form geactiveerd en uitgevoerd. Je maakt dus in javaScript de logic om de crud acties uit te voeren.

Installatie

Om EasyUI te gebruiken moet het zip bestand (jquery-easyui-x.x.x.zip) worden gedownload via http://www.jeasyui.com/ en ergens op de schijf worden uitgepakt. Onderdeel van de zip is een directory “themes”. Het handigste is om onder de web root een map “easyui” te maken met daaronder de subdirectory “themes” in zijn geheel gekopieerd van de uitgepakte zip. In de directory “easyui” zelf wordt het bestand jquery.easyui.min.js geplaatst.

In de html pagina’s die van EasyUI gebruikmaken worden de volgende referenties in de HEAD opgenomen:

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

NB: De EasyUI bevat ook een versie van het jQuery bestand in de easyui map.
Het is echter beter om deze niet te gebruiken, maar de eigen jQuery te gebruiken.

Uiteraard kan er in bovenstaande referenties naar de css bestanden ook gebruik worden gemaakt van andere beschikbare themes.

Gebruik

Om het gebruik toe te lichten wordt een uitgewerkt voorbeeld beschreven van een “departments” tabel en bijbehorende dialog voor het uitvoeren van create/update acties. De tabel bevat een aparte kolom om per geselecteerd department item door te kunnen linken maar een employees.html page voor het tonen van de medewerkers binnen een afdeling. Daarbij moet ook de id van de geselecteerde department als parameter worden meegegeven in de http request zodat de employees.html deze specifiek voor één department kan tonen.

De HTML Tabel definitie

Hieronder het voorbeeld van de tabel structuur voor het EasyUI TableGrid element:

<table id="dg" title="Departments" class="easyui-datagrid" style="width:550px;height:250px"
        url="http://localhost:8082/employeesREST/dep/list"
        toolbar="#toolbar" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="departmentId">Id</th>
            <th field="name" width="50">Naam</th>
            <th field="address" width="50">Address</th>
            <th field="budget" width="50">Budget</th>
            <th field="employees" width="50" formatter="link2Employees"></th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
onclick="newDepartment()">New Department</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
onclick="editDepartment()">Edit Department</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
onclick="removeDepartment()">Remove Department</a>
</div>

Er worden qua HTML table element alleen kolommen in de thead sectie van de table gedefinieerd, geen rows en columns. Die worden automatisch runtime door EasyUI toegevoegd. In een aparte div container wordt een toolbar met create/update/delete buttons gedefinieerd. In het table element worden verschillende specifieke EasyUI properties toegevoegd. De property url hier refereert naar een REST webservice die wordt aangeroepen om de tabel te vullen. De toolbar buttons bevatten onClick definities naar JavaScript events die verderop in het artikel worden toegelicht.

De HTML Create/Update dialog definitie

Hieronder de html voor de EasyUI create/update dialog.

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
        closed="true" buttons="#dlg-buttons">
    <div class="ftitle">Department Information</div>
    <form id="fm" method="post">
        <div class="fitem">
            <label>Naam:</label>
            <input name="name" id="name" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Adres:</label>
            <input name="address" id="address" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Budget:</label>
            <input name="budget" id="budget" class="easyui-validatebox">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok"
onclick="saveDepartment()">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>

Naar deze HTML wordt in de JavaScript functions newDepartment() en editDepartment() gerefereerd. De onClick property verwijst naar een custom JavaScript function saveDepartment().

De JavaScript CRUD Logic

De volgende 2 JavaScript functions worden aangeroepen bij de onClick events op de html toolbar definities bij het EasyUI HTML table element.

function newDepartment(){
    $('#dlg').dialog('open').dialog('setTitle','New Department');
    $('#fm').form('clear');
    newrecord = true;
    url = 'http://localhost:8082/employeesREST/dep/create';
}
function editDepartment(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $('#dlg').dialog('open').dialog('setTitle','Edit Department');
        $('#fm').form('load',row);
    	newrecord = false;
        url = 'http://localhost:8082/employeesREST/dep/update';
    }
}

Te zien is dat de functions de dialog “dlg” en daarin de form “fm” die in de html zijn gedefinieerd bewerken en aanroepen. Ze maken allebei gebruik van dezelfde html form definitie. Ze stellen ook allebei de url in.

Hieronder wordt de JavaScript function saveDepartment() getoond die het resultaat van de invoer van de html form verwerkt. Ten eerste worden de inputs van het form tot een url pad in de variabele urlrequest gecombineerd voor de aanroep van de webservice. Vervolgens wordt een jQuery .form() functie aangeroepen om de url van de webservice aan te roepen. Deze aanroep definieert ook de callback functie die bij succes wordt uitgevoerd. Daarbij wordt o.a. de dialog gesloten en een reload van de datagrid uitgevoerd.

function saveDepartment(){
    var row = $('#dg').datagrid('getSelected');
	var urlrequest="";
	if (newrecord) {
		urlrequest = url;
	} else {
		urlrequest = url + '/' + row['departmentId'];
	}
	urlrequest = urlrequest +
	'?name=' + $('#name').val() +
	'&address=' + 	$('#address').val() +
	'&budget=' + $('#budget').val();

    $('#fm').form('submit',{
        url: urlrequest,
        onSubmit: function(){
            return $(this).form('validate');
        },
        success: function(result){
            var result = eval('('+result+')');
            if (result.success){
                $('#dlg').dialog('close');      // close the dialog
                $('#dg').datagrid('reload');    // reload the data
            } else {
                $.messager.show({
                    title: 'Error',
                    msg: result.msg
                });
            }
        }
    });
};
This entry was posted in JavaScript, Overig and tagged , , . Bookmark the permalink.

Geef een reactie

Je e-mailadres wordt niet gepubliceerd.

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>