lunes, 30 de abril de 2018

Observer pattern Java

Observer Pattern en Java


Subject.java class
 
package ObserverPatt2;

import java.util.Collection;

public abstract class Subject {
    Collection observers;
    abstract void registerObserver(Observer obs);
    abstract void unregisterObserver(Observer obs);
    abstract void notifyObservers();
}

Observer.java class

package ObserverPatt2;

public abstract class Observer {
    public abstract void update();
}

PostOffice.java class

public class PostOffice extends Subject {
    private String address;

    public PostOffice(String address) {
        observers = new ArrayList();
        this.address = address;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    @Override    void registerObserver(Observer obs) {
        observers.add(obs);
    }

    @Override    void unregisterObserver(Observer obs) {
        observers.remove(obs);
    }

    @Override    void notifyObservers() {
        Iterator iterator = observers.iterator();
        while(iterator.hasNext()){
            ((ObserverPatt2.MailBox)iterator.next()).update();
        }
    }
}

MailBox.java class

package ObserverPatt2;

public class MailBox extends Observer {
    String Id;

    public MailBox(String id) {
        Id = id;
    }

    public String getId() {
        return Id;
    }

    public void setId(String id) {
        Id = id;
    }

    @Override    public void update() {
        System.out.println(Id +  "- Tiene Nuevo email");
    }
}

MainClass.java

package ObserverPatt2;

public class MainClass {
    public static void main(String... args){
        MailBox mailBox1 = new MailBox("Paseo de la Reforma 123");
        MailBox mailBox2 = new MailBox("Insurgentes Sur 123");
        PostOffice postOffice = new PostOffice("Central de Correos");

        System.out.println("registrando observador " + mailBox1.getId() + " en " + postOffice.getAddress() );
        postOffice.registerObserver( mailBox1);
        System.out.println( postOffice.getAddress() +  ": notificando a observadores...");
        postOffice.notifyObservers();
        System.out.println("registrando observador " + mailBox2.getId() + " en " + postOffice.getAddress() );
        postOffice.registerObserver( mailBox2);
        System.out.println( postOffice.getAddress() +  ": notificando a observadores...");
        postOffice.notifyObservers();
        System.out.println("Desregistrando observador " + mailBox1.getId() + " de " + postOffice.getAddress() );
        postOffice.unregisterObserver( mailBox1);
        System.out.println( postOffice.getAddress() +  ": notificando a observadores...");
        postOffice.notifyObservers();
    }
}

La corrida quedaría de la siguiente manera:

registrando observador Paseo de la Reforma 123 en Central de Correos
Central de Correos: notificando a observadores...
Paseo de la Reforma 123- Tiene Nuevo email
registrando observador Insurgentes Sur 123 en Central de Correos
Central de Correos: notificando a observadores...
Paseo de la Reforma 123- Tiene Nuevo email
Insurgentes Sur 123- Tiene Nuevo email
Desregistrando observador Paseo de la Reforma 123 de Central de Correos
Central de Correos: notificando a observadores...
Insurgentes Sur 123- Tiene Nuevo email

fin texto.

CSS FlexBox dentro de FlexBox


Formato en HTML


Despliegue en blueprint


En tamaño pequeño

El css

* {
  text-align: center;
    color: var(--blueprint12);
}

body {
    background-color: var(--blueprint2);
    font-family: 'Open Sans', sans-serif;
}

.contenedor {
      height: auto;
    width: 100%;
    max-width: 1000px;
    margin:0 auto;
}

.flexRow{
    display: flex;
    flex-wrap: wrap;
    background-color: var(--blueprint4);
    border: 1px solid var(--blueprint12);
}

.box {
    height: 430px;
    //min-width: 200px;
    flex-grow: 1;
}

.Column1 {
    flex-grow: 2;
    min-width: 300px;
    background-color: var(--blueprint6);
    border: 1px solid var(--blueprint12);
}

.Column2{
    flex-grow: 1;
    min-width: 150px;
    background-color: var(--blueprint6);
    border: 1px solid var(--blueprint12);
}

.contenedorFlexCol {
  height: 340px;
  max-height: 340px;
  margin:0 auto;
    background-color: var(--blueprint8);
    border: 1px solid var(--blueprint12);
}

.flexColumn {
    height: 370px;
    max-height: 370px;
    display: flex;
    flex-direction: column;
    background-color: var(--blueprint10);
    border: 1px solid var(--blueprint14);
}

.boxCol {
    flex-grow: 1;
}

section {
  background-color: var(--blueprint8);
  border: 1px solid var(--blueprint12);
}

article {
  background-color: var(--blueprint8);
  border: 1px solid var(--blueprint12);
}

h1 {
    color: var(--blueprint16);
}

header {
    background-color: var(--blueprint8);
    border: 1px solid var(--blueprint12);
}

nav {
    background-color: var(--blueprint8);
    border: 1px solid var(--blueprint12);
}

aside {
    height: auto;
    //background-image: url('/img/statistics1.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-blend-mode: difference;
    background-color: var(--blueprint8);
  border: 1px solid var(--blueprint12);
    transition: background-image 0.5s linear;
}

footer {
    clear: both;
    float: left;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--blueprint8);
    border: 1px solid var(--blueprint12);
}

fin texto.

jueves, 26 de abril de 2018

CSS FlexBox Lab






El Html


El CSS






.box con float: left;



.flex-container corregido con .flex-container:after {...}



El mismo resultado solamente con display: flex;


flex-grow
.box {flex-grow: 1 ...} abarcan todo el ancho
.one { flex-grow: 1 ...} one abarca todo el ancho respetando el min-width de .two y .tree que es 100px
.one { flex-grow: 1 ...}
.two { flex-grow: 2 ...} one abarca una unidad de espacio, two abarca dos unidades de espacio y respetan el min-width de .tree
.one { flex-grow: 1 ...}
.two { flex-grow: 2 ...}
.tree { flex-grow: 3 ...} one abarca una unidad de espacio, two abarca dos unidades de espacio y tree abarca tres unidades de espacio aproximadamente.

4,6,2
3,2,1

flex-shrink
.one {flex-shrink: 1 ...}
.one {flex-shrink: 1 ...}
.one {flex-shrink: 1 ...}


Encogido...


Podemos observar que el contenido del div es respetado y hace que no se encoga el tercer elemento.
con datos en tercer elemento

flex-wrap
.flex-container {
flex-wrap: wrap;
...}


Corregimos el espacio no abarcado por los elementos con
.box { flex-grow: 1; ...}



Con flex-wrap: wrap-reverser; se enrollan en sentido inverso.



flex-basis
.box con win-width: 300px, pone a los div en .box con un ancho fijo, el cual al encoger la ventana, hace que aparezca el scroll bar.

Al cambiarlo a flex-basis, ya no aparecera la barra de scroll.


Ahora le aplicamos flex-basis a los tres elementos .one, .two, .tree para que tenga un ancho inicial diferente a cada uno con flex-basis. Al no tener .box flex-grow, no abarcaran todo el ancho los tres elementos.
Ahora aplicamos flex-grow a los tres elementos por medio de su contenedor .box, lo que hace que abarque todo el ancho.


Se puede compactar el código si solo indicamos flex: 1 0 200px; donde el primer parametro indica flex-grow, el segundo flex-shrink, y el tercero el ancho inicial.



fin de texto.

lunes, 2 de abril de 2018

Heroku CalculatorWebService



C:\Users\Bext\Documents\NetBeansProjects\exercise\CalculatorWSAppMavenWebApp>heroku create
heroku-cli: Updating to 6.13.17-275c5ef... 11.9 MB/11.9 MB
Creating app... done, vast-dawn-97446
 !    ENOENT: spawn git ENOENT

C:\Users\Bext\Documents\NetBeansProjects\exercise\CalculatorWSAppMavenWebApp>heroku login
Enter your Heroku credentials:
Email: jalbertomarrod@gmail.com
Password: *********
Logged in as jalbertomarrod@gmail.com

C:\Users\Bext\Documents\NetBeansProjects\exercise\CalculatorWSAppMavenWebApp>heroku create
Creating app... done, immense-forest-31534
https://immense-forest-31534.herokuapp.com/ | https://git.heroku.com/immense-forest-31534.git

C:\Users\Bext\Documents\NetBeansProjects\exercise\CalculatorWSAppMavenWebApp>git push heroku master
Counting objects: 18, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (10/10), done.
Writing objects: 100% (18/18), 3.41 KiB | 0 bytes/s, done.
Total 18 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Java app detected
remote: -----> Installing OpenJDK 1.8... done
remote: -----> Installing Maven 3.3.9... done
remote: -----> Executing: mvn -DskipTests clean dependency:list install
remote:        [INFO] Scanning for projects...
remote:        [INFO] Downloading: https://repo.maven.apache.org/maven2/org/apache/maven/plugins/maven-compiler-plugin/3.1/maven-compiler-plugin-3.1.pom
remote:        [INFO] Downloaded: https://repo.maven.apache.org/maven2/org/apache/
heroku login
git clone https://github.com/heroku/java-getting-started.git
cd java-getting-started

heroku create
Creating warm-eyrie-9006... done, stack is cedar-14
http://warm-eyrie-9006.herokuapp.com/ | https://git.heroku.com/warm-eyrie-9006.git
Git remote heroku added

heroku create
Creating warm-eyrie-9006... done, stack is cedar-14
http://warm-eyrie-9006.herokuapp.com/ | https://git.heroku.com/warm-eyrie-9006.git
Git remote heroku added

heroku ps:scale web=1

heroku open

heroku logs --tail
2017-04-20T15:06:14.198559+00:00 heroku[web.1]: Starting process with command `java $JAVA_OPTS -Dserver.port=43161 -jar target/java-getting-started-1.0.jar`
2017-04-20T15:06:16.478043+00:00 app[web.1]: Setting JAVA_TOOL_OPTIONS defaults based on dyno size. Custom settings will override them.
2017-04-20T15:06:16.484066+00:00 app[web.1]: Picked up JAVA_TOOL_OPTIONS: -Xmx350m -Xss512k -Dfile.encoding=UTF-8
2017-04-20T15:06:19.396477+00:00 app[web.1]:   _    _                _
2017-04-20T15:06:19.396487+00:00 app[web.1]:  | |  | |              | |
2017-04-20T15:06:19.396488+00:00 app[web.1]:  

The Procfile in the example app you deployed looks like this:
web: java -jar target/java-getting-started-1.0.jar

heroku ps
=== web (Free): web: java -jar target/java-getting-started-1.0.jar (1)
web.1: up 2016/07/07 09:06:41 +0100 (~ 4m ago)

heroku ps:scale web=0

heroku ps:scale web=1

heroku run bash
Running `bash` attached to terminal... up, run.8963
~ $ ls

heroku logs
2013-02-11T15:19:10+00:00 heroku[router]: at=info method=GET path=/articles/custom-domains host=mydemoapp.heroku.com fwd=74.58.173.188 dyno=web.1 queue=0 wait=0ms connect=0ms service=1452ms status=200 bytes=5783
2013-02-11T15:19:10+00:00 app[web.2]: Started GET "/" for 1.169.38.175 at 2013-02-11 15:19:10 +0000
2013-02-11T15:19:10+00:00 app[web.1]: St

heroku logs -n 200

heroku logs --tail

heroku logs --dyno router
2012-02-07T09:43:06.123456+00:00 heroku[router]: at=info method=GET path="/stylesheets/dev-center/library.css" host=devcenter.heroku.com fwd="204.204.204.204" dyno=web.5 connect=1ms service=18ms status=200 bytes=13
2012-02-07T09:43:06.123456+00:00 heroku[router]: at=info method=GET path="/articles/bundler" host=devcenter.heroku.com fwd="204.204.204.204" dyno=web.6 connect=1ms service=18ms status=200 bytes=20375
 
heroku logs --source app
2012-02-07T09:45:47.123456+00:00 app[web.1]: Rendered shared/_search.html.erb (1.0ms)
2012-02-07T09:45:47.123456+00:00 app[web.1]: Completed 200 OK in 83ms (Views: 48.7ms | ActiveRecord: 32.2ms)
2012-02-07T09:45:47.123456+00:00 app[worker.1]: [Worker(host:465cf64e-61c8-46d3-b480-362bfd4ecff9 pid:1)] 1 jobs processed at 23.0330 j/s, 0 failed ...
2012-02-07T09:46:01.123456+00:00 app[web.6]: Started GET "/articles/buildpacks" for 4.1.81.209 at 2012-02-07 09:46:01 +0000
 
heroku logs --source app --dyno worker
2012-02-07T09:47:59.123456+00:00 app[worker.1]: [Worker(host:260cf64e-61c8-46d3-b480-362bfd4ecff9 pid:1)] Article#record_view_without_delay completed after 0.0221
2012-02-07T09:47:59.123456+00:00 app[worker.1]: [Worker(host:260cf64e-61c8-4

Deploy to Heroku

Commit your changes to Git:
git init
git add .
git commit -m "Ready to deploy"
Create the app:
heroku create
Creating empty-fire-9222... done, stack is cedar-14
http://empty-fire-9222.herokuapp.com/ | git@heroku.com:empty-fire-9222.git
Git remote heroku added
Deploy your code:
git push heroku master
Counting objects: 66, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (31/31), done.
Writing objects: 100% (66/66), 15.74 KiB, done.
Total 66 (delta 10), reused 30 (delta 9)
 
-----> Heroku receiving push
-----> Java app detected
-----> Installing Maven 3.0.3..... done
-----> executing /app/tmp/repo.git/.cache/.Maven/bin/mvn -B -Duser.home=/tmp/build_14lc6nws0m7oc -Dmaven.repo.local=/app/tmp/repo.git/.cache/.m2/repository -DskipTests=true clean install
[INFO] Scanning for projects...

CREATING A HEROKU REMOTE
heroku create
Creating falling-wind-1624... done, stack is cedar-14
http://falling-wind-1624.herokuapp.com/ | https://git.heroku.com/falling-wind-1624.git
Git remote heroku added
 
git remote -v
heroku  https://git.heroku.com/falling-wind-1624.git (fetch)
heroku  https://git.heroku.com/falling-wind-1624.git (push)

heroku git:remote -a falling-wind-1624
Git remote heroku added.


jQuery Lab



https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developers.google.com/speed/libraries/#jquery
https://developers.google.com/speed/libraries/#jquery-ui

Ref: Derek Banas

jQuery




<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JQuery Tutorial</title>

  <style type="text/css">
  .highlight { background-color: yellow; }
  </style>

  <!-- Get the JQuery library
  Jquery 1 & 2 are the same except JQuery 2 doesn't
  support IE 6, 7, and 8 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="wrapper">

<h1>Random Stuff</h1>

<p id="p_one"><img src="ntt-logo.png" id="logo2" alt="NTT Logo" height="180" width="180">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>Aenean pretium</em>, ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula. <a href="#">Morbi finibus</a> auctor ipsum vel tempus. Nullam gravida leo ac iaculis pretium. <b>In pretium varius nisi</b>, quis tristique ipsum semper vitae. Mauris eu aliquet odio. Pellentesque tristique sem turpis, id gravida nunc consequat vel. <a href="#">Nullam nec condimentum magna</a>. Sed dignissim interdum risus ac mattis. In hac habitasse platea dictumst. Vivamus placerat tristique vestibulum. Pellentesque quis eleifend nisl. Quisque mollis aliquam enim eu ullamcorper.</p>
<p id="p_two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pretium, ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula. <a href="mailto:derekbanas@verizon.net">Morbi finibus</a> auctor ipsum vel tempus. Nullam gravida leo ac iaculis pretium. In pretium varius nisi, quis tristique ipsum semper vitae. Mauris eu aliquet odio. Pellentesque tristique sem turpis, id <a href="http://google.com">gravida nunc consequat</a> vel. Nullam nec condimentum magna. Sed dignissim interdum risus ac mattis. <a href="http://www.newthinktank.com/wordpress/PersonalityTest.pdf">In hac habitasse</a> platea dictumst. Vivamus placerat tristique vestibulum. Pellentesque quis eleifend nisl. Quisque mollis aliquam enim eu ullamcorper. <a href="http://www.newthinktank.com/wordpress/PersonalityTest.pdf">Otro Agregado por mi</a></p>
esto ya no esta en el link, pero visite <a href="http://jalbertomr.blogspot.mx/">enlace a holocron</a>

<p id="p_three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Aenean pretium,</i> ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula.</p>

<table id="tableData">
<caption>Baseball</caption>
<thead>
<tr>
<td colspan="4">Best Baseball Players</td>
</tr>
</thead>
<tfoot>
<tr><td colspan="4">* Hall of Fame</td></tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td>Average</td>
<td>RBIs</td>
<td>Homeruns</td>
</tr>
<tr>
<td><a href="#">Hank Aaron*</a></td>
<td>.305</td>
<td>2297</td>
<td>755</td>
</tr>
<tr>
<td><a href="#">Babe Ruth*</a></td>
<td>.342</td>
<td>2214</td>
<td>714</td>
</tr>
<tr>
<td><a href="#">Barry Bonds</a></td>
<td>.298</td>
<td>1996</td>
<td>762</td>
</tr>
</tbody>
</table>

<h2 id="bestSelling">Best Selling Childrens Books</h2>

<ol id="oListTypes">
<li>Harry Potter
<ol id="oListIndent">
<li>and the Sorcerer's Stone</li>
<li>and the Half-Blood Prince</li>
<li>and the Chamber of Secrets</li>
<li>Prisoner of Azkaban</li>
<li name="best_book">and the Goblet of Fire</li>
<li>and the Order of the Phoenix</li>
<li>and the Deathly Hallows</li>
</ol>
</li>
<li>The Very Hungry Caterpillar</li>
</ol>

<input type="text" id="yourName" size="50">

<input type="text" id="listStuff" size="50"><br />

<h2 id="trackEvents">Tracking Events</h2>

Mouse Click : X : <input type="text" id="mClickXPos">
Y : <input type="text" id="mClickYPos"><br />

Mouse Move : X : <input type="text" id="mMoveXPos">
Y : <input type="text" id="mMoveYPos"><br />

Key Pressed : <input type="text" id="keyPressed"><br />

<span id="formEvent">Form Event</span> : <input type="text" id="inputFormEvent"><br /><br />

<img src="1.jpg" id="accident" alt="accident">

<div id="jsonData"></div>

<button type="button" id="getData">Get Data</button>

<script type="text/javascript">

// When the document is ready execute the JQuery
$("document").ready(function() {

    //cambiar atributos
    // # para ids . para clases
    $("#wrapper").css("width", 500)
    $("#wrapper").css("margin", "auto")
    $("#logo2").css("float","left")
    $("#p_two").css("color","purple")

    //para pasar multiples argumentos
    $("#p_two").css({
        "background":"url('repeatBkgrnd.png') repeat-y",
        "color":"gray"
    })

    //seleccionar elementos por tag
    $("a").css("color","red")

    //seleccionar tags solo dentro de otros tags, clases, ids
    $("#tableData a").css("color","green")

    //seleccionar un elemento a solo despues de un elemento em
    $("em + a").css("color","orange")

    //seleccionar elementos hijos dentro de elementos
    $("p > em").css("color", "gray")

    //seleccionar el tercer elemento en una lista
    $("#oListIndent li:nth-child(3)").css("color","red")

    //cambiar el contenido del elemento li con atributo name
    $("li[name]").html('cambiado el html del li con atributo name')

    //cambiar el valor de un input
    $("input[type='text']#yourName").val("Beto")

    //seleccionar elementos que contengan un valor (*=)
    $("a[href*='google']").css("font-weight","bolder")

    //seleccionar imagen cuyo alt empieze con NTT y cambiar atributos
    $("img[alt^='NTT']").css({
        "border-color":"black",
        "border-width":"1px",
        "border-style":"solid"
    })

    //seleccionar elemento(s) a cuyo href empiece con ...
    $("a[href^='http://g']").css("color","cyan");

    //seleccionar  elemento(s) a cuyo href empiece con ...
    $("a[href^='mailto:']").css("color","yellow");

    //seleccionar elemento(s) img cuya alt empiece con NTT cambiando varios atributos
    $("img[alt^='NTT']").width(150).height(150);

    //seleccionar elemento(s) cuya href termine con pdf y cambiar color
    $("a[href$='pdf']").css("color", "rgb(247, 191, 190)");

    //seleccionar renglones de tabla even (0,2,4) y odd (1,3,5) cambiar su color
    $("#tableData tr:even").css("background-color", "#FFFDD0" );
    $("#tableData tr:odd").css("background-color", "#F0F8FF");

    //seleccionar el primer elemento match de tabla
    $("#tableData tr:first").css({
        "background-color": "#001A57",
        "color": "white"
    });

    $("#tableData tr:last").css({
        "background-color" : "#FFC0DB",
        "color": "white"
    });

    //seleccionar elementos que no continene la palabra and en ellos
    $("#oListTypes li:not(:contains(and))").css("color","orange");

    //selectiona elementos a que contengan la palabra holocron
    $("a:contains(holocron)").css("color", "blue");

    //seleccionar elementos (p) que contenga otro elemento (i)
    $("p:has(i)").hide();

    //alert($("p:has(i)").html());

    $("p:has(i)").html("<i>elemento i</i>").show();

    $("p:has(i)").append(" agregado al final con append ");
    $("p:has(i)").prepend(" agregado al inicio con prepend ");

    $("p:has(i)").before("<p id='before_p'>un parrafo antes de p:has(i) </p>");
    $("p:has(i)").after("<p id='after_p'>un parrefo despues de p:has(i) </p>");

    $("#after_p").click(function(){
        $(this).remove();
    });

    $("#before_p").click(function(){
        $(this).replaceWith("<p>Este parrafo remplaza al anterior \' esta comita se puso con \\'</p>")
    })

    //hacer una tarea por cada elemento seleccionado
    $("#oListIndent li").each(function(index){   //index no es necesario
        //ir acumulando el contenido del input listStuff
        var inputListStuff = $("#listStuff").val();

        // agrega a listStuff el text del elemento li en turno
        $("#listStuff").val(inputListStuff + ', ' + $(this).text());
    })

    $("#oListIndent li").addClass("Harry_PotterClass");

    $(".Harry_PotterClass").css("color","#36454F");

    $("#oListIndent li").click(function(){
        $(this).toggleClass("highlight");

        var bgcolor =  $(this).css("background-color");

        $("input[type='text']#yourName").val(bgcolor);
    });

    $("#logo2").click(function() {
        var imgName = $(this).attr("src");
        //alert(imgName);
        $("input[type='text']#yourName").val(imgName);
    })

    $("#logo2").mouseover(function(){
        $("#logo2").attr("src","ntt-logo-horz.png");
    });

    $("#logo2").mouseout(function(){
        $("#logo2").attr("src","ntt-logo.png");
    })

    $("#logo2").dblclick(function(){
        $(this).attr("src","ntt-logo-plastic.png");
    });

    $("h2").hover(function(){
        var origColor = $(this).attr("color");
        $(this).css("color","green");
    }, function(){
        $(this).css("color","black");
    });

    $(document).click(function(e){
        $("#mClickXPos").val(e.pageX);
        $("#mClickYPos").val(e.pageY);
    });

    $(document).mousemove(function(e){
        $("#mMoveXPos").val(e.screenX);
        $("#mMoveYPos").val(e.screenY);
    });

    $(document).keypress(function(e){
        $("#keyPressed").val(String.fromCharCode(e.which));
    });

    $("#inputFormEvent").blur(function(){
       $("#formEvent").text("Input Form Event desenfocado");
    });

    $("#inputFormEvent").change(function(){
        $("#formEvent").text("Input Form Event change");
    });

    $("#inputFormEvent").focusin(function(){
        $("#formEvent").text("Input Form Event Enfocado");
    });

    $("#inputFormEvent").select(function(){
        $("#formEvent").text("Input Form Event Seleccionada");
    });

    function ShowWhatTouched(e){
        alert(e.data.message);
    }

    var bestSellMsg = { message: "Best Selling Tocado"};
    var trackEvents = { message: "Track Events Tocado"};

    //$("#bestSelling").on("mouseover", bestSellMsg, ShowWhatTouched);
    //$("#trackEvents").on("mouseover", trackEvents, ShowWhatTouched);

    var accidentImages = ["1.jpg","2.jpg","3.jpg","4.jpg"]
    var indexImg = 0;

    $("#accident").click(function(){
        var imagen = accidentImages[indexImg];

        indexImg++;
        if (indexImg > 3 ){ indexImg = 0}

        $(this).attr("src", imagen);
    })

    /*
    $("#p_one").click(function(){
        $(this).hide();
    });

    $("#p_two").click(function(){
        $(this).fadeOut(2000);

        $("#p_one").fadeToggle(2000);
    });

    $("td:contains('Bonds')").click( function(){
        $("tr:has(td:contains('Bonds'))").slideUp(1000);
    });

    $("td:contains('Hall')").click( function(){
        $("tr:has(td:contains('Bonds'))").slideDown(1000);
    });

    */
    $("#p_one").click(function(){
        $(this).css("position", "relative");

        $("#p_one").animate({
            left: 300,
            opacity: .5,
            'font-size': "22px",
            width: 300
        }, 2000, "easeInQuad", function(){alert("Hecho!");});
    });


}); <!-- End of JQuery Code -->

</script>

</div> <!-- End of wrapper -->

<!-- Most common CSS attributes
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  background, background-attachment, background-color, background-image, background-repeat, border, border-bottom, border-color, border-style, border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-width, box-shadow, color, columns, direction, float, font-family, font-size, font-style, font-weight, height, letter-spacing, line-height, list-style-type, list-style-image, list-style-position, margin, margin-bottom, margin-top, margin-right,margin-left, opacity, padding-bottom, padding-top, padding-right, padding-left, text-align, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-indent, text-orientation, text-shadow, text-transform, vertical-align, visibility, width, word-spacing, z-index
  -->
</body>
</html>

jQueryUI






<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JQuery Tutorial</title>

  <style type="text/css">
  .highlight { background-color: yellow; }
  #wrapper {
    width: 500px;
    margin: auto;
  }
  .ui-menu{
    width: 15em;
  }
  #cartDiv{
    border-style: solid;
    border-width: 5px;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  <!-- Add the JQuery UI CSS -->
  <link href="css/jquery-ui.min.css" rel="stylesheet">

  <!-- Add the JQuery UI JS file -->
  <script src ="js/jquery-ui.min.js" > </script>

<body>
<div id="wrapper">

<ul id="shMenu">
  <li><a href="JavaScript:void(0)">X Men</a>
    <ul>
      <li><a href="JavaScript:void(0)">Angel</a></li>
      <li><a href="JavaScript:void(0)">Cyclops</a></li>
      <li><a href="JavaScript:void(0)">Beast</a></li>
      <li><a href="JavaScript:void(0)">Marvel Girl</a></li>
      <li><a href="JavaScript:void(0)">Iceman</a></li>
    </ul>
  </li>
  <li><a href="JavaScript:void(0)">Defenders</a>
    <ul>
      <li><a href="JavaScript:void(0)">Hulk</a></li>
      <li><a href="JavaScript:void(0)">Doctor Strange</a></li>
      <li><a href="JavaScript:void(0)">Namor</a></li>
      <li><a href="JavaScript:void(0)">Silver Surfer</a></li>
    </ul>
  </li>
</ul><br />

<div id="accordion">
<h4>Batman</h4>
<div>
Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 (May 1939). Originally named "the Bat-Man", the character is also referred to by such epithets as the "Caped Crusader",the "Dark Knight", and the "World's Greatest Detective".
</div>
<h4>Flash</h4>
<div>
The Flash is a fictional superhero appearing in American comic books published by DC Comics. Created by writer Gardner Fox and artist Harry Lampert, the original Flash first appeared in Flash Comics #1 (January 1940).
</div>
<h4>Superman</h4>
<div>
Superman is a fictional superhero appearing in American comic books published by DC Comics. The character is considered an American cultural icon. The Superman character was created by writer Jerry Siegel and artist Joe Shuster in 1933; the character was sold to Detective Comics, Inc. (later DC Comics) in 1938. Superman first appeared in Action Comics #1 (June 1938) and subsequently appeared in various radio serials, newspaper strips, television programs, films, and video games. With the character's success, Superman helped to create the superhero genre and establish its primacy within the American comic book.
</div>
</div><br />

<div id="shTabs">
<ul>
  <li><a href="#ironman">Iron Man</a></li>
  <li><a href="#hulk">Hulk</a></li>
  <li><a href="#thor">Thor</a></li>
  <li><a href="#spiderman">Spiderman</a></li>
</ul>
<div id="ironman">
Iron Man (Tony Stark) is a fictional superhero appearing in American comic books published by Marvel Comics, as well as its associated media. The character was created by writer and editor Stan Lee, developed by scripter Larry Lieber, and designed by artists Don Heck and Jack Kirby. He made his first appearance in Tales of Suspense #39 (cover dated March 1963).
</div>
<div id="hulk">
The Hulk is a fictional superhero appearing in American comic books published by Marvel Comics. The character was created by Stan Lee and Jack Kirby, and first appeared in The Incredible Hulk #1 (May 1962). Throughout his comic book appearances, the Hulk is portrayed as a large green humanoid that possesses immense superhuman strength and great invulnerability, attributes that grow more potent the angrier he becomes. Hulk is the alter ego of Bruce Banner, a socially withdrawn and emotionally reserved physicist who physically transforms into the Hulk under emotional stress and other specific circumstances at will or against it; these involuntary transformations lead to many complications in Banner's life.
</div>
<div id="thor">
Thor is a fictional superhero that appears in American comic books published by Marvel Comics. The character, based on the Norse mythological deity of the same name, is the Asgardian god of thunder and possesses the enchanted hammer Mjolnir, which grants him the ability of flight and weather manipulation amongst his other superhuman attributes.
</div>
<div id="spiderman">
Spider-Man is a fictional superhero appearing in American comic books published by Marvel Comics existing in its shared universe. The character was created by writer-editor Stan Lee and writer-artist Steve Ditko, and first appeared in the anthology comic book Amazing Fantasy #15 (Aug. 1962) in the Silver Age of Comic Books. Lee and Ditko conceived the character as an orphan being raised by his Aunt May and Uncle Ben, and as a teenager, having to deal with the normal struggles of adolescence in addition to those of a costumed crime-fighter.
</div>
</div><br />

<div id ="customDialog" title ="Custom Dialog">
<p>A random dialog box that contains important information</p>
</div>

<a href="JavaScript:void(0)" id="openDialog" title="Open Dialog Box">Open Dialog</a><br /><br />

<form action="#" id="sampForm">

Present:<br />
<select name="present" id="present">
<option>Toy</option>
<option>Video Game</option>
<option>Book</option>
<option>Money</option>
</select><br />

Birthday:<br />
<input type="text" name="birthday" id="birthday"><br /><br />

<p class="numOfPresents">Number of Presents</p>

<fieldset>
    <legend>Number of Presents</legend>
    <div id="radioPresents">
      <input type="radio" id="onePresent" name="presents" checked="checked">
      <label for="onePresent">1</label>

      <input type="radio" id="twoPresent" name="presents">
      <label for="twoPresent">2</label>

      <input type="radio" id="threePresent" name="presents">
      <label for="threePresent">3</label>
    </div>
  </fieldset>

<br />

<input type="button" id="randButton" value="Click Me"><br /><br />

<div id="cartDiv">
<img src="cart.png" alt="Shopping Cart" id="cart">
</div>

<img src="toy1.png" alt="Bear" id="toy1" class="toy">

<img src="toy2.png" alt="Duck" id="toy2" class="toy">

<img src="toy3.png" alt="Batman" id="toy3" class="toy">


</form>

<script type="text/javascript">

$(document).ready(function() {

  $("#shMenu").menu({
      position: {
          my: "center top",
          at: "center bottom"
      }
  });

  $("#accordion").accordion({
      animate: 300,
      active: 0,
      collapsible: true,
      event: "click",
      heightStyle: "content"
  });

  $("#shTabs").tabs({
      event: "click",
      show: "fadeIn",
      hide: "fadeOut",
      active: 3,
      collapsible: true,
      heightStyle: "content"   /*"auto"*/
  });

  $("#customDialog").dialog({
      draggable: true,
      resizeable: false,
      height: 300,
      width: 300,
      modal: true,
      position: {
          my: 'center top',
          at: 'center bottom',
          of: '#openDialog'
      },
      show: 300,
      hide: 300,
      autoOpen: false,
      buttons: {
          "OK": function(){
              $("#openDialog").html("Se presiono OK");
              $(this).dialog("close");
          },
          "CANCELAR": function(){
              $("#openDialog").html("Se presiono CANCELAR");
              $(this).dialog("close");
          }
      }
  });

  $("#openDialog").click(function(){
      $("#customDialog").dialog("open");
  });

  //$([title]).toolTip();

  $("#present").selectmenu({
    width: 300
  });

  $("#birthday").datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "MM dd, yy",
      numberOfMonths: 1,
      maxDate: 365,
      minDate: -3650
  });

  $("#radioPresents").buttonset();

  $("#randButton").button();

  $("#sampForm").draggable();

  $("#toy1").draggable();
  $("#toy2").draggable();
  $("#toy3").draggable();

  $("#cartDiv").droppable({
    activeClass: "highlight",
      hoverClass: "hoverDroppable",
      drop: function(event, ui){
          ui.helper.hide("hide");

          var itemAlt = $(ui.draggable).attr("src");

          alert("En el carrito: " + itemAlt);
      },
      accept: ".toy",
      disabled: false,
      activate: function(event, ui){
          $("#cartMsg").remove();
          $(this).append("<span id='cartMsg'>Pon el juguete aqui!</span>")
      },
      deactivate: function(event, ui){
          $("#cartMsg").remove();
          $(this).append("<span id='cartMsg'>Se que lo quieres!</span>")
      },
      over: function(event, ui){
          $("#cartMsg").remove();
          $(this).append("<span id='cartMsg'>Sueltalo!</span>")
      },
      out: function(event, ui){
          $("#cartMsg").remove();
          $(this).append("<span id='cartMsg'>Nooooooo</span>")
      }
  });


}); // End of JQuery

</script>

</div> <!-- End of Wrapper -->
</body>
</html>

https://github.com/jalbertomr/jQueryLab.git