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. <style type=“text/css”>
  4. @import “../../AddressReferrer.css”; //path to your stylesheet
  5. </style>
  6. <script type=“text/javascript” src=“../../dojo/dojo.js” djConfig=“isDebug:true, parseOnLoad: true”></script> //path to dojo
  7. <script type=“text/javascript” src=“../../dojo/pavone/AddressReferrer.js”></script> //path to the widget
  8. <script type=“text/javascript”>
  9. dojo.require(“dojo.parser”); // scan page for widgets and instantiate them
  10. </script>
  11. </head>
  12. <body>
  13. <input dojoType=“pavone.widget.AddressReferrer” value=“2355” reftype=“skype” id=“ID1” label=“images/skype.gif” title=“anrufen”/>
  14. </body>
  15. </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. ——————————————————————————–*/
    11. if(!dojo._hasResource[“pavone.widget.AddressReferrer”]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
    12. dojo._hasResource[“pavone.widget.AddressReferrer”] = true;
    13. dojo.provide(“pavone.widget.AddressReferrer”);
    14. dojo.require(“dijit.form._FormWidget”);
    15. dojo.require(“dijit._Templated”);
    16. dojo.require(‘dijit.form.Button’);
    17. dojo.declare(“pavone.widget.AddressReferrer”,
    18. [dijit.form._FormWidget],
    19. {
    20. label: “”,
    21. reftype: “”,
    22. target: “”,
    23. templateString: ‘<div class=\”AddressRef\”>’+
    24. ‘<input type=\”text\” dojoAttachEvent=\”onchange:_onChange\” id=\”ID${id}\” value=\”${value}\” reftype=\”${reftype}\” dojoType=\”dijit.form.TextBox\” dojoAttachPoint=\”focusNode, inputNode\” trim=\”true\” propercase=\”true\” />’+
    25. ‘<button class=\”AddressRefButton \” dojoType=\”dijit.form.Button\” dojoAttachEvent=\”onclick:_onClick\” dojoAttachPoint=\”focusNode, inputNode\”><image src=\”${label}\” title=\”${title}\” alt=\”${title}\”>’+
    26. ‘</img></button> \n\t<\div>’,
    27. _onChange: function () {
    28. this.value = dojo.byId(‘ID’+this.id).value;
    29. },
    30. _onClick: function () {
    31. var refType = this.reftype;
    32. var tar = this.target;
    33. var ref;
    34. var target;
    35. switch (refType) {
    36. case “skype”: ref = “skype://”;
    37. target = “self”;
    38. break;
    39. case “email”: ref = “mailto:”;
    40. target = “self”;
    41. break;
    42. case “http”: ref = “”;
    43. target = “new”;
    44. break;
    45. default: ref = refType;
    46. target = tar;
    47. }
    48. var address = this.value;
    49. address = address.replace(/[‘ ‘]/g , ”);
    50. if (target==”self”) {
    51. document.location.href=ref+””+address;
    52. } else if (target==”new”) {
    53. window.open(ref+””+address);
    54. }
    55. }
    56. });
    57. }

    Hello world! 8 April 2008

    Posted by Oliver Köhler in Generally.
    Tags:
    add a comment

    Hello World,

    this blog was created for providing widgets we developed for a projekt at the University of Paderborn under administration of the PAVONE AG and the Groupware Competence Center.

    We invite you to post your comments an help us to improve our widgets.

    The widgets will follow as soon as we get some suitable webspace.

    All displayed widgets are licensed under the Academic Free License