I'm writing a codenameone application where I want to have an image displayed across the top of the screen as a header. I do not want to include this image in every form/container that I create so therefore I came up with the following solution:
I have a Main form which contains the image (North) and a container (Center) which will then hold all the components of the specific screen that I want to show.
I will then create containers that represent each individual screen. My idea was to add these containers to the container of the main form, one by one and that navigation between them would be handled by changing the contents of that main screen container.
But I cannot find out how to make this work. As long as I have one single screen to show it is easy... The main form container can be an embedded container that is set to show the container for the single screen. But when I try to navigate to another I cannot make it work.
So, is there another approach I should use?
If not, how should I handle navigation between screens?
Is this with a GUI builder app or with a handcoded app?
Either way a simple way of customizing this if your app has a side menu or Toolbar would be to customize the TitleArea UIID to include your background image. E.g. start with a modern theme like the Business Theme and in the designer theme change the title area border property to be "Empty".
Then define the background image to be the image you want with "scaled to fit" or "aligned bottom" depending on what you want. Make sure to include enough space in the image for the title are and use a multi image so it will adapt for other OS's.
Related
I am new to cross platform development using Xamarin and currently I'm into the "trial and error"-phase.
I want to create my own drawer menu, that goes from bottom and upwards on slide. The menu will have different stop stages since the buttons (navigations) will be grouped by some logical things such as "Favorites", "Frequently used" etc. where each row (group) will contain the buttons.
Is it possible to create a "master page" with a header and also the footer which is the drawer?
I stumbled upon the ControlTemplate, however to me that only seem to be a master layout that can be used in pages to get the same look-and-feel without redundant style coding. As per Xamarin documentation
Control templates provide a clean separation between the appearance of a page and its content, enabling the creation of pages that can easily be themed.
But I need to add some behavior to it such as the sliding animation etc. and I would really not like to add a container in each xaml-file that I place the drawer menu in within each xaml.cs file.
Is there a good way of achieving something like this?
All help is appreciated.
The Slide Over Kit may help. It is a free plug in that allows you to create slide in panels from any direction.
https://github.com/XAM-Consulting/SlideOverKit
I want to create an application and chatting is involved. I am currently struggling to format existing controls or to create a control with the following conditions:
a container is docked to the main form's bottom
inside of that container, a button can be used to toggle a chat
component (e.g. text edit) to become either visible or invisible
if visible, the chat component is aligned with the button that was
pressed but does not force a resize on the container of the button
So basically I want to achieve a facebook or google hangouts like chat layout in vb.net that can also scale dynamically according to the current window size. Nevertheless it should always stick to the bottom.
Please keep in mind that this question is not about making the chat work but only the layout/design problem I am facing.
My current approach is the following:
FlowLayoutPanel docked to bottom with buttons
RichEdit as placeholders to simulate the chat component
My current layout
Is there an easier way to do what I want to do?
Set the anchors to the bottom of the page/panel.
On the designer, click the control you want to edit, find the Anchor property and change it to bottom (and left/right/top, whatever you'd like).
How do I get the new toolbar item style of OSX Yosemite?
I created a standard toolbar, but the buttons don't have that button-like look. Do I need to drag actual buttons to the toolbar to get this look?
What I have:
What I want (that round bezel and white background):
There are two types of items in toolbars, image items and view items. It looks like you have an image item. You seem to want a view item where the view is an NSButton configured as a round textured button. So, yes, you should drag actual buttons to the toolbar.
I would not attempt to control the button background. You should use the button as-is to get the default system appearance. Apple recommends using a PDF template image (all black with the alpha channel used to make the image). The button itself would not have a title/label. Rather that would be on the containing toolbar item.
It looks like you may have applied an internal blue "glow" or highlight to your image. Generally, you should not do that. Let the frameworks apply appropriate effects to the template image automatically based on the button state and shows-state-by mode.
Toolbars in the Human Interface Guidelines
Controls which are appropriate to use in the window frame (including the toolbar)
Designing images for toolbar buttons
Works just fine for my Cocoa app under Yosemite -
are you actually setting the template property for your icon images..?
From the NSImage docs:
The 'template' property is metadata that allows clients to be smarter
about image processing. An image should be marked as a template if it
is basic glpyh-like black and white art that is intended to be
processed into derived images for use on screen.
Is there a way to have a fixed non animated header in a sencha app and still retain page animation and browsing history?
I need my header to not animate on a page slide. The way i tried it is:
-main container (v box)
--header container
--card container(card layout)
---card
---card2
---card3
Etc
And I manually switch the cards inside the card container with setActiveItem(index)
The header is never animated in/out but I dont have history now so the only way to have a back button is manually hard coding it with setActiveItwm(prevIndex)
Its an unfortunate and dirty solution maybe somebody else has a better one.
Yes I achieved it using sencha architect to test. From memory I created a base container that had layout vbox. Inside that I had a top tabpanel and under that a tabpanel. I then set the flex on the top panel to 0.2 and the tabpanel to 0.8. That way my header will always be 20% height on any device. I hope this helps.
You require Ext.navigation.View
Use Ext.navigation.View and create basic navigation between views...then hide the navigation view you can do that by making the navigationBar property as hidden:true
Next have a common navigation header as you have mentioned above...
Going forward using a button lets say would be by using
button.up('navigationview').push({xtype: 'card2'});
This button will be somewhere in your card which takes you to next card
Similarly for going back on button click
button.up('navigationview').pop();
button.up('navigationview').pop(2);//Will take you two views back and so on
These buttons will be on your common header
I'm working on a iPhone app which shows an mobile webform in a UIWebView. I'm using a default iOS layout with a navigation and tab bar.
The mobile webform is displayed in a UIWebView in the white area. Since the webform has a lot of input fields, we really need as must space for it as possible. Because of this, we are planing to remove the tabs in the bottom. Over time, there will be more tabs/sections, so it is not a solution to just add a button for each section in the left side of the navigation bar. On a iPad a popover could easily be used to handle this.
Is there a standard iOS layout mechanism to handle this change of sections/views without using tabs?
You could do something long the lines of Path or the new Facebook app and have the "table of contents" behind the Navbar and the navbar slides away (along with the child view) to reveal it. When done right (ie smoothly) I think the effect is really cool.
This would also work great as you add more and more options, since the table could just scroll.
Here is a framework that might be you started: http://www.cocoacontrols.com/platforms/ios/controls/iiviewdeckcontroller
I would consider replacing the navigation bar's title with a control that lets you switch between tabs. You can assign the bar's titleView property to a control or a button and it will generally do the right thing.
If you're limited to 2-3 tabs, you could simply use a UISegmentedControl.
If you want more, you could use a button which, when tapped, pops up a view that allows you to select the view you want. This could be a modal table view, or you could slide up a UIPickerView from the bottom of the screen, similar to the keyboard.
I use this technique in an app of my own, screenshots here. Tapping the button cycles between views (in this case, I'm changing the contents of the table cells); tap-and-hold slides up a picker.
Another possibility would be to arrange your different forms on pages in a scroll view with a page control at the bottom, à la Weather. The best option, though, if you’re going to have a particularly long list and want to keep your screen real estate, is probably the FB/Path-style sidebar table.
I ended up using a UIActionSheet but I think it in other situations would be more stylish to use a controller like the IIViewDeckController.