CollapsibleHeader

CollapsibleHeaderContainer

<collapsibleHeader> • javadoc

Synopsis

The CollapsibleHeader component is a view that is rendered as the title bar of a form. It collapses and hides when a designated component is scrolled down, and it expands back to its contents preferred height as the designated component is scrollled up.

Usage

1. Hide the default title using <title hidden="true"/>.

2. Insert the following tag into the view:

   <collapsibleHeader scrollableComponent="#NameOfScrollableComponent">
       <!-- Insert a single child component here that will be used as the
            header content. -->
   </collapsibleHeader>

   where the scrollableComponent attribute value is a selector supported by the ComponentSelector class for identifying the component that the collapsible header responds to. When this component is scrolled up, the header will be shown. When scrolled down, it will be hidden.

3. Ensure that the view contains a component that is scrollable Y that the collapsible header can reference for its scrollable component.

Attributes

scrollableComponent

A selector string that identifies the scrollable component. The scrollable component is a component that the collapsible header will monitor for scrolling. When this component is scrolled up, the header will expand. When it is scrolled down, the header will disappear.

Required

collapseMode

Selects between FullCollapse and PartialCollapse. In FullCollapse mode, the entire header will collapse. In PartialCollapse mode, the body has its own header, so when the title bar is collapsed, the body’s header is still visible.

fullCollapseUIID

TODO

partialCollapseUIID

TODO

Child Components

The <collapsibleHeader> tag expects exactly one child tag, which is used as the title bar of the header.

Example

<?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"/> (1)

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

    <collapsibleHeader scrollableComponent="#tweetList"> (2)
        <center><label iconUIID="TwitterIcon" fontIcon="(char)0xe902" ></label></center>
    </collapsibleHeader>

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

1. We set <title hidden="true"/> to hide the default title bar.

2. We add <collapsibleHeader> which will create a custom collapsible title bar. This tag expects 1 child XML tag, which it will make the contents of the title bar.

3. We add the name attribute to the <tweetListView> tag so that it can be referenced from the scrollableComponent attribute in the <collapsibleHeader> tag. The collapsible header then listens to scroll activity on this component to know when to collapse and expand.

Here is a short video clip of the collapsible header in action.