I'm starting a single page app and still haven't chosen any framework. The only complex thing it needs to do is allow the users to select an element from a tree structure for one of the fields of a form. It would be nice if it worked with both mouse selection and keyboard autocomplete. The tree is 5 levels deep and contains around 500 elements. What would be a good way to implement this?
Here's a fiddle to show you how to recursively build a tree: http://jsfiddle.net/KtbXb/ .
As far as input, binding a click function to each node will call a function with access to all data associated with clicked node:
view:
<li data-bind="text: name, click: yourFunction"></li>
viewmodel:
var yourFunction = function (data) {
//your function will have access to the node via data
};
For keyboard input, you can add an input to your view and bind the value to an observable value. From there, you can probably find a substring search algo online, or even a plugin (jquery.table-filter does a good job of this)
Related
I have a problem I want to use the list and when I click on a component of the list it take me to another form (make an action) meaning if I click on an item from the list depending on the selected index it takes me to another form.
Is this in a GUI builder app or manual app?
For GUI builder use the action event callback for the list see: http://www.codenameone.com/how-do-i---handle-eventsnavigation-in-the-gui-builder--populate-the-form-from-code.html
Then get the index/selected item using:
int index = list.getSelectedIndex();
Object value = list.getSelectedItem();
Then you can show the form you want using:
showForm("FormName", null);
In handcoded apps you can get the selected item/index in exactly the same way then do something like:
form.show();
To show a specific form.
In paper js I've created a compound path and now I want to implement drag and drop on it. The compound path has two children (two circles).
Here's the issue: when I attach a mouse event to the compound path (using hittest to get the whole path), and click on it, I get the reference only to the first child path. If I click on the second child path, the hittest returns undefined, while I'd like to get the compound path.
Any idea?
Thanks.
Francesco R.
I had the same problem, but there are few ways to make it work.
I assume you use Tool. If so, you can try to get the item not by hit testing, but using ToolEvent's item object
example:
mousedown: function (event) {
if (event.item) {
// event.item is what you need
}
},
If you know what item you'll be hit testing - for example you want to check if user clicked on a specific item, you can call hitTest() from this item
example:
mousedown: function (event) {
var hit = yourItem.hitTest(event.point, { tolerance: 10 });
if (hit) {
// now you can use hit.item or yourItem ('cos you know the item)
}
},
You can try hitTest options. There you can specify what class of items are you looking for:
options.class: Only hit test again a certain item class and its sub-classes: Group, Layer, Path, CompoundPath, Shape, Raster, PlacedSymbol, PointText, etc.
Tell me if that helps or provide some test case. You can create a paperscript sketch here and provide us the link you get in your adress bar after running your sketch.
EDIT: Actually I've created a sketch for you, showing those methods: look here
I want to take a list of item names from a collection as a simple array to use for things like autocompleting user input and checking for duplicates. I would like this list to be reactive so that changes in the data will be reflected in the array. I have tried the following based on the Meteor documentation:
setReactiveArray = (objName, Collection, field) ->
update = ->
context = new Meteor.deps.Context()
context.on_invalidate update
context.run ->
list = Collection.find({},{field: 1}).fetch()
myapp[objName] = _(list).pluck field
update()
Meteor.startup ->
if not app.items?
setReactiveArray('items', Items, 'name')
#set autocomplete using the array
Template.myForm.set_typeahead = ->
Meteor.defer ->
$('[name="item"]').typeahead {source: app.items}
This code seems to work, but it kills my app's load time (takes 5-10 seconds to load on dev/localhost vs. ~1 second without this code). Am I doing something wrong? Is there a better way to accomplish this?
You should be able to use Items.find({},{name: 1}).fetch(), which will return an array of items and is reactive, so it will re-run its enclosing function whenever the query results change, as long as it's called in a reactive context.
For the Template.myForm.set_typeahead helper, you might want to call that query inside the helper itself, store the result in a local variable, and then call Meteor.defer with a function that references that variable. Otherwise I'm not sure that the query will be inside a reactive context when it's called.
Edit: I have updated the code below both because it was fragile, and to put it in context so it's easier to test. I have also added a caution - in most cases, you will want to use #zorlak's or #englandpost's methods (see below).
First of all, kudos to #zorlak for digging up my old question that nobody answered. I have since solved this with a couple of insights gleaned from #David Wihl and will post my own solution. I will hold off on selecting the correct answer until others have a chance to weigh in.
#zorlak's answer solves the autocomplete issue for a single field, but as stated in the question, I was looking for an array that would update reactively, and the autocomplete was just one example of what it would be used for. The advantage of having this array is that it can be used anywhere (not just in template helpers) and that it can be used multiple times in the code without having to re-execute the query (and the _.pluck() that reduces the query to an array). In my case, this array ends up in multiple autocomplete fields as well as validation and other places. It's possible that the advantages I'm putting forth are not significant in most Meteor apps (please leave comments), but this seems like an advantage to me.
To make the array reactive, simply build it inside a Meteor.autorun() callback - it will re-execute any time the target collection changes (but only then, avoiding repetitive queries). This was the key insight I was looking for. Also, using the Template.rendered() callback is cleaner and less of a hack than the set_typeahead template helper I used in the question. The code below uses underscore.js's _.pluck() to extract the array from the collection and uses Twitter bootstrap's $.typeahead() to create the autocomplete.
Updated code: I have edited the code so you can try this with a stock meteor created test environment. Your html will need a line <input id="typeahead" /> in the 'hello' template. #Items has the # sign to make Items available as a global on the console (Meteor 0.6.0 added file-level variable scoping). That way you can enter new items in the console, such as Items.insert({name: "joe"}), but the # is not necessary for the code to work. The other necessary change for standalone use is that the typeahead function now sets the source to a function (->) so that it will query items when activated instead of being set at rendering, which allows it to take advantage of changes to items.
#Items = new Meteor.Collection("items")
items = {}
if Meteor.isClient
Meteor.startup ->
Meteor.autorun ->
items = _(Items.find().fetch()).pluck "name"
console.log items #first result will be empty - see caution below
Template.hello.rendered = ->
$('#typeahead').typeahead {source: -> _(Items.find().fetch()).pluck "name"}
Caution! The array we created is not itself a reactive data source. The reason that the typeahead source: needed to be set to a function -> that returned items is that when Meteor first starts, the code runs before Minimongo has gotten its data from the server, and items is set to an empty array. Minimongo then receives its data, and items is updated You can see this process if you run the above code with the console open: console.log items will log twice if you have any data stored.
Template.x.rendered() calls don't don't set a reactivity context and so won't retrigger due to changes in reactive elements (to check this, pause your code in the debugger and examine Deps.currentComputation -- if it's null, you are not in a reactive context and changes to reactive elements will be ignored). But you might be surprised to learn that your templates and helpers will also not react to items changing -- a template using #each to iterate over items will render empty and never rerender. You could make it act as a reactive source (the simplest way being to store the result with Session.set(), or you can do it yourself), but unless you are doing a very expensive calculation that should be run as seldom as possible, you are better off using #zorlak's or #englandpost's methods. It may seem expensive to have your app querying the database repetitively, but Minimongo is caching the data locally, avoiding the network, so it will be quite fast. Thus in most situations, it's better just to use
Template.hello.rendered = ->
$('#typeahead').typeahead {source: -> _(Items.find().fetch()).pluck "name"}
unless you find that your app is really bogging down.
here is my quick solution for bootstrap typeahead
On client side:
Template.items.rendered = ->
$("input#item").typeahead
source: (query, process) ->
subscription = Meteor.subscribe "autocompleteItems", query, ->
process _(Items.find().fetch()).pluck("name")
subscription.stop() # here may be a bit different logic,
# such as keeping all opened subsriptions until autocomplete
# will be successfully completed and so on
items: 5
On server side:
Meteor.publish "autocompleteItems", (query) ->
Items.find
name: new RegExp(query, "i"),
fields: { name: 1 },
limit: 5
I actually ended up approaching the autocompletion problem completely differently, using client-side code instead of querying servers. I think this is superior because Meteor's data model allows for fast multi-rule searching with custom rendered lists.
https://github.com/mizzao/meteor-autocomplete
Autocompleting users with #, where online users are shown in green:
In the same line, autocompleting something else with metadata and bootstrap icons:
Please fork, pull, and improve!
I'm trying to find the best way to create a personalized contact List for an instant messaging app.
Maybe with a Tree View but I'm not sure.
I Need a way to view Groups in which there are Contacts.
A Contact contains different info and action buttons like "Send a message, View infos, ... "
An example # http://ycorpblog.com/wp-content/uploads/2007/10/yahoo-messenger-90-action-toolbar.jpg
here I am in my little research. I inherited one of my classes QAbstractItemDelegate.
I reimplements paint () and sizeHint ()
in the paint () for drawing my items (and here for example a button)
Code:
QStyleOptionButton buttonStyle;
buttonStyle.rect = option.rect;
buttonStyle.features = QStyleOptionButton::AutoDefaultButton;
buttonStyle.text = "Salut!";
QApplication::style()->drawControl(QStyle::CE_PushButton,&buttonStyle,painter);
But then it does involve reimplementing QAbstractItemDelegate: helpEvent () to retrieve the actions of clicking the buttons (compare the position of the mouse compared to my drawing and determine what the user clicks)?
Moreover, with the solution proposed above,
QAbstractItemDelegate::helpEvent () is a slot
Despite a careful reading of the documentation, I can not determine when this function is called, does it connect to something?
I also cast a glance at editorEvent (), I recovered well Mouse Click but no way of knowing exactly where the user clicked, so no way of knowing if it's a button or other element.
I asked about the method I use too. Is this good? Can you enlighten me?
Pending your answers / ideas. Thank you.
I am intending to develop a Finite State Machine in the following manner.
Extract Control IDs from a --> web-page,
Write control IDs to a XML --> Controls-XML.
Manually declare States and Transition in the --> Controls-XML
Scan Controls-XML and attach pre-declared Jscript to eventhandlers embed them in the --> web-page..
5.
How feasible this would be..
Am I getting into can of worms ?
First, we live in a can of worms!
your questions are a bit vague, please provide more details if i'm missing your point and maybe this should be beak in parfts to deepen the discution in part details
assuming you want to work live on a client side browser over any page
by extrating ID's of controls i supouse it's all controls of a webpage (it could be by clicking or clicking possibly with key combos), but lets be simple.
Extrating ID's
here's a code than might help you:
function scan(e) {
if (e&&e.childNodes)
for(var i=0;i<e.childNodes.length;i++) {
var child=e.childNodes[i];
if (child) {
if(child.id) console.log(child.nodeName,child.id);
scan(child);
}
}
}
note: this was done with chrome, but any browser console will do i think.
just paste the function on the console and then call it like:
scan(document)
and it will list (on console) all elements that have id's showing element type and id... you can filter that eazy by just printing elements of certain tags like INPUT, SELECT TEXTAREA, etc...
About the XML
here browsers get a bit tricky, you can simplify it too your favorite browser, the following functions constructs a XML document given some XML text.
So by this aproach your scan function should compose the xml text (instead of writing to the console) and later we can feed the XML document
function makeNode(text) {
var doc;
if (window.ActiveXObject) {
doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(text);
} else {// code for Mozilla, Firefox, Opera, etc.
var parser=new DOMParser();
doc=parser.parseFromString(text,"text/xml");
}// documentElement always represents the root node
return doc.documentElement;
}
other aproach is to create an empty XML document (as the above function does) and the instead of feed raw xml text your scan function should use XMLDOM commands to insert nodes into the document.
Manually declare States and Transition in the --> Controls-XML
this is an hard one, is this (XML doc) info to be copy/pasted and latter edited? is it edited inplace by inserting a bunch of code to build an interface?
many doubts here, but once we have the information in XML format we would be free to use our imagination and decide a format to handle the wanted state changes.
Scan Controls-XML and attach pre-declared Jscript to eventhandlers embed them in the --> web-page
at this point actions depend on methods followed above, but in any case using XMLDOM functions to traverse the xml doc and apply status change or event handlers to the controls is trivial.
controls need not be scanned anymore because we have stored the id's (use getElementById)
i have a form validation system that does something similar, except the XML is predefined and stored on server side, but once loaded it will do just that. attaching event handlers and do status changes based on evaluated expressions.