Anuncios

IT Certification Category (Spanish)468x60

lunes, 6 de marzo de 2017

Desarrolla proyectos en .Net que incluyan tu propio navegador


Introducción

Existen diferentes herramientas de  desarrollo de software que hacen más fácil la vida de un programador y sobre todo herramientas que nos ayudan cuando empezamos nuestros propios proyectos y que aminoran bastante el tiempo de desarrollo.

Dependiendo de cuales sean tus proyectos estoy seguro que en muchos de ellos quisiste agregar un explorador dentro de los componentes que tienes ya mostrando en tu interfaz de usuario, pero hacerlo de cero puede tomar bastante esfuerzo y sería reinventar la rueda, para evitar esto quiero presentarte a DotNetBrowser que vendría a ser una librería que encapsula un control de UI basado en Chronium que en simples palabras vendría a ser como tener tu propio browser Chrome dentro de tu app.

Yo seguí los pasos de la guía y fue bastante fácil incluir el browser / navegador dentro de un WinForm. Como puedes ver en la siguiente imagen es como si tuviera mi propio explorador dentro de mi Form:




Y es funcional. Tranquilamente puedes navegar siguiendo links como si lo estuvieras haciendo en Firefox o Chrome.


¿Que requieres para poder usarlo?

Primero debes registrarte para bajar el zip que contiene la librería de .Net y también su licencia en el siguiente enlace:

Una vez descargado el archivo “dotnetbrowser-X.XX.zip” y descompreso dentro de la carpeta Library está el archivo DotNetBrowser.dll que luego en tu proyecto de .Net agregas la referencia a su librería y listo.




Y en el código del Win Form es lo siguiente:




¡PROBEMOSLO!!!! 

OK, ahora veremos una pequeña aplicación que pude desarrollar para puedan ver un poco de lo poderoso de esta herramienta.

Esta app nos permitirá ver videos web y a la vez buscar en otra página la letra de las canciones del video o música que estoy escuchando y si el browser embebido soporta sonido y videos :)

En un panel pondremos un browser que nos servirá para poder ver los videos y en otro panel buscaremos la letra de lo que estamos escuchando, OK si no es un app de lo más novedoso pero es algo que se me ocurrió hacer para probarlo.





Miren aquí pongo el video en tamaño completo y ocupa todo el tamaño del primer panel.





Algunos requerimientos que agregaremos a nuestro Form:

  • Tendrá 2 campos de texto uno para URL que veremos en cada panel
  • 2 Paneles que contendrán los browsers
  • 2 Botones para navegar en cada panel/browser
  • Y eso es todo.
Aquí vamos agregando los componentes de UI a nuestro Form:






Este es el código en C# para agregar a nuestra clase del Form.

private BrowserView BrowserView = new WinFormsBrowserView();
private BrowserView BrowserViewSecondPanel = new WinFormsBrowserView();
private String DefaultURL = "http://www.google.com";



En el método constructor del formulario vamos a colocar el siguiente código, mi Clase Form se llama Form1:


public Form1()

{

   InitializeComponent();
   this.PanelBrowser.Controls.Add((Control)BrowserView);
   this.SecondPanel.Controls.Add((Control)BrowserViewSecondPanel);
   this.BrowserView.Browser.LoadURL(DefaultURL);
   this.BrowserViewSecondPanel.Browser.LoadURL(DefaultURL);
   this.PanelBrowser.Height = this.Height - 200;
   this.PanelBrowser.Width = this.Width - 800;
   this.SecondPanel.Height = this.Height - 200;
   this.SecondPanel.Width = this.Width - 800;

}




Y tenemos los dos siguientes métodos que cargaran la página web que nosotros coloquemos en sus respectivos campos de texto para sus URLs, en los exploradores que tienen cada panel.


private void IrALaPagina_Click(object sender, EventArgs e)
{
   var loadNewURL = this.URLTextBox.Text;
   this.BrowserView.Browser.LoadURL(loadNewURL);
}


private void IrALaPaginaSegundoPanel_Click(object sender, EventArgs e)
{
   var loadNewURL = this.SecondURL.Text;
   this.BrowserViewSecondPanel.Browser.LoadURL(loadNewURL);
}




Les Dejo en el siguiente enlace la solución completa para que puedan descargarlo y probarlo.

Solución del Proyecto en .zip


Mas referencias de DotNetBrowser:
Preguntas Frecuentes y tutoriales:

Guía Rápida de desarrollo

Como Instalar la licencia: Luego puedes seguir los pasos para agregar la licencia descrita en este enlace:




People who read this post also read :