We have an N level (max is probably around 10 or so) nested data structure that basically resembles a folder layout ..
Each node at any level is a Mime type of something to show or a URL ..
My question is actually very simple .. is there any available Fluter Widget that can show this type of stucture -- allowing the common "open/close" at any parent level, etc. ??
This seems like a pretty fundamental UI element not be had in the stock toolbox but I haven't had any luck finding one ..
TIA!
/Steve
Over the past few weeks I have been working on a TreeView widget and have come up with a basic structure. It is now available in the pub for use. Working on it is easy enough once you really know how to do it. I've got to admit that documentation has never been my strong point, but if someone has any trouble with this just add an issue on the Github page.
Any suggestions to improve the project are also welcome.
Sample Code
Let's assume this is the directory structure we want to implement using the TreeView widget
Desktop
|-- documents
| |-- Resume.docx
| |-- Billing-Info.docx
|-- MeetingReport.xls
|-- MeetingReport.pdf
|-- Demo.zip
In this example
Resume.docx and Billing-Info.docx are Child widgets with documents as the Parent.
documents, MeetingReport.xls, MeetingReport.xls and Demo.zip are Child widgets with Desktop as a Parent widget.
var treeView = TreeView(
parentList: [
Parent(
parent: Text('Desktop'),
childList: ChildList(
children: [
Parent(
parent: Text('documents'),
childList: ChildList(
children: [
Text('Resume.docx'),
Text('Billing-Info.docx'),
],
),
),
Text('MeetingReport.xls'),
Text('MeetingReport.pdf'),
Text('Demo.zip'),
],
),
),
],
);
This will not generate anything fancy at all. But instead of all the Text widgets you can pass any complex widget and it will still work.
A screen grab of an application using TreeView
Bit late to the party.I have also been searching for a treeview structure to use for my flutter project but i couldn't find any that suits my needs.So, I created a package dynamic_treeview .It uses a parent/child relationship to build a treeview.See if this suits your needs.Let me know what you guys think.Thanks
There is a custom component doing what you need : Screenshot Preview
https://github.com/AndrewTran2018/flutter-piggy-treeview
Check flutter_simple_treeview. This is a demo.
Related
We have a rich UI application developed using sproutcore. We are trying to automate the pages using Selenium webdriver in Ruby. With dynamically generated id's and hidden items we are finding it difficult to identify some of the elements. Application is complex. Developers are saying they cannot add unique layer-id's for hidden items or frames. For static pages, they added unique layer-id or class names.
I want to understand from my friends here about what automation they are using for their sproutcore applications?
How are they tackling these issues?
Any pointers are appreciated.
Even if the web elements are
dynamically generated id's and hidden items we are finding it difficult to identify some
One solution is to ask if developers can add naming pattern for them, so just last chars to be generated on-the-fly. By doing this you can use some of these location approaches:
what-is-the-way-to-locate-an-element-which-has-dynamic-id-even-if-xpath-css
selecting-webelements-with-dynamically-generated-ids-by-xpath-selenium-java
appendix_locating_techniques
An approach that will work with SproutCore is to use the SproutCore view tree to identify elements rather than by layer ID or class. For example, consider this basic main page,
MyApp.mainPage = SC.Page.create({
mainPane: SC.MainPane.extend({
childViews: ['header', 'mainContent', 'footer'],
header: SC.ToolbarView.extend({
layout: { height: 44 },
childViews: ['headerButton'],
headerButton: SC.ButtonView.extend({
layout: { centerX: 0, centerY: 0, height: 40, width: 100 },
title: "Click Here"
})
}),
mainContent: SC.View.extend({
layout: { top: 44, bottom: 33 },
// etc.
While we don't know the layer ids of these elements beforehand, we do know their parent child relationship in JavaScript. For instance, if I needed certain elements from the page, I'd probably grab them in advance like so,
// Retrieve target views for the current page.
var mainPane = MyApp.mainPage.get('mainPane'),
header = mainPane.get('header'),
headerButton = header.get('headerButton'),
// … etc.
// Then retrieve an element for acting upon.
var buttonLayer = headerButton.get('layer'); // returns a DOM node
// Or retrieve an element id for acting upon.
var buttonLayerId = headerButton.get('layerId'); // returns the auto-generated id
Although I don't have firsthand experience with Selenium, it appears that you can use the execute_script WebDriver instance method to run some simple lookups that return either the element you need or the id of the element you need.
Finally, bear in mind that some views may have dynamically changing children, in particular SC.CollectionView subclasses like SC.ListView. In this case, once you target the parent view, you can access the child that you need easily enough using methods particular to that parent view, such as itemViewForContentIndex(idx) to get item views of a list.
I use selenium to automate (via Jenkins) some QA testing for a Sproutcore app and in my experience it is usually enough to add specific class names to the Sproutcore objects and then use xpath expression in Selenium to target those classes.
Example:
bottomRightView: SC.View.design({
classNames: ["bottomRightView"],
layout: { top: 60, width: 299, bottom:50, right: 15, zIndex: Maps.RIGHT_TOOL_BOX_PANE_ZINDEX },
childViews: "resultsView noResultsView buttons featureView".w(),
Xpath expression:
xpath=//div[contains(#class,'bottomRightView')]
It is always possible to use //#if(debug) statements to exclude those classNames from production builds.
Example Selenium IDE scripts for above mentioned app: https://github.com/unicolet/mappu/tree/master/tests/selenium
I'm a QA, and I'm new to android automation as such, and I am having problem in automating the spinner / Dropdown related activities in my app. I am using Robotium 4.1 for my automation.
The Spinner in my app is implemented using actionbarsherlock. The Hierarchyviewer shows it as Popupwindow:SOME-RANDOM-ID. It looks like the implementation is internal to actionbarsherlock. After talking to the dev he tells me that it's a "non-visible" element. I don't understand what that means, because I can see the element.
Also, I can't find the methods mentioned in some of the other questions here.
I suppose the right way is to use solo.getViews(), and solo.getCurrentViews etc. but I don't know how to use the parameters in there, so whatever I tried didn't work.
Can someone guide me with a detailed example? (including how to give the parameters to getViews etc will be much appreciated.)
How to get number of items:
mSpinner.getAdapter().getCount();
How to click on specified item on spinner:
solo.pressSpinnerItem(indexOfSpinner, indexOfItem);
How to get current spinners:
ArrayList<Spinner> currentSpinners = solo.getCurrentViews(Spinner.class);
How to get spinner with specified index:
Spinner spinner = getView(Spinner.class, index);
Sorry about the question title, but I couldn't find a more appropriate way to phrase this.
I am currently building a CakePHP powered website and I'm not quite sure how to approach the following issue. The website looks something like the follwing mockup:
.
The greyed out areas are part of the layout, because their content does not change between views. In the sidebar, I have a collection of ads who are linked to several models. I need controller logic to determine the picture associated with an ad. Also, the ad list needs to be dynamic. Where should I put the logic for building the sidebar?
I've thought about:
putting the logic into the AppController (beforeFilter / afterFilter) - the problem is I can't use the controller logic I need (the other controllers inherit from AppController, I'm not sure how to use them there).
making a component - is it okay to build components that rely on controllers?
replicating the sidebar code in all controllers that render views - this seems kind of stupid to me.
What is the Cake way for this?
Update
After some reading and experimenting, I've gotten to refactoring most of it.
I obtained the best performance by moving the logic for building my ads in the model (eliminating the component that retrieved the pictures) and not using requestAction. It's almost three times faster and the code looks much better.
I've done something similar for data-driven navigation. I put my logic in AppController::beforeRender and haven't had any problems. I'm not sure I understand your concern related to controller inheritance. I retrieve my menus via:
$menus = $this->NavMenuItem->groupByMenu();
$this->set( compact( 'menus' ) );
I then created an element that renders the menu. It's executed by the layout via:
<?php echo $this->element( 'navigation', array( 'id' => 'secondary', 'menu' => $menus['SECONDARY'] ) ) ?>
If that doesn't help, maybe you can further explain your issue with controller inheritance in a comment.
I guess the answer is requestAction in case the results are cachable:
http://book.cakephp.org/view/434/requestAction
It can be done in this way:
Create an element that will help in layout of the Ad Block
Create one or more controller that will generate the data required for rendering of the block
Use requestAction for getting the data out of the models and into the element.
Check the cake book, there is an example of an element where data from Post Model is used to display top/latest 5 posts. Your requirement, I feel, is very similar to it.
Alex,
you're getting a SQL error because the build() function has to be in the Sidebar model, not controller. Also, you don't necessarily need to use $user = array('Sidebar'); you could calling Sidebar in all of your models with this:
$Sidebar = ClassRegistry::init('Sidebar'); and then $Sidebar->find();, $Sidebar->build(); etc.
Or, if you only need to call the build() function from the Sidebar model, you could do this:
$sidebar = ClassRegistry::init('Sidebar')->build();
$this->set('sidebar', $sidebar);
Cheers.
We're working on creating a modeling tool based on the GMF framework and tools. We have a requirement to allow users to add views (figures) at runtime and use them in their diagrams. We will be using SVG files to represent figures.
What's the correct structure of EditParts and other GEF related classes in such a case? We were thinking of implementing a single GEF EditPart class, that would create the appropriate figure based on a parameter (path to SVG file) present in the model. So far it doesn't seem to be working.
There HAS to be someone who's already done something like this before. Googling and the Eclipse forums have not been helpful so far...
Well we found a (partial) solution. We have one element, and depending on a parameter we create a child figure inside it, which uses an SVG file (based on the parameter).
The following test code is called in the constructor of the Figure:
ScalableImageFigure svg; URL url;
if (type == 1) { url =
ArchitectureStudioDiagramEditorPlugin.getInstance().getBundle().getEntry(
"icons" + IPath.SEPARATOR + "shadow-box.svg"); } else { url =
ArchitectureStudioDiagramEditorPlugin.getInstance().getBundle().getEntry(
"icons" + IPath.SEPARATOR + "star.svg"); } svg = new
ScalableImageFigure(RenderedImageFactory.getInstance(url),
true, true, true);
this.add(svg);
Now we need to figure out how to have multiple elements in the Palette.
The correct way is to have one to one mapping between figure and editpart . Also painting task should be left to the figure . How the image should be painted , the logic must be inside the figure not in the editpart.
Thanks
[revised]
I'm creating a TreePanel in ExtJs that is loading its children from a JSON file. I'm having trouble adding a click action to the nodes. I'm not sure whether it's added in the script creating the tree, or if its added as a property in the JSON, and if so, what the syntax would be. Any help would be appreciated! Please provide an example if possible.
Add a listener to the TreePanel:
listeners: {
click: function(node, event){
console.log(node);
}
}
and use the data in the node.
This is a very commonly talked about question(events in general), so I would suggest searching the extjs forums and reading what they have in their learning center.
Event listeners can be assigned on creation of the TreePanel or attached to an existing TreePanel.
I have a similar (and common) setup where I have a tree that I use as a navigation menu and each leaf node acts as a link that should be opened in a TabPanel.
To handle the node clicks, you could do something like:
Ext.get('your-tree').on('click', function(node, event){
if(node.isLeaf()){
// do what you need to with the node.
}
});
Jozef Sakalos(aka Saki) has allot of great information on his site extjs.eu. I think you would be most interested in the component communication example.
Gerry is putting you on the right track, and you can never go wrong with Saki's examples. I just answered a very similar question. That answer may give you more information as well:
How do I find the selected node in an ExtJS TreePanel?