viernes, 26 de marzo de 2010

Como incluir imagenes y css en un webpart sharepoint

Bueno hoy traigo un ejemplo de un webpart sencillo que me pidieron, la idea es simple mostrar en una libretica la fecha seleccionada en el calendario. Todo esto hace parte de una Agenda Cultural, el calendario busca en las listas de eventos de 3 subsitios y marca los dias en el que hay eventos. cada vez que un usuario seleccione una fecha en el calendario, se realiza un postback a la pagina y la fecha es enviada como parametro en el explorador. el webpart lo que hace es recoger esa fecha y acomodar los estilos para que se vea mas agradable a la vista del usuario. se preguntaran porque tome este ejemplo, bueno es porque es sencillo de explicar y porque es fundamental para entender como incluir archivos CSS e Imagenes a los webparts de sharepoint que creen. ya llevo algun tiempo trabajando en la creacion de webparts y la verdad hasta ahora pude entender muchas cosas que son verdaderamente importantes y que facilitan el trabajo. Bueno ahora les explicare como es el procedimiento. Esta es la estructura que deben crear, basicamente lo que sucede es que cuando nosotros implemetamos el webpart este crea la estructura de carpetas que se encuentran dentro de la carpeta LAYOUTS, en este ejemplo el crea ua carpeta llamada WPArchivos y detro de ella WPAgendaCultural y copia los archivos dentro de esta. hasta aqui no es complicado armar esta estructura y pegar los archivos dentro, los archivos que hay dentro de la carpeta WPAgendaCultural son el CSS y la Imagen de fondo. Ahora vamos al codigo. using System; using System; using System.Runtime.InteropServices; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Serialization; using Microsoft.SharePoint; using Microsoft.SharePoint.WebControls; using Microsoft.SharePoint.WebPartPages; namespace WPAgendaCultural { [Guid("f0b637c9-12c5-4bc6-ae1b-fceb05299a38")] public class WPFechaAgenda : System.Web.UI.WebControls.WebParts.WebPart { //Comentario: Definimos los meses del año, El primer "Mes" es la posicion 0 string[] meses = { "mes", "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" }; protected override void Render(System.Web.UI.HtmlTextWriter writer) { //Comentario: Capturamos la fecha del sistema string fecha = DateTime.Today.ToShortDateString().ToString(); //Comentario: Verificamos si existe fecha del sistema if (fecha != null) { //Comentario: Si hay una fecha en el explorador entra por aqui if (Context.Request.QueryString["date"] != null) { fecha = Context.Request.QueryString["date"].ToString(); } //Comentario: Convertimos la fecha en tipo DATETIME asi trabajaremos mas comodos DateTime _Fecha = Convert.ToDateTime(fecha); //Comentario: Traemos el dia de la fecha obtenida string _Dia = _Fecha.Day.ToString(); //Comentario: Traemos el numero del mes y luego con ese num obtenemos el nombre del array "meses" int _MesNum = _Fecha.Month; string _MesNombre = meses[_MesNum]; //Comentario: Llamamos las referencias html que necesitamos como la css que creamos este es el paso fuerte writer.Write("<link type=text/css rel=stylesheet media=screen href=_layouts/WPArchivos/WPAgendaCultural/WPFechaAgenda.css />"); //Comentario: Creamos el div contenedor writer.RenderBeginTag("div id=FA_contenedor"); //Comentario: Creamos el div superior writer.RenderBeginTag("div id=FA_sup"); writer.Write("Eventos para el día:"); writer.RenderEndTag(); //Comentario: Creamos el div Central con el numero del DIA writer.RenderBeginTag("div id=FA_cen"); writer.Write("<p>"+_Dia+"</p>"); writer.RenderEndTag(); //Comentario: Creamos el div inferior writer.RenderBeginTag("div id=FA_inf"); writer.Write("de "+_MesNombre); writer.RenderEndTag(); writer.RenderEndTag(); } else { writer.Write("No hay fecha del sistema"); } } public WPFechaAgenda() { this.ExportMode = WebPartExportMode.All; } } } Ahora les dejo el CSS Fijense como desde el CSS se llama la Imagen que esta en la misma carpeta. /*--Div Contenedor--*/ #FA_contenedor { width:180px; height:170px; text-align:center; background-image:url("calendarbloc.png"); background-color:Transparent; background-repeat:no-repeat; margin-left:10px; } /*--Div superior--*/ #FA_sup { width:auto; height:5px; color:#660000; font-family:Candara, Tahoma; font-size:13pt; padding-top:20px; font-weight:bold; margin-bottom:0px; } /*--Div centro--*/ #FA_cen { width:auto; height:85px; } #FA_cen p { color:#660000; font-family:Candara, Tahoma; font-size:56pt; font-weight:bold; margin-bottom:0px; margin-top:0px; } /*--Div inferior--*/ #FA_inf { width:auto; height:auto; color:#660000; font-family:Candara, Tahoma; font-size:16pt; font-weight:bold; margin-bottom:0px; }

No hay comentarios:

Publicar un comentario