com.codename1.rad.ui.entityviews

Class ProfileAvatarView

java.lang.Object

com.codename1.ui.Component

com.codename1.ui.Container

com.codename1.rad.ui.AbstractEntityView

com.codename1.rad.ui.entityviews.ProfileAvatarView

All Implemented Interfaces:

EntityView, Animation, Editable, StyleListener, Iterable<Component>

public class ProfileAvatarView
extends AbstractEntityView

A view that shows a profile’s avatar filled in a circle.

Figure 1. A sample with 3 ProfileAvatarViews rendered on 3 different entities. The first entity has a thumbnail. The 2nd only a name. The 3rd, neither a name nor thumbnail.

For best results, the view model (entity) should contain both an "icon" property and a "name" property. If an "icon" property is defined in the entity type, and the entity contains a valid value for this property (e.g. a URL for an image), then, this image will be used as the icon. If the entity doesn’t have an icon, but a "name" property is defined and is non-empty in the entity, then the name will be used to create a badge with the first letter of the entity name. If neither an icon, nor a name can be found on entity, it will simply display the FontImage.MATERIAL_ACCOUNT_CIRCLE material icon.

Property Resolution

As mentioned above, the view model should contain both an "icon" and "name" property for best results. The easiest way to achieve this is to add the icon or Thing.thumbnailUrl tag to the property you wish to use for the icon, and the Thing.name tag to the property you wish to use for the name. This view does, however, provide view properties that you can use to customize how the icon and name properties are resolved.

Icon Property Resolution

The Icon property will be resolved in the following order, until it identifies an eligible property on the view model:

1. It will check to see if the UI descriptor includes a ViewPropertyParameter for the ICON_PROPERTY view property, and use its value, if set.

2. It will check to see if the UI descriptor includes a ViewPropertyParameter for the ICON_PROPERTY_TAGS. If found, it will use these tags to try to resolve the icon property on the view model. .It will look for a property on the view model tagged with icon or Thing.thumbnailUrl (in that order). If found, it will use that property.

Name Property Resolution

The Name property will be resolved in the following order, until it identifies an eligible property on the view model:

1. It will check to see if the UI descriptor includes a ViewPropertyParameter for the NAME_PROPERTY view property, and use its value, if set.

2. It will check to see if the UI descriptor includes a ViewPropertyParameter for the NAME_PROPERTY_TAGS. If found, it will use these tags to try to resolve the name property on the view model.

3. It will look for a property on the view model tagged with name. If found, it will use that property.

Supported Actions

The following actions are supported on this view:

1. PROFILE_AVATAR_CLICKED

2. PROFILE_AVATAR_CLICKED_MENU

3. PROFILE_AVATAR_LONG_PRESS

4. PROFILE_AVATAR_LONG_PRESS_MENU

Example

The following example demonstrates the three different rendering strategies imployed by the AvatarProfileView:

1. Render an image, using the Thing#thumbnailImageUrl.

2. Render a large letter in a circle with the first letter of the name, using Thing.name.

3. Render generic icon.

//require CodeRAD
package com.codename1.samples;



import static com.codename1.ui.CN.*;
import com.codename1.ui.Form;
import com.codename1.ui.Dialog;
import com.codename1.ui.plaf.UIManager;
import com.codename1.ui.util.Resources;
import com.codename1.io.Log;
import com.codename1.rad.controllers.Controller;
import com.codename1.rad.controllers.ControllerEvent;
import com.codename1.rad.controllers.ViewController;
import com.codename1.ui.Toolbar;
import com.codename1.rad.models.Entity;
import com.codename1.rad.models.EntityType;
import com.codename1.rad.models.StringProperty;
import com.codename1.rad.nodes.ActionNode;
import com.codename1.rad.nodes.ViewNode;
import com.codename1.rad.schemas.Thing;
import static com.codename1.rad.ui.UI.*;
import com.codename1.rad.ui.entityviews.ProfileAvatarView;
import com.codename1.ui.FontImage;
import com.codename1.ui.events.ActionEvent;
import com.codename1.ui.layouts.BoxLayout;
import com.codename1.ui.layouts.FlowLayout;

/**
This file was generated by <a href="https://www.codenameone.com/">Codename One</a> for the purpose
of building native mobile applications using Java.
*/
public class ProfileAvatarViewSample {

   private Form current;
   private Resources theme;

   public void init(Object context) {
       // use two network threads instead of one
       updateNetworkThreadCount(2);

       theme = UIManager.initFirstTheme("/theme");

       // Enable Toolbar on all Forms by default
       Toolbar.setGlobalToolbar(true);

       // Pro only feature
       Log.bindCrashProtection(true);

       addNetworkErrorListener(err -> {
           // prevent the event from propagating
           err.consume();
           if(err.getError() != null) {
               Log.e(err.getError());
           }
           Log.sendLogAsync();
           Dialog.show("Connection Error", "There was a networking error in the connection to " + err.getConnectionRequest().getUrl(), "OK", null);
       });
   }

   public void start() {
       if(current != null){
           current.show();
           return;
       }


       Form hi = new Form("Hi World", BoxLayout.y());

       Profile profile = new Profile(); (1)
       profile.set(Profile.name, "Steve");
       profile.set(Profile.icon, "https://www.codenameone.com/img/steve.jpg");

       ProfileAvatarView avatar = new ProfileAvatarView(profile, 30f); (2)

       hi.add("Avatar with Name and Icon");
       hi.add(FlowLayout.encloseCenter(avatar));

       profile = new Profile();
       profile.set(Profile.name, "Steve");

       avatar = new ProfileAvatarView(profile, 30f);
       hi.add("Avatar with only Name");
       hi.add(FlowLayout.encloseCenter(avatar));

       profile = new Profile();
       avatar = new ProfileAvatarView(profile, 30f);
       hi.add("Avatar with no name or icon");
       hi.add(FlowLayout.encloseCenter(avatar));

       profile = new Profile();
       profile.set(Profile.name, "Steve");
       profile.set(Profile.icon, "https://www.codenameone.com/img/steve.jpg");
       hi.add("Avatar with view controller");
       hi.add(FlowLayout.encloseCenter(new ProfileViewController(null, profile).getView())); (3)

       hi.show();


   }

   public void stop() {
       current = getCurrentForm();
       if(current instanceof Dialog) {
           ((Dialog)current).dispose();
           current = getCurrentForm();
       }
   }

   public void destroy() {
   }

   public static class Profile extends Entity { (4)
       public static StringProperty name, icon;
       public static final EntityType TYPE = new EntityType() {{
           name = string(tags(Thing.name));
           icon = string(tags(Thing.thumbnailUrl));

       }};
   }


   public static class ProfileViewController extends ViewController { (5)
       private static final ActionNode phone = action( (6)
               icon(FontImage.MATERIAL_PHONE),
               label("Phone")
       );


       public ProfileViewController(Controller parent, Profile profile) {
           super(parent);
           ViewNode viewNode = new ViewNode(
                   actions(ProfileAvatarView.PROFILE_AVATAR_CLICKED_MENU, phone) (7)
           );
           ProfileAvatarView avatar = new ProfileAvatarView(profile, viewNode, 20f);
           setView(avatar);

           addActionListener(phone, evt->{ (8)
               evt.consume();
               Dialog.show("Phone Action clicked", "For user "+evt.getEntity().getText(Thing.name), "OK", null);
           });
       }

       @Override
       public void actionPerformed(ControllerEvent evt) {
           System.out.println("Event "+evt);
       }


   }

}

1. We create a view model for the view. The ViewModel just has to be an Entity with properties tagged with Thing.name and Thing.thumbnailUrl.

2. We create a ProfileAvatarView with the view model we created.

3. To demonstrate actions we wrap a ProfileAvatarView inside a ViewController. Action events will propagate up the component hierarchy until it finds a controller that handles it. This example doesn’t use a FormController or an ApplicationController, so we use a ViewController for the particular ProfileAvatarView to handle events.

4. The definition of the view model. A simple Entity subclass with two properties. Notice that we tag properties with Thing.name and Thing.thumbnailUrl since these are expected by the view.

5. The definition of the view controller that we use for the last view. Using a view controller allows us to inject actions in the view and handle their events.

6. We define a "phone" action which will be rendered in the view as a menu item when the avatar is clicked.

7. We register the "phone" action with the PROFILE_AVATAR_CLICKED_MENU category so that it will appear in a popup menu when the user clicks it.

8. We register a listener to receive action events from the phone action.

The outcome is

Figure 2. Running the above sample in the Codename One simulator

When the user clicks on the last avatar they receive the following popup menu because we registered an action with the PROFILE_AVATAR_CLICKED_MENU category of the view node.

Figure 3. Popup menu shown when user clicked on avatar because we added an action via the controller.

Author:

shannah

Nested Class Summary

Nested Classes

Modifier and Type	Class and Description
static class	ProfileAvatarView.ImageRenderer An image renderer that will render a ProfileAvatarView as an image for the given entity.

Field Summary

Fields

Modifier and Type	Field and Description
static Tag	icon Default tag to mark the "icon" property in the view model.
static ViewProperty<Property>	ICON_PROPERTY
static ViewProperty<Tags>	ICON_PROPERTY_TAGS
static Tag	name Default tag to mark the "name" property in the view model.
static ViewProperty<Property>	NAME_PROPERTY
static ViewProperty<Tags>	NAME_PROPERTY_TAGS
static ActionNode.Category	PROFILE_AVATAR_CLICKED Action that will be fired when the avatar is clicked.
static ActionNode.Category	PROFILE_AVATAR_CLICKED_MENU Actions that should appear in a popup menu when the avatar is clicked.
static ActionNode.Category	PROFILE_AVATAR_LONG_PRESS Action that will be fired when user long presses on the avatar.
static ActionNode.Category	PROFILE_AVATAR_LONG_PRESS_MENU Actions that should appear in a popup menu when the avatar is long pressed.

Fields inherited from class com.codename1.ui.Component

BASELINE, BOTTOM, BRB_CENTER_OFFSET, BRB_CONSTANT_ASCENT, BRB_CONSTANT_DESCENT, BRB_OTHER, CENTER, CROSSHAIR_CURSOR, DEFAULT_CURSOR, DRAG_REGION_IMMEDIATELY_DRAG_X, DRAG_REGION_IMMEDIATELY_DRAG_XY, DRAG_REGION_IMMEDIATELY_DRAG_Y, DRAG_REGION_LIKELY_DRAG_X, DRAG_REGION_LIKELY_DRAG_XY, DRAG_REGION_LIKELY_DRAG_Y, DRAG_REGION_NOT_DRAGGABLE, DRAG_REGION_POSSIBLE_DRAG_X, DRAG_REGION_POSSIBLE_DRAG_XY, DRAG_REGION_POSSIBLE_DRAG_Y, E_RESIZE_CURSOR, HAND_CURSOR, LEFT, MOVE_CURSOR, N_RESIZE_CURSOR, NE_RESIZE_CURSOR, NW_RESIZE_CURSOR, RIGHT, S_RESIZE_CURSOR, SE_RESIZE_CURSOR, SW_RESIZE_CURSOR, TEXT_CURSOR, TOP, W_RESIZE_CURSOR, WAIT_CURSOR

Constructor Summary

Constructors

Constructor and Description
ProfileAvatarView(Entity entity, float sizeMM) Creates an avatar for the given profile entity, with the given icon diameter.
ProfileAvatarView(Entity entity, Node node, float sizeMM) Creats an avatar for the given profile entity, with icon diameter and UI descriptor node.

Method Summary

Modifier and Type	Method and Description
protected void	bindImpl() To be implemented by subclasses to register listeners on the model.
protected Dimension	calcPreferredSize()
void	commit()
Node	getViewNode()
void	setIcon(Label label) Sets the this view as the icon for the given label.
protected void	unbindImpl() Should be overridden by subclasses to unregister listeners from the model.
void	update()

Methods inherited from class com.codename1.rad.ui.AbstractEntityView

bind, deinitialize, findProperty, getEntity, initComponent, isBindOnPropertyChangeEvents, setBindOnPropertyChangeEvents, setEntity, unbind

Methods inherited from class com.codename1.ui.Container

add, add, add, add, add, add, addAll, addComponent, addComponent, addComponent, addComponent, animateHierarchy, animateHierarchyAndWait, animateHierarchyFade, animateHierarchyFadeAndWait, animateLayout, animateLayoutAndWait, animateLayoutFade, animateLayoutFadeAndWait, animateUnlayout, animateUnlayoutAndWait, applyRTL, cancelRepaints, clearClientProperties, constrainHeightWhenScrollable, constrainWidthWhenScrollable, contains, createAnimateHierarchy, createAnimateHierarchyFade, createAnimateLayout, createAnimateLayoutFade, createAnimateLayoutFadeAndWait, createAnimateMotion, createAnimateUnlayout, createReplaceTransition, dragInitiated, drop, encloseIn, encloseIn, findDropTargetAt, findFirstFocusable, fireClicked, flushReplace, forceRevalidate, getBottomGap, getChildrenAsList, getClosestComponentTo, getComponentAt, getComponentAt, getComponentCount, getComponentIndex, getGridPosX, getGridPosY, getLayout, getLayoutHeight, getLayoutWidth, getLeadComponent, getLeadParent, getResponderAt, getSafeAreaRoot, getScrollIncrement, getSideGap, getUIManager, initLaf, invalidate, isEnabled, isSafeArea, isSafeAreaRoot, isScrollableX, isScrollableY, isSelectableInteraction, iterator, iterator, keyPressed, keyReleased, layoutContainer, morph, morphAndWait, paint, paintComponentBackground, paintGlass, paramString, pointerPressed, refreshTheme, removeAll, removeComponent, replace, replace, replaceAndWait, replaceAndWait, replaceAndWait, revalidate, revalidateLater, revalidateWithAnimationSafety, scrollComponentToVisible, setCellRenderer, setEnabled, setLayout, setLeadComponent, setSafeArea, setSafeAreaRoot, setScrollable, setScrollableX, setScrollableY, setScrollIncrement, setShouldCalcPreferredSize, setShouldLayout, setUIManager, updateTabIndices

Methods inherited from class com.codename1.ui.Component

addDragFinishedListener, addDragOverListener, addDropListener, addFocusListener, addLongPressListener, addPointerDraggedListener, addPointerPressedListener, addPointerReleasedListener, addPullToRefresh, addScrollListener, addStateChangeListener, animate, bindProperty, blocksSideSwipe, calcScrollSize, contains, containsOrOwns, createStyleAnimation, deinitializeCustomStyle, dragEnter, dragExit, dragFinished, draggingOver, drawDraggedImage, focusGained, focusLost, getAbsoluteX, getAbsoluteY, getAllStyles, getAnimationManager, getBaseline, getBaselineResizeBehavior, getBindablePropertyNames, getBindablePropertyTypes, getBorder, getBoundPropertyValue, getBounds, getBounds, getClientProperty, getCloudBoundProperty, getCloudDestinationProperty, getComponentForm, getComponentState, getCursor, getDirtyRegion, getDisabledStyle, getDraggedx, getDraggedy, getDragImage, getDragRegionStatus, getDragSpeed, getEditingDelegate, getHeight, getInlineAllStyles, getInlineDisabledStyles, getInlinePressedStyles, getInlineSelectedStyles, getInlineStylesTheme, getInlineUnselectedStyles, getInnerHeight, getInnerPreferredH, getInnerPreferredW, getInnerWidth, getInnerX, getInnerY, getLabelForComponent, getName, getNativeOverlay, getNextFocusDown, getNextFocusLeft, getNextFocusRight, getNextFocusUp, getOuterHeight, getOuterPreferredH, getOuterPreferredW, getOuterWidth, getOuterX, getOuterY, getOwner, getParent, getPreferredH, getPreferredSize, getPreferredSizeStr, getPreferredTabIndex, getPreferredW, getPressedStyle, getPropertyNames, getPropertyTypeNames, getPropertyTypes, getPropertyValue, getSameHeight, getSameWidth, getScrollable, getScrollAnimationSpeed, getScrollDimension, getScrollOpacity, getScrollOpacityChangeSpeed, getScrollX, getScrollY, getSelectCommandText, getSelectedRect, getSelectedStyle, getStyle, getTabIndex, getTensileLength, getTextSelectionSupport, getTooltip, getUIID, getUnselectedStyle, getVisibleBounds, getVisibleBounds, getWidth, getX, getY, growShrink, handlesInput, hasFixedPreferredSize, hasFocus, hideNativeOverlay, initCustomStyle, installDefaultPainter, isAlwaysTensile, isBlockLead, isCellRenderer, isChildOf, isDragActivated, isDragAndDropOperation, isDraggable, isDragRegion, isDropTarget, isEditable, isEditing, isFlatten, isFocusable, isGrabsPointerEvents, isHidden, isHidden, isHideInLandscape, isHideInPortrait, isIgnorePointerEvents, isInClippingRegion, isInitialized, isOpaque, isOwnedBy, isRippleEffect, isRTL, isScrollable, isScrollVisible, isSetCursorSupported, isSmoothScrolling, isSnapToGrid, isStickyDrag, isTactileTouch, isTactileTouch, isTensileDragEnabled, isTraversable, isVisible, keyRepeated, laidOut, longKeyPress, longPointerPress, onScrollX, onScrollY, paintBackground, paintBackgrounds, paintBorder, paintBorderBackground, paintComponent, paintComponent, paintIntersectingComponentsAbove, paintLock, paintLockRelease, paintRippleOverlay, paintScrollbars, paintScrollbarX, paintScrollbarY, parsePreferredSize, pinch, pinchReleased, pointerDragged, pointerDragged, pointerHover, pointerHoverPressed, pointerHoverReleased, pointerPressed, pointerReleased, pointerReleased, putClientProperty, refreshTheme, refreshTheme, remove, removeDragFinishedListener, removeDragOverListener, removeDropListener, removeFocusListener, removeLongPressListener, removePointerDraggedListener, removePointerPressedListener, removePointerReleasedListener, removeScrollListener, removeStateChangeListener, repaint, repaint, requestFocus, resetFocusable, respondsToPointerEvents, scrollRectToVisible, scrollRectToVisible, setAlwaysTensile, setBlockLead, setBoundPropertyValue, setCloudBoundProperty, setCloudDestinationProperty, setComponentState, setCursor, setDirtyRegion, setDisabledStyle, setDraggable, setDropTarget, setEditingDelegate, setFlatten, setFocus, setFocusable, setGrabsPointerEvents, setHandlesInput, setHeight, setHidden, setHidden, setHideInLandscape, setHideInPortrait, setIgnorePointerEvents, setInitialized, setInlineAllStyles, setInlineDisabledStyles, setInlinePressedStyles, setInlineSelectedStyles, setInlineStylesTheme, setInlineUnselectedStyles, setIsScrollVisible, setLabelForComponent, setName, setNextFocusDown, setNextFocusLeft, setNextFocusRight, setNextFocusUp, setOpaque, setOwner, setPreferredH, setPreferredSize, setPreferredSizeStr, setPreferredTabIndex, setPreferredW, setPressedStyle, setPropertyValue, setRippleEffect, setRTL, setSameHeight, setSameSize, setSameWidth, setScrollAnimationSpeed, setScrollOpacityChangeSpeed, setScrollSize, setScrollVisible, setScrollX, setScrollY, setSelectCommandText, setSelectedStyle, setSize, setSmoothScrolling, setSnapToGrid, setTabIndex, setTactileTouch, setTensileDragEnabled, setTensileLength, setTooltip, setTraversable, setUIID, setUIID, setUnselectedStyle, setVisible, setWidth, setX, setY, shouldBlockSideSwipe, shouldRenderComponentSelection, showNativeOverlay, startEditingAsync, stopEditing, stripMarginAndPadding, styleChanged, toImage, toString, unbindProperty, updateNativeOverlay, visibleBoundsContains

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, wait, wait, wait

Methods inherited from interface java.lang.Iterable

forEach, spliterator

Field Detail

icon

public static final Tag icon

Default tag to mark the "icon" property in the view model.

See Also:

ListRowItem.icon

name

public static final Tag name

Default tag to mark the "name" property in the view model.

See Also:

Thing.name

ICON_PROPERTY

public static final ViewProperty<Property> ICON_PROPERTY

NAME_PROPERTY

public static final ViewProperty<Property> NAME_PROPERTY

ICON_PROPERTY_TAGS

public static final ViewProperty<Tags> ICON_PROPERTY_TAGS

NAME_PROPERTY_TAGS

public static final ViewProperty<Tags> NAME_PROPERTY_TAGS

PROFILE_AVATAR_CLICKED

public static final ActionNode.Category PROFILE_AVATAR_CLICKED

Action that will be fired when the avatar is clicked.

PROFILE_AVATAR_LONG_PRESS

public static final ActionNode.Category PROFILE_AVATAR_LONG_PRESS

Action that will be fired when user long presses on the avatar.

PROFILE_AVATAR_CLICKED_MENU

public static final ActionNode.Category PROFILE_AVATAR_CLICKED_MENU

Actions that should appear in a popup menu when the avatar is clicked. Popup menu will only be displayed if the PROFILE_AVATAR_CLICKED action was not consumed.

PROFILE_AVATAR_LONG_PRESS_MENU

public static final ActionNode.Category PROFILE_AVATAR_LONG_PRESS_MENU

Actions that should appear in a popup menu when the avatar is long pressed. Popup menu will only be displayed if the PROFILE_AVATAR_LONG_PRESS action was not consumed.

Constructor Detail

ProfileAvatarView

public ProfileAvatarView(Entity entity,
                         float sizeMM)

Creates an avatar for the given profile entity, with the given icon diameter.

Parameters:

entity - The view model.

sizeMM - The size of the avatar icon in mm.

ProfileAvatarView

public ProfileAvatarView(Entity entity,
                         Node node,
                         float sizeMM)

Creats an avatar for the given profile entity, with icon diameter and UI descriptor node.

Parameters:

entity - The view model

node - The ui view descriptor. This can be used to register actions, view properties, etc… to customize the view.

sizeMM - The size of the avatar icon in mm.

Method Detail

calcPreferredSize

protected Dimension calcPreferredSize()

Overrides:

calcPreferredSize in class Container

update

public void update()

setIcon

public void setIcon(Label label)

Sets the this view as the icon for the given label.

Parameters:

label -

commit

public void commit()

getViewNode

public Node getViewNode()

bindImpl

protected void bindImpl()

Description copied from class: AbstractEntityView

To be implemented by subclasses to register listeners on the model.

Overrides:

bindImpl in class AbstractEntityView

unbindImpl

protected void unbindImpl()

Description copied from class: AbstractEntityView

Should be overridden by subclasses to unregister listeners from the model.

Overrides:

unbindImpl in class AbstractEntityView