In the MVVM model, Page views and templates are created based on the following.
When starting a project, you should review the UI graphical design of the whole app and extract a number of components. Each component is a unique shape format used across the application on different pages. Examples of app components are:
A component can be a implemented:
When creating template ZBL files for your ViewModels:
<Intro Text="Welcome to our application. We hope you will totally love the experience of this app." />
<HeroImage Path="Images/Hero/HomePage.png" />
<SecondaryButton Text="Login" ... />
<PrimaryButton Text="Get Started" ... />
A View that renders a view model named X should implement the special interface of ITemplate<X>. This has a propery named Model which should be of the same type as the ViewModel. This means that anywhere in the View markup or codebehind, you can refer to the Model object that it renders using the same name.
As a shortcut, you can set the z-viewmodel attribute:
This will The Zebble MVVM framework will use reflection to discover all view model templates and register them internally, which is then used by the navigation system to render actual views.
Often in mobile apps, a page that you want to navigate to will require data from a web api. To fetch such data you will normally override either the NavigationStarted() method. This means that typically, a data driven page is rendered before its data is ready. When done correctly, this technique, called skeleton rendering, improves the user experience and sense of app responsiveness.
As explained before, as soon as a View Model object is constructed, it is meant to be ready for rendering. This is called the Zero State. As it's visible to the user, specially for the first time, it's important that the Zero state looks professional.
A suitable zero state for image views will be a lightgray common views would be:
When navigating to a view model for which no template has been defined, Zebble will automatically generate a template.
This is meant to be used for debugging only. Do not use them for the end product!