The iOS guideline requires launch image for all apps. To my understanding, that's a "default.png" file located in the root folder of your app.
I packaged my app using Sencha CMD v3 and I don't see any launch image while loading.
There are some default launch images located in root/webapp/resources/loading/ folder but they are not showed in my app. Any idea?
The "startupImage" seems only appliable to the app added to the home screen, anyway, here is a part of my app.js:
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'
}
Added related posts:
[2.1] Splash screen is white on startup on Android and iOS
I have this at the beginning of my application - I'm not packaging it for iOS, but this seems like what you may need:
Ext.require([
'Ext.XTemplate',
'Ext.Panel',
'Ext.Button',
'Ext.List'
]);
// Main application entry point
Ext.application({
phoneStartupScreen: 'images/sencha_logo.png',
name: 'Analytics',
// setup our MVC items
Here is a handy-dandy link to the api doc on this:
http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Application-cfg-phoneStartupScreen
For launch image you need to modify the index.html in your app directory. In here you will find a div with id appLoadingIndicator inside body tag. In my application I have replaced the content of #appLoadingIndicator with an img tag which refers to my splash image.
<div id="appLoadingIndicator">
<img src="resources/images/splash.png" />
</div>
For customizing the css you might want to remove the default embedded styles in index.html present in style tag inside the head tag which are applied to #appLoadingIndicator.
Now add your custom css and you will have your splash image ready.
Related
TLDR; In a Javascript file for my Firefox extension, how can I load the contents of other files from inside my extension (such as an HTML view & CSS stylesheet) for use on the current web-page?
I'm working on my first Firefox extension, for personal use.
So I setup my manifest.json to load /script/panel.js when any page of the site loads.
In panel.js, I would like to do something like:
const html = MyExtension.getFileContent('/view/panel.html');
const node = document.createElement('div');
node.innerText = html;
document.body.appendChild(node);
But I can't find anything like MyExtension.getFileContent(). All I've been able to find is how to add sidebar (through manifest?) & browser action for the toolbar at the top of the browser & other non-programmatic ways of exposing files that are inside my extension.
Then in /view/panel.html, Ideally, I'd like to also reference /style/panel.css which is also found inside my extension's root directory, such as with a <link tag.
Did you set web_accessible_resources in your manifest.json? It is required to make resources in your extension readable from webpages.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
I am experimenting with using NativeScript to speed up the process of porting an existing Android app to iOS. The app in question uses a great deal of SVG manipulation in a Cordova webview. To keep things simple I want to port all of my existing Webview side code - in essence the entire existing Cordova www folder and its contents - over to the new NativeScript app. The WebView talks to a custom Cordova plugin which I use to talk with my servers to do such things as get new SVGs to show, keep track of user actions etc.
If I an get through these teething issues I am considering using this component to implement bi-direction communications between by current webview JS code and the, new, NativeScript backend that will replace my current Cordova plugin. Someone here is bound to tell me that I don't need to do that... . However, doing so would mean throwing out the baby with the bathwater and rewriting all of my current Webview ES6/JS/CSS code.
This is pretty much Day 1 for me with NativeScript and I have run into a few issues.
I find that I cannot get rid of the ActionBar even though I have followed the instructions here and set the action bar to hidden.
I can use the following markup in home.component.html
to show external web content. However, what I want to really do is to show the local HTML file that is in the www folder in the following folder hierarchy
app
|
____home
|
____www
|
______ index.html
|
______css
|
______ tpl
|
.....
However, when I use the markup
<Page actionBarHidden="true" >
<WebView src="~/www/index.html"></WebView>
</Page>
I am shown the error message
The webpage at file:///data/data/com.example.myapp/files/app/www/index.html is not available.
I'd be most grateful to anyone who might be able to tell me what I am doing wrong here - and also, how I can get rid of that action bar which is currently showing the app title.
About using local HTML file
Is your local HTML file recognized by Webpack (which is enabled by default in NativeScript)? Try to explicitly add the local HTML file to your webpack.config.js file. This way Webpack will "know" that it will have to bundle this file as well.
new CopyWebpackPlugin([
{ from: { glob: "<path-to-your-custom-file-here>/index.html" } }, // HERE
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
]
Example here
About hiding the ActionBar
NativeScript Core only: Try hiding the action bar directly for the frame that holds the page. See the related documentation here
NativeScript Angular: The page-router-outlet will have an action bar by default (you can hide it by using the Page DI as done here). Otherwise, you could create a router-outlet (instead of page-router-outlet). The router-outler won't have the mobile-specific ActionBar.
We are using Webfont Loader to load google fonts. And inside the active callback of WebFont.load we load our main script and bootstrap angular.js application.
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Open Sans:400,700,700i,400i:latin-ext']
},
active: function() {
var mainScript = document.createElement('script');
mainScript.src = "/js/main.js";
mainScript.onload = function() {
angular.bootstrap(document, ['cob']);
}
document.body.appendChild(mainScript);
}
};
WebFont.load(WebFontConfig);
</script>
To make browser use default fonts until the google font file loaded, we set fonts for .wf-active class
html.wf-active {
font-family: 'Open Sans', sans-serif;
}
Inside angular run, we switch apploaded and clear screen from loaders and show the application.
angular.module('mymodule')
.run([function() {
$rootScope.appLoaded = true;
}
]);
html
<body>
<div class="app-loader" ng-hide="appLoaded">loading...</div>
<div class="page-container" ng-if="appLoaded">
application loaded. <button>GİRİŞ</button>
</div>
</body>
We see "loading..." until the font files loaded, then application bootstraps successfully.
But the button text is rendered as "G R " for a couple of seconds, after a while 'İ' and 'Ş' characters are loaded into screen and we see GİRİŞ on button.
I am sure the font file is loaded before application bootstraps, because the font doesn't change after the application is loaded.
May be irrelevant but, I got some image files on the page and foreign characters are rendered with the image files. So there is some kind of a wierd screen render latency.
We only have this issue on iOS application, I have tested it on iPhone 6 and 6s, and on xcode simulators.
This works as intended on browsers (safari, chrome and firefox) and on android application we create with the same cordova project.
After trying various preload methods, just as I was considering to give it up, I came accross to a fact here
most browsers download fonts when they're used in a page rather than
when they're declared in CSS.
It seems like latin-ext subset of the font is delayed until it is used inside the page.
I have solved the issue by putting a dummy character (İ) that will make it download latin-ext subset on load screen
I just published a Google Chrome extension which loads background images into new, empty tabs. The plugin is found here in the Chrome Web Store.
For detecting new and empty tabs, I need to ask for "tab" permissions in the extension's manifest.json. This, however, gives the extension the permission to read the browser's history. Not all users will want this and we don't actually need it. Is there a way to detect empty tabs without this permission requirement? Currently our check looks like this:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if (changeInfo.status == "loading" && tab.url == 'chrome://newtab/')
{ /* load background into tab */ }
});
If you want to customize the new tab page you should add this to your manifest:
"chrome_url_overrides": {
"newtab": "newtab.html"
}
Then place the script you are currently injecting into new tab pages as a <script> tag in the newtab.html file. That won't cause that permission message.
i am new to XamarinStudio to create Android App. Here the questions:
1 What are Manifest and AndroidManifest. How to create them or it is auto created?
How to setUp a Default Activity for the app to display when it is first launch. In Windows Phone, the default Page is called MainPage.xaml.
When I add another Activity into the project, do I have to declare it in Manifest or AndroidManifest?
Thanks
In Eclipse : The default Activity is setUp thru Intent-filter as
intent-filter
action android:name="android.intent.action.MAIN"
category android:name="android.intent.category.LAUNCHER"
intent-filter
How to do it in XamarinStudio?
When you build your Android app with Xamarin you can set the main activity in the actual activity itself.
When you open the code file for the activity you can put something like this:
[Activity(Label = "MyAppName", MainLauncher = true, Icon = "#drawable/icon", ScreenOrientation = ScreenOrientation.Portrait)]
According the documentation on Developer.Android.com
The manifest presents essential information about the application to
the Android system, information the system must have before it can run
any of the application's code.
More info... http://developer.android.com/guide/topics/manifest/manifest-intro.html
AndroidManifiest.xml is created automatically.
The default activity for the App is the same name that you config when you create your Aplication, "activity_main.xml" or personalized name.
Project_Name
->res
->layout
->activity_main.xml
http://www.mkyong.com/android/how-to-set-default-activity-for-android-application/
When you add another activity in your project and if you need add to AndroidManifiest.xml, you need do that manually.
What's the correct syntax to define an activity in manifest file