20.07.20 – informacje o wersji zintegrowanego portalu Apigee Edge

Przeglądasz dokumentację Apigee Edge.
Otwórz dokumentację Apigee X.
Informacje

W poniedziałek 27 lipca rozpoczniemy publikowanie nowej wersji zintegrowanego portalu Apigee Edge.

Nowe funkcje i ulepszenia

W tej sekcji opisaliśmy nowe funkcje i ulepszenia wprowadzone w tej wersji.

Ulepszenia ułatwień dostępu i responsywności

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

  • Nawigacja za pomocą klawiatury: za pomocą klawiatury można teraz poruszać się po paskach nawigacyjnych nagłówków i stopek, bocznym panelu nawigacyjnym SmartDokumentów, na liście aplikacji, w widoku aplikacji oraz po kartach interfejsu API.
  • Zarządzanie fokusem: nawigowanie za pomocą paska nawigacyjnego w nagłówku i bocznego panelu nawigacyjnego w SmartDokumentach powoduje przeniesienie zaznaczenia na pierwszy element (<H1>) na stronie po wykonaniu działania związanego z nawigacją.
  • Aktywne regiony: zmiany na liście interfejsów API wynikające z filtrowania tekstu są teraz zgłaszane użytkownikom korzystającym z czytnika ekranu.
  • Znaczenie nagłówków HTML: cały tekst jest teraz zawarty w tagach HTML o dobrej semantyce. W całym portalu zastosowano teraz odpowiednią hierarchiczną strukturę nagłówków.
  • Pojedyncze użycie tagu <H1>: każda strona ma teraz tylko 1 element <H1>, dzięki czemu czytniki ekranu mogą łatwo zidentyfikować najtrafniejszy opis zawartości strony.
  • Wielkie litery w stylu: stosowanie wielkich liter jako akcentu wizualnego jest teraz stosowane wyłącznie w CSS, a nie w samym tekście.
  • Logiczna kolejność DOM: przyciski akcji na stronach Utwórz i Edytuj aplikację zostały przeniesione pod elementy formularza w DOM, aby można je było aktywować w logicznej kolejności na końcu interakcji z formularzem.
  • Tekstowe opisy elementów wizualnych: ulepszyliśmy korzystanie z etykiet, tekstu alternatywnego i tekstu przycisków, co ułatwia nawigację przy użyciu czytnika ekranu.
  • Kontrast kolorów: w wielu miejscach w produkcie zwiększyliśmy kontrast kolorów, aby spełnić wymagania WCAG AA dotyczące kontrastu. Tytuły interfejsów API na liście interfejsów API zostały przeniesione pod obrazem, aby uniknąć potencjalnego niewystarczającego kontrastu kolorów.
  • Sprawdzanie poprawności formularza: na stronach „Utwórz i edytuj aplikację” przyciski przesyłania formularzy nie są już wyłączone i można je aktywować, aby sprawdzić poprawność formularza. Zweryfikowane pola formularza na stronach Tworzenie i edytowanie aplikacji zawierają teraz tekstowe opisy błędów weryfikacji.
  • Reagowanie: obecnie obowiązuje maksymalna szerokość, która dotyczy wszystkich stron oprócz Inteligentnych Dokumentów. Nawigacja w Inteligentnych dokumentach działa teraz na wąskich ekranach telefonu. Strony „Utwórz i edytuj aplikację” są teraz bardziej responsywne na wąskich ekranach.

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

Szczególnie warto wziąć pod uwagę te kwestie:

  • Style pasków nawigacyjnych (nagłówka i stopki) i nagłówków stron zostały zmienione (lub ukryte) z użyciem zastąpień CSS: istnieje teraz maksymalna szerokość zawartości strony. Aby rozszerzyć paski nawigacyjne i nagłówki stron do krawędzi okna przeglądarki, w Apigee zastosowano pseudoelement :before. Więcej informacji znajdziesz w artykule Zastępowanie kolorów podstawowych pasków nawigacyjnych i nagłówków stron.
  • Niektóre elementy strony mają tło sięgające krawędzi okna przeglądarki (inne niż pełnoekranowe obrazy tła): maksymalna szerokość strony została ograniczona, aby poprawić elastyczność, co może ograniczać panele o pełnej szerokości występujące wcześniej 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 zmienione za pomocą selektorów arkusza CSS w celu modyfikowania stylów tekstu: zmienił się poziom nagłówka stosowany do określonych treści. Przykład: <H1> → <H2> Przejrzyj szczegółową listę zmian wprowadzonych w tej wersji, aby dowiedzieć się, których treści dotyczy.
  • W edytorze motywu portalu jako „kolor dodatkowy” wybierany jest kolor biały lub bardzo jasny: kolor dodatkowy jest używany w przypadku elementów nawigacyjnych, które trudno dostrzec na białym tle. Zalecamy wybranie koloru dodatkowego o stanie ułatwienia dostępu, a w konkretnych sytuacjach zastąpienie go w przypadku niestandardowych elementów CSS.
  • Zmiana stylu linków w tekście: teraz łatwiej można dostosować styl linków. Zapoznaj się ze zmianami poniżej, aby dowiedzieć się, jak te elementy mogą wchodzić w interakcję z dotychczasowym stylem.
  • Dolne obramowanie o szerokości 2 pikseli w obszarze treści na kartach widoku głównego zostało zmienione lub ukryte za pomocą zastąpień CSS: <mat-card-actions> to obramowanie zostało przeniesione z <mat-card-content> do górnej części.

Podsumowanie szczegółowych zmian

Poniżej znajdziesz szczegółowe informacje o zmianach, które wprowadziliśmy w tej wersji, według kategorii.

Zmiany w całym portalu

Poniżej znajdziesz podsumowanie zmian w całym 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
  • Wprowadziliś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

Poniżej znajdziesz podsumowanie zmian na głównym pasku nawigacyjnym.

  • Logo <img> zostało spakowane do formatu <a> na potrzeby ekranów komputerów i urządzeń mobilnych
  • Przycisk menu dla użytkowników to teraz <button> zamiast <a>

Linki standardowe <a> w tekście mają teraz domyślnie podkreślenie i kolor tła (na podstawie „koloru dodatkowego”) po najechaniu kursorem.

Zmiany na stronach 404

Poniżej znajdziesz podsumowanie zmian na stronie 404.

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

Strona interfejsów API

Poniżej znajdziesz podsumowanie zmian na stronie Interfejsy API według kategorii.

  • Karta wyszukiwania/filtra w interfejsie API:
    • <mat-card-content class="mat-card-content"> zawija nagłówek i dane wejściowe karty interfejsów API wyszukiwania
    • Aplikacja <H2> używa teraz class="mat-subheading-1" zamiast class="api-doc-filter-title"
    • Aplikacja <mat-form-field> używa teraz dodatku appearance="outline"
    • Ikona wyszukiwania została dodana do elementu <mat-form-field> przed wprowadzeniem: "<mat-icon matPrefix>search</mat-icon>"
    • Do danych wejściowych dodano etykiety Aria i odwołania do ustawień
  • Pusta wiadomość z listą interfejsów API:
    • Komunikat „Nie znaleziono interfejsów API” ma teraz wartość <H2> zamiast <H1>
    • Wyjaśnienie to teraz <H3> zamiast <H2>
  • Lista kart interfejsu API:

    „Brak interfejsów API pasujących do Twojego wyszukiwania” to teraz <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> tuż po obrazie <div>
    • Tytuł interfejsu API to teraz <H2> zamiast <H1>

Lista aplikacji:

  • Stan pusty:
    • „Rozpocznij” to teraz <H2> zamiast <H1>
    • Wskazówki dotyczące pustego stanu to teraz <H3> zamiast <H2>
  • Lista:
    • „Moje aplikacje” to teraz <H2> zamiast <H1>
    • Komponent <mat-row> jest teraz zniekształcony w elemencie <a>

Tworzenie i edytowanie stron aplikacji

Poniżej znajdziesz podsumowanie zmian na stronach Utwórz i Edytuj aplikację.

  • Domena <div class="app-buttons"> została przeniesiona na koniec <form> i zastąpiona przez <div class="form-buttons-sticky-container">
  • Zmieniono całe wykorzystanie zajęć .app-layout-section na .details-layout-section
  • Zmieniono całe wykorzystanie zajęć .app-layout-section-title na .details-layout-section-title
  • Nagłówki wszystkich sekcji mają teraz format <H2>, a nie <div>
  • Zmieniono całe wykorzystanie zajęć .app-layout-section-content 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,
  • Adres URL wywołania zwrotnego został przeniesiony do nowej sekcji
  • Przycisk Zapisz używa teraz stylu przycisku z podniesieniem maty i tła w podstawowym kolorze.
  • Tabele są teraz umieszczone w obiekcie <div> z klasą .app-table-wrapper
  • Nagłówki tabeli używają teraz opakowania <thead>
  • Treść tabeli używa teraz opakowania <tbody>
  • Pole [style.width] nie jest już używane do ustawiania szerokości kolumn tabeli
  • Wszystkie tagi <a> w tabeli używają teraz parametru <button

Lista drużyn

Poniżej znajdziesz podsumowanie zmian na liście Zespoły.

  • Stan pusty:
    • Pole „Rozpocznij” to teraz <H2> zamiast <H1>
    • Ustawienie „Utwórz zespół do zarządzania współdzielonymi prawami własności do aplikacji” to teraz <H3> zamiast <H2>
  • Lista:

    Nazwa „Zespoły” to teraz <H2>, a nie <H1>

Tworzenie i edytowanie stron zespołu

Poniżej znajduje się podsumowanie zmian na stronach Tworzenie i edytowanie zespołu.

  • <form> zajęcia .teams-form zostały zastąpione przez .details-form
  • Tabela <div class="teams-buttons"> została przeniesiona na koniec tabeli <form> i zastąpiona przez <div class="form-buttons-sticky-container">
  • Zmieniono całe wykorzystanie zajęć .teams-layout-section na .details-layout-section
  • Zmieniono całe wykorzystanie zajęć .teams-layout-section-title na .details-layout-section-title
  • Zmieniono całe wykorzystanie zajęć .teams-layout-section-content na .details-layout-section-content
  • Dodano ulicę <div class="team-apps-container"> wokół lokalizacji <table class="team-apps">

SmartDocs

Poniżej znajdziesz podsumowanie zmian w interfejsie SmartDokumentacja.

  • Nawigacja z boku:
    • Pasek boczny został całkowicie zaktualizowany z użyciem kanciastych komponentów
    • Nagłówki nawigacyjne z boku są teraz oznaczone jako <H2>, a nie <div>
    • Elementy nawigacyjne używają teraz domyślnego koloru tekstu portalu zamiast „koloru dodatkowego” edytora motywu portalu
    • Wybrane, zaznaczone i najechane elementy w bocznym panelu nawigacyjnym korzystają teraz z ciemnej i jasnej wersji edytora motywu portalu „kolor dodatkowy” dla tekstu i tła
  • Treść:
    • Wiele podtytułów, takich jak „Parametry ścieżki” i „Parametry nagłówka”, ma teraz etykietę <H2>, a nie <H3>.
    • Encje schematu na stronie Przegląd mają teraz wartość <H3>=> zamiast <H2>

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

Jeśli masz portal po zamknięciu portalu, musisz zmodyfikować stronę główną, by skorzystać z nowych ulepszeń ułatwień dostępu w przypadku kart w nawigacji. Instrukcje znajdziesz poniżej:

  1. Usuń plik href="" z kontenera <mat-card>.
  2. Użyj <H2> zamiast <H1> jako nagłówka karty w: <mat-card-header>.
  3. W nagłówku karty <h2> umieść tekst w polu <a class="navigable-content" href="href-name"> i ustaw wartość href-name na taką, która umożliwi nawigację 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 pasków nawigacyjnych i nagłówków stron

Aby rozszerzyć paski nawigacyjne i nagłówki stron tak, aby wykraczały poza krawędź okna przeglądarki, dodaj niestandardowe style 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
  }
}

Aktualizowanie procedury zarządzania interfejsami API aplikacji

Zmienił się sposób, w jaki użytkownicy mogą zarządzać interfejsami API w aplikacji w zintegrowanym portalu. Jeśli zarządzasz aplikacją, w sekcji interfejsów API użytkownicy muszą kliknąć ikona włączania lub ikona wyłączania (zamiast przełącznika), aby odpowiednio włączyć lub wyłączyć dostęp do interfejsu API z aplikacji.

Zaktualizuj w portalu wszystkie procedury, które opisują, jak zarządzać interfejsami API na stronie aplikacji (w stosownych przypadkach). Więcej informacji znajdziesz w artykule o zarządzaniu interfejsami API w aplikacji.

Naprawione błędy

Poprawiliśmy w niej wymienione niżej błędy. Ta lista jest przeznaczona głównie dla użytkowników, którzy chcą sprawdzić, czy ich zgłoszenia do zespołu pomocy zostały rozwiązane. Jej zadaniem nie jest dostarczanie szczegółowych informacji o wszystkich użytkownikach.

Identyfikator problemu Nazwa komponentu Opis
161269688 Zintegrowany portal

Miniatury zasobów w Apigee hybrydowe renderują się nieprawidłowo

Miniatury są teraz wyświetlane prawidłowo na stronie Zasoby.

161295683 Zintegrowany portal

Awaria serwera bez ustawionego opisu aplikacji

Teraz proces tworzenia aplikacji zakończy się powodzeniem, jeśli jej opis (pole opcjonalne) nie jest zdefiniowany.

160898967 Zintegrowany portal

Strona docelowa portalu nie przewija się prawidłowo

Stronę docelową portalu można teraz przewijać.

160613314,
159197760,
158643196,
158069283,
158069066,
140154942
Zintegrowany portal

Inne poprawki zabezpieczeń

158593496 Zintegrowany portal

Nie udało się utworzyć aplikacji dla deweloperów w portalach w wersji 1

Rozwiązaliśmy problem, który uniemożliwiał tworzenie aplikacji dla deweloperów w portalach w wersji 1.

158318079 Zintegrowany portal

Dodawanie lub modyfikowanie adresu URL wywołania zwrotnego w portalu dla programistów nie działa

Rozwiązaliśmy problem, który uniemożliwiał użytkownikom portalu dodawanie i modyfikowanie adresu URL wywołania zwrotnego na stronie interfejsów API.

157902256 Zintegrowany portal

W przypadku publikacji można zastąpić aktualizację nazwy strony na stronie Szczegóły strony

Rozwiązaliśmy problem, który powodował zastępowanie nazwy strony podczas publikowania portalu (co było powodowane przez stan wyścigu).

138993728 Zintegrowany portal

Sortowanie i wyszukiwanie adresów e-mail w programach dla programistów nie działa

Wyszukiwanie i sortowanie kont użytkowników indywidualnych działa teraz zgodnie z oczekiwaniami.

Znane problemy

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