Develop Reference

Add a settings page looking like in native app

I would like to create settings page which would look like the settings on native platform (eg. PreferenceActivity/Fragment with xml on Android).
I am used to design the settings page by creating simple preference xml on Android which handles the basic settings flawlessly, however I am unable to find the similar mechanism in Xamarin.Forms which would do the same thing for all platforms natively (with the gui part). I just only found the SettingsPlugin which handles "Create and access settings from shared code across all of your apps!".
https://github.com/jamesmontemagno/SettingsPlugin
I would really appreciate any recommendation on designing the settings pages.

You can use a TableView, which is an original Xamarin Forms User interface (without any plugin).
If you set his Intent="Settings" , you can display a nice list of configuration settings like SwitchCell, EntryCell, or a CustomCell.
Displaying these elements depend on the operating system and on the version of it. So it looks and feels different on f.e. Android 4.4 and different on Android 8.
For example:
<TableView Intent="Settings">
<TableRoot>
<TableSection Title="My settings">
<EntryCell Label="Name:" Placeholder="Enter Your First Name Here"/>
<SwitchCell Text="Show my name" On="true"/>
<SwitchCell Text="Update app automatically"/>
</TableSection>
</TableRoot>
</TableView>
Which will render something (not exactly that) like this: {source of img}

Nativescript and FontAwesome

I am trying to use icon font FontAwesome in Nativescript application, which is possible according to this article https://www.nativescript.org/blog/mobile-app-best-practices---use-font-instead-of-image-to-show-an-icon
I did everything that is described in that article:
Added .ttf in app/fonts
Added class in app.css
.fa{
font-family: "FontAwesome";
}
Used it in XML like so
text="" class="fa"
But result is rather disappointing:
I also tried the "\uf230" syntax, but that renders as plain text.
What am I doing wrong?

Could be a few things. Does it work on iOS? As your CSS definition is iOS compatible, not Android as Android needs the actual filename (without extension) whereas iOS needs the font name. So I have this to be xplatform-ready (the file is 'fontawesome-webfont.ttf'):
.fa {
font-family: 'FontAwesome', fontawesome-webfont;
}
The \f005 syntax is OK (<Label class="fa" [text]="'\uf005'"></Label>), but I'm using the splendid nativescript-ngx-fonticon plugin (there's also a non-Angular one) to be able to do this instead:
<Label class="fa" [text]="'fa-shopping-basket' | fonticon"></Label>

To make it work, you must make sure that the "fonts" directory is inside the "app" folder and that the following files exist:
font-awesome.eot
font-awesome.ttf
I opted to adopt this font as the default of my application, so I do not have to worry about where I'm going to use it and how much to enter the right class, everything is getting very good and the result is perfect.
In CSS, you only have to define a selector according to your interest for the source to be used, so just use the directive:
page {
font-family: 'FontAwesome'
}
Then where you want an icon, just use an html entity that represents it as it searches the site: http://fontawesome.io/icons/
See images:
You can see this video where I was based to start. It corrects in the video the extension used to be attentive.

Cordova backspace cannot remove image in contenteditable div

I'm using Cordova 3.6.4 in Visual Studio 2013 Community Update 4 to build an apps with a "chat" functionality, the main reason that I use this technology is because I want to, hopefully, write once and can use it in all platforms such as Android phones, iPhones, all mobile phone browsers, all desktop browsers.
In order to let the users inputting the "message" to be sent, I create a [div] which is contenteditable="true" at the bottom left of the html, at the right hand side of this [div], I have two [image buttons], one is the [happy face] button, the other is the [send button]. (You know, just like Whatsapp, Line and WeChat!)
At any time the user can click the [happy face] button to select one of the many "face image" to insert into the cursor at the [div], then I'll add the html codes into the [div], e.g. div.innerHTML += '< img src="1.jpg">'
So, the innerHTML of this [div] can contain characters AND images, e.g.
12< img src="1.jpg" />34< img src="2.jpg" />
Of course, the actual display is:
12[1st Picture]34[2nd Picture]
If the cursor is at the end of this [div], and I clicked the [BACKSPACE], I expect the [2nd Picture] will be removed, if I clicked the [BACKSPACE] again, I expect the letter [4] will be removed from the [div], this is work at ALMOST every platform I mentioned including all mobile browsers in android and iphone/ipad, all desktop browsers. But it does not work when I build an Android app and run it in any Android phone.
Running it as a WebView in android phone, when I click the the [BACKSPACE], the letter [4] is removed instead of the [2nd Picture], when I click the [BACKSPACE] again, the letter[3] is removed. I can NEVER remove the 2 images no matter which IME I'm using.
To work around, I tried to add a keyup/keydown/keypress listener to the [BACKSPACE] but it never fires.
At last, to work around this [BUG], I need to add a third [X] image button and use JavaScript string.replace to remove the < img> tag when users click this [X] button, but it looks very stupid to the users!
It makes me crazy that ALL IMEs do not remove the image for me by pressing the [BACKSPACE], and if the key events are not fired, I cannot remove the images myself!
I tried ALMOST, I think, ALL the suggestions provided by stackoverflow but they don't work at all, either not applicable to CORDOVA, or with compilation error such as [command failed with exit code 8] in Visual Studio.
What should I do?

Can't use relative paths in object tags in Cordova/Phonegap?

I noticed that I can't use relative paths in my Cordova project when referencing them in object tags. For example, this works on the browser but not in Phonegap:
<object id="pause" type="image/svg+xml" data="img/icons/pause.svg" class="icon clickable hidden"></object>
However, this functions perfectly fine in both Phonegap and the browser:
<img id="pause" src="img/icons/pause.svg">
Using a remote path also works in Cordova, but everything falls apart when I use a local/relative one. Here's what Android spits back:
<img src="file:///android_asset/webkit/android-weberror.png" align="top">
<h2>Webpage not available</h2>
<p>The webpage at file:///android_asset/www/img/logo.svg could not be loaded because:</p>
<!-- The net::ERR_FILE_NOT_FOUND is replaced by a localized error string -->
<p>net::ERR_FILE_NOT_FOUND</p>
Unfortunately, I can't use a remote location (since that won't let me execute the onclick and onmousedown events inside the SVGs). Also, avoiding <object> tags altogether is not an option, since I need to execute and change some of the code inside the objects (like changing the fill color).
Is this a bug? If not, what can I do to get my code to work?

A jacky workaround to this is reading the file manually using Javascript and putting the contents directly into the data attribute so that it reads <object data="data:image/svg+xml;utf8,[FILECONTENTS]"></object>. It's not elegant, but it works fine.

How to select any option of select tag using android web driver

I am writing test cases for a website for android device. In which I need to select an option from the drop down list of the page. But it seems that android web driver does not provide any solution regarding it.
I tried the Select API but it is not working.
Code snippet
Select loginType = new Select(this.driver.findElement(By.xpath(LOGIN_TYPE_CHOICE)));
loginType.selectByValue("smartphone");
driver.findElement(By.id(LOGIN_BUTTON)).click();
Looking for some workaround.

I'm using c# to run selenium tests against android, firefox Chrome and IE and I enounterd the same problem with the android driver.
This worked for me : (it should work in java if you refactor the code according to the Java conventions)
string jsToBeExecuted="document.getElementById('<insert dropdown Id here>').selectedIndex=<insert index here>";
IJavaScriptExecutor jsExecutor = (IJavaScriptExecutor)this.Driver;
jsExecutor.ExecuteScript(jsToBeExecuted);
Note that no changes will be rendered on screen ! ! !
Upon submitting the element with the selected index will be used.
It is up to you if you want to add some tweaks to it to select the elements by text or whatever you like.

I have the following assumption from my expirience of automation web applications with selenium.
as I know selenium is uncapable of interacting direcrly with dropdown options as they considered to be invisible (inactive).
The way it always works - is to use js for this.
First of all locate element properly with css selector properly and verify it with firepath (addon to firebug in ffox)
So you got css sselector:
String css=....;
public void jsClickByCss(String cssLocator){
JavascriptExecutor js = (JavascriptExecutor) driver;
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("var x = $(\'"+cssLocator+"\');");
stringBuilder.append("x.click();");
js.executeScript(stringBuilder.toString());
}
jsClickByCss(css);
You can also try another approach using Builder, advanced user interactions API:
The idea is quite simple. First of all you should make dropdown roll down so element you want to click on become visible , wait with driver.manage.timeout and then select needed dropdown element and click.
WebElement mnuElement;
WebElement submnuElement;
mnEle = driver.findElement(By.Id("mnEle")).click();
sbEle = driver.findElement(By.Id("sbEle")).click();
Actions builder = new Actions(driver);
// Move cursor to the Main Menu Element
builder.MoveToElement(mnEle).perform();
// Giving 5 Secs for submenu to be displayed
Thread.sleep(5000L);
// Clicking on the Hidden SubMenu
driver.findElement(By.Id("sbEle")).click();
You can read some additional info here
Hope this works for you)

here is solution for Ruby:
To select value from list needs to execute javascript, here is example:
HTML:
<select id="select_id">
<option id="option_id_1" value="value_1" name="OPTION1"> OPTION1 </option>
<option id="option_id_2" value="value_2" name="OPTION2"> OPTION2 </option>
Updated:
much easier way:
$('#select_id').val(value_1)
Code:
find elements by id attribute:
browser.execute_script("$('#select_id').val($('#option_id_1').val())")
find elements by name attribute:
browser.execute_script("$('#select_id').val($('option[name=OPTION2]').val())")
Works perfectly for me.