Entwicklung multimedialer Anwendungen

(1)

Fachbereich AI, Entwicklung multimedialer Anwendungen 1

Entwicklung multimedialer Anwendungen

Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm

Hochschule Harz

FB Automatisierung und Informatik

mwilhelm@hs-harz.de

http://www.miwilhelm.de

Raum 2.202

Tel. 03943 / 659 338

Inhalt

1. Einleitung

2. Auszeichnungs-Tags / Semantische Elemente 3. Multimedia (Audio, Video)

4. CSS3 (Design) 5. SVG / Canvas 6. jQuery

(2)

Javascript-Frameworks

Script.aculo.us

• http://script.aculo.us

^GWT

• http://code.google.com/webtoolkit

^YUI

• http://developer.yahoo.com/yui

^Dojo

• http://www.dojotoolkit.org

^jQuery

• http://jquery.com

^{Ext JS}

• http://www.extjs.com

^MooTools

• http://mootools.net

jQuery

^Entwickler

• John Resig

^Hauptbasis

• CSS-Selektoren

Ist ein Framework

• dynamische Änderung eines oder mehrerer Elemente

• Vereinfachung der Befehle

• Keine Unterscheidung zwischen IE und „the rest“

• Verschachtelung von Befehlen (à la Pipe)

• Interne Schleifen

• Popupmenüs, Tab- Tree-Navigation, Akkordeon

(3)

jQuery

Ist ein UI-Framework

• Erlaubt neue UI-Elemente

• Kalender

Vereinfachte Web_Programmierung mobile/desktop

jQuery-Plugin

• viele Plugin erleichtern die Entwicklung

Grid-Layout mit jQuery-Grid-Plugin

Mauerhandwerk mit jQuery

• Plugin „Masonry“

• Layout à la GridBagLayout

jQuery-Quellen: Aktuelle Version: 2.1.4

^Download

• https://jsquery.com

• https://jsquery.com/download

^{Version 1}

• Unterstützt IE 6,7,8

^{Version 2}

• Keine Unterstützung von IE 6,7,8

Compress-Version

• http://code.jquery.com/jquery-2.1.4.min.js

Uncompressed-Version

(4)

jQuery-Quellen einbinden

^lokal

• <script type="text/javascript" src="js/jquery-2.1.4.min.js" />

^lokal

• <script type="text/javascript" src="js/jquery.min.js" />

^dynamisch

• <script type="text/javascript" >

• google.load("jquery“,"2.1.4");

• </script>

^dynamisch

• <script type="text/javascript" >

• google.load("jquery“,"2.1.4", {umcompressed:true});

• </script>

jQuery-Quellen einbinden

lokal und dynamisch

• <script type="text/javascript"

• google.load("jquery“,"2.1.4");

• </script>

• <script >

• window.jquery ||

• document.write('<script src="js/jquery.min.js" />');

• </script>

(5)

Document-Object-Modell (Dom-Baum)

window.onload = function() {

"use strict;"

root = document.documentElement;

var stufe=1;

output='';

search(stufe, root);

editorId = document.getElementById('editorId');

editorId.value=output;

} // onload

function log(item) { console.log(item);

output+=item+'\n';

}

Document-Object-Modell (Dom-Baum)

function search(stufe, element) {

"use strict;"

var rand='';

for (var i=0; i<stufe; i++) rand=rand+' ';

log(rand+'element: '+element.nodeName);

log(rand+' Anzahl childNodes.length: '+element.childNodes.length);

log(rand+' Anzahl children.length: '+element.children.length);

log(rand+' #childNodes: '+element.childElementCount);

for (var i=0; i<element.children.length;i++) { search(stufe+1, element.children[i]);

}

if (element.children.length==0 && element.nodeName!='script') {

(6)

Document-Object-Modell (Dom-Baum)

•html

•head

•title / meta

•script

•body

•h1

•arcticle

•section

•arcticle

•article

•br

•textarea

•element: html

• element: head

• element: title

• element: meta

• element: link

• element: script

• element: body

• element: h1

• element: article

• element: section

•InnerHTML:

•hier steht die 1. section

•

Dom-Baum

(7)

Einstiegsbeispiele

Alle Befehle werden mit dem $() eingegeben

^Beispiele:

• $('p') alle p-Elemente der Seite

• $('div') alle div-Elemente der Seite

• $('h3') alle h3-Elemente der Seite

Zusammengesetzte Beispiele:

• $('#box p') alle p-Elemente in dem #box-Abschnitt

• $('.box p') alle p-Elemente in einer box-class

Beispiele mit Aktionen:

• $('p').addClass("green") alle p-Elemente erh. den Selektor green

• $('p').removeClass("green")

• $('#box p').removeClass("green")

Befehle: http://www.w3schools.com/jquery/

^Selektor:

• $('p')

• $('#box p') alle p-Elemente in dem #box-Abschnitt

• $('.box p') alle p-Elemente in einer box-class

^HTML:

• Get: text(), html(), val(): $("#test").text()

• Set text(), html(), val(): $("#test").text("a");

• Add: append, prepend, after, before

$("p").append("Some appended text.");

• Remove: remove / empty

$("html").removeClass("no-js");

(8)

Befehle

^Events

• click

• dblclick

• mousenter

• mouseleave

• $("#hide").click(function(){

$("p").hide();

});

• $("p").click(function(){

// action goes here!!

});

• $("#p1").mouseenter(function(){

alert("You entered p1!");

});

• $("#p1").mouseleave(function(){

alert("Bye! You now leave p1!");

});

Befehle

Traversierung

• Ancestors Vorfahr

• parent

• parent, parents, parentUntil

• $("span").parents();

• $("span").parents("ul");

• $("span").parentsUntil("div");

• Descendants

• children

• $("div").children();

• $("div").children("p.1");

• find

• $("div").find("span");

• $("div").find("*"); alle Elemente ab div

(9)

Befehle

Traversierung

• Siblings Geschwister

• siblings, next, nextAll, nextUntil, prev, prevAll, prevUntil

• $("h2").siblings(); $("h2").next();

• $("h2").nextAll(); $("h2").nextUntil("h6");

• Filtering

• first, last, eq, filter

• $("div p").first();

• $("div p").last();

• $("p").eq(1);

• $("p").filter(".intro"); alle p mit class intro

• $("p").not(".intro");

^Effekte

• hide / show Sichtbarkeit von Elementen

• fadeIn, fadeOut, fadeToggle, fadeTo: Sichtbarkeit slow, 3000 ms

• slideDown, slideUp, slideToggle: HTML5: Expanded

• animate: HTML5: transition

• stop: anhalten, löschen der aktuellen Queue

Befehle

(10)

Einstiegsbeispiele der Methoden

$(document).ready(function(){

$("p").click(function(){

$(this).hide();

});

Die „ready“-Funktion ist VORder window.onload

• ready: alle Elemente außer den Bildern sind geladen

• onload: alle Elemente sind geladen

1. Beispiel: jq_bsp1_java.xhtml

^HTML

• <div >

• <h3>hier ist ein h3-Abschnitt</h3>

• <p>Erster Absatz</p>

• <p id="secondParagraph">Zweiter Absatz</p>

• <p>Dritter Absatz</p>

• </div>

^Javascript

• function changeColor() {

• var pItem = document.getElementById("secondParagraph");

• pItem.className = "green";

• } // changeColor

(11)

2. Beispiel: jq_bsp2_java.xhtml

^HTML

• <div id="box">

• <h3>hier ist ein h3-Abschnitt</h3>

• <p>Erster Absatz</p>

• <p>Zweiter Absatz</p>

• <p>Dritter Absatz</p>

• </div>

^Javascript

• window.onload = function() {

• var boxItems = document.getElementById("box");

• var pItems = boxItems.getElementsByTagName("p");

• for (var i = 0; i < pItems.length; i++) {

• if (pItems[i].firstChild.data == "Zweiter Absatz") {

• pItems[i].className = "green";

• } // if

• } // for

• } // onload

Setzen des p-Abschnittes mit dem Inhalt „Zweiter Abschnitt“ auf den CSS-Selektor „.green“.

3. Bis 5. Beispiel: mit jQuery: jq_bsp3.xhtml

$(document).ready(

function() {

$("p").addClass("green");

$("#box").addClass("green");

$("#box p").addClass("green");

$("#box p:contains('Zweiter Absatz')").addClass("green");

}

(12)

3-5. Beispiel: Erläuterungen

$(document).ready(

• Besser als onload, VORden Bildern

Anonyme Funktion

• $("p");

• // suche alle p-Abschnitte, return liste

• $("#box");

• // 3. Bsp: suche alle Abschnitt mit id=box, return liste

• $("#box p")

• // 4. Bsp: suche alle Abschnitt mit id=box in einem p- Abschnitt

• $("#box p:contains('Zweiter Absatz')")

• // 5. Bsp: suche alle Abschnitt mit id=box in einem p- Abschnitt, die

• Einen Text enthalten

• addClass("green");

• Füge class hinzu

Maus-Beispiel mit java-Script: jq_maus1_java

Drei p-Abschnitte

Beim Button-Mausklick soll ein Abschnitt den grünen Selektor erhalten

function changeColor() {

var pItem = document.getElementById("Paragraph2");

pItem.className = "green";

} // changeColor

<div >

<h3>hier ist ein h3-Abschnitt</h3>

<p>Erster Absatz</p>

<p id="Paragraph2" >Zweiter Absatz</p>

<p>Dritter Absatz</p>

</div>

(13)

Maus-Beispiel mit java-Script: jq_maus2_java

function changeColor1(pItem) { pItem.className = "green";

} // changeColor

function changeColor2(pItem) { pItem.className = "";

} // changeColor

<div >

</div>

Maus-Beispiel mit java-Script: jq_maus3_java

function changecolor(aP) { aP.className = "green";

} // changecolor

<div>

<p onclick="changecolor(this)"> Erster Absatz</p>

<p onclick="changecolor(this)" >Zweiter Absatz</p>

<p onclick="changecolor(this)" >Dritter Absatz</p>

(14)

Maus-Beispiel mit java-Script: jq_maus4_java

function changecolor(aP) {

for (var i=0; i<aP.parentNode.children.length;i++) { aP.parentNode.children[i].classList.remove('green');

}

aP.className='green';

}

<div>

<p onclick="changecolor(this)"> Erster Absatz</p>

<p onclick="changecolor(this)" >Zweiter Absatz</p>

<p onclick="changecolor(this)" >Dritter Absatz</p>

</div>

Maus-Beispiel: jq_maus5

Drei p-Abschnitte

Beim Mausklick soll der Abschnitt den grünen Selektor erhalten (kein Löschen)

$(document).ready(

function() {

$("#box p").click( // suche p-Abschnitt in box function() {

$(this).addClass("green");

}// 2. function );

} // 1. function );

(15)

function changecolor(aP) {

for (var i=0; i<aP.parentNode.children.length;i++) { aP.parentNode.children[i].classList.remove('green');

}

aP.className='green';

}

$("#box p").click(function() {

$(this).parent().children().removeClass();

$(this).addClass("green");

});

Maus-Beispiel: jq_maus6

$(document).ready(function() { var aP = $("#box p");

aP.click(

function() {

var pos=aP.index(this);

aP.parent().children().removeClass();

$(this).addClass("green"); // $(this) ist angeklickte p aP.parent().removeClass();

aP.parent().addClass("boxColor-"+pos);

}

Maus-Beispiel: jq_maus7

(16)

<ul>

<li>Bread</li>

<li class="fade">Chips</li>

<li class="fade">Socks</li>

</ul>

Maus-Beispiel: jq_maus8

$( "li" ).hover(

function() {

$( this ).append($( "<span> ***</span>" ) );

}, function() {

$( this ).find( "span:last" ).remove();

} );

$( "li.fade" ).hover(function() {

$( this ).fadeOut( 100 );

$( this ).fadeIn( 500 );

});

hover: 1/2:sofort 3/4:dynamisch

(17)

Menüs mit CSS: jq_menues_java1.xhtml

(18)

<ul>

<ul>

<li><a href="#">Zweiter Level 1</a></li>

<li><a href="#">Zweiter Level 3</a> // kein </li>

<ul>

<li><a href="#">Dritter Level 1</a></li>

<li><a href="#">Dritter Level 3</a>

<ul>

<li><a href="#">Vierter Level 1</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

Menüs mit CSS: jq_menues_java1.xhtml

Menüs mit CSS: jq_menues_java1.css

a {

text-decoration:none; /* kein Unterstreichen */

}

a:hover {

color:#000000; /* maus, hover=schweben über Element */

}

/* alleul's */

ul {

width:450px;

list-style-type:none; /* alle ul's keine punkt */

margin:10px;

}

(19)

Menüs mit CSS: jq_menues_java1.css

/* diese Elemente liegen UNTER den oberen der ersten Ebene */

ul ul {

/* display:none; */

opacity:0;

width:150px;

margin:0;

position:absolute; /* nun unabhängig */

left:-9999px; /* versteckt */

top:26px;

}

ul ul ul {

left:150px; /* 3. Menü nach rechts */

top:50;

}

Menüs mit CSS: jq_menues_java1.css

/* alle ersten Elemente liegen in einer Reihe, dank float */

li { float:left;

position:relative;

padding:5px 15px 5px 5px;

background-color:#EEEEFF;

}

li li {

float:none; /* nun wieder untereinander */

width:150px;

background-color:#CCCCCC;

(20)

Menüs mit CSS: jq_menues_java1.css

li:hover li { height:26px;

}

/* anzeige des 2. Menüs */

li:hover ul { display:block;

}

/* 1. submenu anschalten */

ul li:hover ul { left:0;

opacity:1;

}

Menüs mit CSS: jq_menues_java1.css

/* 2. und 3. ausschalten */

ul li:hover ul ul, ul li:hover ul ul ul { left:-9999px;

opacity:0;

}

/* 2. und 3. Menü anschalten */

ul ul li:hover ul, ul ul ul li:hover ul { /* display:block;*/

left:150px;

opacity:1;

}

(21)

Menüs mit jQuery: jq_menues_jq1.xhtml

var flyout = {

init: function() { var $obj = $("ul li");

// hover( infunction, outfunction)

$obj.hover( function(){

$(this).find('ul').first().stop(true, true).slideDown(300);

},

function(){

$(this).find('ul').first().stop(true, true).slideUp(300);

});

} // init }; // var flyout

$(document).ready(flyout.init);

Menüs mit jQuery: jq_menues_jq1.xhtml

var flyout = {

if (!$obj.length) return;

$("html").removeClass("no-js"); // entfernt die CSS-Lösung

$(this).find('ul').first().slideDown(300);

},function(){

$(this).find('ul').first().slideUp(300);

});

(22)

Menüs mit jQuery: jq_menues_jq2.xhtml

var flyout = {

if (!$obj.length) return;

$("html").removeClass("no-js");

$(this).find('ul').first().stop(true, true).slideDown(300);

},function(){

$(this).find('ul').first().stop(true, true).slideUp(300);

});

$(document).ready(flyout.init);

2. Beispiel: Erläuterung

$(document).ready(

• Besser als onload, VORden Bildern

Anonyme Funktion

• $("#box);

• // 2. Bsp: suche alle Abschnitt mit id=box, return liste

• $("#box p")

• // 3. Bsp: suche alle Abschnitt mit id=box in einem p- Abschnitt

• $("#box p:contains('Zweiter Absatz')")

• // 4. Bsp: suche alle Abschnitt mit id=box in einem p- Abschnitt, die

• Einen Text enthalten

• addClass("green");

• Füge class hinzu

• $(document).ready(function() {

• $("#box p:contains('Zweiter Absatz')").addClass("green");

• });

(23)

Tabpages mit jQuery

Tabpages mit jQuery: Idee / Struktur: jq_tabreiter0

<div class="tabs"title="(1): jQuery Befehle">

<p>

hier ist viel Text hier ist viel Text hier ist viel Text

</p>

</div>

<p>

hier ist viel Text hier ist viel Text hier ist viel Text

(24)

var makeTabs = { init: function() {

var $pages = $("div.tabs"); if ($pages.length==0) return;

$pages.addClass("dyn-tabs");

$pages.first().show();

var tabNavigation = $('<ul id="tabs" />').insertBefore($pages.first());

$pages.each(function() { var listElement = $("<li />");

var label = $(this).attr("title") ? $(this).attr("title") : "Kein Label";

listElement.text(label);

tabNavigation.append(listElement);

});

var items = tabNavigation.find("li");

items.first().addClass("current");

items.click(function() {

items.removeClass("current");

$(this).addClass("current");

$pages.hide();

$pages.eq($(this).index()).fadeIn("slow");

}); } };

$(document).ready(makeTabs.init);

Jeder Div-Abschnitt hat die Klasse „tabs“ und einen title

• Id „tabs“ zur Identifizierung, title als Register-Überschrift

^Liste

• Einfügen einer Liste VOR den div‘s

• Für alle div‘s

• Holen des Titels

• Eintrag als <li>

^Anzeige

• Suche den ersten Eintrag, hinzufügen „current“

• Click-Event zu allen Listenelementen

• Löschen aller „current“-Selektoren

• Aktuelle bekommt einen „current“-Selektor

• Alle <li> verstecken

• Das aktuelle Element anzeigen

^Problem

• Listen werden immer gelöscht

Tabpages mit jQuery: Idee / Struktur

(25)

(26)

Tabpages mit jQuery: Neue Variante: tabreiter4

<ul class='tabs'>

<li><a href='#tab1' >Tab 1</a></li>

</ul>

<div class='tabMargin' id='tab1'>

<h3>Alle Befehle werden mit dem $() eingegeben</h3>

</div>

<b>Ancestors</b>

</div>

<h3>Section 3</h3>

</div>

(27)

Tabpages mit jQuery: jQuery: tabreiter4

$(document).ready(function(){

$('ul.tabs').each(function(){

var $active, $content;

var $links = $(this).find('a');

$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);

$active.addClass('active');

$content = $($active[0].hash);

$links.not($active).each(function () {

$(this.hash).hide();

});

Tabpages mit jQuery: jQuery: tabreiter4

$(this).on('click', 'a', function(e){

$active.removeClass('active'); // Make the old tab inactive.

$content.hide();

$active = $(this); // Update the variables with the new link and content

$content = $(this.hash);

$active.addClass('active'); // Make the tab active.

$content.show();

e.preventDefault(); // Prevent the anchor's default click action });

(28)

Akkordeon JavaScript: ajax4 / ajax5

Akkordeon JavaScript: ajax4 / ajax5 aus dem Jahr 2012

<h3>Automatisierung und Informatik</h3>

…

</div>

<h3>Verwaltungswisssenschaft</h3>

…

</div>

(29)

Akkordeon JavaScript: ajax4 / ajax6 aus dem Jahr 2012

function fb(sId) { DeleteAll();

var element = document.getElementById(sId);

if ( element.style.display == 'none' ) element.style.display = 'block';

else

element.style.display = 'none';

} // fb

Akkordeon JavaScript: ajax4 / ajax6 aus dem Jahr 2012

function DeleteAll() {

var element = document.getElementById("fb1");

element = document.getElementById("fb2");

}

(30)

var element = document.getElementById("fb1");

}

var items=new Array("fb1", "fb2", "fb3");

for (var i=0; i<items.length; i++) {

var element = document.getElementById( items[i] );

} // for }

Akkordeon jQuery: jq_akkordeon_4

<h3 class="bar">Automatisierung und Informatik</h3>

<ul>

<li> Informatik IB </li>

<li> Informatik PSC </li>

<li> Medieninformatik </li>

<li> Wirtschaftsinformatik </li>

</ul>

</div>

(31)

var accordeon = { init: function() {

var $content = $(".content"); // Klasse content, n-Elemente var $bar = $(".bar"); // Klasse bar

if (!$content.length || !$bar.length) return;

$content.hide(); // aktuelles verstecken

$bar.click( function() {

$bar.removeClass("current"); // reset

$content.not(":hidden").slideUp('slow'); // offenes Element verstecken

$(this).next() // bar.next => content

.not(":visible") // wenn versteckt, down, add current .slideDown('slow')

.prev()

.addClass("current");

});

} }

$(document).ready(accordeon.init);

Kapitel_05/Beispiel-08-Treemenu/Listing-5-18.html

(32)

Listings/Kapitel_05/Beispiel-23-Table-Zebra/Listing-5-66.html

Listings/Kapitel_06/widgets/tab01.html

(33)

Kapitel_06/interactions/interaction_methods.html: Drag&Drop

http://jqueryui.com/accordion/

(34)

jQuery UI: 1. Beispiel

// konfigurierter Dialog mit Buttons:

var derDialog = $('<div></div>').dialog({

autoOpen : false, // geht nicht von selber auf title : "Das ist jetzt komplett generiert", resizable : false,

// modal : true, buttons : {

OK : function(){ // Schalter „Ok“

$(this).dialog('close'); // schließen },

"Nee, gar nicht" : function(){ // Schalter „Abbruch“

$(this).dialog('destroy').hide(); // vernichten }

} });

derDialog.html('Das ist <b>Inhalt</b> für den generierten Dialog.');

(35)

// Button zum Einblenden:

$('#btn').click(function(){

// bestehenden Dialog zeigen:

derDialog.dialog('open'); // (gleichwertig) mit Selektion });

// Button zum Ändern des Dialogtextes:

$('#btn2').click(function(){

derDialog.html('Das ist jetzt <b>neuer</b> Text');

alert('Der Text wurde geändert');

});

(36)

var derDialog;

derDialog = $('<div></div>').dialog({

autoOpen : false, // geht nicht von selber auf title : "Eingabedialog",

resizable : true, // modal : true, buttons : {

OK : function(){ // Schalter „Ok“

$(this).dialog('close'); // schließen },

"Nee, gar nicht" : function(){ // Schalter „Abbruch“

console.log('Button 2 geklickt');

$(this).dialog('destroy').hide(); // vernichten }

} });

(37)

// in onload

var html = '<label>Vorname'+

'<input type="text" name="vorname" value="" size="12" />' + '</label>'+'<br />'+

'<label>Nachname'+

'<input type="text" name="nachname" value="" size="12" />' + '</label>';

derDialog.html(html);

});

function showDialog() {

derDialog.dialog('open'); // (gleichwertig) mit Selektion } // showDialog

function changeDialog() { var html = '<label>Nachname'+

'<input type="text" name="nachname" value="" size="12" />' + '</label>' + '<br />'+

'<label>Abteilung'+ '<br />'+

'<input type="radio" name="Abt" value="F_und_E" checked="checked" />

F und E'+ '<br />'+

'<input type="radio" name="Abt" value="Marketing" /> Marketing'+

'<br />'+

(38)

jq_table1.xhtml

table tr:hover:nth-child(odd) td{

background-color: yellow;

cursor:pointer;

}

table tr:hover:nth-child(even) td{

cursor:pointer;

}

table tr:nth-child(odd) td{

background-color: #CCCCCC;

}

table tr:nth-child(even) td{

background-color: #FFFFFF;

}

tfoot {

border: 1px solid;

color: green;

text-align:center;

}

thead{

border: 1px solid;

color: red;

background-color: blue;

}