6,236 bytes added,
09:45, 9 July 2021 == Overview ==
Property direct editing (also known as inline editing) aims to provide a more efficient way for users to edit properties, especially when such tasks are performed frequently.
Generally speaking, direct editing skips the additional dialogs or pages presented in regular editing and allows users to directly interact with the UI displaying properties. For example, a text box type of control can be used to both display the value of a property and accept modifications of the value from the user.
== Supported property types ==
In {{UBIK}}, we provide default templates for some of most frequently used property types. However, you can use your own templates, controls, etc. as you like to deal with these property types or even more (as long as you can find suitable UI controls for dealing with these types).
<tabs>
<tab name="UWP">
They are accessible as DataTemplates from the TemplateService (use the [[Developer_Mode]] to see where this is available) and the syntax in XAML is <code>{Binding TemplateService[TEMPLATE_NAME]}</code>. Just like other such templates, they can be customized by providing your own TEMPLATE_NAME.xaml files.
</tab>
<tab name="Xamarin">
They are accessible as DataTemplates from UBIKThemes.xamlx and the syntax in XAML is <code>{DynamicResource TEMPLATE_NAME}</code>. Just like such templates, they can be customized by providing your own DataTemplate resources (with the names of TEMPLATE_NAME) in UBIKThemes.xamlx.
</tab>
</tabs>
* String/Text: named as UBIKPropertyDirectItemString.
== PropertyViewModel ==
This is the view model for every single {{UBIK}} property and also the basement for property direct editing (and regular editing alike). For example, a certain named PropertyViewModel (with the name of PROPERTY_NAME) of the context object in a content page is accessible as <code>{Binding Properties.VisibleItems[PROPERTY_NAME]}</code>.
[[File:UBIK_Xamarin_UI_Template_PropertyDirectItemString_Debug_NotInEditing.png|thumb|A test template for direct editing a String property (Xamarin)]]
[[File:UBIK_Xamarin_UI_Template_PropertyDirectItemString_Debug_InEditing.png|thumb|The same template now in edit mode (Xamarin)]]
In the example demonstrated in the screenshot where a test template is used to enable direct editing of a String/Text typed property, the following members of the PropertyViewModel are involved.
* InEditing: This is the boolean member indicating whether the PropertyViewModel is currently in edit mode. It can be used to decide whether the UI should display the DisplayValue text or present a text box for user input;
* Description: This is the description of the underlying property/meta property;
* ValueItem.PropertyValue: This is the value of property stored at the PropertyViewModel which can differ from the underlying property value because there can be editing changes not yet confirmed/saved. It can be read from and written to by the text box;
* DisplayValue: This is the textual version of ValueItem.PropertyValue used for displaying when the InEditing is false;
* StartDirectEditCommand: Sets InEdit to true and starts the direct editing session. In the example, this is linked to the tapped event of the entire template area;
* ConfirmEditCommand: Confirms the edit and sets InEdit to false. Even if the property value is not changed, this will give the property a new validation timestamp, technically modifying the property;
* SaveAndCommitCommand: In addition to confirming the edit, this also saves the changes to the underlying property, saves the owner object and attempts to commit it if the sync mode allows;
* ResetCommand: Resets the underlying property to its last known server state, saves the owner object and attempts to commit it if the sync mode allows;
* DiscardChangeCommand: Discards all changes made at the PropertyViewModel level and not yet saved to the underlying property;
* DeleteValueCommand: Sets the underlying property's value(s) to null and erases its validation timestamp, saves the owner object and attempts to commit it if the sync mode allows;
* CancelEditCommand: Cancels the current editing session and discards all changes made at the PropertyViewModel '''in that session''' (different from DiscardChangeCommand).
{{Hint|Once again, you can use the [[Developer_Mode]] to find out more about the PropertyViewModel, like where they are available and how they can be accessed in XAML, or what other data/members are available underneath, etc.}}
=== Relevant behaviors and controls ===
Here are some Behaviors and/or controls we have created for the purpose of property direct editing.
<tabs>
<tab name="UWP">
The KeyEventTriggerBehavior is a specialized version of the EventTriggerBehavior in the way that it limits the event to KeyDown and allows customizers to define which key should trigger the action(s).
<source lang = "xml">
<TextBox ...
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:behaviours="using:UBIK.WinX.Behaviors">
<Interactivity:Interaction.Behaviors>
<behaviours:KeyEventTriggerBehavior KeyName="Enter">
<Core:InvokeCommandAction Command="{Binding ConfirmEditCommand}" />
</behaviours:KeyEventTriggerBehavior>
<behaviours:KeyEventTriggerBehavior KeyName="Escape">
<Core:InvokeCommandAction Command="{Binding CancelEditCommand}" />
</behaviours:KeyEventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</TextBox>
</source>
</tab>
<tab name="Xamarin">
The SelectAllEntry optionally accepts two commands (ReturnCommand & EscapeCommand) to execute when a user inputs the return key {{key press|Enter}} and the escape key {{key press|Esc}} respecitively.
<source lang = "xml">
<Grid xmlns:renderers="clr-namespace:UBIK.CPL.Platform.Renderers;assembly=UBIK.CPL">
<renderers:SelectAllEntry ...
ReturnCommand="{Binding ConfirmEditCommand}"
EscapeCommand="{Binding CancelEditCommand}" />
</Grid>
</source>
</tab>
</tabs>
[[Category:Client|Property Direct Edit (Client)]]
[[Category:WinX|Property Direct Edit (Client)]]
[[Category:Xamarin|Property Direct Edit (Client)]]
[[Category:Version 4.0|Property Direct Edit (Client)]]