Skip to content

Migrating from Cobalt 0.6 to Cobalt 1.0

Guillaume Gendre edited this page Jun 21, 2019 · 16 revisions

We removed cobalt events. Now, we use a publish/subscribe pattern for all exchanges between web and native.

Bye bye events, callbacks, onUnhandledEvent etc.

On web side

cobalt.conf -> cobalt.json

  • File has been renamed to cobalt.json
  • You can remove "plugins" list from cobalt.json, plugins are now automatically detected once they are added on web and native side.

cobalt.sendEvent removed

You must use cobalt.publish instead.

Before

cobalt.sendEvent('eventName', { hip:1, hop:2 })

After

cobalt.publish('channelName', { hip:1, hop:2 })

warning : behavior is not the same : all webviews or native controllers that subscribed to this channel will receive your message.

cobalt.addEventListener removed

You must use cobalt.subscribe here.

Before

cobalt.addEventListener('eventName', function(data){
 console.log('data is', data)
})

After

cobalt.subscribe('channelName', function(data){
  console.log('data is', data)
})

warning : behavior is not the same : you will receive all messages sent to this channel including messages from other webviews or native controllers that published to it.

cobalt.init : defining events removed

You can't define event handler in cobalt.init anymore.

You must use cobalt.subscribe now as described in the previous paragraph.

Before :

cobalt.init({
    events: {
        "eventName" : function(data){
          console.log('received data', data)
        }
    }
})

After :

cobalt.init();
cobalt.subscribe('channelName', function(data){
  console.log('data is', data)
})

warning : behavior is not the same : you will receive all messages sent to this channel including messages from other webviews or native controllers that published to it.

Lifecycle events prefixed and sent to pubsub

All lifecycle events are now virtually sent to cobalt:eventName channels

Before

cobalt.addEventListener("onPageShown", function(data) {
    console.log('page is shown')
});
cobalt.addEventListener("onAppStarted", function(data) {
    console.log('app just started')
});
cobalt.addEventListener("onAppBackground", function(data) {
    console.log('app is moved to background')
});
cobalt.addEventListener(onAppForeground", function(data) {
    console.log('page is back at front')
});

After

cobalt.subscribe('cobalt:onPageShown', function (data){
    console.log('page is shown')
});
cobalt.subscribe('cobalt:onAppStarted', function (data){
    console.log('app just started')
});
cobalt.subscribe('cobalt:onAppBackground', function (data){
    console.log('app is moved to background')
});
cobalt.subscribe('cobalt:onAppForeground', function (data){
    console.log('page is back at front')
});

Note that you can't subscribe to lifecycle events of other pages here.

cobalt.sendCallback removed

You must use cobalt.publish here again. This mean that the native side may give you a channel string somewhere, that you may use to reply.

Before

cobalt.addEventListener('eventName', function(data, callback){
    console.log('data is', data)
    cobalt.sendCallback(callback, { result: 42 })
})

After

cobalt.subscribe('channelName', function(data){
  console.log('data is', data)
  cobalt.publish(data.replyTo, { result: 42 })
})

In this example, you decided that native side sends a channel id in a replyTo key of the message. replyTo is here just an example, it could have been callbackChannel or even any string you wanted.

onBackButtonPressed updated

Event onBackButtonPressed is now part of the lifecycle events and should be catched in the cobalt:onBackButtonPressed channel.

Use return true or return false to allow or disallow the app to go back. If you don't return anything or if you don't catch the lifecycle message, the app is allowed to go back.

Before

cobalt.addEventListener("onBackButtonPressed", function(data, callback){
    cobalt.log('you pressed back button');
    cobalt.sendCallback(callback,{value : true});
});

After

cobalt.subscribe('cobalt:onBackButtonPressed', function (data){
    cobalt.log('you pressed back button');
    return true; //or false to disallow this back button use
});

alert and actionPicker callback now returns index

Button clicked index is now sent directly to callback.

Before :

cobalt.alert({
	title: 'Alert title',
	message: 'Alert detailed message',
	buttons: ['Button 1', 'Button 2'],
	callback: function(result) {
	  if (result.index === 0) {
	    //clicked on first button
	  }
	}
});

cobalt.actionPicker({
    actions: ['one', 'two', 'three']
  }, function(data) {
    // use data.index
  });
});

After :

cobalt.alert({
	title: 'Alert title',
	message: 'Alert detailed message',
	buttons: ['Button 1', 'Button 2'],
	callback: function(index) {
	  if (index === 0) {
	    //clicked on first button
	  }
	}
});

cobalt.actionPicker({
    actions: ['one', 'two', 'three']
  }, function(index) {
    // now, use index
  });
});

On Android side

removed onUnhandledEvent

  • Now use PubSubInterface to subscribe to messages from the web.
  • There is no build-in callback system anymore. send messages instead.

Before :

public class myClass extends CobaltFragment {

    @Override
    protected boolean onUnhandledEvent(String event, JSONObject data, final String callback) {
        switch (event) {
        ...
        }
    }

After :

public class myClass extends CobaltFragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Cobalt.subscribeToChannel("myEvent", new PubSubInterface() {
            @Override
            public void onMessageReceived(@Nullable JSONObject message, @NonNull String channel) {
            ...
            }
        });
        
    }

Alternatively you can make your class implement PubSubInterface if you find it prettier.

removed onUnhandledCallback

There is no build-in callback system anymore. send messages instead.

removed onUnhandledMessage

Nobody used that.

removed sendEvent

  • Now use Cobalt.publish to send messages to the web.
  • There is no build-in callback system anymore. send messages instead.

Before :

sendEvent("myEvent", data);

After :

Cobalt.publishMessage(data, "myChannel");

removed sendCallback

  • Now use Cobalt.publish to send messages to the web.
  • There is no build-in callback system anymore. send messages instead.

Before :

sendCallback(callback, data);

After :

Cobalt.publishMessage(data, "myCallbackChannel");

On iOS side

appDelegate events simplified

Before :

#import "Cobalt/CobaltViewController.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [[NSNotificationCenter defaultCenter] postNotificationName:kOnAppStarted object:nil];
    return YES;
}

- (void)applicationDidEnterBackground:(UIApplication *)application {
    [[NSNotificationCenter defaultCenter] postNotificationName:kOnAppBackgroundNotification object:nil];
}

- (void)applicationWillEnterForeground:(UIApplication *)application {
     [[NSNotificationCenter defaultCenter] postNotificationName:kOnAppForegroundNotification object:nil];
}

After :

#import <Cobalt/Cobalt.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [Cobalt onAppStarted];
    return YES;
}

- (void)applicationDidEnterBackground:(UIApplication *)application
{
    [Cobalt onAppBackground];
}

- (void)applicationWillEnterForeground:(UIApplication *)application {
    [Cobalt onAppForeground];
}

Controller delegates updated

Before :

#import <Cobalt/CobaltViewController.h>

@interface DefaultViewController : CobaltViewController <CobaltDelegate>

After :

#import <Cobalt/CobaltViewController.h>
#import <Cobalt/Cobalt.h>

@interface DefaultViewController : CobaltViewController <PubSubDelegate>

You can also remove the call [self setDelegate:self]; that you needed in your Controllers if you used initWithNibName or initWithCoder.

Replaced onUnhanldedEvent with didReceiveMessage

Before :

- (BOOL)onUnhandledEvent:(NSString *)event
                withData:(NSDictionary *)data
             andCallback:(NSString *)callback
            fromWebView:(WebViewType)webView {
    if ([@"myEvent" isEqualToString:event]) {
        //do something
        return YES;
    }
    return NO;
}

After :

- (void)viewDidLoad
{
    [super viewDidLoad];
    [Cobalt subscribeDelegate:self toChannel:@"myEvent"];
}

- (void)didReceiveMessage:(nullable NSDictionary *)message
                onChannel:(nonnull NSString *)channel {
    if ([channel isEqualToString:@"myChannel"]) {
        
    }
}

Removed onUnhandledCallback

  • Now use Cobalt subscribeDelegate toChannel to subscribe to messages from the web.
  • There is no build-in callback system anymore. send messages instead.

Removed onUnhandledCallback

  • Now use Cobalt subscribeDelegate toChannel to subscribe to messages from the web.
  • There is no build-in callback system anymore. send messages instead.

Removed onUnhandledMessage

Nobody used that.

removed sendEvent

  • Now use Cobalt publishMessage to send messages to the web.
  • There is no build-in callback system anymore. send messages instead.

Before :

[self sendEvent:@"myEvent" withData:@{@"value":@42} andCallback:myCallback];

After :

[Cobalt publishMessage:@{@"value":@42}
                            toChannel:@"myChannel"];

removed sendCallback

  • Now use Cobalt publishMessage to send messages to the web.
  • There is no build-in callback system anymore. send messages instead.

Before :

[self sendCallback:@"myEvent" withData:@{@"value":@42}];

After :

[Cobalt publishMessage:@{@"value":@42}
                            toChannel:@"myCallbackChannel"];
Clone this wiki locally