Custom message boxes in WP7 - windows-phone-7

I really like the look/behavior of window created by MessageBox.Show. How can I create one from scratch so that I can add other stuff like a textbox?

There's a good article here on creating your own version, which is now on CodePlex. There various customizable MessageBoxes in the Coding4Fun toolkit. If you want to do it all on your own, this guide might help as well.

Instead of using a MessageBox, you could try using a Popup.
But, you'll have to manually disable the contols on the screen when the popup is open (MessageBox does this automatically for you). Also, you'll have to override the back button behaviour so that back button closes the Popup if it is open. This is also automatically done by a MessageBox.

In Mix11, Laurent Bugnion talked about Mvvm. In hist samples, there is a sample including the implement of Custom MessageBox. u can download the sourcecode from here and check the "03 JsonDemo - WP7 DialogService " sample.
Hope this help u.

Take a look at this custom implementation. Looks and behaves just like the out of the box MessageBox and is easy to use. I've used it in two of my phone apps.

Add references to Microsoft.Xna.Framework and Microsoft.Xna.Framework.GamerServices and then you can do the following:
Guide.BeginShowMessageBox("Title",
"Text",
new List<String> { "Answer 1", "Answer 2" },
0, // Focus button
MessageBoxIcon.Alert,
asyncResult =>
{
int? response = Guide.EndShowMessageBox(asyncResult);
if(response == null)
{
// Back button pressed
}
else if(response == 0)
{
// "Answer 1" pressed
}
else if(response == 1)
{
// "Answer 2" pressed
}
},
null);
I have tested this with Windows Phone 7 and it appears to work.

Related

Nativescript Android - hide keyboard

In my Nativescript app, the application starts with the login page. On iOS everything looks good, but on android, the username field is focused and the keyboard is showing. Is there a way to prevent this from happening?
So far I have tried:
Getting a reference of another element (a label) and calling lbl.focus() in the page's onLoaded event
getting a reference of the username textfield and calling txt.dismissSoftInput() and txt.android.clearFocus()
None of this worked. Is there another way to hide the keyboard when the page is loaded?
Thank you
I guess the username field is either textview or textfield. If so, try this on loaded callback:
var myTextview = page.getViewById("myTextView");
myTextView.dismissSoftInput();
So I ended up implementing a different solution. This may not be the best approach, but it serves its purpose in my case and I wanted to share it for those of you that face a similar scenario.
in page's loaded event I included this code:
if (page.android) {
var un = page.getViewById('username');
var p = page.getViewById('password');
un.android.setFocusable(false);
p.android.setFocusable(false);
setTimeout(function () {
un.android.setFocusableInTouchMode(true);
p.android.setFocusableInTouchMode(true);
}, 300);
}
The key here is the setTimeout function (Thanks Emil Oberg for pointing me to the right direction). As far as I understand, here is what is happening:
The page loads and we call setFocusable(false) on the only 2 text fields to prevent Android from setting the focus on them
Then we wait 300ms to allow Android to do its initialization
When the timeout executes, call setFocusableInTouchMode(true) to allow the fields to gain focus.
At this point the page is loaded without any fields to be in focus and with the keyboard hidden. If the user taps any of the fields the keyboard will appear and they can proceed to log in as usual.
As I mentioned, this may not be the best, or correct, approach, but works for me. Hope this can save someone the time to research the issue.
You want to clear the focus of the field in the loaded callback:
var searchBar = page.getViewById('my-search-bar-id');
if (searchBar.android) {
searchBar.android.clearFocus();
}
What about combining both tips above?
onClear(args) {
const searchBar = <SearchBar>args.object;
if (isAndroid && searchBar.android != undefined){//avoid random unpleasant error
setTimeout(() => { // the key here was this timeout
searchBar.android.clearFocus();
}, 1)
}
}

How to change the message box button content according to the language selected by user in windows phone 8

I'm developing windows phone 8 application and this application should work in two languages English and Arabic.
In some screens I'm showing the message box with some message and buttons(OK, CANCEL).
When the application is in English the buttons content (OK and CANCEL) is displaying in English. It is fine.
But when the application is running in Arabic language, then the Buttons content is not displaying in Arabic.It is showing in English only
How should I change the buttons content based on the language.
Thanks
You should use Windows Phone toolkit CustomMessageBox control.
It can be easily localized:
CustomMessageBox messageBox = new CustomMessageBox()
{
Caption = "Do you like this sample?",
Message = "There are tons of things you can do using custom message boxes. To learn more, be sure to check out the source code at Codeplex.",
LeftButtonContent = "yes",
RightButtonContent = "no",
IsFullScreen = (bool)FullScreenCheckBox.IsChecked
};
In Windows Phone 8, you have access to Microsoft.Xna.Framework.GameServices which has a much more versatile message box you can use and no need to download a separate library.
IAsyncResult result = Microsoft.Xna.Framework.GamerServices.Guide.BeginShowMessageBox(
AppResources.SmsConfirmText,
"",
new string[] { AppResources.OkText, AppResources.CancelText },
0,
Microsoft.Xna.Framework.GamerServices.MessageBoxIcon.None,
null,
null);
// Include following line if you want it to be synchronous
result.AsyncWaitHandle.WaitOne();
int? choice = Microsoft.Xna.Framework.GamerServices.Guide.EndShowMessageBox(result);
if(choice.HasValue)
{
if(choice.Value==0)
{
// User clicked on the first button: AppResources.OkText
}
else if(choice.Value==1)
{
// User clicked on the second button: AppResources.CancelText
}
}
Source: http://developer.nokia.com/community/wiki/Advanced_MessageBox_for_Windows_Phone

Force context menu to appear for form inputs

I'm trying to develop a ff addon that allows a user to right-click on a form element and perform a task associated with it.
Unfortunately somebody decided that the context menu shouldn't appear for form inputs in ff and despite long discussions https://bugzilla.mozilla.org/show_bug.cgi?id=433168, they still don't appear for checkboxes, radios or selects.
I did find this: https://developer.mozilla.org/en-US/docs/Offering_a_context_menu_for_form_controls but I cannot think how to translate the code to work with the new add-on SDK.
I tried dumping the javascript shown into a content script and also via the observer-service but to no avail.
I also cannot find the source for the recommended extension https://addons.mozilla.org/en-US/firefox/addon/form-control-context-menu/ which considering it was 'created specifically to demonstrate how to do this' is pretty frustrating.
This seems like very basic addon functionality, any help or links to easier documentation would be greatly appreciated.
** UPDATE **
I have added the following code in a file, required from main, that seems to do the trick.
var {WindowTracker} = require("window-utils");
var tracker = WindowTracker({
onTrack: function(window){
if (window.location.href == "chrome://browser/content/browser.xul") {
// This is a browser window, replace
// window.nsContextMenu.prototype.setTarget function
window.setTargetOriginal = window.nsContextMenu.prototype.setTarget;
window.nsContextMenu.prototype.setTarget = function(aNode, aRangeParent, aRangeOffset) {
window.setTargetOriginal.apply(this, arguments);
this.shouldDisplay = true;
};
};
}
, onUntrack: function(window) {
if (window.location.href == "chrome://browser/content/browser.xul") {
// In case we were called because the extension is uninstalled - restore
// original window.nsContextMenu.prototype.setTarget function
window.nsContextMenu.prototype.setTarget = window.setTargetOriginal;
};
}
});
Unfortunately this still does not bring up a context menu for disabled inputs, but this is not a show-stopper for me.
Many Thanks
The important piece of code in this extension can be seen here. It is very simple - it replaces nsContextMenu.prototype.setTarget function in each browser window and makes sure that it sets shouldDisplay flag for form controls.
The only problem translating this to Add-on SDK is that the high-level modules don't give you direct access to browser windows. You have to use the deprecated window-utils module. Something like this should work:
var {WindowTracker} = require("sdk/deprecated/window-utils");
var tracker = WindowTracker({
onTrack: function(window)
{
if (window.location.href == "chrome://browser/content/browser.xul")
{
// This is a browser window, replace
// window.nsContextMenu.prototype.setTarget function
}
},
onUntrack: function(window)
{
if (window.location.href == "chrome://browser/content/browser.xul")
{
// In case we were called because the extension is uninstalled - restore
// original window.nsContextMenu.prototype.setTarget function
}
}
});
Note that WindowTracker is supposed to be replaced in some future SDK version. Also, for reference: nsContextMenu implementation

Dojo: Dialog refreshing a dojox.layout.ContentPane in a TabContainer

I have a problem with Dojo in Internet explorer 7/8 (this works fine in Firefox).
Basically I have a tab container with a number of tabs in it (these are dojox.layout.ContentPane's). On one of these tabs I want to have a "comments box" which would popup a dialog and ask the user to put something in. The comment is then saved by an call to the back end and I want the tab to reload to show the new comment.
The logic of my save button works something like this:
<button data-dojo-type="dijit.form.Button" type="button" data-dojo-props="iconClass:'dijitIcon dijitIconSave', showLabel: true" title="Add your comment">Add Comment
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom)
{
var tText = dijit.byId('comment_70').get('value');
if (tText == '')
{
alert('You have not entered any comment');
return;
}
var tJSONRPC = new JSONRpcClient('JSON-RPC');
try
{
tJSONRPC.be.addComment('70', tText);
var tTab = dijit.byId('Detail_70');
tTab.refresh();
}
catch (Ex)
{
alert(Ex);
}
});
</script></button>
Does not appear to be terrible taxing (the 70 at the end is the ID so that the user can have more than one of these open at the same time, hence the tabs).
As mentioned this works fine in Firefox but not in IE 8/7, it throws an error in some of the generated code within dojo (_32.focus(); to be precise), the error message I get in the debug console is "Unexpected call to method or property access"
Try this, with your line tTab.refresh();:
setTimeout(function() { tTab.refresh(); }, 0); // whenIdle
Its nearly impossible to tell where the thrown exception comes from - you should use the developement dojo-1.M.m-src/dojo/dojo.js code so optimized function- and variable-names are expanded (along with useful commenting once you step-through-debug).
Reason for the above is to eliminate, that exception occurs while handling button onclick-focus event (refresh will tear down DOM in the tab - along with your button)

jQuery click event behaves differently with live function in Firefox

Using the event click with live function leads to strange behavior when using Firefox*.
With live in Firefox, click is triggered when right-clicking also! The same does not happen in Internet Explorer 7 neither in Google Chrome.
Example:
Without live, go to demo and try right clicking
the paragraphs. A dialog menu should
appear.
With live, go to demo and try right
clicking "Click me!". Now both dialog
menu and "Another paragraph" appear.
*tested with firefox 3.5.3
As far as I know, that is a known issue (bug?). You can easily work around it by testing which button was clicked as follows:
$('a.foo').live("click", function(e) {
if (e.button == 0) { // 0 = left, 1 = middle, 2 = right
//left button was clicked
} else {
//other button was clicked (do nothing?)
//return false or e.preventDefault()
}
});
you might prefer using a switch depending on your specific requirements, but generally you would probably just want to do nothing (or or simply return) if any button other than the left button is clicked, as above:
$('a.foo').live("click", function(e) {
switch(e.button) {
case 0 : alert('Left button was clicked');break;
default: return false;
}
});
I think it's a known "bug", you could potentially query the event object after attaching the click handler ( which gets attached to the document ) and see if its a right click, otherwise manually attach the click handler after you manipulate the DOM.
After looking it up, e.button is the property you want to query:
.live('click', function(e){
if ( e.button == 2 ) return false; // exit if right clicking
// normal action
});
See my answer here: if you don't mind changing the jQuery source a bit, adding a single line in the liveHandler() works around the problem entirely.

Resources