New App Inspector in RC5

[barrymavin]

To assist in debugging your apps i've added a new App Inspector in RC5.

This is toggled visible or hidden by clicking on the "Show/Hide App Inspector" button in the headerbar of the pagebuilder.

This displays a non-modal dialog on top of the page. When you switch into runtime mode, any events that are dispatched that have delegates or change any UI states are logged in the "Events" tab and any "Lianja.console('text')" calls that you place in your code are displayed in the "Output" tab (as opposed to the console output panel) so you can see exactly what is happening inside your app.

There is also a "Command" panel at the bottom of the App Inspector dialog that allows you the same level of functionality that you have in the "Console" workspace without having to switch back into development mode and then between workspaces. This allows you to inspect variables, the data environment and inspect/change visual elements using Lianja.getElementByID() while your App is in runtime mode.

This makes it much easier to track down hard to find bugs.

I will enhance this further in future releases.

[hmischel@diligentsystems.com]

Excellent - thank you.

[barrymavin]

In fact I have enhanced this now. It also contains a tree which visually represents the hierarchical structure of the App.



page1
sections
section
field
details...
field delegates...
delegates
section...
section delegates
page delegates
page2
...
page3
...
etc


Clicking on a "page" or "section" or "field" will select the page in the "Pages" workspace. Double-clicking will slide in the attributes dialog for you to edit. Double-clicking a delegate will open it up in the editor in the "Apps" workspace.

So now you have an graphical overview of the structure of the App and you can navigate around it much quicker and actually see what delegates and/or UI states are used by that UI element.

This is all made possible by the fact the whole of an App is all part of the LOM (Lianja Object Model) which is similar to the DOM in a web page, and it can be traversed.

I'll post a screenshot in due course.

[barrymavin]

I've just about got this ready to ship now.

See the screenshot below.

You can navigate the complete UI elements and edit the attributes directly from the new App Inspector.

242

[siotti]

Great. This is really useful.

[hmischel@diligentsystems.com]

This will be extremely helpful. Great Idea.

[barrymavin]

The app inspector has "live" attribute and event delegate editing now.


Double-click a node to display its attributes
Navigate the tree and click on a node in the tree and the attributes dialog contents reflect the node you have selected.
Double click an event delegate takes you straight into the editor for that delegate.
Navigate all of the pages, sections, fields and gadgets just by clicking on their nodes in the tree. If the attributes dialog is visible it will remain so as you navigate around the App UI hierarchy.

For professional developers, the App Inspector provides you with a faster development experience.

245

Notice also how you can interact with the App in development and runtime mode using the "Console" and view the output of any interactive commands you enter.

The "Events" tab traces all event delegates as they are called when in runtime mode. It also traces any UI state changes that you have specified.

[HankFay]

I think this is important for domain developers, also: by inspecting the tree, they will start generating the internal map of how things work. Over time this will help them become "one with Lianja." Their knowledge may not be able to be articulated in the way expected of a professional developer, but their internal map will nevertheless guide them in what they do, and that's what is important in their software development context. Great stuff!

Hank

PS: intellisense with live-object intellisense, which is on the roadmap for 1.1, is the other important part of helping the domain developer create this internal map. Not harping :) , just pointing out.