Asking for forgiveness if this is somewhat answered in anywhere else (a link to that will be very helpful)
I am unable to find a good tutorial or documentation on $.widget. The UI docs is somewhat limited on this. What I am looking for is a documentation on how to define events efficiently and call in custom widgets. How to intercept the events from a base widget. What are best practices, and recommended design patterns.
Sadly (and surprisingly) the only documentation I found on this is http://msdn.microsoft.com/en-us/library/hh404085.aspx.
I am building (or trying to build) a custom widget (ui.dialog as base) that will host a slickgrid in it and some buttons to navigate the data (slickgrid default ones are not good enough as the data source is heavily ajax driven).
So far, my progress is very good and I started admiring the power of $.widget. Since I am on a learning curve here, I would appreciate some expert advice and guidelines on best practices.
Thanks in advance
Here is a good introduction on how to build a widget with jQuery-UI
http://net.tutsplus.com/tutorials/javascript-ajax/coding-your-first-jquery-ui-plugin/
as well as
http://ajpiano.com/widgetfactory
They also list their references which directly links you to more tutorials and documentation on the matter.
The basics are that you will define a widget name
$.widget('ui.widget_name', {
options: {
overrideableOption: true,
},
_create: function () {
//fires when you first create the widget, and can be used as a callback for the 'create' event
},
_additional_events.....
});
then you can call your widget by using the naming convention after the ui namespace
$(element).widget_name({overrideableOption: false});
Hope that can get you started.
Related
I need to replicate this exact same sortable list, but using Stencil with no outside libraries. Does anyone has an example? Best I've done so far is a normal drag and drop sortable list, but items don't move upwards or interchange places as I'm dragging them. I've been looking everywhere and I couldn't find a single example that looks like this or has this characteristics (and those who are close, use libraries). I hope you can help me... thank you in advance!
This is some code from the link that shows it uses a library:
ul.addEventListener('slip:beforereorder', function(e){
if (/demo-no-reorder/.test(e.target.className)) {
e.preventDefault();
}
}, false);
I can't add my code because is work related and has confidentiality clauses.
Danny '365CSI' Engelman answered "If you don't want dependencies (strange limitation, Stencil itself is an unrequired dependency), you have to look at the source code of D&D libraries like: anseki.github.io/plain-draggable" and it was the best idea ever. Thank you so much!!
I am new to angular and have been researching Clarity as the UI component..First thing I was toying with was Clarity 'Datagrid'.
Here I wanted to make a generic component which can be configured with something like a 'columnModel' and 'data' both of which will come from backend.
which will be used in angular component structural directives (*ngFor etc) to display the datagrid. Here is what I came up with ...
Definitions in app.component.ts
columnModel = [
{header:'Id',dataIndex:'id','width':50},
{header:'Name',dataIndex:'name','width':100},
]
data : [
{id: 1, name: 'Name1', age: 1, rem: 'aaassssssssssssss'} ,
{ id: 2, name: 'Name2', age: 1, rem: 'aaassssssssssssss'},
{ id: 3, name: 'Name3', age: 1, rem: 'aaassssssssssssss'},
]
So here is what I did.(for the lack of better understanding of Clarity n Angular perhaps)..I used jQuery....
On 'ngOnInit' of the host component , I used jquery to set 'width' of 'data-columns' and 'data-cells' within each result row..based on 'colModel' above.. It seems WORKING!!!!
jQuery Code:
ngOnInit() {
const jqModel = this.colModel;
$(document).ready(function() {
$(".datagrid-column").each(function(indx) {
$(this).attr("style",function(i,v){return "max-width:" +
jqcolModel[indx].width +"px;width:" +
jqcolModel[indx].width+"px;"});
});
$(".datagrid-row-master").each(function(indx) {
$(this).children().each(function(indx) {
$(this).attr("style",function(i,v){return "max-width:" +
jqcolModel[indx].width +"px;width:" +
jqcolModel[indx].width+"px"});
});
});
}
My question to you experts is 'Is this a best practise ?' OR is there a better way to achieve this..
Thanks in advance for guding me.
I'm going to separate the answer into two parts. The first part is how I would start building a datagrid that was configurable as described in the question. The second part is purely my opinion on using jQuery with Angular and learning Angular in general.
Part 1
The clarity datagrid is declarative. That means you declare only the things you need for your use case. e.g - if you need a footer or a filter you add a footer or a filter as described in the documentation and the datagrid takes care of the rest.
In your particular case it seems you need the model for setting column widths so I would use the built in binding that angular provides by declaring a binding to the native style property for width like this:
<clr-dg-column [style.width.px]="indexLookup('id')">ID</clr-dg-column>
Notice the brackets around the style.width.px ... that tells Angular to bind to the value provided by the indexLookup function. The lookup function simply reduces the columnModel as provided above for a provided index value.
Here is a simple StackBlitz showing a poc for the description/code that you provided: https://stackblitz.com/edit/clarity-dark-theme-v013-zxh5ks
Part 2
IMO - you would help yourself more in the long run by focusing only on Angular. In my experience with AngularJS apps, jQuery was the cause of a poor developer experience. I think that still applies to apps built with Angular. There was a highly upvoted SO question about Thinking in AngularJS and I believe much of what the author wrote still applies to Angular even if the semantics of Angular and AngularJS are different.
There is a lot to grasp in the Modern Angular Framework. IMO, I would focus on small easily digestible parts and master them before trying to bring in other modules or libraries to solve an issue. For example, here are three areas you might focus on to expand knowledge of some basic things provided by Angular:
Data Binding: what can I bind to in a component or HTMLElement? How does it work with #Inputs and #Outputs? What is the effect of binding to a dynamic value and what happens when the value changes?
#Inputs and #Outputs: What are they? Why would you want to use them?
Component Lifecycle: What are the lifecycle hooks provided? When are they called and why? What are some common use cases for tying into one of the lifecycle hooks?
I don't know if you have worked through the Angular tutorial but its got some of the answers in bite sized chunks that are easy to digest in one or two sessions.
When I first started applying my AngularJS knowledge to Angular, the docs seemed unapproachable at first. I found it worth my time to go back (often) to both the cheatsheet and the Fundamentals/Components & Templates and re-read the content as I worked more and more with the framework and needed to use more of the things it provides. When I first started working with Angular I did this several times a week as it helped me become productive.
Hopefully the POC stackblitz helps you understand your how your use case (dynamically setting column widths for a Clarity datagrid) can be accomplished without jQuery. Finally, I hope my experience learning from the Angular docs helps you figure out the best way for you to learn the framework.
Every tutorial/example i can find for meteor shows a single view application. I would like to build something a little more complex. I'm unclear how to approach multiple views...preferably in a way that's somewhat scalable?
The iron-router package lets you access different views (layouts) by nice, REST-ful human-friendly clean URLs. It supports parameters in the URL, "loading" templates, waiting for subscriptions to finish loading, before and after hooks etc.
At this point you can only create Single Page applications with Meteor. Note that Single Page, doesn't mean you can't have several views - use iron-router for that.
But by design, Meteor serves a big fat unique JavaScript/HTML/CSS application down to the browser, though there's a feature request to allow incremental loading. It is then up to the application (or more precisely, the JavaScript framework), to dynamically render its views in order to display different "pages".
I was wondering the same thing and it took me way too much time getting something started. I finally got a paged app working solidly by using Backbone views and routes, so I created a simple boilerplate project to make setting up an app like this easier in the future.
Live demo here: backbone-boilerplate.meteor.com
Source code here: github.com/justinmc/meteor-backbone-boilerplate
Have you looked at madewith.meteor.com?
A bunch of apps there have multiple views using Backbone also Jonathan Kingston who created britto has started simple meteor framework called Stellar
At this stage of the game not sure if there really are best practices. But these two seem to be the current flow.
You can also make a tabbed interface for multiple views. There is a package project "Smart package for generating a tabbed interface with pushState" github project here: https://github.com/possibilities/meteor-tabs
The best solution right now is using a routing package (router is basic but works). The workflow is something like this:
declare routes; return a template name for each route
place the reactive helper provided by the package in your body tag
the reactive helper will return the template associated to that route
you create a template for each route and optionally set custom publish functions
Router will give you browser history (client side).
Note that at this time there are some limitation on the way Meteor handles html/js. They are load all at the same time. The bright side is that once the app is loaded, page transitions will be instant.
I want to use a custom widget in the GUI-Designer of Qt-Creator IDE.
So i created a class which inherits from Qt's QWidget. It worked to place
it on a QMainWindow programaticaly, but have to do my work in the desiger
where it does not appear as an option in the kist of components.
I googled to find a solution for problem an found an manual on, who guesses, the
Qt doc page ( https://doc.qt.io/archives/qt-4.7/designer-creating-custom-widgets.html
and https://doc.qt.io/archives/qt-4.7/designer-creating-custom-widgets.html).
I tried to follow it but doesn't work.
Does someone know an other way to do this or can give a hint where i can search
for problems following this tutorial?
Thanks in advance.
Codierknecht
There is a different example in the examples section of the Qt documentation that I think is a lot clearer.
Custom Widget Plugin Example
It was a little unclear to me when reading the tutorial where the Q_EXPORT_PLUGIN2() macro goes, but having full example code and project alleviates that.
If you are like me, the analog clock example didn't do it for you, in which case I found just one better tutorial. It may be on the kde site but I you dont need kde to do it, it just explains how to make the custom widget a plugin so you can add it into Qt Designer, rather than having to code it in, which is the norm when you just add a widget to your project and customize the class. I hope this page helps you like it helped me, get in the right direction of writing a single Qt Designer (or multiple) plugin:
Writing Qt Designer Plugins
If this link ever becomes dead, just do a search for the link itself, usually that will turn up the original page in someone's cache, as they do in the other examples above (the dead links in the above answers that just take you to main area and not to the pages originally intended).
I'm scratching my head on how to accomplish the following task: I need to write a simple web forms filler/submitter with QT C++, it does the following:
1) Loads page url
2) Fills in form fields
3) Submits the form
Sounds easy, but I'm a web developer and can't find the way how to make QT accomplish the task, I only managed to load url with QWebView object using WebKit, have no idea what to do next, how to fill in fields and submit forms. Any hints, tutorials, videos? I appreciate this.
QWebElement class does all the work, just reading through the class documentation gave me a full idea on how to accomplish my task. Thanks to eveyrone for suggestions.
The best solution would be to write the logic in JavaScript that does what you want and then inject it into the page using QWebFrame::evaluateJavaScript() after it finishes loading.
There's also another way to do this; involving the document tree traversal API that's been available in QtWebKit since 4.6: QWebElement. You'd basically process the form pretty much the same as you would do in JavaScript, except that here the API is different and more limited. It's C++ though and might be a little bit faster. I guess, this approach might be less attractive for you, given you're a web developer and probably already know JavaScript.