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.


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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.