Xamarin Forms Rounded SearchHandler - xamarin.forms

I am testing new Shell Page in Xamarin Forms.
I am wondering if the search handler could be personalize, for example apply a rounded effect on search corner.
I tried to redefine the Template of SearchHandler but it just change the appearance of the result request of Search Handler (How suggestion are show to user).
Thanks so much for your help !

I am back after severals test.
I find one way to do it easily.
For Top Navigation Bar in Shell App, there is a "Shell.TitleView" tag.
You can inside this tag define a personalize template.
So i deleted the "SearchHandler" and implement inside "Shell.TitleView" a Custom SearchBar with Rounded Corner.
It works pretty fine.
I can give you sample if needed.
If you know another way to do it, i will be a pleasure to test it.
Thanks

I think it's impossible to implement the Rounded SearchHandler if using SearchHandler in Shell Application .
First , about SearchHandler appearance , there is no way to change the Round of it :
BackgroundColor, of type Color, is the color of the background to the search box text.
CancelButtonColor, of type Color, is the color of the cancel button.
CharacterSpacing, of type double, is the spacing between characters of the SearchHandler text.
FontAttributes, of type FontAttributes, indicates if the search box text is italic or bold.
FontFamily, of type string, is the font family used for the search box text.
FontSize, of type double, is the size of the search box text.
HorizontalTextAlignment, of type TextAlignment, is the horizontal alignment of the search box text.
PlaceholderColor, of type Color, is the color of the placeholder search box text.
TextColor, of type Color, is the color of the search box text.
VerticalTextAlignment, of type TextAlignment, is the vertical alignment of the search box text.
Second , if using Shell Custom Renderers also can not found SearchBar in NavigationController .
For example in iOS shell renderer :
public class CustomNavBarAppearanceTracker : IShellNavBarAppearanceTracker
{
public void Dispose()
{
//throw new NotImplementedException();
}
public void ResetAppearance(UINavigationController controller)
{
//throw new NotImplementedException();
}
public void SetAppearance(UINavigationController controller, ShellAppearance appearance)
{
//throw new NotImplementedException();
//var seabar = controller.SearchDisplayController.SearchBar;
controller.NavigationBar.BackgroundColor = UIColor.Red;
Console.WriteLine("-----"+controller.NavigationItem.SearchController.SearchBar);
}
public void UpdateLayout(UINavigationController controller)
{
//throw new NotImplementedException();
}
}
The Output is : controller.NavigationItem.SearchController.SearchBar = null
If not using SearchHandler , you can have a try with Custom SearchBar Renderer to implement it .

Related

How do I create a JavaFX Alert with a check box for "Do not ask again"?

I would like to use the standard JavaFX Alert class for a confirmation dialog that includes a check box for "Do not ask again". Is this possible, or do I have to create a custom Dialog from scratch?
I tried using the DialogPane.setExpandableContent() method, but that's not really what I want - this adds a Hide/Show button in the button bar, and the check box appears in the main body of the dialog, whereas I want the check box to appear in the button bar.
Yes, it is possible, with a little bit of work. You can override DialogPane.createDetailsButton() to return any node you want in place of the Hide/Show button. The trick is that you need to reconstruct the Alert after that, because you will have got rid of the standard contents created by the Alert. You also need to fool the DialogPane into thinking there is expanded content so that it shows your checkbox. Here's an example of a factory method to create an Alert with an opt-out check box. The text and action of the check box are customizable.
public static Alert createAlertWithOptOut(AlertType type, String title, String headerText,
String message, String optOutMessage, Consumer<Boolean> optOutAction,
ButtonType... buttonTypes) {
Alert alert = new Alert(type);
// Need to force the alert to layout in order to grab the graphic,
// as we are replacing the dialog pane with a custom pane
alert.getDialogPane().applyCss();
Node graphic = alert.getDialogPane().getGraphic();
// Create a new dialog pane that has a checkbox instead of the hide/show details button
// Use the supplied callback for the action of the checkbox
alert.setDialogPane(new DialogPane() {
#Override
protected Node createDetailsButton() {
CheckBox optOut = new CheckBox();
optOut.setText(optOutMessage);
optOut.setOnAction(e -> optOutAction.accept(optOut.isSelected()));
return optOut;
}
});
alert.getDialogPane().getButtonTypes().addAll(buttonTypes);
alert.getDialogPane().setContentText(message);
// Fool the dialog into thinking there is some expandable content
// a Group won't take up any space if it has no children
alert.getDialogPane().setExpandableContent(new Group());
alert.getDialogPane().setExpanded(true);
// Reset the dialog graphic using the default style
alert.getDialogPane().setGraphic(graphic);
alert.setTitle(title);
alert.setHeaderText(headerText);
return alert;
}
And here is an example of the factory method being used, where prefs is some preference store that saves the user's choice
Alert alert = createAlertWithOptOut(AlertType.CONFIRMATION, "Exit", null,
"Are you sure you wish to exit?", "Do not ask again",
param -> prefs.put(KEY_AUTO_EXIT, param ? "Always" : "Never"), ButtonType.YES, ButtonType.NO);
if (alert.showAndWait().filter(t -> t == ButtonType.YES).isPresent()) {
System.exit();
}
And here's what the dialog looks like:

How to use the Vaadin Testbench with Rich Text Area?

I am using Vaadin Testbench (4.1.0-alpha) for designing some integration test for my application (designed in Vaadin 7.6.1).
In a window, I use a rich test area. The idea is to design a test where the value of this rich text element is changed simulating some user behaviour. But now I realize I cannot find any method for change the value of this element, neither get the current value of the element.
I have tested some methods.getHTML() gets the HTML for the component, no the HTML of the designer. getText() gets the list of elements (font colour, background and other options of the element, but not the content).
Then I expect to have specific class methods for retrieving the value. If I explore the class RichTextAreaElement, seems that no method is implemented. All code in this class is:
#ServerClass("com.vaadin.ui.RichTextArea")
public class RichTextAreaElement extends AbstractFieldElement {
}
As you can see, no method is declared.
How can I do a test where a user change the value of this rich text area? It is not implemented?
Hmm yeah, that looks like some work in progress, probably because it's a complex component with all the features it provides. Nonetheless we can workaround the limitations a bit, again making use of chrome developer tools (or similar) and some custom classes to select the components by (actually it's just the gwt-RichTextArea).
Of course this serves just as a starting point and can be further enhanced. Also I'd be very interested to see a more elegant solution if someone finds one...
Structure inspection
Test class
public class RichTextAreaTest extends TestBenchTestCase {
#Before
public void setUp() throws Exception {
System.setProperty("webdriver.chrome.driver", "D:\\Kit\\chromedriver_win32\\chromedriver.exe");
setDriver(new ChromeDriver());
}
#After
public void tearDown() throws Exception {
// TODO uncomment below once everything works as expected
//getDriver().quit();
}
#Test
public void shouldModifyRichTextArea() throws InterruptedException {
// class to identify the editor area by
String editorClass = "gwt-RichTextArea";
// open the browser
getDriver().get("http://localhost:8080/");
// select the first rich text
RichTextAreaElement richTextArea = $(RichTextAreaElement.class).first();
// get the editor section which is where we're writing
WebElement richTextEditorArea = richTextArea.findElement(By.className(editorClass));
// click inside to make it "editable"
richTextEditorArea.click();
// send some keystrokes
richTextEditorArea.sendKeys(" + something else added by selenium");
}
}
Result:
Update for getting the value
If you simply want to get the text, the code below will do the trick:
// switch to the editor iframe
getDriver().switchTo().frame(richTextEditorArea);
// get the <body> section where the text is inserted, and print its text
System.out.println("Text =[" + findElement(By.xpath("/html/body")).getText() + "]");
Output
Text =[Some predefined text + something else added by selenium]
At the end, I was able to obtain the content of the element selecting the first iframe of the page, and searching for the body content. The final code looks like:
String currentWindow = getDriver().getWindowHandle();
getDriver().switchTo().frame(getDriver().findElement(By.tagName("iframe")));
WebElement webelement = this.findElement(By.xpath("/html/body"));
String text = webelement.getText();
getDriver().switchTo().window(currentWindow);
return text;
As I need to switch between the iframe and the window, I am only able to obtain the content of the element, not the element itself. If I return directly the element for future use, an org.openqa.selenium.StaleElementReferenceException: Element belongs to a different frame than the current one - switch to its containing frame to use it exception is obtained.
For changing the text, the solutions is very similar, only use the sendKey functions to first remove existing characters and later add the new text:
String currentWindow = getDriver().getWindowHandle();
getDriver().switchTo().frame(getDriver().findElement(By.tagName("iframe")));
WebElement webelement = this.findElement(By.xpath("/html/body"));
// Remove any previous text.
String previousText = webelement.getText();
for (int i = 0; i < previousText.length(); i++) {
webelement.sendKeys(Keys.DELETE);
}
// Set text.
webelement.sendKeys(text);
getDriver().switchTo().window(currentWindow);

Manually Open custom inspector for serializable object

I have a window editor that holds nodes. I would like to open a custom inspector when one of these nodes is selected. The node class is a custom serializable class. Is this possible?.
It seems that custom inspectors can be created manually through the Editor.CreateEditor method but can't see how to let it appear docked like an usual inspector in the unity inspector window.
I would like to achieve the same behaviour that we have when we select a gameobject in sceneview that inmediately show properties for the object (Components, etc...) in the unity inspector.
Cheers
As I'm not sure what you're asking, here are multiple different solutions;
Selection
If you just want your nodes to become the focus of the hierarchy, then in your custom window's OnGUI method, use the code below;
[CustomEditor(typeof(NodeManager))]
public class NodeManager : EditorWindow
{
private static NodeManager window;
private Node[] m_nodes;
[MenuItem("Custom Windows/Node Inspector")]
public static void Init()
{
if(window == null)
window = GetWindow<NodeManager>("Node Manager", true, typeof(SceneView));
}
public void OnGUI()
{
m_nodes = GameObject.FindObjectsOfType<Node>();
foreach(Node node in m_nodes)
{
GUILayout.BeginHorizontal();
{
GUILayout.Label(node.name);
if (GUILayout.Button("Select"))
Selection.objects = new Object[] { node.gameObject };
}
GUILayout.EndHorizontal();
}
}
}
This adds a Button for each object in your custom window view, that will then select that object in the hierarchy.
Auto-Docking
I originally found the second response to this question, which goes into the details of parameters of the GetWindow method, and with this you can clearly see how to dock the window (I've converted it from JS to C# below).
(I looked fairly extensively in UnityEditor and UnityEditorInternal namespaces but couldn't find the Hierarchy or the Inspector).
GetWindow<T>(string title, bool focus, params System.Type[] desiredDockNextTo)
Which we can write for this example as;
EditorWindow.GetWindow<NodeInspector>("Node Test", true, typeof(SceneView));
This example docks the windows next to the SceneView window. This functionality can be combined with a custom inspector's OnInspectorGUI method, to automatically launch the custom node window, if it's not already open.
[CustomEditor(typeof(Node))]
public class NodeInspector : Editor
{
public override void OnInspectorGUI()
{
base.OnInspectorGUI();
NodeManager.Init();
}
}
Sorry if this isn't what you are looking for, if it's not then please give more details and I will amend my answer to better suit the question.
Hope this helped.
Has a possibility, you can make a custom ScriptableObject and Custom Editor for It, and when open the node inspector, just find a instance of the scriptable object and use Selection.selectedObject = scriptableObject, and in the custom editor, make a static field called 'editor' to draw inside.
It will work.

android tv -Reference of search image in browse fragment

I have a scenario where I need to set focus dynamically on search icon in browse fragment .For that I need to get reference of the search icon.Any idea how it can be done.
Thanks
BrowseFragment class accesses search icon using title view's getSearchAffordanceView()
private final BrowseFrameLayout.OnFocusSearchListener mOnFocusSearchListener =
new BrowseFrameLayout.OnFocusSearchListener() {
#Override
public View onFocusSearch(View focused, int direction) {
// If headers fragment is disabled, just return null.
if (!mCanShowHeaders) return null;
final View searchOrbView = mTitleView.getSearchAffordanceView();
.
.
.
Since mTitleView is BrowseFragment's private member, you cannot get search icon reference directly. The only properties you can control for search affordance in the fragment title are: visibility and color. Visibility is controlled by the presence of a search listener.

Applying Css Style to Asp:Menu MenuItem

I'm essentially creating a vertical breadcrumb to create a website navigation for a mobile (iphone) website. Similar to maybe how http://news.bbc.co.uk/sport1/hi/football/default.stm works as you click into "Premier League"
Using the Asp:Menu control and a SiteMapDataSource I am binding only the current levels links within the sitemap and then finding their parent to manually insert at the top of the list. An example resulting nav would be:
About,
Who Are We,
What We Do,
Locations
var mi = new MenuItem();
mi.NavigateUrl = node.Url;
mi.Text = node.Title;
mi.ToolTip = node.Description;
MobileMenu.Items.AddAt(0, mi);
This is all fine and works perfectly. However, this dynamically inserted top MenuItem needs to be styled in a different background colour. In the example above "About" would have a darker bg colour than the 3 items below it.
But there isn't any kind of obvious property on the MenuItem to do this.
How could I dynamically set a style on the MenuItem that I am inserting into position 0?
In answer to this I used the jQuery li:nth-child() method to set a class to the li after which I then use Page.ClientScript.RegisterStartupScript().
private const string HighlightScript =
"<script language=\"javascript\">\n" +
"$(\"ul.top li:nth-child(4)\").addClass(\"menu-Fourth\");" +
"</script>";
public void AddHighlightScript(string script, string name)
{
Page.ClientScript.RegisterStartupScript(GetType(), name, script);
}
If someone else has a solution please share.

Resources