Is there a way to use any of the material-ui transition components on list elements so that they get animated on addition/deletion (but not mount)?
Just like here: https://reactcommunity.org/react-transition-group/transition-group
You can use the <Fade> transition (or any other transition that material-ui has) and wrap your list-items with that transition.
<Fade in timeout={1500}>
<ListItem key={value} role="listitem" button onClick={handleToggle(value)}>
<ListItemIcon>
<Checkbox
checked={checked.indexOf(value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ 'aria-labelledby': labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={`List item ${value + 1}`} />
</ListItem>
</Fade>
You can see a working example here: https://codesandbox.io/s/mui-fade-transition-list-item-e4i0c?file=/demo.js
The original code is from the example in the material ui transfer list page.
I'm using table and using this property.
<ColumnListItem type="Detail" detailPress="onShowItemEditDialog">
I want the place the icon on the left side.
Because I use responsivePopover.The popover is opening on the right side.
I think I will change the table elements in this popover.
Or is there another way to change the elements of the table?
What can be done for table edit?
Please help.
you can build your own ListItem.
<List headerText="Custom Content" mode="Delete" items="{path: '/ProductCollection'}" >
<CustomListItem>
<HBox>
<core:Icon size="2rem" src="sap-icon://attachment-photo" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" />
<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" >
<Link text="{Name}" target="{ProductPicUrl}" press="handlePress"/>
<Label text="{ProductId}"/>
</VBox>
</HBox>
</CustomListItem>
</List>
This example is taken from: https://openui5.hana.ondemand.com/#/sample/sap.m.sample.CustomListItem/code
A little tweak worked for me. Use the below code appropriately.
onAfterRendering: function() {
$( "thead .sapMListTblNavCol" ).insertAfter( "thead .sapMListTblHighlightCol" );
$( "tbody .sapMListTblNavCol" ).insertAfter( "tbody .sapMListTblHighlightCell" );
},
primefaces mobile commandLink action does not work, it's not loading the page with id="station1". f:setPropertyActionListener is work and call setSelectedStation() method .
<pm:page id="fastStationPage">
<pm:header title="Fast Charging Station" swatch="b" ></pm:header>
<pm:content>
<h:form id="stationsDetailsForm">
<p:growl id="messages" showDetail="true" />
<p:dataList value="#{navigationViewImpl.fastStationList}" var="station" type="ordered">
<p:commandLink value="#{station.name}" action="pm:station1?transition=slide" update=":station1:stationDetail">
<f:setPropertyActionListener value="#{station}" target="#{navigationViewImpl.selectedStation}" />
</p:commandLink>
</p:dataList>
</h:form>
</pm:content>
</pm:page>
<pm:page id="station1">
<pm:content>
<h:outputText id="stationDetail" value="#{navigationViewImpl.selectedStation.name}" escape="false"/>
</pm:content>
</pm:page>
public void setSelectedStation(StationDTO selectedStation) {
this.selectedStation = selectedStation;
}
I got answer. I not configure face-config.xml file. I am not add navigation-handler
<application>
<navigation-handler>
org.primefaces.mobile.application.MobileNavigationHandler
</navigation-handler>
</application>
We would like to change the color of a particular bar in the chart. Can someone share a code snippet to achieve the same? If we use color-pallete aggregation then color change is getting reflected to all the bars.
We are using makit library, please note that we had tried the same with viz library also.
Snippet from XML view:
<ma:Chart id="idChart1" height="50%" width="100%" type="Column"
rows="{/}" showRangeSelector="true"
showTableView="false" showTotalValue="false">
<ma:category>
<ma:Category column="type" displayName="Product" />
</ma:category>
<ma:values>
<ma:Value expression="tickets" displayName="Gross Value"
format="number" />
</ma:values>
<ma:columns>
<ma:Column name="type" value="{BillCycle}" />
<ma:Column name="tickets" value="{Volume}" type="number" />
</ma:columns>`enter code here`
</ma:Chart>
Regards,
DR
I have a weird problem with my first phonegap/cordova app for ios
i copy pasted the examples from
http://docs.phonegap.com/en/2.3.0/cordova_camera_camera.md.html#camera.getPicture
and
http://docs.phonegap.com/en/2.3.0/cordova_media_capture_capture.md.html#capture.captureImage
But when i press any of the buttons nothing happens, unless i double-tap the "home"-button on the iphone afterwards.
Here is my index.html:
<script src="assets/js/cordova.ios.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for Cordova to connect with the device
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready to be used!
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
// console.log(imageData);
// Get image handle
var smallImage = document.getElementById('smallImage');
// Unhide image elements
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
var largeImage = document.getElementById('largeImage');
// Unhide image elements
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
largeImage.src = imageURI;
}
// A button will call this function
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 50,
destinationType: destinationType.DATA_URL
});
}
// A button will call this function
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL
});
}
// A button will call this function
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
// Called if something bad happens.
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
<button onclick="capturePhoto();">Capture Photo</button>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
<script type="text/javascript" charset="utf-8">
// Called when capture operation is finished
function captureSuccess(mediaFiles) {
//var i, len;
//for (i = 0, len = mediaFiles.length; i < len; i += 1) {
// //uploadFile(mediaFiles[i]);
//}
//navigator.notification.alert('Weee', null, 'Great success!');
}
// Called if something bad happens.
function captureError(error) {
//var msg = 'An error occurred during capture: ' + error.code;
//navigator.notification.alert(msg, null, 'Uh oh!');
}
// A button will call this function
function captureImage() {
// Launch device camera application,
// allowing user to capture up to 2 images
navigator.device.capture.captureImage(captureSuccess, captureError, { limit: 2 });
}
// Upload files to server
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
ft.upload(path,
"http://my.domain.com/upload.php",
function (result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function (error) {
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}
</script>
<button onclick="captureImage();">Capture Image</button>
and here is my config.xml:
<name>yadda</name>
<description>
blabla
</description>
<author href="http://blabla.github.com"
email="blabla#gmail.com">
BlaBla
</author>
<icon src="icon.png" gap:role="default" />
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/network"/>
<feature name="http://api.phonegap.com/1.0/file"/>
<feature name="http://api.phonegap.com/1.0/camera"/>
<feature name="http://api.phonegap.com/1.0/media"/>
<feature name="http://api.phonegap.com/1.0/device"/>
<preference name="orientation" value="portrait" />
<preference name="webviewbounce" value="false" />
<preference name="prerendered-icon" value="true" />
<plugin name="Capture" value="CDVCapture" />
<plugin name="Camera" value="CDVCamera" />
does anyone have an idea as to what I'm doing wrong?
YES! i finally got it to work, i downgraded from phonegap 2.3.0 to 2.0.0
For anyone with the same problem here is my final code:
index.html
<script src="assets/js/cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Called when capture operation is finished
//
function captureSuccess(mediaFiles) {
//var i, len;
//for (i = 0, len = mediaFiles.length; i < len; i += 1) {
// //uploadFile(mediaFiles[i]);
//}
//navigator.notification.alert('Weee', null, 'Great success!');
}
// Called if something bad happens.
//
function captureError(error) {
//var msg = 'An error occurred during capture: ' + error.code;
//navigator.notification.alert(msg, null, 'Uh oh!');
}
// A button will call this function
//
function captureImage() {
// Launch device camera application,
// allowing user to capture up to 2 images
navigator.device.capture.captureImage(captureSuccess, captureError, { limit: 2 });
}
// Upload files to server
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
ft.upload(path,
"http://my.domain.com/upload.php",
function (result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function (error) {
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}
</script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for Cordova to connect with the device
//
function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); }
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
alert("device is ready");
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
// console.log(imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 50,
destinationType: destinationType.DATA_URL
});
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL
});
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body onLoad="onLoad()">
<button onclick="capturePhoto();">Capture Photo</button> <br><br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br><br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
<br><button onclick="captureImage();">Capture Image</button> <br>
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.getting.started"
version = "1.0.0">
<name>bla</name>
<description>
bla
</description>
<author href="http://bla.github.com"
email="bla#gmail.com">
bla
</author>
<icon src="icon.png" gap:role="default" />
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/network"/>
<feature name="http://api.phonegap.com/1.0/file"/>
<feature name="http://api.phonegap.com/1.0/camera"/>
<feature name="http://api.phonegap.com/1.0/media"/>
<feature name="http://api.phonegap.com/1.0/device"/>
<feature name="http://api.phonegap.com/1.0/notification"/>
<feature name="http://api.phonegap.com/1.0/battery"/>
<preference name="orientation" value="portrait" />
<preference name="webviewbounce" value="false" />
<preference name="prerendered-icon" value="true" />
<preference name="phonegap-version" value="2.0.0" />
<preference name="fullscreen" value="false" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="default" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-installLocation" value="internalOnly" />
<preference name="target-device" value="universal" />
<preference name="autohide-splashscreen" value="true" />
<preference name="load-url-timeout" value="60000" />
<preference name="show-splashscreen-spinner" value="true" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="allow-inline-media-playback" value="false" />
<preference name="launch-mode" value="standard" />
<plugin name="Capture" value="CDVCapture" />
<plugin name="Camera" value="CDVCamera" />
</widget>
THANKS! to everyone who helped :)
I dont have any experience with ios but i think better you do a simple code to open camera something like
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
If this works fine add your further code step by step.
These are preferences in using in xml
<preference name="orientation" value="landscape" />
<preference name="fullscreen" value="false" />
<preference name="phonegap-version" value="2.0.0" />
<preference name="webviewbounce" value="false" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="default" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-installLocation" value="internalOnly" />
<preference name="prerendered-icon" value="false" />
<preference name="target-device" value="universal" />
<preference name="autohide-splashscreen" value="false" />
<preference name="load-url-timeout" value="60000" />
<preference name="show-splashscreen-spinner" value="true" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="allow-inline-media-playback" value="false" />
<preference name="launch-mode" value="standard" />
<plugin name="Camera" value="CDVCamera" />
<feature name="http://api.phonegap.com/1.0/camera"/>
<feature name="http://api.phonegap.com/1.0/file"/>
<feature name="http://api.phonegap.com/1.0/media"/>
<feature name="http://api.phonegap.com/1.0/notification"/>
<feature name="http://api.phonegap.com/1.0/battery"/>
<feature name="http://api.phonegap.com/1.0/device"/>
This may be due to mismatch between downloaded version of PhoneGap and sample code of Camera.
You can check camera sample code version on top-right bar of Phonegap.com as show in below screenshot.
Try adding a body tag to your document and something like:
<body onLoad="onLoad()">
Then add the device ready listener to the onLoad function:
function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); }
This is because you want to make sure all of the DOM elements are loaded before you check the deviceready state.