20.07.20 – informacje o wersji zintegrowanego portalu Apigee Edge

Przeglądasz dokumentację Apigee Edge.
Przejdź do Dokumentacja Apigee X. informacje.

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

Nowe funkcje i ulepszenia

W tej sekcji opisano nowe funkcje i ulepszenia wprowadzone w tej wersji.

Ulepszenia ułatwień dostępu i czasu reakcji

Poniżej znajdziesz listę ulepszeń ułatwień dostępu i czasu reakcji wprowadzone w tej wersji.

• Nawigacja za pomocą klawiatury: możesz teraz poruszać się po paskach nawigacyjnych w nagłówku i stopce, na bocznym pasku nawigacyjnym SmartDocuments, na liście aplikacji, w widoku aplikacji oraz na kartach interfejsu API za pomocą klawiatury.
  
• Zarządzanie fokusem: korzystanie z paska nawigacyjnego w nagłówku i bocznego panelu nawigacyjnego SmartDokumenty powoduje przeniesienie zaznaczenia do pierwszego elementu <H1> na stronie po wykonaniu działania nawigacji.
• Aktywne regiony: zmiany na liście interfejsów API wynikające z filtrowania tekstowego są teraz zgłaszane użytkownikom korzystającym z czytnika ekranu.
• semantyczne nagłówki HTML: cały tekst jest teraz zawarty w tagach HTML odpowiednich pod względem semantycznym; Odpowiednio hierarchiczna struktura nagłówków jest teraz stosowana w całym portalu.
• Użycie tagu <H1> w pojedynkę: każda strona ma teraz tylko jeden tag <H1>, dzięki czemu czytniki ekranu mogą łatwo zidentyfikować najbardziej wyczerpujący opis jej zawartości.
• Wielkie litery w stylu: Stosowanie samych wielkich liter jako wizualnego akcentu jest teraz stosowane wyłącznie w CSS, a nie w samym tekście.
• Logiczna kolejność DOM: przyciski działań na stronach Utwórz i Edytuj aplikację zostały przeniesione pod elementami formularza w DOM, aby można je aktywować w logicznej kolejności po zakończeniu interakcji z formularzem.
• Tekstowe opisy elementów wizualnych: ulepszyliśmy korzystanie z etykiet, tekstu alternatywnego i tekstu przycisków, które usprawniają nawigację przy użyciu czytnika ekranu.
• Kontrast kolorów: kontrast kolorów został zwiększony, aby spełnić wymagania WCAG AA dotyczące kontrastu w wielu miejscach w produkcie. Tytuły interfejsów API na liście interfejsów API zostały przeniesione pod obraz, aby uniknąć ewentualnego niewystarczającego kontrastu kolorów.
• Weryfikacja formularza: na stronach Utwórz i Edytuj aplikację przyciski przesyłania formularzy nie są już wyłączone i można je aktywować w celu sprawdzenia formularza. Zweryfikowane pola formularzy na stronach tworzenia i edytowania aplikacji zawierają teraz tekstowe opisy błędów weryfikacji.
• Reagowanie: obowiązuje teraz maksymalna szerokość stron, która obowiązuje w przypadku wszystkich stron oprócz dokumentów SmartDocuments. Nawigacja w Dokumentach Google działa teraz na wąskich ekranach telefonów. Strony „Utwórz i edytuj aplikację” działają teraz lepiej na wąskich ekranach.

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

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

• Style pasków nawigacyjnych (nagłówka i stopki) oraz nagłówków stron zostały ustawione (lub ukryte) z zastąpieniami CSS: obowiązuje teraz maksymalna szerokość zawartości strony. Aby rozszerzyć paski nawigacyjne i nagłówki stron do krawędzi okna przeglądarki, usługa Apigee określiła styl pseudoelementu :before. Więcej informacji znajdziesz w artykule Zastępowanie kolorów podstawowych w paskach nawigacyjnych i nagłówkach stron.
• Niektóre elementy strony, których tło sięgają do krawędzi okna przeglądarki (inne niż pełnoekranowe obrazy tła): maksymalna szerokość zawartości strony została ograniczona, aby poprawić szybkość reagowania, co może ograniczyć wyświetlanie paneli 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.
• Kierowanie na określone poziomy nagłówków HTML za pomocą selektorów CSS służących do modyfikowania stylów tekstu: poziom nagłówka zastosowany do pewnych treści uległ zmianie. Przykład: <H1> → <H2> przejrzyj szczegółową listę zmian tej wersji, aby dowiedzieć się, jakich treści dotyczą zmiany.
• Jako „kolor dodatkowy” jest wybrany kolor biały lub bardzo jasny w edytorze motywów portalu: kolor dodatkowy jest używany do elementów nawigacji, które są trudne do zauważenia na białym tle. Zalecamy wybranie dodatkowego koloru, który jest dostępny, a następnie – w razie potrzeby – zastąpienie go kolorem niestandardowym w określonych sytuacjach.
• Zmieniliśmy styl linków w tekście: układ linków jest teraz łatwiejszy w obsłudze. Zapoznaj się ze zmianami poniżej, aby dowiedzieć się, jak może on współdziałać z istniejącymi stylami.
• Dolne obramowanie o długości 2 pikseli w obszarze treści kart widoku głównego zostało zmienione lub ukryte z zastąpieniami CSS: to obramowanie zostało przeniesione z <mat-card-content> na obramowanie <mat-card-actions>.

Podsumowanie szczegółowych zmian

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

Zmiany w całym portalu

Poniżej znajduje się podsumowanie zmian dotyczących całego 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
• Dodaliśmy nowe zmienne, które umożliwiają kontrolowanie maksymalnej szerokości głównego obszaru treści i minimalnego dopełnienia poziomego głównego obszaru treści:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Zmiany głównego paska nawigacyjnego

Podsumowanie zmian na głównym pasku nawigacyjnym znajdziesz poniżej.

• Logo <img> jest teraz otoczone nawiasem klamrowym <a> na ekranach komputerów i urządzeń mobilnych.
• Przycisk menu użytkownika to teraz <button>, a nie <a>

Zmiany stylu linku

Standardowe linki <a> w tekście są teraz domyślnie podkreślane, a kolor tła (na podstawie ustawienia „kolor dodatkowy”) dostępny po najechaniu kursorem.

Zmiany na stronie 404

Poniżej znajduje się podsumowanie zmian wprowadzonych na stronie 404.

• „Zaloguj się” jest teraz <H2> zamiast <H1>
• Tekst wyjaśnienia to teraz <H2>, a nie <H1>

Strona interfejsów API

Poniżej znajduje się podsumowanie zmian na stronie interfejsów API (według kategorii).

• Karta wejściowa wyszukiwania/filtra interfejsu API:
  • <mat-card-content class="mat-card-content"> opakowuje teraz nagłówek i dane wejściowe karty interfejsów API wyszukiwania
  • <H2> używa teraz class="mat-subheading-1" zamiast class="api-doc-filter-title"
  • <mat-form-field> używa teraz appearance="outline"
  • Ikona wyszukiwania została dodana do elementu <mat-form-field> przed danymi wejściowymi: "<mat-icon matPrefix>search</mat-icon>"
  • Etykiety Aria i odwołania do elementów sterujących zostały dodane do danych wejściowych
• Pusta wiadomość z listą interfejsów API:
  • „Nie znaleziono interfejsów API” jest teraz <H2> zamiast <H1>
  • Wyjaśnienie to teraz <H3>, a nie <H2>
• Lista kart interfejsu API:

  „Brak interfejsów API pasujących do Twojego wyszukiwania” jest teraz <H2> zamiast <H1>

• Karty interfejsów 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ł interfejsu API to teraz <H2>, a nie <H1>

Lista aplikacji:

• Pusty stan:
  • „Rozpocznij” jest teraz <H2> zamiast <H1>
  • Puste wskazówki dotyczące stanu to teraz <H3> zamiast <H2>
• Lista:
  • „Moje aplikacje” jest teraz <H2> zamiast <H1>
  • Pole <mat-row> jest teraz zniekształcone w elemencie <a>

Tworzenie i edytowanie stron aplikacji

Poniżej znajduje się podsumowanie zmian na stronach tworzenia i edytowania aplikacji.

• Element <div class="app-buttons"> został przeniesiony na koniec formularza <form> i zastąpione przez <div class="form-buttons-sticky-container">
• Całkowite wykorzystanie klasy .app-layout-section zostało zmienione na .details-layout-section
• Całkowite wykorzystanie klasy .app-layout-section-title zostało zmienione na .details-layout-section-title
• Wszystkie nagłówki sekcji to teraz <H2>, a nie <div>
• Całkowite wykorzystanie klasy .app-layout-section-content zostało 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). Jest to tabela interfejsów API
• Pole do wpisania adresu URL wywołania zwrotnego zostało przeniesione do nowej sekcji
• Tło przycisku zapisywania ma teraz styl z podniesionym przyciskiem i jej tło w kolorze głównym
• Tabele są teraz uwzględnione w elemencie <div> z klasą .app-table-wrapper
• Nagłówki tabel używają teraz otoki <thead>
• Treść tabel używa teraz otoki <tbody>
• Parametr [style.width] nie jest już używany do ustawiania szerokości kolumn tabeli
• Wszystkie tagi (<a>) w tabeli używają teraz <button

Lista zespołów

Podsumowanie zmian na liście zespołów znajduje się poniżej.

• Pusty stan:
  • „Rozpocznij” jest teraz <H2> zamiast <H1>
  • „Utwórz zespół do zarządzania współdzieloną własnością aplikacji” jest teraz <H3> zamiast <H2>
• Lista:

  „Zespoły” tytuł ma teraz wartość <H2> zamiast <H1>

Tworzenie i edytowanie stron zespołu

Poniżej znajduje się podsumowanie zmian na stronach tworzenia i edytowania zespołu.

• <form> zajęcia .teams-form zostały zastąpione przez .details-form
• Element <div class="teams-buttons"> został przeniesiony na koniec listy <form> i zastąpiony przez <div class="form-buttons-sticky-container">
• Całkowite wykorzystanie klasy .teams-layout-section zostało zmienione na .details-layout-section
• Całkowite wykorzystanie klasy .teams-layout-section-title zostało zmienione na .details-layout-section-title
• Całkowite wykorzystanie klasy .teams-layout-section-content zostało zmienione na .details-layout-section-content
• Obiekt <div class="team-apps-container"> został dodany wokół komórki <table class="team-apps">

SmartDocs

Poniżej znajduje się podsumowanie zmian w interfejsie SmartDocuments.

• Nawigacja z boku:
  • Boczny panel nawigacyjny został całkowicie przeredagowany z użyciem komponentów z materiałem Anulary
  • Nagłówki bocznych elementów nawigacyjnych mają teraz etykietę <H2> zamiast <div>
  • Elementy nawigacyjne używają teraz domyślnego koloru tekstu portalu zamiast „koloru dodatkowego” edytora motywu portalu
  • Wybrane, zaznaczone i najeżdżane kursorem elementy w bocznym panelu nawigacyjnym są teraz używane w ciemnych i jasnych wersjach edytora motywów portalu „kolor dodatkowy” dla tekstu i tła
• Treść:
  • wielu podtytułów, np. „Parametry ścieżki”. i „Parametry nagłówka” są teraz równe <H2> zamiast <H3>
  • Elementy schematu na stronie przeglądu to teraz <H3>=> zamiast <H2>

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

Jeśli korzystasz z portalu zamykającego, musisz edytować stronę główną, aby skorzystać z nowych ułatwień dostępu dla kart nawigacyjnych. Poniżej znajdziesz opis tego artykułu:

1. Usuń plik href="" z kontenera <mat-card>.
2. W nagłówku karty w ciągu <mat-card-header> użyj <H2> zamiast <H1>.
3. W nagłówku karty <h2> umieść tekst w polu <a class="navigable-content" href="href-name">, a href-name ustaw odpowiednią wartość do nawigacji na 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 w przypadku pasków nawigacyjnych i nagłówków stron

Wydłużanie pasków nawigacyjnych i nagłówków stron dodaj niestandardowy styl pasków nawigacyjnych i nagłówków strony za pomocą zaawansowanego edytora motywów (podobnie jak w przypadku paska nawigacyjnego w nagłówku):

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

Aktualizacja procedury zarządzania interfejsami API aplikacji

Zmieniła się interakcja użytkownika przy zarządzaniu interfejsami API w aplikacji w zintegrowanym portalu. Podczas zarządzania aplikacją użytkownicy muszą w sekcji Interfejsy API kliknąć lub (zamiast przełącznika), aby włączyć lub wyłączyć dostęp do interfejsu API z aplikacji.

W razie potrzeby zaktualizuj w portalu wszystkie procedury opisujące sposób zarządzania interfejsami API na stronie aplikacji. Więcej informacji: Zarządzanie interfejsami API w aplikacji

Usunięto błędy

W tej wersji poprawiono następujące błędy. Ta lista jest przeznaczona głównie dla użytkowników, którzy sprawdzają czy zgłoszenia do zespołu pomocy zostały naprawione. Nie zawiera on szczegółowych informacji na temat wszystkich użytkowników.

Znane problemy

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