| Summary: | Developers use visual programming languages for faster development of user interfaces due to better ease of use, readability, component reusability – widgets –, and an instant preview of the desired effects. However, the most common composition models to form user interfaces are black-box: combine existing widgets to form new widgets, but generally do not allow indiscriminate modification of their internal components. The OutSystems platform provides a What You See Is What You Get (WYSIWYG) experience where developers can build user interfaces by assembling user interface elements from predefined building blocks: the more fundamental and native components (widgets) represent HTML elements, and custom-made building blocks (web blocks) represent reusable compositions. However, web blocks and widgets are not uniform. Currently, through some workarounds, creators can define compositions that, after instantiated, their inside components can be customizable by other developers, but they either do not follow OutSystems’ good practices for creating web applications, do not show the user’s customizations – no preview –, or need expertise that citizen developers do not have. Our objectives with this work are to develop a new composition model for user interface components that allows to customize the properties of the inner elements of reusable compositions at the places where they are instantiated, integrate the model with the platform in a visual and interactive way where creators can control what can be modified, and users can customize respectively while getting a consistent preview. Reusable compositions in the OutSystems language are unique and static. Thus, for developers to be able to change internal components of a composition and get a preview of that change, the underlying models must explicitly receive and transmit properties of the components internal state to the composition elements. The work was validated by usability testing and by comparison between our solution with widgets that are specialized by OutSystems for specific use cases. The new presented approach is faster and more intuitive to use than what is currently offered by OutSystems. We also observed it works best in tandem with mechanisms already in place (e.g., input parameters) to offer more complete reusable compositions. In the end, all objectives were met, providing a working solution which enables users to customize their or other’s web blocks. With this work, reusable composition creators and users will get more control, customization possibilities, and user experience more intuitive, increasing productivity and user satisfaction.
|
|---|