= Example
public class ContactListDecorator extends Object implements NodeDecorator, ActionCategories
A decorator that can be used with a ListNode
to style it like a Contact list.
= Example
The following code snippet shows the use of a list node to render a contact list.
package com.codename1.demos.ddddemo;
import com.codename1.rad.ui.UI;
import static com.codename1.rad.ui.UI.action;
import static com.codename1.rad.ui.UI.icon;
import com.codename1.rad.ui.decorators.ContactListDecorator;
import com.codename1.rad.nodes.ActionNode;
import static com.codename1.rad.models.EntityType.description;
import static com.codename1.rad.models.EntityType.label;
import com.codename1.ui.FontImage;
import static com.codename1.ui.FontImage.MATERIAL_DELETE;
public class ContactList extends UI {
// ... define some actions
form(
list(
rowTemplate(
actions(LEFT_SWIPE_MENU, chat2) (1)
),
decorator(new ContactListDecorator()) (2)
)
);
}}
Add an action "chat2" (which was defined elsewhere in this example), to the ActionCategories.LEFT_SWIPE_MENU
category which
is rendered in the left side of a SwipeContainer
.
This makes use of the ContactListDecorator
attribute which applies the custom renderer to the list to create the contact list look.
And the result is
In this example, a lot of the magic is hidden in the ContactListDecorator as it adds some extra attributes to get the desired effect here. It is quite a simple decorator though, so it can be instructive to look at the source to see what it does:
package com.codename1.rad.ui.decorators;
import com.codename1.rad.ui.ActionCategories;
import com.codename1.rad.ui.ActionStyle;
import com.codename1.rad.ui.Actions;
import com.codename1.rad.ui.NodeDecorator;
import com.codename1.rad.ui.UI;
import static com.codename1.rad.ui.UI.iconRenderer;
import com.codename1.rad.attributes.UIID;
import com.codename1.rad.models.Tag;
import com.codename1.rad.ui.entityviews.MultiButtonEntityView;
import com.codename1.rad.ui.image.FirstCharEntityImageRenderer;
import com.codename1.rad.nodes.ActionNode;
import com.codename1.rad.nodes.ActionsNode;
import com.codename1.rad.nodes.ListNode;
import com.codename1.rad.nodes.Node;
import com.codename1.rad.schemas.ListRowItem;
import com.codename1.rad.schemas.Thing;
/**
A decorator that can be used with a ListNode
to style it like a Contact list.
BOTTOM_LEFT_MENU, BOTTOM_MENU, BOTTOM_RIGHT_MENU, BUTTON_ACTION, LEFT_SWIPE_MENU, LIST_ADD_ACTION, LIST_LOAD_MORE_ACTION, LIST_REFRESH_ACTION, LIST_REMOVE_ACTION, LIST_SELECT_ACTION, OVERFLOW_MENU, RIGHT_SWIPE_MENU, TOP_LEFT_MENU, TOP_MENU, TOP_RIGHT_MENU
Constructor and Description |
---|
ContactListDecorator() |
public void decorate(Node node)
decorate
in interface NodeDecorator
Copyright © 2021. All Rights Reserved.