@PHK often posts "Easter Eggs" around this time of year... I've got a few related to javascript that people may find useful:PHK wrote:
Images in custom dialogs
- This has been mentioned in a few posts recently, and I think @benep's example is a good one: viewtopic.php?p=190719#p190719
Here's an example using a saved image file. I have a file named "testImg.jpg" saved in a folder "tracker" in my documents folder: Here's the code (taken from @benep's example and modified slightly:
Code: Select all
// dialog image example
// to execute paste for example in javascript console
{
// path to documents folder
const docsPath = app.getPath( 'user', 'documents');
// test image data
const imgData = util.iconStreamFromImage(docsPath + "/tracker/testImg.jpg");
// dialog
const dialog = {
initialize: function(dlg) {
dlg.load({img1: imgData}); // initialize img1 with image data
},
description: {
name: 'Test', elements: [
// image data should have width and height as properties
{ type: 'image', item_id: 'img1', height: imgData.height, width: imgData.width }, // define image element
{ type: 'ok', ok_name: "Purrr"}
]
},
img1: function(dlg) {
// this did execute before, when element img1 was clicked, but it doesn't in
// xce version 10.5.2 build 395
console.println('image clicked');
// expected behaviour is a console output when the image is clicked
// currently nothing happens
}
};
// show the dialog
app.execDialog(dialog);
}Multi-column List View
- The documentation covers list_box and hier_list_box but there's also a very useful multi-column version. There's no official documentation. Here's an example multi-column list view dialog:
Code: Select all
// sample multi column list view
{
const dialogObject = {
results: {},
initialize (dialog) {
dialog.load(
{
"dia1": this.results,
});
},
commit (dialog) {
var elements = dialog.store();
this.results = this.getMCLVrow( elements["dia1"]);
},
// handler for the MCLV
dia1 (dialog) {
const row = this.getMCLVrow( dialog.store()["dia1"] );
app.alert("Chapter: " + row.chapter + "\n Section: " + row.section + "\n Sub-section: " + row.sub + "\n Title: " + row.title);
},
// returns the selected row in a MCLV
getMCLVrow( mclv ) {
for (var i = 0; i < mclv.aRows.length; i++) {
const row = mclv.aRows[i];
// property .Select is true if selected
if (row.Select) return row;
}
},
description: {
name: "Sample Multi Column List View", elements: [
{ type: "mclv", item_id: "dia1", width: 400, height: 200 },
{ type: 'ok_cancel'}]
}
};
/* data for the multi-column list view is an object with two properties aColmns and aRows
* aColumns is an array of columns. Each column has properties
* Name (the property id to use in the rows),
* UI (the displayed text),
* width ( _proportion_ that this column should take of overall width),
* Justification (I can't get this to work, so I don't know what properties of this do)
* aRows is an array with each item being an object with the properties defined in aColumns
*/
dialogObject.results = {
aColumns: [
{ Name: 'chapter', UI: "Chapter", width: 0.1},
{ Name: 'section', UI: "Section", width: 0.1},
{ Name: 'sub', UI: "Sub Section", width: 0.1},
{ Name: 'title', UI: "Title", width: 0.7}
],
aRows: [
{ chapter: 1, section: 1, sub: 1, title: "SCOPE"},
{ chapter: 1, section: 2, sub: 1, title: "Definitions"},
{ chapter: 1, section: 2, sub: 2, title: "Notations"},
{ chapter: 1, section: 3, sub: 1, title: "Selection of Performance Objective"},
{ chapter: 1, section: 3, sub: 2, title: "Level of Seismicity"},
{ chapter: 1, section: 3, sub: 3, title: "As-Built Information"},
]
};
// run the dialog
app.execDialog( dialogObject);
// this is what the MCLV returns from dialog.store();
console.println(JSON.stringify(dialogObject.results, null, 2));
}Red text
- You can make any text element red during the dialog initialization. Actually, I think you can do it also with a handler, but I'm not sure about turning it black again. Seems more like a gimmick than useful, but here's an example:
Code: Select all
// sample for red text in a dialog
{
const dialogObject = {
initialize (dialog) {
dialog.setForeColorRed( 'imTx' );
},
commit () {
},
description: {
name: "Sample Red Text", elements: [
{ type: 'static_text', item_id: 'imTx', name: "This is some really important text", width: 200},
{ type: 'static_text', name: "I've never figured out a good use for red text though", width: 200},
{ type: 'ok'}]
}
};
// run the dialog
app.execDialog( dialogObject);
}More Font Sizes
- The difference in font sizes available for dialogs is very subtle. There are two undocumented font sizes 'title' and 'heading' that are subtly larger:
Code: Select all
// sample for font sizes in a dialog
{
const dialogObject = {
initialize () {
},
commit () {
},
description: {
name: "Sample Font Sizes", elements: [
{ type: 'static_text', name: "This is title font", width: 200, font: 'title'},
{ type: 'static_text', name: "This is heading font", width: 200, font: 'heading'},
{ type: 'static_text', name: "This is default font", width: 200, font: 'default'},
{ type: 'static_text', name: "This is dialog font", width: 200, font: 'dialog'},
{ type: 'static_text', name: "This is palette font", width: 200, font: 'palette'},
{ type: 'ok'}]
}
};
// run the dialog
app.execDialog( dialogObject);
}Horizontal and Vertical separators
- These are made by adding a separator property to static_text with value 1 for horizontal or 2 for vertical. You also need to set the width for the vertical separator, because name: "Some vertical text" does not show up in PXCE
Code: Select all
// sample for separators
{
const dialogObject = {
initialize () {
},
commit () {
},
description: {
name: "Sample with Separators", elements: [
{ type: 'view', align_children: 'align_row', elements:[
{ type: 'static_text', name: "Voluptas enim voluptas saepe totam. Vel voluptas dicta aut commodi explicabo magni assumenda voluptas. Velit nostrum voluptas vero porro recusandae ad mollitia. Dolorum enim error pariatur eaque est.", width: 200},
// vertical separator -
// name: "Text" does not show Text in PXCE, but if you leave it off, you need to add a width
{ type: 'static_text', width: 2, height: 100, separator: 2},
{ type: 'static_text', name: "Sed autem libero et qui vel consectetur nesciunt. Ut quia dolorem nobis consequatur beatae et maiores. Consequatur et iusto at. Rem aperiam ut fugit et est. Voluptates nemo dolor repudiandae ex officia incidunt dolor.", width: 200},
]},
// horizontal separator
{ type: 'static_text', name: "Horizontal", width: 410, separator: 1},
{ type: 'static_text', name: "Ut nam voluptas quam rerum porro officia. Et omnis iure ea eveniet quo non vel saepe. Nobis qui voluptatibus aut. Ut eaque labore at natus recusandae excepturi sed. Reprehenderit atque quia esse.", width: 400},
{ type: 'ok'}]
}
};
// run the dialog
app.execDialog( dialogObject);
}Link text
- You can add clickable text in a dialog. It gets formatted as blue underline, even though it doesn't actually have to be a link. It does not handle the link, it activates the handler for that item_id. The handler would need to know the link, and handle it with app.launchURL()
Code: Select all
// sample for link text
{
const dialogObject = {
initialize () {
},
commit () {
},
// handle clicking on the link
lnT1 (dialog) {
app.alert("You clicked on a link!");
},
lnT2 (dialog) {
app.alert("You clicked on a link!");
},
description: { name: "Sample with Link Text", elements: [
// this link has text instead of a url
{ type: 'link_text', item_id: 'lnT1', name: "The text does not have to be a url", width: 200},
// the link shows the url
{ type: 'link_text', item_id: 'lnT2', name: "https://opensource.adobe.com/dc-acrobat-sdk-docs/library/jsapiref/index.html", width: 200},
{ type: 'ok'} ]
}
};
// run the dialog
app.execDialog( dialogObject);
}
