Skip to content

Conference App: add presenters

Add local SQLite Presenter data and drill-down UI to the client documented in Create the client. Add the data dictionary, database initialization, select/zoom views, and application entry points in that order.

Before you begin: Complete Create the client. Keep the generated runtime, package, host, and database files from that page. The database filename remains /dev/idbfs/MyAppData.db.

Step 1 — Add Presenter data

Add this package first. Its entity and Data Dictionary are dependencies of the database package and both Presenter views.

AppSrc/PresenterDataDictionary.pkg

The { Connection=conf_data } annotation places Presenter in the SQLite connection registered by ConferenceApp.src. It is a logical connection ID, not the database path or driver name. The fields and indexes define the entity, while the data dictionary makes first and last name required before a record can be saved.

Use Db\cDataDictionary.pkg

{ Connection=conf_data}
Entity Presenter
    { PrimaryKey=True AutoIncrement=True }
    Integer PresenterId
    String FirstName
    String LastName
    String Company
    String Bio

    Add_Index PresenterId ASC
    Add_Index FirstName ASC LastName ASC
    Add_Index LastName ASC FirstName ASC
End_Entity

{ Entity=Presenter }
Class cPresenterDataDictionary is a cDataDictionary
    Procedure Construct_Object
        Forward Send Construct_Object

        Set phEntity to (RefEntity(Presenter))

        Set Field_Option (RefTable(Self.FirstName)) DD_Required to True
        Set Field_Option (RefTable(Self.LastName)) DD_Required to True
    End_Procedure
End_Class

The entity declaration describes the table and its fields; the cPresenterDataDictionary class attaches that entity to a DDO and adds validation. Neither declaration opens SQLite directly. When the DDO later creates or saves a record, the connection manager routes the operation through the cDbSqliteDriver selected for conf_data.

Step 2 — Create the local database on first run

Add this package after PresenterDataDictionary.pkg. oPresenterDD supplies the table definition, File_Exist C_SQLiteDb checks /dev/idbfs/MyAppData.db, and CreateDatabase runs only when that file is absent. CreateDatabase sends schema creation through the DDO and its configured driver; this package does not issue SQL or manage a separate database connection.

AppSrc/CreateAndSyncDB.pkg

Use System\FileSystem.pkg
Use PresenterDataDictionary.pkg

Object oCreateAndSyncDB is a cObject
    Object oPresenterDD is a cPresenterDataDictionary
    End_Object

    Procedure InitializeDB
        Boolean bExists

        File_Exist C_SQLiteDb bExists

        If (not(bExists)) Begin
            Send CreateDatabase of oPresenterDD True True True
        End
    End_Procedure
End_Object

Step 3 — Add Presenter select and zoom views

Add the two view files after the data dictionary and database package. Both views bind Main_DD and Server to oPresenterDD; Data Binding explains how these Data Dictionary object bindings connect controls to local buffers. Each Entry_Item oPresenterDD.FieldName line binds one form or list column to a DDO field. The select view navigates to the zoom view, and the zoom view binds Presenter fields and provides save/delete actions through the same DDO.

AppSrc/SelectPresenter.wo

Use WebUI\cWebView.pkg
Use WebUI\cWebList.pkg
Use WebUI\cWebColumn.pkg
Use WebUI\cWebMenuGroup.pkg
Use WebUI\cWebMenuItem.pkg
Use WebUI\cWebColumnButton.pkg
Use PresenterDataDictionary.pkg

Object oSelectPresenter is a cWebView
    Object oPresenterDD is a cPresenterDataDictionary
    End_Object

    Set Main_DD to oPresenterDD
    Set Server to oPresenterDD

    Set peWebViewStyle to wvsDrillDown
    Set peViewType to vtSelect
    Set psCaption to "SelectPresenter"

    Set piMaxWidth to 1024
    Set piColumnCount to 6
    WebSetResponsive piColumnCount rmTabletPortrait to 3

    Object oList is a cWebList
        Set pbFillHeight to True
        Set piColumnSpan to 0
        Set pbServerOnRowClick to True
        Set psCSSClass to "MobileList"
        Set piSortColumn to 0
        Set pbShowHeader to False

        Object oPresenter_FirstName is a cWebColumn
            Set psCaption to "First name"
            Set psCSSClass to "RowCaption"
            Set peAlign to alignLeft
            Set piWidth to 50
            Entry_Item oPresenterDD.FirstName
        End_Object

        Object oPresenter_LastName is a cWebColumn
            Set psCaption to "Last name"
            Set psCSSClass to "RowCaption"
            Set piWidth to 50
            Entry_Item oPresenterDD.LastName
        End_Object

        Object oDetailButton is a cWebColumnButton
            Set piWidth to 45
            Set pbFixedWidth to True
            Set psCaption to "btn"
            Set pbResizable to False
            Set psBtnCssClass to "WebButtonIcon WebIcon_Info"
            Set peAlign to alignRight
            Set piListRowSpan to 2

            WebRegisterPath ntNavigateForward oZoomPresenter

            Procedure OnClick
                Send NavigatePath
            End_Procedure

            Procedure OnGetNavigateForwardData tWebNavigateData ByRef NavigateData Handle hoToView
                Move True to NavigateData.bReadOnly
            End_Procedure
        End_Object

        Object oPresenter_Company is a cWebColumn
            Set psCaption to "Company"
            Set pbNewLine to True
            Set psCSSClass to "RowDetail"
            Set piListColSpan to 2
            Entry_Item oPresenterDD.Company
        End_Object

        Procedure OnRowClick String sRowID
            tWebNavigateData NavigateData
            Get GetNavigateData to NavigateData

            Case Begin
                Case (NavigateData.eNavigateType=nfFromParent)
                    Case Break
                Case (NavigateData.eNavigateType=nfFromChild)
                    Send NavigateClose Self
                    Case Break
                Case (NavigateData.eNavigateType=nfFromMain)
                    Send NavigateClose Self
                    Case Break
                Case Else
                    Case Break
            Case End
        End_Procedure

    End_Object

    Object oActionGroup is a cWebMenuGroup
        Set psGroupName to "MainActions"

        Object oSearch is a cWebMenuItem
            Set psCaption to C_$Search
            Set psCSSClass to "WebPromptMenuItem"

            Procedure OnClick
                Send Search of oList
            End_Procedure
        End_Object

        Object oNewButton is a cWebMenuItem
            Set psCaption to C_$New
            Set psCSSClass to "WebClearMenuItem"

            WebRegisterPath ntNavigateForward oZoomPresenter

            Procedure OnClick
                Send NavigatePath
            End_Procedure

            Procedure OnGetNavigateForwardData tWebNavigateData ByRef NavigateData Handle hoToView
                Move True to NavigateData.bNewRecord
            End_Procedure
        End_Object
    End_Object
End_Object

AppSrc/ZoomPresenter.wo

The zoom view uses the same oPresenterDD as its main/server DDO. Its Entry_Item lines bind editable controls to the DDO buffer; save, delete, and cancel actions then use Data Dictionary operations, which validate and persist through the configured SQLite driver rather than writing UI values directly to a database file.

Use WebUI\cWebView.pkg
Use WebUI\cWebPanel.pkg
Use WebUI\cWebForm.pkg
Use WebUI\cWebMenuGroup.pkg
Use WebUI\cWebMenuItem.pkg
Use WebUI\cWebEdit.pkg
Use PresenterDataDictionary.pkg

Object oZoomPresenter is a cWebView
    Object oPresenterDD is a cPresenterDataDictionary
    End_Object

    Set Main_DD to oPresenterDD
    Set Server to oPresenterDD

    Set peWebViewStyle to wvsDrillDown
    Set peViewType to vtZoom
    Set pbShowCaption to False
    Set Verify_Save_msg to 0
    Set psCaption to "ZoomPresenter"

    Set piMaxWidth to 1024
    Set piColumnCount to 12

    Object oWebMainPanel is a cWebPanel
        Set piColumnCount to 12

        Object oPresenter_FirstName is a cWebForm
            Set piColumnSpan to 6
            Set psLabel to "First name"
            Entry_Item oPresenterDD.FirstName
            Set peLabelPosition to lpTop
        End_Object

        Object oPresenter_LastName is a cWebForm
            Set piColumnSpan to 6
            Set psLabel to "Last name"
            Entry_Item oPresenterDD.LastName
            Set piColumnIndex to 6
            Set peLabelPosition to lpTop
        End_Object

        Object oPresenter_Company is a cWebForm
            Set piColumnSpan to 6
            Set psLabel to "Company"
            Entry_Item oPresenterDD.Company
            Set peLabelPosition to lpTop
        End_Object

        Object oPresenter_Bio is a cWebEdit
            Set piColumnSpan to 0
            Set psLabel to "Bio"
            Entry_Item oPresenterDD.Bio
            Set peLabelPosition to lpTop
            Set piHeight to 200
        End_Object

        WebSetResponsive piColumnCount rmMobile to 6
    End_Object

    Object oActionGroup is a cWebMenuGroup
        Set psGroupName to "MainActions"

        Object oSaveBtn is a cWebMenuItem
            Set psCaption to C_$Save
            Set psCSSClass to "WebSaveMenuItem"

            Procedure OnClick
                Send Request_Save
            End_Procedure
        End_Object

        Object oEditBtn is a cWebMenuItem
            Set psCaption to C_$CategoryEdit
            Set psCSSClass to "WebEditMenuItem"

            Procedure OnClick
                Send ChangeEditMode True
                Send SetActionButtons
            End_Procedure
        End_Object

        Object oDeleteBtn is a cWebMenuItem
            Set psCaption to C_$Delete
            Set psCSSClass to "WebDeleteMenuItem"
            Set peActionDisplay to adMenu

            Procedure OnClick
                Send Request_Delete
            End_Procedure
        End_Object

        Object oCancelChangesBtn is a cWebMenuItem
            Set psCaption to C_$ToolTipClear
            Set peActionDisplay to adMenu

            Procedure OnClick
                Send RefreshRecord
            End_Procedure
        End_Object
    End_Object

    Procedure SetActionButtons
        tWebNavigateData NavigateData
        Boolean bHasRecord
        Handle hoDD

        Get Server to hoDD
        Get GetNavigateData to NavigateData

        If (hoDD) Begin
            Get HasRecord of hoDD to bHasRecord
        End
        Else Begin
            Move False to bHasRecord
        End

        WebSet pbRender of oEditBtn to False
        WebSet pbRender of oSaveBtn to False
        WebSet pbRender of oCancelChangesBtn to False
        WebSet pbRender of oDeleteBtn to False

        If (NavigateData.bReadOnly) Begin
            WebSet pbRender of oEditBtn to True
        End
        Else Begin
            WebSet pbRender of oSaveBtn to True
            WebSet pbRender of oCancelChangesBtn to True
            WebSet pbRender of oDeleteBtn to bHasRecord
        End
    End_Procedure

    Procedure OnViewSaved Handle hoServer Boolean bChanged
        Send NavigateClose Self
    End_Procedure

    Procedure OnViewDeleted Handle hoDDO
        Send NavigateClose Self
    End_Procedure

    Procedure OnNavigateForward tWebNavigateData NavigateData Integer hoInvokingView Integer hoInvokingObject
        Case Begin
            Case (NavigateData.eNavigateType = nfFromMain)
                Case Break
            Case (NavigateData.eNavigateType = nfFromParent)
                Case Break
            Case (NavigateData.eNavigateType = nfFromChild)
                Case Break
            Case Else
                Case Break
        Case End

        Send SetActionButtons
    End_Procedure
End_Object

Step 4 — Wire the new files into the existing client

Apply these behavior additions to the existing shell. The dependency order is now complete: entity/data dictionary, first-run database creation, select/zoom bindings, then application entry points.

Add the Presenter menu item

Add this object under the existing oViewMenu. It exposes the Presenter list from the application menu.

Object oSelectPresenterItem1 is a cWebMenuItem
    Set psCaption to "SelectPresenter"

    WebRegisterPath ntNavigateBegin oSelectPresenter

    Procedure OnClick
        Forward Send OnClick
            Send NavigatePath
    End_Procedure
End_Object

Include the database package and views

After the application shell objects, add the database package, initialize its database, and load the views. Keep the generated /dev/idbfs/MyAppData.db connection.

Use CreateAndSyncDB.pkg
Send InitializeDB of oCreateAndSyncDB

Use Dashboard.wo
Use ZoomPresenter.wo
Use SelectPresenter.wo

Make Tile 2 open Presenters

Change the existing oTile2 caption and add its forward route. Keep its existing tile layout and OnClick procedure.

Object oTile2 is a cWebHtmlBox
    Set psHtml to '<div class="WebCon_Sizer" data-ServerOnClick="openview"><div Class="Tile_Title">Presenters</div><div class="Tile_Subtitle"></div></div>'

    WebRegisterPath ntNavigateForwardCustom oSelectPresenter

    Procedure OnClick String sId String sParam
        Send NavigatePath
    End_Procedure
End_Object

Checkpoint: Press F5, create a Presenter, save it, close the zoom view, and reopen it from the Presenter list.

Next

Synchronize Presenter data.