def __init__(self):
super(FormAdvancedLayoutExample, self).__init__()
# the 'POJO' we're editing.
# The Person class is imported from the basic form example.
self._person = Person() # a person POJO
personItem = BeanItem(self._person) # item from POJO
# Create the Form
personForm = FormWithComplexLayout(personItem, self)
# Add form to layout
self.addComponent(personForm)
# The cancel / apply buttons
buttons = HorizontalLayout()
buttons.setSpacing(True)
discardChanges = Button("Discard changes", DiscardListener(personForm))
discardChanges.setStyleName(BaseTheme.BUTTON_LINK)
buttons.addComponent(discardChanges)
buttons.setComponentAlignment(discardChanges, Alignment.MIDDLE_LEFT)
aply = Button("Apply", ApplyListener(personForm))
buttons.addComponent(aply)
personForm.getFooter().setMargin(True)
personForm.getFooter().addComponent(buttons)
# button for showing the internal state of the POJO
l = InternalStateListener(self)
showPojoState = Button("Show POJO internal state", l)
self.addComponent(showPojoState)
class ImmediateUploadExample(VerticalLayout):
def __init__(self):
super(ImmediateUploadExample, self).__init__()
self.setSpacing(True)
self._status = Label('Please select a file to upload')
self._pi = ProgressIndicator()
self._receiver = MyReceiver()
self._progressLayout = HorizontalLayout()
self._upload = Upload(None, self._receiver)
# Slow down the upload
self._receiver.setSlow(True)
self.addComponent(self._status)
self.addComponent(self._upload)
self.addComponent(self._progressLayout)
# Make uploading start immediately when file is selected
self._upload.setImmediate(True)
self._upload.setButtonCaption('Select file')
self._progressLayout.setSpacing(True)
self._progressLayout.setVisible(False)
self._progressLayout.addComponent(self._pi)
self._progressLayout.setComponentAlignment(self._pi,
Alignment.MIDDLE_LEFT)
cancelProcessing = Button('Cancel')
cancelProcessing.addListener(CancelListener(self),
button.IClickListener)
cancelProcessing.setStyleName('small')
self._progressLayout.addComponent(cancelProcessing)
# =========== Add needed listener for the upload component: start,
# progress, finish, success, fail ===========
self._upload.addListener(StartedListener(self),
upload.IStartedListener)
self._upload.addListener(ProgressListener(self),
upload.IProgressListener)
self._upload.addListener(SucceededListener(self),
upload.ISucceededListener)
self._upload.addListener(FailedListener(self),
upload.IFailedListener)
self._upload.addListener(FinishedListener(self),
upload.IFinishedListener)
def __init__(self):
super(ProminentPrimaryActionExample, self).__init__()
self.setSpacing(True)
# Cancel / Save
horiz = HorizontalLayout()
horiz.setCaption('Save/cancel example:')
horiz.setSpacing(True)
horiz.setMargin(True)
self.addComponent(horiz)
secondary = Button('Cancel', self)
secondary.setStyleName(BaseTheme.BUTTON_LINK)
horiz.addComponent(secondary)
primary = Button('Save', self)
horiz.addComponent(primary)
# Sign up / Sign in
horiz = HorizontalLayout()
horiz.setCaption('Sign up example:')
horiz.setSpacing(True)
horiz.setMargin(True)
self.addComponent(horiz)
primary = Button('Sign up', self)
primary.addStyleName('primary')
horiz.addComponent(primary)
secondary = Button('or Sign in', self)
secondary.setStyleName(BaseTheme.BUTTON_LINK)
horiz.addComponent(secondary)
horiz.setComponentAlignment(secondary, Alignment.MIDDLE_LEFT)
# Login / Forgot password?
vert = VerticalLayout()
vert.setCaption('Login example:')
vert.setSizeUndefined()
vert.setSpacing(True)
vert.setMargin(True)
self.addComponent(vert)
primary = Button('Login', self)
vert.addComponent(primary)
vert.setComponentAlignment(primary, Alignment.BOTTOM_RIGHT)
secondary = Button('Forgot your password?', self)
secondary.setStyleName(BaseTheme.BUTTON_LINK)
vert.addComponent(secondary)
vert.setComponentAlignment(secondary, Alignment.BOTTOM_RIGHT)
def __init__(self):
super(FormPojoExample, self).__init__()
self._person = Person() # a person POJO
personItem = BeanItem(self._person) # item from POJO
# Create the Form
personForm = Form()
personForm.setCaption('Personal details')
personForm.setWriteThrough(False) # we want explicit 'apply'
personForm.setInvalidCommitted(False) # no invalid values in datamodel
# FieldFactory for customizing the fields and adding validators
personForm.setFormFieldFactory(PersonFieldFactory(self))
personForm.setItemDataSource(personItem) # bind to POJO via BeanItem
# Determines which properties are shown, and in which order:
personForm.setVisibleItemProperties(['firstName', 'lastName',
'countryCode', 'password', 'birthdate', 'shoesize', 'uuid'])
# Add form to layout
self.addComponent(personForm)
# The cancel / apply buttons
buttons = HorizontalLayout()
buttons.setSpacing(True)
discardChanges = Button('Discard changes', DiscardListener(personForm))
discardChanges.setStyleName(BaseTheme.BUTTON_LINK)
buttons.addComponent(discardChanges)
buttons.setComponentAlignment(discardChanges, Alignment.MIDDLE_LEFT)
aply = Button('Apply', ApplyListener(personForm))
buttons.addComponent(aply)
personForm.getFooter().addComponent(buttons)
personForm.getFooter().setMargin(False, False, True, True)
# button for showing the internal state of the POJO
l = InternalStateListener(self)
showPojoState = Button('Show POJO internal state', l)
self.addComponent(showPojoState)
def __init__(self):
super(ProgressIndicatorsExample, self).__init__()
self.setSpacing(True)
self.addComponent(Label('<strong>Normal mode</strong> '
'Runs for 20 seconds', Label.CONTENT_XHTML))
hl = HorizontalLayout()
hl.setSpacing(True)
self.addComponent(hl)
# Add a normal progress indicator
self._pi1 = ProgressIndicator()
self._pi1.setIndeterminate(False)
self._pi1.setEnabled(False)
hl.addComponent(self._pi1)
hl.setComponentAlignment(self._pi1, Alignment.MIDDLE_LEFT)
self._startButton1 = Button('Start normal', NormalListener(self))
self._startButton1.setStyleName('small')
hl.addComponent(self._startButton1)
self.addComponent(Label('<strong>Indeterminate mode</strong> '
'Runs for 10 seconds', Label.CONTENT_XHTML))
hl = HorizontalLayout()
hl.setSpacing(True)
self.addComponent(hl)
# Add an indeterminate progress indicator
self._pi2 = ProgressIndicator()
self._pi2.setIndeterminate(True)
self._pi2.setPollingInterval(5000)
self._pi2.setEnabled(False)
hl.addComponent(self._pi2)
l = IndeterminateListener(self)
self._startButton2 = Button('Start indeterminate', l)
self._startButton2.setStyleName('small')
hl.addComponent(self._startButton2)
def createCoreHorizontal(self, recurse):
l = HorizontalLayout()
l.setSizeFull()
tf = TextField('Top')
l.addComponent(tf)
l.setComponentAlignment(tf, Alignment.TOP_LEFT)
tf = TextField('Middle')
l.addComponent(tf)
l.setComponentAlignment(tf, Alignment.MIDDLE_LEFT)
tf = TextField('Bottom')
l.addComponent(tf)
tf.setWidth('50%')
l.setComponentAlignment(tf, Alignment.BOTTOM_LEFT)
if recurse > 0:
recurse -= 1
createCoreVertical = self.createCoreVertical(recurse)
l.addComponent(createCoreVertical)
l.setExpandRatio(createCoreVertical, 1)
return l
def createCoreHorizontal(self, recurse):
l = HorizontalLayout()
l.setSizeFull()
tf = TextField('Top')
l.addComponent(tf)
l.setComponentAlignment(tf, Alignment.TOP_LEFT)
tf = TextField('Middle')
l.addComponent(tf)
l.setComponentAlignment(tf, Alignment.MIDDLE_LEFT)
tf = TextField('Bottom')
l.addComponent(tf)
tf.setWidth('50%')
l.setComponentAlignment(tf, Alignment.BOTTOM_LEFT)
if recurse > 0:
recurse -= 1
createCoreVertical = self.createCoreVertical(recurse)
l.addComponent(createCoreVertical)
l.setExpandRatio(createCoreVertical, 1)
return l
class TreeSingleSelectExample(HorizontalLayout, IValueChangeListener,
button.IClickListener, action.IHandler):
# Actions for the context menu
_ACTION_ADD = Action('Add child item')
_ACTION_DELETE = Action('Delete')
def __init__(self):
super(TreeSingleSelectExample, self).__init__()
self.setSpacing(True)
# Create the Tree,a dd to layout
self._tree = Tree('Hardware Inventory')
self.addComponent(self._tree)
# Contents from a (prefilled example) hierarchical container:
self._tree.setContainerDataSource(ExampleUtil.getHardwareContainer())
# Add Valuechangelistener and Actionhandler
self._tree.addListener(self, IValueChangeListener)
# Add actions (context menu)
self._tree.addActionHandler(self)
# Cause valueChange immediately when the user selects
self._tree.setImmediate(True)
# Set tree to show the 'name' property as caption for items
self._tree.setItemCaptionPropertyId(ExampleUtil.hw_PROPERTY_NAME)
self._tree.setItemCaptionMode(AbstractSelect.ITEM_CAPTION_MODE_PROPERTY)
# Expand whole tree
for idd in self._tree.rootItemIds():
self._tree.expandItemsRecursively(idd)
# Create the 'editor bar' (textfield and button in a horizontallayout)
self._editBar = HorizontalLayout()
self._editBar.setMargin(False, False, False, True)
self._editBar.setEnabled(False)
self.addComponent(self._editBar)
# textfield
self._editor = TextField('Item name')
self._editor.setImmediate(True)
self._editBar.addComponent(self._editor)
# apply-button
self._change = Button('Apply', self)#, 'buttonClick') FIXME: listener
self._editBar.addComponent(self._change)
self._editBar.setComponentAlignment(self._change, Alignment.BOTTOM_LEFT)
def valueChange(self, event):
if event.getProperty().getValue() is not None:
# If something is selected from the tree, get it's 'name' and
# insert it into the textfield
val = self._tree.getItem(
event.getProperty().getValue()).getItemProperty(
ExampleUtil.hw_PROPERTY_NAME)
self._editor.setValue(val)
self._editor.requestRepaint()
self._editBar.setEnabled(True)
else:
self._editor.setValue('')
self._editBar.setEnabled(False)
def buttonClick(self, event):
# If the edited value contains something, set it to be the item's new
# 'name' property
if not (self._editor.getValue() == ''):
item = self._tree.getItem(self._tree.getValue())
name = item.getItemProperty(ExampleUtil.hw_PROPERTY_NAME)
name.setValue(self._editor.getValue())
# Returns the set of available actions
def getActions(self, target, sender):
return [self._ACTION_ADD, self._ACTION_DELETE]
# Handle actions
def handleAction(self, a, sender, target):
if a == self._ACTION_ADD:
# Allow children for the target item, and expand it
self._tree.setChildrenAllowed(target, True)
self._tree.expandItem(target)
# Create new item, set parent, disallow children (= leaf node)
itemId = self._tree.addItem()
self._tree.setParent(itemId, target)
self._tree.setChildrenAllowed(itemId, False)
# Set the name for this item (we use it as item caption)
item = self._tree.getItem(itemId)
name = item.getItemProperty(ExampleUtil.hw_PROPERTY_NAME)
name.setValue('New Item')
elif a == self._ACTION_DELETE:
parent = self._tree.getParent(target)
self._tree.removeItem(target)
# If the deleted object's parent has no more children, set it's
# childrenallowed property to false (= leaf node)
if parent is not None and len(self._tree.getChildren(parent)) == 0:
self._tree.setChildrenAllowed(parent, False)
def __init__(self, app):
super(SamplerWindow, self).__init__()
self._app = app
self._currentList = FeatureGrid(self._app)
self._featureView = FeatureView()
self._currentFeature = ObjectProperty(None, Feature)
self._mainSplit = None
self._navigationTree = None
# self._webAnalytics = GoogleAnalytics('UA-658457-6', 'none')
# "backbutton"
self._uriFragmentUtility = UriFragmentUtility()
# breadcrumbs
self._breadcrumbs = BreadCrumbs(self)
self._previousSample = None
self._nextSample = None
self._search = None
self.theme = None
# Main top/expanded-bottom layout
mainExpand = VerticalLayout()
self.setContent(mainExpand)
self.setSizeFull()
mainExpand.setSizeFull()
self.setCaption(self._TITLE)
self.setTheme(self._app._currentApplicationTheme)
# topbar (navigation)
nav = HorizontalLayout()
mainExpand.addComponent(nav)
nav.setHeight('44px')
nav.setWidth('100%')
nav.setStyleName('topbar')
nav.setSpacing(True)
nav.setMargin(False, True, False, False)
# Upper left logo
logo = self.createLogo()
nav.addComponent(logo)
nav.setComponentAlignment(logo, Alignment.MIDDLE_LEFT)
# Breadcrumbs
nav.addComponent(self._breadcrumbs)
nav.setExpandRatio(self._breadcrumbs, 1)
nav.setComponentAlignment(self._breadcrumbs, Alignment.MIDDLE_LEFT)
# invisible analytics -component
# nav.addComponent(self._webAnalytics)
# "backbutton"
nav.addComponent(self._uriFragmentUtility)
self._uriFragmentUtility.addListener(UriListener(self),
IFragmentChangedListener)
# Main left/right split; hidden menu tree
self._mainSplit = HorizontalSplitPanel()
self._mainSplit.setSizeFull()
self._mainSplit.setStyleName('main-split')
mainExpand.addComponent(self._mainSplit)
mainExpand.setExpandRatio(self._mainSplit, 1)
# Select theme
themeSelect = self.createThemeSelect()
nav.addComponent(themeSelect)
nav.setComponentAlignment(themeSelect, Alignment.MIDDLE_LEFT)
# Layouts for top area buttons
quicknav = HorizontalLayout()
arrows = HorizontalLayout()
nav.addComponent(quicknav)
nav.addComponent(arrows)
nav.setComponentAlignment(quicknav, Alignment.MIDDLE_LEFT)
nav.setComponentAlignment(arrows, Alignment.MIDDLE_LEFT)
quicknav.setStyleName('segment')
arrows.setStyleName('segment')
# Previous sample
self._previousSample = self.createPrevButton()
arrows.addComponent(self._previousSample)
# Next sample
self._nextSample = self.createNextButton()
arrows.addComponent(self._nextSample)
# "Search" combobox
searchComponent = self.createSearch()
quicknav.addComponent(searchComponent)
# Menu tree, initially shown
menuLayout = CssLayout()
allSamples = ActiveLink('All Samples', ExternalResource('#'))
menuLayout.addComponent(allSamples)
self._navigationTree = self.createMenuTree()
menuLayout.addComponent(self._navigationTree)
self._mainSplit.setFirstComponent(menuLayout)
# Show / hide tree
treeSwitch = self.createTreeSwitch()
quicknav.addComponent(treeSwitch)
self.addListener(WindowCloseListener(self, self._app),
window.ICloseListener)
self.updateFeatureList(self._currentList)
def init(self):
# We'll build the whole UI here, since the application will not
# contain any logic. Otherwise it would be more practical to
# separate parts of the UI into different classes and methods.
# Main (browser) window, needed in all Muntjac applications
rootLayout = VerticalLayout()
root = Window('MuntjacTunes', rootLayout)
# We'll attach the window to the browser view already here, so
# we won't forget it later.
self.setMainWindow(root)
root.showNotification(('This is an example of how you can do layouts '
'in Muntjac.<br/>It is not a working sound player.'),
Notification.TYPE_HUMANIZED_MESSAGE)
# Our root window contains one VerticalLayout, let's make
# sure it's 100% sized, and remove unwanted margins
rootLayout.setSizeFull()
rootLayout.setMargin(False)
# Top area, containing playback and volume controls, play status,
# view modes and search
top = HorizontalLayout()
top.setWidth('100%')
top.setMargin(False, True, False, True) # Enable horizontal margins
top.setSpacing(True)
# Let's attach that one straight away too
root.addComponent(top)
# Create the placeholders for all the components in the top area
playback = HorizontalLayout()
volume = HorizontalLayout()
status = HorizontalLayout()
viewmodes = HorizontalLayout()
search = ComboBox()
# Add the components and align them properly
top.addComponent(playback)
top.addComponent(volume)
top.addComponent(status)
top.addComponent(viewmodes)
top.addComponent(search)
top.setComponentAlignment(playback, Alignment.MIDDLE_LEFT)
top.setComponentAlignment(volume, Alignment.MIDDLE_LEFT)
top.setComponentAlignment(status, Alignment.MIDDLE_CENTER)
top.setComponentAlignment(viewmodes, Alignment.MIDDLE_LEFT)
top.setComponentAlignment(search, Alignment.MIDDLE_LEFT)
# We want our status area to expand if the user resizes the root
# window, and we want it to accommodate as much space as there is
# available. All other components in the top layout should stay fixed
# sized, so we don't need to specify any expand ratios for them (they
# will automatically revert to zero after the following line).
top.setExpandRatio(status, 1.0)
# Playback controls
prev = NativeButton('Previous')
play = NativeButton('Play/pause')
nextt = NativeButton('Next')
playback.addComponent(prev)
playback.addComponent(play)
playback.addComponent(nextt)
# Set spacing between the buttons
playback.setSpacing(True)
# Volume controls
mute = NativeButton('mute')
vol = Slider()
vol.setOrientation(Slider.ORIENTATION_HORIZONTAL)
vol.setWidth('100px')
maxx = NativeButton('max')
volume.addComponent(mute)
volume.addComponent(vol)
volume.addComponent(maxx)
# Status area
status.setWidth('80%')
status.setSpacing(True)
toggleVisualization = NativeButton('Mode')
timeFromStart = Label('0:00')
# We'll need another layout to show currently playing track and
# progress
trackDetails = VerticalLayout()
trackDetails.setWidth('100%')
track = Label('Track Name')
album = Label('Album Name - Artist')
track.setWidth(None)
album.setWidth(None)
progress = Slider()
progress.setOrientation(Slider.ORIENTATION_HORIZONTAL)
progress.setWidth('100%')
trackDetails.addComponent(track)
trackDetails.addComponent(album)
trackDetails.addComponent(progress)
trackDetails.setComponentAlignment(track, Alignment.TOP_CENTER)
trackDetails.setComponentAlignment(album, Alignment.TOP_CENTER)
timeToEnd = Label('-4:46')
jumpToTrack = NativeButton('Show')
# Place all components to the status layout and align them properly
status.addComponent(toggleVisualization)
status.setComponentAlignment(toggleVisualization,
Alignment.MIDDLE_LEFT)
status.addComponent(timeFromStart)
status.setComponentAlignment(timeFromStart, Alignment.BOTTOM_LEFT)
status.addComponent(trackDetails)
status.addComponent(timeToEnd)
status.setComponentAlignment(timeToEnd, Alignment.BOTTOM_LEFT)
status.addComponent(jumpToTrack)
status.setComponentAlignment(jumpToTrack, Alignment.MIDDLE_LEFT)
# Then remember to specify the expand ratio
status.setExpandRatio(trackDetails, 1.0)
# View mode buttons
viewAsTable = NativeButton('Table')
viewAsGrid = NativeButton('Grid')
coverflow = NativeButton('Coverflow')
viewmodes.addComponent(viewAsTable)
viewmodes.addComponent(viewAsGrid)
viewmodes.addComponent(coverflow)
# That covers the top bar. Now let's move on to the sidebar
# and track listing
# We'll need one splitpanel to separate the sidebar and track listing
bottom = HorizontalSplitPanel()
root.addComponent(bottom)
# The splitpanel is by default 100% x 100%, but we'll need to
# adjust our main window layout to accommodate the height
root.getContent().setExpandRatio(bottom, 1.0)
# Give the sidebar less space than the listing
bottom.setSplitPosition(200, ISizeable.UNITS_PIXELS)
# Let's add some content to the sidebar
# First, we need a layout to but all components in
sidebar = VerticalLayout()
sidebar.setSizeFull()
bottom.setFirstComponent(sidebar)
# Then we need some labels and buttons, and an album cover image The
# labels and buttons go into their own vertical layout, since we want
# the 'sidebar' layout to be expanding (cover image in the bottom).
# VerticalLayout is by default 100% wide.
selections = VerticalLayout()
library = Label('Library')
music = NativeButton('Music')
music.setWidth('100%')
store = Label('Store')
muntjacTunesStore = NativeButton('MuntjacTunes Store')
muntjacTunesStore.setWidth('100%')
purchased = NativeButton('Purchased')
purchased.setWidth('100%')
playlists = Label('Playlists')
genius = NativeButton('Geniues')
genius.setWidth('100%')
recent = NativeButton('Recently Added')
recent.setWidth('100%')
# Lets add them to the 'selections' layout
selections.addComponent(library)
selections.addComponent(music)
selections.addComponent(store)
selections.addComponent(muntjacTunesStore)
selections.addComponent(purchased)
selections.addComponent(playlists)
selections.addComponent(genius)
selections.addComponent(recent)
# Then add the selections to the sidebar, and set it expanding
sidebar.addComponent(selections)
sidebar.setExpandRatio(selections, 1.0)
# Then comes the cover artwork (we'll add the actual image in the
# themeing section)
cover = Embedded('Currently Playing')
sidebar.addComponent(cover)
# And lastly, we need the track listing table It should fill the whole
# left side of our bottom layout
listing = Table()
listing.setSizeFull()
listing.setSelectable(True)
bottom.setSecondComponent(listing)
# Add the table headers
listing.addContainerProperty('Name', str, '')
listing.addContainerProperty('Time', str, '0:00')
listing.addContainerProperty('Artist', str, '')
listing.addContainerProperty('Album', str, '')
listing.addContainerProperty('Genre', str, '')
listing.addContainerProperty('Rating', NativeSelect, NativeSelect())
# Lets populate the table with random data
tracks = ['Red Flag', 'Millstone', 'Not The Sun', 'Breath',
'Here We Are', 'Deep Heaven', 'Her Voice Resides',
'Natural Tan', 'End It All', 'Kings', 'Daylight Slaving',
'Mad Man', 'Resolve', 'Teargas', 'African Air', 'Passing Bird']
times = ['4:12', '6:03', '5:43', '4:32', '3:42', '4:45', '2:56',
'9:34', '2:10', '3:44', '5:49', '6:30', '5:18', '7:42',
'3:13', '2:52']
artists = ['Billy Talent', 'Brand New', 'Breaking Benjamin',
'Becoming The Archetype', 'Bullet For My Valentine',
'Chasing Victory', 'Chimaira', 'Danko Jones', 'Deadlock',
'Deftones', 'From Autumn To Ashes', 'Haste The Day',
'Four Year Strong', 'In Flames', 'Kemopetrol', 'John Legend']
albums = ['Once Again', 'The Caitiff Choir', 'The Devil And God',
'Light Grenades', 'Dicthonomy', 'Back In Black', 'Dreamer',
'Come Clarity', 'Year Zero', 'Frames', 'Fortress', 'Phobia',
'The Poison', 'Manifesto', 'White Pony', 'The Big Dirty']
genres = ['Rock', 'Metal', 'Hardcore', 'Indie', 'Pop', 'Alternative',
'Blues', 'Jazz', 'Hip Hop', 'Electronica', 'Punk', 'Hard Rock',
'Dance', 'R\'n\'B', 'Gospel', 'Country']
for i in range(100):
s = NativeSelect()
s.addItem('1 star')
s.addItem('2 stars')
s.addItem('3 stars')
s.addItem('4 stars')
s.addItem('5 stars')
s.select('%d stars' % (i % 5))
index = i % 16
listing.addItem([tracks[index], times[index],
artists[index], albums[index], genres[index], s], i)
# We'll align the track time column to right as well
listing.setColumnAlignment('Time', Table.ALIGN_RIGHT)
# TODO: the footer
# Now what's left to do? Themeing of course.
self.setTheme('vaadintunes')
# Let's give a namespace to our application window. This way, if
# someone uses the same theme for different applications, we don't
# get unwanted style conflicts.
root.setStyleName('tTunes')
top.setStyleName('top')
top.setHeight('75px') # Same as the background image height
playback.setStyleName('playback')
playback.setMargin(False, True, False, False) # Add right-side margin
play.setStyleName('play')
nextt.setStyleName('next')
prev.setStyleName('prev')
playback.setComponentAlignment(prev, Alignment.MIDDLE_LEFT)
playback.setComponentAlignment(nextt, Alignment.MIDDLE_LEFT)
volume.setStyleName('volume')
mute.setStyleName('mute')
maxx.setStyleName('max')
vol.setWidth('78px')
status.setStyleName('status')
status.setMargin(True)
status.setHeight('46px') # Height of the background image
toggleVisualization.setStyleName('toggle-vis')
jumpToTrack.setStyleName('jump')
viewAsTable.setStyleName('viewmode-table')
viewAsGrid.setStyleName('viewmode-grid')
coverflow.setStyleName('viewmode-coverflow')
sidebar.setStyleName('sidebar')
music.setStyleName('selected')
cover.setSource(ThemeResource('images/album-cover.jpg'))
# Because this is an image, it will retain it's aspect ratio
cover.setWidth('100%')
def __init__(self):
super(SplitPanelPositioningExample, self).__init__()
self.setStyleName('split-panel-positioning-example')
self.setSpacing(True)
controls = HorizontalLayout()
controls.setSpacing(True)
self.addComponent(controls)
self._verticalSplitPanel = VerticalSplitPanel()
self._verticalSplitPanel.setSplitPosition(100, ISizeable.UNITS_PIXELS)
self._verticalSplitPanel.setLocked(True)
self._verticalSplitPanel.setHeight('450px')
self._verticalSplitPanel.setWidth('100%')
self.addComponent(self._verticalSplitPanel)
# Add some content to the top
topArea = Label()
topArea.setStyleName('top-area')
topArea.addStyleName('measured-from-top')
topArea.setSizeFull()
self._verticalSplitPanel.addComponent(topArea)
# Add a horizontal split panel in the bottom area
self._horizontalSplitPanel = HorizontalSplitPanel()
self._horizontalSplitPanel.setSplitPosition(30,
ISizeable.UNITS_PERCENTAGE)
self._horizontalSplitPanel.setSizeFull()
self._horizontalSplitPanel.setLocked(True)
self._verticalSplitPanel.addComponent(self._horizontalSplitPanel)
# Add some content to the left and right sides of the vertical layout
leftArea = Label()
leftArea.setStyleName('left-area')
leftArea.addStyleName('measured-from-left')
leftArea.setSizeFull()
self._horizontalSplitPanel.addComponent(leftArea)
rightArea = Label()
rightArea.setStyleName('right-area')
rightArea.setSizeFull()
self._horizontalSplitPanel.addComponent(rightArea)
# Allow user to set the splitter positioning
self._measurePositionFromLeft = OptionGroup('Horizontal split position',
['30% from left', '30% from right'])
self._measurePositionFromLeft.setValue('30% from left')
self._measurePositionFromLeft.setImmediate(True)
l = LeftRightListener(self, leftArea, rightArea)
self._measurePositionFromLeft.addListener(l, IValueChangeListener)
controls.addComponent(self._measurePositionFromLeft)
controls.setComponentAlignment(self._measurePositionFromLeft,
Alignment.MIDDLE_CENTER)
self._measurePositionFromTop = OptionGroup('Vertical split position',
['100px from top', '100px from bottom'])
self._measurePositionFromTop.setValue('100px from top')
self._measurePositionFromTop.setImmediate(True)
l = TopBottomListener(self, leftArea, rightArea, topArea)
self._measurePositionFromTop.addListener(l, IValueChangeListener)
controls.addComponent(self._measurePositionFromTop)
controls.setComponentAlignment(self._measurePositionFromTop,
Alignment.MIDDLE_CENTER)
class TreeSingleSelectExample(HorizontalLayout, IValueChangeListener,
button.IClickListener, action.IHandler):
# Actions for the context menu
_ACTION_ADD = Action('Add child item')
_ACTION_DELETE = Action('Delete')
def __init__(self):
super(TreeSingleSelectExample, self).__init__()
self.setSpacing(True)
# Create the Tree,a dd to layout
self._tree = Tree('Hardware Inventory')
self.addComponent(self._tree)
# Contents from a (prefilled example) hierarchical container:
self._tree.setContainerDataSource(ExampleUtil.getHardwareContainer())
# Add Valuechangelistener and Actionhandler
self._tree.addListener(self, IValueChangeListener)
# Add actions (context menu)
self._tree.addActionHandler(self)
# Cause valueChange immediately when the user selects
self._tree.setImmediate(True)
# Set tree to show the 'name' property as caption for items
self._tree.setItemCaptionPropertyId(ExampleUtil.hw_PROPERTY_NAME)
self._tree.setItemCaptionMode(
AbstractSelect.ITEM_CAPTION_MODE_PROPERTY)
# Expand whole tree
for idd in self._tree.rootItemIds():
self._tree.expandItemsRecursively(idd)
# Create the 'editor bar' (textfield and button in a horizontallayout)
self._editBar = HorizontalLayout()
self._editBar.setMargin(False, False, False, True)
self._editBar.setEnabled(False)
self.addComponent(self._editBar)
# textfield
self._editor = TextField('Item name')
self._editor.setImmediate(True)
self._editBar.addComponent(self._editor)
# apply-button
self._change = Button('Apply', self) #, 'buttonClick') FIXME: listener
self._editBar.addComponent(self._change)
self._editBar.setComponentAlignment(self._change,
Alignment.BOTTOM_LEFT)
def valueChange(self, event):
if event.getProperty().getValue() is not None:
# If something is selected from the tree, get it's 'name' and
# insert it into the textfield
val = self._tree.getItem(
event.getProperty().getValue()).getItemProperty(
ExampleUtil.hw_PROPERTY_NAME)
self._editor.setValue(val)
self._editor.requestRepaint()
self._editBar.setEnabled(True)
else:
self._editor.setValue('')
self._editBar.setEnabled(False)
def buttonClick(self, event):
# If the edited value contains something, set it to be the item's new
# 'name' property
if not (self._editor.getValue() == ''):
item = self._tree.getItem(self._tree.getValue())
name = item.getItemProperty(ExampleUtil.hw_PROPERTY_NAME)
name.setValue(self._editor.getValue())
# Returns the set of available actions
def getActions(self, target, sender):
return [self._ACTION_ADD, self._ACTION_DELETE]
# Handle actions
def handleAction(self, a, sender, target):
if a == self._ACTION_ADD:
# Allow children for the target item, and expand it
self._tree.setChildrenAllowed(target, True)
self._tree.expandItem(target)
# Create new item, set parent, disallow children (= leaf node)
itemId = self._tree.addItem()
self._tree.setParent(itemId, target)
self._tree.setChildrenAllowed(itemId, False)
# Set the name for this item (we use it as item caption)
item = self._tree.getItem(itemId)
name = item.getItemProperty(ExampleUtil.hw_PROPERTY_NAME)
name.setValue('New Item')
elif a == self._ACTION_DELETE:
parent = self._tree.getParent(target)
self._tree.removeItem(target)
# If the deleted object's parent has no more children, set it's
# childrenallowed property to false (= leaf node)
if parent is not None and len(self._tree.getChildren(parent)) == 0:
self._tree.setChildrenAllowed(parent, False)
def __init__(self, app):
super(SamplerWindow, self).__init__()
self._app = app
self._currentList = FeatureGrid(self._app)
self._featureView = FeatureView()
self._currentFeature = ObjectProperty(None, Feature)
self._mainSplit = None
self._navigationTree = None
# self._webAnalytics = GoogleAnalytics('UA-658457-6', 'none')
# "backbutton"
self._uriFragmentUtility = UriFragmentUtility()
# breadcrumbs
self._breadcrumbs = BreadCrumbs(self)
self._previousSample = None
self._nextSample = None
self._search = None
self.theme = None
# Main top/expanded-bottom layout
mainExpand = VerticalLayout()
self.setContent(mainExpand)
self.setSizeFull()
mainExpand.setSizeFull()
self.setCaption(self._TITLE)
self.setTheme(self._app._currentApplicationTheme)
# topbar (navigation)
nav = HorizontalLayout()
mainExpand.addComponent(nav)
nav.setHeight('44px')
nav.setWidth('100%')
nav.setStyleName('topbar')
nav.setSpacing(True)
nav.setMargin(False, True, False, False)
# Upper left logo
logo = self.createLogo()
nav.addComponent(logo)
nav.setComponentAlignment(logo, Alignment.MIDDLE_LEFT)
# Breadcrumbs
nav.addComponent(self._breadcrumbs)
nav.setExpandRatio(self._breadcrumbs, 1)
nav.setComponentAlignment(self._breadcrumbs, Alignment.MIDDLE_LEFT)
# invisible analytics -component
# nav.addComponent(self._webAnalytics)
# "backbutton"
nav.addComponent(self._uriFragmentUtility)
self._uriFragmentUtility.addListener(UriListener(self),
IFragmentChangedListener)
# Main left/right split; hidden menu tree
self._mainSplit = HorizontalSplitPanel()
self._mainSplit.setSizeFull()
self._mainSplit.setStyleName('main-split')
mainExpand.addComponent(self._mainSplit)
mainExpand.setExpandRatio(self._mainSplit, 1)
# Select theme
themeSelect = self.createThemeSelect()
nav.addComponent(themeSelect)
nav.setComponentAlignment(themeSelect, Alignment.MIDDLE_LEFT)
# Layouts for top area buttons
quicknav = HorizontalLayout()
arrows = HorizontalLayout()
nav.addComponent(quicknav)
nav.addComponent(arrows)
nav.setComponentAlignment(quicknav, Alignment.MIDDLE_LEFT)
nav.setComponentAlignment(arrows, Alignment.MIDDLE_LEFT)
quicknav.setStyleName('segment')
arrows.setStyleName('segment')
# Previous sample
self._previousSample = self.createPrevButton()
arrows.addComponent(self._previousSample)
# Next sample
self._nextSample = self.createNextButton()
arrows.addComponent(self._nextSample)
# "Search" combobox
searchComponent = self.createSearch()
quicknav.addComponent(searchComponent)
# Menu tree, initially shown
menuLayout = CssLayout()
allSamples = ActiveLink('All Samples', ExternalResource('#'))
menuLayout.addComponent(allSamples)
self._navigationTree = self.createMenuTree()
menuLayout.addComponent(self._navigationTree)
self._mainSplit.setFirstComponent(menuLayout)
# Show / hide tree
treeSwitch = self.createTreeSwitch()
quicknav.addComponent(treeSwitch)
self.addListener(WindowCloseListener(self, self._app),
window.ICloseListener)
self.updateFeatureList(self._currentList)
