MarkUX - A sleek MVVM framework for creating rich user experiences

**Update** I'm very excited to announce the release of MarkUX: Bringing the Power of MVVM to Unity

Available now on the asset store!

**MVVM** (Model View ViewModel) is an architectural pattern that has been around in the software development world since 2005, popularized by frameworks such as WPF/Silverlight and AngularJS. It hasn't really broken into the game development world which is unfortunate because it's a really beautiful and powerful pattern. Having made the transition from software development to a game development, the MVVM pattern was the first thing I felt missing. With the advent of the unity 4.6 UI system I felt the conditions were ideal for creating a new MVVM framework specially designed for game development - building upon the strengths of previous frameworks and making an effort to make it **intuitive** and **easy to use** as possible.

At its core MarkUX offers a new language (**XML**) in which you can express UI design and its relationship with application logic. Why is this a good thing? In short it allows you to create modular re-usable UI widgets (views) that may be easily combined, re-used and shared. You just need to look at HTML to realize how useful it is to have a language to communicate designs. Imagine if web-pages could only be created using visual designers - no snippets, no source to inspect and re-use, no convenient way to share designs, create text-tutorials, etc - well that is the case with Unity UI's without MarkUX today. In addition to a design language MarkUX makes it possible to create interactive and responsive UI's that adapt to changes in layout and data. It offers theming functionality similar to CSS and a layout system that is intuitive and simple to use. It comes with a bunch of standard views ready to be used.

So If you like the new Unity UI system but want more power to create rich user-interfaces that are dynamic, can adapt to data and layout changes. If you like frameworks that are **intuitive** and easy to use. If you want to be able to build upon other's works and share your own, then MarkUX might be for you.

FEATURES





Design views using XML - Design, share and re-use views using simple XML. Views can be freely nested, re-used and combined.


Fast and fluid workflow - Views are automatically processed and wired to their ViewModel through naming conventions. The process is fast and views are presented in the scene as changes are saved.






Elegant and Intuitive DataBinding - Using naming conventions and smart binding logic, binding data to your views is very straight forward. No "plumbing" or configuration required.


Interactive - Effortlessly create views that respond to user interactions. Use event system events (clicks, drags, etc) or create custom actions with ease.






Animate views using XML - Quickly create animations using XML. Re-use animations on different views.


Easy Transitions- Creating animated transitions between views is easy using the ViewSwitcher view.






Flexible styling using Themes - Modify the look and feel of views using Theme files (XML). Control theming through id- and style-selectors (similar to CSS).


Catalogue of Views and Themes - Since views can easily be created and shared, expect to see a growing catalogue of views available for download. The community is encouraged to create and distribute views as they please.






Dynamic Content - Have views adjust to run-time changes of data as shown by the FlowList and List views.

Responsive Layout - Have views adjust to content and layout changes.

Intuitive and Flexible Layouting - Allows width and height of views to be specified using percentages. Anchor views easily by setting alignment.

Display sets of data - Display lists and sets of data using the FlowList and List views. Bind custom data to the lists and control the way items are presented using templates.

Similar to WPF and other MVVM frameworks - If you've worked with MVVM frameworks such as WPF/Silverlight (XAML), Caliburn, AngularJS, Prism, etc. you'll feel at home with MarkUX.

And much more. The framework is in active development and you can expect continuous updates with new features, themes, views and tutorials. Check the latest developments at www.markux.com

Get it on the asset store.

 

I watched the 7 snippets because I like the idea of using xml to create an easy to use framework for building UI's.

The 7 snippets don't cover all the functionality represented by the gif above, but is a good start.

I am especially curious how you plan to modify the look and feel of the widgets and if you could provide an example of doing that.

So far, so good.

 

Thanks for the feedback . You modify the look and feel of the widgets (views) through theme files (XML). The theme file for the toon-theme used in the snippets looks like this:

<Theme Name="Toon" BaseDirectory="Assets/Themes/Toon/">

<Label Font="Fonts/AveriaSansLibre-LightItalic.ttf" FontSize="22" />
<Image Style="MenuBackground" Path="Sprites/MenuBackground.psd" />
<Button BackgroundImage="Sprites/Button.psd" DisabledSprite="Sprites/ButtonDisabled.psd" PressedSprite="Sprites/ButtonPressed.psd" HighlightedSprite="Sprites/ButtonHighlighted.psd" BackgroundImageType="Sliced"​

BackgroundColor="White" Font="Fonts/CarterOne.ttf" FontSize="30" FontColor="White" Height="1.5em" ShadowColor="#368f16" ShadowDistance="2,-2" OutlineColor="#368f16" OutlineDistance="2,-1" />

<Button Style="Round"​

BackgroundImage="Sprites/RoundButton.psd" PressedSprite="Sprites/RoundButtonPressed.psd" HighlightedSprite="Sprites/RoundButtonHighlighted.psd" Width="69" Height="72" />
... 11 more lines cut for brevity ..
</Theme>​

For example, any Label view gets its initial Font set to "Fonts/AveriaSansLibre-LightItalic.ttf". Like with css you can set so only the views with the specified Style or Id value gets manipulated by the theme (e.g. in this case all buttons gets background sprite set to Button.psd but only those with Style="Round" gets their background sprite set to RoundButton.psd).

 

I've added a new instructional gif showing how theming is done.

 

Version 1.0 Released!

 

Excellent work man I just wanted to bump your thread so it gets some more attention, I think it deserves some more.

I am going to purchase it over this weekend and have a play around.

Edit: I have a request. I am going to be using this for a strategy game. How would I go about creating a UI element that hovers over an object in the game world? (Think Civ 5 UI - city names/resource icons, etc)