I'm not sure splash screen and startup screen is same.
I build app for android use Phonegap.
I put code java when I build app android use phonegap:
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
// Set by <content src="index.html" /> in config.xml
super.loadUrl(Config.getStartUrl(),5000);
//super.loadUrl("file:///android_asset/www/index.html")
}
And Startup Screen I put code in app.js:
Ext.Loader.setPath({
'Ext': 'touch/src'
});
Ext.application({
name: 'Project-catalog',
requires: [
'Ext.MessageBox'
],
controllers: [
'Main' , 'searchCon'
],
models: [
'appsModel' , 'catModel'
],
stores: [
'appsStore' , 'catStore'
],
views: [
'Main' , 'Home' , 'Navigation' , 'showSearchCategory' , 'SearchQ'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
phoneStartupScreen:'resources/startup/640x920.png',
tabletStartupScreen: 'resources/startup/748x1024.png',
launch: function() {
// Destroy the #appLoadingIndicator element
// Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Project-catalog.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
When I build app in emulator splash screen have show.When splash screen destroy.App is have background color bluesky so show apps
I put code wrong or not ?
The splash screen is native stuff. Phonegap provides a bridge api to handle it via JS:
navigator.splashscreen.show();
navigator.splashscreen.hide();
You should probably call navigator.splashscreen.hide() in your Ext.application :: launch()
Take a look at:
http://docs.phonegap.com/en/2.9.0/cordova_splashscreen_splashscreen.md.html
hope it helps
Related
I am using wix/react-native-navigation I am having white flickering screen while using setRoot or push methods in navigation.
I tried setting waitForRender: true , but it docent help .
snippet I tried dosen't work.
animations: {
setRoot: {
waitForRender: true
}
}
I had similar problem on RNN 7.7.0, what helped me is setting the default options
Navigation.setDefaultOptions({
animations: {
push: {
waitForRender: true,
},
pop: {
waitForRender: true,
},
setStackRoot: {
waitForRender: true,
},
showModal: {
waitForRender: true,
},
dismissModal: {
waitForRender: true,
},
},
})
I have created one sencha touch application in my localserver.
In that application, there are one textfield, and three buttons.
The following is my app.js file
Ext.application({
name: 'MyApp',
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
controllers: [
'CalcController'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('MyApp.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
The following is my Main.js file
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
items: [
{
xtype:'textfield',
name:'txtDisplay',
id:'idDisplay',
readOnly:true,
},
{
xtype:'button',
name:'btnClear',
id:'idClear',
width:'25%',
text:'C',
style:'float:left;',
},
{
xtype:'button',
name:'btnSeven',
id:'idSeven',
width:'25%',
text:'7',
style:'float:left; clear:both;',
//action:
handler: function()
{
var x = Ext.getCmp('idSeven')._text;
Ext.getCmp('idDisplay').setValue(x);
}
},
{
xtype:'button',
name:'btnEight',
id:'idEight',
width:'25%',
text:'8',
style:'float:left;',
action:'displayNum',
}
]
}
});
The following is my CalcController.js file
Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
},
}
},
displayNum: function()
{
console.log("This click event works");
}
});
Now my question is as following:
When i press button named btnSeven it display digit 7 in textfield means handler function works.
Now i want click event code in CalcController.js file instead of writing handler function in Main.js file for that i created second button named btnEight and give action:'displayNum' so when that button clicked event goes to the CalcController.js file.
When i pressed button named btnEight then i want to display digit 8 in textfield with the help of writing code in CalcController.js file instead of writing hander function in Main.js file. So how to do this?
Instead of defining Id for component , define Item Id
In Controller you have to define references in config.
config: {
refs: {
'idDisplay': 'main #idDisplay' // idDisplay is itemId not Id here
},
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
}
}
},
and in displayNum function write code like this.
displayNum: function(btn)
{
var display = this.getIdDisplay();
display.setValue(btn.getText());
}
I solved above my question as the following method:
Now my Main.js file is as following:
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
items: [
{
xtype:'textfield',
name:'txtDisplay',
id:'idDisplay',
readOnly:true,
},
{
xtype:'button',
name:'btnClear',
id:'idClear',
width:'25%',
text:'C',
style:'float:left;',
action: 'clearDisplay',
},
{
xtype:'button',
name:'btnSeven',
id:'idSeven',
width:'25%',
text:'7',
style:'float:left; clear:both;',
action: 'displayNum',
/*handler: function()
{
var x = Ext.getCmp('idSeven')._text;
Ext.getCmp('idDisplay').setValue(x);
}*/
},
{
xtype:'button',
name:'btnEight',
id:'idEight',
width:'25%',
text:'8',
style:'float:left;',
action:'displayNum',
}
]
}
});
and CalcController.js file is as following:
Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
},
'button[action=clearDisplay]' : {
tap: 'clearDisplay'
},
}
},
displayNum: function(button, e, eOpts)
{
var x = Ext.getCmp('idDisplay')._value + button._text;
Ext.getCmp('idDisplay').setValue(x);
},
clearDisplay: function(button, e, eOpts)
{
Ext.getCmp('idDisplay').setValue('');
}
});
Using this method i pass my button's properties in the controller file using the button's tap event.
I want to display splash screen in sencha. Here, I am dispalying splash in splash screen.html page few second(5 second) then direct to login page.So, How to solve this problem in sencha.
What i did:
Ext.Loader.setPath({
'Ext': 'touch/src'
});
Ext.application({
name: 'EditTest',
requires: [
'Ext.MessageBox', 'Ext.form.FieldSet','Ext.override'
],
views: [
'Profile'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
models: ["User"],
controllers: ["ProfileCon"],
views: ["Profile"],
//splash screen for
Ext.override(Ext.LoadMask, {
getTemplate: function() {
var prefix = Ext.baseCSSPrefix;
return [
{
reference: 'innerElement',
cls: prefix + 'mask-inner',
children: [
//the elements required for the CSS loading {#link #indicator}
{
html: '<a href="splash.html">'
},
{
reference: 'indicatorElement',
cls: prefix + 'loading-spinner-outer',
children: [
{
cls: prefix + 'loading-spinner',
children: [
{ tag: 'span', cls: prefix + 'loading-top' },
{ tag: 'span', cls: prefix + 'loading-right' },
{ tag: 'span', cls: prefix + 'loading-bottom' },
{ tag: 'span', cls: prefix + 'loading-left' }
]
}
]
},
//the element used to display the {#link #message}
{
reference: 'messageElement'
}
]
}
];
}
});
//splash creen
launch: function() {
// Destroy the #appLoadingIndicator element
// Initialize the main view
Ext.Viewport.add(Ext.create('EditTest.view.Profile'));*/
var loginview= {
xtype: 'loadmask',
message: 'My Message'
};
new Ext.util.DelayedTask(function () {
Ext.Viewport.setMasked(false);
Ext.Viewport.add({
//xclass: 'MyApp.view.Main'
Ext.Viewport.add([loginview]);
});
}).delay(5000);
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
But, I am unable to create splash screen page.
It seems like you are vastly overcomplicating things here. This launch function should be all you need:
launch : function() {
Ext.create('Ext.Panel', {
fullscreen : true,
html : 'This is my main app'
});
var splash = Ext.create('Ext.Panel', {
fullscreen: true,
html: 'This is my Splash'
});
splash.show();
Ext.defer(function() { splash.destroy(); }, 5000);
}
I am creating a viewport in my app.js file. I need to create a panel inside this viewport. Any ideas on how that can be done?
//<debug>
Ext.Loader.setConfig({disableCaching:false});
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>
Ext.application({
name: 'SEPA',
controllers: ["MainController"],
requires: [
'Ext.MessageBox'
],
controllers:['MainController'],
icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/Icon#2x.png',
144: 'resources/icons/Icon~ipad#2x.png'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
fullscreen: false,
//centered:true,
// margin: 100,
launch: function() {
Ext.Viewport.setWidth(320);
Ext.Viewport.setHeight(480);
//Ext.Viewport.setCentered(false);
// Ext.Viewport.setRight(2);
// Destroy the #appLoadingIndicator element
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function() {
window.location.reload();
}
);
}
});
Add this in the launch function
var panel = Ext.create('Ext.Panel', {
// fullscreen: true,
html: 'Hello from your first Sencha Touch App made by Sencha Fiddle.'
});
Ext.Viewport.add(panel);
Working example
I have created an app which launches a viewport on launch. This covers the entire screen. So i provided a width and height for it. The next requirement being the app being center aligned in the screen.
The code I have used is:
//<debug>
Ext.Loader.setConfig({disableCaching:false});
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>
Ext.application({
name: 'SEPA',
controllers: ["MainController"],
requires: [
'Ext.MessageBox'
],
controllers:['MainController'],
icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/Icon#2x.png',
144: 'resources/icons/Icon~ipad#2x.png'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
fullscreen: false,
//centered:true,
// margin: 100,
launch: function() {
Ext.Viewport.setWidth(320);
Ext.Viewport.setHeight(480);
//Ext.Viewport.setCentered(false);
// Ext.Viewport.setRight(2);
// Destroy the #appLoadingIndicator element
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function() {
window.location.reload();
}
);
}
});
As you can see, the app is placed in the left most corner of the browser. How can i get it in the center of the screen?
Any help is appreciated.
Thanks in advance.
Add this to your css or scss file:
body {
position:absolute;
left:50%;
top:50%;
margin-left:-160px;
margin-top:-240px;
}
Hope it helps :)