If you've been following this series of posts, you'll know that in the last post I set up the UI for reading the Firebase data and used some dummy Hero objects to simulate database records. In this post, I am going to implement reading the records from the database.
As I have no experience of reactive observables in C#, I am going to do this in a slightly odd way. I would love to get some feedback on this and some tips or an example of using observables correctly in this context.
Adding the Get() method to HeroConn.cs
Open up HeroConn.cs and add a new method Get(). This method will again return an async Task and has no parameters since it is retrieving all of the database records.
As I mentioned above, I am not very familiar with reactive observables in C#, so I am simply going to manipulate a static list of Heroes in MainPage.xaml.cs. This list will be cleared and repopulated each time data is retrieved from the database. Let's first take a look at the HeroConn.cs Get() method: // retrieve the database records and add a new Hero object to // heroList on MainPage.xaml.cs for each object public async Task Get() { var results = await firebase.Child(node).OnceAsync<Hero>(); MainPage.heroList = new List<Hero>(); foreach (var item in results) { MainPage.heroList.Add(new Hero { Key = item.Key, Name = item.Object.Name, Rating = Convert.ToInt32(item.Object.Rating) }); } }
This code is again quite straightforward thanks to FirebaseDatabase.net. First I call the OnceAsync method and store its results in a 'results' variable. This is the only change needed in HeroConn.cs. Looping through the results, I then add a new Hero object for each result.
Notice here that I am first setting the Key value by accessing item.Key, while the actual Hero properties are accessed by item.Object.Name and item.Object.Rating. Now, in MainPage.xaml.cs I have called this method from the GetHeroes() method, which I have also used to reinitialise the heroList and update the spHeroList StackPanel each time the database is read from. The reason for initiliasing an empty list each time should be clear - there would be duplicates in the list. The code to update the StackPanel (spHeroList) is taken from the old AddHeroes() method which I have removed completely. In the MainPage.xaml.cs constructor, I have called the GetHeroes() method after the component has been initialised. I have also called the method in the btnAdd_Tapped event handler so that each time a new Hero is added to the database, a database read is performed and the UI is updated accordingly. MainPage.xaml.cs should now look like this: namespace FirebaseHeroes { public sealed partial class MainPage : Page { public static List<Hero> heroList;
public MainPage() { this.InitializeComponent(); // get data and update UI GetHeroes(); }
// call the HeroConn method, populate heroList and also update the UI private void GetHeroes() { // create a new List heroList = new List<Hero>(); // and a new connection HeroConn conn = new HeroConn(); // get the data and add it to the heroList Task.Run(() => conn.Get()).Wait();
// clear all HeroItems from the StackPanel this.spHeroList.Children.Clear(); // and add new ones foreach (Hero h in heroList) { this.spHeroList.Children.Add(new HeroItem(h)); } }
private async void btnAdd_Tapped(object sender, TappedRoutedEventArgs e) { HeroConn heroConn = new HeroConn(); Hero hero = new Hero { Name = this.tbInputName.Text, Rating = Convert.ToInt32(this.tbInputRating.Text) }; await heroConn.Insert(hero); this.tbOutput.Text = String.Format("Hero {0} added!", hero.Name);
// get new data and update UI GetHeroes(); } } }
Now run the program and any objects in the database should be displayed in the UI.
Adding a new Hero via the application input area should result in the new Hero also being displayed in the list. That's all for now.
0 Comments
Leave a Reply. |
Author
2nd Year B.Sc. Software Development Archives
December 2017
Categories |