fringe.js — An Introduction to ExtendScript

Use Javascript outside the browser *or* the server? — Adobe’s ExtendScript Toolkit has been around for quite a while, yet few Javascript developers seem to know about the possibility to use their existing knowledge to extend Adobe’s Creative Suite applications through this powerful scripting environment.
This talk will give an overview on what the toolkit is, how it works and why you as Javascript developers might want to care.

Transcript

1. fringe.js
   An introduction
   to ExtendScript
   

   View Slide

2. fringe.js
   An introduction
   to ExtendScript
   Not an actual library!
   

   View Slide

3. @polarblau
   

   View Slide

4. ExtendScript
   

   View Slide

5. [Show of Hands]
   

   View Slide

6. View Slide

7. Extensions
   

   View Slide

8. Complexity
   Macros
   & Actions
   Scripts Plugins
   

   View Slide

9. Complexity
   Macros
   & Actions
   Scripts Plugins
   Automation Additional functionality
   

   View Slide

10. =
    Automation
    on steroids
    

    View Slide

11. Why care?
    (Why do I care?)
    

    View Slide

12. Personal background
    PS & AI are constants
    in personal toolkit
    

    View Slide

13. Laziness
    

    View Slide

14. Time
    Task size
    “Manual” labor
    

    View Slide

15. Time
    Task size
    “Manual” labor
    

    View Slide

16. Time
    Task size
    Frustration
    

    View Slide

17. Time
    Task size
    Write script
    

    View Slide

18. Time
    Task size
    Run script
    

    View Slide

19. Time
    Task size
    

    View Slide

20. Curiosity
    

    View Slide

21. “
    “Scripting isn’t programming. You don’t need a
    degree in computer science or mathematics to
    write basic scripts that automate a wide variety
    of common tasks.”
    — ADOBE, Introduction to scripting
    

    View Slide

22. Why care?
    (Why could you possibly care?)
    

    View Slide

23. Low hanging fruit
    

    View Slide

24. VBScript
    Javascript
    AppleScript
    Javascript
    

    View Slide

25. Javascript!
    

    View Slide

26. Didn’t your mom tell you…?
    

    View Slide

27. View Slide

28. The user’s perspective
    

    View Slide

29. View Slide

30. View Slide

31. [Example]
    

    View Slide

32. v
    

    View Slide

33. The toolkit
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. Document window
    

    View Slide

38. Document window
    Console
    

    View Slide

39. Target application
    

    View Slide

40. Engine of target application
    

    View Slide

41. Run script
    

    View Slide

42. Control execution
    

    View Slide

43. Debugging
    

    View Slide

44. View Slide

45. View Slide

46. Export as binary
    

    View Slide

47. javascript_tools_guide_cs3.pdf
    http://bit.ly/PNo7h4
    

    View Slide

48. .js
    

    View Slide

49. .jsx
    

    View Slide

50. “
    “In addition to implementing the JavaScript
    language according to the ECMA JavaScript
    specification, ExtendScript provides certain
    additional features and utilities.”
    — ADOBE, Javascript Tools Guide
    

    View Slide

51. Overview:
    

    View Slide

52. DOM
    

    View Slide

53. Application
    Document
    Pages
    Channels
    Layers
    Text frames …
    

    View Slide

54. Illustrator (Scripting Guide)
    

    View Slide

55. var doc = app.activeDocument,
    sel = doc.selection;
    

    View Slide

56. doc.textFrames[0].parents
    // -> returns layer or group
    

    View Slide

57. File system access
    

    View Slide

58. File([path]); //can return a Folder object
    new File([path]); //always returns a File object
    Folder([path]); //can return a File object
    new Folder([path]); //always returns a Folder object
    

    View Slide

59. // export from AI to PS
    function exportFileToPSD (destination) {
    if (app.documents.length > 0) {
    var options = new ExportOptionsPhotoshop(),
    type = ExportType.PHOTOSHOP,
    file = new File(destination);
    exportOptions.resolution = 150;
    doc.exportFile(file, type, options);
    }
    }
    

    View Slide

60. Inter–application
    communication
    

    View Slide

61. Limited set of cross DOM functions
    // e.g. open file in ID from PS
    indesign.open(file)
    // script {String}
    photoshop.executeScript(script);
    

    View Slide

62. BridgeTalk
    #target "photoshop-10.0"
    // app available?
    var targetApp = BridgeTalk.getSpecifier("bridge-2.0");
    if(targetApp) {
    // construct a message object
    var bt = new BridgeTalk;
    // the message is intended for Adobe Bridge CS3
    bt.target = targetApp;
    // the script to evaluate
    bt.body = "new Document('C:\\BridgeScripts');" +
    "app.document.target.children.length;"
    

    View Slide

63. // define result handler callback
    bt.onResult = function(returnBtObj) {
    // .processResult() is defined elsewhere
    processResult(returnBtObj.body);
    }
    // send the message asynchronously
    bt.send();
    }
    

    View Slide

64. External
    communication
    

    View Slide

65. FTP
    var file = new File('/c/Photo.jpg'),
    ftp = new FtpConnection('ftp://server');
    ftp.put(file,'Photo.jpg');
    ftp.close();
    file.close();
    

    View Slide

66. HTTP
    var http = new HttpConnection("http://example.com") ;
    http.request = "foo=bar";
    http.method = "POST"
    http.execute();
    

    View Slide

67. Socket
    var reply = "",
    conn = new Socket;
    // access Adobe's home page
    if (conn.open ("www.foo.com:80")) {
    // send a HTTP GET request
    conn.write("GET /index.html HTTP/1.0\n\n");
    // and read the server's reply
    reply = conn.read(999999);
    conn.close();
    }
    

    View Slide

68. External libraries
    

    View Slide

69. “
    “You can extend the JavaScript DOM for an
    application by writing a C or C++ shared library,
    compiling it for the platform you are using, and
    loading it into JavaScript as an
    ExternalObject Object. ”
    — ADOBE, Javascript Tools Guide
    

    View Slide

70. ScriptUI
    

    View Slide

71. var win = new Window("dialog", "Form");
    win.orientation = "row";
    // label
    win.add ("statictext", undefined, "Name:");
    // input field
    var nameInput = win.add ("edittext", undefined, "John");
    nameInput.characters = 30;
    nameInput.active = true;
    win.show ();
    

    View Slide

72. View Slide

73. var win = new Window("dialog");
    var columns = win.add("group");
    columns.spacing = 0;
    var header = {
    numberOfColumns: 1,
    showHeaders : true,
    columnWidths : [80]
    };
    

    View Slide

74. header.columnTitles = ["French"];
    var col1 = columns.add("listbox", undefined,
    ["Un","Deux","Trois"],
    header);
    header.columnTitles = ["English"];
    var col2 = columns.add("listbox", undefined,
    ["One","Two","Three"],
    header);
    header.columnTitles = ["Dutch"];
    var col3 = columns.add("listbox", undefined,
    ["Een","Twee","Drie"],
    header);
    win.show();
    

    View Slide

75. View Slide

76. var win = new Window("dialog"),
    inputField = win.add("edittext", undefined,
    "Abcdefg"),
    button = win.add("button", undefined,
    "Convert to upper case");
    win.add("button", undefined, "OK");
    button.onClick = function() {
    inputField.text = inputField.text.toUpperCase();
    }
    win.show ();
    

    View Slide

77. View Slide

78. http://www.kahrel.plus.com/indesign/
    scriptui-1-12.pdf
    

    View Slide

79. Miscellaneous
    

    View Slide

80. $
    // Object properties, e.g.
    $.fileName // Name of current file
    $.os // Operating System
    $.screens // # of attached screens
    …
    

    View Slide

81. $
    // Object functions, e.g.
    $.colorPicker // System picker
    $.sleep // Suspend thread temp.
    $.write // Log to console
    …
    

    View Slide

82. // execute script in Photoshop CS3
    #target "photoshop-10.0"
    

    View Slide

83. // Include files
    #include "other/file.jsx"
    

    View Slide

84. Any frameworks?
    

    View Slide

85. extendables
    by Stijn Debrouwere
    

    View Slide

86. Not actively developed
    Originally designed for ID
    Python
    

    View Slide

87. #include "../extendables.jsx";
    var ui = require("ui");
    

    View Slide

88. UI
    

    View Slide

89. var styling = {
    'big': {
    'size': [400, 15],
    'justify': 'center'
    }
    }
    var dialog = new ui.Dialog("I'm hungry").with(styling);
    dialog.text('food', 'Food!').using('big')
    .button('ok', 'Sure thing!')
    .button('no', 'No thanks');
    dialog.ok.on('click').do(function(){
    dialog.food.text = "Wait a sec, coming up!";
    dialog.ok.text = "Hmm...";
    });
    

    View Slide

90. HTTP
    

    View Slide

91. var http = require("http");
    if (!http.has_internet_access()) {
    throw new Error("No internet, no recipes.");
    }
    var response = http.get("http://example.com");
    

    View Slide

92. Testing
    

    View Slide

93. describe('Calculator', function () {
    var counter = 0
    it('can add a number', function () {
    counter = counter + 2; // counter was 0 before
    expect(bar).toEqual(2);
    });
    it('can multiply a number', function () {
    counter = counter * 5; // counter was 2 before
    expect(bar).toEqual(10);
    });
    });
    

    View Slide

94. Logging
    

    View Slide

95. var logging = require("logging");
    // all logs end up in extendables/log
    var log = new Log("example.log");
    try {
    throw new Error();
    } catch (error) {
    log.debug("Error! will log a debug message now");
    log.critical("Something happened: {error} ({env})",
    {'error': error, 'env': $.os});
    }
    

    View Slide

96. Extensions
    

    View Slide

97. Array#flatten
    [1,2,[3,4,[5,6]]].flatten()
    // -> [1,2,3,4,5,6]
    

    View Slide

98. Array#filter
    #pluck
    #forEach
    #map
    …
    

    View Slide

99. String#format
    "Hello {}. {}".format("world", "Bye!");
    var person = { name: "Flo", job: "Animal wrangler" };
    "{name} is a {job} by day".format(person);
    

    View Slide

100. String#trim
     #startswith
     …
     

     View Slide

101. Object#is
     [].is(Array)
     // -> true
     

     View Slide

102. Object#keys
     #merge
     #extend
     #has
     …
     

     View Slide

103. File / Folder
     var documentation = new Folder("doc")
     .at(Folder.extendables);
     var here = new File($.fileName);
     var examples = here.parent.files();
     var docfiles = documentation.files("*.md");
     

     View Slide

104. http://extendables.org/
     https://github.com/stdbrouw/
     extendables
     

     View Slide

105. Got some ideas?
     

     View Slide

106. http://wwwimages.adobe.com/
     www.adobe.com/content/dam/Adobe/en/
     devnet/pdf/illustrator/pdfs/
     adobe_intro_to_scripting.pdf
     http://bit.ly/PrPDfQ
     

     View Slide

107. http://www.adobe.com/devnet.html
     

     View Slide

108. http://www.adobe.com/devnet/
     photoshop/scripting.html
     

     View Slide

109. Kiitos!
     Thanks!
     

     View Slide