Cette page est considérée comme une ébauche à compléter . Si vous possédez quelques connaissances sur le sujet, vous pouvez les partager en éditant dès à présent cette page (en cliquant sur le lien « modifier »).

Ressources suggérées : Aucune (vous pouvez indiquer les ressources que vous suggérez qui pourraient aider d'autres personnes à compléter cette page dans le paramètre « ressources » du modèle? engendrant ce cadre)

Xul est le language de description xmlisé de Mozilla.

Description

modifier
  • Décrit des widgets xml
  • Contrôlable avec Javascript
  • S'édite avec XulBooster pour Eclipse

Éléments

modifier

http://developer.mozilla.org/En/XUL_Reference


action | arrowscrollbox | assign | bbox | binding | bindings | box | broadcaster | broadcasterset | button | browser | checkbox | caption | colorpicker | column | columns | commandset | command | conditions | content | datepicker | deck | description | dialog | dialogheader | dropmarker | editor | grid | grippy | groupbox | hbox | iframe | image | key | keyset | label | listbox | listcell | listcol | listcols | listhead | listheader | listitem | member | menu | menubar | menuitem | menulist | menupopup | menuseparator | notification | notificationbox | observes | overlay | page | panel | param | popup | popupset | preference | preferences | prefpane | prefwindow | progressmeter | query | queryset | radio | radiogroup | resizer | richlistbox | richlistitem | row | rows | rule | scale | script | scrollbar | scrollbox | scrollcorner | separator | spacer | spinbuttons | splitter | stack | statusbar | statusbarpanel | stringbundle | stringbundleset | tab | tabbrowser (Firefox-only starting with Firefox 3/Gecko 1.9) | tabbox | tabpanel | tabpanels | tabs | template | textnode | textbox | textbox (Firefox autocomplete) | textbox (Mozilla autocomplete) | timepicker | titlebar | toolbar | toolbarbutton | toolbargrippy | toolbaritem | toolbarpalette | toolbarseparator | toolbarset | toolbarspacer | toolbarspring | toolbox | tooltip | tree | treecell | treechildren | treecol | treecols | treeitem | treerow | treeseparator | triple | vbox | where | window | wizard | wizardpage

Attributs

modifier

http://developer.mozilla.org/en/XUL/Attribute


acceltext | accessible | accesskey | activetitlebarcolor | afterselected | align | allowevents | allownegativeassertions | alternatingbackground | alwaysopenpopup | attribute | autocheck | autoCheck | autocompleteenabled | autocompletepopup | autocompletesearch | autocompletesearchparam | autoFill | autoFillAfterMatch | autoscroll | beforeselected | buttonaccesskeyaccept | buttonaccesskeycancel | buttonaccesskeydisclosure | buttonaccesskeyextra1 | buttonaccesskeyextra2 | buttonaccesskeyhelp | buttonalign | buttondir | buttondisabledaccept | buttonlabelaccept | buttonlabelcancel | buttonlabeldisclosure | buttonlabelextra1 | buttonlabelextra2 | buttonlabelhelp | buttonorient | buttonpack | buttons | checked | checkState | class | closebutton | coalesceduplicatearcs | collapse | collapsed | color | cols | command | commandupdater | completedefaultindex | container | containment | contentcontextmenu | contenttooltip | context | contextmenu | control | crop | curpos | current | currentset | customindex | customizable | cycler | datasources | decimalplaces | default | defaultButton | defaultset | description | dir | disableAutocomplete | disableautocomplete | disableautoselect | disableclose | disabled | disablehistory | disableKeyNavigation | disablekeynavigation | disablesecurity | dlgtype | dragging | editable | editortype | element | empty | emptytext | enableColumnDrag | enablehistory | equalsize | eventnode | events | expr | firstdayofweek | firstpage | first-tab | fixed | flags | flex | focused | forceComplete | forcecomplete | grippyhidden | grippytooltiptext | group | handleCtrlPageUpDown | handleCtrlTab | height | helpURI | hidden | hidechrome | hidecolumnpicker | hideheader | hideseconds | hidespinbuttons | homepage | href | icon | id | ignoreBlurWhileSearching | ignorebluewhilesearching | ignorecase | ignoreincolumnpicker | ignorekeys | image | inactivetitlebarcolor | increment | index | inputtooltiptext | insertafter | insertbefore | instantApply | inverted | iscontainer | isempty | key | keycode | keytext | label | lastpage | lastSelected | last-tab | left | linkedpanel | max | maxheight | maxlength | maxpos | maxrows | maxwidth | member | menu | menuactive | min | minheight | minResultsForPopup | minresultsforpopup | minwidth | mode | modifiers | mousethrough | multiline | multiple | name | negate | newlines | next | noautofocus | noautohide | nomatch | object | observes | onbeforeaccept | onbookmarkgroup | onchange | onclosetab | oncommand | oncommandupdate | ondialogaccept | ondialogcancel | ondialogclosure | ondialogextra1 | ondialogextra2 | ondialoghelp | onerror | onerrorcommand | onextra1 | onextra2 | oninput | onload | onnewtab | onpageadvanced | onpagehide | onpagerewound | onpageshow | onpaneload | onpopuphidden | onpopuphiding | onpopupshowing | onpopupshown | onsearchcomplete | onselect | ontextcommand | ontextentered | ontextrevert | ontextreverted | onwizardback | onwizardcancel | onwizardfinish | onwizardnext | open | ordinal | orient | pack | pageid | pageincrement | pagestep | parent | parsetype | persist | persistence | phase | pickertooltiptext | popup | position | predicate | preference | preference-editable | primary | priority | properties | querytype | readonly | ref | rel | removeelement | resizeafter | resizebefore | rows | screenX | screenY | searchSessions | searchlabel | selected | selectedIndex | seltype | setfocus | showcaret | showCommentColumn | showcommentcolumn | showpopup | size | sizemode | sizetopopup | smoothscroll | sort | sortActive | sortDirection | sortResource | sortResource2 | spellcheck | src | state | statedatasource | statusbar | statustext | style | subject | substate | suppressonselect | tabindex | tabScrolling | tabscrolling | targets | template | timeout | title | toolbarname | tooltip | tooltiptext | tooltiptextnew | top | type | uri | userAction | validate | value | var | wait-cursor | width | windowtype | wrap | wraparound

Propriétés

modifier

http://developer.mozilla.org/en/XUL/Property


accessible | accessibleType | accessKey | align | allNotifications | allowEvents | alwaysOpenPopup | amIndicator | appLocale | autoCheck | autoFill | autoFillAfterMatch | boxObject | browsers | builder | builderView | buttons | canAdvance | canGoBack | canGoForward | canRewind | checked | checkState | child | children | className | clickSelectsAll | collapsed | color | columns | command | commandManager | completeDefaultIndex | container | contentDocument | contentPrincipal | contentTitle | contentView | contentViewerEdit | contentViewerFile | contentWindow | contextMenu | control | controller | controllers | crop | current | currentIndex | currentItem | currentNotification | currentPage | currentPane | currentSet | currentURI | customToolbarCount | database | datasources | date | dateLeadingZero | dateValue | decimalPlaces | decimalSymbol | defaultButton | defaultValue | description | dir | disableAutocomplete | disableAutoComplete | disableautoselect | disabled | disableKeyNavigation | dlgType | docShell | documentCharsetInfo | editable | editingColumn | editingRow | editingSession | editor | editortype | emptyText | enableColumnDrag | eventNode | firstOrdinalColumn | firstPermanentChild | flex | focused | focusedItem | forceComplete | group | handleCtrlPageUpDown | handleCtrlTab | height | hidden | hideSeconds | homePage | hour | hourLeadingZero | id | ignoreBlurWhileSearching | image | increment | inputField | inverted | is24HourClock | isPM | isSearching | isWaiting | itemCount | label | labelElement | lastPermanentChild | lastSelected | left | linkedPanel | listBoxObject | locked | markupDocumentViewer | max | maxHeight | maxLength | maxRows | maxWidth | menu | menuBoxObject | menupopup | min | minHeight | minResultsForPopup | minWidth | minute | minuteLeadingZero | mode | month | monthLeadingZero | name | next | noMatch | notificationsHidden | object | observes | onFirstPage | onLastPage | open | ordinal | orient | pack | pageCount | pageid | pageIncrement | pageIndex | pageStep | parentContainer | palette | persist | persistence | pmIndicator | popup | popupBoxObject | popupOpen | position | predicate | preferenceElements | preferencePanes | preferences | priority | radioGroup | readonly | readOnly | ref | resource | resultsPopup | scrollBoxObject | scrollIncrement | searchCount | searchLabel | searchParam | searchSessions | second | secondLeadingZero | securityUI | selected | selectedBrowser | selectedCount | selectedIndex | selectedItem | selectedItems | selectedPanel | selectedTab | selectionEnd | selectionStart | selstyle | selType | sessionCount | sessionHistory | showCommentColumn | showPopup | size | smoothScroll | spinButtons | src | state | statusbar | statusText | stringBundle | strings | style | subject | suppressOnSelect | tabContainer | tabIndex | tabs | tabScrolling | tabpanels | tag | textLength | textValue | timeout | title | toolbarName | toolbarset | tooltip | tooltipText | top | treeBoxObject | type | uri | userAction | value | valueNumber | view | webBrowsereFind | webNavigation | webProgress | width | wizardPages | wrapAround | year | yearLeadingZero


http://developer.mozilla.org/en/XUL/Property

DOM:element.attributes | " class="new DOM:element.baseURI | DOM:element.childElementCount | DOM:element.childNodes | DOM:element.children | DOM:element.clientHeight | DOM:element.clientLeft | DOM:element.clientTop | DOM:element.clientWidth | DOM:element.cloneNode | DOM:element.firstChild | DOM:element.firstElementChild | DOM:element.lastChild | DOM:element.lastElementChild | DOM:element.localName | DOM:element.namespaceURI | DOM:element.nextElementSibling | DOM:element.nextSibling | DOM:element.nodeName | DOM:element.nodeType | DOM:element.nodeValue | DOM:element.ownerDocument | DOM:element.parentNode | DOM:element.prefix | DOM:element.previousElementSibling | DOM:element.previousSibling | DOM:element.scrollHeight | DOM:element.scrollLeft | DOM:element.scrollTop | DOM:element.scrollWidth | DOM:element.tagName | DOM:element.textContent

Méthodes

modifier

http://developer.mozilla.org/en/XUL/Method

acceptDialog | addItemToSelection | addPane | addProgressListener | addSession | addTab | advance | advanceSelectedTab | appendCustomToolbar | appendGroup | appendItem | appendNotification | blur | cancel | cancelDialog | centerWindowOnScreen | checkAdjacentElement | clearResults | clearSelection | click | close | collapseToolbar | contains | decrease | decreasePage | doCommand | ensureElementIsVisible | ensureIndexIsVisible | ensureSelectedElementIsVisible | expandToolbar | extra1 | extra2 | focus | getBrowserAtIndex | getBrowserForDocument | getBrowserForTab | getBrowserIndexForDocument | getButton | getDefaultSession | getEditor | getElementsByAttribute | getElementsByAttributeNS | getFormattedString | getHTMLEditor | getIndexOfFirstVisibleRow | getIndexOfItem | getItemAtIndex | getNextItem | getNotificationBox | getNotificationWithValue | getNumberOfVisibleRows | getPageById | getPreviousItem | getResultAt | getResultCount | getResultValueAt | getRowCount | getSearchAt | getSelectedItem | getSession | getSessionByName | getSessionResultAt | getSessionStatusAt | getSessionValueAt | getString | goBack | goBackGroup | goDown | goForward | goForwardGroup | goHome | goTo | gotoIndex | goUp | hidePopup | increase | increasePage | insertItem | insertItemAt | invertSelection | loadGroup | loadOneTab | loadTabs | loadURI | loadURIWithFlags | makeEditable | moveByOffset | moveTo | moveToAlertPosition | onSearchComplete | onTextEntered | onTextReverted | openPopup | openPopupAtScreen | openSubDialog | openWindow | preferenceForElement | reload | reloadAllTabs | reloadTab | reloadWithFlags | removeAllItems | removeAllNotifications | removeAllTabsBut | removeCurrentNotification | removeCurrentTab | removeItemAt | removeItemFromSelection | removeNotification | removeProgressListener | removeSession | removeTab | removeTransientNotifications | replaceGroup | reset | rewind | scrollByIndex | scrollByPixels | scrollToIndex | select | selectAll | selectItem | selectItemRange | setSelectionRange | showPane | showPopup | sizeTo | startEditing | stop | stopEditing | swapDocShells | syncSessions | timedSelect | toggleItemSelection

Attributs définis pour les éléments Xul

modifier

http://developer.mozilla.org/en/XUL_element_attributes

Classes de styles

modifier

http://developer.mozilla.org/en/XUL/Style

Gestionnaires d'événements

modifier

http://developer.mozilla.org/en/XUL/Events

APPLICATION

modifier

interface

modifier

Une fenêtre Xul se déclare par l'utilisation d'un skin dans le "chrome" :

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="cWin"
    title="interface test"
    orient="horizontal"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    
    onload="initialize()"
    >

</window>

Les scripts et les styles se placent dans window comme ceci :

<!-- [0] regionHEAD -->
	
<!-- script -->
  <script src="./Script/scr.js" /><!-- type="application/javascript;version=1.7" -->
  <script src="./Script/prototype_xul_1_6_0_2.js" />
	
<!-- style -->
  <style/>

L'interface se découpe en box :

		<vbox>

		<toolbox flex="1">

			<menubar id="sample-menubar">
				
				<!-- MENU -->
				<menu id="file-menu" label="File">
			    	<menupopup id="file-popup">
			    		
			    		<!-- subMenu
			      		<menu id="new-menu" label="New">
			        		<menupopup id="new-popup">
			          			<menuitem label="Window"/>
			          			<menuitem label="Message"/>
			        		</menupopup>
			      		</menu>
			      		-->
			      		
			      		<menuitem label="Open"/>
			      		<menuitem label="Backup"/>
			      		<menuseparator/>
			      		<menuitem label="Exit"/>
			    	</menupopup>
			  	</menu>
			  	
			</menubar>

		</toolbox>

		</vbox>

Dans l'exemple suivant, l'attribut flex définit une taille proportionnelle.

Exemple

modifier

La liste et la figure suivante illustrent une vue Xul:

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="./Style/style.css" type="text/css"?>
<window
    id="cWin"
    title=":: Budget Controler ::"
    orient="horizontal"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    
    onload="oItem.initialize()"
    >
	<!-- [0] regionHEAD -->
	
	<!-- script -->
	<script src="./Script/scr.js" /><!-- type="application/javascript;version=1.7" -->
	<script src="./Script/prototype_xul_1_6_0_2.js" />
	
	<!-- style -->
	<style/>
	
	<!-- [0] -->

	<vbox flex="1">
	
		<vbox>
		<toolbox flex="1">
			<menubar id="sample-menubar">
				
				<!-- MENU -->
				<menu id="file-menu" label="File">
			    	<menupopup id="file-popup">
			    		
			    		<!-- subMenu
			      		<menu id="new-menu" label="New">
			        		<menupopup id="new-popup">
			          			<menuitem label="Window"/>
			          			<menuitem label="Message"/>
			        		</menupopup>
			      		</menu>
			      		-->
			      		
			      		<menuitem label="Open"/>
			      		<menuitem label="Backup"/>
			      		<menuseparator/>
			      		<menuitem label="Exit"/>
			    	</menupopup>
			  	</menu>
			  	
			</menubar>
		</toolbox>
		</vbox>
		
		<tabbox>
		
			<tabs>
		    	<tab label="Encoding" selected="true"/>
		    	<tab label="History"/>
		    	<tab label="Incoming"/>
		  	</tabs>
			
			<tabpanels>
			
				<tabpanel>
				<!-- [1] ENCODING -->
				
					<groupbox width="300">
		  			<caption label="items"/>
						
						<vbox>
						
							<textbox  id="cItem" multiline="false" value=":: item ::" onfocus="oUtils.clean(this);"/>
							
							<hbox>
								
								<button width="50" label="add" onclick="oItem.addItem('cItem','cListItem');"/>
								<button width="50" label="search" onclick="oItem.searchItem();"/>
								<button id="cItemDel" width="50" label="del" onclick="oItem.delItem($('cListItem').selectedIndex,'cListItem');" disabled="true" />
								
								<label style="cursor:pointer;" value="[+]" onclick="oItem.disabling($('cItemDel'));oVw.changeTicker(this);"/>
								
							</hbox>
							
							<!-- list items -->
							<vbox>
							
								<listbox id="cListItem" rows="20" onclick="oItem.getDetail()">
								
									<listitem label="Butter Pecan" value="bpecan"/>
									<listitem label="Chocolate Chip" value="chocchip"/>
									<listitem label="Raspberry Ripple" value="raspripple"/>
									<listitem label="Squash Swirl" value="squash"/>
								
								</listbox>
							
							</vbox>
							
							<textbox  id="cItem" multiline="false" value=":: class ::" onfocus="oUtils.clean(this);"/>
							
							<vbox flex="1">
								
								<button width="50" label="add" onclick="oItem.addItem();"/>
								
							</vbox>
							
						</vbox>
							
					</groupbox>
					
					<!-- separator -->
					<splitter style="width: 10px; max-width: 10px;" collapse="before" resizebefore="closest" resizeafter="farthest" state="open">
						<grippy id="gspace_leftgrippy"/>
					</splitter>
					<!-- separator  -->
					
					<groupbox width="200">
		  			<caption label="item detail"/>
						
						<html:p/>actual price :
						<textbox  id="cItem" width="200" multiline="false" value=":: item ::" onfocus="oUtils.clean(this);" disabled="true"/>
						
						<html:p/>new price :
						<textbox  id="cItem" width="200" multiline="false" value=":: price ::" onfocus="oUtils.clean(this);"/>	
						
						<html:p/>item class :
						
						<!--
						<textbox  id="cItem" width="200" multiline="false" value=":: class ::" onfocus="oUtils.clean(this);"/>
						-->
						
						<menulist width="200" label="Bus">
							<menupopup>
							    <menuitem label="Car"/>
							    <menuitem label="Taxi"/>
							    <menuitem label="Bus" selected="true"/>
								<menuitem label="Train"/>
							</menupopup>
						</menulist>
						
						<html:p/>shop :
						<textbox  id="cItem" width="200" multiline="false" value=":: shop ::" onfocus="oUtils.clean(this);"/>
						
						<html:p/>
						<button label="validate" width="200" onclick="oItem.searchItem();"/>	<!--  -->				
						
					</groupbox>
					
					<!-- separator -->
					<splitter style="width: 10px; max-width: 10px;" collapse="before" resizebefore="closest" resizeafter="farthest" state="open">
						<grippy id="gspace_leftgrippy"/>
					</splitter>
					 <!-- separator  -->
					
					<groupbox flex="1">
		  			<caption label="actual"/>
						
						<html:div style="-moz-vbox-flex:1;height:100%;width:100%;"><!-- vbox flex="1" -moz-vbox-flex:1; background-color:grey;-->
							
							<svg width="100%" height="270%" version="1.1" xmlns="http://www.w3.org/2000/svg">
								<polyline points="0,200 50,150 100,170 150,125" style="fill:none;stroke:red;stroke-width:2"/>
							</svg>
							
						</html:div>
						
					</groupbox>
					
				</tabpanel>
				
				<tabpanel>
				<!--  [2] HISTORY -->

					<vbox flex="1">
					<html:div id="main">
					
							<html:div id="left">
								
								:: this is left content ::
								
							</html:div>
							<html:div id="middle">

								:: this is middle content ::

							</html:div>
							<html:div id="right">

								:: this is right content ::

							</html:div>
						
						<!-- bottom -->
						<html:div id="clear">bottom</html:div>
						
					</html:div>
					</vbox>
					
				</tabpanel>
			
				<tabpanel>
				<!--  [3] INCOMMING -->
				
					<groupbox width="330" orient="vertical">
		  			<caption label="Banks"/>

						<groupbox class="dark" width="300">
			  			<caption label="Account"/>
							
							<textbox  id="cBqItem" multiline="false" value=":: item ::" onfocus="oUtils.clean(this);"/>
							
							<hbox>
								
								<button width="50" label="add" onclick="oItem.addItem('cBqItem','cBqListItem');"/>
								<button width="50" label="search" onclick="oItem.searchItem();"/>
								<button id="cItemDel_2" width="50" label="del" onclick="oItem.delItem($('cBqListItem').selectedIndex,'cBqListItem');" disabled="true" />
								
								<label style="cursor:pointer;" value="[+]" onclick="oItem.disabling($('cItemDel_2'));oVw.changeTicker(this);"/>
								
							</hbox>
							
							<vbox>
							
								<listbox id="cBqListItem" rows="5" onclick="oItem.getDetail()">
								
									<listitem label="Fortis" value="bpecan"/>
								
								</listbox>
							
							</vbox>
							
						</groupbox>
						
						<!--  INCOMES -->
						<groupbox class="dark" width="300">
			  			<caption label="Incomes"/>
						
							<html:div>
							
								<html:div id="cBqInc">
									
									<!-- insert new incomes -->
									<html:div style="display:none;" id="cBqInc_">
										<html:div>
											<html:input id="account" class="lowTxt" type="text" value="> account" size="20"/>
											<html:input id="amount" class="lowTxt" type="text" value="> amount" size="10"/>
											<html:input id="date" class="lowTxt" type="text" value="> date" size="10"/>
											<html:span class="clickable" onclick="oItem.saveItem(this.parentNode,'incomes');parentNode.innerHTML='';oItem.load('incomes','cBqInc_1');
												"> [+] </html:span> <!--  -->
										</html:div>
									</html:div>
									
									<html:div id="cBqInc_1" />
									
									<html:div>
									
										<!-- separator -->
										<html:hr />
										<!-- separator  -->
									
										<!-- incomes menu -->
										<html:span>
											<html:label onclick="oUtils.showHide($('listIncomes'));">[ history ]</html:label>
											<html:label onclick="oUtils.showHide($('listStat'));">[ statistic ]</html:label>
										</html:span>
										
										<html:p/>
										
										<html:div id="listIncomes" style="display:none">
										
											<html:p/>
											<html:div class="ttl">:: this is the history content ::</html:div>
											 <html:p/>
											<listbox id="incomes_history" rows="5">
												<listhead>
													<listheader label="Account"/>
													<listheader label="Amount"/>
													<listheader label="Date"/>
												</listhead>
												<listitem>
													<listcell label="Fortis"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Argenta"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Ing"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
											</listbox>
											
											<!-- 
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											 -->
											 
										</html:div>
									
										<html:div id="listStat" style="display:none">
										
											<html:p/>
											<html:div class="ttl">:: this is the stat content ::</html:div>
											 <html:p/>
											 <listbox id="incomes_history" rows="5">
												<listhead>
													<listheader label="Account"/>
													<listheader label="Amount"/>
													<listheader label="Date"/>
												</listhead>
												<listitem>
													<listcell label="Fortis"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Argenta"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Ing"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
											</listbox>
											 
										</html:div>
									
									</html:div>
									
								</html:div>
								
								<html:p/>
								
								<!-- separator -->
									<html:hr />
								<!-- separator  -->
								
								<!-- add new income -->
								<button label="new" onclick="oItem.putLine('cBqInc','inc_new');"/>
									
								<!-- separator -->
									<html:hr />
								<!-- separator  -->
								
								<html:div id="inc_new" />
							
							</html:div>						
						
						</groupbox>

						<!-- ORDERS -->
						<groupbox class="dark" width="300">
			  			<caption label="Orders"/>
			  			
							<html:div>
							
								<html:div id="cBqOrd">
									
									<!-- insert new incomes -->
									<html:div style="display:none;" id="cBqOrd_">
										<html:div>
											<html:input id="account" class="lowTxt" type="text" value="> account" size="20"/>
											<html:input id="amount" class="lowTxt" type="text" value="> amount" size="10"/>
											<html:input id="date" class="lowTxt" type="text" value="> date" size="10"/>
											<html:span class="clickable" onclick="oItem.saveItem(this.parentNode,'orders');parentNode.innerHTML='';oItem.load('orders','cBqOrd_1');"> [+] </html:span>
										</html:div>
									</html:div>
									
									<html:div id="cBqOrd_1"/>
									
								</html:div>
								
								<html:p/>
								
								<!-- separator -->
								<html:hr />
								<!-- separator  -->
								
								<!-- add new income -->
								<button label="new" onclick="oItem.putLine('cBqOrd','ord_new');"/>
								
								<!-- separator -->
								<html:hr />
								<!-- separator  -->
								
								<html:div id="ord_new"/>
								
							</html:div>	
							
						</groupbox>
							
					</groupbox>
					
					<!-- separator -->
					<splitter style="width: 10px; max-width: 10px;" collapse="before" resizebefore="closest" resizeafter="farthest" state="open">
						<grippy id="gspace_leftgrippy"/>
					</splitter>
					<!-- separator  -->
					
					<!-- EXPENDITURE -->
					<groupbox width="300">
		  			<caption label="Expenditures"/>
						
						<groupbox class="dark" width="300" orient="vertical">
			  			<caption label="Bank"/>
							
							<box orient="horizontal">
							
								<menulist label="Account">
									<menupopup>
									    <menuitem label="fortis"/>
									    <menuitem label="argenta"/>
									    <menuitem label="ING" selected="true"/>
									</menupopup>
								</menulist>
								
							
								<textbox class="txtLow" label="in" value="> amount" onfocus="oUtils.clean(this);"/>
								<textbox class="txtLow" label="date" value="> date" onfocus="oUtils.clean(this);"/>
								
<!-- > account -->
								
								<menulist label="ES">
									<menupopup>
									    <menuitem label="in"/>
									    <menuitem label="out"/>
									</menupopup>
								</menulist>
								
							</box>
							
							<textbox  id="cBqSpendItem" multiline="true" rows="2" value=":: detail ::" onfocus="oUtils.clean(this);"/>
							
							<html:hr/>
							
							<box orient="horizontal">
								<button label="new" />
							</box>
							
							<html:hr/>
							
						</groupbox>
												
						<!--  INCOMES -->
						<groupbox class="dark" width="300">
			  			<caption label="Purchase"/>
						
							<html:div>
							
								<html:div id="cClInc">
									
									<!-- insert new incomes -->
									<html:div style="display:none;" id="cClInc_">
										<html:div>
											<html:input id="object" class="lowTxt" type="text" value="> object" size="20"/>
											<html:input id="amount" class="lowTxt" type="text" value="> amount" size="10"/>
											<html:input id="date" class="lowTxt" type="text" value="> date" size="10"/>
											<html:span class="clickable" onclick="oItem.saveItem(this.parentNode,'purchases');parentNode.innerHTML='';oItem.load('purchases','cClInc_1');
												"> [+] </html:span> <!--  -->
										</html:div>
									</html:div>
									
									<html:div id="cClInc_1" />
									
									<html:div>
									
										<!-- separator -->
										<html:hr />
										<!-- separator  -->
									
										<!-- incomes menu -->
										<html:span>
											<html:label onclick="oUtils.showHide($('listpHist'));">[ history ]</html:label>
											<html:label onclick="oUtils.showHide($('listpStat'));">[ statistic ]</html:label>
										</html:span>
										
										<html:p/>
										
										<html:div id="listpHist" style="display:none">
										
											<html:p/>
											<html:div class="ttl">:: this is the history content ::</html:div>
											 <html:p/>
											<listbox id="incomes_history" rows="5">
												<listhead>
													<listheader label="Account"/>
													<listheader label="Amount"/>
													<listheader label="Date"/>
												</listhead>
												<listitem>
													<listcell label="Fortis"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Argenta"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Ing"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
											</listbox>
											
											<!-- 
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											<html:br/>:: this is the bottom content  ::
											 -->
											 
										</html:div>
									
										<html:div id="listpStat" style="display:none">
										
											<html:p/>
											<html:div class="ttl">:: this is the stat content ::</html:div>
											 <html:p/>
											 <listbox id="incomes_history" rows="5">
												<listhead>
													<listheader label="Account"/>
													<listheader label="Amount"/>
													<listheader label="Date"/>
												</listhead>
												<listitem>
													<listcell label="Fortis"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Argenta"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
												<listitem>
													<listcell label="Ing"/>
													<listcell label="200"/>
													<listcell label="10/10/2008"/>
												</listitem>
											</listbox>
											 
										</html:div>
											 
									
									</html:div>
									
								</html:div>
								
								<html:p/>
								
								<!-- separator -->
									<html:hr />
								<!-- separator  -->
								
								<!-- add new income -->
								<button label="new" onclick="oItem.putLine('cClInc','pur_new');"/>
									
								<!-- separator -->
									<html:hr />
								<!-- separator  -->
								
								<html:div id="pur_new" />
							
							</html:div>						
						
						</groupbox>

					
					</groupbox>
					
					<!-- separator -->
					<splitter style="width: 10px; max-width: 10px;" collapse="before" resizebefore="closest" resizeafter="farthest" state="open">
						<grippy id="gspace_leftgrippy"/>
					</splitter>
					<!-- separator  -->
					
					<groupbox flex="1">
		  			<caption label="actual" orient="vertical"/>
						
						<hbox>
						
							<groupbox flex="1" height="100%">
							<caption label="Top five expenditures"/>
							
							</groupbox>
							
							<groupbox flex="1">
							<caption label="Rest"/>
							
							</groupbox>
						
						</hbox>
						
						<vbox flex="1">
						
							<groupbox flex="1">
							<caption label="Month overview"/>
								
								<!-- results -->
								
								<groupbox>
									
									<html:table>
										<!-- numbers -->
										<html:tr><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">1</html:td><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">2</html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">3</html:td><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">4</html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">5</html:td><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">6</html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">7</html:td><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">8</html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">9</html:td><html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;">0</html:td>
										<!--  operation -->
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> [ </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> , </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> + </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> - </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> * </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> / </html:td>
										<html:td onclick="$('calcPrompt').innerHTML+=this.innerHTML;"> ] </html:td>
										<html:td onclick="$('calcPrompt').innerHTML = eval($('calcPrompt').innerHTML);"> = </html:td>
										<html:td width="50"/>
										<html:td id="calcPrompt"/></html:tr>
									</html:table>
								
								</groupbox>
								
							</groupbox>
						
						</vbox>
						
					</groupbox>
					
				</tabpanel>
			
			</tabpanels>
			
		</tabbox>
	
	</vbox>

</window>

 

Articles

modifier