الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

تطوير تطبيقات الويب و الموبايل باستخدام ZK

بدأه Abdullah.Alshammeri في 20 فبراير 2012 · 12 رد · 976 مشاهدة · في الأخبار والنقاشات التقنية
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

ZK إطار عمل متميّز لتطوير تطبيقات الويب و الموبايل باستخدام Java . الإطار نظيف ، و منظم ، أعجبني وسيعجب أي معجب بجافا . لاحظ أنه إطار عمل لتطوير تطبيقات الويب و ليس لتطوير المواقع ( على الأقل ليس الأنسب لتطوير المواقع ) :

http://www.zkoss.org

- هناك Layout Files ، لفصل العرض عن منطق التطبيق .

- هناك ZK Scripting Language ، شبيهة بجافاسكربت و ليست جافاسكربت .

- back end جافا .

- إطار العمل ينفّذ في server side بالكامل .

- تستطيع دمج جافا مع Layout مع script language ، إن احتجت لهذا ، شيء شبيه بالتالي :

<window title="Property Retrieval" border="normal">
    Enter a property name: <textbox/>
    <button label="Retrieve" onClick="alert(System.getProperty(self.getPreviousSibling().getValue()))"/>
</window>

شاهد هذا الدرس :

http://books.zkoss.org/wiki/ZK_Getting_Started/Tutorial

طبعاً ZK مفتوحة المصدر ( بالمناسبة لم أجربها ) .

1

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#2

أولا شكرا أخى عبدالله على الموضوع و مايلى مجرد رأئ .....

حقا لقد سئمت مثل هذه الأطر...

أكره في مثل هذه الأطر كثرة إستخدامه للجافا إسكربيت , فكل و أي شئ عباره عن جافا إسكربت .... فما تراه أمامك ليس HTML حقيقى ... و إنما HTML مولد من المتصفح في وقت التشغيل (و هنا يبدأ عذاب ال Web Designer)

اقتباس
هناك ZK Scripting Language ، شبيهة بجافاسكربت و ليست جافاسكربت .

لم لغه إسكربتنج جديده؟؟ هي في النهاية تتحول ل JavaScript ...

اقتباس
<window title="Property Retrieval" border="normal">
    Enter a property name: <textbox/>
    <button label="Retrieve" onClick="alert(System.getProperty(self.getPreviousSibling().getValue()))"/>
</window>

ما هذا الشئ ؟؟ و ما المشكله في إستخدام div و input

مثل هذه ال tags المشوهه تحول حياة ال Designer إلى جحيم ...

تم تعديل هذه المشاركة بواسطة __Unknown في 20 فبراير 2012 في 15:41

#3

اوافقك الرأي بالنسبة لل layout.. لا داعي لاختراع layout جديد كل مرة . . اما لغتهم السكربت الخاصة فاعتقد تستطيع الاستغناء عنها وعمل handle للاحداث من خلال جافا.

بالمناسبة كثير من المكتبات مثل struts وJSF و غيرها تحاول عرض بديل للhtml. لا أعرف من هو الأحمق الذي أوهم مطوري تلك المكتبات أن html و css مشكلة ؟

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#4

على العكس أخي عبدالله ف JSF 2.0 تستخدم حاليا XHTML في طبقة العرض

لا أعرف كثيرا عن Struts 2.0

عزائى الوحيد لمثل هذه الأطر هي أنها ليست للمواقع الويب و إنما هي للتطبيقات

#5

حسب فهمي المتواضع أخي ، حتى JSF لم تسلم من تطوير tag lib خاصة بالـ html ( أعتقد بالاستفادة من JSTL ) ، مثال:

<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>

	<h:form>
		<h:panelGrid columns="2">
			<h:outputLabel value="Celsius"></h:outputLabel>
			<h:inputText  value="#{temperatureConvertor.celsius}"></h:inputText>
		</h:panelGrid>
		<h:commandButton action="#{temperatureConvertor.celsiusToFahrenheit}" value="Calculate"></h:commandButton>
		<h:commandButton action="#{temperatureConvertor.reset}" value="Reset"></h:commandButton>
		<h:messages layout="table"></h:messages>
	</h:form>

يعني الكود السابق سيتحوّل إلى HTML في النهاية ، بدلاً من كتابة h:form ، لماذا لا نكتب form عادي ؟ يمكن مجرد خيار ، لكن لماذا يتيحوا مثل هذا أصلاً ؟ يمكن كتابة form عادي بالـ html ؟ و لكن يمكن فيه أسباب أخرى غائبة عنّي .

لاحظت هذا في كثير من أطر العمل الخاصة بجافا ، نفس الشيء في ASP.Net ، بينما الأمر ليس كذلك في php و بايثون مثلاً .

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#6

مبدأئيا أنا لست خبيرا في الويب و ما أعرضه هو ما أعتقده (قد يكون صواب أو خطأ)...

هذا المثال من JSF 1.2 أما في JSF 2.0 فالموضوع مختلف فإنها تستخدم Facelets :

<!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" xmlns:h="http://java.sun.com/jsf/html">
	<body>
    	<form jsfc="h:form">
        	<span jsfc="h:outputText" value="Welcome, #{loggedInUser.name}" disabled="#{empty loggedInUser}" />
        	<input type="text" jsfc="h:inputText" value="#{bean.property}" />
        	<input type="submit" jsfc="h:commandButton" value="OK" action="#{bean.doSomething}" /> 
    	</form>
	</body>
</html>

على الرغم من أنها تبدو ك HTML (أو XHTML) إلا أنها يتم معالجتها على الخادم (و أعتقد في بعض الحالات على العميل - لست متأكد حقا فلم أعمل عليها ولم اقرأ عنها من قبل ... مجرد مقولات من أصدقاء)

ليست فقط JSF2.0 إنما أيضا JSPX و Apache Wicket و ربما غيرهم الكثير

اقتباس
لاحظت هذا في كثير من أطر العمل الخاصة بجافا ، نفس الشيء في ASP.Net ، بينما الأمر ليس كذلك في php و بايثون مثلاً .

معك حق ... أتمنى أن نري الإتجاه نحو "إتشملت" ال Java laugh.gif

أنا لا يهمنى بشكل كبير إستخدام أي Display technology مهما كانت مفتكسه ... إعتراضى الأكبر هو على أن يكون التطبيق بالأكمل عباره عن بضع ملفات جافاإسكربت تقوم برسم ال HTML في وقت التشغل

تم تعديل هذه المشاركة بواسطة __Unknown في 21 فبراير 2012 في 01:18

1
#7

قد يكون موضوع ليس ذو علاقه شديدة القرب ولكن لا داعى من إلقاء نظره ..

Improving JSF by Dumping JSP Improving JSF by Dumping JSP

تم تعديل هذه المشاركة بواسطة __Unknown في 21 فبراير 2012 في 01:27

#8

ASP.net تدعم الأسلوبين سواء استخدام الTags الخاصة بالASP.net و هذا اذا استخدم ASP.net Web Forms

أما ASP.net MVC فهي لا تدعم هذه الTags و كل ما تحتاج عمله هو استخدام HTML فقط.

مصري في بلاد الفرنجة.

قريباً اقرأ مقالاتي على It-scoop

#9

بما ان لدي خبره في أطر العمل :) تحتاج في كثير من الأحيان لإنتاج كود html

فمثلا أستخدم كود كهذا

[input:"password","string1:password","","required,number","inplutsize_midiom",""end input]

والنتيجه :

<div for="password" class="inputfeild" id="div_559475" style="clear: both; ">
	<label class="inputx" for="div_559475input">password</label>
	<input typo="number" min="0" max="0" requ="required" class="inplutsize_midiom" id="div_559475input" type="password">
	<span class="required" style="">*</span>
</div>

بالإضافه إلى كود جافاسكريبت للتأكد من البيانات المدخله بناء على الكود السابق وهو مطلوب وأرقام فقط

ليس فقط هذا وإنما يتم التأكد من المدخلات من ناحيه الخادم كل هذا فقط من خلال السطر السابق !! لذلك مثل هذه التقنيات مهمه ومفيده ويمكن للمطور الذي يكرهها أن يبتعد عنها ويستخدم بيور html كود :)

تم تعديل هذه المشاركة بواسطة بسام العيساوي في 25 فبراير 2012 في 13:23

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#10
اقتباس
[input:"password","string1:password","","required,number","inplutsize_midiom",""end input]

ماذا يمثل هذا لل UI Designer ؟

إنه يمثل مأساه, ما أعرفه أنه من المفترض أن يقوم المصمم بإرسال ال HTML للمطور الذي يستخدمه ليضمن كود اللغه (php, jsp, etc) داخل صفحة ال html ...

ثم ما هذا إنه حتى ليس على طريقة ال JSON ...

تم تعديل هذه المشاركة بواسطة __Unknown في 26 فبراير 2012 في 14:43

1 −1
#11

هذه تشبه لغة برمجه بسيطه لايمكن أن تكون على غرار json ولا على صيغة لغه الجافاسكريبت أو غيرها إلا بعد تعديل يضمن عدم تعارضها , هنا تطبيق للغه مشهوره تدعى سمارتي للتعامل مع القوالب داخل البي أتش بي ولكنها تتعارض مع الكثير من النصوص أنظر إلى المثال :

PHP
 <?php for($x=0; $x<20; $x+=2): ?>   <php echo $x+1; ?> <?php endfor; ?>    
Smarty
 {for $x = 1 to 20 step 2}   {$x} {/for}

وهي ليست مأساه كما قلت :) هي عباره عن خيار أفضل من كتابة عشرات الأسطر بعدة لغات للوصول إلى نتيجه يمكن الوصول لها من خلال كود بسيط , تخيل أنك أخذته نسخ لصق من أحد المواقع ..

والأفضل من ذلك هو جعل المبرمج لا يعتمد على المصمم في كل شيء فهذا الكود البسيط يضمن تصميم النموذج ويمكن للمصمم تغيير التصميم دون لمس كود الhtml فقط بالإعتماد على ال css & js أنظر للكود المولد يحتوي على div , lable , span , input وكل وسم له id & class وهذا يعطي داينمكيه عاليه للمصمم , كما أن عمليه قلب الكود إلى شكل آخر يتم بسهوله وذلك بالتحكم في هذا الأمر .

للمزيد حول هذا الأمر أنظر

اقتباس
Syntax:

1[input:"type","name","value","validate","style","other"end input]

type: form,text,autocomplete,date,password,submit,button,reset,radio,checkbox,textarea,select

name:

name use as name and id , if you wont add label you can use name:label caption , also you can use label for array like name:label1,label2,...

value:

use php var like $x or just value type , with array value1,value2 , for select use value:on , with form type, this value = action

validate:

type validate like required,length[0,100],... , in form type, this = method

Style:

name of class or use ui style like style:left icon,right icon , in form type, this = content

other:

to insert code in same tag like onclick="alert('hi!')"

validate option

optional: Only validate when the field is not empty *Please call optional first

required: Field is required

length[0,100]: Between 0 and 100 characters allowed.

maxCheckbox[7]: Set the maximum checkbox authorized for a group.

minCheckbox[7]: Set the minimum checkbox authorized for a group.

confirm[fieldID]: Match the other field (ie:confirm password).

telephone: Match telephone regEx rule.

email: Match email regEx rule.

number: Numbers only.

nospecialcaracters: No special characters allowed.

lette: Letters only.

exemptString: Will not validate if the string match.

date: Invalid date, must be in YYYY-MM-DD format.

funcCall: Validate custom functions out.

rege: regular expression use like rege:^[a-z ']+$msg:your massege here.

jsfunction: call js function from your page to validate use like jsfunction:myfunction;msg:your msg here.

ajax: check value from php code.

الشرح لنسخة قديمه من إطار العمل .

تم تعديل هذه المشاركة بواسطة بسام العيساوي في 27 فبراير 2012 في 00:11

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#12
اقتباس
والأفضل من ذلك هو جعل المبرمج لا يعتمد على المصمم في كل شيء فهذا الكود البسيط يضمن تصميم النموذج ويمكن للمصمم تغيير التصميم دون لمس كود الhtml فقط بالإعتماد على ال css & js أنظر للكود المولد يحتوي على div , lable , span , input وكل وسم له id & class وهذا يعطي داينمكيه عاليه للمصمم , كما أن عمليه قلب الكود إلى شكل آخر يتم بسهوله وذلك بالتحكم في هذا الأمر .

اوافق الأخ "__Unknown " ، لعدة أسباب :

- template library أو مكتبة القوالب مثل smarty ليست بديلاً لـ HTML ، بل هي بديل لكابة كود php داخل ملف html . لا أعرف هل كنت تقصد الاستشهاد بها ؟ الاستشهاد بها غير دقيق إذا كنت تقارنها بمكتبة تقوم بتوليد html :-) .

- توليد HTML بالطريقة التي ذكرتها أرى أنه يحد من قدرة المصمم ، فمثلاً ، أريد أن أظهر Errors فوق Form و ليس بجانب كل Field ؟ ماذا علي أن افعل في هذه الحالة ؟ من الأولى أن تتم كتابة Validator في php بمعزل عن HTML ، هذا دورك كمبرمج لإطارا لعمل، وليس أن تجبر مستخدمي إطار العمل على نمط معيّن من التصميم.

- قد يكون إيجاد بديل عن HTML مفيد في حالة واحدة ( قد يكون مفيد ) ، و هي عملية تطوير إطار عمل لتطوير تطبيقات ويب و ليس مواقع ويب . تطبيقات الويب يمكن أن يكون لها مكتبة خاصة لانتاج Grid View مثلاً . أرى أن المواقع تختلف عن التطبيقات ، ما يصلح للمواقع لا يصلح لتطبيقات الويب .

الـ Validator الذي بنيته أنت ، ممتاز ، لكن لا تجبرني على تصميم معين :-) .

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#13
اقتباس
وليس أن تجبر مستخدمي إطار العمل على نمط معيّن من التصميم.

جميع البدائل متاحة وذلك يعتمد على الإطار , لنفرض أنني كمبرمج إخترت مكتبه لإظهار الخطأ هل يمكن أن أغير نمط هذا الخطأ بحيث يظهر في أعلى النموذج أو غير ذلك ؟ نعم يمكنني ولكن أحتاج إلى خبير في الستايل والجافاسكريبت , هنا يتم إيجاد مكتبات جاهزه ولا يتم إجبار المطور أو المصمم على إستخدامها ولكن يمكنه ذلك فقط لسرعه الإنجاز وسهولته .

في عالم تصميم المواقع يمكنك إنشاء ماتريد وكيفما كان ترتيب الكود فقط أعطني الوسم والآي دي والكلاس لأقوم بإنجاز أي شيء وهذا مايفتقده الكثير من المصممين

أنظر إلى هذا الموقع الذي يحتوي على كود html ثابت ومجموعه كبيره من التصاميم

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

مواضيع مشابهة

عدد الزوار حالياً

المتواجدون خلال آخر دقيقتين · يتحدّث كل ٣٠ ثانية

—الإجمالي—أعضاء مسجّلون—زوار بدون تسجيل

جارٍ التحقق من المتواجدين…