Blog de Jorge Pedraza

enero 18, 2010

Uso de Elementos Web

Filed under: Aplicaciones Web — JorgePedraza @ 9:06 pm
Tags: , , ,

Uso de Web Parts (Elementos Web)

Las Páginas Web Modernas son colecciones de componentes. Por Ejemplo, examinar sitio de noticias favoritos, el cual probablemente tiene una barra de navegación a la izquierda, barra de titulo arriba, con al menos una columna de noticias y un pie de página. Adicionalmente varias noticias y proveedor de sitios de portal personalizado, opcionalmente componentes como reporte del tiempo y cotización de bolsas.
Los Web Parts de ASP.NET dan la capacidad de proporcionar a sus usuarios de controlar los componentes que aparece en página web. Con Web Parts, los usuarios pueden minimizar o cerrar completamente grupos de controles. También puede proporcionar un catalogo de Web Parts para permitir a usuarios agregar grupos de controles donde ellos quieran en la página.

Que es un Web Parts: Son componentes que los usuarios puede mostrar, ocultar o mover.

Web Parts son frecuentemente usado para:

  • Una lista de Artículos de noticias reciente relacionado con su organización.
  • Mostrar un calendario de eventos entrantes.
  • Una lista de enlaces relacionado con sitios web.
  • Una Caja de Búsqueda.
  • Miniaturas de Imagen de Galería de foto.
  • Control de Navegación de sitio.
  • Un Blog.
  • Artículos de noticias puesto desde alimentación de sindicación realmente simple (RSS).

Agregando Web Parts en un Página:
Para agregar un Web Parts a una página, siga estos pasos:

  1. Agrega un control WebPartManager en la parte superior de la pagina (el debe aparecer antes que cualquier Web Parts). Este control no es visible a los usuarios, pero es requerido para usar Web Parts.
  2. Crear una tabla de diseño. Técnicamente la tabla de diseño no son necesaria, pero en la práctica, el es la mejor vía para organizar Web Parts.
  3.  Agrega contenedores WebPartZone para cada celda en la tabla de diseño que espera contener Web Parts. Agrega el atributo title descriptivo para cada control WebPartZone.
  4. Agrega controles a los contenedores WebPartZone  para definir posiciones por defecto para su Web Parts. Agrega el atributo title descriptivo para cada Web Part que agrega.

Permitir a usuarios editar y organizar Web Parts:

Web Parts tiene diferentes modos que permiten a los usuarios controlar los Web Parts que son mostrados en la página. Los modos son:

  • Browse (BrowseDisplayMode) : la forma estándar de usuarios para navegar páginas web. Este es el modo por defecto.
  • Design (DesignDisplayMode): Permite a los usuarios Arrastras y soltar Web Parts dentro de diferentes localizaciones. Este modo es siempre visible.
  • Edit (EditDisplayMode): Similar al modo de diseño, el modo edición permite a los usuarios arrastras y soltar web Parts. Adicionalmente los usuarios puede seleccionar editar desde el menú Web Parts para editar el tamaño, dirección, mostrar ventana y zona del web Parts usando controles AppearanceEditorPart y LayoutEditorPart.
  • Catalog (CatalogDisplayMode): Permite a usuarios agregar adicional Web Parts que se especifica usando control CatalogZone. Este modo está disponible solo después de agregar un CatalogZone en su Página.
  • Connect (ConnectDisplayMode): permite a usuarios establecer manualmente conexiones en medio de controles interactuando con el control ConnectionZone. Por Ejemplo, un Wep Parts puede ser vinculado para mostrar información de resumen y detalles del mismo reporte. Este modo esta solo disponible después que agrega el control ConnectionZone en la Página.

Cuando los usuarios selecciona cambiar de modo, en su aplicación debe programáticamente establecer la propiedad WebParManager.DisplayMode.
Para permitir a usuarios entrar a diferentes modos de vista y edición de Web Parts, siga estos pasos:

  1. Agrega el control para pemitir a usuarios intercambiar en medio de diferentes modos de Web Parts. Use el WebPartManager.SupportedDisplayModes para recuperar la listas de modo, que son soportado y suministra una lista de opciones a los usuarios. Cuando los usuarios seleccione un modo, se establece WebPartManager.DisplayMode como modo seleccionado. Puede recuperar en la pagina  la instancia WebPartManager llamando el método estático WebPartManager.GetCurrentWebPartManager(Page).
  2. Agrega un contenedor EditorZone en la página que mantiene las herramientas de edición. Este control es oculto hasta que los usuarios seleccione el modo de edición.
  3. Agrega un control AppearanceEditorPart a el contenedor EditorZone para dar a los usuarios la capacidad de  Ajustar los bordes, tamaño, Direccion y titulo del Web Parts.
  4. Agrega un control LayoutEditorPart al contenedor EditoZone para dar a los usuarios la capacidad de ajustar el estado minimizado del Web Parts y mover Web Parts para otros contenedores WebPartZone.
  5. Agrega un contenedor CatalogZone a la página. Entonces agrega el control DeclarativeCatalogPart al contenedor CatalogZone,  que permite a usuarios agregar controles en la pagina. Estos controles son oculto hasta que los usuarios selecciona el modo  Catalog.
  6. Agrega un control ConnectionZone en la página, para permitir a usuarios establecer conexiones entre controles. Este control está oculto hasta que los usuarios seleccione el modo Connect.

Conexiones de Web Parts.

Una de la característica más completa de la herramienta de web parts es la capacidad de construir conexiones en medio de Web Parts. Para Entender las posibilidades, imagina construir una aplicación interna para administrar nominas de empleados. Pudiera tener:

  • Un Web Part principal, así puede navegar datos de empleados.
  • Un Web Part que muestre un grafica de pagos de horas extras de empleados seleccionado.
  • Un Web Part que muestre un grafica de torta ilustrando como  nomina, beneficios,  opciones de existencias, y  forma de pensión  dentro los empleados que esta compensado totalmente.
  • Un Web Part que compare los empleados que están pago con otros empleados en la misma posición.

Con la conexiones de Web Parts, los usuarios puede seleccionar un archivo de empleado y tener todo los otros web Parts actualizado automáticamente, usando que empleados esta con información. Naturalmente los usuarios que analizan los datos, pueden tener la capacidad de agregar, quitar y reorganizar Web Parts.
Las conexiones son también útiles para sitios web orientado por consumidores. Por ejemplo si está construyendo un sitio de portal, podría tener el Web parts que muestre información localizada en base a los usuarios que tiene códigos postales, incluyendo el tiempo, noticas local y la fase lunares.
Las conexiones pueden ser tanto estáticas o dinámicas. Sí la conexión es estáticas tu (como desarrollador) establece la conexiones durante la proceso de desarrollo, y no puede ser cambiado por usuarios. Las conexiones estáticas son permanentes y no puede ser eliminada por usuarios.  Las conexiones Dinámicas pueden ser establecidas por usuarios y está habilitada para agregar un control ConnectionZone en la página.

Creando Conexiones estáticas: para crear conexión siga estos pasos:

  1. Crea un Web Part proveedor. Un Web Part proveedor puede derivar desde la clase WebPart o el puede simplemente ser un control Web. Debe crear un método público con el atributo ConnectionProvider que retorna el valor que el consumidor reciba.
    <ConnectionProvider(“Proveedor de Nombre de usuario”, “ProveedorNombre”)> _
    Public Function GetName as string
    ‘ Name contiene el nombre de un usuario, lee desde el control Textbox
    Return Name
    End Function
  2. Crea un Web Part Consumidor. Un Web Part consumidor puede derivar desde la clase WebPart o el puede simplemente ser un control Web. Debe crear un método público con el atributo ConnectionConsumer que acepte el mismo tipo que retorna el método  ConnectionProvide el que suministra. El siguiente código demuestra un método consumidor.
    <ConnectionConsumer(“Consumidor Nombre de Usuario”,”ConsumidorNombre”)>  _
    Public Sub GetName(ByVal Name as String)
    greetingLabel.Text = “Bienvenido ” + Name + “!
    End Sub
  3. Crear una página web con el control WebPartManager. Agrega al menos un contenedor WebPartZone.
  4. Agrega su Contenedores WebParts proveedor y consumidor.
  5. Dentro de la fuente del control WebPartManager, agrega el elemento <StaticConnections> que incluye un control WebPartConnection para declarar la conexión en medio de un proveedor y consumidor. El control WebPartConnection debe tener un ID para identificar el Método del Proveedor (ProviderConnectionPointID), un atributo para identificar el control del consumidor (ConsumerID), y un atributo para la identificar el método del consumidor (ConsumerConnectionPointID). Debe tener un control WebPartConnection para cada par de controles conectado. El siguiente marcado demuestra esto:
    <asp:webPartManager ID=”WebPartManager1runat=”Server”>
    <StaticConnections>
    <asp:WebPartConnection
    ID=”Conn1”
    ProviderID=”GetName”
    ProviderConnectionPointID=”ProveedorNombre”
    ConsumerID=”ShowName”
    ConsumerConnectionPointID= “ConsumidorNombre”/>
    </StaticConnections>
    </asp:WebPartManager>

Habilitando Conexiones Dinámica.
Para habilitar conexión dinámica, que el usuario pueda crear o Interrupir, siga estos pasos:

  1. Crea una página con la conexión de un proveedor y consumidor como describe en la previa sesión.
  2. Opcionalmente, establezca  una conexión estática en medio del consumidor y proveedor como describe en la previa sesión. Este actúa como conexión por defecto que un usuario interrumpa si es deseado.
  3. Agrega un control ConnectionZone en la Pagina Web.
  4. Agrega un control que permita a usuarios entrar el modo de conexión, como describe en “Usuando Diferentes modos de vista”, anteriormente en este articulo.

Estableciendo conexiones dinámica entre Web Parts
Cuando un usuario visualiza su página, el o ellos puede entrar en modo de conectar y usa el control ConnectionsZone para editar Conexiones. Para Editar conexión como un usuario. Siga esto pasos:

  1. Intercambie el modo de vista de conectar.
  2. En el menú del Web Parts para tanto el consumidor o el proveedor, selección conectar.
  3. El objeto ConnectionZone aparece.
  4. Sí  hay una conexión existente, haga clic en el boto Desconectar para interrumpir la conexión.  De lo contrario, haga clic en crear una conexión para un consumidor, seleccione el consumidor y haga clic conectar.
  5. Cuando este hecho la edición de conexiones, haz clic en cerrar.

El Web Parts está conectado, como sí se hubieran conectado estáticamente.

Personalizar Web Parts: Un Web Parts soporta personalización, donde cambios de la capa se almacena para cada usuario así que el usuario visualiza la misma capa la próxima vez que visita la página. Un Personalización de Web parts es parecida pero separada de perfiles de usuarios. Ambos confía en cookies de lado del cliente y almacena datos en base de datos SQL server por defecto. Sin embargo típicamente los usuarios esta autenticado usando autenticación de Formulario o Windows.
Habilitando personalización de controles clientes. Por defecto la recuerda la personalización la ubicación y otras configuración de WebParts Personalizado. Como describe en “Habilitando Usuarios editar y Organizar WebParts”, anteriormente en esta capitulo. Puede también almacenar datos personalizado en la base de datos de personalización para permitir controles de información de recuerdo acerca de usuarios. Para cada propiedad pública que espera recordar para usuarios individuales, simplemente agrega el atributo Personalizable, como el siguiente código simplificado lo demuestra:
<Personalizable()> _
Property Zip() as String
Get
Return _zip
End Get
Set ( Byval Value as String)
_zip = value
End Set
End Property


Habilitando personalización Compartida: la personalización de  Web Parts está habilitada por defecto y usuarios autenticados de una página de Web Parts son capaz de personalizar páginas para ellos mismo sin cualquier configuración especial. Sin embargo el usuario individual o cambios personalizado de ámbito solo esta visible solo para el usuario que realizo la acción. Sí espera suministrar a un webmasters ( o cualquier usuario)  el poder de hacer cambios que afectan modo de personalización de todo el mundo que ve el Web Parts, puede permitir compartir personalización en su archivos Web.Config de las aplicaciones.
Dentro de la sesión <system.Web> del archivo de  configuración, agrega una sesión la <authorization> y dentro que, agrega un elemento <allow> para especificar que un usuario o usuarios tengan acceso al ámbito de personalización compartida, como se muestra  en el siguiente ejemplo:
<authorization>
<allow verbs=”EnterSharedScope” users”SomeUserAccoun” Roles= “admin” />
</authorization>
El  usuario o los usuarios especificados ahora tienen la capacidad de editar una página con ámbito  personalizado para que así los cambios este visible para todos los usuarios.

Deshabilitar personalización para un pagina.
Puede también deshabilitar la personalización para una página. El cual es de utilidad si desea tareas avanzada de  personalización en la misma página pero no en otras. Para deshabilitar la personalización en una página, visualiza las propiedades para las páginas que tiene el control WebPartManager y establece el atributo WebPartManager.Personalization.Enabled a falso. La forma más fácil de hace esto es usando el diseñador, pero el código de origen aparece similar a lo siguiente:
<asp:WebPartManager ID=”WebPartManager1runat=”Server”>
<Personalization Enabled=”False”>
</asp:WebPartManager>

Resumen de Web Parts:

  • Los Web Parts (elementos Web) son los controles que los usuarios pueden cerrar, minimizar, editar y mover.
  • Para agregar WebParts a una página Web, agregue un control WebPartManager en la parte superior de la página, añade contenedores WebPartZone a la página y, a continuación, agregar controles al WebPartZone.
  • Para permitir a los usuarios modificar o reorganizar los Web Parts, agregue un control para permitir a los usuarios seleccionar diferentes modos. A continuación, agregue un contenedor EditorZone a su página y añade un AppearanceEditorPart o un LayoutEditorPart al contenedor EditorZone. Para que los usuarios puedan añadir más Web Parts, agrega un contenedor CatalogZone y un DeclarativeCatalogPart al contenedor. Para permitir a los usuarios controlar cómo se conectan los elementos Web, agregue un control ConnectionsZone.
  • Para conectar los Web Parts para que puedan compartir datos, primero debe crear el proveedor y el consumidor de Web Parts. Después añadirlos a su página Web. Por último, configura las conexiones entre los elementos Web mediante la adición de un elemento <StaticConnections> al control WebPartManager.
  • Para utilizar personalización de Web Parts, habilite la autenticación en la aplicación y proporcionar un almacén de datos que contiene la información de personalización. Usted puede proporcionar la personalización en clases personalizadas añadiendo el atributo Personalizable a las propiedades públicas.

Laboratorio WebPart (Visual Basic 2008)

Codigo Fuente TestWebParts (Visual Basic 2008)

Dejar un comentario »

Aún no hay comentarios.

RSS feed for comments on this post. TrackBack URI

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Blog de WordPress.com.

A %d blogueros les gusta esto: