20.07.20 – informacje o wersji zintegrowanego portalu Apigee Edge

Wyświetlasz dokumentację Apigee Edge.
Otwórz 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 responsywności

Poniżej znajdziesz listę ulepszeń w zakresie ułatwień dostępu i responsywności, 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 interfejsów API.
  
• Zarządzanie fokusem: nawigowanie za pomocą paska nawigacyjnego w nagłówku i nawigacji bocznej SmartDocs powoduje przeniesienie fokusu na pierwszy element <H1> na stronie po wykonaniu działania nawigacyjnego.
• Regiony aktywne: 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.
• Użycie pojedynczego elementu <H1>: każda strona ma teraz tylko jeden element <H1>, dzięki czemu czytniki ekranu mogą łatwo zidentyfikować najbardziej informacyjny opis zawartości strony.
• Stylistyczne użycie wielkich liter: 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: ulepszono użycie etykiet, tekstu alternatywnego i tekstu przycisków, co ułatwia nawigację za pomocą czytnika ekranu.
• Kontrast kolorów: kontrast kolorów został zwiększony, aby w wielu miejscach w usłudze spełniać wymagania dotyczące kontrastu WCAG AA. Tytuły interfejsów API na liście interfejsów API zostały przeniesione pod obraz, aby uniknąć ewentualnego niewystarczającego kontrastu kolorów.
• Sprawdzanie poprawności formularza: na stronach tworzenia i edytowania aplikacji przyciski przesyłania formularza nie są już wyłączone i można je aktywować, aby sprawdzić poprawność formularza. Sprawdzone pola formularza na stronach tworzenia i edytowania aplikacji zawierają teraz opisy tekstowe błędu sprawdzania poprawności.
• Responsywność: wszystkie strony, z wyjątkiem SmartDocs, mają teraz maksymalną szerokość. Nawigacja SmartDocs działa teraz na wąskich ekranach telefonów. Strony tworzenia i edytowania 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 ostylowało pseudoelement :before. Więcej informacji znajdziesz w artykule Zastępowanie kolorów podstawowych pasków nawigacyjnych i nagłówków stron.
• Elementy strony mają tło, które rozciąga się do krawędzi okna przeglądarki (inne niż obraz tła na pełnym ekranie): maksymalna szerokość zawartości strony została ograniczona, aby poprawić responsywność, co może ograniczyć panele o pełnej szerokości na stronach niestandardowych. Więcej informacji o korzystaniu z nowych ustawień max-width 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, aby zmodyfikować style tekstu: zmienił się poziom nagłówka zastosowany do określonej treści. Na przykład: <H1> → <H2>. Aby dowiedzieć się, których treści dotyczą zmiany, zapoznaj się ze szczegółową listą zmian w tej wersji.
• 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 będą trudne do zobaczenia na białym tle. Zalecamy wybranie dostępnego koloru dodatkowego, a następnie w razie potrzeby zastąpienie go niestandardowym kodem scss w określonych sytuacjach.
• Style linków w tekście zostały zmienione:style linków są teraz bardziej dostępne. Zapoznaj się ze zmianami poniżej, aby dowiedzieć się, jak mogą one współdziałać z Twoimi dotychczasowymi stylami.
• Dolna krawędź o grubości 2 pikseli w obszarze treści kart widoku głównego została ostylowana lub ukryta za pomocą zastąpień CSS: ta krawędź została przeniesiona z elementu <mat-card-content> do górnej krawędzi elementu <mat-card-actions>.

Podsumowanie szczegółowych zmian

W poniższych sekcjach znajdziesz podsumowanie szczegółowych zmian, które zostały wprowadzone 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
• Dostępne są nowe zmienne, które umożliwiają kontrolowanie maksymalnej szerokości głównego obszaru treści i minimalnego poziomego dopełnienia głównego obszaru treści:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Zmiany na głównym pasku nawigacyjnym

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

• Logo <img> jest teraz opakowane w element <a> zarówno w przypadku komputerów, jak i urządzeń mobilnych.
• Przycisk menu rozwijanego użytkownika jest teraz elementem <button> zamiast <a>.

Zmiany stylu linków

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” jest teraz elementem <H2> zamiast <H1>.
• Tekst wyjaśnienia jest teraz elementem <H2> zamiast <H1>.

Strona interfejsów API

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

• Karta wyszukiwania/filtrowania interfejsów API:
  • <mat-card-content class="mat-card-content"> zawiera teraz nagłówek i pole wyszukiwania interfejsów API.
  • Element <H2> używa teraz class="mat-subheading-1" zamiast class="api-doc-filter-title".
  • Element <mat-form-field> używa teraz klasy appearance="outline".
  • Do elementu <mat-form-field> przed polem dodano ikonę wyszukiwania: "<mat-icon matPrefix>search</mat-icon>"
  • Do pola dodano etykiety aria i odwołania do elementów sterujących.
• Komunikat o pustej liście interfejsów API:
  • „Nie znaleziono interfejsów API” jest teraz elementem <H2> zamiast <H1>.
  • Wyjaśnienie jest teraz elementem <H3> zamiast <H2>.
• Lista kart interfejsów API:

  „Nie znaleziono interfejsów API pasujących do wyszukiwania” jest teraz elementem <H2> zamiast <H1>.

• Karty interfejsów API:
  • Usunięto element >div class="api-doc-card-content-image-gradient"></div>.
  • Tytuł interfejsu API został przeniesiony z elementu <div> zawierającego obraz do elementu <div class="api-doc-card-content-title"></div> bezpośrednio po elemencie <div> z obrazem.
  • Tytuły interfejsów API są teraz elementami <H2> zamiast <H1>.

Lista aplikacji:

• Pusty stan:
  • „Rozpocznij” jest teraz elementem <H2> zamiast <H1>.
  • Wskazówki dotyczące pustego stanu są teraz elementem <H3> zamiast <H2>.
• Lista:
  • „Moje aplikacje” jest teraz elementem <H2> zamiast <H1>.
  • <mat-row> jest teraz opakowany w <a>.

Strony tworzenia i edytowania aplikacji

Poniżej znajdziesz podsumowanie zmian na stronach tworzenia i edytowania aplikacji.

• Element <div class="app-buttons"> został przeniesiony na koniec elementu <form> i zastąpiony elementem <div class="form-buttons-sticky-container">.
• Wszystkie użycia klasy .app-layout-section zostały zmienione na .details-layout-section.
• Wszystkie użycia klasy .app-layout-section-title zostały zmienione na .details-layout-section-title.
• Wszystkie nagłówki sekcji są teraz elementami <H2> zamiast <div>
• Wszystkie użycia 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 adresu URL wywołania zwrotnego zostało przeniesione do nowej sekcji.
• Przycisk zapisywania używa teraz stylu mat-raised-button i koloru podstawowego tła.
• Tabele są teraz opakowane w element <div> z klasą .app-table-wrapper.
• Nagłówki tabel używają teraz elementu <thead>.
• Treści tabel używają teraz elementu <tbody>.
• Do ustawiania szerokości kolumn tabeli nie jest już używany element [style.width].
• Wszystkie tagi <a> w tabeli używają teraz elementu <button.

Lista zespołów

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

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

  Tytuł „Zespoły” jest teraz elementem <H2> zamiast <H1>.

Strony tworzenia i edytowania zespołu

Poniżej znajdziesz podsumowanie zmian na stronach tworzenia i edytowania zespołu.

• W elemencie <form> klasa .teams-form została zastąpiona klasą .details-form.
• <div class="teams-buttons"> został przeniesiony na koniec elementu <form> i zastąpiony elementem <div class="form-buttons-sticky-container">.
• Wszystkie użycia klasy .teams-layout-section zostały zmienione na .details-layout-section.
• Wszystkie użycia klasy .teams-layout-section-title zostały zmienione na .details-layout-section-title.
• Wszystkie użycia klasy .teams-layout-section-content zostały zmienione na .details-layout-section-content.
• <div class="team-apps-container"> został dodany otaczający <table class="team-apps">

SmartDocs

Poniżej znajdziesz podsumowanie zmian w interfejsie SmartDocs.

• Nawigacja boczna:
  • Nawigacja boczna została całkowicie przepisana za pomocą komponentów angular-material.
  • Nagłówki nawigacji bocznej są teraz elementami <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 wariantów „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 <H2> zamiast <H3>.
  • Encje schematu na stronie przeglądu są teraz elementami <H3>=> zamiast <H2>.

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

Jeśli masz istniejący portal, musisz edytować stronę główną, aby skorzystać z nowych ulepszeń w zakresie ułatwień dostępu do 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 <H1> w przypadku nagłówka karty w elemencie <mat-card-header>.
3. W nagłówku karty <h2> opakuj tekst w element <a class="navigable-content" href="href-name"> i ustaw href-name na odpowiednią wartość dla nawigacji karty.

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 pasków nawigacyjnych i nagłówków stron 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
  }
}

Aktualizowanie procedury zarządzania interfejsami API aplikacji

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

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

Naprawione błędy

W tej wersji naprawiono 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 zawiera szczegółowych informacji dla wszystkich użytkowników.

Znane problemy

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