XML vs JSON

(by AXDS)

Both are very similar but used in different situations. Both are build around ‘key=value’ relationships.

‘JSON’ stands for ‘JavaScript Object Notation’.
‘XML’ stands for ‘extensible Markup Language’.

JSON:

  • (+) Fast, lightweight and compact.
  • (+) Same data types as Javascript.
  • (+) It’s documentation and design is simple and clear.
  • (-) Only supports a few data types.
  • (-) Sometimes syntax can be too simple.

XML:

  • (+) Can easily be split up and worked on my many different people.
  • (+) Can be used for all kinds of purposes. Very generalised.
  • (+) Support for namespaces.
  • (+) Can be manipulated and traversed using XPath/XQuery.
  • (-) More overhead than JSON. Resulting in a lot more words and space for the same information.

In general: JSON is better for lightweight scripting, XML is better for a secure ‘fixed’ markup.

Advertisements

Quickly create a ‘Website Viewer’ Android App using WebChromeClient.

(by AXDS)

Follow the bold words to speed up the tutorial 🙂

Create a new Android Studio Project. For this simple application a blank template will be a good choice.

Once it has all loaded replace the contents of the ‘mainActivity.xml’ file with:


<!--?xml version="1.0" encoding="utf-8"?--> <webview xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent"></webview>

Add to the ‘AndroidManifest.xml’:

<uses-permission android:name="android.permission.INTERNET"> </uses-permission>

Replace nearly all the contents, don’t remove your package declaration of ‘mainActivity.java’ with:

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebPageLoader extends Activity
{
    final Activity activity = this;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        this.getWindow().requestFeature(Window.FEATURE_PROGRESS);
        setContentView(R.layout.mainActivity);
        WebView webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);

        webView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress)
            {
                activity.setTitle("Loading...");
                activity.setProgress(progress * 100);

                if(progress == 100)
                    activity.setTitle(R.string.app_name);
            }
        });

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url)
            {
                view.loadUrl(url);
                return true;
            }
        });

        webView.loadUrl("http://www.informaticskb.wordpress.com");
    }
}

Connect your phone and run the application!

Display raw code in WordPress posts

(by AXDS)

Displaying some HTML code, inside of a post that renders out HTML, is tricky.

In order to display the code for viewing rather than to run, we need to wrap WordPress tags around it.

Example:

scwp

 

 

 

Displays:

 

<div class="exampleDiv">Hello World</div>

 

The language can be selected to allow for syntax highlighting. The common languages are available such as ‘html’,’javascript’,’css’,’csharp’ etc. More are online.

How to: Create a WordPress post

(by AXDS)

The ‘Create a New Post’ button should be in the top right of the site. If it doesn’t appear you might not have author permissions in order to create posts.

wp1

Clicking this will take you to the post editor:

wp2

The image above shows the editor in the ‘Visual’ tab, this will give an idea of how the post will look. Sometimes this can be inaccurate, so take it as a rough estimate. The HTML tab allows you to create a post using element tags. You can also put scripts and code in this tab.

wp3

Once you’ve finished the post content, on the left hand side there is the menu for posting and tagging. Open up the ‘Categories & Tags’ section.

wp4

Pick or create some tags that are relevant to the post. This will allow the post to be categorised on the WordPress site,

wp5

Finally you can either preview the post, or go straight to the publishing

wp6

Tada!

How to: AngularJS

(by AXDS)

Example: http://jsfiddle.net/jc5au247/

Angular is a JavaScript Framework that extends HTML with directives and attributes. When an Angular app is set up on an element it sets up a ‘scope’. The JavaScript deals with what happens to the values inside this scope. This is very useful for forms, inputs, or displaying data.

The AngularJS script can be referenced using:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Once the script has been added the functionality should be all there.

There are many ‘ng-directives’ that can be used inside HTML elements. All these are online.

The main directive is ‘ng-app’ which sets up an AngularJS section. This can be set to be for the whole page by including it in the <html> as <html ng-app=”myApp”> or inside any element.

For my example I’ll set it up in a <div>:

<div ng-app="myApp">

The next directive I’ll use is ‘ng-controller’. This defines a controller inside of the ‘ng-app’. This controller, once referenced, handles all the ‘ng-model’ elements included. The ‘ng-model’ elements just bind a name to the element so it can be used.

<div ng-app="myApp">
<div ng-controller="myCtrl">
<input ng-model="fullName">
<h1>My name is {{fullName}}</h1>
<div ng-controller="myCtrl">
</div>
</div>

Inside the ‘ng-controller’, a scoped variable name can be called using double brackets:

{{variable}}

The AngularJS app is finished off by including script and calling a function to build a module. In this same script we can manipulate the controller scope.

<script>

//Sets up the App
var app = angular.module('myApp', []);

//Sets up the Controller
app.controller('myCtrl', function($scope) {
//Looks for the model 'fullName' in the controller and sets it.
$scope.fullName= "John Smith";
});

</script>

jQuery AJAX call to pass JSON to C# Method

(by AXDS)

Note: The C# method parameter needs to match the JSON key name.

C#:

[WebMethod]
public static void doSomethingCool(Object jsonDataName)
{
Debug.WriteLine(jsonDataName);
}

SCRIPT:

var jsonInnerData = {key1:value1,key2:value2};
var methodToCall = "webPage.aspx/doSomethingCool";
var jsonDataObject = JSON.Stringify({jsonDataName : jsonInnerData});

$.ajax({
type: 'POST',
url: methodToCall,
data: jsonDataObject,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function ()
{
alert('doSomethingCool executed.');
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
}
});