Advanced Search

Twitter-like Microblogging with Dojo & Persevere

/ Published in: HTML
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.   <title>Persevere Microblog</title>
  5.  
  6.   <!-- Following Tweet class definition must exist in \WEB-INF\jslib\tweet.js:
  7.  
  8.   Class(
  9.   {
  10.     "id":"Tweet",
  11.     "name":"Tweet",
  12.     "schema":{
  13.       "extends":{"$ref":"../Class/Object"},
  14.       "prototype":{},
  15.       "properties":{
  16.         "name": { optional:true },
  17.         "content": { optional:true }
  18.       }     
  19.     }
  20.   });
  21.  
  22.   -->
  23.  
  24.   <script djConfig="isDebug:false, parseOnLoad: true" src="../jsclient/dojo/dojo.js"></script>
  25.   <script src="../jsclient/persevere/persevere.js"></script>
  26.   <script type="text/javascript"> 
  27.     onload = function()
  28.     {
  29.       // load all the classes from Persevere
  30.       displayTweets = function()
  31.       {
  32.         pjs.load("/Tweet/", function(tweets)
  33.         {
  34.           var tableHTML = "";
  35.           for(var i = tweets.length -1 ; i >= 0; i--)
  36.           {
  37.             var tweet = tweets[i];
  38.             var escapedName = tweet.name.replace(/</,'');
  39.             var escapedContent = tweet.content.replace(/</,'');
  40.             var age = ((new Date().getTime() - tweet.timestamp) / 1000) + " seconds ago";
  41.             tableHTML += "<p>" + escapedName + " : " + escapedContent + " (" + age + ")</p>";
  42.           }
  43.           document.getElementById("list").innerHTML = tableHTML;
  44.         });
  45.       }
  46.  
  47.       pjs.loadClasses(/*path*/ null, displayTweets);
  48.  
  49.       addTweet_onclic = /*document.getElementById("addTweet").onclick =*/ function()
  50.       {
  51.         var name = document.getElementById("sender").value;
  52.         var message = document.getElementById("message").value;
  53.         if(typeof Tweet == 'undefined'){
  54.           return alert('A "Tweet" class must be created in order for this demo to work');
  55.         }
  56.         if(name && message){
  57.           new Tweet({"name":name,"content":message,"timestamp":new Date().getTime()}); // WHY? "message" field (instead of "content") does not work
  58.           pjs.commit(displayTweets);
  59.  
  60.         }
  61.       };
  62.     }
  63.   </script>
  64. </head>
  65. <body>
  66.   <table border='0' margin='5px'>
  67.     <tr><td>Sender:<br><input id='sender' value='me'></td>
  68.     <td>What's on your mind?<br><input id='message' value='enter your tweet here!'>
  69.       <button id='addTweet' onclick='addTweet_onclic()'>Tweet!</button></td></tr>
  70.   </table>
  71.   <div id="list" border="1">
  72.   </div>
  73. </body>
  74. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.