Java Example: ZK

Showing posts with label ZK. Show all posts

Tuesday, May 3, 2016

How to Print in Zk

1. Print full page.

<button label="Print" onClick="Clients.print()" />

2. Print selected div.

Create PrintUtil java class.

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.Clients;

public class PrintUtil {

public static void print(Component comp) {
print(comp, "/MedXEMR/zk/template/template.zul", null);
}

public static void print(Component comp, String cssuri) {
print(comp, "/MedXEMR/zk/template/template.zul", cssuri);
}

public static void print(Component comp, String uri, String cssuri) {
String script = "printDiv('" + comp.getUuid() + "', '" + uri + "'";
if (cssuri != null) {
if (uri.contains("zkau") && !cssuri.startsWith("/"))
cssuri = "/" + cssuri; // absolute path if using default template.zul within jar file
script += ", '" + cssuri + "');";
} else {
script += ");";
}
Clients.evalJavaScript(script);

}
}

ZUL Code.

template.zul.

<div>

<n:hr />

<n:b>

PROHIBITION ON REDISCLOSURE OF CONFIDENTIAL INFORMATION

</n:b>

</div>

</zk>

Javascript Code.

function printDiv(uuid, uri, cssuri) {

if (uuid && uri) {

var wgt = zk.Widget.$(uuid), body = document.body, ifr = jq('#zk_printframe');

if (!ifr[0]) {

jq(body).append('<iframe id="zk_printframe" name="zk_printframe"' + ' style="width:0;height:0;border:0;position:fixed;"' + '></iframe>');

ifr = jq('#zk_printframe');

}

// wait form submit response then call print function

// reference: http://isometriks.com/jquery-ajax-form-submission-with-iframes

ifr.unbind('load.ajaxsubmit').bind('load.ajaxsubmit', function() {

var iw = ifr[0].contentWindow || ifr[0];

iw.document.body.focus();

iw.print();

});

jq(body).append('<form id="zk_printform" action="' + uri + '" method="post" target="zk_printframe"></form>');

var form = jq('#zk_printform'), content = '<div style="width: ' + wgt.$n().offsetWidth + 'px">' + jq(wgt.$n())[0].outerHTML + '</div>';

form.append(jq('<input/>').attr({

name : 'printContent',

value : content

}));

if (cssuri) {

form.append(jq('<input/>').attr({

name : 'printStyle',

value : cssuri

}));

}

form.submit().remove();

} else {

window.print();

}

how to call Print in zul?

class="btn btn-sm btn-default fa fa-print btn-group-btn"

onClick="com.swain..PrintUtil.print(sampleform)"

tooltiptext="Print">

</a>

jQuery export PDF with jspdf api in Zk

1. Download jspdf api https://mrrio.github.io/jsPDF/examples/basic.html

2. Download html2canvas api. https://html2canvas.hertzen.com/

3. If you need multiple page PDF then download canvas2image api. https://github.com/hongru/canvas2image

Javascript code.

var form;

function initPDF(target) {

form = $('.' + target), cache_width = form.width(), a4 = [ 595.28, 841.89 ]; // for a4 size paper width and height

}

// create pdf

function createPDF(fileName) {

$('body').scrollTop(0);

getCanvas().then(function(canvas) {

var img = canvas.toDataURL("image/png"), doc = new jsPDF({

unit : 'px',

format : 'a4'

});

doc.addImage(img, 'JPEG', 20, 20);

var image = new Image();

image = Canvas2Image.convertToJPEG(canvas);

var croppingYPosition = 1095;

count = (image.height) / 1095;

for (var i = 1; i < count; i++) {

doc.addPage();

var sourceX = 0;

var sourceY = croppingYPosition;

var sourceWidth = image.width;

var sourceHeight = 1095;

var destWidth = sourceWidth;

var destHeight = sourceHeight;

var destX = 0;

var destY = 0;

var canvas1 = document.createElement('canvas');

canvas1.setAttribute('height', destHeight);

canvas1.setAttribute('width', destWidth);

var ctx = canvas1.getContext("2d");

ctx.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

var image2 = new Image();

image2 = Canvas2Image.convertToJPEG(canvas1);

image2Data = image2.src;

doc.addImage(image2Data, 'JPEG', 20, 20);

croppingYPosition += destHeight;

}

doc.save(fileName + '.pdf');

form.width(cache_width);

});

}

// create canvas object

function getCanvas() {

form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');

return html2canvas(form, {

imageTimeout : 2000,

removeContainer : true

});

}

ViewModel Code.

Just pass the div css class name.

public void initPDF(String className) {

Clients.evalJavaScript("initPDF('" + className + "');");

}

public void exportHTMLTOPDF(String className) {

Clients.evalJavaScript("createPDF('" + className + "');");

}

jQuery Full calendar implemented in ZK

Full calendar

1. Download http://fullcalendar.io/download/

2. Document http://fullcalendar.io/docs/

3. Javascript code.

function initCalendar(data, date) {

var decodedString = $.parseJSON(Base64.decode(data));

$('#calendar').fullCalendar('destroy');

$('#calendar').fullCalendar('render');

// $('#calendar').fullCalendar('rerenderEvents');

// var obj = $.parseJSON(document.getElementById('json').getAttribute("value"));

$('#calendar').fullCalendar({

header : {

left : 'prev,next today',

center : 'title',

right : 'month,agendaWeek,agendaDay'

defaultView : 'agendaWeek',

minTime : "07:00:00",

maxTime : "19:00:00",

defaultDate : date,

selectable : true,

selectHelper : true,

select : function(start, end) {

var title = "New Appointment";

var eventData;

eventData = {

title : title,

start : start,

end : end

};

$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true

zAu.send(new zk.Event(zk.Widget.$('$json'), "onCreateCalendar", eventData, {

toServer : true

}));

$('#calendar').fullCalendar('unselect');

eventDrop : function(event, delta, revertFunc) {

// alert(event.title + " was dropped on " + event.start.format());

// if (!confirm("Are you sure about this change?")) {

// revertFunc();

// }

eventData = {

id : event.id,

title : event.title,

start : event.start,

end : event.end

};

zAu.send(new zk.Event(zk.Widget.$('$json'), "onUpdateCalendar", eventData, {

toServer : true

}));

eventResize : function(event, delta, revertFunc) {

// alert(event.title + " end is now " + event.end.format());

// if (!confirm("is this okay?")) {

// revertFunc();

// }

eventData = {

id : event.id,

title : event.title,

start : event.start,

end : event.end

};

zAu.send(new zk.Event(zk.Widget.$('$json'), "onUpdateCalendar", eventData, {

toServer : true

}));

eventClick : function(calEvent, jsEvent, view) {

eventData = {

id : calEvent.id,

title : calEvent.title,

start : calEvent.start,

end : calEvent.end

};

zAu.send(new zk.Event(zk.Widget.$('$json'), "onUpdateCalendar", eventData, {

toServer : true

}));

editable : true,

eventLimit : true, // allow "more" link when too many events

events : decodedString

});

}

4. Code.

<h:include id="json" type="hidden"></h:include>

<n:div id="calendar"></n:div>

</div>

5. ViewModel Code.

Just call it inside init method with JSON String.

SimpleDateFormat format = new SimpleDateFormat("MM/dd/yyyy");

Clients.evalJavaScript("initCalendar(\"'" + Base64.encode(json) + "'\",\"'" + format.format(new Date()) + "'\");");

update event.

@Listen("onUpdateCalendar=#json")

public void onUpdateCalendar(org.zkoss.zk.ui.event.Event event) {

//code here.

}

create event.

@Listen("onCreateCalendar=#json")

public void onCreateCalendar(org.zkoss.zk.ui.event.Event event) {

//code here.

}

jQuery Notification in ZK

1- Download jQuery Plugin.

Link- https://github.com/kamranahmedse/jquery-toast-plugin

Javascript code .

$(document).ready(function() {

toastr.options = {

"closeButton" : true,

"debug" : false,

"progressBar" : true,

"preventDuplicates" : true,

"positionClass" : "toast-top-right",

"onclick" : null,

"showDuration" : "400",

"hideDuration" : "1000",

"timeOut" : "1200",

"extendedTimeOut" : "1000",

"showEasing" : "swing",

"hideEasing" : "linear",

"showMethod" : "fadeIn",

"hideMethod" : "fadeOut"

}

});

ZK Viewmodel code.

public static void showInfoNotification(String title, String message) {

Clients.evalJavaScript("toastr.info('" + message + "', '" + title + "');");

}

public static void showErrorNotification(String title, String message) {

Clients.evalJavaScript("toastr.error('" + message + "', '" + title + "');");

}

public static void showSuccessNotification(String title, String message) {

Clients.evalJavaScript("toastr.success('" + message + "', '" + title + "');");

}

public static void showWarningNotification(String title, String message) {

Clients.evalJavaScript("toastr.warning('" + message + "', '" + title + "');");

}

public static void showInfoNotification(String message) {

Clients.evalJavaScript("toastr.info('" + message + "', '');");

}

public static void showErrorNotification(String message) {

Clients.evalJavaScript("toastr.error('" + message + "', '');");

}

public static void showSuccessNotification(String message) {

Clients.evalJavaScript("toastr.success('" + message + "', '');");

}

public static void showWarningNotification(String message) {

Clients.evalJavaScript("toastr.warning('" + message + "', '');");

}

Saturday, September 20, 2014

Validating Form When User Clicks Submit with ZK Framework

<textbox 
     value="@load(vm.someAttribute) @save(vm.someAttribute, before='save')" 
     constraint="no empty" .../>

<button label="Submit" onClick="@command('save')"/>

Tuesday, January 28, 2014

Add customize clear button and Clear Date from Datebox through Jquery in ZK framework

version - zk 6.5.3

<zk>
    <script><![CDATA[
    zk.afterLoad('zul.db', function () {
    var _xRenderer = {};
    zk.override(zul.db.Renderer, _xRenderer, {
    titleHTML: function (wgt, out, localizedSymbols) {
    _xRenderer.titleHTML.apply(this, arguments); //call the original method
    var uuid = wgt.uuid,
       view = wgt._view,
       text = wgt.getZclass() + '-ctrler';

    if(view == 'day') {
    out.push('<button id="', uuid, '-today" class="', text, '"', 
    ' onClick="var cal = zk.Widget.$(\'$', wgt.parent.id, '\')._pop; cal._value = null; cal._setTime();"',
    ' >', ' today', '</button>');
    }
              out.push('<button id="', uuid, '-clear" class="', text, '"', 
    ' onClick="clearDatebox(this)"',
    ' >', ' clear', '</button>');
    }
    });
    });
    function clearDatebox (btn) {

     var str = btn.id;
    var res = str.substring(3,4); 

      if(res==0){
        var id = jq('.z-datebox-inp')[res].id,
            dbx = zk.Widget.$('#' + id);
        dbx.getInputNode().value = '';
        dbx.updateChange_();
      }else{
      var id = jq('.z-datebox-inp')[res/2].id,
            dbx = zk.Widget.$('#' + id);
        dbx.getInputNode().value = '';
        dbx.updateChange_();
      }
    }
    ]]></script>
    <datebox id="db" ></datebox>
  <datebox id="db1" ></datebox>
  <datebox id="db2" ></datebox>
  <datebox id="db3" ></datebox>
</zk>

change this method.

function clearDatebox (btn) {

      var d=jq('.z-datebox-pp').length-1;
        var id = jq('.z-datebox-pp')[d].id.replace('-pp', ''),
            dbx = zk.Widget.$('#' + id);
        dbx.getInputNode().value = '';
        dbx.updateChange_();
    }

for zk version 7.0 code here

      <zk>
        <script><![CDATA[
        zk.afterLoad('zul.db', function () {
        var _xRenderer = {};
        zk.override(zul.db.Renderer, _xRenderer, {
        titleHTML: function (wgt, out, localizedSymbols) {
        _xRenderer.titleHTML.apply(this, arguments); //call the original method
        var uuid = wgt.uuid,
           view = wgt._view,
           text = wgt.getZclass() + '-ctrler';

        if(view == 'day') {
        out.push('<button id="', uuid, '-today" class="', text, '"', 
        ' onClick="setDatebox(this)"',
        ' >', ' today', '</button>');
        }
                  out.push('<button id="', uuid, '-clear" class="', text, '"', 
        ' onClick="clearDatebox(this)"',
        ' >', ' clear', '</button>');
        }
        });
        });
        function clearDatebox (btn) {

         var str = btn.id;
        var res = str.substring(3,4); 

          if(res==0){
          document.getElementById(jq('.z-datebox-input')[res].id).value='';
          }else{
            document.getElementById(jq('.z-datebox-input')[res/2].id).value='';
          }
        }
           function setDatebox (btn) {
         var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!

        var yyyy = today.getFullYear();
        if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm}
 today = mm+'/'+dd+'/'+yyyy;

             var str = btn.id;
            var res = str.substring(3,4); 

             if(res==0){
             document.getElementById(jq('.z-datebox-input')[res].id).value=today;
             }else{
                document.getElementById(jq('.z-datebox-input')[res/2].id).value=today;
            }
        }

        ]]></script>
        <datebox id="db" ></datebox>
      <datebox id="db1" ></datebox>
      <datebox id="db2" ></datebox>
      <datebox id="db3" ></datebox>
    </zk>