I wrote a SplitApp with a master and six detail views. Each detail view has it's own data model. The data is loaded in the onInit method of each controller.
I'm just trying to improve the performance of the application. Is there a way to load only the initial detail view and it's data on startup and the other only on request?
Thanks for the advise! The problem was that i defined all detail views in the XML-View inside the tag, like this:
<SplitApp mode="ShowHideMode" height="auto" >
<masterPages>
<mvc:XMLView viewName="de.test.view.Master" />
</masterPages>
<detailPages>
<mvc:XMLView viewName="de.test.view.Detail01" />
<mvc:XMLView viewName="de.test.view.Detail02" />
<mvc:XMLView viewName="de.test.view.Detail03" />
...
</detailPages>
</SplitApp>
Now i load each detail-view when it is requested for the first time and make use of the addDetailPage function of the SplitApp control.
Have you tried to add ``async="true"` property to your XMLView?
There are also some articles how you can improve performance of your app:
https://blogs.sap.com/2016/10/29/sapui5-application-startup-performance-best-practices/
https://blogs.sap.com/2016/11/19/sapui5-application-startup-performance-advanced-topics/
https://blogs.sap.com/2013/12/21/asynchronous-load-of-sapui5/
Related
I am trying to make a business critical SAPUI5 application more accessible using screen readers by adding ARIA labels and landmarks. One issue is that some SAPUI5 elements such as sap.m.Title's without text have been used (abused) for layout purposes. I would like to add the aria-hidden attribute or a SAPUI5 analogue to these Title elements. But I can't figure out how to do this. I would like to change
<Title text="" class="title" />
into
<Title aria-hidden="true" text="" class="title" />
But setting aria-hidden on the Title like this seems to be invalid. How would I go about setting a standard HTML attribute on a SAPUI5 control?
Thank you in advance for your help!
Joshua
I developed one app about months ago with Prism. It's great tool that make perfect structure for my app.
However, today I tried to pick up that app and fix some things that pending for a long time. I used Master Detail page in my app, and today I suddenly found that actually the structure for how I developed this Master Detail page using Prism is kind of out of my knowledge.
So, here it is.
Basically my MasterDetailPage is like this:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:b="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
mc:Ignorable="d"
x:Class="JapaneseLearnPrism.Views.MenuPage">
<MasterDetailPage.Master>
<NavigationPage Title="Menu" Icon="ic_hamburger.png">
<x:Arguments>
<ContentPage Title="{Binding Title}">
<ListView ItemsSource="{Binding MenuItems}"
SelectedItem="{Binding SelectedMenuItem, Mode=TwoWay}"
SeparatorColor="LightGray"
RowHeight="60"
SeparatorVisibility="Default"
BackgroundColor="#e8e8e8">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Label Text="{Binding PageIconText}" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="Medium" VerticalOptions="Center" />
<Label Text="{Binding Title}" FontSize="Medium" VerticalOptions="Center" TextColor="Black" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<b:EventToCommandBehavior EventName="ItemTapped" Command="{Binding NavigateCommand}" />
</ListView.Behaviors>
</ListView>
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
</MasterDetailPage>
And the navigation path is this in App.xaml.cs file.
await NavigationService.NavigateAsync(nameof(MenuPage) + "/" + nameof(NavigationPage) + "/" + nameof(Views.MainPage));
But if I look at lots of the Xamarin.Forms samples, the MasterDetailPage is actually different.
They are going to do like below:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.MainPage">
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
And that's from Microsoft's official website. The Master Page in above is actually just one ContentPage, however, the Detail page should be NavigationPage, that one I can understand because it makes sense.
However, in my Prism app, the MasterPage also has to be a NavigaionPage, why is that? Any one can help on this?
Thanks.
You can take a look at this wonderfull blog about How to make Master-Detail Page Navigation menu in Xamarin Forms with Prism.
If you scroll down to the bottom of the post, you will see some description on why it works this way, Quoting:
Note: Navigation in Prism is all based on this url format where we can define to which pages we want to go, and it can be something like this: ViewA/ViewB/ViewC/ViewD
... and if you remember we are inside of MasterDetail page so navigating from MasterDetail will get result that those pages will go to Detail part of it... and that is great for us, we have menu in side of master page and choosing menu items will open pages as Detail pages.
The way that Prism Navigation is designed, it makes sense that a DetaiPage goes inside the MasterDetail, so basically it keeps the Prism Logic of doing the Navigation.
Quoting the Basics of Prism Navigation
Navigating in a Prism application is conceptually different than standard navigation in Xamarin.Forms. While Xamarin.Forms navigation relies on a Page class instance to navigate, Prism removes all dependencies on Page types to achieve loosely coupled navigation from within a ViewModel. In Prism, the concept of navigating to a View or navigating to a ViewModel does not exist. Instead, you simply navigate to an experience, or a unique identifier, which represents the target view you wish to navigate to in your application.
I have a view which I call in few other views with xmlns:mvc="sap.ui.core.mvc" and it's component XMLView like that:
<mvc:XMLView viewName="myViewPatch"
height="100%" id="myId" app:myProp="myProp" />
I want to access myProp in myViewPatch.controller but I think it's not possible that way because myProp is assigned to the mvc:XMLView not to the View itself. Is there any way to fake/create some kind of constructor? P.S. I am not able to use fragment and use different controllers.
I tried to find a solution by checking other questions with a similar error but none could help me. I tried to run the Component.js from my app in sandbox. Running the index.html works fine. My starting view is this:
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
controllerName="com.sap.build.standard.qrCodeScanner.controller.Home"
>
<Page id="home"
class="customHomeBackground"
showHeader="true"
title="Home"
showFooter="true"
>
<content>
<FlexBox
class="customFlexBoxHome"
justifyContent="Center"
alignItems="Center"
wrap="Wrap"
>
<GenericTile class="customTile"
header="Scan invitations"
subheader="from your customers"
frameType="OneByOne"
press="_onGenericTilePress1"
>
<TileContent>
<ImageContent src="sap-icon://bar-code"/>
</TileContent>
</GenericTile>
</FlexBox>
</content>
<footer/>
<headerContent/>
<subHeader/>
<customHeader/>
</Page>
</mvc:View>
It's simply a single GenericTile. I can't access this view because of
Error: Cannot add direct child without default aggregation defined for control sap.m.GenericTile
Accessing the other views is no problem. So when I add e.g. a button instead of the GernericTile + children, it works fine.
I also tried to add one of these sample tiles instead but same error.
What's the problem with the GenericTile?
Piggybacking on #sunil-b-n's answer:
In the current version of UI5 the example code works fine, as per the plunkr Sunil provided.
However, if you change the library version to 1.38.15 like this, it is broken as per OP's question.
Look at the difference. In the latest version, this code is valid:
<GenericTile>
<TileContent>
<ImageContent src=""/>
</TileContent>
</GenericTile>
But in old versions, named aggregations need to be explicitly added accordingly:
<GenericTile>
<tileContent> <!-- named aggregation required. Default since 1.46.x -->
<TileContent>
<content> <!-- named aggregation required. Default since 1.38.18 -->
<ImageContent src=""/>
</content>
</TileContent>
</tileContent>
</GenericTile>
You need to figure out what version of UI5 you're on and use the appropriate SDK documentation to build your app, otherwise you'll run into trouble.
You can view the version-specific Demo Kit by adding the version number to the URL, e.g. https://ui5.sap.com/1.38.8/
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="com.sap.build.standard.qrCodeScanner.controller.Home" >
<Page id="home" class="customHomeBackground" showHeader="true" title="Home" showFooter="true">
<content>
<FlexBox class="customFlexBoxHome" justifyContent="Center" alignItems="Center" wrap="Wrap">
<GenericTile class="customTile" header="Scan invitations" subheader="from your customers" frameType="OneByOne" press="_onGenericTilePress1">
<TileContent>
<ImageContent src="sap-icon://bar-code" />
</TileContent>
</GenericTile>
</FlexBox>
</content>
<footer/>
<headerContent/>
<subHeader/>
<customHeader/>
</Page>
</mvc:View>
This view is loading completely fine in the latest SAPUI5 version.
Working plnkr here
content is the default aggregation for sap.m.Page.
guess because of the wrapped sap.m.Page around the sap.m.GenericTile. just omit the sap.m.Page and you won't get the error. the sap fiori design guidelines says that tiles are used to display and launch apps on the launchpad. And therefore, they shall not be used on an overview page or anywhere else.
im newbie in zk´s world, so i have a doubt... i read already zk 8 documentation (almost all). At the office some partners are using ViewModel but inside some components are using Composer (selectorComposer) to bind some elements like this:
<div apply="org.zkoss.bind.BindComposer" viewModel="#id('vm') #init('com.some.package.SomeViewModel')">
<vbox>
... SOME ANOTHER ELEMENTS ....
<div apply="com.some.package.SomeComposer">
<hbox>
<vbox>
<checkbox ... more code...
</checkbox>
</vbox>
</hbox>
</div>
</vbox>
</div>
i read that if you apply SelectorComposer you lost coupling... so what is the reason of taking SelectComposer within a ViewModel? or how it works?
Thanks a lot for any help.
From my point of view SelectComposer allow you to reuse java code in a very traditional way. For example you can defined an AbstractController with functionality that will be reused in other controls of the same type with an slightly different functionality and extend the AbstractController. In this approach you can control the lifecycle of the componente by implemented the methods of SelectComposer like doAfterCompose.
But actually you can do the same thing with pure MVVM, but instead of implement methods of SelectComposer you should use the annotations like #AfterCompose or #Init and you can extend the base class as well, to use your view you just have to change the tag in the zul file with something like:
<include src="/artifacts/componente_to_reuse.zul"/>
I think is just a matter of preferences, I preferred (and I always recommend) to use pure MVVM since it was available, and I haven't found any functionality that I couldn't reuse with MVVM approach.
References:
Include,
Zk annotations