Java + SQL Server 2005/2008

Dirijido a las personas que me habian preguntado como realizar la conexión entre una aplicación java y SQL Server usando el JDBC.

Los parametros y detalles de la conexion la encuenran en el sitio de microsoft aquí

Entonces el formato general de la URL de conexión es:


jdbc:sqlserver://[serverName[\instanceName][:portNumber]][;property=value[;property=value]]


donde:

jdbc:sqlserver:// (obligatorio) es el subprotocolo y es constante.

serverName (opcional) es la dirección del servidor con el que se establece la conexión. Puede ser un DNS o una dirección IP o bien un host local o 127.0.0.1 para el equipo local. Si no se especifica en la URL de conexión, es necesario especificar el nombre del servidor en la colección de propiedades.

instanceName (opcional) es la instancia para establecer la conexión con serverName. Si no se especifica, se establece una conexión con la instancia predeterminada.

portNumber (opcional) es el puerto para establecer la conexión con serverName. El valor predeterminado es 1433. Si usa el valor predeterminado, no es necesario especificar el puerto ni el signo ":" precedente en la dirección URL.

Una vez que tengan definida su cadena de conexión, se puede crear la conexión a la BD, en mi caso me descargue el Microsoft SQL Server JDBC Driver 2.0 liberado en marzo de este año, pero bueno un ejemplo:


//carga del Driver
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
//Se establece la conexion con el servidor de BD
dbConnection = DriverManager.getConnection("jdbc:sqlserver://192.168.0.123:1433;databaseName=BD_Check;",
"User1", "12345");
//Se crea el objeto statement
Statement stm = dbConnection.createStatement();
private PreparedStatement enrollStmt;
enrollStmt = dbConnection.prepareStatement("SELECT * FROM enroll");
enrollStmt.executeQuery()
//Posteriormente se cierra la conexión
if(!enrollStmt.isClosed())
enrollStmt.close();
if(!dbConnection.isClosed())
dbConnection.close();


Recomiendo lean la API java.sql para mas detalles.

NOTA:Los chicos de microsoft constantemente mueven las paginas del servidor, por lo que en algún momento el link podría estar roto.

Mega menús desplegables (How To)

| 0 comentarios

Diseñar para la web, requiere de un poco de inspiración, por eso no es raro que constantemente me sorprenda con sitios verdaderamente creativos y originales (Saludos yatta).

Soluciones para esas ideas creativas hay muchas, para este post supondremos que deseamos realizar un panel de navegación horizontal para nuestro sitio solo que para hacerlo más interesante; este desplegara un panel con un grupo de opciones en cuanto se posicione el puntero del mouse sobre una opción del menú; con esto se pretende mejorar la navegación del sitio y por supuesto que la usabilidad del mismo. Véase el siguiente ejemplo:

BigMenu

Nuestro ejemplo sera simple y con un solo grupo de opciones que estará coherentemente agrupada, aunque bien pudiera hacerse con CSS, habría que explorar las incompatibilidades que se puedan generar entre los navegadores Web, por esta razón el problema será resuelto usando JQuery y un Plugin de este llamado hoverIntent

Diseño


Supondremos que el sitio web, es de una ferretería, por lo que incluiremos una opción en el menú que diga promociones, el cual desplegará las promociones de forma clasificada

Markup


Se hace un menú sencillo de forma horizontal:

Code1

Después se añade un div al enlace que contendrá el grupo de opciones que en este caso es para "Promociones", obsérvese la clase megamenu que se ha agregado que nos permite indicar el Mega menú.

code2


Estilo



Es momento de darle estilo y sentido a lo que se ha echo, se muestra una parte del archivo CSS en el cual se da formato a los tipos de letra, elementos div etc.:


body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
font-size: 11px;
background: #fff;
color: #333;
}

h1, h2, h3, h4, h5, h6, p, ul, li {
font-size: 1em;
margin: 0;
padding: 0;
}


div#banner {
background: transparent url(logo.gif) top left no-repeat;
padding-top: 12px;
padding-bottom: 36px;
}

div#banner h1, div#navegacion h2 {
margin: 0;
padding: 0;
}

div#banner h1 a {
display: block;
width: 270px;
height: 120px;
}
div#banner h1 a span, div#banner .skip {
position: absolute;
top: -10000px;
left: -10000px;
}

ul#navegacion {
background: #940;
color: #fff;
margin: 0;
padding: 0.3em 0em;
}


ul#navegacion li {
display: inline;
margin: 0.1em 1em;
position: relative;
}

ul#navegacion h2, ul#navegacion h3 {
font-size: 100%;
font-weight: normal;
display: inline;
}


ul#navegacion li a {
color: #fff;
text-decoration: none;
padding: 0 0.4em;
}

ul#navegacion li a:hover {
text-decoration:blink;
}

ul#navegacion li.megamenu a {
background: transparent url(arrow.gif) center right no-repeat;
padding: 0 1.2em;
}

ul#navegacion li.megamenu a:hover {
text-decoration: underline;
}

ul#navegacion div {
display: none;
}

ul#navegacion li.megamenu div {
border: 1px solid #dda;
width: 18em;
position: absolute;
top: 1.6em;
left: 0em;
padding: 1.3em;
background: #ffc;
color: #930;
}

ul#navegacion li.hovering div {
display: block;
}

ul#navegacion li.megamenu div a {
color: #300;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#navegacion div h3 {
color: #f70;
font-weight: bold;
font-size: 1.1em;
}
ul#navegacion div p {
margin: 0 0 0.8em 0;
padding: 0;
}



Lo interesante: Script


Para realizar este ejemplo existen script's en la web que son bienvenidos también, aunque como ya se ha dicho para este ejemplo se usa JQuery que bueno semejante monstruo tiene muchas más aplicaciones que esta que le estamos dando.

Entonces se agrega una referencia desde nuestro HTML al JQuery y otra más al Plugin hoverIntent:



.
.
script src="completed_files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8">
.
.
.
script src="completed_files/jquery.hoverIntent.minified.js" type="text/javascript" charset="utf-8">
.
.


Despues hay que escribir un par de funciones que agrega y otra remueve la clase hovering y se especifican los parámetros que indican la reacción ante el puntero del mouse.



$(document).ready(function() {

function addMega(){
$(this).addClass("hovering");
}

function removeMega(){
$(this).removeClass("hovering");
}

var megaConfig = {
interval: 300,
sensitivity: 3,
over: addMega,
timeout: 500,
out: removeMega
};

$("li.mega").hoverIntent(megaConfig)


Codigo fuente


Ejemplo del HTML aquí mostrado
Ejemplo del CSS aquí mostrado

Enlaces


[http://cherne.net/brian/resources/jquery.hoverIntent.html ]

Me gustaría hablar en otros post sobre JQuery, aunque apenas estoy aprendiendo de sus bondades si me gustaria sacarle más provecho a su funcionalidad, pero bueno espero haberlos dejado picado con la información, me gustaría que hablaran sobre algunas desventajas que por cierto es un tema del que tal vez hable después.