Stickman - Demonstracja
Zasadnicze cele aplikacji:
- Napisać aplikację w Ractie i prześledzić jej tworzenie od początku.
- Demonstracja jak osadzać obiekty SVG tak aby uzyskiwać dostęp do jego elementów.
Zasadniczo mamy tutaj kilka trybów: osadzanie bezpośrednie (najefektywniejsze
z punktu widzenia modyfikacji), osadzanie za pomocą
(nie mamy dostępu do elementów), (możemy się odwoływać uzyskując dostęp do elementu
document.getElementById('svg').contentDocument.getElementById('pathId)), embed lub iframe.
(http://slides.com/sarasoueidan/styling-animating-svgs-with-css--2#/) - Repreznetacja stylów SVG (możemy używać stylów CSS w zależności, gdzie utworzymy obiekty.)
- Warunkowa reprezentacja stanów na ekranie:
- bezpieczny (lepiej neutral)
- niebezpieczny (lepiej danger lub warning)
- wartwy (lepiej error)
W ten sposób tworzymy uniwersalny język projektowy (Design Language / System). Pomagamy również wielokrotnie wykorzystywać komponenty.
- Wyróżniamy różne rodzaje stanów:
- stan dziedzinowy
- stan wizualny
- stan uniwersalny W celu tłumaczenia powinniśmy zbudować 'Model prezentacji' - zbiór metod i klas, które będą potrafić przetłumaczyć stan. To jest podobne od idei 'skórek' - Themes.
- Gdzie i jak przechowujemy stan:
- stan może być utrwalony jako wartość komponentu,
- stan może być wyznaczany za każdym razem dynamicznie za pomocą funktorów.
- Uaktualnianie widoku elementu na ekranie:
- componentDidMount lub componentDidUpdate
- setTimeout(...)
- onLoad(...)
Przy okazji kilka elementów zwiazanych z JavaScriptem: