cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - You can change your system assigned username to something more personal in your community settings. X

How to Implement Style to a widget through Eclipse?

jaswanth
12-Amethyst

How to Implement Style to a widget through Eclipse?

I have created example widget provided from ptc developer site and i would like to add a Style property to it and I have gone through documentation of ptc and was not quite getting along so could any one suggest any way.

this is IDE code (taken from widget creation in ptc developer page)

TW.IDE.Widgets.simplewidget = function () {
    this.widgetIconUrl = function() {
        return "../Common/extensions/MyAwesomeExtension/ui/simplewidget/SimpleWidget.ide.png";
    };

    this.widgetProperties = function () {
        return {
            name : "SimpleWidget",
            description : "A simple example of Widget creation.",
            category : ["Common"],
            properties : {
                DisplayText: {
                    baseType: "STRING",
                    defaultValue: "Hello, Awesome User!",
                    isBindingTarget: true
                }
            } 
        }
    };

    this.renderHtml = function () {
        var mytext = this.getProperty('SimpleWidget Property');

        var config = {
            text: mytext
        }

        var widgetTemplate = _.template(
            '<div class="widget-content widget-simplewidget">' +
            '<span class="DisplayText"><%- text %></span>' +
            '</div>'
        );

        return widgetTemplate(config);
    };

    this.afterSetProperty = function (name, value) {
        return true;
    };
};

 and here is the runtime js

TW.Runtime.Widgets.simplewidget = function () {
    var valueElem;

    this.renderHtml = function () {
        var mytext = this.getProperty('SimpleWidget Property');

        var config = {
            text: mytext
        }

        var widgetTemplate = _.template(
            '<div class="widget-content widget-simplewidget">' +
            '<span class="DisplayText"><%- text %></span>' +
            '</div>'
        );

        return widgetTemplate(config);
    };

    this.afterRender = function () {
        valueElem = this.jqElement.find(".DisplayText");
        valueElem.text(this.getProperty("DisplayText"));
    };

    this.updateProperty = function (updatePropertyInfo) {
        if (updatePropertyInfo.TargetProperty === "DisplayText") {
            valueElem.text(updatePropertyInfo.SinglePropertyValue);
            this.setProperty("DisplayText", updatePropertyInfo.SinglePropertyValue);
        }
    }; 
};

 So please tell the necessary code to be implemented so the property gets reflected in IDE and during runtime and can we make the Style as IsEditable and if we can what changes are to be made? 

ACCEPTED SOLUTION

Accepted Solutions
jaswanth
12-Amethyst
(To:jaswanth)

Check the label widget extension(IDE,Runtime JS) 

View solution in original post

1 REPLY 1
jaswanth
12-Amethyst
(To:jaswanth)

Check the label widget extension(IDE,Runtime JS) 

Announcements


Top Tags