primary goal

How to Build Custom Apps Using Adobe Acrobat Connect Collaboration Builder SDK

Adobe Acrobat Connect (formerly Macromedia Breeze) provides a robust web conferencing platform. By utilizing the Adobe Acrobat Connect Collaboration Builder SDK, developers can create custom apps, pods, and extensions. These custom components enhance interactivity, streamline workflows, and integrate external data directly into the virtual meeting space.

This guide outlines the essential steps, architecture, and best practices for building custom applications using the Collaboration Builder SDK. Understanding the Architecture

The Collaboration Builder SDK relies on a synchronization framework that connects your custom application to the Acrobat Connect edge servers. The Pod Architecture

Every custom app in Acrobat Connect runs inside a “pod”—a draggable, resizable window within the meeting interface. Your application is essentially a Flash/Flex application (SWF file) or an HTML5 component wrapped inside the container provided by the platform. Message Syncing and State Management

The core mechanism of the SDK is state synchronization. When a user interacts with your custom app (e.g., clicks a button, types text), the app does not just update locally. The app sends a message to the Adobe Connect server. The server updates the shared room state.

The server broadcasts the updated state to all participants in the room. Every user’s pod renders the change simultaneously. Prerequisites and Environment Setup

Before writing code, ensure your development environment is properly configured.

Adobe Connect Collaboration Builder SDK: Download the SDK package containing the library files (.swc or .js equivalents depending on the version), documentation, and sample applications.

Development IDE: Use Adobe Flash Builder, Adobe Animate, or a modern code editor if you are utilizing the updated HTML5/JavaScript SDK architecture.

Adobe Connect Developer Account: Access to a development or sandbox instance of an Adobe Connect account with host privileges to test pods. Step-by-Step Implementation 1. Initialize the SDK Framework

Your application must first establish a connection with the host pod container. This allows the app to communicate with the room session.

For Flash/Flex-based SDKs, import the synchronization components: actionscript

import com.adobe.sync.Session; import com.adobe.sync.events.SessionEvent; private var mySession:Session; private function initApp():void { mySession = Session.getInstance(); mySession.addEventListener(SessionEvent.SESSION_CONNECT, onSessionConnect); } Use code with caution. 2. Define Shared Properties and Collections

To synchronize data across users, use the SDK’s shared collection classes (like SharedCollection or SharedProperty). actionscript

import com.adobe.sync.collections.SharedCollection; private var sharedNotes:SharedCollection; private function onSessionConnect(event:SessionEvent):void { sharedNotes = new SharedCollection(“myCustomNotes”, mySession); sharedNotes.addEventListener(CollectionEvent.COLLECTION_CHANGE, onDataChanged); sharedNotes.connect(); } Use code with caution. 3. Handle User Input and Broadcast State

When a user updates data in your app, write that data directly to the shared collection rather than updating the UI immediately. actionscript

private function saveNoteToAll(text:String):void { var noteItem:Object = { text: text, timestamp: new Date().getTime() }; sharedNotes.addItem(noteItem); } Use code with caution. 4. Listen for Remote Updates

When any participant updates the shared collection, the server triggers an event. Listen for this event to update the local UI for all users. actionscript

private function onDataChanged(event:CollectionEvent):void { // Refresh the UI grid, text box, or canvas with the new data myNoteDisplay.dataProvider = sharedNotes.toArray(); } Use code with caution. Role-Based Access Control

A crucial part of building apps for Adobe Connect is managing roles. Users enter rooms as Hosts, Presenters, or Participants. Your custom app must respect these boundaries.

Host/Presenter Privileges: Give these users administrative controls (e.g., clearing the canvas, resetting a poll, or muting data synchronization).

Participant Privileges: Restrict these users to standard interactions (e.g., submitting an answer or viewing data). You can check user roles through the session object: actionscript

if (mySession.userManager.localUser.role == UserRoles.HOST) { // Enable administrative buttons adminPanel.visible = true; } Use code with caution. Testing and Deployment Testing Locally

Use the local testing environment provided within the SDK. This allows you to simulate multiple users (e.g., User A and User B) side-by-side on your desktop to ensure synchronization happens instantly and without conflicts. Uploading to Adobe Connect

Compile your application into a final asset package (typically a .zip file containing the compiled code and a manifest file, or a single .swf file). Log into your Adobe Connect room as a Host. Click on the Pods menu -> Add New Pod. Click the pod drop-down menu and select Share -> Document.

Browse your computer, select your compiled application file, and upload it. Best Practices for Custom Pod Development

Optimize Bandwidth: Only send changed data over the network. Do not broadcast the entire application state if only one text field changed.

Handle Latency Gracefully: Implement visual indicators (like loading spinners) if your app performs heavy calculations or fetches data from external third-party APIs.

Design Responsibly: Pods can be resized to any shape by the room host. Ensure your user interface uses fluid layouts that scale gracefully from a small sidebar to a full-screen view. To help refine your application setup, please let me know:

Which version of Adobe Connect are you targeting (classic Flash-based or the modern HTML5/New Interface)?

What specific functionality are you trying to build inside your custom app?