Designed Tables - with lines to seperate cells.. (like a excel sheet)

[jog...@googlemail.com]

I would like to create a designed schedule me for my lessons, like a table, with lines to separate each cell from the other..
i think fusiontable looks nice, but i could not create lines between the cells..

Maybe this sounds weird, but i dont like to use a canvas to place text in it, or do i have to do this way?

[SteveJG]

Taifun's suggestion may work for you  http://puravidaapps.com/table.php

(edit: link updated to App Inventor 2 version of the example)

alternatively, you can use a Canvas with a grill of lines and place text in it as you proposed

or   you can make a very nice schedule, just using a single label    and using  the control character "   \n   " to change line position (using it in a text string is like a carriage-return).

No lines, but it is formatted.

For instance:

This is my lesson for Friday \n this is my lesson for Monday \n this is my lesson for Tuesday will display the following in a label:

This is my lesson for Friday

 this is my lesson for Monday

this is my lesson for Tuesday

if you put two /n/n you get 

This is my lesson for Friday

 this is my lesson for Monday

this is my lesson for Tuesday

Regards,

Steve

[Scott Ferguson]

> This < AI Classic example basically does what you are talking about.

The key thing I want you to see there is that you can create your table using horizontal and vertical screen arrangements which contain labels set either to:

Width = 1 and height = fill parent (vertical line) or Width = fill parent and height = 1 (horizontal line) and BackgroundColor = Black

You can nest the screen arrangements with these line labels around the TextBoxes or Labels to display your lesson info.

---

Scott Ferguson

[Greg Jensen]

I've found that nesting horizontal and vertical arrangements is far more flexible and controllable than using a table arrangement. If does get a bit confusing and you can scare/surprise yourself in the designer as things change shape (undo would be really helpful here!). Set both width and height of things to 'fill parent' right away then switch back and watch.

If you really need some screen formatting power then dump in a webviewer. Create the table (or whatever you need) with HTML. Add the HTML file to your app and set the file into the webview. You can even pass data back and forth out of the web view.  I think Taifun has an example.  Heck you could probably even build the HTML in your app, save it as a file and put the file into the webview.  Hmmm... 

[Jogie H.B.]

how would you create a grill of lines in a canvas? did you make this anywhere? like to see that..

[SteveJG]

@ Jogie H.B.     

Put the grid on the Canvas.Background 

You can:

1) get one from the Internet .... search for something like  6 x 6 grid png     or jpg     Be sure to get one that is free or free for non-commercial use.

2) you can make one using a drawing program like paint  This allows you to use different size rectangles

3) you can have a graphic artist draw one for you and pay him.

You can have the most fun with # 1 and 2.

Then use the canvas text to place the text.

Taifun's method  may be  easiest for posting  most data; it uses an html kludge and is very flexible.  There are several places  that explains how to format html tables in different colors etc...;  

Try  http://www.w3schools.com/html/html_tables.asp

http://www.tjhsst.edu/~dhyatt/superap/tables.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

http://www.the-art-of-web.com/html/table-markup/

 from the art of web.com

You do not have to use the nice template Taifun provides in his example.  You can get very creative and use your own html template.

 Be aware, Scott's method mentioned above with 'an example' is incomplete.   You need more code than what is posted at the AI Classic link he posted.

I prefer using a label formatted with tabs and  \n to present most tabular data.  It is the simplest method  (see the columnar out put in the LocationSensor tutorial here http://appinventor.mit.edu/explore/ai2/location-sensor.html

Look at the code for .the GPS Accuracy Logger       or Download the Source File (.aia) for GPS Accuracy Logger  

This method is simple;not elegant, just easy to replicate.

Use what works well for your Project and you.

Regards,

Steve

[Abraham Getzler]

Here's a link to a screenshot of a routine to draw a grid
on a canvas, in my App Inventor 1 Hidato Helper app.

The blocks should be very similar in AI2.

That doc also covers routines for writing inside the cells of the grid.

https://docs.google.com/document/d/19QpYv2S8ptmSIBJ7ar--aFj3wUNc08RymHlyo-UbWng/edit#heading=h.d5dsc583qjw9

ABG