twitter with dijits
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
<div id="main" style="display: none;">
<button data-dojo-type="dijit.form.Button" id="loadBtn">Load Tweets</button>
<div id="userDialog" data-dojo-type="dijit.Dialog" title="Enter a twitter account">
Twitter user: <input type="text" value="dojo" data-dojo-type="dijit.form.ValidationTextBox" required="true" id="userTxt">
<button data-dojo-type="dijit.form.Button" id="okBtn">Ok</button>
</div>
<div id="output"></div>
</div>
CSS
.tweetBox{
background-color : #E9F4FE;
border: 1px solid black;
overflow : auto;
margin:3px;
padding:3px;
}
JavaScript
dojo.require('dijit.form.Button');
dojo.require('dijit.Dialog');
dojo.require('dijit.form.ValidationTextBox');
dojo.require('dojo.io.script');
dojo.ready(function(){
var loadBtn = dijit.byId('loadBtn');
var userDialog = dijit.byId('userDialog');
var okBtn = dijit.byId('okBtn');
var userTxt = dijit.byId('userTxt');
dojo.connect(loadBtn,'onClick',function(){
userDialog.show();
});
dojo.connect(okBtn,'onClick',function(){
if(userTxt.validate()){
userDialog.hide();
var output = dojo.byId('output');
output.innerHTML = 'loading...';
dojo.io.script.get({
url: 'http://api.twitter.com/1/statuses/user_timeline.json',
content: {
screen_name: userTxt.getValue(),
include_rts: 1,
count: 10
},
callbackParamName : 'callback',
timeout: 8000,
load: function(resp){
output.innerHTML ='';
dojo.forEach(resp,function(tweet){
//Regex text formatting based on @Derek's example
tweet.text = tweet.text.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1" target="_blank">$1<\/a>').replace(/@([a-zA-Z0-9_]+)/gi,'<a href="http://twitter.com/$1" target="_blank">@$1<\/a>').replace(/#([a-zA-Z0-9_]+)/gi,'<a href="http://search.twitter.com/search?q=%23$1" target="_blank">#$1<\/a>');
var n = dojo.create('div',
{innerHTML:tweet.text,
class: 'tweetBox'
});
...