Login to the 42Windmills.com designer.
Create a new form, or select a form you wish to edit. (This is similar to the step explained in the Google Maps tutorial.)
Add a new section to the form by selecting the green plus symbol next to the form name.
In the New Section pane, choose Yes for custom section (The red arrow in the screenshot)
Next, add the field TwitterAccount(of type Text) to the form. It doesn't matter in which section you place this.
However, take notice that adding fields to a custom section is not possible.
You can change the name of the field above, if you do so, you have to change this name in the code under step 3 accordingly.
The generator has automatically created a custom form control (.ascx) within the solution.
This provides an easy way for you to add your customizations to the 42Windmills platform.
First, locate the ascx in your Visual Studio project.
The control can be found in App.Web project in the ‘Controls’ map.
The name of your custom control will be “ctl<entityname>_<sectionname>Section.ascx, which in our case is: “ctlnewContact_Twitter.ascx”
Open up the .ascx file in Visual Studio (make sure you open it in Source view, not the Design view) and add the following just below the comments section: (Replace the asp: tags with proper <asp: tags)
Copy code<![CDATA[
<style type="text/css">
.TweetMessage
{
border: solid #DEEBFF 1px;
padding: 5px;
display: block;
}
.TweetTime
{
color: #385FC2;
}
</style>
asp:Panel ID="TweetPanel" runat="server">
<img src="../images/twitter.png" style="float: left;" />
Followers: asp:Literal ID="litFollowers" runat="server"></asp:Literal>
<br /> <br />
asp:Repeater ID="rptTweets" runat="server">
<ItemTemplate>
<div class="TweetMessage">
asp:Label ID="lblTime" CssClass="TweetTime" runat="server"></asp:Label>
asp:Label ID="Label1" runat="server"></asp:Label>
</div>
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
]]>
The code behind of the ascx contains some empty pre-generated methods.
Locate the
OnLoaded method and paste the following code into its body:
Copy code
<![CDATA[
if (string.IsNullOrEmpty(contact.Twitteraccount)){ TweetPanel.Visible = false; return;}
TwitterReader reader = new TwitterReader();
Collection<TwitterStatus> list = reader.GetLatestMessages(contact.Twitteraccount, 10, true);
if(list.Count == 0) { TweetPanel.Visible = false; return;}
litFollowers.Text = list[0].User.FollowersCount;
List<InnerTweet> tweets = new List<InnerTweet>();
foreach (TwitterStatus stat in list)
tweets.Add(new InnerTweet()
{ Message = stat.Message,
Moment = InnerTweet.ParseDate(stat.DateCreated)
});
rptTweets.DataSource = tweets;
rptTweets.DataBind();
TweetPanel.Visible = true;
]]>
Also, include the following inner class in the ascx class, used for databinding in the control. Alternatively you could (if you're concerned about too much logic in the code behind), place this class somewhere in the App_Code.
Copy code
<![CDATA[
public class InnerTweet
{
public DateTime Moment { get; set; }
public string MomentParsed
{
get
{
return Moment.ToString(Helper.DateFormat);
}
}
public string Message { get; set; }
public static DateTime ParseDate(string twitDate)
{
try
{
// Fri Oct 29 12:52:08 +0000 2010
int day = int.Parse(twitDate.Substring(8, 2));
int year = int.Parse(twitDate.Substring(26, 4));
int hour = int.Parse(twitDate.Substring(11, 2));
int minute = int.Parse(twitDate.Substring(14, 2));
DateTime dt = new DateTime();
DateTime.TryParseExact(twitDate.Substring(4,3),
"MMM",
System.Globalization.CultureInfo.CreateSpecificCulture("en-US"),
DateTimeStyles.None,out dt);
return new DateTime(year, dt.Month, day, hour, minute, 0);
}
catch(Exception)
{
return DateTime.MinValue;
}
}
}
]]>
For actually fetching the Twitter messages, I've used the excellent Twitter Reader class from ByteChaser.com.
Download the .dll from
here, include it as a reference in the App.Web project and add the proper using statements to your ascx controls' code-behind.
To read the article about this Twitter reader, you can go to:
http://www.bytechaser.com/en/articles/k24dz6au23/integrate-twitter-into-aspnet-applications.aspx
You are now finished!
To test the application, start up the application and navigate to Contacts (or the entity on which you created the custom section.)
After you've created a new contact, as soon as it is saved with a valid and public Twitter account filled out (for instance 42windmills), the tweets will show up.
