Formatting rows of a webview

Ricky D · Jan 21, 2012

I have tables that have 20+ fields and want to be able to scroll horizontal & vertical.

It seems to me that a WebView does this.

One of my tables is Fares

TableID INT, ShiftTableID INT, FareDate INT .......

How can I format the output so I see the date instead of something like 1209876502 and also format doubles to be .00 ie. 45.97 or 56.00 etc
Also to be able to show booleans as Yes/No

While I have extensive experience in VB6 and other languages Android is very new to me. I don't have any html experience so any help is much appreciated!

regards, Ricky

NJDude · Jan 21, 2012

The attached bare-bones project will give you an idea of what you could do, check it out.

Ricky D · Jan 21, 2012

thanks but....

I'd like to know how to make it look like when you load the webview with the dbutils ExecuteHTML which has top row as a header then 1 line of fields all in a horizontal direction.

Like

TableID | Fare Date | # | Start | End | Fare
1 Sat, 21-Jan-2012 2 12:45 PM 1:09 PM 45.90
2 Sat, 21-Jan-2012 1 8:56 AM 9:13 AM 6.45

Ricky D · Jan 21, 2012

Here's what I'm now doing

I've copied the ExecuteHtml sub from dbutils and am making changes

Here is the header codes so far

B4X:

   For i = 0 To cur.ColumnCount - 1
      Select i
         Case 0   'TableID
            sb.Append("<th>").Append("ID ").Append("</th>")
         Case 1   'FareDate
            sb.Append("<th>").Append("Fare Date").Append("</th>")
         Case 2   'FareHash
            sb.Append("<th>").Append("#").Append("</th>")
         Case 3   'TimeStart
            sb.Append("<th>").Append("Time Start").Append("</th>")
         Case 4   'TimeEnd
            sb.Append("<th>").Append("Time End").Append("</th>")
         Case 5   'Customer
            sb.Append("<th>").Append("Customer").Append("</th>")
         
         Case Else
            sb.Append("<th>").Append(cur.GetColumnName(i)).Append("</th>")
      End Select
   Next

Is there a way to set each column to a specific width?

Here is the code for formatting fields so far

B4X:

   For row = 0 To Limit - 1
      cur.Position = row
      If row Mod 2 = 0 Then
         sb.Append("<tr>")
      Else
         sb.Append("<tr class='odd'>")
      End If
      For i = 0 To cur.ColumnCount - 1
         sb.Append("<td>")
         If Clickable Then
            sb.Append("<a href='http://").Append(i).Append(".")
            sb.Append(row)
            Select i
               Case 1   'FareDate
                  sb.Append(".com'>").Append(u.LongDateString(cur.GetLong("FareDate"))).Append("</a>")
               Case 5   'Customer
                  sb.Append(".com'>").Append(u.GetCustomerName(cur.GetInt("CustomerID"))).Append("</a>")
               Case Else
                  sb.Append(".com'>").Append(cur.GetString2(i)).Append("</a>")
            End Select
         Else
            sb.Append(cur.GetString2(i))
         End If
         sb.Append("</td>")
      Next
      sb.Append("</tr>").Append(CRLF)
   Next

It's doin it all ok but the date gets squeezed on the screen and uses 3 lines
plus TimeStart and TimeEnd are narrow and using up 2 lines

I'm using the css that's in DbUtils but I don't have much of an idea what it all means.

Where or how do I specify column widths?

regards, Ricky

warwound · Jan 21, 2012

Take a look here: HTML and CSS Table Border Style Wizard

That's a wizard that you can experiment with and generate some skeletal HTML to use in your code.

A table cell has no official width attribute, a table and it's cells generally shrink or expand to 'best fit' the contents.

If you specify a width for the table (not cell) element it will take up 100% of the available space in the WebView instead of shrinking to fit the contents:

B4X:

<table width="100%">

If you want to prevent word wrap in a cell then this CSS will (try to) do that:

B4X:

table td{
   white-space:nowrap;
}

And if you do still want to fix the width of a cell then wrap the cell contents in an HTML element that supports the width atribute - a 'div' or a 'p' element both support the width attribute.

So to put all that together:

B4X:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
   width: 100%;
}
table td {
   white-space: nowrap;
}
table td p {
   width: 400px;
}
</style>
</head>
<body>
<table border="1">
   <tr>
      <td><p>Words and spaces in a block level element</p></td>
      <td>Words and spaces</td>
   </tr>
</table>
</body>
</html>

Be sure to also check out the table border-collapse attribute: CSS border-collapse property

Martin.

Ricky D · Jan 21, 2012

thanks

but I can't get it to work.

This is what I'm doing

Fare_Date______ Start_____ End________
Sat, 20-Dec-2012 8:56 AM 9:13 AM

The _'s force padding and it all lines up. It will have to do.

This app is one I'm making for my own use and maybe a few of the other drivers who have android phones. I won't be publishing this because there's no use for it outside of what I am doing - driving a limousine and it's written specifically for the company I work through.

regards, Ricky

P.s One of the reasons I'm switching from Windows Phone 7 to Android is that on Windows 7 you are limited in how many developer apps you make for your own use to go on the phone. Do you know if Android has the same issues?

Ricky D · Jan 21, 2012

My finished ExecuteHTML sub

Here is all the code for this table

B4X:

Sub ExecuteHtml(SQL As SQL, Query As String, StringArgs() As String, Limit As Int, Clickable As Boolean) As String
   Dim Table As List
   Dim cur As Cursor
   If StringArgs <> Null Then 
      cur = SQL.ExecQuery2(Query, StringArgs)
   Else
      cur = SQL.ExecQuery(Query)
   End If
   Log("ExecuteHtml: " & Query)
   If Limit > 0 Then Limit = Min(Limit, cur.RowCount) Else Limit = cur.RowCount
   Dim sb As StringBuilder
   sb.Initialize
   sb.Append("<html><body>").Append(CRLF)
   sb.Append("<style type='text/css'>").Append(HtmlCSS).Append("</style>").Append(CRLF)
   sb.Append("<table><tr>").Append(CRLF)
   For i = 0 To cur.ColumnCount - 1
      Select i
         Case 0   'TableID
            sb.Append("<th>").Append("ID").Append("</th>")
         Case 1   'FareDate
            sb.Append("<th>").Append("Fare_Date________").Append("</th>")
         Case 2   'FareHash
            sb.Append("<th>").Append("#_").Append("</th>")
         Case 3   'TimeStart
            sb.Append("<th>").Append("Time_Start").Append("</th>")
         Case 4   'TimeEnd
            sb.Append("<th>").Append("Time_End__").Append("</th>")
         Case 5   'Customer
            sb.Append("<th>").Append("Customer________").Append("</th>")
         Case 6   'JobNo
            sb.Append("<th>").Append("Job_No").Append("</th>")
         Case 7   'Pickup
            sb.Append("<th>").Append("Pickup__________").Append("</th>")
         Case 8   'Dropoff
            sb.Append("<th>").Append("Dropoff_________").Append("</th>")
         Case 9   'MeteredFareType
            sb.Append("<th>").Append("MFType").Append("</th>")
         Case 10   'MeteredFareAmount
            sb.Append("<th>").Append("MFAmount").Append("</th>")
         Case 11   'AccountMetered
            sb.Append("<th>").Append("MFAccount").Append("</th>")
         Case 12   'UnmeteredFareType
            sb.Append("<th>").Append("UFType").Append("</th>")
         Case 13   'UnmeteredFareAmount
            sb.Append("<th>").Append("UFAmount").Append("</th>")
         Case 14   'AccountUnmetered
            sb.Append("<th>").Append("UFAccount").Append("</th>")
         Case 15   'ClientTolls
            sb.Append("<th>").Append("Tolls").Append("</th>")
         Case 16   'ClientTollCount
            sb.Append("<th>").Append("Count").Append("</th>")
         Case 17   'PersonalTolls
            sb.Append("<th>").Append("PersTolls").Append("</th>")
         Case 18   'BookingType
            sb.Append("<th>").Append("Booking").Append("</th>")      
         Case 19   'ShiftTableID
            sb.Append("<th>").Append("ShiftID").Append("</th>")      
         Case Else
            sb.Append("<th>").Append(cur.GetColumnName(i)).Append("</th>")
      End Select
   Next
   sb.Append("</tr>").Append(CRLF)
   For row = 0 To Limit - 1
      cur.Position = row
      If row Mod 2 = 0 Then
         sb.Append("<tr>")
      Else
         sb.Append("<tr class='odd'>")
      End If
      For i = 0 To cur.ColumnCount - 1
         sb.Append("<td>")
         If Clickable Then
            sb.Append("<a href='http://").Append(i).Append(".")
            sb.Append(row)
            Select i
               Case 1   'FareDate
                  sb.Append(".com'>").Append(u.LongDateString(cur.GetLong("FareDate"))).Append("</a>")
               Case 5   'Customer
                  sb.Append(".com'>").Append(u.GetCustomerName(cur.GetInt("CustomerID"))).Append("</a>")
               Case 7   'Pickup
                  sb.Append(".com'>").Append(u.GetSuburb(cur.GetInt("PickupID"))).Append("</a>")
               Case 8   'Dropoff
                  sb.Append(".com'>").Append(u.GetSuburb(cur.GetInt("DropoffID"))).Append("</a>")
               Case 10   'MeteredFareAmount
                  sb.Append(".com'>").Append(u.DoubleToString(cur.GetDouble("MeteredFareAmount"))).Append("</a>")
               Case 11   'AccountMetered
                  sb.Append(".com'>").Append(u.GetAccountName(cur.GetInt("AccountMeteredID"))).Append("</a>")
               Case 13   'UnmeteredFareAmount
                  sb.Append(".com'>").Append(u.DoubleToString(cur.GetDouble("UnmeteredFareAmount"))).Append("</a>")
               Case 14   'AccountUnmetered
                  sb.Append(".com'>").Append(u.GetAccountName(cur.GetInt("AccountUnmeteredID"))).Append("</a>")
               Case 15   'ClientTolls
                  sb.Append(".com'>").Append(u.DoubleToString(cur.GetDouble("ClientTolls"))).Append("</a>")
               Case 17   'PersonalTolls
                  sb.Append(".com'>").Append(u.DoubleToString(cur.GetDouble("PersonalTolls"))).Append("</a>")
               Case 18   'BookingType
                  sb.Append(".com'>").Append(u.GetBookingType(cur.GetInt("BookingTypeID"))).Append("</a>")
               Case Else
                  sb.Append(".com'>").Append(cur.GetString2(i)).Append("</a>")
            End Select
         Else
            sb.Append(cur.GetString2(i))
         End If
         sb.Append("</td>")
      Next
      sb.Append("</tr>").Append(CRLF)
   Next
   cur.Close
   sb.Append("</table></body></html>")
   Return sb.ToString
End Sub

warwound · Jan 21, 2012

Can you post the String that your Sub ExecuteHtml returns?

With just one or two table rows would do - remove any personal info obviously - so i can see the structure of your table.

And if you can also post your HtmlCSS String too then i'll take a look.

Martin.

Ricky D · Jan 21, 2012

How do I get the html code?

Thanks for your help Martin.

How do I capture the HTML that generates the table?

cheers, Ricky

warwound · Jan 21, 2012

Update your code so that it writes the String to a file:

B4X:

    '  edit the end of the Sub to
    
    sb.Append("</table></body></html>")
    File.WriteString(File.DirRootExternal, "html.txt", sb.ToString)
    Return sb.ToString

You should then be able to find html.txt in the root folder of your device's memory card.

Martin.

Ricky D · Jan 21, 2012

Martin, this came from the log.
I don't know how to mark only the bits you need

B4X:

LogCat connected to: emulator-5554
** Activity (main) Create, isFirst = true **


** Activity (main) Resume **


** Activity (main) Pause, UserClosed = false **
** Activity (atest) Create, isFirst = true **
ExecuteMemoryTable: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
ExecuteHtml: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
** Activity (atest) Resume **
** Activity (atest) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = true **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (atest) Create, isFirst = true **
ExecuteMemoryTable: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
ExecuteHtml: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
** Activity (atest) Resume **
** Activity (atest) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = true **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (atest) Create, isFirst = true **
ExecuteMemoryTable: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
ExecuteHtml: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
** Activity (atest) Resume **
** Activity (atest) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = true **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (atest) Create, isFirst = true **
ExecuteMemoryTable: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
ExecuteHtml: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
** Activity (atest) Resume **
** Activity (atest) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = true **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (atest) Create, isFirst = true **
ExecuteMemoryTable: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
ExecuteHtml: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares


** Activity (atest) Resume **
** Activity (atest) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (fares) Create, isFirst = true **
Head
** Activity (fares) Resume **
** Activity (fares) Pause, UserClosed = false **
** Activity (fareedit) Create, isFirst = true **
** Activity (fareedit) Resume **
InsertMaps (first query out of 1): INSERT INTO [Fares] ([TableID], [FareDate], [FareHash], [TimeStart], [TimeEnd], [CustomerID], [JobNo], [PickupID], [DropoffID], [MeteredFareType], [MeteredFareAmount], [AccountMeteredID], [UnmeteredFareType], [UnmeteredFareAmount], [AccountUnmeteredID], [ClientTolls], [ClientTollCount], [PersonalTolls], [BookingTypeID], [ShiftTableID]) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
** Activity (fareedit) Pause, UserClosed = true **
** Activity (fares) Resume **
** Activity (fares) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (atest) Create, isFirst = false **
ExecuteMemoryTable: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
ExecuteHtml: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares
** Activity (atest) Resume **
** Activity (atest) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = true **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (atest) Create, isFirst = true **
ExecuteMemoryTable: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares ORDER BY FareDate DESC, FareHash DESC
ExecuteHtml: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares ORDER BY FareDate DESC, FareHash DESC
** Activity (atest) Resume **
** Activity (atest) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (atest) Create, isFirst = false **
ExecuteMemoryTable: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares ORDER BY FareDate DESC, FareHash DESC
ExecuteHtml: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares ORDER BY FareDate DESC, FareHash DESC
** Activity (atest) Resume **
** Activity (atest) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (fares) Create, isFirst = true **
Head
** Activity (fares) Resume **
ExecuteMap: Select * From Fares Where TableID=2
** Activity (fares) Pause, UserClosed = false **
** Activity (fareedit) Create, isFirst = true **
** Activity (fareedit) Resume **


** Activity (fareedit) Pause, UserClosed = true **
** Activity (fares) Resume **
** Activity (fares) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (atest) Create, isFirst = false **
ExecuteMemoryTable: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares ORDER BY FareDate DESC, FareHash DESC
ExecuteHtml: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares ORDER BY FareDate DESC, FareHash DESC
** Activity (atest) Resume **
** Activity (atest) Pause, UserClosed = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = true **
** Activity (main) Create, isFirst = true **


** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (atest) Create, isFirst = true **
ExecuteMemoryTable: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares ORDER BY FareDate DESC, FareHash DESC
ExecuteHtml: SELECT TableID,FareDate,FareHash,TimeStart,TimeEnd,CustomerID,JobNo,PickupID,DropoffID,MeteredFareType,MeteredFareAmount,AccountMeteredID,UnmeteredFareType,UnmeteredFareAmount,AccountUnmeteredID,ClientTolls,ClientTollCount,PersonalTolls,BookingTypeID,ShiftTableID FROM Fares ORDER BY FareDate DESC, FareHash DESC
<html><body>
<style type='text/css'>table {width: 100%;border: 1px solid #cef;text-align: left; } th { font-weight: bold;   background-color: #acf;   border-bottom: 1px solid #cef; }td,th {   padding: 1px 2px; border-style: dotted; }.odd {background-color: #def; border-style: dotted;} .odd td {border-bottom: 1px solid #cef; border-style: dotted;}a { text-decoration:none; color: #000;}</style>


<table><tr>
<th>ID</th><th>Fare_Date________</th><th>#_</th><th>Time_Start</th><th>Time_End__</th><th>Customer________</th><th>Job_No</th><th>Pickup__________</th><th>Dropoff_________</th><th>MFType</th><th>MFAmount</th><th>MFAccount</th><th>UFType</th><th>UFAmount</th><th>UFAccount</th><th>Tolls</th><th>Count</th><th>PersTolls</th><th>Booking</th><th>ShiftID</th></tr>
<tr><td><a href='http://0.0.com'>2</a></td><td><a href='http://1.0.com'>Sat, 21-Jan-2012</a></td><td><a href='http://2.0.com'>1</a></td><td><a href='http://3.0.com'>05:06 PM</a></td><td><a href='http://4.0.com'>05:10 PM</a></td><td><a href='http://5.0.com'>Cross Country Tours</a></td><td><a href='http://6.0.com'>6352</a></td><td><a href='http://7.0.com'>Cleveland</a></td><td><a href='http://8.0.com'>Moorooka</a></td><td><a href='http://9.0.com'>Account</a></td><td><a href='http://10.0.com'>89.45</a></td><td><a href='http://11.0.com'>Cross Country Tours</a></td><td><a href='http://12.0.com'>Account</a></td><td><a href='http://13.0.com'>20.00</a></td><td><a href='http://14.0.com'>Cross Country Tours</a></td><td><a href='http://15.0.com'>0.00</a></td><td><a href='http://16.0.com'>0</a></td><td><a href='http://17.0.com'>0.00</a></td><td><a href='http://18.0.com'>Cross Country Tour</a></td><td><a href='http://19.0.com'>3</a></td></tr>
<tr class='odd'><td><a href='http://0.1.com'>1</a></td><td><a href='http://1.1.com'>Thu, 19-Jan-2012</a></td><td><a href='http://2.1.com'>1</a></td><td><a href='http://3.1.com'>08:01 PM</a></td><td><a href='http://4.1.com'>08:02 PM</a></td><td><a href='http://5.1.com'>Adele</a></td><td><a href='http://6.1.com'>1234</a></td><td><a href='http://7.1.com'>City</a></td><td><a href='http://8.1.com'>Albion</a></td><td><a href='http://9.1.com'>Account</a></td><td><a href='http://10.1.com'>96.00</a></td><td><a href='http://11.1.com'>Agility</a></td><td><a href='http://12.1.com'>Cash</a></td><td><a href='http://13.1.com'>20.00</a></td><td><a href='http://14.1.com'>UGL</a></td><td><a href='http://15.1.com'>8.00</a></td><td><a href='http://16.1.com'>1</a></td><td><a href='http://17.1.com'>2.35</a></td><td><a href='http://18.1.com'>Time</a></td><td><a href='http://19.1.com'>2</a></td></tr>
</table></body></html>
** Activity (atest) Resume **

regards, Ricky

warwound · Jan 21, 2012

It looks like if you remove all those underscores and add just this line to your CSS then it all displays acceptably:

B4X:

td, th{
  border-style:dotted;
  padding:1px 2px;
  white-space: nowrap; /* i added just this line */
}

Here's my version - check your browser's View Source to see the code itself: Untitled Document

Martin.

Ricky D · Jan 21, 2012

Thanks!!

:sign0098:

Thanks heaps Martin. That simple line fixes it.

Now my headings are padded with spaces where needed and it works perfect.

Now I have to figure what I'm going to do when I press on one of them.

I'll have a look at a dialog.

The choices would be Add New, Edit or Delete

I already have the code to get the tableid from a click.

Cheers, Ricky

warwound · Jan 21, 2012

I'm not sure how you want things to work but here's a suggestion...

You Sub ExecuteHtml creates clickable anchor links with what looks like the row and column indexes.
You could update the links to pass the row and column indexes to your B4A code.
You'll need my WebViewExtras library: http://www.b4x.com/forum/additional-libraries-official-updates/12453-webviewextras.html#post70053

Add a javascript interface to your WebView:

B4X:

Sub Process_Globals
   Dim WebViewExtras1 As WebViewExtras
End Sub

Sub Activity_Create(FirstTime As Boolean)
   WebViewExtras1.addJavascriptInterface(webView1, "B4A")
End Sub

Sub CellClickHandler(ColumnStr As String, RowStr As String)
   Dim Column, Row As Int
   Column=ColumnStr
   Row=RowStr
   ' now handle the cell click in your B4A code
End Sub

Now update Sub ExecuteHtml so that it produces links with this format:

B4X:

<!-- an example link from column 4, row 1 of your table -->
<td><a href="javascript:void(0)" onclick="B4A.CallSub('CellClickHandler', '4', '1')">08:02 PM</a></td>

Martin.

warwound · Jan 21, 2012

:signOops:

I missed out a parameter from the link javascript:

Now update Sub ExecuteHtml so that it produces links with this format:

B4X:

<!-- an example link from column 4, row 1 of your table -->
<td><a href="javascript:void(0)" onclick="B4A.CallSub('CellClickHandler', true, '4', '1')">08:02 PM</a></td>

As a link click is likely to result in a change to your UI you pass true for the callUIThread parameter in CallSub.

Martin.

Ricky D · Jan 21, 2012

not working

B4X:

   For row = 0 To Limit - 1
      cur.Position = row
      If row Mod 2 = 0 Then
         sb.Append("<tr>")
      Else
         sb.Append("<tr class='odd'>")
      End If
      For i = 0 To cur.ColumnCount - 1
         sb.Append("<td>")
         If Clickable Then
            sb.Append("<a href='javascript:void(0)' onclick='B4A.CallSub('CellClickHandler',true," & i & "," & row & ")'>")
            'sb.Append("<a href='http://").Append(i).Append(".")
            'sb.Append(row)
            Select i
               Case 1   'FareDate
                  'sb.Append(".com'>").Append(u.LongDateString(cur.GetLong("FareDate"))).Append("</a>")
                  sb.Append(u.LongDateString(cur.GetLong("FareDate"))).Append("</a>")

I don't know how to construct the sub call line = how do I put the " in??

warwound · Jan 21, 2012

I think you need to escape the single quotes within the onclick string like this:

B4X:

sb.Append("<a href='javascript:void(0)' onclick='B4A.CallSub(\'CellClickHandler\',true," & i & "," & row & ")'>")

If you still have problems then you might need to enclose the colum and row values with escaped single quotes too:

B4X:

sb.Append("<a href='javascript:void(0)' onclick='B4A.CallSub(\'CellClickHandler\',true,\'" & i & "\',\'" & row & "\')'>")

(CallSub should only be passed String values - but if the values are passed as Integers then the compiler or javascript interface may automatically cast them to String type for you, i'm not sure on that).

If you add the WebChromeClient to your WebView then any errors such as this would be easily debuggable as they would show in the log:

B4X:

WebViewExtras1.addWebChromeClient(webView1)

With the WebChromeClient added you can now also use javascript modals in your webpage - alert and confirm boxes are examples of javascipts modals.

Martin.

junaidahmed · Mar 21, 2012

Thanks for your quick replay,but we need some example code for getting cell value from HTML Table.

Ricky D · Mar 21, 2012

When I get up tomorrow morning (in about 16 hours) I'll post the code I use to populate the webview and how to access the data from a click.

Regards Ricky

Ricky D · Mar 22, 2012

Here is the entire code for one of my activities.

This activity loads a webview with an Sqlite query.

It shows how to extract either a full row of data and even isolate it to a specific column.

Any question s just ask. I hope it helps.

B4X:

'Activity module
Sub Process_Globals
   'These global variables will be declared once when the application starts.
   'These variables can be accessed from all modules.

End Sub

Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
   Dim lRecCount As Label
   Dim WebView1 As WebView 
   Dim HtmlCSS As String
   HtmlCSS = "table {width: 100%;border: 1px solid #cef;text-align: left; }" & _
       " th { font-weight: bold;   background-color: #acf;   border-bottom: 1px solid #cef; }" & _ 
       "td,th {   padding: 1px 2px; border-style: dotted; white-space: nowrap}" & _
       ".odd {background-color: #def; border-style: dotted;} .odd td {border-bottom: 1px solid #cef; border-style: dotted;}" & _
       "a { text-decoration:none; color: #000;}"
       
   Dim listTolls As List 
End Sub

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("layoutTolls")
   
   Activity.AddMenuItem("Add New","AddNew")

   WebView1.ZoomEnabled = False
End Sub

Sub Activity_Resume
   LoadTolls
End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub LoadTolls
   Dim s As String
   s = "SELECT Id,TollDate,TollWhereID,Amount FROM Tolls ORDER BY TollDate DESC"
   listTolls = DBUtils.ExecuteMemoryTable(u.mySQL,s,Null,0)
   
   If listTolls.Size=1 Then
      lRecCount.Text = "There is 1 Toll"
   Else
      lRecCount.Text = "There are " & listTolls.Size & " Tolls"
   End If
   
   WebView1.LoadHtml(ExecuteHtml(0))
End Sub

Sub AddNew_Click
   u.Toll.Initialize
   u.Toll.Id = u.NextTableID("Tolls")
   u.Toll.TollDate = u.ShiftDate
   u.Toll.TollWhereID = 0
   u.Toll.Amount = 0.00
   u.Toll.AddingNew = True
   
   StartActivity(TollEdit)
End Sub

Sub WebView1_OverrideUrl (Url As String) As Boolean
   'parse the row and column numbers from the URL
   Dim values() As String
   values = Regex.Split("[.]", Url.SubString(7))
   Dim col, row As Int
   col = values(0)
   row = values(1)
   
   Dim TableID As Int
   Dim Record() As String
   
   Record = listTolls.Get(row)
   TableID = Record(0)
   
   Dim result As Int

   result = Msgbox2("You have selected Toll on " & u.DateStringLongFormat(Record(1)),"Choose","Edit","Delete","Cancel",Null)
   
   Dim s As String 
   
   Select result
      Case DialogResponse.POSITIVE
         u.Toll.Initialize
         u.Toll.Id = Record(0)
         u.Toll.TollDate= Record(1)
         u.Toll.TollWhereID = Record(2)
         u.Toll.Amount = Record(3)
         
         u.Toll.AddingNew = False
         
         StartActivity(TollEdit)
         
      Case DialogResponse.CANCEL
         If Msgbox2("Are you sure you want to Delete Toll on " & u.DateStringLongFormat(Record(1)) & "?","Confirm Delete","Yes","","No",Null)=DialogResponse.POSITIVE Then
            u.mySQL.ExecNonQuery("DELETE FROM Tolls WHERE Id=" & TableID)
            u.FixLastID("Tolls")
            LoadTolls
         End If

   End Select
   
   Return True 'Don't try to navigate to this URL
End Sub

Sub ExecuteHtml(Limit As Int) As String
   If Limit > 0 Then Limit = Min(Limit, listTolls.size) Else Limit = listTolls.size
   Dim sb As StringBuilder
   sb.Initialize
   sb.Append("<html><body>").Append(CRLF)
   sb.Append("<style type='text/css'>").Append(HtmlCSS).Append("</style>").Append(CRLF)
   sb.Append("<table><tr>").Append(CRLF)
   'Create the header line

   'TableID
   sb.Append("<th>").Append("Id").Append("</th>")
   'TollDate
   sb.Append("<th>").Append("Toll Date").Append("</th>")
   'TollWhere
   sb.Append("<th>").Append("Toll Where").Append("</th>")
   'Amount
   sb.Append("<th>").Append("Amount").Append("</th>")

   sb.Append("</tr>").Append(CRLF)
   
   'Create the rows
   For row = 0 To Limit - 1
      If row Mod 2 = 0 Then
         sb.Append("<tr>")
      Else
         sb.Append("<tr class='odd'>")
      End If

      Dim Record() As String
      Record = listTolls.Get(row)
      For i = 0 To Record.Length - 1
         sb.Append("<td>")
         sb.Append("<a href='http://").Append(i).Append(".")
         sb.Append(row)
         If i=1 Then      'TollDate
            sb.Append(".com'>").Append(u.DateStringLongFormat(Record(1))).Append("</a>")
         Else If i=2 Then   'TollWhere
            sb.Append(".com'>").Append(u.GetTollWhere(Record(2))).Append("</a>")
         Else If i=3 Then    'Amount
            sb.Append(".com'>").Append(u.DoubleToString(Record(3))).Append("</a>")
         Else
            sb.Append(".com'>").Append(Record(i)).Append("</a>")
         End If
         sb.Append("</td>")
      Next
      sb.Append("</tr>").Append(CRLF)
   Next
   sb.Append("</table></body></html>")
   
   Log(sb.ToString)
   Return sb.ToString
End Sub

regards, Ricky

Formatting rows of a webview

Well-Known Member

Expert

Attachments

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Well-Known Member