Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jeff-zucker/solid-ui-components

generate high level HTML widgets from RDF data
https://github.com/jeff-zucker/solid-ui-components

Last synced: 30 days ago
JSON representation

generate high level HTML widgets from RDF data

Host: GitHub
URL: https://github.com/jeff-zucker/solid-ui-components
Owner: jeff-zucker
License: mit
Created: 2021-04-01T16:33:22.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-09-29T22:32:05.000Z (about 2 years ago)
Last Synced: 2023-03-02T12:32:33.651Z (over 1 year ago)
Language: JavaScript
Size: 955 KB
Stars: 7
Watchers: 4
Forks: 2
Open Issues: 11
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Solid UI Components - WiP

Use RDF to create data-driven apps, web pages, and user interfaces

This is a *Work in Progress*. It works fine but I have not finalized the ontology, cleaned the code or re-added things like forms which worked in a previous version.

Please see this [demo](https://jeff-zucker.github.io/solid-ui-components/demo.html) for simple examples and [this website](https://jeff-zucker.solidcommunity.net/sp4/) for a website that is entirely built using this library.

## Prerequisites

You need to include mashlib and comunica in your HTML. The easiest way is using CDNs. See the sample.html.

## Overview

A *Component* combines a way to get data (a *DataSource*) with a way to display it (a *Template*).
```turtle
<#MyMenu>
a ui:Component ;
ui:dataSource [a ui:DataSource] ;
ui:template [a ui:Template] .
```
There are built in templates for many common interactive user interface widgets - menus, tabs, accordions, tables, with slideshows, forms, and more coming soon. For built-in templates, you can simply name the template and optionally use template predicates (see below) to customize the template.
```
<#MyBuiltInTemplate>
a ui:MenuTemplate ;
ui:orientation "horizontal" ;
ui:position "right" .
```
You can also create any template you'd like using Javascript template strings. For example this would create a list, populating each item with a row of data from the dataSource.
```
<#MyCustomTemplate>
a ui:Template;
ui:before "

${data_from_query}

" .
```
There are three basic kinds of DataSources - SparqlQuery, Collection, and Link.
```
<#MySparqlDataSource>
a ui:SparqlQuery ;
endpoint ;
query """My SPARQL Query String""" .

<#MyCollectionDataSource>
a ui:Collection ;
ui:parts ( <#A> <#B> <#C> ) .

<#MyLinkDataSource>
a ui:Link ;
ui:label "MyLabel" ;
ui:acceptFormat "application/json" ;
ui:href .
```
Components may be included anywhere in a web page like so:
```html
Stuff Before

Stuff After
```
Coponents can call other components, so it's quite possible to have an entire site or app generated from a single HTML insert. While the components can make use of Javascript you supply, no coding is necessary - the components have interactivity built in.

Components can also be included as a library and called from a script. For example, this returns a fully active DOM element.
```Javascript
const element = await solidUIC.processComponent('component-URL');
```
You can now walk the DOM tree of the element or insert it into a page.