Siirry pääsisältöön

MarkdownViewer

Avaa ChatGPT:ssä
Varjo dwc-markdown-viewer 25.11
Java API

MarkdownViewer -komponentti renderoi markdown-tekstin HTML:ksi. Se tukee standardin markdown-syntaksia, mukaan lukien otsikot, luettelot, koodilohkot, linkit, kuvat ja emojien renderointi. Komponentti tarjoaa myös progressiivisen renderoinnin, joka näyttää sisällön merkki kerrallaan kirjoituskoneefektin luomiseksi.

Aseta sisältö​

Luo MarkdownViewer aloitussisällöllä tai ilman, ja päivitä se käyttämällä setContent():

MarkdownViewer viewer = new MarkdownViewer("# Hei maailma");

// Korvata koko sisältö
viewer.setContent("""
    ## Uusi sisältö

    - Kohde 1
    - Kohde 2
    """);

// Hanki nykyinen sisältö
String content = viewer.getContent();
vinkki

Komponentti toteuttaa HasText, joten setText() ja getText() toimivat aliasina sisällön metodeille.

Näytä koodi

Sisällön lisääminen​

append()-metodi lisää sisältöä asteittain ilman, että korvataan jo olemassa olevaa:

viewer.append("## Uusi osio\n\n");
viewer.append("Lisää sisältöä täällä...");

Oletusarvoisesti lisätty sisältö näkyy heti. Kun progressiivinen renderointi on käytössä, lisätty sisältö siirtyy puskuriin ja näkyy merkki kerrallaan.

Automaattinen vieritys​

Ota automaattinen vieritys käyttöön, jotta näkymä pysyy alareunassa sisällön kasvaessa. Tämä toimii kaikilla tavoilla, joilla sisältöä lisätään, oli se sitten setContent(), append() tai progressiivinen renderointi. Jos käyttäjä vierittää manuaalisesti ylös tarkistaakseen aikaisempia sisältöjä, automaattinen vieritys pysähtyy ja jatkuu, kun he vierittävät takaisin alas.

viewer.setAutoScroll(true);

Progressiivinen renderointi​

Progressiivinen renderointi näyttää sisältöä merkki kerrallaan sen sijaan, että kaikki näkyisi kerralla, luoden kirjoituskoneefektin. AI-chat-käyttöliittymät käyttävät tätä yleisesti näyttääkseen vastauksia, jotka ilmestyvät vähitellen:

MarkdownViewer viewer = new MarkdownViewer();
viewer.setProgressiveRender(true);

Kun se on käytössä, setContent()- tai append()-metodilla lisätty sisältö menee puskuriin ja näkyy asteittain. Kun se on pois käytöstä, sisältö näkyy heti.

Näytä koodi

Renderointinopeus​

setRenderSpeed()-metodi hallitsee kuinka monta merkkiä renderoidaan per animaatioruutu. Korkeammat arvot tarkoittavat nopeampaa renderointia. 60fps:ssä oletusnopeus 4 tarkoittaa noin 240 merkkiä sekunnissa:

NopeusMerkkejä / Sekunti
4 (oletus)~240
6~360
10~600
viewer.setRenderSpeed(6);
Tietovirran yhteensovittaminen

Jos palvelimesi lähettää sisältöä nopeammin kuin katseluohjelma renderoi, puskuri kasvaa ja näytettävä sisältö jää jälkeen. Lisää renderSpeed pitääksesi tahdin, tai kutsu flush(), kun kaikki sisältö on vastaanotettu, jotta jäljellä oleva sisältö näkyy heti.

Renderointitila​

Kun progressiivinen renderointi on käytössä, isRendering()-metodi palauttaa true, kun komponentti näyttää aktiivisesti puskuroitua sisältöä. Chat-käyttöliittymät käyttävät tätä usein näyttämään tai piilottamaan pysäytysnappia:

if (viewer.isRendering()) {
  stopButton.setVisible(true);
}

Tämä metodi palauttaa aina false, kun progressiivinen renderointi on pois käytöstä.

Renderoinnin hallinta​

Kaksi metodia hallitsevat sitä, kuinka progressiivinen renderointi lopetetaan:

  • stop() pysäyttää renderoinnin ja hylkää kaikki vielä näyttämättömät puskuroitua sisältöä. Kutsu tätä, kun käyttäjä peruuttaa.
  • flush() pysäyttää renderoinnin, mutta näyttää heti kaikki jäljellä oleva puskuroitu sisältö. Kutsu tätä, kun kaikki sisältö on vastaanotettu ja haluat näyttää sen ilman odottamista.
// Käyttäjä napsautti "Pysäytä generointi"
viewer.stop();

// Kaikki sisältö vastaanotettu, näytä kaikki nyt
viewer.flush();

Näillä metodeilla ei ole vaikutusta, kun progressiivinen renderointi on pois käytöstä.

Valmistumisen odottaminen​

whenRenderComplete()-metodi palauttaa PendingResult-objektin, joka valmistuu, kun progressiivinen renderointi on lopettanut kaikkien puskuroitujen sisältöjen näyttämisen:

viewer.whenRenderComplete().thenAccept(v -> {
  inputField.setEnabled(true);
  inputField.focus();
});

Jos progressiivinen renderointi ei ole käytössä tai mitään sisältöä ei renderöidä, PendingResult valmistuu heti.

UI-yhteensovitus

Kun käytät progressiivista renderointia, älä ota syöttökenttiä uudelleen käyttöön pelkästään sen perusteella, kun olet lopettanut append()-kutsun. Renderöijä voi edelleen näyttää puskuroitua sisältöä. Odota whenRenderComplete(), jotta kaikki sisältö ilmestyy ennen kuin käyttäjät voivat vuorovaikuttaa taas.

Seuraava demo simuloi AI-chat-käyttöliittymää käyttäen append()-metodia, kun progressiivinen renderointi on käytössä:

Näytä koodi

Sisällön tyhjentäminen​

Poista kaikki sisältö käyttämällä clear():

viewer.clear();

Jos progressiivinen renderointi on aktiivinen, clear() pysäyttää myös renderoinnin ja lopettaa kaikki odottavat whenRenderComplete() tulokset.

Syntaksin korostaminen​

MarkdownViewer tukee syntaksin korostamista koodilohkoissa, kun Prism.js on saatavilla. Tuo Prism sovellukseesi frontend bundlerin avulla: julista paketti App-luokassasi ja kirjoita entry, joka tuo Prismin, automaattisen latauslaajennuksen ja teeman.

Application.java
@BundlePackage(value = "prismjs", version = "^1.29.0")
@BundleEntry("prism/entry.ts")
public class Application extends App {
  // ...
}
src/main/frontend/prism/entry.ts
import "prismjs";
import "prismjs/plugins/autoloader/prism-autoloader";
import "prismjs/themes/prism-tomorrow.min.css";

Automaattinen latauslaajennus lataa kielimäärittelyt tarpeen mukaan, joten koodilohkot, joissa on kielivinkkejä kuten ```java tai ```python korostuvat automaattisesti.

Loading...