-
Notifications
You must be signed in to change notification settings - Fork 19
Architecture (Front end)
- Utilizes ASP.NET Core ViewComponents
- Uses native JavaScript through Bootstrap 5
Uses a native Bootstrap 4.x JavaScript library- The primary TypeScript file is located in wwwroot/src/tuxboard.ts
- Gulp to transpile, minify, and bundle the TypeScript and CSS files.
- SaSS to create modular CSS (minimal since it's essentially a component and leveraged by Bootstrap 5.x)
- The dialogs are static HTML except for the dialog's modal body which is dynamically loaded on activation. It's simply a placeholder and are located at the bottom of the Home/index.cshtml page.
- Clarification: This project is meant to be an example of using the server-side Tuxboard.Core library. You can use and enhance the TypeScript in your own projects. If you want to, you could ditch all of this and create an ASP.NET Core WebApi so your Vue/Angular/React application can call dashboard components. Since I'm not a master of every single JS framework and I don't have a JS Framework preference (Angular, Vue, React, etc), YOU CAN CREATE ANY KIND OF FRONT-END YOU WANT FOR THIS LIBRARY. As a matter of fact, I would see some developers forking this and creating their own front-ends.
Each widget of Tuxboard uses ViewComponents for everything HTML. Depending on the ViewComponent, each one can cascade down to other related ViewComponents. For example, the Tuxboard ViewComponent calls the LayoutTemplate and the LayoutTemplate calls multiple WidgetTemplates.
The following components are ViewComponents (located in /ViewComponents):
- Tuxboard - HTML Template for a top-level Tuxboard dashboard.
- LayoutTemplate - HTML Template for the layout of the dashboard (called from Tuxboard ViewComponent)
- WidgetTemplate - HTML Template for each Widget on the dashboard (called from the LayoutTemplate ViewComponent)
- WidgetSettings - HTML Template for a Widget's Settings
- Tuxbar - HTML Template for the Layout and Add Widget button
- Widget - Widget Traffic Cop to load and render the widget's content
The core Views (HTML) are located in the /Features/Shared/Components.
Open each Default.cshtml and notice the model passed in to understand what you can use in each ViewComponent. This gives you the ability to structure any one of the components for specific HTML enhancements to your dashboard.
There is also a WidgetViewComponent. This is used to render the widget's contents located in /Widgets/<WidgetName>/Default.cshtml.
tuxboard.ts is the entry point for the library and uses a hierarchical approach of each module.
It's broken into 5 folders:
- Core - Required classes.
- Extras - Optional enhancements you may not need, but nice to have (like Dialogs and a Tuxbar which is Tuxboard's toolbar)
- Models - Simple models as classes used from Tuxboard API
- Services - JavaScript Fetch calls utilizing a promise-based repository for HTML and API retrieval.
- Widgets - Contains the general template for a widget's toolbar, settings, and placement on a Tuxboard.
Depending on your CSS library, whether it's Bootstrap, Foundation, or Skeleton (or whatever the weekly flavor is), match the variables at the top of the tuxboard.js to your HTML/CSS.
For building the project, I used Visual Studio 2019 along with:
-
Gulp - using the Task Runner Explorer (under View -> Other Windows -> Task Runner Explorer)
* Web Essentials - Used with Visual Studio; Can't live without it.* Productivity Power Tools (2019) - Used with Visual Studio; Also, a great collection of extensions.
The dialogs used (Add Widget & Change Layout) are included in the Views/Shared folder called ChangeLayoutFrame.cshtml and WidgetDialogFrame.cshtml. On activating each dialog, they load their respective content into the modal body.
Make sure you include these HTML dialogs if you want the Tuxbar functionality available in your own projects.