I'm using a new item Basic Template with the app name and back button.
It is being used inside of a "Blank" project.
However, the back button is not responding to touch events.
This following is code that was generated. The back button just disappears.
<Button x:Name="backButton" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" Click="GoBack"/>
I even tried making my own Click Handle and tried navigating myself with.
this.Frame.Navigate(typeof(MainPage));
However that isn't working either. Probably due to something that auto generated because I can create a button myself and wire it up for that (so I'm really trying to stick with the Templates).
Any ideas please?
Edit:
I found it really odd none of the Navigation is working. After drilling some more it appears to be something with LayoutAwarePage. I'm missing something here. Will post updates.
Edit: Sorry about that. I added the event click listeners back in (I must have removed that copying around). However that still does not fix my issue. I tried setting the back button to the "GoBack" function and when you hit the back button it just disappears. I also tried creating my own method and trying to navigate myself and still did not work.
You need an Click event handler on the button. Click="GoBack"
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
GoBack function is available in LayoutAwarePage which is most likely the base class of your page, if not make sure it is. LayoutAwarePage class resides inside Project\Common
You should not need to write any of your own code to enable the back button, as it ties into the underlying navigation framework automatically. If there is a page in the back stack to navigate to, the back button will be enabled.
What you are missing, from what I can see, is that if you start your app on the Basic page that you added, there's nothing in the back stack of the navigation framework for you to navigate to.
I tested your scenario using the following steps:
I created a new C#/XAML Windows Store app using the Blank App template.
Then added a new Basic page (BasicPage1.xaml).
Opened MainPage.xaml, and added a Button to the page.
Double-clicked the button, and added the following code to the click event handler:
this.Frame.Navigate(typeof(BasicPage1));
Ran the project, and the back button worked as expected.
From the XAML markup that I see, there is no Click event handler tied to the button, so no action is taken unless you hook it to one.
Well, this approach appears to take code from the Basic page. Could you confirm that you are inheriting from LayoutAwarePage and not from Page? Otherwise GoBack is not implemented in this way. Also, you cannot GoBack if you have not navigated from this page in the first place, from another. And, finally (just brainstorming here), you cannot GoBack if you got to this page by setting the Frame itself and not the page (in the previous location). This would clear the navigation history.
And, also, can you confirm this does not work?
this.Frame.GoBack();
Best of luck!
Im making my back buttons like this:
XAML code. In this case LoginPage.xaml.
<Button x:Name="ButtonGoBack" Click="ButtonGoBack_OnClick" Style="{StaticResource NavigationBackButtonNormalStyle}"/>
C# code in LoginPage.xaml.cs
private void ButtonGoBack_OnClick(object sender, RoutedEventArgs e)
{
this.Frame.GoBack();
}
I've just had the same issue as Frank. I found my problem to be that I overrided the OnNavigatedTo handler without calling the base class's (LayoutAwarePage) handler also. This meant LayoutAwarePage wasn't setting its _pageKey member variable which it uses in its OnNavigatedFrom handler.
Hope this helps others with the same issue.
This happened to me too. I know nothing could've changed in my code so I checked the project properties. In Common Properties->References I noticed an anomaly, there have been some resources that was never there, ( all I should have in that project is SQLite for Windows RunTime). I then deleted the unwanted resource and fixed the navigation problem.
If you used
Frame.SetNavigationState("1,0");
you removed the back stack entry , so the back button will not working .
Related
I'm trying to access the refresh button in react-admin project. I tried using getElementsbyClassName it returns HTMLComponents Object but it isn't accessible i.e I can see the component on printing it to console but isn't accessible by code. Is there a way for me to disable this refresh button wherever I want?
I'm not sure the exact use case here, but you can create your own custom AppBar that renders essentially whatever you want: https://marmelab.com/react-admin/Theming.html#replacing-the-appbar.
also see this GitHub issue that mentions removing it entirely: https://github.com/marmelab/react-admin/issues/3383
Within your custom AppBar you could have some logic checks within your custom AppBar if you know ahead of time when you'll want it disabled (like on a certain page/component).
If you need it to be more dyanimcally disabled, you could probably have a very high-level context/state to control that as well..
**NOTE: I have built a custom AppBar before, but I haven't done any selective rendering or disabling within it. So, I can't guarantee that this is exactly correct, but it fits with other custom components I've built.
I have a straightforward XPage that lets a user answer a question with a simple Yes/No/NA response using radio buttons. I have restyled the radio buttons to look like a bootstrap button group to make it visually more interesting for the user. If the user chooses "Fail" then they are informed that they need to do something else - easily done with a simple partial refresh to a div further down the page.
This all works fine.
The problem I'm having is that I'd like it so that when the user selects an option, I would like to add a new class of "active" to the selected option so that it highlights in a pretty colour. But for the life of me I can't get this to work and though I'm sure it's a straight forward problem, I can no longer see the wood for the trees.
My current (abridged) iteration of the radio button code is this:
<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">
<xp:radio text="${lbl.kwPass1}" id="itemPass"
styleClass="btn btn-pass #{(item.itemResult eq '0')?'active':''}" groupName="itemResult"
selectedValue="1">
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="actionAlert">
<xp:this.script><![CDATA[XSP.partialRefreshPost('#{id:edit-result}');]]></xp:this.script>
</xp:eventHandler>
</xp:radio>
<!-- other radio buttons -->
</xp:div>
<!-- other page compenents -->
<xp:panel id="actionAlert">
<!-- panel content and appropriate rendered value -->
</xp:panel>
This was attempting to do a chained partial refresh on the radio button container so that the EL would evaluate and apply/remove the 'active' style based on the document datasource ('item') value. I have also tried using dojo.addClass, dojo.removeClass, XSP.partialRefreshGet and other options. I don't mind what the solution is as long as it's efficient and works. I'd prefer not to move the actionAlert panel to within the same container as the radio buttons and I can't do a full page refresh because there are other fields which will lose their values.
Some notes:
I'm not using a RadioGroup control because it outputs a table and I haven't got around to writing my own renderer for it yet. Single Radio button controls work fine for what I need them to do.
I originally tried using the full Bootstrap solution of using "data-toggle='buttons'" (source) which sorts out applying the "active" style fine but then, inevitably, prevents the partial refresh from working.
the radio button styles are clearly not Bootstrap standard
Any assistance pointers or, preferably, working solutions would be appreciated.
You need to aim your partial refresh at the div containing all your radio buttons. Give it an id, so you can address it.
Partial refresh, as the name implies, refreshes one element and its content only. So you target the element that covers all of the items you need to recompute.
Stepping away from the problem, a couple of beers and an episode of iZombie later, I realized what I was doing wrong and sorted it out. So, for posterity, here is the simple solution that I swear I tried earlier but clearly works now:
<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">
<xp:radio text="${lbl.kwPass1}" id="itemPass" value="#{item.ItemResult}"
styleClass="btn btn-pass" groupName="itemResult" selectedValue="1">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="actionAlert">
<xp:this.script><![CDATA[dojo.query('.item-result > .btn').removeClass('active');
dojo.query('.btn-pass').addClass('active');]]></xp:this.script>
</xp:eventHandler>
</xp:radio>
<!-- et cetera -->
The many places I was going wrong:
In my code in the question, I was calling XSP.partialRefreshPost in the CSJS script of the radio button when it should have been in the onComplete of the eventHandler. It has to be chained to another partial refresh so that it runs after it, not at the same time. I did end up getting this right - but overlooked something I'll come to in point 3.
In my original attempt to use Dojo, my first mistake was to try and target the ID of the radio button, something like:
dojo.addClass(dojo.byId('#{id:radio2}'),'active');
This actually works as expected, so long as you remember that the ID of the radio button on the XPage refers to the actual radio button control and not the label wrapping; and the label is what I wanted to style. So the class "active" was being actually being added, just not to the element I thought it was. I should have spotted this in my browser code inspector except for the third thing I got wrong:
Ironically, I sorted out the first issue, remembering to put the XSP.partialRefreshPost into the onComplete - and then didn't remove it when trying to run the Dojo.addClass(). So I didn't notice the mistake with the addClass targeting the wrong element because after it ran, the partial refresh updated the container and removed the class I had just added which made me think that nothing was working.
So now I have some neatly styled radio buttons that don't look like radio buttons and it's all managed client side without any unnecessary partial refresh trips to the server barring the one where I actually need to look stuff up from the server. And the vital lesson is - sometimes you just need to step away from a problem and come back to it with fresh eyes later on.
i want to have a route to a popup dialog.
I created a viewmodel with #noView
import {noView} from "aurelia-framework";
#noView()
export class MyViewModel{
...
}
but this leads to this error:
aurelia-logging-console.js:54 ERROR [app-router] TypeError: Cannot set property 'bindingContext' of null
In my opinion showing the popup from my navbar.ts is not suitable as i don't like to have such code in the navbar, i rather would have it on a place more suitable.
What is the best way to show a popup from navbar without losing the current content of the page so basically show it from anywhere and also with no code in navbar.ts at all.
Is there a better and nicer way to achive this?
Should i rethink my page layout?
Thanks.
I'd look up for event aggregator in this situation.
Where clicking a link or pressing a button will send an event and you can handle this event straight in the app.ts
So you will require your subscription behavior only in app and send an event to activate the popup from anywhere you want.
gl hf (-:
I have a single page web app. The keyboard pops-up everytime I click on the screen.
There are no text input boxes in the DOM at all.
How can I debug why the keyboard is popping up.
You can see examples of this strange behaviour at https://blight.ironhelmet.com and https://np.ironhelmet.com
update with a clue: A user is now reporting that rather than the keyboard, a dropdown selection spiner is popping up all the time, long after that dropdown has been removed from the DOM.
For React users:
I had the same thing happen in a React single-page app with React-Router. I didn't write code to remove elements from the DOM, but of course React does that for you.
On my site, there are React components that contain one to four input fields. After any such component appears, and then is hidden (unmounted / not rendered anymore), then any time the user taps a link, the keyboard pops up. This makes the site unusable. The only way to make it stop was to reload the page.
The workaround: calling document.activeElement.blur() in componentWillUnmount for the wrapper component around my <input> fields did the trick.
componentWillUnmount()
{
if (document && document.activeElement)
{
document.activeElement.blur();
}
}
Note that calling window.activeElement.blur() did not seem to do anything.
There's a thread in the Apple support forums about this issue:
https://discussions.apple.com/thread/7692319
Looks like the keyboard was holding a reference to input after I had removed them from the DOM.
I added a test when removing element to see if it was the current activeElement, then, if so, calling document.activeElement.blur() before removing it. Seems to have solved the problem so far.
I am designing a Windows 8 Metro reading app, and got a problem of navigation event at the right begining. To simplify the problem, the description is:
There are two Pages: MainPage.xaml and DetailPage.xaml. MainPage.xaml contains a listview, the item is an article object(thoses article items are downloaded from the web), the a item is clicked. The Frame will uses
void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
// Navigate to the appropriate destination page, configuring the new page
// by passing required information as a navigation parameter
this.Frame.Navigate(typeof(DetailPage), e.ClickedItem);
}
After reading the full article, user will clicked the "GoBack" button, which is defined as
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
Then the problem comes, it's supposed that the Frame just navigated back to the MainPage, but after the navigation, the DataContext in the MainPage is missing, and the construction function of the MainPage is called again, fetched the web resource.
As a Windows Phone developer, I'm confused about this problem. Could anybody help me.
Thanks in advance.
The default behavior specified by Page.NavigationCacheMode in WinRT/XAML is different than in the PhoneApplicationPage on Windows Phone. It defaults to NavigationCacheMode.Disabled, while NavigationCacheMode.Enabled or .Required is what you probably want to use to make it work as expected.
I blogged about this problem here, hope it helps.
Even after enabling the NavigationCacheMode, there's one thing which differs when compared to the Windows Phone: The cache is used when navigating back and when navigating forward. In Windows Phone a new instance is always created when navigating forward.
After enabling the NavigationCacheMode in my Windows 8 app, I'm encountering some problems with the memory usage so that's one thing you should keep track of.