I'm using the Firefox Add-On SDK to port a Chrome extension to Firefox. In Chrome, it's trivial to load third-party libraries like Underscore or Backbone. In my particular case, I'm using jQuery, Underscore and Backbone to define models that communicate with cross-domain REST APIs.
It's unclear to me how you might do something similar in Firefox. From what I can see main.js corresponds directly to Chrome's background pages, but it doesn't appear there's a way to load js files.
Am I missing something?
Add-on SDK supports CommonJS modules sysem, same modules that are also used by nodejs
https://github.com/mozilla/addon-sdk/tree/master/app-extension
Underscore has a support for commonjs module format & there for can be loaded easily
https://github.com/documentcloud/underscore/blob/master/underscore.js#L54-L65
All you need is drop underscore in next to main.js and loaded it as follows:
var _ = require("./underscore")
I do believe backbone can also be loaded in a similar way as people have being using it
on nodejs.
It's won't work for the jQuery though, that's because context where add-on SDK modules
run is different from typical web page context with DOM, which is what jQuery is designed
to work with.
Now if you want to do cross domain requests there SDK comes with a module to do that:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/addon-kit/request.html
There is also another low level XHR module, that you could use instead:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/api-utils/xhr.html
So if you just want to write models and talk to REST API it should be pretty trivial, I'm
not sure what's the role of jQuery in your use case. It implies DOM and UI you want to
display. If so there is several modules in SDK that would let you add custom UI for the
firefox and you can probably find useful tutorial on that subject:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/index.html
Related
Edit: so apparently adding class="button" make it work... Can someone provide a reference on what other classes are there? We can't find any information on this.. Thanks
We are making an app in HTML5 using XDK, it has quite a few different views. We were planning to just link to another html page each time we want to go to a different view. But we quickly found out that hyperlinking does not work, is disabled, and button does not link either.
One of the people in my group said she saw an example about having a bunch of and then just show and hide them and use that as UI navigation... is that the only way?
Thanks in advance!
The Intel XDK doesn't insert any class definitions or require that you use a specific framework. It is a tool for assembling an HTML5 hybrid mobile app using the CSS, HTML and JS files that you supply.
If you look at the samples and the default "blank" project that is created when you create a new project you'll see that there may be references to one or more of the following "phantom" JS files:
intelxdk.js
cordova.js
xhr.js
The first two (intelxdk.js and cordova.js) are special "device API" JavaScript libraries. You won't actually find them in your project directory, they are automatically included when you use the emulator and when you build your project (which "wraps up" your HTML5 code and assets into a native wrapper that is specific to the target you are building -- it does not compile anything, it just converts it into a hybrid native/HTML5 container app that can be installed on the target platform that you built for).
The third one is a special helper JS library for dealing with CORS issues from within your app.
None of these three JS files define any classes or HTML tags, etc. They simply implement target-specific device APIs that consist of JavaScript on the "top end" and native code on the "bottom end." Your application only sees and interacts with the JavaScript interface, and only with the APIs that you need to use (which is totally optional).
For an intro to all of this, please see the Intel XDK Documentation page.
So, that means you determine which frameworks and structure your app takes. In other words, if you want to use Bootstrap and jQuery you can do so. If you decide to use the App Designer or the App Starter tools, they will define some classes that impact your layout. However, you are not required to use these tools to define your HTML and CSS, you can do it by hand or use your favorite UI framework library.
Keep in mind that your code is not being rendered by a desktop browser but the embedded "webview" that is part of the device. These webviews don't have the same memory and CPU resources that you're used to working with in a desktop browser, so you need to learn to be "lean and mean" for the best results. You are using HTML5 technologies to build a mobile app -- not creating a web site on a phone.
Hope this helps, please see our HTML5 web site for more background material. It's a little slim right now, but we're adding examples and background material as time and resources permit.
Hope that helps...
I am starting a jquery mobile/phonegap application. And would like to know if there is any way I can keep my code in seperate files so it is easier to manage. From all the reading I have done on jquery mobile it looks like all of your pages are in one file and are just seperated by divs like <div data-role="page" id="page-one"></div>. I guess I could try to make some type of a makefile that concatenated them all together, but it seems that most apps are pretty lengthy that they should have a solution for this. Keeping all the code in one file just seems impossible to maintain.
JQuery demo, three pages, all one source file:
http://demos.jquerymobile.com/1.1.0/docs/pages/multipage-template.html
You can just use normal links with jQuery mobile:
http://demos.jquerymobile.com/1.4.0/navigation/
It will "hijack" the link and use transitions to give you a native like animation. As Flatlineato pointed out you need to make each page confirm to the required markup, and you'll need to repeat your headers/footers etc on each included page.
Or you can use more complex solutions to dynamically change the content of your page, which can be stored in multiple files, like this other SO post:
including the header and footer in jquery mobile multiple page site
But I would also agree with Leo and say the jQuery mobile isn't the best choice for Phonegap, it's not that well optimized, and runs slower in the Phonegap webkit view than it does in native safari.
I've also switched to a custom navigation system and dropped jQM early on in my Phonegap development, but that was over a year ago, more recent versions may work better.
I think my personal API is what you are searching for:
https://github.com/charnekin/api
Demo example:
http://yopo.es/cordovapi/
jQuery Mobile allows you to have the pages in separate files. Obviously in each file must conform to the structure of the markup pages.
To point to another page in the link instead of the id you specify the correct file name. If the file then you enter multiple jquery mobile pages must also specify the id.
What JavaScript framework do you use successfully with Trigger.io? I mean client side JS app frameworks like backbone, knockout, ember, angular?
We use angular.js here but have some significant problems when using router for our app ... see details here https://groups.google.com/forum/?fromgroups#!topic/angular/XGDRAskA8qs .
Trigger.io and using angular.js router doesnt work together.(at least we could not get it to work)
Do you use some other JS framework you can recommend as working fine with trigger.io using application router capability? (I could see similar router feature in ember or backbone for example)
Although we don't endorse one particular library, and our goal is to be compatible with them all, I normally reach for Backbone first when starting a Trigger app. It's simple, lightweight but powerful and has a bunch of nice extensions.
Apart from the issues with Angular which we aim to have fixed as part of our next major release (probably end of July '12), we've not had reports of any snags with other libraries apart from Amber Smalltalk, which should be fixed in the same release.
We have demo apps using Backbone and Sencha here and here, and our initial demo app is written using jQuery Mobile.
I'm using jQuery, Backbonejs, Handlebars, Coffeescript, LESS as my framework - they are pretty much all from my Web development effort. Didn't have to change too much.
In fact, so far, I'm finding I have to simplify a LOT of things to get it down to a level where it fits the mobile environment.
Angular JS is one of the best contenders out there as far as JavaScript Frameworks. I ran all the way through the Angular tutorial, created a new Trigger app, and dropped in the tutorial app in place of the default scaffolding.
RAN NO PROBLEM WHAT SO EVER!!! IOS, Android, and WEB
Interestingly enough, I adapted the Angular tutorial with my own data from a server. Even works using XHR requests, and Cross Origin Resource Sharing.
In my opinion, build your app using Angular.JS + Zepto/Jquery.
Use either of those frameworks to add CSS Transitions to your app for your UI.
The reason I recommend making your own UI rather than using something like JQuery Mobile, or Sencha Touch 2 is for the past 3 days I have been doing extensive research and testing on numerouse JS Mobile UI Frameworks, and JQmobi is the only one that came close to being fast but it didnt look vary nice.
Making your own will reduce size of the app, give you full control, and keep the app running smooth..your using will never know its not native ;P
There are several application templates (and a Rails gem) that add HTML5 Boilerplate to a Rails application. So I investigated and put together an analysis of HTML5 Boilerplate for Rails. It seems HTML5 Boilerplate doesn't add much that isn't already there in a new Rails app. What's useful:
sample humans.txt file
example index.html file for a default application layout
viewport metatag
Google Analytics snippet
There's some CSS help like CSS normalization, placeholder CSS Media Queries, and CSS helper classes but it seems you'd get all of them and more with a CSS toolkit such as Skeleton, Twitter Bootstrap or Zurb Foundation.
Finally, HTML5 Boilerplate has lots of components for websites that need to support IE6, 7, and 8 such as IE conditional comments, Modernizr, and Chrome Frame. But if I'm not supporting IE6 and I'm using Twitter Bootstrap or Zurb Foundation I don't think I need these.
HTML5 Boilerplate is a good project that has lots of community input. There's a lot of good advice on its website. But for a Rails project?
Am I missing something? What is the value of HTML5 Boilerplate for a Rails application?
HTML5 Boilerplate has a few different features, typically borrowed from other projects.
A server config file for setting timeouts, turning sendfile on, gzipping, server expiration, etc. I believe their repo has a few different versions of these files for a few different servers (apache, nginx, node, lighttpd). You can find those config files here: https://github.com/h5bp/server-configs. From my understanding Rails doesn't have any type of equivalent for this.
It also comes with a custom build of Modernizr that checks for HTML5 and CSS3 features within the browser and then adds classes to your <html> tag so that you can utilize them within your stylesheets or javascripts. This allows you to target browsers with a fallback style or interaction if it didn't support the feature you were trying to use. One example for CSS may be something like border-image which doesn't have widespread support. You could apply border-image: for the browsers that can use it and for the others you would use the class that HTML5Boilerplate provides (html.no-borderimage) to provide a backup style. You could also check for these classes from your JavaScript to be sure you weren't targeting browsers with code they didn't need (or couldn't respond to). Rails doesn't have anything internally that would do this out of the box.
Respond.js is also packaged with Modernizr which gives you media queries support in browsers that don't already have it. You mentioned you weren't targeting IE6 but IE7 & IE8 don't support Media Queries (nor do a good amount of mobile browsers) and Respond.js would give you that support. Rails also doesn't have anything built in to handle this.
Modernizr relies on yepnope.js to load externals so that would be available to you as well. This library allows you to test for features and load certain scripts/styles based on the result of that test. This is helpful if you are bringing in files that only some browsers need. Rails doesn't do this.
PNG fixes. You probably don't need this if you aren't supporting IE6 but it does come packaged with some png fixes for legacy browsers (cough IE6). Rails doesn't really handle this type of thing on the front end on it's own.
Ultimately you could grab the pieces that you need and bring them into your application without bringing in the entire HTML5 Boilerplate (and fwiw, that's what I typically do as well). That said, your question is "what value does HTML5 Boilerplate bring to a Rails application?" and the answer is "a lot", depending on if these tools are useful based on what you are doing. HTML5 Boilerplate doesn't necessarily overlap Rails in any way.
You can get a full list of features, coding style recommendations at the HTML5 Boilerplate Docs
You'll also probably be interested in HTML5 Boilerplate for Rails Developers
Started working on Firefox add ons, which is done with JavaScript and XUL, and I find myself sorely wanting to use Dojo or someother kind of JavaScript like library, but I can't find one that exists. So I was thinking of starting a library by porting Dojo over to a Firefox add on specific fork. Get rid off the cross browser stuff, use array comprehension and other nice stuff available in Firefox's JavaScript engine. I worry about whether or not there's enough of a userbase who'd take advantage of this, but more than that I guess I'm wondering if there's already something like this? Google finds nothing.
Mozilla Corp developed a JavaScript library for this purpose: FUEL.
it is developed by John Resig the creator of jQuery.
To know how to use jQuery inside FF extension look at this similar question
jQuery, at least, functions perfectly well when embedded in a Firefox addon. I can't quote you names, but I've heard that several popular addons are already using jQuery.
Here's an article discussing using jQuery within XUL and some of the hoops you may need to jump through.
It is fairly common to embed jQuery in firefox extensions.