MarkdownViewer

Avaa ChatGPT:ssä

Varjo dwc-markdown-viewer 25.11

Java API

MarkdownViewer-komponentti renderöi markdown-tekstiä HTML:ksi. Se tukee vakiomerkintäsynntaksia, mukaan lukien otsikot, luettelot, koodilohkot, linkit, kuvat ja emojit. Komponentti tarjoaa myös progressiivisen renderöinnin, joka näyttää sisällön merkki kerrallaan kirjoituskoneefektin aikaansaamiseksi.

Sisällön asettaminen

Luo MarkdownViewer alkuperäisellä sisällöllä tai ilman, ja päivitä se käyttämällä setContent()-metodia:

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

// Korvataan sisältö täysin
viewer.setContent("""
    ## Uusi sisältö

    - Kohde 1
    - Kohde 2
    """);

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

vinkki

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

Näytä koodi

MarkdownViewerView.java

Sisältöön lisääminen

append()-metodi lisää sisältöä vähitellen ilman, että se korvataan jo olemassaolevalla sisällöllä:

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

Oletuksena lisätty sisältö näkyy heti. Kun progressiivinen renderöinti on käytössä, lisätty sisältö siirtyy välimuistiin ja näkyy merkki kerrallaan sen sijaan.

Auto-scroll

Ota automaattinen vieritys käyttöön, jotta näkymä pysyy alareunassa, kun sisältö kasvaa. Tämä toimii kaikilla sisällön lisäämiskeinoilla, olipa se sitten setContent(), append() tai progressiivinen renderöinti. Jos käyttäjä vierittää manuaalisesti ylös tarkastellakseen aikaisempaa sisältöä, automaattinen vieritys keskeytyy ja jatkuu, kun hän vierittää takaisin alas.

viewer.setAutoScroll(true);

Progressiivinen renderöinti

Progressiivinen renderöinti näyttää sisältöä merkki kerrallaan sen sijaan, että koko sisältö näkyisi kerralla, luoden kirjoituskoneefektin. AI-keskusteluliitännät käyttävät usein tätä vastausten näyttämiseen vähitellen:

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

Kun se on käytössä, setContent() tai append() -metodilla lisätty sisältö siirtyy välimuistiin ja näkyy vähitellen. Kun se ei ole käytössä, sisältö näkyy heti.

Näytä koodi

MarkdownViewerProgressiveView.java

Renderöintinopeus

setRenderSpeed()-metodi kontrolloi, kuinka monta merkkiä renderöidään per animaatiokehys. Korkeammat arvot tarkoittavat nopeampaa renderöintiä. 60fps:llä oletusnopeus 4 tarkoittaa noin 240 merkkiä sekunnissa:

Nopeus	Merkit/Sekunnissa
4 (oletus)	~240
6	~360
10	~600

viewer.setRenderSpeed(6);

Tietovirrasta vastaaminen

Jos palvelimesi lähettää sisältöä nopeammin kuin katselija renderöi, välimuisti kasvaa ja näkyvä sisältö myöhästyy. Lisää renderSpeed pitämään vauhtia, tai kutsu flush(), kun kaikki sisältö on vastaanotettu, jotta jäljelle jäävä sisältö näytetään heti.

Renderöintitila

Kun progressiivinen renderöinti on käytössä, isRendering()-metodi palauttaa true, kun komponentti näyttää aktiivisesti välimuistissa olevaa sisältöä. Keskustelu liitännät käyttävät usein tätä näyttämään tai piilottamaan pysäytyspainiketta:

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

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

Renderöinnin hallinta

Kaksi metodia hallitsevat, miten progressiivinen renderöinti pysähtyy:

• stop() pysäyttää renderöinnin ja hylkää kaikki välimuistissa olevat näyttämättömät sisällöt. Kutsu tätä, kun käyttäjä peruu.
• flush() pysäyttää renderöinnin mutta näyttää heti kaikki jäljellä olevat välimuistissa olevat sisällöt. 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ämä menetelmät eivät vaikuta, kun progressiivinen renderöinti on pois käytöstä.

Valmis odottaminen

whenRenderComplete()-metodi palauttaa PendingResult-objektin, joka valmistuu, kun progressiivinen renderöinti on lopettanut kaiken välimuistissa olevan sisällön näyttämisen:

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

Jos progressiivista renderöintiä ei ole otettu käyttöön tai mitään sisältöä ei renderöidä, PendingResult valmistuu heti.

UI-yhteensopivuus

Kun käytät progressiivista renderöintiä, älä ota syöttökenttiä takaisin käyttöön pelkästään sen perusteella, kun olet lopettanut append()-kutsumisen. Renderöijä saattaa silti näyttää välimuistissa olevaa sisältöä. Odota whenRenderComplete() -metodin valmistumista, jotta kaikki sisältö näkyy ennen kuin käyttäjät voivat jälleen olla vuorovaikutuksessa.

Seuraava demo simulaoi AI-keskusteluliittymää käyttäen append()-metodia progressiivisen renderöinnin ollessa käytössä:

Näytä koodi

MarkdownViewerStreamingView.java

Sisällön tyhjentäminen

Poista kaikki sisältö clear()-metodilla:

viewer.clear();

Jos progressiivinen renderöinti on aktiivinen, clear() pysäyttää myös renderöinnin ja viimeistelee kaikki odottavat whenRenderComplete()-tulokset.

Koodin korostus

MarkdownViewer tukee syntaksin korostamista koodilohkoissa, kun Prism.js on käytettävissä. Lisää Prism.js sovellukseesi käyttämällä @JavaScript ja @StyleSheet -annotaatioita:

@StyleSheet("https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.min.css")
@JavaScript(
  value = "https://cdn.jsdelivr.net/combine/npm/prismjs@1/prism.min.js,npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js",
  top = true
)
public class Application extends App {
  // ...
}

Autoloader-laajennus lataa kielimääritykset tarpeen mukaan, joten koodilohkot, joissa on kielivihjeitä, kuten ```java tai ```python, korostuvat automaattisesti.

Loading...