using WL.TabBar in Server_Generated_Pages renders items as list items instead of tabs - ibm-mobilefirst

I am trying to use WL.TabBar api and create tabs in the server generated pages but looks like items are not rendered as tabs. But rendered one below the other with dots for each items (like indicated/shown below).
*Item1
*Item2
*Item3
*Item4
Any idea what could be the problem ?. Thanks
Cool, Here are the environment details:
(1) Worklight version 506. Running on Android simulator
(2) Sample code used:
WL.TabBar.setParentDivId("tabpane");
WL.TabBar.init();
WL.TabBar.addItem("item1", function()
{ openNativePage(); },"Item1",{ image: "css/images/Tab.jpg",
imageSelected : "css/images/Tab.jpg"
? });
WL.TabBar.setVisible(true);
(3) I don't see any error messages as such. But I see the below warning in LogCat:
05-16 12:37:42.796: I/Web Console(289): Falling back on PROMPT mode since _cordovaNative is missing. at hostname/wps/contenthandler/!ut/p/digest!SlQs_clcwL2z1b8kIsNvEg/mashup/ra:collection?themeID=ZJ_CGAH47L00OEP00IDBHRNLP0830&locale=en&mime-type=text%2Fplain&entry=wl_client__0.0%3Aconfig_js&entry=wl_init__0.0%3Aconfig_js&entry=wp_theme_high_contrast__0.0%3Aconfig_js&entry=wp_theme_edit__0.0%3Aconfig_js&entry=wp_theme_menus__0.0%3Aconfig_js&entry=wp_theme_skin_region__0.0%3Aconfig_js&entry=wp_one_ui_30__0.0%3Aconfig_js&entry=wp_status_bar__0.0%3Aconfig_js:1044

hmm, I think found the answer. The problem was the CSS files (wlclient.css + wlgap.android.css) were missing at backed the Server (where the custom application exist). I had copied only the native JavaScript files from wlclient and commons folder. Thanks.

Related

Preview content on site in Sanity not working

I'm following the Sanity docs on how to add a content preview. After updating the sanity.json and adding a resolveProductionUrl.js file according to docs I should be able to see a menu item in context menu:
But it's not happening. Interestingly enough If I add a console log to a resolveProductionUrl.js I can see it on the browser console - meaning that this function is getting called.
This is what I see:
I ran into a similar issue while following along using Sanity's Preview content on site article.
There were three things I had to do after following their article in order to get it to work:
I had do add this line in sanity.json under plugins
add highlighting to the line:
"plugins": [
...
"#sanity/production-preview"
],
(I didn't add this line to my sanity.json file on the first attempt. The article did not highlight that line, so looks like its just provided as context since the parts entry is highlighted.)
I also had to update resolveProductionUrl.js to use document._id instead of document.slug.current as slug is undefined for me and it was throwing errors in the console (and not showing the menu item).
I had to completely stop the site and re-run sanity start to get it to be picked up locally.

Get rid of "Remote debugger is in a background tab" warning in React Native

I've started a new React Native project and I keep getting the following warning:
Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window).
It's a bit annoying so I wanna know how I can get rid of it? I'm running the debugger in Chrome and I moved it to a seperate window but it did not help.
If you have the Maintain Priority checkbox in the debugger window, try enabling it before you jump to any of the solutions below.
To get rid of the warning in your whole project add the following to your outermost Javascript file (most of the time that's index.js for React Native)
for react-native v0.63+:
Use LogBox:
https://reactnative.dev/docs/debugging#logbox
LogBox.ignoreLogs(['Remote debugger']);
for react-native v0.57 - v0.62:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);
Reference this from the official React Native docs:
https://facebook.github.io/react-native/docs/debugging.html
react-native v0.56 or below:
Add the following early on in your code:
console.ignoredYellowBox = ['Remote debugger'];
Easy, simple and specific to that error. Works for me. Can substitute for any text you want.
this solution is work for me
open/move http://localhost:8081/debugger-ui (default path for remote debugging) on the separate window
maybe that could help :)
You can use React Native Debugger available at https://github.com/jhen0409/react-native-debugger It is a standalone app for debugging React Native apps during development.
Move http://localhost:*****/debugger-ui on the separate window.
Restart Remote JS Debugging.
For me warning went away by checking Maintain Priority Checkbox!
It is because of number of tabs are opened in the browser with React Native Remote Debugger UI tab. I also faced the same issue.
To overcome this warning message you can use any one method from the following:
Open an incognito tab then paste http://localhost:8081/debugger-ui on address bar and press ENTER. Finally reload the app (Command+R).
Close all the tabs in the browser. Keep only 1 tab opened then hit http://locahost:8081/debugger-ui then reload the app (Command+R).
As mentioned by #jakeforaker in one of the comment. The warning went away by simply opening the remote debugger in a separate window instead of a tab in your existing window of your browser (you have to reload your simulator though).
As the warning is saying keeping the remote debugger in the same window as other tabs
may cause apps to perform slowly
So i think simply suppressing warning as mentioned by #kjonsson:- console.ignoredYellowBox = ['Remote debugger']; doesnt seem to be best solution.
Since this commit in March 2017, you can enable the Maintain Priority checkbox. When enabled, it silently plays a base64-encoded .wav file to prevent the debugger's browser tab from entering low-power mode, which can affect websocket performance. This will effectively prevent the warning you describe.
This issue was resolved when I closed all open Chrome windows and started the Remove Debugging again. I had previously had open Chrome windows, so it 'seems' that having them open kills performance.
I think the accepted answer is no longer accurate (at least for React Native v0.57+).
The correct code is now:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);
Reference this from the official React Native docs:
https://facebook.github.io/react-native/docs/debugging.html
I am on Macbook. I fixed this issue by bringing the Debugger window on main desktop, rather than on having it on separate desktop which it thinks is in "Background".
I had the same issue pop up yesterday. Googling it led to this Stack Overflow post. In one of the response (by adriansprod), he suggested:
Chrome debugger in it's own window fixes. But annoying problem
It is likely that your React Native debugger is not in its own Chrome browser window but in a Chrome browser tab. Pulling it out as its own window, as adriansprod suggest, fixed this for me.
The (very annoying) error message is handled by debuggerWorker.js, which sadly doesn't include any configuration options to turn off the message. So for the time being there are no ways you can configure your application to disable the message.
The related code is outlined below (original licence applies):
var visibilityState;
var showVisibilityWarning = (function() {
var hasWarned = false;
return function() {
// Wait until `YellowBox` gets initialized before displaying the warning.
if (hasWarned || console.warn.toString().includes('[native code]')) {
return;
}
hasWarned = true;
console.warn(
'Remote debugger is in a background tab which may cause apps to ' +
'perform slowly. Fix this by foregrounding the tab (or opening it in ' +
'a separate window).'
);
};
})();
As you see, no configuration options are used, the whole thing is scoped off locally (see the above repo link for further details).
I also have faced with same issue about one week ago and finally i have found solution that works excelent for me
It called reactotron, you can find it here - https://github.com/reactotron/reactotron and you can use it to:
* view your application state
* show API requests & responses
* perform quick performance benchmarks
* subscribe to parts of your application state
* display messages similar to console.log
* track global errors with source-mapped stack traces including saga stack traces!
* dispatch actions like a government-run mind control experiment
* hot swap your app's state
* track your sagas
I hope my post was helpful and you never will faced with this tedious warning .
Good luck
I use this in index.js
if (__DEV__) {
console.ignoredYellowBox = [
'Remote debugger',
'Warning: isMounted… is deprecated',
'Module RCTImageLoader'
];
}
I had minimised the "http://localhost:8081/debugger-ui/" window. Just opening it up (un minimising), and reloading the app removed the warning.
there might be chances that Another debugger is already connected to packager.
so close your terminal and debugger google chrome.
if you are using visual studio's package manger then don't start package manager by Mac/other os terminal command.
so close all terminal and stop on going package manger and google chrome debugger.
start the process again.
Similar to Akshay Vijay Jain, mine went away by ticking this box!

Custom Grid App

So I am trying to make modifications to the custom grid app that rally has already created. I found the source code at https://github.com/RallyApps/app-catalog/tree/master/src/apps/grid. However, I cannot get that code to work. I have added it to a js and then ran build (I also changed the json). However, when I then add the app to rally it doesn't give me the settings options (object, query, pagesize, etc) and just generates a table. This table generates 4 rows (the number of user stories I have), but the rows are completely blank except for gears at the beginning of each row. I was wondering if I was building this app incorrectly or if I had grabbed the wrong code. If not, is there a place where can I get the complete code or a way to modify the already existing code?
Thanks
You may add a fetch to the config as below:
config: {
defaultSettings: {
types: 'hierarchicalrequirement',
fetch: 'FormattedID,Name'
}
}
and it will display a grid.
It will not display settings dialog however. The source code in this github repo is not exactly the CustomGrid app available from the AppCatalog in the UI. It does not have the full functionality and not ready yet. I submitted a defect.

Menu Items are not getting displayed

I implemented WL.OptionsMenu in android environment as specified in Worklight APIs(android/js/mainApp.js). If menu option is clicked, I've given a callback function . Its working fine if the callback resides in the same file. But the implementation of that callback is resided in android/native/common/js/mainApp.js file. Hence, its not showing the menuOptions in android mobile. How to solve this problem?
Edit your question with the contents of mainApp.js
There is no such path, in Worklight, as android/native/common/js/mainApp.js.
Perhaps you mean android/native/assets/www/default/common/js/mainApp.js, but then again, it is exactly the same as android/js/mainApp.js.
The only difference is that android/native/assets/www/default/common/js/mainApp.js is created after you build your application.
There is no reason why it should not work.
Again, edit your question with the contents of mainApp.js and the steps you have taken from creating the project, to running it in your device/emulator.

how begin with appcelerator for desktop (and use the API's)

I've a bit experience with qt+ and creating not so complex web pages, but I don't know how begin with titanium...when I run the default app this work...I can change the index.html like a web page...I can include javascript code and jquery too...very nice...but when I try run api functions I don't know how include these...all examples talk about iphone and a app.js file...I'm trying make a desktop app and don't appear any .js...I can create these but don't work
...in the docs I read things like these:
var win = Ti.UI.createWindow(); var view = Ti.UI.createView({backgroundColor:"red"}); win.add(view); win.open();
I don't know where I've put this code...I try put it inside a javascript inside the html (bad practice!) but it don't work...I put it inside a function onload but don't work neither.....there are any "convention" with the names for the files for this work?...I think this is like create a very dynamic web page but I don't know how work with the api....I see the example "kitchen something" but it wasn't so clear to mee...I see a examples like this:
http://mobile.tutsplus.com/tutorials/appcelerator/appcelerator-using-json-to-build-a-twitter-client/
but seems this work different when is an ipod to when it is a desktp app...I create an app.js (like the tuto) and put my code inside it but it never run...I look the source code and only need create a .js and inside my "home.html" link it..but it don't work...I create a index.js too but it don't work neither
please help..I'm very noob...thanks
Aaron:
This reply kindly brought something that could have been a solution but just made me lose more than 15 minutes of my time, as these first online courses have info about how to create a new project with a default html file, not about the original poster's issue.
The original poster's issue is that he has a new project with an index.html file, but no app.js file.
And he then doesn't understand where he could put the sampe code :
var win = Ti.UI.createWindow();
var view = Ti.UI.createView({backgroundColor:"red"});
win.add(view);
win.open();
... as whatever he puts in app.js is not executed.
The documentation in Titanium Dev Center fails to provide accurate information as it only mentions Titanium Mobile app.js and does not speak of index.html in the application structure.
After some starting experience on Titanium Mobile, I had to work on Titanium Desktop andactually just had the same problem as angel_ang, which brought me here.
So, here is the real answer :
Titanium Desktop applications do not need or start with an app.js file, but with index.html.
Deleting or removing this file never works as it will still be launched from the last build if need be.
Adding anything to app.js will never run as only index.html is run as a starting place.
Something that should have been a solution was found that to the following link:
http://www.youtube.com/watch?v=lgGVNB2nkKc&NR=1
This video is two online courses further from the link supplied by Aaron. At 0.19 seconds exactly, we see the starting code he has added to index.html.
You need to put a ... in your HEAD section, and add a function() there.
You may put the sample code inside this function.
Then you may even set the function to run when you click a button ().
Unfortunately, this doesn't work with me either.
I tried with the example code above but also with the other example (notification) mentioned in the online course.
It just seems that something is deprecated here and many documentations are outdated.
Anyone that could answer to this situation would be very helpful to us and many newcomers.
We just have an index.html that we can't use, instead of a running app.js file.