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; }

jueves, 25 de marzo de 2010

Sincronizacion SQL Server y Visual Paradigm

Aqui dejo un tutorial sencillo que realize sobre el manejo de la sincronizacion de las BD SQL Server a traves de la herramnienta case Visual Paradigm.

Configuraciones de las caracteristicas de un webpart

Crear una caracteristica configurable muchas veces nos ayuda a la hora de pedirle informacion al usuario que posteriormente utilizaremos para que nuestro webpart funcione correctamente. lo primero a tener en cuenta es el: using System.ComponentModel; luego utilizamos este codigo para introducir informacion sobre nuestra caracteristica [WebBrowsable(true), Personalizable(true), Category("Colores"), DisplayName("Seleccionar Color"), WebDisplayName("Seleccion Color"), Description("Debes introducir un color web ej: #660000")] Aqui un ejemplo: private Seleccion _SubSite = Seleccion.desconocido; [Personalizable(PersonalizationScope.Shared), WebBrowsable(true), Category("Configuracion Color"), WebDisplayName("¿Es el sitio superior?"), WebDescription("Seleccioneel tipo de sitio")] public Seleccion SubSite { get { return _SubSite; } set { _SubSite = value; } } private string _Sitio = "muciencia"; [Personalizable(PersonalizationScope.Shared), WebBrowsable(true),Category("Configuracion Color"), WebDisplayName("Nombre"), WebDescription("Escriba el nombre del museo de la ciencia")] public string Sitio { get { return _Sitio; } set { _Sitio = value; } } Podemos ver en el ejemplo que las caracteristicas tienen el mismo nombre, lo cual hara que queden agrupadas en la configuración.
Por lo general cuando uno crea webpart siempre coloca varias configuraciones dependiendo de la cantidad de configuraciones que necesite nuestro webpar, por eso asegurate de que la categoria sea la misma para que se encuentren agrupados al momento de verlos en la configuracion del webpart.

miércoles, 24 de marzo de 2010

A partir de hoy cambiamos de nombre y nos dedicaremos a sharepoint

Bueno pues tenia un poco abandonado el blog, inicialmente comenzo como un proyecto en una materia, hoy lo retomo nuevamente pero para escribir sobre lo que hago cotidianamente, Crear webParts para sharepoint. Pues tratare de explicar lo mas sencillamente posible las cosas que hago. Mostrare las dificultades, oportunidades y avances que he descubierto al momento de aprender esta tecnologia.