I'm making a UI where the user can add and store links to their favourite Youtube videos. Very similar to a favourites folder in a browser, but just for Youtube videos.
I want the links displayed in a treeview, so that they can be catalogued into categories and sub-folders, etc. Sort of like this:
Videos
|---Music Videos
|---Music video 01
|---Music video 02
|---Music video 03
|---TV Shows
|---TV show 01
|---TV show 01
What I'm struggling with most at the moment, is working out how the user can store this data once the UI has closed. I've been looking into xml binding, but I can't seem to create a decent xml schema that seems to work properly with the treeview.
Also, how would I go about storing the URL along with the video name, but have the treeview display only the name?
I'd be very grateful for any pointers as to the best way to go about this. Is there a better way? It's all very confusing.
Thanks very much.
Good data architecture is a non-trivial issue, i can just offer some thoughts of mine but cannot guarantee that they are all a good idea.
Firstly would not recommend working directly with XML data, it gets very inconvenient if you try to do more complex things.
You can serialize your data to XML, but you should be aware of its limitations and side-effects, there are questions to be found here on SO which try to compare the various methods of serialization, you might want to look for those as other formats might be more suitable. Two aspects of XML are quite apparent for example:
Huge file-size overhead due to the tags & and text-based data
Unlike binary serialization the data is more or less human readable and transparent
In any case i would use a database or a normal object model and serialize/deseriale that for storage.
If you want to allow sub-categories you may want to use a composite pattern, you then can have an object Video and Category, both implementing the interface IVideoComposite, where Category has a property Children of type ObservableCollection<IVideoComposite> for example.
You then can use implicitly typed datatemplates (a HierarchicalDataTemplate for Category) to create the items in your TreeView. (For the one of Category you will then bind the ItemsSource to Children)
Related
I'm using a property list in the back office.
I have an image as one of the properties, the problem I have is it only shows the content Id in the property list table, this is a really poor UI experince.
In addition one of the properties are a URL, again instead of showing a friendly URL it shows and internal URL, again not a very good UI experince for a content editor.
Is there a way to change this?
I am new to EPI server and though I have come accross some good features, what is kind of disapoiting are elements of the UI, a property list table like this could look much much better than this.
Can I customise it?
Background: I'm currently developing the client side for a web application, using JavaScript, with jQuery and Backbone.js (these are required by the proponent).
This is an application to visualize and edit data, in a graphical mode (through interactive diagrams representing the data, mainly).
Terminology: Said data is under the format of multiple documents, each containing a list of items.
For the purpose of this question, let the items be composed by an identifier, a textual description, and links to items in other documents. Links should be symmetric (i1 -> i2 exists if and only if i2 -> i1 also exists).
The Current Goal: In this phase, the application should be able to read two documents, display both lists side by side, and then draw lines, connecting the items between both documents, according to their links.
These lines should be editable. In other words, the user should be able to create new links, or remove existing ones (reflecting the changes on the item models).
These documents can be somewhat long, say, some dozens of items (maybe a few hundreds, in a realistic scenario). Of course, the page will be scrollable, to allow the user to see everything.
Also, for user convenience, there should be a slider to scale the view (allowing zoom in/out effects, so the user is given a global and a local view, being the latter more adequate for editing and the former for analysis).
Furthermore, the user should be allowed to hide particular items (useful when an item has many links, creating visual rubbish).
What I've managed to do:
Read data and map it to Backbone models and collections;
Display both documents side by side (Backbone views), with item connections;
Allow interactivity on these connections (drag-and-drop to create lines, click to remove), reflecting changes on Backbone models;
Hide particular items;
Scale effects.
I've achieved this using SVG, after coming across jsPlumb.
The Problem at Hands: The application still needs adjustments (emphasis on the scaling effects). Regardless, I found jsPlumb to be comfortable to work with. However, rendering performance seems to be a little lacking, when using the slider (it's possible that the slider steps are too small, thus firing too many events).
The proponent suggested that I try, instead, Sankey diagrams, to represent this kind of data. They also suggested that I try Sankey by tamc, based on Raphaël.js.
Of course, the visual factor is also contributive.
My question(s): Does this library have a good compatibility with Backbone? Possibly, if I use the resulting SVG elements as Backbone views' elements.
Also, does any of the two have a significant rendering performance advantage over the other?
On a final note, are there any other libraries more adequate to this scenario, worth the time of rewritting the application, that I might suggest to the proponents?
The project is going on, and I ended up using Sankey by tamc, with some extra work of my own, to better adapt it to this particular case.
I have an old VB6 application. I want to recreate it in VB.Net using WPF. But I am a bit confused about the "Model View Controller"-pattern. I have two books about design patterns (GoF and J.Bishop) afair this pattern is indeed not mentioned inside one of the two books. I have also searched the internet I found some java-examples. But I have still no clue how I should use MVC-Pattern (should I?) in my new WPF-application.
Let's say for example my model (in fact it is more complex) is only a wheel rim (circle) with the properties Manufacturer, Diameter and Depth. The user should be able to modify the properties using textboxes and ComboBoxes.
Could somebody create a small example that explaines the MVC-Pattern with WPF?
Of course I like reusable classes to have a feasible concept throughout the whole application.
thanks in advance
Oops
Here's a "brief" description of what the MVC pattern is and how I would apply it to a WPF application.
(I might have a few details slightly off since I've mainy hacked in Silverlight but the concept is similar enough.)
Basically, the idea is to separate concerns and define interfaces between the different parts of an application, with the goal of keeping the code structured and maintainable.
The Model in your example would be pretty much exactly as you described the wheel rim - a WheelRim class with the various properties defined in suitable data types. I would put the model i an separate assembly to keep it apart from the other code, but you can settle for just keeping the model classes in a "Models" folder. The model would also have a "twin" in a database, the model classes being pretty much one-to-one-mapped to tables.
(You might wanna have a look at Linq2SQL or Entity Framework, if the database is defined you can pretty much get the model for free along with suitable database access code.)
The View would be the actual WPF xaml files - Defining the Grid or Canvas or what have you. On the WheelRimView there would be labels and textboxes for displaying or accessing the different properties, perhaps along with product images and the like. The code behind for the view would have all the relevant event handlers (start, button_click and so on) for getting the data from the fields and passing them to the controllers.
The Controller would be any "handler code" that you would use to manipulate the data. We're talking the basic CRUD operations here, along with validation and the like. Also, the controller layer would be responsible for compiling the data in a format that can go seamlessly into the View. The WheelRimController hence would have methods like "GetWheelRimList", "GetWheelRim", "AddWheelRim", "ModifyWheelRim" and "DeleteWheelRim". The methods take the values as in parameters and manipulate the model objects accordingliy. the
I would recommend keeping the code-behind of the xaml files free from any "controller"-ish code like validation, aggregation and the like - the code behind should basically only take the values from the textboxes, listboxes and such and send them on "as is" to the controller methods for processing. Also, you should keep any data formatting code to a minimum when getting data for presentation (i.e., no filtering or translating in the view).
A typical use case of "User opens a wheel rim and edits the diameter" would play out thus in code:
User clicks "Edit" on a list page. The WheelRimView page loads.
The WheelRimView.Load() method (or corresponding) calls WheelRimController.GetWheelRim(wheelRimId).
WheelRimController.GetWheelRim(wheelRimId) gets the corresonding data from a database table and populates the properties of a WheelRim object, which is returned to the WheelRimView.
The WheelRimView inserts the property values into the labels and textboxes.
The user changes the diameter value and clicks the "Save button.
The WheelRimView.Save() method calls the WheelRimController.ModifyWheelRimDiameter(wheelRimId, diameter) method.
The WheelRimController.ModifyWheelRimDiameter(wheelRimId, diameter) method parses the diameter (if it is a string) and loads the model object. It applies the modified value to the model object and saves it into the database.
The WheelRimController.ModifyWheelRimDiameter(wheelRimId, diameter) returns a status code to the WheelRimView (for instance a predefined numeric stating any validation errors) to report the success of the save.
The WheelRimView displays a result message (hopfully "saved") to the user.
I hope that clears a few bits up.
Bevcause of the rich binding support available, WPF (and Silverlight) are well suited to MVVM (Model-View-ViewModel). MVVM is an extension of MVC that uses a view model to bind the current state of a view, instead of manipulating the view directly.
There are a bunch of MVVM frameworks available, as well as Microsoft's own Prism framework (which is arguably more useful if you have a larger, modular application).
WPF is probably more well suited to MVVM (Model-View-ViewModel). I'd recommend reading this MSDN article on MVVM and, perhaps, following their advice. There's also a nice collection of links I found on the Bryant Likes blog.
How do i search for a node in very large treeview , i am using on-demand loading of nodes?
Your question is a little light on details. For example, I would be curious to know if this is a user-specified search and what the search criteria would look like. In any case, I'll take a stab at giving you a general answer to your general question:
WPF makes it easier than ever to base the view on a data model structure of your own choosing, rather than the other way around.
I would suggest creating an object model that represents the underlying data (you may have this already) and "bind" it to the tree view via data templates (specifically the HierarchicalDataTemplate). Define your search in terms of the data structure, not the view.
I am developing a windows forms application. It was basically evovled with a mix of BDUP and prototyping.
I have about 1500 lines of code (excluding IDE generated partial class... 1465 to be exact) in the form and the form has 6 tabs (9 subtabs). Does not have more than 10 controls in each form so multiple form solution would be an overkill.
I have a set of entity classes that when serialized give me an XML representation that I store in an XML file. I've encapsulated this with a Repository pattern so I could move the storage to a database in future. The form uses the entity classes (for save/edit) and the Repo factory (add, retrieve and save).
Now, my problem is that much of the 1500 lines of code deals with interaction between UI elements (making a choice in a Combo disables some elements, or displays different items in a grid, handle tab transitions (next/back buttons), loading menus (each distinct item in the xml file repository becomes a menu item), new/edit mode etc (I've three distinct sets of new/edit on the same form).
What would be best approach here to move the element interaction out? Let's say, I may decide to make it web-based UI in future.
More importantly what are the composite refactorings I can apply?
What patterns I should refactor to / towards?
Thanks for helping out.
Note: I'm reading Refactoring to Patterns... Specifically I wanted to have a "howto"/tips on Refactoring to MVC...
Martin Fowler describes different UI architectural patterns in this article. It's fairly long, but well worth reading. You will then be able to determine which patterns and architectural models fit your scenario the best.
At the end of the "Model View Controller" section of that article, Fowler mentions these items, which seem applicable for you:
Make a strong separation between presentation (view & controller) and domain (model) - Separated Presentation.
Divide GUI widgets into a controller (for reacting to user stimulus) and view (for displaying the state of the model). Controller and view should (mostly) not communicate directly but through the model.
Have views (and controllers) observe the model to allow multiple widgets to update without needed to communicate directly - Observer Synchronization.
See the article and its links for more information. Good luck!
You should look into the Model-View-Controller (MVC) design pattern to abstract your business logic from your display logic.
There is also another flavor of the same thing called the Model View Presenter.
Both of these are extensively documented on the net.
Regards,
Joon