Formatting rows of a webview

Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
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
 
Sort by date Sort by votes
Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0
Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0
warwound

warwound

Expert
Licensed User
Longtime User
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.
 
Upvote 0
Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
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?
 
Upvote 0
Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0
warwound

warwound

Expert
Licensed User
Longtime User
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.
 
Upvote 0
Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
How do I get the html code?

Thanks for your help Martin.

How do I capture the HTML that generates the table?

cheers, Ricky
 
Upvote 0
warwound

warwound

Expert
Licensed User
Longtime User
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.
 
Upvote 0
Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0
warwound

warwound

Expert
Licensed User
Longtime User
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.
 
Upvote 0
Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0
warwound

warwound

Expert
Licensed User
Longtime User
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.
 
Upvote 0
warwound

warwound

Expert
Licensed User
Longtime User
: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.
 
Upvote 0
Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
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??
 
Last edited:
Upvote 0
warwound

warwound

Expert
Licensed User
Longtime User
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.
 
Upvote 0
Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0
Ricky D

Ricky D

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0
You must log in or register to reply here.

Similar Threads

bsnqt
  • Question
Android Question Clickable Text on WebView?
Replies
19
Views
2K
FrostCodes
FrostCodes
Sagenut
  • Article
Android Tutorial Widget Layout (Resizable, Adaptive)
Replies
13
Views
6K
Sagenut
Sagenut
M
  • Question
Android Question convert webview layout to PDF
Replies
2
Views
2K
Makumbi
M
manuaaa
  • Question
Android Question OPENING WEBVIEW BY CLICKING HTML TABLE CELL DATA
Replies
15
Views
3K
klaus
klaus
manuaaa
  • Question
Android Question WEBVIEW CLICK EVENT
Replies
1
Views
2K
klaus
klaus
Top