Der Blog von Benny Neugebauer » Programmierung http://www.bennyn.de Alles über die Informatik & Co. Fri, 18 May 2012 10:09:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 App direkt auf dem Windows Phone deployen http://www.bennyn.de/programmierung/windows-phone/app-direkt-auf-dem-windows-phone-deployen.html http://www.bennyn.de/programmierung/windows-phone/app-direkt-auf-dem-windows-phone-deployen.html#comments Fri, 18 May 2012 10:09:17 +0000 bennyn http://www.bennyn.de/?p=3722 Wer als Entwickler seine Windows Phone Apps direkt auf dem Gerät testen möchte, der muss vorher folgende Schritte erledigen:

  1. Als Student bei Microsoft DreamSpark registrieren um kostenlosen Apps zu publishen
  2. Am App Hub registrieren
  3. Windows Phone Developer Registration auf dem Computer starten (wird zusammen mit dem Windows Phone SDK 7.1 installiert)

Das Endergebnis sollte dann so ausssehen:

Zum Deployen der App muss dann in Visual Studio nur noch Zune gestartet -und “Windows Phone Device” anstatt des Emulators ausgewählt werden. Viel Spaß beim deployen!

]]> http://www.bennyn.de/programmierung/windows-phone/app-direkt-auf-dem-windows-phone-deployen.html/feed 0 Check for HTML5 features with JavaScript http://www.bennyn.de/programmierung/javascript/check-for-html5-features-with-javascript.html http://www.bennyn.de/programmierung/javascript/check-for-html5-features-with-javascript.html#comments Thu, 17 May 2012 09:58:49 +0000 bennyn http://www.bennyn.de/?p=3671 There is no magic behind checking a web-browsers support for a specific HTML5 feature. If you want to check if a browser supports the latest HTML5 WebSocket API then you just have to take care if there is an object called “WebSocket” available via the DOM:

<script>
  if('WebSocket' in window){
    alert('Hurray! Your browser supports HTML5 WebSockets.')
  }else{
    alert('Sorry, but you are out of date!');
  }
</script>

Nevertheless, there are still people who want to include a fancy library for such an inspection. You can do the same with Modernizr:

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<script>
  if(Modernizr.websockets){
    alert('Hurray! Your browser supports HTML5 WebSockets.')
  }else{
    alert('Sorry, but you are out of date!');
  }
</script>
]]> http://www.bennyn.de/programmierung/javascript/check-for-html5-features-with-javascript.html/feed 0 HTML5 WebSocket-Server mit Java und Client mit JavaScript http://www.bennyn.de/programmierung/java/html5-websocket-server-mit-java-und-client-mit-javascript.html http://www.bennyn.de/programmierung/java/html5-websocket-server-mit-java-und-client-mit-javascript.html#comments Wed, 16 May 2012 10:57:45 +0000 bennyn http://www.bennyn.de/?p=3686 Zur Demonstration von HTML5-Websockets habe ich mit webbit einen einfachen WebSocket-Server geschrieben, der Nachrichten entgegen nimmt und diese Nachrichten wieder an den jeweiligen angemeldeten Client zurück schickt. Ein solches Beispiel nennt man auch Echo-Server.

Server

Server.java

1
2
3
4
5
6
7
8
9
10
11
12
13

import org.webbitserver.WebServer;
import org.webbitserver.WebServers;
import org.webbitserver.handler.StaticFileHandler;
 
public class Server {
 
  public static void main(String[] args) throws Exception {
    WebServer webServer = WebServers.createWebServer(8080);
    webServer.add(new StaticFileHandler("/static-files"));
    webServer.add("/websocket-echo", new WebSocketSampleHandler());
    webServer.start();
  }
}

WebSocketSampleHandler.java

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

import org.webbitserver.BaseWebSocketHandler;
import org.webbitserver.WebSocketConnection;
 
public class WebSocketSampleHandler extends BaseWebSocketHandler {
 
  private int connections = 0;
 
  @Override
  public void onOpen(WebSocketConnection connection) {
    this.connections++;
    connection.send("This is the webserver saying Hello! :)<br/>"
            + "Total No. of subscribers: " + this.connections + ".");
  }
 
  @Override
  public void onClose(WebSocketConnection connection) {
    this.connections--;
  }
 
  @Override
  public void onMessage(WebSocketConnection connection, String message) {
    connection.send("The server has received the following message:<br/>"
            + message);
  }
}

Dependencies from pom.xml

1
2
3
4
5
6
7
8
9
10
11
12

<dependency>
  <groupId>org.webbitserver</groupId>
  <artifactId>webbit</artifactId>
  <version>0.4.6</version>
  <type>jar</type>
</dependency>
<dependency>
  <groupId>org.jboss.netty</groupId>
  <artifactId>netty</artifactId>
  <version>3.2.7.Final</version>
  <type>jar</type>
</dependency>

Client

connect.html

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
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML5 WebSocket-Client</title>
    <script>
      var socket;
 
      function sendMessage(){
        var message = document.getElementById('userInput').value;
        socket.send(message);
      }
 
      function showMessage(text) {
        document.getElementById('message').innerHTML = text;
      }
 
      function subscribeToWebSocket(){
        if('WebSocket' in window){
          socket = new WebSocket('ws://localhost:8080/websocket-echo');
          socket.onopen = function(){
            showMessage('Connected to WebSocket.');
          };
          socket.onmessage = function(msg){
            showMessage(msg.data);
          };
          socket.onerror = function(msg){
            showMessage('Sorry but there was an error.');
          };
          socket.onclose = function(){
            showMessage('Server offline.');
          };
        }else{
          showMessage('Your browser does not support HTML5 WebSockets.');
        }
      }
    </script>
  </head>
  <body onload="javascript:subscribeToWebSocket()">
    <input id="userInput" type="text">
    <button onclick="javascript:sendMessage()">Chat</button>
    <div id="message"></div>
  </body>
</html>

Das Beispiel funktioniert mit allen HTML5 WebSocket-kompatiblen Browser und wurde erfolgreich getestet mit Firefox 12.0 und Google Chrome 20.0.

]]> http://www.bennyn.de/programmierung/java/html5-websocket-server-mit-java-und-client-mit-javascript.html/feed 0 Vergleich von Tweening und Easing in KineticJS & CreateJS http://www.bennyn.de/programmierung/javascript/vergleich-von-tweening-und-easing-in-kineticjs-createjs.html http://www.bennyn.de/programmierung/javascript/vergleich-von-tweening-und-easing-in-kineticjs-createjs.html#comments Tue, 15 May 2012 13:05:40 +0000 bennyn http://www.bennyn.de/?p=3675 Die folgenden zwei Beispiele zeigen, wie das Tweening und Easing mit KineticJS und mit den CreateJS-Bestandteilen EaselJS und TweenJS funktioniert. Das Beispiel zeigt ein HTML5-Logo in der linken oberen Canvas-Ecke und transformiert dieses Logo beim Anklicken in Richtung Mitte.

CreateJS

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
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CreateJS: EaselJS & TweenJS</title>
    <style type="text/css">
      * { margin: 0; padding: 0; border: 0; }
    </style>
  </head>
  <body>  
    <canvas id="container" width="800" height="600"></canvas>
    <script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
    <script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
    <script>
      // Set-up stage
      var container = document.getElementById("container");
      var stage = new Stage(container);
      stage.mouseEventsEnabled = true;
      // Set-up layer
      var layer = new Container();
      // Set-up image
      var image = new Image();
      image.src = "./images/html5-logo.png";
      // Append image to object
      var object = new Bitmap(image);
      object.x = 0;
      object.y = 0;
      // Recognize click on object
      object.onPress = function(event){
        // Tweening & Easing
        Tween.get(object).to({
          x: 222,
          y: 333
        },1000,Ease.bounceInOut);
      };
      // Add object to layer
      layer.addChild(object);
      // Add layer to stage
      stage.addChild(layer);
      // Render
      Ticker.setFPS(20);
      Ticker.addListener(stage, false);
    </script>
  </body>
</html>

KineticJS

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>KineticJS</title>
    <style type="text/css">
      * { margin: 0; padding: 0; border: 0; }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.4.js"></script>
    <script>
      // Set-up stage
      var stage = new Kinetic.Stage({
        container: "container",
        width: 800,
        height: 600
      });
      // Set-up layer
      var layer = new Kinetic.Layer();
      // Set-up image
      var image = new Image();
      image.onload = function(){
        // Append image to object
        var object = new Kinetic.Image({
          x: 0,
          y: 0,
          image: this,
          detectionType: "pixel"
        });
        // Recognize click on object
        object.on("click touchend", function(){
          // Tweening & Easing
          object.transitionTo({
            x: 222,
            y: 333,
            duration: 1,
            easing: "ease-in-out"
          });
        });
        // Add object to layer
        layer.add(object);
        layer.draw();
        object.saveData();
      };
      image.src = "./images/html5-logo.png";
      // Add layer to stage and render
      stage.add(layer);
    </script>
  </body>
</html>

I have chosen KineticJS because the "click touchend" still works if you use it in connection with this code (to prevent iOS bumping and scrolling on mobile devices):

<script>
  document.ontouchstart = document.ontouchmove = document.ontouchend = function(event){
    event.preventDefault();
  };
</script>

The object.onPress function of EaselJS will not work with the code above.

]]> http://www.bennyn.de/programmierung/javascript/vergleich-von-tweening-und-easing-in-kineticjs-createjs.html/feed 0 Windows Phone Entwicklungsumgebung aufsetzen http://www.bennyn.de/programmierung/windows-phone/windows-phone-entwicklungsumgebung-aufsetzen.html http://www.bennyn.de/programmierung/windows-phone/windows-phone-entwicklungsumgebung-aufsetzen.html#comments Mon, 14 May 2012 12:39:33 +0000 bennyn http://www.bennyn.de/?p=3700 Wer für Windows Phone entwickeln möchte, braucht so einige Tools. Damit das Setup auch ordentlich funktioniert, sollten die jeweiligen Tools in einer bestimmten Reihenfolge installiert werden, welche wie folgt aussieht:

  1. Microsoft Visual Studio 2010 Express ALL-IN-ONE ISO
  2. Microsoft Visual Studio 2010 Service Pack 1
  3. Games for Windows Marketplace Client
  4. Microsoft XNA Game Studio 4.0 Refresh
  5. Windows Phone SDK 7.1
  6. Microsoft Zune Software

Das Microsoft XNA Game Studio muss installiert werden, damit beim Kompilieren nicht der Fehler: “The target “GetCopyToOutputDirectoryContentProjectItems” does not exist in the project.” auftritt:

Die Microsoft Zune Software ist nötig, um die Windows Phone App auf einem angeschlossenem Smartphone zu testen.

Hinweis: Alle Links leiten zu den englischen Downloadversionen weiter, da dort die Menüs sehr gut verständliche Namen haben.

]]> http://www.bennyn.de/programmierung/windows-phone/windows-phone-entwicklungsumgebung-aufsetzen.html/feed 0