With the ever growing number of TMS WEB Core UI controls we have and the ever growing complexity, testing web UI controls becomes a non-trivial task. Our team clearly has a need to allow an efficient way testing not only by the developer of the UI controls but also by other users. One of the chores for testing a UI control with numerous settings that affect the appearance and the behavior, is that typically an application needs to be developed that will surface all the combinations of settings. And then we are not yet talking about interactions between multiple UI controls. So, we found ourselves both writing a lot of test application code and also going a lot through the cycle of configuring a UI control, compile, run, test and repeat with other configurations.
Out of this laborious experience, the idea for creating a test environment was born. We wanted to have a runtime test environment for the TMS WEB Core components. Wanting the ability to test with every possible property setting of the control and realizing we had in our TMS FNC UI Pack component library an object inspector control, developing this test environment turned out to be faster than we imagined.
After using our test environment for a while now, we realized that this would probably also be interesting for users new to the TMS WEB Core framework. It allows to play with the TMS WEB Core UI Controls directly from the web without the need to install anything. It allows to learn all features and capabilities and discover the rich set of controls meanwhile available that can help you build your web applications. So, we thought of a name for this environment and came up with “Component Explorer”.
During these 2 weeks of visits to the TMS lab, we wanted to show you the experimental version of our Component Explorer. You can use it to explore our TMS WEB Core UI controls, play with it without installing it, experiment and test. And oh, of course we would appreciate if you'd let us know if you find an issue so our team can look into it.
Head to http://www.tmssoftware.biz/tmsweb/demos/ComponentExplorer now and discover.
Some notes for your information:
Another nice tidbit, is that the Component Explorer is mainly made up of FNC UI controls. The Object Inspector, the design surface, the tool palette, … were all developed with TMS FNC UI Controls. Given that FNC controls can be used for VCL, FMX, LCL and WEB, this means that theoretically, we could also create a desktop Component Explorer versions. In that case it would be limited to exploring FNC controls of course as the native TMS WEB Core UI controls of course cannot be used from VCL, FMX or LCL applications
There is an edit mode and runtime mode. Normally on the design surface, the mouse interacts with the UI controls to move & resize the controls. When unchecking the “Edit Mode” checkbox, we can interact with the UI controls directly with the mouse.
There are still several shortcomings in the Component Explorer. One of these shortcomings is that it is not yet possible to insert controls as child of other controls. All inserted controls are child of the form. So far, for our testing purposes, we could live with this limitation but as our testing becomes more complex (for example testing a ribbon control), this is something high on the priority list.
Although there is already a TStringList property editor, TCollection property editor, there is no mechanism yet for custom property editors. Class properties can be edited by expanding the class and that is in most of our testing scenarios more than sufficient.
In working on integrating testability of our TMS XData backend framework, we discovered a nice side effect that we could create on-the-fly not only a component exploring environment but also a data exploring environment. An example for exploring this, is by dropping a TXDataWebDataSet, TXDataWebConnection, TWebDataSource and TWebDBGrid on the form. Hook the grid to the datasource, the datasource to the dataset and the dataset to the connection. You can use your own XData endpoint or you can use our test endpoint https://app.devgems.com/music Then set the TXDataWebConnection.Active to true and set TXDataWebDataSet.DesignLoad to true. You can see now the XData data in the TWebDBGrid.
We did use Bootstrap in the Component Explorer, so you can also play with Bootstrap styles. Use the TMS WEB Core UI controls ElementClassName property to assign a fitting Bootstrap class and it should update live. For example, drop a TWebButton on the form and set WebButton.ElementClassName = 'btn btn-primary' and you should get a nice looking blue Bootstrap button.
Lab visit feedback & win!
Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!
Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Or you can come to see TMS WEB Core and discover and discuss it face to face with Bruno Fierens of tmssoftware.com showing it in London on October 23, 2018. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).