UI Components

The XDK ship with a number of UI Components to simplify application development. This section explores the Core Component library in more details.

Name Description
The Conversation View Presents a single Conversation, with a Message List of messages for that Conversation, as well as a Compose Bar for sending messages in that Conversation. Required component of any application
The Conversation List A list for viewing Conversations, used by your application to let users see a Conversation List and select one to open.
The Conversation Item An item of the Conversation List; generated by the Conversation List
The Message List A list for viewing Messages, scrolling through them and marking them as read
The Message Item An Item representing a message within the Message List. Generated by the Message List. Used by the Conversation View
The Identity List A list for viewing Identities. Used by applications to add or remove users from a Conversation
The Identity Item An Item representing an Identity/user within the Identity List. Generated by the Identity List.
The Compose Bar A panel for putting a text editor and buttons to allow users to enter text, and perform other message-sending-related activities such as selecting files for upload.
The Avatar Component Picture representing a user. Generated by Identity Item, Conversation Item and Message Item.
The Presence Component Conveys a user’s status/availability. Generated by Avatar.
The Typing Indicator A Component for indicating that a user is typing into a Conversation View

Of the above widgets, the ones most commonly used directly by developers are described below, and the rest are described in the API Reference.

All components are be initialized with, or configured after initialization with the LYRUIConfiguration object. The configuration object should be created once, at the beginning of application lifetime, and passed to use with all UI components.

The Conversation View

The Conversation View is the primary UI Component for adding conversations to an application. It serves the following goals:

  1. Displays the messages that have been sent and received
  2. Provides a Compose Bar for the user to send their own messages
  3. Manages sending read receipts as the user scrolls through messages
  4. Manages sending and displaying typing indicators.

In other words, the Conversation View manages the core tasks of having messaging within your application.

iOS Conversation View
Android Conversation View
// Retrieving an conversation
LYRConversation *conversation = ...;

// Setting up conversation view
LYRUIConversationView *conversationView = [[LYRUIConversationView alloc] initWithConfiguration:self.layerUIConfiguration];
conversationView.conversation = conversation;

The Conversation List

The Conversation List serves the following goals:

  1. Display a list of Conversations to the user
  2. Allow the user to select a Conversation to open in the Conversation View
  3. Find Conversations with unread messages
  4. See recent state of each Conversation
Empty Conversation List
Conversation List with Large Sized Items
// Creating a query Controller
LYRQuery *query = [LYRQuery queryWithQueryableClass:[LYRConversation class]];
query.sortDescriptors = @[[NSSortDescriptor sortDescriptorWithKey:@"lastMessage.receivedAt" ascending:NO]];

NSError *error;
LYRQueryController *queryController = [self.layerUIConfiguration.client queryControllerWithQuery:query error:&error];
if (!queryController) {
    NSLog(@"LayerKit failed to create a query controller with error: %@", error);
    return;
}

// Setting up conversation list view
LYRUIConversationListView *conversationListView = [[LYRUIConversationView alloc] initWithConfiguration:self.layerUIConfiguration];
conversationListView.queryController = queryController;

The Identity List

The Identity List serves the following goals:

  1. Display a list of Identities/users
  2. Allow the user to select Identities to have a Conversation with
  3. View status of users

Note that an Identity List is typically restricted to listing users who:

  • People that your user has had Conversations with in the past
  • People that you have explicitly issued a [layerClient followUserIDs:usersToFollow error:&error]; operation on from the client
  • People that your server has explicitly issued a follows request on. These requests are sent to Layer’s Server API.
Identity List with size = tiny
Identity List with size = medium

Presenting conversation participants:

// Setting up identity list view for presenting conversation participants
LYRUIIdentityListView *identityListView = [[LYRUIIdentityListView alloc] initWithConfiguration:self.layerUIConfiguration];
LYRUIListSection *section = [[LYRUIListSection alloc] init];
[section.items addObjectsFromArray:conversation.participants.allObjects];
identityListView.items = [@[section] mutableCopy];
[identityListView.collectionView reloadData];

Presenting every followed identity:

// Creating a query Controller
LYRQuery *query = [LYRQuery queryWithQueryableClass:[LYRIdentity class]];
query.sortDescriptors = @[[NSSortDescriptor sortDescriptorWithKey:@"firstName" ascending:NO]];
query.predicate = [LYRPredicate predicateWithProperty:@"userID"
                                    predicateOperator:LYRPredicateOperatorIsNotEqualTo
                                                value:self.layerUIConfiguration.client.authenticatedUser.userID];

NSError *error;
LYRQueryController *queryController = [self.layerUIConfiguration.client queryControllerWithQuery:query error:&error];
if (!queryController) {
    NSLog(@"LayerKit failed to create a query controller with error: %@", error);
    return;
}

// Setting up identity list view
LYRUIIdentityListView *identityListView = [[LYRUIIdentityListView alloc] initWithConfiguration:self.layerUIConfiguration];
identityListView.queryController = queryController;

// Executing the query
BOOL success = [queryController execute:&error];
if (!success) {
    NSLog(@"LayerKit failed to execute query with error: %@", error);
}

The Avatar Component

The Avatar is a simple representation of a user where a compact but visual representation is needed. The Avatar is used within many of the XDK UI Components, but can also be used directly. For example, if creating a profile page for a user, you may use this Avatar Component as part of the profile. Having an Avatar Component that looks exactly the way the Avatar looks within the XDK UI Components will help create a consistent look and feel across your application.

The only information the Avatar provides beyond a photo, is the user’s online status via an embedded Presence Component.

// Retrieving an identity
LYRIdentity *identity = ...;

// Setting up avatar component
LYRUIAvatarView *avatarView = [[LYRUIAvatarView alloc] initWithConfiguration:self.layerUIConfiguration];
avatarView.identities = @[identity];

Use with multiple identities:

// Setting up avatar component
LYRUIAvatarView *avatarView = [[LYRUIAvatarView alloc] initWithConfiguration:self.layerUIConfiguration];
avatarView.identities = conversation.participants;

The Presence Component

The Presence Component shows the status of a specific user in a very compact format and renders simply a colored circle where color conveys status.

// Retrieving an identity
LYRIdentity *identity = ...;

// Setting up presence component
LYRUIPresenceView *presenceView = [[LYRUIPresenceView alloc] initWithConfiguration:self.layerUIConfiguration];
presenceView.identities = @[identity];

Use with multiple identities:

// Setting up avatar component
LYRUIPresenceView *presenceView = [[LYRUIPresenceView alloc] initWithConfiguration:self.layerUIConfiguration];
presenceView.identities = conversation.participants;
UI Concepts Misc Components