DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Twitter-like Microblogging With Dojo & Persevere

09.11.2009
| 4403 views |
  • submit to reddit
        This source code based on the "friend" example given with Persevere. It is a simple Twitter-like microblogging program. Note that you need to create a class definition file in "WEB-INF\jslib\tweet.js" for it to work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Persevere Microblog</title>
  
  <!-- Following Tweet class definition must exist in \WEB-INF\jslib\tweet.js:
  
  Class(
  {
    "id":"Tweet",
    "name":"Tweet",
    "schema":{
      "extends":{"$ref":"../Class/Object"},
      "prototype":{},
      "properties":{
        "name": { optional:true },
        "content": { optional:true }
      }     
    }
  });
  
  -->
  
  <script djConfig="isDebug:false, parseOnLoad: true" src="../jsclient/dojo/dojo.js"></script>
  <script src="../jsclient/persevere/persevere.js"></script>
  <script type="text/javascript"> 
    onload = function()
    {
      // load all the classes from Persevere
      displayTweets = function()
      {
        pjs.load("/Tweet/", function(tweets)
        {
          var tableHTML = "";
          for(var i = tweets.length -1 ; i >= 0; i--)
          {
            var tweet = tweets[i];
            var escapedName = tweet.name.replace(/</,'');
            var escapedContent = tweet.content.replace(/</,'');
            var age = ((new Date().getTime() - tweet.timestamp) / 1000) + " seconds ago";
            tableHTML += "<p>" + escapedName + " : " + escapedContent + " (" + age + ")</p>";
          }
          document.getElementById("list").innerHTML = tableHTML;
        });
      }
      
      pjs.loadClasses(/*path*/ null, displayTweets);
      
      addTweet_onclic = /*document.getElementById("addTweet").onclick =*/ function()
      {
        var name = document.getElementById("sender").value;
        var message = document.getElementById("message").value;
        if(typeof Tweet == 'undefined'){
          return alert('A "Tweet" class must be created in order for this demo to work');
        }
        if(name && message){
          new Tweet({"name":name,"content":message,"timestamp":new Date().getTime()}); // WHY? "message" field (instead of "content") does not work
          pjs.commit(displayTweets);
          
        }
      };
    }
  </script>
</head>
<body>
  <table border='0' margin='5px'>
    <tr><td>Sender:<br><input id='sender' value='me'></td>
    <td>What's on your mind?<br><input id='message' value='enter your tweet here!'>
      <button id='addTweet' onclick='addTweet_onclic()'>Tweet!</button></td></tr>
  </table>
  <div id="list" border="1">
  </div>
</body>
</html>