Tuesday, August 06, 2013

New Glue: Using Angular and CSS pseudo elements

My overall plan for Rhizome is to auto-schema-generate Views - partial HTML5 ng-includes - which I have bundled up as ordered lists, combined with CSS3 pseudo elements to inject in application labels, positioning of elements and so forth. The idea is that a change to the underlying schemas should require regeneration of the Views, but not of the application.

<ol id="prescriptions">
    <li ng-repeat="prescription in pmix.response.prescriptions">
        <div class="pmpPrescription">
            <span class="pmpPrescriptionNumberText" ng-bind="prescription['pmp:PrescriptionNumberText']"></span>
            <span class="pmpDrugRefillNumberCount" ng-bind="prescription['pmp:DrugRefillNumberCount']"></span>
            <span class="pmpPrescriptionFilledDate" ng-bind="prescription['pmp:PrescriptionFilledDate']['nc:Date']"></span>
        </div>

        <div ng-repeat="prescriptionDrug in prescription['pmp:PrescriptionDrug']">
            <div class="pmpPrescriptionDrug">
                <span ng-bind="prescriptionDrug['pmp:DrugProductNameText']"></span>
                <span ng-bind="prescriptionDrug['pmp:DrugStrengthText']"></span>
                <span ng-bind="prescriptionDrug['pmp:DrugUnitOfMeasureText']"></span>
            </div> 
        </div>
    </li>

</ol>

And then the corresponding stylesheet looks like:

/* Prescription resource labels: */
.pmpPrescription::before {

   content: "Prescription #: ";        
   font-weight: bold;
}
 

.pmpPrescriptionDrug::before { 
   content: "Prescription Drug: ";
   font-weight: bold; 
}

.pmpDrugRefillNumberCount::before { 

   content: "("; 
}
 

.pmpDrugRefillNumberCount::after { 
   content: " refills)"; 
} 

And the resulting screen looks like:

Prescription #:  RX-12453 (3 refills)
Prescription Drug: Hydrocet LOW 5MG

Resource-based Mobile Links:

http://www.dfki.de/~sonntag/ubicomm10.pdf
http://www.goodreads.com/book/show/16674717-the-agile-architecture-revolution
http://sharedservices.lnwprogram.org/sites/default/files/XJC_-_Art_of_the_Possible.pdf 

No comments: