Criando um controle de Mídia Social para Umbraco v6+
[ATUALIZADO] Motivação:
Em WordPress e outras plataformas, há módulos/widgets/plugins que permitem que o usuário insira seus dados de mídia social e o site renderiza automaticamente.
Em Umbraco, não existia tal módulo. Então, criei um pequeno controle que guarda os dados de mídias sociais e renderiza numa página qualquer, como macro (Razor). Criando um controle de Mídia Social para Umbraco v6+ demonstra como faze-lo:
Quando o usuário clica no icone (como na figura acima) uma nova janela se abre no site do usuário.
No controle, já inclui alguns sets de icones encontrados na internet (ver documentação). Em versões futuras, há interesse em programar de forma que quaisquer novos pacotes de icones sejam reconhecidos automaticamente.
Mas, no momento, o código ficou assim:
SocialMedia.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Social Media.ascx.cs" Inherits="UserControls_Social_Media" ClientIDMode="Static" %> <strong>Style: <asp:DropDownList ID="dpStyles" runat="server" AutoPostBack="true"> </asp:DropDownList> </strong><strong> <asp:CheckBox ID="chkShowLabel" runat="server" Text="Show Channel Label" OnCheckedChanged="chkShowLabel_CheckedChanged" /></strong> <table style="width:100%;text-align:center;"> <tr> <td> <asp:Table ID="tableLinks" runat="server"> </asp:Table> </td> <td style="vertical-align:top; width:200px;text-align:left;"> <table> <tr> <th>Theme Name</th> <td><%=Name %></td> </tr> <tr> <th>Description</th> <td><%=Description %></td> </tr> <tr> <th>Creator</th> <td><%=Creator %></td> </tr> <tr> <th>Created Date</th> <td><%=Created %></td> </tr> <tr> <th>Url</th> <td><a href="<%=Url %>" target="_blank"><%=Url %></a></td> </tr> </table> </td> </tr> </table>
No code-behind (SocialMedia.ascx.cs)
using Social_Media_Channels.Engine;
using Social_Media_Channels.Engine.Utilities;
using Social_Media_Channels.Entities;
using System;
using System.Configuration;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class UserControls_Social_Media : System.Web.UI.UserControl, umbraco.editorControls.userControlGrapper.IUsercontrolDataEditor
{
private Manager _manager = null;
static Manager _tmp = null;
public string Name { get; set; }
public string Description { get; set; }
public string Creator { get; set; }
public string Created { get; set;}
public string Url { get; set; }
protected override void OnInit(EventArgs e)
{
string ThemesFolder = ConfigurationManager.AppSettings["SocialMediaThemeFolder"] == null ? null : ConfigurationManager.AppSettings["SocialMediaThemeFolder"].ToString();
_manager = new Manager(ThemesFolder, false, true);
_tmp = new Manager(ThemesFolder, false, true);
if (!Page.IsPostBack)
{
_manager.ThemesDropdownList(ref dpStyles, _manager.Themes);
}
base.OnInit(e);
}
protected void Page_Load(object sender, EventArgs e)
{
_manager.LoadSelectedTheme(dpStyles.SelectedValue);
_manager.ShowLabels = chkShowLabel.Checked;
_manager.RenderSocialItems(tableLinks, _manager.CurrentTheme);
//Theme details
Name = _manager.CurrentTheme.ID;
Description = _manager.CurrentTheme.Description;
Creator = _manager.CurrentTheme.Creator;
Created = _manager.CurrentTheme.CreatedDate;
Url = _manager.CurrentTheme.Url;
}
public object value
{
get
{
foreach (Channel channel in _manager.CurrentTheme.Channels)
{
string ctrl = "txt" + channel.ID;
channel.Url = ((TextBox)tableLinks.FindControl(ctrl)).Text;
}
string json = JsonHelper.JsonSerializer<Manager>(_manager);
return json;
}
set
{
if (value.ToString() != string.Empty)
{
_tmp = (Manager)JsonHelper.JsonDeserialize<Manager>(value.ToString());
_manager.ShowLabels = _tmp.ShowLabels;
_manager.CurrentThemeID = _tmp.CurrentThemeID;
dpStyles.SelectedValue = _manager.CurrentThemeID;
chkShowLabel.Checked = _manager.ShowLabels;
LoadTheme();
}
}
}
protected void chkShowLabel_CheckedChanged(object sender, EventArgs e)
{
_manager.ShowLabels = (chkShowLabel.Checked);
}
private void LoadTheme()
{
_manager.LoadSelectedTheme(_tmp.CurrentThemeID);
_manager.LoadSavedUrls(_manager.CurrentTheme, _tmp.CurrentTheme);
}
}
Já no front-end, foi criado um Macro usando Razor, de forma a renderizar os icones
@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.NodeFactory;
@using umbraco.MacroEngines;
@using System.Configuration;
@{
var nodeId = Parameter.NodeID;
DynamicNode node = Library.NodeById(nodeId);
string ThemesFolder = ConfigurationManager.AppSettings["SocialMediaThemeFolder"] == null ? null : ConfigurationManager.AppSettings["SocialMediaThemeFolder"].ToString();
Social_Media_Channels.Engine.Manager manager = new Social_Media_Channels.Engine.Manager(ThemesFolder, false, true);
Social_Media_Channels.Engine.Manager tmp;
try
{
tmp = Social_Media_Channels.Engine.Utilities.JsonHelper.JsonDeserialize<Social_Media_Channels.Engine.Manager>(node.PropertiesAsList[node.PropertiesAsList.Count - 1].ToString());
manager.ShowLabels = tmp.ShowLabels;
manager.LoadSelectedTheme(tmp.CurrentThemeID);
manager.LoadSavedUrls(manager.CurrentTheme, tmp.CurrentTheme);
}
catch { tmp = new Social_Media_Channels.Engine.Manager(ThemesFolder, false, true); }
}
<ul class="social-channels" id="social-channels">
@if (tmp.CurrentTheme != null)
{
foreach (Social_Media_Channels.Entities.Channel channel in manager.CurrentTheme.Channels)
{
if (channel.Url != "")
{
<li class="social-channel">
@Html.Raw(Social_Media_Channels.Engine.Manager.RenderRawA(manager.CurrentTheme, channel))
@if (manager.ShowLabels)
{
<span class="label"><a href="@channel.Url" target="_blank">@channel.Name</a></span>
}
</li>
}
}
}
else
{
<li class="social-channel">No Channels were found, please check your settings</li>
}
</ul>
Assim, numa página, usase o macro
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Social Media Channels Example</title>
<style>
body{font-family:Candara;width:600px;margin:0 auto;}
ul{list-style:none;}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Social Media Channels Demo</h2>
<umbraco:Macro NodeId="1047" Alias="SocialMediaChannels" runat="server"></umbraco:Macro>
</header>
</article>
</section>
<aside>
</aside>
<footer>
<p>Copyright © 2013 zuEuz Tecnologia & Negocios</p>
</footer>
</body>
</html>
</asp:Content>
E fica renderizado desta forma
Dentro do Umbraco, o gerenciador de Midias Sociais renderiza desta forma
Visite a página do projeto no site Umbraco