Styling Dataform not working - can not find module android


#1

Hi, I want styling native form : https://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/DataForm/dataform-styling
In example is used package android (android.widget.SeekBar), in git it is imported by import { android as androidApplication } from ‘tns-core-modules/application’;
If I download example app it works, but in my app I get error: error TS2503: Cannot find namespace ‘android’ and so on: error TS2304: Cannot find name ‘android’, Cannot find name ‘com’, Cannot find name ‘UISegmentedControl’.
What I have wrong?

My code is now copied from example:

dfEditorUpdate(args: DataFormEventData) {
        if (androidApplication) {
            switch (args.propertyName) {
                case 'searchType':
                    this.editorSetupSegmentedEditorAndroid(args.editor);
                    break;
            }
        } else {
            const entityProperty: EntityProperty =
                (<RadDataForm>args.object).getPropertyByName(args.propertyName);
            switch (entityProperty.editor.type) {
                case 'SegmentedEditor':
                    this.editorSetupSegmentedEditorIOS(args.editor);
                    break;
            }
        }
    }

    editorSetupSwitchAndroid(editor) {
        const androidContext = editor.getEditorView().getContext();
        const customLayoutResourceId = androidContext.getResources().getIdentifier('custom_switch_editor_layout', 'layout', androidContext.getPackageName());

        editor.setEditorLayout(customLayoutResourceId);
    }

    editorSetupSegmentedEditorAndroid(editor) {
        const radioGroup: android.widget.RadioGroup = <android.widget.RadioGroup>editor.getEditorView();
        radioGroup.setBackgroundColor(colorGray.android);
        radioGroup.setPadding(8, 8, 8, 8);

        const androidContext = editor.getEditorView().getContext();

        const segmentDividerResourceId = androidContext.getResources().getIdentifier('df_segment_divider', 'drawable', androidContext.getPackageName());
        const segmentDivider = androidContext.getResources().getDrawable(segmentDividerResourceId);
        radioGroup.setShowDividers(android.widget.LinearLayout.SHOW_DIVIDER_MIDDLE);
        radioGroup.setDividerDrawable(segmentDivider);

        const segmentItemResourceId = androidContext.getResources().getIdentifier('df_segment_item', 'drawable', androidContext.getPackageName());
        const segmentTextColorResourceId = androidContext.getResources().getIdentifier('df_segment_text_color', 'color', androidContext.getPackageName());

        editor.setCustomizeButtons(new com.telerik.android.common.Procedure({
            apply(argument: android.widget.RadioButton) {
                const segmentItemDrawable = androidContext.getResources().getDrawable(segmentItemResourceId);
                const segmentTextColor = androidContext.getResources().getColorStateList(segmentTextColorResourceId);
                argument.setBackgroundDrawable(segmentItemDrawable);
                argument.setTextColor(segmentTextColor);
            }
        }));
    }

    editorSetupSegmentedEditorIOS(editor) {
        const coreEditor = <UISegmentedControl>editor.editor;
        coreEditor.tintColor = colorDark.ios;
    }

#2

Install tns-platform-declarations plugin.


#3

I added it by type it to package.json without change.
Now I remove from node_modules and package.json it and run: npm i tns-platform-declarations
It install to dependencies. I get the same errors: error TS2304: Cannot find name ‘android’. etc…
Have I installed another way or do something else?


I get errors when create bundle of app
#4

Did you go through the plugin’s read me file, followed the steps given there?


#5

Yea I read it here https://www.npmjs.com/package/tns-platform-declarations , but Idid not fully understand it.
I dont know where I should create file reference.d.ts and If I have to generate android .d.ts files, and for what they are.


#6

You have to create the reference.d.ts file at project root.


#7

Ok, I create it and it help. Now I get only one error here: new com.telerik.android.common.Procedure: TS2339: Property ‘telerik’ does not exist on type ‘typeof com’ and it not effect segmented bar form. I dont see in example, any others imports.


#8

Just say declare var com; at top of your file.


#9

Yea it works, thanks