I'm pretty new to Titanium and I have to do this for a school project. Anyway I can't get text to show itself in tables. Help!
This is my code:
// resourcesDirectory is actually the default location, so the first
// argument could be omitted here.
var file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "textfile.txt");
var filet1 = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "table1.txt");
var filet2 = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "http://pastebin.com/raw.php?i=JDCZyfw3");
//http://www.google.com/humans.txt
var xhr = Titanium.Network.createHTTPClient();
xhr.open("GET","http://www.google-analytics.com/ga.js");
xhr.onload = function(){
// check status of connection to server
statusCode = xhr.status;
//check the response code returned
if(statusCode == 200)
{
var doc = this.responseText;
//write data from downloaded text file to local text file
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'test.txt');
f.write(doc);
}
};
xhr.send();
//-----------------------------------------------------------------------
//---------------------local file read---------------------------------------
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, 'test.txt');
// read the file into contents var
//var contents = f.read();
// print out contents of file
//Ti.API.info('contents = ' + contents.text);
//-----------------------------------------------------------------------
//--------------------------end of file read--------------------------
var content = file.read();
var content2 = f.read();
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#DCE6F2');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
title:"Niveau's",
backgroundColor:'#DCE6F2',
window: win1
});
var header= Titanium.UI.createView({
backgroundImage:'logo.jpg',
//backgroundColor: 'black',
top: 0, left:0,
height:65, width:320
});
//win1.add(header);
var tab3 = Titanium.UI.createWindow({
title:'Leerwegen',
backgroundColor:'#DCE6F2',
window: win3
});
var tab4 = Titanium.UI.createWindow({
title:'Instellingen',
backgroundColor:'#DCE6F2',
window: win4
});
var data = [
{title:'Niveau 2', hasChild:true, dest:'C:\Users\Rick\Documents\Titanium_Studio_Workspace\mbo app pdh\Resources\Car_1.js'},
{title:'Niveau 3', hasChild:true, dest:'C:\Users\Rick\Documents\Titanium_Studio_Workspace\mbo app pdh\Resources\Car_2.js'},
{title:'Niveau 4', hasChild:true, dest:'C:\Users\Rick\Documents\Titanium_Studio_Workspace\mbo app pdh\Resources\Car_3.js'}
];
var table = Ti.UI.createTableView({
data: data
});
table.addEventListener('click', function(e){
if (e.rowData.hasChild) {
var newWin = Ti.UI.createWindow({
url: e.rowData.url,//dest
title: e.rowData.title,
backgroundColor: '#DCE6F2'
});
tab1.open(newWin);
}
});
var view = Ti.UI.createView();
view.add(table);
win1.add(view);
var label1 = Titanium.UI.createLabel({
color:'#999',
text:filet2,
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
var label2 = Titanium.UI.createLabel({
color:'#999',
text: content2,
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'left',
width:'auto'
});
//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
title:'Domeinen',
backgroundColor:'#DCE6F2'
});
var win3 = Titanium.UI.createWindow({
title:'Leerwegen',
backgroundColor:'#DCE6F2'
});
var win4 = Titanium.UI.createWindow({
title:'Instellingen',
backgroundColor:'#DCE6F2'
});
var tab3 = Titanium.UI.createTab({
title:'Leerwegen',
// backgroundColor:'#DCE6F2',
window:win3
});
var tab4 = Titanium.UI.createTab({
title:'Instellingen',
window:win4
});
var tab2 = Titanium.UI.createTab({
// icon:'KS_nav_ui.png',
title:'Domeinen',
window:win2
});
var tab1 = Ti.UI.createTab({
title: "Niveau's",
window: win1
});
win2.add(label2);
win1.add(label1);
//
// add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.addTab(tab3);
tabGroup.addTab(tab4);
tabGroup.open();
This is my table file (car_3.js)
var view_car_3 = Ti.UI.createView();
var label_car_3 = Ti.UI.createlabel({
text: 'lorum ipsum nogwat',
height: 35,
width: 150 ,
top: 120
});
view_car_3.add(label_car_3);
Ti.UI.currentWindow.add(view_car_3);
Does anyone know how to make the text appear in the table niveau 4?
first and for most...if you put all your files under resources folder then no need to give whole path...so do follow...
var data = [
{title:'Niveau 2', hasChild:true, dest:'Car_1.js'},
{title:'Niveau 3', hasChild:true, dest:'Car_2.js'},
{title:'Niveau 4', hasChild:true, dest:'Car_3.js'}
];
and variable is dest not url so you need to change this in table click event
table.addEventListener('click', function(e){
if (e.rowData.hasChild) {
var newWin = Ti.UI.createWindow({
url: e.rowData.dest,
title: e.rowData.title,
backgroundColor: '#DCE6F2'
});
Related
I am using this code to open a file, it displays the url in the console but it does not open it in a new window.
ft.openFile = function(id) {
FileService.download(id).then(function(resp) {
console.log(resp.headers('Content-Type'));
var blob = new Blob([resp.data], {
type: resp.headers('Content-Type')
});
var url = $window.URL || $window.webkitURL;
var fileUrl = url.createObjectURL(blob);
window.open(fileUrl);
console.log(fileUrl);
})
ft.openFile = function(id){
FileService.download(id).then(function(resp){
console.log(resp.headers('Content-Type'));
var blob = new Blob([resp.data],{type: resp.headers('Content-Type')});
var url = $window.URL||$window.webkitURL;
var fileUrl = url.createObjectURL(blob);
window.open(fileUrl, '_self'); //same window
//or
window.open(fileUrl, '_blank'); //new window
console.log(fileUrl);
})
Use this:
window.open(fileUrl, '_blank'));
I add a button.when I click the button ,it will execut this function.
function onRequest(context) {
log.debug('exportTest');
var stringInput = 'Hello World\nHello World';
var base64EncodedString = encode.convert({
string : stringInput,
inputEncoding : encode.Encoding.UTF_8,
outputEncoding : encode.Encoding.BASE_64
});
var fileUrl = file.create({
name : 'test.txt',
fileType : file.Type.PLAINTEXT,
contents : base64EncodedString
});
log.debug('fileUrl',fileUrl);
context.response.writeFile({
file : fileUrl
});
}
I want to get a file called 'test.txt',but it return a String.
enter image description here
It appears to be returning exactly what you're asking for - that is, 'Hello World\nHello World' encoded as a base64 string. To display the original text you would need to decode again, or for this example you could just skip the encoding as it's only text anyway.
I know how to do it now.
1.add a button
function beforeLoad(scriptContext) {
if(scriptContext.type == scriptContext.UserEventType.VIEW){
var form = scriptContext.form;
form.addButton({
id: "custpage_export_test",
label: "Export Test",
functionName: 'exportExcel'
});
form.clientScriptModulePath = './export_test.js';
}
}
2.the export_test.js
function exportExcel(context) {
var suiteletURL = url.resolveScript({
scriptId:'customscript_export_excel',
deploymentId:'customdeploy_export_excel',
params:context
})
var downloadLink = document.createElement('a');
downloadLink.href = suiteletURL;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
3.the export_excel.js
function onRequest(context) {
var response = context.response;
log.debug('exportTest');
var stringInput = 'Hello World\nHello World';
var excelFile = file.create({
name: 'test.txt',
fileType: file.Type.PLAINTEXT,
contents: stringInput
});
response.writeFile(excelFile);
}
I would like to show the value from the TouchBarSlider according to where I move it to. An example example of TouchBar can be followed here. I still cannot figure out how to display the value using their given method change from TouchBarSlider.
My current main.js looks like the following.
const {app, BrowserWindow, TouchBar} = require('electron')
const {TouchBarLabel, TouchBarSlider} = TouchBar
const slider = new TouchBarSlider({label: 'angle',
minValue: 0,
maxValue: 360})
const result = new TouchBarLabel()
result.label = '30' + ' deg';
const updateBar = () => {
let timeout = 100;
if (slider.change()){
result.label = slider.values.toString() + ' deg'
}
setTimeout(updateBar, timeout)
}
const touchBar = new TouchBar([
slider, // add slider
result // add display for slider value but doesn't work yet
])
let window;
app.once('ready', () => {
window = new BrowserWindow({
width: 300,
height: 200
});
window.loadURL('about:blank')
window.setTouchBar(touchBar);
})
// Quit when all windows are closed and no other one is listening to this.
app.on('window-all-closed', () => {
app.quit();
});
I also have example repository here. You can just replace my given main.js in the project in order to try things out. My electron version is 1.6.4 and node version is 7.4.0
const { app, BrowserWindow, TouchBar } = require('electron');
const path = require('path')
const url = require('url')
const {TouchBarButton, TouchBarLabel, TouchBarSlider} = TouchBar
const result = new TouchBarLabel();
result.label = '30' + ' deg';
const slider = new TouchBarSlider({
label: 'angle',
minValue: 0,
maxValue: 360,
change: (val) => result.label = val.toString() + ' deg' // register event handler here!
});
const touchBar = new TouchBar([
slider, // add slider
result // add display for slider value
]);
let window;
app.once('ready', () => {
window = new BrowserWindow({
width: 300,
height: 200
});
window.loadURL('about:blank');
window.setTouchBar(touchBar);
});
// Quit when all windows are closed and no other one is listening to this.
app.on('window-all-closed', () => {
app.quit();
});
Working code. Hope this helps! ;)
I am serializing a canvas on the client, and post it to a node.js server (ubuntu 14.10, with node.js version v0.10.34 and fabric 1.4.13).
On the client canvas, objects are in a group.
The problem is, the objects are moved when de-serialized on the server.
Client code:
$(function(){
fc= new fabric.Canvas('myCanvas');
fc.setBackgroundColor('white');
group = new fabric.Group([], { hasControls:false, hasBorders:true, top:-fc.getHeight(), left:-fc.getWidth(), width:2*fc.getWidth(), height:2*fc.getHeight(), hoverCursor:'default' });
fc.add(group);
// create a rectangle object
var rect = new fabric.Rect({
left: 150,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// "add" rectangle onto canvas
group.add(rect);
var rect2 = new fabric.Rect({
left: 100,
top: 150,
fill: 'blue',
width: 20,
height: 20
});
group.add(rect2);
fc.renderAll();
$.post( window.location.origin+':8124/', {
width: group.getWidth(),
height: group.getHeight(),
data: encodeURI(JSON.stringify(fc.toDatalessJSON()))
}, function( data ) {}
);
});
Server code:
var fabric = require('fabric').fabric;
var express = require('express');
var app = express();
var fs = require('fs');
var PORT = 8124;
var bodyParser = require('body-parser')
app.use(bodyParser.json({ limit: '50mb'}) ); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true,
limit: '50mb'
}));
app.post('/', function(req, res){
console.log('Post received');
if (req.body) {
res.writeHead(200, { 'Content-Type': 'image/png' });
var w=parseInt(req.body.width);
var h=parseInt(req.body.height);
var canvas = fabric.createCanvasForNode(w, h);
console.log(req.body.data);
out = fs.createWriteStream(__dirname + '/mindmap.png');
canvas.loadFromDatalessJSON(decodeURI(req.body.data), function() {
canvas.renderAll();
console.log(JSON.stringify(canvas.toDatalessJSON()));
var stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
out.write(chunk);
console.log('writing chunk');
});
stream.on('end', function() {
out.end();
});
});
}
});
app.listen(PORT);
The console.log statement shows that the two rects are created (left:15, top-35) and (left:-35, top:15) respectively.
On the client, top/left object properties are relative to center of the group.
This is why I create the group with -fc.getWidth and-fc.getHeight left and top respectively. This works fine on the client.
Maybe this is not the case on the server?
EDIT: this seems to be an issue with loadFromDatalessJSON, at least on node.
Running the following code on the node server shows that top/left properties of the rectangles are wrong after serializing the first canvas and deserializing into the second one:
var fabric = require('fabric').fabric;
var fs = require('fs');
var canvas = fabric.createCanvasForNode(200, 200);
canvas.setBackgroundColor('white');
var out = fs.createWriteStream(__dirname + '/mindmap.png');
var group = new fabric.Group([], { top:-200, left:-200, width:400, height:400});
canvas.add(group);
var rect = new fabric.Rect({
left:150,
top:100,
fill:'red',
width:20,
height:20
});
group.add(rect);
var rect2 = new fabric.Rect({
left:100,
top:150,
fill:'blue',
width:20,
height:20
});
group.add(rect2);
canvas.renderAll();
console.log(JSON.stringify(canvas.toDatalessJSON()));
var canvas2 = fabric.createCanvasForNode(200, 200);
canvas2.loadFromDatalessJSON(canvas.toDatalessJSON());
canvas2.renderAll();
var stream = canvas2.createPNGStream();
stream.on('data', function(chunk) {
out.write(chunk);
console.log('writing chunk');
});
stream.on('end', function() {
out.end();
console.log('png image generated');
});
console.log(JSON.stringify(canvas2.toDatalessJSON()));
Next step is to run similar code on the client and see if the problem exists as well.
EDIT2: the same problem occurs on the client, and with toJSON as well instead of toDatalessJSON. Can someone help? Is this a known issue with groups serialization/deserialization? Is there a workaround?
Thanks
After searching for similar issues, it looks like this is very similar to [#1159] [https://github.com/kangax/fabric.js/issues/1159]
But this issue is supposed to be fixed, and I don't have any transform on my canvas ...
I had this problem and fixed it by installing the latest version from the github releases section: https://github.com/kangax/fabric.js/releases
How do I create rectangles with 4 ports (each side) in a correct way, so I can save and restore them via JSON?
I tried this one, but only the rectangles are been saved. The connections and labels got lost.
JSFiddle: http://jsfiddle.net/xfvf4/36/
Create two elements (Add) - move them and connect them
Write: This gives the content as JSON-Array
Read: Should make the grafic out of the JSON-Array
The last point doesn't work.
JS:
var LabelRectangle = draw2d.shape.basic.Rectangle.extend({
NAME: "draw2d.shape.basic.Rectangle",
init: function (attr) {
this._super(attr);
this.label = new draw2d.shape.basic.Label({
text: "Text",
fontColor: "#0d0d0d",
stroke: 0
});
this.add(this.label, new draw2d.layout.locator.CenterLocator(this));
this.label.installEditor(new draw2d.ui.LabelInplaceEditor());
this.createPort("hybrid", new draw2d.layout.locator.BottomLocator(this));
},
getPersistentAttributes: function () {
var memento = this._super();
memento.labels = [];
var ports = [];
ports = this.getPorts();
memento.ports = [];
console.log(ports);
this.children.each(function (i, e) {
console.log(e);
memento.labels.push({
id: e.figure.getId(),
label: e.figure.getText(),
locator: e.locator.NAME
});
ports.each(function (i, e) {
memento.ports.push({
//id: e.id,
name: e.name,
locator: e.locator.NAME
});
});
});
return memento;
},
setPersistentAttributes: function (memento) {
this._super(memento);
this.resetChildren();
$.each(memento.labels, $.proxy(function (i, e) {
var label = new draw2d.shape.basic.Label(e.label);
var locator = eval("new " + e.locator + "()");
locator.setParent(this);
this.add(label, locator);
}, this));
}
});
$(window).load(function () {
var canvas = new draw2d.Canvas("gfx_holder");
$("#add").click(function (e) { // Add a new rectangle
var rect = new LabelRectangle({
width: 200,
height: 40,
radius: 3,
bgColor: '#ffffff',
stroke: 0
});
rect.createPort("hybrid", new draw2d.layout.locator.OutputPortLocator(rect));
rect.createPort("hybrid", new draw2d.layout.locator.InputPortLocator(rect));
rect.createPort("hybrid", new draw2d.layout.locator.TopLocator(rect));
canvas.add(rect, 150, 200);
});
$("#write").click(function (e) { // Write to pre-Element (JSON)
var writer = new draw2d.io.json.Writer();
writer.marshal(canvas, function(json){
$("#json").text(JSON.stringify(json,null,2));
$('#gfx_holder').empty();
});
});
$("#read").click(function (e) { // Read from pre-Element (JSON)
var canvas = new draw2d.Canvas("gfx_holder");
var jsonDocument = $('#json').text();
var reader = new draw2d.io.json.Reader();
reader.unmarshal(canvas, jsonDocument);
});
});
HTML:
<ul class="toolbar">
<li>Add</li>
<li>Write</li>
<li>Read</li>
</ul>
<div id="container" class="boxed">
<div onselectstart="javascript:/*IE8 hack*/return false" id="gfx_holder" style="width:100%; height:100%; ">
</div>
<pre id="json" style="overflow:auto;position:absolute; top:10px; right:10px; width:350; height:500;background:white;border:1px solid gray">
</pre>
</div>
Just use the write.js and Reader.js in the "json"-Folder of Draw2D.js 5.0.4 and this code:
$(window).load(function () {
var canvas = new draw2d.Canvas("gfx_holder");
// unmarshal the JSON document into the canvas
// (load)
var reader = new draw2d.io.json.Reader();
reader.unmarshal(canvas, jsonDocument);
// display the JSON document in the preview DIV
//
displayJSON(canvas);
// add an event listener to the Canvas for change notifications.
// We just dump the current canvas document into the DIV
//
canvas.getCommandStack().addEventListener(function(e){
if(e.isPostChangeEvent()){
displayJSON(canvas);
}
});
});
function displayJSON(canvas){
var writer = new draw2d.io.json.Writer();
writer.marshal(canvas,function(json){
$("#json").text(JSON.stringify(json, null, 2));
});
}
This should work:
var LabelRectangle = draw2d.shape.basic.Rectangle.extend({
NAME: "draw2d.shape.basic.Rectangle",
init: function (attr) {
this._super(attr);
this.label = new draw2d.shape.basic.Label({
text: "Text",
fontColor: "#0d0d0d",
stroke: 0
});
this.add(this.label, new draw2d.layout.locator.CenterLocator(this));
this.label.installEditor(new draw2d.ui.LabelInplaceEditor());
},
getPersistentAttributes: function () {
var memento = this._super();
memento.labels = [];
memento.ports = [];
this.getPorts().each(function(i,port){
memento.ports.push({
name : port.getName(),
port : port.NAME,
locator: port.getLocator().NAME
});
});
this.children.each(function (i, e) {
memento.labels.push({
id: e.figure.getId(),
label: e.figure.getText(),
locator: e.locator.NAME
});
});
return memento;
},
setPersistentAttributes: function (memento) {
this._super(memento);
this.resetChildren();
if(typeof memento.ports !=="undefined"){
this.resetPorts();
$.each(memento.ports, $.proxy(function(i,e){
var port = eval("new "+e.port+"()");
var locator = eval("new "+e.locator+"()");
this.add(port, locator);
port.setName(e.name);
},this));
}
$.each(memento.labels, $.proxy(function (i, e) {
var label = new draw2d.shape.basic.Label(e.label);
var locator = eval("new " + e.locator + "()");
locator.setParent(this);
this.add(label, locator);
}, this));
}
});