20.07.20 – informacje o wersji zintegrowanego portalu Apigee Edge

Wyświetlasz dokumentację Apigee Edge.
Zapoznaj się z dokumentacją Apigee X. info

W poniedziałek 27 lipca zaczniemy udostępniać nową wersję zintegrowanego portalu Apigee Edge.

Nowe funkcje i ulepszenia

W tej sekcji opisujemy nowe funkcje i ulepszenia w tej wersji.

Ulepszenia w zakresie ułatwień dostępu i czasu reakcji

Poniżej znajdziesz listę ulepszeń dotyczących ułatwień dostępu i szybkości reakcji, które zostały wprowadzone w tej wersji.

• Nawigacja przy użyciu klawiatury: za pomocą klawiatury można teraz poruszać się po paskach nawigacyjnych w nagłówku i stopce, nawigacji bocznej SmartDocs, liście aplikacji, widoku aplikacji i kartach interfejsu API.
  
• Zarządzanie zaznaczeniem: nawigacja za pomocą paska nawigacyjnego w nagłówku i nawigacji bocznej w Dokumentach SmartDocs przenosi zaznaczenie na pierwszy element <H1> na stronie po wykonaniu działania nawigacyjnego.
• Regiony dynamiczne: zmiany na liście interfejsów API wynikające z filtrowania tekstowego są teraz zgłaszane użytkownikom korzystającym z czytnika ekranu.
• Semantyczne użycie nagłówków HTML: cały tekst jest teraz zawarty w semantycznie odpowiednich tagach HTML. W całym portalu jest teraz używana odpowiednia hierarchiczna struktura nagłówków.
• Pojedyncze użycie tagu <H1>: każda strona ma teraz tylko jeden tag <H1>, dzięki czemu czytniki ekranu mogą łatwo zidentyfikować najbardziej informacyjny opis zawartości strony.
• Stylizowane wielkie litery: użycie wielkich liter jako akcentu wizualnego jest teraz stosowane wyłącznie za pomocą CSS, a nie w rzeczywistym tekście.
• Logiczne uporządkowanie DOM: przyciski działań na stronach tworzenia i edytowania aplikacji zostały przeniesione poniżej elementów formularza w DOM, dzięki czemu można je aktywować w logicznej kolejności po zakończeniu interakcji z formularzem.
• Opisy tekstowe elementów wizualnych: ulepszyliśmy użycie etykiet, tekstu alternatywnego i tekstu przycisków, co poprawia nawigację za pomocą czytnika ekranu.
• Kontrast kolorów: w wielu miejscach w usłudze zwiększyliśmy kontrast kolorów, aby spełniać wymagania WCAG AA. Tytuły interfejsów API na liście interfejsów API zostały przeniesione pod obraz, aby uniknąć możliwego niewystarczającego kontrastu kolorów.
• Weryfikacja formularza: na stronach tworzenia i edytowania aplikacji przyciski przesyłania formularza nie są już wyłączone i można je aktywować, aby zweryfikować formularz. Zweryfikowane pola formularza na stronach Tworzenie i Edytowanie aplikacji zawierają teraz tekstowe opisy błędów weryfikacji.
• Elastyczność: do wszystkich stron z wyjątkiem dokumentów SmartDocs ma zastosowanie maksymalna szerokość. Nawigacja w SmartDocs działa teraz na wąskich ekranach telefonów. Strony Tworzenie i edytowanie aplikacji są teraz bardziej responsywne na wąskich ekranach.

Zmiany w DOM, które mogą mieć wpływ na Twój portal

Zwróć szczególną uwagę na te kwestie:

• Paski nawigacyjne (nagłówek i stopka) oraz nagłówki stron zostały ostylowane (lub ukryte) za pomocą zastąpień CSS: zawartość strony ma teraz maksymalną szerokość. Aby rozszerzyć paski nawigacyjne i nagłówki stron do krawędzi okna przeglądarki, Apigee zastosowało stylizację pseudoelementu :before. Więcej informacji znajdziesz w artykule Zastępowanie kolorów podstawowych w paskach nawigacyjnych i nagłówkach stron.
• Na stronie znajdują się elementy z tłem, które rozciąga się do krawędzi okna przeglądarki (inne niż obraz tła na pełnym ekranie): maksymalna szerokość treści strony została ograniczona w celu poprawy responsywności, co może ograniczyć panele o pełnej szerokości na stronach niestandardowych. Więcej informacji o korzystaniu z nowych ustawień maksymalnej szerokości znajdziesz w artykule Tworzenie panelu o pełnej szerokości na stronie portalu.
• Określone poziomy nagłówków HTML zostały wybrane za pomocą selektorów CSS w celu zmodyfikowania stylów tekstu: poziom nagłówka zastosowany do określonych treści został zmieniony. Przykład: <H1> → <H2> zapoznaj się ze szczegółową listą zmian w tej wersji, aby dowiedzieć się, na jakie treści będą miały wpływ.
• W edytorze motywów portalu jako „kolor dodatkowy” wybrano biały lub bardzo jasny kolor: kolor dodatkowy jest używany w przypadku elementów nawigacyjnych, które na białym tle byłyby trudne do odczytania. Zalecamy wybranie dostępnego koloru dodatkowego, a następnie w razie potrzeby zastąpienie go niestandardowym kodem SCSS w określonych sytuacjach.
• Styl linków w tekście został zmieniony: styl linków jest teraz bardziej dostępny. Zapoznaj się ze zmianami poniżej, aby dowiedzieć się, jak mogą one wpływać na obecny styl.
• Obramowanie o szerokości 2 pikseli u dołu obszaru treści kart w widoku głównym zostało ostylowane lub ukryte za pomocą zastąpień CSS: to obramowanie zostało przeniesione z <mat-card-content> na obramowanie u góry elementu <mat-card-actions>.

Podsumowanie szczegółowych zmian

W sekcjach poniżej znajdziesz podsumowanie szczegółowych zmian wprowadzonych w tej wersji, podzielone według kategorii.

Zmiany w całym portalu

Poniżej znajdziesz podsumowanie zmian w portalu.

• Te zmienne nie są już używane:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Dostępne są nowe zmienne, które umożliwiają kontrolowanie maksymalnej szerokości głównej części treści i minimalnego poziomego dopełnienia głównej części treści:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Zmiany na głównym pasku nawigacyjnym

Zmiany na głównym pasku nawigacyjnym zostały podsumowane poniżej.

• Logo <img> jest teraz umieszczone w <a> zarówno na komputerach, jak i na urządzeniach mobilnych.
• Przycisk menu użytkownika to teraz <button> zamiast <a>

Zmiany stylu linku

Standardowe linki <a> w tekście mają teraz domyślnie podkreślenie i kolor tła (na podstawie ustawień motywu „kolor dodatkowy”) po najechaniu kursorem.

Zmiany na stronie 404

Poniżej znajdziesz podsumowanie zmian na stronie 404.

• „Zaloguj się teraz” kosztuje teraz <H2> zamiast <H1>
• Tekst wyjaśnienia to teraz <H2> zamiast <H1>

Strona interfejsów API

Poniżej znajdziesz podsumowanie zmian na stronie interfejsów API według kategorii.

• Karta danych wejściowych wyszukiwania/filtrowania interfejsu API:
  • Element <mat-card-content class="mat-card-content"> obejmuje teraz nagłówek i pole wprowadzania na karcie interfejsów API wyszukiwania
  • <H2> korzysta teraz z class="mat-subheading-1" zamiast z class="api-doc-filter-title"
  • <mat-form-field> korzysta teraz z appearance="outline"
  • Przed polem wprowadzania dodano ikonę wyszukiwania <mat-form-field>: "<mat-icon matPrefix>search</mat-icon>"
  • Do pola wejściowego dodano etykiety Aria i odwołania do elementów sterujących
• Komunikat o pustej liście interfejsów API:
  • Komunikat „Nie znaleziono interfejsów API” to teraz <H2> zamiast <H1>
  • Wyjaśnienie to teraz <H3> zamiast <H2>
• Lista kart interfejsów API:

  Komunikat „No APIs match your search” (Brak interfejsów API pasujących do Twojego wyszukiwania) jest teraz wyświetlany jako <H2> zamiast <H1>

• Karty interfejsu API:
  • Sieć >div class="api-doc-card-content-image-gradient"></div> została usunięta
  • Tytuł interfejsu API został przeniesiony z obrazu zawierającego <div> do <div class="api-doc-card-content-title"></div> bezpośrednio po obrazie <div>.
  • Tytuły interfejsów API to teraz <H2> zamiast <H1>

Lista aplikacji:

• Pusty stan:
  • Przycisk „Rozpocznij” ma teraz wartość <H2> zamiast <H1>
  • Wskazówki w stanie pustym to teraz <H3> zamiast <H2>
• Lista:
  • „Moje aplikacje” to teraz <H2> zamiast <H1>
  • <mat-row> jest teraz zniekształcony w <a>

Tworzenie i edytowanie stron aplikacji

Poniżej znajdziesz podsumowanie zmian na stronach Tworzenie i edytowanie aplikacji.

• Element <div class="app-buttons"> został przeniesiony na koniec elementu <form> i zastąpiony elementem <div class="form-buttons-sticky-container">
• Wszystkie wystąpienia klasy .app-layout-section zostały zmienione na .details-layout-section
• Wszystkie wystąpienia klasy .app-layout-section-title zostały zmienione na .details-layout-section-title
• Wszystkie nagłówki sekcji są teraz <H2> zamiast <div>
• Wszystkie wystąpienia klasy .app-layout-section-content zostały zmienione na .details-layout-section-content
• Lista interfejsów API nie jest już listą kart interfejsów API z przełącznikami (podobnie jak lista interfejsów API). Zamiast tego jest to tabela interfejsów API.
• Pole wprowadzania adresu URL wywołania zwrotnego zostało przeniesione do nowej sekcji
• Przycisk zapisywania korzysta teraz ze stylu mat-raised-button i ma kolor tła podstawowy.
• Tabele są teraz umieszczane w elemencie <div> z klasą .app-table-wrapper.
• Nagłówki tabel korzystają teraz z kodu <thead>
• Treść tabeli korzysta teraz z elementu <tbody>
• [style.width] nie jest już używany do ustawiania szerokości kolumn tabeli
• Wszystkie tagi <a> w tabeli używają teraz tagu <button.

Lista zespołów

Poniżej znajdziesz podsumowanie zmian na liście zespołu.

• Pusty stan:
  • „Rozpocznij” kosztuje teraz <H2> zamiast <H1>
  • „Utwórz zespół, aby zarządzać wspólną własnością aplikacji” to teraz <H3> zamiast <H2>
• Lista:

  Tytuł „Zespoły” to teraz <H2> zamiast <H1>

Tworzenie i edytowanie stron zespołu

Poniżej znajdziesz podsumowanie zmian na stronach Tworzenie zespołu i Edytowanie zespołu.

• W <form> klasa .teams-form została zastąpiona klasą .details-form.
• Element <div class="teams-buttons"> został przeniesiony na koniec <form> i zastąpiony elementem <div class="form-buttons-sticky-container">
• Wszystkie wystąpienia klasy .teams-layout-section zostały zmienione na .details-layout-section
• Wszystkie wystąpienia klasy .teams-layout-section-title zostały zmienione na .details-layout-section-title
• Wszystkie wystąpienia klasy .teams-layout-section-content zostały zmienione na .details-layout-section-content
• Dodano <div class="team-apps-container"> wokół <table class="team-apps">

SmartDocs

Poniżej znajdziesz podsumowanie zmian w interfejsie SmartDocs.

• Nawigacja z boku:
  • Nawigacja boczna została całkowicie przepisana przy użyciu komponentów angular-material.
  • Nagłówki nawigacji bocznej są teraz <H2> zamiast <div>
  • Elementy nawigacyjne używają teraz domyślnego koloru tekstu portalu zamiast „koloru dodatkowego” w edytorze motywów portalu.
  • Wybrane, aktywne i najechane elementy w nawigacji bocznej używają teraz ciemnych i jasnych wersji „koloru dodatkowego” w edytorze motywów portalu odpowiednio dla tekstu i tła.
• Treści:
  • Wiele podtytułów, takich jak „Parametry ścieżki” i „Parametry nagłówka”, jest teraz oznaczonych jako <H2> zamiast <H3>.
  • Elementy schematu na stronie przeglądu są teraz oznaczone jako <H3>=> zamiast <H2>

Dodawanie ulepszeń ułatwień dostępu do istniejącej strony głównej

Jeśli masz już portal, musisz edytować stronę główną, aby korzystać z nowych ulepszeń ułatwień dostępu dla kart, po których można się poruszać, jak opisano poniżej:

1. Usuń href="" z kontenera <mat-card>.
2. Użyj elementu <H2> zamiast elementu <H1> w nagłówku karty w elemencie <mat-card-header>.
3. W nagłówku karty <h2> umieść tekst w tagu <a class="navigable-content" href="href-name"> i ustaw atrybut href-name na odpowiednią wartość dla nawigacji po karcie.

Możesz też użyć tego szablonu karty:

<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

Zastępowanie kolorów podstawowych pasków nawigacyjnych i nagłówków stron

Aby rozszerzyć paski nawigacyjne i nagłówki stron do krawędzi okna przeglądarki, dodaj niestandardowe style do pasków nawigacyjnych i nagłówków stron za pomocą zaawansowanego edytora motywów, podobnie jak w przypadku paska nawigacyjnego nagłówka:

// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000; // background color for header navigation bar
  }
}

Procedura aktualizacji zarządzania interfejsami API aplikacji

Zmieniliśmy sposób zarządzania interfejsami API w aplikacji w zintegrowanym portalu. W sekcji interfejsów API podczas zarządzania aplikacją użytkownicy muszą kliknąć  lub  (zamiast przełącznika), aby odpowiednio włączyć lub wyłączyć dostęp do interfejsu API z poziomu aplikacji.

W razie potrzeby zaktualizuj procedury na portalu, które opisują, jak zarządzać interfejsami API na stronie aplikacji. Więcej informacji znajdziesz w artykule Zarządzanie interfejsami API w aplikacji.

Usunięte błędy

W tej wersji naprawiliśmy te błędy: Ta lista jest przeznaczona głównie dla użytkowników, którzy chcą sprawdzić, czy ich zgłoszenia zostały rozwiązane. Nie jest on przeznaczony do dostarczania szczegółowych informacji wszystkim użytkownikom.

Znane problemy

Listę znanych problemów ze zintegrowanym portalem znajdziesz w artykule Znane problemy ze zintegrowanym portalem.