I'm writing some input bindings in Shiny, and want to build my functions into a package. The problem now is input bindings requires javascript code which is usually located in the www directory in the application directory, so the user need to copy the javascript file into his/her www every application he/she requires the package and use the input bindings.
And I want when the user of this package require()ed this package, the corresponding input binding jQuery definitions are automatically loaded with the app just as the native binding definitions are. Or does anyone knows other solutions for this situation.
You can place the javascript code in the inst folder in your package and declare that folder as a dependency. There are probably other ways, perhaps even better ways, but you can see as an example how I did this in my package. I created a colourInput widget that needed two javascript files: one for the input bindings, and one for the actual javascript library for the button.
Here is the folder where my javascript and css is kept (notice how it's under inst/www/shared/colourpicker), and here is the code I use to declare the javascript/css files as dependencies, and at the last line I attach the javascript/css dependencies to the button HTML.
It took me a while to understand how to implement this, but this is a working example, so you can look at this real code and follow a similar approach.
Related
I wish there were better instructions for installing and getting started with Semantic-ui on Meteor....please see below.
Any improvements/feedback welcome.
I just decided to post these because of some difficulties I had getting semantic-ui to work with Meteor. I figured out the few things I was not getting from various answers across various forums:
Install via CLI: meteor add semantic:ui flemay:less-autoprefixer (You don't need to worry about LESS)
Create an empty custom.semantic.json file in /client/lib/semantic-ui/custom.semantic.json. (Note this is NOT the lib folder that is outside the client and server folders - make a new lib folder. Putting it in the original lib will cause your app to crash because jQuery hasn't been loaded
Start meteor - the custom.semantic.json file will populate and all the semantic-ui files will be added to your project in the same folder.
Edit the file custom.semantic.json to select only the definitions and themes you want
If you are happy with the default values you will need to remove .custom.semantic.json to generate Semantic UI - in all likelihood you will want to delete this file.
Save the file and it will generate Semantic UI
It hasn't been an issue for me yet but it appears that if you are changing theme you still need to leave the default theme setting as true. This seemed to be causing people confusion.
I wanted to use the accordion and couldn't figure how to get it working. The HTML from the docs is very straightforward but I needed this JS to get me going:
Template.yourTemplate.rendered = function() {
$('.ui.accordion').accordion();
}
If anyone knows a better way, please jump in.
Hope this helps someone avoid the minor frustrations I had earlier today.
I just started using the feature that allows you to compile all TypeScript to a single .js file. The problem I ran into, as you'd expect, is that the entire .js file is executed, and not just the module(s) that I need my page to execute.
Are there any built in utilities that allow me to specify this? If not, what else can I use? I work with a team using source control, so a solution like a NuGet package that can automatically get installed for my colleagues when they use the project is preferable.
The problem I ran into, as you'd expect, is that the entire .js file is executed, and not just the module(s) that I need my page to execute.
You shouldn't have code randomly put at a global level. The global level of your code be just functions and class that are inert by them selves.
Then have the UI call these functions / classes based on current html. Some UI framework (like angular) can help you do this seperation in a neat way (example : https://www.youtube.com/watch?v=Km0DpfX5ZxM&feature=youtu.be)
I have the Less package loaded in my Meteor application and it is working fine. Now I need to allow the users of my app. to override my less variables. I have looked at :
less.modifyVars({
'#canvas': '#5B83AD'
});
but my app. is saying that 'less is not defined'. Can someone suggest how this can be done?
Less files can only be modified up to the point they're compiled to css files. This happens when you deploy your Meteor app.
It's not possible to change less variables at runtime. You would have to manipulate the DOM instead. Jquery is able to do this by targeting the DOM elements you want to change. You would have to tag them with a class.
An approach this way make work for you:
<div class="canvas"></div>
Then you could edit it at runtime using Jquery:
$(".canvas").css({background: '#5B83AD'});
Edit: I think the code you're refering to is the less.js client side file from https://github.com/less/less.js/. There's a bit more info under 'Client side usage' on http://lesscss.org/
This is a bit different from the Meteor less package, which is exclusively a server side compiler during development.
If you downloaded the less.js file (from https://github.com/less/less.js/archive/master.zip) and placed it in your /client/compatiblity folder you could use it in the way you wish. Keep in mind you may have to remove the Meteor less package since you want to load them raw, you will also need to reference them manually as Meteor will ignore the less once you remove the less package.
I get an error as soon as I add jQuery and Bootstrap. The three files that I add are
1) a_jquery-1.11.2.min.js // so that it is processed before 'b' in bootstrap
2) bootstrap.min.css
3) bootstrap.min.js
and they are located in /lib.
If I add bootstrap without jQuery, I get an error saying that Bootstrap needs jQuery. After I add jQuery I get the following error messages.
/Users/username/.meteor/packages/meteor-tool/.1.0.40.cbg34i++os.osx.x86_64+web.browser+web.cordova/meteor-tool-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:173
throw(ex);
^
TypeError: Cannot call method 'createElement' of undefined
at jb (app/lib/a_jquery-1.11.2.min.js:2:7547)
at app/lib/a_jquery-1.11.2.min.js:2:22045
at app/lib/a_jquery-1.11.2.min.js:2:22746
at c (app/lib/a_jquery-1.11.2.min.js:2:207)
at app/lib/a_jquery-1.11.2.min.js:2:212
at app/lib/a_jquery-1.11.2.min.js:6:3
at /Users/username/my_app/.meteor/local/build/programs/server/boot.js:205:10
at Array.forEach (native)
at Function._.each._.forEach (/Users/username/.meteor/packages/meteor-tool/.1.0.40.cbg34i++os.osx.x86_64+web.browser+web.cordova/meteor-tool-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
Does anyone know what I am missing?
EDIT: I also have a question about including the stylesheets. I include a CDN bootstrap in /client/views/layout.html but as soon as I delete the importing line and save a local bootstrap.min.css file in /lib the styles start breaking. Why does this happen?
The /lib folder is for shared code, putting client-side frameworks in it will cause you a lot of trouble since Meteor will try to run it on the server too (and miserably fail at finding a window object). Place any client-only code in the client folder instead.
Plus, I would suggest taking a look at packages rather than doing it yourself, a lot of people have already done what you're going through.
If you want to have local style sheets, either put them in the client folder (loaded immediately) or in the public folder (for delayed loading via an import). More about special folders in the documentation.
You can't put them in /lib since anything in there is also loaded by the server. /client/lib would be okay.
Note also that you don't need jQuery, that comes by default (it's used by Blaze).
Finally, I'd recommend using a bootstrap package. If you use this one then you'll by able to make use of all the mixins and also change the base varaibles cleanly. See this article for more information.
I have a form generated dynamically from a database table model:
I there a way to save that form to a *.ui file? I want to allow user to edit that form in Qt Designer.
Presumably there must be some limitations on what your users can add and edit?
If so, then maybe you could take a more structured approach and use QWizard to provide a simple interface for designing and editing forms. The wizard would generate ui files which would then be loaded in your application using the uic module (if you're using PyQt4, that is - because it does not include the QUiLoader class).
Of course, for this to work, you would need to adapt your current procedure for dynamically generating forms so that it also works with ui files.
EDIT
It looks like QAbstractFormBuilder provides an API for both loading and saving widgets as ui files. It is part of the QtDesigner module, which is now included in PyQt4.
Having said that, my brief experimentation with the load() and save() methods did not produce very useful results - but hopefully others will have more luck.
Personally, if I was designing an application like this, I would prefer to generate the ui files myself using a suitable XML library (either Qt's, or one of the several python standard library modules). The structure of a form layout is pretty simple and regular, so the ui files should not be too difficult to replicate. The major benefit of doing things this way is that it allows for complete control over the input and output.
There is a load(), but no save() in the QUiLoader:
http://developer.qt.nokia.com/doc/qt-4.8/quiloader.html#load
The UI file format is documented, and is XML. So you could write your own .UI file generator:
http://developer.qt.nokia.com/doc/qt-4.8/designer-ui-file-format.html
In fact, you could attack this problem the other way around. Instead of generating the dialog using programmatic widget API calls...instead generate a .UI file with XML. Then you can load it in your app or through QtDesigner.
(Depending on what your app is or is intended to do, you might also look into rethinking it as a QtDesigner plug-in...in which case this functionality might come for free.)