Twitter<\/title>\n <script src='http:\/\/static.ukijs.org\/pkg\/0.0.6\/uki.js'><\/script>\n <\/head>\n <body style=\"background: #FFF\">\n <div id=\"container\" style=\"margin: 20px; width: 250px; height: 300px;\"><\/div>\n <p> Example code <a href=\"http:\/\/github.com\/voloko\/uki\/tree\/master\/app\/functional\/twitter\/\">at github<\/a><\/p>\n <\/body>\n<\/html>","javascript":"var tweets = [], \/\/ loaded tweets\n loading = false; \/\/ are we loading now\n \n\/\/ custom background for a tweet\nfunction bubbleBg () {\n var prefix = \"i\/bubble-\"; \n return new uki.background.Sliced9({ \n c: [prefix + \"c.png\", \"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABj0lEQVQ4jZ2U666CQAyEF1g14A+jvv+jGZ9AiTEG78pXnU1FkwNnkrrr0hm6pW32aBFavBfD\/X4P\/kxrlmUfa57niaOz2CUiplV7L4ghhHHOyhl71iiCF7ndbmZeVIISK4rCzIumCHXN6\/VqdrlcwmQyCdPp9ONa8muaJhyPxzAajUKM0Qxxe2kbyUNi5\/M5nE6nsFgsvoS6gLPdbu3F4\/HYRC16XRVBxObz+Z9i+iD4woGr1CRBouMKCr0P8IUD90uQvJAz\/5H6GBy4PyMcEp2P0kcYVRLkwRf3EMAFJuirf7PZ\/EvQa+TaYGq5IYAjPsj1hzra7XbpYV+DAze1JT8klgLd7\/cpH32ALxy4aLxb89WHVVWF2WwW1ut1L1F88IUDV30eFSHtQ8vhuFqtrAv4z3W6QrRcXddhuVyaD1xFmLVJtZHIdMGZIoWAHQ4HGxR+2tAZFDNCWFmWaTiY4OOFVJgIU6gI06caYfYF36OLnCHkI1PqkiDwc9HvPRLRi7g6jNoI3sFP61\/Puyt4Am0NjZ06AwKpAAAAAElFTkSuQmCC\"],\n v: [prefix + \"v.png\", \"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABDCAYAAACcAiVCAAAAeklEQVRYw+2WsQrAIAxEa\/\/\/C\/MZmTKI19WCS4NCxXdwkxhyvhu8I0LuLjNTrTVlM5O7KyJ0X50kpdzrNXCG1gzMRh1FXxv5ICj7RAYKUBIbttZS3rg2FJvIQAEKGwIFKEABChseXptSSsp82o9+w2mRRwdf1N\/\/f+QHOSTzcjXgSDUAAAAASUVORK5CYII=\", false, true],\n h: [prefix + \"h.png\", \"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAAAUCAYAAADfqiBGAAAAd0lEQVQYGe3BQQ2AQBADwDYpBnihAP9KcIIA7lOyue+ug85orWVES2stFNuIjSSKvu9DsY3YSKLoPE9ET7YRPSFGQoxkG9ETYiTbiJ7e90X0hBiJJKInxEiIkRAjPc+D6Om+b0RP13Wh2EZsJFF0HAeKbcRGEuUHmnolQf2UKf0AAAAASUVORK5CYII=\"],\n m: [prefix + \"m.png\", \"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAABDCAYAAADOIRgJAAAAiklEQVR42u3VwQkAIAwEQQP2X3FIbEDBrzgpYZnTmZk93PZmtzbHOBKIY1bkkEOOOGZFDjmOHHHMihxyyHkrTlWpQI444ojjKydHHLMix5FDjjhmRQ455JBDjjjOrMghhxxxzIoccshx4pgVOeSQQw454pjVt3EiQgWzEkccbw454pgVOeI4s7q4BXGJRsdjrAwPAAAAAElFTkSuQmCC\", false, true]\n }, \"10 10 10 10\", {inset: '0 0 7 0'});\n}\n\n\/\/ widget layout\nvar widget = uki({ \n view: 'Box', rect: '200 300', minSize: '200 300', visible: true, \/\/ widget parent view with white background\n anchors: 'left top right bottom', background: '#FFF', \/\/ grow with the the container dom\n childViews: [\n { view: 'Box', rect: '200 51', \/\/ top panel, with default uki panel bg\n anchors: 'left top right', background: 'theme(panel)', \/\/ width grows, height fixed to 51 \n childViews: [\n { view: 'MultilineTextField', rect: '5 5 130 42', \/\/ Tweet input field\n anchors: 'left top right', \n placeholder: \"What's happening?\", fontSize: '12px' },\n { view: 'Button', rect: '140 5 55 24', anchors: 'right top', \/\/ Update button\n text: 'Update' }\n ] },\n { view: 'ScrollPane', rect: '0 50 200 250', \/\/ Scrollable tweet container\n anchors: 'left top right bottom', childViews: [\n { view: 'VerticalFlow', rect: '5 5 190 250', \/\/ Flow of tweet views\n anchors: 'left top right bottom' }\n ] }\n ]\n});\n\n\/\/ Tweet contents template\nvar tweetTemplate = new uki.theme.Template(\n '<a href=\"http:\/\/twitter.com\/${screen_name}\">${screen_name}<\/a> ${text}'\n);\n\n\/\/ layout for a particular tweet\nfunction layoutTweet (tweet, flow) {\n var data = {\n screen_name: tweet.user.screen_name,\n text: uki.escapeHTML(tweet.text)\n .replace(\/([\\w]+:\\\/\\\/[a-z0-9$_.+()*,;\\\/?:@&~=-]+[a-z0-9\\\/])\/ig, '<a href=\"$1\">$1<\/a>')\n .replace(\/(\\@(\\w+))\/g, '<a href=\"http:\/\/twitter.com\/$2\">$1<\/a>')\n };\n \n var row = uki({ \n view: 'Box', background: bubbleBg(), \/\/ box container with a custom bg\n rect: '200 80', anchors: 'left top right', \/\/ grow with container\n childViews: [\n { view: 'Image', rect: '10 10 50 50', anchors: 'left top', \/\/ author profile image\n src: tweet.user.profile_image_url },\n { view: 'Label', rect: '65 10 120 40', anchors: 'left top right', \/\/ tweet text\n multiline: true, html: tweetTemplate.render(data), \n fontSize: '11px', lineHeight: '13px' }\n ]\n });\n \n \/\/ resize tweet and children to container width\n row.rect( new uki.geometry.Rect(flow.rect().width, row.rect().height) );\n \n \/\/ resize height to tweet contents\n row.find('Label').resizeToContents('height'); \/\/ label first ...\n row.resizeToContents('height'); \/\/ ... then row to match label\n row.rect().height += 20; \/\/ ... add 20px space below\n return row[0];\n}\n\n\/\/ update tweet list when new tweets loaded\nfunction updateTweets (data) {\n var flow = widget.find('VerticalFlow'), \/\/ get the container\n i = 0, \n firstRow = flow.childViews()[0], \/\/ store current first rendered view\n firstTweet = tweets[0] || {id:-1}; \/\/ and current first tweet data\n \n while (data[i] && data[i].id != firstTweet.id) { \/\/ while new tweets\n flow.insertBefore(layoutTweet(data[i], flow), firstRow); \/\/ insert new tweet view\n tweets.unshift(data[i++]); \/\/ ... add tweet to loaded tweets\n }\n flow.resizeToContents('height'); \/\/ resize list to contents\n flow.parent().layout(); \/\/ update dom\n}\n\n\/\/ append tweets to the end of the list\nfunction appendTweets (data) {\n var flow = widget.find('VerticalFlow'); \/\/ get the container\n loading = false;\n uki.each(data, function(i, tweet) {\n flow.appendChild(layoutTweet(tweet, flow));\n });\n\n flow.resizeToContents('height'); \/\/ resize list to contents\n flow.parent().layout(); \/\/ update dom\n}\n\n\/\/ post to twitter on update button click\nwidget.find('Button[text=Update]').click(function() {\n \/\/ create artificial form and iframe target\n var form = uki.createElement('form', 'position:absolute;left:-999em', '<input type=\"text\" name=\"status\" value=\"' + uki.escapeHTML(widget.find('MultilineTextField').value()) + '\">'),\n iframe = uki.createElement('iframe', 'position:absolute;left:-999em');\n iframe.name = 'target_' + +new Date();\n form.target = iframe.name;\n form.method = 'POST';\n form.action = 'http:\/\/twitter.com\/statuses\/update.xml';\n \n \/\/ append them to body\n document.body.appendChild(form);\n document.body.appendChild(iframe);\n \n \/\/ submit form \n form.submit();\n});\n\n\/\/ simplest JSONP request implementation\nfunction jsonp (url, callback) {\n var name = 'jsonp' + +new Date,\n script = document.createElement('script'),\n head = document.getElementsByTagName('head')[0];\n window[name] = callback;\n script.src = url.replace(\/=\\?\/, '=' + name);\n head.insertBefore(script, head.firstChild);\n}\n\n\/\/ when we scroll tweet list, load more tweets if less than 50px available\nwidget.find('ScrollPane').scroll(function() {\n if (this.contentsSize().height - this.scrollTop() - this.rect().height < 50) {\n if (!loading && tweets.length) {\n jsonp('http:\/\/api.twitter.com\/1\/statuses\/home_timeline.json?callback=?&since_id=' + tweets[tweets.length - 1].id, appendTweets);\n loading = true;\n }\n }\n}); \n\n\/\/ update tweet list every 5 minutes\nsetTimeout(function() {\n if (loading) return; \n jsonp('http:\/\/api.twitter.com\/1\/statuses\/home_timeline.json?callback=?', updateTweets);\n}, 5 * 60 * 1000);\n\n\/\/ load first portion of tweets\njsonp('http:\/\/api.twitter.com\/1\/statuses\/home_timeline.json?callback=?', appendTweets);\n\n\/\/ attach created widget to dom tree\nwidget.attachTo( document.getElementById('container'), '200 300' );"}