hilfdirselbst.ch
Facebook Twitter gamper-media
julez
Beiträge: 15
7. Apr 2016, 11:59
Beitrag #1 von 8
Bewertung:
(3617 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

script ui | dialog panel | min max | enabled disabled


hallo zusammen,

ich beschaeftige mich seit einiger zeit mit der automatisierung von indesign. seit kurzem nun auch mit "userinterfaces". ein paar dinge sind mir jedoch noch immer schleierhaft.

1. wie ist es moeglich mehrere panels pixelgenau in einem dialog beliebig anzuordnen? z. b. zeile 1 mit einem panel, zeile 2 mit zwei panels. etwa ueber gruppierungen?
2. wie kann ich min- und max-values fuer edittext-felder festlegen? javascript bietet die moeglichkeit einer eigenschaft offensichtlich nicht?! gibt es hierfuer einen workaround? framework?
3. gibt es eine moeglichkeit edittext-felder bei der eingabe von/fuer strings bzw. fuer NaN zu sperren?
4. apropos sperren/entsperren: wie koennte man einzelne panels innerhalb eines dialogs sperren und entsperren? z. b. panel 1 ist standardmaeßig disabled und wird durch anhaken der editbox in panel 2 entsperrt/enabled


vielen dank im voraus.
gruesse julian



siehe code:
Code
//~ SCRIPT ---------------------------------------------     

var main = function() {

var ui_dialog = new Window ('dialog');
//ui_dialog.alignChildren = "left";
//ui_dialog.orientation = "row";


// PANEL 1
ui_dialog.gruppe_1 = ui_dialog.add ('panel',[0,0,1485,90], "PANEL 1");

ui_dialog.gruppe_1.add ('statictext', [15,20,65,40], "1");
var input_a = ui_dialog.gruppe_1.add ('edittext', [75,20,255,40], "A");

ui_dialog.gruppe_1.add ('statictext', [15,50,65,70], "2");
var input_b = ui_dialog.gruppe_1.add ('edittext', [75,50,120,70], "B");


// PANEL 2
ui_dialog.gruppe_2 = ui_dialog.add ('panel',[100,0,285,60], "PANEL 2");

ui_dialog.gruppe_2.add ('statictext', [15,20,65,40], "3");
var gruppe_2 = ui_dialog.gruppe_2.add ('checkbox', [75,20,145,40]);


// PANEL 3
var gruppe_3 = ui_dialog.add ('panel', [500,0,640,90], "PANEL 3");

gruppe_3.add ('statictext', [15,20,65,40], "4");
var input_d = gruppe_3.add ('edittext', [75,20,120,40], "D");

gruppe_3.add ('statictext', [15,50,65,70], "5");
var input_e = gruppe_3.add ('edittext', [75,50,120,70], "E");



// BUTTONS
var gruppe_button = ui_dialog.add ('group');
gruppe_button.add ('button', undefined, "ok");
gruppe_button.add ('button', undefined, "cancel");

mein_return = ui_dialog.show();


};


//~ AUSFUEHREN ---------------------------------------------

main();

Top
 
X
Gerald Singelmann  M  p
Beiträge: 6178
7. Apr 2016, 12:45
Beitrag #2 von 8
Beitrag ID: #548684
Bewertung:
(3587 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

script ui | dialog panel | min max | enabled disabled


Ich habe nicht die Zeit, den Fragen gründlich auf den Grund zu gehen.

Aber als Hinweis: Es ist eine wirklich gute Idee, die ScriptUI die Größe der Elemente selbst berechnen zu lassen.

Also nicht
Code
ui_dialog.gruppe_1 = ui_dialog.add ('panel',[0,0,1485,90], "PANEL 1"); 

sondern
Code
ui_dialog.gruppe_1 = ui_dialog.add ('panel',undefined, "PANEL 1"); 


Ein zweiter dringender Ratschlag: Es lohnt sich auf jeden Fall, den ScriptUI Ratgeber von Peter Kahrel zu studieren. Eigentlich wird darin alles von Grundlagen zu Best Practices diskutiert.

http://www.kahrel.plus.com/indesign/scriptui.html

--------------------------

InDesign-Wissen und Automatisierung nicht nur rund um die Suite.

http://www.cuppascript.com
als Antwort auf: [#548682] Top
 
julez
Beiträge: 15
7. Apr 2016, 18:50
Beitrag #3 von 8
Beitrag ID: #548721
Bewertung:
(3516 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

script ui | dialog panel | min max | enabled disabled


hallo gerald,

dankeschoen fuer deinen input. in peter kahrels script-ui habe ich mich natuerlich bereits ausgiebig umgesehen. auch das buch von gregor fellenz war hier nur wenig aufschlussreich. ich muss dazu sagen, dass die beiden herren mich an vielen stellen jedoch sehr weitergebracht haben. dein name und den von martin fischer darf ich an dieser stelle natuerlich nicht vergessen. es sind doch immer wieder die selben, ueber die ich so im netz gestolpert bin. an dieser stelle mein lob! auch an den einen franzosen ;D

naja, vielleicht habe ich die entsprechende stelle aber auch einfach nicht gefunden? sorry, ich habe erst kuerzlich damit angefangen, mich mit der materie javascript/estk auseinanderzusetzen.

hier mal ein screenshot meines projekts... dann wird vielleicht etwas klarer, woran ich arbeite:
http://cloud.directupload.net/...te/direct.php?s=4I45

zu 1.
die elemente selbst berechnen zu lassen macht sinn. aber nicht, wenn das ui derzeit aufgrund der groesse nicht mehr komplett auf dem bildschirm darstellbar ist. unabhaengig ob ich das ganze vertikal oder horizontal ausgeben lasse - siehe screenshot.

zu 2. und 3.
auf seite 109 im javascript tool guide ist zu entnehmen, dass es keine eigenschaft fuer edittext-felder bzgl. min- und max-values gibt.
bin ich nun wirklich gezwungen den input-typ nach abfeuern des ok-buttons zu pruefen?

zu 4.
ist ueberhaupt klar was ich meine? :D

vielen dank im voraus.
gruesse julian
als Antwort auf: [#548684] Top
 
Peter Kahrel p
Beiträge: 182
10. Apr 2016, 13:44
Beitrag #4 von 8
Beitrag ID: #548778
Bewertung:
(3332 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

script ui | dialog panel | min max | enabled disabled


Hello Julian,

As Gerald mentioned, it's better to leave laying out a window as much as possible to ScriptUI's layout manager. Typically, you set the preferred width and or height of a control, but not its position. Positions can be organised by defining groups and setting their orientation (row or column), as in the script below.

Setting minimum and or maximum values for an edittext control can be done by checking the control's content after the field is exited (using onDeactivate) or while the user is entering text (onChanging). A convenient way to validate some edittext control's content is a method first proposed (as far as I know) by Bob Stucky: simply disable the OK button so that the user can click OK only if the OK button is enabled (and when the OK button is disabled, the Enter/Return key, too, is disabled). If there are many fields in a dialog, it's helpful to emphasise the control when there's illegal input.

In the script, the w.inputA.onChanging function monitors the 'Input A' control. It accepts only digits. When you enter a non-digit, the OK button is disabled and the control's background is made red. Delete the non-digits and the window goes back to normal. By using such tests you can create integer, real, measurement, percentage, etc. boxes.

Peter

Code
w = new Window ('dialog {orientation: "row", alignChildren: "top"}'); 

w.column1 = w.add ('group {orientation: "column"}');

w.column1.panel1 = w.column1.add ('panel', undefined, 'Column 1, item 1');
w.column1.panel1.group1 = w.column1.panel1.add ('group');
w.column1.panel1.group1.add ('statictext {text: "Input A:", characters: 5}');
w.inputA = w.column1.panel1.group1.add ('edittext {characters: 8}');
w.column1.panel1.group2 = w.column1.panel1.add ('group');
w.column1.panel1.group2.add ('statictext {text: "Input B:", characters: 5}');
w.inputB = w.column1.panel1.group2.add ('edittext {characters: 8}');

w.column1.panel2 = w.column1.add ('panel', undefined, 'Column 1, item 2');
w.column1.panel2.group1 = w.column1.panel2.add ('group');
w.column1.panel2.group1.add ('statictext {text: "Input C:", characters: 5}');
w.inputC = w.column1.panel2.group1.add ('edittext {characters: 8}');
w.column1.panel2.group2 = w.column1.panel2.add ('group');
w.column1.panel2.group2.add ('statictext {text: "Input D:", characters: 5}');
w.inputD = w.column1.panel2.group2.add ('edittext {characters: 8}');

w.column2 = w.add ('group {orientation: "column"}');

w.column2.panel1 = w.column2.add ('panel', undefined, 'Column 2, item 1');
w.column2.panel1.group1 = w.column2.panel1.add ('group');
w.column2.panel1.group1.add ('statictext {text: "Input E:", characters: 5}');
w.inputE = w.column2.panel1.group1.add ('edittext {characters: 8}');
w.column2.panel1.group2 = w.column2.panel1.add ('group');
w.column2.panel1.group2.add ('statictext {text: "Input F:", characters: 5}');
w.inputF = w.column2.panel1.group2.add ('edittext {characters: 8}');

w.column2.panel2 = w.column2.add ('panel', undefined, 'Column 2, item 2');
w.column2.panel2.group1 = w.column2.panel2.add ('group');
w.column2.panel2.group1.add ('statictext {text: "Input G:", characters: 5}');
w.inputG = w.column2.panel2.group1.add ('edittext {characters: 8}');
w.column2.panel2.group2 = w.column2.panel2.add ('group');
w.column2.panel2.group2.add ('statictext {text: "Input H:", characters: 5}');
w.inputH = w.column2.panel2.group2.add ('edittext {characters: 8}');

w.buttons = w.add ('group {orientation: "column"}');
w.ok = w.buttons.add ('button {text: "OK"}');
w.buttons.add ('button {text: "Cancel"}');

w.inputA.onChanging = function () {
var check = /^\d*$/.test (this.text);
setControlState (this, check);
w.ok.enabled = check;
}

function setControlState (control, valid) {
// [1,1,1,1] is solid white, [1, 0.5, 0.5, 1] is light red
control.graphics.backgroundColor = control.graphics.newBrush (control.graphics.BrushType.SOLID_COLOR, valid ? [1, 1, 1, 1] : [1, 0.5, 0.5, 1]);
}

w.show();

als Antwort auf: [#548682] Top
 
julez
Beiträge: 15
13. Apr 2016, 11:03
Beitrag #5 von 8
Beitrag ID: #548863
Bewertung:
(3187 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

script ui | dialog panel | min max | enabled disabled


hello gerald,

ah, now i got it what gerald meant. great! that's exactly
what i was looking for – and even beyond. many thanks
for your efforts and the detailed explanation. also for the
code-snippet. that's more than i expected :)


greetings
julian
als Antwort auf: [#548778] Top
 
julez
Beiträge: 15
3. Jun 2016, 15:09
Beitrag #6 von 8
Beitrag ID: #550149
Bewertung:
(2802 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

script ui | dialog panel | min max | enabled disabled


Antwort auf [ julez ] hello gerald,

ah, now i got it what gerald meant. great! that's exactly
what i was looking for – and even beyond. many thanks
for your efforts and the detailed explanation. also for the
code-snippet. that's more than i expected :)


greetings
julian


peter, i just saw that i mixed you up with gerald - sorry!

ahm, i have got another question regarding your snippet. so i hope to reach you.

assume that i type a string in each edittext-field. the ok-button turns grey, as it should be. after changing the value of just one edittext-field to a number, the ok-button turns back... as it should be. the plan was actually to let the ok-button return only when all edittext-fields contain the correct content. do you have any clever solution?

thanks in advance.


greetings
julian

Code
     

w = new Window ('dialog {orientation: "row", alignChildren: "top"}');

w.column1 = w.add ('group {orientation: "column"}');

w.column1.panel1 = w.column1.add ('panel', undefined, 'Column 1, item 1');
w.column1.panel1.group1 = w.column1.panel1.add ('group');
w.column1.panel1.group1.add ('statictext {text: "Input A:", characters: 5}');
w.inputA = w.column1.panel1.group1.add ('edittext {characters: 8}');
w.column1.panel1.group2 = w.column1.panel1.add ('group');
w.column1.panel1.group2.add ('statictext {text: "Input B:", characters: 5}');
w.inputB = w.column1.panel1.group2.add ('edittext {characters: 8}');

w.buttons = w.add ('group {orientation: "column"}');
w.ok = w.buttons.add ('button {text: "OK"}');
w.buttons.add ('button {text: "Cancel"}');


w.inputA.onChanging = function () {
var check = /^\d*$/.test (this.text);
setControlState (this, check);
w.ok.enabled = check;
}

w.inputB.onChanging = function () {
var check = /^\d*$/.test (this.text);
setControlState (this, check);
w.ok.enabled = check;
}

function setControlState (control, valid) {
// [1,1,1,1] is solid white, [1, 0.5, 0.5, 1] is light red
control.graphics.backgroundColor = control.graphics.newBrush (control.graphics.BrushType.SOLID_COLOR, valid ? [1, 1, 1, 1] : [1, 0.5, 0.5, 1]);
}

w.show();

als Antwort auf: [#548863] Top
 
Peter Kahrel p
Beiträge: 182
2. Sep 2016, 14:51
Beitrag #7 von 8
Beitrag ID: #552317
Bewertung:
(2242 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

script ui | dialog panel | min max | enabled disabled


Hello Julian,

Every time you enter something in one of the text fields you need to check the state of all edittext items. In the case of your script, which uses only two edittext fields, that can be done as illustrated in the script, below. When you have to check a lot of fields, it's probably better to label the edittext fields, look for them separately whenever an input field changes, and set the state of the OK button.


Peter

Code
w = new Window ('dialog {orientation: "row", alignChildren: "top"}');  
w.column1 = w.add ('group {orientation: "column"}');
w.column1.panel1 = w.column1.add ('panel', undefined, 'Column 1, item 1');
w.column1.panel1.group1 = w.column1.panel1.add ('group');
w.column1.panel1.group1.add ('statictext {text: "Input A:", characters: 5}');
w.inputA = w.column1.panel1.group1.add ('edittext {characters: 8}');
w.column1.panel1.group2 = w.column1.panel1.add ('group');
w.column1.panel1.group2.add ('statictext {text: "Input B:", characters: 5}');
w.inputB = w.column1.panel1.group2.add ('edittext {characters: 8}');

w.buttons = w.add ('group {orientation: "column"}');
w.ok = w.buttons.add ('button {text: "OK"}');
w.buttons.add ('button {text: "Cancel"}');

// You can stack callbacks
w.inputA.onChanging = w.inputB.onChanging = function () {
var check = /^\d*$/.test (this.text);
setControlState (this, check);
w.ok.enabled = /^\d*$/.test (w.inputA.text) && /^\d*$/.test (w.inputB.text);
}

function setControlState (control, valid) {
// [1,1,1,1] is solid white, [1, 0.5, 0.5, 1] is light red
control.graphics.backgroundColor = control.graphics.newBrush (control.graphics.BrushType.SOLID_COLOR, valid ? [1, 1, 1, 1] : [1, 0.5, 0.5, 1]);
}

w.show();

als Antwort auf: [#550149] Top
 
julez
Beiträge: 15
2. Sep 2016, 16:32
Beitrag #8 von 8
Beitrag ID: #552318
Bewertung:
(2214 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

script ui | dialog panel | min max | enabled disabled


hello peter,

thank you very much for your response.

this is just great!!! i tried to fix this issue for some time but failed miserably. well, it seems to be easy and logical whenever i read you answers. but till this point it was like rocket science ;D

thanks again peter.


greetings
julian
als Antwort auf: [#552317] Top
 
X