Skip to content
Miguel Martins edited this page Jun 2, 2021 · 1 revision

The JSONViewer(val value : JSONValue) and how the visual interface is built

In order to implement a basic visual interface for a JSON structure, the SWT (Standard Widget Toolkit) was used. It provides an easy and straightforward way to build an interface to showcase more functionalities of the library.

JSONViewer Example

The JSONViewer has 4 properties that can be used and manipulated (for example, by any custom plugin you develop)

  • shell - Represents the window
  • tree - Represents a tree of JSONObjects, on the left side on the window
  • jsonDisplay - Displays the serialized JSON on the right side of the window (Re-utilizes the library serializer)
  • searchText - A basic search text box that highlights JSONValue that contain the provided string, as seen on the example image

Building the tree property from a JSONValue

In order to create and display the JSONViewer, you must always pass a JSONValue as a parameter. The tree parameter will then be built from your JSON object.

How exactly? You might recall the project re-utilizing the Visitor Pattern for serializing and even a custom filter. It is also used in this instance, to instantiate each node (TreeItem) on the Tree object. If you decide to build a different viewer, this might be one approach to use, when building visual components for you JSON structure.


Examples

How to instantiate a JSONViewer

// Instantiates a JSONArray from a list of primary data types
val jsonValue = JSONGenerator().buildFrom(mutableListOf(1,false,"hello"))

// Opens the visualizer
JSONViewer(jsonValue).open()
Clone this wiki locally