mirror of
https://github.com/InsanusMokrassar/docs.git
synced 2024-11-22 16:24:00 +00:00
continue fill navigation docs
This commit is contained in:
parent
2f3336268c
commit
470043d360
101
docs/navigation/getting-started.md
Normal file
101
docs/navigation/getting-started.md
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
# Getting started
|
||||||
|
|
||||||
|
[![Maven Central](https://img.shields.io/maven-central/v/dev.inmo/navigation.core?label=navigation&style=flat-square)](https://github.com/InsanusMokrassar/navigation)
|
||||||
|
|
||||||
|
Traditionally, you need to add dependency to your project. Currently, there are two types of artifacts:
|
||||||
|
|
||||||
|
* `Core` - only necessary tools for your projects
|
||||||
|
* `MVVM` - Model-View-ViewModel architecture tools + `Core` components
|
||||||
|
|
||||||
|
| Artifact | Purpose | Dependency |
|
||||||
|
|:--------:|-------------------------------------------------------------|-----------------------------------------------------------------|
|
||||||
|
| `Core` | Only necessary tools for your projects | `implementation "dev.inmo:navigation.core:$navigation_version"` |
|
||||||
|
| `MVVM` | Model-View-ViewModel architecture tools + `Core` components | `implementation "dev.inmo:navigation.mvvm:$navigation_version"` |
|
||||||
|
|
||||||
|
# Initialization
|
||||||
|
|
||||||
|
After you have added your dependency, you should initialize navigation.
|
||||||
|
|
||||||
|
There are several important things:
|
||||||
|
|
||||||
|
1. `Config` - it is an instance of any class which extending the `NavigationNodeDefaultConfig` in common case
|
||||||
|
2. `Factory` - usually object which may create a node or some required part for node
|
||||||
|
|
||||||
|
For example: lets imagine that we have a node `Main`. Here what should we do to create a node and make it workable in
|
||||||
|
navigation:
|
||||||
|
|
||||||
|
```kotlin
|
||||||
|
data class MainConfig(
|
||||||
|
// this id will be used to search an html element by id in JS
|
||||||
|
// and Fragment by tag in Android
|
||||||
|
override val id: String = "main"
|
||||||
|
) : NavigationNodeDefaultConfig
|
||||||
|
```
|
||||||
|
|
||||||
|
### JS part
|
||||||
|
|
||||||
|
```kotlin
|
||||||
|
// Core variant without MVVM or Compose
|
||||||
|
class MainNode(
|
||||||
|
config: MainConfig,
|
||||||
|
chain: NavigationChain<NavigationNodeDefaultConfig>,
|
||||||
|
) : JsNavigationNode<MainConfig, NavigationNodeDefaultConfig>(
|
||||||
|
chain,
|
||||||
|
config
|
||||||
|
) {
|
||||||
|
// Some code
|
||||||
|
// In htmlElementStateFlow will be found `HTMLElement` where node should be binded
|
||||||
|
}
|
||||||
|
// MVVM Compose variant
|
||||||
|
class MainNodeView(
|
||||||
|
config: MainConfig,
|
||||||
|
chain: NavigationChain<NavigationNodeDefaultConfig>,
|
||||||
|
) : View<MainConfig, NavigationNodeDefaultConfig>(
|
||||||
|
config,
|
||||||
|
chain
|
||||||
|
) {
|
||||||
|
// Some code
|
||||||
|
// In htmlElementStateFlow will be found `HTMLElement` where node should be binded
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
override onDraw() {
|
||||||
|
Text("Hello world")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
object MainNodeFactory : NavigationNodeFactory<NavigationNodeDefaultConfig> {
|
||||||
|
override fun createNode(
|
||||||
|
navigationChain: NavigationChain<Base>,
|
||||||
|
config: Base
|
||||||
|
): NavigationNode<out Base, Base>? = if (config is MainConfig) {
|
||||||
|
MainNode(config, chain) // Or `MainNodeView(config, chain)` for MVVM
|
||||||
|
} else {
|
||||||
|
null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Android
|
||||||
|
|
||||||
|
In Android there is one important note: you will not directly work with nodes. In fact it will be required to create
|
||||||
|
special `NodeFragment`:
|
||||||
|
|
||||||
|
```kotlin
|
||||||
|
// Core variant
|
||||||
|
class MainFragment : NodeFragment<MainConfig, NavigationNodeDefaultConfig>() {
|
||||||
|
// Your code
|
||||||
|
// Here will be available: node with type `AndroidFragmentNode`, config: `MainConfig`
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Initialization is different on the platforms, so, lets take a look at each one.
|
||||||
|
|
||||||
|
## JS
|
||||||
|
|
||||||
|
In `JavaScript` it looks like:
|
||||||
|
|
||||||
|
```kotlin
|
||||||
|
initNavigation(
|
||||||
|
|
||||||
|
)
|
||||||
|
```
|
Loading…
Reference in New Issue
Block a user