No edit summary |
No edit summary |
||
Line 64: | Line 64: | ||
overflow-y: auto; | overflow-y: auto; | ||
} | } | ||
span { | span.time { | ||
font-size: 18; | font-size: 18; | ||
display:block; | display:block; | ||
Line 72: | Line 72: | ||
opacity: 0.7; | opacity: 0.7; | ||
} | } | ||
span:hover { | span.time:hover { | ||
color: #0000FF; | color: #0000FF; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
span:focus { | span.time:focus { | ||
color: blue; | color: blue; | ||
</style> | </style> | ||
Line 83: | Line 83: | ||
<iframe width="740" height="500" src="https://www.youtube.com/embed/fu8VRHvabzk?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe> | <iframe width="740" height="500" src="https://www.youtube.com/embed/fu8VRHvabzk?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe> | ||
<div> | <div> | ||
<span data-video="fu8VRHvabzk" data-start="13" tabindex="0"> content override checkbox</span> | <span class="time" data-video="fu8VRHvabzk" data-start="13" tabindex="0"> content override checkbox</span> | ||
<span data-video="fu8VRHvabzk" data-start="40" tabindex="0"> wpf turnkey fat client look </span> | <span class="time" data-video="fu8VRHvabzk" data-start="40" tabindex="0"> wpf turnkey fat client look </span> | ||
<span data-video="fu8VRHvabzk" data-start="203" tabindex="0"> angular UI override control implementation </span> | <span class="time" data-video="fu8VRHvabzk" data-start="203" tabindex="0"> angular UI override control implementation </span> | ||
<ul> <span data-video="fu8VRHvabzk" data-start="265" tabindex="0"> tagged value </span> | <ul> <span class="time" data-video="fu8VRHvabzk" data-start="265" tabindex="0"> tagged value </span> | ||
<span data-video="fu8VRHvabzk" data-start="360" tabindex="0"> data change reaction / mutation observer</span></ul> | <span class="time" data-video="fu8VRHvabzk" data-start="360" tabindex="0"> data change reaction / mutation observer</span></ul> | ||
<span data-video="fu8VRHvabzk" data-start="436" tabindex="0"> pattern matching </span> | <span class="time" data-video="fu8VRHvabzk" data-start="436" tabindex="0"> pattern matching </span> | ||
</div> | </div> | ||
</div> | </div> |
Revision as of 18:50, 5 March 2017
Working with MDriven viewmodels you expect the UI to be created by the MDriven logic for the given platform. This handles the standard grids, edits and picklists. But ever so often you want to be able to inject other controls and bind these to the data instead.
You can replace the whole page/dialog/form but many times you will suffice with just injecting one or a few things into the standard UI.
To do this you check the "Content override" checkbox on the viewmodel column that is the root of your data for the override control. This will signal just as grey rectangle in the designer.
Two new properties will show up in the propetry inspector: ContentOverrideType and ContentOverrideDesignTimePath. These are properties to point out a c# assembly that can render the control in design time. This is totally optional - and you do not need to do this in order to use the UIOverride on runtime. If you want to find out how to use it read more here: Custom controls in ViewModel aided Views
To get the UIOverride to work in runtime we need to do different things per target platform. All platforms support the UIOverride - but the used control must support the platform.
Platform | What you need to do |
---|---|
WPF std MDriven Framework | Implement IExternalWECPOFUIComponent, read more here |
MDriven Turnkey WPF | Currently you must implement the HandleContentOverride and merge your control with existing view |
MDriven Turnkey AngularJS |
|
MDriven Turnkey MVC | Paused Waiting for a use case and motivation to implement |
In the following video tutorial the example of UIOverride, ContentOverride - creating and injecting your own controls in MDriven Turnkey generated UI is given in more practical way to faciliate your user experience.
To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini player. Choose the interesting subtitle on the list and immediately get to the exact theme timeplace in the video. Now you can pick any topic to be instructed without watching the whole video.
- tagged value
data change reaction / mutation observer