Kreative Bedienkonzepte mittels jqueryui

Size: px

Start display at page:

Download "Kreative Bedienkonzepte mittels jqueryui"

Walter Bishop
5 years ago
Views:

1 The Oracle Middleware Experts Nico Kreiling Anton Thome The Oracle Middleware Experts Kreative Bedienkonzepte mittels jqueryui - A Hero Journey -

2 Wer wir sind virtual7 GmbH Beratungs- und Softwarepartner gegründet 1996 unternehmergeführt Geschäftsbereiche ORACLE Middleware Services ORACLE-/Java-Anwendungsentwicklung ORACLE basierte Produktentwicklung ORACLE Lizenzberatung und -vertrieb The Oracle Middleware Experts

3 virtual7 GmbH The Oracle Middleware Experts 09/06/15

4 Nico Kreiling Consultant The Oracle Middleware Experts Anton Thome Consultant The Oracle Middleware Experts Referentenvorstellung

5 virtual7 The Tagcloud: Oracle Middleware Experts

6 Agenda Einführung Draggable Droppable Autocomplete Highlight Effekt jquery Org-Chart

7 Usability Matters

8 APEX

9 Effizientere Bedienung

10 Spaß-Faktor

11 Verbesserte Nutzerinteraktion

12 Verständlichere Animationen

13 jquery und jqueryui DOM Transformation und Manipulation Event-Steuerung (Chaining, Callbacks) Vereinfachte Syntax und Browserkompabilität Diverse zusätzliche, state of the art Bedienelemente (Widgets) Viele Effekte und Animationen CSS-Framework

14 Einfach einbinden aber wo? <link rel="stylesheet" href="jquery.orgchart.css"/> <script src="jquery.orgchart.js"></script> Template Header Wiederverwendbarkeit Abstimmung mit DOM Elementen Granularerer Einstellungen Bewussterer Einsatz

15 Sortable

16 Sortable

17 Sortable Sortable Region <ul class="connectedsortable"> #BODY# </ul> Sortable Report <li id="#id#" style="border: 1px "> #DISPLAY# </li>

18 Sortable SELECT-Statement select "NR" id, SUBJECT ' von: ' "FROM_USER" ' Text: ' "CONTENT" display from S

19 Sortable JavaScript für Execute when Page Loads Sektion $(function() { }); $( ".connectedsortable" ).sortable()

20 Demo

21 Sortable Keine Erklärung notwendig Hoher Bekanntheitsgrad Mehrfach Zeilen-Verschiebung Höherer Bedienkomfort Besser für Mobilgeräte

22 Droppable

23 Droppable

24 Droppable Static Content DIV Region with ID LÖSCHEN (ID: PX_TRASH)

25 Droppable JavaScript für Execute when Page Loads Sektion $( "#PX_TRASH" ).droppable({ drop: function() { alert( "Diese wird jetzt aus Ihrer Übersicht enfernt"); } });

26 Demo

27 Droppable... Weniger Klicks Spaßfaktor

28 Highlight Effekt

29 Highlight Effekt

30 Highlight Effekt Static Content DIV Region with ID LÖSCHEN (ID: PX_TRASH)

31 Highlight Effekt JavaScript für Execute when Page Loads Sektion $( "#PX_TRASH" ).droppable({ drop: function() { $( ".ui- sortable- helper").toggle("highlight"); } });

32 Demo

33 Highlight Effekt... Nutzerfeedback Prozess Visualisiereung

34 Autocomplete

35 Autocomplete Text Field SUCHEN (ID: PX_SEARCH)

36 Autocomplete Shared Components Application Process (On Demand) DECLARE search_v VARCHAR2(4000); BEGIN search_v := wwv_flow.g_x01; FOR c1 IN (SELECT subject FROM s WHERE subject LIKE '%' search_v '%') LOOP htp.p(c1.subject); END LOOP; END;

37 Demo

38 Autocomplete

39 Autocomplete... Weniger Eingabeaufwand Unterstützung bei Suchbegriff-Auswahl

40 Highlight Effekt... Weniger Eingabeaufwand

41 jquery orgchart

42 listify orgchart

43 Seitenstruktur

44 ID Zuweisung

45 Dateien hochladen

46 Dateien importieren

47 Schritt 1: listify $('#datasource.t- Report- report').listify({ 'target': '#treesrc', 'root_name': 'Root', 'order': ['Loc', 'Dname', 'From user'] });

48 Schritt 2: orgchart $("#treesrc > ul").orgchart({ container: $("#main"), interactive: true, fade: true, speed: 'slow' });

49 Demo Basis Organigramm

50 Schritt 2: orgchart function filtertable(cid) { var sel = []; sel.push($('#treesrc li[cid="'+cid+'"]').parents('li').andself().map(function() { return $(this).clone().children('ul,li').remove().end().text() })) var trs = $('#datatable tr'); $(trs).hide(); for (var i = 1; i < sel[0].length; i++) { text = sel[0][i]; trs = trs.filter(function() { return $(this).text().indexof(text) >= 0 }) } $(trs).show(); } $('#main li').on('click', function() {filtertable($(this).attr('cid'))});

51 Demo Interaktives Organigramm

52 virtual7 Blog tual7.de /blog 52 09/06/15

53 The Oracle Middleware Experts Nico Kreiling Anton Thome The Oracle Middleware Experts Kreative Bedienkonzepte mittels jqueryui - A Hero Journey -

Multimedia im Netz Online Multimedia Winter semester 2015/16

Multimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 08 Minor Subject Ludwig-Maximilians-Universität München Online Multimedia WS 2015/16 - Tutorial 08 (NF) - 1 Today s Agenda Evaluation