Mobile-Web-App

Thursday, June 19, 2014

Polymer: making Web Components accessible

Custom elements allow you to create your own encapsulated components on the web, however there are a number of questions that arise from this. How do you build elements that are accessible to everyone? Can they be navigated with a keyboard? How well do they work with screenreaders and ARIA? Learn how to create accessible elements that all your users can benefit from.

Wednesday, June 18, 2014

Polymer: Interacting with Google Services with HTML only

Google has over 250 APIs and services. Every API is different! Eric Bidelman shows you how you can interact with Google services without writing code!

Tuesday, June 17, 2014

Node.js + socket.io, emit events between server and client, bi-directionally.

server.js

var serverapp = require('http').createServer(handler);
var io = require('socket.io').listen(serverapp);
var fs = require('fs');

serverapp.listen(8888);

function handler (req, res) {
    fs.readFile("page.html",
        function (err, data) {
            if (err) {
                throw err; 
            }
            res.writeHead(200);
            res.end(data);
        });
}

io.sockets.on("connection", function (socket) {
    socket.on("event_button_clicked", function (data) {
        console.log(data.text);
        io.sockets.emit("event_upatetext", { value: "hello " + data.text});
    });
});

page.html

<html>
<head></head>
<body>
<h1>Hello World!</h1>
<p>from mobile-web-app.blogspot.com</p>

<form action="">
<input 
    type="text" id="intext"><br>
<input 
    type="button" 
    id="button1" 
    value="Click ME" 
    onclick="button_clicked(this);">
</form>
<p id="outtext"></p>

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect(document.location.href);

function button_clicked(button)
{
    socket.emit(
        "event_button_clicked", 
        { text: document.getElementById("intext").value });
}

socket.on("event_upatetext", function (data) {
    console.log("event_upatetext" + ": " + data.value);
    document.getElementById("outtext").innerHTML = data.value;
});
</script>

</body>
</html>

Sunday, June 15, 2014

Node.js + socket.io, receive data from client

Example to get data from client using Node.js + socket.io.

To use socket.io, you have to install it using npm
$ npm install socket.io

server.js

var serverapp = require('http').createServer(handler);
var io = require('socket.io').listen(serverapp);
var fs = require('fs');

serverapp.listen(8888);

function handler (req, res) {
    fs.readFile("page.html",
        function (err, data) {
            if (err) {
                throw err; 
            }
            res.writeHead(200);
            res.end(data);
        });
}

io.sockets.on("connection", function (socket) {
    socket.on("event_button_clicked", function (data) {
        console.log(data.text);
    });
});

page.html

<html>
<head></head>
<body>
<h1>Hello World!</h1>
<p>from mobile-web-app.blogspot.com</p>

<form action="">
<input 
    type="text" id="intext"><br>
<input 
    type="button" 
    id="button1" 
    value="Click ME" 
    onclick="button_clicked(this);">
</form>

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect(document.location.href);

function button_clicked(button)
{
    socket.emit(
        "event_button_clicked", 
        { text: document.getElementById("intext").value });
}
</script>

</body>
</html>

Saturday, June 14, 2014

Node.js example to handle POST method

server.js

var http = require("http");
var fs = require('fs');

fs.readFile('page.html',function (err, data){

    if (err) {
        throw err;  
    }
    var htmlBody = data;
    
    http.createServer(function(request, response){
        
        console.log("request.method: " + request.method);

        request.on("data", function (data) {
            console.log("data: " + data);   
        });
        
        request.on('end', function () {
            console.log("end:");
            response.writeHead(200, {"Content-Type": "text/html"});
            response.write(htmlBody);
            response.end();
        });
    
    }).listen(8888);
        
});

page.html

<html>
<head></head>
<body>
<h1>Hello World!</h1>
<p>from mobile-web-app.blogspot.com</p>

<form method="POST">
Input: 
<input type="text" name="intext"><br>
<input type="submit" value="POST">
</form>

</body>
</html>

Thursday, June 12, 2014

Node.js load external html file

Example to load html code from external file, instead of code in js.

server.js

var http = require("http");
var fs = require("fs");

http.createServer(function(request, response){
    
    fs.readFile("page.html", function (err, data){
        if (err) {
            throw err; 
        }
        response.writeHead(200, {"Content-Type": "text/html"});
        response.write(data);
        response.end();
    });
    
}).listen(8888);

page.html

<html>
<head></head>
<body>
<h1>Hello World!</h1>
<p>from mobile-web-app.blogspot.com</p>
</body>
</html>

Return html code in Node.js

var http = require("http");

http.createServer(function(request, response){
    
    var htmlbody = 
        "<html>" +
        "<head>" +
        "</head>" +
        "<body>" +
        "<h1>Hello World!</h1>" +
        "<p>from mobile-web-app.blogspot.com</p>" + 
        "</body>" +
        "</html>";
        
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(htmlbody);
    response.end();
}).listen(8888);

- Node.js load external html file