Jak używać obrazów w aplikacjach internetowych

Ten tutorial opisuje Image wykorzystanie komponentu w aplikacjach internetowych.

Look & Feel

• Upload - możliwe jest wstępne zdefiniowanie obrazu poprzez naciśnięcie przycisku i wybranie obrazu z systemu plików;

• Image alt [ string] - nazywane również znacznikami alt i opisami alt, tekst alt jest pisemną kopią, która pojawia się w miejscu obrazu na stronie internetowej, jeśli obraz nie załaduje się na ekranie użytkownika. Tekst ten pomaga narzędziom do odczytu ekranu opisać obrazy dla niedowidzących czytelników i pozwala wyszukiwarkom na lepsze przeszukiwanie i klasyfikację witryny;
• Width [ string] - domyślna szerokość obrazu;
• Height [ string] - image height by default;
• Visible [ boolean] - określa czy obrazek jest widoczny czy nie;
• Name [ string] - nazwa komponentu;

Powiązane procesy biznesowe

Image w HTML jest odniesieniem do samego obiektu obrazu. Dlatego Image zawsze działa z linkami i aby wykorzystać dane obrazu, trzeba uzyskać do niego link.

Następujące BPs są wstępnie wygenerowane do użycia w aplikacjach internetowych:

• Image Get Properties - pobiera właściwości obrazka:
  • Component ID [ string] - identyfikator komponentu;
  • Width [ string] - szerokość obrazu;
  • Height [ string] - image height;
  • Image URL [ string] - image URL-address;
  • Tooltip [ string] - tooltip string do pokazania na hover;
  • Visible [ boolean] - określa czy obrazek jest widoczny czy nie;
  • Loading [ boolean] - ustawia obraz w stan " ładowania", jeżeli true;

• Image Set Properties - resetuje wszystkie właściwości wybranego obrazka i ustawia w ich miejsce podane:
  • Component ID [ string] - identyfikator elementu;
  • Width [ string] - szerokość obrazu;
  • Height [ string] - image height;
  • Image URL [ string] - image URL-address;;
  • Tooltip [ string] - tooltip string do pokazania na hover;
  • Visible [ boolean] - określa czy obrazek jest widoczny czy nie;
  • Loading [ boolean] - ustawia obraz w stan " ładowania", jeżeli true;

• Image Update Properties - aktualizuje właściwości obrazka:
  • Component ID [ string] - identyfikator elementu;
  • Width [ string] - szerokość obrazu;
  • Height [ string] - image height;
  • Image URL [ string] - image URL-address;
  • Tooltip [ string] - tooltip string do pokazania na hover;
  • Visible [ boolean] - określa czy obrazek jest widoczny czy nie;
  • Loading [ boolean] - ustawia obraz w stan " ładowania", jeżeli true;

Przykład zastosowania

Rozważmy przykład ładowania awatara profilu użytkownika. Interfejs internetowy składa się z obrazu i przycisku, który uruchamia BP, i wygląda tak:

BP rozpoczyna się od onClick wyzwalacza. Do pobierania plików z systemu plików urządzenia użytkownika Select Files używany jest blok ( Max files = 1, File types = Image). Jeżeli plik zostanie wybrany pomyślnie element tablicy z index=0 zostanie wybrany.

Powstały w ten sposób element tablicy Files musi zostać przesłany do serwera aplikacji internetowej w celu dalszego wykorzystania ( Server request POST /_files/). Jeżeli żądanie jest udane, to obiekt pliku na wyjściu bloku Server request POST /_files/ jest przekazywany do wejścia bloku Expand file aby uzyskać jego ID.

Aby uzyskać adres URL, należy wziąć plik ID i przekonwertować jego wartość na ciąg znaków ( To String). Względna ścieżka do pliku byłaby /api/_files//download/. Tak więc, aby przesłać obraz, ścieżka pliku musi zostać przekazana do właściwości Image URL właściwości Image Update Properties bloku.

Opublikowana aplikacja jest na przykładzie poniżej