introduction to the diagram in adf · title: introduction to the diagram in adf author: duncan...
TRANSCRIPT
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Program Agenda
1
2
3
4
Why diagrams?
IntroducAon to the ADF diagram
Using diagram
Demos
4
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Diagram Use Cases • Topologies of course…
6
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Diagram Use Cases
7
I don't need those… Can I go home now?
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Modern User Experience Progressive Disclosure
9
2
Scan à Glance à Commit
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
RepresentaAon With Clarity Progressive Disclosure Within a Single UI
10
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
But There's More than One Tool for the Job
11
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Some Basics What's What in Diagram
14
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Core FuncAonality Baked In Out of the Box
• Zoom (+ levels) • Pan • Overview (thumbnail view) • Legend • Palebe • Expand / Collapse • IsolaAon / filtering • Stacking "like" nodes
15
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
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…
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
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>
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
• 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.
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Supply Chain Management Classic Process Flow Diagram
25
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Oracle TransportaAon Management Scheduling
26
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Oracle BI Cloud Star Schema
27
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Visual InformaAon Navigator RelaPonship VisualizaPon in Fusion ApplicaPons
28
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Visual InformaAon Builder Report Building in Fusion ApplicaPons
29
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
SOA Composite VisualizaAon One of the VisualizaPons in Enterprise Manager
30
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Join the Oracle ADF Community • Twiber.com/Jdeveloper • Twiber.com/OracleADF • Facebook.com/Jdeveloper • Google+ ADF community