WebView2 BindDataUI Demo - Two-Way Data Binding

Overview

This is the most comprehensive data binding demo for cWebView2Host, demonstrating the BindUI (UI → Host) and BindData (Host → UI) two-way binding system, along with SetData for pushing data to the DOM.

Project Structure

Download Source [ Note: Re-register the DLL file in the bin directory ]

Source code is available in the VBMAN2 project's demos/webview2/bindDataUI directory.

bindDataUI/
  ├── Form1.frm              # Main form, containing binding logic and callback methods
  ├── www/
  │   └── index.html         # Test HTML page (6 test areas)
  ├── vbman2_webview2.vbp    # VB6 project file
  └── vbman2_webview2.vbw    # VB6 workspace file

Core Code Walkthrough

1. Declaration and Initialization (Form1.frm)

Dim WithEvents wv As cWebView2Host

Private Sub Form_Load()
    Set wv = New cWebView2Host
    wv.Initialize Me.hWnd, App.Path & "\www"
End Sub

Uses WithEvents to receive Ready and other events. Passes a local folder path, automatically mapped as WebView2-accessible resources.

2. Binding Configuration (wv_Ready Event)

Private Sub wv_Ready()
    ' === BindData: Host -> UI ===
    ' Text input two-way binding
    wv.BindData "name", "#name-input", "value"
    wv.BindData "name", "#name-preview", "textContent"
    
    ' Checkbox controlling panel visibility
    wv.BindData "enabled", "#toggle-enabled", "checked"
    wv.BindData "enabled", "#settings-panel", "visible"
    
    ' Image and counter
    wv.BindData "avatar", "#avatar", "src"
    wv.BindData "count", "#msg-count", "textContent"
    
    ' CSS class binding (status style)
    wv.BindData "statusOnline", "#status-dot", "class"
    
    ' HTML content binding
    wv.BindData "items", "#item-list", "innerHTML"
    
    ' === BindUI: UI -> Host ===
    wv.BindUI Me, "OnNameInput", "#name-input", EventName:="input"
    wv.BindUI Me, "OnToggle", "#toggle-enabled", EventName:="change"
    wv.BindUI Me, "OnIncMsg", "#btn-inc"
    wv.BindUI Me, "OnResetMsg", "#btn-reset"
    
    ' === Push Initial Data ===
    wv.SetData "name", "Zhang Wei"
    wv.SetData "enabled", True
    wv.SetData "avatar", "https://api.dicebear.com/7.x/adventurer/svg?seed=Felix"
    wv.SetData "count", "3"
    
    Me.Caption = wv.DocumentTitle
End Sub

3. UI Callback Methods

' Text input callback — real-time preview update
Public Sub OnNameInput(ByVal EventName As String, ByVal Detail As String)
    Dim val As String
    val = JsonValue(Detail, "value")
    wv.SetData "name", val
End Sub

' Checkbox toggle callback
Public Sub OnToggle(ByVal EventName As String, ByVal Detail As String)
    Dim checked As Boolean
    checked = (InStr(Detail, """checked"":true") > 0)
    wv.SetData "enabled", checked
End Sub

' Increment message count
Public Sub OnIncMsg(ByVal EventName As String, ByVal Detail As String)
    Dim count As Long
    count = Val(wv.JsProp("document.querySelector('#msg-count').textContent"))
    wv.SetData "count", count + 1
End Sub

' Reset message count
Public Sub OnResetMsg(ByVal EventName As String, ByVal Detail As String)
    wv.SetData "count", 0
End Sub

4. JSON Helper Function

Private Function JsonValue(ByVal Json As String, ByVal Key As String) As String
    Dim pos As Long
    pos = InStr(Json, """" & Key & """:""")
    If pos > 0 Then
        pos = pos + Len(Key) + 3
        Dim endPos As Long
        endPos = InStr(pos, Json, """")
        If endPos > 0 Then
            JsonValue = Mid(Json, pos, endPos - pos)
        End If
    End If
End Function

Feature Description

1. Text Two-Way Binding

   • Input box real-time updates preview text
   • BindUI captures input event → SetData pushes data back → BindData updates DOM

2. Checkbox Visibility Control

   • Checkbox checked attribute binding
   • Panel visible (custom attribute) binding
   • One data key controls multiple DOM elements

3. Image and Counter

   • src attribute binding for dynamic image URL
   • textContent binding for counter text

4. CSS Class Name Binding

   • class attribute full replacement
   • Used for switching status styles

5. HTML Content Binding

   • innerHTML binding renders HTML fragments
   • Suitable for dynamic list rendering

Technical Notes

1. BindData and BindUI must be executed in the wv_Ready event, not in Form_Load
2. Callback methods must be declared as Public, signature must be (ByVal EventName As String, ByVal Detail As String)
3. Same data key can bind to multiple elements and attributes, enabling one-to-many updates
4. Detail is a JSON string, requiring manual parsing — the example provides a simple JsonValue helper function
5. visible is a custom attribute, internally implemented via JS setting style.display for show/hide

Use Cases

1. Real-time preview for data entry forms
2. Settings panel toggle controls
3. Dynamic data display dashboards
4. Any scenario requiring deep VB6-Web UI interaction

Extension Suggestions

1. Use SetDataBatch to batch push initial data, reducing multiple JS calls
2. For complex JSON parsing, integrate a JSON library to replace manual string processing
3. Implement server-side data loading followed by SetData UI updates to build a complete data-driven interface