Develop Reference

QML mobile app with context menus

I want to create a mobile app (with possible desktop use) that uses a context menu and has as close to a native look and feel as possible for both Android and iOS. (This is my first foray into both Qt and QML.)
I figured out how to create a Menu and call myMenu.popup() to show the context menu. And in Android this context menu looks very similar to a native android context menu. This context menu also looks native on the desktop. The problem comes with iOS.
iOS has a similar concept to context menus called actionsheets. Examples. But the contextMenu looks like a windows context menu (right click menu) floating on the window.
tl;dr;
Is there a way to get the Menu in qml to look similar to iOS actionsheets when run on a iOS device? I have searched for hours today and can't find anything.
code:
The Menu code is mostly copied from the Qt docs just to see how things look and work
Menu
{
id: myContextMenu
title: "Edit"
MenuItem {
text: "Cut"
onTriggered: {console.log("cut")}
}
MenuItem {
text: "Copy"
onTriggered: {console.log("copy")}
}
MenuItem {
text: "Paste"
onTriggered: {console.log("paste")}
}
MenuSeparator { }
Menu {
title: "More Stuff"
MenuItem {
text: "Do Nothing"
}
}
}
MouseArea {
id: longPressArea
anchors.fill: text
onClicked: {
myContextMenu.popup()
}
}

Summarizing the comments above: No, not in the current version of Qt, unless you roll your own in QML.
Quick Controls uses one of [native, QWidget, QML] implementations, whichever is found first. You can read the source to see that there is no native implementation: grep for createPlatformMenu() in Qt/../Src/qtbase/src/plugins/platforms/ios. Thats where the adaptors to native widgets are.
Another answer is: you could contribute by creating the adaptor to the native widget for iOS (if you are an iOS and C++ programmer.) Also assuming that a UIActionSheet is the proper widget to adapt (it seems so.)
I suppose your concern is that a centered menu (instead of a native one that animatedly slides onto the screen like a drawer, the feel) doesn't meet the HIG (or that the style/look is wrong.) Thats a moving target. The iOS8 documentation under showInView seems to say a centered popup menu is an option (at least on iPad, its unclear whether it would work on a phone.) And its fuzzy what the store would reject.
Isn't that an intended benefit of QML: you could provide different skins for tablet and phone?

With Qt Labs, since Qt5.8, you can get native looking menus on macOS, iOS, Android and Linux (gtk+). Haven't tried it myself yet, but you can take a look:
https://doc.qt.io/qt-5.12/qml-qt-labs-platform-menu.html
You need to import Qt.labs.platform 1.1, link against widgets with QT += widgets and use a QApplication instead of QGuiApplication.
For comparison, here is also the stable menu from qml which does not try to look native.
https://doc.qt.io/qt-5.12/qml-qtquick-controls2-menu.html

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.

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.

How do I make an action bar feature from the facebook app?

This is a picture of the facebook app from the play store. I would like to copy the part that says "New Stories 10+" in my app. How do I make that? Is that part of the action bar?
I read through the action bar documentation here but couldn't find anything about it. I'm having trouble doing a google search for it too because I don't know what it's called.
Also, if you open the facebook app when you're in airplane a very similar type of message comes up that says "No Internet Connection". How is that message created?

Looking a little more deeply at the Facebook app, the bar just appears to be a LinearLayout containing two TextViews. This layout is then just embedded in the news feed fragment and hidden/shown as needed. In other words, it's not a part of the action bar; it's just a normal view within the fragment.

Check out this library by Cyril Mottier. it was designed to do exactly what you are asking for.

Yes it is part of the ActionBar but only if the device or emulator is on API 3.0 and higher. if the device or emulator has a lower API level, the actions will appear on the menu button.
This is just a dummy but it will give you a rough idea.
#Override
public boolean onCreateOptionsMenu(Menu menu) {
int groupid = 1;
menu.add(groupid, 1, 1, "Search").setIcon(R.drawable.embassy_default);
// menu.add(groupid, , ,"Back").setIcon(R.drawable.hospital_default);
menu.add(groupid, 1, 1, "Exit").setIcon(R.drawable.government_default);
return true;
}
Read more here
http://developer.android.com/guide/topics/ui/menus.html

Honeycomb 3.1 / Mono for Android persist 'LightsOut'

I developed my app using Mono for Android. I have the latest version 4.0.3. My AndroidManifest.xml specifies:
<uses-sdk android:targetSdkVersion="11" android:minSdkVersion="8" />
The app runs on tablets, so in Honeycomb I need to hide the status bar at the bottom of the screen. This is how I do that (with a simple extension method):
internal static void LightsOut(this View view)
{
try
{
IntPtr view_setSystemUiVisibility = JNIEnv.GetMethodID(view.Class.Handle, "setSystemUiVisibility", "(I)V");
JNIEnv.CallVoidMethod(view.Handle, view_setSystemUiVisibility, new JValue(1));
}
catch
{ }
}
I call this on every view that I instantiate. On my Motorola Xoom, running 3.0.1, this works great.
On my Samsung Galaxy Tab running 3.1, it works; but the status bar comes back after some short period of time. In the Android Log I see that LightsOn() is getting called...
How can I prevent the status bar from coming back in 3.1? I saw this event:
http://developer.android.com/reference/android/view/View.OnSystemUiVisibilityChangeListener.html
And thought I could use it to hide the status bar, if it comes back. But I don't see how I can subscribe to it (it doesn't show in Intellisense).

Does something specific happen before the status bar comes back, or is it solely time related? A quick search of the ICS source suggests that the status bar status will be reset when the top App Window changes. Are you calling StartActivity() or moving to another app when you see this behavior?
The View.OnSystemUiVisibilityChangeListener interface has been bound as the View.IOnSystemUiVisibilityChangeListener interface and through the View.SystemUiVisibilityChange event. However, both of these mechanisms require that your $(TargetFrameworkVersion) target Android v3.1 or later, which would set your //uses-sdk/#android:minSdkVersion attribute to 12, and is thus something you (presumably) don't want to do.
I see two plausible solutions here:
Figure out why LightsOn() is being invoked and try to work around it (call LightsOut() within every Activity.OnCreate() method?).
Provide two versions of your app, one with a minSdkVersion of 8, and one of (at least) 12, and then use Multiple APK Support to include both in your program. The device will then run the appropriate package, permitting access to the View.SystemUiVisibilityChange event.