Menu im Skin erstellen

An diesem Artikel wird derzeit gearbeitet. Achtung: Der Artikel kann unvollständig und fehlerhaft sein!

Einleitung

Der Screen name="Menu"" ist ein Multifunktions Screen der gleichzeitig mehrere Screens bedient.

Es ist der Standardscreen für die Menüanzeigen wenn keine weiteren Menüs geskinnt wurden.

Dieser Screen ist für die folgende Fenster gleichzeitig, jedoch können diese auch einzeln geskinnt werden (Screennamen in Klammer):

• Main menu = (name="menu_mainmenu")

• Main information = (name="menu_information")

• Main setup = (name="menu_setup")

• Main shutdown = (name="menu_shutdown")

• Main scan = (name="menu_scan")

• Main system = (name="menu_system")

• Main Harddisk = (name="menu_harddisk")

Main menu im Defaultskin

Im OE 2.0 Default-HD skin ist dieser Abschnitt so dargestellt:

	<!-- Menu -->
	<screen name="Menu" position="center,center" size="650,500" title="Main menu" flags="wfNoBorder">
		<ePixmap pixmap="Default-HD/menu-bg.png" position="0,0" size="650,500" zPosition="-1" alphatest="on"/>
		<widget source="title" render="Label" position="15,9" size="620,30" zPosition="1" font="Regular;26" backgroundColor="#16244b" transparent="1"/>
		<widget source="menu" render="Listbox" position="255,50" size="390,440" zPosition="1" scrollbarMode="showOnDemand" >
			<convert type="TemplatedMultiContent">
				{"template": [ MultiContentEntryText(pos = (10, 8), size = (370, 26), text = 0) ],
				"fonts": [gFont("Regular", 22)],
				"itemHeight": 40
				}
			</convert>
		</widget>
		<widget source="menu" render="Listbox" position="40,75" size="180,180" scrollbarMode="showNever" selectionDisabled="1" transparent="1">
			<convert type="TemplatedMultiContent">
				{"template": [ MultiContentEntryPixmapAlphaBlend(pos = (0,0), size = (180,180), png = 5) ],
				"fonts": [gFont("Regular", 22)],
				"itemHeight": 180
				}
			</convert>
		</widget>
		<widget source="menu" render="Listbox" position="15,300" size="230,180" zPosition="1" scrollbarMode="showNever" selectionDisabled="1" transparent="1">
			<convert type="TemplatedMultiContent">
				{"template": [
						MultiContentEntryText(pos = (0, 0), size = (230, 180), flags = RT_HALIGN_CENTER|RT_VALIGN_CENTER|RT_WRAP, text = 4) ],
				"fonts": [gFont("Regular", 22)],
				"itemHeight": 180
				}
			</convert>
		</widget>
	</screen>

Main menu im BluedreamHD

Mir gefiel diese Art und auch die Grafik dazu wesentlich besser..

	<!-- Menu -->
	<screen name="Menu" position="center,center" size="650,530" title="Main menu" flags="wfNoBorder" backgroundColor="transparent">
		<ePixmap pixmap="BlueDreamHD/menu/menu-bg.png" position="0,0" size="650,530" zPosition="-1" alphatest="on"/>
		<widget source="title" render="Label" position="30,9" size="600,30" zPosition="1" font="Regular;26"  transparent="1"/>
		<widget source="menu" render="Listbox" position="255,47" size="390,440" zPosition="1" scrollbarMode="showOnDemand" selectionPixmap="BlueDreamHD/selpic.png">
			<convert type="TemplatedMultiContent">
				{"template": [ MultiContentEntryText(pos = (10, 8), size = (370, 26), text = 0) ],
				"fonts": [gFont("Regular", 22)],
				"itemHeight": 40
				}
			</convert>
		</widget>
		<widget source="menu" render="Listbox" position="40,75" size="180,180" scrollbarMode="showNever" selectionDisabled="1" transparent="1">
			<convert type="TemplatedMultiContent">
				{"template": [ MultiContentEntryPixmapAlphaBlend(pos = (0,0), size = (180,180), png = 5) ],
				"fonts": [gFont("Regular", 22)],
				"itemHeight": 180
				}
			</convert>
		</widget>
		<widget source="menu" render="Listbox" position="15,300" size="230,180" zPosition="1" scrollbarMode="showNever" selectionDisabled="1" transparent="1">
			<convert type="TemplatedMultiContent">
				{"template": [
						MultiContentEntryText(pos = (0, 0), size = (230, 180), flags = RT_HALIGN_CENTER|RT_VALIGN_CENTER|RT_WRAP, text = 4) ],
				"fonts": [gFont("Regular", 22)],
				"itemHeight": 180
				}
			</convert>
		</widget>
	</screen>

Main menu im Vergleich

Main menu im Skin Default-HD des OE2.0

Main menu im Skin BluedreamHD des OE2.0

Da Mir das Menü des DefaultHD-Skin sehr gut gefallen hat habe ich dies soweit übernommen mit Ausnahme eines eigene Hintergrundbildes und kleiner Anpassungen diesbezüglich.

Im neuen OE 2.0 wurde auch die Menüstruktur der menu.xml verbessert so können wir nun im Gegensatz zum alten OE 1.6 einfach ins Verzeichnis menu unsere Menübilder mit dem entsprechendem Funktions-Namen kopieren und diese werden dann automatisch ausgewählt.

Weitere Infos zum Menü skinnen

Weiter Hilfreich sind ie Varianten von den verschiedenen Skins selbst, schaut Sie euch ruhig mal an.

Auch gibt es weiter Hilfe im Forum wo es für das Skinnen selbt einen eigenen Bereich gibt incl. Workshops.