I'm developing an SAP-ui5 XML view. In that view I created dynamic custom tiles using the CustomTile tag, as demonstrated in this image:
<TileContainer
id="container"
height="400px"
tileDelete="handleTileDelete"
tiles="{/TileCollection}">
<tiles>
<CustomTile id="ct1">
<content>
<VBox>
<Toolbar class="backcolor" design="Transparent">
<Text class="sapMHeader" text="Dynamic content" />
</Toolbar>
<Button type="{infoState}" text="Button"
icon="sap-icon://approvals"
ariaDescribedBy="defaultButtonDescription genericButtonDescription">
</Button>
</VBox>
</content>
</CustomTile>
</tiles>
</TileContainer>
Currently, clicking on the navigate button slides three tiles per click. I want to get it to slide only one tile per click. How do I achieve this?
The TileContainer control is responsive meaning how many tiles you see totally depends on the available screen space and nothing else. The scroll-buttons act as an overflow and slide a complete 'page' just as a Carousel would do. There is no way of changing this behavior via existing API.
If you really want to adapt this behavior TileContainer.prototype.scrollLeft and TileContainer.prototype.scrollRight are probably a good starting point.
BR
Chris
Related
I am currently creating a React dashboard with multiple charts. I want to create a section on the dashboard that allows users to flip through the different charts in a slideshow fashion. Each chart will be located inside a div. The code currently looks like this:
<div className="chart">
<chartOne />
<chartTwo />
<chartThree />
<div>
I want to create a slideshow that will allow users to easily change the chart that they are viewing. What would be the best way to do this, a slideshow, or some sort of toggle button? Thanks in advance.
On our (Vue.js v.2) webpage we have a section where you can swipe between cards, or by pressing "left" and "right" button. This swiping section is written with vanilla JS, and no fancy library. In order to have the adjacent visible when swiping, I need to have all of them visible in the DOM tree, but hiding them from the viewer. I have made it so all the unfocused cards are aria-hidden, and it works great when using ChromeVox. The problem is that when using VoiceOver, and I click the "right" button, and immediately tab down to the card, it will read out the card to the left, and also get trapped there since the card is aria-hidden. Code-wise the change from aria-visible to aria-hidden happens as soon as the button is pressed, but it seems like VoiceOver has already decided that when I am focusing on the "right" button, that the next element should be card 5 (for instance). If I wait around 1 or 2 seconds after clicking the "right" button, it will change the "next" element, and focus on the correct one (card 6) when I tab down. Is there any way to get around this, so it will focus only on the aria-visible element? Maybe a way to "force refresh" VoiceOver's stack of elements to read next? Maybe if I remove the message being read out when clicking the button, it will refresh immediately? I still haven't found of doing either of those things. I created a low quality flowchart to illustrate the problem better. What I want is for it to behave like ChromeVox.
I have tried several methods of getting this to work now, and it feels like it's a bug with VoiceOver. Some of the (desperate) attempts I've tried: setting tabindex=-1, role=presentation, changing the ID of "right" button dynamically as I navigate between cards, creating an empty div with a dynamic ID below the button, using aria-flowto, dynamically setting aria-describedby on the "next" element, and different variations between these and some other stuff I can't remember.
Eventually I found a solution that kinda works. I'm not very happy about it, but it's better than nothing. What I did was to make the title inside the card aria-hidden, and creating a currentHeader variable in store. I created an sr-only & aria-visible title above the swiping section, where the v-html points to the currentHeader variable. This way, the "next" element for the "right" button will always be the same element, but content will change after I click the button. It's not a perfect solution, and for some reason it makes VoiceOver "halt" when trying to go to the next element immediately after clicking the button, but at least the user won't read the wrong text and get trapped. Here's a pseudocode illustration of how I did it if my explaination was confusing:
// old solution // old swiping-section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 v-html="element.title" />
<swiping-section /> <p v-html="element.desc" />
</div>
// new solution // new swiping section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 aria-hidden="true" "v-html="element.title" />
<h3 class="sr-only" v-html="currentHeader" /> <p v-html="element.desc" />
<swiping-section /> </div>
If anyone finds a better way to do it, please post your solution.
I am using ASP.NET web forms to design a site. One of the pages uses a <DIV> to hold a scrolling list of asp:ImageButton controls, each of which displays an image. The goal is to be able to display a long list of images inside a scrollable DIV tag, making it easier for the user to choose one without using a third-party control and avoiding controls that require paging. Here's a sample of the DIV I've built:
<div id="divOne" runat="server" style="height: 230px; width: 330px; overflow: auto;text-align: center;">
<asp:ImageButton runat="server" ImageUrl="../Images/image1_small.jpg" AlternateText="Image #1" CommandArgument="Image #1" OnClick="ImagePicked" /><br />
<asp:ImageButton runat="server" ImageUrl="../Images/image2_small.jpg" AlternateText="Image #2" CommandArgument="Image #2" OnClick="ImagePicked" /><br />
...
</div>
When the user clicks an image, it triggers an action to update another part of the page. But the problem is that when the image is clicked and the action fires, the list of images resets back to the first one at the top of the list.
I tried using an UpdatePanel to control this, but it still happens. Is there any way to prevent the list of images from resetting?
If you just want to save scroll position after postback, there are several ways to do it. The simplest one is to save scroll position with javascript whenever onscroll event triggers, then restore saved value on page load, as shown here:
Maintain scroll position of a div within a page on postback
If that doesn't quite work for you, you can try storing scroll position in a hidden field (see this answer: https://stackoverflow.com/a/1184659/1202275). Some also suggest to store it in a cookie, but that can backfire if a person using the page has cookies disabled for any reason.
Hope that helps!
In the _Layout.cshtml, I have a heading image and two link images that change into other images when the cursor hovers over them. When the page is loaded initially (e.g. //localhost:58055/), the images are shown. When I redirect through the links so that the URL is //localhost:58055/Home/Index, for instance, the images only show the little "broken image" icon. Why might this be? Here is where I specify the header's image in _Layout.cshtml.
<header>
<div class="trippy-title">
<img src="images/title_wider.jpg" width="100%" height="100%" repeat>
</div>
</header>
I recommend you read this article for a better understanding of locations in ASP.net.
http://www.west-wind.com/weblog/posts/2009/Dec/21/Making-Sense-of-ASPNET-Paths
as a simple solution you can use ~/images/title_wider.jpg this works with Razor 2+
A very well known fact to improve the performance of a Flex app is to reduce the amount of nested containers, yet doing so seems particularly hard for me to do.
I'm developing a mobile app and resizing some of my components at runtime is quite slow (I can switch components to fullscreen and back again), we're speaking of 500-1000ms, which isn't really nice. Less complex components resize instantly with no noticeable lag, which is what I'd like for all components.
Let's assume the following component (simplified of course and some groups are components by themselves, but the nesting level is quite accurate);
<VGroup "the component's base">
// I guess this is fine
<HGroup "the component's title bar">
<SkinnableContainer "title bar skin">
<title bar components, labels etc. />
</SkinnableContainer>
</HGroup>
<HGroup "options bar that has switchable components">
<button />
<array "holds 'views' for the options bar that can be switched">
<HGroup "one option view">
<option view contents, labels etc. />
</HGroup>
<HGroup "another option view">
<option view contents, labels etc. />
</HGroup>
</array>
<button />
</HGroup>
That's it for the basic component layout. I'm not sure if the options bar can be optimised, the two buttons are used to switch the content which itself is placed between the buttons, hence the upper HGroup. The components inside the array need to be aligned horizontally as well, hence the child HGroups. That's already down to nesting level 3 in this component, which by itself is already a level 3 container (due to my navigation).
To the component's content area;
<Group "this is the content area">
// this group needs two different layouts (vertical and horizontal) that
// are switched based upon the user's choice of having the component maximised
// or minimised
<layouts />
// this list changes it's size based on the selected layout
<List />
this group also changes it's size based on the layout
<VGroup>
<scroller>
// the group here holds a large label that needs to be scrollable
<group>
</scroller>
<HGroup>
<some basic components like `SkinnableContainer` and `Label` />
</HGroup>
</VGroup>
</Group>
And that's pretty much the layout of my worst performing (layout resizing wise) component, closing tag...
</VGroup>
... and we're done.
So the big question, is there room to optimise this? If so, where can I start? Obviously the layout manager has to calculate quite much during the layout switching process.
Unfortunately, since this is a mobile app, I can't work with absolute sizes at all as I need this app to work on a variety of platforms and resolutions, thus all groups have relative sizes assigned, usually 100% for both width and height.
I'd really like to streamline this, but I just don't know where to start. Any tips what I could do?
I was in charge of much of the same thing for a previous project, and while there was no 1 magic bullet that eliminated a chunk of problems, it fell in line with the "death by a thousand papercuts" theory.
A few examples of improvement based on yours:
The TitleBar: The skinnable container also has a layout property, why not just eliminate the outer Group shell, and start with the SC as the base?
<!-- <HGroup "the component's title bar"> -->
<SkinnableContainer id="originalGroupId" "title bar skin">
<layout>
<HorizontalLayout />
<layout>
<title bar components, labels etc. />
</SkinnableContainer>
<!-- </HGroup> -->
The OptionsBar: I don't know if there are limitations in the mobile space, but can you use a container that uses the INavigatorContent interface? IE. Something that will essentially use a creationPolicy flag that will only create the grandchildren of the container until the user actually requests it. With groups there is no concept of virtualization so all components get created at the instantiation of the parent.
<ViewStack "options bar that has switchable components">
<button />
</ViewStack>
The Component Area: This gets a little more challenging, sometimes it helps (at least it does for me) to take a 10,000ft view of what information you really want to display. For instance, the scrolling for a really long label, can you use something like a TextAera instead? If so that would eliminate the outer shell:
// the group here holds a large label that needs to be scrollable
<TextArea text="my really large label">
</TextArea>
Hope that helps...
Might be irrelevant, but I'd also advise against using Lists. Maybe it's not the same, but I changed one of my components from using List to dynamic skin parts and rendering of said component was noticeably faster (600 vs 100ms). Lists are pretty heavy in Spark.