Mittwoch, 24. Februar 2016

JavaScript >>> save Objects/Arrays in localStorage/sessionStorage

To save objects or arrays in localStorage/sessionStorage you should JSON.stringify the object or array:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };window.localStorage.setItem("testObject", JSON.stringify(testObject));


To read a object/array from localStorage/sessionStorage you should JSON.parse the result of it:

var result = JSON.parse(window.localStorage.getItem("testObject");

Mittwoch, 17. Februar 2016

ColdFusion/Kendo UI/Javascript >>> Kendo UI Grid ServerPaging

Here is a simple example of serverPaging with Kendo UI and the related RESTful Service in ConldFusion:

Kendo UI/Javascript part:

$scope.source = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax({
url: "http://localhost:8500/rest/Services/kendoservice",
// options.data contains data such take, skip, page and pageSize! This is needed for serverPaging!
data: options.data,
// "jsonp" is required for cross-domain requests; use "json" for same-domain requests
dataType: "json", 
// function for success request
success: function(result) {
...
$scope.$apply();
}
// function for the case, if everything go wrong
, error: function(result) {
// notify the data source that the request failed
options.error(result);

$scope.$apply();
}
, chache: true
});
}
}
,pageSize: 15
, serverPaging: true
// definition of the response data:
// data >>> load data
// total >>> length of load data
, schema: {
data: "data",
total: "total"
}
});

In this request we give the paging data, such as take, skip, page, pageSize, as query parameters:

  • data: options.data


For functional server paging you must set next flags:

...
pageSize: 15,
serverPaging: true,
schema: {
data: "data",
total: "total"
}

On SCHEMA you can see, which keys your response must contain and other things. In this case your response JSON-object should contains two keys, 'data' and 'total'. 

  • 'data' contains array of JSON-objects. 
  • 'total' contains value of total row number!


Response example:

{"total":9557,"data":[{"index":1,"custCompany":"dfh"},{"index":5,"custCompany":"setes"}]}


ColdFusion RESTfull Service part:

component rest="true" restpath="/kendoservice" produces="application/json"
{
remote any function getKendoService(string take restArgSource="query", string skip restArgSource="query", string page restArgSource="query", string pageSize restArgSource="query") httpMethod="get"

var quotationElementList = new QuotationBaseDAO().listData();

var start = javaCast("int", skip) + 1;
var finish = start + javaCast("int", take);
var quotationList = ArrayNew(1);

for(i = start; i LT finish; i++){
if(i GTE ArrayLen(quotationElementList)){
break;
}

ArrayAppend(quotationList, quotationElementList[i]);
}
var response =  serializeJSON({"data": quotationList, "total":ArrayLen(quotationElementList)}); 

// remove first two // chars, if existed!
if(response.startsWith("//") && Len(response) > 2){
response = response.substring(2);
}

return response;
}

}

In this webservice we use only skip and take parameter to calculate next entry point in the list and create new list with page data.




































Coldfusion >>> REST Webservices

The very good introduction and examples you can find here:



Below you can see a few examples of RESTful Webservices with different kinds of params (path, query) and only GET:


  • without params


component rest="true" restpath="/users" produces="application/json"
{
remote any function getUsers( ) httpmethod="GET"
{
var response = "";
...

return response;
}
}

Call: http://localhost:8080/rest/users



  • with param as part of the path in the call


component rest="true" restpath="/user" produces="application/json"
{
remote any function getUser(numeric userid restargsource="Path") httpmethod="GET" restpath="{userid}"
{
var response = "";
...

return response;
}
}

Call: http://localhost:8080/rest/user/12345



  • with param as query in the call
  • Notice: to use this case change restargsource to 'query' and you remove the restpath


component rest="true" restpath="/user" produces="application/json"
{
remote any function getUser(numeric userid restargsource="Query") httpmethod="GET"
{
var response = "";
...

return response;
}
}


Call: http://localhost:8080/rest/user?userid=12345



with more than one params:


  • CASE >>> params as part of the path:



component rest="true" restpath="/user" produces="application/json"
{
remote any function getUser(numeric userid restargsource="Path", numeric clientid restargsource="Path") httpmethod="GET" restpath="{userid, clientid}"
{
var response = "";
...

return response;
}
}

Call: http://localhost:8080/rest/user/12345/1


  • CASE >>> params in the query:

component rest="true" restpath="/user" produces="application/json"
{
remote any function getUser(numeric userid restargsource="Query", numeric clientid restargsource="Query") httpmethod="GET"
{
var response = "";
...

return response;
}
}

Call: http://localhost:8080/rest/user?userid=12345&clientid=1



  • CASE >>> mixed:


component rest="true" restpath="/user" produces="application/json"
{
remote any function getUser(numeric userid restargsource="Path", numeric clientid restargsource="Query") httpmethod="GET"  restpath="{userid}"
{
var response = "";
...

return response;
}
}


Call: http://localhost:8080/rest/user/12345?clientid=1


















Dienstag, 15. Dezember 2015

Kendo UI >>> add row number to grid

To add row number to kendo-grid you must make next steps:

1) create a counter variable:
var record = 0;

2) add the new column to your code:

columns: [
{
title: "#",
template: "#= ++record #",
width: 50
},{
field: "qtnumber",
title: "Nummer"
},{
field: "name",
title: "Name"
}
.....
]

3) write binding:

columns: [
...
],
dataBinding: function() {
record = (this.dataSource.page() -1) * this.dataSource.pageSize();
}

Note: the record variable should be defined as global. Also if you write this code in the global scope, so you can use record, in other case you should use window.record:

instead of
template: "#= ++record #" 
write
template: "#= ++window.record #"

instead of
record = (this.dataSource.page() -1) * this.dataSource.pageSize() 
write
window.record = (this.dataSource.page() -1) * this.dataSource.pageSize()


Mittwoch, 2. September 2015

JavaScript >>> How to have a textarea to keep scrolled to the bottom

To have auto-scroll function for <textarea> you can use next function for Javascript:

function scrollTextAreaToBottom(id){
if(id){
var element = document.getElementById(id);
element.scrollTop = element.scrollHeight;
}
}


Or for jQuery:

function scrollTextAreaToBottom(id){
if(id){
$(id).scrollTop($(id)[0].scrollHeight);
}
}

Montag, 17. August 2015

Anroid >>> create simple custom progress-bar (circle)

Per default, you can not modify progress bar in Android, also for example change color. Therefore, we must create our own progress bar.

Step 1: create your circle progress bar image, e.g. with Gimp. And save it as wheel.png



Step 2: create mywheel.xml

<rotate xmlns:android="http://schemas.android.com/apk/res/android"    android:drawable="@drawable/wheel"    android:pivotX="50%"    android:pivotY="50%"    android:layout_height="wrap_content"    android:layout_width="wrap_content"    android:fromDegrees="0"
    />

With "duration" we can control the speed of the animation

Step 3: add ProgressBar to the View.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivityFragment"    android:background="@android:color/holo_blue_light"    >
    
    <ProgressBar        style="?android:attr/progressBarStyleLarge"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/progressBar"        android:layout_centerVertical="true"        android:layout_centerHorizontal="true"
        android:indeterminateDuration="1080"
        android:indeterminateDrawable="@drawable/mywheel"
        />

</RelativeLayout>



Sonntag, 9. August 2015

Android >>> change button background to transparent and highlight it on touch

Problem:

we must set button background to transparent and highlight it on touch.

Solution:

to resolve this proble use only 

android:background="?android:selectableItemBackground"

in your xml.

Example:

<Button    android:id="@+id/btnWriteConfig"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="Hold and tap the box to write configuration"    android:minHeight="40dp"    android:background="?android:selectableItemBackground"
    android:textColor="@android:color/white"    android:textStyle="bold"    android:layout_centerInParent="true"    />