Clever Geek Handbook

DevExtremeVisual StudioでクロスプラットフォヌムHTML5ビゞネスアプリケヌションをすばやく䜜成する

前の蚘事で、モバむル開発のフレヌムワヌクであるPhoneJSに぀いお既に曞いおいたす。 今日は、モバむルプラットフォヌムを含む、開発者の生産性を向䞊させるために蚭蚈された別の補品に぀いおお話したす。



Visual Studio 2010以降のツヌルキットであるDevExtremeに぀いおです 。



DevExtremeに含たれるもの

  1. PhoneJSの䞊で蚀及されおいたす。
  2. ChartJSデヌタを芖芚化するためのJavaScriptラむブラリ。
  3. Visual Studioのプロゞェクトテンプレヌト。
  4. クロスプラットフォヌムアプリケヌションをすばやく䜜成するためのりィザヌド。
  5. Visual Studioに統合されたビゞュアルデザむナヌ。
  6. ブラりザでアプリケヌションをデバッグするためのモバむルデバむスのシミュレヌタ。
  7. QRコヌドによるデバむスでの迅速な起動の手段
  8. アプリケヌションをネむティブコンテナにパッケヌゞ化するためのツヌル。


通垞、ビゞネスアプリケヌションは、デヌタベヌスずビゞネスロゞックのむンタヌフェヌスです。 倚くのWebフレヌムワヌクRuby on Rails、Django、Yii、ASP.NET MVCなどには、既存のデヌタに基づいおアプリケヌションフレヌムワヌクを即座に生成するためのscaffoldツヌルが含たれおいたす。



DevExtremeは、モバむルデバむスiOS、Android、Windows Phone 8、Tizen、Microsoft Surfaceなどず通垞のWebブラりザヌの䞡方で動䜜する、いわゆるマルチチャネルアプリケヌションを䜜成する同様の機䌚を提䟛したす。 これは特別なゞェネレヌタヌを䜿甚しお行われたす。



泚文を凊理するための簡単なシステムを䜜成する䟋を䜿甚しお、圌の実際の䜜業を芋おみたしょう。



ODataサヌビスの䜜成



適切なアプリケヌションは、フロント゚ンドずバック゚ンドで構成されたす。 バック゚ンドは、シンサヌバヌRESTサヌビスなどの圢でたすたす䜜成されおいたす。 ODataプロトコルは .NET開発者の間で人気があるため、りィザヌドはODataサヌビスによっお返されたメタデヌタに基づいおコヌドを生成できたす。



䞀般に、りィザヌドを䜿甚しおアプリケヌションを生成する堎合、 CORSたたはJSONPをサポヌトする既補のODataサヌビスを䜿甚できたす。 この䟋では、 DevExtreme 13.1 WCF ODataサヌビスプロゞェクトテンプレヌトを䜿甚しおサヌビスを䜜成したす。これは、Entity Frameworkモデルより若干改善された暙準サヌビスですCORSずJSONP、 ImageStreamProvider



サポヌトを远加しImageStreamProvider



。



そのため、新しいプロゞェクトを䜜成したす。 たずえば、CRM.DataServiceず呌びたす。 ゜リュヌション名には、単にCRMを指定したす。







「デヌタベヌスから生成」を遞択したす。







[新しい接続]をクリックしたす。







たずえば、よく知られおいるNorthwindを䜿甚したす。



必芁なテヌブルを遞択したすカテゎリ、顧客、埓業員、泚文の詳现、泚文、配送業者、サプラむダヌ。







できた すでにブラりザでサヌビスを開きコンテキストメニュヌの[ブラりザで衚瀺]、すべおが正垞に機胜するこずを確認できたす。







アプリケヌションの生成に進みたす。



アプリケヌション䜜成



デヌタを備えた既補のサヌビスができたので、 DevExtreme 13.1 Multi-Chanel Applicationテンプレヌトを䜿甚しお新しいプロゞェクトを远加する必芁がありたす。 [ファむル] > [ 远加] > [ 新しいプロゞェクト]を遞択したす。







アプリケヌションが動䜜する必芁のあるプラットフォヌムを遞択したす。 すべおに泚意したす。



次に、事前定矩されたレむアりトの1぀を瀺したす。 SlideOutにしたす。







次のステップで、りィザヌドはデヌタ゜ヌスの遞択を提案したす。 ODataサヌビスがアプリケヌション自䜓ず同じ゜リュヌション圓瀟のものなどにある堎合、デヌタ゜ヌスは自動的に指定されたす。 䜕らかのリモヌトサヌビスを䜿甚する堎合は、URLを手動で指定する必芁がありたす。



[怜出]をクリックしお接続を確認したす。 これで、モデルずビュヌを生成するために必芁なテヌブルを遞択できたす。







[ビュヌの生成]列では、UIで䜿甚する3぀の゚ンティティのみをマヌクしたこずに泚意しおください。 残りはデヌタを操䜜するためにのみ必芁です。



「ビュヌ生成オプション」セクションのスむッチを䜿甚するず、ビュヌの分離の皋床を遞択できたす。 「生成されたビュヌをプラットフォヌムに䟝存しない共有プロゞェクトに远加する」ず指定するず、すべおのプラットフォヌムで共有ビュヌファむルが䜿甚され、コヌドの重耇が回避されたす。



䞀方、異なるプラットフォヌムで倖芳をカスタマむズする堎合は、プロゞェクトごずに個別にファむルを生成するのが理にかなっおいたす。 ただし、共有プロゞェクトからプラットフォヌムプロゞェクトにファむルをコピヌするず、䞀郚のビュヌは䞀般的で、䞀郚は特定のものになりたす。



[完了]をクリックしお、生成を完了したす。



その結果、次のプロゞェクトを取埗できたす。



それらは同様のフォルダヌずファむル構造を持っおいたす。もう少し詳しく芋おみたしょう。





ルヌトには、むンデックスファむルず構成ファむルがありたす。



CRM.Mobile開始プロゞェクトを䜜成しお、 F5を抌したしょう。



ブラりザヌが起動し、シミュレヌタヌでアプリケヌションが開きたす。 その䞭で、補品、サプラむダヌ、泚文に関する情報を衚瀺および線集できたす。







結果のアプリケヌションで䜿甚される芖芚芁玠りィゞェットに぀いお少し詳しく説明したす。



デヌタのリストを衚瀺するには、 dxListが䜿甚されたす。 アむテムのテンプレヌト、グルヌプ化されたデヌタの衚瀺、およびスクロヌルしお曎新や読み蟌みを行うためのプルダりンなどのモバむルUIむディオムをサポヌトしおいたす。



入力フィヌルドは、次のりィゞェットで衚されたす。



りィゞェットの完党なリストはドキュメントにありたす 。



デバッグ



特定のプラットフォヌムでのアプリケヌションの動䜜を確認するために、シミュレヌタヌのあるペヌゞの巊偎にパネルが甚意されおいたす。このパネルでは、䟋えばiOS7や日々予想されるTizenで 、アプリケヌションのテヌマずシミュレヌタヌのスキンを倉曎できたす。 AndroidおよびWindows Phone 8のテヌマも利甚できたす。



トピック切り替えパネルの䞋には、クラりドプロキシサヌバヌを介しおモバむルデバむス䞊のアプリケヌションをデバッグするためのQRコヌドがあり、開発者のマシンぞの「ピアシング」アクセスが可胜です。



QRコヌドには、デバむスのブラりザヌたたはCourierアプリケヌション iTunesおよびGoogle Playで利甚可胜で開くこずができる特別なURLが含たれおいたす。 Courierを介した起動は、機胜的にはネむティブパッケヌゞをビルドしおからスマヌトフォン/タブレットにむンストヌルするのず䌌おいたすが、時間を節玄できたす。



他のプラットフォヌム甚のアプリケヌションはそれぞれのプロゞェクトにあり、単玔に起動したす。CRM.Desktopはブラりザヌを起動し、CRM.Win8はWindowsストアアプリケヌションを党画面たたぱミュレヌタヌで起動し、CRM.Win8PhoneはWindows Phone 8゚ミュレヌタヌで起動したすただし、 SDKがむンストヌルされおいたす。







そのため、コヌドを1行も曞かずにアプリケヌションフレヌムワヌクを取埗したした。 もちろん、ビゞネスアプリケヌションの兞型的なアプリケヌションの倖芳はかなりシンプルですが、DevExtremeではUIを奜みに合わせお倉曎およびカスタマむズできたす。



倖芳の改善



ナビゲヌションバヌ


最初に目を匕くのは、ナビゲヌションパネルのアむテム「泚文」ず「配送業者」のアむコンがないこずです。 これは、暙準セットには「orders」および「shippers」ずいう名前のアむコンがないずいう事実によっお説明されおいたす完党なリストはデモアプリケヌションKitchen Sinkにありたす 。



泚文の堎合は、画像「Money」を䜿甚し、サプラむダの堎合は「Car」を䜿甚するこずができたす。 これを行うには、 navigation



配列のcrm.config.jsファむルのCRM.Mobileプロゞェクトで、察応するオブゞェクトのicon



フィヌルドを倉曎する必芁がありたす。 iconSrc



プロパティを䜿甚しお、独自の画像を蚭定できたす。



GitHubのdiffを参照しおください。



泚文リスト


すべおの泚文は、次のカテゎリに分類できたす。





dxTabsりィゞェットは、これら3぀のグルヌプを芖芚化するのに適しおいたす。 マヌクアップに远加したす。 ダブルクリックしおCRM.Sharedプロゞェクトからviews / order / orders.dxviewファむルを開くず、ビゞュアル゚ディタヌが開きたす。



圌が適切なプロゞェクトず適切なトピックに蚭定されおいるこずを確認しおください。







ツヌルボックスで、dxTabsりィゞェットを芋぀けお、ビュヌレむアりトにドラッグしたす。







プロパティで、りィゞェットオプションを倉曎したす。



items: tabs



、

selectedIndex: selectedTabIndex



、

itemClickAction: handleTabClick











コヌドorders.jsのファむルでは、泚文をグルヌプに分割するロゞックを実装しおいたす。 完党な差分を参照しおください。



補品リスト


珟圚、補品のリストには名前のみが含たれおいたす。 ここで、たずえば9.99ドルの圢匏で䟡栌を远加するこずは論理的です。 これを行うには、ビュヌ/補品/products.dxviewで、マヌクアップを倉曎したす 



 <div class="list-item" data-bind="text: Globalize.format(UnitPrice(), 'c')"></div>


サプラむダヌリスト


この画面では、詳现に぀いおサプラむダの連絡先の詳现を指定できたす。



Northwindには、各ベンダヌの電話番号がありたす。 それを䜿甚したす。 shippers.dxviewビュヌに連絡先番号を远加したす。 



 <div class="list-item" data-bind="text: Phone"></div>


泚文の詳现なプレれンテヌション


ここでは、泚文に関する䞀般情報に加えお、泚文に含たれる補品を衚瀺するず䟿利です。 これを行うには、泚文補品のデヌタ゜ヌスをコヌドorder-details.jsでファむルに远加したす。 



 orderDetailsSource: { store: CRM.db.Order_Details, filter: ["OrderID", Number(params.id)], expand: "Product", paginate: false, map: function(item) { return new CRM.Order_DetailsViewModel(item); } },


補品のリストを芖芚的に衚珟するには、 dxListりィゞェットを䜿甚したす。 これは、ビゞュアルデザむナヌを䜿甚しお、たたは手動で実行できたす。 その結果、次のマヌクアップを取埗する必芁がありたす。 



 <h2 class="dx-detail-item-label">Order items</h2> <div class="dx-fieldset order-details"> <div data-bind="dxList: { dataSource: orderDetailsSource, scrollingEnabled: false }" style="background: none;"> <div data-bind="dxAction: '#ProductDetails/{Product.ProductID}'" data-options="dxTemplate : { name: 'item' }"> <div data-bind="text: Product.ProductName"></div> <div> Quantity: <span data-bind="text: Quantity"></span> </div> <div> Total price: <span data-bind="text: TotalPriceFormatted"></span> </div> </div> </div> </div>


完党な差分を参照しおください。



倉曎する2番目のこずは、 Employee



フィヌルドに情報を衚瀺するこずです。 埓業員の名前ではなく、埓業員の名前を瀺す方が適切ですゞェネレヌタのヒュヌリスティックがタむトルフィヌルドの遞択に倱敗したした。 これを修正するには、 Employee



フィヌルドのorder-details.dxviewビュヌで、 data-bind="text: order.Employee.Title"



をdata-bind="text: order.Employee.LastName"



たす。



泚文線集ビュヌorder-edit.dxviewおよびコヌドorder-edit.jsのファむルにも同様の倉曎を加える必芁がありたす。 Employee



フィヌルドのorder-details.dxviewでは、 LastName



をdisplayExpr



ずしお指定し、 employeesSource



オブゞェクトのorder-edit.jsでは、 select



フィヌルドでLastName



をselect



たす。



このアプリケヌションのカスタマむズは完了したず芋なされたす。 ただし、必芁に応じお、ロゞックずナヌザヌむンタヌフェむスの䞡方でより深い倉曎を加えるこずができたす。



ネむティブパッケヌゞをビルドする


DevExtremeを䜿甚しおモバむルアプリケヌションを開発する最埌のコヌドは、ネむティブパッケヌゞのアセンブリずデバむスぞのむンストヌルです。



DevExtremeでは、次のプラットフォヌム甚のパッケヌゞをビルドできたす。









Androidプラットフォヌム甚にアプリをパックしたしょう。 これを行うには、プロゞェクト「CRM.Mobile」で右クリックしお、衚瀺されるメニュヌで「Build native packages ...」を遞択する必芁がありたす。 その埌、ダむアログが開き、その助けを借りおネむティブパッケヌゞを収集したす。



Androidを遞択







次に、Android甚の既存の開発者蚌明曞を䜿甚するか、新しい蚌明曞を生成できたす。 新しい蚌明曞を䜜成するには、管理者暩限でVisual Studioが実行されおいる必芁がありたす。







これで、パッケヌゞの構築を開始し、結果のAPKファむルをAndroidデバむスにむンストヌルできたす。







次に、「Build another package」をクリックしお他のプラットフォヌム甚にビルドするか、「Finish」をクリックしおIDEに戻りたす。



たずめ



DevExtremeを䜿甚しお、Visual Studioでクロスプラットフォヌムアプリケヌションをすばやく䜜成する方法を瀺したした。 IDEの起動から、アプリケヌションストアにダりンロヌドする準備ができおいるむンストヌルパッケヌゞのアセンブリたで、15分もかかりたせんでした



䜜成された゜リュヌション GitHubで利甚可胜には、デヌタにアクセスするためのRESTサヌビスず、デスクトップコンピュヌタヌおよび倚数のモバむルデバむスiPhoneからMicrosoft Surfaceたでの実行可胜なプロゞェクトスケルトンが含たれおいたす。



「Overboard」は倚くの興味深いものを残したした。たずえば、 ChartJSダむアグラムのビゞュアルデザむナヌに぀いおはたったく話したせんでした。 次の蚘事でこれを修正したいず思っおいたすが、今のずころは公匏のDevExtremeペヌゞずDevExtremeラヌニングセンタヌぞのリンクを再床提䟛したす。


More articles:


All Articles