i created a dojo tabbar programmatically and set the fixed:"bottom" attribute but the tabbar is created below the existing document and not fixed at the bottom of the window. After i have done a performeTransition to another view its fixed at bottom correctly.
i did it like this:
function createTabbar() {
var tabBar = new dojox.mobile.TabBar({id:"tabContainer", barType : "tabBar", fixed: "bottom"}).placeAt(dijit.byId("mobileView"));
var tabBarButtonNodes = new dojox.mobile.TabBarButton({label:"Knoten", id:"tabBarButtonNodes", moveTo:"divNodes0", icon1 : "img/nodes_60.png", icon2 : "img/nodes_60.png"}).placeAt(tabBar.domNode);
var tabBarButtonInfo = new dojox.mobile.TabBarButton({label:"Info", id:"tabBarButtonInfo", moveTo:"divInfo", icon1 : "img/info_60.png", icon2 : "img/info_60.png"}).placeAt(tabBar.domNode);
var tabBarButtonLogin = new dojox.mobile.TabBarButton({label:"Login", id:"tabBarButtonLogin", moveTo:"divLogin", icon1 : "img/login_60.png", icon2 : "img/login_60.png"}).placeAt(tabBar.domNode);
var teest = dijit.byId("divInfo");
tabBar.resize();
}
do i have to resize anything else?
As documented, the "fixed" flag matters for dojox/mobile/ScrollableView only. There are two cases: a header/footer at the level of the entire application, and locally at the level of a given ScrollableView. You can find details here:
local view header/footer: https://dojotoolkit.org/reference-guide/1.9/dojox/mobile/ScrollableView.html#view-header-footer-bar-example
global application header/footer: https://dojotoolkit.org/reference-guide/1.9/dojox/mobile/ScrollableView.html#application-header-footer-bar-example
For the local case, you can add the fixed bar using the method ScrollableView.addFixedBar. For an example, see dojox/mobile/tests/test_dynamic-ScrollableView-vh-vf.html.
Hope this helps,
Adrian
Related
I have an Image in a grid where I display some custom content by setting the Image's source to a WritableBitmap and updating the bitmap. What I want to do is to implement a "detach" button that will put my Image on a separate window allowing the user to move it to a different screen, resize it etc. independent of my main app window. If the new window is closed, I would like to bring it back to its original spot. While the Image is on the new window, I want to continuously update it with new content via updating source bitmap (as it would have been before it was detached).
I initially thought I would be able to create a new window and "move" my Image control there by first removing it from its original parent then adding it as a child to a layout in the new window. I used the code below:
CoreApplicationView^ newCoreView = CoreApplication::CreateNewView();
int mainViewId = Windows::UI::ViewManagement::ApplicationView::GetApplicationViewIdForWindow(
CoreApplication::MainView->CoreWindow);
uint indexOfObjectToDetach = -1;
bool found = originalGrid->Children->IndexOf(imageToMove, &indexOfObjectToDetach);
if(found)
{
myGrid->Children->RemoveAt(indexOfObjectToDetach);
}
DispatchedHandler^ dispatchHandler = ref new DispatchedHandler([this, mainViewId]()
{
newView_ = Windows::UI::ViewManagement::ApplicationView::GetForCurrentView();
Windows::UI::Xaml::Controls::StackPanel^ newWindowGrid = ref new Windows::UI::Xaml::Controls::StackPanel();
Window::Current->Content = newWindowGrid;
Window::Current->Activate();
newWindowGrid->Children->Append(imageToMove); // Add to new parent
});
create_task(newCoreView->Dispatcher->RunAsync(Windows::UI::Core::CoreDispatcherPriority::Normal, dispatchHandler)).then([this, mainViewId]()
{
auto a = newView_->Id;
create_task(ApplicationViewSwitcher::TryShowAsStandaloneAsync(a, ViewSizePreference::Default, mainViewId, ViewSizePreference::Default));
});
However in the line where I add the Image to its new parent, I get an Interface was marshalled for a different thread error. Upon more reading, this is due to the fact that each new window is in its own thread and I'm moving an object to another thread.
I am new to UWP and I am not sure how to approach implementing this UI behavior. How do I access/transfer my state in one view to another ?
The problem is indeed the fact that each application view in UWP has its own thread and its own UI dispatcher. When you create a control, it is tied to the UI thread it was created on, hence you cannot place it onto another application view.
The solution is to create the new Image next to the StackPanel within the new view's UI thread. I don't really use C++, but in C# I would implement it as follows:
await newCoreView.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
StackPanel panel = new StackPanel();
Image image = new Image();
panel.Children.Add( panel );
image.Source = ...; //your source
Window.Current.Content = frame;
Window.Current.Activate();
newViewId = ApplicationView.GetForCurrentView().Id;
});
To further clarify - you can safely "transfer" normal data types into other view, the problem is mainly with the UI-tied types like controls, pages, etc.
I have one window defined in a FirstView.js and a View defined in Settings.js.
I add the Settings View to the FirstView Window doing this:
var Settings = require('ui/common/Settings');
var Settings = new Settings();
self.add(Settings);
And now, when users press "back" button i need to remove the Settings View from main window.
I know that i could do this with self.remove(Settings) if both codes were in the same .js file.
But, in this case, how can i remove the Settings View from the main FirstView Window?
try to use Application level events.
in Settings.js and when you click on back button
Ti.App.fireEvent("backSetting");
and in FirstView.js
Ti.App.addEventListener("backSetting",function(e){
self.remove(Setting);
};
why not use a container for settings?
e.g:
var FirstView=Ti.UI.createWindow();
var contentSetting=Ti.UI.createView({
height:Ti.UI.SIZE //or Ti.UI.FILL,
width:Ti.UI.SIZE //or Ti.UI.FILL
});
FirstView.add(contentSetting);
var Settings = require('ui/common/Settings');
var Settings = new Settings();
contentSetting.add(Settings);
FirstView.addEventListener('android:back', function(e){
//remove view
$.contentSetting.removeAllChildren();
});
Am using Tab group and using 4 tabs, 4 different windows are added to the tabs. when i try to get current window , by Ti.UI.currentWindow in any of the views which is added to windows, am getting blank value, that is it is not returning, current window value.
Can anyone correct me??
you set "url" property in Window on creation time. Like
in "app.js"
var tabGroup = Titanium.UI.createTabGroup();
var win_home = Titanium.UI.createWindow({
url :'home.js',
backgroundColor :'#000',
backgroundImage :'image/bg_img1.png',
barColor : "#000000",//"#ff429c"
});
var tab_home = Titanium.UI.createTab({
index : 0,
window:win_home
});
tabGroup.addTab(tab_home);
tabGroup.open();
in "home.js"
var cur = Ti.UI.currentWindow;
var view = Ti.UI.createView({
height : 100,
width : 100,
backgroundColor : "#0f0",
});
cur.add(view);
Understand this code and try to make like this. this is truly working... cheers...
How to set the TabPanel Tab Width and Tab Height?
I tried:
var myTabPanel = Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
resizeTabs: true,
tabWidth: 300,
//minTabWidth: 300
....
but it doesn't work
It's all that happening inside sencha css files. You need to modify it there.
good news,
I've found the way to do this programatically.
//assuming you are using the MVC structure as suggested
/*In the controller class of your view with the tab panel you must have reference to the tab panel in refs config.
The reference name for this case will be: myTabpanel
*/
//somewhere in the controller class
var tabPanelItems = this.getMyTabpanel().getItems; //get all the items inside the tab panel (if i'm not mistaken this will also return some "extra" item which is not panel
for (var i = 0; i < panels.length; i++) {
//due to that extra item i mentioned, need to make sure current item is a tab by confirming "tab" property existence
if (panels.items[i].tab) {
panels.items[i].setWidth('100px');
panels.items[i].setHeight('25px');
}
}
And that is it.
Key point is that its a Tab-panel (tab with panel) therefore to configure just the tab part we first need to get the tab part otherwise we'll just configuring the panel part by default.
I have the following in Titanium:
var imageArray = [];
imageArray[0] = 'photo0.png';
imageArray[1] = 'photo1.png';
....
imageArray[N] = 'photoN.png';
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundImage:imageArray[0],
backgroundColor:'#fff'
});
win1 is my main window and when I click a button I want to change it's backgroundImage without need for recreating the window. Anyone any idea of how could I do that?
Thanks
You can just set the backgroundImage of your window, like this:
win1.backgroundImage = "photo1.png";
It will works to you. But make sure that the image is in the Resources folder.
You have to use Ti.UI.currentWindow just when you are using external windows (with URL parameter in the window, using another JS file).
In the same context, the Ti.UI.currentWindow not works.