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/<ID>/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
