Develop Reference

Binding ResourceBundle property to list item

In SAPUI5, you can often bind resource bundle properties to items in several ways. I'm attempting to do it in JavaScript, using data provided by an Odata service, but the methods I've found here so far haven't worked. I've tried two different ways:
How to Use Internalization i18n in a Controller in SAPUI5?
binding issue with sap.m.List and model configured in manifest.json
And neither of these have worked. I feel this is because I'm inside a items list, inside of a dialog that's causing my issue:
My code is:
var resourceBundle = this.getView().getModel("i18n");
if (!this.resizableDialog) {
this.resizableDialog = new Dialog({
title: 'Title',
contentWidth: "550px",
contentHeight: "300px",
resizable: true,
content: new List({
items: {
path: path,
template: new StandardListItem({
title: resourceBundle.getProperty("{Label}"),//"{ path : 'Label', fomatter : '.getI18nValue' }",
description: "{Value}"
})
}
}),
beginButton: new Button({
text: 'Close',
press: function () {
this.resizableDialog.close();
}.bind(this)
})
});
getI18nValue : function(sKey) {
return this.getView().getModel("i18n").getProperty(sKey);
},
Using the 2nd method above, never calls the JavaScript method. I didn't think it would work, as it's more JSON based. The first method, loads the data fine, but instead of showing the resource bundle text, it shows just the text found inside of the {Label} value.
The value found inside of {Label} matches the key found inside of the resouce bundle i.e. without the i18n> in front, like you would have in a view.
Anyone have any suggestions?

Use of formatter will solve your problem, but the way you're doing it is wrong. Try this, it will solve your problem.
var resourceBundle = this.getView().getModel("i18n");
if (!this.resizableDialog) {
this.resizableDialog = new Dialog({
title: 'Title',
contentWidth: "550px",
contentHeight: "300px",
resizable: true,
content: new List({
items: {
path: path,
template: new StandardListItem({
title: {
parts: [{ path: "Label" }],
formatter: this.getI18nValue.bind(this)
},
description: "{Value}"
})
}
}),
beginButton: new Button({
text: 'Close',
press: function () {
this.resizableDialog.close();
}.bind(this)
})
});
}
And the formatter function getI18nValue will be like this,
getI18nValue: function(sKey) {
return this.getView().getModel("i18n").getResourceBundle().getText(sKey);
},

Automatically create header from JSON file, Bootstrap-table

I'm working with this bootstrap library and actually everything works fine. The question is, Can bootstrap-table generate header automatically in depend of JSON file? I've tried to find any information about that, but unlucky. Now my header is generated from script like from this example:
function initTable() {
$table.bootstrapTable({
height: getHeight(),
columns: [{
field: 'field1',
title: 'title1',
sortable: true
}, {
field: 'field2',
title: 'title2',
sortable: true
}, {
field: 'field3',
title: 'title3',
sortable: true
}, {
field: 'Actions',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
],
formatNoMatches: function () {
return "This table is empty...";
}
});
Does anyone how to generate header automatically?

Populating from a flat json file is definetly possible but harder than from a seperate (slimmer and preped) data request, because title and other attributes 'might' have to be guessed at.
Ill show basic approach, then tell you how to make it work if stuck with a flat file that you CAN or CANT affect the format of (important point, see notes at end).
Make a seperate ajax requests that populates var colArray = [], or passes direct inside done callback.
For example, in callback (.done(),.success(), ect) also calls to the function that contains the js init code for the table.
You might make it look something like this:
function initTable(cols) {
cols.push({
field: 'Actions',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
});
$("#table").bootstrapTable({
height: getHeight(),
columns: cols,
formatNoMatches: function () {
return "This table is empty...";
}
});
}
$(document).ready(function(){
$.ajax({
method: "POST",
url: "data/getColumns",
// data: { context: "getColumns" }
datatype: "json"
})
.done(function( data ) {
console.log( "getCols data: ", data );
// Prep column data, depending on what detail you sent back
$.each(data,function(ind,val){
data.sortable = true;
});
initTable(data);
});
});
Now, if you are in fact stuck with a flat file, point the ajax towards that then realise the question is whether you can edit the contents.
If yes, then add a columns array into it with whatever base data (title, fieldname, ect) that you need to help build your columns array. Then use responseHandler if needed to strip that columns array if it causes issues when loading into table.
http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options
http://issues.wenzhixin.net.cn/bootstrap-table/ (click 'see source').
If no, you cant edit contents, and only have the fieldname, then look at using that in the .done() handler with whatever string operation (str_replace(), ect) that you need to make it look the way you want.

How to call an internal javascript function from url?

I'm collecting some data from a series of similar webpages and store them in excel sheet. I'm using the opener class in urllib2 within python for this work.
The problem is that in one group of these pages, you need too click on a hyperlink so that the needed data appear.
Is there any way that I could fake the click on this hyperlink and include it in the address that I send within my python code?
This is the href tag of the link:
<a href="#" onClick="refresh_reg_table();refresh_reg_list(); return false;">
And here are the functions called in onClick:
function refresh_reg_table(order){
Ajax.Responders.register({
onCreate: function() {
$('ajax_spinner2').show();
},
onComplete: function() {
$('ajax_spinner2').hide();
}
});
new Ajax.Updater('table_registrations', 'ajax/get_table_registrations.php', {
method: 'get',
parameters: {
table: 'registrations',
idevent : 143593,
sorted : order},
evalScripts: true,
});
}
function refresh_reg_list(){
Ajax.Responders.register({
onCreate: function() {
$('ajax_spinner2').show();
},
onComplete: function() {
$('ajax_spinner2').hide();
}
});
new Ajax.Updater('reg_list', 'ajax/get_list_registrations.php', {
method: 'get',
parameters: {
type: 'table_name_reg',
idevent : 143593
},
evalScripts: true,
});
}

All you can do through the address bar is using the javascript: prefix and it would run all your JavaScript code after that javascript: prefix.
you also better change the your hyperlink like:
...

Use javascript:yourFunction() to start the page's function - i dont think there's any other way around it

TIBlob passed through application-level event becomes NULL on the receiving end

I have a very simple app where the user selects an image from the iOS photo gallery.
The TIBlob passed to Titanium.Media.openPhotoGallery.success event is then passed to an application-level event.
The issue is that the TIBlob is NULL when the application level event is received.
Below is a complete code sample.
Titanium.UI.setBackgroundColor('#000');
var win = Ti.UI.createWindow({title: 'Camera Test', exitOnClose: true, fullscreen: true, backgroundColor: '#ffffff'});
var bt = Ti.UI.createButton({'title': 'Gallery', top: 10, width: 200, height: 50});
bt.addEventListener('click', function(e) {
Titanium.Media.openPhotoGallery({
success:function(event) {
if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
alert(event.media);
Ti.App.fireEvent('uploadImage', {image: event.media, source: 'gallery'});
}else {
alert('Image was not uploaded because the type was invalid.');
}
},
cancel:function() {
},
error:function(err) {
alert('Error selecting image from gallery: ' + err);
Ti.API.error(err);
},
allowEditing: false,
autohide: true,
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
});
});
Ti.App.addEventListener('uploadImage', function(e) {
alert(e.image);
alert(e.source);
});
win.add(bt);
win.open();
Any suggestions?

The Appcelerator Guides say that objects passed through and event must be JSON-serializable https://wiki.appcelerator.org/display/guides/Event+Handling#EventHandling-Firingevents. A TiBlob is not serializable, so I think the blog is not making it through the event.
If this really is a very simple app, I would suggest changing that to a function call instead of firing an event and the blob will be preserved. However, if this absolutely needs to be an event, you could pass event.media.nativePath instead and then read a blob out of that when you actually need to do something with it.

ExtJS 4 - How to download a file using Ajax?

I have a form with various textfields and two buttons - Export to Excel and Export to CSV.
The user can provide the values to different fields in the form and click one of the buttons.
Expected behaviour is that an Ajax request should be fired carrying the values of fields as parameters and the chosen file (Excel/CSV as per the button click) should get downloaded (I am not submitting the form as there needs to be done some processing at the values before submit).
I have been using the following code in success function of Ajax request for the download:
result = Ext.decode(response.responseText);
try {
Ext.destroy(Ext.get('testIframe'));
}
catch(e) {}
Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id:'testIframe',
css: 'display:none;visibility:hidden;height:0px;',
src: result.filename,
frameBorder: 0,
width: 0,
height: 0
});
The above code has been working fine in the case when the file is created physically at the server. But in my current project, the file is not created at the server, rather the contents are just streamed to the browser with proper headers.
Thus, is there a way to download a file using Ajax when the file is not present at the server physically? Just to add that I have a long list of parameters which I need to send to the server and hence can not add them all to the src of iframe.
Could anyone guide at this?
Thanks for any help in advance.

You may use component like this:
Ext.define('CMS.view.FileDownload', {
extend: 'Ext.Component',
alias: 'widget.FileDownloader',
autoEl: {
tag: 'iframe',
cls: 'x-hidden',
src: Ext.SSL_SECURE_URL
},
stateful: false,
load: function(config){
var e = this.getEl();
e.dom.src = config.url +
(config.params ? '?' + Ext.urlEncode(config.params) : '');
e.dom.onload = function() {
if(e.dom.contentDocument.body.childNodes[0].wholeText == '404') {
Ext.Msg.show({
title: 'Attachment missing',
msg: 'The document you are after can not be found on the server.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
})
}
}
}
});
Put it somewhere in viewport, for example:
{
region: 'south',
html: 'South',
items: [
{
xtype: 'FileDownloader',
id: 'FileDownloader'
}
]
}
Do not forget to require it in your viewport class:
requires: [
'CMS.view.FileDownload'
]
Action handler may look like this:
var downloader = Ext.getCmp('FileDownloader')
downloader.load({
url: '/attachments/' + record.get('id') + '/' + record.get('file')
});
It's very important to have Content-Disposition header in response, otherwise nothing is downloaded.
Regards go to http://www.quispiam.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4
This thing works for me.