ADD examples

esri-es · Jan 21, 2022 · 3241439 · 3241439
commit 3241439
Show file tree

Hide file tree

Showing 10 changed files with 360 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# Introducción a Dojo
+El objetivo de este repositorio se recopilan distintos ejercicios para entender los conceptos más básicos de la librería Dojo.
diff --git a/ejemplo1.html b/ejemplo1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejemplo 1</title>
+
+    <script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/path/to/blank.html'"
+    src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
+
+    <script>
+        require([
+            "dojo/dom",
+            "dojo/fx",
+            "dojo/domReady!"
+        ], function(dom, fx) {
+            var el = dom.byId("contenedor");
+            el.innerHTML = "Hola Mundo!";
+            // ... but now, with an animation!
+            fx.slideTo({
+                node: el,
+                top: 100,
+                left: 100
+            }).play();
+        })
+    </script>
+</head>
+<body>
+    <div id="contenedor"></div>
+</body>
+</html>
diff --git a/ejemplo2.html b/ejemplo2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejemplo 2</title>
+
+    <script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/path/to/blank.html'"
+    src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
+
+    <script>
+        require([
+            "dojo/dom-construct",
+            "dojo/fx",
+            "dojo/domReady!"
+        ], function(domConstruct, fx) {
+            var n = domConstruct.create("ul", { innerHTML:"Hola Mundo!"}, "contenedor");
+            fx.slideTo({
+                node: n,
+                top: 100,
+                left: 300
+            }).play()
+        })
+    </script>
+</head>
+<body>
+    <div id="contenedor"></div>
+</body>
+</html>
diff --git a/ejemplo3.html b/ejemplo3.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejemplo 3</title>
+
+    <script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/path/to/blank.html'"
+    src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
+
+    <script>
+        require([
+            "dojo/dom",
+            "dojo/on",
+            "dojo/fx",
+            "dojo/_base/connect",
+            "dojo/domReady!"
+        ], function(dom, on, fx, connect) {
+           var el = dom.byId("contenedor");
+           el.innerHTML = "Haz click!";
+           dojo.connect(el, "onclick", function(evt) {
+               fx.slideTo({
+                   node: el,
+                   top: 100,
+                   left: 300
+               }).play();
+           });
+        });
+    </script>
+</head>
+<body>
+    <div id="contenedor"></div>
+</body>
+</html>
diff --git a/ejemplo4.html b/ejemplo4.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejemplo 4</title>
+
+    <script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/path/to/blank.html'"
+    src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
+
+    <script>
+        require([
+            "dojo/dom",
+            "dojo/on",
+            "dojo/fx",
+            "dojo/domReady!"
+        ], function(dom, on, fx) {
+           var el = dom.byId("contenedor");
+           el.innerHTML = "Haz click!";
+           // Establecemos: 
+           // - el nodo sobre el que se realizará el evento,
+           // - el tipo de evento
+           // - la función que desencadena (callback)
+          on(el, "click", function(evt) {
+               fx.slideTo({
+                   node: el,
+                   top: 100,
+                   left: 300
+               }).play();
+           });
+        });
+    </script>
+</head>
+<body>
+    <div id="contenedor" data-dojo-event="onclick:_onClick()"></div>
+</body>
+</html>
diff --git a/ejemplo5.html b/ejemplo5.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejemplo 5</title>
+
+    <script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/path/to/blank.html'"
+    src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
+
+    <script>
+        require([
+            "dojo/dom",
+            "dojo/on",
+            "dojo/dom-style",
+            "dojo/_base/lang",
+            "dojo/mouse",
+            "dojo/domReady!"
+        ], function(dom, on, domStyle, lang, mouse) {
+            var myButton = dom.byId("myButton");
+            var myDiv = dom.byId("myDiv");
+
+            on(myButton, "click", function(evt) {
+                domStyle.set(myDiv, "backgroundColor", "blue");
+            });
+
+            on(myDiv, mouse.enter, function(evt) {
+                domStyle.set(myDiv, "backgroundColor", "red");
+            });
+
+            on(myDiv, mouse.leave, function(evt) {
+                domStyle.set(myDiv, "backgroundColor", "");
+            });
+        });
+    </script>
+</head>
+<body>
+    <button id="myButton">Click me!</button>
+    <div id="myDiv">Hover over me!</div>
+</body>
+</html>
diff --git a/ejemplo6.html b/ejemplo6.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejemplo 6</title>
+
+    <script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/path/to/blank.html'"
+    src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
+    <script>
+        require([
+            "dojo/dom-construct",
+            "dojo/on",
+            "dojo/domReady!"
+        ], function(domConstruct, on) {
+            var n = domConstruct.create("ul", { innerHTML: "Hola Mundo!" }, "contenedor");
+
+            on(n, "click", function() {
+                var a = domConstruct.create("ul", { innerHTML: "Hola de nuevo" }, "contenedor");
+                on (a, "click", function() {
+                    var b = domConstruct.create("ul", { innerHTML: "Chao!" }, "contenedor");
+                });
+            });
+        });
+    </script>
+
+</head>
+<body>    
+    <div id="contenedor"></div>
+
+
+</body>
+</html>
diff --git a/ejemplo7.html b/ejemplo7.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejemplo 7</title>
+
+    <script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/path/to/blank.html'"
+    src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
+
+    <script>
+        require([
+            "dojo/dom",
+            "dojo/on",
+            "dojo/fx",
+            "dojo/domReady!"
+        ], function(dom, on, fx) {
+            var el = dom.byId("contenedor");
+            el.innerHTML = "Click aquí!";
+
+            on(el, "mouseover", function(evt) {
+                fx.slideTo({
+                    node: el,
+                    top: Math.floor((Math.random() * 1000) + 1),
+                    left: Math.floor((Math.random() * 1000) + 1)
+                }).play()
+            });
+
+        });
+    </script>
+
+</head>
+<body>    
+    <div id="contenedor"></div>
+</body>
+</html>
diff --git a/ejemplo8.html b/ejemplo8.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Ejemplo: dojo/request</title>
+		<style media="screen">
+			pre {
+				height:25em;
+				width:450px;
+				overflow:auto;
+			}
+
+			label {
+				font-weight:bolder;
+				display:block;
+			}
+
+			#resultDiv {
+				margin:15px 0;
+				padding:5px;
+				width:25em;
+			}
+
+			.error {
+				color:#DF0101;
+				font-weight:bolder;
+			}
+
+			.success {
+				color:#186421;
+			}
+
+			.ready {
+				color:#062093;
+			}
+
+			.hint {
+				font-weight:bolder;
+				background-color:#ff0;
+			}
+
+			dt {
+				font-weight:bolder;
+			}
+
+			.json {
+				overflow:scroll;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>Ejemplo: dojo/request</h1>
+		<p>Haz clic para comprobar cómo trabaja dojo/request/xhr.</p>
+		<div>
+			<button id="textButton">Recupera el texto</button>
+		</div>
+		<br /><br />
+		<div id="resultDiv">
+		</div>
+		<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
+		<script>
+			require(["dojo/dom", "dojo/on", "dojo/request", "dojo/domReady!"],
+				function(dom, on, request){
+					// Results will be displayed in resultDiv
+					var resultDiv = dom.byId("resultDiv");
+
+					// Attach the onclick event handler to the textButton
+					on(dom.byId('textButton'), "click", function(evt){
+						// Request the text file
+						request.get("/Seminario_Dojo/dojo/request/example_text.txt").then(
+							function(response){
+								// Display the text file content
+								resultDiv.innerHTML = "<pre>" + response + "</pre>";
+							},
+							function(error){
+								// Display the error returned
+								resultDiv.innerHTML = "<div class=\"error\">" + error + "<div>";
+							}
+						);
+					});
+				}
+			);
+		</script>
+	</body>
+</html>
diff --git a/holaMundo.html b/holaMundo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hola Mundo</title>
+
+    <script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/path/to/blank.html'"
+    src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
+
+    <script>
+        require([
+            "dojo/dom",
+            "dojo/domReady!"
+        ], function(dom) {
+            var el = dom.byId("contenedor");
+            el.innerHTML = "Hola Mundo!";
+        })
+    </script>
+</head>
+<body>
+    <div id="contenedor"></div>
+</body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Introducción a Dojo
		El objetivo de este repositorio se recopilan distintos ejercicios para entender los conceptos más básicos de la librería Dojo.