-
Notifications
You must be signed in to change notification settings - Fork 50
Q: how to display hierarchical data from xml or json #9
Comments
Hi Johannes, XML and JSON formatted data are a good fit for this control because they are both single parent hierarchies of data. I do not know how far along the path of development you are so I'll start from the beginning. Feel free to skip to the part you need. :-) To display the data, we need to get it from somewhere, parse it into a our data model, and connect our data model to the custom view. This can range from the simple to the very complex. The steps are summarised below. High Level Overview:
Here is an example of a the pieces we can put together to perform each task listed above. This is a simple structure. We can use different pieces to get different behaviour. Simple Structure:
Let's get started. Imagine we had a JSON file named jojannes.json. Let's say that it has been added to our project so it gets placed into our application bundle during the build. This imaginary project already includes TouchJSON and the PSTreeGraph code we need. Here is some code to get us through the first two steps. Best practice would be to put this code in view controller that contains the custom view. #import "CJSONDeserializer.h"
// add the following method somewhere in your @implementation
-(void) loadJSONData
{
// Find the file
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"jojannes" ofType:@"json"];
if (filePath) {
// Load data in the file
NSData *theJSONData = [NSData dataWithContentsOfFile:filePath];
if (theJSONData) {
// Parse the file
NSError *theError = nil;
NSDictionary *theObject = [[CJSONDeserializer deserializer] deserializeAsDictionary:theJSONData
error:&theError];
if (theObject) {
// File loaded and parsed. Insert code to populate the data model here.
} else {
NSLog(@"Could not parse JSON file.");
// TODO: Use the NSError object to build better error logging
}
} else {
NSLog(@"Could not load NSData from file.");
}
} else {
NSLog(@"Please include jojannes.json in the project resources.");
}
} The Data ModelYour data model can be structured however you like it. The only requirement is that the objects support the PSTreeGraphModelNode protocol. See the ObjCClassWrapper for an example. Options include: a set of custom classes, core data objects, or even something like a category on NSDictionary so you can use the result of TouchJSON directly. I would include an example here but this is the part that actually requires some work. It is also easy to just gloss over in a tutorial. In my defence, once you start using this for something specific, you will want your own data model anyway for other things unrelated to the presentation of the data. Customising the DisplayThe example project includes a ObjCClassTreeNodeView.xib to define the presentation of a node. You may want to play with it at some point so it displays your data the way you like it. The xib file in the sample code is backed by a sub class of PSBaseLeafView called PSHLeafView. Take a look at the two classes and compare them. You only need to do the bare minimum to build your own subclass of PSBaseLeafView. Note: don't forget to change the properties in your node xib to use your "custom class". ConfigurationNow to set up our custom view and to tell it about the root node in our data model. Here are the basic steps. Just about everything goes into your view controller class because it is supposed to be the bridge between your model and the presentation. That is exactly what we want to do here. The PSHTreeGraphViewController class provides a good example of the following steps. View Configuration Overview:
First step is to implement the delegate method and set the delegate property for the custom view. At this time, there is only one delegate method to implement. It is called each time the graph needs to configure a new view to display a data object in your model. It provides you with the new view (this will be your custom subclass of PSBaseLeafView) and one of your model nodes to configure it with. The example configures the delegate property in the viewDidLoad method. // Set the delegate to self.
[self.treeGraphView setDelegate:self ]; Next we set the nib to use for each node view. // Specify a .nib file for the TreeGraph to load each time it needs to create a new node view.
[self.treeGraphView setNodeViewNibName:@"YourCustomClassNameHere" ]; Configure the ModelRoot property. You can use "." notation or the explicit method, "setModelRoot:". The example just wraps this method in a helper called "setRootClassName:". // Set object as data model rood as the TreeGraph's root.
[treeGraphView setModelRoot:YourRootObjectHere ]; Finally, ...That's it! It seems like a bit of work at the start but you will find this pattern repeats itself all over UIKit. Everything is loosely coupled and you can hack away on other parts of your project and forget about it. And one more thing...To keep things looking good during resizes, rotations, etc implement the following optional method in your view controller. If you already have one, be sure to add a single call to parentClipViewDidResize: - (void) willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
duration:(NSTimeInterval)duration
{
// Keep the view in sync
[self.treeGraphView parentClipViewDidResize:nil];
} Warm Regards, Ed |
Hi Ed, thank you so much for this extensive explanation. I got the main idea and the missing links. Probably I will start with reading in a plist with hierarchical data. If this is successful, then I will try the JSON part. Yours Johannes |
Hi,
As a result, the orientation change of the uiviews didn't work anymore. BTW. i am using a tabbar application. HTH Johannes |
Does anyone have an example of loading from JSON or Coredata? |
Simple structure for loading the model above. :-) |
Very good resource! Can PSTreeGraph be integrated with an iOS 7 ( storyboard ) project? thanks |
Hi, Here is my json content:
I have used the same ObjCClassWrapper file to load my Json data into the graph. I have modified the subclasses method like this:
and in PSHTreeGraphViewController.m file, I have modified the below method:
The application did not crash but it didn't load my content. Where am I doing it wrong? |
I'll take a look when I get back to my desk. |
Okay. Thank you. |
Hi @epreston , |
HI, can you give me a demo from json or plist |
All the demos currently do this.
On Wed, 3 Apr 2019 at 4:36 pm, liya ***@***.***> wrote:
HI, can you give me a demo from json or plist
Ed
|
Hi, Do you have an json example used in this application ? Best Regards. |
Yes
…------------------ Original ------------------
From: iFIRTINA <[email protected]>
Date: Sun,May 10,2020 4:51 AM
To: epreston/PSTreeGraph <[email protected]>
Cc: liya <[email protected]>, Comment <[email protected]>
Subject: Re: [epreston/PSTreeGraph] Q: how to display hierarchical data from xml or json (#9)
Hi,
Do you have an json example used in this sample.
Best Regards.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.
|
Hello,
i would like to display some hierarchical data from a xml-file or json-response.
Now I am looking for some hints or tips how to start with.
Yours Johannes
The text was updated successfully, but these errors were encountered: