sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
121 lines (93 loc) • 4.66 kB
Markdown
_[Accueil](index.html) > Comment créer votre propre widget_
** /!\ Ceci est obsolète. **
# Comment créer votre propre widget
Sparnatural propose une gamme de widgets différents pour la sélection de valeurs sparql. D'autres widgets peuvent être ajoutés en implémentant l'extension de la classe `AbstractWidget`. Créons le BooleanWidget pour illustrer le processus d'implémentation :
## Créer une nouvelle classe de widget
Allez dans le dossier du widget `./src/sparnatural/components/widgets/`
Nous allons créer une nouvelle classe étendant Abstract Widget :
```typescript
import { Pattern } from "sparqljs";
import { AbstractWidget, WidgetValue } from "./AbstractWidget";
export class BooleanWidget extends AbstractWidget {
getRdfJsPattern(): Pattern[] {
throw new Error("Method not implemented.");
}
parseInput(value: { label: string; }): WidgetValue {
throw new Error("Method not implemented.");
}
}
```
Avec l'aide de l'intellisense, nous pouvons voir que les deux méthodes `getRdfJsPattern` et `parseInput` doivent être implémentées.
`getRdfJsPattern` : Renvoie un tableau de type `Pattern[]`. Cela est basé sur le [modèle de données sparqljs](https://github.com/RubenVerborgh/SPARQL.js/). Ce `Pattern[]` sera converti en sparql.
`parseInput` : Renvoie une WidgetValue et possède deux fonctions. Il est utilisé pour analyser l'entrée fournie par l'utilisateur et il analyse l'entrée de chaîne lorsqu'une requête est importée.
## Créer le rendu HTML du widget
Commençons par rendre le html du widget. L'`AbstractWidget` hérite lui-même de la classe HTMLComponent qui est la classe supérieure pour tous les composants Sparnatural. Chaque composant peut donc implémenter la méthode `render()` pour rendre du HTML.
```typescript
super.render();
let trueSpan = $(
`<span class="boolean-value">${getSettings().langSearch.true}</span>'`
);
let orSpan = $(`<span class="or">${getSettings().langSearch.Or}</span>`);
let falseSpan = $(
`<span class="boolean-value"">'${getSettings().langSearch.false}</span>`
);
this.html.append(trueSpan).append(orSpan).append(falseSpan);
trueSpan[0].addEventListener("click", (e) => {
let widgetValue: BooleanWidgetValue = new BooleanWidgetValue({
label: getSettings().langSearch.true,
boolean: true,
});
this.renderWidgetVal(widgetValue);
});
falseSpan[0].addEventListener("click", (e) => {
let widgetValue: BooleanWidgetValue = new BooleanWidgetValue({
label: getSettings().langSearch.false,
boolean: false,
});
this.renderWidgetVal(widgetValue);
});
return this;
```
Cela rend à ce qui suit et a un clickListener pour écouter le clic :
## Définir une classe de données
Remarquable ci-dessus est la création de widgetValue à l'intérieur du click listener. Cela nous amène à la prochaine exigence que les SparnaturalWidgets ont. Chaque widget Sparnatural DEVRAIT être accompagné d'une "*classe de données*". Cette classe de données doit hériter de l'interface WidgetValue :
```typescript
export class BooleanWidgetValue implements WidgetValue {
value: {
label: string;
boolean: boolean;
}
key():string {
return this.value.boolean.toString();
}
constructor(v:BooleanWidgetValue["value"]) {
this.value = v;
}
}
```
## Implémenter parseInput
`parseInput` est utilisé pour 2 choses : analyser la valeur saisie par l'utilisateur et analyser la valeur stockée dans la [structure de données JSON](Query-JSON-format) des requêtes enregistrées.
## Implémenter getRdfJsPattern
TODO
## Ajuster la génération SPARQL en "bloquant" la génération par défaut
TODO
## 2. Ajouter un cas pour quand le nouveau Widget doit être utilisé
Dans `components/builder-section/groupwrapper/criteriagroup/edit-components/WidgetWrapper.ts`, la méthode `#createWidgetComponent()` vous verrez une directive "switch" qui teste sur le widgetType, c'est-à-dire sur l'URI d'un type de propriété provenant de l'ontologie de configuration Sparnatural :
```typescript
switch (widgetType) {
case Config.LITERAL_LIST_PROPERTY: {
// ...
}
case Config.LIST_PROPERTY:
// ...
}
case Config.AUTOCOMPLETE_PROPERTY:
// ...
}
// ...
default:
throw new Error(`WidgetType for ${widgetType} not recognized`);
}
```
C'est ici que vous pouvez ajouter un cas au switch et appeler le constructeur de votre nouveau widget.