Jun 112010
 

An earlier post showed how simple is to add label printing capabilities into a web application by using DYMO Label Framework JavaScript Library. Now we will explore some advanced features. One such feature is generating a label preview. The complete sample is available on http://labelwriter.com/software/dls/sdk/samples/js/PreviewAndPrintLabel/PreviewAndPrintLabel.html; JavaScript code on http://labelwriter.com/software/dls/sdk/samples/js/PreviewAndPrintLabel/PreviewAndPrintLabel.js. The sample allows previewing an Address label loaded from the server. The content of the address can be edited in a TextArea element. The label preview is dynamically updated using data from the TextArea element. After the address is entered, the label can be printed on a printer selected from a list of available printers.

Loading the Label

Label layout information is stored using xml, so it is simple to operate it in the browser. The sample uses the jQuery library to load xml from the server though any other library can be used to do that. On the server the label is stored as a regular file “Address.label”.

function loadLabelFromWeb()
{
    // use jQuery API to load label
    $.get("Address.label", function(labelXml)
    {
        label = dymo.label.framework.openLabelXml(labelXml);
        // check that label has an address object
        if (label.getAddressObjectCount() == 0)
        {
            alert("Selected label does not have an address object on it. Select another label");
            return;
        }

        updatePreview();
        addressTextArea.value = getAddress();
        printButton.disabled = false;
        addressTextArea.disabled = false;
    }, "text");
}

After label xml is downloaded from the server it is “opened” and stored in label variable by calling dymo.label.framework.openLabelXml() function.

Generating Preview

After the label is loaded its preview is generated by calling render() method. render() method returns preview data as a base64-encoded png stream, so it can be used as a data url for <img>.

function updatePreview()
{
    if (!label)
        return;

    var pngData = label.render();

    var labelImage = document.getElementById('labelImage');
    labelImage.src = "data:image/png;base64," + pngData;
}

Please note that not all browsers support data urls, e.g. IE6 and IE7 do not support them at all, IE8 has a limitation of 32 Kb for an url, so not all labels can fit into this limit. But it is always possible to generate preview on the server if needed.

Getting Address Data

To initialize TextArea element with address information from the label the getAddressText() method can be used. Because we know/assume that our label has only one address object on it we address it as an object with index ‘0’.

function getAddress()
{
    if (!label || label.getAddressObjectCount() == 0)
        return "";

    return label.getAddressText(0);
}

Setting Address Data

To update the label with a new address entered in TextArea element. setAddressText() can be used.

function setAddress(address)
{
    if (!label || label.getAddressObjectCount() == 0)
        return;

    return label.setAddressText(0, address);
}

Printing

Printing is as simple as calling the print() method with the printer name selected from printers combo box.

label.print(printersSelect.value);

Summary

In this post we looked at how label previewing can be added into your web application. In the next post we will see how multiple labels can be printed.