The CoreMedia Studio user interface is implemented following the Model-View-Controller (MVC) pattern. The widgets provided by Ext JS are considered the view, whereas Ext JS actions take the role of controllers. To deal with the model layer efficiently, the Studio framework provides the key concepts of beans and value expressions.

A bean is an object that aggregates a number of properties, where property values may be arbitrary JavaScript objects, including arrays or even other beans. Beans are capable of sending events when one of their properties changes, making it possible to update the view components dynamically when a bean changes.

While wiring up a UI component property to a plain bean property is mostly straightforward and can be as simple as connecting a button label to a simple string bean property, you will inevitably run into situations where you need to "compute" a UI component property based on complex model state that might span different bean properties, or even completely separate beans.

Both the simple and the complex case can be conveniently solved using value expressions, which can encapsulate the computation of mutable values on the bean level. A frequently used value expression takes a start bean and follows property references from beans to beans to arrive at a target bean or value. Value expressions, too, generate events whenever their value changes, and you can attach event listeners to them to dynamically update the UI.

While it is possible to hand code the view response to model changes, you are encouraged to make use of the Studio SDK's predefined Ext JS plugins. Plugins are available for setting UI component properties, selections, displayed values, and so on. All these plugins transfer state between a value expression and an Ext JS component, sometimes in both directions ("bidirectional").

For experienced Ext JS developers, it may seem strange that an explicit model in the form of beans is used, instead of widget-internal state as an implicit model. However, the chosen approach allows for a more consistent representation of the model. By wrapping remote data sources as beans, a uniform access layer throughout CoreMedia Studio is achieved. In other words, from a developer's perspective, it is transparent whether model state is wired up to remote (server-side) or local (client-side) data. This also means that as a developer, you don't need to manually write code to make Ajax calls in order to update server-side data - you make sure that your model is properly wired up to your UI, and the framework takes care of the details for you.

For details about the TypeScript classes mentioned in the following sections, refer to the TypeScript documentation as found on the Studio release page, available at the CoreMedia download section.