How to use ProMotion-Menu? - rubymotion

I did an new project only with the code shown in the Promotion-Menu's Readme. I have this :
# app_delegate.rb
class AppDelegate < PM::Delegate
def on_load(app, options)
#menu = open MenuDrawer
end
def show_menu
#menu.show :left
end
end
#menu_drawer.rb
class MenuDrawer < PM::Menu::Drawer
def setup
self.center = HomeScreen.new(nav_bar: true)
self.left = NavigationScreen
self.to_show = [:pan_bezel, :pan_nav_bar]
self.transition_animation = :swinging_door
self.max_left_width = 250
self.shadow = false
end
end
#navigation_screen.rb
class NavigationScreen < ProMotion::TableScreen
def table_data
[{
title: nil,
cells: [{
title: 'OVERWRITE THIS METHOD',
action: :swap_center_controller,
arguments: HomeScreen
}]
}]
end
def swap_center_controller(screen_class)
app_delegate.menu.center_controller = screen_class
end
end
My app is running but there is no sidebar as you can see here :
Did I miss something ?

No. What you have there should be working. You'll have to pan the bezel or nav bar to reveal the left controller (which is hidden when you first open the app). I've been thinking about adding a menu button to the examples to make this a little bit clearer. Here's how that might work:
# home_screen.rb
class HomeScreen < PM::Screen
title "Home"
def on_load
set_nav_bar_button :right, title: "Menu", action: :open_menu
end
def open_menu
app_delegate.show_menu
end
end
# navigation_screen.rb
class NavigationScreen < ProMotion::TableScreen
def table_data
[{
title: nil,
cells: [{
title: 'HomeScreen',
action: :swap_center_controller,
arguments: HomeScreen.new(nav_bar: true)
},{
title: 'HelpScreen',
action: :swap_center_controller,
arguments: HelpScreen.new(nav_bar: true)
}]
}]
end
def swap_center_controller(screen)
app_delegate.menu.center_controller = screen
app_delegate.menu.hide
end
end
Your AppDelegate and MenuDrawer would remain unchanged.

Related

Trying to make a pop appear up when the wrong password is enterd Kivy

When I enter the right password it does what I want, it goes to the next screen. When I enter the wrong password it does not go to the next screen just like I want but, it throws an error when the pop is supposed to appear.
This is the App code:
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.properties import ObjectProperty
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.clock import mainthread
from kivy.uix.button import Button
from kivy.uix.popup import Popup
Builder.load_file('main.kv')
class Menu(BoxLayout):
manager = ObjectProperty(None)
class ScreenLogIn(Screen):
#mainthread
def verify_credentials(self):
try:
if self.ids.login.text == "email#email.com" and self.ids.passw.text == "password":
self.manager.current = "match"
else:
popup = Popup(title='Wrong',
content='Wrong Email/Password')
popup.open()
except Exception as e:
pass
class ScreenNearUsers(Screen):
#mainthread
def on_enter(self):
for i in xrange(101):
button = Button(text="B_" + str(i))
self.ids.grid.add_widget(button)
class ScreenMatch(Screen):
pass
class ScreenChats(Screen):
pass
class ScreenUserProfile(Screen):
pass
class Manager(ScreenManager):
screen_log_in = ObjectProperty(None)
screen_near_user = ObjectProperty(None)
screen_match = ObjectProperty(None)
screen_chats = ObjectProperty(None)
screen_user_profile = ObjectProperty(None)
class MenuApp(App):
def build(self):
return Menu()
if __name__ == '__main__':
MenuApp().run()`
The main.kv:
#get login screen working
<Menu>:
manager: screen_manager
orientation: "vertical"
id: action
ActionBar:
size_hint_y: 0.1
background_color: 0, 0, 35, 2
background_normal: ""
ActionView:
ActionPrevious:
ActionButton:
id: near_users
icon: 'icons/internet.png'
on_press: root.manager.current = 'near_users'
ActionButton:
id: matching
text: "Matching"
on_press: root.manager.current= 'match'
ActionButton:
id: chat
text: "chat"
on_press: root.manager.current = 'chats'
ActionButton:
id: profile
text: "Profile"
on_press: root.manager.current = 'profile'
Manager:
id: screen_manager
<ScreenLogIn>:
orientation: "horizontal"
id: login_screen
BoxLayout:
TextInput:
id: login
TextInput:
id: passw
password: True # hide password
Button:
text: "Log In"
on_release: root.verify_credentials()
<ScreenNearUsers>:
ScrollView:
GridLayout:
id: grid
size_hint_y: None
height: self.minimum_height
cols: 2
row_default_height: '20dp'
row_force_default: True
spacing: 0, 0
padding: 0, 0
<ScreenMatch>:
Button:
text:
<ScreenChats>:
Button:
text: "stuff3"
<ScreenUserProfile>:
Button:
text: "stuff4"
<Manager>:
id: screen_manager
screen_log_in: screen_log_in
screen_near_users: screen_near_users
screen_match: screen_match
screen_chats: screen_chats
screen_user_profile: screen_user_profile
ScreenLogIn:
id: screen_log_in
name: 'login'
manager: screen_manager
ScreenNearUsers:
id: screen_near_users
name: 'near_users'
manager: screen_manager
ScreenMatch:
id: screen_match
name: 'match'
manager: screen_manager
ScreenChats:
id: screen_chats
name: 'chats'
manager: screen_manager
ScreenUserProfile:
id: screen_user_profile
name: 'profile'
manger: screen_manager
The error:
[WARNING] have no cols or rows set, layout is not triggered.

Ionic 2 - Alertcontroller animation

I want to display an alertcontroller dialog from top to bottom while opened it and do reversing while closing it. Is that possible?
I tried the below code but no luck.
let alert = this.alertCtrl.create({
title: 'Warning',
cssClass: 'alertCtrlfade ',
message: "This is not a correct form",
enableBackdropDismiss: false,
buttons: [
{
text: 'Ok',
cssClass: 'alert-btn',
handler: (data: any) => {
}
},]
});
alert.present();
In app.css
.alertCtrlfade {
transform: translate3d(0, 100, 0) !important;
}
Is that any way we can achieve this animation in alertcontroller?
Thanks
I think what you're looking for is a Toast notification.
check this link out and see if it's what you wanted ToastControllerAPI
Edit : Added some code for reference
in the typescript file
import { ToastController } from 'ionic-angular';
#Component({
templateUrl: 'example.html'
})
constructor(private toast: ToastController) {
}
exampleToast() {
let exampleNotification = this.toast.create({
message: 'This is not a correct form',
showCloseButton : true,
closeButtonText : 'Ok',
position: 'top'
}); exampleNotification.present();
}
}
This gives off the effect that you were looking for and can be used to replace AlertController.

ionic 2 Prompts alert

how to insert radio button and text input inside Prompts alert in ionic 2.
it's work only with text input or radio button. but i want to add radio button group with radio buttons to select only one option and text input in one alert prompt.
my coding
let prompt = this.alertCtrl.create({
title: 'Add Course',
message: "Enter Course Detailes",
inputs: [
{
name: 'id',
placeholder: 'Course ID'
},
{
name: 'img',
placeholder: 'Image url'
},
{
name: 'title',
placeholder: 'Title'
},
{
name: 'Details',
placeholder: 'Details'
},
{
type:'radio',
label:'something1',
value:'something1'
},
{
type:'radio',
label:'something2',
value:'something2'
}
],
buttons : [
{
text: "Cancel",
handler: data => {
console.log("cancel clicked");
}
},
{
text: "Save",
handler: data => {
console.log("search clicked");
}
}
]
});
prompt.present();
According to the documentation:
Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs.
You should use a separate component with a modal controller
#Component(...)
class AddCourses {
courseForm:FormGroup
constructor(params: NavParams) {
}
//create the form reactive or template driven
}
In your parent page,
let coursesModal = this.modalCtrl.create(AddCourses, data);
coursesModal.present();

extjs xtemplate filter blank row

I am using the following Xtemplate to filter out items by category (see view/panel in which it is "housed" below):
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="category === \'vegetable\'">',
'{str}',
'</tpl>',
'</tpl>'),
and it is filtering as expected (well, at least partially).
I have the following store:
Ext.define("Produce.store.List", {
extend: 'Ext.data.Store',
alias: 'store.List',
config: {
model: 'Produce.model.Food',
sorters: 'category',
grouper: function(record) {
return record.get('category')[0];
},
data: [
{ category: 'fruit', str: 'tomato'},
{ category: 'fruit', str: 'green bean'},
{ category: 'vegetable', str: 'celery'},
{ category: 'vegetable', str: 'sprouts'},
{ category: 'fruit', str: 'squash'},
{ category: 'fruit', str: 'snap peas'},
{ category: 'vegetable', str: 'rhubarb'},
{ category: 'vegetable', str: 'cabbage'}
]
}
});
The Xtemplate is rendered in the following view/panel:
Ext.define('Produce.view.Vegetable', {
extend: 'Ext.tab.Panel',
requires: ['Produce.model.Food'],
config: {
tabBar: {
docked: 'top',
ui: 'neutral',
layout: {
pack: 'center'
}
},
items: [{
title: 'Produce',
layout: Ext.os.deviceType == 'Phone' ? 'fit' : {
type: 'vbox',
align: 'center',
pack: 'center'
},
cls: 'demo-list',
items: [{
width: Ext.os.deviceType == 'Phone' ? null : 300,
height: Ext.os.deviceType == 'Phone' ? null : 500,
xtype: 'list',
store: 'List',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="category === \'vegetable\'">',
'{str}',
'</tpl>',
'</tpl>'),
variableHeights: false
}]
}
});
When I run this only the vegetables in the store are displayed in the panel- which is great - but blank rows are also displayed where the fruit items were filtered out in the rendered list - which is not great. (Similarly, in my "fruit" view, fruit are displayed as desired, but where there were vegetables, blanks rows show up).
How can I get rid of these blank rows (this is an issue, since the fruits and vegetables in my list are just to get the app working, and are a fill-in to represent a much larger number of records that will be categorized for my actual app). I tried using Ext.IsEmpty and filtering by null, but neither of these did the trick.
The View is working well: it shows a row for each record. You should try to add a filtered store to the list.
Take a look at Ext.util.Filter in the Sencha Touch documentation.
This will solve your problem!

How to select a card in a carousel by menu item in a docked menu list in Sencha touch?

I cannot figure out how I can retrieve a given Data item in a store (id-number) to send it to the "setActiveItem" method in a listener:
So I have a store - model:
Ext.regModel('PictureItem', {
fields: ['id', 'titel', 'url']
});
var pictureItems = new Ext.data.Store({
model: 'PictureItem',
data: [
{id:1, titel:'page 1', url:'http://placekitten.com/1024/768'},
{id:2, titel:'page 2', url:'http://placekitten.com/1024/768'},
{id:3, titel:'page 3', url:'http://placekitten.com/1024/768'},
]
});
Here is my menuList called "leftList":
var leftList = new Ext.List({
dock: 'left',
id:'list1',
width: 135,
overlay: true,
itemTpl: '{titel}',
singleSelect: true,
defaults: {
cls: 'pic'
},
store: pictureItems,
listeners:{
selectionchange: function (model, records) {
if (records[0]) {
Ext.getCmp('karte').setActiveItem(!!!Here the number of the selected Item
or respondend "id" in the data store!!!);
}
}
}
});
and the carousel....
var carousel = new Ext.Carousel({
id: 'karte',
defaults: {
cls: 'card'
},
items: [{
scroll: 'vertical',
title: 'Tab 1',
html: '<img class="orientation" alt="" src="img_winkel/titel_v.jpg">'
},
If I call
Ext.getCmp('karte').setActiveItem(2);
it works with the called card - but how can I get the number from the id of the selected item in the menu List /store????
By the way: what does mean:
if (records[0]) {
why [0]?
I FOUND THE ANSWER FOR MYSELF - IT'S EASY:
Ext.getCmp('karte').setActiveItem(records[0].get('id'), {type: 'slide', direction: 'left'});
The secret to get the record-entry is ".get()":
records[0].get('arrayfield')
So now I can change the activeItem in the carousel easely...