2010-03-31 17 views
5

में घटकों का क्षैतिज प्लेसमेंट सरल होना चाहिए लेकिन मुझे जवाब नहीं मिला, मैं लंबवत के बजाय घटकों को क्षैतिज रूप से रखना चाहता हूं।जेएसएफ

जो मैं प्राप्त करने की कोशिश कर रहा हूं वह एक समृद्ध है: 2 या अधिक पंक्तियों वाला टूलबार। मैं ऐसा करने के लिए एक उपकरण पट्टी एक panelgrid और इस तरह दो panelgroups है कि के साथ की कोशिश कर दिया गया है:

<rich:toolbar...> 
    <f:panelgrid columns="1"...> 
    <f:panelgroup id="row1" .../> <-- Should be horizontal placement 
    <f:panelgroup id="row2" .../> <-- Should be horizontal placement 
    <f:panelgrid/> 
<rich:toolbar/> 

तो मैं कैसे panelgroup लेआउट क्षैतिज कर सकता हूँ (या मैं कुछ और इस्तेमाल करना चाहिए?)

धन्यवाद!

उत्तर

4

आप शायद पहले से ही जानते हैं कि वेबसर्वर में जेएसएफ वेबब्रोसर में एचटीएमएल के रूप में समाप्त होता है।

  1. समूह उन्हें इनलाइन तत्वों में (जैसे <span> या display: inline; साथ किसी भी तत्व): एचटीएमएल में, वहाँ क्षैतिज तत्वों जगह करने के कई तरीके (सीएसएस की मदद से अंततः) कर रहे हैं।
  2. उन्हें ब्लॉक तत्वों में समूहित करें (जैसे <div> या display: block; के साथ कोई तत्व) और उन्हें सभी float: left; दें।

JSF <h:panelGrid> एक HTML <table> तत्व जिसमें प्रत्येक बच्चे घटक एक <td> रूप में लिया जाता हो जाता है। columns विशेषता <td> तत्वों को अधिकतम <tr> में दर्शाती है (ताकि <h:panelGrid> पता हो कि </tr><tr> में कब रखा जाए)। जेएसएफ <h:panelGroup><span> तत्व प्रस्तुत करता है।

जेएसएफ के साथ 1 रास्ता प्राप्त करने के लिए, आपको बस उन्हें अलग-अलग <h:panelGroup> घटकों में समूहित करने की आवश्यकता है।

<rich:toolbar ...> 
    <h:panelgroup id="row1" ... /> 
    <h:panelgroup id="row2" ... /> 
</rich:toolbar> 

रास्ता 2 उसी तरह से किया जा सकता है, लेकिन फिर बजाय <h:panelGroup layout="block"> और उनके सीएसएस में एक float: left; साथ।

+0

बढ़िया! उस शैक्षणिक भाग को जोड़ने के लिए धन्यवाद। मैं जेएसएफ पर स्वयं प्रशिक्षित हूं और बहुत सारी मूल बातें खो रहा हूं ... – Ben