I know how to create a JS-Native bridge in iOS through pure JS code (no external frameworks), but I'm wondering does anything change when i use Backbone.js? If yes, then can anyone please explain.
You could use something along those lines:
yourBackboneObject.on('all', function(eventName) {
var args = Array.prototype.slice.call(arguments);
args.shift();
NativeBridge.call(eventName, args);
});
and in the object:
this.trigger('someiOSfunction', someArg, someOtherArg);
Related
I'm doing some studies using the Pixijs library, which I find amazing. I'll also have a look into Fabricjs, that seems to have a smaller footprint.
I've been working with Angularjs for some time now and I like conventions, instead of taking time in each project doing configuration and organizing code differently every time.
I would like to hear from some body who experienced Pixijs (or similar) with a framework to organise the code.
I understand that Angularjs is MVVM, but let me know about any tips or suggestion that you may think of?
I did some research this far and a few things came to my mind, such as Browserify (I do believe in convention instead of configuration like I've mentioned though and maybe this wouldn't be the best tool for me).
Kinda old question, but this is something I was looking for myself when starting out with PIXI, so I hope it could be of help to someone to get started.
I use the Revealing module pattern and separate the application into separate files/modules, and then use Browserify to create the application bundle. The HTML loads the app.js bundle which stems from the app.js source below.
index.html: Load your libs (PIXI et al) in <head> and then your app.js in the <body>.
app.js source example:
(function() {
// App.js is the "bootstrap" that loads dependencies, takes care of pre-loading etc.
// I have a template of this which I copy into any new project and use as a checklist.
var core = require("./core.js"); // Use a dummy module as application-wide namespace for easy access
// Any external modules (f eg node modules) could go here
core.utilityLib = require("node-lib");
// Application modules here
core.myModule = require("./myModule.js");
// core.myModule2 = require("./myModule2.js"); // .. you get the idea
// Our main application module
core.main = require("./main.js");
// Init function to run when DOM/scripts have loaded
var init = function() {
// I have a generic screen module which sets up PIXI renderer depending on device compatibility using Modernizr (or weapon of choice). To keep it simple for the sake of the example, lets just create our renderer directly:
core.renderer = PIXI.autoDetectRenderer(screen.innerWidth,screen.innerHeight,{resolution:window.devicePixelRatio});
// I also use a generic loader module that wraps PIXI.loader, taking a list of assets from a config file. Let's just call PIXI.loader directly for now:
PIXI.loader
.add({name:"myasset",url:"/myasset.png"})
.on('progress', loadProgressFunction)
.once('complete',loadCompleteFunction)
})
.load();
}
window.onload = init; // Tell browser to call init function when loaded
// Optional loading progress bar
var function = loadProgressCallback(e) {
}
// Call when mandatory assets has been loaded
var loadCompleteFunction = function() {
myModule.init(); // Init any mandatory modules, f eg to instantiate a player
main.init(); // Tell our main application/game module that we're ready to do fancy stuff
}
// Method to make things move
var animate = function() {
// Send juice to modules that needs to be juiced (or use a ticker module on per-module basis).
// core.main.animate();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate); // See comment below
}());
Comment: PIXI has an built-in requestAnimationFrame alias that takes care of fallback. If not using PIXI, you could use Paul Irish' gist.
core.js:
module.exports = {}; // Just a dummy object to create a module scope that all the modules
// can use to communicate with each other, without running into circular reference problems
main.js:
// Main application/game module
module.exports = (function() {
// Dependencies
var core = require("./core.js"); // This way we can easily access all the necessary modules
// Exports
var exports = {}; // Everything put into this object will be "public"
// Vars
var stuff = 1; // Module vars
exports.init = function() {
// Application magic starts here :)
}
// Some other public method ...
exports.publicMethod = function() {
}
// Some private method
var privateMethod = function() {
}
return exports; // Expose public functions to other modules
}());
Any additional modules can be organized in pretty much the same way as main.js.
Run browserify dev/app.js > html_root/app.js each time you want to "compile" your bundle (or create a Makefile, gulp-, node-, or webpack-script - whichever you prefer).
Officejs library can be used inside angular controller as following way by adding library reference https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js to index page
function sendRequest() {
// Create a local variable that contains the mailbox.
var mailbox = Office.context.mailbox;
mailbox.makeEwsRequestAsync(getItemRequest(mailbox.item.itemId), callback);
}
function callback(asyncResult) {
var result = asyncResult.value;
var context = asyncResult.context;
// Process the returned response here.
}
is there any better way to handle these kind of libraries inside angular js project ?
Yeoman generater is there. it has option to create angular project
https://www.npmjs.com/package/generator-office
I know that Angular provides awesome two way data binding on the client side, but I want more!
I'm looking for the right way to hook up angular with my server side (SailsJS which includes socket.io).
Thanks!
Have you tried angular-sails-bind? (https://github.com/diegopamio/angular-sails-bind) I bet you haven't, as I've just released to the world a couple of minutes ago :). I made it for my own project and then decided to put it as a separated library so everybody could benefit and I could have my first experience developing a bower package.
I hope it could help you.
BTW: it works with sails 0.10 (as some things, like topic names had changed since 0.9). If you need to make it work with 0.9, just let me know and I'll happy to help.
I would recommend trying out https://github.com/btford/angular-socket-io that allows to simply use socket object in your controllers like that:
var socketApp = angular.module('socketApp', [
'btford.socket-io'
]);
socketApp
.controller('messageListController', ['$scope', 'socket', function($scope, socket) {
$scope.messages = [];
$scope.postMessage = function(message) {};
socket.on('connect', function () {
$scope.$on('socket:update', function(event, data) {
$scope.messages.push(data);
});
$scope.postMessage = function(message, callback) {
socket.emit('post', message, function(commitedMessage) {
$scope.messages.push(commitedMessage);
callback(commitedMessage);
});
};
});
}]);
We are planning on versioning our key resources at build time by appending a version to the filename (e.g. main-v1_1.js)
We are learning how to use require.js to manage our resource loading. I would like to be able to specify a postfix in the require.js configuration that will be appended to the resources being loaded.
var version = "1_1"; //inserted at build time
requirejs.config(
{
postfix: "_" + version //is there something like this?
}
);
require([main]...); //would load main_1_1.js
Suggestions? Thoughts? Better ways to handle this situation?
Thank you.
Sounds like this would be suited to the map configuration option.
requirejs.config({
map: {
'some/newmodule': {
'foo': 'foo1.2'
},
'some/oldmodule': {
'foo': 'foo1.0'
}
}
});
When 'some/newmodule' does require('foo') it will get the foo1.2.js
file, and when 'some/oldmodule' does require('foo') it will get the
foo1.0.js file. This feature only works well for scripts that are real
AMD modules that call define() and register as anonymous modules.
We ended up using the urlArgs parameter to append a version querystring.
http://requirejs.org/docs/api.html#config-urlArgs
i'm trying to use the "Popover " functionality in the titanium.
i went throught the kitchensink and built a code in my application but some how
i'm getting this error:
Result of expression 'Ti.UI.iPad' [undefined] is not an object.
i dont know what i'm doing wrong.
here is my code:
var RLWindow=Ti.UI.createWindow({backgroundColor:'#700'});
var LBBar=Titanium.UI.createView({height:60,left:0,right:0,top:105,backgroundImage:'Images/toolbar.jpeg'});
var ShowNotes=Ti.UI.createButton({color:'blue',font:{fontSize:20,fontWeight:"bold"},right:10,title:'Today Notes',height:40,width:120});
LBBar.add(ShowNotes);
RLWindow.add(LBBar);
ShowNotes.addEventListener('click',function(e){
var popover = Ti.UI.iPad.createPopover({
width:300,
height:250,
title:'Test Popover',
arrowDirection:Ti.UI.iPad.POPOVER_ARROW_DIRECTION_UP
});
popover.show({
view:button,
animated:true
});
});
please help me with this situation..
Thank you
Clear out your build/iphone folder. I notice sometimes when you add a new platform UI object the compiler doesn't include the required Ti library in the xcode project.
This only works on the iPad, not on the iPhone. I am assuming you are using that? For iPhone you should use a regular window.
That being said, what is button? Stating the name, I guess that is your problem, because you need a view in that. If I do this (below) it seems to be working perfectly for me:
var popover = Ti.UI.iPad.createPopover({
width:300,
height:250,
title:'Test Popover',
arrowDirection:Ti.UI.iPad.POPOVER_ARROW_DIRECTION_UP
});
var win = Ti.UI.createWindow({backgroundColor: '#FFF'});
win.open();
var v = Ti.UI.createView();
win.add(v);
popover.show({
view: v,
animated:true
});