Otto's Coding Notes

Build docker image from multiple build contexts

2022-08-24T19:22:00.015+10:00

Build docker image from multiple build contexts

Building a docker image requires specifying a source of truth to include in the image from a local directory or a remote git repository. In the previous version, the docker BuildKit allows users to specify the build context from a single source of truth only. However, the engineers may need to have the context from different locations based on the type of files. For instance, icons, images or other resources that are not included in the same package, including the resource from other docker images. Fortunately, the Docker Buildx toolkit supports multiple build context flag for Docker 1.4. Let's learn how to use this new feature.

The following list is a shortcut for jumping into a specific topic handy.

What version of Docker is this tutorial targeting?
- How to specify the version of Dockerfile frontend?
- How to install/upgrade Buildx?
Why do we need the Build Context flag?
What is the Build Context flag?
Reference

What version of Docker is this tutorial targeting?

All of the examples and use cases are working against Dockerfile 1.4 and Buildx v0.8+. Please ensure the version of Dockerfile and Buildx before starting this tutorial. If you would like to install or upgrade the Docker Engine, please refers to
Install Docker Engine page.

How to specify the version of `Dockerfile` frontend?

To specify the version of a Dockerfile frontend, by adding a line of code at the top of the file as:

# syntax=docker/dockerfile:1.4

## List other instructions below this line

How to install/upgrade `Buildx`?

It's very easy to install or upgrade Buildx tool by executing:

docker buildx install

Why do we need the Build Context flag?

To build an image by docker, the single build context from a local repository is given from a path in the docker build command as:

docker build -t ${imageName}:${tag} .

However, this is not allowed to access files outside of specified build context by using parent selector(../) for security reasons. This leads to the build context must be at the root directory, sometimes it is not the project directory, if the developers would like to build an image for an application referencing multiple resources outside of the folder of an application. And it results in many COPY and ADD instructions being written in the Dockerfile to achieve this goal, which reduces the readability of code. Fortunately, Dockerfile 1.4 and Buildx v0.8+ support multiple build context flags right now. This reduces the complexity of Dockerfile and provides more flexibility in organising build contexts in the code with CI/CD pipeline.

What is the Build Context flag?

Build context flag allows developers to define the build contexts from local directory, Git repository, HTTP URL and Docker Registry.

The syntax of the build context flag is:

docker buildx build \
  --build-context ${name}=${pathToContext} \
  -t ${imageName}:${tag} \
  .

${name} is the name of the build context, must be lowercase, which will be used in the Dockerfile and the ${pathToContext} is the location of the build context which could be local directory, remote git repository, HTTP URL to a tarball and Docker image.

Also, Dockerfile 1.4 supports multiple build contexts for an image by using:

docker build \
  --build-context ${context1}=${pathToContext1} \
  --build-context ${context2}=${pathToContext2} \
  -t ${imageName}:${tag} \
  .

By using build context flags, developers can copy the context outside of the project directory.

Load build context from a Local Directory

Load build context via relative file path

Build context flag accepts relative file path and absolute file path when the user would like to build an image from the files in a local directory.

The relative file path can be specified by the following two ways:

docker buildx build \
  --build-context app=./workspaces/greeting \
  -t ${imageName}:${tag} \
  .

docker buildx build \
  --build-context app=workspaces/greeting \
  -t ${imageName}:${tag} \
  .

Then using COPY --from=${buildContextName} in the Dockerfile to copy files:

FROM node:14.17.1-alpine AS sourceStage
WORKDIR /source
COPY --from=app ["./", "/source/workspaces/greeting"]

Combine multiple build contexts

Buildx can deal with multiple build contexts as well. For example, docker.tutorial is a monorepo that has a configuration file for packages at the root directory level as follows:

.
+-- docker.tutorials
|   +-- dockerfiles
|       +-- greeting
|       +-- calculator
|   +-- workspaces
|       +-- greeting
|       +-- calculator
|   +-- package.json
|   +-- tsconfig.json
|   +-- README.md

It would be good to copy package.json file only through the build context flag rather than copying the whole directory to have the configuration file in the image.

docker buildx build \
    --build-context repo=. \
    --build-context app=workspaces/greeting \
    -t ${IMG_NAME} \
    .

FROM node:14.17.1-alpine AS sourceStage
WORKDIR /source
COPY --from=repo ["./package.json", "/source"]
COPY --from=repo ["./tsconfig.json", "/source"]
COPY --from=app ["./", "/source/workspaces/greeting"]

Load build context via absolute file path

If the build context is not in the same directory as follows:

.
+-- resources
|   +-- icons
+-- docker.tutorials
|   +-- dockerfiles
|       +-- greeting
|       +-- calculator
|   +-- workspaces
|       +-- greeting
|       +-- calculator
|   +-- package.json
|   +-- README.md

The absolute file path could be fit in this case:

docker buildx build \
  --build-context resources=/Users/Documents/resources/icons \
  -t ${imageName}:${tag} \
  .

Alternatively, the build context can be accessed by notating double-dot(..) when the directory is in the parent folder of the current location:

docker buildx build \
   --build-context resources=../resources/icons \
   -t ${imageName} \

Load build context from a Git repository

Clone the git repository via HTTPS

It is quite simple to load build context from a Git repository by specifying the URL of the repository and tagging the branch name with hash(#) at the end of the URL as:

docker buildx build \
  --build-context repo=https://github.com/OttoHung/docker.tutorial.git#main \
  -t ${imageName}:${tag} \
  .

By this way, the build context will be cloned to a directory whose name is as same as the repository in the WORKDIR. For example, the name of the repository is docker.tutorials then the build context will be stored in a directory named docker.tutorials as follows:

.
+-- ${WORK_DIR}
|   +-- docker.tutorials
|       +-- README.md
|       +-- node_modules
|       +-- LICENSE
+-- bin
+-- usr

In the Dockerfile, using COPY --from=${buildContextName} to copy the build context from the temporary directory into a work directory as follows:

## Stage name is not compulsory if it is not a multi-stage build
## But `FROM` instruction must be provided.
## Learn more from https://docs.docker.com/engine/reference/builder/#from
FROM node:14.17.1-alpine AS sourceStage
WORKDIR /source
COPY --from=repo ["./", "/source"]

However, Buildx cannot clone a private repository when the access is unauthenticated. An error message is returned as fatal: could not read Username for 'https://github.com': terminal prompts disabled. [Learn More] It looks like Buildx clones the repository before executing instructions and there is no other way to provide access tokens to Buildx currently.

The solution for this circumstance could use --secret to pass Personal Access Token(PAT) to Buildx:

pat=${PAT} \
docker buildx build \
   --secret id=pat \
   -t ${IMG_NAME} \
   .

Then using RUN instruction to clone the remote repository which is much safer than embedded the PAT in the URL in the command line.

RUN --mount=type=secret,id=${SECRET_ID} \
    PAT=$(cat /run/secrets/${SECRET_ID}) \
    git clone https://${PAT}@${REPO_URL}.git

Clone the git repository via SSH

By assigning a SSH URL to Buildx like:

docker buildx build \
  --build-context repo=git@github.com:OttoHung/docker.tutorials.git#main \
  -t ${imageName}:${tag} \
  .

However, the remote repository cannot be cloned and an error message returned as unsupported context source **git@github.com** for ${BUILD_CONTEXT_NAME}.

To resolve this issue, it is recommended to use --ssh and RUN instruction with Buildx to clone the repository as follows:

docker buildx build \
   --secret id=npm,src=$HOME/.npmrc \
   --ssh default=$SSH_AUTH_SOCK \
   -t ${IMG_NAME} \
   .

FROM node:14.17.1-alpine AS sourceStage
WORKDIR /source

## node-alpine doesn't include openssh-client and git by default
RUN apk update && apk upgrade \
    && apk add openssh-client git

## To store SSH key temporarily
RUN mkdir -p -m 0700 ~/.ssh \
    && ssh-keyscan -H ${HOSTING} >> ~/.ssh/known_hosts
RUN --mount=type=ssh git clone ${REPO}

Then the build context will be cloned into the same folder structure listed at Clone the git repository via HTTPS

Load build context from a tarball via HTTP URL

Build context flag also supports downloading tarball(*.tar or *.tar.gz) via an HTTP URL as:

docker buildx build \
  --build-context dockerTutorial=https://github.com/OttoHung/docker.tutorials/archive/refs/tags/tarball.tar.gz \
  -t ${imageName}:${tag} \
  .

Once the tarball file has been downloaded, it is required to unpack tarball before copying the contents to another work directory. On macOS, tar -xzf could be used to unpack the tarball.

FROM node:14.17.1-alpine as sourceStage
WORKDIR /source
ARG TARBALL_NAME

## tarball must be downloaded by COPY instruction then be unarchived 
## by tar command
COPY --from=tarball ["./", "/source"]
RUN tar -xzf ${TARBALL_NAME}

It is recommended to double-check the directory name is as same as the tarball name or not before making a tarball. If the names of both are different, such as the tarball packed by GitHub Release, the folder name must be given to the Dockerfile to copy the contents because the tarball name is not the same.

Load build context from a docker image

Dockerfile 1.4 supports that the docker image can be loaded by FROM instruction with the URL of the image as:

FROM https://ghcr.io/OttoHung/greeting:latest

Or specify the name of the docker image:

FROM alpine:3.15

In the command prompt, the docker image must go with docker-image:// prefix to tell what docker image to load. For example:

docker buildx build
  --build-context image=docker-image://alpine:3.15 \
  -t ${imageName}:${tag} \
  .

Then using FROM instruction to import the image:

FROM image AS sourceStage

Also, an image digest following up on the tag of the image can be used to specify a particular version for the image as:

docker buildx build
  --build-context image=docker-image://ghcr.io/ottohung/docker.tutorials:git-https@sha256:b9f33235036f68d3d510a8800e27e3b6514142119cbd5f4862f0506d8cc8552d \
  -t ${imageName}:${tag} \
  .

Build Context flag is also a convenient way to specify other docker images for the build, such as base image and image for app, from command prompt dynamically. In this way, it's easy to change the base images without modifying Dockerfile and it's not necessary to write multiple Dockerfile for different platforms.

docker buildx build
  --build-context baseImage=docker-image://alpine:3.15 \
  --build-context appImage=docker-image://node:14.17.1-alpine \

Reference

How to use Markdown in Blogger

2021-03-28T21:23:00.010+10:00

Markdown becomes the most popular documenting language in any technical documentation nowadays. The benefit of using Markdown is getting formatted and highlighted sentences in the short typing. However, Blogger doesn't support Markdown natively at the time going. In order to use Markdown in Blogger, I googled it online and found there is a useful framework built by `cs905s` on https://github.com/cs905s/md-in-blogger. In this post, I will list down how to implement this and a sample to show if the Markdown still working on this post. The following way works on my Blogger as you see on this post. If it doesn't work on your Blogger, please feel free to leave a comment or visit https://github.com/cs905s/md-in-blogger.

1. Go to Theme
1. Click Customise -> Edit HTML
1. Paste the following code before `</head>` 
```html
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css" rel="stylesheet"></link>
```
1. Paste the following code before `</html>`
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/1.6.2/showdown.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="//mxp22.surge.sh/markdown-highlight-in-blogger.js" type="text/javascript"></script>
```

Once you have configured the template, you can use Markdown in `HTML view` by click `<>` at left hand side in the toolbox. However, it doesn't work in the `Compose view`. So please use `Preview` to see the result of rendering.

> Note: < and > are the preserved characters in HTML, please use & lt; and & gt; in your markdown.


In your each post, you just type markdown in the following section to render Markdown:
```html
<pre class="markdown">
</pre>
```

---
----- Mark Down Sample as follows -------
# This is header

# Unordered List
- List 1
  - List 1-1
- List 2

# Ordered list
1. Number 1
  1.1. Number 1.1
  1.1. Number 1.2
1. Number 2

# Table
| To Left | Centre | To Right |
|:--------|:------:|---------:|
|(1,1)    | (1,2)  | (1,3)    |
|(2,1)    | (2,2)  | (2,3)    |

# Mermaid (Not supported Yet)
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```

# Reference
-  https://github.com/cs905s/md-in-blogger

[Katalon] How to activate Katalon Studio

2019-06-23T16:14:00.001+10:00

After the Katalon Studio has been installed by the instruction of [Katalon] How to install Katalon Studio, we have to activate Katalon Studio before using it.

The steps of activation are very simple as well as follows:
1. Open the Katalon Studio
2. Fill your registered Email and Password to activate Katalon Studio, then click "activate" button.

3. Have fun with Katalon Studio

Is it easy, right? Let's do some practice for test cases in the next section.

Next: [Katalon] How to create a test case by using Record & Playback

[Katalon] How to install Katalon Studio

2019-06-23T15:53:00.000+10:00

Note: The screenshot may differ than the actual web pages if Katalon updates their official website. (Date of the screenshot is 06/2019)

Katalon Studio is a free automation testing solution built on top of the automation frameworks Selenium, Appium with a particular IDE for API, web app and mobile app testing. By using Katalon, Git, JIRA, Slack, Jenkins, can be integrated into the automation testing flow work.

Let's learn how to install Katalon Studio in the few steps in an easy way:
1. Go to the home page of Katalon at https://www.katalon.com/
2. Click the "Download Now" button

3. Create an account for activating Katalon Studio and upload the testing report to Katalon Analysis.

4. The downloading progress of installation file according to your operating system will be started automatically. If it does not, just choose the platform from the dropdown list and click the "Download" button.

After the installation finished, we can start to "activate" Katalon Studio for further tutorials.

Next: [Katalon] How to activate Katalon Studio

[GCP] How to fix "Permissions error fetching application.. " while deploying a service to an existing project

2019-05-18T11:02:00.001+10:00

It's simple to fix this problem by the following steps:

1. use `gcloud config list` to see the setting of the current project.

2. If the `project` field is used with the project name, using "PROJECT-ID" instead by `gcloud config set project {{ PROJECT-ID }}`.

3. run `gcloud app deploy` again, this problem will be resolved.



# Reference

gcloud app deploy ERROR: Permissions error fetching application [apps/]

[Tutorial] How to use variables in Twig

2019-02-12T22:17:00.001+10:00

The tools used in this tutorial are as following:
|Spec        | Version      |
|:------------:|--------------|
|OS          | MacOS 10.14.3|
|PHP         | >= 7.0    |
|Twig        | 2.x          |

Note. This post is written in Markdown language which has not been supported in Blogger for mobile browser yet . Please read this article by a desktop computer for a better experience.

# Introduction
Like other languages, Twig has variables and expressions for developers and designers to implement user interface template. In this section, let's see how to use variables in Twig.


# How to do
It's simple to write a variable in Twig as in PHP. 
```twig
{# if name is kitty by setting #}
  name
```


However, it will be printed as plain text in the webpage if we write a variable as above. 
```
name
```


In order to print the value of the variable, a pair of curly braces have to be used to enclose the variable.
```twig
  {# if name is kitty by setting #}
  {{ name }}
```


Then Twig template engine will print it on the webpage.
```
kitty
```


The variables are also able to be manipulated in the control structure:
```twig
 {% set name = 'kitty' %}

 {% if name is not empty %}
   {% set greeting = "Hello " ~ name %}
 {% else %}
   {% set greeting = "Hellow Anonymous" %}
 {% endif %}

 {{ greeting }}
```


The result is:
```
Hello kitty
```


If the variable is an object, the attributes(properties) of a variable can be accessed by a dot symbol(.).
```twig
  house.door
```


The attributes of a variable are also able to be accessed by "subscript" syntax. However, it doesn't work for the attributes which have special characters, such as '-', in the name.
```twig
  house['door']
```


In order to let designer and developer access attributes which have special characters in the name, Twig provides `attribute()` for designer and developer to access attributes.
```twig
  attribute(house, 'data-door')
```


A null will be returned if a variable or attribute does not exist when the `strict_variables` option is set to false, otherwise, Twig will throw an error.


The convenient thing is multiple variables can be assigned values at the same time in one line:
```twig
{% set door, room = 4, 2 %}
```
It is equivalent to:
```twig
{% set door = 4 %}
{% set room = 2 %}
```


# Practice
Let's do some practice. The JSON object for practice is as follows:
```json
{
  "houses":[
      {
          "name": "1 storey house",
          "door": 4,
          "window": 4,
          "room": 4
      },
      {
          "name": "2 storey house",          
          "door": 4,
          "window": 4,
          "room": 2
      }
  ]
}
```


Let's print the details of houses:
```twig
{% for house in houses %}
  {{ house.door }} doors in {{ house.name }}
{% endfor %}
```


The result will be:
```
4 doors in 1 storey house
4 doors in 2 storey house
```


# Setting Variables
The variables can be set a value, such as string, integer, floating number, array, and key-value pairs, by Control Structure in a variant way.


## Set a string to a variable
```twig
{% set var = 'this is a string' %}

{# Tests the result #}
{{ var }}
```


The result will be
```
this is a string
```


## Set an integer to a variable
```twig
{% set var = 15 %}

{# Tests the result #}
{{ var }}
```


The result will be
```
15
```


## Set a floating number to a variable
```twig
{% set var = 12.33456 %}

{# Tests the result #}
{{ var }}
```


The result will be
```
12.33456
```


## Set a string array to a variable
```twig
{% set string_array = ['one', 'two', 'three', 'four'] %}


{# Tests the result #}
{% for str in string_array %}
{{ str }}
{% endfor %}
```


The result will be
```
one
two
three
four
```


## Set an integer array to a variable
```twig
{% set integer_array = [1, 2, 3, 4] %}

{# Tests the result #}
{% for int in integer_array %}
{{ int }}
{% endfor %}
```


The result will be
```
1
2
3
4
```


## Set a floating number array to a variable
```twig
{% set float_array = [1.1, 2.2, 3.3, 4.4] %}


{# Tests the result #}
{% for float in float_array %}
{{ float }}
{% endfor %}
```


The result will be
```
1.1
2.2
3.3
4.4
```


## Set key-value pairs to a variable, and the key is string
```twig
{% set map_str_key = {'one': 'first', 'two': 'second', 'three': 'third'} %}

{# Tests the result #}
{% for key, value in map_str_key %}
[{{ key }}] = {{ value }}
{% endfor %}
```


The result will be
```
[one] = first
[two] = second
[three] = third
```


## Set key-value pairs to a variable, and the key is integer
```twig
{% set map_int_key = {1: 'first', 2: 'second', 3: 'third'} %}

{# Tests the result #}
{% for key, value in map_int_key %}
[{{ key }}] = {{ value }}
{% endfor %}
```


The result will be
```
[1] = first
[2] = second
[3] = third
```


If we store key as an integer, we can use square brackets(`[]`) to manipulate this variable:
```twig
{# this will throw an error
[0] = {{ map_int_key[0] }}
#}


[1] = {{ map_int_key[1] }}
[2] = {{ map_int_key[2] }}
[3] = {{ map_int_key[3] }}
```


The result is:
```
[1] = first
[2] = second
[3] = third
```


When we use this approach to manipulate the variable, we must be careful that does not access the key which doesn't exist. Otherwise, an error will be thrown. 


## Set a block of value to the variable
The `set tag` not only accepts a line of value but also accepts a multiple lines value. Let's see how to implement it.
If we want to use a set block to set value, the value should be enclosed by `{%set ... %}` and `{% endset %}`.
```twig
{% set integer_array = [1,2,3,4] %}

{% set ints %}
<ol>
 {% for int in integer_array %}
   <il>{{ int }}</il>
 {% endfor %}
</ol>
{% endset %}

{# Shows the result #}
{{ ints }}
```


The result is 
```html
<ol>
  <il>1</il>
  <il>2</il>
  <il>3</il>
  <il>4</il>
</ol>
```


However, the `{% set ... %} ... {% endset %}` code block doesn't convert JSON string into an object and it cannot be used to assign key-value pairs:
```twig
{% set home %}
{
  'door': 4,
  'room': 2,
  'toilet': 1
}
{% endset %}

{# Shows the result #}
{{ home }}

{# this doesn't show anything #}
{% for item in home %}
{{ item }}
{% endfor %}

{# this will throw error #}
{{ home['door'] }}
```


The result is:
```
{
  'door': 4,
  'room': 2,
  'toilet': 1
}
```


As a result, the `{% set ... %} ... {% endset %}` code block only treats the value as text as the demonstration in the [official document](https://twig.symfony.com/doc/2.x/tags/set.html). If we use HTML tags assigned to the variables in this sort of code block and automatic output escaping is enabled, the HTML tags will be encoded to make sure the content is safe.
```twig
{% set trh = '<tr>' %}
{% set tre = '</tr>' %}
{% set tdh = '<td>' %}
{% set tde = '</td>' %}

{% set table %}
<table>
  {{ trh }}
      {{ tdh }} cell 1 {{ tde }}
      {{ tdh }} cell 2 {{ tde }}
      {{ tdh }} cell 3 {{ tde }}
  {{ trh }}
  {{ trh }}
      {{ tdh }} cell 4 {{ tde }}
      {{ tdh }} cell 5 {{ tde }}
      {{ tdh }} cell 6 {{ tde }}
  {{ trh }}
</table>
{% endset %}

{# shows the result #}
{{ table }}
```


The result will be:
```html
<table>
        &lt;tr&gt;
                &lt;td&gt; cell 1 &lt;/tr&gt;
                &lt;td&gamp;t; cell 2 &lt;/tr&gt;
                &lt;td&gt; cell 3 &lt;/tr&gt;
        &lt;tr&gt;
        &lt;tr&gt;
                &lt;td&gt; cell 4 &lt;/tr&gt;
                &lt;td&gt; cell 5 &lt;/tr&gt;
                &lt;td&gt; cell 6 &lt;/tr&gt;
        &lt;tr&gt;

<table>
```


## Variable Scope
If a variable has been declared inside a `for` loop, it cannot be accessed outside of the loop.
```twig
{% set list=[1,2,3,4,5] %}

{% for i in list %}
 {% set result = i %}
{% endfor %}

{# An error will be thrown #}
{{ result }}
```


But it can be accessed if it has been declared outside the loop:
```twig
{% set list=[1,2,3,4,5] %}

{% set result = 0 %}

{% for i in list %}
 {% set result = i %}
{% endfor %}

{# The result is 5 #}
{{ result }}
```


# Filter
A filter can be applied to the variables to trim space, lowercase all of the characters, merge an array and so on.
```twig
{% set name = ' Kitty' %}

{# this will print 'Kitty' instead of ' Kitty' #}
{{ name }}
```


This will be introduced in the next tutorial.


# Reference
[Twig Variables](https://twig.symfony.com/doc/2.x/templates.html#variables)
[set Tag](https://twig.symfony.com/doc/2.x/tags/set.html)

## Relevant Readings
[How to setup development environment for Twig on MacOS](https://totsi04.blogspot.com/2019/02/tutorial-how-to-setup-development.html)

Find Window's Handle through PID

2019-02-12T19:53:00.001+10:00

```cpp
typedef _ProcessHwnd

{

  DWORD ProcessID;
  HWND hwndProcess;

} PROCESSHWND, * PPROCESSHWND;


DWORD GetHWNDForProcess(DWORD ProcessID, PHWND ProcessHWND);
BOOL CALLBACK FindProcessHWNDThruEnum(HWND hwnd, LPARAM lParam);

// example function
// returns 0 if success, results of GetLast Error if not
// ProcessID is the process you are interested in
// ProcessHWND will have the process' associated window handle.
// Or NULL, if the process doesn't have a window
//
// Usage: GetHWNDForProcess(ProcId, &ProcHWND);
//

DWORD GetHWNDForProcess(DWORD ProcessID, PHWND ProcessHWND)
{
  DWORD ErrValue = 0;
  BOOL fEnumWindows = FALSE;
  PROCESSHWND prochwndFind;

// Initialize the structure
  memset(&prochwndFind, 0, sizeof(prochwndFind));
  prochwndFind.ProcessID = ProcessID;
  fEnumWindows = EnumWindows(FindProcessHWNDThruEnum, (LPARAM) &prochwndFind);

// Make sure EnumWindows succeeded
  if(fEnumWindows){
    *ProcessHWND = prochwndFind.hwndProcess;

  }else{
   ErrValue = GetLastError();

  return ErrValue;
}

// The EnumWindowsProc callback
BOOL CALLBACK FindProcessHWNDThruEnum(HWND hwnd, LPARAM lParam)
{
  PPROCESSHWND prochwndFind;
  DWORD ThisProcessID = 0;
  DWORD ThisThreadID = 0; // For completeness, not needed

  prochwndFind = (PPROCESSHWND) lParam;
  ThisThreadID = GetWindowThreadProcessId(hwnd, &ThisProcessID);

  if(ThisProcessID == prochwndFind.ProcessID)
  {
    prochwndFind.hwndProcess = hwnd);

    return FALSE;

  }else{
    return TRUE;

  }
}
```

[Tutorial] How to setup development environment for Twig on MacOS

2019-02-10T21:14:00.000+10:00

The tools used in this tutorial are as following:
OS : MacOS 10.14.3
PHP version : >= 7.0
Twig version : 2.x

Introduction

Twig is a template engine for the web developers and designers to implement user interface template in PHP by built-in tags, filters, and functions. The benefit of using Twig to implement user interface template is enhancing the readability of code, reducing the complexity of code, and making it be extendable because the templates can be inherited and included in other templates in Twig. It sounds great, right? So, let's have a try with Twig right now.

IDE

According to the document from Twig, it shows that there are plenty of editors which are able to be used to implement Twig template. In this case, I chose Visual Studio Code as my IDE due to that I can have lots of extensions which helps me backup settings, highlight syntax and provide auto-completion for Twig template. The best thing is it's fast than Netbeans and Eclipse I used to implement projects in PHP and Java. Also, TwigFiddle is a very good online Twig template editor which provides varieties of Twig in different version and the template can be saved online. Furthermore, the testing data can be filled to test the Twig template in real-time. Or you can find other IDE and extensions by click here.

To install Twig Packs for VSC, please refer to the following photo:

Installation
In order to run a Twig template on the local machine, the Twig template engine has to be installed via Composer. The command for Twig template engine installation is as follows:

```sh
composer require "twig/twig:^2.0"
```

That's it. It's simple, right?

Trouble Shooting
Q: Where I can find my default PHP?
A: Execute which php

Q: What can I do if 'php -version' still shows php v5.x?
A:

Normally, the default PHP is allocated at `/usr/bin` on macOS. So, just edit your `~/.bash_profile` and insert `export PATH=/usr/bin:$PATH` in this file. After that, just execute `. ~/.bash_profile` to update settings.

Q: What can I do if I got Permission Denied when using composer to install Twig? A: By default, composer is installed in /vendor. So, just run the command as follows:

 sudo chown -R $USER /vendor

Reference
Twig Install Twig by composer

Composer: file_put_contents(./composer.json): failed to open stream: Permission denied

How to avoid shopping on a fraud website

2019-01-08T20:42:00.000+10:00

As for the post about the frauds ads on Facebook, I would like to share some basic tricks to let you get rid of the fraud website.

1. Domain name is always as same as the brand name.

The fraud website cannot use the official domain registered by the brand already. If the website represents the official website, check the domain name first. But read the domain name carefully, some fraud side will use a similar name to cheat you, such as www.leg0.com or www.Iego.com. The best way is to google the name of the shop and sees if Google can find it. Also, check the details what Google shows to you.

2. The layout(details) of the website

If the layout of the website is awful or everything mixed together, you should be careful that it must be a fraud website. For instance, this website screenshot the rating, but not to implement it. If you can not see any review on the website, it must be a fraud.

3. Do not pay by Credit Card or Bank Transfer

The scammers will reuse your card details to make more requests. Pay by PayPal or other organisations which can suspend/hold the payment when you make a dispute is the best choice.

4. Do more research before you place an order

Use the keyword on the website on Google to see how many people visit this site and interacted with it. Just be careful the fraud review because the scammers are not along.

If you still cannot make sure that website is a fraud or not, just leave it alone and ignore the popup ads from the social media because it is not worth to pay the money you got by your hard working.

May the force be with you.

Useful Links: (Before clicking the link below, it's a good practice to google the title of links for avoiding phishing)

Protecting your online shopping rights

Competition & Consumer Protection Authorities Worldwide

Online Shopping scams

Beware of the fraud ads on Facebook timeline

2019-01-08T19:18:00.001+10:00

It's not about the coding but this can save your pocket. My wife tried to buy a Christmas gift for me from an online shop which pretends as an official Lego website and advertises on Facebook. The website looks like the official one on the mobile, however, it doesn't do it well for the desktop version.

The photo of products looks like the official one. If I don't open it on my laptop, I won't find the awful design of this website. So, please check the details, such as the rating, of the product before place an order. The rating on this page is photocopied so that we cannot see the actual review or rating. This shop tries to create more new Facebook accounts and advertise on it, even someone report the fraud ads to Facebook.

I'm so so sorry for that it makes my wife lose $100. As a result, Do not buy anything from the ads on Facebook to prevent fraud ads. Just Google the name of the shop which you already knew and someone has bought something from it. Or chose the shop which accepts PayPal, then you may have a chance to get your money back if it's a fraud shop, but you still have to take a risk. In my opinion, the best way is that only buy the stuff from wherever you trust.

By the way, don't click the ads underneath this post which provided by Google if you don't know that shop. I trust Google but people make mistake as same as me. Good luck, guys.

[GAE] How to create GWT project updated by Gradle for GAE on Eclipse

2018-07-01T16:15:00.002+10:00

This is a stretch for the memo right now and it will be enhanced with photo or video later.

1. Create a GWT project by GWT plugin
2. Right click on the project -> Configure -> Convert to App Engine Standard Project
3. Right click on the project -> Configure -> Add Gradle Nature
4. Create text file named build.gradle file under project folder.
5. Write the configuration of this project in build.gradle.
For example:

//This section used for classpath setup

def ROOT_PATH = '{{ root_path_of_project }}'
def LIBS_PATH = ROOT_PATH + '{{ root_path_of_lib }}'
def MODULE_PATH = ROOT_PATH + '{{ root_path_of_module }}'

//Uncomment this field when trying to fetch the latest version of libraries.
apply plugin: 'java'
apply plugin: 'gwt'
apply plugin: 'eclipse'
apply plugin: 'war'

//Script version
version = '1.0'

//this concept is used to define the external dependencies that are available to the classloader 
//during the execution of Gradle build script. In the declaration of dependencies only be used 
//the method classpath, and you can’t use the configurations compile , runtime, testCompile, etc. 
//because this block is just to declare external libraries references available to the classpath, 
//if you need to provide any configuration like compile or runtime you need to do outside of BuildScript block.
buildscript{
 repositories {
  //The repository where to fetch gwt gradle plugin
  jcenter()
  
//  maven {
//            url 'http://dl.bintray.com/steffenschaefer/maven'
//        }
 }
 
 dependencies {
  //0.6
  classpath 'de.richsource.gradle.plugins:gwt-gradle-plugin:0.6'
 }
}


//Central repository to load the GWT library
//indicates where Gradle looks for any required dependency, in this case in the Maven central repository. 
//For this example get gwt libraries and automatically fetch gwt dependencies; 
//while the script is executing some lines like these appears in the console.
repositories{
 mavenCentral()
}

eclipse{
 //To setup output classess folder for gwt project
 classpath{
  defaultOutputDir=file("war/WEB-INF/classes")
 }
/*
 project{
  //To setup linked resource folder
  linkedResource name:'{{ name_of_linked_ref }}', type:'2', location: LIBS_PATH + '{{ path_of_linked_ref }}'
 }
 
    classpath {
        file {
            withXml {
                def node = it.asNode()
                node.appendNode('classpathentry', [kind: 'src', path: '{{ name_of_linked_ref }}', exported: true])
            }
        }
    }
*/ 
}

gwt{
 gwtVersion='2.8.1'
 modules 'com.digsarustudio.qbox.QBox'
 
 sourceSets{
  main{
   java {
    srcDir 'src'
   }
  }
  
  test{
   java {
    srcDir 'test'
   }
  }  
 }
 
 logLevel = 'INFO'
 
 minHeapSize = "512M"
 maxHeapSize = "1024M"
 
 superDev{
  noPrecompile=true
 }
 
}

dependencies {
 //google cloud sql factory - This is very important for the project which uses Cloud SQL as the database.
/* 
 compile 'com.google.cloud.sql:mysql-socket-factory-connector-j-8:1.0.10'
*/ 
 compile 'com.google.cloud.sql:mysql-socket-factory:1.0.9'
 
 //Google Gruava - For Cloud SQL MySQL Socket Factory
 compile 'com.google.guava:guava:26.0-jre'

  //[Optional] For NoClassDefFoundError while including MySQL Socket Factory Connector
  compile group: 'org.ow2.asm', name: 'asm', version: '5.2'

~~6. Right click -> Gradle -> Refresh Gradle Project~~(This will break the GAE project structure)
7. Reorganise the structure of folders to meet the GWT requirements
8. Copy the customised or 3rd party libraries under /war/WEB-INF/lib
9. Change the .level FROM WARNING to INFO in the logging.properties file if you want to see the INFO log in the logger.
10. Add <load-on-startup>1</load-on-startup> under a required servlet tag in the web.xml and <warmup-requests-enabled>true</warmup-requests-enabled> into appengine-web.xml if you need this servlet has to been initialised when this app starts up.

That's it. The next section will show how to deploy this GWT project upto the Google App Engine.

Coming soon:
1. How to make GWT project to use Cloud SQL in Java 8
2. How to skip the file amount limitation of a GWT project which is going to upload to Google App Engine.
3. How to initialise configuration of Web App when the app starts up.

Note:
For point 6:
After refresh the project, Gradle will reset the content of "{{ project_folder }}/.settings/org.eclipse.wst.common.component". This leads to that Eclipse cannot deploy the GAE project due to the appengine-web.xml cannot be found. The plugins will go through {{ project_folder }}/WEB-INF to look for it. However, WEB-INF is under {{ project_folder }}/war for GWT. To fix this issues, please place the following text of section in to this file:

<?xml version="1.0" encoding="UTF-8"?>
<project-modules id="moduleCoreId" project-version="1.5.0">
  <wb-module deploy-name="{{ project_name }}">
   <wb-resource deploy-path="/" source-path="/war" tag="defaultRootSource" />
        <wb-resource deploy-path="/WEB-INF/classes" source-path="/src"/>
        <wb-resource deploy-path="/WEB-INF/classes" source-path="/test"/>
   
   <property name="context-root" value="{{ project_name }}"/>
   <property name="java-output-path" value="/{{ project_name }}/war/WEB-INF/classes" />
  </wb-module>
</project-modules>

[Tools] Blog Code Highlight - a tool generating highlighted code with Pretty Print in Blogger

2016-03-19T18:38:00.000+10:00

[Tool]
Blog Code Highlight
Version: 1.0.1 Beta

Introduction:

When highlighting code in Blogger as following:

class MyClass
{
    private:
        int Counter;
        std::vector<int> mCountList;

    public:
        MyClass(void);
        
    public:
        void Show(void);
}

The HTML code has to be generated manually in the post as follows:

<pre class="prettyprint lang-cpp">
class MyClass
{
    private:
        int Counter;
        std::vector&lt;int&gt; mCountList;

    public:
        MyClass(void);
        
    public:
        void Show(void);
}
</pre>

It is easy to make a mistake with the wrong typing causes exception occurred and not convenient to modify if the code is in HTML or XML because of some symbols(<, >, &) are the reserved characters in the markup languages. Those problems confused me while I tried to write the blog with code if I didn't use the highlighting code frequently. In order to solve this problem and improve the efficiency of writing blog, I developed this tool as follows to help me convert the code of languages Google Code-Prettify supported into HTML code.

In this post, I would like to introduce how to use this tool to get correct (so far) HTML code for the Blogger.

How to use:

Goes to https://blog-code-highlight.appspot.com

Type or paste the source code in the text area on the left-hand side.

Choose the language type which supported by Google Code-Prettify listed as follows:
list here.

Choose the version of HTML if you want to generate the code in HTML5.

Tick Show Line Number if you want to show line number in the code. In addition, the first line number can be specified.

Copy the formatted code from the Outcome session and paste it into your blog.

[Click Here] goes to this tool.

[Reference]

PS. Sorry for the ads. I need to get some funds if the quota is running out.

[Ant]How to build a property file (Build.property)

2016-03-18T11:48:00.001+10:00

How to name the property file:

It is easy and simple to setup a property file for Ant build. Normally, the name of property file is build.properties, but it could be named as build.properties.dev or build.properties.test based on the same deployment environments to be run in different settings. The benefits of using suffix as .xxx are:

The build file can be reused for different execution environment with different property setting, such as developing, testing or release.
Only the name of property file needs to be changed in the build.xml file while the target or source changed. It could reduce the typing error and time cost.

How to setup the properties:
Each property is illustrated by a name and a value connected by a equals sign (=) in a line.

For example:


  src=c:\source file
  target.dir=d:\testing

In this case, dot symbol (.) could be a part of the name. It could be used to classify the properties into a group.

How to comment in the property file:
Hash character (#) is used as the symbol to make a line as a comment.

For example:


  ######################
  # This is Header
  #####################

  #Set soruce folder
  src.dir=c:\source file

  #Set destination folder
  target.dir=d:\testing

[Reference]

[Apache] Configure Apache for PHP in Mac OS X 10.11.3 El Capitan

2016-01-31T13:23:00.003+10:00

[Versions]

OS:	Mac OS X 10.11.3
Apache:	2.4.16
PHP:	5.5.30

In order to develop and test web pages on the local web server, I googled some blogs to figure out what I have to do. It took me a couple of hours to search and test which approach is workable. Finally, I found that Configure Apache for PHP in OS X 10.10 Yosemite / 10.11 El Capitan written by Donat shows me how to set web pages up under home folder of the current user and Configuring Apache Virtual Hosts on Mac OS X posted by McCreary indicates how to set a domain name pointing to localhost. In this post, I am going to demonstrate how to setup both approach in my Mac.

Before Setup:
What have to be done:
Check the version of Apache by the following command:

sudo apachectl -v

Check the version of PHP by the following command:

sudo apachectl -v

Setup:

For the following demonstration, {username} represents the current username used to login operating system and {servername} represents the target hostname used to access the local website.

Make sure there is a Sites folder in the home directory. If not, create it and ensure the permission is 644(dr-xr--r--). If it is not, use the following command to change it:
```
sudo chmod 644 Sites
```

Make sure /etc/apache2/users/{username}.conf is existed. If not, create it. In addition, update this file as follows:

<Directory "/Users/{username}/Sites/">
    Options Indexes Multiviews FollowSymLinks
    Require all granted
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

Add virtual host into /etc/apache2/extra/httpd-vhosts.conf as following:

<VirtualHost *:80>
  ServerName {servername}
  DocumentRoot /Users/{username}/Sites
</VirtualHost>

Configuration:

Uncomment the following lines in /etc/apache2/httpd.conf:

LoadModule deflate_module libexec/apache2/mod_deflate.so
LoadModule userdir_module libexec/apache2/mod_userdir.so
LoadModule rewrite_module libexec/apache2/mod_rewrite.so
LoadModule php5_module libexec/apache2/libphp5.so
Include /private/etc/apache2/extra/httpd-userdir.conf
Include /private/etc/apache2/extra/httpd-vhosts.conf

Then add index.php to the DirectoryIndex

<IfModule dir_module>
    DirectoryIndex index.html index.php
</IfModule>

Uncomment the following line in /etc/apache2/extra/httpd-userdir.conf

Include /private/etc/apache2/users/*.conf

Restart Apache:

sudo apachectl restart

If there is any problem happened, run the following command to see the error messages:

sudo apachectl configtest

Test:
So far, the web server has been established and the pages can be accessed by the following URL:

http://localhost/~{username}

If there is no web page in this folder, it will show the index of web pages. Put the HTML file or the PHP file to test it.

Mapping to the specific domain name:
With regard to the URL shown above, it is not convenient for me to access every website with the long typing because I might have plenty of website on my local machine. In order to reduce the expenses of typing, I would rather use a shortened link to do it. The following steps show how to setup a specific domain name for the website.

Open /etc/hosts as follows command:
```
sudo vim /etc/hosts
```

Append the server name and target IP at the end of this file. In this case, 127.0.0.1 can be set for multiple server names.


##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

127.0.0.1       {servername}

Clear the local DNS cache by the following command:
```
dscacheutil -flushcache
```
Restart Apache.

sudo apachectl restart

Test:
Just type:

http://{servername}

[Reference]

[GWT]How to use Google Web Toolkits - Installation

2014-12-12T12:24:00.002+10:00

GWT version:	4.4
Eclipse version:	4.4 (Luna)
Java version:	1.7
OS:	Mac OS X 10.10.1

First of all, "Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based application." The purpose of this toolkit is to make possible productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. It's open source and completely free as well. In this toolkit, it contains SDK and Plugin for Eclipse so that we can use Eclipse as the editor to develop web application we want. The steps of installation will be illustrated as follows.

1.Setup Eclipse:
Downloading Eclipse from official website. Normally, I will choose Eclipse IDE for Java EE Developers as my IDE because I prefer to use this tool to develop C or C++ on Mac. Extracting zip file directly when the downloading finished.

2.Get Plugin for Eclipse (including SDKs)
There are two ways to get Plugin for Eclipse, one is downloading from download page of GWT, another one is installing Google Plugin for Eclipse via a link such as http://dl.google.com/eclipse/plugin/x.x. The "x.x" is the version of Eclipse, such as 4.3 for Kepler and 4.4 for Luna. According to the user guide of configuration Eclipse, we need to use Install dialog to install this plugin. The steps of installation are as following:

I. To choose "Install New Software".

II. Checking "Google Plugin for Eclipse(required)" and clicking "Next" button to complete the installation.

The Eclipse needs to be restarted after installation. When the Eclipse restarted, we can use it for developing web application with GWT.

This is what we facing Nowadays.

2014-03-26T16:52:00.002+10:00

I'm not sure what I can do to support the participants fighting for their future.
The only I can do is distributing what happened in my home country.
Let other people know what our teenagers caring and facing.

[Eclipse]新建立的Android專案出現"R cannot be resolved to a variable"

2013-06-07T18:48:00.001+10:00

這問題其實是很詭異的，因為同樣是今年，只是在SDK是使用r20以前的時候，都可以正常建立新專案(這時的Target SDK為2.3.3)。但今天把它更新到r22.0後，就出現了標題所列的問題。

找了很多網路資料，不管是Clean後又Build，還是專案重建，都一樣的結果。

後來找到這篇「Android: r cannot be resolved to a variable」，他有提到是因為SDK4.x的專案建立的時候，會在res底下多出了value-v11以及value-v14這兩個資料夾。然後這個時候設定的Minimun Required SDK是設定為2.3.3。所以根據那篇的說法，這樣2.3.3的SDK是不認識那兩個資料夾，所以就變得無法產生R.java。

~~後來專案刪掉後重建的時候，把Minimun Required SDK選擇成4.2，就正常可以產生R.java了。~~

~~後來又為了要確認問題，所以把Minimun Required SDK、Target SDK、以及Compile With都設定為2.3.3。嘿嘿，好玩了，建立出來的專案一樣不能產生R.java。~~

~~所以這意思是，SDK Tools用了r22以後的，就不能編譯給2.3.3用的APP嚕？~~

後記：
結果打完這篇之後，建出來的專案又不正常了。
之後又找了其他參考，有人指出是需要Android SDK Build-tools。所以在更新這個tools之後，r就一切都正常了。

然後如果Unity還在用3.5.7以下的話，Android SDK Platform-tools請不要更新，不然會發生Unity無法編譯apk的慘劇。唯一的解決辦法就是把，Android SDK Platform-tools降版本至16.0.2以下，以及不要安裝Android SDK Build-tools。

(2013/06/27 - 目前確認，造成Unity無法編譯的是Android SDK Build-tools，僅需把Android SDK Build-tools移除掉，Unity就可以正常編譯了。)

[Unity]使用Plugin - JAR將二進位檔寫入至SDCard

2013-05-30T16:46:00.000+10:00

Version:
1.Unity : 3.5.7f6
2.Anddroid : 2.3.3
3.Android SDK Tools : r22
4.Eclipse : Juno SR2

目前想在Unity上，將資料寫入到檔案內，可以使用System.io.File(C#)來進行純文字或是二進位資料的儲存。但是在Android上，如有需將檔案存入SDCard內，則需先設定檔案存取權限。在Android的app開發上，需要去新增android.permission.WRITE_EXTERNAL_STORAGE。這個權限設定之後，就可以進行檔案的讀寫(在4.1以後，則需另外設定讀取權限，android.permission.READ_EXTERNAL_STORAGE)。然而這個權限設定，Unity幫我們做到了，因此我們不需要在另外設定AndroidManifest.xml，僅需將「PlayerSettings」->「Per-Platform Settings」->「Write Access」設定為「SDCard」即可。

C#的讀寫檔方式，必須自行指定資料夾的路徑，所以如果當我們要把檔案寫道SDCard內的話，資料夾路徑會是「/mnt/sdcard/...」。如果SDCard的路徑被變更的話，那麼在程式內所指定的路徑就又要重新設定過。

然而Android有提供取得SDCard的路徑功能，所以這邊就利用JAR的方式，讓Unity可以直接使用Android所提供的API，取得系統內所記錄的SDCard的實際路徑，並將檔案寫入到SDCard內。

在JAR內的程式碼為：

package com.drillingsaru.io.sdcard;  
 //Java  
 import java.io.File;  
 import java.io.FileOutputStream;  
 import java.io.IOException;  
 //android  
 import android.os.Environment;  
 import android.util.Log;  
 public class BinaryFileIO   
 {  
 //Write binary data into a file  
     public void WriteData(String FileName, byte[] DataBuf)  
     {  
         if( !this.IsExternalStorageMounted() ) {  
             this.mErrNo = ERR_STORAGE_NOT_MOUNTED;  
             return;  
         }  
         try  
         {  
         //Get the path of root folder (Return = /mnt/sdcard )  
             File rootDir = Environment.getExternalStorageDirectory();  
         //Create a output stream object  
             FileOutputStream outStream = new FileOutputStream(new File(rootDir.getPath(), FileName));  
         //Write Data                          
             outStream.write(DataBuf);  
         //Flush it  
             outStream.flush();  
         //Close self  
             outStream.close();  
             this.mErrNo = ERR_NONE;  
         }catch(Exception e){  
             Log.d("--WriteData--", e.getMessage());  
         }          
     }  
 }

在Unity的程式碼為

using UnityEngine;  
 using System.Collections;  
 using System.Collections.Generic;  
 public class WriteData2SDCard : MonoBehaviour   
 {  
 #region Definition      
 /// <summary>  
 /// The package name and class name  
 /// package name = com.DrillingSaru.io.sdcard
 /// </summary>  
     public readonly string PACKAGE_CLASS_NAME = "com.drillingsaru.io.sdcard.BinaryFileIO";  
 /// <summary>  
 /// Student information  
 /// </summary>  
     public    class StudentInfo  
     {  
         public    int    Language        = 0;  
         public    int    Math    = 0;  
         public    int    Science    = 0;  
         public StudentInfo(int lang, int math, int science)  
         {  
             this.Language    = lang;  
             this.Math        = math;  
             this.Science    = science;  
         }  

         public StudentInfo(byte[] DataBuf)  
         {  
             this.Set(DataBuf);  
         }

     //轉換成byte陣列
         public byte[] GetBytes()  
         {  
             List<byte> RtnData = new List<byte>();  
             RtnData.AddRange(System.BitConverter.GetBytes(this.Language));  
             RtnData.AddRange(System.BitConverter.GetBytes(this.Math));  
             RtnData.AddRange(System.BitConverter.GetBytes(this.Science));  
             return RtnData.ToArray();  
         } 

     //轉換成結構資料
          public void Set(byte[] DataBuf)
          {
             int Offset = sizeof(int);
             int Shift = 0;
  
             this.Language = System.BitConverter.ToInt32(DataBuf, Shift);
             Shift += Offset;
   
             this.Math = System.BitConverter.ToInt32(DataBuf, Shift);
             Shift += Offset;
   
             this.Science = System.BitConverter.ToInt32(DataBuf, Shift);
             Shift += Offset;      
         }
     }  
 #endregion      
 #region InputData  
 #endregion  
 #region DataMebmer  
     private    StudentInfo            mStudentInfo    = new StudentInfo(500, 5, 10);  
     private    AndroidJavaObject    mDataWriter        = null;  
 #endregion          
 #region MemberFunc  
     private void Init()  
     {          
         this.mDataWriter = new AndroidJavaObject(PACKAGE_CLASS_NAME);  
     }  

 /// <summary>  
 /// write binary data to file
 /// </summary>
     private void WriteData()  
     {  
         if( this.mDataWriter == null )  
             return;  
     //設定傳入參數
         object[] args = new object[2];  
         args[0] = "testfile.bin";  
         args[1] = (object)this.mStudentInfo.GetBytes();  

     //呼叫函式
         this.mDataWriter.Call("WriteData", args);  
     }  

/// <summary>  
/// read binary data from file
/// </summary>
     private void ReadData_Test()
     {
         if( this.mDataWriter == null )
             return;
  
         byte[] RtnList = new byte[1024];
         object[] args = new object[1];
         args[0] = "testfile.bin";
         RtnList = this.mDataWriter.Call("ReadData", args);  
  
         this.mStudentInfo.Set(RtnList);
     }
#endregion          

 #region SystemFunc  
     void Awake()  
     {  
         this.Init();  
     }  
     // Use this for initialization  
     void OnEnable ()   
     {  
         this.WriteData();  
     }  
     void Update ()   
     {  
     }  
 #endregion      
 }

用了上述的Plugin後，就可以將二進位檔存至SDCard了。

[Unity]Plugin建立過程 - JAR

2013-05-28T18:06:00.000+10:00

Version:
1.Unity : 3.5.7f6
2.Anddroid : 2.3.3
3.Android SDK Tools : r22
4.Eclipse : Juno SR2

這邊使用簡單的計算範例來呈現，如何建立要給Unity使用的Plugin。這邊的Plugin是使用JAR。

1.建立新的Android專案

I.在Eclipse介面上，點選「File」->「New」->「Project」。

II.選擇「Android Application Project」。

III.設定相關設定，這邊就依個人的需求，自行設定即可。

IV.專案建立過程中，[Create custom launcher icon]與[Create activity]預設都會被勾選。但是目前並用不到這兩個設定，所以在這裡就把這兩個設定設定為不選擇。

V.取消[Create custom launcher icon]與[Create activity]後，按下「Finish」按鈕，就可以完成專案建立的流程了。

VI.建立好的專案架構如下圖

VII.加入新的[Package]：於[src]上按下滑鼠右鍵->[New]->[Package]

VIII.設定[Package]的名稱，[Package]的名稱會在Unity內使用到。

IX.新增[Class]給[Package]在新建立好的[package]上按下滑鼠右鍵->[New]->[Class]

X.設定[Class]的名稱，這邊設定的名稱之後也會在Unity內使用到。

XI.建立想要使用的功能的程式碼
A.Number Adder:

package com.calculator.numberincreasing;  
 public class NumberAdder   
 {  
     public int Add(int base, int factor)  
     {  
         return (base + factor);  
     }  
 }

B.Number Multiple:

package com.calculator.numberincreasing;  
 public class NumberMultipler   
 {  
     public int Multiple(int base, int rate)  
     {  
         return (base * rate);  
     }  
 }

XII.程式碼編寫完成後，就可以透過[Export]的方式將程式封裝，並交給Unity使用。
專案上按滑鼠右鍵->[Export]。

XIII.選擇[Java]->[JAR File]

XIV.把要匯出的資料勾選起來，這邊預設會勾選所有的資料夾。然後指定JAR檔要輸出的位置即可。

2.如何在Unity內使用JAR檔內的方法：
I.把JAR檔放到"./Asset/Plugins/Android/"下即可。(Plugins與Android資料夾皆需要自行建立)

II.建立操作用的Script

public class Calculator : MonoBehaviour   
 {  
     private int Org = 10;  
     private int factor = 20;  
     private int Mutiple = 30;  
     private int Added = 0;  
     private int Mutiplier = 0;  
     private AndroidJavaObject    mCal = null;  
     // Use this for initialization  
     void Start ()   
     {          
     //產生NumberAdder物件  
         this.mCal = new AndroidJavaObject("com.calculator.numberincreasing.NumberAdder");  
     //建立傳入參數陣列  
         object[] arglist = new object[2];  
         arglist[0] = (object)this.Org;  
         arglist[1] = (object)this.factor;  
     //呼叫方法，並取得回傳值  
         this.Added = this.mCal.Call<int>("Add", arglist);          
         this.mCal = new AndroidJavaObject("com.calculator.numberincreasing.NumberMultipler");          
         arglist[0] = (object)this.Org;  
         arglist[1] = (object)this.Mutiple;  
         this.Mutiplier = this.mCal.Call<int>("Multiple", arglist);  
     }  

//輸出測試結果
     void OnGUI()  
     {  
         GUI.Label(new Rect(100.0f, 100.0f, 100.0f, 50.0f), string.Format("Org = {0}\nAdded = {1}\nMultipled = {2}", this.Org, this.Added, this.Mutiplier));  
     }  
 }

如果要使用JAR檔內的類別，需要透過AndroidJavaObject來產生目標類別的物件。在產生AndroidJavaObject時所傳入的名稱為Package名稱與Class名稱的合稱。(Package = com.calculator.numberincreasing, Class = NumberAdder. Package.Class = com.calculator.numberincreasing.NumberAdder) 之後再使用AndroidJavaObject.Call()來操作指定的函式。

III.產生apk檔，並安裝到Android裝置內。

透過上述方式，就可以把一些方法封裝到其它的Package內。然後就可以給其它的專案使用。
如有需要使用到一些Android的API，也可以透過Plugins的方式來使用。

[Android]存取External Storage

2013-04-17T18:09:00.000+10:00

在權限的部分，需在Manifest檔內加入：

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

前者為設定可讀寫的權限。是必備的。
後者是設定可掛載或是卸載可移除式儲存裝置。(如沒有加入這個權限，則在進行檔案操作時，會出現"Permission Denied"的錯誤訊息)。

A.之後在進行檔案寫入的動作時，
1.如果是要寫入二進位的資料，可用FileOutputStream.write()直接寫出檔案。

private void WriteData(String Data)  
{
//Check the state of storage
    if( !Environment.MEDIA_MOUNTED.equals((Environment.getExternalStorageState())) ) {  
        Log.d("WriteData", "--SDCard has been removed.--");  
        return;  
    }  

    try  
    {  
    //Get the path of root folder  
        File rootDir = Environment.getExternalStorageDirectory();  

    //Create a output stream object  
        FileOutputStream outStream = new FileOutputStream(new File(rootDir.getPath(), "IOTestFile.dat"));  

    //Write Data  
        byte[] buffer = new byte[BUFFER_SIZE];  
        buffer[0] = 0x30;  
        buffer[1] = 0x31;  
        buffer[2] = 0x32;  
        buffer[3] = 0x33;  
        buffer[4] = 0x34;  
        outStream.write(buffer, 0, 5);  

    //Flush it  
        outStream.flush();  

    //Close self  
        outStream.close();  

    }catch(Exception e){  
        Log.d("--WriteData--", e.getMessage());  
    }          
}

要注意的是，使用FileOutputStream時，要把FileOutputStream放到try...catch()內。 Environment.getExternalStorageDirectory()可以取得到目前External storage所在的路徑。
2.如果是要寫入純文字檔，可用FileOutputStream與OutputStreamWriter.append()來將資料寫入檔案內。

private void WriteDataWithOutputStreamWriter()  
{  
    try  
    {  
        String FuncName = "WriteDataWithOutputStreamWriter";  

    //Check the SDCard state  
        if(!Environment.MEDIA_MOUNTED.equals(Environment.getExternalStorageState()))  
        {  
            Log.d("WriteDataWithOutputStreamWriter", "======== External SD Card not mounted ===========");  
            return;  
        }  

    //Get the path of the root folder  
        File rootDir = Environment.getExternalStorageDirectory();  

    //Create file object  
        File FileContent = new File(String.format("%s/%s/IOTestFile.dat", rootDir.getParent(), rootDir.getName()));  

        if(!FileContent.createNewFile())  
        {  
            Log.d(FuncName, "Cannot create file");  
        }  
        Log.d("WriteDataWithOutputStreamWriter", String.format("======= Target Path = %s ============", FileContent.getPath()));  

    //Create a output stream object  
        FileOutputStream outStream = new FileOutputStream(FileContent);  

    //Create a output stream writer  
        OutputStreamWriter streamWriter = new OutputStreamWriter(outStream);  

    //write data  
        streamWriter.append("lalalala");  

    //close writer  
        streamWriter.close();  

    //close output stream object  
        outStream.close();  
    }catch(Exception e){  
        Log.d("--WriteDataByOutputStreamWriter--", e.getMessage());  
    }
}

B.如果是要讀取檔案，則可以用：
1.讀取二進位檔的內容，則可用FileInputStream來取得資料即可。

private String ReadData()  
{  
    try  
    {  
    //Get the path of root folder  
        File rootDir = Environment.getExternalStorageDirectory();  

    //Create a input Stream Object  
        FileInputStream inStream = new FileInputStream(new File(rootDir.getPath(), "IOTestFile.dat"));  

    //Load the data from target  
        byte[] buffer = new byte[BUFFER_SIZE];  
        int DataLen = inStream.read(buffer);  
        if(DataLen == -1)  
        {  
            Log.d("ReadData", "========= Reading Data has problem. ==================");  
            throw new IOException("Reading Data has problem.");  
        }  

        inStream.close();  

    //Show data  
        TextView text = (TextView)findViewById(R.id.editText1);  
        String OutText = "";  
        for(int i = 0 ; i < 5 ; i++)  
        {  
            Log.d("ReadData", String.format("--------- Data(%x) has been loaded from %s -------------", buffer[i], rootDir.getPath()));  
            OutText += String.format("%x", buffer[i]);  
        }  

        text.setText((CharSequence)OutText);
    }catch(Exception e){  
        Log.d("--ReadData--", e.getMessage());  
    }  
    return "";  
}

[CListCtrl]拖曳檔案至List上方

2012-11-27T11:49:00.000+10:00

如要操作行為正確，此方法需先繼承CListCtrl之後，並改寫OnDropFiles()。

如不太強調行為正確，則改寫Dialog的OnDropFiles()也可以。

這邊選用偷懶的方式，直接改寫Dialog的OnDropFiles()。

1.先要將Dialog(CListCtrl)的Accept File屬性打開，這樣才能將檔案拖到Dialog上面並丟下。

2.加入自定訊息的

3.ON_WM_DROPFILES()

enum eMyListCtrl{ WM_USER_CHANGE_LIST = WM_APP + 0x0100 };  
   
 ON_MESSAGE( WM_USER_CHANGE_LIST, OnDropFilesToList )  
   
 void CFileSearchDlg::OnDropFiles(HDROP hDropInfo)  
 {  
   // TODO: Add your message handler code here and/or call default  
    char  cFilePathName[_MAX_PATH] = {0};  
    UINT nNumOfFiles = DragQueryFile(hDropInfo, 0xFFFFFFFF, NULL, 0); //文件的个数  
    for ( UINT nIndex=0 ; nIndex&lt; nNumOfFiles; ++nIndex )  
    {  
      DragQueryFile(hDropInfo, nIndex, cFilePathName, _MAX_PATH); //得到文件名  
      // 把得到的文件名传给父窗口  
      LPARAM lParam = (LPARAM)cFilePathName;  
      //GetParent()->SendMessage(WM_USER_CHANGE_LIST,0,lParam);  
      this->SendMessage(WM_USER_CHANGE_LIST,0,lParam);  
    }  
   
   CDialog::OnDropFiles(hDropInfo);  
 }  
   
 LRESULT CFileSearchDlg::OnDropFilesToList(WPARAM wParam, LPARAM lParam)  
 {  
   //m_wndListCtrl.DeleteAllItems();  
   char * cFilePath = (char *)lParam;// 得到拖放文件的路径  
   
   //Check is dir or File Path  
   this->SearchFileList(cFilePath);  
   
   return true;  
 }

[Unity]AnimationState

2012-11-21T18:03:00.003+10:00

參考資料：AnimationState
Unity版本：3.5.6f4

一般在控制AnimationClip播放時，都會使用Animation類別來控制。但如果想要控制播放速度時，確沒有介面可以控制。所以如果要變更播放各個AnimationClip的播放速度的話，就需要直接操作Animation內所儲存的AnimationStates。底下就針對AnimationState的各個屬性與操作介面來進行測試。

I.屬性：
1.enabled：(bool)
此屬性是用來控制目前所對應的AnimationClip能不能進行播放。所以在Animation Clip播放時，將AnimationState.enabled設為false時，時間軸就會停止在當下的時間。之後再把AnimationState.enabled設為true時，時間軸就會從目前停止的時間繼續往下播放。

2.weight：(float)
目前文件寫的看不懂，所以先跳過。

3.wrapMode：(WrapMode)
AnimationClip的播放模式，可以參考[Unity]Animation WarpMode。

4.time：(float)
動畫的播放時間軸，一般是從0到無限大。可以透過強制指定時間軸來讓動畫的時間軸移動到指定的時間，但此時動畫物件本身並不會到達指定時間的狀態，也就是動畫物件會停留在上次停止的位置。當開始播放動畫的時候，就會從指定的時間開始播放。

5.normalizedTime：(float)
normalize的動畫時間。此屬性為0到1。0.5代表動畫的時間的中點。

6.speed：(float)
動畫播放速度，此屬性等於1時，就是正常播放。如要反向播放的話，就只要給定負值就好。為了達到反向播放的效果，也要注意到WrapMode的問題，可以參考[Unity]Animation WarpMode。

7.normalizedSpeed：(float)
normalize的播放速度，一般是做為在兩個動畫間做同步播放使用。根據官方的說法，此屬性會比Animation.SyncLayer()易於使用。

8.length：(float)
Animation Clip的總播放時間，單位為秒。

9.layer：(int)
此屬性用來設定AnimationClip播放時的層級，層級會影響到計算動畫播放時的權重值。越高層級的AnimationClip在計算最後繪製權重時，比較可以優先得到自已所預期需要的權重值。而低層級的AnimationClip僅能使用高層級所不需用到的權重值，換句話說，也就是低層級的僅能撿高層級剩下的來用。

10.clip：(AnimationClip)
要用來播放的AnimationClip。

11.name：(String)
AnimationClip的名稱。

12.blendMode：(AnimationBlendMode)
動畫的繪製模式。可參考。

II.操作介面：
1.AddMixingTransform(Transform mix, bool recursive = true)：
把要有相同的動畫效果的GameObject.transform加到AnimationState內，這樣就可以使用同一個動畫效果套用到不同的GameObject上。這樣可以減少AnimationClip的製作數量。

recursive設為true時，代表所有混合的transform的子物件都將會被以同樣的方式播放動畫。
(目前未測試成功)

2.RemoveMixingTransform(Transform mix)：
把加到AnimationState內的GameObject.transform移除。

[Unity]Animation WarpMode

2012-11-20T11:34:00.000+10:00

參考資料：Animation.wrapMode、WrapMode。
Unity版本：3.5.6f4

在Unity內Animation的WrapMode可以透過Script來變更。以下針對各個參數進行說明：

1.WrapMode.Default：
直接拿Amination Clip內設定的wrapMode來進行動畫播放。預設的wrapMode為WrapMode.Once。

2.WrapMode.Once：
當動畫時間軸到達Animation Clip終點時，正在播放中的Animation Clip會被自動的停止播放，並且時間軸會被重設回Animation Clip的一開始。

不過當Animation Clip是從終點反向播放到起點時，雖然在播放到起點時會也會被自動停止，但是時間軸並不會被重置回終點，而是留在起點。

3.WrapMode.Loop：
當動畫時間軸到達Animation Clip的終點時，時間軸會又回到起點的位置，並且繼續播放動畫。如果將播放模式設為反向時(即將Animation[ClipName].speed設為負值)，則會從反向播放動畫，而播放的起點與終點都會跟正向播放時相反。

Note:根據官方的說法，將AnimationState.speed設為負值時，Animation Clip就會被反向播放(A negative playback speed will play the animation backwards.)。但目前測試由3dMax匯出的Animation以及使用Unity Animation所做出的Clip，在播放移動Animation時，把AnimationState.speed設為-1，播放的結果是物件直接跳到起始位置，並沒在從終點移動到起點位置。這邊還需要再確認問題點在那邊。

Note(2012/11/20)：
今找到原因了，原先測試時，只有變更AnimationState.speed，而沒有去變更AnimationState.time。所以播放時，時間軸就已經在0的位置了，也因此看不到動畫做動。如要反向播放動畫則需變更AnimationState.Speed為負值以及設定AnimationState.time不為起點。

4.WrapMode.PingPong：
當動畫時間軸到達Animation Clip的終點時，時間軸會在往起點的方向前進。這個動畫效果會使物件重複的在Animation Clip的起點與終點之間來回的播放動畫。對於需要來回反複播放的動畫而言，就可以設定成此狀態。

5.WrapMode.ClampForever：
當動畫時間軸到達Animation Clip的終點時，時間軸將會停止在Animaiton Clip的終點，且動畫播放狀態依然是播放中，也就是Animation不會停止Animation Clip的動畫播放。而如果設定為反向播放時，時間軸到達起點時，也一樣會停止在起點，且Animaiton Clip也是在播放中的狀態。也因此，此設定會使Animation Clip只播放一次。

根據官方文件的說法，這個設定可以用在播放時間軸到達終點後不打算結束的Additive Animation上。根據測試的結果為，動畫物件是會停在時間軸的結束狀態下，但AnimationStates[].time還是會持續的增加或是減少(依據設定的播放時間值)。

在Animation以及Animation Clip上都有WrapMode的屬性，而透過Script去設定時，卻有些許的不同。對於wrapMode這個屬性，在Animation本身上，是可以在播放中就去設定，而且會立即生效；但是當Animation Clip正在播放中的時後，AnimationClip.wrapMode是不能被變更的(唯讀狀態)。

以下為操作測試：
I.在Script內去變更Animation.wrapMode時，WrapMode會立即的套用在Animation Clip的播放上(如果是透過Inspector來變更，則WrapMode不會立即的套用在Animation Clip的播放上)，但Animation Clip.warpMode還是保持原本的設定。

例如：Animation.wrapMode原本設定為WrapMode.Once，Animation Clip.wrapMode也設定為WrapMode.Once。在Animation.Play()之後，且Animation Clip播放完畢之前，將 Animation.wrapMode改為WrapMode.PingPong。則此時看到的動畫效果就變成來回播放，但是Animation Clip.wrapMode還是依舊為WrapMode.Once。

II.在Script內去變更Animation Clip.wrapMode時，WrapMode會立即套用到Animation Clip.wrapMode，但是並不會影響到正在播放的Animation。

例如：Animation.wrapMode原本設定為WrapMode.Once，Animation Clip.wrapMode也設定為WrapMode.Once。在Animation.Play()之後，且Animation Clip播放完畢之前，將 Animation.wrapMode改為WrapMode.PingPong。則此時看到的動畫還是播完後就停止了，但此時又再重新播放動畫的話，動畫效果還是一樣只播一次。不過在Animation Clip.wrapMode的設定上，是有被變更為WrapMode.PingPong。

例外原因：
會出現上面的狀況是因為Animation是透過AnimationState來控制動畫的播放。根據目前的測試，在編輯模式下，AnimationStates是一個空的陣列(圖1.)。當啟用Play模式時，Animation會把在Animations內所指定的Animation Clip的name以及wrapMode新增到AnimationStates內(圖2.)(Animation Clip的設定請參考圖3.)。由這邊看出Unity看起來是在Animation初始化的時候取得AnimationClip.wrapMode，並加到AnimationState內。

圖1.編輯模式下的Animation States

圖2.Play模式下的Animation States

圖3.AnimationClip的設定

在上述的狀況下，變更Animation Clip.wrapMode(圖4.)，此時卻發現一開始加到AnimationStates的wrapMode卻沒有變更。所以由此推測，這邊的wrapMode是從AnimationClip.wrapMode複製來的，而不是取得參考。這也可以指出，為什麼在Animation沒有重新取得AnimationClip時，播放的結果總是不同於設定的值。所以之後再怎麼變更AnimacionClip.wrapMode，Animatoin也不可能知到目前指定的AnimationClip已經有任何的變化。

圖4.變更AnimationClip.wrapMode 圖5.[圖4.]狀態下的Animation資訊

解決方案：
i.在使用Unity Editor的模式下，僅需再重新Play Game Mode，就可以使用到變更後的WrapMode。

ii.在使用編譯後的執行檔時，有三種方法可以使用變更後的WrapMode：
1.重新載入場景。
2.刪除目前GameObject所持有的Animation元件，並再重新加入Animation元件與Animation Clip
後。如要用這方法，則需在刪除Animation後的下一個Frame才可以再新增Animation元件，
不然Unity會跳出物件還存在且不可重複加入的錯誤訊息。原因是Object.Destroy()所說的
「物件的刪除總是在Update loop結束之後以及rendering之前發生」。
3.直接將新的Animation Clip.wrapMode指定給Animation[Animation Clip.name].wrapMode。

結論：
1.在Inspector修改Animation.wrapMode並不會立刻套用到目前的播放上。(AnimaitonStates不會被立即變更)

2.透過Script修改Animation.wrapMode會立即套用到所有的AnimationClip(包含目前的播放)在Animation Component內的wrapMode上。(AnimationStates會被立即變更)

3.變更過的AnimationClip.wrapMode需要Animation Component進行重載後，才會更新到AnimaitonStates。

4.播放中的Animation Clip是不能進行wrapMode的變更。

[Unity]Animation Component - Attributes

2012-11-16T16:21:00.000+10:00

參考資料：Scripting > Runtime Classes > Animation

跟據官方的說法，這個元件是用來做動畫播放使用。而整個動畫系統是利用「權重」的方式來進行動畫的播放。相關內容可以參考Unity Manual > Animation Scripting。底下針對Animation所提供的屬性來進行說明。

1.clip：(Animation Clip)
在沒有指定播放的clip時進行播放時，所會播放的Animation clip。即在Script內呼叫Animation.Play()時，Animation Component就會播放此組clip。在Inspector底下所看到的屬性如圖.1的紅框框選處。

圖1.Animation設定介面

2.playAutomatically：(bool)
這個屬性是用來決定在GameObject啟動(Active)時，是否要播放預設的Animation Clip。也就是此值為true時，Animation System則會在GameObject設為啟動(Active)之後，自動播放Animation.clip的動畫內容。在Inspector底下所看到的屬性如圖.1的綠框框選處。

3.wrapMode：(WrapMode)
此屬性是用來決定當Animation Clip播放完畢時，接下來要做何種處理。可以參考[Unity]Animation WarpMode。

4.isPlaying：(bool)
此屬性可用來判斷Animation Clip是否已經被播放完畢。當此屬性為true時，即是指定的Animation Clip還在播放中；反之為false時，則代表指定的Animation Clip已經停止播放了。

5.this[string name]：(AnimationState)
此Indexer可以透過Animation Clip的名稱來取得其所用到的AnimationState。因此如有需要修改AnimationState的屬性時，就可以使用此屬性。說明測試也可以參考[Unity]AnimationState。

6.animatePhysics：(bool)
這個屬性是用來設定Animation播放時，會不會受到物理引擎的影響。當此屬性設為true時，Animation Clip播放時，就會被加到物理引擎內進行計算。但如要使此設定有效時，還必需先在要播放Animation Clip的GameObject上加上RigidBody，並設定成會受物理引擎影響。在Inspector底下所看到的屬性如圖1.的黃框框選處。

Note:目前測試在播放水平移動的動畫時，再加上重力影響時，高度座標的的確是有所改變。
但其變化量比無播放動畫時的狀況還要來的小很多。

7.cullingType：(AnimationCullingType)
跟據官的說法，當culling被起動時(也就是設定不是AnimationCullingType.AlwaysAnimate)，Unity會在animation不會被使用者看到時，自動的停止AnimatoinClip的播放。因此這個設定是用來節省效能消耗。當動畫元件被culled的時候，AnimatoinState、Event或是Sample Animation(可以參考animation.sample() usage)都不會有做用。在Inspector底下所看到的屬性如圖1.的紫框框選處。(不過目前測試沒有成功的試出來。)

8.localBounds：(Bounds)
此屬性為Animation的動畫元件(animation component)在區域座標(local space)下的Axis-aligned minimum bounding box(AABB)。跟據官方的說法，此屬性在預設的條件下，是跟據動畫狀態(animation state，也就是所附加的Animation Clip)來計算的。而使用者也可以透過重新指定數值來變更目前的localBounds。

如有要數值更改回原設定值，就僅需將Animation.cullingType設定為AnimationCullingType.BasedOnClipBounds即可。在Animation.cullingType沒有設定為AnimationCullingType.BasedOnClipBounds或是AnimationCullingType.BasedonUse的時候，此屬性是沒有被定義的。然而當Animation.localBounds被設定時，系統就會自動將Animation.cullingType設定為AnimationCullingType.BasedOnUserBounds。

使用Google Code Prettify來顯示程式碼

2012-11-09T16:06:00.000+10:00

這邊網路上可以找到不少的參考資料，但為了自己方便尋找，所以就根據參考來源，備份一份資料。

參考來源：
1.優力歐不眠夜[在 blogger 中加入 google-code-prettify]
2.Google-Code-Prettify

I.設定：
使用方式如下：
1.登入網誌後台後選擇『範本』->『修改HTML』

2.在HTML內找到</head>，並將下列程式碼貼在</head>的前面。

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>

3.然後在body標籤內加上onload='prettyPrint()'。
(參考資料是利用<script>prettyPrint();</script>; )

4.存檔後，就可以用了。

II.如何使用：
之後如果在文章內需要貼程式碼時，就需要在HTML模式下，加入下面的語法。

<pre class="prettyprint lang-*">
//要顯示的文字
</pre>

「*」表示要用來顯示的語言類型，定義請參考How do I specify the language of my code?

III.實作範例：
用起來的感覺會像是底下這樣（用C++作範例)
[HTML語法]

<pre class="prettyprint lang-cpp">
class MyClass
{
    private:
        int Counter;
        std::vector&lt;int&gt; mCountList;

    public:
        MyClass(void);
        
    public:
        void Show(void);
}
</pre>

[顯示畫面]

class MyClass
{
    private:
        int Counter;
        std::vector<int> mCountList;

    public:
        MyClass(void);
        
    public:
        void Show(void);
}

在要顯示的程式碼內，如果有要用到「<」、「>」，要記得，一定要換成HTML裡面用的「<」及「>」。不然會變成一片空白嚕。

IV.行號顯示：
如果要顯示行號的話，就要在原本的lang後面加上linenums即可。
[HTML碼]

<pre class="prettyprint lang-cpp linenums">
class MyClass
{
    private:
        int Counter;
        
    public:
        MyClass(void);
        
    public:
        void Show(void);
}
</pre>

[顯示畫面]

class MyClass
{
    private:
        int Counter;
        std::vector<int> mCountList;

    public:
        MyClass(void);
        
    public:
        void Show(void);
}

如果在顯示區間內所顯示的程式碼是從原先的程式碼的第100行開始，就可以在linenums後面加上分號以及開頭的行號數值，這樣prettyprint就會把目前這段程式碼應該所在的行號標出來了。
[HTML碼]

<pre class="prettyprint lang-cpp linenums:100">
class MyClass
{
    private:
        int Counter;
        
    public:
        MyClass(void);
        
    public:
        void Show(void);
}
</pre>

[顯示畫面]

class MyClass
{
    private:
        int Counter;
        std::vector<int> mCountList;

    public:
        MyClass(void);
        
    public:
        void Show(void);
}

不過目前google code prettify在顯示行號上，就只會顯示(行號 Mod 5 == 0 &&行號 > 0)的行數的行號嚕。

雖然用起來有點麻煩，但是顯示上看起來還算可以嚕。
如果覺得上面的方法太麻煩，還有現成的網頁工具可以用，Source Code Formatter for Blogger, Blogspot , Blog & Blogging, Format Formatting Tool。
好處是，他可以幫你解決符號轉換的問題，也可以顯示每行的行號，缺點是，就沒有顏色了。XD

Otto's Coding Notes

Build docker image from multiple build contexts

What version of Docker is this tutorial targeting?

How to specify the version of Dockerfile frontend?

How to install/upgrade Buildx?

Why do we need the Build Context flag?

What is the Build Context flag?

Load build context from a Local Directory

Load build context via relative file path

Combine multiple build contexts

Load build context via absolute file path

Load build context from a Git repository

Clone the git repository via HTTPS

Clone the git repository via SSH

Load build context from a tarball via HTTP URL

Load build context from a docker image

Reference

How to use Markdown in Blogger

[Katalon] How to activate Katalon Studio

[Katalon] How to install Katalon Studio

[GCP] How to fix "Permissions error fetching application.. " while deploying a service to an existing project

[Tutorial] How to use variables in Twig

Find Window's Handle through PID

[Tutorial] How to setup development environment for Twig on MacOS

Composer: file_put_contents(./composer.json): failed to open stream: Permission denied

How to avoid shopping on a fraud website

Beware of the fraud ads on Facebook timeline

[GAE] How to create GWT project updated by Gradle for GAE on Eclipse

[Tools] Blog Code Highlight - a tool generating highlighted code with Pretty Print in Blogger

[Ant]How to build a property file (Build.property)

[Apache] Configure Apache for PHP in Mac OS X 10.11.3 El Capitan

[GWT]How to use Google Web Toolkits - Installation

This is what we facing Nowadays.

[Eclipse]新建立的Android專案出現"R cannot be resolved to a variable"

[Unity]使用Plugin - JAR將二進位檔寫入至SDCard

[Unity]Plugin建立過程 - JAR

[Android]存取External Storage

[CListCtrl]拖曳檔案至List上方

[Unity]AnimationState

[Unity]Animation WarpMode

[Unity]Animation Component - Attributes

使用Google Code Prettify來顯示程式碼

How to specify the version of `Dockerfile` frontend?

How to install/upgrade `Buildx`?