Everytime I've tried to test my app on my phone, the app opens quickly, shows a white screen and then closes right after. It then shows a prompt that says "Unfortunately, the app has stopped."
I have already checked the build path, I've made sure that Google play services library is added. I've tried searching several threads already on how to fix and none of them are working. So I've made this post as a last resort to get someone to check it manually.
Here is my code:
package com.example.vendsale;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.content.IntentSender;
import android.database.Cursor;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
import com.google.android.gms.common.ConnectionResult;
import com.google.android.gms.common.GooglePlayServicesClient;
import com.google.android.gms.common.GooglePlayServicesUtil;
import com.google.android.gms.location.LocationClient;
import com.google.android.gms.maps.CameraUpdate;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.CircleOptions;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
public class MainActivity extends FragmentActivity implements
GooglePlayServicesClient.ConnectionCallbacks,
GooglePlayServicesClient.OnConnectionFailedListener
{
private static final int CONNECTION_FAILURE_RESOLUTION_REQUEST = 9000;
LocationClient mNewLocationClient;
private GoogleMap map;
private LatLng userLocation;
private DatabaseConnector dbConnector;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
checkGooglePlayServicesAvailability();
dbConnector = new DatabaseConnector(getApplicationContext());
map = ((MapFragment) getFragmentManager()
.findFragmentById(R.id.map)).getMap();
map.setMapType(GoogleMap.MAP_TYPE_NORMAL);
map.getUiSettings();
map.setMyLocationEnabled(true);
mNewLocationClient = new LocationClient(this, this, this);
}
protected void onStart() {
super.onStart();
mNewLocationClient.connect();
userLocation = new LatLng(mNewLocationClient.getLastLocation()
.getLatitude(), mNewLocationClient.getLastLocation()
.getLongitude());
CameraUpdate update = CameraUpdateFactory.newLatLng(userLocation);
map.animateCamera(update);
}
Manifest:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.vendsale"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="11"
android:targetSdkVersion="17" />
<permission
android:name="com.example.vendsale.permission.MAPS_RECEIVE"
android:protectionLevel="signature" />
<uses-feature
android:glEsVersion="0x00020000"
android:required="true" />
<uses-permission
android:name="com.example.vendsale.permission.MAPS_RECEIVE"
/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
<activity
android:name="com.example.vendsale.MainActivity"
android:label="#string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="MY KEY" />
</application>
</manifest>
Activity Main:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
style="#style/AppBaseTheme"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="left"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/editText1"
android:layout_alignBottom="#+id/editText1"
android:layout_alignRight="#+id/map"
android:onClick="onClick_Search"
android:text="#string/ButtonText"
android:typeface="normal" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="left"
android:hint="#string/message"
android:inputType="text"
android:typeface="normal"
android:layout_toLeftOf="#id/button1" />
<fragment
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_below="#id/editText1"
/>
</RelativeLayout>
You have used the supportmapfragment class in your xml.
Add this import import com.google.android.gms.maps.SupportMapFragment;
and change your map intialisation line as:
map = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map))
.getMap();
I am assuming the mNewLocationClient part in your code is working correctly and there are no nullpointers there.
Related
The bounty expires in 2 days. Answers to this question are eligible for a +100 reputation bounty.
Mr.DevEng is looking for a canonical answer.
I am beginner in salesforce and now practicing lwc session by doing event handling task. And the practice tasks includes the child component method invocation from parent component.When I created the components and loading the parent component via local development server , I am getting the message that app:5348 Uncaught TypeError: this.template.querySelector(...).changeMessage is not a function in console and not getting any reponse in parent,
My parent component name is parentCmp. and my parentCmp.js is like the following,
import { LightningElement } from 'lwc';
export default class ParentCmp extends LightningElement {
handleChangeEvent(event){
this.template.querySelector('div').changeMessage(event.target.value);
}
}
And parentCmp.html,
<template>
<lightning-card title="Parent to Child Demo">
<lightning-layout>
<lightning-layout-item flexibility="auto" padding="around-small" >
<lightning-input label="Enter the Message" onchange={handleChangeEvent}>
</lightning-input>
</lightning-layout-item>
< <lightning-layout-item flexibility="auto" padding="around-small">
<div></div>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
parentCmp.js-meta.xml,
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parentCmp">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
My child component js file is childCmp.js,
import { LightningElement, track, api } from 'lwc';
export default class ChildCmp extends LightningElement {
#track Message;
#api
changeMessage(strString) {
this.Message = strString.toUpperCase();
}
}
And package.xml is like the following,
<?xml version="1.0" encoding="UTF-8"?>
<Package xmlns="https://soap.sforce.com/2006/04/metadata">
<types>
<members>*</members>
<name>LightningComponentBundle</name>
</types>
<version>52.0</version>
</Package>
I debugged the component by cross checking the component definition in xml files and syntax. But still getting the same error. Can anyone guide me or provide related documentation to resolve this problem please?
Seems like a simple thing. How do I put a title on the navbar? Here's my App.js:
import React from 'react';
import { Admin, Resource } from 'react-admin';
import { UserList } from './Users';
import { ItemList, ItemEdit, ItemCreate } from './Items';
import { ProductTypeList, ProductTypeEdit, ProductTypeCreate } from './ProductType'
import Dashboard from './Dashboard'
import jsonServerProvider from 'ra-data-json-server';
import dataProvider from './dataProvider';
import ItemIcon from '#material-ui/icons/ViewListRounded';
import ProductTypeIcon from '#material-ui/icons/LocalOffer';
import UserIcon from '#material-ui/icons/Group';
import authProvider from './authProvider'
const App = () => (
<Admin
dashboard={Dashboard}
authProvider={authProvider}
dataProvider={dataProvider} >
<Resource
name="items"
list={ItemList}
edit={ItemEdit}
create={ItemCreate}
icon={ItemIcon} />
{<Resource
name="productTypes"
options={{ label: 'Product Types' }}
list={ProductTypeList}
edit={ProductTypeEdit}
create={ProductTypeCreate}
icon={ProductTypeIcon} />}
<Resource
name="users"
list={UserList}
icon={UserIcon} />
</Admin >
);
export default App;
Running react-admin version 3.4.2. In the tutorial it shows "React Admin" as the title after adding the Dashboard. But after recreating a fresh app using npm create-react-app and going through the tutorial, I don't see a title in the navbar. Is this something that should be possible out of the box or do I need to create a custom navbar?
Train (above) led me to think of the component. I imported it and used it within and set title="My Title" and it did show in the navbar. Maybe I misread the docs, but I don't remember seeing anything about , just the title= attribute of , like so:
<Admin
// layout={CustomLayout}
dashboard={Dashboard}
authProvider={authProvider}
dataProvider={dataProvider} >
<Title title="g3tools Admin" />
<Resource
name="items"
list={ItemList}
edit={ItemEdit}
create={ItemCreate}
icon={ItemIcon} />
But, thankfully, it gets me to the next step: Now the title shows up in the navbar but when I choose a resource from the left menu, the resource name appends to the title.
Any suggestions on how to avoid the resource title cramming into the admin title? I'm sure I'm missing something obvious. Options would be: a) Dynamically ad a space or dash after title when resource title is displayed, or b) don't display the resource title (how would I do that?)
I think ultimately, I'd rather have a breadcrumb or show the resource title in the center of the navbar, but maybe I'll need a custom navbar for that?? Any guidance is welcome.
UPDATE:
I see in the docs for Customizing the AppBar how to not show the individual resource page title: Just remove the id="react-admin-title" from the component and then add text to the element:
<AppBar {...props}>
<Typography
variant="h6"
color="inherit"
className={classes.title}
>g3tools Admin</Typography>
</AppBar>
take a look in the docs, try this
<Admin
// add the title prop below
title="my page title"
dashboard={Dashboard}
authProvider={authProvider}
dataProvider={dataProvider} >
In react-admin, SimpleForm should automatically call PUT request, however it does not work. Instead, for some odd reason, it's calling GET request whenever I click the save button. I'm new to react-admin and I've been looking around for solutions but I have no idea what's wrong. I have tried calling PUT request with postman and it works, so I know for sure that my backend is not the problem.
import React from 'react';
import { Provider } from 'react-redux';
import { createHashHistory } from 'history';
import simpleRestProvider from 'ra-data-simple-rest';
import createAdminStore from '../createAdminStore';
import { Admin, Resource } from 'react-admin';
import {
CategoryList,
CategoryShow,
ItemList,
ItemShow,
ItemEdit
} from '../adminComponents/posts';
const dataProvider = simpleRestProvider('http://localhost:3000/api');
const history = createHashHistory();
const AdminContainer = () => (
<Provider store={createAdminStore({dataProvider, history })}>
<Admin dataProvider={dataProvider} history={history} title="My Admin">
<Resource name="categories" list={CategoryList} show={CategoryShow} />
<Resource name="items" list={ItemList} show={ItemShow} edit={ItemEdit}/>
</Admin>
</Provider>
);
Here's Item Edit component:
export const ItemEdit = props => (
<Edit {...props} >
<SimpleForm>
<TextInput disabled source="id" />
<TextInput source="name" />
<TextInput source="description" />
<NumberInput source="price" />
{/* <TextInput source="selections" /> */}
<ReferenceInput source="category_id" reference="categories">
<SelectInput optionText="name" />
</ReferenceInput>
</SimpleForm>
</Edit>
);
It might not be related, but I just resolved this issue using react-admin 3.7. I've got an Edit component wrapping a SimpleForm, and when I removed the onSuccess attribute, the form started working again.
Consider the react-admin app like presented below. I'm planning to code split in a way that everything in './posts' and './users' is only loaded after the user is logged in.
I plan to use the dynamic import() syntax that I can use so that webpack automatically starts code-splitting the app.
The problem I see is that all app components are imported with the definition of the app. A dynamic import of stuff in './posts' and './users' would not be split since it's imported at the app itself.
How can I setup and split this codebase so that stuff in './posts' and './users' is loaded only after the user has logged in?
import React, { Component } from 'react';
import { Admin, Resource } from 'react-admin';
import { Login } from 'ra-ui-materialui';
import { authProvider, dataProvider, i18nProvider } from './providers';
// vvv - to be loaded after the user has logged in
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
import { UserList, UserEdit, UserCreate, UserIcon } from './users';
// ∧∧∧
class App extends Component {
render() {
return (
<Admin
title="MyApp"
loginPage={Login}
dataProvider={dataProvider}
authProvider={authProvider}
i18nProvider={i18nProvider}
>
<Resource
name="posts"
list={PostList}
edit={PostEdit}
create={PostCreate}
icon={PostIcon}
/>
<Resource
name="users"
list={UserList}
edit={UserEdit}
create={UserCreate}
icon={UserIcon}
/>
</Admin>
);
}
}
export default App;
Wrap your "posts" and "users" components with react-loadable.
My recent usages (work with pure react-router app and react-admin app!)
import Loadable from 'react-loadable';
const AsyncCrontabList = Loadable({
loader: () => import('./containers/Crontab/CrontabList'),
loading: Loading
});
<Resource name="crontabs" context="interval"
options={{ label: 'Crontabs', group: 'Automation' }} icon={<TimerIcon/>}
list={AsyncCrontabList}
create={AsyncCrontabCreate}
edit={AsyncIntervalEdit}/>
After that, I can see components are chunked in F12 - Debug.
As I know, these chunks would be loaded (actually imported) when we navigate to the correct path. And with react-admin, a resource is identified and navigated by a name, so when you apply the loadable method here, it would work! That's my use cases.
From what i understood you want to show posts and users only after the login so something you can do is wrap the other to components in a condition using a state variable and pass a function to your Admin component and call it when login is successful something like this:
import React, { Component } from 'react';
import { Admin, Resource } from 'react-admin';
import { Login } from 'ra-ui-materialui';
import { authProvider, dataProvider, i18nProvider } from './providers';
// vvv - to be loaded after the user has logged in
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
import { UserList, UserEdit, UserCreate, UserIcon } from './users';
// ∧∧∧
class App extends Component {
state:{
loggedIn: false,
}
onLoginSuccess(){
this.setState({loggedIn: true});
}
render() {
return (
<Admin
title="MyApp"
loginPage={Login}
onLoginSuccess={this.onLoginSuccess.bind(this)}
dataProvider={dataProvider}
authProvider={authProvider}
i18nProvider={i18nProvider}
>
{(this.state.loggedIn) &&
<Resource
name="posts"
list={PostList}
edit={PostEdit}
create={PostCreate}
icon={PostIcon}
/>
<Resource
name="users"
list={UserList}
edit={UserEdit}
create={UserCreate}
icon={UserIcon}
/>
}
</Admin>
);
}
}
export default App;
or the better way might be to create a separates routes file and handle
all this logic there
I cannot get the look controls to work with aframe-react. WASD controls work fine, and the assets appear fine.
import React from 'react';
import 'aframe';
import {Entity, Scene, Animation} from 'aframe-react';
class AugmentedForest extends React.Component {
render() {
return (
<Scene>
<a-assets>
<img id="forest-360" src="./images/forest_360.JPG"/>
</a-assets>
<Entity>
<Entity camera="" look-controls="" wasd-controls=""/>
</Entity>
<a-sky src="#forest-360"/>
</Scene>
);
}
}
export default AugmentedForest;