900350_it-IT

liliconcom

Crea GUI utilizzando Application Builder

I'm looking for the most efficient workflow to create GUI windows in JSL. I know I can script them manually using New Window() with nested layout boxes (V List Box, H List Box, etc.), but this can be time-consuming and difficult to visualize for more complex dialogs.

Ho esplorato l'Application Builder, perché mi permette di trascinare e rilasciare i controlli per progettare visivamente il layout, il che è fantastico. Tuttavia, quando salvo l'applicazione, genera un framework applicativo completo con namespace.

La mia domanda specifica è: Is it possible to use the Application Builder (or another tool) to create a window layout and then extract only the JSL code for the New Window object itself?

Spesso cerco solo di creare una singola finestra di dialogo modale o una finestra delle impostazioni, e non ho bisogno dell'intera struttura dell'applicazione che la accompagna.

Automazione e scriptingFinestreRe: Creare un'interfaccia grafica utente utilizzando Application Builder

Non credo che esista un modo preconfezionato per farlo e dovresti scrivere un tuo "parser". Questo potrebbe essere qualcosa che LLM, opportunamente guidato, potrebbe fare, almeno per i casi più semplici.

Re: Creare un'interfaccia grafica utente utilizzando Application Builder

Ciao @shuey ,

Solo per aggiungere qualcosa al commento di @jthi (dato che al momento non esiste un modo per farlo), potrebbe essere utile usare la struttura ad albero modifica > ottieni ed eventualmente le "proprietà ottieni" per i componenti che hai creato e che potresti inserire in un LLM.

Sono d'accordo che sia una bella funzionalità, consiglierei di aggiungerla alla lista dei desideri di JMP.

Grazie,

Ben

Re: Creare un'interfaccia grafica utente utilizzando Application Builder

Se consideriamo un launcher di piattaforma abbastanza elementare simile a JMP

Verrà generato il seguente script dell'app JMP

Scopri di più...

JMP App(
	Set Name("Application"),
	Set Description(
		"An empty workspace for creating custom applications with one or more windows and scripts"
	),
	Auto Launch(1),
	Snap To Grid(1),
	Show Grid(1),
	Show Properties(1),
	Show Sources(1),
	Group By Category(1),
	Dashboard Mode(0),
	Parameters,
	Tables(
		DataTable1 = GuiTable(
			Set Path(""),
			Set Label("Untitled 2"),
			Location("Current Data Table"),
			Invisible(0)
		)
	),
	Script(JSL Quote(// This script is executed when the application is run.
// Named objects have been created for the application modules
// (for example, "Module1") and the pre-defined object
// "thisApplication" refers to the application object itself.
// Variables and functions declared here are scoped to the
// Application namespace.

)	),
	Allocate(
		Module1 = Plan(
			PreAllocate,
			Script(JSL Quote(// This script is executed when a new module instance is
// created.  The pre-defined object "thisModuleInstance" refers
// to the instance object, but other objects such as boxes and
// scripts have not yet been created.  Variables declared here are
// scoped to the ModuleInstance namespace.

// This special function will receive parameters passed to CreateInstance()
OnModuleLoad({},
);

thisModuleInstance << Create Objects;

// After this point your module instance objects have been created
// and can be referred to by name (for example, "Button1").

)			),
			Allocate(
				List1 = H List Box();
				Panel1 = Panel Box();
				FilterCol1 = Filter Col Selector(Data Table(DataTable1));
				Panel2 = Panel Box();
				Lineup2 = Lineup Box();
				Button3 = Button Box();
				ColList1 = Col List Box(Data Table(DataTable1));
				Text1 = Text Box();
				Combo1 = Combo Box();
				Text2 = Text Box();
				CheckBox1 = Check Box();
				Panel3 = Panel Box();
				Lineup1 = Lineup Box();
				Button1 = Button Box();
				Button2 = Button Box();
			),
			Organize(
				Reparent(Lineup1(Button2));
				Reparent(Lineup1(Button1));
				Reparent(Panel3(Lineup1));
				Reparent(List1(Panel3));
				Reparent(Lineup2(CheckBox1));
				Reparent(Lineup2(Text2));
				Reparent(Lineup2(Combo1));
				Reparent(Lineup2(Text1));
				Reparent(Lineup2(ColList1));
				Reparent(Lineup2(Button3));
				Reparent(Panel2(Lineup2));
				Reparent(List1(Panel2));
				Reparent(Panel1(FilterCol1));
				Reparent(List1(Panel1));
				Relocate(List1(200, 250));
			),
			Initialize(
				List1 << Background Color("None");
				List1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				List1 << Enabled(1);
				List1 << Horizontal Alignment("Default");
				List1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				List1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				List1 << Text Color("None");
				List1 << UI Only(0);
				List1 << Vertical Alignment("Default");
				List1 << Visibility("Visible");
				List1 << Set Min Size(756, 403);
				List1 << Set Max Size(756, 403);
				List1 << Set Stretch({"Neutral", "Neutral"});
				List1 << set horizontal(1);
				Panel1 << Background Color("None");
				Panel1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Panel1 << Enabled(1);
				Panel1 << Horizontal Alignment("Default");
				Panel1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Panel1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Panel1 << Text Color("None");
				Panel1 << UI Only(0);
				Panel1 << Vertical Alignment("Default");
				Panel1 << Visibility("Visible");
				Panel1 << Set Min Size(234, 110);
				Panel1 << Set Max Size(234, 110);
				Panel1 << Set Stretch({"Neutral", "Neutral"});
				Panel1 << Set Title("Panel1");
				FilterCol1 << Background Color("None");
				FilterCol1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				FilterCol1 << Enabled(1);
				FilterCol1 << Horizontal Alignment("Default");
				FilterCol1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				FilterCol1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				FilterCol1 << Text Color("None");
				FilterCol1 << UI Only(0);
				FilterCol1 << User Resizable({1, 1});
				FilterCol1 << Vertical Alignment("Default");
				FilterCol1 << Visibility("Visible");
				FilterCol1 << Set Min Size(194, 52);
				FilterCol1 << Set Max Size(194, 52);
				FilterCol1 << Set Stretch({"Neutral", "Neutral"});
				FilterCol1 << Set Base Font("Text");
				FilterCol1 << Set Font Name("Segoe UI");
				FilterCol1 << Set Font Style("Plain");
				FilterCol1 << Set Font Size(10);
				FilterCol1 << Set Font Scale(1);
				FilterCol1 << Set Max Selected(-1);
				FilterCol1 << Set Size(184, 23);
				FilterCol1 << Set N Lines(1);
				Panel2 << Background Color("None");
				Panel2 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Panel2 << Enabled(1);
				Panel2 << Horizontal Alignment("Default");
				Panel2 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Panel2 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Panel2 << Text Color("None");
				Panel2 << UI Only(0);
				Panel2 << Vertical Alignment("Default");
				Panel2 << Visibility("Visible");
				Panel2 << Set Min Size(334, 383);
				Panel2 << Set Max Size(334, 383);
				Panel2 << Set Stretch({"Neutral", "Neutral"});
				Panel2 << Set Title("Panel2");
				Lineup2 << N Col(2);
				Lineup2 << Background Color("None");
				Lineup2 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup2 << Enabled(1);
				Lineup2 << Horizontal Alignment("Default");
				Lineup2 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup2 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup2 << Text Color("None");
				Lineup2 << UI Only(0);
				Lineup2 << Vertical Alignment("Default");
				Lineup2 << Visibility("Visible");
				Lineup2 << Set Min Size(294, 325);
				Lineup2 << Set Max Size(294, 325);
				Lineup2 << Set Stretch({"Neutral", "Neutral"});
				Lineup2 << Spacing(2);
				Button3 << Background Color("None");
				Button3 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Button3 << Enabled(1);
				Button3 << Horizontal Alignment("Default");
				Button3 << Margin({Left(2), Top(2), Right(2), Bottom(2)});
				Button3 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Button3 << Text Color("None");
				Button3 << UI Only(0);
				Button3 << Vertical Alignment("Default");
				Button3 << Visibility("Visible");
				Button3 << Set Min Size(60, 21);
				Button3 << Set Max Size(60, 21);
				Button3 << Set Stretch({"Neutral", "Neutral"});
				Button3 << Set Button Name("Button3");
				Button3 << Style("Normal");
				Button3 << Set(0);
				Button3 << Set Icon("");
				Button3 << Set Icon Location("Right");
				ColList1 << Background Color("None");
				ColList1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				ColList1 << Enabled(1);
				ColList1 << Horizontal Alignment("Default");
				ColList1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				ColList1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				ColList1 << Text Color("None");
				ColList1 << UI Only(0);
				ColList1 << User Resizable({1, 1});
				ColList1 << Vertical Alignment("Default");
				ColList1 << Visibility("Visible");
				ColList1 << Set Min Size(184, 194);
				ColList1 << Set Max Size(184, 194);
				ColList1 << Set Stretch({"Neutral", "Neutral"});
				ColList1 << Modeling Type({"Continuous", "Ordinal", "Nominal"});
				ColList1 << Set Data Type("Any");
				ColList1 << Set Min Items(0);
				ColList1 << Set Max Items(-1);
				ColList1 << Set Max Selected(-1);
				ColList1 << Set Size(184, 194);
				ColList1 << Set N Lines(10);
				ColList1 << Set Base Font("Text");
				ColList1 << Set Font Scale(1);
				Text1 << Background Color("None");
				Text1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Text1 << Enabled(1);
				Text1 << Horizontal Alignment("Default");
				Text1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Text1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Text1 << Text Color("None");
				Text1 << UI Only(0);
				Text1 << Vertical Alignment("Default");
				Text1 << Visibility("Visible");
				Text1 << Set Min Size(64, 19);
				Text1 << Set Max Size(64, 19);
				Text1 << Set Stretch({"Neutral", "Neutral"});
				Text1 << Set Base Font("Text");
				Text1 << Set Font Scale(1);
				Text1 << Set Text("Text1");
				Text1 << Bullet point(0);
				Text1 << Justify Text("Left");
				Text1 << Rotate Text("Horizontal");
				Text1 << Set Width(-1);
				Text1 << Set Wrap(360);
				Text1 << Set Tip("");
				Combo1 << Background Color("None");
				Combo1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Combo1 << Enabled(1);
				Combo1 << Horizontal Alignment("Default");
				Combo1 << Margin({Left(2), Top(2), Right(2), Bottom(2)});
				Combo1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Combo1 << Text Color("None");
				Combo1 << UI Only(0);
				Combo1 << Vertical Alignment("Default");
				Combo1 << Visibility("Visible");
				Combo1 << Set Min Size(180, 23);
				Combo1 << Set Max Size(180, 23);
				Combo1 << Set Stretch({"Neutral", "Neutral"});
				Combo1 << Set Items({"Item1", "Item2"});
				Combo1 << Set(1);
				Text2 << Background Color("None");
				Text2 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Text2 << Enabled(1);
				Text2 << Horizontal Alignment("Default");
				Text2 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Text2 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Text2 << Text Color("None");
				Text2 << UI Only(0);
				Text2 << Vertical Alignment("Default");
				Text2 << Visibility("Visible");
				Text2 << Set Min Size(64, 19);
				Text2 << Set Max Size(64, 19);
				Text2 << Set Stretch({"Neutral", "Neutral"});
				Text2 << Set Base Font("Text");
				Text2 << Set Font Scale(1);
				Text2 << Set Text("Text2");
				Text2 << Bullet point(0);
				Text2 << Justify Text("Left");
				Text2 << Rotate Text("Horizontal");
				Text2 << Set Width(-1);
				Text2 << Set Wrap(360);
				Text2 << Set Tip("");
				CheckBox1 << Background Color("None");
				CheckBox1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				CheckBox1 << Enabled(1);
				CheckBox1 << Horizontal Alignment("Default");
				CheckBox1 << Margin({Left(2), Top(2), Right(2), Bottom(2)});
				CheckBox1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				CheckBox1 << Text Color("None");
				CheckBox1 << UI Only(0);
				CheckBox1 << Vertical Alignment("Default");
				CheckBox1 << Visibility("Visible");
				CheckBox1 << Set Min Size(180, 32);
				CheckBox1 << Set Max Size(180, 32);
				CheckBox1 << Set Stretch({"Neutral", "Neutral"});
				CheckBox1 << Set Items({"Item1", "Item2"});
				Panel3 << Background Color("None");
				Panel3 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Panel3 << Enabled(1);
				Panel3 << Horizontal Alignment("Default");
				Panel3 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Panel3 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Panel3 << Text Color("None");
				Panel3 << UI Only(0);
				Panel3 << Vertical Alignment("Default");
				Panel3 << Visibility("Visible");
				Panel3 << Set Min Size(128, 154);
				Panel3 << Set Max Size(128, 154);
				Panel3 << Set Stretch({"Neutral", "Neutral"});
				Panel3 << Set Title("Panel3");
				Lineup1 << N Col(1);
				Lineup1 << Background Color("None");
				Lineup1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup1 << Enabled(1);
				Lineup1 << Horizontal Alignment("Default");
				Lineup1 << Margin({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Lineup1 << Text Color("None");
				Lineup1 << UI Only(0);
				Lineup1 << Vertical Alignment("Default");
				Lineup1 << Visibility("Visible");
				Lineup1 << Set Min Size(88, 96);
				Lineup1 << Set Max Size(88, 96);
				Lineup1 << Set Stretch({"Neutral", "Neutral"});
				Lineup1 << Spacing(2);
				Button1 << Background Color("None");
				Button1 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Button1 << Enabled(1);
				Button1 << Horizontal Alignment("Default");
				Button1 << Margin({Left(2), Top(2), Right(2), Bottom(2)});
				Button1 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Button1 << Text Color("None");
				Button1 << UI Only(0);
				Button1 << Vertical Alignment("Default");
				Button1 << Visibility("Visible");
				Button1 << Set Min Size(60, 21);
				Button1 << Set Max Size(60, 21);
				Button1 << Set Stretch({"Neutral", "Neutral"});
				Button1 << Set Button Name("OK");
				Button1 << Style("Normal");
				Button1 << Set(0);
				Button1 << Set Icon("");
				Button1 << Set Icon Location("Right");
				Button2 << Background Color("None");
				Button2 << Border({Left(0), Top(0), Right(0), Bottom(0)});
				Button2 << Enabled(1);
				Button2 << Horizontal Alignment("Default");
				Button2 << Margin({Left(2), Top(2), Right(2), Bottom(2)});
				Button2 << Padding({Left(0), Top(0), Right(0), Bottom(0)});
				Button2 << Text Color("None");
				Button2 << UI Only(0);
				Button2 << Vertical Alignment("Default");
				Button2 << Visibility("Visible");
				Button2 << Set Min Size(60, 21);
				Button2 << Set Max Size(60, 21);
				Button2 << Set Stretch({"Neutral", "Neutral"});
				Button2 << Set Button Name("Cancel");
				Button2 << Style("Normal");
				Button2 << Set(0);
				Button2 << Set Icon("");
				Button2 << Set Icon Location("Right");
			)
		)
	),
	Initialize(
		Module1 << Auto Launch(1);
		Module1 << Set Module Type("Report");
		Module1 << Set Window Title("^TABLENAME - ^APPNAME");
	)
);

Se fornisco quello script a ChatGPT (non ho effettuato l'accesso, quindi penso che stia usando GPT-4o) e gli chiedo di creare una nuova finestra come script, mi fornisce qualcosa di simile a quello qui sotto. È abbastanza simile da essere utile, secondo me.

Scopri di più...

New Window("Application",
	H List Box(
		Panel Box("Panel1",
			Filter Col Selector(
				Data Table("DataTable1")
			)
		),
		Panel Box("Panel2",
			Lineup Box(
				N Col(2),
				Text Box("Text1"),
				Text Box("Text2"),
				Combo Box({"Item1", "Item2"}),
				Check Box({"Item1", "Item2"}),
				Col List Box(
					Data Table("DataTable1"),
					Modeling Type({"Continuous", "Ordinal", "Nominal"})
				),
				Button Box("Button3")
			)
		),
		Panel Box("Panel3",
			Lineup Box(
				N Col(1),
				Button Box("OK"),
				Button Box("Cancel")
			)
		)
	)
);

Ma sarebbe utile avere questa capacità da un generatore di applicazioni o magari avere anche una nuova piattaforma "designer" che potrebbe essere utilizzata per la progettazione dell'interfaccia utente (sono già così abituato a scrivere nuovi script per le finestre che li scrivo molto più velocemente rispetto a quando uso un generatore di applicazioni con il mio stile).

Re: Creare un'interfaccia grafica utente utilizzando Application Builder

Inoltre, se stai creando "molte" interfacce utente simili, potresti prendere in considerazione la creazione di strumenti personalizzati per farlo.

Io ho ad esempio:

• Lo strumento accetta openapi.json da FastAPI per creare l'interfaccia utente JMP ( integrazione Python senza Python per JMP® (2023-EU-30MP-1265) )
• Lo strumento utilizza un tipo specifico di modelli di base Pydantic ( JMPyFacade: collegare JMP e Python per un'analisi coinvolgente e senza interruzioni e registrazione dello Scripters Club: JMPyFacade: collegare JMP e Python per un'analisi coinvolgente e senza interruzioni ) per creare un'interfaccia utente dinamica
• Uno strumento utilizza un tipo specifico di modello SQL per creare l'interfaccia utente
• Uno più semplice per i file di impostazione/configurazione