mirror of
https://github.com/InsanusMokrassar/docs.git
synced 2024-11-22 08:13:59 +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