#Advanced DevTool Configurations
#Integrate DevTool Switch Page
We provide a switch page that helps you quickly view or set DevTool. If you want, you can integrate it into your app as well.
The switch setting page is written in Lynx, and the DevTool component has already packaged the page.
Code example for integrating the devtool switch page:
Objective-C
Swift
#import <Lynx/LynxView.h>
#import "DebugSettingViewController.h"
#import "DemoLynxProvider.h"
@implementation DebugSettingViewController
- (void)viewDidLoad {
[super viewDidLoad];
LynxView *lynxView = [[LynxView alloc] initWithBuilderBlock:^(LynxViewBuilder *builder) {
builder.config = [[LynxConfig alloc] initWithProvider:[[DemoLynxProvider alloc] init]];
builder.screenSize = self.view.frame.size;
builder.fontScale = 1.0;
}];
lynxView.preferredLayoutWidth = self.view.frame.size.width;
lynxView.preferredLayoutHeight = self.view.frame.size.height;
lynxView.layoutWidthMode = LynxViewSizeModeExact;
lynxView.layoutHeightMode = LynxViewSizeModeExact;
[self.view addSubview:lynxView];
NSString *bundlePath = [[NSBundle mainBundle] pathForResource:@"LynxDebugResources" ofType: @"bundle"];
NSData *templateData = [[NSData alloc] initWithContentsOfFile:[bundlePath stringByAppendingString:@"/switchPage/devtoolSwitch.lynx.bundle"]];
[lynxView loadTemplate:templateData withURL:@"devtool_switch/switchPage/devtoolSwitch.lynx.bundle"];
}
@end
The switch setting page is written in Lynx, and the DevTool component has already packaged the page.
Code example for integrating the devtool switch page:
Java
Kotlin
public class SwitchActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LynxView lynxView = buildLynxView();
setContentView(lynxView);
byte[] array = null;
try {
InputStream inputStream = this.getAssets().open("devtool_switch/switchPage/devtoolSwitch.lynx.bundle");
array = readBytes(inputStream);
lynxView.renderTemplateWithBaseUrl(array, TemplateData.empty(), "devtool_switch/switchPage/devtoolSwitch.lynx.bundle");
} catch (IOException e) {
e.printStackTrace();
}
}
private LynxView buildLynxView() {
LynxViewBuilder viewBuilder = new LynxViewBuilder();
viewBuilder.setTemplateProvider(new DemoTemplateProvider());
return viewBuilder.build(this);
}
private byte[] readBytes(InputStream inputStream) throws IOException {
byte[] buffer = new byte[1024];
int bytesRead;
ByteArrayOutputStream output = new ByteArrayOutputStream();
while ((bytesRead = inputStream.read(buffer)) != -1) {
output.write(buffer, 0, bytesRead);
}
return output.toByteArray();
}
}
The switch setting page is written in Lynx, and the DevTool component has already packaged the page.
Code example for integrating the devtool switch page:
ETS
class Param {
url: string;
constructor(url: string) {
this.url = url;
}
}
@Entry
@Component
struct SwitchPage {
// ... existing code ...
build() {
Column() {
Text('Lynx').fontSize(18).width('100%').height('5%').textAlign(TextAlign.Center)
LynxView({
clients: this.clients,
url: this.url,
genericResourceFetcher: this.genericFetcher,
mediaResourceFetcher: this.mediaFetcher,
templateResourceFetcher: this.templateFetcher,
modules: this.modules,
sendableModules: this.sendableModules,
metaData: this.metaData,
onCreate: (context: LynxContext) => {
let param: Param = new Param(this.url);
context.sendGlobalEvent('viewAppear', [param]);
if (this.widthPixel > 0 && this.heightPixel > 0) {
context.updateScreenMetrics(this.widthPixel * this.viewDensity / TEST_DENSITY,
this.heightPixel * this.viewDensity / TEST_DENSITY);
}
context.setExtraTiming(this.extraTiming);
}
}).height(this.viewHeight).width(this.viewWidth)
}.size({ width: '100%', height: '100%' }).alignItems(HorizontalAlign.Start)
}
}
You can also customize the page according to your needs, making the configuration of DevTool more diverse.
Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.