== Overview ==
The developer mode provides certain features to help customizing the {{UBIK}} UI and is therefore only meant to be accessed by project engineers and developers.
{{Attention|{{Version/XamarinSince|4.3}}The Xamarin clients generally don't support the developer mode due to the size restriction of the devices. On Xamarin.UWP, only the most basic functionality is available, namely you can activate the mode to see the different UI fragments being represented as those similar green boxes with respective template names.}}
== Stages ==
| [[File:Stage 1.png|335x230px]] || [[File:Stage 2.png|335x230px]] || [[File:Stage 3.png|335x230px]] || [[File:Stage 0.png|335x230px]]
|}
<br />{{Hint|The current stage information is shown in the app's title. For certain pages, there might be no differences at all between some stages. For example, the login page looks exactly the same between stage 1 and stage 2 since there's no list items to display.}}
== Features ==
=== XAML Files ===
When pressing the edit button {{key press|Edit XAML Template}} in the flyout with the name of the XAML file, the following will happen:
* If this template doesn't have a customized XAML file yet, {{UBIK}} will copy its default XAML definition into the customizing folder, open the explorer and highlight it. From there you can use any text editor to modify it;
* If there is already a customized XAML file for this template, UBIK will ask whether you want to open the existing file or if you want to replace the existing file with the default XAML definition of this template again.
{{Hint|If you switch on developer mode stage 2 on a page where a [[SYSCLS_CHILDAREATEMPLATE|custom child area template]] is used, that custom name is displayed instead of the default "UBIKChildArea" text.}}
{{Version/WinXSince|3.6}} When pressing {{key press|Edit UBIKThemes}} in the same flyout, {{UBIK}} presents the same options. Except it deals with the UBIKThemes.xaml file instead of the various template files.
{{Hint|This button is accessible in any template button flyout and is a convenient way to get the most up-to-date default version of the UBIKThemes.xaml file.}}
{{Version/WinXSince|4.0}} When pressing {{key press|Unpack Default XAMLs}} in the same flyout, {{UBIK}} places all default XAML files under the app's "LocalState\XAML\default" folder, overwriting any if already exists. This is provided as a last approach to fetch any default XAML template. We recommend using {{key press|Edit XAML Template}} first if you can since that is more context relevant and places the template in the right folder for you to start your customizing.
=== Browsing the ViewModel/Context ===
When pressing the button with the name of the ViewModel/Context, {{UBIK}} will open a browser that allows you to explore all its public properties, methods and commands. {{Hint|At the root level, a complete and up-to-date list of converters is also displayed. Their names/keys, which you should use in XAML customizings, are displayed in the first rows.}} Tapping on a member will pin that member and browse a level deeper. Tapping on the button on the left side of the member name, will trigger the following:* If the member is a property {{key press|P}}, an indexer {{key press|I}} or method {{key press|M}} , its path will be copied to the expression field on top of the browser and its result will be instantly evaluated;
* If the member is a command {{key press|C}} the browser will navigate to its respective Execute method. Tapping the button of the Execute method will invoke the command.
{{Hint|The result of clicking on an indexer (both button and row) is slightly different in its category, namely the evaluation and browsing all target the type(s) of the collection items instead of the collection itself.}}
Here is a list of all possible member types.
|- style="vertical-align: top;"
| Method || [[File:UI_WinX_DeveloperMode_Method.png|300x42px]] || Includes both the command related methods and all other public methods.
|- style="vertical-align: top;"
| Indexer {{Version/WinXSince|4.0}} || [[File:UI_WinX_DeveloperMode_Indexer.png|300x42px]] || Unique to collection types, uses syntax [''indexer''] to evaluate a single item of the collection.
|- style="vertical-align: top;"
| Command || [[File:UI_WinX_DeveloperMode_Command.png|300x42px]] || Performs a certain task, e.g. navigating back to the previous page, taking a picture. Every one of them has a corresponding "Execute''[CommandName]''" method which actually executes the command.
* The context used for evaluating the expression does not change as you browse further into the list;
* The result of the evaluation (if there is any and it's not null) is displayed below the expression field.
[[File:UI_WinX_DeveloperMode_PinContext.png|thumb|An expression result that can be pinned as the new data context]]
[[File:UI_WinX_DeveloperMode_UnpinContext.png|thumb|A pinned data context]]
==== Pinning a new context {{Version/WinXSince|4.0}} ====
Sometimes it is better to jump start with a specific binding data context instead of one that can be found in the standard UI. For example, while the default data context of a child page is a ContentPageViewModel, the inspection of its <code>Properties.AllItems["NAME"]</code> might be needed more frequently.
In such cases, you can evaluate the expression first. If the evaluation is successful, a pin button should appear on the right side. Once pinned, the type of the evaluated result becomes the new binding data context of the type browser and you can start browsing into that type directly. The expression of the pinned context is displayed on the left side of the expression field, alongside a button to unpin it.
==== Usage example ====
{{Hint|As mentioned, the name of the context is not required at the beginning of the expression. However, it is required when you nest an expression in another one as its parameter. For example, you can enter "ExecuteShowMessageBoxCommand(Context.AppVersion)" to display the app version in a dialog. The "Context" keyword is needed for evaluating the parameter expression "AppVersion".}}
==== Missing template ====
if If an object requests a special template, e.g. through the [[SYSCLS_CHILDAREATEMPLATE|child area template classification]], UBIK will try to locate the respective file in the XAML customizing folder of the current profile. If the file doesn't exist, it will display a red error box in the respective area when the "Strict Template Loading Policy" setting is turned on {{Version/WinXSince|3.6}}. See more [[UBIK_Templates#StrictTemplatePolicy|details]].
{{Hint|Clicking the {{key press|Edit XAML}} button will in this case create an empty template with the requested template name in the XAML customizing folder!}}
[[File:UI_WInX_ErrorTemplate.png|thumb|Parsing error in a requested template]]
==== Parsing errors ====
== Other features ==
=== Reloading the UI ===
By hitting {{key press|F5}}, all templates on the currently displayed page will be disposed of and reloaded. So if a customized XAML template file was changed, this change will be immediately reflected in the UI.
The time taken to reload the UI is proportional to the number of navigational steps taken to reach the current page (visible in UWP in the top bar). When working extensively on a specific page, it is recommended to navigate directly to that page using the search feature, in order to speed up the time taken for each successive reloading of the UI. Furthermore, exiting Developer Mode also refreshes the UI, without disposing of it, making it an even more efficient way to immediately reflect XAML changes. [[Category:Pages with broken file linksClient|Developer Mode]][[Category:WinX|Developer Mode]][[Category:XAML|Developer Mode]][[Category:Xamarin|Developer Mode]]