همه چیز در رابطه با Seamlet همه چیز در رابطه با Seamlet

[FONT=courier new,courier,monospace][/FONT] [FONT=courier new,courier,monospace]مقدمه[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]طراحي واسط کاربري هميشه يکي از جالبترين و تا حدي سخت ترين کارهاي توسعه نرم افزار وب بوده چراکه طراحي يک واسط کاربر زيبا که در عين حال تفکيک شده با کدهاي منطق برنامه باشد يا نياز به تجربه و دانش زياد دارد يا نياز به فريم ورکي که آن دانش و تجربه را در اختيار شما قرار دهد فريم ورک سيم همان چيزيست که دنبالش مي گرديد [/FONT]


[FONT=courier new,courier,monospace]Facelet[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]ابتدا توضيح کوتاهي در مورد فيسلت مي دهم چراکه سيم از اين تکنولوژي استفاده مي کند قبل از اين از تگ هاي HTML و JSP يا template engine هاي ديگر مانند velocity و freemarker براي ساخت UI استفاده مي کردند اما با ظهور JSF يک هندلر جديد متن باز که با فرمت XML کار مي کرد پديد آمد فيسلت از نظر مفهومي شبيه tapestry آپاچي است چراکه کامپوننت ها را در نهايت بر روي browser تبديل به HTML مي کند [/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]بهتر است که از فيسلت براي layout بندي نرم افزار استفاده کنيد تگ هاي فيسلت که در سيم با آن ها روبرو خواهيد شد : [/FONT]
[TABLE="width: 100%"]
[TR]
[TD][FONT=tahoma,arial,helvetica,sans-serif] نام تگ
[/FONT][/TD]
[TD][FONT=tahoma,arial,helvetica,sans-serif] کاربرد[/FONT][/TD]
[/TR]
[TR]
[TD][FONT=tahoma,arial,helvetica,sans-serif] ui:composition[/FONT][/TD]
[TD][FONT=tahoma,arial,helvetica,sans-serif] براي encapsulate کردن محتوا بکار مي رود و هرچيزي که قبل و بعد از آن در صفحه باشد حذف خواهد شد
[/FONT][/TD]
[/TR]
[TR]
[TD][FONT=tahoma,arial,helvetica,sans-serif] ui:insert[/FONT][/TD]
[TD][FONT=tahoma,arial,helvetica,sans-serif] براي مشخص کردن آن قسمتي که بعدا توسط uiefine جايگذاري مي شود اين تگ معمولا در فايل قالب تعريف مي شود
[/FONT][/TD]
[/TR]
[TR]
[TD][FONT=tahoma,arial,helvetica,sans-serif] ui:include[/FONT][/TD]
[TD][FONT=tahoma,arial,helvetica,sans-serif]براي قرار دادن يک فايل فيسلت ديگر در صفحه
[/FONT][/TD]
[/TR]
[TR]
[TD][FONT=tahoma,arial,helvetica,sans-serif] uiaram[/FONT][/TD]
[TD][FONT=tahoma,arial,helvetica,sans-serif] براي ارسال آبجکت بين صفحات استفاده مي شود
[/FONT][/TD]
[/TR]
[TR]
[TD][FONT=tahoma,arial,helvetica,sans-serif]uiefine
[/FONT][/TD]
[TD][FONT=tahoma,arial,helvetica,sans-serif] با استفاده از نام ui:insert محتوا را در قسمت مشخصي داخل template قرار مي دهد اين تگ در بين تگ هاي ديگر کاربرد دارد
[/FONT][/TD]
[/TR]
[TR]
[TD][FONT=tahoma,arial,helvetica,sans-serif]uiecorate
[/FONT][/TD]
[TD][FONT=tahoma,arial,helvetica,sans-serif]مشابه composition است با اين تفاوت که محتواي بيروني را حذف نمي کند
[/FONT][/TD]
[/TR]
[TR]
[TD][FONT=tahoma,arial,helvetica,sans-serif]ui:fragment
[/FONT][/TD]
[TD][FONT=tahoma,arial,helvetica,sans-serif]
[/FONT][/TD]
[/TR]
[/TABLE]

[FONT=tahoma,arial,helvetica,sans-serif]
[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]خوب تا اينجا هر چي گفتيم مربوط به فيسلت و جي اس اف بود از اينجا به بعد سيم نقش خود را در UI Enhancement نشان مي دهد تگ هايي که سيم در UI دارد به شرح زير مي باشد [/FONT]
[FONT=tahoma,arial,helvetica,sans-serif] [/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]secorate[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]نسخه کاملتري از uiecorate است که به شما اجازه مي دهد تا از يک فايل فيسلت براي تزيين و مزين کردن فيلدهاي فرم استفاده کنيد [/FONT]

[TABLE="align: left"]
[TR]
[TD="class: gutter"] 1
2
3
4
[/TD]
[TD="class: code"]

<SECORATE id=id template="layout/display.xhtml"> ​

<UIEFINE name="label">Id</UIEFINE> ​

<H:OUTPUTTEXT value="#{ebParentHome.instance.id}" /> ​

</SECORATE>​

[/TD]
[/TR]
[/TABLE]



[FONT=tahoma,arial,helvetica,sans-serif]s:fragment[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]نسخه کاملتر ui:fragment است[/FONT]
[TABLE="align: left"]
[TR]
[TD="class: gutter"]

1​

[/TD]
[TD="class: code"]

<S:FRAGMENT rendered="#{init.debug}">​

[/TD]
[/TR]
[/TABLE]



[FONT=tahoma,arial,helvetica,sans-serif]sefaultAction[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]دکمه enter را در فرم شبيه سازي مي کند[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]siv[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]تگ div با قابليت اتصال به کامپوننت هاي سيم [/FONT]
[TABLE="align: left"]
[TR]
[TD="class: gutter"]

1​

[/TD]
[TD="class: code"]

<SIV rendered="#{identity.loggedIn}"></SIV>​

[/TD]
[/TR]
[/TABLE]



[FONT=tahoma,arial,helvetica,sans-serif]s:link[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]يکي از مهمترين و پر کاربردترين تگ ها مي باشد اگر از commandLink جي اس اف استفاده کرده باشيد حتما مي دانيد که بوسيله جاوااسکريپت لينک شما پست مي شود و اين محدوديت هايي مانند باز کردن لينک در يک زبانه يا پنجره جديد ايجاد مي کند اگر هم از hutputLink استفاده کنيد امکان استفاده از action و actionListener را نخواهيد داشت سيم علاوه بر اينکه اين دو مشکل را حل کرده به شما مشخصه اي در اين تگ بنام taskInstance مي دهد که شما مي توانيد آن را به task در JBPM متصل کنيد [/FONT]

[TABLE="align: left"]
[TR]
[TD="class: gutter"] 1
[/TD]
[TD="class: code"]

<S:LINK id=menuLogoutId value="Logout" rendered="#{identity.loggedIn}" propagation="none" action="#{identity.logout}" view="/home.xhtml" /> ​

[/TD]
[/TR]
[/TABLE]

[FONT=tahoma,arial,helvetica,sans-serif]s:button[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]خوبه ..... از امکان propagation در سيم با اين تگ مي توانيد استفاده کنيد که خودش داستان داره [/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]s:convertEnum[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]در combobox ها کلا ليست ها کاربرد دارد مي توانيد از کلاس enum استفاده کنيد و آن را به يک کمبو بايند کنيد سيم خودش آن را تبديل مي کند [/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]s:convertEntity[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]مانند بالا با اين تفاوت که بجاي کلاس enum از يک entity استفاده مي کنيد [/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]s:fileUpload[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]قابليت upload فايل را به شما ميدهد و به راحتي با مشخصه هايي که دارد مي توانيد نام فايل و byte فايل و.. را به entity بايند کنيد البته براي آپلود چند فايل پيشنهاد مي کنم از کامپوننت rich:fileUpload استفاده کنيد بسيار غني تر است [/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]s:graphicImage[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]مشخصه value ان مي توانيد آدرس فايل يا محتوايي از byte[] يا يک java.net.URL يا java.io.InputStream يا java.io.File باشد خلاصه هر چي بدي نه نمي گي يه چيزي generate مي کنه مشخصه نام هم اگر خالي باشد اتوماتيک يک نام براي آن توليد مي شود [/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]s:transformImageSize [/FONT]

[FONT=tahoma,arial,helvetica,sans-serif]يکي از تگ هاي مورد علاقه من که با توجه به اندازه عکس را کوچک و بزرگ مي کند [/FONT]

[TABLE="align: left"]
[TR]
[TD="class: gutter"] 1
2
3
[/TD]
[TD="class: code"]

<S:GRAPHICIMAGE value="#{auction.image.data}" rendered="#{auction.image ne null}"> ​

<S:TRANSFORMIMAGESIZE maintainRatio="true" width="200" /> ​

</S:GRAPHICIMAGE> ​

[/TD]
[/TR]
[/TABLE]


[FONT=tahoma,arial,helvetica,sans-serif]s:selectItems[/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]در پرکردن کمبو و ليست ها کاربرد دارد و معمولا با دو تگ s:convertEntity و s:convertEnum استفاده مي شود [/FONT]
[FONT=tahoma,arial,helvetica,sans-serif]s:token [/FONT]

[FONT=tahoma,arial,helvetica,sans-serif]يکي از جالبترين تگ ها است بصورت تصادفي يک کد امنيتي براي فرم ها توليد مي کند براي جلوگيري از حمله cross-site request forgery (XSRF)[/FONT]

[TABLE="align: left"]
[TR]
[TD="class: gutter"] 1
2
3
4
5
[/TD]
[TD="class: code"]

<H:FORM> ​

<S:TOKEN requireSession="false" enableCookieNotice="true" /> ​

</H:FORM> ​

[/TD]
[/TR]
[/TABLE]


[FONT=tahoma,arial,helvetica,sans-serif]سيم تگ هاي ديگري نيز دارد مانند s:remote , sownload و غيره که خارج از اسکوپ اين پست است[/FONT]