Phân biệt điểm giống khác nhau giữa Widgets vs Gadgets

Web Widget là ứng dụng được kích hoạt chạy cùng với một trang web trong trình duyệt web browser. Thường hoạt động ngắn hạn, nghĩa là widget chỉ chiếm 1 phần của trang web, cung cấp 1 số thông tin, ứng dụng hữu ích. Các từ thường dùng tương đương: portlet, web part, gadget, badge, module, snippet, flake.

Ứng dụng widget thường là: clocks, event countdowns, auction ticker, stock market tickers, fligth arrival information, daily weather,...

Gadget cũng là ứng dụng chạy trên nền 1 trang web, nó có chức năng giống như widget nhưng gadget có đặc thù riêng là chỉ hoạt động trên một số websites riêng biệt có hỗ trợ loại gadget này. Ví dụ Google gadget chỉ dùng được trong trang của google như Blogger, BlogSpot.
Ví dụ sau là mã nguồn đầy đủ của Gadget To Do List, có chức năng ghi chú, lưu danh sách việc cần làm.

 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Dynamic Height"
    height="100">
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <script type="text/javascript">
    // This example lets users add items to a grocery list and then clear the list.
    // When items are added or cleared, the gadget resizes itself.
    var mylist = "";
    var flag = 0;

    // Function that is invoked whenever user clicks the Add button to add an
    // item to the list.
    function addToList (form) {
        var input = _trim(form.inputbox.value);
        if (input == "") {
            return;
        }

        // Make alternating lines green/white, depending on value of flag variable.
        if(flag == 0){
            mylist += "<div style='padding-left: 5px;background-color: #E6FFE6; font-family:Arial, Helvetica;'>" +input + "</div>";
            flag = 1;
        }
        else {
            mylist += "<div style='padding-left: 5px;font-family:Arial, Helvetica;'>" +input + "</div>";
            flag = 0;
        }

        // Call setContent to output HTML to div and resize gadget
        setContent(mylist);
    }

    // Clear the list
    function clearList(form) {
        // Call setContent to remove all items from the list and resize the gadget
        setContent("");
    }

    // Outputs content to the div and resizes the gadget
    function setContent(html) {
        document.getElementById('content_div').innerHTML = html;

       // Tells gadget to resize itself
       gadgets.window.adjustHeight();
    }
    </script>
  <FORM NAME="myform" ACTION="" METHOD="GET"><BR>
  <INPUT TYPE="text" NAME="inputbox" VALUE="">
  <INPUT TYPE="button" NAME="button" Value="Add" onClick="addToList(this.form)">
  <INPUT TYPE="button" NAME="button2" Value="Clear" onClick="clearList(this.form)">
  </FORM>
  <div id="content_div"></div>
  ]]>
  </Content>
</Module>

(reference ecibi, kic corp)