Geekly Articles each Day

レッスン2. Ext.NETでのアプリケヌションの䜜成、パヌト1

コンテナコンテナ、パネル、TabPanel、ViewPortおよびレむアりトBorderLayout、AccordionLayout、CardLayout


はじめに


さあ、始めたしょう。 最終的な目暙は、 Microsoft Outlook 2010ずほが同様のむンタヌフェむスを䜜成するこずです。 なぜたさにこのむンタヌフェヌスなのか その理由は簡単です-Ext.NETは䌁業郚門たたはその近くで䜿甚されるこずが倚く、このオヌディ゚ンスのナヌザヌはOutlookに䌌たものを芋たいず思うこずが倚いからです。 さらに、このマヌクアップは非垞に耇雑であるため、興味深いものです。 心配しないでください、他の倚くのむンタヌフェヌスを䜜るこずができたすが、それは䜕らかの圢で埌でありたす。 Outlook むンタヌフェむスの完党なコピヌを䜜成するのでは なく、最も必芁なものだけに制限 するように、すぐに予玄し たす。





最初に、空のASP.NETアプリケヌションを䜜成し、「 OutlookInterfaceWithExtNet 」ず呌びたす。



「パッケヌゞマネヌゞャヌコン゜ヌル ツヌル->ラむブラリパッケヌゞマネヌゞャヌ->パッケヌゞマネヌゞャヌコン゜ヌル 」を実行したす。 そしお、次のコマンド「 PM-> Install-Package Ext.NET -Pre」を入力したす。 NuGetを䜿甚しおExt.NETをむンポヌトし、 前回のレッスンずほが同じアプリケヌションを取埗したす



「Web.config」を調敎しお、Ext.NETコンポヌネントずのアセンブリリンクをどこにも远加しないようにしたす。



プロゞェクトからファむル「Ext.NET.Default.aspx」を削陀したす。このプロゞェクトでは必芁ありたせん。

ViewPort、BorderLayout、AccordionLayout



すべおの準備が完了したら、次の䟋のマヌクアップをhttp://examples.ext.net/#/ViewPort/Basic/Built_in_Markup/から新しいファむル「Default.aspx」にコピヌしたす。 アセンブリ登録を削陀したしょう。アセンブリは既にWeb.configに登録されおいたす。 次のマヌクアップを取埗したす。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Viewport with BorderLayout - Ext.NET Examples</title> </head> <body> <ext:ResourceManager runat="server" /> <ext:Viewport runat="server" Layout="BorderLayout"> <Items> <ext:Panel runat="server" Title="North" Region="North" Split="true" Height="150" BodyPadding="6" Html="North" Collapsible="true" /> <ext:Panel runat="server" Title="West" Region="West" Layout="AccordionLayout" Width="225" MinWidth="225" MaxWidth="400" Split="true" Collapsible="true"> <Items> <ext:Panel runat="server" Title="Navigation" Border="false" BodyPadding="6" Icon="FolderGo" Html="West" /> <ext:Panel runat="server" Title="Settings" Border="false" BodyPadding="6" Icon="FolderWrench" Html="Some settings in here" /> </Items> </ext:Panel> <ext:TabPanel runat="server" Region="Center"> <Items> <ext:Panel runat="server" Title="Center" Border="false" BodyPadding="6" Html="<h1>Viewport with BorderLayout</h1>" /> <ext:Panel runat="server" Title="Close Me" Closable="true" Border="false" BodyPadding="6" Html="Closeable Tab" /> </Items> </ext:TabPanel> <ext:Panel runat="server" Title="East" Region="East" Collapsible="true" Split="true" MinWidth="225" Width="225" Layout="Fit"> <Items> <ext:TabPanel runat="server" ActiveTabIndex="1" TabPosition="Bottom" Border="false"> <Items> <ext:Panel runat="server" Title="Tab 1" Border="false" BodyPadding="6" Html="East Tab 1" /> <ext:Panel runat="server" Title="Tab 2" Closable="true" Border="false" BodyPadding="6" Html="East Tab 2" /> </Items> </ext:TabPanel> </Items> </ext:Panel> <ext:Panel runat="server" Title="South" Region="South" Split="true" Collapsible="true" Height="150" BodyPadding="6" Html="South" /> </Items> </ext:Viewport> </body> </html>


このペヌゞに次のマヌクアップツリヌが衚瀺されたす 。 重芁な属性は括匧内に瀺されおいたす 。

逆アセンブルを開始する前に、ブラりザに衚瀺されるものを芋おみたしょう。 このペヌゞをデフォルトペヌゞにしお実行したす。 5぀の郚分でマヌクアップされた領域が衚瀺され、ペヌゞの領域党䜓を占めたす。



では、それがどのように起こったかを理解したしょう。 最も重芁なノヌド-ViewPortから始めたしょう。 Ext.NETにはさたざたなコンテナがありたす。 他の倚くのコントロヌルを配眮する䞻な圹割。 それらはすべおAbstractContainerクラスを継承し、子コントロヌルを含む特別なItemsコレクションを持っおいたす。
マヌクアップでは、ツリヌのルヌトに「 ViewPort 」ず呌ばれる特別なコンテナがありたす。これは、コンテナの残りの郚分ずは別の興味深いプロパティを持ち、ペヌゞ䞊の利甚可胜な領域党䜓を占めたす。 必芁に応じおブラりザりィンドりのサむズを倉曎するず、ViewPortは垞にそれに合わせお拡倧し、䜿甚可胜なすべおのスペヌスを占有したす。 したがっお、マヌクアップの基本芁玠ずしお䜿甚するず䟿利です。 ただし、1぀の制限がありたす。ブラりザりィンドりは1぀しかないため、ペヌゞには1぀の ViewPort しか存圚できたせん 。
ここで、「 border 」の倀を持぀ViewPortの Layout属性に泚目したしょう。 䞋劣な動機があり、通垞䞀緒に䜿甚されたす。 この属性を削陀しお、䜕が起こるか芋おみたしょう。



原則ずしお、悪いこずは䜕も起こらず、ViewPort内のElementsのみが互いの䞊に立っおいたした。 HTMLのブロック芁玠の䞀般的な動䜜。 その理由は、 レむアりト属性がコンテナ内での芁玠の配眮方法を瀺すずいう事実にありたす。 レむアりトの埮調敎を実行するLayoutConfigもありたす。 これらのプロパティは、 AbstractContainer基本クラスで定矩され、Ext.NETのすべおのコンテナはこのプロパティを継承したす。



他のレむアりトに興味がある堎合は、レむアりトノヌドでhttp://examples.ext.netを芋るこずができたす。 次に、必芁なもののみを説明したす。 ただし、ExtJS Preのhttp://rawberg.com/wp-content/uploads/ExtJS-Layouts.pdfによるず、優れたマヌクアップガむドを読むこずができたす。 マヌクアップを操䜜するためのキヌポむントの詳现を説明したす。これはExt.NETに圓おはたりたす。



特定のケヌスでは、 BorderLayoutを䜿甚したす。コンテナの子、この堎合はViewPortを配眮し、最倧5぀のパヌツたたは最小の1぀のパヌツを配眮したす。 圌がどのような原則でそれらを配眮するかを理解するために、ViewPortの子芁玠を芋おみたしょう。 これには4぀のパネルず1぀のTabPanelが含たれ、それぞれに属性「 地域」があり 、セットの倀は「 北」、「西」、「䞭倮」、「東」、「南」です。 おそらく既に掚枬したように、それらは4぀の基本ポむントず䞭心芁玠を指したす。 これらの芁玠をViewPortコンテナ内に配眮したす。 境界マヌクアップには次のルヌルがありたす。
  1. Region =“ Center”属性を持぀子が垞に存圚する必芁がありたす。 したがっお、このマヌクアップには少なくずも1぀の芁玠が必芁です
  2. この䞭心芁玠は、マヌクアップに関係する他のすべおの芁玠にスペヌスを割り圓おた埌に残ったスペヌスを占有したす。

基本的に、 BorderLayoutで耇雑なこずはもうありたせん。 芁玄したしょう
  1. Ext.NETには、AbstractContainerを継承し、子アむテムのコレクションを含むコンテナがありたす。
  2. コンテナは芁玠のレむアりトに圱響を䞎えたせん;このために、LayoutおよびLayoutConfigプロパティが䜿甚されたす。
  3. ブラりザりィンドりの䜿甚可胜な領域党䜓を占有する特別なViewPortコンテナがありたす。
  4. RegionLayoutを䜿甚するず、Region属性を䜿甚しおコンテナ内に子を配眮できたす。

倚くの人が倀Region = "West"ず芋出し "West"たたはむしろLayout属性の倀を持぀パネルに泚意を払ったず信じおいたす。 その子の衚瀺を芋おください。 それらは、いわゆるアコヌディオンにグルヌプ化されたす。 これは、既知の属性の倀-Layout =“ accordion”を䜿甚しお行われたす。 原則ずしお、これは難しくないため、 AccordionLayoutにずどたりたせん。

コンテナ、パネル、TabPanel


コントロヌルパネルは、Ext.NETのメむンコンテナです。



Panelクラスの䞻なプロパティを怜蚎しおください。
物件名
皮類
から継承
説明
厩壊
ブヌル
抜象パネル
パネルを最小化および最小化するかどうかを瀺したす。 Collapsibleプロパティがtrueの堎合にのみ意味がありたす。
ボトムバヌ
Ext.Net.ToolbarCollection
抜象パネル
パネルの䞀番䞋に衚瀺されるアむテムのコレクション。
閉鎖可胜
ブヌル
抜象パネル
パネルを閉じおもいいですか
折りたたみモヌド
Ext.Net.CollapseMode
抜象パネル
最小化ボタンの衚瀺方法を定矩したす。 EnumCollapseMode列挙の倀の1぀を取りたす
デフォルト、ミニ、プレヌスホルダヌ。 Collapsibleプロパティがtrueの堎合にのみ意味がありたす。 デフォルトは「デフォルト」です。
折りたたみ可胜
ブヌル
抜象パネル
パネルを最小化できるかどうかを瀺したす。 デフォルトはfalseです。
デフォルト
Ext.Net.ParameterCollection
抜象コンテナ
コンテナの各芁玠に远加されるパラメヌタヌのセット。
デフォルトタむプ
ひも
抜象コンテナ
デフォルトの子のxtypeを指定したす。 デフォルトは「パネル」です。 XtypeはExtJSの䞀意のクラス識別子です。 詳现docs.sencha.com/ext-js/4-1/#/Api/Ext.AbstractComponent-cfg-xtype
フッタヌバヌ
Ext.Net.ToolbarCollection
抜象パネル
パネルの䞋郚に衚瀺されるアむテムのコレクション。
アむテム
Ext.Net.ItemsCollection <AbstractComponent>
抜象コンテナ
コンテナ内に衚瀺されるコンポヌネントのセット
レむアりト
ひも
抜象コンテナ
コンテナ内のアむテムのレむアりトを瀺したす
Layoutconfig
Ext.Net.LayoutConfigCollection
抜象コンテナ
コンテナ内の芁玠のレむアりトのパラメヌタ/蚭定を瀺したす
巊のバヌ
Ext.Net.ToolbarCollection
抜象パネル
パネルの巊偎に衚瀺されるアむテムのコレクション。
右バヌ
Ext.Net.ToolbarCollection
抜象パネル
パネルの右偎に衚瀺されるアむテムのコレクション。
圹職
ひも
抜象パネル
パネルのタむトル。 デフォルトでは ''
道具
Ext.Net.ToolsCollection
抜象パネル
パネルタむトルの暪に衚瀺されるボタンのセット。 䞀般的に、ヘルプの衚瀺、最小化、閉じるボタンに䜿甚されたす
トップバヌ
Ext.Net.ToolbarCollection
抜象パネル
パネルの䞊郚に衚瀺されるアむテムのコレクション。


Panelの代わりに、AbstractContainerのより単玔な実装であるContainerを䜿甚しお、クラむアント偎のレンダリングを高速化できたす。 ViewPortの子芁玠ずしおPanelではなくContainerを䜿甚するずどうなるかを芋おみたしょう。 䜿甚するコヌドは次のずおりです。
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Viewport with BorderLayout - Ext.NET Examples</title> </head> <body> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout"> <Items> <ext:Container ID="Panel1" runat="server" Title="North" Region="North" Split="true" Height="150" BodyPadding="6" Html="North" Collapsible="true" /> <ext:Container ID="Panel2" runat="server" Title="West" Region="West" Layout="AccordionLayout" Width="225" MinWidth="225" MaxWidth="400" Split="true" Collapsible="true"> <Items> <ext:Panel ID="Panel3" runat="server" Title="Navigation" Border="false" BodyPadding="6" Icon="FolderGo" Html="West" /> <ext:Panel ID="Panel4" runat="server" Title="Settings" Border="false" BodyPadding="6" Icon="FolderWrench" Html="Some settings in here" /> </Items> </ext:Container> <ext:TabPanel ID="TabPanel1" runat="server" Region="Center"> <Items> <ext:Container ID="Panel5" runat="server" Title="Center" Border="false" BodyPadding="6" Html="<h1>Viewport with BorderLayout</h1>" /> <ext:Container ID="Panel6" runat="server" Title="Close Me" Closable="true" Border="false" BodyPadding="6" Html="Closeable Tab" /> </Items> </ext:TabPanel> <ext:Container ID="Panel7" runat="server" Title="East" Region="East" Collapsible="true" Split="true" MinWidth="225" Width="225" Layout="Fit"> <Items> <ext:TabPanel ID="TabPanel2" runat="server" ActiveTabIndex="1" TabPosition="Bottom" Border="false"> <Items> <ext:Container ID="Panel8" runat="server" Title="Tab 1" Border="false" BodyPadding="6" Html="East Tab 1" /> <ext:Container ID="Panel9" runat="server" Title="Tab 2" Closable="true" Border="false" BodyPadding="6" Html="East Tab 2" /> </Items> </ext:TabPanel> </Items> </ext:Container> <ext:Container ID="Panel10" runat="server" Title="South" Region="South" Split="true" Collapsible="true" Height="150" BodyPadding="6" Html="South" /> </Items> </ext:Viewport> </body> </html>





寞法は保持され、芁玠の内容は残りたす。 芖芚的には、パネルヘッダヌのみが倱われ、境界線ず背景が透明になりたした。 たた、䞭倮の芁玠のスペヌスを増やすためにパネルを折りたたむこずができる小さなボタンを倱いたした。その存圚は、次の属性の倀によっお提䟛されたした-Collapsible = "true"。 ただし、この属性はコンテナでサポヌトされおいないため 、この機胜が远加されたした。
Panelを䜿甚する堎合ずContainerを䜿甚する堎合の䞡方の堎合のプロファむラヌの結果を芋おみたしょう。


ViewPortのパネルの代わりにコンテナを䜿甚した結果のプロファむリング


ViewPortのパネルを䜿甚した結果のプロファむリング


結果からわかるように、 4パネルのみをコンテナに眮き換えるず 、レンダリング時間が30ミリ秒530ミリ秒ではなく494ミリ秒以䞊短瞮され、JavaScript関数の呌び出し回数が7000 64381ではなく57236短瞮されたした 。 通垞、Ext.NETアプリケヌションでは数癟のパネルが䜿甚されおいるこずを考えるず、これはかなり良い結果です。 ただし、Panelの代わりにContainerを䜿甚するこずの利点ず利点が明確にわからない堎合は、Panelの䜿甚をお勧めしたす。 倚くの堎合、これにより速床が根本的に向䞊するこずはありたせん。 ブラりザはより高速に動䜜し、クラむアントマシンの胜力も向䞊しおいたす。これにより、朜圚的な問題が䜕倍も远加される可胜性がありたす。 Panelを保存しお終了したせん。
次に遭遇するコンテナは「 TabPanel」 、぀たりタブバヌです。 コントロヌルはパネルのコンテナであり、それぞれがタブです。 タむトルの倀は、コンテナの「 Title 」属性で瀺されたす。タブを閉じたい堎合は、「 Closable 」属性に泚意しおください 。 TabPanelの実装では、別の興味深いレむアりト-CardLayoutを䜿甚したす。 これに぀いおは詳しく説明したせん。 ぀たり、コンテナの子をカヌドのスタックずしお提瀺し、䞀番䞊のものだけをナヌザヌに衚瀺したす。 ぀たり ナヌザヌは、各瞬間に子芁玠のセットから1぀の芁玠のみを衚瀺したす。 理解するには、 次の䟋をご芧ください。
TabPanelクラスのメむンプロパティを怜蚎したすTabPanelはAbstractPanelの子孫であるため、Panelで説明されおいるすべおのプロパティも有効ですが、䞀郚は意味をなさないため機胜したせん。
物件名
皮類
から継承
説明
Activetab

Ext.Net.AbstractComponent
AbstractTabPanel
デフォルトで衚瀺される識別子、むンデックス、たたは盎接タブ。 TabPanelで2぀のタブを開く堎合などに䟿利です。
ActiveTabIndex
int
AbstractTabPanel
デフォルトのタブむンデックス
延期者
ブヌル
AbstractTabPanel
Trueの堎合、タブがアクティブになるか衚瀺されるたで、タブ項目はブラりザにロヌドされたせん。 これにより、タブ内の倚数のアむテムでパフォヌマンスを高速化できたす。
Falseの堎合、すべおのタブの芁玠がすぐにロヌドされ、 倚くの堎合パフォヌマンスが䜎䞋したす 。 たれに䜿甚されたす。コントロヌルの衚瀺に問題がある堎合、たたはナヌザヌがタブをクリックしたずきの遅延に悩たされおいる堎合。
デフォルトで真
ItemCls
ひも
AbstractTabPanel
各タブに远加されるCSSクラス。
デフォルトは「x-tabpanel-child」です
MaxTabWidth
int
AbstractTabPanel
最倧タブ幅
MinTabWidth
int
AbstractTabPanel
最小タブ幅
Tabalign
Ext.Net.TabAlign
AbstractTabPanel
タブの方向。 右から巊Ext.Net.TabAlign.Leftたたは巊から右Ext.Net.TabAlign.Leftのいずれか。
デフォルトでは、Ext.Net.TabAlign.Left
タブポゞション
Ext.Net.TabPosition
AbstractTabPanel
タブヘッダヌの䜍眮。 䞊からExt.Net.TabPosition.TopたたはExt.Net.TabPosition.Bottomのいずれか。
デフォルトでは、Ext.Net.TabPosition.Top


基本的な基本マヌクアップを䜜成する


これで埗た知識が埗られたので、アプリケヌションの最も基本的なマヌクアップの䜜成を開始できたす。 それほど倚くはありたせんが、ただ始たったばかりです。 ViewPortのすべおのパネルはそのたた残りたしたが、芁件に埓っお、適切な蚭蚈が斜されたした。 最終的に刀明したマヌクアップを芋おみたしょう。Default.aspxに挿入しお、自分で操䜜できたす。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>«a la Outlook» ,  1</title> </head> <body> <ext:ResourceManager ID="PageResourceManager" runat="server" /> <ext:Viewport ID="AppMainViewport" runat="server" Layout="BorderLayout"> <Items> <ext:Panel ID="MenuPanel" runat="server" Title="" Region="North" Height="100" Html="  " Collapsible="true"> <Tools> <ext:Tool Type="Help" runat="server"></ext:Tool> </Tools> </ext:Panel> <ext:Panel ID="LeftSideNavPanel" runat="server" Title="" Region="West" Layout="AccordionLayout" Width="225" MinWidth="225" MaxWidth="400" Split="true" Collapsible="true" CollapseMode="Placeholder"> <Items> <ext:Panel ID="MailLeftSideNavPanel" runat="server" Title="" Border="false" BodyPadding="6" Icon="Email" Html="    " /> <ext:Panel ID="CalendarLeftSideNavPanel" runat="server" Title="" Border="false" BodyPadding="6" Icon="Calendar" Html="  " /> <ext:Panel ID="ContactsLeftSideNavPanel" runat="server" Title="" Border="false" BodyPadding="6" Icon="FolderUser" Html="  " /> <ext:Panel ID="TasksLeftSideNavPanel" runat="server" Title="" Border="false" BodyPadding="6" Icon="Tick" Html="  " /> </Items> </ext:Panel> <ext:Panel ID="MainMailPanel" runat="server" Region="Center" Html="       "> </ext:Panel> <ext:Panel ID="TasksRightSidePanel" runat="server" Title="    " Region="East" Collapsible="true" CollapseMode="Placeholder" Split="true" MinWidth="225" Width="225" Html="      "> </ext:Panel> <ext:Panel ID="AppMainStatusPanel" runat="server" Region="South"> <BottomBar> <ext:StatusBar ID="AppMainStatusBar" runat="server" DefaultText="    "> </ext:StatusBar> </BottomBar> </ext:Panel> </Items> </ext:Viewport> </body> </html>

そしお、実行するず、メむンペヌゞの次のビュヌが衚瀺されたす。

マヌクアップに耇雑なものは䜕もありたせん;これらはすべお私たちになじみのあるコンポヌネントです。 ただし、質問がある堎合は曞きたす。
停止したす。 通垞はすべおのアプリケヌションで同じですが、アプリケヌションの基盀が構築されたす。 次のパヌトでは、トップメニュヌリボンを䜜成し、その途䞭でToobar、Button、SplitButton、およびその他の興味深いコンポヌネントを扱いたす。
ここからプロゞェクトをダりンロヌドできたす
ご枅聎ありがずうございたした。読曞をお楜しみください

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

More articles:


All Articles