900350_es-ES

liliconcom

Crear una GUI usando el generador de aplicaciones

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.

He estado explorando el Constructor de Aplicaciones, ya que me permite arrastrar y soltar controles para diseñar visualmente el diseño, lo cual es fantástico. Sin embargo, al guardar la aplicación, se genera un framework completo con espacios de nombres.

Mi pregunta específica es: 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?

A menudo solo intento crear un único cuadro de diálogo modal o una ventana de configuración, y no necesito toda la estructura de aplicación que viene con él.

Automatización y scriptingVentanasRe: Crear una GUI usando Application Builder

No creo que exista una forma predefinida de hacerlo, y tendrías que escribir tu propio analizador. Esto también podría ser algo que un LLM con una guía adecuada podría hacer, al menos para casos sencillos.

Re: Crear una GUI usando Application Builder

Hola @shuey ,

Solo para agregar al comentario de @jthi (ya que no hay una manera actual de hacer esto), puede ser útil usar la estructura de árbol editar > obtener y posiblemente las 'propiedades de obtención' para los componentes que ha creado y que podría colocar en un LLM.

Estoy de acuerdo en que es una característica agradable de tener, recomendaría agregarla a la lista de deseos de JMP.

Gracias,

Ben

Re: Crear una GUI usando Application Builder

Si consideramos un lanzador de plataforma bastante básico similar a JMP

Generará el siguiente script de aplicación JMP

Ver más...

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");
	)
);

Si le paso ese script a ChatGPT (no he iniciado sesión, así que creo que usa GPT-4o) y le pido que cree una nueva ventana como la del script, me devuelve algo como lo que se muestra a continuación. En mi opinión, se acerca lo suficiente como para ser útil.

Ver más...

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")
			)
		)
	)
);

Pero sería útil tener esta capacidad del generador de aplicaciones o tal vez incluso tener una nueva plataforma de "diseñador" que se pueda usar para el diseño de UI (ya estoy tan acostumbrado a escribir nuevos scripts de ventana que los escribo mucho más rápido que usando el generador de aplicaciones con mi propio estilo).

Re: Crear una GUI usando Application Builder

Además, si está creando "muchas" interfaces de usuario de tipos similares, podría considerar crear sus propias herramientas para ello.

Yo tengo por ejemplo:

• La herramienta toma openapi.json de FastAPI para crear la interfaz de usuario de JMP ( integración de Python sin Python para JMP® (2023-EU-30MP-1265) )
• La herramienta utiliza un tipo específico de modelos base de Pydantic ( JMPyFacade: Bridging JMP and Python for Seamless Engaging Analysis y Grabación del Scripters Club: JMPyFacade: Uniendo JMP y Python para un análisis fluido y atractivo ) para crear una interfaz de usuario dinámica.
• Una herramienta toma un tipo específico de plantilla SQL para crear la interfaz de usuario
• Uno más simple para archivos de configuración/configuración