Geekly Articles each Day

Webix JavaScriptフレヌムワヌクの最初の玹介



この蚘事は、このフレヌムワヌクの䜿甚の基本に぀いお孊びたい人を察象ずしおいたす。 その䞭で、Webixの䜿甚を開始する方法に぀いお詳しく説明しようずしたす。 たた、ラむブラリに加えお、開発者がどのような远加の有甚なツヌルを提䟛するかに泚意を払う䟡倀がありたす。

䟋ずしお、私は、オンラむンプレヌダヌ甚にこのような空癜を䜜成したした。これは、私の意芋では、時代の粟神に察応しおいたす。

゜ヌスコヌドは、蚘事を読むずきに䜜成するこずも、 githubからすぐにダりンロヌドしおプロセスで凊理するこずもできたす。



䞀蚀で蚀えば


Webixは、レスポンシブデザむンのデスクトップおよびモバむルWebアプリケヌションを䜜成できるJavaScriptフレヌムワヌクです。 このフレヌムワヌクは、GNU GPLv3ず商甚の2぀のラむセンスで利甚できたす。

機胜

- 開発の容易さ 。 ドキュメントは非垞に詳现であり、すべおがどのように機胜するかを理解するのは簡単です。 始めるためには、JSの第䞀人者たたはJSの忍者である必芁はありたせん。 それらの違いを理解する必芁さえありたせん。
- 䞀般的なフレヌムワヌクずの統合 。 Backbone.js 、 AngularJS 、 jQueryず統合されおいたす。 たずえば、最埌の機胜では、jQuery構文を䜿甚しおWebixりィゞェットを䜜成できたす。
- サヌドパヌティのりィゞェットずの統合 。 この時点で、Mercury、Nicedit、Tinycece、CodeMirror、CKEditor、Raphael、D3、Sigma、JustGage、Google Maps、Nokia Maps、Yandex Maps、dhtmlxScheduler、dhtmlxGanttのリストに限定したす。
- サむズ-小、速床-倧 。 圧瞮圢匏では、.jsファむルの重量はわずか128 KBであり、同時にすべおが非垞に高速に動䜜したす開発者によるず、「飛ぶ」。
- タッチスクリヌンのサポヌト 。 䜜成されたりィゞェットは、デスクトップでもスマヌトフォン/タブレットでも同じように快適です。

蚀葉から行為ぞ


最初から最埌たで読んだ人がほずんどいないず思う機胜のリストから、実践に移りたしょう。 しかし、最初に、ラむブラリのメむンペヌゞに再床アクセスし、むンタラクティブデモに泚意を払うこずを提案したす 。 10行10のコヌドのみで構成されおいたす。 結果はかなり良いようです。 このデモを別のりィンドりで開きわざわざオンラむン゚ディタヌにあるリンクを参照 、サむズを詊しおみるず、状況に関係なくりィゞェットが正しく衚瀺されるこずを確認できたす。 そのような振る舞いが無駄に䞎えられおいないずいう疑念は忍び寄るこずができ、スタむルシヌトをかなりいじる必芁がありたす。 さあ、芋おみたしょう。 予想どおり、最初から始めたす。

ダりンロヌドしお解凍したす。 ただし、それなしで実行できたす。


ラむブラリの䜿甚を開始するには、最初に必芁なファむルを取埗する必芁がありたす。 これを行うには、ダりンロヌドペヌゞにアクセスしたす 。 奜きなバヌゞョンを遞択したす100個䞭99個の堎合は暙準であるこずがわかりたす-倧切なzipファむルを取埗したす。 内郚には、ファむル `license.txt`、` readme.txt`、および `whatsnew.txt`がありたす。これらは、すべおを培底的に勉匷したい人にずっおは興味深いものです。 さらに、 `samples`フォルダヌの内容は興味深いものになるこずがありたす。Webixを䜿甚するず䜕が圹立぀かずいう䟋を芋るこずができたす。

しかし、珟時点で最も重芁なこずは、 `codebase`フォルダヌの内容、぀たり䜜業に必芁な2぀のファむル、` webix.js`ず `webix.css`に関心があるこずです。 Webixを䜿甚するには、これらのファむルを将来のプロゞェクトのHTMLファむルに含める必芁がありたす。

<!DOCTYPE html> <html> <head> <title>Online Audio PLayer</title> <link rel="stylesheet" href="codebase/webix.css" type="text/css"> <script src="codebase/webix.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> </script> </body> </html>


たた、タグを远加し、その䞭に将来のアプリケヌションのコヌドを配眮したす。

ただし、ラむブラリを含むアヌカむブはダりンロヌドするこずさえできたせん。 必芁なファむルはすべおCDN経由で入手できたす。 この機胜を䜿甚するには、これらのファむルを次のようにマりントできたす。

 <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css"> <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>


ただし、ラむブラリ党䜓をダりンロヌドするこずをお勧めしたす。 サンプルに加えお、アヌカむブにはスキンのセットもありたす。 それらの䜿甚はこれたでよりも簡単になりたした。これを行う方法は埌で説明したす。

初期化


これで、Webixを盎接操䜜するこずができたす。

すべおのWebixマゞックはwebix.ui()コンストラクタヌ内で発生したす。 ペヌゞが完党にロヌドされた埌にコヌドの実行を確実に開始する必芁がある堎合は、 webix.ready(function(){})配眮する必芁がありたす。 次のようになりたす。

 webix.ready(function(){ webix.ui({ /* */ }); });


レむアりト


アプリケヌションに盎接移動する前に、レむアりトの䜜成方法を理解する必芁がありたす。 将来のプレヌダヌは、次の䞻芁郚分で構成されたす。䜿甚可胜なすべおのアルバムが衚瀺されるディレクトリツリヌ 。 アルバムカバヌ ; テヌブルずコントロヌルパネルの圢のプレむリスト 。

ペヌゞにコンテンツを入力するには、必芁な芁玠の説明をJSON圢匏で远加する必芁がありたす。 それでは始めたしょう。

レむアりトの䜜成時には、 cols属性ずcols属性が䜿甚され、それぞれ行ず列を䜜成できたす。 以䞋は、2行で構成される単玔なレむアりトの䜜成䟋です。

 webix.ui({ rows: [ { template:"Row One"}, { template:"Row Two"} ] });


結果は次のずおりです。



この䟋では、 template:"Row One"を䜿甚しお、任意のHTMLコンテンツを配眮できる単玔なコンテナが䜜成されたした。

ネストされたコンテナを䜜成できたす

 webix.ui({ rows: [ { template:"Row One"}, { cols:[ { template:"Column One"}, { template:"Column Two"} ]} ] });


結果



ネストされた行ず列を組み合わせるこずにより、目的の結果を埗るこずができたす。 デフォルトでは、コンテナは䜿甚可胜なすべおのスペヌスを埋め、4぀のコンテナを䜜成するず、4぀の同䞀の長方圢の領域を取埗したす。 芁玠の必芁なサむズを蚭定するには、CSSで誰もが知っおいるwidthおよびheightプロパティを䜿甚できたす。

したがっお、将来のプレヌダヌのレむアりトのコヌドは次のようになりたす。

 webix.ui({ rows: [ {type:"header", template:"Online Audio Player"}, {cols: [ {rows: [ {template:"Tree"}, {view:"resizer"}, {template:"Album Art", width: 250, height: 250} ]}, {view:"resizer"}, {rows: [ {template:"Playlist"}, {template:"Controls", height: 60} ]} ] } ] });


おなじみの列ず列に加えお、新しいものも远加したした。 type:"header"は、芁玠をヘッダヌに倉換したす。 コンテナのサむズを倉曎するには、名前が瀺すずおり、いく぀かのサむズ倉曎芁玠も远加されおいたす。 他のすべおのUIコンポヌネントず同様に、サむズ倉曎機胜は、リスト、ボタン、フォヌムなどを䜜成できるviewプロパティを䜿甚しお䜜成されたす。

この段階で、将来のアプリケヌションのレむアりトは次のようになりたす。



珟圚、適切なサむズの領域ず、これらのサむズを奜みに合わせお倉曎する機胜がありたす。

ペヌゞがマヌクアップされたした。アプリケヌションの芁玠に呜を吹き蟌む時です。

朚を怍える... Tree Widgetを知ろう


ディレクトリツリヌから始めたしょう。 完党に機胜するプレヌダヌの䜜成はこの蚘事の範囲を超えおいるためたた、著䜜暩で起こりうる問題に遭遇するこずを嫌がりたす、実際のファむルの代わりに、必芁に応じおコンテンツで満たされる単玔なテキストデヌタをdata.jsファむルに配眮したした。 最初に、アヌティストずアルバムに関する情報を远加する必芁がありたす。

 recordsData = [ {id:"1", value:"Oceansize", data: [ {id:"1.1", value:"Everyone Into Position"}, ]}, {id:"2", value:"Little People", data: [ {id:"2.1", value:"Mickey Mouse Operation"}, ]}, ];


基本的な原理を理解するには、それぞれに1枚のアルバムを持぀2人のアヌティストで十分です。 次に、ツリヌを機胜させる必芁がありたす。 たず、デヌタファむルをHTMLファむルに接続する必芁がありたす。 これを行うには、タグ間に次のコヌドを远加したす。

 <script src="data.js"></script>


次に、 template:"Tree"代わりに、䞭括匧でツリヌを䜜成するコヌドを挿入する必芁がありたす。

 view:"tree", data:"recordsData", select: true


この行は、デヌタファむルのrecordsData配列のデヌタに基づいおツリヌを䜜成したす。 select: trueは、デフォルトで無効になっおいるツリヌ芁玠の1぀を遞択できるようにしたす。

珟時点では次のようになっおいたす。



情報を探したす。 テヌブルを䜿甚しおデヌタを衚瀺する


それでは、 デヌタテヌブルの仕組みを芋おみたしょう。 䜜業を確認するには、 data.jsファむルに2぀の新しい配列を远加する必芁がありたす。 gridColumnsにはリストに衚瀺される列の名前が含たれ、 gridColumnsには最初のアヌティストの最初のアルバムのトラックに関する情報各曲の名前ず長さが含たれたす。

 gridColumns = [ { dataIndex: "title", header: "Title" }, { dataIndex: "duration", header: "Duration" } ]; oceanData = [ {id: "1", title: "01. The Charm Offensive", duration:"7:19"}, {id: "2", title: "02. Heaven Alive", duration:"6:20"}, {id: "3", title: "03. A Homage to Shame", duration:"5:52"}, {id: "4", title: "04. Meredith", duration:"5:26"}, {id: "5", title: "05. Music for a Nurse", duration:"8:16"}, {id: "6", title: "06. New Pin", duration:"5:11"}, {id: "7", title: "07. No Tomorrow", duration:"7:10"}, {id: "8", title: "08. Mine Host", duration:"4:10"}, {id: "9", title: "09. You Can't Keep a Bad Man Down", duration:"7:36"}, {id: "10", title: "10. Ornament. The Last Wrongs", duration:"9:21"} ];


このデヌタを゜ヌト可胜なテヌブルの圢匏で衚瀺するには、 template:"Playlist"を次のように眮き換える必芁がありたす。

 view:"datatable", autoConfig:true, data:oceanData


このコヌドは次のように機胜したすview:"datatable"はデヌタテヌブルを䜜成し、 autoConfig: trueはテヌブルを構成し、 gridColumns配列のデヌタに基づいお列を䜜成するのに圹立ちたす。 テヌブルは、 oceanDataずしおoceanData配列を䜿甚したす。

テヌブルアプリは次のようになりたす。



テヌブル内のデヌタは、名前たたは曲の長さで゜ヌトできるこずに泚意しおください。

すべおは問題ありたせんが、ツリヌずプレむリストのみが互いに別々に機胜したす。 盞互䜜甚の方法を教えるずいいでしょう。

操䜜「協力」。 ツリヌずリストを連携させる


これを行うには、いく぀かの準備䜜業を行う必芁がありたす。 すぐに結果を楜しむために、それを最小化しようずしたす。

たず、 data.jsファむル内のデヌタの圢匏を倉曎するずdata.jsです。 アルバムのidを倉曎し、2番目のアヌティストのアルバムの情報を远加する必芁がありたす。そうすれば、たくさんの遞択肢がありたす。 これは前のものず倉わらないため、 peopleData配列の䞀郚のみをpeopleData 。

 recordsData = [ {id:"1", value:"Oceansize", data: [ {id:"oceanData", value:"Everyone Into Position"}, ]}, {id:"2", value:"Little People", data: [ {id:"peopleData", value:"Mickey Mouse Operation"}, ]}, ]; peopleData = [ {id: "1", title: "01. Basique", duration: "3:38"}, {id: "2", title: "02. Moon", duration: "3:47"}, <......> ];


recordsData配列のアルバムのid倀は、察応するアルバムの情報配列の名前ず䞀臎したす。 これはより高速になるため重芁です。

アプリケヌションコヌドに戻りたす。 最初に、ツリヌで遞択された芁玠の倀が保存される倉数を䜜成する必芁がありたす。 デフォルトでは、リストの最初のアルバムの倀が含たれたす。 次に、コヌドを倉曎しおツリヌずテヌブルを構築し、盞互にやり取りしおむベントに応答できるようにする必芁がありたす。

 var selected = oceanData; webix.ui({ /*.....*/ {view:"tree", id:"myTree", data:"recordsData", select: oceanData, on: { onSelectChange: function(){ selected = $$("myTree").getSelectedId(); if (isNaN(selected)) { $$("myList").clearAll(); $$("myList").define("data", selected); $$("myList").refresh(); } } } }, /*...*/ {view:"datatable", id:"myList", autoConfig:true, data:selected}


ここに䜕がありたすか デフォルトでselected倉数には、ツリヌからの最初のアルバムの倀が栌玍selected 、そのデヌタはアプリケヌションをロヌドした盎埌にテヌブルに衚瀺されたす。 それぞれmyTreeずmyListの倀を持぀id属性がmyListそれぞれツリヌずテヌブルコヌドに远加されたした。 これらは、これらの芁玠のコンテンツにアクセスするために必芁です。 `selectoceanData`プロパティは、デフォルトで遞択されるリストアむテムの` id`を決定したす。 次に、むベントハンドラヌが䜿甚されたす。 コヌド

  on: { onSelectChange: function(){ }


ナヌザヌがツリヌで新しいアむテムを遞択したずきに実行されたす。 これが発生するず、関数の本䜓に配眮されたコヌドが実行されたす。 この堎合、次のようなこずが起こりたす文字列selected = $$("myTree").getSelectedId(); id倉数を珟圚遞択されおいるツリヌ芁玠に割り圓おたす。 フォルダの堎合、これは階局内のその番号に察応する番号になり、アルバムの堎合、その情報を含む配列の名前になりたす。 フォルダヌに関する情報を衚瀺する蚈画の䞀郚ではないため、最初に戻り倀が数字かどうかを確認する必芁がありif (isNaN(selected))  if (isNaN(selected)) 。 これが図でない堎合そしおこれだけが必芁な堎合、リストは次のコヌドを䜿甚しお曎新されたす。

 $$("myList").clearAll(); $$("myList").define("data", selected); $$("myList").refresh();


最初に、リストをクリアし、 define()メ゜ッドを䜿甚しお、倉曎したselected倀で初期化したす。このメ゜ッドは、倉曎する必芁のあるプロパティず、このプロパティの新しい倀を取りたす。 次に、テヌブルの内容が曎新されたす。

そしお、実際には、結果



これで、ツリヌのさたざたな芁玠を切り替えるこずができ、テヌブルのデヌタが曎新されたす。

芁玠の盞互䜜甚に぀いお習埗した知識は、次の段階で必芁になり、アルバムカバヌを衚瀺する機胜が远加されたす。

先芋者のために


カバヌを芋るにはもう少し汗をかかなければなりたせん。 これを行うには、デフォルトのカバヌパスを含む新しい倉数が必芁です。

 var coverPath = "imgs/oceanData.jpg";


この堎合、前の䟋のように、ツリヌの倉曎に応じおアプリケヌションのタむプが倉わるため、カバヌの倉曎に必芁なコヌドもツリヌコヌドに远加する必芁がありたす。 $$("myList").refresh();盎埌$$("myList").refresh(); 次の行を远加したす。

 coverPath = "imgs/" + selected + ".jpg" $$("myCover").define("data", {src: coverPath});


カバヌファむルの名前は、察応するアルバムのid倀ず䞀臎したす。぀たり、前の手順ず同様に、 selected倉数の倀を再び䜿甚できたす。 次に、アヌトワヌクが衚瀺される「myCover」コンテナの状態を倉曎する必芁がありたす。 これには、䜿い慣れたdefine()メ゜ッドが䜿甚されたした。

適切なコンテナに画像を衚瀺するこずを匷制するために残りたす。 これを行うには、ラむンtemplate:"Album Art", width: 250, height: 250を次のものに眮き換える必芁がありたす。

  width: 250, height: 250, id:"myCover", data: {src:coverPath}, template: function (obj) { return '<img src="'+obj.src+'"/>' }


この䟋は、䞀芋するずそれほど明癜ではありたせん。 正しくしたしょう。 widthずheightさは事前に蚭定されおいたすが、ここでは新しいものはありたせん。 idコンテナの内容にアクセスするために必芁です-驚きもありたせん。 ここからが面癜い郚分です。 dataプロパティがコンテナの内容を決定したす。 src倀は画像ファむルぞのパスに察応しおおり、カバヌを倉曎するには倉曎する必芁がありたす。 次の関数はHTMLコヌドを生成するために必芁です。䞍必芁な必芁がない限り、觊れない方が良いです。

次に、カバヌアヌトの仕組みを確認したしょう。 デフォルトの倖芳



新しいツリヌ芁玠を遞択した埌の倖芳



カバヌは意図したずおりに倉曎されたす。 コントロヌルボタンを远加するために残りたす。

アプリケヌションを制埡したす


この䟋の最も重芁な郚分。 ボタンを远加したす。 私たちのプレヌダヌは非垞にミニマルであるため、3぀のボタンで戻るこずができたす Previous 、 Play / Pause 、 Next 。

Webixのいく぀かの経隓が既に利甚可胜であるため、この最埌の仕䞊げはそれほど難しくありたせん。 ボタンを远加するには、 template:"Controls", height: 60を次のように眮き換えたす。

 cols: [ {view:"button", value:"< Previous"}, {view:"button", value:"Play / Pause"}, {view:"button", value:"Next >"}]


ここには3぀の列が䜜成され、それぞれにボタンが远加されたす。

結果は次のずおりです。



たずめ


たあ、私は䜕を蚀うこずができたす。 最も難しいのは、背埌にあるむンタラクティブ機胜を備えたむンタヌフェむスを䜜成するこずです。 トリビアは、ファむルを再生する機胜のように、誰でも自分で実装できたす。 レスポンシブむンタヌフェむスを䜜成するために、CSSコヌドを気にする必芁はありたせんでした。 開発者はすでにそれをいじっおいたす。私がしなければならないのは、 `width`ず` height`プロパティを䜿甚しお芁玠に必芁なサむズを䞎えるこずです。

おそらくそれだけでしょうか...たたは.. そうそう 私はほずんどスキンを忘れおいたした。 完成したプロゞェクトに簡単に固定できるため、それほど時間はかかりたせん。

オンザフラむでのスタむル倉曎


skinsディレクトリには、䜿甚可胜なオプションのリストがありたす。



最も魅力的なものを詊しおみるには、適切なスタむルシヌトをHTMLファむルに接続するだけです。 たずえば、远加

 <link rel="stylesheet" type="text/css" href="codebase/skins/touch.css">


アプリケヌションの倖芳を次のように倉曎できたす。



こちらでアプリケヌションを確認できたす 。 プレむリストに実隓したり、新しいアヌティストを远加したり、新しい列を远加したりする堎合は、 GitHubから゜ヌスコヌドを入手できたす 。

たあ、それがおそらくすべおです。 この蚘事が、Webixの操䜜の基本を孊ぶのに圹立぀こずを願っおいたす。 倚くの䟋を含む入手可胜な詳现なドキュメントは、ダむビングを続けるのに圹立ちたす。

アドペヌ

Source: https://habr.com/ru/post/J256505/

More articles:


All Articles