UNPKG

4.31 kBMarkdownView Raw
1## Catavolt Javascript SDK and React Components
2### Overview
3The Catavolt Javascript solution is comprised of three layers, all independently usable, and all providing a different level of programmatic access and customization opportunies.
4
51. **The Catavolt Javascript SDK** - A pure Javascript API, providing low-level access to the Catavolt data model and server API.
61. **The Catavolt Core React Components** - A set of components that provide declarative access to many of the SDK functions, making the construction of custom Catavolt Apps much easier.  These components provide very minimal, default styling, and allow the client to fully control the document structure (i.e. html and css)
71. **The Catavolt React HTML Components** - A set of components that provide default styling, include some html markup, but still allow for customization and the application of a custom style.  The components are also built so that any single component could be replaced (or wrapped) with a custom component if desired.
8
9The Catavolt React Component hierarchy mimics the Catavolt Extender (server model) as well as the object model used in the Catvolt SDK. Please see [this document](../componentOverview.pdf).
10
11### Catavolt React HTML Components (‘catavolt-html’ package)
12
13
14**<{@link CvLoginPanel}/>**
15Basic styled, configurable Login Component
16{@link CvLoginPanelProps}
17
18**<{@link CvWorkbenchManager}/>**
19Basic Workbench ‘switcher’ composed of a {@link CvDropdownWorkbenchMenu} and {@link CvGraphicalWorkbench} by default.  ‘Pluggable’ with other implementations of these.
20{@link CvWorkbenchManagerProps}
21
22**<{@link CvGraphicalWorkbench}/>**
23Provides a styled, ‘icon-based’ view of a workbench and launchers, with configurable number of columns.
24{@link CvGraphicalWorkbenchProps}
25
26**<{@link CvDropdownWorkbenchMenu}/>**
27Provides ‘Workbench selection’ menu implementations for selecting an active workbench.   Currently a basic ‘drop-down’ menu  and a ‘Tabbed’ menu are available.
28{@link CvGraphicalWorkbenchMenuProps}
29
30**<{@link CvNavigator}/>**
31Renders a ‘Navigation Request’ using a default, Catavolt styled {@link CvFormPanel}
32{@link CvNavigatorProps}
33
34**<{@link CvWebNavigator}/>**
35Renders a ‘Web Navigation Request’ by opening the url in a browser
36{@link CvWebNavigatorProps}
37
38**<{@link CvFormPanel}/>**
39Builds ‘styled’ subtypes of Form layouts (tabbed, 3-pane, ordered, etc.).  Provides pluggable access for new or custom form layouts.
40{@link CvFormPanel}
41
42**<{@link CvListPanel}/>**
43Simple tabular list renderer.
44{@link CvListPanelProps}
45
46**<{@link CvGridPanel}/>**
47Default tabular list renderer.
48{@link CvGridPanelProps}
49
50**<{@link CvDetailsPanel}/>**
51Default ‘cell’ based detail renderer.  Provides editing/saving support.  Uses {@link CvCellValueDef}’s to render cells.
52{@link CvDetailsPanelProps}
53
54**<{@link CvCellValueDef}/>**
55Render’s a Catavolt ‘Cell Value Definition’.   AttributeCellValueDef, LabelCellValueDef, etc.
56{@link CvCellValueDefProps}
57
58**<{@link CvDataAnno}/>**
59Applies default style to a properties and records, based on the Data Annotations attached to the entities (if any).
60{@link CvDataAnnoProps}
61
62**<{@link CvHeroHeader}/>**
63Convenience component to add a logo or company header
64{@link CvHeroHeaderProps}
65
66**<{@link CvDropdownMenu}/>**
67Renders MenuDef’s as a basic ‘Dropdown’ menu
68{@link CvMenuProps}
69
70**<CvBarcodeScanPanel/>**
71Render a default, styled barcode scan detail panel
72
73**<CvGeoInfoPanel/>**
74Render a default, styled geo location or geofix detail panel
75
76**<{@link CvMapPanel}/>**
77Render a default, styled map panel
78{@link CvMapPanelProps}
79
80**<CvCalendarPanel/>**
81(pending implementation) Render a default, styled calendar
82
83**<{@link CvGraphPanel}/>**
84Render a default, styled graph
85{@link CvGraphPanelProps}
86
87**<CvImagePickerPanel/>**
88(pending implementation) Render a default, styled image picker panel
89
90**<{@link CvMessagePanel}/>**
91Uses a {@link CvMessagePane} to display a "toast-like" notification of messages (based on toast.js)
92{@link CvMessagePanelProps}
93
94
95
96