Show Contact with Photo

Goal

Display contact details including their profile photo by loading contact information and asynchronously fetching the contact's image.

Actions Required

Action
Purpose

AddressBookReadContacts

Fetch contacts from device

AddressBookGetReadContactsSuccessResult

Get contact count

AddressBookGetContactInfo

Extract contact details

AddressBookLoadContactImage

Load contact's profile photo

Variables Needed

  • contactCount (Int)

  • selectedIndex (Int) - Contact to display

  • firstName (String)

  • lastName (String)

  • fullName (String)

  • phoneNumbers (Array: String) - PlayMaker Array (set element type to String)

  • emailAddresses (Array: String) - PlayMaker Array (set element type to String)

  • contactImage (Texture) - Output of AddressBookLoadContactImage

  • errorCode (Int)

  • errorDescription (String)

Implementation Steps

1. State: ReadContacts

Action: AddressBookReadContacts

  • Inputs:

    • limit: 0 (read all)

    • offset: 0

    • mustIncludeName: true

  • Events:

    • successEvent β†’ GetCount

    • failureEvent β†’ ShowError

2. State: GetCount

Action: AddressBookGetReadContactsSuccessResult

  • Outputs:

    • contactCount β†’ contactCount

  • Transition: Display contact list, wait for user selection

3. State: GetContactDetails

Action: AddressBookGetContactInfo

  • Inputs:

    • contactIndex: selectedIndex (user-selected contact)

  • Outputs:

    • firstName β†’ firstName

    • lastName β†’ lastName

    • fullName β†’ fullName

    • phoneNumbers β†’ phoneNumbers array

    • emailAddresses β†’ emailAddresses array

  • Transition: Go to LoadImage

4. State: LoadImage

Action: AddressBookLoadContactImage

  • Inputs:

    • contactIndex: selectedIndex (same as GetContactInfo)

  • Outputs:

    • contactImage β†’ contactImage (Texture2D)

    • errorCode β†’ errorCode

    • errorDescription β†’ errorDescription

  • Events:

    • successEvent β†’ DisplayContactWithImage

    • failureEvent β†’ DisplayContactWithPlaceholder

Note: This is an async operation; wait for the event before proceeding.

5. State: DisplayContactWithImage

Display in UI:

  • Image component.texture = contactImage

  • Text: fullName

  • Text: phoneNumbers[0] (if array Length > 0)

  • Text: emailAddresses[0] (if array Length > 0)

6. State: DisplayContactWithPlaceholder

If image loading failed (no photo available):

  • Display default avatar/placeholder image

  • Show contact details normally

Image Loading Flow

Common Issues

  • No Image Available: Not all contacts have photos; always handle failureEvent with a placeholder

  • Image Load Delay: LoadContactImage is async; don't update UI until successEvent fires

  • Wrong Index: Ensure selectedIndex matches between GetContactInfo and LoadContactImage

  • Texture Memory: Loaded Texture2D objects use memory; dispose or cache wisely for large lists

Performance Tips

Lazy Loading: Only load images when user views a contact, not for entire contact list upfront.

Image Caching: Cache loaded images to avoid re-loading when user revisits same contact.

Placeholder Strategy: Show placeholder immediately, load image in background, update UI on success.

Memory Management: For contact lists showing multiple photos, consider loading/unloading images as user scrolls.

Last updated

Was this helpful?