Declarative GUI Layout Synthesis with Relational Constraint Solvers
https://doi.org/10.15514/ISPRAS-2024-36(5)-4
Abstract
Authors describe a system which, given a set of designer-specified layout constraints (guidelines) and a description of graphic user interface (GUI) logical structure generates a set of particular layouts. Each of these layouts comply with given guidelines by construction. Authors also give a formal treatment of the task as a constraint satisfiability problem and describe the construction of a sound and complete solver based on the utilization of relational verifier-to-solver approach. They also describe a number of refinements which make the solver more efficient and applicable.
About the Authors
Dmitry Sergeevich KOSAREV
St. Petersburg State University
Russian Federation
Russian Federation
Assistant at the Chair of System Programming of Mathematics and Mechanics Faculty of SPBU. His research interests include functional programming, compilers, and relational programming.
Petr Alekseevich LOZOV
St. Petersburg State University
Russian Federation
Russian Federation
Cand. Sci. (Phys.-Math.). Research interests: static analysis, translation of programming languages, functional-relational programming.
Dmitry Yuryevich BOULYTCHEV
St. Petersburg State University
Russian Federation
Russian Federation
Cand. Sci. (Phys.-Math.), associate Professor of the System Programming Chair of the Faculty of Mathematics and Mechanics of SPBU. His research interests include programming languages and tools, compilers, functional, logical and relational programming, program analysis and synthesis.
References
1. Haft M., Humm B., Siedersleben J. The Architect's Dilemma – Will Reference Architectures Help? Quality of Software Architectures and Software Quality, 2005, pp. 106-122.
2. Ingram S. (2016) The Thumb Zone: Designing for Mobile Users. Smashing Magazine (online). Available at: https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users, accessed 30.08.2024.
3. Ergonomics of human-system interaction – Part 210: Human-centred design for interactive
4. systems. ISO 9241-210:2019, International Organization for Standardization, 2019. Available at: https://www.iso.org/standard/77520.html.
5. Gerber E., Carroll M. The psychological experience of prototyping. Design Studies, vol. 33, isuue 1, 2012, pp 64-84. DOI: 10.1016/j.destud.2011.06.005.
6. Friedman D.P., William W.E., Kiselyov O., Hemann J. The Reasoned Schemer. The MIT Press, 2nd edition, Cambridge, USA, 2005, 224 p.
7. Lozov P., Verbitskaia E., Boulytchev D. Relational Interpreters for Search Problems. In miniKanren and Relational Programming Workshop, 2019.
8. Leonardo de Moura, Bjørner N. Z3: An Efficient SMT Solver. Tools and Algorithms for the Construction and Analysis of Systems, Springer Berlin Heidelberg, 2008, pp. 337-340.
9. Bengfort J. Thin vs. Thick vs. Zero Client: What’s the Right Fit for Your Business? Online. Available at: https://biztechmagazine.com/article/2018/10/thin-vs-thick-vs-zero-client-whats-right-fit-your-business-perfcon, accessed: 30.08.2024.
10. Intellij platform UI guidelines: Layout (online). JetBrains s.r.o., 2000-2022. Available at: https://jetbrains.github.io/ui/principles/layout, accessed: 30.08.2024.
11. Kosarev D., Boulytchev D. Typed Embedding of a Relational Language in OCaml. Electronic Proceedings in Theoretical Computer Science, 2016, pp. 1-22.
12. Kiselyov O., Chung-chieh Shan, Friedman D.P., Amr S. Backtracking, Interleaving, and Terminating Monad Transformers: (Functional Pearl). In Proceedings of the Tenth ACM SIGPLAN International Conference on Functional Programming, New York, USA, 2005, pp. 192-203.
13. Rozplokhas D., Vyatkin A., Boulytchev D. Certified Semantics for Relational Programming. Programming Languages and Systems, APLAS 2020, Lecture Notes in Computer Science, vol. 12470, Springer, Cham, pp. 167-185.
14. Comon H. Disunification: A Survey. Computational Logic – Essays in Honor of Alan Robinson. MIT Press, 1991, 322-359.
15. Alvis C.E., Willcock J.J., Carter K.M., Byrd W.E., Friedman D.P. cKanren: miniKanren with Constraints. Proceedings of the 2011 Annual Workshop on Scheme and Functional Programming, 2011.
16. Byrd W.E., Friedman D.P. αKanren A Fresh Name in Nominal Logic Programming. In Scheme and Functional Programming, 2007.
17. Abramov S., Glück R. From Standard to Non-Standard Semantics by Semantics Modifiers. International Journal of Foundations of Computer Science, vol. 12, issue 2, 2001, pp. 171-211. DOI: 10.1142/S0129054101000448.
18. Abramov S., Glück R. Combining Semantics with Non-standard Interpreter Hierarchies. FST TCS 2000: Foundations of Software Technology and Theoretical Computer Science, Springer Berlin Heidelberg, 2000, pp. 201-213.
19. Byrd W.E., Holk E., Friedman D.P. MiniKanren, Live and Untagged: Quine Generation via Relational Interpreters (Programming Pearl). Proceedings of the Annual Workshop on Scheme and Functional Programming, Association for Computing Machinery, New York, USA, 2012, pp. 8-29.
20. Byrd W.E., Ballantyne M., Rosenblatt G., Might M. A Unified Approach to Solving Seven Programming Problems (Functional Pearl). Proceedings of ACM Program. Lang., Association for Computing Machinery, New York, USA, 2017, pp. 8:1-8:26.
21. Kosarev D., Lozov P., Boulytchev D. Relational Synthesis for Pattern Matching. Programming Languages and Systems, Springer International Publishing, Cham, 2020, pp.293-310.
22. Guthmann O., Strichman O., Trostanetski A. Minimal Unsatisfiable Core Extraction for SMT. 2016 Formal Methods in Computer-Aided Design (FMCAD), Mountain View, CA, USA, 2016, pp. 57-64. DOI: 10.1109/FMCAD.2016.7886661.
23. React: A JavaScript Library for Building User Interfaces. Meta Platforms, Inc. Available at: https://reactjs.org/, accessed: 30.08.2024.
24. Jetpack Compose. Android Developers. Available at: https://developer.android.com/jetpack/compose, accessed: 30.08.2024.
25. SwiftUI. Apple Inc. Available at: https://developer.apple.com/xcode/swiftui, accessed: 30.08.2024.
26. Streamlit framework site. Available at: https://docs.streamlit.io, accessed: 30.08.2024.
27. The JavaScript library for bespoke data visualization. Available at: https://d3js.org, accessed: 30.08.2024.
28. Streamlit layouts and containers. Available at: https://docs.streamlit.io/develop/api-reference/layout, accessed: 30.08.2024.
29. Borning A. Wallingford: Toward a Constraint Reactive Programming Language. Companion Proceedings of the 15th International Conference on Modularity, Association for Computing Machinery, New York, NY, USA, 2016, pp. 45-49. DOI: 10.1145/2892664.2892667.
30. Badros G.J., Borning A., Stuckey P.J. The Cassowary Linear Arithmetic Constraint Solving Algorithm. ACM Trans. Comput.-Hum. Interact., vol. 8, issue 4, Association for Computing Machinery, New York, NY, USA, 2001, pp. 267-306. DOI: 10.1145/504704.504705.
31. Bo Cai, Jian Luo, Zhen Feng. A novel code generator for graphical user interfaces. Scientific Reports, vol. 13, 2023. DOI: 10.1038/s41598-023-46500-6.
32. Bielik P., Fischer M., Vechev M. Robust relational layout synthesis from examples for Android. Proc. ACM Program. Lang., vol. 2, Association for Computing Machinery, New York, NY, USA, 2018. DOI: 10.1145/3276526.
33. Android ConstraintLayout widget. Accessed: 30.08.2024, available at: https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout.
34. Brückner L., Leiva L.A., Oulasvirta A. Learning GUI Completions with User-defined Constraints. ACM Trans. Interact. Intell. Syst., vol. 12, Association for Computing Machinery, New York, NY, USA, 2022. DOI: 10.1145/3490034.
35. Shiripour M., Dayama N.R., Oulasvirta A. Grid-based Genetic Operators for Graphical Layout Generation. Proc. ACM Hum.-Comput. Interact., vol. 5, Association for Computing Machinery, New York, NY, USA, 2021. DOI: 10.1145/3461730.
36. Swearngin A., Wang C., Oleson A., Fogarty J., Amy J. Ko. Scout: Rapid Exploration of Interface Layout Alternatives through High-Level Design Constraints. Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems, 2020. Available at: https://api.semanticscholar.org/CorpusID:210177012, accessed: 30.08.2024.
Review
For citations:
KOSAREV D.S., LOZOV P.A., BOULYTCHEV D.Yu. Declarative GUI Layout Synthesis with Relational Constraint Solvers. Proceedings of the Institute for System Programming of the RAS (Proceedings of ISP RAS). 2024;36(5):47-66. (In Russ.) https://doi.org/10.15514/ISPRAS-2024-36(5)-4
Email this article 