Aplicaciones RIA - U1-parte 2 - DA3

(Rich Internet Applications)
(Aplicaciones de internet enriquecidas).
JavaScript, jQuery, jQuery UI
Es utilizado en los sitios y aplicaciones web para
agregar funcionalidad.
Utilizado en el lado del cliente para:
◦ Hacer peticiones al servidor.
◦ Realizar funciones específicas en las páginas y
aplicaciones.
◦ Validación.
◦ Entre otras características.
Es considerado un lenguaje orientado a objetos
(manipula del DOM).
Dando como resultado: Sitios web y aplicaciones
dinámicas con mejoras en la interfaz de usuario.
Para insertar código JavaScript en un
documento HTML, se utiliza la etiqueta
<script> agregándola en el encabezado del
documento.
<script type="text/javascript">
//Código JavaScript
</script>
Se agrega el atributo src a <script> el cual
hace referencia a la ruta del archivo JavaScript
archivo.JS
<script type="text/javascript"
src="ruta_archivoJS.js
ruta_archivoJS.js">
ruta_archivoJS.js
</script>
Es importante que poco a poco se vaya
introduciendo más a la programación con
JavaScript apoyándose en libros, tutoriales y
ejemplos.
◦ http://www.w3schools.com/js/
Para lo que se estará realizando con jQuery, es
necesario aprender lo básico de JavaScript como:
◦
◦
◦
◦
Variables.
Operadores.
Palabras reservadas.
Sintaxis.
“jQuery is a fast and concise JavaScript Library
that simplifies HTML document traversing,
event
handling,
animating,
and
Ajax
interactions for rapid web development.
jQuery is designed to change the way that
you write JavaScript.”
JavaScript (http://jquery.com/).
Visitar la documentación técnica para empezar a trabajar con
jQuery.
jQuery
Para agregar la biblioteca jQuery a un
documento HTML, página web o aplicación
web, tenemos 2 formas:
1. Descargar el archivo .JS y almacenarlo en una
carpeta local.
2. Enlazar la biblioteca desde su sitio oficial.
1.
2.
Descargar el archivo .JS
Almacenarlo en la carpeta local:
◦ Junto al resto de los archivos.
o
◦ En una carpeta especial para JS’s en una carpeta de
servidor (Content/Scripts/[aquí]).
Como es JavaScript, se utiliza la etiqueta
<script>
<script type="text/javascript" src= "rutadel_archivo
rutadel_archivo_.
rutadel_archivo_.JS
_.JS"
JS >
</script>
Cuando se encuentra en la carpeta local o carpeta
del servidor local.
<script type="text/javascript" src="jquery
jqueryjquery-1.7.1.min.js">
1.7.1.min.js
</script>
Cuando se enlaza el JS desde el servidor de
jQuery y/o Google Api’s.
<script type="text/javascript"
src="http
http://
http://code.jquery.com/jquery
://code.jquery.com/jquerycode.jquery.com/jquery-1.7.1.min.js"></script>
1.7.1.min.js
<script type="text/javascript"
src="http
http://
http://ajax.googleapis.com/
://ajax.googleapis.com/ajax
ajax.googleapis.com/ajax/
ajax/libs/
libs/jquery/1.7.1/jquery.
jquery/1.7.1/jquery.
min.js"></script>
min.js
Cuando se quiere ejecutar funciones
específicas al terminar de cargarse la página
o DOM), se utiliza el evento jQuery.ready():
$(document).ready(function() {
//Todo el código JavaScript que deberá ejecutarse
//al terminar de cargar el DOM
});
jQuery utiliza el simbolo $ como selector,
utilizado para manipular los elementos del
DOM.
Veamos algunos ejemplos como formas para
seleccionar elementos.
$("div"
$("div");
"div"); //Selecciona todos los elementos
DIV.
$(“#
$(“#elemetoX
“#elemetoX"
elemetoX"); //Selecciona el elemento con
el ID "elementoX".
$(“.
$(“.miclase
“.miclase"
miclase"); //Selecciona todos los
elementos con la clase "miclase".
$(“
$(“p#elementoY"
p#elementoY"); //Selecciona todos los
elementos párrafo con el ID "elementoX".
$(“div
$(“div p.claseX"
p.claseX"); //Selecciona todos los
elementos párrafo con la clase "claseX" que
estén dentro de un DIV.
http://api.jquery.com/jQuery/
http://api.jquery.com/jQuery/
http://api.jquery.com/category/events/
.Click()
◦ Bind an event handler to the "click" JavaScript event,
or trigger that event on an element.
.bind() » método
◦ Attach a handler to an event for the elements.
.live()
» método
◦ Attach an event handler for all elements which
match the current selector, now and in the future.
.ready()
◦ Specify a function to execute when the DOM is fully
loaded.
Es importante recordar que la mayoría de
los eventos deben ser manejados dentro del
evento:
◦$(document).ready()
En el caso del método Live() puede
manejarse fuera del evento Ready().
Consulte
http://api.jquery.com/category/events/ y
controle algunos de los eventos más con
jQuery, puede copiar los ejemplos ahí
mostrados y/o complementar el ejemplo.
jQuery incluye una multitud de métodos para
manipular el DOM:
◦ .prepend()
Insert content, specified by the parameter, to the beginning
of each element in the set of matched elements.
◦ .append()
Insert content, specified by the parameter, to the end of
each element in the set of matched elements.
◦ .empty()
Remove all child nodes of the set of matched elements from
the DOM.
◦ .html()
Get the HTML contents of the first element in the set of
matched elements.
◦ .val()
val()
Get the current value of the first element in the set of
matched elements.
http://api.jquery.com/category/manipulation/
Consulte
http://api.jquery.com/category/manipulation
/ y realice ejemplos con algunas funciones
más con jQuery para manipular el DOM,
puede copiar los ejemplos ahí mostrados y/o
complementar el ejemplo.
jQuery incluye diferentes formas de trabajo
con AJAX >>
http://
http://api.jquery.com/category/ajax/
://api.jquery.com/category/ajax/
Donde el método principal es jQuery.ajax()
◦ Perform an asynchronous HTTP (Ajax) request.
Mostraremos un ejemplo básico y
continuará por su propia cuenta.
Inicio | Información | Acerca de
«contenedor principal»
inicio.html
informacion.html
acercade.html
Nota:
Nota Este es un ejemplo que se ejecuta de forma local, por lo tanto
puede no ejecutarse correctamente en Chrome, pruebe con otro
navegador como Firefox.
Consulte http:
http://api.
//api.jquery.
jquery.com/
com/ y apoyándose
con
la
documentación
técnica
http:
http://docs.
//docs.jquery.
jquery.com/
com/ y realice sus propios
ejemplos y ejercicios con jQuery y apliquelos a
un caso práctico como el proyecto de la
financiera en el navegador web.
Consulte el ejemplo de proyecto con ASP.NET
MVC 2 donde se integra parte de su
funcionalidad con jQuery (AJAX + JSON).
◦ » http://bit.ly/da3-archs Archivo: Agencia2012.zip
“jQuery UI provides abstractions for low-level
interaction and animation, advanced effects
and high-level, themeable widgets, built on
top of the jQuery JavaScript Library, that you
can use to build highly interactive web
applications.” (http://jqueryui.com/).
Visitar la documentación técnica para empezar a trabajar con jQuery
UI » http://jqueryui.com/demos.
jQuery UI está disponible en diferentes temas
predeterminados o puede personalizarse uno
nuevo
y
descargarse.
http://jqueryui.com/themeroller/
Elegir el tema y componentes a descargar en
jQuery UI.
Extraer todo el contenido del archivo zip.
La versión mostrada en este ejemplo es
jquery-ui-1.8.17
La carpeta jquery-ui-1.8.17.custom contiene las
carpetas:
css:
css contiene la carpeta del tema seleccionado
(archivo css e imágenes del tema).
developmentcarpeta que contiene
development-bundle:
bundle
demos, ayuda, bibliotecas externas, temas (base
y el seleccionado divididos en diferentes css) y la
carpeta UI que contiene todos los componentes
de jQuery por separado.
js: Carpeta que contiene el archivo jqueryjquery-uiui1.8.17.
17.custom.
custom.min.
min.js que debe enlazarse en los
doc.
doc. HTML el cual contiene todos los
componentes de jQuery UI, contiene también el
archivo de jQuery.
Ya desempaquetado el jQuery UI puede
copiarse toda la carpeta a la ubicación donde
se utilizará.
O
Copiar los archivos necesarios como:
Para cambiar la apariencia del documento
HTML con jQuery UI se hace desde código JS,
aunque
pueden
utilizarse
los
estilos
directamente en el código HTML.
Cualquier
elemento
HTML
transformarse su apariencia a botón.
puede
Cualquier
elemento
HTML
transformarse su apariencia a botón.
puede
Queda a consideración de cada uno continuar
con jQuery UI, toda la información necesaria
se encuentra en línea con ejemplos y
explicación, también se encuentra en los
archivos de ayuda y demos descargados.
http://jqueryui.com/demos/