jump to navigation

Dojo-Widget AddressReferrer 26 May 2008

Posted by Oliver Köhler in Dojo-Widget.
Tags: , , , ,
add a comment

Now that we got suitable webspace we would like to present our widgets.

The first widget we developed is the AddressReferrer. It transforms a usual inputfield into an inputfield with a predefined contextual function.

Example: If you have a field with a phonenumber you could generate a bottom that starts skype to call this number.

Demo

How to use:

In the head of the page you have to include some scripts like it is displayed below.

In the body:

  • declare your inputfield with the dojoType “pavone.widget.AddressReferrer”
  • reftype is the type of the protocol that you want to use
    • predefined types are
      • “skype” for skype-protocol
      • “email” for e-mail
      • “http” for website links
  • label is the image that should be displayed
  • title is the alternative text of the image
  • assign a unique id to every inputfield

<input dojoType=“pavone.widget.AddressReferrer” value=“2355” reftype=“skype” id=“ID1” label=“images/skype.gif” title=“anrufen”/>

Include in your html-file:

  1. <html>
  2. <head>
  3. …
  4. <style type=“text/css”>
  5. @import “../../AddressReferrer.css”; //path to your stylesheet
  6. </style>
  7. …
  8. <script type=“text/javascript” src=“../../dojo/dojo.js” djConfig=“isDebug:true, parseOnLoad: true”></script> //path to dojo
  9. <script type=“text/javascript” src=“../../dojo/pavone/AddressReferrer.js”></script> //path to the widget
  10. <script type=“text/javascript”>
  11. dojo.require(“dojo.parser”); // scan page for widgets and instantiate them
  12. </script>
  13. …
  14. </head>
  15. <body>
  16. …
  17. <input dojoType=“pavone.widget.AddressReferrer” value=“2355” reftype=“skype” id=“ID1” label=“images/skype.gif” title=“anrufen”/>
  18. …
  19. </body>
  20. </head>

Sourcecode of AddressReferrer.js:

    1. /*——————————————————————————–
    2. *
    3. *  Developed for a project at the University of Paderborn under the direction of
    4. *  the PAVONE AG (www.pavone.de) and the Groupware Competence Centers (gcc.upb.de)
    5. *
    6. *  Licensed under the Academic Free License
    7. *
    8. *  Developed by Oliver Koehler, Coskun Durmaz, Natnael Tesfamariam
    9. *
    10. ——————————————————————————–*/
    12. if(!dojo._hasResource[“pavone.widget.AddressReferrer”]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
    13. dojo._hasResource[“pavone.widget.AddressReferrer”] = true;
    14. dojo.provide(“pavone.widget.AddressReferrer”);
    15. dojo.require(“dijit.form._FormWidget”);
    16. dojo.require(“dijit._Templated”);
    17. dojo.require(‘dijit.form.Button’);
    18. dojo.declare(“pavone.widget.AddressReferrer”,
    19. [dijit.form._FormWidget],
    20. {
    21. label: “”,
    22. reftype: “”,
    23. target: “”,
    24. templateString: ‘<div class=\”AddressRef\”>’+
    25. ‘<input type=\”text\” dojoAttachEvent=\”onchange:_onChange\” id=\”ID${id}\” value=\”${value}\” reftype=\”${reftype}\” dojoType=\”dijit.form.TextBox\” dojoAttachPoint=\”focusNode, inputNode\” trim=\”true\” propercase=\”true\” />’+
    26. ‘<button class=\”AddressRefButton \” dojoType=\”dijit.form.Button\” dojoAttachEvent=\”onclick:_onClick\” dojoAttachPoint=\”focusNode, inputNode\”><image src=\”${label}\” title=\”${title}\” alt=\”${title}\”>’+
    27. ‘</img></button> \n\t<\div>’,
    28. _onChange: function () {
    29. this.value = dojo.byId(‘ID’+this.id).value;
    30. },
    31. _onClick: function () {
    32. var refType = this.reftype;
    33. var tar = this.target;
    34. var ref;
    35. var target;
    36. switch (refType) {
    37. case “skype”: ref = “skype://”;
    38. target = “self”;
    39. break;
    40. case “email”: ref = “mailto:”;
    41. target = “self”;
    42. break;
    43. case “http”: ref = “”;
    44. target = “new”;
    45. break;
    46. default: ref = refType;
    47. target = tar;
    48. }
    49. var address = this.value;
    50. address = address.replace(/[‘ ‘]/g , ”);
    51. if (target==”self”) {
    52. document.location.href=ref+””+address;
    53. } else if (target==”new”) {
    54. window.open(ref+””+address);
    55. }
    56. }
    57. });
    58. }