deploy: dd49233

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">&lt;</span>HotwireDestination<span class="token operator">></span><br><span class="token punctuation">)</span> <span class="token operator">:</span> BridgeComponent<span class="token operator">&lt;</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">&lt;</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">&lt;</span>HotwireDestination<span class="token operator">></span><br><span class="token punctuation">)</span> <span class="token operator">:</span> BridgeComponent<span class="token operator">&lt;</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">&lt;</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>&quot;button&quot;</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>