Anpassa appen
Exponerad funktionalitet i tilläggsramverket
Vi har exponerat en uppsättning funktioner och get-metoder under en proxy
som kan användas för att komma åt data, config och utlösande händelser. Nedan finns en lista och hur du kommer åt dem.
interface EventData {
key?: string,
keys?: string[]
view?: any,
next?: any,
error?: any,
completed?: any,
id?: any
}
* getValue(key)
* setValue(key, value)
* subject // getter
* subscribe(opts: EventData)
* subscribeAppEvent(opts: EventData)
* subscribeAppModel(key, next)
* subscribeParentEvent(opts: EventData)
* parentEventHandlerNext(eventName: string, opts: any)
* appModelNext(eventName:string, opts)
* appEventHandlerNext(eventName:string, opts)
* next(eventName:string, opts, eventHandler?)
* viewConfig //getter
* args //getter
Vår app följer en MVC-struktur (modell, vy, styrenhet)
Modell
Modellen definierar de olika attributen och lagrar deras värden. Värdena för de olika attribut som lagras i modellen kan nås från kontrollenheten med hjälp av syntaxen
this.getValue('attributeName')
För anpassning i programmet läggs alla nya attribut till under en karta i modellen.
Om du vill ange ett nytt attribut i modellen använder vi följande syntax i kontrollenheten:
// If a key is not already in model then it will be added to extraProps
this.setValue('key', value)
För att komma åt ett attribut som lagts till i modellen använder vi följande syntax:
const value = this.getValue("key")
Visa
Vyn definierar appens användargränssnitt. Vi använder JSON-filer för att definiera visningen av våra filer. Här definierar vi komponenterna, css (som anges i komponenternas extraklass) och återger de värden som lagras i modellen.
I vår app definieras varje vy med en JSON. JSON-objekten refereras med deras unika ID:n som kallas id
.
Styrenhet
Kontrollenheten används för att hantera händelser och bearbeta data. Kontrollenheten används för att hämta och skicka data från servern, det är gränssnittet mellan det som visas i användargränssnittet och lagras på serverdelen.
- Vi använder funktionen
init
för att ange värden vid initieringen. - Om du vill lägga till en metod i kontrollenheten använder vi följande syntax:
methodName: function(args){
// functionality
}
methodName
här fungerar som key
som referens för metoden i JSON (vyn) eller i andra funktioner
- För att anropa en metod i kontrollenheten använder vi syntaxen
this.next('methodName', args)
Exempel
Låt oss nu använda ett enkelt exempel för att visa hur dessa tre komponenter interagerar med varandra.
Vi ska lägga till en knapp som byter etikettvärde med ett klick
Visa exempel
Här nedan definierar vi JSON för en knapp som visar en dynamisk text som lagras i modellen under variabelnamnet buttonLabel
.
I det här exemplet ändras etiketten när du klickar på knappen.
{
"component": "button",
"label": "@extraProps.buttonLabel",
"variant": "cta",
"on-click": "switchButtonLabel",
}
Exempel på modell
i det här fallet innehåller extraProps.buttonLabel
knappens etikett
Exempel på styrenhet
controller: {
init: function () {
this.setValue("buttonLabel", "Submit")
},
switchButtonLabel(){
const buttonLabel = this.getValue("buttonLabel") === "Submit"? "Cancel" : "Submit"
this.setValue("buttonLabel", buttonLabel)
}
}
Nedanför GIF visas koden ovan i aktion
Visa konfigurationsexempel
I det här fallet får vi åtkomst till söklägeshändelsen med viewConfig
och utlöser en händelse för att uppdatera den
{
id: 'repository_panel',
controller: {
init: function () {
console.log('Logging view config ', this.viewConfig)
this.next(this.viewConfig.items[1].searchModeChangedEvent, { searchMode: true })
}
}
}
Exempel på prenumeration
I det här fallet lägger vi till en prenumeration vid filnamnsändring i konsolloggen när du klickar på alternativet för filnamnsändring
{
id: 'repository_panel',
controller: {
init: function () {
this.subscribe({
key: 'rename',
next: () => { console.log('rename using extension') }
})
}
}
}
Exempel på apphändelse
I det här fallet har loggen för det aktiva dokumentet ändrats (flikar i redigerarens användargränssnitt ändras)
{
id: 'repository_panel',
controller: {
init: function () {
this.subscribeAppEvent({
key: 'app.active_document_changed',
next: () => { console.log('Extension: active document changed') }
})
}
}
}
Exempel på händelser i appmodell
Exempel på prenumerationshändelser för appmodell som app.mode
{
id: 'repository_panel',
controller: {
init: function () {
this.subscribeAppModel('app.mode',
() => { console.log('app mode subs') }
)
}
}
}
Exempel på händelser för överordnad styrenhet
I det här exemplet lägger vi till en prenumeration på tabChange
-händelsen som är en händelse för left_panel_container
-kontrollanten som fungerar
som överordnad styrenhet för repository_panel
{
id: 'repository_panel',
controller: {
init: function () {
this.subscribeParentEvent({
key: 'tabChange',
next: () => { console.log('tab change subs') }
})
this.parentEventHandlerNext('tabChange', {
data: 'map_panel'
)
}
}
}
Appmodell och appkontroll nästa gång
De kan aktiveras direkt genom att man vet att det är rätt händelse att utlöses och dess data
{
id: 'file_options',
controller: {
init: function () {
this.appModelNext('app.mode', 'author')
this.appEventHandlerNext('app.active_document_changed', 'active doc changed')
}
}
}