Display views on the client

The graphics streamed remotely from the service application are displayed in client-side views.

To add a view to your client, simply create a container for it and register a View object. This object is essentially a wrapper around the native UI component.

You can display several views on the same client screen, all independent of each other: each view captures its own user input events, and can have its own encoding configuration.

Steps

Add a view

APIs:

View | HTML5 | Android
PWView | iOS

To display a view on the client:

  • Create a container for the view using the native language for your client, for example a div in an HTML5 client or a UIView controller in an iOS client.
  • Instantiate a new View object; this identifies the view by its unique name (the name that you chose when you called ViewManager.RegisterView() on the service), and registers with the service to receive the images associated with that view. The view will attach only after the client has an active connection.

Below is an example of the constructor for the client-side View class.

  In the snippets below, the new View object on the client is given a different name than the view's unique name as assigned by the service, to clearly show which is which. However, best practice is to use the same name in both cases.

HTML5

var myClientSideView = new pureweb.client.View({id: MyViewDiv', viewName: 'Spectacular3D'});			

iOS (Obj-C)

In your view controllers, use the viewDidLoad method to attach to the framework and specify the view name.

@property (strong, nonatomic) IBOutlet PWView *myClientSideView;

(...)

- (void)viewDidLoad
{
    self.myClientSideView.framework = [PWFramework sharedInstance];
    self.myClientSideView.viewName = @"Spectacular3D";
}			

Android

myClientSideView = new View(MyFramework.this, framework);
myClientSideView.setViewName("Spectacular3D");				

Example

How it's done in Asteroids

HTML5

In the .html file

<div id="AsteroidsView" class="purewebview"></div>

In the .js file

var asteroidsView = null;

// Client initialization code
function startAsteroids() {
    //Create the view object for when we're ready to connect
    asteroidsView = new pureweb.client.View({id: 'AsteroidsView', viewName: 'AsteroidsView'});

    //Register event listener for connected changed to create the Asteroids View
    pureweb.listen(client, pureweb.client.WebClient.EventType.CONNECTED_CHANGED, onConnectedChanged);
}

//Connected changed event handler - creates the AsteroidsView instance and completes initialization.
function onConnectedChanged(e) {
    if (e.target.isConnected()) {
        var client = pureweb.getClient();
        setupFPSCounter(asteroidsView);
    }
}

iOS (Swift)

Not shown below is the preliminary step of creating a view controller in Xcode. To do this, drag and drop a UIView onto a view controller, and change its class to PWView.

@IBOutlet weak var asteroidsView : PWView!

// In the view controller, attach to the framework 
// and specify the view name
class AsteroidsViewController: UIViewController {
   
    override func viewDidLoad() {
        super.viewDidLoad()
        
        asteroidsView.framework = PWFramework.sharedInstance();
        asteroidsView.viewName = "AsteroidsView"
    }
}

Android

Not shown below is the connection code, which you can find in PureWebActivity.java, a file shared by all the Android samples.

Assuming the connection is successful, the code below will inflate a layout, create the AsteroidsView and add it to the layout.

LayoutInflater li = (LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE)
ViewGroup root = (ViewGroup)findViewById(android.R.id.content);
RelativeLayout layout = (RelativeLayout)li.inflate(R.layout.main, root, false);

view = new View(AsteroidsAppActivity.this, framework);
view.setViewName("AsteroidsView");

// View is inserted at index 0 so it is below the game buttons
layout.addView(view, 0);
setContentView(layout);