Introduction to the Diagram in ADF · Title: Introduction to the Diagram in ADF Author: Duncan Mills Created Date: 10/8/2014 7:37:09 AM

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

An IntroducAon to Diagram in ADF A Giant Leap Forward

Duncan Mills Oracle Cloud and Mobility Development Tools


Safe Harbor Statement The following is intended to outline our general product direcAon. It is intended for informaAon purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or funcAonality, and should not be relied upon in making purchasing decisions. The development, release, and Aming of any features or funcAonality described for Oracle’s products remains at the sole discreAon of Oracle.

3


Program Agenda

1

2

3

4

Why diagrams?

IntroducAon to the ADF diagram

Using diagram

Demos

4


Why Do We Need Diagrams?

5


Diagram Use Cases •  Topologies of course…

6


Diagram Use Cases

7

I don't need those… Can I go home now?


Think Beyond the Obvious •  Your user experience is much more than (just) the data – How much can I see? – Which data is important? – How do I interact with what's important?

•  SomeAmes tables don't deliver effecAve workflow

8

I'm important

Nothing to see here

I'm preby boring too

Lots of stuff to see here – but none of it is important

I might be scrolled out of

view


Modern User Experience Progressive Disclosure

9

2

Scan à Glance à Commit


RepresentaAon With Clarity Progressive Disclosure Within a Single UI

10


But There's More than One Tool for the Job

11


IntroducAon to Diagram

12


What Is Diagram?

• A series of JSF components in the ADF DVT library – RepresenAng diagram, nodes and links etc.

• Rendered using SVG – NaAve to browser (No plugins) – Provides a scalable surface that the user can zoom and pan

• Accessible

13


Some Basics What's What in Diagram

14


Core FuncAonality Baked In Out of the Box

•  Zoom (+ levels) • Pan • Overview (thumbnail view) •  Legend • Palebe •  Expand / Collapse •  IsolaAon / filtering •  Stacking "like" nodes

15


What Layouts are Available?

• Why? – Every use case is different – So, diagram does not have a fixed set of layouts pre-‐defined – this would only lead to frustraAon

• A pluggable model where you define a layout and decide exactly how you want the diagram to look – PosiAoning of nodes – Distance between nodes – Start and end of links – Link rouAng – direct, orthogonal or curved

16

Any No size fits all…


Using Diagram

17


Care and Feeding of the Diagram

• Core data model is very simple – A collecAon of "nodes" – A collecAon of "links" – Both use java.uAl.List, Trinidad CollecAonModel or ADF Hierarchical Binding

• Nodes have a unique ID (any type) •  Links have start & end IDs == unique IDs of respecAve nodes • Nodes inside a container node have a containerId == ID of parent node

18


In Code

19

<dvt:diagram layout="…"> <dvt:clientLayout …/> <dvt:diagramNodes value="#{diagramModel.nodes}" var="node"> <dvt:diagramNode nodeId="#{node.uniqueNodeId}" label="#{node.nodeLabel}"> <f:facet name="zoom100"> … </f:facet> </dvt:diagramNode> </dvt:diagramNodes> <dvt:diagramLinks value="#{diagramModel.links}" var="link"> <dvt:diagramLink label="#{link.label}" startNode="#{link.sourceNodeId}" endNode="#{link.destinationNodeId}" linkStyle="dash" startConnectorType="circle" endConnectorType="arrowOpen"/> </dvt:diagramLink> </dvt:diagramLinks> </dvt:diagram>


Nodes

• Can contain – Simple supplied shapes – Custom images (preferably scalable) – Core ADF layouts and primiAves

• Cannot Contain input components •  Features – OpAonal label – OpAonal background – OpAonal overlays

20


Links

• Have an opAonal label • Configurable width • Predefined styles (solid, dash etc.) • Predefined endpoints (or supply your own) • But must be associated with two nodes to display

21


Overlays (Badges)

• Defined by a specialized facet in the node containing one or more markers • Marker posiAon controlled through pointLocaAon – May extend beyond the node boundary – Again standard shapes, or plug in your own

22


• A Layout is required – This is where you need to spend most Ame – Several pre-‐canned "demo" layouts supplied for you to adapt – Demos and blog arAcles are available to help

•  Layouts can be configured based on: – Parameters passed in with the usage – RunAme informaAon from the nodes themselves

•  Single diagram may use more than one layout

Shaping the Diagram

23

B.Y.O.L.


Examples and Demos

24


Supply Chain Management Classic Process Flow Diagram

25


Oracle TransportaAon Management Scheduling

26


Oracle BI Cloud Star Schema

27


Visual InformaAon Navigator RelaPonship VisualizaPon in Fusion ApplicaPons

28


Visual InformaAon Builder Report Building in Fusion ApplicaPons

29


SOA Composite VisualizaAon One of the VisualizaPons in Enterprise Manager

30


Sankey Diagram

31


Want To Learn More?

• Core demos hbp://jdevadf.oracle.com •  Ten part series on Diagram on the DVT Blog: hbps://blogs.oracle.com/data-‐visualizaAons/

32


Join the Oracle ADF Community •  Twiber.com/Jdeveloper •  Twiber.com/OracleADF •  Facebook.com/Jdeveloper • Google+ ADF community

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 34

Documents

Introduction to the Diagram in ADF · Title: Introduction to the Diagram in ADF Author: Duncan Mills Created Date: 10/8/2014 7:37:09 AM