Kaynağa Gözat

Simple Twitterwall made with Amber

Signed-off-by: Stefan Krecher <stefan.krecher@googlemail.com>
Stefan Krecher 12 yıl önce
ebeveyn
işleme
5268bacef5

+ 19 - 0
examples/twitterwall/css/twitterwall.css

@@ -0,0 +1,19 @@
+#twitterwall {
+    background: #eee;
+    border: 3px solid #ccc;
+    padding: 20px;
+    margin-bottom: 50px;
+	width: 500px;
+	height: 500px;
+}
+#user {
+	width: 15%;
+}
+#message{
+	font-family:'Verdana';
+	font-size: 12px
+}
+#date{
+	font-family:'Verdana';
+	font-size: 10px
+}

+ 36 - 0
examples/twitterwall/index.html

@@ -0,0 +1,36 @@
+
+<!DOCTYPE html> 
+<html> 
+  <head> 
+    <title>Twitterwall</title> 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
+    <meta name="author" content="Stefan Krecher" /> 
+	<link rel="stylesheet" type="text/css" href='css/twitterwall.css' /> 
+    <link type="image/x-icon" rel="shortcut icon" href="/favicon.ico"/> 
+    <link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'> 
+    <script src="../../js/amber.js" type="text/javascript"></script>
+  </head> 
+  <body> 
+         
+	<center>
+		<h2>A simple Twitterwall made with Amber</h2>
+		<p>Shows the last 5 Tweets regarding your query</p>
+	    <p>Examine the <button onClick="smalltalk.Browser._openOn_(smalltalk.TwitterSearch)"> TwitterSearch class</button></p> 
+
+	<div id="playground"></div>
+	</center>
+	<!--
+    <script type='text/javascript'> loadAmber() </script> 
+	<script type='text/javascript'> smalltalk.TwitterSearch._new()._query_('%23smalltalk') </script> 
+    -->
+	<script type="text/javascript"> 
+	loadAmber({
+		files: ['TwitterSearch.js', 'Tweet.js'],
+		prefix: 'examples/twitterwall/js',
+		ready: function() {
+			smalltalk.TwitterSearch._new()._query_('%23smalltalk') 
+		}}); 
+</script>
+	
+  </body> 
+</html> 

+ 79 - 0
examples/twitterwall/js/Tweet.deploy.js

@@ -0,0 +1,79 @@
+smalltalk.addClass('Tweet', smalltalk.Widget, ['json'], 'Examples');
+smalltalk.addMethod(
+'_renderOn_',
+smalltalk.method({
+selector: 'renderOn:',
+fn: function (tr) {
+    var self = this;
+    var tdUser = nil;
+    var tdMessage = nil;
+    var img = nil;
+    var a = nil;
+    var pMessage = nil;
+    var pDate = nil;
+    tdUser = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_td", []);
+    smalltalk.send(smalltalk.send(tdUser, "_element", []), "_id_", ["user"]);
+    tdMessage = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_td", []);
+    smalltalk.send(smalltalk.send(tdMessage, "_element", []), "_id_", ["messageBox"]);
+    smalltalk.send(tr, "_append_", [tdUser]);
+    smalltalk.send(tr, "_append_", [tdMessage]);
+    img = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_img", []), "_src_", [smalltalk.send(self['@json'], "_at_", ["profile_image_url"])]);
+    smalltalk.send(smalltalk.send(img, "_element", []), "_title_", [smalltalk.send(self['@json'], "_at_", ["from_user"])]);
+    smalltalk.send(smalltalk.send(img, "_element", []), "_longDesc_", [smalltalk.send(unescape("http%3A//twitter.com/"), "__comma", [smalltalk.send(self['@json'], "_at_", ["from_user"])])]);
+    a = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_a", []), "_href_", [smalltalk.send(unescape("http%3A//twitter.com/"), "__comma", [smalltalk.send(self['@json'], "_at_", ["from_user"])])]);
+    smalltalk.send(a, "_append_", [img]);
+    smalltalk.send(tdUser, "_append_", [a]);
+    pMessage = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_p", []);
+    smalltalk.send(smalltalk.send(pMessage, "_element", []), "_id_", ["message"]);
+    smalltalk.send(pMessage, "_append_", [smalltalk.send(self['@json'], "_at_", ["text"])]);
+    smalltalk.send(tdMessage, "_append_", [pMessage]);
+    pDate = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_p", []);
+    smalltalk.send(smalltalk.send(pDate, "_element", []), "_id_", ["date"]);
+    smalltalk.send(pDate, "_append_", [smalltalk.send(self['@json'], "_at_", ["created_at"])]);
+    smalltalk.send(tdMessage, "_append_", [pDate]);
+    return self;
+}
+}),
+smalltalk.Tweet);
+
+smalltalk.addMethod(
+'_json',
+smalltalk.method({
+selector: 'json',
+fn: function () {
+    var self = this;
+    return self['@json'];
+    return self;
+}
+}),
+smalltalk.Tweet);
+
+smalltalk.addMethod(
+'_json_',
+smalltalk.method({
+selector: 'json:',
+fn: function (aJson) {
+    var self = this;
+    self['@json'] = aJson;
+    return self;
+}
+}),
+smalltalk.Tweet);
+
+
+smalltalk.addMethod(
+'_openAt_with_',
+smalltalk.method({
+selector: 'openAt:with:',
+fn: function (tr, aJson) {
+    var self = this;
+    var tweet = nil;
+    tweet = smalltalk.send(self, "_new", []);
+    smalltalk.send(tweet, "_json_", [aJson]);
+    smalltalk.send(tweet, "_renderOn_", [tr]);
+    return tr;
+    return self;
+}
+}),
+smalltalk.Tweet.klass);
+

+ 98 - 0
examples/twitterwall/js/Tweet.js

@@ -0,0 +1,98 @@
+smalltalk.addClass('Tweet', smalltalk.Widget, ['json'], 'Examples');
+smalltalk.addMethod(
+unescape('_renderOn_'),
+smalltalk.method({
+selector: unescape('renderOn%3A'),
+category: 'not yet classified',
+fn: function (tr) {
+    var self = this;
+    var tdUser = nil;
+    var tdMessage = nil;
+    var img = nil;
+    var a = nil;
+    var pMessage = nil;
+    var pDate = nil;
+    tdUser = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_td", []);
+    smalltalk.send(smalltalk.send(tdUser, "_element", []), "_id_", ["user"]);
+    tdMessage = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_td", []);
+    smalltalk.send(smalltalk.send(tdMessage, "_element", []), "_id_", ["messageBox"]);
+    smalltalk.send(tr, "_append_", [tdUser]);
+    smalltalk.send(tr, "_append_", [tdMessage]);
+    img = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_img", []), "_src_", [smalltalk.send(self['@json'], "_at_", ["profile_image_url"])]);
+    smalltalk.send(smalltalk.send(img, "_element", []), "_title_", [smalltalk.send(self['@json'], "_at_", ["from_user"])]);
+    smalltalk.send(smalltalk.send(img, "_element", []), "_longDesc_", [smalltalk.send(unescape("http%3A//twitter.com/"), "__comma", [smalltalk.send(self['@json'], "_at_", ["from_user"])])]);
+    a = smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_a", []), "_href_", [smalltalk.send(unescape("http%3A//twitter.com/"), "__comma", [smalltalk.send(self['@json'], "_at_", ["from_user"])])]);
+    smalltalk.send(a, "_append_", [img]);
+    smalltalk.send(tdUser, "_append_", [a]);
+    pMessage = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_p", []);
+    smalltalk.send(smalltalk.send(pMessage, "_element", []), "_id_", ["message"]);
+    smalltalk.send(pMessage, "_append_", [smalltalk.send(self['@json'], "_at_", ["text"])]);
+    smalltalk.send(tdMessage, "_append_", [pMessage]);
+    pDate = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_p", []);
+    smalltalk.send(smalltalk.send(pDate, "_element", []), "_id_", ["date"]);
+    smalltalk.send(pDate, "_append_", [smalltalk.send(self['@json'], "_at_", ["created_at"])]);
+    smalltalk.send(tdMessage, "_append_", [pDate]);
+    return self;
+},
+args: ["tr"],
+source: unescape('renderOn%3A%20tr%0A%0A%7C%20tdUser%20tdMessage%20img%20a%20pMessage%20pDate%20%7C%0AtdUser%20%3A%3D%20HTMLCanvas%20new%20td.%0AtdUser%20element%20id%3A%20%27user%27.%0AtdMessage%20%3A%3D%20HTMLCanvas%20new%20td.%0AtdMessage%20element%20id%3A%20%27messageBox%27.%0A%0Atr%20append%3A%20tdUser.%0Atr%20append%3A%20tdMessage.%0A%0Aimg%20%3A%3D%20HTMLCanvas%20new%20img%20src%3A%20%28json%20at%3A%20%27profile_image_url%27%29%20.%0Aimg%20element%20title%3A%20%28json%20at%3A%20%27from_user%27%29.%0Aimg%20element%20longDesc%3A%20%28%27http%3A//twitter.com/%27%2C%20%28json%20at%3A%20%27from_user%27%29%29.%0A%0Aa%20%3A%3D%20HTMLCanvas%20new%20a%20href%3A%20%28%27http%3A//twitter.com/%27%2C%20%28json%20at%3A%20%27from_user%27%29%29.%0Aa%20append%3A%20img.%0A%0AtdUser%20append%3A%20a.%0A%0ApMessage%20%3A%3D%20HTMLCanvas%20new%20p.%0ApMessage%20element%20id%3A%20%27message%27.%0ApMessage%20append%3A%20%28json%20at%3A%20%27text%27%29.%0AtdMessage%20append%3A%20pMessage.%0A%0ApDate%20%3A%3D%20HTMLCanvas%20new%20p.%0ApDate%20element%20id%3A%20%27date%27.%0ApDate%20append%3A%20%28json%20at%3A%20%27created_at%27%29.%0AtdMessage%20append%3A%20pDate.'),
+messageSends: ["td", "new", "id:", "element", "append:", "src:", "img", "at:", "title:", "longDesc:", unescape("%2C"), "href:", "a", "p"],
+referencedClasses: [smalltalk.HTMLCanvas]
+}),
+smalltalk.Tweet);
+
+smalltalk.addMethod(
+unescape('_json'),
+smalltalk.method({
+selector: unescape('json'),
+category: 'not yet classified',
+fn: function () {
+    var self = this;
+    return self['@json'];
+    return self;
+},
+args: [],
+source: unescape('json%0A%5Ejson'),
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.Tweet);
+
+smalltalk.addMethod(
+unescape('_json_'),
+smalltalk.method({
+selector: unescape('json%3A'),
+category: 'not yet classified',
+fn: function (aJson) {
+    var self = this;
+    self['@json'] = aJson;
+    return self;
+},
+args: ["aJson"],
+source: unescape('json%3A%20aJson%0Ajson%20%3A%3D%20aJson'),
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.Tweet);
+
+
+smalltalk.addMethod(
+unescape('_openAt_with_'),
+smalltalk.method({
+selector: unescape('openAt%3Awith%3A'),
+category: 'not yet classified',
+fn: function (tr, aJson) {
+    var self = this;
+    var tweet = nil;
+    tweet = smalltalk.send(self, "_new", []);
+    smalltalk.send(tweet, "_json_", [aJson]);
+    smalltalk.send(tweet, "_renderOn_", [tr]);
+    return tr;
+    return self;
+},
+args: ["tr", "aJson"],
+source: unescape('openAt%3A%20tr%20with%3A%20aJson%0A%7C%20tweet%20%7C%0Atweet%20%3A%3D%20self%20new.%0Atweet%20json%3A%20aJson.%0Atweet%20renderOn%3A%20tr.%0A%5Etr'),
+messageSends: ["new", "json:", "renderOn:"],
+referencedClasses: []
+}),
+smalltalk.Tweet.klass);

+ 32 - 0
examples/twitterwall/js/TwitterSearch.deploy.js

@@ -0,0 +1,32 @@
+smalltalk.addClass('TwitterSearch', smalltalk.Object, [], 'Examples');
+smalltalk.addMethod(
+'_query_',
+smalltalk.method({
+selector: 'query:',
+fn: function (aQueryString) {
+    var self = this;
+    var result = nil;
+    result = smalltalk.send(typeof jQuery == "undefined" ? nil : jQuery, "_ajax_options_", [smalltalk.send(unescape("http%3A//search.twitter.com/search.json%3Frpp%3D5%26q%3D"), "__comma", [aQueryString]), smalltalk.Dictionary._fromPairs_([smalltalk.send("type", "__minus_gt", ["GET"]), smalltalk.send("success", "__minus_gt", [function (tmp) {return smalltalk.send(self, "_success_", [smalltalk.send(tmp, "_results", [])]);}]), smalltalk.send("error", "__minus_gt", [function () {return smalltalk.send(typeof window == "undefined" ? nil : window, "_alert_", ["error"]);}]), smalltalk.send("dataType", "__minus_gt", ["jsonp"])])]);
+    return self;
+}
+}),
+smalltalk.TwitterSearch);
+
+smalltalk.addMethod(
+'_success_',
+smalltalk.method({
+selector: 'success:',
+fn: function (tweets) {
+    var self = this;
+    var wall = nil;
+    var table = nil;
+    var tr = nil;
+    wall = unescape("%23playground");
+    table = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_onJQuery_", [smalltalk.send(wall, "_asJQuery", [])]), "_table", []);
+    smalltalk.send(smalltalk.send(table, "_element", []), "_id_", ["twitterwall"]);
+    smalltalk.send(tweets, "_do_", [function (tweet) {tr = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_tr", []);smalltalk.send(table, "_append_", [tr]);return smalltalk.send(smalltalk.Tweet || Tweet, "_openAt_with_", [tr, tweet]);}]);
+    return self;
+}
+}),
+smalltalk.TwitterSearch);
+

+ 42 - 0
examples/twitterwall/js/TwitterSearch.js

@@ -0,0 +1,42 @@
+smalltalk.addClass('TwitterSearch', smalltalk.Object, [], 'Examples');
+smalltalk.addMethod(
+unescape('_query_'),
+smalltalk.method({
+selector: unescape('query%3A'),
+category: 'not yet classified',
+fn: function (aQueryString) {
+    var self = this;
+    var result = nil;
+    result = smalltalk.send(typeof jQuery == "undefined" ? nil : jQuery, "_ajax_options_", [smalltalk.send(unescape("http%3A//search.twitter.com/search.json%3Frpp%3D5%26q%3D"), "__comma", [aQueryString]), smalltalk.Dictionary._fromPairs_([smalltalk.send("type", "__minus_gt", ["GET"]), smalltalk.send("success", "__minus_gt", [function (tmp) {return smalltalk.send(self, "_success_", [smalltalk.send(tmp, "_results", [])]);}]), smalltalk.send("error", "__minus_gt", [function () {return smalltalk.send(typeof window == "undefined" ? nil : window, "_alert_", ["error"]);}]), smalltalk.send("dataType", "__minus_gt", ["jsonp"])])]);
+    return self;
+},
+args: ["aQueryString"],
+source: unescape('query%3A%20aQueryString%0A%7C%20result%20%7C%0Aresult%20%3A%3D%20jQuery%20%0A%09%09%09ajax%3A%20%27http%3A//search.twitter.com/search.json%3Frpp%3D5%26q%3D%27%2C%20aQueryString%0A%09%09%09options%3A%20%23%7B%0A%09%09%09%09%27type%27%20-%3E%20%27GET%27.%0A%09%09%09%09%27success%27%20-%3E%20%5B%20%3Atmp%20%7C%20self%20success%3A%20%28tmp%20results%29%5D.%0A%09%09%09%09%27error%27%20-%3E%20%5Bwindow%20alert%3A%20%27error%27%5D.%0A%09%09%09%09%27dataType%27%20-%3E%20%27jsonp%27%0A%09%09%09%7D.%20%20'),
+messageSends: ["ajax:options:", unescape("%2C"), unescape("-%3E"), "success:", "results", "alert:"],
+referencedClasses: []
+}),
+smalltalk.TwitterSearch);
+
+smalltalk.addMethod(
+unescape('_success_'),
+smalltalk.method({
+selector: unescape('success%3A'),
+category: 'not yet classified',
+fn: function (tweets) {
+    var self = this;
+    var wall = nil;
+    var table = nil;
+    var tr = nil;
+    wall = unescape("%23playground");
+    table = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_onJQuery_", [smalltalk.send(wall, "_asJQuery", [])]), "_table", []);
+    smalltalk.send(smalltalk.send(table, "_element", []), "_id_", ["twitterwall"]);
+    smalltalk.send(tweets, "_do_", [function (tweet) {tr = smalltalk.send(smalltalk.send(smalltalk.HTMLCanvas || HTMLCanvas, "_new", []), "_tr", []);smalltalk.send(table, "_append_", [tr]);return smalltalk.send(smalltalk.Tweet || Tweet, "_openAt_with_", [tr, tweet]);}]);
+    return self;
+},
+args: ["tweets"],
+source: unescape('success%3A%20tweets%0A%7C%20wall%20table%20tr%20%7C%0Awall%20%3A%3D%20%27%23playground%27.%0Atable%20%3A%3D%20%28HTMLCanvas%20onJQuery%3A%20%28wall%20asJQuery%29%29%20%20table.%0Atable%20element%20id%3A%20%27twitterwall%27.%0A%0Atweets%20do%3A%20%5B%20%3Atweet%20%7C%20%0A%20%20%20%20%20%20%20%20%20%20%20tr%20%3A%3D%20HTMLCanvas%20new%20tr.%0A%20%20%20%20%20%20%20%20%20%20%20table%20append%3A%20tr.%0A%20%20%20%20%20%20%20%20%20%20%20Tweet%20openAt%3A%20tr%20with%3A%20tweet%0A%20%20%20%20%20%20%20%20%20%20%20%5D.'),
+messageSends: ["table", "onJQuery:", "asJQuery", "id:", "element", "do:", "tr", "new", "append:", "openAt:with:"],
+referencedClasses: [smalltalk.HTMLCanvas,smalltalk.nil]
+}),
+smalltalk.TwitterSearch);
+

+ 54 - 0
examples/twitterwall/st/Tweet.st

@@ -0,0 +1,54 @@
+Widget subclass: #Tweet
+	instanceVariableNames: 'json'
+	category: 'Examples'!
+
+!Tweet methodsFor: 'not yet classified'!
+
+renderOn: tr
+
+| tdUser tdMessage img a pMessage pDate |
+tdUser := HTMLCanvas new td.
+tdUser element id: 'user'.
+tdMessage := HTMLCanvas new td.
+tdMessage element id: 'messageBox'.
+
+tr append: tdUser.
+tr append: tdMessage.
+
+img := HTMLCanvas new img src: (json at: 'profile_image_url') .
+img element title: (json at: 'from_user').
+img element longDesc: ('http://twitter.com/', (json at: 'from_user')).
+
+a := HTMLCanvas new a href: ('http://twitter.com/', (json at: 'from_user')).
+a append: img.
+
+tdUser append: a.
+
+pMessage := HTMLCanvas new p.
+pMessage element id: 'message'.
+pMessage append: (json at: 'text').
+tdMessage append: pMessage.
+
+pDate := HTMLCanvas new p.
+pDate element id: 'date'.
+pDate append: (json at: 'created_at').
+tdMessage append: pDate.
+!
+
+json
+^json
+!
+
+json: aJson
+json := aJson
+! !
+
+!Tweet class methodsFor: 'not yet classified'!
+
+openAt: tr with: aJson
+| tweet |
+tweet := self new.
+tweet json: aJson.
+tweet renderOn: tr.
+^tr
+! !

+ 30 - 0
examples/twitterwall/st/TwitterSearch.st

@@ -0,0 +1,30 @@
+Object subclass: #TwitterSearch
+	instanceVariableNames: ''
+	category: 'Examples'!
+
+!TwitterSearch methodsFor: 'not yet classified'!
+
+query: aQueryString
+| result |
+result := jQuery 
+			ajax: 'http://search.twitter.com/search.json?rpp=5&q=', aQueryString
+			options: #{
+				'type' -> 'GET'.
+				'success' -> [ :tmp | self success: (tmp results)].
+				'error' -> [window alert: 'error'].
+				'dataType' -> 'jsonp'
+			}.
+!
+
+success: tweets
+| wall table tr |
+wall := '#playground'.
+table := (HTMLCanvas onJQuery: (wall asJQuery))  table.
+table element id: 'twitterwall'.
+
+tweets do: [ :tweet | 
+           tr := HTMLCanvas new tr.
+           table append: tr.
+           Tweet openAt: tr with: tweet
+           ].
+! !