How to use Strophe.js in ionic 2 for chat with XMPP? - ionic-framework

I want to create a chat module in ionic platform then i got example from here, but this solution looks older and its using ionic 1 , using $scope and and code is written in .js files which is including below mentioned files...
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
In my application .ts files are used and different methods for controlling and routing and this code is using different methods. and i'm unable to find example of using strophe.js with ionic 2 and typescript code. can anyone help me? by giving example, link or steps of using strophe.js in ionic 2 such as how to make connection, how to get archived messages, manage presense, get contact list etc.

Related

How to connect Google Analytics in a Flutter Web App?

I'm trying to use the Google API Package (Pub Dev) but with no lucky to undestand how to connect it in my Flutter Project.
Hi 🙂 you need to use this package https://pub.dev/packages/firebase_analytics
you can find a sample App using analytics following this link
Google Analytics works on mobile Apps too and provides all sorts of useful features check this link for more info 😉
You need to add dependency for analytics in android/app/build.gradle, implementation 'com.google.firebase:firebase-analytics'. If you need to log events then you might want to use the package https://pub.dev/packages/firebase_analytics. Otherwise just adding above dependency is sufficient.
If you are looking for a simple approach more than using a package, then you can follow the below solution.
Add the following app.js in web/ directory
// file: /web/app.js
function sendNavigation(location) {
// Replace UA-XXXXXXXXX-X with Google Analytics ID
gtag('config', 'UA-XXXXXXXXX-X', { page_path: location });
}
Add the script into web/index.html by adding
<head>
<!--...-->
<script src="app.js" defer></script>
</head>
Now, you can simply call
js.context.callMethod('sendNavigation', ['routePath']);
when the user navigates to the page in dart file.
You can learn more about this from a blog I wrote - link

Use Chartjs-Annotation-Plugin without using "import"

Is there a way to use the newest version of the chart-annotation-plugion as an inline plugin?
How I currently do it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation#1.0.0-rc/dist/chartjs-plugin-annotation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-beta.1/chartjs-plugin-datalabels.min.js" ></script>
But in newer versions of ChartJS you need to register your plugins, but I dont think the plugin has a global property to register it, like the datalabel plugin (https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#installation) has.
Here are the docs for the annotation plugin: https://www.chartjs.org/chartjs-plugin-annotation/guide/integration.html.
Any help is greatly appreciated.
Late to the party but I don't see a response yet and I was also having trouble figuring it out.
Simply include
<script>
Chart.register('chartjs-plugin-annotation');
Chart.register('chartjs-plugin-datalabels');
// ... rest of your code
</script>
somewhere near the top of your scripts after your CDN imports.
As per the Chartjs plugin documentation, this will work with any plugin that follows the naming convention chartjs-plugin-*
Edit:
Adding a working example; credit to #dennis-bauszus for most of the chart layout.
https://codepen.io/jarrilla/pen/OJjMVEo

How to load ag-grid-react from a CDN

Trying like this (full HTML file contents):
<script src="https://unpkg.com/react#16.5.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.5.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/ag-grid-community#19.0.0/dist/ag-grid-community.min.js"></script>
<script src="https://unpkg.com/ag-grid-react#19.0.0/umd/ag-grid-react.min.js"></script>
But ag-grid-react doesn't load:
Uncaught TypeError: Cannot read property 'ColDefUtil' of undefined
ag-grid-community.min.js has created window.agGrid and there is ColDefUtil there, but ag-grid-react fails to find it.
Please advise.
I ended up dynamically loading (heavy) ag-grid from a CDN and compiling (light) ag-grid-react into one of app chunks and wiring them together via webpack externals.

SAPUI5 creating, but not running preload files

I have set up the following bootstap, with data-sap-ui-preload set to "auto"
<!-- Bootstrap the UI5 core library -->
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="auto"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='xxxxxxxxxxx'>
</script>
This creates a Component-preload.js file in all of my 3 separate apps.
Unfortunately, when I run it, the files aren't minified, and I can access the controller etc directly.
Has anyone else came across this issue?
if I understand correctly you are expecting that "data-sap-ui-preload" creates additional files and also minifies the code. Is that correct?
If i read the documentation correctly this is not what this parameter is used for.
If you are looking of ways on how to "minify" your could you should look into GruntJS. There is also a UI5 Grunt task runner that is used by SAP itself.

In Gwt where the path of script(appName.gwt.js) which loads gwt app comes from?

I have started Gwt last week. And I was trying to create application without using sample app. So initially i have typed following line in html file(Application Name-loginAppGwt, package- LoginAppGwt)
<script type="text/javascript" language="javascript" src="LoginAppGwt/LoginAppGwt.nocache.js"></script>
but it was not loading the gwt module. When i changed it to
<script type="text/javascript" language="javascript" src="loginAppGwt/loginAppGwt.nocache.js"></script>
It was working fine.
But in one of the application which i have created using sample application of gwt, there was written(application name- testingApp, packagename- test)
<script type="text/javascript" language="javascript" src="testingapp/testingapp.nocache.js"></script>
So , my doubt is where this name comes from like in my application loginAppGwt was correct but in sample application testingapp was correct??
Thanks in advance.
Module name can be manipulated via <module rename-to="newname">. Then the path would be newname/newname.nocache.js
Check if your example had something similar in it's module descriptor.
Update:
Loading of JS scripts is affected by filesystem case-sensitivity because scripts are loaded from files. However, GWT-RPC is handled by servlets and is always case sensitive. This is important because, GWT-RPC urls are prepended with package name which seems to be derived from first part of script name in a host file (I just tested this).
So while the main script would be loaded on case-insensitive filesystems regardless of the script name case, the GWT RPC would only work if package names are equal.