docs: add code tabs

Summary: adding code tabs for Android, iOS and C++ to improve readability of pages.

Reviewed By: jknoxville

Differential Revision: D15167691

fbshipit-source-id: e7f602a3a1cbe39ef5da0a15bb0bbfc8f79e8ccc
This commit is contained in:
Daniel Büchele
2019-05-01 11:18:00 -07:00
committed by Facebook Github Bot
parent 8734b99f8d
commit b0d2983bd4
2 changed files with 23 additions and 30 deletions

View File

@@ -7,8 +7,9 @@ title: Mobile Setup
Create a class implementing `FlipperPlugin`. The ID that is returned from your implementation needs to match the `name` defined in your JavaScript counterpart's `package.json`.
### Android
<!--DOCUSAURUS_CODE_TABS-->
<!--Android-->
```java
public class MyFlipperPlugin implements FlipperPlugin {
private FlipperConnection mConnection;
@@ -34,9 +35,7 @@ public class MyFlipperPlugin implements FlipperPlugin {
}
}
```
### iOS
<!--iOS-->
```objective-c
@interface MyFlipperPlugin : NSObject<FlipperPlugin>
@end
@@ -50,9 +49,7 @@ public class MyFlipperPlugin implements FlipperPlugin {
@end
```
### C++
<!--C++-->
```c++
class MyFlipperPlugin : public FlipperPlugin {
public:
@@ -62,13 +59,15 @@ public:
bool runInBackground() override;
};
```
<!--END_DOCUSAURUS_CODE_TABS-->
## Using FlipperConnection
Using the `FlipperConnection` object you can register a receiver of a desktop method call and respond with data.
### Android
<!--DOCUSAURUS_CODE_TABS-->
<!--Android-->
```java
connection.receive("getData", new FlipperReceiver() {
@Override
@@ -80,9 +79,7 @@ connection.receive("getData", new FlipperReceiver() {
}
});
```
### iOS
<!--iOS-->
```objective-c
@interface MyFlipperPlugin : NSObject<FlipperPlugin>
@end
@@ -104,9 +101,7 @@ connection.receive("getData", new FlipperReceiver() {
@end
```
### C++
<!--C++-->
```c++
void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) {
conn->receive("getData", [](const folly::dynamic &params,
@@ -116,34 +111,32 @@ void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) {
});
}
```
<!--END_DOCUSAURUS_CODE_TABS-->
## Push data to the desktop
You don't have to wait for the desktop to request data though, you can also push data directly to the desktop.
### Android
<!--DOCUSAURUS_CODE_TABS-->
<!--Android-->
```java
connection.send("MyMessage",
new FlipperObject.Builder()
.put("message", "Hello")
.build()
```
### iOS
<!--iOS-->
```objective-c
[connection send:@"getData" withParams:@{@"message":@"hello"}];
```
### C++
<!--C++-->
```c++
void MyFlipperPlugin::didConnect(std::shared_ptr<FlipperConnection> conn) {
dynamic message = folly::dynamic::object("message", "hello");
conn->send("getData", message);
}
```
<!--END_DOCUSAURUS_CODE_TABS-->
## Background Plugins

View File

@@ -9,8 +9,9 @@ Plugins should be treated as singleton instances as there can only be one `Flipp
Plugins are identified by the string that their identifier method returns, in this example, "MyFlipperPlugin":
### Android
<!--DOCUSAURUS_CODE_TABS-->
<!--Android-->
```java
final FlipperClient client = AndroidFlipperClient.getInstance(context);
// Client may be null if AndroidFlipperClient.createInstance() was never called
@@ -20,17 +21,13 @@ if (client != null) {
plugin.sendData(myData);
}
```
### iOS
<!--iOS-->
```objective-c
FlipperClient *client = [FlipperClient sharedClient];
MyFlipperPlugin *myPlugin = [client pluginWithIdentifier:@"MyFlipperPlugin"];
[myPlugin sendData:myData];
```
### C++
<!--C++-->
```c++
auto &client = FlipperClient::instance();
@@ -45,5 +42,8 @@ myPlugin = client.getPlugin<MyFlipperPlugin>("MyFlipperPlugin");
myPlugin->sendData(myData);
```
```
<!--END_DOCUSAURUS_CODE_TABS-->
Here, `sendData` is an example of a method that might be implemented by the Flipper plugin.