How to create pop up in phone gap - android

Helo,
Is there a possibility to click on button and show a popupover and inside it there is two buttons. When i click on each of them , i have an alert.
If there isn't a possibility with a popupover is there a possibilty of any other popup window?
My Android application is developped in phonegap
Thanks a lot

Take a look at the cordova dialogue api.
https://github.com/apache/cordova-plugin-dialogs/blob/master/doc/index.md
I think you are looking for the navigator.notification.confirm feature.
Using this feature you can display a popup with multiple options for the user to tap on.
The index of the button the user taps on is returned to the confirmCallback, so you can handle the user input.

navigator.notification.confirm(message, onConfirm, [button1], [button2]);
function onConfirm(buttonIndex) {
alert('You selected button ' + buttonIndex);
}
perform operations based on buttonIndex.

Related

How to display rolling updates on Android and iOS

I have a requirement to display the different stages of a Process in a dialog box overlay on the mobile app such as "Process 1 started" "Process 1 completed" "Process 2 started" and so on until the process is completed.
Essentially, what I'm looking for is scrollable text in an overlay screen appearing as the app receives different notifications(BLE characteristics). No user interaction required. Is there an out-of-the-box dialog box control that I can use? Any other suggestions for such a display?
U can add the DialogFragment and
if(process1.isDone())
{
informationOnDialogFragment
}
if(process2.isDone())
...
But the easiest way is add ProgressDialog
U can set message to ProgressDialog
You can achieve it using simple toast or other innovative libraries like:
1. EFInternetIndicator
2. FTIndicator
You can use Progress Dialog . With progress.setCancelable(false); you can make it so the user can`t navigate away from the dialog.

Android web view "back" button to load previously loaded div

I will try to explain this as clearly as possible. I have an android app using web view to basically load a webpage as my app. I have everything working great, however the back button seems to be an issue. I have set this page up all on one html page, it will load in a div when certain buttons are clicked to give the feel of a new page without actually having one. I basically want the back button (on the android tablet or smartphone) to load the previously loaded div, but I have no idea where to start with this. Here is what the content switching jquery looks like -
function contentSwitcher(settings){
var settings = {
contentClass : '.contentToLoad',
navigationId : '#sideMenu',
servFront : '#clickHomeHome'
};
//Hide all of the content except the first one on the nav
$(settings.contentClass).not(':first').hide();
$(settings.navigationId).find('li:first').addClass('active');
//onClick set the active state,
//hide the content panels and show the correct one
$(settings.navigationId).find('a').click(function(e){
var contentToShow = $(this).attr('href');
contentToShow = $(contentToShow);
//dissable normal link behaviour
e.preventDefault();
//set the proper active class for active state css
$(settings.navigationId).find('li').removeClass('active');
$(this).parent('li').addClass('active');
//hide the old content and show the new
$(settings.contentClass).hide();
contentToShow.show("slow");
});
}
contentSwitcher();
});
note: I've cropped out a bunch of it just to show how it works on a basic level.
Does anyone have any suggestions as to where to begin. I'd just like the back button function to be able to maybe check a started previous div name stored somewhere and load that.
thanks!
You can try using the History API. There are numerous tutorials on the web e.g. this one is quite good:
http://diveintohtml5.info/history.html
Basically this is how it works. When the user clicks the link for the div to show you push the state to the history stack.
history.pushState({<object with any information about state>}, pageTitle, newUrl);
This will push the state to the history stack meaning that when the user presses the back button on any modern browser like webkit it will take that state into consideration. When back action is taken it will then pop the state from the history stack. This action you have to listen to and handle in any way you see fit:
window.addEventListener("popstate", function(event) {
// event object contains the information from the pushed state
// do whatever needed to load the previous page here
});
The History API requires you to structure your code in a certain way for it to work well. For this I would recommend to use some existing framework that handle the back events for you e.g. Backbone.js. Hope this helps.

How to display a notification box then remove it with Phonegap?

I'd like to use the native notification box with andriod, or any device you're using to popup whilst the app is trying to access the internet. Or at least when it needs to access it if its a stopper for the user.
navigator.notification.alert(
'Please wait...', // message
alertDismissed, // callback
'Signing In!', // title
);
Whilst this will open the alert, it will open with an OK button, so my question.
If I could somehow remove the ok button I still wouldn't have a way to hide away the notification.
How can you make a popup appear and then remove it when ready?
Edit
To make this very clear this is the kind of dialog I would like to use:
When this is open the user can do nothing until this has been taken away from the screen.
Use below function to Show Notification popup without 'ok' Button. it will be hide after 2 seconds.
function showPopup(text){
$.mobile.loading( 'show', {
text: text,
textVisible: true,
textonly: true,
theme: 'e',
});
window.setTimeout(function(){
$.mobile.loading('hide');
}, 2000);
}
You can call that function By:
showPopup('Please wait..');
Even if you find a way to hide the buttons, there is still an other way to close the notation: just tap anywhere else on the screen. So there will be no native-solution.
You may should create a div and set its position absolute.

The click event is made but it isn't showed in the screen

I'm making a mobile application with phonegap and jquery mobile. Everytime I select one of the menu elements I call to a WS that gives me an answer that I show in the screen. It works perfectly up to there.
As I want to have a better view so I use the code trigger ('create'). (http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html but insted of refresh I have to make an create)
var listadohtml = '<div data-role="fieldcontain"><fieldset data-role="controlgroup">';
for (var i=0;i<resultado.length;i++){
var item = '';
var id = resultado[i]['id'];
item += '<input type="checkbox" name="checkbox-'+id+'" id="checkbox-'+id+'" class="custom" />';
item += '<label for="checkbox-'+id+'">'+resultado[i]["title"]+'</label>';
listadohtml += item;
}
listadohtml += '</fieldset></div>';
$('#listaPreguntas').html(listadohtml).trigger('create');
Inmediatly after that I associate an event:
$("#listaPreguntas input[type='checkbox']").bind( "click", function(event, ui) {... some code ...});
It shows everything fine, but the problem is that sometimes (not always, that's the problem) when I click a checkbox the green tick is not shown but the event change is made. When it happens I can see, by clicking in other part of the screen, that I have clicked before because it refreshes and shows the tick.
The conclussions I have
It is not the AVD because im making all the tests in my mobile phone with android 4.0.
It appears that its something of the code that includes jquery mobile when I use de trigger.
I think it is not loading time because I can wait for years and it can happens.
As you can see its not a "logic" problem but a usability one.
Thanks in advance!
For checkbox and radio, use change event not click. And keep in mind that attaching events to dynamic elements is different, I have updated my answer accordingly.
Demo
$(document).on('change', '[type=checkbox]', function () {
// code here
});
If the event click fires every time as expected then try to set the check box checked/unchecked classes using addClass and removeClass in your code pragmatically rather than relying on the JQM.

Recent Apps on UiAutomator

I am now working with Android UiAutomator on for UI Test on my Android app. My app has a function that requires the user to verify the email to continue, so I try to do it like this: after reach to that function -> getUiDevice.pressHome -> Browser -> try to log in email -> PressHome again -> Press RecentApps then I stuck here, I cannot press on my Apps to return to it again. I try another way by clicking on my App icon but it starts my app again, not at the state before. Can anyone suggest me a solution for this? Any help is appreciate.
Thanks in advance.
Try this :
UiObject appBackground = new UiObject(new UiSelector().description("ABC"));
appBackground.click();
It did not show any description through 'uiautomatorviewer' command but this worked for me.
I could manage to create this behavior with:
fun backgroundAndForeground() {
val device = UiDevice.getInstance(getInstrumentation())
device.pressHome()
// Pressing app switch two times makes the last app put on background come to foreground.
device.pressKeyCode(KeyEvent.KEYCODE_APP_SWITCH)
device.pressKeyCode(KeyEvent.KEYCODE_APP_SWITCH)
}
In this case, I think that android only resume app when clicking the recent app image. It does not work on clicking display text or app icon. So, we need to click image of your app in recent app list. At that time you need to write as below. I always do that for similar case.
// Take all image view by class type and click by instance no.
new UiObject(new UiSelector().className("android.widget.ImageView").instance(3)).click();
You need to count instance no of your recent app image view. Not app icon image in recent app scroll view. Please try this. Thanks.
I've spent half a day on this and concluded I needed to issue a device.click(). Since my use-case is that my app was the last one running (not switching to the browser like you), I can safely click the middle of the screen and it'll always work.
If you're the 2nd to last running app, you can probably do x: 0 and y: device.displayHeight/2.
I've not tested this on many operating systems, only 9.

Categories

Resources