Während die Lösung
|
1 |
$state.go($state.current, {}, {reload: true}); |
für mich nicht funktioniert hat, tut es allerdings diese:
|
1 |
$state.go($state.current.name, {}, {reload: true}); |
Der zweite Parameter hält die state-Params, also zB $state.params.
(Angular v1.2.14, nur zu Referenzzwecken gepostet)
jQuery:
|
1 2 3 4 5 |
$.ajaxPrefilter(function(options, originalOptions, jqXHR) { var token = $("meta[name='_csrf']").attr("content"); var header = $("meta[name='_csrf_header']").attr("content"); jqXHR.setRequestHeader(header, token); }); |
Angular:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
angular.module("app", []) .controller("MyController", ['$http', function ($http) { // ... $http.get("/foo").success(function(data) { // ... }); }]) .config([ "$httpProvider", function($httpProvider) { var token = $("meta[name='_csrf']").attr("content"); var header = $("meta[name='_csrf_header']").attr("content"); $httpProvider.defaults.headers.common[header] = token; }]); |
Für die CSRF-Token siehe hier.
Optimizely: Wer als Teil einer Variation eigenen JS-Code ausführen möchte, muss diesen Code in
|
1 2 3 |
(function($) { /* code goes here */ })(window.jQuery); |
kapseln (Quelle).
BTW: Man sollte
|
1 |
/* ... */ |
statt
|
1 |
// ... |
verwenden, da das JS in eine Zeile minifiziert wird.
Zuerst Grunt, dann grunt-version installieren und konfigurieren, hier für verschiedene Deployments “testing”, “preview”, “release”:
*nicht vergessen, auch die Nummer in der package.json zu inkrementieren
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
version: { options: { }, testing: { options: { release: 'minor' }, src: ['package.json', '../my/path/version.php'] }, preview: { options: { release: 'minor' }, src: ['package.json', '../my/path/version.php'] }, release: { options: { release: 'major' }, src: ['package.json', '../my/path/version.php'] } } |
version.php enhält dabei eine Zeile in etwa in der folgenden Form (Zeile 2):
|
1 2 3 |
// separate line for grunt task: $version = '0'; $config['version'] = $version; |
wobei die ‘0’ durch die Versionsnummer aus der package.json ersetzt wird.
Zeile 3 würde vom Task nicht erkannt werden, das entsprechende Pattern gibt er aber im Terminal auch aus:
|
1 2 3 |
Pattern not found in file Path: ../my/path/version.php Pattern: /([^\-]version['"]?\s*[:=]\s*['"])([0-9a-zA-Z\-_\+\.]+)/g |
Apache kennt von haus aus nur Input Dialoge (korrigiert mich), und damit kann man natürlich “j”/”n”-Eingaben bauen (siehe Examples). Schöner ist aber ein richtiger Ja/Nein-Dialog, wie Javascripts confirm. Außerdem gibt es if/else nur mit Ant contrib, das nicht zwingend überall installiert ist. Bitte nennt mir eine schönere Lösung als die folgende, aber damit geht’s – Confirm-Dialoge und if/else-Verzweigung abhängig von der User-Eingabe:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<target name="_set URLs and ports" depends="use Proxy, setURLs, setURLsAndProxy"> </target> <target name="use Proxy"> <script language="javascript"> <![CDATA[ importPackage(javax.swing); var answer = JOptionPane.showConfirmDialog(null, "Enable proxy? (Probably no)", "", JOptionPane.YES_NO_OPTION); project.setProperty("answer", answer); ]]> </script> <condition property="useProxy"> <equals arg1="${answer}" arg2="0" /> </condition> </target> <target name="setURLs" unless="useProxy"> <echo message="set URLs" /> </target> <target name="setURLsAndProxy" if="useProxy"> <echo message="set URLs and proxy" /> </target> |
Die Targets “setURLs” und “setURLsAndProxy” werden nur abhängig von ${useProxy} ausgeführt, bzw nicht ausgeführt (if/unless).
Dateien lassen sich in Ant (auch rekursiv) mit fileset finden. Allerdings kann man mit Bordmitteln nicht pro gefundenem File einen antcall absetzen. Das Internet schlägt Ant-Contrib vor, da gibt es “for” und “foreach”, aber das zum Laufen zu bekommen bin ich gerade zu blöd. Warum liefern die ihr ant-contrib-<version>.jar nicht mit aus??
Egal. Was mit Bordmitteln geht, ist Javascript (Danke, Björn!). Dann kann man Dateien mit JS auslesen, und an antcall übergeben. Zusammen sieht das so aus:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<target name="_handle logging"> <script language="javascript"> <![CDATA[ importClass(java.io.File); // read files from ${project.dir} dir = project.getProperty("project.dir"); fs = project.createDataType("fileset"); fs.setDir( new File( dir ) ); fs.setIncludes( "**/log4j.xml" ); // iterate files: srcFiles = fs.getDirectoryScanner( project ).getIncludedFiles( ); for ( i = 0; i < srcFiles.length; i++ ) { // create antcall task, pass current file, execute: antcall = project.createTask("antcall"); antcall.init(); antcall.setTarget("handle log4j.xml"); param = antcall.createParam(); param.setName("file"); param.setValue(srcFiles[i]); antcall.execute(); } ]]> </script> </target> <target name="handle log4j.xml"> <echo message="processing file ${file}..." /> <!-- ... --> </target> |
Also zuerst mal sollte diese EaselJS-Geschichte nun nicht mehr nur auf der Startseite funktionieren – mea culpa!
Was EaselJS für mich so richtig interessant macht, ist die Tatsache, dass jedes Objekt auf dem Canvas eigenständig bleibt – so wie ich das Canvas-Element verstehe (als eine Art Bitmap/BitmapData), ist das nicht immer so? Dadurch kann man diesem kleinen Ball aus meiner Demo zum Beispiel einen Click-Handler geben, wie soeben geschehen.
Dabei ist mir Folgendes aufgefallen: Wenn ich tatsächlich nach und nach mehrere (ausgefeiltere) Demos bauen will, dann würde es der Übersichtlichkeit dienen, wenn ich diese voneinander separieren könnte. Am Liebsten in ihrem jeweils eigenen Objekt, von denen ich dann jeweils eines instanziiere. Nur: Wie funktioniert objektorientiertes Programmieren in JS? Meine JS-Kenntnisse sind etwas eingerostet, aber hier gibt es eine nette Basic- (!) Einführung.
Das Ergebnis kann man sich im Quellcode ansehen: Alle Variablen, die nur zur (bisher einzigen) Demo gehören, sind in “Klasse” “A” ausgelagert… I like! Nun könnte es eigentlich/vielleicht losgehen.
UPDATE:
Hm, andererseits wäre es auch interessant, “richtiges” OOP zu sehen, z.B. das Beerben von EaselJS’ Klassen. Angenommen, ich möchte ein TicTacToe-Spiel bauen, dann hätte ich Kreuze und Kreise, die beide (mir fällt grad kein besserer Begriff ein) Spielsteine (engl. “Tile”)sind, der wieder meinetwegen ein Shape ist. Wenn ich diese etwas ausgefeiltere Einführung als Ausgangspunkt nehme, sieht das so aus:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
Tile.prototype = new Shape(); Tile.prototype.constructor = Tile; Tile.prototype.g; function Tile() { this.g = new Graphics(); Shape.prototype.initialize.call( this, this.g ); } Circle.prototype = new Tile(); Circle.prototype.constructor = Circle; function Circle() { this.g.setStrokeStyle( 1 ); this.g.beginStroke( Graphics.getRGB( 0, 0, 0 ) ); this.g.drawCircle( 0, 0, 10 ); } Cross.prototype = new Tile(); Cross.prototype.constructor = Cross; function Cross() { this.g.setStrokeStyle( 1 ); this.g.beginStroke( Graphics.getRGB( 0, 0, 0 ) ); this.g.moveTo( 0, 0 ); this.g.lineTo( 18, 18 ); this.g.moveTo( 0, 18 ); this.g.lineTo( 18, 0 ); } |
Potential für Verbesserung sehe ich hier:
Meinungen?
So ein Blog ist ein tolles Spielzeug. Eigentlich wollte ich nur meine Tweets anzeigen. Dafür brauchte ich ein neues Theme (das alte hatte keine Sidebar^^). Das neue ist schick, aber hat da oben diesen grauen Header, für den ich eigentlich keine Verwendung habe… lange Rede, kurzer Sinn: Ich benutze es jetzt als Canvas für EaselJS, mit dem ich gerade rumspiele.
Mittelfristig möchte ich da random das anzeigen, was bei meinen Spielereien so abfällt. Bis auf weiteres muss es aber eine Abwandlung einer Demo von Mike Chambers tun.
Wer mit der Facebook-API für Actionscript Posts absetzen will, kann das direkt machen:
|
1 |
Facebook.api( '/me/feed', _publishPostHandler, params, URLRequestMethod.POST ); |
oder als Javascript-Overlay:
|
1 |
Facebook.ui( 'feed', data, null, null ); |
oder als Pop-Up
|
1 |
Facebook.ui( 'feed', data, null, 'popup' ); |
Das data-Object beinhaltet die in den Docs unter “Publishing” beschriebenen Parameter.
Wenn man einen Facebook Tab in der Höhe ändern will (default ist 520×800), dann findet man dazu einige Vorschläge im Netz. Die meisten gehen davon aus, dass der Tab in FBML angelegt ist, was er aber nicht mehr sein muss; stattdessen kann man auch einen simplen IFrame benutzen. Die Lösung, die in dem Fall für mich funktioniert hat:
|
1 2 3 4 5 |
<div id="fb-root"></div> <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> <script type="text/javascript" charset="utf-8"> FB.Canvas.setSize(); </script> |
an das Ende des body hängen, also direkt vor </body>. Wichtig: Der div “fb-root”. Viele Lösungen im Netz basieren offenbar darauf, dass ein solches Element schon da ist – was zumindest bei mir nicht der Fall war.
Ich habe für den body außerdem padding und margin auf 0, sowie overflow auf hidden und height auf die Höhe des IFrames gesetzt.