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; }
viernes, 26 de marzo de 2010
Como incluir imagenes y css en un webpart sharepoint
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; }
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario