Esirakenduse esitlus-API ekraanihaldus: mitme kuvari seadistamine globaalsetele rakendustele

Tänapäeva ühendatud maailmas ei ole veebirakendused enam piiratud üheainsa brauseriaknaga. Esirakenduse esitlus-API annab arendajatele võimsa võimaluse laiendada oma rakendusi mitmele kuvarile, avades rikkalikult võimalusi paremate kasutajakogemuste loomiseks. See juhend uurib esitlus-API keerukust, keskendudes konkreetselt mitme kuvari seadistamisele ja pakkudes praktilisi näiteid, mis on asjakohased globaalsele publikule.

Esitlus-API mõistmine

Esitlus-API on veebistandard, mis võimaldab veebirakendustel kasutada teist kuvarit ehk esitlusekraani, et näidata esmasest kuvarist erinevat sisu. See on eriti kasulik järgmistes stsenaariumides:

• Konverentsiruumid: Esitluste jagamine sülearvutist projektorile.
• Jaemüügikioskid: Tooteteabe kuvamine suurel ekraanil, samal ajal kui kasutaja suhtleb väiksema puuteekraaniga.
• Digitaalsed ekraanid: Dünaamilise sisu edastamine mitmel ekraanil avalikes kohtades.
• Mängimine: Mängukogemuse laiendamine teisele ekraanile kaasahaaravuse suurendamiseks või lisateabe pakkumiseks.
• Hariduskeskkonnad: Õppematerjalide kuvamine suurel ekraanil, samal ajal kui õpilased töötavad individuaalsetes seadmetes.

API keskmes on järgmised põhimõisted:

• PresentationRequest: Objekt, mida kasutatakse esitlusseansi algatamiseks.
• PresentationConnection: Objekt, mis esindab ühendust juhtlehe ja esitluslehe vahel.
• PresentationReceiver: Objekt esitluslehel, mis võtab vastu sõnumeid juhtlehelt.

Mitme kuvari seadistamine

Esimene samm esitlus-API kasutamisel on saadaolevate kuvarite tuvastamine ja esitlusseansi algatamine. Siin on protsessi ülevaade:

1. Saadaolevate kuvarite tuvastamine

Meetod navigator.presentation.getAvailability() tagastab lubaduse (promise), mis laheneb PresentationAvailability objektiga. See objekt näitab, kas esitlusekraan on hetkel saadaval.

            
navigator.presentation.getAvailability()
  .then(function(availability) {
    if (availability.value) {
      console.log('Esitlusekraan on saadaval.');
    } else {
      console.log('Esitlusekraani pole saadaval.');
    }

    availability.onchange = function() {
      if (availability.value) {
        console.log('Esitlusekraan muutus saadavaks.');
      } else {
        console.log('Esitlusekraan muutus kättesaamatuks.');
      }
    };
  });

            

              
                Copy
              
            
          

See koodilõik kontrollib, kas esitlusekraan on saadaval, ja kuulab muudatusi selle saadavuses. Oluline on käsitleda onchange sündmust, et reageerida dünaamiliselt esitlusekraanide saadavuse muutustele.

2. Esitlusseansi algatamine

Esitluse alustamiseks looge PresentationRequest objekt, esitades esitluslehe URL-i.

            
let presentationRequest = new PresentationRequest(['presentation.html']);

presentationRequest.start()
  .then(function(connection) {
    console.log('Esitlus edukalt alustatud.');
    // Esitlusühenduse käsitlemine
    connection.onmessage = function(event) {
      console.log('Sõnum vastu võetud:', event.data);
    };
    connection.onclose = function() {
      console.log('Esitlus suletud.');
    };
    connection.onerror = function(event) {
      console.error('Esitluse viga:', event.error);
    };
  })
  .catch(function(error) {
    console.error('Esitluse alustamine ebaõnnestus:', error);
  });

            

              
                Copy
              
            
          

See kood käivitab esitlusseansi, kasutades teisel ekraanil kuvatava sisuna faili presentation.html. Seejärel loob see ühenduse ja seadistab sündmuste kuulajad sõnumite, sulgemise ja vigade jaoks.

3. Esitlusleht (PresentationReceiver)

Esitlusleht peab olema valmis vastu võtma sõnumeid juhtlehelt. See saavutatakse PresentationReceiver objekti abil.

            
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    console.log('Ühendus vastu võetud:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });

  connectionList.onconnectionavailable = function(event) {
    let connection = event.connection;
    console.log('Uus ühendus saadaval:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  };
});

            

              
                Copy
              
            
          

See koodilõik kuulab esitluse vastuvõtja lehel sissetulevaid ühendusi ja käsitleb juhtlehelt saadud sõnumeid, uuendades vastavalt esitlusekraani sisu.

Täpsem mitme kuvari seadistamine

Lisaks põhilisele esitlusfunktsionaalsusele võimaldab esitlus-API ka keerukamaid mitme kuvari seadistusi. Siin on mõned täpsemad tehnikad:

1. Konkreetse kuvari valimine

Esitlus-API ei paku otseselt võimalust saadaolevate kuvarite loetlemiseks ja konkreetse valimiseks. Siiski saate kasutada PresentationRequest konstruktorit koos URL-ide massiiviga. Kasutajaagent esitab seejärel kasutajale valiku, mis võimaldab neil valida, millist kuvarit kasutada.

2. Dünaamilised sisuuuendused

Meetod PresentationConnection.postMessage() võimaldab reaalajas sidet juhtlehe ja esitluslehe vahel. See võimaldab dünaamiliselt uuendada esitluse sisu vastavalt kasutaja interaktsioonidele või andmete muutustele.

            
// Sõnumi saatmine juhtlehelt
connection.postMessage('Tere, esitlusekraan!');

// Sõnumi vastuvõtmine esitluslehel
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });
});

            

              
                Copy
              
            
          

See näide demonstreerib lihtsa tekstisõnumi saatmist juhtlehelt esitluslehele, mis seejärel uuendab oma sisu.

3. Erinevate ekraaniresolutsioonide ja kuvasuhetega toimetulek

Sisu esitlemisel mitmel kuvaril on oluline arvestada ekraanide erinevate resolutsioonide ja kuvasuhetega. Kasutage CSS-i meediapäringuid ja paindlikke paigutusi, et tagada sisu sujuv kohanemine erinevate ekraanisuurustega. Kaaluge vaateakna ühikute (vw, vh, vmin, vmax) kasutamist elementide proportsionaalseks skaleerimiseks vastavalt ekraani suurusele.

            
/* CSS-i näide erinevate ekraanisuuruste käsitlemiseks */
@media (min-aspect-ratio: 16/9) {
  .content {
    width: 80vw;
    height: 90vh;
  }
}

@media (max-aspect-ratio: 4/3) {
  .content {
    width: 90vw;
    height: 75vh;
  }
}

            

              
                Copy
              
            
          

See CSS-i näide kasutab meediapäringuid sisu elemendi mõõtmete kohandamiseks vastavalt kuvari kuvasuhtele.

4. Rahvusvahelistamine ja lokaliseerimine

Globaalsete rakenduste puhul on oluline arvestada rahvusvahelistamise (i18n) ja lokaliseerimisega (l10n). Kasutage oma HTML-is sobivaid keelemärgiseid, pakkuge tõlkeid kogu tekstisisule ning vormindage kuupäevi, numbreid ja valuutasid vastavalt kasutaja lokaadile. JavaScripti rahvusvahelistamise API (Intl) võib siin suureks abiks olla.

            
// Numbri vormindamine vastavalt konkreetsele lokaadile
let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('de-DE').format(number); // Väljund: 1.234.567,89

// Kuupäeva vormindamine vastavalt konkreetsele lokaadile
let date = new Date();
let formattedDate = new Intl.DateTimeFormat('ja-JP').format(date); // Väljund: 2023/10/27

            

              
                Copy
              
            
          

Need näited demonstreerivad, kuidas vormindada numbreid ja kuupäevi vastavalt erinevatele lokaatidele, kasutades Intl API-d.

5. Ligipääsetavuse kaalutlused

Veenduge, et teie mitme kuvariga rakendused oleksid ligipääsetavad puuetega kasutajatele. Pakkuge piltidele alternatiivteksti, kasutage semantilist HTML-i ja tagage, et teie rakenduses saab navigeerida klaviatuuri abil. Kaaluge ARIA atribuutide kasutamist dünaamilise sisu ligipääsetavuse parandamiseks.

Praktilised näited globaalsetele rakendustele

Siin on mõned praktilised näited, kuidas esitlus-API-d saab kasutada globaalsetes rakendustes:

• Rahvusvahelised konverentsiesitlused: Veebirakendus, mis võimaldab esinejatel jagada slaide projektoril, vaadates samal ajal oma sülearvutis esineja märkmeid ja hallates esitlust. Rakendus peaks toetama mitut keelt ja võimaldama esinejatel kohandada esitluse paigutust erinevate ekraanisuuruste jaoks.
• Globaalsed jaemüügikioskid: Kioskirakendus, mis kuvab tooteinfot suurel ekraanil, võimaldades samal ajal kasutajatel sirvida tooteid ja teha oste puuteekraanil. Rakendus peaks toetama mitut valuutat, keelt ja makseviisi.
• Mitmekeelne digitaalne ekraanireklaam: Digitaalne ekraanisüsteem, mis kuvab dünaamilist sisu, näiteks uudiste pealkirju, ilmateateid ja reklaame, mitmel ekraanil avalikes kohtades. Sisu tuleks automaatselt tõlkida iga kuvari kohalikku keelde.
• Koostöötahvel kaugtöötavatele meeskondadele: Veebipõhine tahvlirakendus, mis võimaldab geograafiliselt hajutatud meeskondadel reaalajas koostööd teha. Teisel ekraanil võiks näidata sisse suumitud vaadet konkreetsest alast või esitada täiendavat võrdlusmaterjali.

Koodinäide: lihtne esitlus dünaamiliste uuendustega

Siin on täielik koodinäide, mis demonstreerib lihtsat esitlust dünaamiliste uuendustega:

Juhtleht (index.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Esitlus-API näide</title>
</head>
<body>
  <h1>Juhtleht</h1>
  <button id="startButton">Alusta esitlust</button>
  <input type="text" id="messageInput" placeholder="Sisesta sõnum">
  <button id="sendMessageButton">Saada sõnum</button>

  <script>
    let connection;
    let presentationRequest = new PresentationRequest(['presentation.html']);

    document.getElementById('startButton').addEventListener('click', function() {
      presentationRequest.start()
        .then(function(conn) {
          connection = conn;
          console.log('Esitlus edukalt alustatud.');
          connection.onmessage = function(event) {
            console.log('Sõnum vastu võetud:', event.data);
          };
          connection.onclose = function() {
            console.log('Esitlus suletud.');
          };
          connection.onerror = function(event) {
            console.error('Esitluse viga:', event.error);
          };
        })
        .catch(function(error) {
          console.error('Esitluse alustamine ebaõnnestus:', error);
        });
    });

    document.getElementById('sendMessageButton').addEventListener('click', function() {
      if (connection) {
        let message = document.getElementById('messageInput').value;
        connection.postMessage(message);
      } else {
        alert('Esitlust pole alustatud.');
      }
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Esitlusleht (presentation.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Esitlusekraan</title>
  <style>
    body {
      font-size: 2em;
      text-align: center;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <h1>Esitlusekraan</h1>
  <div id="content"></div>

  <script>
    navigator.presentation.receiver.connectionList.then(function(connectionList) {
      connectionList.connections.forEach(function(connection) {
        console.log('Ühendus vastu võetud:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      });

      connectionList.onconnectionavailable = function(event) {
        let connection = event.connection;
        console.log('Uus ühendus saadaval:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      };
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

See näide loob lihtsa juhtlehe, millel on nupp esitluse alustamiseks ning tekstisisend ja nupp sõnumite saatmiseks esitlusekraanile. Esitlusekraan võtab sõnumid vastu ja uuendab vastavalt oma sisu.

Levinud probleemide tõrkeotsing

• Esitlusekraani ei tuvastata: Veenduge, et teine kuvar on ühendatud ja operatsioonisüsteemi seadetes lubatud. Kontrollige brauseri ühilduvust ja värskendage uusimale versioonile.
• Esitlus ei alga: Veenduge, et esitluse URL on õige ja ligipääsetav. Kontrollige JavaScripti konsoolis vigu.
• Sõnumeid ei võeta vastu: Veenduge, et PresentationConnection on korrektselt loodud ja et onmessage sündmuse kuulaja on õigesti seadistatud nii juhtlehel kui ka esitluslehel.
• Päritoluülesed probleemid: Kui juhtleht ja esitlusleht asuvad erinevates domeenides, veenduge, et CORS (Cross-Origin Resource Sharing) on korrektselt seadistatud, et lubada suhtlust päritolude vahel.

Esitlus-API tulevik

Esitlus-API on pidevalt arenev tehnoloogia. Tulevased täiustused võivad hõlmata:

• Parem kuvarite loetlemine ja valik.
• Keerukam kontroll esitluse paigutuse ja stiili üle.
• Täiustatud turvafunktsioonid.
• Integratsioon teiste veebi-API-dega, näiteks WebXR liit- ja virtuaalreaalsuse kogemuste jaoks.

Kokkuvõte

Esirakenduse esitlus-API pakub võimsat mehhanismi veebirakenduste laiendamiseks mitmele kuvarile, võimaldades laia valikut uuenduslikke kasutajakogemusi. Mõistes API põhimõisteid ja järgides selles juhendis toodud parimaid tavasid, saavad arendajad luua kaasahaaravaid ja tõhusaid mitme kuvariga rakendusi globaalsele publikule. Alates rahvusvahelistest konverentsiesitlustest kuni mitmekeelse digitaalse ekraanireklaamini on võimalused lõputud. Võtke omaks esitlus-API võimsus ja avage mitme kuvariga veebirakenduste potentsiaal.