search

Adobe-CEP / CEP-Resources

Tools and documentation for building Creative Cloud app extensions with CEP
https://www.adobe.io/apis/creativecloud/cep.html
1.61k stars 825 forks source link

Is there any sample for any Adobe Application plugin development using Angular2. I would like to use Angular2 for Adobe plugin development, but did not find any help in this. #140

Open mds-charu opened 6 years ago

benjamin-mueller commented 6 years ago

Hi,

I had the same problem. But interestingly it is quite simple. Everything "angular.io" is rendered fine with CEP 7/8. Before that (pre Adobe CC 2015 I think) there were .. issues. There are still some, but I think they can be solved (here).

Start with a blank Extension (the CEP_HTML_Test_Extension is a good start for "inspiration")

As entry point, your index.html should look like this 

<body onload="onLoaded()">
</body>

<script language="JavaScript">
    function onLoaded() {
        window.location.href="http://localhost:4200/";
    }
</script>

Now you can start developing your "angular.io" application with ng start running and the extension will show whatever you write/design.

When ready to deploy your "angular.io" application you build it with ng build and copy the files

index.html
inline.bundle.js
main.bundle.js
polyfills.bundle.js
styles.bundle.js
vendor.bundle.js

into your extensions html directory (the same you used for your index.html before)

The one thing you have to change is the baseref to

<base href="">

otherwise the extension can't find the *.bundle.js

Another matter is communication with InDesign/Photoshop. When using "angular.io" you are developing with node and typescript. The given JavaScript libraries CSInterface.js, AgoraLib.js and Vulcan.js do not easily "blend in". They have to be rewritten in TypeScript. I am in the process of doing just that an it is giving me a bit of a headache ... before I saw that a guy from the internet has just done that for CSInterface.js

https://github.com/BrightShadow/CSInterface-TS#readme

Give him a visit, he has done a tremendous job!

Hope that helps a little ;)

Regards

Benny

mds-charu commented 6 years ago

Thanks, for your help. I am started making plugins using Angualr2 and Angular4. That will be great help using Vulcan and another js libraries in typescript. Whenever you ready with typescript version of another js files pls share the link.

Thankyou so much.

benjamin-mueller commented 6 years ago

I lost track of the Angular Versions. They made a "break" with 2, totally different syntax and typescript .. and now they are just counting up?

I tested my version of Vulcan.js with the recent version of angular.io and it seems to work. You can find it here git. This is my first git repository, please be gentle if it has some hickups.

In any angular component just try this code

import {Vulcan, VulcanMessage} from "vulcan-ts";
@SomeCompontent({
/* any code */
})
someFunction() {

var callback = function (message) {
      console.log("The Message is : " + Vulcan.getPayload(message));
    }

    var vmessage: VulcanMessage = new VulcanMessage(VulcanMessage.TYPE_PREFIX + "test");
    vmessage.setPayload("Live long and prosper.");

    Vulcan.addMessageListener(vmessage.type, callback);
    Vulcan.dispatchMessage(vmessage);

}

Regards

Benny