cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
2894
Views
2
Helpful
2
Comments
aaikepae
Cisco Employee
Cisco Employee

image1.png

Nowadays, IT/OT professionals (such as network engineer, system admin etc.) spend lots of time on network topology-like User Interface (UI) for design, maintenance and operation tasks. As the network system grows more and more complicated, this network topology-like UI becomes more difficult to use. In this disclosure, we build NeXt UI toolkit to solve this problem and make the network topology-like UI more user friendly, hence improve user’s productivity. NeXt UI toolkit (Network embedded Experience) is an HTML5/JavaScript based toolkit for network web application. Provide high performance and high quality framework and network centric topology component. By embedding topology component in Network Web Application, developer can visualize and operate network. And it is an Open Source Project under OpenDayLight community. More information can get from developer protocol.

image2.png

There are couple design principle and advantage of NeXt:

  • Experience oriented development
  • Visual and interaction designs focus on building intuitive network experience
  • Easy to build network web applications (Effort saving)
  • Leverage other language concepts / introduce concept from other languages/framework
  • Provide topology component with rich APIs
  • Open sourced develop mode

image3.png

Main features of NeXt topology component

  • Topology basic graph visualization and interaction
  • Multiple layout present (Force auto layout / Enterprise network layout/ Hierarchical Layout)
  • Large network scaling support (aggregation/progressive rendering)
  • Path / traffic / tunnel / group visualization
  • Build-in Map overlay (US map)
  • Build-in interaction behaviors and extend interface (drag/zoom/hover/click/select/aggregate)
  • Build-in 20+ icon and 5 themes
  • Build-in tooltip manager / layout manager / node & link extendibility

NeXt UI Toolkit Topology Architecture

image4.png

Hello world of NeXt

Sample code : http://jsfiddle.net/nextsupport/4Lr3kuos/


Screen Shot 2016-02-12 at 6.00.44 PM.png



2 Comments
Getting Started

Find answers to your questions by entering keywords or phrases in the Search bar above. New here? Use these resources to familiarize yourself with the community:

Recognize Your Peers