From 24c0f62f40bcc2c19a4509d176b184ee0d2b7d00 Mon Sep 17 00:00:00 2001 From: jayohms <jayohms@users.noreply.github.com> Date: Fri, 27 Sep 2024 15:28:03 +0000 Subject: [PATCH] deploy: dd4923350097b9e9001c3669d4d27a4c60d4eac5 --- android/bridge-components.html | 2 +- android/getting-started.html | 4 ++-- android/reference.html | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/android/bridge-components.html b/android/bridge-components.html index c8b663d..00c6fac 100644 --- a/android/bridge-components.html +++ b/android/bridge-components.html @@ -213,7 +213,7 @@ <h2 id="stimulus-controller"><a class="anchor" href="#stimulus-controller">﹟</ <p>The third parameter of send, the callback block, is executed when the bridge component replies back to the message, which is explained below. Here, the button is clicked.</p> <h2 id="kotlin-component"><a class="anchor" href="#kotlin-component">﹟</a> Kotlin Component</h2> <p>In Android Studio, create a new Kotlin file with the following.</p> -<pre class="language-kotlin"><code class="language-kotlin"><span class="token keyword">class</span> <span class="token function">ButtonComponent</span><span class="token punctuation">(</span><br> name<span class="token operator">:</span> String<span class="token punctuation">,</span><br> <span class="token keyword">private</span> <span class="token keyword">val</span> delegate<span class="token operator">:</span> BridgeDelegate<span class="token operator"><</span>HotwireDestination<span class="token operator">></span><br><span class="token punctuation">)</span> <span class="token operator">:</span> BridgeComponent<span class="token operator"><</span>HotwireDestination<span class="token operator">></span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> delegate<span class="token punctuation">)</span> <span class="token punctuation">{</span><br><br> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onReceive</span><span class="token punctuation">(</span>message<span class="token operator">:</span> Message<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Handle incoming messages based on the message `event`.</span><br> <span class="token keyword">when</span> <span class="token punctuation">(</span>message<span class="token punctuation">.</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token string-literal singleline"><span class="token string">"connect"</span></span> <span class="token operator">-></span> <span class="token function">handleConnectEvent</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><br> <span class="token keyword">else</span> <span class="token operator">-></span> Log<span class="token punctuation">.</span><span class="token function">w</span><span class="token punctuation">(</span><span class="token string-literal singleline"><span class="token string">"ButtonComponent"</span></span><span class="token punctuation">,</span> <span class="token string-literal singleline"><span class="token string">"Unknown event for message: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span><span class="token expression">message</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">private</span> <span class="token keyword">fun</span> <span class="token function">handleConnectEvent</span><span class="token punctuation">(</span>message<span class="token operator">:</span> Message<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">val</span> <span class="token keyword">data</span> <span class="token operator">=</span> message<span class="token punctuation">.</span>data<span class="token operator"><</span>MessageData<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?:</span> <span class="token keyword">return</span><br><br> <span class="token comment">// Write native code to display a native submit button in the</span><br> <span class="token comment">// toolbar displayed in the delegate.destination. Use the</span><br> <span class="token comment">// incoming data.title to set the button title.</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">private</span> <span class="token keyword">fun</span> <span class="token function">performButtonClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token function">replyTo</span><span class="token punctuation">(</span><span class="token string-literal singleline"><span class="token string">"connect"</span></span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><br><br> <span class="token comment">// Use kotlinx.serialization annotations to define a serializable</span><br> <span class="token comment">// data class that represents the incoming message.data json.</span><br> <span class="token annotation builtin">@Serializable</span><br> <span class="token keyword">data</span> <span class="token keyword">class</span> <span class="token function">MessageData</span><span class="token punctuation">(</span><br> <span class="token annotation builtin">@SerialName</span><span class="token punctuation">(</span><span class="token string-literal singleline"><span class="token string">"title"</span></span><span class="token punctuation">)</span> <span class="token keyword">val</span> title<span class="token operator">:</span> String<br> <span class="token punctuation">)</span><br><span class="token punctuation">}</span></code></pre> +<pre class="language-kotlin"><code class="language-kotlin"><span class="token keyword">class</span> <span class="token function">ButtonComponent</span><span class="token punctuation">(</span><br> name<span class="token operator">:</span> String<span class="token punctuation">,</span><br> <span class="token keyword">private</span> <span class="token keyword">val</span> delegate<span class="token operator">:</span> BridgeDelegate<span class="token operator"><</span>HotwireDestination<span class="token operator">></span><br><span class="token punctuation">)</span> <span class="token operator">:</span> BridgeComponent<span class="token operator"><</span>HotwireDestination<span class="token operator">></span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> delegate<span class="token punctuation">)</span> <span class="token punctuation">{</span><br><br> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onReceive</span><span class="token punctuation">(</span>message<span class="token operator">:</span> Message<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Handle incoming messages based on the message `event`.</span><br> <span class="token keyword">when</span> <span class="token punctuation">(</span>message<span class="token punctuation">.</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token string-literal singleline"><span class="token string">"connect"</span></span> <span class="token operator">-></span> <span class="token function">handleConnectEvent</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><br> <span class="token keyword">else</span> <span class="token operator">-></span> Log<span class="token punctuation">.</span><span class="token function">w</span><span class="token punctuation">(</span><span class="token string-literal singleline"><span class="token string">"ButtonComponent"</span></span><span class="token punctuation">,</span> <span class="token string-literal singleline"><span class="token string">"Unknown event for message: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span><span class="token expression">message</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">private</span> <span class="token keyword">fun</span> <span class="token function">handleConnectEvent</span><span class="token punctuation">(</span>message<span class="token operator">:</span> Message<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">val</span> <span class="token keyword">data</span> <span class="token operator">=</span> message<span class="token punctuation">.</span>data<span class="token operator"><</span>MessageData<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?:</span> <span class="token keyword">return</span><br><br> <span class="token comment">// Write native code to display a native submit button in the</span><br> <span class="token comment">// toolbar displayed in the delegate.destination. Use the</span><br> <span class="token comment">// incoming data.title to set the button title.</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">private</span> <span class="token keyword">fun</span> <span class="token function">performButtonClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Boolean <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token function">replyTo</span><span class="token punctuation">(</span><span class="token string-literal singleline"><span class="token string">"connect"</span></span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><br><br> <span class="token comment">// Use kotlinx.serialization annotations to define a serializable</span><br> <span class="token comment">// data class that represents the incoming message.data json.</span><br> <span class="token annotation builtin">@Serializable</span><br> <span class="token keyword">data</span> <span class="token keyword">class</span> <span class="token function">MessageData</span><span class="token punctuation">(</span><br> <span class="token annotation builtin">@SerialName</span><span class="token punctuation">(</span><span class="token string-literal singleline"><span class="token string">"title"</span></span><span class="token punctuation">)</span> <span class="token keyword">val</span> title<span class="token operator">:</span> String<br> <span class="token punctuation">)</span><br><span class="token punctuation">}</span></code></pre> <p>This component subclasses the <code>BridgeComponent</code> available in the Android library.</p> <p><code>onReceive(message)</code> is called when a message is received from Stimulus. Here, the <code>{title}</code> object is unpacked to add a native button to the right side of the screen. When it’s tapped, the <code>performButtonClick()</code> is fired, replying to the message and calling the callback block, clicking the button.</p> <p>Finally, register the component with the matching <code>"button"</code> name as the Stimulus controller. The best place for this is in an <code>Application</code> <a href="/android/configuration#create-an-application-instance">subclass for your app</a>, which runs immediately at app startup:</p> diff --git a/android/getting-started.html b/android/getting-started.html index b8700ab..f80a10b 100644 --- a/android/getting-started.html +++ b/android/getting-started.html @@ -208,8 +208,8 @@ <h2 id="integrate-hotwire-native"><a class="anchor" href="#integrate-hotwire-nat <p>Enable internet access for the app by opening <code>AndroidManifest.xml</code> and adding the following above the <code><application></code> node:</p> <pre class="language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>uses-permission</span> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>android.permission.INTERNET<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span></code></pre> <p>Set up the app’s layout by opening <code>activity_main.xml</code> and replace the entire file with the following:</p> -<pre class="language-xml"><code class="language-xml"><span class="token prolog"><?xml version="1.0" encoding="utf-8"?></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>androidx.constraintlayout.widget.ConstraintLayout</span><br> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">xmlns:</span>app</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res-auto<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>androidx.fragment.app.FragmentContainerView</span><br> <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@+id/main_nav_host<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dev.hotwire.navigation.navigator.NavigatorHost<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">app:</span>defaultNavHost</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>androidx.constraintlayout.widget.ConstraintLayout</span><span class="token punctuation">></span></span></code></pre> -<p>Finally, open <code>MainActivity.kt</code> and replace the entire file with this code:</p> +<pre class="language-xml"><code class="language-xml"><span class="token prolog"><?xml version="1.0" encoding="utf-8"?></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>androidx.fragment.app.FragmentContainerView</span><br> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">xmlns:</span>app</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res-auto<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@+id/main_nav_host<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dev.hotwire.navigation.navigator.NavigatorHost<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span><br> <span class="token attr-name"><span class="token namespace">app:</span>defaultNavHost</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code></pre> +<p>Finally, open <code>MainActivity.kt</code> and replace the class with this code:</p> <pre class="language-kotlin"><code class="language-kotlin"><span class="token keyword">import</span> android<span class="token punctuation">.</span>os<span class="token punctuation">.</span>Bundle<br><span class="token keyword">import</span> dev<span class="token punctuation">.</span>hotwire<span class="token punctuation">.</span>navigation<span class="token punctuation">.</span>activities<span class="token punctuation">.</span>HotwireActivity<br><span class="token keyword">import</span> dev<span class="token punctuation">.</span>hotwire<span class="token punctuation">.</span>navigation<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span>NavigatorConfiguration<br><br><span class="token keyword">class</span> MainActivity <span class="token operator">:</span> <span class="token function">HotwireActivity</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onCreate</span><span class="token punctuation">(</span>savedInstanceState<span class="token operator">:</span> Bundle<span class="token operator">?</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onCreate</span><span class="token punctuation">(</span>savedInstanceState<span class="token punctuation">)</span><br> <span class="token function">setContentView</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>layout<span class="token punctuation">.</span>activity_main<span class="token punctuation">)</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">navigatorConfigurations</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token function">listOf</span><span class="token punctuation">(</span><br> <span class="token function">NavigatorConfiguration</span><span class="token punctuation">(</span><br> name <span class="token operator">=</span> <span class="token string-literal singleline"><span class="token string">"main"</span></span><span class="token punctuation">,</span><br> startLocation <span class="token operator">=</span> <span class="token string-literal singleline"><span class="token string">"https://hotwire-native-demo.dev"</span></span><span class="token punctuation">,</span><br> navigatorHostId <span class="token operator">=</span> R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>main_nav_host<br> <span class="token punctuation">)</span><br> <span class="token punctuation">)</span><br><span class="token punctuation">}</span></code></pre> <h2 id="run!"><a class="anchor" href="#run!">﹟</a> Run!</h2> <p>Click Run → Run ‘app’ to launch the app in the emulator. You should see the following screen in the emulator:</p> diff --git a/android/reference.html b/android/reference.html index 93a77d6..1d34600 100644 --- a/android/reference.html +++ b/android/reference.html @@ -199,7 +199,7 @@ <h2 id="navigator"><a class="anchor" href="#navigator">﹟</a> Navigator</h2> <p>The <code>Navigator</code> is the central coordinator in a Hotwire Native Android application. Each <code>NavigatorHost</code> in your Activity maintains a <code>Navigator</code> instance, which manages the stack of <code>HotwireFragment</code> screens with a single, shared <code>WebView</code> instance. It lets your app choose how to handle link taps, present new screens, and deal with errors.</p> <h2 id="custom-webview"><a class="anchor" href="#custom-webview">﹟</a> Custom WebView</h2> <p>You can customize and subclass the <code>HotwireWebView</code> class to provide custom behaviors in your app:</p> -<pre class="language-kotlin"><code class="language-kotlin">Hotwire<span class="token punctuation">.</span>config<span class="token punctuation">.</span>makeCustomWebView <span class="token operator">=</span> <span class="token punctuation">{</span> context<br> <span class="token function">MyCustomWebView</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><br><span class="token punctuation">}</span></code></pre> +<pre class="language-kotlin"><code class="language-kotlin">Hotwire<span class="token punctuation">.</span>config<span class="token punctuation">.</span>makeCustomWebView <span class="token operator">=</span> <span class="token punctuation">{</span> context <span class="token operator">-></span><br> <span class="token function">MyCustomWebView</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><br><span class="token punctuation">}</span></code></pre> <h2 id="handling-url-routes"><a class="anchor" href="#handling-url-routes">﹟</a> Handling URL routes</h2> <p>By default, all external urls outside of your app’s domain are opened in the default browser on the device. This is easily customizable, though. Out-of-the-box, Hotwire Native provides three route decision handlers for you to use to control how urls are routed:</p> <ul>