LateNite

Sunday, January 5, 2020

Custom components as simple Access-Database

I've made some components that receive data from server and displays results in a table or form. By emitting and receiving events I can emulate quite a bit of the functionality from Access on a webpage - with the user just having to know some html - css and sql.

All components assume security is handled by the server - sessions and users must be handled as appropriate. In the examples I'll use an endpoint /runsql that just executes and returns any sql you might throw at it. Very nice for testing, but replace with more specific endpoints and security.

One component - DbInsert - will show a form that can be submitted to insert a row.

Very straight forward if the underlying table has no foreign keys. I'll come back to this component after introducing some others first.

DbForeign is intended to select a foreign key from a table. Can be used as a sub component in DbInsert and others. It shows up as a select element populated by given sql param.

DbTable is the main display component. It takes a query and a list of fields to show. The fields are used to construct headers for the table and the query fills in the rows.

DbUpdate is much like DbInsert, but updates existing posts. This component has built in navigation (that can be disabled).

DbUser simply tries to get info about current user. Can then be depended on by other components so that we fetch data for this user.

Most components listen for dbUpdate event that is emitted by DbInsert and DbUpdate on save, and by DbTable on row select. DbForeign emits this event on selection change.

DbUpdate and DbTable can depend on other components - on dbUpdate they will rerun the sql with the depended component used in a tagged on where clause. This only happens if the original sql does not include a where clause.

Putting these components together I can emulate a Form - sub-form and other structures from Access.

In this form I have a DbUser that is depended on by a DbTable.

On select of a row in the table the DbInsert below is activated (depends on the table).

The DbTable below the insert also depends on selected row and responds to update events from the DbInsert, thus showing current rows.

Finally a simple DbTable with a aggregate sql shows the total cost for this order.

Note the checkmarks and x button in the tables. Selected rows can be deleted. This also triggers a dbUpdate event - connected components requery and repaint.

Tuesday, November 10, 2015

Grunnleggende css

En kort oversikt over egenskaper som du bør kjenne til i css

  #myid {  /* et element med id="myid" */

    position:absolute;

    width:200px;

    height:200px;

    background: red;

    border: solid green 1px;

  .myclass {  /*  flere elementer med class="myclass" */

    position:relative;

    color:red;

    left: 0px;

    top: 30px;

   span {   /* alle span for 20% større skrift */

     font-size:1.2em;

   #knapp {

     background:blue;

   #knapp:hover {

     background:green;

Merk at vi her bruker tre forskjellige regler, en for et element med id, en for mange elementer med class og en for elementer av en gitt type (span).

Legg merke til at elementet knapp vil skifte farge til grønn når bruker plasserer peker over den.

Du bør også kjenne til funksjonene

rgb( rød,grønn,blå)
rgba( rød, grønn, blå, alpha)

Basis-struktur for en html side


<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="calendar.css">
  <script src="calendar.js"></script>
 </head>
 <body>
  <!-- buttons -->
  <button type="button" class="mybutton" id="prev_year"> &lt; </button>
  <button type="button" class="mybutton" id="next_year"> &gt; </button>
  <button type="button" class="mybutton" id="prev_month"> &lt; </button>
  <button type="button" class="mybutton" id="next_month"> &gt; </button>
  
  <!-- text display -->
  <div class="mytext" id="year">2015</div>  
  <div class="mytext" id="month">oktober</div>
  
  <!-- navn paa ukedager -->
  <div id="ukedager"></div>
  
  <!-- rammen rundt datoer (1..31) -->
  <div id="datoer"></div>
  
  <!-- en liten editor -->
  <div id="tinyed"></div>
  
  <script>
   // start script som tegner calendar
   setup();
  </script>
 </body>
</html>

Ting du bør merke deg med dette eksempelet

charset utf-8 er nødvendig for å kunne bruke øæå
bruk link til å koble sammen html + css
bruk script tag til å koble html + js
bruk kommentarer til å gruppere/forklare