Switch tabs inside tab in tabpane TornadoFX - tornadofx

I have
root= tabpane {
tab(FirstView::class)
tab(SecondView::class)
}
And I would like in my FirstView switch tab after I click a button. I can't figure out how to do it. Thank you.

Like this for example:
private lateinit var tabPane: TabPane
private lateinit var tabFront: Tab
root = tabpane {
tabPane=this
tab { tabFront = this}
tab { }
}
...
button("go front tab") {
action {
tabPane.selectionModel.select(tabFront)
}
}
button("another go front tab") {
action {
tabFront.select()
}
}
Look for JavaFX getSelectionModel()

Related

Tornadofx: Trying to reload/refresh MainView

I've only really just started on Tornadofx and was having a bit of trouble trying to figure out how to reload a view so the controls in that view are refreshed.
Below is a simplified version of the code I'm working with. I've got a loop to generate radio-button controls based on strings in a list.
class MainView: View("MainView") {
override val root = vbox {
for(x in radioText) {
radiobutton(x, radioGroup) {
action {
radioSelected = this#radiobutton.text
}
}
}
button("Next") {
action {
// Reload View to update radiobuttons with new values
}
}
}
}
In the program I need to go through several sets of these radio buttons, and so the idea was that each time the user presses the "Next" button, the items in the radioText list would be updated to match the next set of radio-buttons. Then I was looking for a way to get the view to update with these new values.
I tried using openWindow() to open a new instance of the view, but then when I used close() to get rid of the previous instance and ended up closing both windows.
button("Next") {
action {
MainView().openWindow()
close()
}
}
Any help with this would be much appreciated,
Thanks.
If I understood correctly, you are trying to have a list of string and generate radiobuttons with it. So, by adding the variables to your example, would be something like this:
class MainView: View("MainView") {
val radioText = ArrayList<String>()
var radioGroup : ToggleGroup by singleAssign()
lateinit var radioSelected : String
override val root = vbox {
radioText.addAll(arrayListOf("One","Two","Three","Four"))
radioGroup = togglegroup(){}
for(x in radioText) {
radiobutton(x,radioGroup) {
action {
radioSelected = text //You don't need this#radiobutton.text
}
}
}
button("Next") {
action {
// Reload View to update radiobuttons with new values
}
}
}
}
I thing is a better idea having your radiobutton created by a listview, wich would be updated by a observable list of string, like I do bellow:
class MainView2: View("MainView") {
// this is a list of observable string, so when the items on his list change
// the listview is updated
val radioText = FXCollections.observableArrayList<String>()
var radioGroup : ToggleGroup by singleAssign()
lateinit var radioSelected : String
override val root = vbox() {
prefWidth = 200.0
prefHeight = 300.0
radioText.setAll("One","Two","Three","Four")
radioGroup = togglegroup(){}
listview<String>(radioText){
// Setting listview height dinamically
fixedCellSize = 25.0
prefHeightProperty().bind(radioText.sizeProperty.multiply(fixedCellSizeProperty().add(2)))
// Generating the radiobutton acording to strings on radioText
cellFormat {
graphic = cache(it){
radiobutton(it,radioGroup){
action {
radioSelected = text
}
}
}
}
}
button("Next") {
action {
radioText.clear()
radioText.setAll("Five","Six","Seven","Eight","Nine","Ten")
}
}
}
}
Please let me know if there is something you don't understand on my aproach.

Webview OnProgressChanged and progressbar

In a Xamarin application I have a CustomWebView renderer; I'm injecting in the view and displaying a progressbar in OnProgressChanged event of the WebChromeClient with the following code.
Init:
var progressBar = new Android.Widget.ProgressBar(_context, null, Android.Resource.Attribute.ProgressBarStyleHorizontal);
Control.SetWebViewClient(new CusWebViewClient($"javascript: {JavascriptFunction}"));
Control.SetWebChromeClient(new CusWebChromeClient(progressBar));
Control.AddView(progressBar);
CusWebChromeClient:
public class CusWebChromeClient : WebChromeClient
{
Android.Widget.ProgressBar progressBar;
public CusWebChromeClient(Android.Widget.ProgressBar progressBar)
{
this.progressBar = progressBar;
}
public override void OnProgressChanged(Android.Webkit.WebView view, int newProgress)
{
if (newProgress < 100 && progressBar.Visibility == ViewStates.Gone)
{
progressBar.Visibility = ViewStates.Visible;
}
progressBar.SetProgress(newProgress, true);
if (newProgress == 100)
{
//progressBar.Visibility = ViewStates.Gone;
}
}
}
The issue is that the progress bar is displayed really small like:
I need to display it with full display width and with a more heigth.
You forgot to set the width of progress bar.
You could use the screen width to set the progress bar in custom renderer. After that, it would be okay.
var width = (int)Application.Current.MainPage.Width;
Please note, 'Application' is an ambiguous reference between 'Android.App.Application' and 'Xamarin.Forms.Application'. You could add reference like below to fix it.
using Application = Xamarin.Forms.Application;
Change:
Control.AddView(progressBar);
To:
Control.AddView(progressBar, width, 30);

Xamarin Tabbed Page not showing Content

trying to learn more about Tabbed Pages with i've built a very simple App containing three content Pages with a code like this:
public class Page1 : ContentPage
{
public Page1()
{
Content = new StackLayout
{
Children = {
new Label { Text = "Hello Page1" }
}
};
}
protected override void OnAppearing()
{
base.OnAppearing();
System.Diagnostics.Debug.WriteLine("Page 1 On Appearing");
}
protected override void OnDisappearing()
{
base.OnDisappearing();
System.Diagnostics.Debug.WriteLine("Page 1 Disappearing");
}
}
The Main Page looks like this:
public class MainPage : TabbedPage
{
public MainPage()
{
var page1 = new Page1();
page1.Title = "Page1";
var page2 = new Page2();
page2.Title = "Page2";
var page3 = new Page3();
page3.Title = "Page3";
Children.Add(page1);
Children.Add(page2);
Children.Add(page3);
}
}
Now when i click on a new tab, the OnDisappearing() method of the old tab is called, as well as the OnAppearing() method of new tab, BUT the content of the new page is not shown. It remains the content of the old page.
To show the content of the new page i have to click again on the tab.
Does anybody has experienced this kind of behaviour?
Best regards,
Marco

In a TabbedPage, how can I push another Page over the current subpage?

(Complete code example is available here:
https://github.com/csvan/TabbedPageModalDemo)
I have the following page structure in my Xamarin.Forms app:
namespace TabbedPageModalDemo
{
public class MyTabbedPage : TabbedPage
{
public MyTabbedPage ()
{
Title = "Tabbed Page";
Children.Add (new MyTabPage ());
}
}
}
namespace TabbedPageModalDemo
{
public class MyTabPage : ContentPage
{
public MyTabPage ()
{
Title = "Tab Page";
var button = new Button {
Text = "Open Modal"
};
// Using PushModal as an example - PushAsync also fills the whole screen.
button.Clicked += (sender, e) => Navigation.PushModalAsync (new MyModalPage ());
var stack = new StackLayout ();
stack.Children.Add (button);
Content = stack;
}
}
}
namespace TabbedPageModalDemo
{
public class MyModalPage : ContentPage
{
public MyModalPage ()
{
Title = "Modal Page";
var label = new Label {
Text = "I am a modal page!"
};
var stack = new StackLayout ();
stack.Children.Add (label);
Content = stack;
}
}
}
What I want is the following: when I press the button, I would like MyModalPage to only take up the same space that is occupied by MyTabPage. Currently, it fills the entire screen, covering MyTabbedPage as well. Note that the same happens if I use PushAsync instead.
How can I resolve this?
Did you try used padding inside your current modal page?
Padding = new Thickness(0,30,0,0);
I think the better approach would be to use NavigationPages instead of a ContentPage as your Child-Elements. A good example can be seen here.

How can I create a drawer / slider menu with Xamarin.Forms?

How do I create an a slider menu using Xamarin.Forms? Is it baked in or something custom?
You create a new class which contains all the definitions for both the Master - i.e. the menu - and the Detail - i.e. the main page. I know, it sounds back-to-front, but for example..
using System;
using Xamarin.Forms;
namespace testXamForms
{
public class HomePage : MasterDetailPage
{
public HomePage()
{
// Set up the Master, i.e. the Menu
Label header = new Label
{
Text = "MENU",
Font = Font.BoldSystemFontOfSize(20),
HorizontalOptions = LayoutOptions.Center
};
// create an array of the Page names
string[] myPageNames = {
“Main”,
“Page 2”,
“Page 3”,
};
// Create ListView for the Master page.
ListView listView = new ListView
{
ItemsSource = myPageNames,
};
// The Master page is actually the Menu page for us
this.Master = new ContentPage
{
Title = "The Title is required.",
Content = new StackLayout
{
Children =
{
header,
listView
},
}
};
// Define a selected handler for the ListView contained in the Master (ie Menu) Page.
listView.ItemSelected += (sender, args) =>
{
// Set the BindingContext of the detail page.
this.Detail.BindingContext = args.SelectedItem;
Console.WriteLine("The args.SelectedItem is
{0}",args.SelectedItem);
// This is where you would put your “go to one of the selected pages”
// Show the detail page.
this.IsPresented = false;
};
// Set up the Detail, i.e the Home or Main page.
Label myHomeHeader = new Label
{
Text = "Home Page",
HorizontalOptions = LayoutOptions.Center
};
string[] homePageItems = { “Alpha”, “Beta”, “Gamma” };
ListView myHomeView = new ListView {
ItemsSource = homePageItems,
};
var myHomePage = new ContentPage();
myHomePage.Content = new StackLayout
{
Children =
{
myHomeHeader,
myHomeView
} ,
};
this.Detail = myHomePage;
}
}
}
It is built in: MasterDetailPage. You'd set the Detail and Master properties of it to whatever kinds of Pages you'd like. I found Hansleman.Forms to be quite enlightening.
My minimum example (as posted here) is as follows:
public class App
{
static MasterDetailPage MDPage;
public static Page GetMainPage()
{
return MDPage = new MasterDetailPage {
Master = new ContentPage {
Title = "Master",
BackgroundColor = Color.Silver,
Icon = Device.OS == TargetPlatform.iOS ? "menu.png" : null,
Content = new StackLayout {
Padding = new Thickness(5, 50),
Children = { Link("A"), Link("B"), Link("C") }
},
},
Detail = new NavigationPage(new ContentPage {
Title = "A",
Content = new Label { Text = "A" }
}),
};
}
static Button Link(string name)
{
var button = new Button {
Text = name,
BackgroundColor = Color.FromRgb(0.9, 0.9, 0.9)
};
button.Clicked += delegate {
MDPage.Detail = new NavigationPage(new ContentPage {
Title = name,
Content = new Label { Text = name }
});
MDPage.IsPresented = false;
};
return button;
}
}
An example solution is hosted on GitHub.
On iOS the result looks like this (left: menu open, right: after clicking on "B"):
Note that you need to add the menu icon as a resource in your iOS project.
If you are looking for simple example of MasterDetailPage please have a look at my sample repo at GitHub. Very nice example is also presented here
Slideoverkit is a great plugin available for Xamarin Forms. There is a github to see free samples and you could find documentation about it here.

Resources