How can I add a button at the end of a listView? - winjs

Iwould like to add a button at the end of a listView in the same way as the bing apps do (see picture for example).
I looked for hours in google and in the microsoft documentation but canøt find anything that can give me an idea of how to do this.
Did anyone achieved this?
thanks

If you run that app (Health & Fitness), then run Visual Studio and use Debug > Attach to Process, you can open the DOM Explorer and examine how that UI is implemented.
What you'll see in this case is that it's not using a ListView at all, but rather it's own custom control that's just based on a CSS grid. That is, just because there's a grid-like view doesn't mean it's a ListView. You can always use straight HTML/CSS layout to achieve these sorts of things, which is all that's happening here. As such, it just makes separate div's for those two "More" elements.
Now if you do want to use a ListView, there are a few things you can do. First of all, if you want to render any item in a ListView differently than others, you have to make sure to use a different template. What this means is that you use an item rendering function rather than a declarative template, which then enables you to examine the item data and programmatically decide what kind of rendering to perform.
Second, if you want to have items of different sizes, then you need to use cell spanning. In Windows 8.0/WinJS 1.0 this is a property of the GridLayout. In Windows 8.1/WinJS 2.0 you instead use the CellSpanningLayout.
I have all the details for both rending functions and cell spanning written up in Chapter 7 of my second edition preview of Programming Windows Store Apps with HTML, CSS, and JavaScript, which is a free ebook from Microsoft Press so it doesn't cost you anything. :)

Related

How to add menu items for a single-page web part?

Is it possible to have menu items added for a single-page web part in the menu bar? I want to add a menu to the area usually used for menu commands (please see the screenshot):
I am talking about this sort of single-page app web part: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages
My question is, it possible to put some items in the designed area, and if yes, how?
I have tried to do it with command set extension (and ECB). The commands are coming for a normal list, but for a single page web part, they are not.
Talking about options, could it be an acceptable to "attach" a component like fabric CommandBar to this area (i.e. find it in HTML and attach), or maybe there is a standard way to do that (like, designated placeholders)
Got the answer here:
https://github.com/SharePoint/sp-dev-docs/issues/6014
It is not possible right now.

Windows Explorer Navigation Bar in PyQt

What's the best approach to mimic the Windows Explorer navigation bar in PyQt?. Perhaps a list of QComboBoxes as part of a parent class that concatenates the current item of each combo box to resolve the final path?
Is it possible to get a similar look by using stylesheets?
This is the object I need to mimic. I just want a theoretical approach about the best way to mimic it.
Thanks in advance
This is technically known as a breadcrumb widget.
There are multiple approaches to this. The closest emulation to Windows Explorer's behavior--leaving out the normally hidden line editor--involves a chain of widgets like so:
A top level parent QWidget-derived class with your implementation, which would have:
A QHBoxLayout
An arbitrary number of QComboBoxes
A QFileSystemModel from which to populate the combo boxes.
Alternatives
You could use a single QLabels with a series of hyperlinks divided by path separators if you don't care about drop-down behavior. Qt Creator does this.
If your data source is static and not as gigantic as the filesystem, you could use QToolButtons backed by a tree of QAction/QMenus. This is possibly a masochistic approach, given that you have to populate all of the actions and menus. Since that's what they are there for, though, it might be handy as part of a context-sensitive menubar or tab bar.
I was looking for such a widget too without any luck. So I've tried to implement this by myself. It's not finished yet and needs some more work, but here's the first result: breadcrumbsaddressbar.
It's based on QToolButton widgets with menu. Parts of address which don't fit are hidden like in Windows Explorer. Also the widget has auto-completion feature.
Update: there's also a C++ widget QtAddressBar which I have't tried.

windows 10 UWP UI design for mobile device

I am working on windows 10 mobile app. If I design an UI for 5' device, it doesn't look good on 5.2' device. Also on emulators of different screen size show messed up UI. Is there any work around this? Or do I have to design it for every screen size?
Usually, please avoid to have fixed Width/Height for your controls. With a Grid layout, you can set columns/rows and place your controls inside each cells. This is a first level to adapt properly your interface. In addition, UWP provides AdaptiveTriggers if you want to adapt the layout based on the screen resolution (cf. https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10/07) for additional information. Last but not least, please check Design&UI documention on https://developer.microsoft.com/en-us/windows/design.
The trick is with UWP that you can design for every screensize at once. It's just a responsive design you use (either HTML/CSS or XAML). But you have to use the right controls and settings.
Some guidance on how to design for various sizes can be found at the MSDN design page.
To create a dynamic layout with XAML, see this article. There are various panel-types you can use to do the layout (see this article). But if you really want to build a responsive UI (or change it dramatically in various sizes) RelativePanel is your friend.

How to make grid view in j2me

I am very new in j2me. I want to design following type layout and components.
Mean I want to arrange my items in gridview. And after clicking on each item I will move to another form.
I am using simple lcdui. Please suggest me how can I do this. Means how can I arrange these items in gridview and what items should I use here buttons or something else.
You may provide me some suitable links.
In J2ME you have two options for UI: Form and Canvas.
Forms are a very simple way to display information without dealing with the graphical side of things, where Canvas is a blank screen and you need to draw the objects and their behaviors.
There is a third way: the guys at Sun has created a framework called (LWUIT which stands for Light Weight UI Toolkit). This toolkit provides the simplicity of Forms and the UI control of Canvas.
Hope i helped.

Building Nav Bars with rollovers in DreamWeaver CS3

I'm working with Dreamweaver CS3. The question here is what part of the code (listed below) do I need to replicate to have my secondary nav bar utilize the on-click action?
FYI...DW has two menu options or auto insert items...one for roll over images and one for "navbar". DW will only allow you to use the 'navbar' item once per page
the nav bar option builds all the rollover actions for you (listed below)
the "rollover" option ONLY builds normal and over, but no click
I guess I really have two questions...the first is what part of the code do I need to insert manually, the second is what does the "MM_nbGroup" code mean?
"../photogallery.html" target="_top" onClick="MM_nbGroup('down','group1','photoMainNav','../images/buttons/photography_down.gif',1)"
onMouseOver="MM_nbGroup('over','photoMainNav','../images/buttons/photography_over.gif','../images/buttons/photography_over.gif',1)" onMouseOut="MM_nbGroup('out')"><img src="../images/buttons/photography.gif"
Thanks for any help on this in advance!
For anyone wondering the same thing, here's what I've found so far...
The 'insert' bar provided in DWCS3 doesn't allow for two 'inserted' menu bars on one page. However, the 'Behaviors' palette will allow you to add effective roll-overs with the "Set Nav Bar Image" option. Unfortunately (as far as I can tell) DWCS3 is not as smart as Adobe's GoLive was, in that it won't automatically fill in the appropriate items if you name your files correctly. Even still, you should name your images accordingly (xxx_over, xxx_down, etc) to keep it straight in your own head.
As for the MM_nbGroup question, best I can tell this is WYSIWYG code that ships with DWCS3 (the kind of stuff that really mifs some of you developers, sorry guys), as it names items by group # and doesn't seem to have any real relevance in the lexicon of html. I could be mistaken on this however, and am open to enlightenment on the topic if anyone can offer.

Resources