I posted this onto the durandal discussion groups, but want to cover my bases on it:
https://groups.google.com/forum/#!topic/durandaljs/PWgPUHcpzic
Basically, I want to see if anyone has successfully wrapped an existing control that is the complexity of the Mozilla PDF Viewer (http://mozilla.github.io/pdf.js/web/viewer.html) into a Durandal or Angular control, and been successful.
I know for other things, like date pickers, it's possible, but with this particular control, it's doing a lot with canvas and a few other interesting controls.
Any ideas on how I can accomplish this?
Can we use a knockout binding to accomplish this?
How do we control the positioning of this widget?
Yes, you would write a custom Knockout binding and wrap that binding in a Durandal widget. As for positioning, that's accomplished with CSS (or dynamically with a CSS Knockout binding).
Related
We have a large number of angularJS 1.5 directives (around 100) that we use throughout our applications. We also use slickgrid almost everywhere to display mass amounts of data. A project has recently come up where it would be ideal to be able to use our directives within slickgrid cells. So I've been trying to write a slickgrid editor to generate our directives when you go to edit one of the cells.
It seems as though angularJS doesn't pick up on the directive (because slickgrid doesnt operate within angular) and doesnt attach the element to its lifecycles. so basically the base element and its settings will appear in the HTML like this:
<div class="slick-cell l2 r2 active selected" title="">
<custom-directive></custom-directive>
</div>
but since angularJS doesn't process the directives there's no visible element in the view and none of the transcluded elements are created.
I've tried using $compile to sort of pre render the elements and then send them to slick grid, but that results in multilink errors which I'm not sure how to resolve.
I've also tried using a JS template with the hope that the template could be rendered and then used in a slickgrid editor later, but I haven't had success with that as of yet. I am still trying to make this approach work since I've seen other examples of using templates with slickgrid, but they aren't using angularJS so my situation doesn't quite fit to theirs.
To summarize I'm looking for suggestions on how I might approach this problem. I know slickgrid isn't technically supposed to be used in this fashion but there has to be a way to make this work. Reusing 100+ pieces of code to extend functionality here would be a very huge win.
We have a Angular 1.x app. Each screen/layout has multiple widgets. We have new requirement to inject a help icon into every widget. To make the setup less intrusive, we have come up with a controller which looks up for the widgets and then injects the icon dynamically.
I would like to ask the UI experts here regarding the appraoch to be used to select the widgets (and hence inject the icon into them). Is selecting by a CSS selector better than selecting by ID (say widget ID)? What are the pros and cons of both approaches?
Thanks,
Midhun
I believe the best way is to create attribute level directive instead.
it can be parameterized like help-article="create_category" or even using several attributes
it's safer to keep classes and id for styling while linking logic to custom attributes
more expected in angular world
I'm very new to AngularJS and so far I'm loving it.
I read that wrapping external libraries into directories is the kosher thing to do, and I understand why that makes sense.
In my efforts to create a 'slickgrid' directive, I found very little info on the web. This question over here provides an example of slickgrid as a directive: Slick Grid wrapped in directive (angular), some options not work (resize and drag&drop columns)
But is that the correct way of doing it? The way that person did it, every <div slickgrid> will initialize with the same settings and data.
In my app, I'll need many instances of slickgrid, and columns will differ from instance to instance, as well as the data, of course.
So how should I link a particular <div slickgrid> to the data that is supposed to display then?
thank you very much for your time
as SlickGrid has way too much options - there's no really big sense in writing a directive, that fully incapsulates it. You should better initiate different grids in different controllers. And maybe move column and formatter definitions to a separate service
So the code will be something like that:
angular.module('app').controller('grid1controller', function(){
...
$scope.grid = new Slick.Grid("#grid1", $scope.data, grid1columns, grid1options);
...
})
I'm switching from using JQM and Phonegap to using Topcaot and a few smaller libraries to take care of transitions and such. One thing I haven't found a micro-library for is the navigation.
While many site I've seen say to create the UI and content dynamically through javascript, it does seem like a daunting task do to the amount of pages I would need to create. Similar to JQM, I want to be able to separate my different pages as different html files that ajax load them into the DOM, but in an optimized way that is fast and doesn't cary the weight of JQM.
TO anyones knowledge does such a library exist or would this be a library I would have to write? It doesn't seem like it would be an overly complicated task, especially if I would use jquery. Any ideas of help is appreciated.
try angularjs. Here there's an example with topcoat: http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/
Angularjs is very different from JQM but you should give it a try.
Otherwise, if you don't like angularjs you can find a more traditional approach at this page: http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
Hope this helps
Here you are - new plugin based on coenraets css transitional solution: https://github.com/linslin/pagingSlider
Features:
Paging with pagingSlider
default pageSlider actions
Pagebrowser
Totaly plugable like pageSlider
if you want, pagemenu to switch directly to a page
touch events
Consider looking at Topcoat Touch (Github Project), it is basically a micro library for transitions and events (5k minified and gzipped) -- full disclosure, I am the author of Topcoat Touch.
It is a very simple framework that uses Topcoat to create the UI, inspired by jQT and to a lesser extent jQuery Mobile. It can be either a single html document with multiple pages contained within the same document, or using a collection of controllers and templates. It uses a collection of optional libraries to provide most of the functionality for a mobile framework and has a generator for Yeoman to get the scaffolding up quickly.
I haven't used it, but Kendo UI Mobile is similar to JQM and may fit your needs: http://www.kendoui.com/mobile.aspx
Sencha Touch seems like an amazing way to develop mobile apps. I've seen posts by people incorporating Jquery, D3.
At the same time the posts describing customizing controls seems to be fairly narrow.
Adding the picture of a kitten next to the slider and labeling the slider seems kinda tame compared to what ios can do in terms of custom controls, at least in terms of examples available. Most blog posts imply you can extend the control objects in Sencha or the CSS file.
These posts are not quite what I'm looking for - that's my problem. I can't see any examples of anyone changing default controls in Sencha touch, but they make it sound as if it might be possible to do anything.
This is my question:
Is Sencha Touch able to build an iOS or Android App incorporating any javascript library or HTML5? Are there any limitations here?
To give an example I trying to implement a custom slider, where a touch along a continuous line or a circle like this color selector will enter new values. Further if you incorporate a library like protovis or D3 (or Raphael charts) can Sencha display anything the graph canvas element will otherwise display? Will it take touch input and interact with the graph libraries the way that the HTML5 graph does?
The post you mentioned is not about customizing controls, it's about displaying a list from bound store, instead of of using just Ext.XTemplate (the system with Ext.view.View) to generate HTML, it uses ComponentView to generate Ext.Components instead.
It's hard to tell what you're asking, what in particular are you trying to do?
To address some of the questions you added:
Charts in Sencha are implemented using Raphael, which uses SVG, therefore all the elements in the chart can be interacted with using HTML events.
Everything that Sencha generates is valid HTML, you can listen to HTML events, but components usually abstract the lower level events into something that is easier to consume, (for example a data view abstracts the click so that it passes the record being clicked along with the event).
Therefore, the answer to the question is, YES, Sencha can co-exist with regular HTML. If you want the full benefit of the framework, you should always create an Ext.Component so that your components can be easily used within the framework's layout containers.
It's very easy to misuse Ext when trying to write regular HTML and still place that within the layout rendering pipeline. Ext.Component has a built in way of creating HTML out of templates, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-data and http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl