How to Use OmniCoreAppSDK components in AppStudio

AppStudio
1

In the new AppStudio version, you can get help by referring to the API Documentation.

introduction/FPComponents.html

The basic components of AppStudio are currently developed based on the OmniCoreAppSDK components.

AppStudio is fully compatible with OmniCoreAppSDK components.

Below is an example showing how to use OmniCoreAppSDK within AppStudio: Creating a Pie Chart component

If you want to place an OmniCoreAppSDK component inside a layoutinfobox component. To do this, you need to create a new project in AppStudio and drag a layoutinfobox component into it.

Then, add the following code inside the onMounted function of the layoutinfobox component.

// Step 1: Get the container html element of the layoutinfobox component.
const myDiv = this.contentRoot;
 
// Step 2: Create pie chart base on FPComponents API.
var myDonut = new FPComponents.Piechart_A();
myDonut.model = [
[222,  'Used' ],
[164,  'Cache' ],
[254,  'Free' ],
];
myDonut.topText = "Memory";
myDonut.centerText = "640";
myDonut.bottomText = "kB";
myDonut.size = 150;
 
// Step 3: Attach the pie chart to layoutinfobox.
myDonut.attachToElement(myDiv);

Finally, deploy the application to view the result.

1050×977 55.8 KB

2

I Create a FPCompont CheckBox，it’s location （20，20）， what can I do？

3

You need to check the manual to see if the FPComponent supports an interface for adjusting position. If not, you can grab its HTMLElement and modify the style attributes using HTML element syntax, for example: xxx.style.width='10px' or xxx.style.left='100px'.