Skip to content

TWTSideBarView

Jump to bottom
Steve Hannah edited this page Jun 26, 2021 · 3 revisions

TWTSideBarView

Synopsis

The <twtSideBarView> component provides a Twitter-style navigation sidebar. It is meant to be used inside the <sidebar> component, and works well in conjuction with the <twtTitle> component, which includes a button that opens the sidebar.

Usage

Typically, your view would include a <twtSideBarView> for the title bar to be able to open the sidebar. Then you would place a <txtSideBarView> tag inside a <sidebar> tag. E.g.

<!-- Hide the default title -->
<title hidden="true"/>

<!-- Add the twtTitle bar -->
<twtTitle>
    <label>My View</label>
</twtTitle>

<!-- The <sidebar> tag creates the sidebar -->
<sidebar>
    <!-- The twtSideBarView has the sidebar contents -->
    <twtSideBarView/>
</sidebar>

Without adding any actions or registering a TWTUserProfile lookup, the sidebar would be mostly blank as shown here:

twtSideBarView empty

A fully-populated sidebar looks like:

TWTSideBarView populated

Attributes

The <twtSideBarView> extends AbstractEntityView, which extends Container, which extends Component, so it supports all attributes available to those classes. It doesn’t currently define any attributes of its own. Configuration is done via actions, styles, and the TWTUserProfile lookup.

Actions

The following action categories are supported.

SIDEBAR_TOP_ACTIONS

Actions displayed at the top of the sidebar.

SIDEBAR_TOP_OVERFLOW_MENU

Actions displayed in the overflow menu at the top of the sidebar.

SIDEBAR_STATS

Actions meant to display user stats (e.g. 2034 Posts, etc..).

SIDEBAR_ACTIONS

The primary menu items in the sidebar. These will render icon and text.

SIDEBAR_SETTINGS_ACTIONS

Additional settings/related actions that are rendered below the {@link #SIDEBAR_ACTIONS} menu. These will be rendered as text only. No icons.

SIDEBAR_BOTTOM_LEFT_ACTIONS

Actions rendered in the bottom left.

SIDEBAR_BOTTOM_RIGHT_ACTIONS

Actions rendered in the bottom right.

TWTSideBarView actions diagram
Figure 1. A visual representation of how lookups and actions are manifested in the TWTSideBarView.

Lookups

The following lookups will be attempted and used if found.

TWTUserProfile

If it find a TWTUserProfile via lookup(TWTUserProfile.class), then it will use this as the basis for the profile avatar, name, and ID. You would typically add this lookup to the application controller when the user logs in (or is deemed to be logged in).

Styles

The following styles are used by TWTSideBarView, and can be overridden in your stylesheet to cusomize how the component looks.

TWTSideBar

UIID for the component.

TWTSideBarTopAction

UIID used for buttons in the SIDEBAR_TOP_ACTIONS category.

TWTSideBarAction

UIID used by main actions. i.e. SIDEBAR_ACTIONS category.

TWTSideBarActionIcon

UIID used for icons of main actions. I.e. icons of {@link #SIDEBAR_ACTIONS} category.

TWTSideBarStatsAction

UIID used by stats actions. I.e. SIDEBAR_STATS category.

TWTSideBarStatsActionIcon

UIID used for icons of stats actions.

TWTSideBarBottomLeftAction

UIID used for bottom left actions. I.e. SIDEBAR_BOTTOM_LEFT_ACTIONS category.

TWTSideBarBottomLeftActionsWrapper

UIID used for wrapper container of all of the bottom left actions.

TWTSideBarBottomRightAction

UIID used for bottom right actions. I.e. SIDEBAR_BOTTOM_RIGHT_ACTIONS category. TWTSideBarWrapper` - Wrapper component inside TWTSideBarView but wrapping all of the content.

TWTSideBarBottomRightActionsWrapper

UIID used for wrapper container of all of the bottom right actions.

TWTSideBarNorth

North container in the sidebar. This wraps top actions, avatar/username, and stats actions.

TWTSideBarOverflowMenuButton

UIID of the overflow menu button.

TWTSideBarNameLabel

UIID for the label with the profile user name.

TWTSideBarIDLabel

UIID for the label with the user ID.

TWTSideBarStatsActionsWrapper

UIID for the wrapper container of all of the stats actions.

TWTSideBarCenter

UIID for the wrapper container of the CENTER slot in the TWTSideBarWrapper. This wraps the SIDEBAR_ACTIONS and SIDEBAR_SETTINGS_ACTIONS.

TWTSideBarActionsWrapper

UIID for the sidebar actions wrapper container.

TWTSideBarSettingsActionsWrapper

UIID for the container that wraps the settings actions.

TWTSideBarSouth

UIID for the south container. This wraps the bottom left and bottom right actions.

Example

As a more complete example, we can register actions in the initControllerActions() method of the application controller:

@Override
protected void initControllerActions() {
    super.initControllerActions();

    // Sidebar Actions which will be injected into the TWTSideBarView

    ActionNode.builder()
        .label("Profile")
        .icon(FontImage.MATERIAL_ACCOUNT_CIRCLE)
            .addToController(this, TWTSideBarView.SIDEBAR_ACTIONS, evt -> {});

    ActionNode.builder()
        .label("Lists")
        .icon(FontImage.MATERIAL_LIST)
            .addToController(this, TWTSideBarView.SIDEBAR_ACTIONS, evt -> {});

    ActionNode.builder()
        .label("Topics")
        .icon(FontImage.MATERIAL_CATEGORY)
            .addToController(this, TWTSideBarView.SIDEBAR_ACTIONS, evt -> {});

    ActionNode.builder()
        .label("Bookmarks")
        .icon(FontImage.MATERIAL_BOOKMARKS)
            .addToController(this, TWTSideBarView.SIDEBAR_ACTIONS, evt -> {});

    ActionNode.builder()
        .label("Moments")
        .icon(FontImage.MATERIAL_BOLT)
            .addToController(this, TWTSideBarView.SIDEBAR_ACTIONS, evt -> {});

    ActionNode.builder()
        .label("Create new account")
            .addToController(this, TWTSideBarView.SIDEBAR_TOP_OVERFLOW_MENU, evt -> {});

    ActionNode.builder()
        .label("Add Existing Account")
            .addToController(this, TWTSideBarView.SIDEBAR_TOP_OVERFLOW_MENU, evt -> {});

    ActionNode.builder()
        .label("Settings and privacy")
            .addToController(this, TWTSideBarView.SIDEBAR_SETTINGS_ACTIONS, evt -> {});

    ActionNode.builder()
        .label("Help Center")
            .addToController(this, TWTSideBarView.SIDEBAR_SETTINGS_ACTIONS, evt -> {});

    ActionNode.builder()
        .icon(FontImage.MATERIAL_LIGHTBULB_OUTLINE)
            .addToController(this, TWTSideBarView.SIDEBAR_BOTTOM_LEFT_ACTIONS, evt -> {});

    ActionNode.builder()
        .icon(FontImage.MATERIAL_SCANNER)
            .addToController(this, TWTSideBarView.SIDEBAR_BOTTOM_RIGHT_ACTIONS, evt -> {});

    ActionNode.builder()
            .icon(FontImage.MATERIAL_ACCOUNT_CIRCLE)
            .addToController(this, TWTSideBarView.SIDEBAR_TOP_ACTIONS, evt -> {});

    ActionNode.builder()
            .icon(FontImage.MATERIAL_ACCOUNT_BALANCE_WALLET)
            .addToController(this, TWTSideBarView.SIDEBAR_TOP_ACTIONS, evt -> {});


    ActionNode.builder()
            .icon("Following")
            .label("311")
            .addToController(this, TWTSideBarView.SIDEBAR_STATS, evt -> {});

    ActionNode.builder()
            .icon("Followers")
            .label("344")
            .addToController(this, TWTSideBarView.SIDEBAR_STATS, evt -> {});




}

For the profile name and avatar, we need to add a lookup for TWTUserProfile. We’ll hard-code one here in the onStartController() method of the application controller:

@Override
    protected void onStartController() {
        super.onStartController();

        TWTUserProfile userProfile = new TWTUserProfileImpl();
        userProfile.setName("Steve Hannah");
        userProfile.setIdentifier("@shannah78");
        userProfile.setThumbnailUrl("https://www.codenameone.com/img/steve.jpg");
        addLookup(TWTUserProfile.class, userProfile);

    }

Finally, in our view we’ll add the <twtSideBarView> tag inside the <sidebar> tag:

<?xml version="1.0"?>
<border view-controller="com.example.tweetapp.controllers.HomePageViewController"
        xsi:noNamespaceSchemaLocation="HomePage.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <title hidden="true"/>

    <use-taglib class="com.codename1.twitterui.TagLibrary"/>
    <import>
        import com.example.tweetapp.providers.NewsFeedProvider;
    </import>

    <collapsibleHeader scrollableComponent="#tweetList">
        <twtTitle>
            <twtsearchButton rad-href="#SearchForm" rad-href-trigger="TWTSearchButton.SEARCH_ACTION"/>
        </twtTitle>
    </collapsibleHeader>
    <sidebar>
        <twtSideBarView/>
    </sidebar>


    <tweetListView
            name="tweetList"
            layout-constraint="center"
            provider="NewsFeedProvider.class"
    />

</border>
Clone this wiki locally