Chat UIKit iOS v3
Chat UIKit iOS
Chat UIKit
iOS
Version 3

Modules

Copy link

A module is a class that exists in every key function provided by Sendbird UIKit. Each module is composed of multiple components, also referred to as module components, that makes up a view. The corresponding view controller in a key function uses these components to create and display an interactive UI.


Modularization data flow

Copy link

A component uses a delegate to send events to its corresponding view controller. It also has a data source object that gathers data needed to implement the component and update the view from the view controller.

The basic architecture of a module constitutes the following properties:

Module

Copy link

In every key function, there's a module, which is composed of several components. The view controller can use any of these components along with data from a view model to create a functional view.

Component

Copy link

A component, also referred to as module component, is what allows the view controller to build the view. It's written as a {MODULE_TYPE}.{COMPONENT_TYPE} property in the code as every component is part of a module. To initialize the configure method of the component, the loadView() method of the view controller will be called.

Component delegate

Copy link

The view controller can receive all events that occur in a component through a delegate.

Component DataSource

Copy link

A data source is used to access objects, such as data needed to update the view or implement the component, from a view controller.

To learn about the overall architecture of Sendbird UIKit, see the Key functions page.


Component life cycle

Copy link

Every module component in Sendbird UIKit follows the same component life cycle to configure, implement, and update a view. It's a specific Sendbird UIKit life cycle that only apply to components and works in accordance with Apple's UIKit life cycle, meaning the methods are called at a set timing as shown in the image below.

When the configure method of a component is called, the interfaces of the component view life cycle are called to start building a view. The following table lists all the interfaces in the life cycle.

InterfaceDescription

configure(delegate:dataSource:theme:)

Configures the component. Depending on the component, there may not be a delegate or a DataSource parameter. In that case, there may be other required parameters. This method calls the setup methods listed below.

setupViews()

Sets the value of view properties used to implement the component and sets the hierarchy of subviews in the component.

setupLayouts()

Sets the layout of all the components in a view.

setupStyles(theme:)

Sets the style of a component, such as color and font. For certain components, there is a componentTheme parameter.

updateLayouts()

Updates the layout of the components and calls the setupLayouts() method again.

updateStyles(theme:)

Updates the style of a component and calls the setupStyles() method again. For certain components, there is a componentTheme parameter.

If you wish to override updateStyles(theme:) to customize the style of the component, you should call the super.updateStyles(theme:) method first before calling the setupStyles() method to update the style of each view property. Refer to the code below.

// `SBUOpenChannelModule.List` is used an example below.
// For some components that have an overlay style, you need to update the value of `isOverlay` before calling the `super` method.
override func updateStyles(theme: SBUChannelTheme? = nil, componentTheme: SBUComponentTheme) {
            guard let emptyView = emptyView as? SBUEmptyView else { return }

            // Update the value of `isOverlay` of `emptyView`.
            emptyView.isOverlay = {YOUR_FLAG}

            // Call the `super` method.
            super.updateStyles(theme: theme, componentTheme: componentTheme)

            // Call `setupStyles` of `emptyView`.
            emptyView.setupStyles()
}

Corresponding modules for key functions

Copy link

In Sendbird UIKit, there is one view controller per key function and in each view controller, there is one module that contains multiple components. If you wish to create your own custom view controller, you can do so by using different components. Instead of using the set module in the view controller provided by our development kit, you can mix and match components of different modules to make your own view.

Key functionModuleComponent

List channels

SBUGroupChannelListModule

Header, List

Chat in a group channel

SBUGroupChannelModule

Header, List, Input

Chat in an open channel

SBUOpenChannelModule

Header, List, Input, Media

Create a group channel

SBUCreateChannelModule

Header, List

Create an open channel

SBUCreateOpenChannelModule

Header, Profile input

Invite users

SBUInviteUserModule

Header, List

Register members as operator

SBURegisterOperatorModule

Header, List

Register participants as operator

SBURegisterOperatorModule

Header, List

List users in a group channel

SBUUserListModule

Header, List

List users in an open channel

SBUUserListModule

Header, List

Configure group channel settings

SBUGroupChannelSettingsModule

Header, List

Configure open channel settings

SBUOpenChannelSettingsModule

Header, List

Moderate group channels and members

SBUModerationsModule

Header, List

Moderate open channels and participants

SBUModerationsModule

Header, List

Search messages

SBUMessageSearchModule

Header, List

Reply to messages

SBUMessageThreadModule

Header, List, Input

Note: To learn more about each component go to the individually linked API reference page in the table.