Hi I started creating a pebble app using Pebble.JS. I installed the app on my Pebble and I notice that some of the menu items disappear and reappear on their own.
Nothing too fancy about the code:
for(var i = 0; i < quantity; i++) {
var rest = data.Result.results[i];
var showName = rest.shows[0].showName;
items.push({
ourid:rest.ourID,
distance:rest.fmtDistance,
knownfor:rest.knownForNoHTML,
title:rest.name,
subtitle:showName
});
}
I believe what you're seeing is Pebble's handling of menus. From my experience, Pebble.js only displays a few menu items (up to 5 or so?), and will load the other menu items as the user scrolls down to them.
As long as those items reappear, I'm not sure there's much to be improved.
Related
I have a UWP app. I want to be ale to create new windows from the app, but any subsequent window needs to be a specific smaller size compared to the main window. I don't do anything with regards to sizing the main window and let the OS take care of sizing it for me.
I bring up a new window like this:
auto window = CoreApplication::CreateNewView();
window->show();
void NewWindow::show() {
auto currView = ApplicationView::GetForCurrentView();
currView->PreferredLaunchViewSize =
Windows::Foundation::Size(float(options.width), float(options.height));
currView->PreferredLaunchWindowingMode = ApplicationViewWindowingMode::PreferredLaunchViewSize;
currView->SetPreferredMinSize(Size(20,20));
Xaml::Window::Current->Activate();
ApplicationViewSwitcher::TryShowAsStandaloneAsync(
window_->id(),
ViewSizePreference::Default,
window_->parentId(),
ViewSizePreference::Default);
}
When the main window comes up, it comes up just fine. When I click on a button which gets to this function, the new window comes up in the same size as the main window. I reopen the app, but now the main window shows up in the size I wanted the new window to show up in. Then clicking the button to bring up the new window brings up the new window in the size I wanted it in. So I am a bit confused. Am I setting the sizes the right way? Is there anything else glaringly wrong here?
As # Raymond Chen said, PreferredLaunchViewSize set the size when the app launches, it will change the size of your main window. And you can use ApplicationView.TryResizeView method to set the size of new window.
For example:
auto parentView = ApplicationView::GetForCurrentView();
auto newView = CoreApplication::CreateNewView();
newView->Dispatcher->RunAsync(Windows::UI::Core::CoreDispatcherPriority::Normal,
ref new Windows::UI::Core::DispatchedHandler([this,parentView]()
{
int newViewId = 0;
Windows::UI::Xaml::Controls::Frame^ rootFrame = ref new Windows::UI::Xaml::Controls::Frame();
rootFrame->Navigate(Windows::UI::Xaml::Interop::TypeName(MainPage::typeid), nullptr);
Window::Current->Content = rootFrame;
// You have to activate the window in order to show it later.
Window::Current->Activate();
newViewId = ApplicationView::GetForCurrentView()->Id;
IAsyncOperation<bool>^ mytask = ApplicationViewSwitcher::TryShowAsStandaloneAsync(newViewId);
auto deviceEnumTask = concurrency::create_task(mytask);
deviceEnumTask.then([this](bool res)
{
// set the size of new window
ApplicationView::GetForCurrentView()->TryResizeView(Size(600, 320));
});
}));
My assignment is to create a program that displays two buttons and my name and current time/date on the main screen. The goal is to have a passage appear once one of the buttons are pressed that will make use of the entire screen. So far, I have created the main page with the labels and buttons. However, I am very lost as to how to display the passage with respect to the button clicked. I am using the empirically fitting text way to make the best use of the screen. I have created a FontCalc.Cs page and added onContentViewSizeChanged method in the mainpage where I have all my code. I don't know how to proceed next. So far, this is what I have in my click handler event:
passage1Button.Clicked += (sender, args) =>
{
passage.Text = "So they began working together, each squadron leader commanding indivual pilots, " +
"Ender comanding the squadron leaders. They learned manyw ays of working together, " +
"as the simulator forced them to try different situations. Sometimes the simulator " +
"gave them a larger fleet to work with; Ender set them up then in three or four " +
"toons that consisted of three or four squadrons each. Sometimes the simulator gave " +
"them a single starship with its twelve fighters, and he chose three sqaudron leaders. ";
ContentView contentView = new ContentView
{
Content = passage
};
contentView.SizeChanged += onContentViewSizeChanged;
Instead of displaying the passage while having the buttons go away, it only freezes both the android emulator and the UWP local machine.
You can show a modal on button click
passage1Button.Clicked += (sender, args) =>
{
var contentpage = new ShowTextPage("Passage text here, goes to page constructor where label is set to passed text");
var page = new NavigationPage(contentpage);
Navigation.PushModalAsync(page);
}
On the ShowTextPage, set HasNavigationBar to false
I have a problem with my product view. I want to display product data. each product is a "box" with an image and text. I want to display six products on a panel. As of the fact that i have many products i want to have a "carousel like view". My idea was the following: Place 6 products on a panel. Load 3 panels and place each panel as a carousel item so that i can swipe to get to another "page".
To save performance I tried to always have only 3 items in the carousel. The active "page" and the page before, and the page after, so that I can swipe to left/right and the next page can be loaded.
I tried to put my logic in the "onActiveItemChange"-Listener of the carousel, but I had massive problems with adding/removing carousel items. So my Question is is it possible to do what i want to accomplish?
Is there a better alternative? Of course my data is in a store, but I don't want that standard list view.
Another Question: Because my first attempt with the carousel failed i tried to build a Ext.Container (card layout) with the panels on it. But how can I listen to a swipe event on a Panel???
thanks for help ;-)
Even I am doing the same, using carousel & a store. Every page of carousel is a view(panel) which would have 4/6 child views(panels). On store load I am creating those children and then divide them into pages and add those pages to carousel.
This is working fine for me and on activeItemChange I am loading more pages:
activeitemchange: function(container, value, oldValue, eOpts) {
var activeItemIndex = container.getActiveIndex();
var galleryTotal = container.getInnerItems() ? container.getInnerItems().length : 0;
if ((activeItemIndex + 1 == galleryTotal)) {
console.log("At last page, time to load");
var store = this.config.store;
store.nextPage({ addRecords: true });
}
}
I think I understand your issue. Assuming you've got 3 items and you're always viewing the middle one (as you move forward, item 0 gets destroyed and one item gets created). And assuming that each item has an id associated with its location in the list.
var current_item = Ext.getCmp('carousel_name').getActiveItem().getId();
current_item = Number(current_item.replace('item', ''));
//Objects to create
var next_item = current_item + 1;
var previous_item = current_item - 1;
//Objects to destroy
var next2_item = current_item + 2;
var previous2_item = current_item - 2;
//Create items
var createItem = function(item_location, type){
var carousel_item = create_content(item_location);
if(type == 'next'){
Ext.getCmp('carousel_name').add(carousel_item);
}else if(type == 'previous'){
Ext.getCmp('carousel_name').insert(0, carousel_item);
Ext.getCmp('carousel_name').setActiveItem(1);
}
}
createItem(next_item,'next');
createItem(previous_item,'previous');
//Destroy items
if(Ext.getCmp('item'+previous2_item)){
Ext.getCmp('carousel_name').getItems().items[0].destroy();//This is a hack, for some reason with the above commented out line, the item was getting destroyed but wasn't being removed from carousel_name
}
if(Ext.getCmp('item'+next2_item)){
Ext.getCmp('carousel_name').getItems().items[Ext.getCmp('carousel_name').getMaxItemIndex()].destroy();//This is a hack, consistency with previous destroy (above)
}
I'm now facing the most common problem faced my many while working with listboxes. Though I found many answers the the forum, nothing seems to work for me or else i have got it wrong. .
I have created a listbox through code. Every listbox item has a stackpanel and within it two textblocks. the stackpanel has vertical orientation.The foreground of the textblocks have been set to specific colors. When an item has been selected or clicked it moves to another page and on the close of the new page it returns to the old page.
My problem is that, when a listbox item has been clicked, it does not show the selection color which is by default the phones accent color before moving to the next page. Is it because the color of the textblocks have already set while creating the listbox?
So i tried to set it the foreground of the selected item through the SelectionChanged() like this
ListBoxItem selItem = (ListBoxItem)(listboxNotes.ItemContainerGenerator.ContainerFromIndex(listboxNotes.SelectedIndex));
selItem .Foreground = (SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"];
But this does not work, and i assume its cuz there is a stackpanel inside the item.
How exactly this needs to be done? Do i need to retrieve the textblocks inside the stackpanel and set the foreground?? I have not used binding here. Visual Tree Helper???
Thanks
Alfah
In general, the selected color doesn't change on lists where you're navigating.
From my experience with android, there's no 'selector' background on WP7. If you're looking for a cool UI effect that shows some action is happening, the TiltEffect is definitely recommended, and very easy to implement.
http://www.windowsphonegeek.com/articles/Silverlight-for-WP7-Toolkit-TiltEffect-in-depth
However - if you're creating an app that doesn't have immediate navigation, it is possible that you might want a 'selected' cell color / etc. I've attached an image:
https://skydrive.live.com/redir.aspx?cid=ef08824b672fb5d8&resid=EF08824B672FB5D8!366&parid=EF08824B672FB5D8!343
If you note here, the buttons are related to the selected item on the list - I.e. the user can perform 4 different actions based on the selected item, (but they must select an item first!).
internal void SelectionChanged()
{
var item = (((ListBoxItem) _view.servers.SelectedItem).Content) as StackPanel;
if (item != null)
{
for (int i = 0; i < _view.servers.Items.Count; i++)
{
var val = (((ListBoxItem) _view.servers.Items[i]).Content) as StackPanel;
var tb = val.Children[0] as TextBlock;
var tb2 = val.Children[1] as TextBlock;
if (i == _view.servers.SelectedIndex)
{
tb.Foreground = tb2.Foreground = (SolidColorBrush) App.Current.Resources["PhoneAccentBrush"];
}
else
{
tb.Foreground = tb2.Foreground = (SolidColorBrush) //regular color here, b/c all these should no longer be selected
}
}
}
}
The ListItemContainer will have it's Foreground changed automatically. To inherit this, simply don't specify a colour (or style) on your TextBlock.
I've got the below code:
// Initiate the font choosing lists.
var headerListWindow = Titanium.UI.createWindow();
var headerFontListData = [{title:"Row 1"},{title:"Row 2"},{title:"Row 3"}];
var headerFontList = Titanium.UI.createTableView({data:headerFontListData});
chooseHeader.addEventListener('click', function(e) {
headerListWindow.left=win.width;
var a = Titanium.UI.createAnimation();
a.left = 0;
a.duration = 1000;
headerListWindow.add(headerFontList);
headerListWindow.open(a);
});
headerFontList.addEventListener('click', function(e) {
var a = Titanium.UI.createAnimation();
a.left = win.width;
a.duration = 1000;
headerListWindow.close(a);
});
Which slides a window in nicely. When I open headerListWindow for the first time, everything appears, the list works, and the window slides in nicely. When I close() the window, however, all the list elements' names revert to "R.". Then, upon reopening the window, the list elements are completely gone. Why is this?
.close() kills your window. it's passed on. this window is no more. It has ceased to be. It's expired and gone to meet it's maker. It's a stiff. Bereft of life. It rests in peace... etc.
when your window is closed, then your are destroying it. You might like to try .hide() instead which will not null the window, but just not show it on the screen.
blissapp, I am using the Alloy framework, and if I do a window.close() it does not kill the window. It closes the window, but if I log the window after it's still defined, and its definitely not dead.
I am not sure wether this applies to developing without alloy or not, but the object remains. You do have to re-open the window in order to render it, but it is my experience that the window is not deceased as you put it. I am definitely not destroying it.
An example:
welcome.addEventListener('open', function() {
console.log("welcome is open");
win1.close();
Ti.API.debug(win1);
});
Outputs:
[INFO] : welcome is open
[DEBUG] : [object welcome]
Ofcause Nulling the variable is a solution, but why doesn't .close() work as it is suposed to according the documentation using Alloy? Am I missing something when working in Alloy?