jQuery UI,PHP,Netbeans,lubuntu-14.04,VirtualBox | 乖離のぶろぐ（*´∀｀）吸い込んで応援
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

乖離のぶろぐ（*´∀｀）吸い込んで応援

（*´∀｀）

jQuery UI,PHP,Netbeans,lubuntu-14.04,VirtualBox

(ﾟωﾟ)「標準」と書いているから必須。
http://www.ibm.com/developerworks/java/library/wa-jquerythemes/index.html
http://www.ibm.com/developerworks/jp/web/library/wa-jquerythemes/
jQuery UI のテーマを扱う
jQuery UI はウィジェットをサポートすることから、現在、テーマを実装する上での業界標準となっています。Java アーキテクトの Ken Ramirez と一緒に jQuery UI プラットフォームについて探り、jQuery UI のネイティブ・テーマの使い方を学んで、サイトに適したカスタム・テーマを設計してください。
Ken Ramirez (ken.ramirez@axsystechgroup.com), Senior Java Architect/Consultant, Axsys Technology Group
04 April 2013

The jQuery UI themes folder structure
jQuery UI のthemes フォルダー構造
さまざまなファイルとその内容を調べる前に、jQuery UI プラットフォーム (「参考文献」のリンクを参照) からいずれかのテーマをダウンロードしてください。
http://jqueryui.com/download/
(ﾟωﾟ) Startを選んでDownloadしてみた。
20140512_042117_JST_lubuntu-14.04-desktop-amd64.iso jqueryui Startを選んでDownloadしてみた.png

(ﾟωﾟ)中身は・・・



http://www.ibm.com/developerworks/jp/web/library/wa-jquerythemes/#list1
Listing 1. Example application using common widgets

(ﾟωﾟ)入っていたindex.htmlは、
jquery-ui-1.10.4.custom/index.html
(ﾟωﾟ)なのだが、赤い行を参考に、「Listing 1」のソースを修正すれば良い。と気づく。

<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<link href="css/start/jquery-ui-1.10.4.custom.css" rel="stylesheet">
	<script src="js/jquery-1.10.2.js"></script>
	<script src="js/jquery-ui-1.10.4.custom.js"></script>


http://www.ibm.com/developerworks/jp/web/library/wa-jquerythemes/#list2
Listing 2. The associated JavaScript file for the example application
(ﾟωﾟ) index.jsも作ってみると、こんな感じ。


http://www.ibm.com/developerworks/java/library/wa-jquerythemes/index.html
Figure 2. An example application using common widgets


http://www.ibm.com/developerworks/java/library/wa-jquerythemes/index.html
http://www.ibm.com/developerworks/jp/web/library/wa-jquerythemes/#list4
Listing 4. Changing themes on the fly
(ﾟωﾟ)まったく動かないから、このチュートリアルは中止。
(ﾟωﾟ)こっちの２４回を見ていこう。
http://www.buildinsider.net/web/jqueryuiref
jQuery UI逆引きリファレンス - Build Insider:

http://www.buildinsider.net/web/jqueryuiref/0001
jQuery UIを利用するには？ - Build Insider:
2013年7月11日
jQuery UIはjQueryのプラグインですので、ライブラリをインポートするに当たっては、jQuery→jQuery UIの順番で記述
http://jqueryui.com/download/
利用する機能があらかじめ特定できる場合には、不要な機能のチェックを外すことで、ライブラリのサイズを抑えることも可能

http://www.buildinsider.net/web/jqueryuiref/0002
jQuery UI： DatePickerウィジェットで日付選択ボックスを作成するには？ - Build Insider:
(ﾟωﾟ) jquery-ui-1.10.4.custom.zip にデモが入っていた。
(ﾟωﾟ) JSON形式でパラメタを渡すのか・・


http://www.buildinsider.net/web/jqueryuiref/0006
jQuery UI： Buttonウィジェットでさまざまなボタンを生成するには？ - Build Insider:
(ﾟωﾟ)class名にonlyが使えないらしい。


http://www.buildinsider.net/web/jqueryuiref/0010
jQuery UI Accordionウィジェット： アコーディオン・パネルの内容を外部ファイル化するには？ - Build Insider:
(ﾟωﾟ)そろそろマニュアルを見ないと難しく成ってきた。
http://api.jqueryui.com/accordion/

http://www.buildinsider.net/web/jqueryuiref/0010
jQuery UI Accordionウィジェット： アコーディオン・パネルの内容を外部ファイル化するには？ - Build Insider:
(ﾟωﾟ)そろそろマニュアルを見ないと難しく成ってきた。
http://api.jqueryui.com/accordion/
(ﾟωﾟ)タイトルをクリック毎に、loadすれば良いと思う。こんな風に。



http://www.buildinsider.net/web/jqueryuiref/0012
jQuery UI Dialogウィジェット： JavaScriptからダイアログ・ボックスを動的に操作するには？ - Build Insider:
(ﾟωﾟ) <body>の直下にウイジェットのデモを追加していくと、
(ﾟωﾟ) モードレスダイアログウインドウの位置へ、勝手にスクロールするのが嫌になる。
(ﾟωﾟ) ダイアログに「このページの初めへ移動」ボタンを付けた。

    <body style="font-size: 10px;">
        <h3><a name="hajime">このページの初め The beginning of this page</a></h3>


http://www.buildinsider.net/web/jqueryuiref/0019
jQuery UI： AutoCompleteウィジェットで候補リストをサーバーサイドから取得するには？ - Build Insider:
(ﾟωﾟ)DBから候補リストをJSON形式で取得するらしい。
(ﾟωﾟ)DBのテーブル作成は以前作ったから、それを参考に、
http://ameblo.jp/pochifx/entry-11843050541.html
>lubuntu-14.04 , IBM developerworks PHP の学習:
(ﾟωﾟ)とりあえず、DBのテーブル作成。
buntu@ubuntu-VirtualBox:~$ mysql -h localhost -u root -p
Enter password:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 36
Server version: 5.5.37-0ubuntu0.14.04.1 (Ubuntu)

Copyright (c) 2000, 2014, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| workflow           |
+--------------------+
4 rows in set (0.04 sec)


mysql> use workflow;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
mysql> create table keywords (id int auto_increment primary key, value varchar(255));
Query OK, 0 rows affected (0.00 sec)

mysql> desc keywords;
+-------+--------------+------+-----+---------+----------------+
| Field | Type         | Null | Key | Default | Extra          |
+-------+--------------+------+-----+---------+----------------+
| id    | int(11)      | NO   | PRI | NULL    | auto_increment |
| value | varchar(255) | YES  |     | NULL    |                |
+-------+--------------+------+-----+---------+----------------+
2 rows in set (0.00 sec)


(ﾟωﾟ)もっと旨いSQLが有ると思うが、データは入ったら良いからINSERT文を連打。
insert into keywords (value) values ('accepts');
insert into keywords (value) values ('action_name');
insert into keywords (value) values ('add');
insert into keywords (value) values ('add_column');
insert into keywords (value) values ('add_index');
insert into keywords (value) values ('add_timestamps');
insert into keywords (value) values ('after_create');
insert into keywords (value) values ('after_destroy');
insert into keywords (value) values ('after_filter');
insert into keywords (value) values ('all');

mysql> select * from keywords;
+----+----------------+
| id | value          |
+----+----------------+
|  1 | accepts        |
|  2 | action_name    |
|  3 | add            |
|  4 | add_column     |
|  5 | add_index      |
|  6 | add_timestamps |
|  7 | after_create   |
|  8 | after_destroy  |
|  9 | after_filter   |
| 10 | all            |
+----+----------------+
10 rows in set (0.00 sec)


(ﾟωﾟ) SELECT文も調べておく。
mysql> SELECT value FROM keywords WHERE value LIKE BINARY 'ac%';

+-------------+
| value       |
+-------------+
| accepts     |
| action_name |
+-------------+
2 rows in set (0.00 sec)


mysql> SELECT value FROM keywords WHERE value LIKE BINARY 'AC%';
Empty set (0.00 sec)

mysql> SELECT value FROM keywords WHERE value LIKE BINARY '%er%';

+---------------+
| value         |
+---------------+
| after_create  |
| after_destroy |
| after_filter  |
+---------------+
3 rows in set (0.00 sec)


mysql> SELECT value FROM keywords WHERE value LIKE BINARY '%e';

+--------------+
| value        |
+--------------+
| action_name  |
| after_create |
+--------------+
2 rows in set (0.00 sec)


(ﾟωﾟ) http://jqueryui.com/download/ の Theme Startで取得したZipファイル（
(ﾟωﾟ) jquery-ui-1.10.4.custom.zip ）は、丸ごとPhpProject7の下に置いている。
(ﾟωﾟ) 下記のソースが参考になる。
PhpProject7/jquery-ui-1.10.4.custom/development-bundle/demos/autocomplete/remote.html
PhpProject7/jquery-ui-1.10.4.custom/development-bundle/demos/autocomplete/search.php

(ﾟωﾟ) AutoComplete MySQL json_encode　動いた！
ubuntu@ubuntu-VirtualBox:~/NetBeansProjects/PhpProject7$ ls -la

合計 104
drwxrwxr-x 8 ubuntu ubuntu  4096  5月 19 00:13 .
drwxrwxr-x 5 ubuntu ubuntu  4096  5月 17 06:53 ..
drwxrwxr-x 4 ubuntu ubuntu  4096  5月 19 09:49 .svn
drwxrwxr-x 2 ubuntu ubuntu  4096  5月 17 06:53 images
-rw-rw-r-- 1 ubuntu ubuntu   438  5月 17 06:53 index.js
-rw-rw-r-- 1 ubuntu ubuntu 69426  5月 19 09:17 index.php
drwxrwxr-x 5 ubuntu ubuntu  4096  5月 17 06:53 jquery-ui-1.10.4.custom
drwxrwxr-x 3 ubuntu ubuntu  4096  5月 17 06:58 nbproject
drwxrwxr-x 2 ubuntu ubuntu  4096  5月 19 00:13 record
drwxrwxr-x 2 ubuntu ubuntu  4096  5月 17 06:53 tabs

ubuntu@ubuntu-VirtualBox:~/NetBeansProjects/PhpProject7$ nl ./record/autocomplete.php
 
     1	<?php
     2	if (empty( filter_input( INPUT_GET, 'term' ))){
     3	    exit ;
     4	}else{
     5	    // http://jp1.php.net/manual/ja/function.strtolower.php
     6	    $qV = strtolower(filter_input( INPUT_GET, 'term') );
     7	}
     8	$dbh = new PDO('mysql:host=localhost;'
     9	        . 'dbname=workflow', 'wfuser', 'wfpass');
    10	$stmt = $dbh->prepare("SELECT value FROM keywords"
    11	        . " WHERE value LIKE BINARY '$qV%'" );
    12	// $stmt->bindParam('qV', $qV); //なぜか使えない。
    13	$stmt->execute();
       
    14	// SELECT結果を JSON形式に変換準備    
    15	$result = array(); //配列を初期化
    16	while ($row = $stmt->fetch()) {
    17	    $strLabel=$row[value]."メソッド";
    18	    array_push( $result,
    19	            array("value" => $row[value], "label"=>$strLabel));
    20	}
       
    21	// json_encode is available in PHP 5.2 and above, or you can install a PECL module in earlier versions
    22	echo json_encode($result);



http://www.buildinsider.net/web/jqueryuiref/0024
jQuery UI Tooltipウィジェット： ツールチップへの表示内容をカスタマイズするには？ - Build Insider:
20140520_205043_JST_lubuntu-14.04-desktop-amd64.iso jQuery UI Tooltip.png


(ﾟωﾟ)感想。
20140512_042117_JST_lubuntu-14.04-desktop-amd64.iso jqueryui Startを選んでDownloadしてみた.png
(ﾟωﾟ)　から始ったjQuery UIの学習は5月20日まで、８日掛かった。
(ﾟωﾟ)　jQuery UIは、PHPでwebアプリを始めようと思っているC言語技術者向けのスクリプト。

(ﾟωﾟ) 画面キャプチャはツイッターの画像が鮮明なのでURLを貼っておく。
https://twitter.com/kai_ri_no/status/465564903424544768